@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/PlusJakartaSans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/GeistMono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/**
 * Remove default margin.
 */
body {
  margin: 0;
}
/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}
/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none;
}
/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent;
}
/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */
a:active,
a:hover {
  outline: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold;
}
/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic;
}
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000;
}
/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0;
}
/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px;
}
/**
 * Address differences between Firefox and other browsers.
 */
hr {
  box-sizing: content-box;
  height: 0;
}
/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto;
}
/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}
/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible;
}
/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none;
}
/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. CUSTOM FOR WEBFLOW: Removed the input[type="submit"] selector to reduce
 *    specificity and defer to the .w-button selector
 */
button,
html input[type="button"],
input[type="reset"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}
/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default;
}
/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal;
}
/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. CUSTOM FOR WEBFLOW: changed from `textfield` to `none` to normalize iOS rounded input
 * 2. CUSTOM FOR WEBFLOW: box-sizing: content-box rule removed
 *    (similar to normalize.css >=4.0.0)
 */
input[type='search'] {
  -webkit-appearance: none;
  /* 1 */
}
/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto;
}
/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold;
}
/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

/* ==========================================================================
   Conversion Websites — Aeline design system
   Tokens sourced from ~/Desktop/Design/figma files/aeline/app/globals.css
   Lime (#d6fd70) is an ACCENT ONLY: chips, pills, check dots, numerals.
   ========================================================================== */

:root {
  --cw-ink: #131313;
  --cw-body: #585858;
  --cw-dark: #0a0a0a;
  --cw-soft: #f8f8f8;
  --cw-soft-alt: #f2f2f2;
  --cw-white: #ffffff;
  --cw-lime: #d6fd70;
  --cw-lime-hover: #c9f858;

  --cw-line: rgba(19, 19, 19, 0.08);
  --cw-line-strong: rgba(19, 19, 19, 0.16);
  --cw-dark-line: rgba(255, 255, 255, 0.12);
  --cw-dark-body: rgba(255, 255, 255, 0.66);

  --cw-radius-panel: 24px;
  --cw-radius-card: 16px;
  --cw-radius-sm: 12px;

  --cw-card-shadow:
    0 4px 3px rgba(0, 0, 0, 0.02), 0 2px 2px rgba(0, 0, 0, 0.03),
    0 0 1px rgba(0, 0, 0, 0.03);

  --cw-display: "Plus Jakarta Sans", -apple-system, Arial, sans-serif;
  --cw-mono: "Geist Mono", "Roboto Mono", ui-monospace, monospace;

  --cw-gutter: 12px;
  --cw-pad: clamp(24px, 4.4vw, 64px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--cw-white);
  color: var(--cw-ink);
  font-family: var(--cw-display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.menu-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  /* required: HTML width/height attrs are presentational hints that make the
     height definite, which disables aspect-ratio on .cw-work / .cw-split imgs */
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

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

.cw-section--dark :focus-visible,
.cw-hero :focus-visible,
.cw-footer :focus-visible,
.cw-final :focus-visible,
.cw-mobile :focus-visible,
.cw-guarantee :focus-visible,
.cw-plan--local :focus-visible {
  outline-color: var(--cw-lime);
}

/* --------------------------------------------------------------- typography */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  color: var(--cw-ink);
}

h1 {
  font-size: clamp(38px, 5.2vw, 62px);
  line-height: 1.05;
  letter-spacing: -0.042em;
}

h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.13;
  letter-spacing: -0.032em;
}

h3 {
  font-size: 20px;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.012em;
}

p {
  margin: 0;
  color: var(--cw-body);
}

/* -------------------------------------------------------------- primitives */

.cw-skip {
  position: absolute;
  z-index: 200;
  top: 16px;
  left: 16px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--cw-ink);
  color: var(--cw-lime);
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.cw-skip:not(:focus):not(:focus-visible) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.cw-shell {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

/* eyebrow: dot + mono caps (Aeline signature) */
.cw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cw-mono);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.cw-kicker::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--cw-lime);
  flex: none;
}

.cw-kicker--dark {
  color: var(--cw-ink);
}

.cw-kicker--dark::before {
  background: var(--cw-ink);
}

/* --------------------------------------------------------------- buttons */

.cw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.cw-btn:hover {
  transform: translateY(-1px);
}

.cw-btn--primary {
  background: var(--cw-lime);
  color: var(--cw-ink);
}

.cw-btn--primary:hover {
  background: var(--cw-lime-hover);
}

.cw-btn--ghost {
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--cw-white);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
}

.cw-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.4);
}

.cw-btn--dark {
  background: var(--cw-ink);
  color: var(--cw-lime);
}

.cw-btn--dark:hover {
  background: #000;
}

.cw-btn--line {
  border-color: var(--cw-line-strong);
  color: var(--cw-ink);
  background: transparent;
}

.cw-btn--line:hover {
  background: var(--cw-ink);
  color: var(--cw-lime);
  border-color: var(--cw-ink);
}

/* dark circular arrow inside the primary pill (Aeline) */
/* the chip pulls into the button's own padding, so a primary button without an
   arrow keeps symmetric padding instead of inheriting a 6px right edge */
.cw-btn__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: -16px;
  border-radius: 999px;
  background: #191815;
  color: var(--cw-lime);
  flex: none;
}

.cw-btn__arrow svg {
  width: 12px;
  height: 12px;
}

/* --------------------------------------------------------------- navbar */

.cw-nav {
  position: absolute;
  z-index: 60;
  top: calc(var(--cw-gutter) + 16px);
  left: 0;
  right: 0;
}

.cw-nav__inner {
  width: min(1280px, calc(100% - (var(--cw-gutter) * 2) - 44px));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.cw-logo img {
  height: 30px;
  width: auto;
}

.cw-nav__center {
  display: flex;
  justify-content: center;
}

/* no container pill: Aeline's navbar is plain flex with a gap, and the pill
   was an invention that never existed in the source design */
.cw-nav__links {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cw-nav__link {
  padding: 8px 16px;
  border-radius: 999px;
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.cw-nav__link:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--cw-white);
}

.cw-nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cw-lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.5);
}

