/* Self-hosted fonts (SIL OFL) */
@font-face { font-family: "Archivo"; src: url(../fonts/archivo-wdth.woff2) format("woff2-variations"), url(../fonts/archivo-wdth.woff2) format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(../fonts/plex-sans-400-normal.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(../fonts/plex-sans-400-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(../fonts/plex-sans-500-normal.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url(../fonts/plex-sans-600-normal.woff2) format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(../fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ==========================================================================
   Verton Estimator: light theme
   Soft light grey base, navy ink, Verton orange (#FE7400).
   Neumorphic surfaces (raised / inset) + glass layers over imagery.
   ========================================================================== */

:root {
  --bg: #eceff3;
  --bg-2: #e4e8ee;
  --surface: #eef1f5;
  --white: #ffffff;
  --ink: #0d1626;
  --ink-2: #2a3547;
  --muted: #5b687b;
  --line: rgba(13, 22, 38, 0.10);
  --line-2: rgba(13, 22, 38, 0.16);
  --orange: #fe7400;
  --orange-2: #ff8a26;
  --orange-ink: #1c0c00;
  --orange-soft: rgba(254, 116, 0, 0.10);
  --navy: #0d1626;
  --navy-2: #17243b;
  --ok: #18a46b;
  --err: #d93a2b;

  --neu: 10px 10px 24px rgba(160, 171, 188, 0.55), -10px -10px 24px rgba(255, 255, 255, 0.95);
  --neu-sm: 5px 5px 12px rgba(160, 171, 188, 0.50), -5px -5px 12px rgba(255, 255, 255, 0.92);
  --neu-in: inset 4px 4px 10px rgba(160, 171, 188, 0.50), inset -4px -4px 10px rgba(255, 255, 255, 0.95);
  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.78);
  --glass-line: rgba(255, 255, 255, 0.80);
  --glass-shadow: 0 14px 40px rgba(13, 22, 38, 0.10);
  --blur: blur(18px) saturate(160%);

  --font-display: "Archivo", "Arial", system-ui, sans-serif;
  --font-text: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(0.98rem, 0.96rem + 0.12vw, 1.05rem);
  --step-1: clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  --step-2: clamp(1.3rem, 1.18rem + 0.55vw, 1.6rem);
  --step-3: clamp(1.6rem, 1.3rem + 1.2vw, 2.35rem);
  --step-4: clamp(1.9rem, 1.45rem + 1.9vw, 3rem);
  --step-5: clamp(1.8rem, 1.2rem + 1.9vw, 2.75rem);

  --gutter: clamp(16px, 4vw, 48px);
  --maxw: 1240px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 24px;
  --header-h: 78px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-0); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 750; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; color: var(--ink); }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--orange); color: #fff; padding: 10px 16px; font-weight: 600; border-radius: var(--r-s); transition: top .2s; }
.skip-link:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }

/* ------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }
.section { padding-block: clamp(64px, 8vw, 112px); position: relative; }
.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--paper, .section--graphite { background: var(--bg-2); }
.section--deep { background: var(--bg); }
.grid-bg { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 56px 56px; }
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
.split > * { min-width: 0; }
@media (min-width: 960px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.1fr .9fr; }
  .split--wide-right { grid-template-columns: .9fr 1.1fr; }
  .split--top { align-items: start; }
}

/* ------------------------------------------------------------- type */
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--step--1); font-weight: 600; color: var(--orange); margin-bottom: 14px; padding: 6px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--neu-sm); }
.display { font-size: var(--step-5); font-weight: 850; font-stretch: 104%; text-transform: uppercase; line-height: 1.02; letter-spacing: -0.02em; }
.h1 { font-size: var(--step-4); font-weight: 800; line-height: 1.08; }
.h2 { font-size: var(--step-3); font-weight: 780; line-height: 1.12; }
.h3 { font-size: var(--step-2); font-weight: 720; }
.lede { font-size: var(--step-1); color: var(--muted); line-height: 1.6; max-width: 60ch; }
.h2 + .lede, .h2 + p, .h2 + .prose, .h2 + ul, .h3 + p { margin-top: 16px; }
.prose { max-width: 68ch; color: var(--ink-2); }
.prose h2 { font-size: var(--step-2); margin: 1.8em 0 .5em; }
.prose h3 { font-size: var(--step-1); margin: 1.4em 0 .4em; }
.prose ul, .prose ol { padding-left: 1.3em; margin-bottom: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--orange); font-weight: 500; }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.section-head > * { min-width: 0; }
.section-head .lede { margin: 0; }
@media (min-width: 960px) { .section-head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: 48px; } }
.section-head .h2 { max-width: 20ch; }

/* ------------------------------------------------------------- buttons */
.btn { --bg: var(--orange); --fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; border: 1px solid transparent; background: var(--bg); color: var(--fg); font-weight: 600; font-size: .98rem; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: 0 10px 22px -8px rgba(254,116,0,.55), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s; }
.btn:hover { background: var(--orange-2); transform: translateY(-2px); box-shadow: 0 16px 28px -10px rgba(254,116,0,.6); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--ghost { --bg: var(--surface); --fg: var(--ink); border-color: var(--line-2); box-shadow: var(--neu-sm); }
.btn--ghost:hover { background: var(--white); box-shadow: var(--neu); }
.btn--dark { --bg: var(--navy); --fg: #fff; box-shadow: 0 10px 22px -10px rgba(13,22,38,.6); }
.btn--dark:hover { background: var(--navy-2); box-shadow: 0 14px 26px -10px rgba(13,22,38,.6); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: .92rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--orange); padding-bottom: 2px; transition: gap .3s var(--ease), color .2s; }
.text-link:hover { color: var(--orange); gap: 12px; }
.text-link svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- header (glass) */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h); transition: background-color .35s, box-shadow .35s, transform .4s var(--ease), height .3s; }
.site-header.is-scrolled { background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); box-shadow: 0 1px 0 var(--glass-line), 0 10px 30px rgba(13,22,38,.08); height: 68px; }
.site-header.is-hidden { transform: translateY(-100%); }
.site-header .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand img { height: 44px; width: auto; transition: height .3s; }
.is-scrolled .brand img { height: 38px; }
.nav { display: none; }
.nav__list { list-style: none; display: flex; gap: 4px; align-items: center; }
.nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .97rem; background: none; border: 0; cursor: pointer; transition: color .2s, background-color .2s, box-shadow .2s; }
.nav__link:hover, .nav__link[aria-expanded="true"] { color: var(--ink); background: var(--glass); box-shadow: var(--neu-sm); }
.nav__link[aria-current="page"] { color: var(--orange); }
.nav__link svg { width: 14px; height: 14px; transition: transform .3s; }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.header-cta { display: none; border-radius: 999px; }
@media (min-width: 1080px) { .nav { display: block; } .header-cta { display: inline-flex; } .menu-toggle { display: none !important; } }

.mega { position: absolute; left: 0; right: 0; top: calc(100% + 8px); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility 0s linear .3s; }
.mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega__inner { display: grid; grid-template-columns: 1fr 2.4fr; gap: 36px; padding: 28px; border-radius: var(--r-l); background: rgba(255,255,255,.86); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: 0 30px 60px -20px rgba(13,22,38,.25); max-width: calc(var(--maxw) - 2 * var(--gutter)); }
.mega .wrap.mega__inner { margin-inline: auto; width: calc(100% - 2 * var(--gutter)); }
.mega__intro p { color: var(--muted); font-size: .92rem; max-width: 30ch; }
.mega__intro .h3 { font-size: 1.2rem; margin-bottom: 10px; }
.mega__grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; }
.mega__grid a { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: 12px; text-decoration: none; transition: background-color .2s; }
.mega__grid a:hover { background: var(--surface); }
.mega__grid a:hover .mega__title { color: var(--orange); }
.mega__icon { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--orange); background: var(--surface); box-shadow: var(--neu-sm); }
.mega__icon svg { width: 17px; height: 17px; }
.mega__title { display: block; font-weight: 600; font-size: .93rem; color: var(--ink); }
.mega__desc { display: block; font-size: .8rem; color: var(--muted); line-height: 1.4; margin-top: 2px; }

.menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: var(--surface); border: 0; box-shadow: var(--neu-sm); cursor: pointer; position: relative; z-index: 120; }
.menu-toggle span { position: absolute; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .2s; }
.menu-toggle span:nth-child(1) { transform: translateY(-6px); }
.menu-toggle span:nth-child(3) { transform: translateY(6px); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
.mobile-nav { position: fixed; inset: 0; z-index: 110; background: rgba(236,239,243,.92); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); padding: calc(var(--header-h) + 12px) var(--gutter) 32px; overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.mobile-nav.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.mobile-nav__list { list-style: none; display: grid; gap: 10px; }
.mobile-nav__list > li { border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); }
.mobile-nav__list > li > a, .mobile-nav__list summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 18px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; text-decoration: none; cursor: pointer; list-style: none; }
.mobile-nav__list summary::-webkit-details-marker { display: none; }
.mobile-nav__list summary svg { width: 20px; transition: transform .3s; }
.mobile-nav__list details[open] summary svg { transform: rotate(45deg); }
.mobile-nav__sub { list-style: none; padding: 0 18px 14px; display: grid; }
.mobile-nav__sub a { display: block; padding: 7px 0; color: var(--muted); text-decoration: none; font-size: .95rem; }
.mobile-nav__foot { margin-top: 24px; display: grid; gap: 14px; }
.mobile-nav__foot a.plain { color: var(--muted); text-decoration: none; text-align: center; }
body.menu-open .site-header { z-index: 130; background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

.page-curtain { position: fixed; inset: 0; z-index: 900; pointer-events: none; display: grid; place-items: center; background: var(--bg); transform: translateY(100%); visibility: hidden; }
.page-curtain img { width: 60px; opacity: 0; }
.loader { position: fixed; inset: 0; z-index: 950; background: var(--bg); display: grid; place-items: center; }
.loader__mark { width: 76px; }
.loader__bar { position: absolute; left: 50%; bottom: 18vh; width: 140px; height: 3px; margin-left: -70px; border-radius: 3px; background: var(--bg-2); box-shadow: var(--neu-in); overflow: hidden; }
.loader__bar i { position: absolute; inset: 0; background: var(--orange); transform-origin: left; transform: scaleX(0); }
.loader[hidden] { display: none; }

/* ------------------------------------------------------------- home hero */
.hero { position: relative; overflow: hidden; isolation: isolate; min-height: min(86vh, 760px); display: flex; align-items: center; padding: calc(var(--header-h) + clamp(32px, 5vw, 64px)) 0 clamp(48px, 6vw, 80px); background: linear-gradient(180deg, #f3f5f8 0%, var(--bg) 100%); }
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img { position: absolute; right: 0; top: 0; height: 100%; width: auto; min-width: 70%; max-width: none; object-fit: cover; object-position: right center; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #f1f3f6 0%, rgba(241,243,246,.94) 32%, rgba(241,243,246,.35) 58%, rgba(241,243,246,0) 75%), linear-gradient(0deg, var(--bg) 0%, rgba(236,239,243,0) 22%); }
.hero__content { max-width: 780px; }
.hero__title { margin-bottom: 20px; }
.hero__title .line { display: block; }
.hero__title .line--accent { color: var(--orange); }
.hero__copy { font-size: var(--step-1); color: var(--ink-2); max-width: 52ch; margin-bottom: 30px; }
.hero__glass { margin-top: clamp(36px, 5vw, 56px); display: inline-grid; grid-auto-flow: column; gap: 0; border-radius: var(--r-m); background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); overflow: hidden; }
.hero__glass > div { padding: 16px 22px; display: grid; gap: 2px; }
.hero__glass > div + div { border-left: 1px solid var(--line); }
.hero__glass strong { font-family: var(--font-display); font-size: 1.15rem; font-weight: 750; }
.hero__glass span { font-size: .82rem; color: var(--muted); }
@media (max-width: 760px) {
  .hero { padding-top: calc(var(--header-h) + 24px); }
  .hero__media { position: relative; height: 240px; margin-bottom: -40px; order: 2; }
  .hero__media img { position: static; width: 100%; height: 100%; min-width: 0; }
  .hero__media::after { background: linear-gradient(0deg, var(--bg) 0%, rgba(236,239,243,0) 40%); }
  .hero__glass { grid-auto-flow: row; width: 100%; }
  .hero__glass > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.promo-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--neu-sm); text-decoration: none; font-size: .88rem; margin-bottom: 18px; }
.promo-pill b { background: var(--orange); color: #fff; padding: 3px 10px; border-radius: 999px; font-size: .78rem; }

/* ------------------------------------------------------------- inner page hero */
.page-hero { padding: calc(var(--header-h) + clamp(32px, 5vw, 64px)) 0 clamp(40px, 5vw, 64px); background: linear-gradient(180deg, #f3f5f8, var(--bg)); }
.page-hero__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.page-hero__grid > * { min-width: 0; }
@media (min-width: 960px) { .page-hero__grid--img { grid-template-columns: 1.05fr .95fr; } }
.page-hero .h1 { max-width: 22ch; margin-bottom: 16px; }
.page-hero .lede { margin-bottom: 26px; }
.page-hero__img { border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 11; box-shadow: var(--neu); border: 6px solid var(--surface); max-width: 100%; }
.page-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; font-size: .82rem; color: var(--muted); margin-bottom: 20px; }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--line-2); }
.crumbs a { text-decoration: none; color: var(--muted); }
.crumbs a:hover { color: var(--orange); }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }

/* ------------------------------------------------------------- framed images */
.dwg { position: relative; }
.dwg__img { position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--bg-2); box-shadow: var(--neu); border: 6px solid var(--surface); max-width: 100%; }
.dwg__img img { width: 100%; height: 100%; object-fit: cover; }
.dwg__tag { position: absolute; left: 20px; bottom: 20px; padding: 9px 14px; border-radius: 12px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); font-size: .82rem; color: var(--ink-2); }
.dwg__tag b { color: var(--orange); font-weight: 600; }

