/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .static {
    position: static;
  }
  .start {
    inset-inline-start: var(--spacing);
  }
  .end {
    inset-inline-end: var(--spacing);
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
@font-face {
  font-family: "FuturaDemiC";
  src: url("/fonts/futurademic-regular.woff2") format("woff2"),
       url("/fonts/futurademic-regular.woff") format("woff"),
       url("/fonts/futurademic-regular.otf") format("opentype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "FuturaDemiC";
  src: url("/fonts/futurademic-italic.woff2") format("woff2"),
       url("/fonts/futurademic-italic.woff") format("woff"),
       url("/fonts/futurademic-italic.otf") format("opentype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
:root {
  --black: #2d2d2d;
  --dark: #323232;
  --panel: #3a3a3a;
  --panel-soft: #3f3f41;
  --text: #f4f4f5;
  --muted: #a6a6ac;
  --quiet: #8b8b91;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.07);
  --accent: #d8e7f4;
  --warm: #d8c8b4;
  --font-display: "FuturaDemiC", "Futura", "Trebuchet MS", Arial, sans-serif;
  --font-ui: "FuturaDemiC", "Futura", "Trebuchet MS", Arial, sans-serif;
  --radius-pill: 999px;
  --radius-soft: 18px;
  --glass-bg: rgba(255, 255, 255, .06);
  --glass-bg-hover: rgba(255, 255, 255, .12);
  --glass-light: rgba(244, 244, 245, .9);
  --glass-border: rgba(255, 255, 255, .2);
  --glass-blur: blur(20px) saturate(150%);
  --hero-blur: 30px;
  --hero-blue: #8ea3d1;
  --hero-warm: #d99166;
  --block-fill: 35%;
  --block-fill-warm: 70%;
  --header-h: 104px;
  --texture-size: 295vw;
  --glass-shadow: 0 12px 32px rgba(0, 0, 0, .38);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -1px 0 rgba(0, 0, 0, .18);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  background: var(--black);
}
body {
  font-variant-emoji: text;
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--black);
  color: var(--text);
  font-family: var(--font-ui);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
  background-image: linear-gradient(to right, transparent calc(25% - .5px), rgba(255,255,255,.04) 25%, transparent calc(25% + .5px)), linear-gradient(to right, transparent calc(50% - .5px), rgba(255,255,255,.04) 50%, transparent calc(50% + .5px)), linear-gradient(to right, transparent calc(75% - .5px), rgba(255,255,255,.04) 75%, transparent calc(75% + .5px)), linear-gradient(to bottom, transparent calc(50% - .5px), rgba(255,255,255,.025) 50%, transparent calc(50% + .5px));
}
::selection {
  background: var(--text);
  color: var(--black);
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--black);
}
::-webkit-scrollbar-thumb {
  background: #3b3b3f;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  object-fit: cover;
}
.shell {
  width: min(1500px, calc(100% - 96px));
  margin-inline: auto;
}
h1, h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -.035em;
}
h3 {
  font-weight: 400;
}
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 80;
  background: transparent;
}
.headerInner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 48px;
}
.brand {
  display: flex;
  align-items: center;
  margin-right: auto;
}
.brand img {
  height: 34px;
  width: auto;
  display: block;
  transition: opacity .25s;
}
.brand:hover img {
  opacity: .78;
}
.navPill {
  height: 62px;
  padding: 0 8px 0 26px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .07);
  backdrop-filter: blur(var(--hero-blur)) saturate(140%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .3), var(--glass-inset);
}
.navPill > a {
  padding: 0 14px;
  display: flex;
  align-items: center;
  position: relative;
  color: #f0f0f2;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s, opacity .25s;
}
.navPill > a::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 13px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .38);
}
.navPill > a:last-child::after, .navPill > a:has(+ .navPillGo)::after {
  display: none;
}
.navPill > a:not(.navPillGo):hover {
  color: #fff;
  text-shadow: 0 0 18px rgba(255, 255, 255, .45);
}
.navPill > a:has(+ .navPillGo) {
  padding-right: 7px;
}
.navPill > .navPillGo {
  align-self: stretch;
  padding: 0 10px 0 0;
  color: #fff;
}
.navPillGo svg {
  width: 24px;
  height: 24px;
  display: block;
  overflow: visible;
}
.navPillGo circle {
  transition: fill .3s;
}
.navPillGo path {
  transition: stroke .3s;
}
.navPillGo:hover circle {
  fill: #fff;
}
.navPillGo:hover path {
  stroke: var(--black);
}
.navPill > a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .65);
  outline-offset: 2px;
  border-radius: var(--radius-pill);
}
.mobileMenu {
  display: none;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow span {
  width: 16px;
  height: 1px;
  background: #fff;
}
.eyebrow.light {
  color: var(--muted);
}
.eyebrow.light span {
  background: #fff;
}
.button {
  position: relative;
  isolation: isolate;
  min-height: 52px;
  padding: 0 16px 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-inset);
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s, box-shadow .3s, transform .3s;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,.18), rgba(255,255,255,0) 58%);
  pointer-events: none;
}
.button:hover {
  transform: translateY(-1px);
}
.button:active {
  transform: translateY(0);
}
.button:focus-visible {
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}
.button b {
  position: relative;
  width: 24px;
  height: 24px;
  flex: none;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
  font-size: 0;
  transition: background .3s, color .3s, border-color .3s;
}
.button b::before, .heroActions .textLink span::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6l6 6-6 6' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6l6 6-6 6' fill='none' stroke='%23000'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.buttonPrimary, .buttonIvory {
  background: var(--glass-light);
  border-color: rgba(255,255,255,.55);
  color: var(--black);
  box-shadow: 0 12px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.85);
}
.buttonPrimary:hover, .buttonIvory:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border);
  color: #fff;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.buttonOutline {
  color: #fff;
}
.buttonOutline:hover {
  background: var(--glass-bg-hover);
  border-color: rgba(255,255,255,.4);
}
.textLink {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: #b7b7bc;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: .25s;
}
.textLink:hover {
  color: #fff;
  border-color: #fff;
}
.textLink span {
  margin-left: 18px;
}
.lightLink {
  border-color: var(--line);
}
.section {
  padding-top: 128px;
  padding-bottom: 128px;
}
.sectionHead {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.sectionHead h2, .processIntro h2, .estimateInner h2 {
  font-size: clamp(48px, 5vw, 76px);
  line-height: .96;
}
.sectionHead > p {
  max-width: 470px;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.425;
}
.hero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  min-height: min(920px, 100vh);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--header-h) + clamp(36px, 6vh, 96px)) 0 clamp(48px, 7vh, 104px);
  overflow: hidden;
}
.heroMedia {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #333334;
}
.heroMedia img, .heroMedia video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 86%;
}
.heroArt {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.heroArt i, .heroArt b, .heroArt u {
  display: block;
  position: absolute;
}
.heroTexture {
  position: absolute;
  inset: 0;
  background: url("/assets/texture-hero.svg") 0 0 / var(--texture-size) auto repeat fixed;
}
.heroBlur {
  position: absolute;
  inset: 0 50% 0 0;
  backdrop-filter: blur(var(--hero-blur));
}
.heroLines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, transparent calc(20% - .5px), rgba(255,255,255,.3) 20%, transparent calc(20% + .5px)),
  linear-gradient(to right, transparent calc(40% - .5px), rgba(255,255,255,.3) 40%, transparent calc(40% + .5px)),
  linear-gradient(to right, transparent calc(60% - .5px), rgba(255,255,255,.3) 60%, transparent calc(60% + .5px)),
  linear-gradient(to right, transparent calc(80% - .5px), rgba(255,255,255,.3) 80%, transparent calc(80% + .5px)),
  linear-gradient(to bottom, transparent calc(29% - .5px), rgba(255,255,255,.3) 29%, transparent calc(29% + .5px)),
  linear-gradient(to bottom, transparent calc(71% - .5px), rgba(255,255,255,.3) 71%, transparent calc(71% + .5px));
}
.heroArt b.blockWarm, .caseArt b.caseBlockWarm {
  backdrop-filter: none;
}
.heroArt b {
  background: var(--hero-blue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--hero-blue) var(--block-fill), transparent);
  }
  backdrop-filter: blur(var(--hero-blur));
}
.heroArt b.blockTop {
  left: 60%;
  right: 20%;
  top: 0;
  height: 29%;
}
.heroArt b.blockBottom {
  left: 60%;
  right: 20%;
  top: 71%;
  bottom: 0;
}
.heroArt b.blockWarm {
  left: 20%;
  right: 60%;
  top: 29%;
  bottom: 29%;
  background: var(--hero-warm);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--hero-warm) var(--block-fill-warm), transparent);
  }
}
.heroArt u {
  top: 50%;
  left: var(--ring-left);
  width: 40.3%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 50%;
}
.heroArt u.ringMobile, .heroSpark.artMobile {
  display: none;
}
.heroSpark {
  position: absolute;
  transform: translate(-50%, -50%);
  color: #fff;
}
.heroSpark svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}
.heroSpark.small {
  width: clamp(13px, 1.5vw, 25px);
}
.heroSpark.large {
  width: clamp(20px, 2.4vw, 40px);
  filter: drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 0 34px rgba(255,255,255,.25));
}
.heroInner {
  position: relative;
  z-index: 2;
  padding: 0 48px 0 clamp(48px, 15vw, 300px);
}
.hero h1 {
  margin: 0;
}
.heroHeadline {
  display: block;
  width: min(28vw, 560px);
  height: auto;
  filter: drop-shadow(0 2px 40px rgba(0, 0, 0, .45));
}
.heroLead {
  max-width: 460px;
  margin: clamp(26px, 3vw, 42px) 0 0;
  color: #fff;
  font-size: 26px;
  line-height: 1.425;
}
.heroActions {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-top: clamp(26px, 3vw, 40px);
}
.heroActions .button {
  min-height: 65px;
  padding: 0 30px;
  gap: 10px;
  border-color: transparent;
  background: var(--hero-warm);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--hero-warm) 70.2%, transparent);
  }
  backdrop-filter: blur(3.5px);
  box-shadow: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.heroActions .button::before {
  inset: -1px;
  padding: 1px;
  background: radial-gradient(41% 94% at -6.3% -2.3%, #fff, transparent), radial-gradient(102% 262% at 110% 111%, #fff, transparent);
  -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);
}
.heroActions .button:hover {
  background: var(--hero-warm);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--hero-warm) 85%, transparent);
  }
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}
.heroActions .button b {
  width: 27px;
  height: 27px;
  border-color: #fff;
  color: #fff;
}
.heroActions .button:hover b {
  background: #fff;
  color: var(--black);
}
.heroActions .textLink {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0;
  border-bottom: 0;
  color: #e4e4ff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-shadow: 0 1px 14px rgba(0,0,0,.75);
}
.heroActions .textLink span {
  position: relative;
  width: 27px;
  height: 27px;
  flex: none;
  margin-left: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0;
  transition: background .3s, color .3s, border-color .3s;
}
.heroActions .textLink:hover {
  color: #fff;
}
.heroActions .textLink:hover span {
  background: #fff;
  border-color: #fff;
  color: var(--black);
}
.segmentImage > img, .projectCard > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.trustStrip {
  background: var(--dark);
  border-block: 1px solid var(--line);
}
.trustGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.trustGrid div {
  min-height: 132px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid var(--line);
}
.trustGrid div:first-child {
  border-left: 1px solid var(--line);
}
.trustGrid strong {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 400;
}
.trustGrid span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 18px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.segmentGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.segmentCard {
  min-width: 0;
  background: var(--black);
  transition: background .4s;
}
.segmentCard:hover {
  background: var(--panel);
}
.segmentImage {
  height: 340px;
  position: relative;
  overflow: hidden;
}
.segmentImage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), transparent 62%);
}
.segmentImage img {
  filter: grayscale(1);
  opacity: .72;
  transition: .8s;
}
.segmentCard:hover .segmentImage img {
  filter: grayscale(0);
  opacity: .9;
  transform: scale(1.025);
}
.segmentBody {
  min-height: 225px;
  padding: 28px;
  position: relative;
}
.segmentBody small, .benefitGrid small, .valuesGrid article small, .knowledgeGrid small, .catalogCard small, .darkCatalog small, .priceGrid small, .stageList small, .calculatorExplanation small {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.segmentBody h3 {
  margin: 48px 0 10px;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1.05;
}
.segmentBody p {
  max-width: 330px;
  margin: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.375;
}
.circleArrow {
  position: absolute;
  top: 23px;
  right: 23px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
}
.sectionTail {
  margin-top: 42px;
  display: flex;
  justify-content: flex-end;
}
.projectsSection {
  background: #303030;
  color: #fff;
  border-block: 1px solid var(--line-soft);
  position: relative;
}
.section.projectsSection {
  padding-top: 40px;
}
.projectsHead {
  position: relative;
  z-index: 2;
}
.projectGrid {
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  grid-template-rows: 260px 260px;
  gap: 16px;
  position: relative;
  z-index: 2;
}
.projectCard {
  min-height: 260px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.projectCard.featured {
  grid-row: 1 / 3;
}
.projectCard img {
  filter: grayscale(1);
  opacity: .78;
  transition: .9s;
}
.projectCard:hover img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.025);
}
.projectShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.82));
}
.projectLabel {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 22px;
}
.projectLabel small {
  color: #a5a5aa;
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.projectLabel h3 {
  margin: 5px 0 0;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
}
.projectLabel p {
  margin: 5px 0 0;
  color: #aaaab0;
  font-size: 18px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.processSection {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 110px;
}
.processIntro > p:last-of-type {
  max-width: 450px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.425;
}
.processIntro .textLink {
  display: inline-block;
  margin-top: 28px;
}
.processList, .caseStory ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.processList li, .caseStory li {
  padding: 27px 0;
  display: grid;
  grid-template-columns: 58px 1fr;
  border-bottom: 1px solid var(--line);
  transition: background .25s;
}
.processList li:hover {
  background: rgba(255,255,255,.02);
}
.processList b, .caseStory li b {
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .08em;
}
.processList h3 {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 27px;
}
.processList p {
  margin: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.35;
}
.calculatorBand {
  padding: 110px 0;
  background: var(--dark);
  border-block: 1px solid var(--line);
}
.estimator {
  padding-top: 120px;
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 90px;
}
.estimatorCompact {
  margin: 0;
  padding: 0;
}
.estimatorIntro h2 {
  font-size: clamp(48px, 5vw, 70px);
  line-height: .98;
}
.estimatorIntro > p:last-child {
  max-width: 470px;
  margin-top: 25px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.4;
}
.estimatorCard, .briefCard {
  padding: 36px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.segmentSwitch {
  margin: 0 0 26px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  border: 0;
}
.segmentSwitch legend, .estimatorFields label, .briefCard label {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.segmentSwitch legend {
  grid-column: 1 / 4;
  margin-bottom: 10px;
}
.segmentSwitch button {
  min-height: 54px;
  padding: 9px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
  color: #b8b8bd;
  font: 500 15px/1.4 var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: .25s;
}
.segmentSwitch button:hover, .segmentSwitch button.active {
  background: var(--glass-light);
  border-color: rgba(255,255,255,.55);
  color: #050505;
}
.segmentSwitch button:focus-visible {
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}
.estimatorFields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.estimatorFields label, .briefCard label {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.estimatorFields > *:last-child {
  grid-column: 1 / 3;
}
.estimatorFields select, .estimatorFields input, .briefCard select, .briefCard input {
  height: 52px;
  padding: 0 18px;
  outline: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
  color: #efeff0;
  font: 400 15px var(--font-ui);
  color-scheme: dark;
  transition: border-color .25s, background .25s;
}
.estimatorFields select:focus, .estimatorFields input:focus, .briefCard select:focus, .briefCard input:focus {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
}
.field {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.fieldLabel {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dropdown {
  position: relative;
}
.dropdownButton {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  outline: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
  color: #efeff0;
  font: 400 20px var(--font-ui);
  text-align: left;
  cursor: pointer;
  transition: border-color .25s, background .25s;
}
.dropdownButton:hover {
  background: rgba(255,255,255,.1);
}
.dropdownButton:focus-visible {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
}
.dropdown.isOpen .dropdownButton {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
}
.dropdownButton i {
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  margin-top: -4px;
  transform: rotate(45deg);
  transition: transform .25s, margin-top .25s;
}
.dropdown.isOpen .dropdownButton i {
  margin-top: 3px;
  transform: rotate(225deg);
}
.dropdownList {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 264px;
  margin: 0;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-soft);
  background: rgba(50, 50, 50, .72);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45), var(--glass-inset);
}
.dropdownList li {
  color: #c4c4c8;
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s;
}
.dropdownList li.isActive, .dropdownList li:hover {
  color: #fff;
}
.dropdownList li[aria-selected="true"] {
  color: #fff;
}
.dropdownList li[aria-selected="true"]::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 9px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.estimateOutput {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.estimateOutput > div {
  padding: 18px;
  display: flex;
  flex-direction: column;
  background: #353536;
}
.estimateOutput small, .briefResult small {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.estimateOutput strong {
  margin-top: 7px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
}
.estimateWide {
  grid-column: 1 / 3;
}
.estimateWide p, .briefResult p {
  margin: 7px 0 0;
  font-size: 22px;
  line-height: 1.325;
}
.estimateNote {
  grid-column: 1 / 3;
  margin: 0;
  padding: 15px 18px;
  background: var(--panel);
  color: var(--muted);
  font-size: 18px;
  line-height: 1.325;
}
.estimateButtons {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 28px;
}
.knowledgeGrid, .benefitGrid, .catalogGrid, .darkCatalog, .priceGrid {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.knowledgeGrid {
  grid-template-columns: repeat(3, 1fr);
}
.knowledgeGrid a {
  min-height: 280px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .25s;
}
.knowledgeGrid a:hover {
  background: var(--panel);
}
.knowledgeGrid h3 {
  margin: 58px 0 20px;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.15;
}
.knowledgeGrid span {
  margin-top: auto;
  color: var(--muted);
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.faqSection {
  display: grid;
  grid-template-columns: .65fr 1.35fr;
  gap: 100px;
  border-top: 1px solid var(--line);
}
.faqSection h2, .articleFaq > h2 {
  font-size: clamp(45px, 5vw, 66px);
  line-height: .98;
}
.faqSection details, .articleFaq details {
  border-top: 1px solid var(--line);
}
.faqSection details:last-child, .articleFaq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faqSection summary, .articleFaq summary {
  padding: 23px 0;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 25px;
}
.faqSection summary span, .articleFaq summary span {
  color: var(--muted);
}
.faqSection details p, .articleFaq details p {
  margin: 0;
  padding: 0 40px 23px 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.375;
}
.estimateSection, .portfolioCta {
  padding: 100px 0;
  background: var(--dark);
  border-top: 1px solid var(--line);
  color: #fff;
}
.estimateInner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 70px;
}
.estimateInner > div > p:last-child {
  max-width: 640px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.4;
}
.estimateActions {
  min-width: 365px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.estimateActions small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.innerHero {
  min-height: 690px;
  padding-top: 70px;
  padding-bottom: 70px;
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 70px;
  align-items: center;
}
.innerHeroCopy h1 {
  font-size: clamp(58px, 6vw, 90px);
  line-height: .94;
}
.innerHeroCopy > p:not(.eyebrow) {
  max-width: 610px;
  margin: 28px 0 34px;
  color: var(--muted);
  font-size: 26px;
  line-height: 1.425;
}
.innerHeroVisual {
  height: 560px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.innerHeroVisual > img {
  width: 100%;
  height: 100%;
  filter: grayscale(1) brightness(.78);
  transition: .8s;
}
.innerHeroVisual:hover > img {
  filter: grayscale(.15) brightness(.85);
  transform: scale(1.02);
}
.innerHeroVisual > div {
  position: absolute;
  left: 23px;
  bottom: 23px;
  max-width: 270px;
  padding: 16px 19px;
  display: flex;
  flex-direction: column;
  background: rgba(45,45,45,.62);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.innerHeroVisual small {
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.innerHeroVisual strong {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 400;
}
.benefitGrid {
  grid-template-columns: repeat(4, 1fr);
}
.benefitGrid article {
  min-height: 250px;
  padding: 28px 25px 34px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.benefitGrid h3, .valuesGrid h3 {
  margin: 65px 0 12px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
}
.benefitGrid p, .valuesGrid p {
  margin: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.375;
}
.includedSection {
  padding: 110px 0;
  background: var(--dark);
  border-block: 1px solid var(--line);
}
.includedGrid {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 110px;
}
.includedGrid h2 {
  font-size: clamp(48px, 5vw, 72px);
  line-height: .98;
}
.includedGrid ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.includedGrid li {
  padding: 20px 0;
  display: grid;
  grid-template-columns: 58px 1fr;
  border-bottom: 1px solid var(--line);
}
.includedGrid li b {
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .08em;
}
.includedGrid li span {
  font-family: var(--font-display);
  font-size: 25px;
}
.brief {
  padding-top: 120px;
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 100px;
}
.briefIntro h2 {
  font-size: clamp(48px, 5vw, 70px);
  line-height: .98;
}
.briefIntro > p:last-child {
  max-width: 440px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.4;
}
.briefCard {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 22px;
}
.briefResult {
  grid-column: 1 / 3;
  padding: 20px;
  background: #353536;
  border: 1px solid var(--line-soft);
}
.briefButtons {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 28px;
}
.pageIntro {
  padding-top: 120px;
  padding-bottom: 86px;
}
.pageIntro.isTight {
  padding-top: 96px;
}
.pageIntro h1 {
  max-width: 1160px;
  font-size: clamp(62px, 7vw, 106px);
  line-height: .9;
}
.pageIntro > p:last-child {
  max-width: 720px;
  margin: 31px 0 0;
  color: var(--muted);
  font-size: 26px;
  line-height: 1.425;
}
.breadcrumbs {
  margin-bottom: 38px;
  display: flex;
  gap: 9px;
  color: var(--quiet);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.breadcrumbs a {
  border-bottom: 1px solid var(--line);
}
.catalogSegments {
  padding-bottom: 115px;
}
.catalogSegments h2 {
  font-family: var(--font-ui);
  font-size: 18px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.catalogGrid {
  grid-template-columns: repeat(2, 1fr);
}
.catalogCard {
  min-height: 315px;
  padding: 31px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .25s;
}
.catalogCard:hover {
  background: var(--panel);
}
.catalogCard h3 {
  margin: 55px 0 14px;
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
}
.catalogCard p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.4;
}
.catalogCard span {
  margin-top: auto;
  color: var(--muted);
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.darkCatalog {
  grid-template-columns: repeat(3, 1fr);
}
.darkCatalog a {
  min-height: 250px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .25s;
}
.darkCatalog a:hover {
  background: var(--panel);
}
.darkCatalog h3 {
  margin: 58px 0 15px;
  font-family: var(--font-display);
  font-size: 31px;
  font-weight: 400;
}
.darkCatalog span {
  margin-top: auto;
  color: var(--muted);
  font-size: 18px;
}
.priceGrid {
  grid-template-columns: repeat(2, 1fr);
  padding-bottom: 115px;
}
.priceGrid article {
  min-height: 310px;
  padding: 36px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.priceGrid h2 {
  margin: 65px 0 14px;
  font-size: 42px;
}
.priceGrid p, .stageList p, .calculatorExplanation p {
  color: var(--muted);
  font-size: 22px;
  line-height: 1.4;
}
.compareSection {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 95px;
}
.compareSection h2 {
  font-size: 64px;
  line-height: .98;
}
.compareSection ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.compareSection li {
  padding: 21px 0;
  border-bottom: 1px solid var(--line);
  color: #c3c3c7;
  font-size: 24px;
}
.compareSection li::before {
  content: "↗︎";
  margin-right: 16px;
  color: var(--muted);
}
.stageList {
  padding-bottom: 120px;
  border-top: 1px solid var(--line);
}
.stageList article {
  padding: 33px 0;
  display: grid;
  grid-template-columns: 80px .8fr 1.2fr;
  gap: 35px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.stageList h2 {
  font-size: 40px;
}
.stageList p {
  max-width: 650px;
}
.calculatorExplanation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.calculatorExplanation > div {
  padding: 33px;
  background: var(--black);
}
.calculatorExplanation h2 {
  margin: 50px 0 15px;
  font-size: 42px;
}
.portfolioFilter {
  padding-bottom: 34px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.portfolioFilter > span {
  color: var(--quiet);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portfolioFilter > div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filterChip {
  min-height: 40px;
  padding: 0 24px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
  color: #c4c4c9;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.filterChip:hover {
  background: var(--glass-bg-hover);
  color: #fff;
}
.filterChip.active {
  background: var(--glass-light);
  border-color: rgba(255,255,255,.55);
  color: var(--black);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.filterChip:focus-visible {
  outline: 2px solid rgba(255,255,255,.6);
  outline-offset: 3px;
}
.portfolioGrid {
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 490px;
  gap: 16px;
}
.portfolioItem {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.portfolioItem.wide {
  grid-column: 1 / 3;
  height: 640px;
}
.portfolioItem > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  opacity: .82;
  transition: .9s;
}
.portfolioItem:hover > img {
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.025);
}
.portfolioItem > div:last-child {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 27px;
}
.portfolioItem small {
  color: #aaaab0;
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.portfolioItem h2 {
  margin: 7px 0;
  font-size: 39px;
}
.portfolioItem span {
  position: absolute;
  right: 0;
  bottom: 5px;
  color: var(--muted);
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.portfolioCta .shell {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  align-items: center;
  gap: 50px;
}
.portfolioCta h2 {
  font-size: 58px;
}
.portfolioCta p {
  color: var(--muted);
  font-size: 22px;
  line-height: 1.4;
}
.caseHero {
  position: relative;
  isolation: isolate;
  margin-top: calc(var(--header-h) * -1);
  min-height: min(1024px, 100vh);
  color: #fff;
  overflow: hidden;
  background: var(--black) url("/assets/texture.svg") 0 0 / var(--texture-size) auto repeat fixed;
}
.caseArt {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.caseArt i, .caseArt b, .caseArt u {
  display: block;
  position: absolute;
}
.caseLines {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, transparent calc(19.7% - .5px), rgba(255,255,255,.22) 19.7%, transparent calc(19.7% + .5px)),
  linear-gradient(to right, transparent calc(60.1% - .5px), rgba(255,255,255,.22) 60.1%, transparent calc(60.1% + .5px)),
  linear-gradient(to right, transparent calc(73.6% - .5px), rgba(255,255,255,.22) 73.6%, transparent calc(73.6% + .5px)),
  linear-gradient(to right, transparent calc(87.1% - .5px), rgba(255,255,255,.22) 87.1%, transparent calc(87.1% + .5px)),
  linear-gradient(to bottom, transparent calc(29% - .5px), rgba(255,255,255,.22) 29%, transparent calc(29% + .5px)),
  linear-gradient(to bottom, transparent calc(50.2% - .5px), rgba(255,255,255,.22) 50.2%, transparent calc(50.2% + .5px)),
  linear-gradient(to bottom, transparent calc(71.4% - .5px), rgba(255,255,255,.22) 71.4%, transparent calc(71.4% + .5px));
}
.caseArt b {
  backdrop-filter: blur(var(--hero-blur));
}
.caseBlockTop {
  left: 0;
  width: 19.7%;
  top: 0;
  height: 29%;
  background: var(--hero-blue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--hero-blue) var(--block-fill), transparent);
  }
}
.caseBlockBottom {
  left: 60.1%;
  width: 13.5%;
  top: 71.4%;
  bottom: 0;
  background: var(--hero-blue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--hero-blue) var(--block-fill), transparent);
  }
}
.caseBlockWarm {
  left: 87.1%;
  right: 0;
  top: 29%;
  height: 42.4%;
  background: var(--hero-warm);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--hero-warm) var(--block-fill-warm), transparent);
  }
}
.caseRing {
  top: 50.2%;
  width: 42.4%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
}
.caseRing.isAbove, .caseRing.isBelow {
  display: none;
}
.caseRing.isLeft {
  left: -1.5%;
}
.caseRing.isRight {
  left: 60.1%;
}
.caseSpark {
  position: absolute;
  width: 26px;
  transform: translate(-50%, -50%);
  color: #fff;
}
.caseSpark.artMobile {
  display: none;
}
.caseSpark svg {
  display: block;
  width: 100%;
  height: auto;
  fill: currentColor;
}
.caseLabel, .caseTitle, .caseSpecs {
  position: absolute;
  z-index: 2;
}
.caseFrame {
  position: absolute;
  z-index: 0;
}
.caseLabel {
  top: calc(var(--header-h) + 22px);
  left: 76.5%;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.caseLabel i {
  width: 9px;
  height: 9px;
  background: #fff;
}
.caseTitle {
  left: 22.2%;
  bottom: 71.9%;
  max-width: 40.4%;
  margin: 0;
  font-size: clamp(38px, 4.5vw, 65px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
.caseFrame {
  left: 19.7%;
  width: 40.4%;
  top: 29%;
  height: 42.4%;
}
.caseFrame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.caseNav {
  position: absolute;
  top: 50%;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.caseNav:hover {
  background: #fff;
  color: var(--black);
}
.caseNav.isPrev {
  left: -8%;
}
.caseNav.isNext {
  left: 108%;
}
.caseSpecs {
  left: 22.2%;
  top: 75.3%;
  width: 62%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.caseSpecs li {
  min-height: 25.8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
}
.caseSpecs li i {
  width: 9px;
  height: 9px;
  flex: none;
  background: #fff;
}
.caseFrame img {
  cursor: zoom-in;
}
.caseZoom {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: clamp(20px, 4vw, 64px);
  border: 0;
  background: rgba(20, 20, 20, .55);
  backdrop-filter: blur(var(--hero-blur));
  cursor: zoom-out;
}
.caseZoom img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.caseZoomClose, .caseZoomNav {
  position: absolute;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .3s, color .3s;
}
.caseZoomClose:hover, .caseZoomNav:hover {
  background: #fff;
  color: var(--black);
}
.caseZoomClose {
  top: clamp(16px, 3vw, 40px);
  right: clamp(16px, 3vw, 40px);
}
.caseZoomNav.isPrev {
  left: clamp(12px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
}
.caseZoomNav.isNext {
  right: clamp(12px, 3vw, 40px);
  top: 50%;
  transform: translateY(-50%);
}
.caseSpecs li b {
  margin-left: 6px;
  padding: 3px 13px;
  border-radius: var(--radius-pill);
  background: var(--hero-blue);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--hero-blue) 72%, transparent);
  }
  font-weight: 600;
}
.caseFacts {
  background: var(--dark);
  border-bottom: 1px solid var(--line);
}
.caseFacts > .shell {
  padding-top: 31px;
  padding-bottom: 31px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.caseFacts div div {
  padding-left: 30px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line);
}
.caseFacts div div:first-child {
  padding-left: 0;
}
.caseFacts div div:last-child {
  border: 0;
}
.caseFacts small {
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.caseFacts span {
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 25px;
}
.caseStory {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 105px;
}
.caseStory h2 {
  font-size: 66px;
  line-height: .98;
}
.caseStory > div > p:last-child {
  max-width: 480px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.4;
}
.caseStory li span {
  font-family: var(--font-display);
  font-size: 25px;
}
.caseGallery {
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 510px;
  gap: 16px;
}
.caseGallery .wide {
  grid-column: 1 / 3;
}
.caseGallery img {
  width: 100%;
  height: 100%;
  filter: grayscale(.55);
  transition: .7s;
}
.caseGallery img:hover {
  filter: grayscale(0);
}
.aboutFeature {
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 85px;
  align-items: center;
}
.aboutImage {
  height: 670px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.aboutImage img {
  width: 100%;
  height: 100%;
  filter: grayscale(1);
}
.aboutText h2 {
  font-size: 70px;
  line-height: .95;
}
.aboutText > p:not(.eyebrow) {
  margin: 25px 0;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.45;
}
.aboutNumbers {
  background: var(--dark);
  border-block: 1px solid var(--line);
}
.valuesGrid {
  display: grid;
  grid-template-columns: 1.1fr repeat(3, 1fr);
  gap: 24px;
}
.valuesGrid > div h2 {
  font-size: 58px;
  line-height: .98;
}
.valuesGrid article {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.blogGrid {
  padding-bottom: 120px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
}
.blogCard {
  min-height: 330px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  background: var(--panel);
  border: 1px solid var(--line);
  transition: background .25s;
}
.blogCard:hover {
  background: var(--panel-soft);
}
.blogCard.leadArticle {
  min-height: 680px;
  grid-row: span 2;
  grid-template-columns: 1fr;
}
.blogImage {
  min-height: 280px;
  position: relative;
  overflow: hidden;
}
.blogImage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: grayscale(1);
  opacity: .8;
  transition: .8s;
}
.blogCard:hover .blogImage img {
  filter: grayscale(.15);
  opacity: 1;
  transform: scale(1.02);
}
.blogBody {
  padding: 29px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.blogBody small {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.blogBody h2 {
  margin: 16px 0;
  font-size: 34px;
  line-height: 1.05;
}
.leadArticle .blogBody h2 {
  font-size: 43px;
}
.blogBody p {
  margin: 0;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.375;
}
.blogBody span {
  margin-top: auto;
  padding-top: 20px;
  color: var(--muted);
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contactPage {
  min-height: 780px;
  padding-top: 80px;
  padding-bottom: 105px;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 85px;
  align-items: center;
}
.contactPage h1 {
  font-size: clamp(66px, 7vw, 104px);
  line-height: .9;
}
.contactLead {
  max-width: 570px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.425;
}
.contactMethods {
  margin-top: 45px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.contactMethods small {
  margin: 22px 0 7px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contactMethods a {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 28px;
}
.contactVisual {
  height: 620px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.contactVisual img {
  width: 100%;
  height: 100%;
  filter: grayscale(1);
}
.contactVisual > div {
  position: absolute;
  left: 24px;
  bottom: 24px;
  padding: 17px 20px;
  display: flex;
  flex-direction: column;
  background: rgba(45,45,45,.62);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
}
.contactVisual small {
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.contactVisual strong {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 26px;
}
.articleHeader {
  max-width: 1080px;
  padding-top: 95px;
  padding-bottom: 52px;
}
.articleHeader nav {
  margin-bottom: 62px;
  display: flex;
  gap: 8px;
  color: var(--quiet);
  font-size: 16px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.articleHeader h1 {
  font-size: clamp(64px, 7vw, 104px);
  line-height: .9;
}
.articleHeader > p:last-child {
  max-width: 800px;
  margin-top: 31px;
  color: var(--muted);
  font-size: 28px;
  line-height: 1.4;
}
.articleHero {
  height: 640px;
  margin-bottom: 98px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.articleHero img {
  width: 100%;
  height: 100%;
  filter: grayscale(.8);
}
.articleBody {
  max-width: 980px;
  padding-bottom: 120px;
}
.articleBody > section {
  padding: 46px 0;
  display: grid;
  grid-template-columns: 60px 1fr;
  border-top: 1px solid var(--line);
}
.articleBody > section > small {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
}
.articleBody h2 {
  margin-bottom: 23px;
  font-size: 46px;
  line-height: 1;
}
.articleBody section p {
  color: #aaaab0;
  font-size: 26px;
  line-height: 1.475;
}
.articleBody ul {
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.articleBody li {
  padding: 14px 0 14px 25px;
  position: relative;
  border-bottom: 1px solid var(--line);
  color: #bcbcc1;
  font-size: 22px;
}
.articleBody li::before {
  content: "↗︎";
  position: absolute;
  left: 0;
  color: var(--muted);
}
.articleBody aside {
  margin: 40px 0 90px;
  padding: 46px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.articleBody aside h2 {
  font-size: 42px;
}
.articleBody aside p {
  color: var(--muted);
  font-size: 24px;
  line-height: 1.4;
}
.articleBody aside a {
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.articleFaq > h2 {
  margin-bottom: 35px;
}
.articleMeta {
  margin-top: 28px;
  display: flex;
  gap: 30px;
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.legal {
  max-width: 940px;
  padding-top: 100px;
  padding-bottom: 120px;
}
.legal h1 {
  margin-bottom: 46px;
  font-size: 76px;
  line-height: .92;
}
.legal h2 {
  margin-top: 46px;
  font-family: var(--font-display);
  font-size: 36px;
}
.legal p {
  color: var(--muted);
  font-size: 24px;
  line-height: 1.475;
}
.legal a {
  border-bottom: 1px solid var(--line);
  color: #fff;
}
.legalNote {
  margin-top: 45px !important;
  padding: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.siteFooter {
  padding: 82px 0 25px;
  background: #2d2d2d;
  border-top: 1px solid var(--line);
}
.footerTop {
  padding-bottom: 65px;
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: 45px;
}
.footerTop > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.footerBrand {
  display: block;
}
.footerBrand img {
  height: 46px;
  width: auto;
  display: block;
  transition: opacity .25s;
}
.footerBrand:hover img {
  opacity: .78;
}
.footerTop p {
  margin: 5px 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.375;
}
.footerTop small {
  margin-bottom: 9px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.footerTop a:not(.footerBrand) {
  color: #b2b2b7;
  font-size: 18px;
  letter-spacing: .08em;
  transition: color .25s;
}
.footerTop a:hover {
  color: #fff;
}
.footerBottom {
  padding-top: 21px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--quiet);
  font-size: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body, .trustStrip, .projectsSection, .calculatorBand, .includedSection,
.estimateSection, .portfolioCta, .siteFooter, .segmentCard, .segmentCard:hover {
  background-image: url("/assets/texture.svg");
  background-position: 0 0;
  background-size: var(--texture-size) auto;
  background-repeat: repeat;
  background-attachment: fixed;
}
@media (max-width: 900px) {
  .caseHero {
    min-height: 100svh;
  }
  .caseLines {
    background-image: linear-gradient(to right, transparent calc(25% - .5px), rgba(255,255,255,.22) 25%, transparent calc(25% + .5px)),
    linear-gradient(to right, transparent calc(50% - .5px), rgba(255,255,255,.22) 50%, transparent calc(50% + .5px)),
    linear-gradient(to right, transparent calc(75% - .5px), rgba(255,255,255,.22) 75%, transparent calc(75% + .5px)),
    linear-gradient(to bottom, transparent calc(25% - .5px), rgba(255,255,255,.22) 25%, transparent calc(25% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(255,255,255,.22) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(75% - .5px), rgba(255,255,255,.22) 75%, transparent calc(75% + .5px));
  }
  .caseArt b.caseBlockTop {
    left: 75%;
    width: 25%;
    right: auto;
    top: 0;
    height: 25%;
  }
  .caseArt b.caseBlockBottom {
    left: 0;
    width: 25%;
    top: 50%;
    height: 25%;
    bottom: auto;
  }
  .caseArt b.caseBlockWarm {
    display: none;
  }
  .caseArt u.caseRing {
    left: 12.6%;
    width: 74.8%;
    top: 50%;
  }
  .caseRing.isLeft {
    transform: translateY(-100%);
  }
  .caseRing.isRight {
    transform: none;
  }
  .caseArt u.caseRing.isAbove {
    display: block;
    transform: translateY(-200%);
  }
  .caseArt u.caseRing.isBelow {
    display: block;
    transform: translateY(100%);
  }
  .caseSpark.artDesktop {
    display: none;
  }
  .caseSpark.artMobile {
    display: block;
    width: 22.2px;
  }
  .caseSpark.artMobile.isBig {
    width: 34.8px;
    filter: drop-shadow(0 0 14px rgba(255,255,255,.55)) drop-shadow(0 0 34px rgba(255,255,255,.25));
  }
  .caseArt::before {
    content: "";
    position: absolute;
    inset: 0 50% 0 0;
    backdrop-filter: blur(var(--hero-blur));
  }
  .caseLabel {
    display: none;
  }
  .caseTitle {
    left: 0;
    right: 0;
    bottom: 77%;
    max-width: none;
    padding: 0 6%;
    font-size: clamp(24px, 7.7vw, 34px);
    text-align: center;
  }
  .caseFrame {
    left: 25%;
    width: 50%;
    top: 25%;
    height: 50%;
    z-index: 2;
  }
  .caseNav.isPrev {
    left: -9.2%;
  }
  .caseNav.isNext {
    left: 110.4%;
  }
  .caseSpecs {
    left: 7.2%;
    top: 79.9%;
    width: 88%;
  }
  .caseSpecs li {
    min-height: 0;
    margin-bottom: 5.2px;
    gap: 9.5px;
    font-size: min(2.61vw, 10.5px);
    line-height: 1.2;
  }
  .caseSpecs li i {
    width: min(1.69vw, 6.8px);
    height: min(1.69vw, 6.8px);
  }
  .caseSpecs li b {
    margin-left: 5px;
    padding: 2px 9px;
  }
}
@media (max-width: 1100px) {
  :root {
    --header-h: 87.5px;
  }
  .navPill {
    display: none;
  }
  .headerInner {
    width: calc(100% - 43px);
    height: 64px;
    margin-top: 23.5px;
    padding: 0 26px 0 22px;
    gap: 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: var(--radius-pill);
    background: rgba(141, 107, 107, .15);
    backdrop-filter: blur(var(--hero-blur)) saturate(140%);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3), var(--glass-inset);
  }
  .mobileMenu {
    display: block;
    position: relative;
  }
  .mobileMenu summary {
    display: flex;
    align-items: center;
    gap: 13px;
    list-style: none;
    color: #fff;
    font-size: 19.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .mobileMenu summary::-webkit-details-marker {
    display: none;
  }
  .mobileMenu summary i {
    width: 23px;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mobileMenu summary b {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .55);
  }
  .mobileMenu div {
    min-width: 230px;
    padding: 24px;
    position: absolute;
    top: 46px;
    right: -10px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    border-radius: var(--radius-soft);
    background: rgba(50,50,50,.72);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: 0 22px 60px rgba(0,0,0,.45), var(--glass-inset);
  }
  .mobileMenu div a {
    color: #c4c4c8;
    font-size: 15px;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .shell {
    width: min(100% - 56px, 1500px);
  }
  .hero {
    min-height: 0;
    padding-top: calc(var(--header-h) + 24px);
  }
  .heroInner {
    padding: 0 28px;
  }
  .heroHeadline {
    width: 52vw;
  }
  .heroArt u {
    width: 62%;
  }
  .sectionHead {
    align-items: flex-start;
    gap: 35px;
  }
  .processSection, .brief, .caseStory, .includedGrid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .estimator {
    grid-template-columns: 1fr;
    gap: 55px;
  }
  .estimateInner {
    flex-direction: column;
    align-items: flex-start;
  }
  .estimateActions {
    width: 100%;
    min-width: 0;
  }
  .footerTop {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
  .footerTop > div:last-child {
    grid-column: 2 / 4;
  }
  .trustGrid, .benefitGrid, .valuesGrid, .darkCatalog {
    grid-template-columns: 1fr 1fr;
  }
  .darkCatalog a {
    min-width: 0;
    padding: 24px 20px;
  }
  .valuesGrid > div {
    grid-column: 1 / 3;
  }
  .portfolioCta .shell {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}
@media (max-width: 760px) {
  :root {
    --header-h: 87.5px;
  }
  .headerInner {
    padding: 0 20px 0 18px;
  }
  .brand img {
    height: 30px;
  }
  .hero {
    min-height: 100svh;
  }
  body::before {
    display: none;
  }
  .shell {
    width: min(100% - 30px, 1500px);
  }
  .footerBrand img {
    height: 38px;
  }
  .section {
    padding-top: 84px;
    padding-bottom: 84px;
  }
  .sectionHead {
    display: block;
    margin-bottom: 42px;
    padding-bottom: 30px;
  }
  .sectionHead > p {
    margin-top: 24px;
  }
  .sectionHead h2, .processIntro h2, .estimateInner h2 {
    font-size: 49px;
  }
  .hero {
    justify-content: flex-start;
    padding-top: 108px;
  }
  .heroInner {
    padding: 0 15px;
  }
  .heroHeadline {
    width: 75vw;
  }
  .heroMedia img, .heroMedia video {
    object-position: 50% 78%;
  }
  .heroLines {
    background-image: linear-gradient(to right, transparent calc(25% - .5px), rgba(255,255,255,.3) 25%, transparent calc(25% + .5px)),
    linear-gradient(to right, transparent calc(50% - .5px), rgba(255,255,255,.3) 50%, transparent calc(50% + .5px)),
    linear-gradient(to right, transparent calc(75% - .5px), rgba(255,255,255,.3) 75%, transparent calc(75% + .5px)),
    linear-gradient(to bottom, transparent calc(25% - .5px), rgba(255,255,255,.3) 25%, transparent calc(25% + .5px)),
    linear-gradient(to bottom, transparent calc(50% - .5px), rgba(255,255,255,.3) 50%, transparent calc(50% + .5px)),
    linear-gradient(to bottom, transparent calc(75% - .5px), rgba(255,255,255,.3) 75%, transparent calc(75% + .5px));
  }
  .heroArt b.blockTop {
    left: 75%;
    right: 0;
    top: 0;
    height: 25%;
  }
  .heroArt b.blockBottom {
    left: 75%;
    right: 0;
    top: 75%;
    bottom: 0;
  }
  .heroArt b.blockWarm {
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
  }
  .heroArt u.ringDesktop, .heroSpark.artDesktop {
    display: none;
  }
  .heroArt u.ringMobile {
    display: block;
    left: 12.6%;
    width: 74.8%;
    top: 50%;
  }
  .heroArt u.ringMobile.isTop {
    transform: translateY(-100%);
  }
  .heroArt u.ringMobile.isBottom {
    transform: none;
  }
  .heroArt u.ringMobile.isAbove {
    transform: translateY(-200%);
  }
  .heroArt u.ringMobile.isBelow {
    transform: translateY(100%);
  }
  .heroSpark.artMobile {
    display: block;
  }
  .heroSpark.large {
    width: 35px;
  }
  .heroSpark.small {
    width: 22px;
  }
  .heroInner {
    padding: 0;
  }
  .hero .eyebrow {
    justify-content: center;
    margin: 0 5.1% 0;
    color: #fff;
    font-size: min(3.08vw, 12.4px);
    font-weight: 600;
    letter-spacing: .06em;
    text-align: center;
    white-space: nowrap;
    text-shadow: 0 1px 14px rgba(0,0,0,.7);
  }
  .heroHeadline {
    width: 75.1%;
    margin: min(109px, 12.5svh) 0 0 12.4%;
  }
  .heroLead {
    width: 73.4%;
    max-width: none;
    margin: 26px 0 0 13.7%;
    color: #fff;
    font-size: min(4.3vw, 17.5px);
    font-weight: 600;
    line-height: 1.11;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-shadow: 0 1px 14px rgba(0,0,0,.75);
  }
  .heroLead span {
    display: block;
  }
  .heroLead span + span {
    position: relative;
    margin-top: 26px;
  }
  .heroLead span + span::before {
    content: "";
    position: absolute;
    top: -13px;
    left: 0;
    width: 67px;
    height: 1px;
    background: #fff;
  }
  .heroActions {
    align-items: stretch;
    flex-direction: column;
    gap: 21px;
    width: 72.3%;
    margin: min(73px, 8.35svh) 0 0 13.9%;
  }
  .heroActions .button {
    width: 100%;
    min-height: 64px;
    padding: 0 10px;
    gap: 6px;
    justify-content: center;
    background: var(--hero-warm);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--hero-warm) 70%, transparent);
    }
    backdrop-filter: blur(var(--hero-blur));
    font-size: min(3.53vw, 14.2px);
    white-space: nowrap;
  }
  .heroActions .button b {
    width: 26px;
    height: 26px;
  }
  .heroActions .textLink {
    justify-content: center;
    padding: 0;
    gap: 13px;
    color: #e4e4ff;
    font-size: min(3.53vw, 14.2px);
    white-space: nowrap;
  }
  .heroActions .textLink span {
    width: 26px;
    height: 26px;
    border-color: rgba(228, 228, 255, .75);
  }
  .trustGrid {
    grid-template-columns: 1fr;
  }
  .trustGrid div {
    min-height: 0;
    padding: 20px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .segmentGrid {
    grid-template-columns: 1fr;
  }
  .segmentImage {
    height: 280px;
  }
  .projectGrid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .projectCard, .projectCard.featured {
    min-width: 88%;
    height: 430px;
    scroll-snap-align: start;
  }
  .processList li, .caseStory li {
    grid-template-columns: 42px 1fr;
  }
  .knowledgeGrid, .catalogGrid, .darkCatalog, .priceGrid {
    grid-template-columns: 1fr;
  }
  .priceGrid article {
    min-height: 0;
    padding: 26px 18px 30px;
  }
  .faqSection {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .estimatorFields, .estimateOutput, .briefCard {
    grid-template-columns: 1fr;
  }
  .estimatorFields > *:last-child, .estimateWide, .estimateNote, .briefResult, .briefButtons {
    grid-column: 1;
  }
  .segmentSwitch {
    grid-template-columns: 1fr;
  }
  .segmentSwitch legend {
    grid-column: 1;
  }
  .estimateButtons, .briefButtons {
    align-items: stretch;
    flex-direction: column;
  }
  .estimateButtons .button, .briefButtons .button {
    gap: 12px;
    padding: 0 8px 0 18px;
    font-size: 15px;
  }
  .innerHero {
    min-height: 0;
    padding-top: 52px;
    padding-bottom: 70px;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .innerHeroCopy h1, .pageIntro h1 {
    font-size: 60px;
  }
  .innerHeroVisual {
    height: 450px;
  }
  .benefitGrid {
    grid-template-columns: 1fr;
  }
  .includedGrid h2, .briefIntro h2, .estimatorIntro h2 {
    font-size: 52px;
  }
  .portfolioFilter {
    gap: 14px;
    padding-bottom: 26px;
  }
  .portfolioFilter > div {
    gap: 8px;
  }
  .filterChip {
    min-height: 36px;
    padding: 0 17px;
    font-size: 16px;
  }
  .portfolioGrid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .portfolioItem, .portfolioItem.wide {
    min-width: 88%;
    height: 470px;
    scroll-snap-align: start;
  }
  .portfolioCta .shell {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .portfolioCta h2 {
    font-size: 47px;
  }
  .aboutFeature, .valuesGrid, .blogGrid, .contactPage {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .aboutImage, .contactVisual {
    height: 480px;
  }
  .aboutText h2 {
    font-size: 56px;
  }
  .valuesGrid article {
    padding: 25px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
  .blogCard, .blogCard.leadArticle {
    min-height: 0;
    grid-template-columns: 1fr;
    grid-row: auto;
  }
  .blogImage {
    height: 300px;
  }
  .caseFacts > .shell {
    grid-template-columns: 1fr;
  }
  .caseFacts div div {
    padding: 18px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .caseGallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .caseGallery > div {
    flex: 0 0 88%;
    height: 460px;
    scroll-snap-align: start;
  }
  .articleHeader h1 {
    font-size: 60px;
  }
  .articleHero {
    height: 450px;
    margin-bottom: 70px;
  }
  .articleBody > section {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .compareSection, .stageList article, .calculatorExplanation {
    grid-template-columns: 1fr;
  }
  .valuesGrid > *, .caseStory > *, .aboutFeature > *, .blogGrid > *, .contactPage > *,
  .processSection > *, .includedGrid > *, .brief > *, .compareSection > *, .stageList article > *,
  .innerHero > * {
    min-width: 0;
  }
  .valuesGrid h2, .valuesGrid h3, .caseStory h2, .pageIntro h1, .innerHeroCopy h1, .priceGrid h2 {
    overflow-wrap: break-word;
  }
  .compareSection {
    gap: 45px;
  }
  .compareSection h2 {
    font-size: 52px;
  }
  .stageList article {
    gap: 10px;
  }
  .footerTop {
    grid-template-columns: 1fr 1fr;
  }
  .footerTop > div:first-child {
    grid-column: 1 / 3;
  }
  .footerTop > div:last-child {
    grid-column: auto;
  }
  .footerBottom {
    flex-direction: column;
    gap: 16px;
  }
}
.leadSection {
  padding: 110px 0;
  border-top: 1px solid var(--line);
}
.leadSection.isInverse {
  background: var(--dark);
}
.leadInner {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: 90px;
  align-items: start;
}
.leadIntro h2 {
  margin: 0;
  font-size: clamp(42px, 4.4vw, 64px);
  line-height: .98;
}
.leadIntro > p {
  max-width: 470px;
  margin-top: 25px;
  color: var(--muted);
  font-size: 24px;
  line-height: 1.4;
}
.leadIntro .textLink {
  display: inline-block;
  margin-top: 28px;
}
.leadForm {
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
}
.leadTrap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.leadField {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}
.leadFieldWide, .leadActions, .leadStatus {
  grid-column: 1 / 3;
}
.leadField > span {
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.leadField > span i {
  font-style: normal;
  color: var(--quiet);
  letter-spacing: .1em;
}
.leadField input, .leadField textarea {
  padding: 0 18px;
  height: 52px;
  outline: none;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,.07);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-inset);
  color: #efeff0;
  font: 400 12px/52px var(--font-ui);
  color-scheme: dark;
  transition: border-color .25s, background .25s;
}
.leadField textarea {
  height: auto;
  padding: 15px 18px;
  border-radius: var(--radius-soft);
  line-height: 1.5;
  resize: vertical;
}
.leadField input::placeholder, .leadField textarea::placeholder {
  color: var(--quiet);
}
.leadField input:focus, .leadField textarea:focus {
  border-color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.1);
}
.leadField input[aria-invalid="true"], .leadField textarea[aria-invalid="true"] {
  border-color: #d99166;
}
.leadActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  margin-top: 8px;
}
.leadActions small {
  flex: 1 1 260px;
  color: var(--quiet);
  font-size: 16px;
  line-height: 1.4;
}
.leadActions small a {
  color: var(--muted);
  text-decoration: underline;
}
.leadForm button[disabled] {
  opacity: .55;
  cursor: progress;
}
.leadStatus {
  margin: 0;
  min-height: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.4;
}
.leadStatus:empty {
  display: none;
}
.leadStatus.isOk {
  padding: 15px 18px;
  background: rgba(216,231,244,.12);
  color: var(--accent);
}
.leadStatus.isError {
  padding: 15px 18px;
  background: rgba(217,145,102,.14);
  color: var(--warm);
}
@media (max-width: 1100px) {
  .leadInner {
    grid-template-columns: 1fr;
    gap: 45px;
  }
}
@media (max-width: 720px) {
  .leadSection {
    padding: 70px 0;
  }
  .leadForm {
    padding: 24px;
    grid-template-columns: 1fr;
  }
  .leadFieldWide, .leadActions, .leadStatus {
    grid-column: auto;
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}