.cw-lang a {
  transition: color 0.2s ease;
}

.cw-lang a:hover,
.cw-lang a[aria-current="page"] {
  color: var(--cw-lime);
}

.cw-nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--cw-lime);
  color: var(--cw-ink);
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: background 0.2s ease;
}

.cw-nav__cta:hover {
  background: var(--cw-lime-hover);
}

.cw-menu {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(10, 10, 10, 0.34);
  color: var(--cw-white);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.cw-menu svg {
  width: 20px;
  height: 20px;
}

/* --------------------------------------------------------- mobile drawer */

.cw-mobile {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(10, 10, 10, 0.97);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

.cw-mobile.is-open {
  opacity: 1;
  visibility: visible;
}

.cw-mobile__panel {
  display: flex;
  flex-direction: column;
  padding: 104px 24px 40px;
}

.cw-mobile__panel a {
  padding: 15px 0;
  border-bottom: 1px solid var(--cw-dark-line);
  color: var(--cw-white);
  font-size: 20px;
  letter-spacing: -0.024em;
}

.cw-mobile__panel .cw-mobile__cta {
  margin-top: 26px;
  border-bottom: 0;
  align-self: flex-start;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--cw-lime);
  color: var(--cw-ink);
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------- hero */

.cw-hero {
  position: relative;
  margin: var(--cw-gutter);
  border-radius: var(--cw-radius-panel);
  overflow: hidden;
  isolation: isolate;
  background: var(--cw-dark);
  display: flex;
  align-items: center;
  padding: 148px var(--cw-pad) 80px;
}

.cw-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.cw-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(8, 10, 14, 0.2) 0%,
      rgba(8, 10, 14, 0.105) 50%,
      rgba(8, 10, 14, 0) 100%
    ),
    linear-gradient(180deg, rgba(8, 10, 14, 0.12) 0%, rgba(8, 10, 14, 0) 28%);
}

.cw-hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: clamp(32px, 4.6vw, 72px);
}

.cw-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  max-width: 560px;
}

.cw-hero h1 {
  color: var(--cw-white);
}

.cw-hero__lead {
  font-size: 16px;
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.8);
  max-width: 500px;
}

.cw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* mockup and its owner share one grid cell so the face sits with the site */
.cw-hero__showcase {
  display: flex;
  flex-direction: column;
}

/* site label only, no owner photo; swaps in step with the mockup */
.cw-owners {
  position: relative;
  margin-top: 14px;
  min-height: 34px;
}

.cw-owner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
  font-family: var(--cw-mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.06em;
}

.cw-owner.is-active {
  opacity: 1;
}

.cw-owner b {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}

.cw-owner span {
  color: rgba(255, 255, 255, 0.5);
}

/* phone sits with the CTAs so it reads as a second way to reach him */
.cw-hero__phone {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s ease;
}

.cw-hero__phone b {
  font-weight: 400;
  color: var(--cw-lime);
}

.cw-hero__phone:hover {
  color: var(--cw-white);
}

@media (prefers-reduced-motion: reduce) {
  .cw-owner {
    transition: none;
  }
}

.cw-proofline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.cw-proofline li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.cw-proofline li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--cw-lime);
  flex: none;
}

/* browser mock */
.cw-hero__website-preview {
  display: block;
  border-radius: var(--cw-radius-card);
  overflow: hidden;
  background: #14151a;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.cw-hero__website-preview:hover {
  transform: translateY(-6px);
  box-shadow: 0 48px 110px rgba(0, 0, 0, 0.58);
}

/* exact ratio of waterscape-hero.jpg (1440x772), cropped to end right below
   the stats row so the mockup shows no dead white page space */
.cw-preview__screen {
  aspect-ratio: 1440 / 772;
  overflow: hidden;
}

/* shots stack so one can cross-fade into the next without the frame resizing */
.cw-preview__screen {
  position: relative;
}

.cw-preview__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.cw-preview__shot.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .cw-preview__shot {
    transition: none;
  }
}

/* --------------------------------------------------------------- stats */

.cw-stats {
  padding: 56px var(--cw-pad);
}

.cw-stats__inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.cw-stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  border-left: 1px solid var(--cw-line);
}

.cw-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.cw-stat__num {
  font-size: clamp(36px, 3.6vw, 48px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--cw-ink);
}

.cw-stat__label {
  font-family: var(--cw-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(19, 19, 19, 0.45);
}

/* ------------------------------------------------------ section shells */

.cw-section {
  padding: clamp(64px, 7vw, 104px) var(--cw-pad);
}

/* rounded inset panels — the Aeline structural signature */
.cw-section--dark,
.cw-section--soft {
  margin: var(--cw-gutter);
  border-radius: var(--cw-radius-panel);
}

.cw-section--dark {
  background: var(--cw-dark);
  color: var(--cw-white);
}

.cw-section--soft {
  background: var(--cw-soft);
}

.cw-section--white {
  background: var(--cw-white);
}

.cw-section--dark h2,
.cw-section--dark h3 {
  color: var(--cw-white);
}

.cw-section--dark p {
  color: var(--cw-dark-body);
}

.cw-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(36px, 4vw, 56px);
}

.cw-section__intro h2 {
  margin-top: 18px;
}

.cw-section__intro p {
  font-size: 16px;
  max-width: 460px;
}

/* --------------------------------------------------------- selected work */

/* 9 sites in a 3x3 grid: every card identical, no orphan row */
.cw-workgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.cw-work {
  display: flex;
  flex-direction: column;
  border-radius: var(--cw-radius-card);
  overflow: hidden;
  background: var(--cw-white);
  border: 1px solid var(--cw-line);
  box-shadow: var(--cw-card-shadow);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.cw-work:hover {
  transform: translateY(-4px);
  border-color: rgba(19, 19, 19, 0.22);
}

.cw-work img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s ease;
}

.cw-work:hover img {
  transform: scale(1.03);
}

.cw-work__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px;
  /* no margin-top:auto — keeps every image bottom and title baseline aligned
     across a row regardless of caption line count (Spanish runs longer) */
}