/* ------------------------------------------------------------- featured cards */
.featured { padding-block: clamp(56px, 7vw, 96px); }
.feat-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.feat-card { display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu); text-decoration: none; overflow: hidden; padding: 8px; transition: transform .35s var(--ease), box-shadow .35s; }
.feat-card:hover { transform: translateY(-4px); box-shadow: 14px 14px 30px rgba(160,171,188,.6), -10px -10px 24px rgba(255,255,255,.95); }
.feat-card__img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--r-l) - 8px); overflow: hidden; }
.feat-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.feat-card:hover .feat-card__img img { transform: scale(1.06); }
.feat-card__body { display: grid; gap: 8px; padding: 18px 14px 14px; }
.feat-card__body h3 { font-size: 1.12rem; font-weight: 720; }
.feat-card__body p { color: var(--muted); font-size: .92rem; margin: 0; }
.feat-card__more { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); font-weight: 600; font-size: .9rem; margin-top: 4px; }
.feat-card__more svg { width: 16px; transition: transform .3s; }
.feat-card:hover .feat-card__more svg { transform: translateX(4px); }

/* ------------------------------------------------------------- capability list */
.cap-list { list-style: none; display: grid; gap: 10px; margin-top: 24px; }
.cap-list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--neu-sm); color: var(--ink-2); font-size: .95rem; }
.cap-list svg { width: 18px; height: 18px; color: var(--orange); justify-self: center; }

/* ------------------------------------------------------------- why */
.why { display: grid; gap: 40px; }
@media (min-width: 960px) { .why { grid-template-columns: .85fr 1.15fr; gap: 72px; } .why__head { position: sticky; top: 110px; align-self: start; } }
.why__list { list-style: none; display: grid; gap: 14px; }
.why__item { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; padding: 20px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); }
.why__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--orange); background: var(--surface); box-shadow: var(--neu-in); }
.why__icon svg { width: 22px; height: 22px; }
.why__item h3 { font-size: 1.08rem; margin-bottom: 4px; }
.why__item p { color: var(--muted); margin: 0; font-size: .94rem; }

/* ------------------------------------------------------------- service tiles (compact) */
.svc-grid { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.svc-tile { display: grid; grid-template-columns: 46px 1fr 18px; gap: 14px; align-items: center; height: 100%; padding: 16px 16px 16px 14px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); text-decoration: none; transition: box-shadow .3s, transform .3s var(--ease); }
.svc-tile:hover { box-shadow: var(--neu); transform: translateY(-2px); }
.svc-tile__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--orange); box-shadow: var(--neu-in); transition: background-color .3s, color .3s; }
.svc-tile:hover .svc-tile__icon { background: var(--orange); color: #fff; box-shadow: none; }
.svc-tile__icon svg { width: 20px; height: 20px; }
.svc-tile strong { display: block; font-family: var(--font-display); font-size: .98rem; font-weight: 700; line-height: 1.25; }
.svc-tile span.d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .82rem; color: var(--muted); line-height: 1.4; margin-top: 3px; }
.svc-tile__go { width: 18px; height: 18px; color: var(--muted); transition: transform .3s, color .3s; }
.svc-tile:hover .svc-tile__go { color: var(--orange); transform: translateX(3px); }

/* service cards (services page / related) */
.card-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.svc-card { display: flex; flex-direction: column; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu-sm); text-decoration: none; overflow: hidden; padding: 8px; transition: box-shadow .3s, transform .3s var(--ease); }
.svc-card:hover { box-shadow: var(--neu); transform: translateY(-3px); }
.svc-card__img { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: calc(var(--r-l) - 8px); }
.svc-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc-card:hover .svc-card__img img { transform: scale(1.05); }
.svc-card__body { padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.svc-card__body h3 { font-size: 1.05rem; }
.svc-card__body p { color: var(--muted); font-size: .9rem; margin: 0; flex: 1; }
.svc-card__more { display: inline-flex; align-items: center; gap: 6px; color: var(--orange); font-weight: 600; font-size: .88rem; }
.svc-card__more svg { width: 15px; transition: transform .3s; }
.svc-card:hover .svc-card__more svg { transform: translateX(4px); }
.svc-card__cat { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); font-size: .74rem; font-weight: 600; color: var(--ink-2); }

/* ------------------------------------------------------------- process */
.process { position: relative; }
.process__track { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.process__line { display: none; }
.process__step { position: relative; padding: 22px 20px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); }
.process__dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 16px; box-shadow: var(--neu-in); font-family: var(--font-display); font-weight: 750; font-size: .95rem; color: var(--muted); transition: background-color .4s, color .4s, box-shadow .4s; }
.process__step.is-lit .process__dot { background: var(--orange); color: #fff; box-shadow: 0 8px 18px -8px rgba(254,116,0,.7); }
.process__step h3 { font-size: 1.02rem; margin-bottom: 6px; }
.process__step p { color: var(--muted); font-size: .9rem; margin: 0; }

/* ------------------------------------------------------------- pricing */
.pricing { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px 24px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu); min-width: 0; }
.plan--featured { background: linear-gradient(160deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1.5px solid rgba(254,116,0,.55); box-shadow: 0 24px 50px -24px rgba(254,116,0,.45), var(--neu); }
.plan__badge { position: absolute; top: -12px; left: 24px; background: var(--orange); color: #fff; font-size: .74rem; font-weight: 600; padding: 4px 12px; border-radius: 999px; }
.plan__name { font-size: 1.2rem; margin-bottom: 4px; }
.plan__for { color: var(--muted); font-size: .9rem; margin: 0; }
.plan__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 18px 0; padding: 14px 16px; border-radius: 14px; box-shadow: var(--neu-in); }
.plan__price small { font-size: .78rem; color: var(--muted); width: 100%; }
.plan__price strong { font-family: var(--font-display); font-size: clamp(1.9rem, 1.6rem + 1vw, 2.4rem); font-weight: 800; line-height: 1; }
.plan__price span { color: var(--muted); font-size: .9rem; }
.plan ul { list-style: none; display: grid; gap: 10px; margin-bottom: 22px; flex: 1; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.plan li svg { width: 16px; height: 16px; color: var(--orange); margin-top: 3px; }
.pricing-note { display: none; }

/* ------------------------------------------------------------- BIM split band */
.bim-split .dwg__img { aspect-ratio: 16 / 10; }
.bim-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 30px; }
.bim-chips li { padding: 8px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--neu-sm); font-size: .86rem; color: var(--ink-2); }
.bim-band { position: relative; }
.bim-band__media { display: none; }
.bim-band__wire { display: none; }

/* ------------------------------------------------------------- logo slider */
.logo-marquee { overflow: hidden; padding-block: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee__track { display: flex; gap: 22px; width: max-content; animation: marquee 34s linear infinite; padding-inline: 11px; }
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-chip { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 210px; height: 112px; padding: 14px 18px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); }
.logo-chip img { max-height: 46px; max-width: 160px; width: auto; height: auto; object-fit: contain; filter: grayscale(.15); }
.logo-chip .wordmark { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; color: var(--ink); line-height: 1; }
.logo-chip small { font-size: .74rem; color: var(--muted); font-weight: 500; }
@keyframes marquee { to { transform: translateX(-50%); } }
.fineprint { font-size: .78rem; color: var(--muted); margin-top: 18px; }
/* legacy */
.marquee, .soft-grid { display: none; }

/* ------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 12px; }
.faq details { border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); transition: box-shadow .3s; }
.faq details[open] { box-shadow: var(--neu-in); }
.faq summary { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 18px 20px; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 1.02rem; font-weight: 680; line-height: 1.35; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange); }
.faq__plus { flex: none; width: 32px; height: 32px; border-radius: 10px; position: relative; background: var(--surface); box-shadow: var(--neu-sm); color: var(--ink); transition: background-color .3s, color .3s; }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: currentColor; border-radius: 2px; }
.faq__plus::after { transform: rotate(90deg); transition: transform .3s; }
.faq details[open] .faq__plus { background: var(--orange); color: #fff; box-shadow: none; }
.faq details[open] .faq__plus::after { transform: rotate(0); }
.faq__a { padding: 0 20px 20px; color: var(--muted); font-size: .95rem; max-width: 75ch; }
.faq__a p:last-child { margin: 0; }

/* ------------------------------------------------------------- CTA */
.cta-block { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-l); padding: clamp(36px, 6vw, 72px); background: linear-gradient(130deg, var(--navy) 0%, var(--navy-2) 100%); box-shadow: 0 30px 60px -30px rgba(13,22,38,.6); }
.cta-block::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: linear-gradient(100deg, transparent 40%, #000 90%); mask-image: linear-gradient(100deg, transparent 40%, #000 90%); }
.cta-block::after { content: ""; position: absolute; right: -8%; top: -50%; width: 55%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(254,116,0,.32), transparent 65%); }
.cta-block .kicker { background: rgba(255,255,255,.08); box-shadow: none; border: 1px solid rgba(255,255,255,.14); color: var(--orange-2); }
.cta-block .h2 { color: #fff; max-width: 18ch; margin-bottom: 14px; }
.cta-block .lede { color: rgba(255,255,255,.75); margin-bottom: 28px; }
.cta-block .btn--ghost { --bg: rgba(255,255,255,.08); --fg: #fff; border-color: rgba(255,255,255,.22); box-shadow: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cta-block .btn--ghost:hover { background: rgba(255,255,255,.16); }
.cta-block__mark { position: absolute; right: clamp(24px, 5vw, 72px); bottom: clamp(24px, 5vw, 56px); width: clamp(80px, 12vw, 170px); z-index: -1; opacity: .95; }
@media (max-width: 760px) { .cta-block__mark { opacity: .12; } }

/* ------------------------------------------------------------- facts / tiles */
.facts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.facts > div { padding: 22px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); }
.facts h3 { font-size: 1.05rem; margin-bottom: 6px; }
.facts p { color: var(--muted); font-size: .92rem; margin: 0; }
.facts svg { width: 22px; height: 22px; color: var(--orange); margin-bottom: 14px; }

/* ------------------------------------------------------------- service detail */
.detail-layout { display: grid; gap: 48px; }
.detail-layout > * { min-width: 0; }
@media (min-width: 1080px) { .detail-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; } }
.detail-aside { display: grid; gap: 18px; align-content: start; }
@media (min-width: 1080px) { .detail-aside { position: sticky; top: 100px; } }
.aside-card { padding: 24px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu-sm); }
.aside-card--accent { background: linear-gradient(160deg, rgba(255,255,255,.8), rgba(255,255,255,.5)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1.5px solid rgba(254,116,0,.45); }
.aside-card h2, .aside-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.aside-card p { color: var(--muted); font-size: .92rem; }
.aside-card ul { list-style: none; display: grid; }
.aside-card li a { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; text-decoration: none; color: var(--ink-2); border-bottom: 1px solid var(--line); font-size: .9rem; }
.aside-card li a:hover { color: var(--orange); }
.aside-card li a svg { width: 14px; }
.aside-contact { display: grid; gap: 10px; margin-top: 14px; font-size: .9rem; }
.aside-contact a { display: flex; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; word-break: break-word; }
.aside-contact svg { width: 17px; color: var(--orange); flex: none; }
.block { padding-block: 36px; border-top: 1px solid var(--line); }
.block:first-child { border-top: 0; padding-top: 0; }
.block > h2 { font-size: var(--step-3); margin-bottom: 16px; max-width: 24ch; }
.block > p { color: var(--ink-2); max-width: 68ch; }
.tick-grid { list-style: none; display: grid; gap: 10px; margin-top: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tick-grid li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--ink-2); font-size: .94rem; padding: 12px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--neu-sm); }
.tick-grid svg { width: 16px; height: 16px; color: var(--orange); margin-top: 4px; }
.deliv { display: grid; gap: 14px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.deliv > div { padding: 20px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); }
.deliv h3 { font-size: 1rem; margin: 12px 0 4px; }
.deliv p { color: var(--muted); font-size: .9rem; margin: 0; }
.deliv svg { width: 22px; height: 22px; color: var(--orange); }
.divisions { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.divisions li { padding: 7px 13px; border-radius: 999px; background: var(--surface); box-shadow: var(--neu-sm); font-size: .85rem; color: var(--ink-2); }
.divisions li b { font-weight: 600; color: var(--orange); margin-right: 6px; }
.mini-steps { list-style: none; counter-reset: ms; display: grid; gap: 10px; margin-top: 20px; }
.mini-steps li { counter-increment: ms; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--neu-sm); }
.mini-steps li::before { content: counter(ms); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; box-shadow: var(--neu-in); color: var(--orange); font-family: var(--font-display); font-weight: 750; }
.mini-steps strong { display: block; font-family: var(--font-display); font-size: 1rem; margin-bottom: 2px; }
.mini-steps span { color: var(--muted); font-size: .9rem; }

/* ------------------------------------------------------------- team */
.team { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.member { border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu-sm); padding: 8px; }
.member__photo { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: calc(var(--r-l) - 8px); box-shadow: var(--neu-in); }
.member__mono { font-family: var(--font-display); font-size: 3.4rem; font-weight: 800; color: var(--ink-2); }
.member__mono::after { content: ""; display: block; height: 3px; background: var(--orange); margin-top: 4px; border-radius: 2px; }
.member__body { padding: 16px 12px 12px; }
.member__body h3 { font-size: 1.05rem; }
.member__body p { color: var(--orange); font-size: .88rem; margin: 2px 0 0; }

/* ------------------------------------------------------------- forms */
.form-shell { border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu); padding: clamp(22px, 3.5vw, 40px); min-width: 0; }
.form-grid { display: grid; gap: 16px 18px; }
@media (min-width: 720px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .full { grid-column: 1 / -1; } }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.field label, .field .label { font-size: .86rem; font-weight: 500; color: var(--ink-2); }
.field label .req { color: var(--orange); }
.field input, .field select, .field textarea { width: 100%; min-height: 50px; padding: 13px 16px; border-radius: 12px; background: var(--surface); border: 1px solid transparent; box-shadow: var(--neu-in); color: var(--ink); font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.field textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b687b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; }
.field input::placeholder, .field textarea::placeholder { color: #8b96a6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: var(--neu-in), 0 0 0 4px rgba(254,116,0,.14); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--err); }
.field__error { font-size: .8rem; color: var(--err); }
.field__hint { font-size: .78rem; color: var(--muted); }
.dropzone { position: relative; display: grid; place-items: center; text-align: center; gap: 6px; padding: 28px 18px; border-radius: 14px; border: 1.5px dashed var(--line-2); background: var(--surface); box-shadow: var(--neu-in); cursor: pointer; transition: border-color .2s; }
.dropzone:hover, .dropzone.is-over { border-color: var(--orange); }
.dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dropzone svg { width: 28px; height: 28px; color: var(--orange); }
.dropzone strong { font-weight: 600; }
.dropzone span { font-size: .8rem; color: var(--muted); }
.file-list { list-style: none; display: grid; gap: 8px; margin-top: 10px; }
.file-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: var(--surface); box-shadow: var(--neu-sm); font-size: .86rem; }
.file-list li span:last-child { color: var(--muted); }
.file-list li.is-bad { outline: 1px solid var(--err); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: .88rem; color: var(--ink-2); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--orange); }
.check a { color: var(--orange); }
.hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 12px; font-size: .92rem; }
.form-status.is-error { display: block; background: rgba(217,58,43,.08); border: 1px solid rgba(217,58,43,.35); color: #a12619; }
.form-status.is-error a { color: inherit; }
.form-success { display: none; text-align: center; padding: 36px 10px; }
.form-success.is-on { display: block; }
.form-success svg { width: 52px; height: 52px; color: var(--ok); margin: 0 auto 16px; }
.form-success h3 { font-size: var(--step-2); margin-bottom: 8px; }
.form-success p { color: var(--muted); max-width: 46ch; margin-inline: auto; }

.contact-cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.contact-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu-sm); text-decoration: none; transition: box-shadow .3s, transform .3s var(--ease); min-width: 0; }
a.contact-card:hover { box-shadow: var(--neu); transform: translateY(-3px); }
.contact-card svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: var(--orange); box-shadow: var(--neu-in); margin-bottom: 6px; }
.contact-card .label { font-size: .78rem; color: var(--muted); font-weight: 500; }
.contact-card strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.3; word-break: break-word; }
.map-shell { position: relative; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 8; background: var(--surface); box-shadow: var(--neu); border: 6px solid var(--surface); max-width: 100%; }
@media (max-width: 700px) { .map-shell { aspect-ratio: 4 / 4; } }
.map-shell iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-shell__load { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 40px 40px; }
.map-shell__pin { width: 52px; height: 52px; border-radius: 16px; background: var(--orange); color: #fff; display: grid; place-items: center; margin: 0 auto 12px; box-shadow: 0 12px 24px -10px rgba(254,116,0,.7); }
.map-shell__pin svg { width: 24px; }

/* ------------------------------------------------------------- blog */
.post-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.post-card { display: flex; flex-direction: column; text-decoration: none; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu-sm); overflow: hidden; padding: 8px; transition: box-shadow .3s, transform .3s var(--ease); }
.post-card:hover { box-shadow: var(--neu); transform: translateY(-3px); }
.post-card__img { aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--r-l) - 8px); }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.post-card:hover .post-card__img img { transform: scale(1.05); }
.post-card__body { padding: 16px 12px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__meta { font-size: .78rem; color: var(--orange); font-weight: 600; }
.post-card h3 { font-size: 1.08rem; line-height: 1.3; }
.post-card p { color: var(--muted); font-size: .9rem; margin: 0; flex: 1; }
.post-card--lead { grid-column: 1 / -1; }
@media (min-width: 900px) { .post-card--lead { flex-direction: row; } .post-card--lead .post-card__img { aspect-ratio: auto; flex: 1.15; min-height: 340px; } .post-card--lead .post-card__body { flex: 1; padding: 32px; justify-content: center; } .post-card--lead h3 { font-size: var(--step-3); } }
.article-hero-img { border-radius: var(--r-l); overflow: hidden; margin: 0 0 40px; aspect-ratio: 16 / 8; box-shadow: var(--neu); border: 6px solid var(--surface); }
.article-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.article-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: .84rem; color: var(--muted); }
.callout { padding: 18px 20px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-in); border-left: 3px solid var(--orange); margin: 24px 0; color: var(--ink-2); }

/* ------------------------------------------------------------- legal / toc */
.legal-layout { display: grid; gap: 40px; }
.legal-layout > * { min-width: 0; }
@media (min-width: 1000px) { .legal-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; } .legal-toc { position: sticky; top: 100px; align-self: start; } }
.legal-toc ol { list-style: none; display: grid; gap: 4px; padding: 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: var(--neu-sm); }
.legal-toc a { display: block; padding: 7px 10px; color: var(--muted); text-decoration: none; font-size: .88rem; border-radius: 8px; }
.legal-toc a:hover { color: var(--ink); background: var(--bg); }
.notice { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-m); background: var(--orange-soft); border: 1px solid rgba(254,116,0,.25); font-size: .9rem; color: var(--ink-2); margin-bottom: 32px; }
.notice svg { flex: none; width: 20px; height: 20px; color: var(--orange); margin-top: 2px; }
.notice a { color: var(--orange); }
.cmp-wrap { overflow-x: auto; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--neu-sm); }
.cmp { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .92rem; }
.cmp th, .cmp td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.cmp thead th:nth-child(3) { color: var(--orange); }
.cmp tbody th { font-weight: 500; color: var(--muted); width: 22%; }
.cmp td { color: var(--ink-2); }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- footer */
.site-footer { background: var(--navy); color: rgba(255,255,255,.75); padding-top: clamp(56px, 7vw, 88px); overflow: hidden; }
.footer-top { display: grid; gap: 40px; padding-bottom: 48px; }
@media (min-width: 1000px) { .footer-top { grid-template-columns: 1.2fr 2fr; gap: 72px; } }
.footer-brand img { height: 48px; width: auto; margin-bottom: 18px; }
.footer-brand p { max-width: 40ch; font-size: .92rem; }
.footer-contact { list-style: none; display: grid; gap: 10px; margin-top: 20px; font-size: .92rem; }
.footer-contact li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.footer-contact a { text-decoration: none; color: rgba(255,255,255,.85); }
.footer-contact a:hover { color: var(--orange-2); }
.footer-contact svg { width: 18px; height: 18px; color: var(--orange); margin-top: 3px; }
.footer-cols { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .footer-cols { grid-template-columns: 1fr 1.4fr 1fr; } }
.footer-col h2 { font-family: var(--font-text); font-size: .82rem; font-weight: 600; color: #fff; margin-bottom: 14px; }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: rgba(255,255,255,.65); text-decoration: none; font-size: .9rem; }
.footer-col a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.08); }
.footer-social svg { width: 18px; height: 18px; }
.footer-word { font-family: var(--font-display); font-weight: 850; font-size: clamp(3.5rem, 15vw, 14rem); line-height: .8; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.10); text-transform: uppercase; user-select: none; white-space: nowrap; text-align: center; margin-bottom: -0.06em; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .84rem; }
.footer-bottom p { margin: 0; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer-bottom a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ------------------------------------------------------------- review / reveal / misc */
[data-pending] { position: relative; }
.review [data-pending] { outline: 1.5px dashed rgba(254,116,0,.9); outline-offset: 4px; }
.review [data-pending]::after { content: "Pending approval: " attr(data-pending); position: absolute; top: -12px; left: 8px; z-index: 5; padding: 2px 8px; border-radius: 6px; background: var(--orange); color: #fff; font: 600 11px/1.6 var(--font-text); white-space: nowrap; pointer-events: none; }
.review-banner { position: fixed; left: 16px; bottom: 16px; z-index: 300; max-width: 340px; padding: 14px 16px; border-radius: 14px; background: var(--orange); color: #fff; font-size: .85rem; box-shadow: 0 20px 40px -10px rgba(0,0,0,.3); }
.review-banner a { color: #fff; font-weight: 600; }
.js [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); }
.js .is-in[data-reveal] { opacity: 1; transform: none; transition: opacity .9s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.notfound { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--gutter) 80px; }
.notfound__num { font-family: var(--font-display); font-weight: 850; font-size: clamp(7rem, 26vw, 16rem); line-height: .85; color: var(--surface); text-shadow: 10px 10px 24px rgba(160,171,188,.6), -10px -10px 24px #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .logo-marquee__track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .loader { display: none; }
}
@media print { .site-header, .site-footer, .mobile-nav, .page-curtain, .loader { display: none !important; } }

/* ------------------------------------------------------------- compact service tiles (home) */
.svc-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.svc-tile { grid-template-columns: 36px 1fr 16px; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; }
.svc-tile__icon { width: 36px; height: 36px; border-radius: 10px; }
.svc-tile__icon svg { width: 17px; height: 17px; }
.svc-tile strong { font-size: .9rem; font-weight: 650; line-height: 1.3; }
.svc-tile__go { width: 16px; height: 16px; }

/* ------------------------------------------------------------- step-by-step quote form */
.qz { display: grid; gap: 18px; }
.qz__progress { display: grid; gap: 10px; }
.qz__bar { height: 8px; border-radius: 99px; box-shadow: var(--neu-in); overflow: hidden; background: var(--surface); }
.qz__bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); transform-origin: left; transform: scaleX(.2); transition: transform .45s var(--ease); }
.qz__labels { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; font-size: .74rem; color: var(--muted); }
.qz__labels li { text-align: center; transition: color .3s; }
.qz__labels li.is-current { color: var(--orange); font-weight: 600; }
.qz__labels li.is-done { color: var(--ink-2); }
@media (max-width: 480px) { .qz__labels { display: none; } }
.qz__count { margin: -8px 0 0; font-size: .8rem; color: var(--muted); }
.qz__form { display: grid; gap: 18px; }
.qz__step { border: 0; margin: 0; padding: 0; min-width: 0; animation: qzIn .35s var(--ease); }
.qz__step[hidden] { display: none; }
@keyframes qzIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.qz__q { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 750; color: var(--ink); padding: 0; margin-bottom: 6px; }
.qz__hint { color: var(--muted); font-size: .9rem; margin: 0 0 14px; }
.qz-choices { display: grid; gap: 10px; margin-top: 12px; }
.qz-choices--grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.qz-choices--grid2 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.qz-choice { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--neu-sm); cursor: pointer; border: 1.5px solid transparent; transition: box-shadow .25s, border-color .25s, transform .25s var(--ease); }
.qz-choice:hover { transform: translateY(-1px); box-shadow: var(--neu); }
.qz-choice input { position: absolute; opacity: 0; pointer-events: none; }
.qz-choice__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--orange); box-shadow: var(--neu-in); }
.qz-choice__icon svg { width: 17px; height: 17px; }
.qz-choice__text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.qz-choice__text strong { font-size: .94rem; font-weight: 600; }
.qz-choice__text small { font-size: .78rem; color: var(--muted); }
.qz-choice__tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--neu-in); color: transparent; transition: background-color .2s, color .2s; }
.qz-choice__tick svg { width: 13px; height: 13px; }
.qz-choice:has(input:checked) { border-color: var(--orange); box-shadow: var(--neu-in); }
.qz-choice:has(input:checked) .qz-choice__tick { background: var(--orange); color: #fff; box-shadow: none; }
.qz-choice:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 2px; }
.qz__nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.qz__nav [data-qz-next], .qz__nav [data-qz-submit] { margin-left: auto; }
.qz__nav [hidden] { display: none !important; }
.qz__done.is-on { display: block; }

/* modal */
.qmodal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .25s; }
.qmodal[hidden] { display: none; }
.qmodal.is-open { opacity: 1; }
.qmodal__backdrop { position: absolute; inset: 0; background: rgba(13,22,38,.38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qmodal__panel { position: relative; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(22px, 4vw, 34px); border-radius: var(--r-l); background: rgba(240,243,247,.92); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: 0 40px 80px -20px rgba(13,22,38,.45); transform: translateY(14px) scale(.98); transition: transform .35s var(--ease); }
.qmodal.is-open .qmodal__panel { transform: none; }
.qmodal__panel .h3 { margin-bottom: 18px; max-width: 26ch; }
.qmodal__close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 12px; border: 0; display: grid; place-items: center; background: var(--surface); box-shadow: var(--neu-sm); cursor: pointer; color: var(--ink); }
.qmodal__close svg { width: 18px; height: 18px; transform: rotate(45deg); }
.qz-choices--grid .qz-choice { padding-right: 30px; }
.qz-choices--grid .qz-choice__tick { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; }
.qz-choices--grid .qz-choice__tick svg { width: 11px; height: 11px; }
@media (max-width: 480px) { .qz-choices--grid { grid-template-columns: 1fr 1fr; } .qz-choices--grid .qz-choice { gap: 8px; padding: 11px 26px 11px 10px; } .qz-choices--grid .qz-choice__icon { width: 30px; height: 30px; } .qz-choices--grid .qz-choice__text strong { font-size: .86rem; } }

/* ------------------------------------------------------------- eye-catching quote card */
.quote-section { overflow: hidden; }
.quote-section::before, .quote-section::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); z-index: 0; pointer-events: none; }
.quote-section::before { width: 420px; height: 420px; right: 4%; top: 6%; background: rgba(254,116,0,.22); }
.quote-section::after { width: 360px; height: 360px; left: 2%; bottom: 0; background: rgba(23,36,59,.16); }
.quote-section .wrap { position: relative; z-index: 1; }
.quote-card { display: grid; border-radius: 28px; overflow: hidden; background: rgba(255,255,255,.55); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-line); box-shadow: 0 40px 80px -30px rgba(13,22,38,.35), var(--neu); }
@media (min-width: 980px) { .quote-card { grid-template-columns: .9fr 1.1fr; } }
.quote-card__side { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 4vw, 48px); background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 70%, #22324f 100%); color: rgba(255,255,255,.8); }
.quote-card__side::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(160deg, transparent 30%, #000 100%); mask-image: linear-gradient(160deg, transparent 30%, #000 100%); }
.quote-card__side::after { content: ""; position: absolute; right: -30%; bottom: -30%; width: 80%; aspect-ratio: 1; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(254,116,0,.4), transparent 65%); }
.quote-card__side .kicker { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); box-shadow: none; color: var(--orange-2); }
.quote-card__side .h2 { color: #fff; max-width: 15ch; }
.quote-card__side .lede { color: rgba(255,255,255,.72); font-size: 1.02rem; }
.quote-card__list { list-style: none; display: grid; gap: 12px; margin: 26px 0 28px; }
.quote-card__list li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; font-size: .93rem; line-height: 1.5; }
.quote-card__list svg { width: 26px; height: 26px; padding: 5px; border-radius: 8px; background: var(--orange); color: #fff; box-shadow: 0 8px 18px -8px rgba(254,116,0,.8); }
.quote-card__list strong { color: #fff; font-weight: 600; }
.quote-card__contact { display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.quote-card__contact a { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 500; font-size: .95rem; word-break: break-word; }
.quote-card__contact a:hover { color: var(--orange-2); }
.quote-card__contact svg { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: var(--orange-2); flex: none; }
.quote-card__mark { position: absolute; right: 24px; top: 24px; width: 64px; opacity: .9; }
@media (max-width: 600px) { .quote-card__mark { width: 44px; right: 18px; top: 18px; } }
.quote-card__form { padding: clamp(24px, 4vw, 48px); min-width: 0; }
.qform { display: grid; gap: 20px; }
.qform__chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.qform__chips legend { font-family: var(--font-display); font-size: 1.15rem; font-weight: 750; color: var(--ink); margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 15px; border-radius: 999px; background: var(--surface); box-shadow: var(--neu-sm); border: 1.5px solid transparent; font-size: .9rem; font-weight: 500; color: var(--ink-2); cursor: pointer; user-select: none; transition: transform .2s var(--ease), box-shadow .2s, background-color .2s, color .2s, border-color .2s; }
.chip:hover { transform: translateY(-2px); box-shadow: var(--neu); color: var(--ink); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip svg { width: 16px; height: 16px; color: var(--orange); transition: color .2s; }
.chip:has(input:checked) { background: var(--orange); color: #fff; border-color: var(--orange); box-shadow: 0 10px 22px -10px rgba(254,116,0,.75); transform: translateY(-1px); }
.chip:has(input:checked) svg { color: #fff; }
.chip:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 3px; }
.ifield { position: relative; }
.ifield > svg { position: absolute; left: 15px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: #8592a5; pointer-events: none; transition: color .2s; z-index: 1; }
.ifield--area > svg { top: 16px; margin-top: 0; }
.ifield input, .ifield textarea { padding-left: 44px !important; }
.ifield:focus-within > svg { color: var(--orange); }
.qform .field input, .qform .field textarea { background: rgba(255,255,255,.65); }
.qform .field input:focus, .qform .field textarea:focus { background: #fff; }
.qform textarea { min-height: 96px; }
.btn--glow { position: relative; overflow: hidden; min-height: 58px; font-size: 1.05rem; border-radius: 14px; background: linear-gradient(135deg, #ff8a26 0%, var(--orange) 55%, #f05f00 100%); box-shadow: 0 18px 34px -12px rgba(254,116,0,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.btn--glow::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); animation: shine 3.6s ease-in-out infinite; }
.btn--glow:hover { background: linear-gradient(135deg, #ff9a40 0%, #ff7d14 55%, var(--orange) 100%); }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.qform__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; font-size: .8rem; color: var(--muted); margin-top: -6px; }
.qform__trust li { display: inline-flex; align-items: center; gap: 6px; }
.qform__trust svg { width: 14px; height: 14px; color: var(--orange); }
.quote-card .form-success { padding: 60px 10px; }
@media (prefers-reduced-motion: reduce) { .btn--glow::after { animation: none; display: none; } }
@media (max-width: 520px) { .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .chip { padding: 10px 12px; font-size: .84rem; } }

/* ------------------------------------------------------------- futuristic featured cards */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.featured { position: relative; overflow: hidden; }
.featured::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 60%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 60%, #000 10%, transparent 70%); opacity: .7; }
.featured .wrap { position: relative; z-index: 1; }
.feat-grid { perspective: 1200px; }
.fx-card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; padding: 1.5px; border-radius: 22px; background: transparent; box-shadow: var(--neu); transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s var(--ease), box-shadow .4s; overflow: visible; }
.fx-card:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); box-shadow: 0 30px 50px -24px rgba(254,116,0,.45), var(--neu); }
.fx-card.is-tilting { transition: transform .08s linear, box-shadow .4s; }
.fx-card__border { position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--fx-angle), rgba(254,116,0,0) 0deg, rgba(254,116,0,.95) 60deg, rgba(255,175,90,.9) 90deg, rgba(254,116,0,0) 150deg, rgba(13,22,38,.15) 240deg, rgba(254,116,0,0) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: fxSpin 6s linear infinite; opacity: .55; transition: opacity .4s; }
.fx-card:hover .fx-card__border { opacity: 1; animation-duration: 2.8s; }
@keyframes fxSpin { to { --fx-angle: 360deg; } }
.fx-card__inner { position: relative; display: flex; flex-direction: column; height: 100%; border-radius: 21px; padding: 8px; background: linear-gradient(165deg, rgba(255,255,255,.9), rgba(238,241,245,.82)); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); overflow: hidden; }
.fx-card .feat-card__img { position: relative; transform: translateZ(30px); }
.fx-card .feat-card__img img { filter: saturate(.9) contrast(1.05); }
.fx-card:hover .feat-card__img img { transform: scale(1.08); filter: saturate(1.05) contrast(1.08); }
.fx-card__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); background-size: 22px 22px; opacity: 0; transition: opacity .4s; mix-blend-mode: overlay; }
.fx-card:hover .fx-card__grid { opacity: 1; }
.fx-card__scan { position: absolute; left: 0; right: 0; top: -30%; height: 30%; background: linear-gradient(180deg, rgba(254,116,0,0), rgba(254,116,0,.28) 85%, rgba(255,200,140,.9) 100%); mix-blend-mode: screen; animation: fxScan 4.2s cubic-bezier(.45,0,.55,1) infinite; animation-delay: var(--d, 0s); }
.fx-card__scan::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: #ffd2a8; box-shadow: 0 0 12px 2px rgba(254,116,0,.8); }
@keyframes fxScan { 0% { top: -30%; } 55%, 100% { top: 110%; } }
.fx-card__corners i { position: absolute; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.9); transition: transform .4s var(--ease), border-color .3s; }
.fx-card__corners i:nth-child(1) { left: 10px; top: 10px; border-right: 0; border-bottom: 0; }
.fx-card__corners i:nth-child(2) { right: 10px; top: 10px; border-left: 0; border-bottom: 0; }
.fx-card__corners i:nth-child(3) { left: 10px; bottom: 10px; border-right: 0; border-top: 0; }
.fx-card__corners i:nth-child(4) { right: 10px; bottom: 10px; border-left: 0; border-top: 0; }
.fx-card:hover .fx-card__corners i { border-color: var(--orange); }
.fx-card:hover .fx-card__corners i:nth-child(1) { transform: translate(4px, 4px); }
.fx-card:hover .fx-card__corners i:nth-child(2) { transform: translate(-4px, 4px); }
.fx-card:hover .fx-card__corners i:nth-child(3) { transform: translate(4px, -4px); }
.fx-card:hover .fx-card__corners i:nth-child(4) { transform: translate(-4px, -4px); }
.fx-card__badge { position: absolute; left: 14px; bottom: 14px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: rgba(13,22,38,.45); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 8px 20px -8px rgba(0,0,0,.5); transition: background-color .3s, transform .4s var(--ease); }
.fx-card__badge svg { width: 19px; height: 19px; }
.fx-card:hover .fx-card__badge { background: var(--orange); transform: translateY(-3px); }
.fx-card__index { position: absolute; right: 14px; bottom: 12px; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; line-height: 1; color: rgba(255,255,255,.85); text-shadow: 0 2px 12px rgba(0,0,0,.4); letter-spacing: -.02em; }
.fx-card .feat-card__body { transform: translateZ(20px); }
.fx-card .feat-card__body h3 { transition: color .3s; }
.fx-card:hover .feat-card__body h3 { color: var(--orange); }
.fx-card__glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light; }
.fx-card:hover .fx-card__glare { opacity: 1; }
.fx-card.feat-card:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); }
.js .fx-card[data-reveal] { opacity: 0; transform: translateY(40px) rotateX(12deg); }
.js .fx-card.is-in[data-reveal] { opacity: 1; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity .9s var(--ease) var(--d, 0s), transform 1s var(--ease) var(--d, 0s); }
.js .fx-card.is-in[data-reveal]:hover { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); transition: transform .5s var(--ease), box-shadow .4s; }
.js .fx-card.is-in.is-tilting { transition: transform .08s linear, box-shadow .4s; }
@media (prefers-reduced-motion: reduce) { .fx-card__border, .fx-card__scan { animation: none; } .fx-card__scan { display: none; } .fx-card { transform: none !important; } }

