/* ==========================================================================
   Flux88 Web Solutions — site styles
   One stylesheet for every page. Sections are in page order.

   1. Tokens (colors, type, spacing, motion)   8. Work
   2. Base                                     9. Testimonials
   3. Shared pieces (buttons, eyebrow, …)     10. Process
   4. Header + mobile menu                    11. Why choose us
   5. Hero                                    12. FAQ
   6. Services                                13. Contact band + footer
   7. Pricing                                 14. Get Started form
                                              15. Legal pages, motion, print
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Color: near-black, warm white, brand orange, and the logo's speed streak */
  --bg: #06070b;
  --bg-raised: #0c0e15;
  --panel: #11141d;
  --line: #232836;
  --line-strong: #3a4152;
  --text: #f4f2ee;
  --muted: #a6abb8;
  --dim: #7f8594;
  --orange: #ff6a1a;
  --orange-hi: #ff8a47;
  --blue: #4c93ff;
  --error: #ff7b72;
  --on-orange: #0a0a0c;
  --streak: linear-gradient(90deg, #ff6a1a 0%, #e8254f 42%, #8a3cf0 72%, #2f7dff 100%);

  /* Type */
  --font-display: "Saira", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --max: 1240px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(80px, 11vw, 156px);
  --header-h: 72px;

  /* Motion: one rhythm for the whole site */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.6, 0, .85, .2);
  --fast: .16s;
  --base: .32s;
  --slow: .8s;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2.125rem, 5.2vw, 4rem);
  font-stretch: 92%;
  letter-spacing: -.01em;
  text-transform: uppercase;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 650;
  line-height: 1.15;
}

p { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
  border-radius: 2px;
}

::selection { background: var(--orange); color: var(--on-orange); }

.container {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--text);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.icon {
  width: 1.15em; height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.section { padding-block: var(--section); }
.section--raised { background: var(--bg-raised); }

/* ---------- 3. Shared pieces ---------- */

/* Eyebrow label with the logo's speed streak in front of it */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  color: var(--orange);
  font: 600 .8125rem/1.2 var(--font-display);
  font-stretch: 108%;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 34px; height: 3px;
  background: var(--streak);
  transform: skewX(-24deg);
}

/* Section heading: title on the left, short intro on the right */
.section-head {
  display: grid;
  gap: 20px 48px;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head__lede {
  max-width: 44ch;
  color: var(--muted);
  font-size: 1.125rem;
}
@media (min-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    align-items: end;
  }
  .section-head__lede { justify-self: end; padding-bottom: .4em; }
}

/* Buttons: a slanted block, like the italic letters in the logo */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 54px;
  padding: 0 1.75em;
  border: 0;
  background: none;
  color: var(--on-orange);
  font: 700 .9375rem/1 var(--font-display);
  font-stretch: 106%;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: transform var(--fast) var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 3px;
  background: var(--orange);
  transform: skewX(-14deg);
  transition: background-color var(--fast), box-shadow var(--base) var(--ease-out);
}
.btn .icon { transition: transform var(--base) var(--ease-out); }
.btn:hover::before { background: var(--orange-hi); box-shadow: 0 10px 34px -10px rgb(255 106 26 / .7); }
.btn:hover .icon { transform: translateX(5px); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .55; cursor: progress; }

.btn--ghost { color: var(--text); }
.btn--ghost::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn--ghost:hover::before { background: rgb(255 106 26 / .1); box-shadow: inset 0 0 0 1.5px var(--orange); }

.btn--sm { min-height: 44px; padding: 0 1.3em; font-size: .8125rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* Text link with an arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  min-height: 44px;
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 6px;
  transition: text-decoration-color var(--fast), color var(--fast);
}
.link-arrow .icon { color: var(--orange); transition: transform var(--base) var(--ease-out); }
.link-arrow:hover { text-decoration-color: var(--orange); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* Price with seven-segment digits (the "88" from the logo). js/main.js draws the digits. */
.price {
  display: inline-flex;
  align-items: baseline;
  gap: .06em;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.price__cur { color: var(--orange); font-size: .62em; align-self: flex-start; font-style: italic; }
.price__per { color: var(--muted); font-size: .3em; font-weight: 600; margin-left: .35em; letter-spacing: .04em; }

.seg { color: var(--orange); font-style: italic; font-variant-numeric: tabular-nums; }
.seg__digits { display: inline-flex; gap: .11em; transform: skewX(-9deg); transform-origin: bottom; }
.seg__digits svg { width: .44em; height: .78em; overflow: visible; }
.seg__digits polygon { fill: currentColor; opacity: .07; }
.seg__digits polygon.on { opacity: 1; }

/* ---------- 4. Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  border-bottom: 1px solid transparent;
  transition: background-color var(--base), border-color var(--base);
}
.site-header.is-scrolled,
.menu-open .site-header {
  background: rgb(6 7 11 / .94);
  border-bottom-color: var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}
.brand { display: flex; align-items: center; min-height: 44px; margin-right: auto; }
.brand img { width: auto; height: 30px; }

.nav ul { display: flex; gap: clamp(14px, 2.2vw, 36px); }
.nav a, .lang { white-space: nowrap; }
.nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--muted);
  font: 600 .8125rem/1 var(--font-display);
  font-stretch: 106%;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--fast);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 8px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--base) var(--ease-out);
}
.nav a:hover, .nav a[aria-current] { color: var(--text); }
.nav a[aria-current]::after { transform: scaleX(1); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 10px;
  color: var(--muted);
  font: 600 .8125rem/1 var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color var(--fast);
}
.lang:hover { color: var(--text); }

.menu-btn {
  display: none;
  position: relative;
  width: 48px; height: 48px;
  margin-right: -10px;
  border: 0;
  background: none;
}
.menu-btn span {
  position: absolute;
  left: 12px; right: 12px;
  height: 2px;
  background: var(--text);
  transition: transform var(--base) var(--ease-out), opacity var(--fast);
}
.menu-btn span:nth-child(1) { top: 17px; }
.menu-btn span:nth-child(2) { top: 23px; }
.menu-btn span:nth-child(3) { top: 29px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu: a full screen of large links, not a shrunk desktop bar */
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--bg);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--base), visibility 0s var(--base);
}
.mobile-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.mobile-menu__links a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font: 700 2rem/1.1 var(--font-display);
  font-stretch: 88%;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--base) var(--ease-out), transform var(--base) var(--ease-out);
}
.mobile-menu__links a span { color: var(--orange); font-size: .8125rem; letter-spacing: .14em; }
.mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; transition-delay: calc(40ms * var(--i, 0) + 60ms); }
.mobile-menu__foot { display: grid; gap: 14px; margin-top: auto; }
.mobile-menu__foot .lang { justify-self: start; padding-left: 0; }

@media (min-width: 900px) and (max-width: 1099px) {
  /* narrow laptops and tablets: tighter menu so it stays on one line */
  .nav a { font-size: .75rem; letter-spacing: .1em; }
  .site-header__inner { gap: 16px; }
  .header-actions .lang span { display: none; }
  .header-actions .lang::after { content: attr(data-short); }
}
@media (max-width: 899px) {
  .nav, .header-actions .btn, .header-actions .lang span { display: none; }
  .menu-btn { display: block; }
  .header-actions .lang { padding: 0 8px; }
  .header-actions .lang::after { content: attr(data-short); }
}
@media (min-width: 900px) {
  .mobile-menu { display: none; }
}

/* Phone only: call / get started bar that appears once the hero is off screen */
.mobile-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 40;
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--line);
  border-top: 1px solid var(--line);
  transform: translateY(105%);
  transition: transform var(--base) var(--ease-out);
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  background: var(--bg);
  font: 700 .875rem/1 var(--font-display);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
}
.mobile-bar a:last-child { background: var(--orange); color: var(--on-orange); }
@media (max-width: 699px) {
  .mobile-bar { display: grid; }
  .site-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* ---------- 5. Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(620px, 100svh);
  padding-top: calc(var(--header-h) + clamp(28px, 7svh, 88px));
  overflow: hidden;
  background: var(--bg);
}
/* The retro grid is drawn on this canvas by js/retro-grid.js */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
.hero__inner { padding-bottom: clamp(150px, 27svh, 300px); }

.hero__title {
  font-size: clamp(2.5rem, min(8vw, 16svh), 7.5rem);
  font-style: italic;
  font-weight: 800;
  font-stretch: 78%;
  line-height: .9;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.hero__title .eyebrow { font-style: normal; margin-bottom: clamp(18px, 3svh, 30px); }
.hero__line {
  display: block;
  /* room for the italic overhang so the reveal mask doesn't clip letters */
  margin: 0 -.12em -.06em;
  padding: .03em .12em .06em;
  overflow: hidden;
}
.hero__line > span { display: block; white-space: nowrap; }
.hero__line--accent { color: var(--orange); }

/* Neon RGB text effect (home page headline only): the red and blue channels sit slightly
   to either side of the letters, like a misaligned CRT. Done with text-shadow so the
   headline stays real text. To turn it off, delete this rule. To make it stronger or
   weaker, change --rgb-split. */
.hero:not(.hero--page) .hero__line > span {
  --rgb-split: .035em;
  text-shadow:
    calc(var(--rgb-split) * -1) 0 0 rgb(255 0 0 / .9),
    var(--rgb-split) 0 0 rgb(0 68 255 / .9);
}

.hero__row {
  display: grid;
  gap: 32px;
  margin-top: clamp(24px, 4svh, 44px);
}
.hero__pitch .lede {
  max-width: 48ch;
  margin-bottom: 28px;
  color: #d3d6de;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
}

.hero__price { align-self: end; }
.hero__price-label,
.hero__price-note {
  font: 600 .8125rem/1.3 var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero__price-label { color: var(--muted); margin-bottom: 10px; }
.hero__price-note { color: var(--orange); margin-top: 12px; }
.hero__price .price { font-size: clamp(4rem, 8vw, 6.5rem); }

.hero__specs {
  position: relative;
  margin-top: auto;
  border-top: 1px solid rgb(255 255 255 / .14);
  background: linear-gradient(rgb(6 7 11 / .72), rgb(6 7 11 / .92));
}
.hero__specs ul { display: grid; }
.hero__specs li { padding: 18px 0; }
.hero__specs li + li { border-top: 1px solid rgb(255 255 255 / .1); }
.hero__specs strong {
  display: block;
  font: 700 .875rem/1.3 var(--font-display);
  font-stretch: 106%;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero__specs span { color: var(--muted); font-size: .9375rem; }

@media (min-width: 700px) {
  .hero__title { font-stretch: 100%; }
  .hero__row { grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: end; }
  .hero__price { text-align: right; padding-bottom: 6px; }
  .hero__specs ul { grid-template-columns: repeat(3, 1fr); }
  .hero__specs li { padding: 22px 28px 24px 0; }
  .hero__specs li + li { border-top: 0; border-left: 1px solid rgb(255 255 255 / .1); padding-left: 28px; }
}
@media (max-width: 699px) {
  /* Phone hero: headline, price, pitch, button, then the grid. Price moves up so it is seen first. */
  .hero { padding-top: calc(var(--header-h) + 24px); }
  .hero__title { font-size: clamp(2.25rem, 13.4vw, 4.75rem); }
  .hero__title .eyebrow { font-size: .75rem; letter-spacing: .16em; gap: 10px; }
  .hero__title .eyebrow::before { width: 24px; }
  .hero__row { gap: 22px; margin-top: 20px; }
  .hero__price { order: -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
  .hero__price-label { width: 100%; margin: 0; }
  .hero__price-note { margin: 0; }
  .hero__price .price { font-size: 3.75rem; }
  .hero__pitch .lede { margin-bottom: 22px; }
  .hero .btn-row { gap: 6px 30px; }
  .hero .btn-row .btn { flex: 1 1 100%; }
  .hero__inner { padding-bottom: 190px; }
  .hero__specs { background: var(--bg); }
  /* one compact line per spec */
  .hero__specs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 13px 0; }
}

/* Inner pages (industry pages): same hero, smaller headline that is allowed to wrap */
.hero--page { min-height: max(600px, 88svh); }
.hero--page .hero__title { font-size: clamp(2.5rem, min(6.4vw, 13svh), 6rem); }
.hero--page .hero__line > span { white-space: normal; }
/* Spanish headlines run longer, so they are set a little smaller to keep the hero on one screen */
@media (min-width: 700px) {
  html[lang="es"] .hero--page .hero__title { font-size: clamp(2.25rem, min(5vw, 11svh), 4.75rem); }
}
@media (max-width: 699px) {
  .hero--page .hero__title { font-size: clamp(2rem, 11vw, 3.75rem); }
}

/* Industries line under the hero */
.industries {
  padding-block: 30px;
  border-block: 1px solid var(--line);
  background: var(--bg-raised);
}
.industries .container { display: grid; gap: 12px; }
.industries__label {
  color: var(--dim);
  font: 600 .75rem/1.4 var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.industries ul { display: flex; flex-wrap: wrap; gap: 10px 28px; }
.industries li {
  font: 600 1rem/1.3 var(--font-display);
  font-stretch: 92%;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.industries a { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.industries a:hover { color: var(--orange); }
.industries li { display: flex; align-items: center; }
.industries li::before {
  content: "";
  flex: none;
  width: 14px; height: 2px;
  margin-right: 12px;
  background: var(--orange);
  transform: skewX(-24deg);
}

.industries__all::before { content: none !important; }
.industries__all a { display: inline-flex; align-items: center; gap: .5em; color: var(--orange); text-decoration: none; }
.industries__all a:hover { color: var(--orange-hi); }
.industries__all .icon { transition: transform var(--base) var(--ease-out); }
/* wider screens: "See all industries" sits on the label's row, at the right, so the names get the full line */
@media (min-width: 900px) {
  .industries .container { position: relative; }
  .industries__all { position: absolute; top: -5px; right: var(--gutter); }
}
.industries__all a:hover .icon { transform: translateX(4px); }

/* Home page "Industries" block: one link row per industry page */
.ind-list { display: grid; border-top: 1px solid var(--line); }
.ind-list a {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  align-items: center;
  min-height: 84px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}
.ind-list strong {
  font: 650 clamp(1.1875rem, 2vw, 1.5rem)/1.15 var(--font-display);
  font-stretch: 94%;
  text-transform: uppercase;
  transition: color var(--fast);
}
.ind-list span { grid-column: 1; color: var(--muted); font-size: 1rem; }
.ind-list .icon { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; color: var(--orange); transition: transform var(--base) var(--ease-out); }
.ind-list a:hover strong { color: var(--orange); }
.ind-list a:hover .icon { transform: translateX(6px); }
.ind-more { margin-top: 32px; color: var(--muted); }
.ind-more a { color: var(--text); text-decoration-color: var(--orange); text-underline-offset: 4px; }
@media (min-width: 800px) {
  .ind-list { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); border-top: 0; }
  .ind-list li:nth-child(-n+2) a { border-top: 1px solid var(--line); }
}

/* ---------- 6. Services: a numbered ledger, not a card grid ---------- */
.ledger { border-bottom: 1px solid var(--line); }
.ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 6px 0;
  padding: 26px 0 28px;
  border-top: 1px solid var(--line);
}
.ledger__row::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 2px;
  background: var(--streak);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--slow) var(--ease-out);
}
.ledger__row:hover::before { transform: scaleX(1); }
.ledger__num {
  color: var(--dim);
  font: 600 .875rem/1.9 var(--font-display);
  letter-spacing: .12em;
  transition: color var(--fast);
}
.ledger__row:hover .ledger__num { color: var(--orange); }
.ledger__row h3 { font-size: clamp(1.375rem, 2.6vw, 2rem); font-stretch: 94%; text-transform: uppercase; }
.ledger__row p { grid-column: 2; max-width: 52ch; color: var(--muted); }
@media (min-width: 900px) {
  .ledger__row { grid-template-columns: 6rem minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; padding-block: 34px 36px; }
  .ledger__row p { grid-column: 3; }
}

/* ---------- 7. Pricing ---------- */
.plan {
  position: relative;
  display: grid;
  border: 1px solid var(--line);
  background: var(--panel);
}
.plan::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 3px;
  background: var(--streak);
}
.plan__main, .plan__includes { padding: clamp(28px, 4.5vw, 60px); }
.plan__includes { border-top: 1px solid var(--line); }
.plan__label {
  color: var(--muted);
  font: 600 .8125rem/1.3 var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.plan__title { margin-top: 6px; font-size: clamp(1.5rem, 2.6vw, 2rem); text-transform: uppercase; }
.plan__price { margin: clamp(24px, 4vw, 44px) 0 14px; }
.plan__price .price { font-size: clamp(6rem, 15vw, 11rem); }
.plan__price .price__per { font-size: .22em; }
.plan__name {
  color: var(--blue);
  font: 600 .875rem/1.3 var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.plan__flag {
  margin-top: 18px;
  font: 700 1.5rem/1.1 var(--font-display);
  font-stretch: 94%;
  text-transform: uppercase;
}
.plan__terms { margin: 8px 0 30px; color: var(--muted); }
.plan__includes-title {
  margin-bottom: 20px;
  font: 700 1rem/1.2 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.checks { display: grid; gap: 13px 32px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.4; }
.checks .icon { margin-top: .15em; color: var(--orange); stroke-width: 2.5; }
.plan__note a { color: var(--text); text-decoration-color: var(--orange); text-underline-offset: 4px; }
.plan__note {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .9375rem;
}
@media (min-width: 560px) { .checks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) {
  .plan { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .plan__includes { border-top: 0; border-left: 1px solid var(--line); }
}

.addons { margin-top: clamp(64px, 9vw, 120px); }
.addons__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; margin-bottom: 28px; }
.addons__head h3 { font-size: clamp(1.625rem, 3.2vw, 2.5rem); font-stretch: 92%; text-transform: uppercase; }
.addons__head p { color: var(--muted); }
.addons__list { border-bottom: 1px solid var(--line); }
.addons__list li {
  display: grid;
  gap: 6px 24px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.addons__list h4 { font-size: 1.1875rem; font-weight: 650; line-height: 1.2; }
.addons__list p { max-width: 62ch; color: var(--muted); font-size: 1rem; }
.addons__price {
  color: var(--orange);
  font: 700 1.1875rem/1.2 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.addons__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 36px; }
.addons__foot p { flex: 1 1 320px; color: var(--muted); }
@media (min-width: 900px) {
  .addons__list li { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 15rem; align-items: baseline; }
  .addons__list p { grid-column: 2; grid-row: 1; }
  .addons__price { grid-column: 3; text-align: right; }
}

/* ---------- 8. Work ---------- */
.work-grid { display: grid; gap: clamp(40px, 5vw, 64px) clamp(24px, 4vw, 56px); }
.work-card { display: block; text-decoration: none; }
.browser {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  transition: border-color var(--base), transform var(--slow) var(--ease-out);
}
.browser__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}
.browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.browser__bar span { margin-left: 12px; color: var(--dim); font-size: .8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser__view { aspect-ratio: 763 / 600; overflow: hidden; }
.browser__view img { width: 100%; transition: transform 2.4s var(--ease-out); }
.work-card:hover .browser { border-color: var(--line-strong); transform: translateY(-6px); }
/* hovering scrolls the screenshot down the page */
.work-card:hover .browser__view img { transform: translateY(-34%); }
.work-card__meta { display: grid; gap: 8px; padding-top: 22px; }
.work-card__meta h3 { font-size: clamp(1.25rem, 2.2vw, 1.625rem); }
.work-card__meta p { color: var(--muted); }
.work-card:hover .link-arrow { text-decoration-color: var(--orange); }
.work-card:hover .link-arrow .icon { transform: translate(3px, -3px); }

.work-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  padding: 24px clamp(20px, 3vw, 32px);
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}
.work-next .eyebrow { margin: 0; }
.work-next p { font: 650 1.25rem/1.2 var(--font-display); text-transform: uppercase; }
@media (min-width: 800px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-card:nth-child(2) { margin-top: clamp(40px, 7vw, 96px); }
  .work-next { grid-column: 1 / -1; }
}

/* A real client project shown on an industry page */
.proof { display: grid; gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.proof__body { display: grid; gap: 22px; align-content: start; }
.proof__body .quote { padding-top: 46px; }
.proof__body .quote blockquote p { font-size: clamp(1.1875rem, 1.9vw, 1.4375rem); }
.proof__body .plan__includes-title { margin: 8px 0 0; }
.checks--single { grid-template-columns: 1fr !important; }
@media (min-width: 900px) { .proof { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* ---------- 9. Testimonials ---------- */
.quotes { display: grid; gap: clamp(40px, 6vw, 80px); }
.quote { position: relative; padding-top: 54px; }
.quote::before {
  content: "\201C";
  position: absolute;
  top: -22px; left: -4px;
  color: var(--orange);
  font: italic 800 6.5rem/1 var(--font-display);
}
.quote blockquote p { font-size: clamp(1.3125rem, 2.3vw, 1.75rem); line-height: 1.4; text-wrap: pretty; }
.quote figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 26px; color: var(--muted); }
.quote figcaption strong {
  color: var(--text);
  font: 600 .8125rem/1.9 var(--font-display);
  letter-spacing: .18em;
  text-transform: uppercase;
}
@media (min-width: 900px) { .quotes { grid-template-columns: 1fr 1fr; } }

/* ---------- 10. Process ---------- */
.steps { position: relative; display: grid; gap: 44px; --progress: 0; }
/* the track, and the streak that fills it as you scroll */
.steps::before, .steps::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 2px;
  background: var(--line);
}
.steps::after { background: var(--streak); transform: scaleY(var(--progress)); transform-origin: top; }
.steps li { padding-left: 34px; }
.steps .seg { display: block; margin-bottom: 20px; font-size: clamp(3.5rem, 7vw, 5.5rem); line-height: 1; color: var(--line-strong); transition: color var(--slow); }
.steps li.is-reached .seg { color: var(--orange); }
.steps h3 { margin-bottom: 10px; font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-stretch: 94%; text-transform: uppercase; }
.steps p { max-width: 38ch; color: var(--muted); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(32px, 5vw, 72px); padding-top: 48px; }
  .steps::before, .steps::after { bottom: auto; right: 0; width: auto; height: 2px; }
  .steps::after { background: var(--streak); transform: scaleX(var(--progress)); transform-origin: left; }
  .steps li { padding-left: 0; }
}

/* Who builds your website */
.founder { display: grid; gap: 40px clamp(40px, 6vw, 96px); align-items: center; }
.founder__photo { max-width: 520px; margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--panel); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__lede { max-width: 58ch; margin: 22px 0 28px; color: var(--muted); font-size: 1.125rem; }
@media (min-width: 900px) { .founder { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---------- 11. Why choose us ---------- */
.why { display: grid; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.why li { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3.4vw, 40px); background: var(--bg-raised); }
.why h3 { font-size: 1.25rem; text-transform: uppercase; font-stretch: 96%; }
.why p { color: var(--muted); }
.why .why__stat {
  margin-bottom: auto;
  padding-bottom: clamp(24px, 5vw, 64px);
  color: var(--orange);
  font: italic 800 clamp(4rem, 9vw, 7rem)/.9 var(--font-display);
  font-stretch: 90%;
  letter-spacing: -.02em;
}
.why__stat small { font-size: .28em; font-style: normal; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-left: .3em; }
@media (min-width: 760px) {
  .why { grid-template-columns: repeat(6, 1fr); }
  .why li { grid-column: span 2; }
  .why li:nth-child(-n+2) { grid-column: span 3; }
}

/* three equal boxes (used on the compare page) */
@media (min-width: 760px) {
  .why--three li, .why--three li:nth-child(-n+2) { grid-column: span 2; }
}

/* Comparison tables (cost and compare pages). On phones each row turns into a card. */
.cmp-wrap { border: 1px solid var(--line); background: var(--panel); }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 18px 20px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th {
  color: var(--muted);
  font: 600 .8125rem/1.3 var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cmp thead small { display: block; margin-top: 4px; font: 400 .8125rem/1.3 var(--font-body); letter-spacing: 0; text-transform: none; }
.cmp tbody th { width: 24%; font: 650 1.0625rem/1.3 var(--font-display); }
.cmp td { color: var(--muted); }
.cmp td strong, .cmp tbody th strong { color: var(--orange); font-weight: 700; }
.cmp .is-us { background: rgb(255 106 26 / .08); color: var(--text); }
.cmp thead .is-us { color: var(--orange); }
.cmp-note { max-width: 86ch; margin-top: 18px; color: var(--dim); font-size: .875rem; }
@media (max-width: 759px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tbody tr { padding: 18px 16px; border-bottom: 1px solid var(--line); }
  .cmp tbody tr:last-child { border-bottom: 0; }
  .cmp tbody th { width: auto; padding: 0 0 10px; border: 0; font-size: 1.1875rem; }
  .cmp td { padding: 8px 0; border: 0; }
  .cmp td.is-us { margin: 6px -16px -18px; padding: 12px 16px 16px; }
  .cmp td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--dim);
    font: 600 .75rem/1.3 var(--font-display);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .cmp td.is-us::before { color: var(--orange); }
}

/* ---------- 12. FAQ ---------- */
.faq { display: grid; gap: 40px clamp(40px, 6vw, 96px); }
.faq__aside h2 { margin-bottom: 20px; }
.faq__aside > p { max-width: 40ch; color: var(--muted); font-size: 1.125rem; }
.faq__help { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
.faq__help strong { display: block; margin-bottom: 6px; font: 650 1.125rem/1.3 var(--font-display); }
.faq__help p { color: var(--muted); }
.faq__help a { color: var(--text); text-underline-offset: 4px; text-decoration-color: var(--orange); }

.faq__list { border-bottom: 1px solid var(--line); }
.faq__list details { border-top: 1px solid var(--line); }
.faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  font: 650 clamp(1.0625rem, 1.6vw, 1.25rem)/1.3 var(--font-display);
  cursor: pointer;
  list-style: none;
  transition: color var(--fast);
}
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary:hover { color: var(--orange); }
.faq__list summary .icon { width: 22px; height: 22px; color: var(--orange); transition: transform var(--base) var(--ease-out); }
.faq__list details[open] summary .icon { transform: rotate(45deg); }
.faq__list details p { max-width: 66ch; padding: 0 44px 26px 0; color: var(--muted); }
.faq__list details p a { color: var(--text); text-decoration-color: var(--orange); text-underline-offset: 4px; }
/* Smooth open/close where the browser supports it; others simply snap */
@supports (interpolate-size: allow-keywords) {
  .faq__list details { interpolate-size: allow-keywords; }
  .faq__list details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--base) var(--ease-out), content-visibility var(--base) allow-discrete;
  }
  .faq__list details[open]::details-content { block-size: auto; }
}
@media (min-width: 1000px) {
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .faq__aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
}

/* ---------- 13. Contact band + footer ---------- */
.contact {
  position: relative;
  isolation: isolate;
  padding-block: clamp(96px, 13vw, 180px) clamp(140px, 20vw, 260px);
  border-top: 1px solid var(--line);
  overflow: hidden;
  text-align: center;
}
/* a still version of the hero grid, drawn in CSS so it costs nothing */
.contact::before {
  content: "";
  position: absolute;
  inset: auto -50% 0 -50%;
  z-index: -1;
  height: 46%;
  background:
    repeating-linear-gradient(90deg, rgb(25 191 255 / .5) 0 1.5px, transparent 1.5px 90px),
    repeating-linear-gradient(0deg, rgb(25 191 255 / .5) 0 1.5px, transparent 1.5px 90px);
  transform: perspective(420px) rotateX(64deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(transparent, #000 55%);
  mask-image: linear-gradient(transparent, #000 55%);
}
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 50% at 50% 56%, rgb(25 191 255 / .16), transparent 70%);
}
.contact h2 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.5rem, 7vw, 5.5rem); font-style: italic; font-weight: 800; }
.contact__lede { margin: 22px 0 36px; color: #d3d6de; font-size: clamp(1.125rem, 1.8vw, 1.375rem); }
.contact__direct { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 36px; margin-top: 34px; }
.contact__direct a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}
.contact__direct a:hover { color: var(--orange); }
.contact__direct .icon { color: var(--orange); }

.site-footer { border-top: 1px solid var(--line); background: var(--bg); }
.footer-grid { display: grid; gap: 44px; padding-block: clamp(56px, 7vw, 88px); }
.footer-brand img { width: auto; height: 44px; margin-bottom: 22px; }
.footer-brand p { max-width: 42ch; color: var(--muted); }
.footer-col h2 {
  margin-bottom: 18px;
  color: var(--dim);
  font-size: .8125rem;
  font-weight: 600;
  font-stretch: 106%;
  letter-spacing: .2em;
}
.footer-col li { padding: 5px 0; color: var(--muted); }
.footer-col a { display: inline-flex; gap: 12px; align-items: flex-start; padding: 6px 0; color: var(--text); text-decoration: none; }
.footer-col a:hover { color: var(--orange); }
.footer-col .icon { margin-top: .22em; color: var(--orange); }
.footer-col .footer-place { display: flex; gap: 12px; }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 32px;
  padding-block: 24px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: .875rem;
}
.footer-legal a { display: inline-block; padding: 6px 0; color: var(--muted); text-underline-offset: 4px; }
.footer-legal a:hover { color: var(--text); }
@media (min-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 56px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 3fr) minmax(0, 3.2fr); gap: 48px; }
  .footer-brand { grid-column: auto; }
}