.cw-work__meta h3 {
  color: var(--cw-ink);
  margin-bottom: 5px;
  font-size: 16px;
}

.cw-work__meta p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--cw-body);
}

.cw-work__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 999px;
  background: var(--cw-lime);
  color: var(--cw-ink);
  transition: transform 0.25s ease;
}

.cw-work:hover .cw-work__arrow {
  transform: translate(2px, -2px);
}

.cw-work__arrow svg {
  width: 13px;
  height: 13px;
}

/* ------------------------------------------------------ why it converts */

.cw-split {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}

.cw-split__visual {
  position: relative;
  border-radius: var(--cw-radius-panel);
  overflow: hidden;
  background: var(--cw-soft);
}

.cw-split__visual > img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 20%;
}

.cw-split__note {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--cw-radius-sm);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(10px);
  box-shadow: var(--cw-card-shadow);
}

.cw-split__note strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.cw-split__note span {
  display: block;
  margin-top: 3px;
  font-size: 14px;
  color: var(--cw-body);
}

.cw-split__note b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 999px;
  background: var(--cw-lime);
  font-size: 14px;
  font-weight: 400;
}

.cw-split__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.cw-split__copy > p {
  font-size: 16px;
  max-width: 560px;
}

.cw-benefits {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid var(--cw-line);
}

.cw-benefit {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--cw-line);
}

.cw-benefit__num {
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(19, 19, 19, 0.34);
  padding-top: 3px;
}

.cw-benefit h3 {
  margin-bottom: 6px;
}

.cw-benefit p {
  font-size: 16px;
}

/* ------------------------------------------------------------ testimonials */

/* five across so every client is visible at once; cards go narrow rather than
   pushing anyone onto a second row */
.cw-quotes {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.cw-quote {
  display: flex;
  flex-direction: column;
  margin: 0;
  border-radius: var(--cw-radius-card);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--cw-dark-line);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.cw-quote:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 253, 112, 0.45);
}

.cw-quote__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cw-quote:hover .cw-quote__photo {
  transform: scale(1.04);
}

.cw-quote__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  flex: 1;
}

.cw-quote__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  background: var(--cw-lime);
  color: var(--cw-ink);
}

.cw-quote__mark svg {
  width: 15px;
  height: 15px;
}

.cw-quote__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.86);
}

.cw-quote__who {
  margin-top: auto;
  padding-top: 4px;
  font-family: var(--cw-mono);
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------- pricing */

.cw-pricing {
  margin: var(--cw-gutter);
  border-radius: var(--cw-radius-panel);
  background: var(--cw-soft-alt);
}

.cw-pricing__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: clamp(24px, 4vw, 64px);
  margin-bottom: clamp(32px, 3.6vw, 48px);
}

.cw-pricing__head h2 {
  margin-top: 18px;
}

.cw-pricing__head p {
  max-width: 460px;
}

.cw-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.cw-plan {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 26px;
  border-radius: var(--cw-radius-card);
  background: var(--cw-white);
  box-shadow: var(--cw-card-shadow);
}

.cw-plan--local {
  background: var(--cw-dark);
}

.cw-plan--local h3,
.cw-plan--local .cw-plan__name {
  color: var(--cw-white);
}

.cw-plan__top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* lime icon chip (Aeline signature) */
.cw-plan__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--cw-radius-sm);
  background: var(--cw-lime);
  color: var(--cw-ink);
}

.cw-plan__icon svg {
  width: 20px;
  height: 20px;
}

.cw-plan__name {
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cw-ink);
}

.cw-plan__tag {
  margin-left: auto;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--cw-line-strong);
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(19, 19, 19, 0.6);
  white-space: nowrap;
}

.cw-plan--local .cw-plan__tag {
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.68);
}

.cw-plan__price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: clamp(40px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--cw-ink);
}

.cw-plan--local .cw-plan__price {
  color: var(--cw-white);
}

.cw-plan__price span {
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cw-body);
}

.cw-plan--local .cw-plan__price span {
  color: rgba(255, 255, 255, 0.6);
}

.cw-plan__summary {
  font-size: 16px;
}

.cw-plan--local .cw-plan__summary {
  color: var(--cw-dark-body);
}

.cw-plan__features {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.cw-plan__features li {
  position: relative;
  padding-left: 30px;
  font-size: 14px;
  color: var(--cw-body);
}

/* lime check dot (Aeline signature) */
.cw-plan__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background-color: rgba(214, 253, 112, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 12l3 3 5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}

.cw-plan--local .cw-plan__features li {
  color: var(--cw-dark-body);
}

.cw-plan--local .cw-plan__features li::before {
  background-color: rgba(214, 253, 112, 0.9);
}

.cw-plan__area {
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.cw-plan__area span {
  display: block;
  margin-bottom: 6px;
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.cw-plan__area p {
  font-size: 14px;
  line-height: 1.45;
  color: var(--cw-dark-body);
}

.cw-plan__footer {
  margin-top: auto;
  padding-top: 6px;
}

.cw-plan__footer .cw-btn {
  width: 100%;
}

.cw-plan--local .cw-btn--line {
  background: var(--cw-white);
  border-color: var(--cw-white);
  color: var(--cw-ink);
}

.cw-plan--local .cw-btn--line:hover {
  background: var(--cw-lime);
  color: var(--cw-ink);
  border-color: var(--cw-lime);
}

/* ------------------------------------------------------- update guide */

.cw-update-guide {
  margin-top: 20px;
  padding: 28px;
  border-radius: var(--cw-radius-card);
  background: var(--cw-white);
  box-shadow: var(--cw-card-shadow);
}

.cw-update-guide h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.cw-update-guide > div > p {
  font-size: 16px;
  max-width: 620px;
}

.cw-update-types {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.cw-update-type {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 16px;
  border-radius: var(--cw-radius-sm);
  background: var(--cw-soft);
  border: 1px solid var(--cw-line);
}

/* lime icon chip replaces the old floating 01-05 numerals, which left a dead
   gap above each label and read as decoration rather than information */
.cw-update-type__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 12px;
  background: var(--cw-lime);
  color: var(--cw-ink);
}

.cw-update-type__icon svg {
  width: 17px;
  height: 17px;
}

.cw-update-type > span:last-child {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--cw-ink);
}

.cw-update-note {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--cw-line);
  font-size: 14px;
  color: rgba(19, 19, 19, 0.5);
}

/* --------------------------------------------------------------- add-ons */

.cw-addons {
  margin-top: 20px;
  padding: 28px;
  border-radius: var(--cw-radius-card);
  background: var(--cw-white);
  box-shadow: var(--cw-card-shadow);
}

.cw-addons__intro h3 {
  font-size: 20px;
  margin-bottom: 6px;
}

.cw-addons__intro p {
  font-size: 16px;
  max-width: 620px;
}

.cw-addons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.cw-addon {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: var(--cw-radius-sm);
  background: var(--cw-soft);
  border: 1px solid var(--cw-line);
}

.cw-addon__top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cw-addon__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 12px;
  background: var(--cw-lime);
  color: var(--cw-ink);
}

.cw-addon__icon svg {
  width: 17px;
  height: 17px;
}

.cw-addon h3 {
  font-size: 16px;
}

.cw-addon p {
  font-size: 14px;
}

/* rule above the price so both cards land it on the same line instead of
   floating at whatever height their description happens to end */
.cw-addon__price {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--cw-line);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cw-ink);
}

.cw-addon__price small {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--cw-body);
}

/* ------------------------------------------------------------ guarantee */

/* centered: a promise reads as a statement, not a left-aligned paragraph */
.cw-guarantee {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 30px;
  margin-top: 20px;
  padding: clamp(30px, 3.6vw, 46px);
  border-radius: var(--cw-radius-card);
  background: var(--cw-dark);
}

.cw-guarantee__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.cw-guarantee__eyebrow::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--cw-lime);
  flex: none;
}

/* the promise is one statement, all lime. the two supporting terms became
   chips: previously all three sentences ran together in one two-tone block */
.cw-guarantee h3 {
  max-width: 900px;
  font-size: clamp(34px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.042em;
  color: var(--cw-lime);
}

/* setup line small and muted, punchline big and lime: a single flat size gave
   the promise no emphasis where it actually lands */
/* :first-child only — the word-sweep script wraps every other word in a bare
   span, and those must stay inline or the promise breaks one word per line */
.cw-guarantee h3 > span:first-child {
  display: block;
  margin-bottom: 12px;
  font-size: 0.55em;
  line-height: 1.15;
  letter-spacing: -0.026em;
  color: rgba(255, 255, 255, 0.6);
}

.cw-guarantee__terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cw-guarantee__terms li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px 9px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
}

.cw-guarantee__terms li::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  background-color: var(--cw-lime);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 11px 11px;
  background-repeat: no-repeat;
}

/* --------------------------------------------------------------- process */

.cw-process__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  counter-reset: cw-step;
}

.cw-process__step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  border-radius: var(--cw-radius-card);
  background: var(--cw-soft);
  border: 1px solid var(--cw-line);
}

.cw-process__step::before {
  counter-increment: cw-step;
  content: "0" counter(cw-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cw-radius-sm);
  background: var(--cw-lime);
  color: var(--cw-ink);
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.cw-process__step p {
  font-size: 14px;
}

/* ---------------------------------------------------------- service area */

.cw-area__groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cw-area__group {
  padding: 24px;
  border-radius: var(--cw-radius-card);
  background: var(--cw-white);
  box-shadow: var(--cw-card-shadow);
}

.cw-area__group h3 {
  margin-bottom: 8px;
}

.cw-area__group p {
  font-size: 16px;
}

.cw-area__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.cw-area__cities li {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--cw-soft);
  border: 1px solid var(--cw-line);
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(19, 19, 19, 0.66);
}

/* --------------------------------------------------------------- faq */

.cw-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: start;
}

.cw-faq > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.cw-faq > div:first-child h2 {
  margin-top: 18px;
}

.cw-faq__aside {
  margin: 16px 0 22px;
  font-size: 16px;
  max-width: 320px;
}

.cw-faq__list {
  border-top: 1px solid var(--cw-line);
}

.cw-faq details {
  border-bottom: 1px solid var(--cw-line);
}

.cw-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--cw-ink);
}

.cw-faq summary::-webkit-details-marker {
  display: none;
}

.cw-faq summary::after {
  content: "";
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 999px;
  background-color: var(--cw-soft);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131313' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}

.cw-faq details[open] summary::after {
  transform: rotate(135deg);
  background-color: var(--cw-lime);
}

.cw-faq details p {
  padding: 0 60px 24px 0;
  font-size: 16px;
}

/* --------------------------------------------------------------- final */

.cw-final {
  margin: var(--cw-gutter);
  padding: clamp(56px, 6.4vw, 96px) var(--cw-pad);
  border-radius: var(--cw-radius-panel);
  background: var(--cw-dark);
}

.cw-final__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: clamp(28px, 4vw, 64px);
}

.cw-final h2 {
  margin: 18px 0 14px;
  color: var(--cw-white);
  max-width: 620px;
}

.cw-final p {
  color: var(--cw-dark-body);
  max-width: 520px;
}

.cw-final__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

/* --------------------------------------------------------------- footer */

.cw-footer {
  margin: var(--cw-gutter);
  padding: clamp(48px, 5vw, 72px) var(--cw-pad) 28px;
  border-radius: var(--cw-radius-panel);
  background: var(--cw-dark);
  color: var(--cw-white);
}

.cw-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 40px;
  border-bottom: 1px solid var(--cw-dark-line);
}

.cw-footer__logo {
  height: 30px;
  width: auto;
  margin-bottom: 16px;
}

.cw-footer__brand p {
  font-size: 14px;
  color: var(--cw-dark-body);
  max-width: 360px;
}

.cw-footer h3 {
  margin-bottom: 16px;
  font-family: var(--cw-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}

.cw-footer nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cw-footer nav a {
  font-size: 14px;
  color: var(--cw-dark-body);
  transition: color 0.2s ease;
}

.cw-footer nav a:hover {
  color: var(--cw-lime);
}

.cw-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 24px;
  font-family: var(--cw-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.4);
}

