/* ==========================================================================
   WebsiteLabz — Special Offer LP2
   Warm off-white · near-black · WebsiteLabz orange. Editorial, lab-built.
   ========================================================================== */


@font-face {
  font-family: 'Inter Tight';
  src: url('../fonts/inter-tight-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --bg: #F3EFE7;
  --bg-2: #EAE3D6;
  --paper: #FBF9F4;
  --beige: #E6D9C4;
  --beige-2: #DCCDB4;
  --blue: #D5E0EE;
  --blue-2: #BCCDE5;
  --ink: #121110;
  --ink-2: #2A2825;
  --muted: #5C5750;
  --faint: #A39D92;
  --line: rgba(18, 17, 16, .12);
  --line-2: rgba(18, 17, 16, .22);
  --orange: #1F5FD6;
  --orange-2: #6C9CF2;
  --orange-deep: #0D3C94;
  --dark: #0F0E0D;
  --dark-2: #181715;
  --dark-3: #211F1C;
  --dark-line: rgba(255, 255, 255, .12);
  --on-dark: #F3EFE7;
  --on-dark-2: #ABA59B;

  --f: 'Inter Tight', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --max: 1440px;
  --gut: clamp(16px, 4vw, 56px);
  --sec: clamp(84px, 9vw, 150px);
  --hdr-h: 76px;
  --r-xl: clamp(22px, 2.8vw, 44px);
  --r-lg: clamp(18px, 1.8vw, 28px);
  --r-md: 16px;

  --fs-hero: min(clamp(2.75rem, 1rem + 6vw, 6.75rem), 11.5vh);
  --fs-h2: clamp(2.5rem, 1rem + 4.9vw, 5.5rem);
  --fs-h3: clamp(1.6rem, 1.05rem + 1.7vw, 2.9rem);
  --fs-lead: clamp(1.06rem, .98rem + .34vw, 1.3rem);

  --shadow: 0 1px 2px rgba(18, 17, 16, .04), 0 12px 32px -14px rgba(18, 17, 16, .16);
  --shadow-lg: 0 2px 6px rgba(18, 17, 16, .04), 0 40px 90px -36px rgba(18, 17, 16, .32);
  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:not(.js) { scroll-behavior: smooth; }
body {
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
::selection { background: var(--orange); color: #fff; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 10px;
  transition: top .2s;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.wrap-wide { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 clamp(10px, 1.6vw, 28px); }
.mono { font-family: var(--mono); font-size: .78em; letter-spacing: .02em; }
.ico { width: 1.15em; height: 1.15em; flex: none; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: .55em;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 22px;
}
.eyebrow strong { color: var(--ink); font-weight: 600; }
.eyebrow__sep { opacity: .45; }
.eyebrow--dark { color: var(--on-dark-2); }
.eyebrow--dark strong { color: var(--orange); }
.eyebrow--ink { color: rgba(18, 17, 16, .7); }
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange); position: relative; flex: none; color: #fff; }
.pulse::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--orange);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

.display {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.042em;
  text-transform: uppercase;
  font-kerning: normal;
}
.display em { font-style: normal; color: var(--orange); }
.offer .display em { color: var(--orange); }
.display--hero { font-size: var(--fs-hero); line-height: .88; letter-spacing: -.045em; font-weight: 750; }
.ln { display: block; overflow: hidden; padding: .04em 0 .08em; margin: -.04em 0 -.08em; }
.ln__i { display: block; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

/* ---------- Buttons ---------- */
.btn {
  --h: 48px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  height: var(--h); padding: 0 8px 0 22px; border-radius: 999px;
  font-size: 13.5px; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .3s, color .3s, border-color .3s, box-shadow .3s;
  will-change: transform;
}
.btn .ico {
  width: calc(var(--h) - 14px); height: calc(var(--h) - 14px); padding: calc((var(--h) - 14px) * .26);
  border-radius: 50%; transition: transform .45s var(--ease);
}
.btn:hover .ico { transform: rotate(-45deg); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink .ico { background: var(--orange); color: #fff; }
.btn--ink:hover { background: #000; }
.btn--orange { background: var(--orange); color: #fff; }
.btn--orange .ico { background: var(--ink); color: var(--paper); }
.btn--orange:hover { background: #2F6FE6; box-shadow: 0 14px 40px -12px rgba(31, 95, 214, .55); }
.btn--line { border: 1.5px solid var(--line-2); padding: 0 22px; color: var(--ink); }
.btn--line:hover { border-color: var(--ink); background: rgba(18, 17, 16, .04); }
.btn--sm { --h: 42px; font-size: 12px; padding-left: 18px; gap: 10px; }
.btn--lg { --h: 56px; font-size: 14px; padding-left: 26px; }
.btn--lg.btn--line { padding: 0 26px; }
.btn--xl { --h: 64px; font-size: 15px; padding-left: 30px; gap: 18px; }
.btn--block { width: 100%; justify-content: space-between; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Progress + header ---------- */
.progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 70; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); color: #fff; }

.hdr {
  position: fixed; inset: 0 0 auto; z-index: 60;
  padding: 10px var(--gut) 0; pointer-events: none;
}
.hdr__bar {
  pointer-events: auto; position: relative;
  margin: 0 auto; max-width: calc(var(--max) + 16px);
  height: 58px; display: flex; align-items: center; gap: 18px;
  padding: 0 0 0 4px; border-radius: 999px; border: 1px solid transparent;
  transition: max-width .7s var(--ease), background-color .45s, border-color .45s, box-shadow .45s, padding .45s, height .45s;
}
.hdr__logo { flex: none; display: flex; }
.hdr__logo img { height: 30px; width: auto; }
.hdr__nav { margin-left: auto; display: flex; gap: 2px; }
.hdr__nav a {
  padding: 9px 14px; border-radius: 999px; font-size: 14.5px; font-weight: 550; color: var(--ink-2);
  transition: background-color .25s, color .25s;
}
.hdr__nav a:hover, .hdr__nav a.is-current { background: rgba(18, 17, 16, .06); color: var(--ink); }
.hdr__toggle { display: none; width: 44px; height: 44px; border-radius: 50%; place-items: center; background: var(--ink); color: var(--paper); }
.hdr__toggle .ico { width: 20px; height: 20px; }
.hdr.is-scrolled .hdr__bar {
  max-width: 900px; height: 58px; padding: 0 6px 0 18px;
  background: rgba(251, 249, 244, .8);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  border-color: var(--line); box-shadow: var(--shadow);
}
.hdr.is-scrolled .hdr__logo img { height: 26px; }
html:not(.js) .hdr__bar { background: rgba(251, 249, 244, .9); border-color: var(--line); padding: 0 6px 0 18px; }

.mnav {
  position: fixed; inset: 0; z-index: 55; background: var(--paper);
  padding: calc(var(--hdr-h) + 28px) var(--gut) 32px; display: flex; flex-direction: column; gap: 28px;
  overflow-y: auto;
}
.mnav nav { display: flex; flex-direction: column; }
.mnav nav a {
  font-size: clamp(34px, 10vw, 56px); font-weight: 700; text-transform: uppercase; letter-spacing: -.04em; line-height: 1.05;
  padding: 8px 0; border-bottom: 1px solid var(--line);
}
.mnav__phone { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }

/* ==========================================================================
   01 HERO
   ========================================================================== */
.hero {
  position: relative; min-height: 100svh; overflow: clip;
  padding-top: calc(var(--hdr-h) + clamp(12px, 2.6vh, 36px));
  padding-bottom: 32px;
  isolation: isolate;
}
.hero.is-pinned { height: 100vh; min-height: 620px; padding-bottom: 0; }
.hero__grid {
  position: absolute; inset: 0; z-index: -1; opacity: .6;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 78%, #000 20%, transparent 72%);
          mask-image: radial-gradient(ellipse 60% 55% at 50% 78%, #000 20%, transparent 72%);
}
.hero__top {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(24px, 4vw, 64px); align-items: end;
}
.hero__eyebrow { margin-bottom: clamp(12px, 2vh, 22px); }
.hero__side .lead { font-size: clamp(1rem, .95rem + .25vw, 1.18rem); margin-bottom: 22px; }
.hero__price { margin-top: 16px; font-size: 14px; color: var(--muted); }
.hero__price strong { color: var(--ink); }
.hero__price s { color: var(--faint); }

.hero__stage { position: relative; margin-top: clamp(22px, 4.2vh, 48px); display: flex; justify-content: center; perspective: 1800px; }
.hb-wrap { position: relative; width: min(60vw, 98vh, 1100px); transform-origin: 50% 0; will-change: transform; }

.hb {
  position: relative; border-radius: 16px; background: var(--paper); overflow: hidden;
  box-shadow: 0 0 0 1px var(--line), var(--shadow-lg);
  transform-style: preserve-3d;
}
.hb__chrome {
  height: 40px; display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.hb__dots { display: flex; gap: 6px; }
.hb__dots i { width: 10px; height: 10px; border-radius: 50%; background: #DCD5C8; }
.hb__url {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: var(--bg); font: 500 11.5px/1 var(--mono); color: var(--muted); white-space: nowrap;
}
.hb__url .ico { width: 12px; height: 12px; }
.hb__url b { color: var(--ink); font-weight: 600; }
.hb__view {
  position: relative; aspect-ratio: 1514 / 946; overflow: hidden; container-type: inline-size;
  background: #F7F5F0;
}
.hb__bg {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(18,17,16,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(18,17,16,.06) 1px, transparent 1px);
  background-size: 4cqw 4cqw;
}
.hb__bg::after {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease);
  background:
    radial-gradient(55% 60% at 50% 108%, rgba(237, 170, 255, .95) 0%, rgba(160, 96, 245, .75) 28%, rgba(73, 42, 170, .35) 55%, transparent 75%),
    #05051E;
}
.hb.is-s3 .hb__bg::after { opacity: 1; }
.hb__layer { position: absolute; inset: 0; }
.hb__el {
  position: absolute;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
}
.hb__wf {
  position: absolute; inset: 0; border-radius: .5cqw;
  background: #E8E2D7; border: 1px dashed #B9B0A1;
  transition: opacity .5s, background-color .7s, border-color .7s;
}
.hb__wf em {
  position: absolute; left: .45cqw; top: 50%; transform: translateY(-50%);
  font: 600 max(7px, .72cqw)/1 var(--mono); font-style: normal; letter-spacing: .06em; color: #8E8576;
  transition: opacity .3s;
}
.hb__el--p .hb__wf { background: repeating-linear-gradient(180deg, #E8E2D7 0 38%, transparent 38% 55%); border: 0; }
.hb__el--pill .hb__wf, .hb__el--field .hb__wf { border-radius: 99px; }
.hb__el--card .hb__wf {
  border-radius: .9cqw;
  background: repeating-linear-gradient(135deg, #EDE8DF 0 .6cqw, #E3DDD1 .6cqw 1.2cqw);
}
.hb__el--card .hb__wf em { top: .9cqw; transform: none; left: .9cqw; }
.hb__tx {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; color: var(--ink); opacity: 0;
  transition: opacity .6s var(--ease), color .8s, background-color .8s, border-color .8s;
}
.hb__logo .hb__tx { justify-content: flex-start; gap: .55cqw; font-size: 1.95cqw; font-weight: 600; letter-spacing: -.02em; }
.hb__mark { width: 1.35cqw; height: 1.35cqw; border-radius: .25cqw; transform: rotate(45deg); background: linear-gradient(135deg, #F5A8F4, #B37BF7); }
.hb__nav .hb__tx { justify-content: space-between; font-size: 1.02cqw; font-weight: 500; }
.hb__el--pill .hb__tx { border-radius: 99px; font-size: 1.02cqw; font-weight: 500; border: 1px solid transparent; }
.hb__el--h .hb__tx { font-size: 5.25cqw; font-weight: 400; letter-spacing: -.035em; line-height: 1; }
.hb__el--p .hb__tx { white-space: normal; text-align: center; font-size: .98cqw; line-height: 1.5; }
.hb__el--field .hb__tx { justify-content: flex-start; padding-left: 1cqw; font-size: 1.05cqw; border-radius: 99px; border: 1px solid transparent; }
.hb__img {
  position: absolute; inset: 0; border-radius: .9cqw;
  background-image: url('../images/vaultly-screen.webp');
  background-size: calc(10000% / var(--w)) calc(10000% / var(--h));
  background-position: calc(var(--x) / (100 - var(--w)) * 100%) calc(var(--y) / (100 - var(--h)) * 100%);
  clip-path: inset(0 0 100% 0 round .9cqw); opacity: 0;
  transition: clip-path .9s var(--ease), opacity .4s;
}
.hb__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); }

/* Stage 2 — type */
.hb.is-s2 .hb__tx { opacity: 1; }
.hb.is-s2 .hb__el--tx .hb__wf, .hb.is-s2 .hb__el--h .hb__wf, .hb.is-s2 .hb__el--p .hb__wf { opacity: 0; }
.hb.is-s2 .hb__el--pill .hb__wf, .hb.is-s2 .hb__el--field .hb__wf { background: transparent; border-style: solid; border-color: #CFC6B6; }
.hb.is-s2 .hb__wf em { opacity: 0; }
.hb.is-s2 .hb__el--card .hb__wf em { opacity: 1; }
/* Stage 3 — color */
.hb.is-s3 .hb__tx { color: #fff; }
.hb.is-s3 .hb__el--pill .hb__wf, .hb.is-s3 .hb__el--field .hb__wf { opacity: 0; }
.hb.is-s3 .hb__login .hb__tx { border-color: rgba(255,255,255,.7); }
.hb.is-s3 .hb__signup .hb__tx { background: #fff; color: #0B0B2A; }
.hb.is-s3 .hb__btn .hb__tx { background: #F5A8F4; color: #0B0B2A; }
.hb.is-s3 .hb__input .hb__tx { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: rgba(255,255,255,.75); }
.hb.is-s3 .hb__el--card .hb__wf { background: #fff; border-color: transparent; }
.hb.is-s3 .hb__el--card .hb__wf em { opacity: 0; }
.hb.is-s3 .hb__sub .hb__tx { color: rgba(255,255,255,.82); }
/* Stage 4 — images */
.hb.is-s4 .hb__img { opacity: 1; clip-path: inset(0 0 0 0 round .9cqw); }
.hb.is-s4 .hb__cB .hb__img { transition-delay: .12s; }
.hb.is-s4 .hb__cC .hb__img { transition-delay: .24s; }
.hb.is-s4 .hb__cD .hb__img { transition-delay: .32s; }
.hb.is-s4 .hb__cE .hb__img { transition-delay: .4s; }
/* Stage 5 — live */
.hb.is-s5 .hb__shot { opacity: 1; }

.hb__cursor {
  position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: flex-start; gap: 2px;
  transform: translate(var(--cx, 60cqw), var(--cy, 30cqw)); transition: transform 1.1s var(--ease), opacity .4s;
  pointer-events: none; opacity: 0;
}
.hb.is-building .hb__cursor { opacity: 1; }
.hb__cursor svg { width: 16px; height: 16px; fill: var(--orange); stroke: #fff; stroke-width: 1; }
.hb__cursor span { margin-top: 12px; background: var(--orange); color: #fff; font: 600 10.5px/1 var(--mono); padding: 5px 8px; border-radius: 6px; }

.hb__proof {
  position: absolute; left: 2cqw; bottom: 2cqw; z-index: 3;
  display: flex; align-items: center; gap: .9cqw; flex-wrap: wrap;
  padding: .7cqw .8cqw .7cqw .8cqw; border-radius: 99px;
  background: rgba(251, 249, 244, .94); color: var(--ink);
  font-size: max(10px, 1.1cqw); line-height: 1.2;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.hb__proof-tag { background: var(--ink); color: var(--paper); border-radius: 99px; padding: .5cqw .9cqw; font-family: var(--mono); font-size: .9em; }
.hb__proof strong { color: var(--orange-deep); padding-right: .6cqw; }
.hb.is-s5.is-proof .hb__proof, html:not(.motion) .hb.is-s5 .hb__proof { opacity: 1; transform: none; }

.hb-stages {
  position: absolute; z-index: 4; top: 5px; right: 8px; height: 30px;
  display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg);
}
.hb-stages button {
  height: 100%; padding: 0 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: var(--muted);
  transition: background-color .3s, color .3s;
}
.hb-stages button .mono { display: none; }
.hb-stages button:hover { color: var(--ink); }
.hb-stages button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.flabel {
  position: absolute; z-index: 5;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px 8px 8px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 14px; font-weight: 650; white-space: nowrap;
  opacity: 0; translate: 0 12px; scale: .94;
  transition: opacity .7s var(--ease), translate .7s var(--ease), scale .7s var(--ease);
}
.flabel .ico { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--bg-2); color: var(--ink); }
.flabel.is-on { opacity: 1; translate: 0 0; scale: 1; }
.flabel--custom { left: -10%; top: 12%; }
.flabel--mobile { left: -13%; top: 33%; }
.flabel--support { left: -7%; top: 54%; }
.flabel--convert { right: -11%; top: 19%; background: var(--orange); border-color: var(--orange); color: #fff; }
.flabel--convert .ico { background: var(--ink); color: var(--paper); }
.flabel--seo { right: -8%; top: 42%; }
html:not(.motion) .flabel { opacity: 1; translate: 0 0; scale: 1; }
.hb-wrap.is-expanding .flabel { opacity: 0 !important; translate: 0 -18px; scale: .9; }
.hb-wrap.is-expanding .hb-stages { pointer-events: none; }

/* ---------- 02 Ticker ---------- */
.ticker { background: var(--ink); color: var(--paper); overflow: hidden; padding: clamp(16px, 2vw, 26px) 0; position: relative; z-index: 2; }
.ticker__track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker__list { display: flex; flex: none; }
.ticker__list li {
  display: flex; align-items: center; gap: .7em; padding-right: .7em; white-space: nowrap;
  font-size: clamp(22px, 2.5vw, 40px); font-weight: 700; letter-spacing: -.025em; text-transform: uppercase; line-height: 1.1;
}
.ticker__star { color: var(--orange); font-size: .6em; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ==========================================================================
   03 APPROACH — sticky canvas
   ========================================================================== */
.approach { padding: var(--sec) 0; }
.approach__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.approach__intro { padding-bottom: clamp(40px, 8vh, 96px); }
.approach__intro .lead { margin-top: 28px; }
.apsteps { counter-reset: s; }
.apstep {
  display: grid; grid-template-columns: 56px 1fr; gap: 8px;
  min-height: 58vh; padding-top: 26px; border-top: 1px solid var(--line);
  transition: opacity .5s var(--ease);
}
.apstep:last-child { min-height: 42vh; }
.js .apstep { opacity: .28; }
.js .apstep.is-active { opacity: 1; }
.apstep__n { color: var(--orange-deep); padding-top: 6px; font-size: 13px; }
.apstep__t { font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase; letter-spacing: -.035em; line-height: .95; margin-bottom: 14px; }
.apstep p { color: var(--muted); max-width: 40ch; }

.approach__visual { position: sticky; top: calc(var(--hdr-h) + 16px); height: calc(100vh - var(--hdr-h) - 40px); min-height: 520px; max-height: 860px; }
.cv {
  position: relative; height: 100%; border-radius: var(--r-xl); overflow: hidden; background: var(--blue);
  isolation: isolate;
}
.cv::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .7;
  background-image: radial-gradient(rgba(18,17,16,.13) 1px, transparent 1.2px); background-size: 22px 22px;
}
.cv__tag {
  position: absolute; left: 18px; top: 18px; z-index: 6;
  background: var(--paper); padding: 7px 12px; border-radius: 99px; font-size: 12px; box-shadow: var(--shadow);
}
.cv__browser {
  position: absolute; left: 50%; top: 50%; width: 76%; z-index: 1;
  transform: translate(-50%, -50%);
  border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow-lg);
  transition: transform 1s var(--ease), width 1s var(--ease);
}
.cv__chrome { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.cv__chrome i { width: 8px; height: 8px; border-radius: 50%; background: #D9D2C5; }
.cv__url { margin-left: 12px; width: 34%; height: 12px; border-radius: 99px; background: var(--bg); }
.cv__screen { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #FAF9F6; }
.cv__page { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 810 / 1071; transition: transform 3.2s var(--ease-io); }
.cv__wire { position: absolute; inset: 0; background: #FAF9F6; }
.cv__wire .w { position: absolute; border-radius: 4px; background: #E6E1D8; }
.w--hero { left: 0; top: 0; width: 100%; height: 45.2%; background: #DAD4C8 !important; border-radius: 0 !important; }
.w--nav { left: 2.5%; top: 1.4%; width: 95%; height: 3.2%; border-radius: 99px !important; background: #F1EEE8 !important; z-index: 1; }
.w--h1 { left: 7.4%; top: 23%; width: 40%; height: 3.6%; background: #F1EEE8 !important; }
.w--h1b { left: 7.4%; top: 27.6%; width: 26%; height: 3.6%; background: #F1EEE8 !important; }
.w--p { left: 7.4%; top: 32.8%; width: 36%; height: 1.6%; background: #EAE6DE !important; }
.w--btn { left: 7.4%; top: 36.2%; width: 14%; height: 2.6%; border-radius: 99px !important; background: #F1EEE8 !important; }
.w--portrait { left: 73.5%; top: 19.7%; width: 24%; height: 22.2%; border-radius: 10px !important; background: #EDE9E2 !important; border: 1px dashed #B9B0A1; }
.w--title { left: 24%; top: 48.4%; width: 52%; height: 2.6%; }
.w--sub { left: 30%; top: 52%; width: 40%; height: 1.4%; }
.w--c1, .w--c2, .w--c3, .w--c4 { top: 55.5%; width: 22.4%; height: 19%; border-radius: 10px !important; border: 1px dashed #B9B0A1; background: repeating-linear-gradient(135deg, #EEE9E0 0 8px, #E6E0D5 8px 16px) !important; }
.w[data-l]::after {
  content: attr(data-l); position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  font: 600 9px/1 var(--mono); letter-spacing: .08em; color: #8E8576; white-space: nowrap;
}
.w--hero[data-l]::after { top: auto; bottom: 8px; transform: none; left: auto; right: 10px; }
.w--portrait[data-l]::after, .w--c1[data-l]::after { top: 8px; transform: none; }
.w--nav[data-l]::after { left: 10px; }
.w--c1 { left: 2.6%; } .w--c2 { left: 28.4%; } .w--c3 { left: 54.2%; } .w--c4 { left: 80%; }
.cv__hero { position: absolute; left: 0; top: 0; width: 100%; height: auto; clip-path: inset(0 100% 0 0); transition: clip-path 1.1s var(--ease); }
.cv__full { position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0; transition: opacity .7s var(--ease); }

.cv__card {
  position: absolute; z-index: 3; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-lg);
  padding: 14px 16px; font-size: 13px;
  opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .6s var(--ease), transform .7s var(--ease);
  pointer-events: none;
}
.cv__card-h { display: block; color: var(--muted); font-size: 11px; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .08em; }
.cv__sitemap { left: 5%; bottom: 7%; width: 210px; }
.cv__sitemap ul { position: relative; padding-left: 14px; border-left: 1.5px solid var(--line-2); display: grid; gap: 6px; }
.cv__sitemap li { position: relative; font-weight: 550; }
.cv__sitemap li::before { content: ''; position: absolute; left: -14px; top: 50%; width: 10px; border-top: 1.5px solid var(--line-2); }
.cv__sitemap li.is-root { font-weight: 700; margin-left: -14px; padding-left: 0; }
.cv__sitemap li.is-root::before { display: none; }
.cv__goal { margin-top: 12px; display: flex; gap: 6px; align-items: center; background: var(--ink); color: var(--paper); border-radius: 99px; padding: 6px 10px; font-weight: 600; width: fit-content; }
.cv__goal .ico { color: var(--orange); }
.cv__type { right: 5%; top: 9%; width: 200px; }
.cv__aa { display: flex; align-items: baseline; gap: 10px; font-size: 46px; font-weight: 600; letter-spacing: -.04em; line-height: 1; margin-bottom: 12px; }
.cv__aa em { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-style: italic; }
.cv__sw { display: flex; gap: 6px; }
.cv__sw i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }

.cv__phone {
  position: absolute; z-index: 4; right: 6%; bottom: 5%; width: 25%; min-width: 120px; aspect-ratio: 9 / 18.5;
  background: #111; border-radius: 26px; padding: 5px; box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(40%); transition: opacity .6s var(--ease), transform 1s var(--ease);
  container-type: inline-size;
}
.cv__phone-scr { position: relative; height: 100%; border-radius: 21px; overflow: hidden; background: #F4F4F2; display: flex; flex-direction: column; }
.cv__pnav { display: flex; justify-content: space-between; align-items: center; padding: 14cqw 8cqw 5cqw; background: #203512; color: #fff; font-size: 7cqw; }
.cv__pnav i { width: 9cqw; height: 5cqw; border-top: 1.5px solid #fff; border-bottom: 1.5px solid #fff; }
.cv__phero { display: flex; flex-direction: column; gap: 5cqw; padding: 14cqw 8cqw 12cqw; background: url('../images/kindred-hero.webp') 18% 40% / 420% auto; color: #fff; }
.cv__ph1 { font-size: 12cqw; line-height: 1; letter-spacing: -.03em; }
.cv__ph1 em { font-family: Georgia, serif; }
.cv__pbtn { background: #fff; color: #111; border-radius: 99px; font-size: 6cqw; padding: 3cqw 6cqw; width: fit-content; font-weight: 600; }
.cv__phone-scr img { width: 80%; margin: 8cqw auto 0; border-radius: 8cqw; }
.cv__toast {
  position: absolute; z-index: 5; left: 50%; top: 18px; transform: translate(-50%, -12px);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600;
  opacity: 0; transition: opacity .5s, transform .6s var(--ease);
}
.cv__toast i { width: 8px; height: 8px; border-radius: 50%; background: #35D07F; box-shadow: 0 0 0 4px rgba(53, 208, 127, .25); }

/* canvas states */
.cv[data-stage="1"] .cv__sitemap,
.cv[data-stage="2"] .cv__type,
.cv[data-stage="3"] .cv__phone, .cv[data-stage="4"] .cv__phone { opacity: 1; transform: none; }
.cv[data-stage="2"] .cv__hero, .cv[data-stage="3"] .cv__hero, .cv[data-stage="4"] .cv__hero { clip-path: inset(0 0 0 0); }
.cv[data-stage="3"] .cv__full, .cv[data-stage="4"] .cv__full { opacity: 1; }
.cv[data-stage="3"] .cv__browser, .cv[data-stage="4"] .cv__browser { transform: translate(-58%, -50%); width: 72%; }
.cv[data-stage="4"] .cv__page { transform: translateY(-48%); }
.cv[data-stage="4"] .cv__toast { opacity: 1; transform: translate(-50%, 0); }
.cv[data-stage="1"] { background: var(--bg-2); }
.cv[data-stage="2"] { background: var(--beige); }
.cv { transition: background-color .8s var(--ease); }

/* ==========================================================================
   04 WORK — stacked projects
   ========================================================================== */
.work { padding: var(--sec) 0 calc(var(--sec) * .5); }
.work__head, .compare__head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px);
  align-items: end; margin-bottom: clamp(40px, 6vw, 88px);
}
.work__head .lead, .compare__head .lead { padding-bottom: 8px; }
.stack { position: relative; }
.pcard {
  position: sticky; top: calc(var(--hdr-h) + 10px);
  height: calc(100svh - var(--hdr-h) - 28px); min-height: 560px; max-height: 920px;
  margin-bottom: 3vh; border-radius: var(--r-xl); overflow: hidden;
  transform-origin: 50% 0; background: var(--beige);
}
.pcard:last-child { margin-bottom: 0; }
.pcard__inner {
  height: 100%; display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 8.5fr);
  gap: clamp(20px, 3vw, 56px); padding: clamp(20px, 2.6vw, 44px);
}
.pcard__meta { display: flex; flex-direction: column; gap: 14px; padding: clamp(4px, 1vw, 16px); }
.pcard__idx { margin-bottom: auto; color: var(--muted); font-size: 13px; }
.pcard__cat { font-family: var(--mono); font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--orange-deep); }
.pcard__name { font-size: clamp(2.4rem, 1rem + 3.8vw, 5.4rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.045em; line-height: .88; }
.pcard__line { color: var(--ink-2); max-width: 34ch; }
.pcard__metric { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.pcard__metric strong { font-size: clamp(2.6rem, 1.4rem + 3vw, 4.8rem); letter-spacing: -.05em; line-height: .9; color: var(--orange-deep); }
.pcard__metric span { font-weight: 600; }
.pcard__media { position: relative; border-radius: calc(var(--r-xl) - 14px); overflow: hidden; background: rgba(18, 17, 16, .06); }
.pcard__frame { position: absolute; inset: 0; transform-style: preserve-3d; }
.pcard__frame img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; will-change: transform; }
.pcard__shade { position: absolute; inset: 0; background: #0b0a09; opacity: 0; pointer-events: none; }
.pcard--sand { background: var(--beige); }
.pcard--blue { background: var(--blue); }
.pcard--paper { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.pcard--ink { background: var(--dark-2); color: var(--on-dark); }
.pcard--ink .pcard__idx, .pcard--ink .pcard__line { color: var(--on-dark-2); }
.pcard--ink .pcard__cat, .pcard--ink .pcard__metric strong { color: var(--orange); }
.pcard--ink .pcard__metric { border-color: var(--dark-line); }
.pcard--more { background: var(--orange); color: #fff; }
.pcard--more .pcard__cat { color: var(--ink); }
.pcard--more .pcard__idx { color: rgba(18, 17, 16, .6); }
.pcard--more .pcard__line { margin-bottom: 14px; }
.pcard--more .btn { align-self: flex-start; }
.wall {
  position: relative; overflow: hidden; border-radius: calc(var(--r-xl) - 14px);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 14px;
  background: rgba(18, 17, 16, .08);
}
.wall__col { display: flex; flex-direction: column; gap: 14px; animation: wall 60s linear infinite; }
.wall__col--1 { animation-duration: 80s; animation-direction: reverse; }
.wall__col--2 { animation-duration: 70s; }
.wall__col img { width: 100%; border-radius: 12px; box-shadow: 0 10px 30px -12px rgba(0,0,0,.35); }
@keyframes wall { to { transform: translateY(-50%); } }

/* ==========================================================================
   05 WHY — bento
   ========================================================================== */
.why { padding: calc(var(--sec) * .7) 0 var(--sec); }
.why__head, .services__head, .process__head {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(24px, 4vw, 64px); align-items: end;
}
.why__head > .eyebrow, .services__head > .eyebrow, .process__head > .eyebrow { grid-column: 1; justify-self: start; }
.why__head > .display, .services__head > .display, .process__head > .display { grid-column: 1; }
.why__head > .lead, .services__head > .lead, .process__head > .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding-bottom: 8px; }

.bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(clamp(250px, 20vw, 310px), auto));
  grid-template-areas:
    "c c c c c c c m m m m m"
    "c c c c c c c m m m m m"
    "g g g g s s s s k k k k"
    "g g g g f f f u u u u u";
  gap: clamp(10px, 1.1vw, 18px); margin-top: clamp(40px, 5vw, 80px);
}
.bx {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: var(--paper); border: 1px solid var(--line);
  padding: clamp(20px, 2vw, 32px); display: flex; flex-direction: column; isolation: isolate;
}
.bx h3 { font-size: clamp(1.35rem, 1rem + .9vw, 2rem); font-weight: 700; text-transform: uppercase; letter-spacing: -.03em; line-height: 1; margin-bottom: 10px; }
.bx p { color: var(--muted); font-size: 15.5px; max-width: 38ch; }
.bx__vis { position: relative; flex: 1; margin-top: 18px; min-height: 150px; }
.bx--custom { grid-area: c; }
.bx--mobile { grid-area: m; background: var(--blue); border-color: transparent; }
.bx--seo { grid-area: s; }
.bx--manage { grid-area: g; background: var(--beige); border-color: transparent; }
.bx--fast { grid-area: f; background: var(--dark-2); border-color: transparent; color: var(--on-dark); }
.bx--fast p { color: var(--on-dark-2); }
.bx--stat { grid-area: k; background: var(--orange); border-color: transparent; justify-content: space-between; color: #fff; }
.bx--support { grid-area: u; }
.bx--support .bx__txt, .bx--seo .bx__txt { max-width: 46ch; }

/* custom */
.custom-vis { margin: 22px calc(clamp(20px, 2vw, 32px) * -1) calc(clamp(20px, 2vw, 32px) * -1) 0; }
.custom-vis__tpl {
  position: absolute; left: 0; top: 10%; width: 46%; aspect-ratio: 4/3.4; border-radius: 12px;
  background: #EFEBE3; border: 1px dashed #BDB4A5; padding: 12px; display: grid; gap: 7px; align-content: start;
  grid-template-columns: repeat(3, 1fr);
  transform: rotate(-5deg); transition: transform .8s var(--ease), opacity .8s;
}
.custom-vis__tpl .mono { grid-column: 1 / -1; font-size: 10px; color: var(--faint); }
.custom-vis__tpl b { grid-column: 1 / -1; height: 10px; border-radius: 4px; background: #DDD6CA; }
.custom-vis__tpl b.s { width: 60%; }
.custom-vis__tpl b.g { grid-column: auto; height: 46px; }
.custom-vis__site {
  position: absolute; right: 0; top: 0; bottom: 0; width: 80%;
  border-radius: 14px 0 0 0; overflow: hidden; background: #111; box-shadow: var(--shadow-lg);
  transition: transform .8s var(--ease);
}
.custom-vis__bar { display: flex; gap: 5px; height: 26px; align-items: center; padding: 0 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.custom-vis__bar i { width: 7px; height: 7px; border-radius: 50%; background: #D9D2C5; }
.custom-vis__site img { width: 100%; height: calc(100% - 26px); object-fit: cover; object-position: left top; }
.bx--custom:hover .custom-vis__tpl { transform: translate(-18%, 14%) rotate(-12deg); opacity: .55; }

/* mobile */
.bx--mobile .bx__vis { display: flex; justify-content: center; align-items: flex-end; margin-bottom: calc(clamp(20px, 2vw, 32px) * -1 - 70px); }
.phone { width: min(250px, 70%); aspect-ratio: 9 / 18.6; border-radius: 38px; background: #121110; padding: 8px; box-shadow: var(--shadow-lg); container-type: inline-size; }
.phone__scr { position: relative; height: 100%; border-radius: 31px; overflow: hidden; background: #fff; }
.phone__feed { display: flex; flex-direction: column; gap: 5cqw; padding: 16cqw 7cqw 8cqw; }
.bx--mobile.is-in .phone__feed { animation: feed 12s var(--ease-io) 1s infinite alternate; }
@keyframes feed { 0%, 12% { transform: translateY(0); } 88%, 100% { transform: translateY(-46%); } }
.ps-nav { display: flex; justify-content: space-between; align-items: center; font-size: 6.2cqw; margin-bottom: 4cqw; }
.ps-nav em { font-style: italic; }
.ps-nav i { width: 8cqw; height: 5cqw; border-top: 2px solid #111; border-bottom: 2px solid #111; }
.ps-h { font-size: 10.5cqw; font-weight: 650; line-height: 1; letter-spacing: -.03em; }
.ps-h--c { text-align: center; font-size: 8.5cqw; margin-top: 4cqw; }
.ps-p { font-size: 4.4cqw; color: #555; line-height: 1.4; }
.ps-p--c { text-align: center; }
.ps-btn { background: #F26B21; color: #fff; border-radius: 99px; padding: 3cqw 5cqw; font-size: 4.2cqw; font-weight: 600; width: fit-content; text-transform: uppercase; }
.phone__feed img { width: 100%; border-radius: 4cqw; }
.phone__feed .ps-eye { aspect-ratio: 1 / 1; object-fit: cover; }

/* seo */
.serp { display: flex; flex-direction: column; gap: 14px; justify-content: flex-end; }
.serp__card { background: #fff; border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); border: 1px solid var(--line); display: grid; gap: 4px; }
.serp__url { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #3b3b3b; }
.serp__url i { width: 18px; height: 18px; border-radius: 50%; background: var(--orange); color: #fff; }
.serp__url span { color: #777; }
.serp__title { font-size: 18px; color: #1a3fb8; line-height: 1.25; font-weight: 500; }
.serp__desc { font-size: 13.5px; color: #555; line-height: 1.45; }
.serp__checks { display: flex; flex-wrap: wrap; gap: 6px; }
.serp__checks li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 7px; border-radius: 99px; background: var(--bg); font-size: 12.5px; font-weight: 600; }
.serp__checks .ico { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--orange); color: #fff; }

/* cms */
.cms { display: flex; align-items: center; }
.cms__panel { width: 100%; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 16px; display: grid; gap: 12px; font-size: 13px; }
.cms__h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.cms__h .mono { color: var(--muted); text-transform: uppercase; font-size: 10.5px; }
.cms__f { display: grid; gap: 5px; }
.cms__f em { font-style: normal; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.cms__in { display: flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1.5px solid var(--line-2); font-weight: 500; }
.cms__f:first-of-type .cms__in { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(31, 95, 214, .18); }
.cms__caret { width: 1.5px; height: 16px; background: var(--orange); margin-left: 1px; animation: caret 1s steps(1) infinite; color: #fff; }
@keyframes caret { 50% { opacity: 0; } }
.cms__img { display: flex; align-items: center; gap: 10px; }
.cms__img img { width: 60px; height: 42px; object-fit: cover; object-position: top; border-radius: 7px; }
.cms__img span { font-size: 12px; color: var(--orange-deep); font-weight: 600; text-decoration: underline; }
.cms__row { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.cms__tog { width: 34px; height: 20px; border-radius: 99px; background: #35C77A; position: relative; }
.cms__tog i { position: absolute; right: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.cms__save { margin-left: auto; background: var(--ink); color: var(--paper); border-radius: 99px; padding: 7px 14px; font-size: 12px; }

/* fast */
.fast { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.fast__row { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 10px; font-size: 12px; color: var(--on-dark-2); }
.fast__row i { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--orange), var(--orange-2)); width: 100%; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease); transition-delay: var(--d); }
.fast__row i { max-width: var(--w); }
.bx--fast.is-in .fast__row i, html:not(.motion) .fast__row i { transform: scaleX(1); }
.fast__done { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; width: fit-content; background: rgba(255,255,255,.08); border-radius: 99px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; }
.fast__done .ico { color: var(--orange); }

/* stat */
.bx .bx__big { color: var(--ink); font-size: clamp(5rem, 3rem + 5vw, 9.5rem); font-weight: 750; letter-spacing: -.06em; line-height: .8; }
.bx__big-l { color: var(--ink) !important; font-weight: 550; max-width: 30ch; }
.bx__link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; margin-top: 12px; }
.bx__link:hover .ico { transform: translateX(4px); }
.bx__link .ico { transition: transform .3s; }

/* chat */
.chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; }
.chat__msg { max-width: 78%; padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.4; }
.chat__msg--you { align-self: flex-end; background: var(--blue); border-bottom-right-radius: 6px; }
.chat__msg--wl { align-self: flex-start; display: flex; gap: 10px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.chat__msg--wl img { flex: none; border-radius: 6px; }
.chat__done { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #1E8E4E; }
.chat__done .ico { width: 16px; height: 16px; }
.js .bx--support .chat > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js .bx--support.is-in .chat > * { opacity: 1; transform: none; }
.js .bx--support.is-in .chat > :nth-child(2) { transition-delay: .6s; }
.js .bx--support.is-in .chat > :nth-child(3) { transition-delay: 1.2s; }

/* ==========================================================================
   06 SERVICES
   ========================================================================== */
.services { padding: var(--sec) 0; background: var(--paper); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4.5vw, 80px); margin-top: clamp(40px, 5vw, 80px); align-items: start; }
.svc__list { border-top: 1px solid var(--line); }
.svc__item { border-bottom: 1px solid var(--line); }
.svc__btn {
  width: 100%; display: grid; grid-template-columns: 52px 1fr 40px; align-items: center; gap: 8px;
  padding: clamp(16px, 1.8vw, 26px) 0; text-align: left;
  font-size: clamp(1.5rem, .9rem + 1.8vw, 2.75rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; text-transform: uppercase;
  color: #857F75; transition: color .35s;
}
.svc__btn:hover, .svc__item.is-active .svc__btn { color: var(--ink); }
.svc__n { font-size: 13px; letter-spacing: .04em; color: var(--muted); align-self: start; padding-top: .35em; }
.svc__item.is-active .svc__n { color: var(--orange-deep); }
.svc__plus { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .45s var(--ease), background-color .3s, color .3s; }
.svc__plus .ico { width: 18px; height: 18px; }
.svc__item.is-active .svc__plus { transform: rotate(45deg); background: var(--orange); border-color: var(--orange); color: #fff; }
.svc__d { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .55s var(--ease); }
.js .svc__d { grid-template-rows: 0fr; }
.js .svc__item.is-active .svc__d { grid-template-rows: 1fr; }
.svc__d > div { overflow: hidden; }
.svc__d p { padding: 0 48px clamp(18px, 2vw, 28px) 60px; color: var(--muted); max-width: 52ch; }

.svc__stage {
  position: sticky; top: calc(var(--hdr-h) + 20px);
  aspect-ratio: 7 / 6; border-radius: var(--r-xl); overflow: hidden; background: var(--blue);
}
.sv { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s var(--ease), visibility 0s .55s; overflow: hidden; }
.sv.is-active { opacity: 1; visibility: visible; transition: opacity .55s var(--ease); }
.sv > * { transition: transform 1s var(--ease), opacity .8s var(--ease); }
.sv:not(.is-active) > * { transform: translateY(28px) scale(.98); }
.sv.is-active > :nth-child(2) { transition-delay: .08s; }
.sv.is-active > :nth-child(3) { transition-delay: .16s; }
.sv.is-active > :nth-child(4) { transition-delay: .24s; }
.sv--design { background: var(--blue); }
.sv--redesign { background: var(--beige); }
.sv--migration { background: var(--bg-2); }
.sv--ecommerce { background: #F1E1CF; }
.sv--landing { background: var(--blue); }
.sv--support { background: var(--beige); }
.sv-browser { position: absolute; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.sv-bar { display: flex; gap: 5px; height: 26px; align-items: center; padding: 0 12px; background: var(--paper); border-bottom: 1px solid var(--line); }
.sv-bar i { width: 7px; height: 7px; border-radius: 50%; background: #D9D2C5; }
.sv-chip { position: absolute; background: var(--paper); border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow-lg); font-weight: 600; }

.sv--design .sv-browser { left: 7%; top: 12%; width: 86%; }
.sv--design .sv-browser img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.sv-chip--aa { left: 4%; bottom: 12%; font-size: 34px; letter-spacing: -.04em; line-height: 1; }
.sv-chip--aa em { font-size: 12px; font-style: normal; font-family: var(--mono); color: var(--muted); letter-spacing: 0; margin-left: 6px; }
.sv-chip--sw { right: 5%; bottom: 16%; display: flex; gap: 6px; padding: 10px; }
.sv-chip--sw i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sv-chip--grid { right: 8%; top: 6%; font-size: 12px; padding: 8px 12px; background: var(--ink); color: var(--paper); }

.rd { position: absolute; inset: 9% 6%; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); container-type: inline-size; }
.rd__old { position: relative; background: #fff; font-family: 'Times New Roman', Times, serif; padding: 12cqw 3cqw 3cqw; display: flex; flex-direction: column; gap: 1.6cqw; filter: saturate(.3); }
.rd__new { position: relative; background: #FBF7F0; padding: 12cqw 3.2cqw 3cqw; display: flex; flex-direction: column; gap: 1.6cqw; }
.rd__tag { position: absolute; left: 3cqw; top: 3cqw; font-size: 1.9cqw; padding: .8cqw 1.6cqw; border-radius: 99px; background: #eee; color: #666; }
.rd__new .rd__tag { background: var(--orange); color: #fff; }
.rd__h { font-size: 3.2cqw; text-align: center; color: #333; }
.rd__links { font-size: 1.5cqw; color: #00e; text-decoration: underline; text-align: center; }
.rd__img { background: #ddd; color: #999; display: grid; place-items: center; font-size: 2cqw; aspect-ratio: 16/9; border: 1px solid #bbb; }
.rd__txt { height: 1.2cqw; background: #e3e3e3; }
.rd__txt.s { width: 60%; }
.rd__a { font-size: 1.5cqw; color: #00e; text-decoration: underline; }
.rd__nh { font-family: var(--f); font-size: 5cqw; line-height: .95; letter-spacing: -.04em; text-transform: uppercase; }
.rd__np { font-size: 2cqw; color: #555; }
.rd__ncta { background: var(--ink); color: #fff; border-radius: 99px; padding: 1.4cqw 2.6cqw; font-size: 1.9cqw; font-weight: 700; width: fit-content; }
.rd__nimg { flex: 1; min-height: 10cqw; border-radius: 2cqw; background: linear-gradient(160deg, #F2C7A5 0%, #E0784A 50%, #86391E 100%); }

.mg__from { position: absolute; left: 6%; top: 14%; display: grid; gap: 10px; }
.mg__from li { background: var(--paper); border-radius: 99px; padding: 10px 16px; font-weight: 650; box-shadow: var(--shadow); font-size: 15px; }
.mg__arrow { position: absolute; left: 31%; top: 30%; width: 52px; height: 52px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; color: #fff; }
.mg__arrow .ico { width: 22px; height: 22px; }
.mg__to { right: 6%; top: 10%; width: 52%; }
.mg__to img { width: 100%; aspect-ratio: 4/4.4; object-fit: cover; object-position: top; }
.mg__checks { position: absolute; left: 6%; bottom: 10%; background: var(--ink); color: var(--paper); border-radius: 16px; padding: 16px 18px; display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.mg__checks li { display: flex; gap: 8px; align-items: center; }
.mg__checks .ico { color: var(--orange); width: 16px; height: 16px; }

.ec__product { position: absolute; left: 7%; top: 10%; width: 44%; background: #fff; border-radius: 18px; padding: 14px; box-shadow: var(--shadow-lg); display: grid; gap: 8px; }
.ec__img { background: #F6EEE5; border-radius: 12px; overflow: hidden; }
.ec__img img { width: 100%; aspect-ratio: 1.2; object-fit: cover; }
.ec__product b { font-size: 18px; }
.ec__stars { display: flex; gap: 2px; color: var(--orange); }
.ec__stars .ico { width: 14px; height: 14px; fill: currentColor; }
.ec__add { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--ink); color: #fff; border-radius: 99px; padding: 11px; font-weight: 650; font-size: 14px; }
.ec__cart { position: absolute; right: 6%; top: 24%; width: 42%; background: var(--paper); border-radius: 18px; padding: 16px; box-shadow: var(--shadow-lg); display: grid; gap: 12px; font-size: 14px; }
.ec__cart-h { display: flex; justify-content: space-between; font-weight: 700; }
.ec__cart-h em { font-style: normal; color: var(--muted); font-weight: 500; }
.ec__line { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.ec__line img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #F6EEE5; }
.ec__line em { margin-left: auto; font-style: normal; color: var(--muted); }
.ec__pay { display: flex; gap: 6px; }
.ec__pay i { flex: 1; height: 26px; border-radius: 6px; background: #ECE6DA; }
.ec__checkout { display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--orange); border-radius: 99px; padding: 12px; font-weight: 700; color: #fff; }
.ec__search { position: absolute; left: 7%; bottom: 8%; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px; padding: 12px 20px; box-shadow: var(--shadow); color: var(--muted); font-size: 14px; }

.lp__page { left: 9%; top: 8%; width: 46%; bottom: -6%; }
.lp__scroll { height: 100%; overflow: hidden; }
.lp__scroll img { width: 100%; }
.sv--landing.is-active .lp__scroll img { animation: lpscroll 9s var(--ease-io) .6s infinite alternate; }
@keyframes lpscroll { to { transform: translateY(-38%); } }
.lp__goal { position: absolute; right: 6%; top: 18%; display: flex; align-items: center; gap: 8px; background: var(--ink); color: var(--paper); border-radius: 99px; padding: 12px 18px; font-weight: 650; font-size: 14px; }
.lp__goal .ico { color: var(--orange); }
.lp__form { position: absolute; right: 7%; top: 40%; width: 36%; background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-lg); display: grid; gap: 8px; }
.lp__form i { height: 32px; border-radius: 8px; border: 1.5px solid var(--line-2); }
.lp__form b { background: var(--orange); border-radius: 99px; text-align: center; padding: 9px; font-size: 14px; box-shadow: 0 0 0 6px rgba(31, 95, 214, .2); color: #fff; }

.sp__bg { position: absolute; right: -8%; bottom: -8%; width: 70%; border-radius: 20px; opacity: .9; z-index: 0; }
.sp__card { position: absolute; z-index: 1; left: 7%; top: 12%; width: 50%; background: var(--paper); border-radius: 18px; padding: 18px; box-shadow: var(--shadow-lg); display: grid; gap: 10px; font-size: 15px; font-weight: 600; }
.sp__h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sp__h .mono { color: var(--muted); text-transform: uppercase; font-size: 10.5px; }
.sp__row { display: flex; gap: 10px; align-items: center; }
.sp__row .ico { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--orange); color: #fff; }
.sp__row--live i { width: 10px; height: 10px; margin: 0 5px; border-radius: 50%; background: #35C77A; box-shadow: 0 0 0 4px rgba(53, 199, 122, .2); }
.sp__msg { position: absolute; z-index: 2; left: 12%; bottom: 14%; display: flex; gap: 10px; align-items: center; background: var(--ink); color: var(--paper); padding: 12px 18px 12px 12px; border-radius: 18px 18px 18px 6px; font-weight: 550; font-size: 14.5px; box-shadow: var(--shadow-lg); }
.sp__msg img { border-radius: 5px; }

/* ==========================================================================
   07 OFFER (dark)
   ========================================================================== */
.offer { position: relative; color: var(--on-dark); padding: var(--sec) 0 calc(var(--sec) * .8); isolation: isolate; }
.offer__bg {
  position: absolute; inset: 0; z-index: -1; background: var(--dark);
  background-image:
    radial-gradient(60% 40% at 85% 0%, rgba(31, 95, 214, .22), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: auto, 80px 80px, 80px 80px;
}
.offer .lead { color: var(--on-dark-2); }
.offer__head .display { max-width: 16ch; }
.offer__head .lead { margin-top: 28px; }

.offer__build {
  display: grid; grid-template-columns: minmax(0, 4.2fr) minmax(0, 7.8fr); gap: clamp(28px, 4vw, 72px); align-items: center;
  margin-top: clamp(48px, 6vw, 96px);
}
.oblist { border-top: 1px solid var(--dark-line); }
.oblist__item {
  display: grid; grid-template-columns: 28px 30px 1fr; align-items: center; gap: 10px;
  padding: clamp(10px, 1.3vh, 16px) 0; border-bottom: 1px solid var(--dark-line);
  transition: opacity .45s var(--ease);
}
.js.motion .oblist__item { opacity: .35; }
.js.motion .oblist__item.is-done { opacity: 1; }
.oblist__check { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--dark-line); display: grid; place-items: center; transition: background-color .4s, border-color .4s; }
.oblist__check .ico { width: 14px; height: 14px; color: var(--ink); opacity: 0; transition: opacity .3s; }
.oblist__item.is-done .oblist__check, html:not(.motion) .oblist__check { background: var(--orange); border-color: var(--orange); color: #fff; }
.oblist__item.is-done .oblist__check .ico, html:not(.motion) .oblist__check .ico { opacity: 1; }
.oblist__n { color: var(--on-dark-2); font-size: 12px; }
.oblist__t strong { display: block; font-size: clamp(15px, 1.15vw, 18px); font-weight: 650; }
.oblist__t span { display: block; font-size: 14px; color: var(--on-dark-2); }

.ob {
  position: relative; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 50px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08);
}
.ob__chrome { height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #F4F1EA; border-bottom: 1px solid var(--line); color: #6b665d; }
.ob__dots { display: flex; gap: 6px; }
.ob__dots i { width: 10px; height: 10px; border-radius: 50%; background: #DCD5C8; }
.ob__tabs { display: flex; gap: 2px; font-size: 12px; font-weight: 600; overflow: hidden; min-width: 0; }
.ob__tabs i { font-style: normal; padding: 5px 10px; border-radius: 8px; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); white-space: nowrap; }
.ob__tabs i:first-child { background: #fff; color: var(--ink); }
.ob-s1 .ob__tabs i { opacity: 1; transform: none; }
.ob-s1 .ob__tabs i:nth-child(2) { transition-delay: .06s; }
.ob-s1 .ob__tabs i:nth-child(3) { transition-delay: .12s; }
.ob-s1 .ob__tabs i:nth-child(4) { transition-delay: .18s; }
.ob-s1 .ob__tabs i:nth-child(5) { transition-delay: .24s; }
.ob__live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 600 11.5px/1 var(--mono); text-transform: uppercase; white-space: nowrap; }
.ob__live i { width: 8px; height: 8px; border-radius: 50%; background: #C9C2B4; transition: background-color .4s, box-shadow .4s; }
.ob-s7 .ob__live i { background: #35C77A; box-shadow: 0 0 0 4px rgba(53, 199, 122, .22); }
.ob__view { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; background: #FBFAF7; container-type: inline-size; }
.ob__page { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 874 / 1076; transition: transform 2.4s var(--ease-io); }
.ob-s7 .ob__page { transform: translateY(-14%); }
.obw {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
  border-radius: .6cqw; background: #ECE7DE; border: 1px dashed #C7BFB0;
  opacity: 0; transform: scale(.94); transition: opacity .5s, transform .6s var(--ease);
}
.obw--eye, .obw--bottle { background: repeating-linear-gradient(135deg, #F1ECE3 0 .8cqw, #E8E2D7 .8cqw 1.6cqw); }
.obw--nbtn, .obw--btn { border-radius: 99px; }
.ob-s1 .obw { opacity: 1; transform: none; }
.ob__content { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease); }
.ob-s2 .ob__content { clip-path: inset(0 0 0 0); }
.ob__form, .ob__speed, .ob__chat, .ob__ship { position: absolute; opacity: 0; transition: opacity .5s var(--ease), transform .8s var(--ease); }
.ob__form {
  right: 3cqw; bottom: 3cqw; width: 29cqw; background: #fff; border-radius: 1.6cqw; padding: 2cqw;
  box-shadow: 0 2cqw 5cqw -1cqw rgba(0,0,0,.35); display: flex; flex-direction: column; gap: .9cqw;
  font-size: 1.35cqw; color: #222; transform: translateY(30%);
}
.ob__form-h { font-weight: 700; font-size: 1.8cqw; letter-spacing: -.02em; }
.ob__in { border: 1px solid #E0DBD2; border-radius: .8cqw; padding: .9cqw 1.1cqw; color: #9A948A; }
.ob__in--ta { height: 6.5cqw; }
.ob__send { background: #F26B21; color: #fff; border-radius: 99px; padding: 1cqw; text-align: center; font-weight: 700; }
.ob-s3 .ob__form { opacity: 1; transform: none; }
.ob__speed {
  right: 3cqw; top: 2.5cqw; display: flex; align-items: center; gap: 1cqw; background: var(--ink); color: #fff;
  border-radius: 99px; padding: .9cqw 1.6cqw .9cqw 1.1cqw; font-size: 1.25cqw; transform: translateY(-40%);
}
.ob__speed .ico { width: 2.4cqw; height: 2.4cqw; color: var(--orange); }
.ob__speed span { display: grid; line-height: 1.2; }
.ob__speed em { font-style: normal; color: #aaa; font-size: .9em; }
.ob__speed > i { width: 8cqw; height: .7cqw; border-radius: 99px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }
.ob__speed > i::after { content: ''; position: absolute; inset: 0; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--ease) .3s; color: #fff; }
.ob-s4 .ob__speed { opacity: 1; transform: none; }
.ob-s4 .ob__speed > i::after { transform: scaleX(1); }
.ob__admin {
  position: absolute; left: 0; top: 0; bottom: 0; width: 17cqw; background: var(--dark-2); color: #ddd;
  padding: 2.2cqw 1.4cqw; display: flex; flex-direction: column; gap: .5cqw; font-size: 1.3cqw;
  transform: translateX(-102%); transition: transform .9s var(--ease);
}
.ob__admin span { padding: .8cqw 1cqw; border-radius: .7cqw; }
.ob__admin span.is-on { background: var(--orange); color: #fff; font-weight: 700; }
.ob__admin-h { display: flex; align-items: center; gap: .6cqw; font-weight: 700; color: #fff; margin-bottom: 1cqw; }
.ob__admin-h .ico { width: 1.8cqw; height: 1.8cqw; color: var(--orange); }
.ob-s5 .ob__admin { transform: none; }
.ob-s5 .ob__page { left: 17cqw; width: calc(100% - 17cqw); }
.ob__page { transition: transform 2.4s var(--ease-io), left .9s var(--ease), width .9s var(--ease); }
.ob__chat {
  left: 20cqw; bottom: 3cqw; max-width: 34cqw; display: flex; gap: 1cqw; align-items: flex-start;
  background: #fff; border-radius: 1.6cqw 1.6cqw 1.6cqw .4cqw; padding: 1.3cqw 1.5cqw;
  box-shadow: 0 2cqw 5cqw -1cqw rgba(0,0,0,.35); font-size: 1.3cqw; color: #222; line-height: 1.35; transform: translateY(30%);
}
.ob__chat img { width: 2.8cqw; height: 2.8cqw; border-radius: .5cqw; flex: none; }
.ob__chat b { display: block; font-size: .9em; color: var(--orange-deep); }
.ob-s6 .ob__chat { opacity: 1; transform: none; }
.ob__ship {
  left: 50%; top: 42%; transform: translate(-50%, -30%) scale(.9);
  display: flex; align-items: center; gap: 1cqw; white-space: nowrap;
  background: var(--orange); color: #fff; border-radius: 99px; padding: 1.4cqw 2.6cqw 1.4cqw 1.8cqw;
  font-size: 2cqw; font-weight: 750; letter-spacing: -.01em; box-shadow: 0 2cqw 6cqw -1cqw rgba(0,0,0,.45);
}
.ob__ship .ico { width: 2.8cqw; height: 2.8cqw; padding: .5cqw; background: var(--ink); color: var(--orange); border-radius: 50%; }
.ob-s7 .ob__ship { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* package panel */
.offer__pricing { margin-top: clamp(64px, 9vw, 140px); }
.pkg { position: relative; }
.pkg__radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pkg__switch { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 22px; }
.pkg__switch > *, .pkg__chips, .offer__build > * { min-width: 0; }
.pkg__switch-h { font-size: 15px; color: var(--on-dark-2); }
.pkg__switch-h span { color: var(--orange); font-weight: 600; margin-left: 6px; }
.pkg__row { display: flex; align-items: center; gap: 16px; }
.pkg__row-l { flex: none; width: 110px; color: var(--on-dark-2); text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em; }
.pkg__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pkg__chip {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer; user-select: none;
  padding: 10px 15px; border-radius: 999px; border: 1px solid var(--dark-line); font-size: 14px; color: var(--on-dark);
  transition: background-color .25s, color .25s, border-color .25s;
}
.pkg__chip:hover { border-color: var(--on-dark-2); }
.pkg__chip span { font-weight: 500; }
.pkg__panels { position: relative; }
.pkg__panel {
  display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: var(--r-xl); overflow: hidden;
  background: linear-gradient(160deg, #1D1B19 0%, #141311 100%);
  border: 1px solid var(--dark-line);
  box-shadow: 0 60px 140px -60px rgba(31, 95, 214, .35);
}
.pkg__main { padding: clamp(26px, 4vw, 64px); border-right: 1px solid var(--dark-line); display: flex; flex-direction: column; align-items: flex-start; }
.pkg__side { padding: clamp(26px, 4vw, 64px); background: rgba(255, 255, 255, .02); }
.pkg__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pkg__tag { font: 600 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; padding: 7px 11px; border-radius: 99px; border: 1px solid var(--dark-line); color: var(--on-dark-2); }
.pkg__tag--hot { background: var(--orange); border-color: var(--orange); color: #fff; }
.pkg__name { margin: 22px 0 12px; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.8rem); font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.pkg__name span { display: block; margin-bottom: 10px; color: var(--orange); font-size: .5em; letter-spacing: .02em; text-transform: uppercase; }
.pkg__desc { color: var(--on-dark-2); max-width: 44ch; }
.pkg__price { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 24px); margin: clamp(24px, 3vw, 40px) 0 12px; }
.pkg__price strong { font-size: clamp(4.4rem, 2rem + 6.5vw, 9.4rem); font-weight: 750; letter-spacing: -.065em; line-height: .78; }
.pkg__price-m { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; font-size: 14px; color: var(--on-dark-2); }
.pkg__price-m s { font-size: 22px; color: var(--on-dark-2); }
.pkg__off { background: var(--orange); color: #fff; font-weight: 750; padding: 4px 9px; border-radius: 7px; width: fit-content; text-transform: uppercase; letter-spacing: .04em; font-size: 12.5px; }
.pkg__delivery { color: var(--on-dark-2); margin-bottom: 28px; }
.pkg__delivery strong { color: var(--on-dark); }
.pkg__micro { margin-top: 14px; font-size: 14px; color: var(--on-dark-2); }
.pkg__side-h { color: var(--on-dark-2); text-transform: uppercase; font-size: 11.5px; letter-spacing: .08em; margin-bottom: 18px; }
.pkg__list { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px; }
.pkg__list li { display: flex; gap: 10px; font-size: 15px; line-height: 1.35; }
.pkg__list .ico { width: 18px; height: 18px; color: var(--orange); margin-top: 1px; }
.pkg__more { margin-top: 16px; }
.pkg__more summary { cursor: pointer; color: var(--orange); font-weight: 650; font-size: 14.5px; margin-bottom: 14px; width: fit-content; }
.pkg__addons { margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--dark-line); font-size: 14px; color: var(--on-dark-2); }
.pkg__addons .mono { display: block; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
html:not(.js) .pkg__panel[data-pk="best-seller-premium-design-solution"] { display: grid; }

/* Package cards: the same packages as the main site, three equal boxes per
   row. The feature list scrolls inside the box (data-lenis-prevent in the
   markup lets the wheel reach it), so price and button always line up. */
.lpk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.lpk-panel { display: none; }
.lpk-note { color: var(--on-dark-2); font-size: 15px; margin-bottom: 18px; }
.lpk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.lpk-card {
  display: flex; flex-direction: column; height: 640px; padding: clamp(22px, 2.2vw, 32px);
  border-radius: var(--r-lg); border: 1px solid var(--dark-line);
  background: linear-gradient(160deg, #1D1B19 0%, #141311 100%);
}
.lpk-card h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.lpk-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.lpk-price strong { font-size: clamp(2.4rem, 1.8rem + 1.8vw, 3.4rem); font-weight: 750; letter-spacing: -.05em; line-height: 1; }
.lpk-price span { color: var(--on-dark-2); font-size: 14px; }
.lpk-list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; align-content: start; gap: 10px; margin: 0 -8px 20px 0; padding: 0 8px 28px 0;
  scrollbar-width: thin; scrollbar-color: var(--dark-line) transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}
.lpk-list:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }
.lpk-list li { display: flex; gap: 10px; padding-top: 10px; border-top: 1px solid var(--dark-line); font-size: 14.5px; line-height: 1.35; }
.lpk-list .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--orange); }
@media (max-width: 1023px) { .lpk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lpk-grid { grid-template-columns: minmax(0, 1fr); } .lpk-card { height: 580px; } }

/* ==========================================================================
   08 PROCESS (dark, horizontal on desktop)
   ========================================================================== */
.process { background: var(--dark); color: var(--on-dark); padding-bottom: calc(var(--sec) * .8); overflow: hidden; }
.process .lead { color: var(--on-dark-2); }
.process__pin { padding-top: calc(var(--sec) * .5); }
.process__viewport { margin-top: clamp(40px, 6vh, 80px); }
.process__track { max-width: calc(var(--max) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.pstep {
  position: relative; display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 24px; align-items: start;
  padding: clamp(24px, 3vw, 40px) 0; border-top: 1px solid var(--dark-line);
}
.pstep__num {
  font-size: clamp(6rem, 3rem + 10vw, 14rem); font-weight: 800; line-height: .78; letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .22);
  transition: color .6s var(--ease), -webkit-text-stroke-color .6s var(--ease);
}
.pstep.is-active .pstep__num { color: var(--orange); -webkit-text-stroke-color: var(--orange); }
.pstep__k { color: var(--orange); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; }
.pstep__body h3 { margin: 12px 0 14px; font-size: var(--fs-h3); font-weight: 700; text-transform: uppercase; letter-spacing: -.035em; line-height: .95; }
.pstep__body p { color: var(--on-dark-2); max-width: 42ch; }
.pstep__body .btn { margin-top: 26px; }
.pstep--cta { grid-template-columns: 1fr; }
.pstep--cta .pstep__body { max-width: 560px; }
.process__bar { display: none; }

.process.is-h .process__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--hdr-h) + 12px); padding-bottom: 24px; }
.process.is-h { padding-bottom: 0; }
.process.is-h .process__viewport { margin-top: clamp(24px, 5vh, 64px); }
.process.is-h .process__track { display: flex; width: max-content; max-width: none; margin: 0; padding: 0 var(--gut); will-change: transform; }
.process.is-h .pstep {
  flex: none; width: min(64vw, 920px); min-height: clamp(330px, 50vh, 520px);
  grid-template-columns: 1fr; align-content: end; padding: 0 clamp(28px, 4vw, 72px) 0; border-top: 0; border-left: 1px solid var(--dark-line);
}
.process.is-h .pstep__num { position: absolute; left: clamp(16px, 2.4vw, 40px); top: 0; font-size: min(clamp(9rem, 3rem + 14vw, 22rem), 30vh); line-height: .74; z-index: 0; }
.process.is-h .pstep__body { position: relative; z-index: 1; max-width: 520px; transition: opacity .5s; }
.process.is-h .pstep.is-past .pstep__num { color: transparent; -webkit-text-stroke-color: rgba(255,255,255,.08); }
.process.is-h .pstep.is-past .pstep__body { opacity: .4; }
.process.is-h .pstep--cta { width: min(46vw, 620px); }
.process.is-h .process__bar { display: block; height: 2px; background: var(--dark-line); margin-top: clamp(24px, 5vh, 56px); position: relative; }
.process__bar span { position: absolute; inset: 0; background: var(--orange); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); color: #fff; }

/* ==========================================================================
   09 COMPARE
   ========================================================================== */
.compare {
  position: relative; z-index: 2; background: var(--bg); padding: var(--sec) 0;
  margin-top: calc(var(--r-xl) * -1); border-radius: var(--r-xl) var(--r-xl) 0 0;
}
.ba {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; background: #fff;
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--line); user-select: none; -webkit-user-select: none;
  touch-action: pan-y; cursor: ew-resize; container-type: inline-size;
}
.ba__side { position: absolute; inset: 0; isolation: isolate; }
.ba__before { z-index: 1; }
.ba__after { z-index: 2; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; z-index: 4; }
.ba__handle {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; border-radius: 50%; transform: translate(-50%, -50%);
  background: var(--orange); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px -8px rgba(0,0,0,.4);
  transition: transform .3s var(--ease);
}
.ba__handle .ico { width: 26px; height: 26px; }
.ba.is-drag .ba__handle { transform: translate(-50%, -50%) scale(1.1); }
.ba:has(.ba__range:focus-visible) .ba__handle { outline: 3px solid var(--ink); outline-offset: 4px; }
.ba__range { position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; opacity: 0; pointer-events: none; }
.ba__label { position: absolute; bottom: 16px; z-index: 5; padding: 8px 12px; border-radius: 99px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; pointer-events: none; }
.ba__label--l { left: 16px; background: rgba(18, 17, 16, .75); color: #fff; }
.ba__label--r { right: 16px; background: var(--orange); color: #fff; font-weight: 700; }
.ba__caption { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }

.old { position: absolute; inset: 0; background: #fff; color: #222; font-family: 'Times New Roman', Times, serif; }
.old__top { display: flex; justify-content: space-between; align-items: center; padding: 2cqw 3cqw 1.4cqw; background: #DDE5EE; border-bottom: 2px solid #9AA8B8; }
.old__logo { font-size: 2.4cqw; color: #1B3D8F; letter-spacing: .12em; }
.old__tel { font-size: 1.15cqw; color: #C00; font-weight: bold; }
.old__nav { font-size: 1.05cqw; color: #0000EE; text-decoration: underline; padding: .9cqw 3cqw; background: #F2F2F2; border-bottom: 1px solid #CCC; white-space: nowrap; overflow: hidden; }
.old__body { padding: 2.6cqw 3cqw; }
.old__h { text-align: center; font-size: 3.3cqw; font-weight: bold; color: #444; margin-bottom: 2.2cqw; }
.old__cols { display: grid; grid-template-columns: 30% 1fr; gap: 2cqw; }
.old__img { display: grid; place-items: center; aspect-ratio: 4/3; background: #DDD; border: 1px solid #BBB; color: #888; font-size: 1.3cqw; }
.old__txt { font-size: 1.3cqw; line-height: 1.35; text-align: justify; color: #333; max-width: 48cqw; }
.old__small { margin-top: 2.2cqw; font-size: 1.05cqw; color: #777; }
.old__small u { color: #0000EE; }
.old__phone { position: absolute; left: 22cqw; bottom: 3cqw; width: 12cqw; aspect-ratio: 9 / 18; background: #2a2a2a; border-radius: 2cqw; padding: .6cqw; }
.old__phone-s { display: block; height: 100%; background: #fff; border-radius: 1.5cqw; padding: 1.4cqw .8cqw; overflow: hidden; }
.old__phone-s b { display: block; font-size: .8cqw; color: #1B3D8F; margin-bottom: .6cqw; letter-spacing: .08em; }
.old__phone-s i { display: block; height: .45cqw; background: #CFCFCF; margin-top: .5cqw; }
.old__phone-s i:nth-child(odd) { width: 70%; }

.new { position: absolute; inset: 0; background: #F6F2EA; color: var(--ink); font-family: var(--f); }
.new__nav { display: flex; align-items: center; gap: 3cqw; padding: 2.2cqw 4cqw; }
.new__logo { display: flex; align-items: center; gap: .7cqw; font-size: 1.6cqw; font-weight: 750; letter-spacing: -.02em; }
.new__logo i { width: 1.7cqw; height: 1.7cqw; border-radius: .45cqw; background: var(--orange); color: #fff; }
.new__links { margin-left: auto; display: flex; gap: 2.6cqw; font-size: 1.15cqw; color: #555; }
.new__btn { background: var(--ink); color: #fff; border-radius: 99px; padding: 1cqw 1.8cqw; font-size: 1.1cqw; font-weight: 650; }
.new__hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4cqw; padding: 2.4cqw 4cqw 0; align-items: center; }
.new__img { order: -1; }
.new__eyebrow { font: 600 1cqw/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--orange-deep); }
.new__h { font-size: 4.9cqw; font-weight: 750; line-height: .93; letter-spacing: -.045em; margin: 1.4cqw 0 1.6cqw; text-transform: uppercase; }
.new__p { font-size: 1.4cqw; line-height: 1.45; color: #555; max-width: 34cqw; }
.new__ctas { display: flex; gap: 1cqw; margin-top: 2.4cqw; }
.new__cta { background: var(--orange); color: #fff; border-radius: 99px; padding: 1.3cqw 2.2cqw; font-size: 1.25cqw; font-weight: 750; }
.new__cta2 { border: 1.5px solid #CFC8BC; border-radius: 99px; padding: 1.3cqw 2.2cqw; font-size: 1.25cqw; font-weight: 600; }
.new__proof { display: block; margin-top: 2.6cqw; font-size: 1.15cqw; color: #555; }
.new__stars { color: var(--orange); letter-spacing: .1em; margin-right: .6cqw; }
.new__img { position: relative; aspect-ratio: 1 / 1.02; border-radius: 2.2cqw; overflow: hidden; background: linear-gradient(160deg, #F2C9A6 0%, #E08050 45%, #7C3A20 100%); }
.new__img i { position: absolute; left: 18%; top: 14%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 236, 215, .95), rgba(255, 190, 140, .2) 60%, transparent 70%); }
.new__img::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, transparent, rgba(60, 25, 10, .45)); }
.new__phone { position: absolute; left: 30cqw; bottom: 3cqw; width: 12cqw; aspect-ratio: 9 / 18; background: var(--ink); border-radius: 2cqw; padding: .6cqw; box-shadow: 0 2cqw 4cqw -1cqw rgba(0,0,0,.4); }
.new__phone-s { display: flex; flex-direction: column; gap: 1cqw; height: 100%; background: #F6F2EA; border-radius: 1.5cqw; padding: 1.8cqw 1.1cqw; }
.new__phone-s b { font-size: .95cqw; }
.new__phone-s em { font-style: normal; font-weight: 750; font-size: 1.55cqw; line-height: .95; text-transform: uppercase; letter-spacing: -.03em; }
.new__phone-s span { margin-top: auto; background: var(--orange); border-radius: 99px; text-align: center; padding: .7cqw; font-size: .9cqw; font-weight: 700; color: #fff; }

.note {
  position: absolute; left: var(--nx); top: var(--ny); z-index: 3;
  display: inline-flex; align-items: center; gap: .6cqw; white-space: nowrap;
  font: 650 max(10px, 1.12cqw)/1 var(--f); padding: .7cqw 1.1cqw .7cqw .8cqw; border-radius: 99px;
  background: var(--ink); color: var(--paper); box-shadow: 0 1cqw 2.4cqw -1cqw rgba(0,0,0,.5);
}
.note::before { content: ''; width: .8cqw; height: .8cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: var(--orange); color: #fff; }
.note--old { background: #fff; color: #B3261E; border: 1px solid #EBB9B4; font-family: var(--f); }
.note--old::before { background: #D93025; }

/* ==========================================================================
   10 REVIEWS
   ========================================================================== */
.reviews { padding: var(--sec) 0; background: var(--paper); }
.reviews__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; }
.rv__nav { display: flex; align-items: center; gap: 14px; flex: none; }
.rv__arrow { width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: background-color .3s, color .3s, border-color .3s; }
.rv__arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.rv__arrow .ico { width: 22px; height: 22px; }
.rv__count { font-size: 14px; color: var(--muted); min-width: 64px; text-align: center; }
.rv { position: relative; display: grid; margin-top: clamp(36px, 4vw, 64px); border-radius: var(--r-xl); overflow: hidden; background: var(--beige); touch-action: pan-y; }
.rv__slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5.4fr); grid-template-areas: "body media";
  min-height: clamp(480px, 40vw, 640px); opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s .6s;
}
.rv__slide.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease); }
html:not(.js) .rv__slide { position: relative; opacity: 1; visibility: visible; grid-area: auto; }
.rv__media { grid-area: media; position: relative; overflow: hidden; clip-path: inset(0 0 0 100%); transition: clip-path 1.1s var(--ease); }
.rv__slide.is-active .rv__media, html:not(.js) .rv__media { clip-path: inset(0 0 0 0); }
.rv__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 1.6s var(--ease); }
.rv__slide.is-active .rv__media img { transform: scale(1); }
.rv__body { grid-area: body; padding: clamp(28px, 4vw, 72px); display: flex; flex-direction: column; gap: 28px; }
.rv__mark { font-size: clamp(120px, 12vw, 200px); line-height: .7; height: .42em; color: var(--orange); font-weight: 800; }
.rv__q { flex: 1; }
.rv__q p {
  font-size: clamp(1.55rem, .9rem + 2.1vw, 2.9rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 600;
  opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease) .2s, transform .9s var(--ease) .2s;
}
.rv__slide.is-active .rv__q p, html:not(.js) .rv__q p { opacity: 1; transform: none; }
.rv__who { display: flex; gap: 14px; align-items: center; }
.rv__who img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.rv__who strong { display: block; font-size: 17px; }
.rv__who span span { color: var(--muted); font-size: 15px; }

/* ==========================================================================
   11 START — lead form
   ========================================================================== */
.start { padding: var(--sec) 0; background: var(--bg); }
.start__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.start__copy { position: sticky; top: calc(var(--hdr-h) + 32px); }
.start__copy .lead { margin-top: 26px; }
.next { margin: 34px 0 30px; border-top: 1px solid var(--line); }
.next li { display: flex; gap: 16px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 550; }
.next .mono { color: var(--orange-deep); }
.start__contact { display: flex; flex-direction: column; gap: 10px; }
.start__contact a { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; width: fit-content; }
.start__contact a:hover { color: var(--orange-deep); }
.start__contact .ico { width: 18px; height: 18px; color: var(--orange-deep); }
.start__card { background: var(--paper); border-radius: var(--r-xl); padding: clamp(22px, 3.4vw, 56px); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }

.lf__pkg { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; border-radius: 16px; background: var(--ink); color: var(--paper); margin-bottom: 22px; flex-wrap: wrap; }
.lf__pkg .mono { width: 100%; color: var(--on-dark-2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: -6px; }
.lf__pkg strong { flex: 1; font-weight: 600; font-size: 15px; }
.lf__pkg b { color: var(--orange); font-size: 18px; }
.lf__pkg button { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.1); }
.lf__pkg button .ico { width: 16px; height: 16px; }
.lf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }
.fld label, .fld legend { font-size: 14.5px; font-weight: 650; }
.fld label span[aria-hidden] { color: var(--orange-deep); }
.fld__opt { font-weight: 450; color: var(--muted); font-size: 13px; margin-left: 4px; }
.fld input, .fld textarea {
  width: 100%; height: 60px; padding: 0 18px; border-radius: 14px; font-size: 17px;
  border: 1.5px solid var(--line-2); background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.fld textarea { height: auto; min-height: 118px; padding: 15px 18px; resize: vertical; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: #9C968B; }
.fld input:hover, .fld textarea:hover { border-color: rgba(18,17,16,.4); }
.fld input:focus, .fld textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(31, 95, 214, .28); }
.fld input[aria-invalid="true"] { border-color: #C4320A; background: #FFF8F5; }
.fld__err { display: none; color: #B42318; font-size: 13.5px; font-weight: 550; }
.fld.is-invalid .fld__err { display: block; }
.fld--chips { border: 0; padding: 0; margin: 4px 0 20px; min-width: 0; }
.fld--chips legend { padding: 0; margin-bottom: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; height: 46px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--line-2); background: #fff; font-size: 15px; font-weight: 550;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
.chip span:hover { border-color: var(--ink); }
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { box-shadow: 0 0 0 4px rgba(31, 95, 214, .35); }
.lf .btn--xl { margin-top: 6px; }
.lf__micro { text-align: center; margin-top: 16px; font-size: 14.5px; color: var(--ink-2); font-weight: 500; }
.lf__legal { text-align: center; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.lf-done { text-align: center; padding: clamp(16px, 4vw, 48px) 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lf-done:focus { outline: none; }
.lf-done__icon { width: 76px; height: 76px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; color: #fff; }
.lf-done__icon .ico { width: 36px; height: 36px; }
.lf-done h3 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 750; letter-spacing: -.035em; text-transform: uppercase; line-height: 1; }
.lf-done p { color: var(--muted); max-width: 40ch; }

/* ==========================================================================
   12 FAQ
   ========================================================================== */
.faq { padding: var(--sec) 0; }
.faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.faq__side { position: sticky; top: calc(var(--hdr-h) + 32px); }
.faq__ask { margin-top: 28px; color: var(--muted); max-width: 32ch; }
.faq__ask a { color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.faq__list { border-bottom: 1px solid var(--line); }
.qa { border-top: 1px solid var(--line); }
.qa summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer;
  padding: clamp(20px, 2vw, 28px) 0; font-size: clamp(1.1rem, .95rem + .55vw, 1.5rem); font-weight: 650; letter-spacing: -.015em; line-height: 1.25;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .4s var(--ease), background-color .3s, color .3s, border-color .3s; }
.qa summary i .ico { width: 18px; height: 18px; }
.qa summary:hover i { border-color: var(--ink); }
.qa[open] summary i { transform: rotate(45deg); background: var(--ink); border-color: var(--ink); color: var(--paper); }
.qa__a { overflow: hidden; }
.qa__a p { padding: 0 66px clamp(20px, 2vw, 28px) 0; color: var(--muted); max-width: 62ch; }

/* ==========================================================================
   13 FINAL + footer
   ========================================================================== */
.final { position: relative; background: var(--orange); color: #fff; padding-top: var(--sec); overflow: hidden; isolation: isolate; }
.final::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(18,17,16,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(18,17,16,.12) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%); mask-image: linear-gradient(180deg, transparent, #000 60%);
}
.display--final { font-size: clamp(3rem, .6rem + 8.4vw, 10rem); line-height: .85; letter-spacing: -.05em; }
.final__row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 28px; margin-top: clamp(28px, 4vw, 56px); }
.final .lead { color: var(--ink); font-weight: 500; max-width: 40ch; }
.final__call { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; padding: 0 12px; height: 64px; }
.final__call:hover { text-decoration: underline; text-underline-offset: 4px; }
.final__browsers { position: relative; height: clamp(200px, 27vw, 440px); margin-top: clamp(48px, 6vw, 96px); }
.fb {
  position: absolute; bottom: -18%; width: clamp(220px, 29vw, 520px); border-radius: 14px 14px 0 0; overflow: hidden;
  background: var(--paper); box-shadow: 0 -24px 60px -20px rgba(80, 20, 0, .45);
  transform: rotate(var(--r)); transform-origin: 50% 100%;
}
.fb--0 { left: 1%; } .fb--1 { left: 25%; bottom: -6%; } .fb--2 { left: 49%; bottom: -10%; } .fb--3 { left: 73%; bottom: -22%; }
.fb__bar { display: flex; gap: 5px; align-items: center; height: 24px; padding: 0 10px; background: var(--paper); }
.fb__bar i { width: 7px; height: 7px; border-radius: 50%; background: #D9D2C5; }
.fb img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.ftr { background: var(--ink); color: var(--on-dark-2); padding: 36px 0 calc(36px + env(safe-area-inset-bottom)); position: relative; z-index: 2; }
.ftr__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.ftr__inner img { height: 28px; width: auto; }
.ftr__contact { display: flex; gap: 24px; flex-wrap: wrap; }
.ftr__contact a { color: var(--on-dark); }
.ftr__contact a:hover { color: var(--orange); }
.ftr__copy { font-size: 14px; }

.mcta {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 45;
  display: none; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 7px 7px 18px; border-radius: 999px;
  background: rgba(18, 17, 16, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--paper);
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.5);
  transform: translateY(160%); transition: transform .55s var(--ease);
}
.mcta.is-on { transform: none; }
.mcta__txt { font-size: 14px; }
.mcta__txt strong { color: var(--orange); }

/* ==========================================================================
   Motion initial states (only when JS + motion are available)
   ========================================================================== */
.motion [data-lines] .ln__i { transform: translateY(110%); }
.motion [data-fade] { opacity: 0; transform: translateY(26px); }
.motion [data-reveal] { opacity: 0; transform: translateY(48px); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1279px) {
  .flabel--custom { left: -6%; } .flabel--mobile { left: -8%; } .flabel--support { left: -4%; }
  .flabel--convert { right: -7%; } .flabel--seo { right: -5%; }
  .hb-wrap { width: min(66vw, 98vh, 1100px); }
}

@media (max-width: 1023px) {
  :root { --hdr-h: 68px; }
  .hdr__nav { display: none; }
  .hdr__toggle { display: grid; }
  .hdr__cta { margin-left: auto; }
  .hdr.is-scrolled .hdr__bar { max-width: 640px; }
  .hdr__bar { gap: 10px; }

  .hero { min-height: 0; padding-bottom: 40px; }
  .hero__top { grid-template-columns: 1fr; align-items: start; gap: 22px; }
  .hero__side { max-width: 560px; }
  .hb-wrap { width: min(100%, 760px); }
  .hero__stage { margin-top: 44px; padding: 0 var(--gut); }
  .flabel { font-size: 12.5px; padding: 6px 12px 6px 6px; }
  .flabel .ico { width: 24px; height: 24px; padding: 5px; }
  .flabel--custom { left: -2%; top: -4%; } .flabel--convert { right: -2%; top: 10%; }
  .flabel--mobile, .flabel--support { display: none; } .flabel--seo { right: 4%; top: auto; bottom: -5%; }

  .approach__grid { grid-template-columns: 1fr; gap: 0; }
  .approach__copy { display: contents; }
  .approach__intro { order: 1; padding-bottom: 28px; }
  .approach__visual { order: 2; top: calc(var(--hdr-h) + 6px); height: 50vh; min-height: 340px; z-index: 3; margin-bottom: 8px; }
  .apsteps { order: 3; position: relative; z-index: 1; }
  .apstep { min-height: 46vh; }
  .apstep:last-child { min-height: 30vh; }
  .cv__card { transform-origin: 0 100%; }
  .cv__sitemap { width: 180px; font-size: 12px; }
  .cv__type { width: 170px; }
  .cv__aa { font-size: 36px; }

  .work__head, .compare__head { grid-template-columns: 1fr; }
  .pcard__inner { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .pcard__meta { gap: 10px; }
  .pcard__idx { margin-bottom: 8px; }
  .pcard__metric { margin-top: 4px; padding-top: 12px; }

  .why__head, .services__head, .process__head { grid-template-columns: 1fr; }
  .why__head > .lead, .services__head > .lead, .process__head > .lead { grid-column: 1; grid-row: auto; margin-top: 24px; }
  .bento {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: none; grid-auto-rows: minmax(260px, auto);
    grid-template-areas:
      "c c c c c c"
      "m m m s s s"
      "m m m k k k"
      "g g g f f f"
      "g g g u u u";
  }
  .bx--custom { min-height: 460px; }

  .svc { grid-template-columns: 1fr; }
  .svc__stage { position: sticky; top: calc(var(--hdr-h) + 6px); order: -1; aspect-ratio: auto; height: 40vh; min-height: 280px; z-index: 3; box-shadow: 0 20px 40px -24px rgba(0,0,0,.35); }
  .svc__list { position: relative; z-index: 1; }

  .offer__build { grid-template-columns: minmax(0, 1fr); }
  .obstage { order: -1; }
  .pkg__panel { grid-template-columns: 1fr; }
  .pkg__main { border-right: 0; border-bottom: 1px solid var(--dark-line); }

  .start__grid, .faq__grid { grid-template-columns: 1fr; }
  .start__copy, .faq__side { position: static; }

  .rv__slide { grid-template-columns: 1fr; grid-template-areas: "media" "body"; }
  .rv__media { aspect-ratio: 16 / 10; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .hdr { padding-top: 8px; }
  .hdr__bar { height: 52px; }
  .hdr.is-scrolled .hdr__bar { height: 52px; padding: 0 5px 0 14px; }
  .hdr__logo img, .hdr.is-scrolled .hdr__logo img { height: 24px; }
  .hdr__cta { display: none; }
  .hdr__toggle { margin-left: auto; }
  .mcta { display: flex; }
  html.has-chat .mcta { right: 86px; }
  html.has-chat .mcta__txt { display: none; }
  html.has-chat .mcta .btn { width: 100%; justify-content: space-between; }

  .display { letter-spacing: -.035em; }
  .hero__price { font-size: 13px; }
  .hero .btn-row .btn { flex: 1 1 auto; }
  .hb { border-radius: 12px; }
  .hb__chrome { height: 30px; padding: 0 10px; gap: 8px; }
  .hb__dots i { width: 7px; height: 7px; }
  .hb__url { font-size: 9.5px; padding: 4px 9px 4px 7px; }
  .hb-stages { position: static; margin-top: 12px; height: 36px; background: var(--paper); border: 1px solid var(--line); width: 100%; justify-content: space-between; }
  .hb-stages button { flex: 1; padding: 0 4px; font-size: 11px; }
  .flabel--custom { top: -5%; left: -1%; }
  .flabel--convert { top: auto; bottom: 22%; right: -1%; }
  .flabel--seo { display: none; }
  .hb__cursor span { display: none; }

  .ticker__track { animation-duration: 32s; }

  .approach__visual { height: 44vh; min-height: 300px; }
  .cv__browser { width: 84%; }
  .cv[data-stage="3"] .cv__browser, .cv[data-stage="4"] .cv__browser { transform: translate(-60%, -50%); width: 72%; }
  .cv__sitemap { left: 4%; bottom: 4%; width: 150px; padding: 10px 12px; font-size: 11px; }
  .cv__sitemap ul { gap: 3px; }
  .cv__goal { margin-top: 8px; font-size: 10.5px; }
  .cv__type { right: 4%; top: auto; bottom: 5%; width: 150px; padding: 10px 12px; }
  .cv__aa { font-size: 28px; }
  .cv__sw i { width: 22px; height: 22px; }
  .cv__phone { right: 4%; width: 28%; border-radius: 18px; padding: 4px; }
  .cv__phone-scr { border-radius: 15px; }
  .cv__tag { left: 12px; top: 12px; font-size: 11px; }
  .cv__toast { top: auto; bottom: 10px; font-size: 11.5px; }

  .pcard { position: relative; top: auto; height: auto; min-height: 0; max-height: none; margin-bottom: 12px; }
  .pcard__inner { padding: 18px; gap: 18px; }
  .pcard__media { aspect-ratio: 4 / 3; }
  .pcard--more .wall { aspect-ratio: 1 / 1; }
  .pcard__name { font-size: clamp(2.3rem, 11vw, 3.2rem); }

  .bento { grid-template-columns: 1fr; grid-template-areas: none; grid-auto-rows: auto; }
  .bento > .bx { grid-area: auto; min-height: 0; }
  .bx--custom .bx__vis { min-height: 250px; }
  .bx--mobile .bx__vis { min-height: 300px; margin-bottom: calc(-20px - 110px); }
  .bx--manage .bx__vis, .bx--support .bx__vis { min-height: 0; }
  .bx--fast .bx__vis { min-height: 110px; }
  .bx--stat { min-height: 260px; }

  .svc__stage { height: 36vh; min-height: 240px; border-radius: var(--r-lg); }
  .svc__btn { grid-template-columns: 40px 1fr 36px; }
  .svc__plus { width: 36px; height: 36px; }
  .svc__d p { padding: 0 0 18px 48px; }
  .sv-chip--aa { font-size: 24px; padding: 8px 12px; }
  .sv-chip--sw i { width: 20px; height: 20px; }
  .mg__from li { padding: 7px 12px; font-size: 12.5px; }
  .mg__from { gap: 6px; }
  .mg__arrow { width: 38px; height: 38px; left: 34%; }
  .mg__checks { padding: 10px 12px; font-size: 12px; gap: 4px; }
  .ec__product { padding: 10px; gap: 5px; }
  .ec__product b { font-size: 14px; }
  .ec__add, .ec__checkout { padding: 8px; font-size: 12px; }
  .ec__cart { padding: 12px; font-size: 12px; gap: 8px; }
  .ec__line img { width: 30px; height: 30px; }
  .ec__search { display: none; }
  .lp__goal { font-size: 12px; padding: 8px 12px; right: 4%; top: 10%; }
  .lp__form { width: 40%; padding: 10px; }
  .lp__form i { height: 20px; }
  .lp__form b { font-size: 11px; padding: 6px; }
  .sp__card { padding: 12px; font-size: 12.5px; width: 60%; gap: 6px; }
  .sp__msg { font-size: 12px; padding: 8px 12px 8px 8px; left: 6%; bottom: 8%; }

  .oblist__item { grid-template-columns: 26px 1fr; }
  .ob__chrome { gap: 8px; height: 36px; }
  .ob__tabs { font-size: 10.5px; }
  .ob__tabs i { padding: 4px 6px; }
  .ob__tabs i:nth-child(n+4) { display: none; }
  .oblist__n { display: none; }
  .pkg__row { flex-direction: column; align-items: stretch; gap: 8px; }
  .pkg__row-l { width: auto; }
  .pkg__chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gut) * -1); padding: 2px var(--gut) 6px; scrollbar-width: none; }
  .pkg__chips::-webkit-scrollbar { display: none; }
  .pkg__chip { flex: none; scroll-snap-align: start; }
  .pkg__list { grid-template-columns: 1fr; }
  .pkg__price { flex-wrap: wrap; }
  .pkg__main .btn { width: 100%; justify-content: space-between; }

  .pstep { grid-template-columns: 1fr; gap: 6px; }
  .pstep__num { font-size: clamp(5rem, 26vw, 8rem); }

  .ba { aspect-ratio: 4 / 5; }
  .old__top, .new__nav { padding: 3.4cqw 4cqw; }
  .old__logo { font-size: 4.4cqw; }
  .old__tel { display: none; }
  .old__nav { font-size: 2.4cqw; white-space: normal; padding: 2cqw 4cqw; }
  .old__body { padding: 4cqw; }
  .old__h { font-size: 6cqw; }
  .old__cols { grid-template-columns: 1fr; }
  .old__img { aspect-ratio: 16 / 7; font-size: 3cqw; }
  .old__txt { font-size: 3.3cqw; max-width: none; }
  .old__small { font-size: 2.6cqw; }
  .old__phone, .new__phone { display: none; }
  .new__logo { font-size: 3.8cqw; gap: 1.6cqw; }
  .new__logo i { width: 3.8cqw; height: 3.8cqw; border-radius: 1cqw; }
  .new__links { display: none; }
  .new__btn { margin-left: auto; font-size: 2.8cqw; padding: 2.2cqw 3.6cqw; }
  .new__hero { grid-template-columns: 1fr; padding: 3cqw 5cqw; gap: 5cqw; }
  .new__eyebrow { font-size: 2.4cqw; }
  .new__h { font-size: 10cqw; margin: 3cqw 0; }
  .new__p { font-size: 3.4cqw; max-width: none; }
  .new__ctas { margin-top: 4cqw; gap: 2cqw; }
  .new__cta, .new__cta2 { font-size: 3cqw; padding: 2.8cqw 4.4cqw; }
  .new__proof { font-size: 2.8cqw; margin-top: 4cqw; }
  .new__img { aspect-ratio: 16 / 8; border-radius: 4cqw; }
  .note { display: none; }
  .new__h { font-size: 8.6cqw; }
  .ba__label { font-size: 10px; bottom: 10px; padding: 6px 9px; }
  .ba__label--l { left: 10px; } .ba__label--r { right: 10px; }
  .ba__handle { width: 48px; height: 48px; }

  .reviews__head { flex-direction: column; align-items: flex-start; }
  .rv__body { gap: 18px; padding: 24px; }
  .rv__mark { font-size: 110px; }
  .rv__slide { min-height: 0; }

  .lf__row { grid-template-columns: 1fr; gap: 0; }
  .fld input { height: 56px; }
  .chip span { height: 44px; padding: 0 15px; font-size: 14.5px; }
  .qa__a p { padding-right: 0; }
  .qa summary i { width: 36px; height: 36px; }

  .final__row { flex-direction: column; align-items: stretch; }
  .final .btn-row { flex-direction: column; align-items: stretch; }
  .final .btn--xl { justify-content: space-between; }
  .final__call { justify-content: center; }
  .final__browsers { height: 180px; }
  .fb { width: 58vw; }
  .fb--0 { left: -8%; } .fb--1 { left: 20%; } .fb--2 { left: 48%; } .fb--3 { display: none; }
  .ftr__inner { flex-direction: column; align-items: flex-start; }
  body { padding-bottom: 0; }
}

@media (max-width: 380px) {
  .hb-stages button { font-size: 10px; }
  .btn--lg { --h: 52px; font-size: 13px; padding-left: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .ticker__track, .wall__col { animation: none !important; }
}

/* ==========================================================================
   Lead popup (dialog)
   ========================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.linkbtn { font: inherit; color: var(--ink); font-weight: 650; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; padding: 0; }

html.pop-open { overflow: hidden; }
.pop {
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden;
}
.pop::backdrop { background: transparent; }
.pop[open] { display: grid; place-items: center; z-index: 999990; }
/* Desktop: with the Zendesk chat open, the popup moves left so they sit side by side */
@media (min-width: 1025px) { html.chat-open .pop[open] { padding-right: 396px; } }
/* Tablets and phones: room under the form for the chat launcher */
@media (max-width: 1024px) { html.has-zchat .pop__main { padding-bottom: 88px; } }
.pop::before {
  content: ''; position: absolute; inset: 0; background: rgba(15, 14, 13, .58);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .4s var(--ease);
}
.pop.is-in::before { opacity: 1; }
.pop__panel {
  position: relative; z-index: 1;
  width: min(1060px, calc(100% - 32px)); max-height: calc(100dvh - 32px);
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  border-radius: var(--r-xl); overflow: hidden; background: var(--paper);
  box-shadow: 0 60px 140px -40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  grid-template-rows: minmax(0, 1fr);
  opacity: 0; transform: translateY(28px) scale(.97);
  transition: opacity .45s var(--ease), transform .6s var(--ease);
}
.pop__panel:focus { outline: none; }
.pop.is-in .pop__panel { opacity: 1; transform: none; }
.pop__close {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); color: var(--ink); transition: background-color .25s, transform .4s var(--ease);
}
.pop__close:hover { background: var(--ink); color: var(--paper); transform: rotate(90deg); }
.pop__close .ico { width: 20px; height: 20px; }

.pop__side {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: clamp(26px, 3.4vw, 48px); background: var(--dark); color: var(--on-dark);
  background-image: radial-gradient(70% 50% at 100% 0%, rgba(31, 95, 214, .28), transparent 70%);
}
.pop__eyebrow { margin-bottom: 18px; }
.pop__title { font-size: clamp(2rem, 1.2rem + 2.4vw, 3.4rem); font-weight: 750; line-height: .92; letter-spacing: -.045em; text-transform: uppercase; }
.pop__desc { margin-top: 16px; color: var(--on-dark-2); max-width: 36ch; }
.pop__deal { margin-top: 22px; font-size: 14.5px; color: var(--on-dark-2); line-height: 1.6; }
.pop__deal strong { color: var(--on-dark); }
.pop__deal s { color: var(--on-dark-2); opacity: .7; }
.pop__pkg {
  margin-top: 22px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid var(--dark-line);
}
.pop__pkg .mono { grid-column: 1 / -1; color: var(--on-dark-2); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.pop__pkg strong { font-size: 15px; font-weight: 650; line-height: 1.3; }
.pop__pkg-price { grid-column: 1; font-size: 14px; color: var(--on-dark-2); }
.pop__pkg-price b { color: var(--orange); font-size: 22px; letter-spacing: -.02em; margin-right: 4px; }
.pop__pkg-x { grid-column: 2; grid-row: 2 / span 2; font-size: 13px; font-weight: 600; color: var(--on-dark); text-decoration: underline; text-underline-offset: 3px; }
.pop__steps { margin-top: 24px; border-top: 1px solid var(--dark-line); }
.pop__steps li { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--dark-line); font-size: 15px; font-weight: 550; }
.pop__steps .mono { color: var(--orange); }
.pop__chat { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--on-dark); font-size: 14.5px; width: fit-content; }
.pop__chat .ico { color: var(--orange); }
.pop__chat u { text-decoration-color: var(--orange); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.pop__visual {
  margin-top: auto; padding-top: 28px; margin-right: calc(clamp(26px, 3.4vw, 48px) * -1); margin-bottom: calc(clamp(26px, 3.4vw, 48px) * -1);
}
.pop__visual > * { display: block; }
.pop__bar { display: flex; gap: 5px; align-items: center; height: 22px; padding: 0 10px; background: var(--paper); border-radius: 12px 0 0 0; }
.pop__bar i { width: 7px; height: 7px; border-radius: 50%; background: #D9D2C5; }
.pop__visual img { width: 100%; aspect-ratio: 16 / 7.4; object-fit: cover; object-position: top; }

.pop__main { position: relative; overflow-y: auto; overscroll-behavior: contain; padding: clamp(26px, 3.4vw, 48px); padding-top: clamp(56px, 4.4vw, 64px); }
.pf .fld { margin-bottom: 16px; }
.pf .fld input { height: 56px; }
.pf__more { margin: 2px 0 18px; }
.pf__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 650; }
.pf__more summary::-webkit-details-marker { display: none; }
.pf__more summary .ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--bg-2); transition: transform .3s var(--ease); }
.pf__more[open] summary .ico { transform: rotate(45deg); }
.pf__more .fld { margin: 12px 0 0; }
.pf [data-pf-submit][aria-busy="true"] { opacity: .75; pointer-events: none; }
.pop__done { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; min-height: 100%; padding: 24px 8px; }
.pop__done[hidden] { display: none; }
.pop__done:focus { outline: none; }
.pop__done h3 { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); font-weight: 750; letter-spacing: -.035em; text-transform: uppercase; line-height: 1; }
.pop__done p { color: var(--muted); max-width: 38ch; }

@media (max-width: 1023px) {
  .pop__panel { grid-template-columns: 1fr; grid-template-rows: auto auto; width: min(640px, calc(100% - 32px)); overflow-y: auto; overscroll-behavior: contain; }
  .pop__main { overflow: visible; padding-top: clamp(26px, 3.4vw, 48px); }
  .pop__steps, .pop__visual { display: none; }
  .pop__close { background: rgba(255, 255, 255, .12); color: var(--on-dark); }
}
@media (max-width: 767px) {
  .pop[open] { place-items: end center; }
  .pop__panel {
    width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 26px 26px 0 0;
    -webkit-overflow-scrolling: touch; touch-action: pan-y;
    transform: translateY(100%); transition: opacity .3s var(--ease), transform .55s var(--ease);
  }
  .pop.is-in .pop__panel { transform: none; }
  .pop__side { padding: 20px 20px 18px; }
  .pop__eyebrow { margin-bottom: 12px; font-size: 11.5px; }
  .pop__title { font-size: 1.75rem; padding-right: 48px; }
  .pop__desc { font-size: 14.5px; margin-top: 8px; }
  .pop__deal { display: none; }
  .pop__chat { margin-top: 12px; font-size: 13.5px; }
  .pop__pkg { margin-top: 14px; }
  .pop__main { padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
  .pop__close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .pf .chip span { height: 42px; padding: 0 14px; font-size: 14px; }
}
/* Main-site form plumbing (assets/js/form_submission.js) */
.lf label.error { display: block; margin-top: 6px; font-size: 13px; color: #C62828; font-weight: 500; }
.lf input.error, .lf textarea.error { border-color: #C62828; }
.lf .consent { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 16px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.lf .consent input { flex: none; width: 16px; height: 16px; margin-top: 2px; accent-color: var(--orange); }
.lf .consent label { flex: 1; }
.lf .consent label.error { flex-basis: 100%; }
.lf .consent { flex-wrap: wrap; }
.lf .consent a { color: inherit; text-decoration: underline; }
.form-status { margin-top: 12px; font-size: 14px; }
.form-status .loader { display: none; }
.form-status .loader img { width: 28px; height: 28px; }
.form-status .success { display: none; color: #1B5E20; }
.form-status .error { color: #C62828; }
.pkg__more-link { margin-top: 28px; text-align: center; color: var(--on-dark-2); }
.pkg__more-link a { color: var(--orange-2); text-decoration: underline; }

/* WebNCrafts logo (assets/img/logo.svg): the same artwork as the main site's wordmark. */
.hdr__logo img { height: 21px; }
.hdr.is-scrolled .hdr__logo img { height: 19px; }
.ftr__logo { height: 21px; width: auto; }
@media (max-width: 560px) { .hdr__logo img, .hdr.is-scrolled .hdr__logo img { height: 17px; } }
.pcard__all { display: inline-block; margin-top: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }