/* Telal Works v5 (draft): Ramp-inspired calm, white, typographic look.
   White page, near-black ink, grey for supporting text, hairlines, small radii, one lime accent.
   So far only the header, hero and fact row are rebuilt; the rest of the page is still v4.
   Loads after v4.css. Every rule is scoped to .v5. Motion stays off. */

html.v5 {
  --x-bg: #FFFFFF;
  --x-ink: #0B0B0A;
  --x-grey: #6B6B66;
  --x-grey-2: #9A9A94;
  --x-line: #E7E7E3;
  --x-panel: #F5F5F2;
  --x-lime: #D7F45A;
  --x-lime-hover: #CBEA45;
  --x-wrap: 1200px;
  --x-gutter: clamp(16px, 4vw, 40px);
}
.v5 body { background: var(--x-bg); color: var(--x-ink); }

/* Header: white, hairline, small square-ish buttons */
.v5 .site-header { background: var(--x-bg); box-shadow: 0 1px 0 var(--x-line); }
.v5 .header-inner { min-height: 64px; }
.v5 .wordmark { font-size: 1.25rem; font-weight: 600; letter-spacing: -.03em; color: var(--x-ink); }
.v5 .wordmark::before { border-radius: 2px; box-shadow: none; }
.v5 .site-nav a { font-size: .9375rem; font-weight: 450; color: var(--x-ink); }
@media (hover: hover) { .v5 .site-nav a:hover { color: var(--x-grey); } }
.v5 .header-cta, .v5 .nav-cta-mobile .btn {
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--x-lime);
  color: var(--x-ink);
  font-size: .875rem;
  font-weight: 500;
  box-shadow: none;
}
@media (hover: hover) { .v5 .header-cta:hover, .v5 .nav-cta-mobile .btn:hover { background: var(--x-lime-hover); } }
.v5 .menu-toggle { border-radius: 6px; }

/* Hero: left-aligned, large regular-weight headline, grey lead */
.x-hero { max-width: var(--x-wrap); margin: 0 auto; padding: clamp(48px, 6vw, 80px) var(--x-gutter) 0; }
.x-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .8125rem; color: var(--x-grey); }
.x-tick { padding: 2px 8px; border-radius: 4px; background: var(--x-panel); box-shadow: inset 0 0 0 1px var(--x-line); color: var(--x-ink); font-variant-numeric: tabular-nums; }
.v5 .x-hero h1 {
  max-width: 14em;
  margin-top: 18px;
  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
  font-weight: 450;
  letter-spacing: -.04em;
  line-height: 1.02;
  color: var(--x-ink);
}
.v5 .x-hero h1 span { display: block; }
.x-lead { max-width: 34em; margin-top: 20px; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.55; color: var(--x-grey); }
.x-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.x-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 6px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--x-ink);
  text-decoration: none;
  transition: background-color .2s ease;
}
.x-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-btn-lime { background: var(--x-lime); }
.x-btn-ghost { background: var(--x-panel); }
@media (hover: hover) {
  .x-btn-lime:hover { background: var(--x-lime-hover); }
  .x-btn-ghost:hover { background: #ECECE8; }
}

/* Stage: one quiet panel with a dotted grid, a browser window and two resting cards */
.x-stage {
  position: relative;
  margin-top: clamp(48px, 6vw, 72px);
  padding: clamp(32px, 5vw, 64px) clamp(20px, 6vw, 96px) 0;
  border-radius: 12px;
  background:
    radial-gradient(rgba(11, 11, 10, .09) 1px, transparent 1.2px) 0 0 / 18px 18px,
    var(--x-panel);
  box-shadow: inset 0 0 0 1px var(--x-line);
  overflow: hidden;
}
.x-window {
  max-width: 880px;
  margin: 0 auto;
  border-radius: 10px 10px 0 0;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px var(--x-line), 0 24px 60px rgba(11, 11, 10, .08);
  overflow: hidden;
}
.x-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--x-line); }
.x-bar i { width: 9px; height: 9px; border-radius: 50%; background: #DADAD5; }
.x-bar span { margin-left: 10px; font-size: .75rem; color: var(--x-grey-2); }
.x-window img { display: block; width: 100%; height: clamp(240px, 34vw, 470px); object-fit: cover; object-position: top center; }

.x-card { position: absolute; padding: 18px 20px; border-radius: 10px; }
.x-card-k { font-size: .75rem; color: var(--x-grey); }
.x-card-s { margin-top: 6px; font-size: .75rem; color: var(--x-grey); }
.x-card-dark { left: clamp(12px, 3vw, 40px); bottom: clamp(24px, 4vw, 48px); width: 240px; background: var(--x-ink); color: #FFFFFF; box-shadow: 0 20px 40px rgba(11, 11, 10, .22); }
.x-card-dark .x-card-k, .x-card-dark .x-card-s { color: #A9A9A3; }
.x-card-big { margin-top: 18px; font-size: 1.375rem; font-weight: 500; letter-spacing: -.02em; }
.x-card-data { right: clamp(12px, 3vw, 40px); top: clamp(96px, 12vw, 150px); width: 260px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--x-line), 0 20px 40px rgba(11, 11, 10, .10); }
.x-card-num { margin-top: 8px; font-size: 1.5rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.x-card-num span { color: var(--x-grey-2); }
.x-card-num b { margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--x-lime); font-size: .75rem; font-weight: 500; letter-spacing: 0; vertical-align: 4px; }
.x-spark { display: block; width: 100%; height: 36px; margin-top: 10px; overflow: visible; }
.x-spark path { fill: none; stroke: var(--x-ink); stroke-width: 2; stroke-linecap: round; }
.x-spark circle { fill: var(--x-lime); stroke: var(--x-ink); stroke-width: 2; }

/* Fact row: one hairline band of small labelled numbers */
.x-facts { max-width: var(--x-wrap); margin: 0 auto; padding: 0 var(--x-gutter); }
.x-facts ul { display: flex; border-bottom: 1px solid var(--x-line); overflow-x: auto; scrollbar-width: none; }
.x-facts ul::-webkit-scrollbar { display: none; }
.x-facts li { flex: 1 0 auto; display: flex; align-items: baseline; gap: 10px; padding: 18px 20px; font-size: .8125rem; color: var(--x-grey); white-space: nowrap; }
.x-facts li:first-child { padding-left: 0; }
.x-facts li + li { border-left: 1px solid var(--x-line); }
.x-facts b { font-weight: 500; color: var(--x-ink); font-variant-numeric: tabular-nums; }

/* Tablet and phone */
@media (max-width: 900px) {
  .x-card-data { display: none; }
}
@media (max-width: 640px) {
  .x-ctas .x-btn { flex: 1 1 100%; justify-content: center; }
  .x-stage { padding: 20px 12px 0; }
  .x-card-dark { position: relative; left: auto; bottom: auto; width: auto; margin: 12px 0 12px; }
}

/* Header: menu sits left, next to the logo (desktop only; phones keep the Menu button) */
@media (min-width: 881px) {
  .v5 .header-inner { justify-content: flex-start; }
  .v5 .site-nav { margin-left: 36px; margin-right: auto; }
}

/* Free website check: one quiet row, like Ramp's email field */
.x-check { max-width: 680px; margin-top: 32px; }
.x-check-row { display: flex; gap: 8px; padding: 6px; border-radius: 8px; background: var(--x-panel); box-shadow: inset 0 0 0 1px var(--x-line); }
.x-check-row input {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--x-line);
  font: inherit;
  font-size: .9375rem;
  color: var(--x-ink);
}
.x-check-row input::placeholder { color: var(--x-grey-2); }
.x-check-row input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--x-ink); }
.x-check-row .x-btn { flex: 0 0 auto; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
.x-check-row .x-btn[disabled] { opacity: .6; cursor: default; }
.x-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.x-check-note { margin-top: 10px; font-size: .8125rem; color: var(--x-grey); }
.x-check-note.is-error { color: #B42318; }
.x-alt { margin-top: 18px; font-size: .875rem; color: var(--x-grey); }
.x-alt a { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; color: var(--x-ink); font-weight: 500; text-decoration: none; }
.x-alt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .x-alt a:hover { text-decoration: underline; text-underline-offset: 4px; } }
@media (max-width: 640px) {
  .x-check-row { flex-direction: column; }
  .x-check-row .x-btn { justify-content: center; }
}

/* Services: Ramp-style card grid. Two-tone titles, quiet sand cards, visuals resting at the bottom */
.x-svc { max-width: var(--x-wrap); margin: 0 auto; padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0; }
.v5 .x-svc h2 { max-width: 20em; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.08; color: var(--x-ink); }
.v5 .x-svc h2 span { display: block; color: var(--x-grey); }
.x-svc-head .x-ctas { margin-top: 28px; }
.x-svc-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.x-svc-card {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 24px 24px 0;
  border-radius: 10px;
  background: var(--x-panel);
  box-shadow: inset 0 0 0 1px var(--x-line);
  color: var(--x-ink);
  text-decoration: none;
  overflow: hidden;
  transition: background-color .2s ease;
}
.x-svc-wide { grid-column: span 3; min-height: 460px; }
@media (hover: hover) { .x-svc-card:hover { background: #F0F0EC; } .x-svc-card:hover .x-go { background: var(--x-lime); } }
.v5 .x-svc-card h3 { max-width: 15em; padding-right: 48px; font-size: 1.375rem; font-weight: 450; letter-spacing: -.02em; line-height: 1.2; }
.v5 .x-svc-card h3 span { color: var(--x-grey); }
.x-go { position: absolute; top: 20px; right: 20px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--x-line); transition: background-color .2s ease; }
.x-go svg { width: 15px; height: 15px; fill: none; stroke: var(--x-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-svc-note { max-width: 30em; margin-top: 10px; font-size: .875rem; line-height: 1.5; color: var(--x-grey); }
.x-svc-vis { position: relative; flex: 1 1 auto; min-height: 210px; margin: 24px -24px 0; }
.x-vis-k { font-size: .75rem; color: var(--x-grey); }

/* Websites: two screenshots resting on each other */
.x-svc-vis img { display: block; object-fit: cover; object-position: top center; border-radius: 6px; box-shadow: 0 0 0 1px var(--x-line), 0 16px 36px rgba(11, 11, 10, .10); }
.x-vis-back { position: absolute; right: 24px; top: 0; width: 58%; height: auto; aspect-ratio: 16 / 10; opacity: .9; }
.x-vis-front { position: absolute; left: 24px; bottom: -24px; width: 66%; height: auto; aspect-ratio: 16 / 10; }

/* Local search: report card with a small result card */
.x-vis-report { position: absolute; left: 24px; top: 0; width: min(78%, 400px); padding: 16px 18px 8px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--x-line), 0 16px 36px rgba(11, 11, 10, .06); }
.x-vis-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid var(--x-line); font-size: .8125rem; }
.x-vis-report .x-vis-k { margin-bottom: 6px; }
.x-vis-row span { color: var(--x-grey); }
.x-vis-mini { position: absolute; right: 24px; bottom: 24px; padding: 14px 16px; border-radius: 8px; background: var(--x-ink); color: #FFFFFF; box-shadow: 0 16px 36px rgba(11, 11, 10, .18); }
.x-vis-mini .x-vis-k { color: #A9A9A3; }
.x-vis-num { margin-top: 6px; font-size: 1.25rem; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.x-vis-num span { color: #8C8C86; }
.x-vis-num b { margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--x-lime); color: var(--x-ink); font-size: .75rem; font-weight: 500; letter-spacing: 0; vertical-align: 3px; }

/* Customer tools: the real calculator screenshot */
.x-vis-tool { position: absolute; left: 24px; right: 24px; top: 0; width: calc(100% - 48px); height: calc(100% + 12px); object-position: top left; }

/* Video: the YouTube number on a dark card */
.x-vis-yt { position: absolute; left: 24px; right: 24px; top: 0; padding: 20px; border-radius: 8px; background: var(--x-ink); color: #FFFFFF; }
.x-vis-yt .x-vis-k, .x-vis-s { color: #A9A9A3; }
.x-vis-big { margin-top: 26px; font-size: 2.75rem; font-weight: 450; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.x-vis-s { margin-top: 8px; font-size: .8125rem; }

/* Ongoing care: three rows with a lime tick */
.x-vis-ticks { position: absolute; left: 24px; right: 24px; top: 0; padding: 6px 16px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--x-line); }
.x-vis-ticks li { display: flex; align-items: center; gap: 10px; padding: 12px 0; font-size: .875rem; }
.x-vis-ticks li + li { border-top: 1px solid var(--x-line); }
.x-vis-ticks li::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  border-radius: 4px;
  background: var(--x-lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0B0A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat;
}

@media (max-width: 980px) {
  .x-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-svc-card, .x-svc-wide { grid-column: span 1; }
  .x-svc-wide { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .x-svc-grid { grid-template-columns: minmax(0, 1fr); }
  .x-svc-card, .x-svc-wide { grid-column: auto; min-height: 380px; }
}

/* Features: Ramp-style hairline grid, like their logo wall. Plain line icons, no tiles */
.x-feats { max-width: var(--x-wrap); margin: 0 auto; padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0; }
.v5 .x-feats h2 { max-width: 22em; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.15; color: var(--x-ink); }
.v5 .x-feats h2 span { color: var(--x-grey); }
.x-feat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--x-line); border-left: 1px solid var(--x-line); }
.x-feat-grid li { padding: 28px 24px 32px; border-right: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); background: var(--x-bg); }
.x-feat-ico { display: block; width: 22px; height: 22px; fill: none; stroke: var(--x-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.v5 .x-feat-grid h3 { margin-top: 28px; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; color: var(--x-ink); }
.x-feat-grid p { margin-top: 6px; font-size: .875rem; line-height: 1.5; color: var(--x-grey); }
@media (max-width: 980px) { .x-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .x-feat-grid { grid-template-columns: minmax(0, 1fr); } .x-feat-grid h3 { margin-top: 16px; } }

/* Case study: Ramp-style split. Two-tone headline and big numbers left, one quiet panel right */
.x-case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  max-width: var(--x-wrap);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0;
}
.x-case-meta { font-size: .8125rem; color: var(--x-grey); }
.v5 .x-case h2 { margin-top: 14px; font-size: clamp(1.875rem, 3.2vw, 2.75rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.1; color: var(--x-ink); }
.v5 .x-case h2 span { color: var(--x-grey); }
.x-case-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px; border-top: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); }
.x-case-nums div { padding: 20px 0 22px; }
.x-case-nums div + div { padding-left: 24px; border-left: 1px solid var(--x-line); }
.x-case-nums dt { font-size: .8125rem; color: var(--x-grey); }
.x-case-nums dd { margin: 8px 0 0; font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 450; letter-spacing: -.04em; line-height: 1; color: var(--x-ink); font-variant-numeric: tabular-nums; }
.x-case-nums dd.x-from { margin-top: 8px; font-size: .875rem; letter-spacing: 0; color: var(--x-grey); }
.x-case-src { margin-top: 14px; font-size: .75rem; color: var(--x-grey-2); }
.x-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-size: .9375rem; font-weight: 500; color: var(--x-ink); text-decoration: none; }
.x-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .x-link:hover { text-decoration: underline; text-underline-offset: 4px; } }

.x-case-stage {
  position: relative;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px) 0;
  border-radius: 12px;
  background:
    radial-gradient(rgba(11, 11, 10, .09) 1px, transparent 1.2px) 0 0 / 18px 18px,
    var(--x-panel);
  box-shadow: inset 0 0 0 1px var(--x-line);
  overflow: hidden;
}
.x-case-window { max-width: none; }
.x-case-window img { height: clamp(260px, 30vw, 420px); object-position: top left; }
.x-case-tile { position: absolute; right: clamp(12px, 2vw, 24px); bottom: clamp(16px, 2.5vw, 28px); width: 220px; padding: 18px 20px; border-radius: 10px; background: var(--x-ink); color: #FFFFFF; box-shadow: 0 20px 40px rgba(11, 11, 10, .22); }
.x-case-tile-big { font-size: 2.25rem; font-weight: 450; letter-spacing: -.04em; line-height: 1; color: var(--x-lime); font-variant-numeric: tabular-nums; }
.x-case-tile-s { margin-top: 8px; font-size: .8125rem; color: #A9A9A3; }

@media (max-width: 980px) {
  .x-case { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .x-case-tile { position: relative; right: auto; bottom: auto; width: auto; margin: 12px 0 16px; }
  .x-case-nums div + div { padding-left: 16px; }
}

/* Client websites: hairline grid, one wide cell and one dark tile (like Ramp's logo wall) */
.x-work { max-width: var(--x-wrap); margin: 0 auto; padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0; }
.v5 .x-work h2 { max-width: 20em; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.15; color: var(--x-ink); }
.v5 .x-work h2 span { color: var(--x-grey); }
.x-wgrid { container-type: inline-size; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--x-line); border-left: 1px solid var(--x-line); }
.x-site { display: flex; flex-direction: column; padding: 24px 24px 28px; border-right: 1px solid var(--x-line); border-bottom: 1px solid var(--x-line); color: var(--x-ink); text-decoration: none; transition: background-color .2s ease; }
@media (hover: hover) { .x-site:hover { background: var(--x-panel); } }
.x-site img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: 6px; box-shadow: 0 0 0 1px var(--x-line); }
.x-site-wide { grid-column: span 2; }
.x-site-wide img { aspect-ratio: auto; height: calc((100cqw / 3 - 48px) * .625); }
.x-site-l { margin-top: 16px; font-size: .8125rem; color: var(--x-grey); }
.x-site-t { margin-top: 4px; font-size: 1rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; }
.x-site-dark { justify-content: flex-end; background: var(--x-ink); color: #FFFFFF; }
@media (hover: hover) { .x-site-dark:hover { background: #1E1E1C; } }
.x-site-big { font-size: 1.75rem; font-weight: 450; letter-spacing: -.03em; line-height: 1.1; }
.x-site-s { margin-top: 10px; font-size: .875rem; line-height: 1.5; color: #A9A9A3; }
.x-site-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; font-size: .9375rem; font-weight: 500; color: var(--x-lime); }
.x-site-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 980px) {
  .x-wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-site-wide { grid-column: 1 / -1; }
  .x-site-wide img { height: calc((100cqw / 2 - 48px) * .625); }
}
@media (max-width: 640px) {
  .x-wgrid { grid-template-columns: minmax(0, 1fr); }
  .x-site-wide img { height: auto; aspect-ratio: 16 / 10; }
  .x-site-dark { min-height: 240px; }
}

/* How I work: two-tone heading left (stays in view), ruled list right */
.x-why {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
  max-width: var(--x-wrap);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0;
}
.x-why-head { position: sticky; top: 96px; }
.v5 .x-why h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.15; color: var(--x-ink); }
.v5 .x-why h2 span { display: block; max-width: 26em; margin-top: 18px; font-size: clamp(1rem, 1.2vw, 1.125rem); letter-spacing: 0; line-height: 1.55; color: var(--x-grey); }
.x-why-list { border-top: 1px solid var(--x-line); }
.x-why-list li { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 8px 32px; padding: 26px 0 28px; border-bottom: 1px solid var(--x-line); }
.x-why-bad { grid-row: span 2; font-size: .875rem; color: var(--x-grey); }
.x-why-bad s { text-decoration-thickness: 1px; }
.v5 .x-why-list h3 { font-size: 1.25rem; font-weight: 450; letter-spacing: -.02em; line-height: 1.25; color: var(--x-ink); }
.x-why-text { font-size: .9375rem; line-height: 1.55; color: var(--x-grey); }

@media (max-width: 980px) {
  .x-why { grid-template-columns: minmax(0, 1fr); }
  .x-why-head { position: static; }
}
@media (max-width: 640px) {
  .x-why-list li { grid-template-columns: minmax(0, 1fr); }
  .x-why-bad { grid-row: auto; }
}

/* Reviews: one large quote on a quiet panel, two smaller ones beside it, all ruled */
.x-rev { max-width: var(--x-wrap); margin: 0 auto; padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0; }
.v5 .x-rev h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.15; color: var(--x-ink); }
.v5 .x-rev h2 span { color: var(--x-grey); }
.x-rev-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin-top: 48px; border: 1px solid var(--x-line); border-radius: 10px; overflow: hidden; }
.x-quote { display: flex; flex-direction: column; justify-content: space-between; gap: 28px; margin: 0; padding: clamp(24px, 3vw, 40px); }
.x-quote blockquote { margin: 0; }
.x-quote blockquote p { font-size: 1.25rem; font-weight: 450; letter-spacing: -.02em; line-height: 1.35; color: var(--x-ink); }
.x-quote-big { background: var(--x-panel); }
.x-quote-big blockquote p { max-width: 16em; font-size: clamp(1.75rem, 3vw, 2.5rem); letter-spacing: -.035em; line-height: 1.15; }
.x-quote figcaption { display: flex; flex-direction: column; gap: 2px; font-size: .8125rem; color: var(--x-ink); }
.x-quote-p { color: var(--x-grey); }
.x-rev-side { display: grid; grid-template-rows: 1fr 1fr; border-left: 1px solid var(--x-line); }
.x-rev-side .x-quote + .x-quote { border-top: 1px solid var(--x-line); }
.x-rev-ref { margin-top: 16px; font-size: .8125rem; color: var(--x-grey); }

@media (max-width: 860px) {
  .x-rev-grid { grid-template-columns: minmax(0, 1fr); }
  .x-rev-side { border-left: 0; border-top: 1px solid var(--x-line); }
  .x-quote-big blockquote p { font-size: 1.625rem; }
}

/* About: story left, large drum right on the white page (no box), small round B&W portrait in the signature */
.x-about {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: var(--x-wrap);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 128px) var(--x-gutter) clamp(80px, 10vw, 128px);
}
.v5 .x-about h2 { margin-top: 14px; font-size: clamp(1.875rem, 3.4vw, 2.875rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.1; color: var(--x-ink); }
.v5 .x-about h2 span { display: block; color: var(--x-grey); }
.x-about-copy > p:not(.x-case-meta) { max-width: 32em; margin-top: 18px; font-size: 1.0625rem; line-height: 1.6; color: var(--x-grey); }
.x-sign { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--x-line); }
.x-sign img { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; filter: grayscale(1); }
.x-sign-n { font-size: .9375rem; font-weight: 500; color: var(--x-ink); }
.x-sign-m { margin-top: 2px; font-size: .8125rem; color: var(--x-grey); }
.x-about-art { position: relative; margin: 0; }
.x-about-art img { display: block; width: 100%; height: auto; }
.x-word { position: absolute; left: 4%; bottom: -4%; padding: 12px 16px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--x-line), 0 12px 28px rgba(11, 11, 10, .08); font-size: .9375rem; color: var(--x-ink); }
.x-word i { color: var(--x-grey); }
.x-word span { display: block; margin-top: 2px; font-size: .8125rem; color: var(--x-grey); }