.cw-footer__bottom div {
  display: flex;
  gap: 22px;
}

.cw-footer__bottom a {
  transition: color 0.2s ease;
}

.cw-footer__bottom a:hover {
  color: var(--cw-lime);
}

/* ----------------------------------------------------- word sweep (Solv) */
/* headlines sit in place in muted ink, then each word darkens left to right.
   colour only, never layout, so nothing reflows mid-animation. */

.cw-sweep > span {
  color: rgba(19, 19, 19, 0.22);
  transition: color 0.45s ease;
}

.cw-section--dark .cw-sweep > span,
.cw-hero .cw-sweep > span,
.cw-final .cw-sweep > span {
  color: rgba(255, 255, 255, 0.22);
}

.cw-sweep.is-lit > span {
  color: var(--cw-ink);
}

.cw-section--dark .cw-sweep.is-lit > span,
.cw-hero .cw-sweep.is-lit > span,
.cw-final .cw-sweep.is-lit > span {
  color: var(--cw-white);
}

@media (prefers-reduced-motion: reduce) {
  .cw-sweep > span {
    color: var(--cw-ink);
    transition: none;
  }

  .cw-section--dark .cw-sweep > span,
  .cw-hero .cw-sweep > span,
  .cw-final .cw-sweep > span {
    color: var(--cw-white);
  }
}

/* --------------------------------------------------------------- reveal */

.cw-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.cw-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .cw-nav__links {
    display: none;
  }

  .cw-hero__content {
    grid-template-columns: minmax(0, 1fr);
  }

  .cw-hero__copy {
    max-width: 640px;
  }

  .cw-workgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cw-split,
  .cw-faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .cw-split__visual > img {
    aspect-ratio: 16 / 10;
    object-position: center 48%;
  }

  .cw-split__visual {
    width: 100%;
    max-width: 720px;
    justify-self: center;
  }

  .cw-update-types {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cw-process__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cw-quotes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  :root {
    --cw-gutter: 8px;
  }

  .cw-menu {
    display: inline-flex;
  }

  .cw-nav__cta,
  .cw-lang {
    display: none;
  }

  .cw-hero {
    padding: 116px 22px 52px;
    border-radius: 16px;
  }

  .cw-section {
    padding: 64px 22px;
  }

  .cw-final,
  .cw-footer {
    padding-left: 22px;
    padding-right: 22px;
    border-radius: 16px;
  }

  .cw-section--dark,
  .cw-section--soft,
  .cw-pricing {
    border-radius: 16px;
  }

  .cw-section__intro,
  .cw-pricing__head,
  .cw-final__inner {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .cw-final__actions {
    justify-content: flex-start;
  }

  .cw-plans,
  .cw-addons__grid,
  .cw-process__list,
  .cw-quotes {
    grid-template-columns: minmax(0, 1fr);
  }

  .cw-update-types,
  .cw-stats__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cw-stat:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .cw-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .cw-faq details p {
    padding-right: 0;
  }

  .cw-actions .cw-btn,
  .cw-final__actions .cw-btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .cw-workgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .cw-update-types {
    grid-template-columns: minmax(0, 1fr);
  }

  /* "Anywhere" is a word, not a numeral. It cannot shrink with digit count and
     it has no space to wrap on, so at the 36px floor it renders 160px wide
     inside a 99px tile and pushes the entire page sideways on a phone.
     Measured on an iPhone SE: the page was 37px wider than the screen.
     Tightening the tiles and the type makes it fit; overflow-wrap is the
     guarantee, because font metrics are not something to bet a live page on. */
  .cw-stats__inner {
    gap: 16px;
  }

  .cw-stat {
    padding-left: 16px;
  }

  .cw-stat__num {
    font-size: clamp(24px, 7vw, 34px);
    overflow-wrap: anywhere;
  }

  .cw-plan,
  .cw-update-guide,
  .cw-addons {
    padding: 22px;
  }

  .cw-plan__tag {
    margin-left: 0;
  }

  .cw-work__meta {
    position: relative;
    display: block;
    padding: 12px;
  }

  .cw-work__meta h3 {
    margin-bottom: 7px;
    padding-right: 30px;
    font-size: 14px;
    line-height: 1.18;
  }

  /* 11px is under the readable floor on a phone and this line is the only
     thing explaining what each piece of work actually is. */
  .cw-work__meta p {
    font-size: 12.5px;
    line-height: 1.4;
  }

  /* Footer links measured 22px tall, well under a thumb. The gap comes off the
     list and goes into the links themselves, so the footer keeps its rhythm
     while each target roughly doubles. */
  .cw-footer nav {
    gap: 0;
  }

  .cw-footer nav a {
    display: flex;
    align-items: center;
    min-height: 40px;
  }

  .cw-work__arrow {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
  }

  .cw-work__arrow svg {
    width: 11px;
    height: 11px;
  }

  .cw-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .cw-reveal {
    opacity: 1;
    transform: none;
  }
}

/* Ten cards in a three-column grid: the first and last run two columns wide
   so every row is full. The wider image ratio keeps them the same height. */
@media (min-width: 1101px) {
  .cw-work--wide {
    grid-column: span 2;
  }
  .cw-work--wide img {
    aspect-ratio: 3.27 / 1;
  }
}

/* =====================================================
   Fade Growth Partner, Facebook ad landing page.
   Sits on top of conversion-websites.css and only adds
   what that file does not already have: the lead form,
   the pitch block, and the trust strip.
   ===================================================== */

/* ---------- Lead form card ---------- */

.of-form {
  background: var(--cw-white);
  border-radius: var(--cw-radius-panel);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 520px;
  justify-self: end;
}

.of-form__head {
  margin-bottom: 20px;
}

.of-form__head h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.6px;
  margin: 0 0 8px;
}

.of-form__head p {
  margin: 0;
  color: var(--cw-body);
  font-size: 15px;
  line-height: 1.5;
}

.of-field {
  display: block;
  margin-bottom: 14px;
}

.of-field > span {
  display: block;
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-body);
  margin-bottom: 6px;
}