/* ---------- 14. Get Started form (a <dialog>) ---------- */
html:has(dialog[open]) { overflow: hidden; }

.form-dialog {
  width: min(100%, 780px);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.form-dialog::backdrop { background: rgb(3 4 7 / .78); }
.form-dialog__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding-inline: clamp(20px, 5vw, 48px);
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}
.form-dialog__bar img { width: auto; height: 26px; }
.form-dialog__close {
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  margin-right: -12px;
  border: 0;
  background: none;
}
.form-dialog__close .icon { width: 24px; height: 24px; transition: transform var(--base) var(--ease-out); }
.form-dialog__close:hover .icon { transform: rotate(90deg); color: var(--orange); }
.form-dialog__body { padding: clamp(28px, 5vw, 52px) clamp(20px, 5vw, 48px) 56px; }
.form-head h2 { font-size: clamp(2.25rem, 5vw, 3.25rem); font-style: italic; font-weight: 800; }
.form-head > p { margin-top: 14px; color: var(--muted); }
.form-head__call {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  color: var(--muted);
  font-size: .9375rem;
}
.form-head__call .icon { margin-top: .2em; color: var(--orange); }
.form-head__call a { color: var(--text); font-weight: 600; text-underline-offset: 4px; }

.form-dialog fieldset { margin: 40px 0 0; padding: 0; border: 0; min-width: 0; }
.form-dialog legend {
  width: 100%;
  margin-bottom: 20px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line);
  color: var(--orange);
  font: 600 .8125rem/1.2 var(--font-display);
  letter-spacing: .2em;
  text-transform: uppercase;
}
.form-row { display: grid; gap: 0 20px; }
@media (min-width: 600px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 20px; }
.field > label, .field__label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .9375rem; }
.req { color: var(--orange); margin-left: 3px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg);
  font-size: 1rem; /* 16px keeps iOS from zooming in */
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field textarea { min-height: 128px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6a1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--dim); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 0;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgb(255 106 26 / .28);
}
.field ::placeholder { color: var(--dim); opacity: 1; }
.field__hint { margin-top: 8px; color: var(--dim); font-size: .875rem; }
.field__error { display: none; margin-top: 8px; color: var(--error); font-size: .875rem; font-weight: 600; }
.field.has-error .field__error { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--error); }

.choices { display: grid; gap: 10px; }
.choices--inline { grid-template-columns: repeat(2, minmax(0, 160px)); }
@media (min-width: 600px) { .choices--grid { grid-template-columns: 1fr 1fr; } }
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color var(--fast), background-color var(--fast);
}
.choice:hover { border-color: var(--dim); }
.choice:has(input:checked) { border-color: var(--orange); background: rgb(255 106 26 / .1); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgb(255 106 26 / .28); }
.choice input { width: 20px; height: 20px; margin: 0; accent-color: var(--orange); }
.field--url[hidden] { display: none; }

.form-foot { margin-top: 36px; }
.form-foot__plan { margin: 18px 0; color: var(--muted); font-size: .9375rem; }
.form-foot__note { margin-top: 16px; color: var(--dim); font-size: .875rem; text-align: center; }
.form-status { display: none; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--error); color: var(--error); font-weight: 600; }
.form-status.is-visible { display: block; }

.form-success { display: none; padding: 48px 0; text-align: center; }
.form-success.is-visible { display: block; }
.form-success .icon { width: 64px; height: 64px; margin: 0 auto 24px; color: var(--orange); stroke-width: 1.5; }
.form-success h2 { font-size: clamp(2rem, 5vw, 3rem); font-style: italic; }
.form-success p { max-width: 40ch; margin: 16px auto 32px; color: var(--muted); }

/* ---------- 15. Legal pages ---------- */
.legal { max-width: 760px; margin-inline: auto; padding: calc(var(--header-h) + clamp(40px, 7vw, 88px)) var(--gutter) var(--section); }
.legal h1 { margin: 20px 0 14px; font-size: clamp(2.25rem, 6vw, 3.75rem); font-stretch: 92%; text-transform: uppercase; }
.legal h2 { margin: 52px 0 14px; font-size: clamp(1.5rem, 3vw, 2rem); }
.legal h3 { margin: 30px 0 10px; }
.legal p { color: var(--muted); }
.legal p + p { margin-top: 14px; }
.legal a { color: var(--text); text-decoration-color: var(--orange); text-underline-offset: 4px; }
.legal__updated { color: var(--dim); font-size: .9375rem; }
.legal__note { margin-top: 28px; padding: 18px 20px; border: 1px solid var(--line); border-left: 3px solid var(--orange); }

/* ---------- Motion ----------
   Everything below is an enhancement: without JavaScript, or with
   "reduce motion" switched on, the page simply shows in its final state. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Page load: the headline rises out of a mask, then the rest settles in */
  .hero__line > span { animation: rise .85s var(--ease-out) both; }
  .hero__line--accent > span { animation-delay: .08s; }
  .hero__title .eyebrow, .hero__row, .hero__specs { animation: settle .7s var(--ease-out) .2s both; }
  .hero__specs { animation-delay: .32s; }
  .hero__grid { animation: fade 1.6s ease-out both; }

  /* Scroll: headings wipe up once, panels and screenshots settle */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity var(--slow) var(--ease-out), transform var(--slow) var(--ease-out);
    transition-delay: calc(70ms * var(--i, 0));
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* work cards: the browser frame wipes open from the top */
  .js [data-reveal="wipe"] { opacity: 1; transform: none; }
  .js [data-reveal="wipe"] .browser {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.2s var(--ease-out) calc(120ms * var(--i, 0)), border-color var(--base), transform var(--slow) var(--ease-out);
  }
  .js [data-reveal="wipe"].is-in .browser { clip-path: inset(-10px); }

  .form-dialog { transition: transform var(--base) var(--ease-out), opacity var(--base), overlay var(--base) allow-discrete, display var(--base) allow-discrete; transform: translateX(40px); opacity: 0; }
  .form-dialog[open] { transform: none; opacity: 1; }
  .form-dialog::backdrop { transition: opacity var(--base), overlay var(--base) allow-discrete, display var(--base) allow-discrete; opacity: 0; }
  .form-dialog[open]::backdrop { opacity: 1; }
  @starting-style {
    .form-dialog[open] { transform: translateX(40px); opacity: 0; }
    .form-dialog[open]::backdrop { opacity: 0; }
  }
}

@keyframes rise { from { transform: translateY(108%); } }
@keyframes settle { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
  .site-header, .mobile-bar, .mobile-menu, .hero__grid, .form-dialog { display: none !important; }
  body { background: #fff; color: #000; }
}