/* ------------------------------------------------------------- featured: image cards that expand on hover */
.xgrid { display: flex; gap: 16px; height: 440px; }
.xcard { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; isolation: isolate; text-decoration: none; color: #fff; box-shadow: var(--neu); transition: flex-grow .6s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s; }
.xcard > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .9s var(--ease); }
.xcard__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(13,22,38,.88) 0%, rgba(13,22,38,.35) 38%, rgba(13,22,38,0) 62%); transition: background .5s var(--ease); }
.xcard__body { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; display: grid; gap: 0; }
.xcard__body h3 { color: #fff; font-size: 1.15rem; font-weight: 750; line-height: 1.2; text-shadow: 0 2px 14px rgba(0,0,0,.35); max-width: 18ch; }
.xcard__more { display: grid; grid-template-rows: 0fr; opacity: 0; transform: translateY(14px); transition: grid-template-rows .5s var(--ease), opacity .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.xcard__more > * { min-height: 0; overflow: hidden; }
.xcard__more { overflow: hidden; }
.xcard__desc { display: block; color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.55; margin-top: 10px; max-width: 42ch; }
.xcard__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 16px; width: max-content; border-radius: 999px; background: var(--orange); color: #fff; font-weight: 600; font-size: .88rem; box-shadow: 0 10px 22px -10px rgba(254,116,0,.9); }
.xcard__link svg { width: 16px; height: 16px; transition: transform .3s; }
.xcard:hover .xcard__link svg { transform: translateX(3px); }
.xcard__more { grid-template-rows: 0fr; }
.xcard__more > span { grid-row: auto; }
@media (hover: hover) and (min-width: 900px) {
  .xgrid:hover .xcard { flex-grow: .8; }
  .xgrid .xcard:hover, .xgrid .xcard:focus-visible { flex-grow: 2.2; transform: translateY(-8px) scale(1.02); box-shadow: 0 34px 60px -26px rgba(13,22,38,.55); z-index: 2; }
  .xcard:hover > img, .xcard:focus-visible > img { transform: scale(1.08); }
  .xcard:hover .xcard__shade, .xcard:focus-visible .xcard__shade { background: linear-gradient(0deg, rgba(13,22,38,.94) 0%, rgba(13,22,38,.6) 45%, rgba(13,22,38,.05) 80%); }
  .xcard:hover .xcard__more, .xcard:focus-visible .xcard__more { grid-template-rows: 1fr; opacity: 1; transform: none; transition-delay: .12s; }
  .xcard:hover h3, .xcard:focus-visible h3 { font-size: 1.45rem; transition: font-size .4s var(--ease); }
}
/* phones / touch: tap-to-expand accordion with the same pop animation */
@media (max-width: 899px), (hover: none) {
  .xgrid { flex-direction: column; height: auto; gap: 12px; }
  .xcard { flex: none; height: 128px; border-radius: 20px; transition: height .55s cubic-bezier(.34,1.3,.64,1), transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s; -webkit-tap-highlight-color: transparent; }
  .xcard__shade { background: linear-gradient(90deg, rgba(13,22,38,.82) 0%, rgba(13,22,38,.45) 55%, rgba(13,22,38,.15) 100%); }
  .xcard__body { padding: 18px 20px; }
  .xcard__body h3 { font-size: 1.08rem; transition: font-size .4s var(--ease); }
  .xcard::after { content: ""; position: absolute; right: 18px; top: 18px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 14px no-repeat; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.3); transition: transform .4s var(--ease), background-color .3s; }
  .xcard.is-open { height: 380px; transform: translateY(-4px) scale(1.015); box-shadow: 0 30px 50px -24px rgba(13,22,38,.55); z-index: 2; }
  .xcard.is-open::after { transform: rotate(45deg); background-color: var(--orange); border-color: var(--orange); }
  .xcard.is-open > img { transform: scale(1.06); }
  .xcard.is-open .xcard__shade { background: linear-gradient(0deg, rgba(13,22,38,.94) 0%, rgba(13,22,38,.55) 50%, rgba(13,22,38,.05) 85%); }
  .xcard.is-open h3 { font-size: 1.35rem; }
  .xcard.is-open .xcard__more { grid-template-rows: 1fr; opacity: 1; transform: none; transition-delay: .12s; }
  .js .xcard.is-in[data-reveal].is-open { transform: translateY(-4px) scale(1.015); }
}
.js .xcard[data-reveal] { opacity: 0; transform: translateY(30px) scale(.96); }
.js .xcard.is-in[data-reveal] { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform .9s cubic-bezier(.34,1.56,.64,1) var(--d, 0s), flex-grow .6s var(--ease), box-shadow .45s; }
@media (hover: hover) and (min-width: 900px) {
  .js .xgrid .xcard.is-in[data-reveal]:hover { transform: translateY(-8px) scale(1.02); transition: flex-grow .6s var(--ease), transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .45s; }
}
@media (prefers-reduced-motion: reduce) { .xcard, .xcard > img, .xcard__more { transition: none !important; } }

/* =========================================================================
   PREMIUM REFINEMENT LAYER
   Cleaner surfaces, quieter shadows, more air, refined type and a utility bar.
   ========================================================================= */
:root {
  --bg: #f0f2f5;
  --bg-2: #e8ebf0;
  --surface: #f6f7f9;
  --ink: #0b1424;
  --ink-2: #283346;
  --muted: #5a6779;
  --line: rgba(11, 20, 36, 0.08);
  --line-2: rgba(11, 20, 36, 0.14);
  --neu: 0 1px 2px rgba(11,20,36,.04), 0 18px 40px -22px rgba(11,20,36,.22), 0 0 0 1px rgba(11,20,36,.05);
  --neu-sm: 0 1px 2px rgba(11,20,36,.04), 0 8px 22px -14px rgba(11,20,36,.22), 0 0 0 1px rgba(11,20,36,.05);
  --neu-in: inset 2px 2px 6px rgba(150,162,180,.32), inset -2px -2px 6px rgba(255,255,255,.9);
  --header-h: 112px;
  --maxw: 1200px;
}
@media (max-width: 860px) { :root { --header-h: 74px; } }
body { letter-spacing: -0.003em; }
.section { padding-block: clamp(80px, 9.5vw, 136px); }
.section--paper, .section--graphite { background: #e9ecf1; }
h1, h2, h3 { letter-spacing: -0.022em; }
.h2 { font-size: clamp(1.75rem, 1.35rem + 1.35vw, 2.6rem); font-weight: 760; line-height: 1.1; }
.lede { color: var(--muted); }

/* eyebrow: quiet label with a brand dot instead of a pill */
.kicker { padding: 0; background: none; box-shadow: none; border-radius: 0; gap: 10px; font-size: .82rem; font-weight: 600; letter-spacing: .02em; color: var(--orange); margin-bottom: 16px; }
.kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(254,116,0,.14); }
.cta-block .kicker, .quote-card__side .kicker { background: none; border: 0; padding: 0; }

/* header + utility bar */
.site-header { height: auto; }
.site-header .header-main { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: height .3s; }
.site-header.is-scrolled { height: auto; }
.site-header.is-scrolled .header-main { height: 66px; }
.topbar { background: var(--navy); color: rgba(255,255,255,.72); font-size: .8rem; overflow: hidden; max-height: 36px; transition: max-height .35s var(--ease), opacity .3s; }
.topbar .wrap { height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.topbar__note { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__links { display: flex; gap: 22px; flex: none; }
.topbar__links a { display: inline-flex; align-items: center; gap: 7px; color: #fff; text-decoration: none; }
.topbar__links a:hover { color: var(--orange-2); }
.topbar__links svg { width: 14px; height: 14px; color: var(--orange-2); }
.site-header.is-scrolled .topbar { max-height: 0; opacity: 0; }
@media (max-width: 860px) { .topbar { display: none; } }
@media (max-width: 1080px) { .topbar__note { display: none; } .topbar .wrap { justify-content: flex-end; } }
.mega { top: calc(100% + 10px); }

/* hero: more air, refined copy width */
.hero { min-height: min(88vh, 800px); }
.hero__copy { color: var(--ink-2); max-width: 50ch; }
.hero .btn-row { gap: 14px; }

/* trust strip */
.trust { position: relative; z-index: 2; margin-top: -42px; padding-bottom: 8px; }
.trust__row { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 20px; background: rgba(255,255,255,.78); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 30px 60px -36px rgba(11,20,36,.35), 0 0 0 1px rgba(11,20,36,.05); overflow: hidden; }
.trust__row li { display: flex; align-items: center; gap: 14px; padding: 22px 24px; min-width: 0; }
.trust__row li + li { border-left: 1px solid var(--line); }
.trust__row svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: var(--orange); background: rgba(254,116,0,.08); }
.trust__row span { display: grid; gap: 1px; font-size: .8rem; color: var(--muted); line-height: 1.35; }
.trust__row strong { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--ink); }
@media (max-width: 980px) { .trust__row { grid-template-columns: 1fr 1fr; } .trust__row li:nth-child(3) { border-left: 0; } .trust__row li:nth-child(n+3) { border-top: 1px solid var(--line); } }
@media (max-width: 520px) { .trust { margin-top: -20px; } .trust__row { grid-template-columns: 1fr; } .trust__row li + li { border-left: 0; border-top: 1px solid var(--line); } .trust__row li { padding: 16px 18px; } }

/* cards & surfaces: white, hairline, soft depth */
.why__item, .svc-tile, .process__step, .plan, .faq details, .facts > div, .deliv > div, .tick-grid li, .mini-steps li, .cap-list li, .aside-card, .contact-card, .member, .post-card, .svc-card, .legal-toc ol, .bim-chips li, .divisions li, .logo-chip { background: #fff; }
.faq details[open] { box-shadow: var(--neu); }
.faq details[open] .faq__a { color: var(--ink-2); }
.why__icon, .svc-tile__icon, .process__dot, .mini-steps li::before, .contact-card svg { box-shadow: none; background: rgba(254,116,0,.08); }
.process__step.is-lit .process__dot { background: var(--orange); }
.svc-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.svc-tile:hover .svc-tile__icon { background: var(--orange); }
.plan { box-shadow: var(--neu); }
.plan__price { box-shadow: none; background: #f4f6f9; border: 1px solid var(--line); }
.plan--featured { background: #fff; }
.form-shell, .quote-card__form { background: transparent; }
.field input, .field select, .field textarea { background: #f6f7f9; box-shadow: inset 0 0 0 1px var(--line-2); }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; box-shadow: inset 0 0 0 1px var(--orange), 0 0 0 4px rgba(254,116,0,.12); }
.dwg__img, .page-hero__img, .article-hero-img, .map-shell { border-width: 0; box-shadow: 0 30px 60px -34px rgba(11,20,36,.45), 0 0 0 1px rgba(11,20,36,.06); }
.btn { border-radius: 12px; letter-spacing: -.005em; }
.btn--ghost { background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 6px 16px -10px rgba(11,20,36,.25); border-color: transparent; }
.btn--ghost:hover { box-shadow: 0 0 0 1px rgba(11,20,36,.22), 0 10px 22px -12px rgba(11,20,36,.3); }
.header-cta { border-radius: 999px; }
.nav__link:hover, .nav__link[aria-expanded="true"] { background: rgba(11,20,36,.05); box-shadow: none; }
.featured::before { opacity: .45; }
.xcard { box-shadow: 0 24px 48px -30px rgba(11,20,36,.5); }
.cta-block { border-radius: 28px; }
.site-footer { background: #0a1322; }
.cta-block .btn--ghost { background: rgba(255,255,255,.08); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.cta-block .btn--ghost:hover { background: rgba(255,255,255,.16); }
@media (max-width: 760px) {
  .hero { flex-direction: column; align-items: stretch; min-height: 0; }
  .hero__media { order: 2; width: 100%; height: 260px; margin: 8px 0 -10px; }
  .hero > .wrap { order: 1; }
}
.card-grid--5 { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
@media (min-width: 1140px) { .card-grid--5 { grid-template-columns: repeat(5, 1fr); } .card-grid--5 .svc-card__body p { font-size: .84rem; } .card-grid--5 .svc-card__body h3 { font-size: .98rem; } }
@media (min-width: 640px) and (max-width: 1139px) { .card-grid--5 { grid-template-columns: repeat(2, 1fr); } }

/* ===== Why choose Verton: expanding image panel ===== */
.whyx{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(440px,52vw,600px);border-radius:28px;overflow:hidden;isolation:isolate;color:#fff;background:#0d1626;box-shadow:0 30px 80px -40px rgba(13,22,38,.55);transition:min-height .7s cubic-bezier(.22,1,.36,1),box-shadow .5s ease;outline:none;cursor:default}
.whyx:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--orange,#fe7400)}
.whyx__media{position:absolute;inset:0;z-index:-2}
.whyx__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform 1.2s cubic-bezier(.22,1,.36,1),filter .7s ease}
.whyx__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,15,28,0) 30%,rgba(9,15,28,.55) 65%,rgba(9,15,28,.9) 100%);transition:background .7s ease}
.whyx__cover{padding:clamp(24px,4vw,56px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 32px;transition:opacity .45s ease,transform .6s cubic-bezier(.22,1,.36,1),padding .6s ease}
.whyx__eyebrow{width:100%;margin:0;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:10px}
.whyx__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange,#fe7400);box-shadow:0 0 0 4px rgba(254,116,0,.25)}
.whyx__title{margin:0;font-family:Archivo,sans-serif;font-weight:700;font-stretch:112%;font-size:clamp(40px,7vw,96px);line-height:.95;letter-spacing:-.03em;color:#fff;text-wrap:balance}
.whyx__hint{display:inline-flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:500 14px/1 "IBM Plex Sans",sans-serif;color:#fff}
.whyx__plus{position:relative;width:30px;height:30px;border-radius:50%;background:var(--orange,#fe7400)}
.whyx__plus::before,.whyx__plus::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:#fff;border-radius:2px;transform:translate(-50%,-50%);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.whyx__plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.whyx__hint-m{display:none}
@media (hover:none),(max-width:899px){.whyx__hint-d{display:none}.whyx__hint-m{display:inline}}

.whyx__detail{display:grid;grid-template-rows:0fr;grid-template-columns:minmax(0,1fr);transition:grid-template-rows .7s cubic-bezier(.22,1,.36,1)}
.whyx__intro,.whyx__list{opacity:0;transform:translateY(24px);transition:opacity .4s ease,transform .6s cubic-bezier(.22,1,.36,1)}

.whyx__inner{min-height:0;overflow:hidden;display:grid;gap:24px;padding:0 clamp(24px,4vw,56px) clamp(24px,4vw,56px)}
.whyx__intro{padding:0}
.whyx__kicker{margin:0 0 14px;font:600 12px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--orange,#fe7400)}
.whyx__h{margin:0 0 14px;font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.08;letter-spacing:-.02em;color:#fff;text-wrap:balance}
.whyx__lede{margin:0;max-width:46ch;color:rgba(255,255,255,.8);font-size:clamp(15px,1.2vw,17px);line-height:1.6}
.whyx__list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.whyx__item{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;transform:translateY(18px);transition:opacity .45s ease calc(var(--i)*70ms + 150ms),transform .6s cubic-bezier(.22,1,.36,1) calc(var(--i)*70ms + 150ms),background .3s ease}
.whyx__item:hover{background:rgba(255,255,255,.14)}
.whyx__icon{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(254,116,0,.16);color:var(--orange,#fe7400)}
.whyx__icon svg{width:20px;height:20px}
.whyx__item h4{margin:2px 0 6px;font:600 16px/1.3 "IBM Plex Sans",sans-serif;color:#fff}
.whyx__item p{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.72)}

/* Open state: desktop hover / keyboard focus, or .is-open from scroll */
.whyx.is-open,.whyx:focus-within{min-height:clamp(560px,62vw,760px)}
@media (hover:hover) and (min-width:900px){.whyx:hover{min-height:clamp(560px,62vw,760px)}}
.whyx.is-open .whyx__detail,.whyx:focus-within .whyx__detail{grid-template-rows:1fr}
@media (hover:hover) and (min-width:900px){.whyx:hover .whyx__detail{grid-template-rows:1fr}}

/* Collected open styles */
.whyx.is-open .whyx__media img,.whyx:focus-within .whyx__media img{transform:scale(1.08);filter:saturate(.85)}
.whyx.is-open .whyx__shade,.whyx:focus-within .whyx__shade{background:linear-gradient(180deg,rgba(9,15,28,.35) 0%,rgba(9,15,28,.78) 40%,rgba(9,15,28,.94) 100%)}
.whyx.is-open .whyx__intro,.whyx.is-open .whyx__list,.whyx.is-open .whyx__item,
.whyx:focus-within .whyx__intro,.whyx:focus-within .whyx__list,.whyx:focus-within .whyx__item{opacity:1;transform:none}
.whyx.is-open .whyx__plus::after,.whyx:focus-within .whyx__plus::after{transform:translate(-50%,-50%) rotate(0)}
.whyx.is-open .whyx__title,.whyx:focus-within .whyx__title{font-size:clamp(30px,4vw,52px)}
@media (hover:hover) and (min-width:900px){
  .whyx:hover .whyx__media img{transform:scale(1.08);filter:saturate(.85)}
  .whyx:hover .whyx__shade{background:linear-gradient(180deg,rgba(9,15,28,.35) 0%,rgba(9,15,28,.78) 40%,rgba(9,15,28,.94) 100%)}
  .whyx:hover .whyx__intro,.whyx:hover .whyx__list,.whyx:hover .whyx__item{opacity:1;transform:none}
  .whyx:hover .whyx__plus::after{transform:translate(-50%,-50%) rotate(0)}
  .whyx:hover .whyx__title{font-size:clamp(30px,4vw,52px)}
}
.whyx__title{transition:font-size .6s cubic-bezier(.22,1,.36,1)}

/* Desktop: intro left, items in a grid on the right */
@media (min-width:900px){
  .whyx__inner{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:40px;align-items:start}
  .whyx__list{grid-template-columns:1fr 1fr}
  .whyx__item:last-child{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .whyx,.whyx *{transition-duration:.01ms!important;transition-delay:0s!important}
}
.whyx__kicker{display:none}
@media (hover:none),(max-width:899px){.whyx.is-open .whyx__hint{display:none}.whyx.is-open .whyx__cover{padding-bottom:20px}}

/* ===== Image panels: site-wide variants ===== */
.whyx__cover{flex-direction:column;align-items:flex-start;justify-content:flex-end}
.whyx__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;margin-top:6px}
.whyx__actions .btn-row{margin:0;gap:12px}
.whyx .btn--ghost{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);box-shadow:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.whyx .btn--ghost:hover{background:rgba(255,255,255,.2);color:#fff}
.whyx__cta{margin:22px 0 0}
.whyx__meta{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px 18px;color:rgba(255,255,255,.7);font-size:14px}
.whyx__meta span,.whyx__meta time{color:inherit}
.whyx__item--short{align-items:center;padding:14px 16px}
.whyx__item--short h4{margin:0;font-weight:500;font-size:15px;line-height:1.4}
.whyx__item--short .whyx__icon{width:34px;height:34px;border-radius:10px}
.whyx__item--short .whyx__icon svg{width:17px;height:17px}
.whyx__prose p{margin:0 0 14px;color:rgba(255,255,255,.82);font-size:16px;line-height:1.7}
.whyx__prose p:last-child{margin-bottom:0}
.whyx__inner--solo{grid-template-columns:1fr!important}
.whyx__inner--solo .whyx__lede{max-width:62ch}
@media (min-width:900px){.whyx__inner--solo .whyx__prose{columns:2;column-gap:40px}.whyx__inner--solo .whyx__prose p{break-inside:avoid}}

/* sizes */
.whyx--md .whyx__title{font-size:clamp(30px,4.4vw,60px);max-width:20ch;line-height:1.02}
.whyx--hero{min-height:clamp(440px,46vw,580px)}
.whyx--hero .whyx__title{font-size:clamp(32px,4.8vw,66px);max-width:18ch;line-height:1.02}
.whyx--sm{min-height:clamp(360px,34vw,440px);border-radius:24px}
.whyx--sm .whyx__title{font-size:clamp(28px,3vw,42px);max-width:16ch;line-height:1.05}
.whyx--sm .whyx__inner{grid-template-columns:1fr!important}
.whyx--md.is-open .whyx__title,.whyx--md:focus-within .whyx__title,
.whyx--hero.is-open .whyx__title,.whyx--hero:focus-within .whyx__title{font-size:clamp(26px,3.2vw,44px)}
.whyx--sm.is-open .whyx__title,.whyx--sm:focus-within .whyx__title{font-size:clamp(24px,2.4vw,32px)}
.whyx--hero.is-open,.whyx--hero:focus-within,.whyx--md.is-open,.whyx--md:focus-within{min-height:clamp(520px,56vw,700px)}
.whyx--sm.is-open,.whyx--sm:focus-within{min-height:clamp(420px,40vw,520px)}
@media (hover:hover) and (min-width:900px){
  .whyx--md:hover .whyx__title,.whyx--hero:hover .whyx__title{font-size:clamp(26px,3.2vw,44px)}
  .whyx--sm:hover .whyx__title{font-size:clamp(24px,2.4vw,32px)}
  .whyx--hero:hover,.whyx--md:hover{min-height:clamp(520px,56vw,700px)}
  .whyx--sm:hover{min-height:clamp(420px,40vw,520px)}
}
.page-hero--panel{padding-top:calc(var(--header-h,112px) + 20px);padding-bottom:clamp(32px,5vw,64px)}
.page-hero--panel .crumbs{margin-bottom:18px}
@media (max-width:899px){.whyx{border-radius:22px}.whyx__actions .btn-row{width:100%}}

/* ===== Image tiles (service, audience, blog cards) ===== */
.itile-grid{display:grid;gap:20px;grid-template-columns:1fr}
@media (min-width:640px){.itile-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.itile-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1140px){.itile-grid--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}}
.itile{position:relative;display:block;aspect-ratio:4/5;border-radius:22px;overflow:hidden;isolation:isolate;color:#fff;background:#0d1626;text-decoration:none;box-shadow:0 24px 60px -36px rgba(13,22,38,.55);transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s ease}
.itile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s cubic-bezier(.22,1,.36,1),filter .6s ease}
.itile__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(9,15,28,0) 35%,rgba(9,15,28,.6) 70%,rgba(9,15,28,.92) 100%);transition:background .6s ease}
.itile__cat{position:absolute;top:16px;left:16px;padding:7px 12px;border-radius:999px;font:600 11px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.itile__body{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;flex-direction:column}
.itile__meta{font:600 11px/1.2 "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:10px}
.itile h3{margin:0;font-family:Archivo,sans-serif;font-weight:700;font-size:clamp(18px,1.5vw,22px);line-height:1.2;letter-spacing:-.01em;color:#fff;text-wrap:balance}
.itile__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.22,1,.36,1)}
.itile__more-in{min-height:0;overflow:hidden;opacity:0;transform:translateY(12px);transition:opacity .35s ease,transform .5s cubic-bezier(.22,1,.36,1)}
.itile__more p{margin:10px 0 0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.8)}
.itile__link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:600;font-size:14px;color:#fff}
.itile__link svg{width:16px;height:16px;color:var(--orange,#fe7400);transition:transform .3s ease}
.itile:focus-visible{outline:3px solid var(--orange,#fe7400);outline-offset:3px}
.itile.is-open .itile__more,.itile:focus-visible .itile__more{grid-template-rows:1fr}
.itile.is-open .itile__more-in,.itile:focus-visible .itile__more-in{opacity:1;transform:none;transition-delay:.1s}
.itile.is-open>img,.itile:focus-visible>img{transform:scale(1.08)}
.itile.is-open .itile__shade,.itile:focus-visible .itile__shade{background:linear-gradient(180deg,rgba(9,15,28,.15) 0%,rgba(9,15,28,.7) 45%,rgba(9,15,28,.95) 100%)}
@media (hover:hover) and (min-width:900px){
  .itile:hover{transform:translateY(-4px);box-shadow:0 34px 70px -34px rgba(13,22,38,.6)}
  .itile:hover .itile__more{grid-template-rows:1fr}
  .itile:hover .itile__more-in{opacity:1;transform:none;transition-delay:.1s}
  .itile:hover>img{transform:scale(1.08)}
  .itile:hover .itile__shade{background:linear-gradient(180deg,rgba(9,15,28,.15) 0%,rgba(9,15,28,.7) 45%,rgba(9,15,28,.95) 100%)}
  .itile:hover .itile__link svg{transform:translateX(4px)}
}
.itile-grid--5 .itile{aspect-ratio:3/4.4}
.itile-grid--5 .itile__body{padding:18px}
.itile-grid--5 .itile h3{font-size:18px}
.itile-grid--5 .itile__more p{font-size:13.5px}
@media (min-width:640px) and (max-width:1139px){.itile-grid--5 .itile{aspect-ratio:4/4.2}}
@media (max-width:639px){.itile{aspect-ratio:4/4.3}.itile-grid--5 .itile{aspect-ratio:4/4.3}}
@media (min-width:900px){.itile-grid--blog .itile--lead{grid-column:1/-1;aspect-ratio:16/7}.itile-grid--blog .itile--lead h3{font-size:clamp(26px,2.6vw,36px);max-width:24ch}}
@media (prefers-reduced-motion:reduce){.itile,.itile *{transition-duration:.01ms!important;transition-delay:0s!important}}

/* ===== Background video ===== */
.bgv{position:absolute;inset:0;overflow:hidden;background:#0d1626}
.bgv picture,.bgv img,.bgv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.bgv video{opacity:0;transition:opacity .8s ease}
.bgv.is-playing video{opacity:1}
.whyx__media .bgv img,.whyx__media .bgv video{transform:scale(1.02);transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .8s ease}
.whyx.is-open .whyx__media .bgv img,.whyx.is-open .whyx__media .bgv video,.whyx:focus-within .whyx__media .bgv video{transform:scale(1.08)}
@media (hover:hover) and (min-width:900px){.whyx:hover .whyx__media .bgv img,.whyx:hover .whyx__media .bgv video{transform:scale(1.08)}}
.bgv__ctl{position:absolute;right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(13,22,38,.35);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:grid;place-items:center;cursor:pointer;transition:background .25s ease}
.bgv__ctl:hover{background:rgba(13,22,38,.6)}
.bgv__ctl:focus-visible{outline:3px solid var(--orange,#fe7400);outline-offset:3px}
.bgv__ico--pause{width:12px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.bgv__ico--play{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;margin-left:3px}
.bgv:not(.is-playing) .bgv__ctl{display:none}
.bgv.is-paused .bgv__ctl{display:grid}

/* Home hero: full-bleed video, white type */
.hero--video{background:#0d1626;color:#fff}
.hero--video .hero__media{position:absolute;inset:0;z-index:-1;height:auto;margin:0;order:initial;width:auto}
.hero--video .hero__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(9,15,28,.88) 0%,rgba(9,15,28,.7) 38%,rgba(9,15,28,.25) 75%,rgba(9,15,28,.15) 100%),linear-gradient(0deg,rgba(9,15,28,.6) 0%,rgba(9,15,28,0) 35%)}
.hero--video .hero__title,.hero--video .hero__title .line{color:#fff}
.hero--video .hero__title .line--accent{color:var(--orange,#fe7400)}
.hero--video .hero__copy{color:rgba(255,255,255,.82)}
.hero--video .kicker{color:rgba(255,255,255,.8)}
.hero--video .btn--ghost{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);box-shadow:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hero--video .btn--ghost:hover{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:760px){
  .hero--video{min-height:88svh;justify-content:flex-end}
  .hero--video .hero__media{position:absolute;inset:0;height:auto;margin:0}
  .hero--video .hero__media::after{background:linear-gradient(0deg,rgba(9,15,28,.92) 0%,rgba(9,15,28,.72) 45%,rgba(9,15,28,.35) 100%)}
  .hero--video > .wrap{margin-top:auto}
}
@media (prefers-reduced-motion:reduce){.bgv video{display:none}}

/* Transparent header over the home video */
.brand{position:relative}
.brand__alt{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .3s ease}
.site-header--over:not(.is-scrolled) .brand img:not(.brand__alt){opacity:0}
.site-header--over:not(.is-scrolled) .brand__alt{opacity:1}
.site-header--over .brand img{transition:opacity .3s ease}
.site-header--over:not(.is-scrolled) .nav__link{color:rgba(255,255,255,.88)}
.site-header--over:not(.is-scrolled) .nav__link:hover,.site-header--over:not(.is-scrolled) .nav__link[aria-expanded="true"]{color:#fff;background:rgba(255,255,255,.12);box-shadow:none}
.site-header--over:not(.is-scrolled) .nav__link[aria-current="page"]{color:var(--orange)}
body.menu-open .site-header--over .brand img:not(.brand__alt){opacity:1}
body.menu-open .site-header--over .brand__alt{opacity:0}
@media (max-width:760px){.hero--video .bgv__ctl{top:calc(var(--header-h,74px) + 12px);bottom:auto}}

/* ===== Home: sticky video stage (hero + trust) ===== */
.stage{position:relative;background:#0d1626;isolation:isolate}
.stage__bg{position:sticky;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;z-index:0;overflow:hidden}
.stage__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(9,15,28,.86) 0%,rgba(9,15,28,.62) 40%,rgba(9,15,28,.25) 78%,rgba(9,15,28,.18) 100%),linear-gradient(0deg,rgba(9,15,28,.55) 0%,rgba(9,15,28,0) 40%)}
.stage .bgv__ctl{z-index:2}
.stage>section{position:relative;z-index:1;background:transparent}
.stage .hero--video{background:transparent}
.trust--stage{margin-top:0;padding:8px 0 clamp(56px,8vw,110px)}
.trust--stage .trust__row{background:rgba(13,22,38,.42);border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -36px rgba(0,0,0,.6)}
.trust--stage .trust__row li+li{border-color:rgba(255,255,255,.12)}
.trust--stage .trust__row strong{color:#fff}
.trust--stage .trust__row span{color:rgba(255,255,255,.7)}
.trust--stage .trust__row svg{background:rgba(254,116,0,.16)}
@media (max-width:760px){
  .stage__bg::after{background:linear-gradient(0deg,rgba(9,15,28,.9) 0%,rgba(9,15,28,.65) 50%,rgba(9,15,28,.4) 100%)}
  .stage .hero--video{min-height:84svh}
  .stage .bgv__ctl{top:auto;bottom:16px}
}
@media (max-width:520px){.trust--stage{margin-top:0}}

/* ===== Full-bleed video hero (Contact) ===== */
.vhero{position:relative;isolation:isolate;overflow:hidden;min-height:min(92vh,860px);min-height:min(92svh,860px);display:flex;align-items:flex-end;padding:calc(var(--header-h,112px) + 48px) 0 clamp(48px,7vw,96px);color:#fff;background:#0d1626}
.vhero__bg{position:absolute;inset:0;z-index:-1}
.vhero__bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(9,15,28,.85) 0%,rgba(9,15,28,.35) 55%,rgba(9,15,28,.25) 100%),linear-gradient(90deg,rgba(9,15,28,.55) 0%,rgba(9,15,28,0) 60%)}
.vhero .bgv__ctl{z-index:2}
.vhero__content{position:relative;z-index:1;width:100%}
.vhero .crumbs,.vhero .crumbs a,.vhero .crumbs span{color:rgba(255,255,255,.75)}
.vhero .crumbs [aria-current]{color:#fff}
.vhero .kicker{color:rgba(255,255,255,.8)}
.vhero .h1{color:#fff;max-width:16ch;margin:14px 0 18px}
.vhero .lede{color:rgba(255,255,255,.84);max-width:54ch;margin-bottom:28px}
.vhero .btn--ghost{color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);box-shadow:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.vhero .btn--ghost:hover{background:rgba(255,255,255,.2);color:#fff}
@media (max-width:760px){.vhero{min-height:88svh}.vhero .bgv__ctl{top:calc(var(--header-h,74px) + 12px);bottom:auto}}

/* ===== Simple service tiles: name + arrow only ===== */
@media (min-width:1100px){.itile-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.itile--simple .itile__body{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:14px}
.itile__go{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;transition:background .3s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.itile__go svg{width:18px;height:18px}
.itile--simple:hover .itile__go,.itile--simple:focus-visible .itile__go{background:var(--orange,#fe7400);border-color:var(--orange,#fe7400);transform:translateX(3px)}
.itile--simple:hover>img,.itile--simple:focus-visible>img{transform:scale(1.06)}
.itile-grid--5 .itile--simple .itile__go{width:34px;height:34px}
.itile-grid--5 .itile--simple .itile__go svg{width:15px;height:15px}
.itile--simple:active{transform:scale(.985)}
.stage+.featured,.stage~section{position:relative;z-index:2;background:var(--bg,#eef1f5)}
.stage+.featured{border-radius:28px 28px 0 0;margin-top:-28px;box-shadow:0 -24px 60px -30px rgba(9,15,28,.45)}

/* ===== Page transition: frosted page + animated logo mark ===== */
.page-curtain{display:none}
.pt{position:fixed;inset:0;z-index:900;pointer-events:none;display:grid;place-items:center;opacity:0;visibility:hidden;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:opacity .35s ease,backdrop-filter .45s ease,-webkit-backdrop-filter .45s ease,visibility 0s linear .45s}
.pt.is-in{opacity:1;visibility:visible;pointer-events:auto;-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);transition:opacity .3s ease,backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease,visibility 0s}
.pt.is-instant,.pt.is-instant *{transition:none!important;animation:none!important}
.pt.is-leaving{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);transition:opacity .5s ease .1s,backdrop-filter .5s ease,-webkit-backdrop-filter .5s ease}
.pt__disc{position:relative;width:132px;height:132px;display:grid;place-items:center;background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 30px 70px -30px rgba(9,15,28,.45),inset 0 1px 0 #fff;clip-path:polygon(24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%,0 24px);transform:scale(.6) rotate(-8deg);opacity:0;transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.pt.is-in .pt__disc{transform:none;opacity:1}
.pt.is-leaving .pt__disc{transform:scale(1.15);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease}
.pt__mark{width:68px;height:68px;overflow:visible}
.pt__mark path{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:translateY(14px) scaleY(.4)}
.pt.is-in .pt__mark path{animation:ptBuild .5s cubic-bezier(.22,1,.36,1) forwards;animation-delay:calc(var(--i) * 45ms + 80ms)}
.pt.is-leaving .pt__mark path{opacity:1;transform:none;animation:none}
@keyframes ptBuild{to{opacity:1;transform:none}}
.pt__ring{position:absolute;inset:10px;border:2px solid transparent;border-top-color:var(--orange,#fe7400);border-right-color:rgba(254,116,0,.35);border-radius:50%;opacity:0}
.pt.is-in .pt__ring{opacity:1;animation:ptSpin .9s linear infinite .35s}
@keyframes ptSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pt{display:none}}

/* ===== Shape language: architectural cuts, arches and offset radii (not every card a rounded rectangle) ===== */
:root{--cut:26px;--cut-s:18px}
/* Featured services: chamfered corners, alternating side */
.xgrid .xcard{border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.xgrid .xcard:nth-child(even){clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.xgrid .xcard::before{content:"";position:absolute;z-index:3;top:0;left:0;width:44px;height:3px;background:var(--orange,#fe7400);transition:width .5s cubic-bezier(.22,1,.36,1)}
.xgrid .xcard:nth-child(even)::before{left:auto;right:0}
.xgrid .xcard:hover::before,.xgrid .xcard.is-open::before{width:96px}
/* Service tiles: cut top-right corner */
.itile-grid--5 .itile,.itile-grid--3:not(.itile-grid--arch) .itile{border-radius:0;box-shadow:none;clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%)}
.itile-grid--5 .itile:hover,.itile-grid--3:not(.itile-grid--arch) .itile:hover{transform:translateY(-4px)}
/* Who we serve: arched tops */
.itile-grid--arch .itile{border-radius:999px 999px 10px 10px;aspect-ratio:4/5.2}
.itile-grid--arch .itile .itile__body{padding:26px 26px 24px}
/* Blog: offset radii */
.itile-grid--blog .itile,.itile-grid--3 .itile[href*="blog/"]{border-radius:32px 4px 32px 4px}
.itile-grid--3 .itile[href*="blog/"]{clip-path:none}
/* Image panels: leaf shape, mirrored on alternate sections */
.whyx{border-radius:44px 6px 44px 6px}
section:nth-of-type(even) .whyx{border-radius:6px 44px 6px 44px}
.whyx--hero{border-radius:6px 6px 64px 6px!important}
.whyx--sm{border-radius:6px 36px 6px 36px!important}
.whyx__item{border-radius:4px 16px 4px 16px}
.whyx__icon{border-radius:4px 12px 4px 12px}
/* Pricing: offset radii, featured mirrored */
.plan{border-radius:6px 32px 6px 32px}
.plan--featured{border-radius:32px 6px 32px 6px}
/* Trust strip, quote card, contact cards */
.trust__row{border-radius:4px 28px 4px 28px}
.quote-card{border-radius:6px 40px 6px 40px}
.contact-card{border-radius:0;clip-path:polygon(var(--cut-s) 0,100% 0,100% 100%,0 100%,0 var(--cut-s))}
@media (max-width:639px){:root{--cut:20px}.itile-grid--arch .itile{border-radius:220px 220px 10px 10px;aspect-ratio:4/4.6}}

/* ===== Tighter rhythm ===== */
.section{padding-block:clamp(52px,6vw,88px)}
.section--tight{padding-block:clamp(32px,4vw,56px)}
.featured{padding-block:clamp(48px,5.5vw,80px)}
.section-head{margin-bottom:clamp(24px,3vw,40px)}
.page-hero--panel{padding-bottom:clamp(20px,3vw,40px)}
.section[style*="padding-top:24px"]{padding-top:8px!important}
#software{padding-block:clamp(20px,3vw,36px)}
#software .fineprint{margin-top:10px}

/* ===== Section dividers: stepped construction-section edges ===== */
:root{--step:38px;--tint:#e5e9ef}
.section--paper,.section--graphite{
  background:linear-gradient(var(--orange,#fe7400),var(--orange,#fe7400)) no-repeat calc(62% + var(--step)) 0/72px 3px,var(--tint);
  clip-path:polygon(0 var(--step),62% var(--step),calc(62% + var(--step)) 0,100% 0,100% calc(100% - var(--step)),38% calc(100% - var(--step)),calc(38% - var(--step)) 100%,0 100%);
  padding-block:calc(clamp(52px,6vw,88px) + var(--step) * .6);
}
section.section--paper:nth-of-type(even),section.section--graphite:nth-of-type(even){
  background:linear-gradient(var(--orange,#fe7400),var(--orange,#fe7400)) no-repeat calc(38% - var(--step) - 72px) 0/72px 3px,var(--tint);
  clip-path:polygon(0 0,calc(38% - var(--step)) 0,38% var(--step),100% var(--step),100% 100%,62% 100%,calc(62% - var(--step)) calc(100% - var(--step)),0 calc(100% - var(--step)));
}
/* neighbours tuck into the steps so no extra gap appears */
.section--paper+.section,.section--graphite+.section{margin-top:calc(var(--step) * -.5)}
.section+.section--paper,.section+.section--graphite{margin-top:calc(var(--step) * -.5)}
/* Footer: stepped top edge */
.site-footer{clip-path:polygon(0 var(--step),28% var(--step),calc(28% + var(--step)) 0,100% 0,100% 100%,0 100%);padding-top:calc(clamp(56px,7vw,88px) + var(--step) * .5);position:relative}
.site-footer::before{content:"";position:absolute;top:0;left:calc(28% + var(--step));width:88px;height:3px;background:var(--orange,#fe7400)}
@media (max-width:760px){:root{--step:22px}}

/* Hero copy slideshow */
.hero__rotator{position:relative;display:grid;min-height:1.7em;overflow:hidden;max-width:46ch;padding-left:16px;border-left:3px solid var(--orange,#fe7400)}
.hero__slide{grid-area:1/1;opacity:0;transform:translateY(110%);transition:opacity .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.hero__slide.is-active{opacity:1;transform:none}
.hero__slide.is-out{opacity:0;transform:translateY(-110%)}
@media (prefers-reduced-motion:reduce){.hero__slide{transition:none}}