.of-field input,
.of-field select,
.of-field textarea {
  width: 100%;
  font-family: var(--cw-display);
  font-size: 16px;
  color: var(--cw-ink);
  background: var(--cw-soft);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-sm);
  padding: 13px 14px;
  appearance: none;
  transition:
    border-color 0.18s ease,
    background 0.18s ease;
}

.of-field textarea {
  min-height: 84px;
  resize: vertical;
}

.of-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23585858' stroke-width='1.6'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 38px;
}

.of-field input:focus,
.of-field select:focus,
.of-field textarea:focus {
  outline: none;
  background: var(--cw-white);
  border-color: var(--cw-ink);
}

.of-field--half {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.of-field--half .of-field {
  margin-bottom: 14px;
}

/* The honeypot. Off screen rather than display:none so bots that skip
   hidden inputs still fill it in. */
.of-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.of-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--cw-body);
  cursor: pointer;
}

.of-check input {
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--cw-ink);
  flex: none;
}

.of-check a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.of-check--consent {
  padding: 12px;
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-sm);
  background: var(--cw-soft);
}

.of-submit {
  width: 100%;
  justify-content: center;
  border: none;
  cursor: pointer;
  font-size: 15px;
}

.of-submit[disabled] {
  opacity: 0.55;
  cursor: progress;
}

.of-form__foot {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cw-body);
  text-align: center;
}

.of-form__foot a {
  color: var(--cw-ink);
  font-weight: 600;
}

.of-status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  border-radius: var(--cw-radius-sm);
  padding: 12px 14px;
}

.of-status[hidden] {
  display: none;
}

.of-status--ok {
  background: #eef8d8;
  color: #33461a;
}

.of-status--err {
  background: #fdecec;
  color: #7c1d1d;
}

/* The thank you state replaces the form in place, so the visitor never
   loses their scroll position or wonders whether it sent. */
.of-done h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.6px;
  margin: 0 0 10px;
}

.of-done p {
  margin: 0 0 18px;
  color: var(--cw-body);
  font-size: 15px;
  line-height: 1.55;
}

.of-done .cw-btn {
  width: 100%;
  justify-content: center;
}

/* ---------- Trust strip under the hero ---------- */

.of-trust {
  margin: var(--cw-gutter);
  margin-top: 0;
  background: var(--cw-soft);
  border-radius: var(--cw-radius-panel);
  padding: 26px var(--cw-pad);
}

.of-trust__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 28px;
}

.of-trust__label {
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-body);
}

.of-trust__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--cw-ink);
}

/* ---------- The why it is $100 block ---------- */

.of-pitch {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.of-pitch__quote {
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.35;
  letter-spacing: -0.5px;
  margin: 0 0 18px;
  color: var(--cw-ink);
}

.of-pitch p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--cw-body);
}

.of-pitch p:last-child {
  margin-bottom: 0;
}

.of-pitch__who {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.of-pitch__who img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

.of-pitch__who span {
  font-size: 14px;
  line-height: 1.4;
  color: var(--cw-body);
}

.of-pitch__who b {
  display: block;
  color: var(--cw-ink);
  font-size: 15px;
}

/* ---------- Included list ---------- */

.of-included {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 34px;
}

.of-included article {
  background: var(--cw-white);
  border: 1px solid var(--cw-line);
  border-radius: var(--cw-radius-card);
  padding: 24px;
}

.of-included h3 {
  font-size: 17px;
  line-height: 1.25;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.of-included p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cw-body);
}

/* ---------- Geography callout on the Fade System plan ---------- */

.of-geo {
  border: 1px solid var(--cw-line-strong);
  border-radius: var(--cw-radius-card);
  padding: 20px 22px;
  margin-top: 26px;
  background: var(--cw-white);
}

.of-geo h3 {
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}

.of-geo p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--cw-body);
}

@media (max-width: 1024px) {
  .of-form {
    max-width: 640px;
    justify-self: start;
  }

  .of-pitch {
    grid-template-columns: minmax(0, 1fr);
  }

  .of-included {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .of-included {
    grid-template-columns: minmax(0, 1fr);
  }

  .of-field--half {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .of-trust {
    padding: 22px;
  }
}

/* =====================================================
   Fade Growth Partner, niche ad landing pages.
   Sits on top of conversion-websites.css and offer.css.
   Only adds what those two do not already have: the
   client-site proof block in the hero, the form section,
   and the price comparison.
   ===================================================== */

/* ---------- Nav ----------------------------------------------------------
   conversion-websites.css hides the language toggle and the call button
   under 860px because that layout swaps in a burger menu. These pages have
   no burger, and they are bilingual ad traffic landing mostly on phones, so
   both have to survive the breakpoint. */

.cw-nav--niche .cw-lang,
.cw-nav--niche .cw-nav__cta {
  display: flex;
}

.cw-nav--niche .cw-nav__cta {
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* "Call 509-400-0005" wraps to two lines at 390px and shoves the logo out
     of the bar. The number on its own still reads as a call button. */
  .nl-call__word {
    display: none;
  }

  .cw-nav--niche .cw-nav__cta {
    padding: 9px 14px;
    font-size: 12px;
  }

  .cw-nav--niche .cw-nav__inner {
    gap: 10px;
  }

  .cw-nav--niche .cw-logo img {
    height: 24px;
  }
}

/* ---------- Hero: the client site is the proof --------------------------- */

.cw-hero--niche {
  padding-bottom: clamp(56px, 6vw, 88px);
}

.nl-showcase__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 14px 0 0;
  font-family: var(--cw-mono);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

.nl-showcase__caption b {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.92);
}

.nl-showcase__caption span {
  color: rgba(255, 255, 255, 0.5);
}

/* ---------- Proof grid ---------------------------------------------------
   The site-wide grid is three across. These pages show two or four sites,
   so a fixed three leaves an orphan either way. */

.nl-workgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 720px) {
  .nl-workgrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  /* the screenshot IS the argument on these pages, so it stays legible
     instead of shrinking into a two-up thumbnail */
  .nl-workgrid .cw-work__meta {
    position: static;
    display: flex;
    padding: 16px;
  }

  .nl-workgrid .cw-work__meta h3 {
    font-size: 16px;
    line-height: 1.25;
    padding-right: 0;
  }

  .nl-workgrid .cw-work__meta p {
    font-size: 14px;
    line-height: 1.45;
  }

  .nl-workgrid .cw-work__arrow {
    position: static;
    width: 34px;
    height: 34px;
  }

  .nl-workgrid .cw-work__arrow svg {
    width: 13px;
    height: 13px;
  }
}