@media (max-width: 860px) {
  .x-about { grid-template-columns: minmax(0, 1fr); }
  .x-about-art { max-width: 520px; }
}

/* Pricing: same approved content and toggle as v4, restyled. Plans joined in one ruled group, one dark plan */
.v5 .r-pricing { background: var(--x-bg); }
.v5 .r-price-in { max-width: var(--x-wrap); padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0; }
.v5 .r-price-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 48px; }
.v5 .r-pricing .r-chip { display: none; }
.v5 .r-pricing h2 { max-width: 18em; margin-top: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.15; color: var(--x-ink); }
.v5 .r-price-lead { max-width: 34em; font-size: 1.0625rem; color: var(--x-grey); }

.v5 .r-plans { gap: 0; border: 1px solid var(--x-line); border-radius: 10px; overflow: hidden; }
.v5 .r-plan { padding: 28px 24px; border-radius: 0; background: var(--x-bg); }
.v5 .r-plan + .r-plan { border-left: 1px solid var(--x-line); }
.v5 .r-plan h3 { font-size: 1rem; font-weight: 500; }
.v5 .r-plan-badge { margin-bottom: 14px; padding: 2px 8px; border-radius: 4px; font-weight: 500; }
.v5 .r-plan-price b { font-size: 2.25rem; font-weight: 450; letter-spacing: -.04em; }
.v5 .r-plan-price span, .v5 .r-plan-note { color: var(--x-grey); }
.v5 .r-plan ul { border-top-color: var(--x-line); }
.v5 .r-plan li { font-size: .9063rem; color: var(--x-ink); }
.v5 .r-plan li svg { padding: 3px; border-radius: 4px; }
.v5 .r-plan-care { border-top-color: var(--x-line); font-weight: 500; color: var(--x-grey); }
.v5 .r-plan-feat { background: var(--x-ink); }
.v5 .r-plan-feat + .r-plan { border-left-color: var(--x-ink); }
.v5 .r-plan-feat .r-plan-price span, .v5 .r-plan-feat .r-plan-note, .v5 .r-plan-feat .r-plan-care { color: #A9A9A3; }
.v5 .r-plan-feat .r-plan-note b { font-weight: 500; }
.v5 .r-plan-feat li { color: #FFFFFF; }
.v5 .r-plan-feat ul, .v5 .r-plan-feat .r-plan-care { border-color: rgba(255, 255, 255, .14); }

.v5 .r-care { margin-top: 16px; padding: 0; border-radius: 10px; box-shadow: none; border: 1px solid var(--x-line); overflow: hidden; }
.v5 .r-care-head { margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--x-line); }
.v5 .r-care-head h3 { font-size: 1rem; font-weight: 500; }
.v5 .r-toggle { padding: 3px; border-radius: 8px; background: var(--x-panel); box-shadow: inset 0 0 0 1px var(--x-line); }
.v5 .r-toggle button { min-height: 32px; padding: 0 12px; border-radius: 6px; }
.v5 .r-toggle button[aria-pressed="true"] { background: var(--x-ink); }
.v5 .r-care-grid { gap: 0; }
.v5 .r-care-card { padding: 22px 24px 24px; border-radius: 0; background: var(--x-bg); }
.v5 .r-care-card + .r-care-card { border-left: 1px solid var(--x-line); }
.v5 .r-care-card h4 { font-weight: 500; }
.v5 .r-care-price b { font-weight: 450; letter-spacing: -.035em; }
.v5 .r-care-price span, .v5 .r-care-card > p:last-child { color: var(--x-grey); }

.v5 .r-price-notes { margin-top: 32px; }
.v5 .r-price-notes li { font-size: .875rem; color: var(--x-grey); }
.v5 .r-price-notes b { font-weight: 500; color: var(--x-ink); }
.v5 .r-pricing + .d-frame { border-top: 0; }

@media (max-width: 1100px) {
  .v5 .r-plan + .r-plan { border-left: 0; }
  .v5 .r-plan:nth-child(even) { border-left: 1px solid var(--x-line); }
  .v5 .r-plan:nth-child(n + 3) { border-top: 1px solid var(--x-line); }
}
@media (max-width: 860px) {
  .v5 .r-care-card + .r-care-card { border-left: 0; border-top: 1px solid var(--x-line); }
}
@media (max-width: 640px) {
  .v5 .r-plan:nth-child(even) { border-left: 0; }
  .v5 .r-plan + .r-plan { border-top: 1px solid var(--x-line); }
}

/* Frame: in v5 the old framed sheet becomes the plain white page, aligned with the other sections */
.v5 .d-frame { max-width: var(--x-wrap); border: 0; background: none; }
.v5 .d-frame .d-sec { border-top: 0; }

/* FAQ: heading left, questions right as a ruled list with a small plus. Same questions and answers */
.v5 .d-faq .d-pad { padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0; }
.v5 .d-faq .d-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.v5 .d-faq .d-label { display: none; }
.v5 .d-faq h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.15; color: var(--x-ink); }
.v5 .d-faq .d-desc { margin-top: 12px; font-size: 1.0625rem; color: var(--x-grey); }
.v5 .faq-list { gap: 0; border-top: 1px solid var(--x-line); }
.v5 .qa { border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--x-line); }
.v5 .qa summary { min-height: 68px; padding: 18px 0; font-size: 1.0625rem; font-weight: 450; letter-spacing: -.01em; color: var(--x-ink); }
.v5 .qa summary:focus-visible { border-radius: 4px; }
.v5 .qa-icon { width: 28px; height: 28px; border-radius: 6px; background: var(--x-panel); box-shadow: inset 0 0 0 1px var(--x-line); }
.v5 .qa-icon::before, .v5 .qa-icon::after { width: 12px; margin-left: -6px; height: 1.5px; }
.v5 .qa[open] .qa-icon { background: var(--x-lime); box-shadow: none; }
@media (hover: hover) {
  .v5 .qa summary:hover .qa-icon { background: #ECECE8; }
  .v5 .qa[open] summary:hover .qa-icon { background: var(--x-lime-hover); }
}
.v5 .qa p { max-width: 34em; padding: 0 48px 22px 0; font-size: .9375rem; line-height: 1.6; color: var(--x-grey); }
@media (max-width: 980px) {
  .v5 .d-faq .d-split { grid-template-columns: minmax(0, 1fr); }
}

/* Contact: same five-step form and copy, restyled. Ink card with small radius, calm fields, 6px buttons */
.v5 .d-cta { padding: clamp(80px, 10vw, 128px) var(--x-gutter); }
.v5 .d-cta .ct-panel { padding: clamp(28px, 5vw, 64px); border-radius: 12px; background: var(--x-ink); }
.v5 .d-cta .d-label { display: none; }
.v5 .d-cta .ct-intro h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 450; letter-spacing: -.035em; line-height: 1.08; color: #FFFFFF; }
.v5 .d-cta .ct-lead { font-size: 1.0625rem; line-height: 1.6; color: #A9A9A3; }
.v5 .ct-ways { display: grid; gap: 0; margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.v5 .ct-ways li { padding: 14px 0; border-radius: 0; background: none; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: .9375rem; color: #A9A9A3; }
.v5 .ct-ways b { font-weight: 500; color: #FFFFFF; }
.v5 .ct-ways a { color: var(--x-lime); text-underline-offset: 3px; }

.v5 .d-cta .ct-form { border-radius: 10px; box-shadow: none; }
.v5 .ct-step-count { font-weight: 500; color: var(--x-grey); }
.v5 .ct-bar i { border-radius: 2px; background: var(--x-line); }
.v5 .ct-bar i.is-done { background: var(--x-ink); }
.v5 .ct-step legend { font-size: clamp(1.5rem, 2.4vw, 1.875rem); font-weight: 450; letter-spacing: -.03em; color: var(--x-ink); }
.v5 .ct-hint { font-size: .875rem; color: var(--x-grey); }
.v5 .ct-opt span { min-height: 56px; padding: 14px 16px; border-radius: 8px; background: var(--x-bg); box-shadow: inset 0 0 0 1px var(--x-line); font-size: .9375rem; font-weight: 450; color: var(--x-ink); }
@media (hover: hover) { .v5 .ct-opt:hover span { background: var(--x-panel); } }
.v5 .ct-opt span::after { width: 20px; height: 20px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgba(11, 11, 10, .25); }
.v5 .ct-opt input:checked + span { background: var(--x-ink); color: #FFFFFF; box-shadow: none; }
.v5 .ct-opt input:checked + span::after { border-radius: 4px; background-color: var(--x-lime); }
.v5 .ct-opt input:focus-visible + span { outline: 2px solid var(--x-ink); outline-offset: 2px; }
.v5 .ct-field label { font-weight: 500; color: var(--x-ink); }
.v5 .ct-field input, .v5 .ct-field textarea { min-height: 46px; padding: 12px 14px; border-radius: 6px; background: var(--x-bg); box-shadow: inset 0 0 0 1px var(--x-line); font-size: .9375rem; }
.v5 .ct-field input:focus-visible, .v5 .ct-field textarea:focus-visible { outline: 2px solid var(--x-ink); outline-offset: 1px; }
.v5 .ct-nav .btn { min-height: 44px; padding: 0 18px; border-radius: 6px; background: var(--x-lime); color: var(--x-ink); font-size: .9375rem; font-weight: 500; }
@media (hover: hover) { .v5 .ct-nav .btn:hover { background: var(--x-lime-hover); } }
.v5 .ct-back { font-weight: 500; color: var(--x-grey); }
.v5 .ct-done-tag { border-radius: 4px; background: var(--x-lime); color: var(--x-ink); }

/* Footer: white page, one hairline above, logo and line left, three link columns, small bottom row */
.v5 .d-footer { background: var(--x-bg); border-top: 0; }
.v5 .d-footer-in { max-width: var(--x-wrap); padding: 56px var(--x-gutter) 48px; border: 0; position: relative; }
.v5 .d-footer-in::before { content: ""; position: absolute; top: 0; left: var(--x-gutter); right: var(--x-gutter); border-top: 1px solid var(--x-line); }
.v5 .d-ft-logo { font-size: 1.125rem; font-weight: 600; letter-spacing: -.03em; color: var(--x-ink); }
.v5 .d-ft-logo::before { border-radius: 2px; box-shadow: none; }
.v5 .d-ft-brand p { color: var(--x-grey); }
.v5 .d-ft-head { font-weight: 500; color: var(--x-ink); }
.v5 .d-ft-col li, .v5 .d-ft-col a { color: var(--x-grey); }
@media (hover: hover) { .v5 .d-ft-col a:hover { color: var(--x-ink); } }
.v5 .d-ft-bottom { max-width: var(--x-wrap); padding: 18px var(--x-gutter) 32px; border: 0; position: relative; color: var(--x-grey); }
.v5 .d-ft-bottom::before { content: ""; position: absolute; top: 0; left: var(--x-gutter); right: var(--x-gutter); border-top: 1px solid var(--x-line); }
.v5 .d-ft-bottom a { color: var(--x-ink); }
@media (max-width: 640px) {
  .v5 .d-footer-in { padding: 40px var(--x-gutter) 32px; }
  .v5 .d-ft-bottom { padding: 18px var(--x-gutter) 28px; }
}

/* Logo (his SVG): image logo replaces the text wordmark and its lime square */
.v5 .x-logo::before { display: none; }
.v5 .x-logo img { display: block; width: auto; height: 28px; }
.v5 .d-ft-logo.x-logo img { height: 26px; }
@media (max-width: 640px) { .v5 .wordmark.x-logo img { height: 24px; } }

/* Project cards (2026-10-25): a native <dialog> per client site. No motion: it appears and closes instantly. */
.x-site[data-project] { cursor: pointer; }
.x-btn-dark { background: var(--x-ink); color: #FFFFFF; }
@media (hover: hover) { .x-btn-dark:hover { background: #2A2A27; } }
.x-proj { width: min(680px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--x-line); border-radius: 12px; background: #FFFFFF; color: var(--x-ink); box-shadow: 0 24px 64px rgba(11, 11, 10, .18); overflow: auto; overscroll-behavior: contain; }
.x-proj::backdrop { background: rgba(11, 11, 10, .55); }
.x-proj-in { position: relative; }
.x-proj-x { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--x-line); border-radius: 6px; background: #FFFFFF; color: var(--x-ink); cursor: pointer; }
@media (hover: hover) { .x-proj-x:hover { background: var(--x-panel); } }
.x-proj-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.x-proj-shot { padding: 12px 12px 0; }
.x-proj-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top center; border-radius: 8px; box-shadow: 0 0 0 1px var(--x-line); }
.x-proj-body { padding: 24px 28px 28px; }
.x-proj-l { margin: 0; font-size: .8125rem; color: var(--x-grey); }
.v5 .x-proj h3 { margin: 6px 0 0; font-size: 1.5rem; font-weight: 450; letter-spacing: -.025em; line-height: 1.2; color: var(--x-ink); }
.x-proj-d { margin: 12px 0 0; font-size: 1rem; line-height: 1.6; color: var(--x-grey); }
.x-proj-did { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.x-proj-did li { padding: 5px 10px; border: 1px solid var(--x-line); border-radius: 6px; font-size: .8125rem; color: var(--x-ink); }
.x-proj-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--x-line); }
.x-proj-acts .x-btn { border: 0; cursor: pointer; font-family: inherit; }
html.x-proj-open { overflow: hidden; }
@media (max-width: 560px) {
  .x-proj-body { padding: 20px 20px 22px; }
  .v5 .x-proj h3 { font-size: 1.25rem; }
  .x-proj-acts .x-btn { flex: 1 1 100%; justify-content: center; }
}
.x-proj-soon { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0 4px; min-height: 44px; font-size: .9375rem; color: var(--x-grey); }
.x-proj-soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--x-lime); box-shadow: 0 0 0 1px rgba(11, 11, 10, .25); }

/* Industry pages (2026-11-02): /farm-website-design/ reuses the homepage sections. These are the few extras. */
.x-crumbs a { color: var(--x-ink); text-decoration: none; }
@media (hover: hover) { .x-crumbs a:hover { color: var(--x-grey); } }
.x-feat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .x-feat-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .x-feat-grid-3 { grid-template-columns: minmax(0, 1fr); } }
.x-site-visit { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: .875rem; font-weight: 500; color: var(--x-ink); }
.x-site-visit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.x-end { max-width: var(--x-wrap); margin: 0 auto; padding: clamp(80px, 10vw, 128px) var(--x-gutter) clamp(80px, 10vw, 128px); border-top: 1px solid var(--x-line); }
.v5 .x-end h2 { max-width: 22em; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.15; color: var(--x-ink); }
.v5 .x-end h2 span { color: var(--x-grey); }
.d-ft-head-2 { margin-top: 24px; }
/* Ecommerce page (2026-11-02): four case numbers, screenshot gallery with captions */
.x-case-nums-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-case-nums-4 div:nth-child(3) { padding-left: 0; border-left: 0; }
.x-case-nums-4 div:nth-child(n+3) { border-top: 1px solid var(--x-line); }
.x-shot { margin: 0; }
.x-shot figcaption { margin-top: 12px; font-size: .875rem; line-height: 1.5; color: var(--x-grey); }
.x-gal { max-width: var(--x-wrap); margin: 0 auto; padding: clamp(80px, 10vw, 128px) var(--x-gutter) 0; }
.v5 .x-gal h2 { max-width: 22em; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 450; letter-spacing: -.03em; line-height: 1.15; color: var(--x-ink); }
.v5 .x-gal h2 span { color: var(--x-grey); }
.x-gal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; margin-top: 48px; }
.x-gal-grid .x-window img, .x-case-stage .x-shot img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .x-gal-grid { grid-template-columns: minmax(0, 1fr); } }