/* ---------- The price, deliberately below the proof ---------------------- */

.nl-money {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

.nl-money__lead {
  margin: 18px 0 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--cw-body);
}

.nl-money h2 {
  margin-top: 6px;
}

.nl-money__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.nl-money__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--cw-ink);
}

.nl-money__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--cw-lime);
}

.nl-money p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--cw-body);
}

.nl-math {
  background: var(--cw-white);
  border: 1px solid var(--cw-line-strong);
  border-radius: var(--cw-radius-card);
  padding: 22px 24px;
  margin-bottom: 24px;
}

.nl-math__label {
  display: block;
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-body);
  margin-bottom: 10px;
}

.nl-math__label--alt {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--cw-line);
}

.nl-math__row {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cw-body);
}

.nl-math__row b {
  color: var(--cw-ink);
  font-weight: 600;
}

.nl-math__row--win b {
  color: var(--cw-ink);
}

.nl-math__row--win {
  color: var(--cw-ink);
}

/* ---------- The one call to action -------------------------------------- */

.nl-talk__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.nl-talk__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 480px;
}

.nl-talk__copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--cw-dark-body);
}

.nl-talk__copy .cw-proofline {
  margin: 0;
}

.nl-talk__form .of-form {
  justify-self: stretch;
  max-width: 560px;
  margin-left: auto;
}

/* The form card is white but it sits inside .cw-section--dark, which repaints
   every h2 white and every p translucent-white. On a white card that erases
   the form's own heading entirely. Put the light-background colors back. */

.nl-talk .of-form h2 {
  color: var(--cw-ink);
}

.nl-talk .of-form p {
  color: var(--cw-body);
}

.nl-talk .of-form__foot a {
  color: var(--cw-ink);
}

.nl-talk .of-status--ok {
  color: #33461a;
}

.nl-talk .of-status--err {
  color: #7c1d1d;
}

@media (max-width: 1024px) {
  .nl-money,
  .nl-talk__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .nl-talk__copy {
    max-width: 640px;
  }

  .nl-talk__form .of-form {
    margin-left: 0;
    max-width: 640px;
  }
}

@media (max-width: 720px) {
  .nl-talk__form .of-form {
    max-width: none;
    padding: 22px;
  }
}

/* =====================================================
   Proof blocks, added 2026-08-06.
   The niche pages showed the work but never the owner.
   These four blocks carry the same proof the main
   websites page carries: an owner quote next to the
   headline, the client list, the numbers, and a way
   into the long-form case studies.
   ===================================================== */

/* ---------- 1. The owner quote, in the hero ------------------------------
   Highest-leverage placement on the page. It has to survive the hero's
   dark photo background, so it is a glass card, not a light one. */

.nl-vouch {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  /* <figure> carries a 40px inline margin by default, which pushed the card
     off the copy column's left edge on a phone. */
  margin: 26px 0 0;
  padding: 16px 18px;
  max-width: 520px;
  border-radius: var(--cw-radius-card);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  text-align: left;
}

.nl-vouch__face {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.nl-vouch__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.nl-vouch__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.94);
}

.nl-vouch__who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

.nl-vouch__who b {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
}

.nl-vouch__link {
  color: var(--cw-lime);
  border-bottom: 1px solid rgba(214, 253, 112, 0.4);
  padding-bottom: 1px;
}

.nl-vouch__link:hover {
  border-bottom-color: var(--cw-lime);
}

@media (max-width: 560px) {
  .nl-vouch {
    padding: 14px;
    gap: 12px;
  }

  .nl-vouch__face {
    width: 44px;
    height: 44px;
  }

  .nl-vouch__text {
    font-size: 14px;
  }
}

/* ---------- 2. The numbers ----------------------------------------------
   Same block the main websites page uses. Stacks two-up on a phone rather
   than shrinking four columns into unreadable slivers. */

.nl-stats {
  border-bottom: 1px solid var(--cw-line);
}

@media (max-width: 720px) {
  .nl-stats .cw-stats__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 16px;
  }

  .nl-stats .cw-stat {
    padding-left: 16px;
  }

  .nl-stats .cw-stat:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------- 3. The client strip -----------------------------------------
   Answers "do you work with businesses like mine" before the reader has
   to hunt for it. Names and trades, each one a live site. */

.nl-clients {
  padding: 34px var(--cw-pad);
  background: var(--cw-soft);
  border-bottom: 1px solid var(--cw-line);
}

.nl-clients__label {
  display: block;
  margin-bottom: 18px;
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cw-body);
}

.nl-clients__row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.nl-client {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  border-radius: var(--cw-radius-sm);
  background: var(--cw-white);
  border: 1px solid var(--cw-line);
  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}

.nl-client:hover {
  border-color: var(--cw-line-strong);
  transform: translateY(-2px);
}

.nl-client b {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--cw-ink);
}

.nl-client span {
  font-family: var(--cw-mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--cw-body);
}

@media (max-width: 1024px) {
  .nl-clients__row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .nl-clients__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nl-client:last-child:nth-child(odd) {
    grid-column: span 2;
  }

  .nl-client {
    padding: 12px;
  }
}

/* ---------- 4. Into the case studies -------------------------------------
   The niche pages had no route to the long-form write-ups, so a reader who
   wanted the whole story had nowhere to go. */

.nl-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.nl-case {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--cw-radius-card);
  background: var(--cw-white);
  border: 1px solid var(--cw-line);
  box-shadow: var(--cw-card-shadow);
  transition:
    transform 0.3s ease,
    border-color 0.3s ease;
}

.nl-case:hover {
  transform: translateY(-4px);
  border-color: var(--cw-line-strong);
}

.nl-case img {
  width: 100%;
  height: 168px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.nl-case__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
}

.nl-case__eyebrow {
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cw-body);
}

.nl-case h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--cw-ink);
}

.nl-case p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cw-body);
}

.nl-case__more {
  margin-top: 2px;
  font-family: var(--cw-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cw-ink);
}

@media (max-width: 860px) {
  .nl-cases {
    grid-template-columns: minmax(0, 1fr);
  }

  .nl-case img {
    height: 148px;
  }
}

/* Second-service spotlight under the includes grid */
.nl-system {
  margin-top: 16px;
  background: var(--cw-ink);
  color: var(--cw-white);
  border-radius: var(--cw-radius-card);
  padding: clamp(24px, 3vw, 36px);
  display: grid;
  gap: 10px;
}
.nl-system h3 {
  margin: 0;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: -0.5px;
  color: var(--cw-white);
}
.nl-system p {
  margin: 0;
  max-width: 64ch;
  color: var(--cw-dark-body);
}
.nl-system a {
  color: var(--cw-lime);
  font-weight: 700;
  width: max-content;
}

/* Market page video reels + full client grid */
.cs-reels__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); justify-content: center; gap: 20px; }
.cs-reel { width: 100%; max-width: 260px; background: var(--cw-white); border: 1px solid var(--cw-line); border-radius: var(--cw-radius-card); overflow: hidden; }
.cs-reel__media { aspect-ratio: 9/16; background: #000; }
.cs-reel__media video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.cs-reel__body { padding: 16px 18px 18px; }
.cs-reel__body h3 { font-size: 16px; margin: 0 0 6px; }
.cs-reel__body strong { display: block; font-size: 14px; }
.nl-clients__row--all { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 560px) { .nl-clients__row--all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.nl-client__links a { color: var(--cw-ink); text-decoration: underline; text-underline-offset: 2px; }

.nl-client__shot {
  display: block;
  margin: 0 0 10px;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16/9;
  background: var(--cw-soft);
}
.nl-client__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

/* =====================================================
   Fade Growth Partner, the price-increase note.
   Rendered from pricing.json by scripts/sync-pricing.py.

   Deliberately plain. It is a footnote, not a promotion:
   no panel, no border, no pill, no colour, no extra
   weight. It appears twice on a page, beside the price
   and in the closing call to action, and never in the
   hero. Miguel, 2026-08-06: urgency stapled to the top
   of a page reads as a tactic and gets discounted. The
   persuasion is supposed to come from the offer being
   specific and low risk.

   It lives in its own file because it lands on the
   homepage, the main websites page and the niche pages,
   which share no other stylesheet. Tokens fall back to
   literal values on pages that do not define them.
   ===================================================== */

.nl-note {
  display: block;
  margin: 12px 0 0;
  max-width: 46ch;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--cw-body, #585858);
  opacity: 0.85;
}

/* The closing call to action is a near-black section on the cw pages and a
   plain light section on the lp pages, so the white treatment is scoped to the
   dark ones by ancestor rather than assumed from the modifier. Assuming it
   put white-on-white at 1.04:1 on bilingual-website-design.html. */
.cw-final .nl-note--dark,
.cw-section--dark .nl-note--dark {
  color: rgba(255, 255, 255, 0.62);
  opacity: 1;
}

/* the lp-system pages set a larger base size in their body copy blocks */
.lp-body .nl-note,
.lp-card .nl-note,
.lp-cta .nl-note {
  font-size: 13px;
  color: var(--cw-body, #585858);
}

.lp-cta .nl-note {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 560px) {
  .nl-note {
    font-size: 12.5px;
    max-width: none;
  }
}

/* niche.css sets .nl-money p to 16px, which outranks the 13px above by
   specificity and made the note read as body copy on the niche pages. */
.nl-money .nl-note,
.of-pitch .nl-note,
.cw-pricing .nl-note,
.ae-pricing .nl-note {
  font-size: 13px;
  line-height: 1.5;
  margin: 12px 0 0;
}

/* the homepage pricing header is a centred column (.ae-pricing__inner is
   text-align: center) and the sub below the note is a 560px auto-centred
   block. Without auto side margins the note's 46ch box pinned to the left
   edge while its text centred inside it. Centre the box and match the
   sub's measure so the two read as one block. The cw and niche pages are
   left-aligned columns and keep the plain left box. */
.ae-pricing .nl-note {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* it sits directly above the included-list on the niche pages and was reading
   as the first bullet's caption. Give it room on both sides. */
.nl-money .nl-note {
  margin: 16px 0 20px;
}

/* conversion pass 2026-09-30 */
.nl-hero__offer{margin:18px 0 10px;font:500 18px/1.4 "Plus Jakarta Sans",sans-serif;color:#fff;max-width:36ch}
.nl-hero__offer b{color:#d6fd70;font-weight:600}
.nl-form__guar{margin:12px 0 0;text-align:center;font:500 14px/1.4 "Plus Jakarta Sans",sans-serif;color:rgba(19,19,19,.75)}
.nl-vs__badge{display:inline-block;align-self:flex-start;margin-top:6px;padding:8px 14px;border-radius:999px;background:#d6fd70;color:#131313;font:600 14px/1.25 "Plus Jakarta Sans",sans-serif}
.nl-sticky{display:none}
@media (max-width:767px){
  .nl-sticky{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1.4fr;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(19,19,19,.96);transform:translateY(120%);transition:transform .25s ease}
  .nl-sticky.is-on{transform:none}
  .nl-sticky a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;font:600 15px/1 "Plus Jakarta Sans",sans-serif;text-decoration:none}
  .nl-sticky__call{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4)}
  .nl-sticky__cta{background:#d6fd70;color:#131313}
  .cw-footer{padding-bottom:96px}
}
.ae-cases .ae-cases__grid{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ae-cases .ae-cases__grid::-webkit-scrollbar{display:none}
.ae-cases .ae-cases__card{scroll-snap-align:start}
@media (max-width:768px){.ae-cases .ae-cases__nav--next{right:8px}.ae-cases .ae-cases__nav--prev{left:8px}}