/*
  Lilypad notebook reset.
  One visual layer for the calm botanical notebook direction.
*/

:root {
  --paper: var(--color-paper, #fefee3);
  --paper-outer: var(--color-page-bg, #f7f6dc);
  --paper-warm: var(--color-paper-warm, #fff7df);
  --paper-panel: var(--color-paper-panel, #fffbe7);
  --ink: #073923;
  --ink-soft: #315e43;
  --pond: #0e332a;
  --pond-2: #0b3d25;
  --pond-3: #194f33;
  --leaf: #2c6e49;
  --fresh: #569e76;
  --sage: #c9d8b9;
  --moss: #6f8557;
  --blush: #f9b8c4;
  --blush-2: #ffd8cf;
  --clay: #d68c45;
  --cream-line: rgb(44 110 73 / 0.14);
  --cream-line-strong: rgb(44 110 73 / 0.28);
  --sheet-line: rgb(44 110 73 / 0.105);
  --panel-line: rgb(44 110 73 / 0.075);
  --line-paper-soft: rgb(254 254 227 / 0.18);
  --line-pond-soft: rgb(14 51 42 / 0.18);
  --line-blush-soft: rgb(249 184 196 / 0.28);
  --touch-target: 2.75rem;
  --shadow: 0 1.35rem 2.7rem rgb(14 51 42 / 0.16);
  --shadow-soft: 0 0.75rem 1.5rem rgb(14 51 42 / 0.11);
  --sheet-shadow: 0 1.65rem 4.5rem rgb(14 51 42 / 0.13);
  --container-wide: min(96rem, calc(100vw - clamp(1rem, 4vw, 4rem)));
  --container: min(86rem, calc(100vw - clamp(1rem, 4vw, 4rem)));
  --page-gap: clamp(0.65rem, 1.45vw, 1.1rem);
  --grid-size: 34px;
}

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

html {
  background: var(--paper);
  color: var(--ink);
  scroll-behavior: smooth;
  scroll-padding-top: 7.5rem;
}

body {
  margin: 0;
  min-width: 0;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper-outer);
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

::selection {
  color: var(--pond);
  background: var(--blush);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.8rem;
  left: 0.8rem;
  z-index: 100;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  color: var(--pond);
  background: var(--blush);
  transform: translateY(-150%);
  transition: transform 180ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

/* ----------------------------------------------------------------
   Reusable decoration components — Phase 1b foundation.
   .stamp-seal:    hand-stamped badge PNG anchored to a section corner.
   .botanical-sprig: dark-recolored line-icon as quiet margin decoration.
   Both are presentational; pointer-events disabled, hidden on small mobile.
---------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: clamp(0.45rem, 1.4vw, 0.85rem);
  z-index: 20;
  view-transition-name: site-header;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  width: var(--container-wide);
  min-height: clamp(4.2rem, 6vw, 5.25rem);
  margin: clamp(0.45rem, 1.4vw, 0.85rem) auto 0;
  padding: 0.75rem clamp(1rem, 2.2vw, 2rem);
  border: 1px solid rgb(254 254 227 / 0.18);
  border-radius: 1.1rem;
  color: var(--paper);
  background: var(--pond);
  box-shadow: 0 0.85rem 1.8rem rgb(14 51 42 / 0.22);
}

.brand,
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.68rem;
  width: fit-content;
  min-width: max-content;
  min-height: var(--touch-target);
}

.brand__mark,
.footer-brand img {
  width: clamp(2.7rem, 3.45vw, 3.15rem);
  height: clamp(2.7rem, 3.45vw, 3.15rem);
  padding: 0.32rem;
  border-radius: 50%;
  background: var(--paper);
  object-fit: contain;
  object-position: center 54%;
  filter: drop-shadow(0 0.25rem 0.45rem rgb(0 0 0 / 0.2));
}

.brand__name,
.footer-brand span {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 0.85;
  letter-spacing: 0;
  transform: translateY(0.08em);
}

.site-nav {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(1.3rem, 4vw, 4.4rem);
}

.site-nav a,
.footer-nav a,
.footer-legal button {
  position: relative;
  border: 0;
  color: inherit;
  background: transparent;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: 0;
}

.site-nav a,
.footer-nav a {
  font-size: clamp(1.32rem, 2vw, 1.72rem);
  line-height: 1;
}

.site-nav a {
  padding: 0.65rem 0.1rem;
  color: rgb(254 254 227 / 0.88);
}

.site-nav a::after,
.footer-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.38rem;
  height: 2px;
  border-radius: 999px;
  background: var(--blush);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.site-nav a:hover::after,
.site-nav a.is-active::after,
.site-nav a[aria-current="page"]::after,
.footer-nav a:hover::after {
  transform: scaleX(1);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.55rem;
}

.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 3rem;
  border-radius: 999px;
  border: 1px solid rgb(44 110 73 / 0.28);
  font-weight: 900;
  line-height: 1;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.header-cta {
  color: var(--pond);
  background: var(--blush);
  box-shadow: 0 0.55rem 0.95rem rgb(214 140 69 / 0.18), inset 0 1px rgb(255 255 255 / 0.65);
}

.header-cta {
  min-height: 2.9rem;
  padding: 0.2rem 1.25rem;
  white-space: nowrap;
}

.button {
  padding: 0.25rem 1.5rem;
}

.header-cta:hover,
.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0) scale(0.99);
}

.menu-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgb(14 51 42 / 0.18);
  border-radius: 999px;
  background: var(--blush);
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 1.15rem;
  height: 2px;
  margin: 0.25rem auto;
  border-radius: 999px;
  background: var(--pond);
}

main {
  width: var(--container-wide);
  margin: 0 auto;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.hero {
  width: var(--container-wide);
  margin: 0 auto var(--page-gap);
  border: 1px solid rgb(44 110 73 / 0.13);
  border-top: 0;
  border-radius: 0 0 1.35rem 1.35rem;
  overflow: hidden;
  background-color: var(--paper);
  background-image: radial-gradient(circle, rgb(14 51 42 / 0.10) 1px, transparent 1px);
  background-size: 24px 24px;
  box-shadow: var(--sheet-shadow);
}

.hero,
.services,
.process,
.pricing,
.contact {
  position: relative;
  isolation: isolate;
  scroll-margin-top: 7.5rem;
}

.section-paper {
  color: var(--ink);
  background: transparent;
}

.hero {
  min-height: clamp(42rem, 78vh, 54rem);
  padding: clamp(3.2rem, 7vw, 6rem) 0 clamp(4rem, 9vw, 6.8rem);
}

@media (min-width: 1181px) {
  .hero {
    min-height: clamp(36rem, 64vh, 43rem);
    padding: clamp(3rem, 5vw, 5rem) 0 clamp(3rem, 4.5vw, 4.5rem);
  }
}

.hero__inner,
.site-footer__inner {
  width: var(--container);
  margin: 0 auto;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(23rem, 0.78fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.hero__copy {
  position: relative;
  z-index: 1;
  isolation: isolate;
  max-width: 48rem;
}

.hero__wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(5.6rem, 12vw, 12.2rem);
  line-height: 0.78;
  letter-spacing: 0;
  color: var(--pond);
  text-shadow: 0 0.12em 0 rgb(14 51 42 / 0.09);
}

.hero__headline,
.section-title {
  margin: 0;
  color: var(--pond);
  text-wrap: balance;
  letter-spacing: 0;
}

.hero__headline {
  max-width: 42rem;
  margin-top: 1.5rem;
  font-size: clamp(2.15rem, 4.2vw, 4rem);
  line-height: 1.03;
  font-weight: 900;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.7rem;
}

/* ── Glyph inline SVG ── */
.lp-glyph {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ── Hero decoration ── */

/* Hero generated preview card */

.wave {
  display: none;
}

/* ── Dark section base (work / pricing / contact / footer) ── */

.pricing,
.contact,
.site-footer {
  position: relative;
  width: var(--container-wide);
  margin: 0 auto var(--page-gap);
  border: 1px solid rgb(254 254 227 / 0.15);
  border-radius: 1rem;
  overflow: hidden;
  background: var(--pond);
  box-shadow: var(--shadow);
}

/* ── Work Showcase (polaroid) ── */

/* Featured polaroid */

/* Polaroid grid */

/* Washi tape strip pinning the card */



.tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgb(44 110 73 / 0.18);
  border-radius: 999px;
  color: var(--pond);
  background: color-mix(in srgb, var(--sage) 68%, var(--paper));
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

/* Decorative rule above kickers in process + pricing sections */

.section-title {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.6vw, 6rem);
  line-height: 0.95;
  font-weight: 700;
}


.pricing .section-title,
.contact .section-title {
  color: var(--paper);
}

.services {
  padding: clamp(2rem, 4.6vw, 4.4rem) 0;
}

.tag {
  background: var(--blush);
}

.process {
  padding: 0 0 clamp(2rem, 4vw, 3.8rem);
}

/* ── Process panel ── */
.process { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 4vw, 3.8rem); }

/* 3×2 colored step-card grid */

/* Per-step colour palettes */

/* Botanical ghost impressions — pressed botanical specimens in each card corner */

/* Dashed arrow connector between cards in the same row */
/* Hide the arrow on the last card before a new row */

/* Flower stems decoration at base of process section */

/* ── Pricing ── */
.pricing { padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(2.4rem, 4vw, 3.6rem); }

/* Two-card overlap */

/* Botanical watermark impressions */

/* Big price display */

/* "+" between the two cards */

/* Green checkmark bullets */

/* CTAs on pricing cards */

/* Care stamp tight to corner */

.contact {
  padding: clamp(1.4rem, 3vw, 2.4rem) 0;
}

/* Notebook margin line — like a field journal page */

/* Form on cream paper — lighter, friendlier */

.site-footer {
  margin-bottom: clamp(0.5rem, 1.5vw, 1rem);
  padding: clamp(1.5rem, 3vw, 2.6rem) 0;
}

.site-footer__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, 0.64fr) minmax(27rem, 1.22fr) minmax(17rem, 0.82fr);
  gap: clamp(1.2rem, 3vw, 2.8rem);
  align-items: center;
}

.footer-brand-block::after {
  content: none;
  display: none;
}

.footer-brand span {
  color: var(--paper);
}

.footer-nav,
.footer-side,
.footer-legal {
  display: grid;
  gap: 0.5rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem clamp(1rem, 2.4vw, 2.3rem);
}

.footer-nav a {
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
}

.footer-side {
  justify-items: end;
  color: rgb(254 254 227 / 0.82);
  text-align: right;
}

.footer-contact {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: var(--touch-target);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 1.35vw, 1.18rem);
  font-weight: 900;
}

.footer-company {
  margin: 0;
  color: var(--paper);
  font-weight: 750;
}

.footer-legal {
  grid-template-columns: repeat(2, auto);
  justify-content: end;
  gap: 0.5rem 0.8rem;
}

.footer-legal button {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  padding: 0.45rem 0.35rem;
  border-radius: 999px;
  color: inherit;
}

.site-footer__inner::after {
  content: none;
  display: none;
}

/* Browser-comment refinements: tighter layouts, quieter ornament, clearer cards. */

.site-footer__inner {
  width: min(100% - clamp(2rem, 5vw, 5rem), 82rem);
  margin-inline: auto;
}

.services {
  padding-block: clamp(1.35rem, 3.2vw, 3rem);
}

.process {
  padding-bottom: clamp(1.2rem, 2.6vw, 2.3rem);
}

.pricing {
  padding-block: clamp(1.2rem, 2.4vw, 2rem);
}

/* Services card alignment pass. */

.reveal {
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease, transform 520ms ease;
}

.reveal[data-reveal-pending="true"] {
  opacity: 1;
  transform: translateY(0.85rem);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 940px) {
  .site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .menu-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: calc(100% + 0.6rem);
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem;
    border: 1px solid rgb(254 254 227 / 0.18);
    border-radius: 0.9rem;
    background: var(--pond);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
  }

  .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav a {
    padding: 0.85rem 1rem;
    border-radius: 0.65rem;
  }

  .header-cta {
    display: none;
  }

  .site-footer__inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .footer-nav {
    justify-content: flex-start;
  }

  .footer-side {
    justify-items: start;
    text-align: left;
  }

  .footer-legal {
    justify-content: start;
  }
}

@media (max-width: 640px) {
  :root {
    --grid-size: 26px;
  }

  body {
    background: var(--paper);
  }

  .site-header,
  main,
  .pricing,
  .contact,
  .site-footer {
    width: min(calc(100vw - 1rem), 34rem);
  }

  main {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  .hero {
    width: min(calc(100vw - 1rem), 34rem);
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    background: transparent;
    box-shadow: none;
  }

  .site-header {
    top: 0.5rem;
    margin-top: 0.5rem;
    border-radius: 1rem;
  }

  .brand__mark,
  .footer-brand img {
    width: 2.5rem;
    height: 2.5rem;
  }

  .brand__name,
  .footer-brand span {
    font-size: clamp(2.1rem, 10vw, 2.55rem);
  }

  .hero {
    min-height: auto;
    padding: 2.2rem 0 2.8rem;
  }

  .hero__wordmark {
    font-size: clamp(4.7rem, 23vw, 6.4rem);
  }

  .hero__headline {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .hero__actions,
  .button {
    width: 100%;
  }

  .button {
    min-height: 3.45rem;
  }

  
  .site-footer__inner {
    grid-template-columns: 1fr;
  }

  
  .site-footer__inner,
  .hero__inner {
    width: calc(100% - 1.2rem);
  }

  .section-title {
    font-size: clamp(2.7rem, 14vw, 4rem);
  }

  .footer-legal {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

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

/* Field-guide process route refresh. */
.process {
  padding: clamp(0.9rem, 2.2vw, 2rem) 0 clamp(2.2rem, 4.6vw, 4rem);
}

@media (max-width: 640px) {

  .process {
    padding-bottom: 2rem;
  }
}

/* Services slot-bento preview system. */

/* Browser-comment QA pass: remove extra label chips and stabilize small screens. */

@media (max-width: 640px) {

  .services {
    padding-block: 0.7rem;
  }

  .pricing {
    overflow: hidden;
  }
}

/* Pricing continuation pass: clean stacked breakpoints and blush-card readability. */

/* Process route completion pass. */
.process {
  overflow: hidden;
  padding: clamp(1.35rem, 3vw, 2.6rem) 0 clamp(2.35rem, 5vw, 4.4rem);
}

@media (max-width: 640px) {
  .process {
    padding: 1rem 0 2rem;
  }
}

/* Mobile footer compact pass. */
@media (max-width: 640px) {
  .site-footer {
    margin-block: 0.65rem;
    padding: 0.9rem 0 1rem;
    border-radius: 1rem;
  }

  .site-footer__inner {
    width: calc(100% - 1.35rem);
    gap: 0.6rem;
  }

  .footer-brand {
    gap: 0.55rem;
    min-width: 0;
  }

  .footer-brand img {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.28rem;
  }

  .footer-brand span {
    font-size: clamp(2.05rem, 11vw, 2.55rem);
  }

  .footer-nav {
    display: none;
  }

  .footer-side {
    justify-items: start;
    gap: 0.38rem;
    padding-top: 0.1rem;
    text-align: left;
  }

  .footer-contact {
    max-width: 100%;
    font-size: 0.94rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .footer-company {
    max-width: 100%;
    font-size: 0.78rem;
    line-height: 1.35;
    font-weight: 850;
  }

  .footer-legal {
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 0.4rem 0.85rem;
    margin-top: 0.12rem;
  }

  .footer-legal button {
    color: rgb(254 254 227 / 0.84);
    font-size: 0.86rem;
    font-weight: 900;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.24em;
  }
}

/* Mobile service card slimming pass. */

/* Static included-services package showcase. */

@keyframes included-rise {
  from {
    opacity: 0;
    transform: translateY(0.45rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─────────────────────────────────────────────────────────────
 * v2 redesign — section enhancements
 * Adds: handwritten kickers, brighter sprigs,
 * pinned polaroid stack on hero, washi tape + numbered tabs on work,
 * inline animated graphics on services, ledger notes on process,
 * postcard testimonials on pricing, reply badge on contact.
 * ───────────────────────────────────────────────────────────── */

/* ── shared: brighten corner sprigs on dark sections ───────── */

/* ── shared: handwritten kicker + title accent ──────── */

/* ── HERO: polaroid stack with push-pin, caption, seals ────── */

/* hero headline emphasis */
.hero__headline em {
  font-style: normal;
  position: relative;
  color: var(--pond);
}

/* ── WORK: numbered tabs, washi tape, divider, swipe carousel ── */

/* asymmetric washi tape strip on featured (in addition to centred tape on cards) */

/* handwritten "snapped this one last spring" caption */

/* small "no." dashed circle on each pinned card */

/* dotted page-rule divider between featured and grid */

/* mobile swipe hint */

@keyframes lp-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* mobile: convert ws-grid to horizontal scroll-snap carousel */

/* ── SERVICES: kicker, hosting typing animation, mobile carousel ── */

/* override default section-kicker pill so the lp-kicker handwritten variant
   takes precedence inside services/process/contact headers */

/* keep title kicker centred on the included-services header */

/* ── SERVICES grid: care in centre column, spanning 2 rows ─────
   v2 layout: [build | CARE | visibility] × row 1
              [mobile | CARE | hosting]    × row 2
              [tools tools tools]          × row 3 */
@media (min-width: 1040px) {
  /* hide the dotted indicator that pointed up at care */
}

/* mobile services → swipe carousel with Care first */

/* ════════════════════════════════════════════════════════════
   PROCESS v2 — graph-paper panel + 3×2 colour-tabbed step cards
   (faithful port of mockups/process-redesign-v2.html)
   ════════════════════════════════════════════════════════════ */
.lp-proc {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgb(44 110 73 / 0.22);
  border-radius: 1.2rem;
  padding: clamp(1.6rem, 3.2vw, 2.6rem) clamp(1.4rem, 3vw, 2.4rem);
  background-color: var(--color-panel-raised, #fffef2);
  background-image:
    linear-gradient(rgb(44 110 73 / 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgb(44 110 73 / 0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  box-shadow: 0 0.75rem 1.5rem rgb(14 51 42 / 0.11);
}

.lp-proc__inner { position: relative; z-index: 1; max-width: 78rem; margin: 0 auto; }
.lp-proc__head { display: grid; justify-items: center; text-align: center; gap: 0.5rem; max-width: 56rem; margin: 0 auto; }
.lp-proc__title {
  margin: 0.3rem 0 0;
  font-family: var(--font-display); font-weight: 400;
  color: var(--color-deep);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  line-height: 0.98; text-wrap: balance;
}
.lp-proc__title em { font-style: normal; position: relative; }
.lp-proc__title em::after {
  content: none;
  display: none;
}
.lp-proc__lede {
  max-width: 40rem; margin: 0.6rem auto 0;
  color: var(--color-ink-soft); font-weight: 600;
  font-size: 1.02rem; line-height: 1.55;
}

/* 3×2 step grid */

/* start / finish handwritten markers */

/* mobile swipe hint (shared with services style) */

@media (max-width: 720px) {
  .lp-proc { border-radius: 0; border: 0; box-shadow: none; padding: 1.8rem 1rem 2.4rem; }
  .lp-proc__title { font-size: 2.1rem; }
}

/* ── PRICING: handwritten free-chat ticket + testimonials ──── */

/* ════════════════════════════════════════════════════════════
   CONTACT v2 — paper letter + postcard form on the dark pond
   (faithful port of mockups/contact-redesign-v2.html)
   ════════════════════════════════════════════════════════════ */

/* LEFT: a paper "letter" card */

/* RIGHT: a postcard with form */

.lp-field { display: grid; gap: 0.3rem; }
.lp-field label { font-family: var(--font-body); font-size: 0.86rem; font-weight: 850; color: var(--color-deep); padding-left: 0.2rem; }
.lp-field input, .lp-field textarea {
  width: 100%; min-height: 3.1rem; padding: 0.85rem 1rem;
  border: 1px solid rgb(44 110 73 / 0.22); border-radius: 0.65rem;
  color: var(--color-ink); background: var(--color-paper);
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; resize: vertical;
}
.lp-field textarea { min-height: 8rem; }
.lp-field input::placeholder, .lp-field textarea::placeholder { color: var(--color-muted); }
.lp-field__message {
  min-height: 1.05rem;
  margin: -0.08rem 0 0;
  padding-inline: 0.2rem;
  color: #6f3218;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 850;
  line-height: 1.35;
}
.lp-field__message:empty {
  min-height: 0;
}
.lp-field.has-error input,
.lp-field.has-error textarea {
  border-color: rgb(214 140 69 / 0.72);
  background: color-mix(in srgb, var(--color-paper) 88%, #d68c45);
  box-shadow: inset 0 0 0 1px rgb(214 140 69 / 0.16);
}
.lp-field.has-success input,
.lp-field.has-success textarea {
  border-color: rgb(86 158 118 / 0.42);
}

/* Visual cleanup pass: keep the notebook identity, remove duplicate decoration. */

.lp-proc {
  padding: clamp(1.55rem, 3vw, 2.35rem);
}

@media (max-width: 1180px) and (min-width: 641px) {
  .hero__copy {
    padding-left: 0.9rem;
  }
}

@keyframes heroPreviewLift {
  from {
    opacity: 0;
    transform: translateY(1rem) rotate(-1.1deg);
    box-shadow: 0 1rem 2rem rgb(14 51 42 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.55);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    box-shadow: 0 2rem 3.75rem rgb(14 51 42 / 0.22), inset 0 1px 0 rgb(255 255 255 / 0.55);
  }
}

@keyframes heroPreviewImageSettle {
  from {
    filter: saturate(0.88) blur(3px);
    transform: scale(1.025);
  }

  to {
    filter: saturate(1) blur(0);
    transform: scale(1);
  }
}

@keyframes heroCaptionPin {
  from {
    opacity: 0;
    transform: translateY(0.35rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSealStamp {
  from {
    opacity: 0;
    transform: translateY(0.6rem) scale(0.72) rotate(-18deg);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(-8deg);
  }
}

/* Mobile distill pass: keep the pitch complete, but remove repeated proof and trim dense sections. */
@media (max-width: 640px) {
  .hero {
    min-height: 0;
    padding: 1.15rem 0 1.4rem;
  }

  .hero__inner {
    gap: 1rem;
  }

  .hero__wordmark {
    font-size: clamp(4.25rem, 24vw, 6rem);
    line-height: 0.82;
  }

  .hero__headline {
    margin-top: 0.8rem;
    font-size: clamp(2rem, 9.5vw, 2.8rem);
    line-height: 1.02;
  }

  .hero__actions {
    gap: 0.75rem;
    margin-top: 1.05rem;
  }

  .process {
    padding: 0.8rem 0 1.15rem;
  }

  .lp-proc {
    padding: 1.1rem 0.85rem 1.15rem;
  }

  .lp-proc__head {
    gap: 0.35rem;
  }

  .lp-proc__title {
    font-size: clamp(2.15rem, 12vw, 3rem) !important;
    line-height: 0.95;
  }

  .lp-proc__lede {
    margin-top: 0.2rem;
    font-size: 0.92rem;
    line-height: 1.4;
  }

  .pricing {
    padding: 1.1rem 0 1.25rem;
  }

  .contact {
    padding: 0.9rem 0 1.1rem;
  }

  .lp-field {
    gap: 0.25rem;
  }

  .lp-field input {
    min-height: 2.8rem;
    padding: 0.75rem 0.85rem;
  }

  .lp-field textarea {
    min-height: 6rem;
    padding: 0.75rem 0.85rem;
  }
}

@media (max-width: 640px) {

  .process {
    padding: 0.85rem 0 1.05rem;
  }

  .lp-proc {
    padding: 1rem 0.95rem 1.1rem;
  }

  .lp-proc__title {
    font-size: clamp(2rem, 10.5vw, 2.75rem) !important;
  }

  .lp-proc__lede {
    max-width: 17rem;
    font-size: 0.9rem;
    line-height: 1.38;
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: clamp(1.75rem, 6vw, 2.15rem);
  }
}

@media (max-width: 640px) {
  .site-footer {
    margin-block: 0.5rem 0.45rem;
    padding: 0.55rem 0;
    border-radius: 0.82rem;
  }

  .site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand legal"
      "contact contact";
    align-items: center;
    width: calc(100% - 1rem);
    gap: 0.22rem 0.7rem;
  }

  .footer-brand-block {
    grid-area: brand;
    min-width: 0;
  }

  .footer-brand {
    gap: 0.38rem;
    min-width: 0;
    min-height: 2.15rem;
  }

  .footer-brand img {
    width: 1.8rem;
    height: 1.8rem;
    padding: 0.2rem;
  }

  .footer-brand span {
    font-size: clamp(1.65rem, 8vw, 2.05rem);
    line-height: 0.85;
  }

  .footer-side {
    display: contents;
  }

  .footer-company {
    display: none;
  }

  .footer-contact {
    grid-area: contact;
    min-height: 1.8rem;
    max-width: 100%;
    color: rgb(254 254 227 / 0.9);
    font-size: 0.82rem;
    line-height: 1.15;
    text-decoration-thickness: 1px;
    overflow-wrap: anywhere;
  }

  .footer-legal {
    grid-area: legal;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 0.55rem;
    margin: 0;
  }

  .footer-legal button {
    min-height: 2rem;
    padding: 0.15rem 0;
    color: rgb(254 254 227 / 0.86);
    font-size: 0.78rem;
    line-height: 1;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.24em;
  }
}

@media (max-width: 640px) {
  .lp-proc {
    border-color: rgb(44 110 73 / 0.18);
    background:
      radial-gradient(circle at 92% 18%, rgb(249 184 196 / 0.12), transparent 30%),
      linear-gradient(160deg, var(--paper-panel), rgb(254 254 227 / 0.92));
  }

  .lp-proc__title em {
    color: color-mix(in srgb, var(--color-clay) 62%, var(--color-deep));
  }
}

@media (max-width: 640px) {
  .site-header {
    top: 0.45rem;
    width: min(calc(100vw - 1rem), 33.25rem);
    min-height: 4.35rem;
    margin-top: 0.45rem;
    padding: 0.48rem 0.66rem;
    border: 1px solid rgb(254 254 227 / 0.2);
    border-radius: 0.92rem;
    background:
      linear-gradient(180deg, rgb(8 55 36 / 0.98), rgb(6 45 27 / 0.98));
    box-shadow:
      0 0.72rem 1.35rem rgb(6 45 27 / 0.16),
      inset 0 1px 0 rgb(254 254 227 / 0.12);
  }

  .brand {
    gap: 0.42rem;
    min-height: 3rem;
  }

  .brand__mark {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.24rem;
    box-shadow: 0 0.35rem 0.55rem rgb(0 0 0 / 0.12);
  }

  .brand__name {
    font-size: clamp(1.9rem, 9vw, 2.35rem);
    line-height: 0.82;
    transform: translateY(0.05em);
  }

  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    width: 2.65rem;
    height: 2.65rem;
    border-color: rgb(254 254 227 / 0.46);
    background: var(--paper-panel);
    box-shadow:
      0 0.28rem 0.55rem rgb(6 45 27 / 0.18),
      inset 0 0 0 1px rgb(249 184 196 / 0.36);
  }

  .menu-toggle span:not(.sr-only) {
    width: 1.08rem;
    height: 2px;
    margin: 0;
    background: var(--color-deep);
  }
}

/* Goal polish: hero project card, quick pricing strip, and included-services layout. */
.hero__wordmark {
  text-shadow: 0 0.055em 0 rgb(14 51 42 / 0.055);
}

.hero__actions .button {
  min-height: clamp(3.45rem, 4.4vw, 4rem);
  padding-inline: clamp(1.45rem, 3.1vw, 2.35rem);
  font-size: clamp(1rem, 1.05vw, 1.12rem);
}

@media (max-width: 640px) {
  .hero__actions .button {
    min-height: 3.58rem;
    padding-inline: 1.2rem;
  }
}

/* Hero-integrated quick cards. */


body,
.site-header,
.hero,
.services,
.process,
.pricing,
.contact,
.site-footer,
.lp-field input,
.lp-field textarea,
.header-cta,
.button,
.menu-toggle {
  transition: background-color 320ms ease, color 320ms ease, border-color 320ms ease, box-shadow 320ms ease;
}

/* Light-mode hero quick cards: quiet notebook slips, not glowing tiles. */

/* Audit remediation: reduce layered motifs, lift contrast, and normalize small touch targets. */

.lp-proc {
  background:
    linear-gradient(90deg, rgb(44 110 73 / 0.045) 1px, transparent 1px),
    linear-gradient(rgb(44 110 73 / 0.04) 1px, transparent 1px),
    linear-gradient(160deg, var(--paper-panel), rgb(254 254 227 / 0.94));
  background-size: 2.2rem 2.2rem, 2.2rem 2.2rem, auto;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.72),
    0 0.85rem 1.8rem rgb(14 51 42 / 0.09);
}

.lp-proc__title em::after {
  display: none;
}

.menu-toggle {
  min-width: var(--touch-target);
  min-height: var(--touch-target);
}

@media (max-width: 900px) {
  .menu-toggle {
    width: var(--touch-target);
    height: var(--touch-target);
  }
}

@media (max-width: 640px) {
  .hero {
    padding-top: 0.95rem;
  }

  .hero__copy {
    gap: 0.7rem;
  }

  .hero__wordmark {
    font-size: clamp(4rem, 21vw, 5.35rem);
    line-height: 0.86;
  }

  .hero__headline {
    font-size: clamp(2rem, 8.2vw, 2.45rem);
    line-height: 1;
  }

  .hero__actions {
    margin-top: 0.35rem;
  }

  .footer-legal button,
  .footer-contact,
  .footer-brand {
    min-height: var(--touch-target);
  }

  .footer-legal button {
    padding: 0.45rem 0.55rem;
  }
}

/* Visual consistency pass: quieter proof slips, brighter dark pond, and cleaner service cards. */

/* ════════════════════════════════════════════════════════════════
   POLISH PASS — June 2026
   Goals:
   • Unify the site palette into one continuous forest, no hard seams
     where the header, services, or process sections meet their
     neighbours.
   • Float the work showcase: drop the wrapping bento panel, the
     featured-card back-plate, and the faint outline around them.
   • Make the flat-colour lilypad watermark in the hero bigger and
     reposition it; remove the monstera line art entirely.
   • Restyle the three work-card category labels so they read as
     stamped paper tags, not flat chips.
   ════════════════════════════════════════════════════════════════ */

/* ─── Hero decoration ─────────────────────────────────────────── */

/* ─── Float the work showcase ─────────────────────────────────── */
/* Drop the outer bento panel so the title + cards float on the page.
   Tight top padding since the hero now meets the work section on the
   same dark bg — no visual buffer needed. */

/* Trim the hero's bottom buffer too — the work title can sit closer
   to the quick-strip cards without crowding. */
.hero {
  padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Title + lede now sit on the page bg, so colour them for the page,
   not for the dark slab they used to live on. */

/* Drop the back-plate around the featured project so it floats. */

/* The featured photo keeps its frame but gets a softer, deeper lift
   so it reads as the floating hero of the section. */

/* Featured copy keeps reading colour but no card chrome. */

/* Smaller work-card panels keep the floating feel — quieter borders,
   no washi tape strip, no tilt jitter. */

/* ─── Restyled work-card category labels ──────────────────────── */

/* Tag colours travel with the content via [data-category] on the
   card / featured wrapper — so when a card swaps slots, its tag
   colour swaps with it, not the slot. */

/* Light-mode: float the work showcase too, the user wants this
   change applied to both modes. Use a soft accent wash rather than
   the dark bento panel so the section still reads as its own beat. */

/* ─── Card swap: crossfade in place ──────────────────────────── */
/* Animation lives entirely in JS as a smooth opacity fade on the
   live elements. The .is-work-swapping classes (from earlier
   iterations) are no longer applied but kept declared so any
   legacy references don't break. */

/* Quiet the washi tape strip on each small work card so it doesn't
   compete with the restyled category labels below it. */

/* ─── Responsive cleanup: kill orphan layouts ────────────────── */
/* At narrow tablet widths the work grid used to be 2-col with a
   centred orphan 3rd card. That looks broken. Stack them instead. */

/* On tablet the featured card stacks photo + copy vertically so the
   tag chip and meta don't crash together on a tight row. */

/* ─── Quick-strip badge: stop the "one-time build" wrap ──────── */

/* ─── Tighten footer + contact form spacing across viewports ─── */

/* ─── Footer: stop the double email link feeling cramped ─────── */
.site-footer__inner {
  align-items: center;
}

@media (max-width: 720px) {
  .site-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 0.85rem;
  }

  .footer-brand-block,
  .footer-nav,
  .footer-side {
    justify-self: center;
  }

  .footer-side {
    align-items: center;
  }

  .footer-legal {
    justify-content: center;
  }
}

/* ─── Process step chip overlap fix ──────────────────────────── */
/* At tablet widths the 3-up grid leaves each step card narrow
   enough that "Handover" + the "handover" chip collide on the
   same row. Stack title above chip when space is tight. */

/* ─── Tablet work cards: keep tags tight against title ───────── */

/* Annotation pass - 2026-06-02
   Keep the notebook direction, but answer the marked layout notes:
   simpler hero stack, calmer work rhythm, inset service cards, and a
   pricing sprig that sits where the eye expects it. */

@keyframes heroPreviewSimpleIn {
  from {
    opacity: 0;
    transform: translateY(0.8rem);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Misc v3 visual polish: keep the notebook identity, sharpen the craft. */
:root {
  --polish-line: rgb(23 60 40 / 0.13);
  --polish-line-strong: rgb(23 60 40 / 0.2);
  --polish-shadow-soft: 0 0.65rem 1.2rem rgb(14 51 42 / 0.12);
  --polish-shadow-lift: 0 1rem 1.8rem rgb(14 51 42 / 0.16);
  --polish-shadow-panel:
    0 0.9rem 1.25rem rgb(14 51 42 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.58);
}

.site-header {
  min-height: clamp(3.65rem, 4.8vw, 4.65rem);
  padding-block: clamp(0.42rem, 0.9vw, 0.62rem);
  border-radius: 0.95rem;
  box-shadow:
    0 0.55rem 1rem rgb(6 45 27 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.08);
}

.brand__mark {
  width: clamp(2.25rem, 3.4vw, 2.85rem);
}

.brand__name {
  transform: translateY(-0.03em);
}

.site-nav {
  gap: clamp(1.65rem, 3.4vw, 3.4rem);
}

.site-nav a {
  position: relative;
  padding-bottom: 0.18rem;
}

.site-nav a::after {
  height: 2px;
  bottom: -0.1rem;
  background: color-mix(in srgb, var(--color-clay) 74%, var(--color-cream));
  transform-origin: left center;
}

.header-cta {
  min-height: 2.72rem;
  padding-inline: clamp(1rem, 1.8vw, 1.45rem);
  box-shadow:
    0 0.35rem 0.65rem rgb(6 45 27 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.36);
}

.hero__copy {
  position: relative;
}

.hero__headline {
  max-width: 39rem;
  margin-top: clamp(1rem, 1.8vw, 1.35rem);
  font-size: clamp(2.35rem, 4.6vw, 4.3rem);
  line-height: 0.99;
}

.hero__headline em {
  display: inline-block;
  padding-inline: 0.04em;
  color: color-mix(in srgb, var(--color-title) 72%, var(--pond));
  text-shadow: 0 0.08em 0 rgb(6 45 27 / 0.12);
}

.hero__headline em::before {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.06em;
  bottom: 0.02em;
  height: 0.28em;
  border-radius: 999px;
  background: rgb(86 158 118 / 0.22);
  z-index: -1;
}


.lp-proc,
.pricing,
.contact,
.site-footer {
  box-shadow: var(--polish-shadow-panel);
}

.lp-proc {
  overflow: hidden;
}

/* Route line — dashed hand-drawn feel through the gap between rows. */

.site-footer {
  padding-block: clamp(1.4rem, 2.8vw, 2.2rem);
}

.site-footer__inner {
  grid-template-columns: minmax(13rem, 0.7fr) minmax(21rem, 1fr) minmax(17rem, 0.82fr);
}

.footer-brand {
  width: fit-content;
  padding: 0.35rem 0.5rem 0.35rem 0;
}

.footer-brand span {
  font-size: clamp(2rem, 4vw, 3rem);
}

.footer-company {
  margin-bottom: 0.35rem;
}

@media (max-width: 900px) {

  .site-footer__inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-header {
    min-height: 3.55rem;
    padding: 0.45rem 0.65rem;
  }

  .hero__headline {
    font-size: clamp(2.05rem, 9vw, 3.12rem);
  }
}

/* Annotation pass 2026-06-02: address browser notes without changing the
   site's identity. Keep this near the end so it clearly owns the overrides. */

/* Annotation pass: Work hang-down, card motion, contact breathing room. */

.contact {
  padding-inline: clamp(0.85rem, 3vw, 2rem);
}

/* Annotation pass: 2026-06-02 21:04 browser notes. */
.brand {
  align-items: center;
}

.brand__mark {
  flex: 0 0 auto;
}

.brand__name {
  line-height: 0.86;
  transform: translateY(0.015em);
}

.hero__headline em {
  padding-inline: 0;
}

.hero__headline em::before {
  content: none !important;
  display: none !important;
}

.footer-contact {
  text-shadow: none !important;
  filter: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 640px) {
  .brand__name {
    transform: translateY(0.02em);
  }
}

/* Accepted live edit: tighten the featured work copy card. */


/* Repair pass 2026-06-03: header centering, work-featured horizontal card,
   services centering, service-card balance without geometric doodles,
   pricing plus centering. Replaces the discarded 2026-06-02 23:22 pass. */

/* ---- Header: real circle, larger mark, vertical centering. ---- */
.site-header {
  align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.brand,
.footer-brand {
  align-items: center;
}

.brand__mark,
.footer-brand img {
  width: clamp(3.1rem, 3.9vw, 3.55rem);
  height: clamp(3.1rem, 3.9vw, 3.55rem);
  aspect-ratio: 1 / 1;
  padding: 0.18rem;
  object-position: center 52%;
}

.brand__name,
.footer-brand span {
  line-height: 1;
  transform: translateY(0.04em);
}

.site-nav {
  align-items: center;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  padding-block: 0.45rem;
  line-height: 1;
}

.header-actions {
  align-items: center;
}

.header-cta {
  align-items: center;
}

/* ---- Work showcase: thin horizontal card, centered above the grid. ---- */

/* Thin horizontal copy strip sits below the photo, lightly overlapping. */

/* ---- Services: centered heading, balanced cards. ---- */

/* Distribute card content so cards no longer have a half-empty lower zone. */

/* Restrained botanical bullet list — replaces the discarded geometric blocks. */

/* On warm cards (hosting, tools) the accent reads green — use deep ink so the
   dots remain visible without inventing a new colour. */

/* ---- Pricing: plus glyph perfectly centered in its circle. ---- */

/* ---- Responsive collapses for the new horizontal work card. ---- */

/* Final mobile guardrail: stop narrow screens clipping the hero and work area. */
@media (max-width: 640px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .site-header,
  main,
  .hero__inner,
  .site-footer__inner {
    box-sizing: border-box;
    width: min(100%, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    margin-inline: auto;
  }

  .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.55rem;
    width: min(100%, calc(100vw - 1.5rem));
    max-width: calc(100vw - 1.5rem);
    padding-right: 3.25rem;
  }

  .brand {
    min-width: 0;
  }

  .brand__mark {
    width: clamp(2.45rem, 11vw, 2.85rem);
    height: clamp(2.45rem, 11vw, 2.85rem);
    flex: 0 0 auto;
  }

  .brand__name {
    font-size: clamp(1.58rem, 7.5vw, 1.95rem);
    max-width: 9ch;
  }

  .header-actions {
    position: fixed;
    top: 1.05rem;
    right: auto;
    left: clamp(16rem, 82vw, 20.6rem);
    z-index: 60;
    display: flex !important;
    gap: 0.38rem;
    flex: 0 0 auto;
    transform: none;
  }

  .menu-toggle {
    width: 2.42rem;
    height: 2.42rem;
    min-width: 2.42rem;
    min-height: 2.42rem;
  }

  .menu-toggle {
    display: inline-flex !important;
    position: relative;
    opacity: 1 !important;
    visibility: visible !important;
    background: var(--blush) !important;
    border-color: rgb(254 254 227 / 0.65) !important;
    box-shadow:
      0 0.35rem 0.65rem rgb(6 45 27 / 0.18),
      inset 0 0 0 1px rgb(254 254 227 / 0.3);
  }

  .menu-toggle span:not(.sr-only) {
    background: var(--pond) !important;
  }

  .hero {
    overflow: hidden;
  }

  .hero__inner {
    padding-inline: 0;
  }

  .hero__copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero__wordmark,
  .hero__headline,
  .section-title {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .hero__wordmark {
    font-size: clamp(4.2rem, 19vw, 4.95rem);
  }

  .hero__headline {
    font-size: clamp(1.82rem, 7.8vw, 2.25rem);
  }

  .hero__actions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero__actions .button {
    width: 100%;
    min-width: 0;
  }
}

/* ────────────────────────────────────────────────────────────────
   Tidy-up pass: hero interactive notes, contact checklist,
   process route, work outcomes, services cues, pricing nudge.
   Added 2026-06-03.
   ──────────────────────────────────────────────────────────────── */

/* ── Hero "tidy-up" notes overlay ───────────────────────────── */

/* Spotlight: dims everything except the active region, so the
   annotation has something to point at on the image. */

/* Active state per note */

/* Soft ring on the highlighted preview region */

/* Controls below the preview */

/* ── Contact: free-website-check chip helper ────────────────── */

/* ── Process: route highlight ──────────────────────────────── */

/* ── Work: outcome tag ─────────────────────────────────────── */

/* Per-category washi tape — color the strip by the card's category so
   the work showcase looks hand-pinned, not templated. */

/* ── Services: problem cue ─────────────────────────────────── */

/* Split layout for the wide build card so the empty right side
   becomes 3 mini deliverable tiles. */

/* ── Featured work card layout restructure ───────────────────
   Replace the brittle 3-col layout with a clean 2-col bottom area:
   tag/title on the left, blurb stack on the right, with the outcome
   sitting next to the CTA so they read together. */

/* ── Pricing: "most owners pair both" paper tab + price anchor ── */

.pricing-pair {
  position: absolute;
  top: -1.15rem;
  left: 50%;
  z-index: 10;
  transform: translateX(-50%) rotate(-2deg);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem 0.4rem 0.95rem;
  border: 1px dashed rgb(249 184 196 / 0.7);
  border-radius: 999px;
  background:
    linear-gradient(180deg, #fffef2 0%, #fefee3 100%);
  color: #3d1722;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  box-shadow:
    0 0.5rem 1rem rgb(14 51 42 / 0.22),
    inset 0 1px 0 rgb(255 255 255 / 0.55);
}

.pricing-pair::before {
  content: "";
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-berry, #d94f83);
  box-shadow: 0 0 0 2px rgb(254 254 227 / 0.7);
}

.pricing-pair span {
  padding-left: 0.6rem;
}

.pricing-pair svg {
  flex: 0 0 auto;
  color: var(--color-berry, #d94f83);
}

/* Pricing numbers are strong enough without decorative underline art. */

@media (max-width: 980px) {
  .pricing-pair {
    top: -1rem;
    font-size: 0.7rem;
    padding: 0.35rem 0.7rem 0.35rem 0.85rem;
  }
}

@media (max-width: 640px) {
  .pricing-pair {
    display: none;
  }
}

/* Quick strip — inline price unit so the card reads as a complete claim. */

/* ── Contact: "what you get back" notebook cards ─────────────── */

/* ── Footer: tiny lily-pad return-to-top ──────────────────── */
.footer-top {
  position: absolute;
  top: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.5rem 0.85rem;
  border: 1px solid rgb(254 254 227 / 0.32);
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 30%, rgb(99 201 137 / 0.32), transparent 60%),
    rgb(254 254 227 / 0.94);
  color: var(--color-deep, #2c6e49);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  box-shadow:
    0 0.6rem 1.1rem rgb(14 51 42 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.6);
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease,
    background 220ms ease;
}

.footer-top svg {
  color: var(--color-deep, #2c6e49);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-top:hover {
  transform: translateX(-50%) translateY(-3px);
  box-shadow:
    0 0.9rem 1.4rem rgb(14 51 42 / 0.3),
    inset 0 1px 0 rgb(255 255 255 / 0.6);
}

.footer-top:hover svg {
  transform: translateY(-2px);
}

.footer-top:focus-visible {
  outline: 3px solid var(--color-clay, #f0a650);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .footer-top {
    font-size: 0.76rem;
    padding: 0.42rem 0.85rem 0.42rem 0.7rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-top,
  .footer-top svg {
    transition: none !important;
  }

  .footer-top:hover {
    transform: translateX(-50%);
  }

  .footer-top:hover svg {
    transform: none;
  }
}

/* ── Hero ambient drift leaf ──────────────────────────────── */
/* Responsive repair pass 2026-06-03:
   keep the useful/charming interactions, but stop the hero spotlight,
   work cards, and mobile footer from turning into layout soup. */

.site-footer {
  overflow: visible !important;
}

@media (max-width: 640px) {
  .site-footer {
    width: min(100%, calc(100vw - 1rem));
    max-width: calc(100vw - 1rem);
    margin: 0.8rem auto 0.65rem;
    padding: 1rem 0.8rem 1.05rem;
  }

  .footer-top {
    position: static;
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 0.9rem;
    transform: none;
    white-space: nowrap;
  }

  .footer-top:hover {
    transform: translateY(-2px);
  }

  .site-footer__inner {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
    text-align: center;
  }

  .footer-brand-block,
  .footer-side {
    width: 100%;
    min-width: 0;
  }

  .footer-brand {
    justify-content: center;
    margin-inline: auto;
  }

  .footer-nav {
    display: flex !important;
    max-width: 18rem;
    justify-content: center;
    gap: 0.28rem 0.85rem;
  }

  .footer-nav a {
    min-height: 2rem;
    font-size: 1.2rem;
  }

  .footer-side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: none !important;
    justify-items: center;
    gap: 0.45rem;
    text-align: center;
  }

  .footer-contact,
  .footer-company,
  .footer-legal {
    grid-area: auto !important;
  }

  .footer-contact {
    justify-content: center;
    width: min(100%, 18rem);
    min-height: 2.2rem;
    padding-inline: 0.15rem;
    font-size: 0.88rem;
    overflow-wrap: anywhere;
  }

  .footer-company {
    display: block !important;
    margin: 0;
    max-width: 18rem;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .footer-legal {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem 0.7rem;
  }

  .footer-legal button {
    min-height: 2.2rem;
    padding: 0.25rem 0.3rem;
  }
}

@media (prefers-reduced-motion: reduce) {

  @media (max-width: 640px) {
    .footer-top:hover {
      transform: none;
    }
  }
}

/* ════════════════════════════════════════════════════════════════
   POLISH PASS — Final spacing, alignment, and balance fixes.
   Appended last so it wins the cascade without touching layered
   rules above. Keep this block focused on real visual issues
   noticed at desktop / tablet / mobile in both colour modes.
   ════════════════════════════════════════════════════════════════ */

/* ── Hero · trim oversized "Riverbank Café, Stratford" caption ── */

/* ── Quick-strip · balance "free check" text against £500 / £50 ── */

/* ── Services · promote Websites & Redesigns to top as anchor card,
       fix bottom-row dead space, equalize tile rhythm ─────────── */
@media (min-width: 881px) {
  /* Anchor the "Start here" card across the top of the grid */
  /* Shift the remaining cards down so they do not overlap row 1 */
}

/* Inner 3-tile grid · make tiles sit flush at the bottom and breathe */

/* Build-card lead column · keep "Good for outdated sites" pinned bottom
   so the left side does not float with empty space below the blurb */

/* ── Work section · breathing room between cards and section edge ── */

/* ── Process section · keep dashed route line clear of card backgrounds */

/* ── Pricing · keep both panels visually anchored to the same baseline ── */

/* ── Tablet polish · keep included grid coherent between break points ── */

/* ── Mobile polish · stop oversized hero caption from wrapping ugly ── */
@media (max-width: 640px) {
  /* Smooth out the wave-to-dark transition at the bottom of the hero */
  .wave--to-dark svg {
    height: 56px;
  }
  /* Tighten work section padding on phones */
}

/* ── Motion polish · smoother reveal entrance, kinder hover scale ── */
.reveal {
  transition:
    opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .button {
    transition: none !important;
    animation: none !important;
  }
}

/* Final mobile Work repair: keep project cards visible as a swipeable
   showcase instead of hiding the grid on phones. */

@keyframes ws-page-preview-pan {
  0%,
  8% {
    transform: translate3d(0, 0, 0);
  }

  70%,
  88% {
    transform: translate3d(0, var(--ws-preview-pan, -18%), 0);
  }

  89%,
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ws-preview-reset-curtain {
  0%,
  84% {
    opacity: 0;
  }

  88%,
  94% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Footer return button: make the contact-to-footer bridge deliberate. */
.site-footer {
  padding-top: clamp(3.6rem, 6.2vw, 4.8rem);
}

.footer-top {
  top: calc(clamp(3.05rem, 5.4vw, 4.15rem) / -2);
  min-height: clamp(3.05rem, 5.4vw, 4.15rem);
  gap: clamp(0.75rem, 1.25vw, 1rem);
  padding: 0 clamp(1.55rem, 2.7vw, 2.2rem) 0 clamp(1.25rem, 2.25vw, 1.85rem);
  border-width: 2px;
  font-size: clamp(1.02rem, 1.8vw, 1.32rem);
  letter-spacing: 0;
  box-shadow:
    0 0.95rem 1.7rem rgb(14 51 42 / 0.28),
    inset 0 1px 0 rgb(255 255 255 / 0.72);
}

.footer-top svg {
  width: clamp(2rem, 3.35vw, 2.6rem);
  height: clamp(2rem, 3.35vw, 2.6rem);
  flex: 0 0 auto;
}

.footer-top:hover {
  transform: translateX(-50%) translateY(-4px);
  box-shadow:
    0 1.2rem 1.95rem rgb(14 51 42 / 0.32),
    inset 0 1px 0 rgb(255 255 255 / 0.72);
}

@media (max-width: 640px) {
  .site-footer {
    padding-top: clamp(1.35rem, 7vw, 2rem);
  }

  .footer-top {
    min-height: clamp(2.65rem, 13vw, 3.25rem);
    margin-bottom: 1rem;
    padding-inline: clamp(1rem, 5vw, 1.35rem);
    font-size: clamp(0.92rem, 4vw, 1.05rem);
  }

  .footer-top svg {
    width: clamp(1.65rem, 7vw, 2rem);
    height: clamp(1.65rem, 7vw, 2rem);
  }

  .footer-top:hover {
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-top:hover {
    transform: translateX(-50%);
  }

  .footer-top:hover svg {
    transform: none;
  }

  @media (max-width: 640px) {
    .footer-top:hover {
      transform: none;
    }
  }
}

/* Hero local-business case card. */

/* Hero service passport stamp cluster — floats on the hero, no container card. */

/* Stamp text fit repair: each paper shape gets a layout that matches its usable area. */

/* Rectangular stamp reset: keep varied sizes without the skinny ticket shapes. */

/* Latest hero stamp fit pass: fuller content, less empty paper, card 4 tucked behind card 1. */

/* Hero stamp spacing pass: keep the generated paper art, but give each
   service stamp enough poster-like breathing room for its real copy. */

@keyframes passportStampSlide {
  from { transform: var(--stamp-entry-transform); }
  to   { transform: var(--stamp-base-transform); }
}

/* Services anchor card: richer Websites & Redesigns step slips. */

/* Tablet services repair: 900-ish px is not enough for the desktop 3-card row. */

/* Process card pills: center label text optically inside each badge. */

/* Tablet contact repair: keep the return cards readable inside the letter panel. */

/* Mobile hero cleanup: remove the quick pricing cards below the showcase. */

/* Mobile work showcase: deliberate horizontal slider, static previews only. */


/* ── QA repair pass (2026-06-10): stamp legibility, narrow-desktop fit,
   and a compact mobile collage. Appended last so it wins the cascade. ── */

/* The redesign stamp caption inherited a stale `justify-self: start` from an
   earlier layout layer and sat off-centre, sliding under the drawn border. */

/* Between the desktop breakpoint and ~1440px the hero art column narrows,
   but the stamps kept their full size and rem offsets, so the centre stamp
   covered the first letters of "redesign", "hosting", and "updates".
   Scale the cluster down so every heading stays readable. */

/* Mobile: the five stacked stamps made the hero ~1,400px tall before the
   Work section. Keep the lead stamp full-width and tuck the four service
   stamps into a loose two-up collage, roughly halving the scroll. */

/* ── Services + Process redesign (2026-06-10) ──────────────────────────
   Services: two real offers (build, care) mirroring pricing, with the
   always-included items demoted to a seal strip. Process: one responsive
   dotted route with five stops and artifact slips, replacing the 3x2 grid
   and the duplicate mobile list. New class names on purpose: the old
   .include-card / .lp-step layers cannot leak in here. */

/* ── Services ── */

/* Included strip: small seals, not peer cards. */

/* Services taste pass: restrained botanical accents, keeping reveal/number behavior intact. */

/* Services: tablet and mobile. */

/* ── Process route ── */
.route {
  --route-gap: clamp(1.15rem, 2.2vw, 1.7rem);
  --spine-x: 50%;
  --route-no: 2.3rem;
  position: relative;
  display: grid;
  row-gap: var(--route-gap);
  max-width: 56rem;
  margin: clamp(1.8rem, 3.2vw, 2.7rem) auto 0;
  padding: 0;
  list-style: none;
}

.route-stop {
  position: relative;
}

.route-stop__no {
  position: absolute;
  top: 0.2rem;
  left: var(--spine-x);
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--route-no);
  height: var(--route-no);
  border: 1.5px solid var(--color-deep, #2c6e49);
  border-radius: 50%;
  background: var(--color-panel-raised, #fffef2);
  color: var(--color-deep, #2c6e49);
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1;
  transform: translateX(-50%);
  transition:
    background-color 420ms var(--ease-out, ease-out),
    color 420ms var(--ease-out, ease-out);
}

.route-stop__no::after {
  content: "";
  position: absolute;
  inset: -0.34rem;
  border: 1px dashed currentColor;
  border-radius: inherit;
  opacity: 0.35;
}

.route-stop.is-route-visited .route-stop__no {
  background: var(--color-deep, #2c6e49);
  color: var(--color-cream, #fefee3);
}

/* Dotted trail from this stop's marker to the next stop's marker. */
.route-stop:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--route-no) + 0.55rem);
  bottom: calc(-1 * var(--route-gap) - 0.05rem);
  left: var(--spine-x);
  z-index: 1;
  width: 3px;
  background-image: radial-gradient(circle, rgb(44 110 73 / 0.85) 1.35px, transparent 1.5px);
  background-repeat: repeat-y;
  background-size: 3px 11px;
  background-position: center top;
  transform: translateX(-50%);
  opacity: 0.28;
  transition: opacity 600ms var(--ease-out, ease-out);
}

.route-stop.is-route-visited:not(:last-child)::after {
  opacity: 0.85;
}

.route-stop__card {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 0.5rem;
  width: calc(50% - 2.6rem);
  padding: clamp(1.05rem, 1.9vw, 1.35rem);
  border: 1px solid rgb(44 110 73 / 0.18);
  border-radius: 0.95rem;
  background: linear-gradient(180deg, #fffef6, #fffdec);
  box-shadow: 0 0.55rem 1.05rem rgb(14 51 42 / 0.1), inset 0 1px 0 rgb(255 255 255 / 0.65);
  transition:
    transform 380ms var(--ease-out, ease-out),
    box-shadow 380ms var(--ease-out, ease-out),
    border-color 380ms var(--ease-out, ease-out);
}

.route-stop:nth-child(odd) .route-stop__card {
  margin-right: auto;
  transform: rotate(-0.45deg);
}

.route-stop:nth-child(even) .route-stop__card {
  margin-left: auto;
  transform: rotate(0.45deg);
}

.route-stop.is-route-active .route-stop__card {
  border-color: rgb(44 110 73 / 0.4);
  box-shadow: 0 0.9rem 1.6rem rgb(14 51 42 / 0.15), inset 0 1px 0 rgb(255 255 255 / 0.65);
}

.route-stop.is-route-active:nth-child(odd) .route-stop__card {
  transform: rotate(-0.45deg) translateY(-3px);
}

.route-stop.is-route-active:nth-child(even) .route-stop__card {
  transform: rotate(0.45deg) translateY(-3px);
}

.route-stop__card h3 {
  margin: 0;
  color: var(--color-deep, #2c6e49);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 1.78rem);
  font-weight: 700;
  line-height: 0.98;
}

.route-stop__card p {
  margin: 0;
  color: var(--color-ink-soft, #315e43);
  font-family: var(--font-body);
  font-size: clamp(0.88rem, 1vw, 0.95rem);
  font-weight: 600;
  line-height: 1.5;
}

.route-stop__slip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.15rem;
  padding: 0.42rem 0.7rem;
  border: 1px dashed rgb(44 110 73 / 0.45);
  border-radius: 0.55rem;
  background: #fffbe7;
  color: var(--color-ink, #173c28);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.25;
  transform: rotate(-0.7deg);
}

.route-stop:nth-child(even) .route-stop__slip {
  transform: rotate(0.7deg);
}

.route-stop__slip em {
  color: var(--color-deep, #2c6e49);
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.route-stop--care .route-stop__no {
  border-color: #c46382;
  color: #b04a6c;
}

.route-stop--care.is-route-visited .route-stop__no {
  background: var(--color-blush, #f9b8c4);
  border-color: #c46382;
  color: #5d2237;
}

.route-stop--care .route-stop__slip {
  border-color: rgb(196 99 130 / 0.5);
  background: color-mix(in srgb, var(--color-blush, #f9b8c4) 22%, #fffbe7);
}

.route-stop__link {
  display: inline-flex;
  min-height: 2.45rem;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.3rem;
  padding: 0 1.05rem;
  border-radius: 999px;
  background: var(--color-deep, #2c6e49);
  color: var(--color-cream, #fefee3);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 0.45rem 0.8rem rgb(6 45 27 / 0.22);
  transition:
    transform var(--dur-base, 240ms) var(--ease-out, ease-out),
    box-shadow var(--dur-base, 240ms) var(--ease-out, ease-out);
}

.route-stop__link:hover,
.route-stop__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0.65rem 1.1rem rgb(6 45 27 / 0.26);
}

/* Route: tablet and mobile fall back to a left-hand spine. */
@media (max-width: 880px) {
  .route {
    --spine-x: 1.15rem;
    --route-no: 2.15rem;
    --route-gap: 1rem;
    max-width: 38rem;
  }

  .route-stop__card,
  .route-stop:nth-child(odd) .route-stop__card,
  .route-stop:nth-child(even) .route-stop__card {
    width: auto;
    margin: 0 0 0 3rem;
    transform: rotate(0deg);
  }

  .route-stop.is-route-active .route-stop__card,
  .route-stop.is-route-active:nth-child(odd) .route-stop__card,
  .route-stop.is-route-active:nth-child(even) .route-stop__card {
    transform: translateY(-2px);
  }

  .route-stop__slip,
  .route-stop:nth-child(even) .route-stop__slip {
    transform: rotate(-0.5deg);
  }
}

@media (max-width: 640px) {
  .route {
    margin-top: 1.4rem;
  }

  .route-stop__card {
    padding: 0.95rem 1rem;
  }

  .route-stop__slip {
    align-items: start;
    flex-direction: column;
    gap: 0.16rem;
  }
}

/* Both sections: respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  
  .route-stop__no,
  .route-stop:not(:last-child)::after,
  .route-stop__card,
  .route-stop__link {
    transition: none !important;
  }

  .route-stop.is-route-active .route-stop__card,
  .route-stop.is-route-active:nth-child(odd) .route-stop__card,
  .route-stop.is-route-active:nth-child(even) .route-stop__card {
    transform: none;
  }
}

/* ── Hero / Work / Pricing interaction pass (2026-06-10) ───────────────
   Hero stamps are real links now (they were toggle buttons that toggled
   nothing), work cards advertise their swap, and pricing closes the loop
   with the paired total the top tag promises. */

/* Hero: stamp links. */

/* Work: the small cards swap into the featured slot, but nothing said so.
   A quiet corner slip appears on hover/keyboard focus (pointer devices
   above the mobile carousel breakpoint only). */

/* Pricing: paired-total strip under the two cards. */

/* ── Colour & character pass (2026-06-10) ──────────────────────────────
   Replaces the hairline "ghost" geometry (inset frames, dashed circles,
   thin ring numerals) with solid colour and real botanical art, splits
   the two service offers into green vs plum, tints the process route
   per stop, and tidies the work cards. */

/* Services: kill the hairline frame and dashed circle, use a real sprig. */

/* Two offers, two colour worlds: green build, plum care. */

/* Tiles: solid pastel numerals (no rings) and tinted paper surfaces. */

/* Included seals: solid pastel pads instead of dashed rings. */

/* Process route: each stop gets its own hand-tinted accent. */
.route-stop:nth-child(1) { --stop-pop: #e08a76; }
.route-stop:nth-child(2) { --stop-pop: #4c956c; }
.route-stop:nth-child(3) { --stop-pop: #d9a13c; }
.route-stop:nth-child(4) { --stop-pop: #3a7a8c; }
.route-stop--care { --stop-pop: #c46382; }

.route-stop__no,
.route-stop--care .route-stop__no {
  border: 0;
  background: color-mix(in srgb, var(--stop-pop, #4c956c) 28%, #fffef2);
  color: color-mix(in srgb, var(--stop-pop, #4c956c) 48%, #173c28);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  box-shadow:
    0 0.3rem 0.55rem rgb(14 51 42 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.72);
}

.route-stop__no::after {
  display: none;
}

.route-stop.is-route-visited .route-stop__no,
.route-stop--care.is-route-visited .route-stop__no {
  background: color-mix(in srgb, var(--stop-pop, #2c6e49) 52%, #fffef2);
  color: color-mix(in srgb, var(--stop-pop, #2c6e49) 34%, #173c28);
  box-shadow:
    0 0.45rem 0.85rem rgb(14 51 42 / 0.18),
    0 0 0 0.22rem color-mix(in srgb, var(--stop-pop, #2c6e49) 24%, transparent),
    inset 0 1px 0 rgb(255 255 255 / 0.78);
}

.route-stop:not(:last-child)::after {
  background-image: radial-gradient(circle, var(--stop-pop, rgb(44 110 73)) 1.35px, transparent 1.5px);
  opacity: 0.32;
}

.route-stop.is-route-visited:not(:last-child)::after {
  opacity: 0.8;
}

.route-stop__card {
  border-color: color-mix(in srgb, var(--stop-pop, #4c956c) 36%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--stop-pop, #4c956c) 9%, #fffef6),
    #fffdec
  );
}

.route-stop.is-route-active .route-stop__card {
  border-color: color-mix(in srgb, var(--stop-pop, #4c956c) 62%, transparent);
}

.route-stop__card h3 {
  color: color-mix(in srgb, var(--stop-pop, #2c6e49) 58%, #173c28);
}

.route-stop__slip,
.route-stop--care .route-stop__slip {
  border-color: color-mix(in srgb, var(--stop-pop, #4c956c) 48%, transparent);
  background: color-mix(in srgb, var(--stop-pop, #4c956c) 11%, #fffbe7);
}

.route-stop__slip em {
  color: color-mix(in srgb, var(--stop-pop, #2c6e49) 72%, #173c28);
}

/* Process background: quiet botanical line art behind the route. */
.lp-proc {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.lp-proc::before,
.lp-proc::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.lp-proc::before {
  inset: clamp(1rem, 2.4vw, 2rem);
  background-image:
    url("./assets/images/line-icons-dark/15-leaf-branch-center.png"),
    url("./assets/images/line-icons-dark/11-lotus-on-lily-pad.png"),
    url("./assets/images/line-icons-dark/08-berry-branch-left.png");
  background-repeat: no-repeat;
  background-position:
    left 7% top 13%,
    right 6% top 30%,
    left 9% bottom 12%;
  background-size:
    clamp(7rem, 12vw, 10.5rem) auto,
    clamp(6rem, 10vw, 9rem) auto,
    clamp(5.5rem, 9vw, 8rem) auto;
  opacity: 0.105;
}

.lp-proc::after {
  left: 50%;
  bottom: clamp(1.2rem, 3vw, 2.4rem);
  width: min(48rem, 78%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(44 110 73 / 0.18), transparent);
  opacity: 0.45;
  transform: translateX(-50%) rotate(-1.2deg);
}

.lp-proc__inner {
  position: relative;
  z-index: 1;
}

.route::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: min(46rem, 86vw);
  aspect-ratio: 1;
  background: url("./assets/images/logo/lilypad-deep-green.webp") center / contain no-repeat;
  opacity: 0.065;
  transform: translate(-50%, -50%) rotate(-5deg);
  pointer-events: none;
}

.route-stop {
  z-index: 1;
}

@media (max-width: 880px) {
  .lp-proc::before {
    background-position:
      right -1.2rem top 8%,
      left -1.2rem top 42%,
      right -0.8rem bottom 10%;
    background-size:
      5.8rem auto,
      5.2rem auto,
      4.8rem auto;
    opacity: 0.08;
  }

  .lp-proc::after {
    width: 86%;
    opacity: 0.1;
  }

  .route::before {
    top: 48%;
    left: 56%;
    width: min(28rem, 94vw);
    opacity: 0.05;
    transform: translate(-50%, -50%) rotate(-5deg);
  }
}

/* Work showcase: tags stop stretching into banners, outcomes pick up
   each project's category colour, and the featured copy gets warmth. */

/* ── Services offer cards: flat colour pass (2026-06-10) ───────────────
   No corner glows, no gradient shine, no inset highlight. One solid
   colour per offer, a proper shadow underneath, and a gentle raise on
   hover. */

/* Flatten the build tiles to match: one quiet tint each, no gradient. */

/* ── Mobile compactness pass (2026-06-10) ──────────────────────────────
   The 390px page ran ~10 viewports tall. Tighten spacing in every
   section without hiding content: smaller hero collage, denser cards,
   shorter gaps. Nothing is removed, everything just sits closer. */
@media (max-width: 640px) {
  /* Section shells */
  .services {
    padding-top: 0.85rem;
    padding-bottom: 0.95rem;
  }

  .process {
    padding-top: 0.7rem;
    padding-bottom: 0.85rem;
  }

  .pricing {
    padding-top: 0.9rem;
    padding-bottom: 1rem;
  }

  .contact {
    padding-top: 0.75rem;
    padding-bottom: 0.9rem;
  }

  /* Hero collage */

  .hero {
    padding-bottom: 1rem;
  }

  /* Work */

  /* Services */

  /* Process route */
  .route {
    --route-gap: 0.75rem;
    margin-top: 1.1rem;
  }

  .route-stop__card {
    gap: 0.4rem;
    padding: 0.85rem 0.95rem;
  }

  .route-stop__card p {
    line-height: 1.45;
  }

  .route-stop__slip {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.34rem 0.6rem;
  }

  .lp-proc__head {
    gap: 0.35rem;
  }

  /* Pricing */

  /* Contact */

  .lp-field textarea {
    min-height: 5rem;
  }

  /* Footer */
  .site-footer__inner {
    gap: 0.55rem;
    padding-block: 0.7rem 0.8rem;
  }

  .footer-top {
    min-height: 2.8rem;
  }
}

.js-ready .hero__wordmark {
  animation: heroCopySettle 560ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 120ms backwards;
}

.js-ready .hero__headline {
  animation: heroCopySettle 520ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 210ms backwards;
}

.js-ready .hero__actions .button {
  animation: heroButtonSettle 420ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) 390ms backwards;
}

.js-ready .hero__actions .button:nth-child(2) {
  animation-delay: 460ms;
}

@keyframes heroWatermarkSettle {
  from { transform: translateY(10px) rotate(-12deg) scale(0.985); }
  to { transform: translateY(0) rotate(-8deg) scale(1); }
}

@keyframes heroCopySettle {
  from { opacity: 0.92; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroButtonSettle {
  from { opacity: 0.94; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes passportStampLand {
  0% {
    transform: var(--stamp-entry-transform) translateY(var(--stamp-depth-y)) rotate(var(--stamp-depth-rotate)) scale(1);
    box-shadow: 0 1.1rem 1.7rem rgb(6 45 27 / 0.16);
  }
  58% {
    transform: var(--stamp-base-transform) translateY(var(--stamp-depth-y)) rotate(var(--stamp-depth-rotate)) translateY(-5px) scale(1.012);
  }
  76% {
    transform: var(--stamp-base-transform) translateY(var(--stamp-depth-y)) rotate(var(--stamp-depth-rotate)) translateY(1px) scale(0.992);
    box-shadow: 0 0.52rem 0.82rem rgb(6 45 27 / 0.14);
  }
  100% {
    transform: var(--stamp-base-transform) translateY(var(--stamp-depth-y)) rotate(var(--stamp-depth-rotate)) scale(1);
  }
}

/* Work proof: normal-flow annotated proof before the browseable carousel. */

/* Process ink route. */
.route-stage {
  --route-progress: 0;
  --route-ink: #2c6e49;
  --route-ink-muted: rgb(44 110 73 / 0.18);
  --route-ink-width: 3px;
  position: relative;
  max-width: 60rem;
  margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
}

.route-stage .route {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
}

.route-ink {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.route-ink__shadow,
.route-ink__base,
.route-ink__progress {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.route-ink__shadow {
  stroke: rgb(254 254 227 / 0.82);
  stroke-width: calc(var(--route-ink-width) + 6px);
}

.route-ink__base {
  stroke: var(--route-ink-muted);
  stroke-width: var(--route-ink-width);
  stroke-dasharray: 0.035 0.035;
}

.route-ink__progress {
  stroke: var(--route-ink);
  stroke-width: calc(var(--route-ink-width) + 1px);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--route-progress));
  filter:
    drop-shadow(0 0.16rem 0.18rem rgb(44 110 73 / 0.2))
    drop-shadow(0 0.04rem 0 rgb(254 254 227 / 0.48));
  transition: stroke-dashoffset 90ms linear;
}

.route-stage.has-ink-route .route-stop:not(:last-child)::after {
  opacity: 0;
}

.route-stop__no {
  position: relative;
  overflow: visible;
}

.route-stage.has-ink-route .route-stop__no {
  background: rgb(255 254 242 / 0.82);
  box-shadow:
    0 0.32rem 0.9rem rgb(44 110 73 / 0.18),
    inset 0 0 0 0.22rem rgb(255 254 242 / 0.46);
}

.route-stage.has-ink-route .route-stop.is-route-visited .route-stop__no {
  background: color-mix(in srgb, var(--color-deep, #2c6e49) 78%, var(--color-panel-raised, #fffef2));
  color: var(--color-cream, #fefee3);
}

.route-stage.has-ink-route .route-stop--care.is-route-visited .route-stop__no {
  background: color-mix(in srgb, var(--color-blush, #f9b8c4) 76%, var(--color-panel-raised, #fffef2));
  color: #5d2237;
}

.route-stop__no::before {
  content: "";
  position: absolute;
  inset: -0.42rem;
  border: 1.5px solid color-mix(in srgb, var(--stop-pop, #4c956c) 62%, transparent);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.72);
  transform-origin: center;
  pointer-events: none;
}

.route-stop.has-route-stamped .route-stop__no {
  animation: routeMarkerStamp 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.route-stop.has-route-stamped .route-stop__no::before {
  animation: routeRippleStamp 520ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

@keyframes routeMarkerStamp {
  0% { transform: translateX(-50%) scale(0.94) rotate(-1deg); }
  58% { transform: translateX(-50%) scale(1.07) rotate(1deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); }
}

@keyframes routeRippleStamp {
  0% { opacity: 0; transform: scale(0.68); }
  42% { opacity: 0.68; transform: scale(1.08); }
  100% { opacity: 0.18; transform: scale(1.22); }
}

@media (max-width: 880px) {
  .route-stage {
    --route-ink-width: 2px;
  }
}

/* ── Desktop process: a single growing stem ───────────────────────
   Cards stack in one readable column with the botanical stem running down a
   left gutter through the numbered nodes. The vine is drawn (in JS) as a
   gentle near-vertical stem through the measured badge centres, so it always
   reads as a deliberate plant rather than a wandering route. */
@media (min-width: 881px) {
  .route {
    --spine-x: 2.6rem;
    --route-no: 2.5rem;
    --route-gap: clamp(1.5rem, 2.6vw, 2.4rem);
    max-width: 44rem;
  }

  /* Override the base alternating-card layout: one column, offset past the stem. */
  .route-stop__card,
  .route-stop:nth-child(odd) .route-stop__card,
  .route-stop:nth-child(even) .route-stop__card {
    width: auto;
    margin: 0 0 0 5rem;
    transform: rotate(0deg);
  }
  .route-stop:nth-child(odd) .route-stop__card { transform: rotate(-0.4deg); }
  .route-stop:nth-child(even) .route-stop__card { transform: rotate(0.4deg); }

  .route-stop.is-route-active .route-stop__card,
  .route-stop.is-route-active:nth-child(odd) .route-stop__card,
  .route-stop.is-route-active:nth-child(even) .route-stop__card {
    transform: translateY(-2px);
  }

  .route-stop__card { padding: clamp(1.15rem, 1.8vw, 1.5rem) clamp(1.3rem, 2vw, 1.7rem); }
  .route-stop__card h3 { font-size: clamp(1.5rem, 2vw, 1.85rem); }
}

@media (prefers-reduced-motion: reduce) {
  
  .js-ready .hero__wordmark,
  .js-ready .hero__headline,
  .js-ready .hero__actions .button,
  .route-stop.has-route-stamped .route-stop__no,
  .route-stop.has-route-stamped .route-stop__no::before {
    animation: none !important;
  }

  .route-stage {
    --route-progress: 1;
  }

}

/* FABLE main-port finishing pass, keeps the transplanted sections production-safe. */
html {
  scroll-padding-top: 6rem;
}

#work,
#services,
#process,
#pricing,
#contact {
  scroll-margin-top: 0;
}

.work-featured__link {
  width: fit-content;
  min-height: 2.6rem;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1.1rem;
  border: 1px solid rgb(6 45 27 / 0.2);
  border-radius: 999px;
  background: #2c6e49;
  color: #fefee3;
  box-shadow: 0 0.55rem 0.9rem rgb(6 45 27 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.work-featured__link:hover,
.work-featured__link:focus-visible {
  background: #235c3c;
  border-color: rgb(254 254 227 / 0.26);
  color: #fefee3;
  transform: translateY(-2px);
}

.services__head {
  padding-top: clamp(0.35rem, 1vw, 0.8rem);
}

.services__head .section-title {
  line-height: 1.04;
  overflow: visible;
}

.process.section-paper {
  background-color: #fefee3;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 2rem, rgb(44 110 73 / 0.052) 2rem calc(2rem + 1px)),
    linear-gradient(90deg, rgb(44 110 73 / 0.045) 1px, transparent 1px);
  background-size: auto, 30px 30px;
}

.lp-proc {
  background:
    repeating-linear-gradient(to bottom, transparent 0 2rem, rgb(44 110 73 / 0.06) 2rem calc(2rem + 1px)),
    linear-gradient(90deg, rgb(44 110 73 / 0.045) 1px, transparent 1px),
    #fffef2;
  background-size: auto, 30px 30px, auto;
}

.lp-proc::before {
  top: clamp(0.95rem, 1.7vw, 1.35rem);
  bottom: clamp(0.95rem, 1.7vw, 1.35rem);
  left: clamp(0.9rem, 1.6vw, 1.25rem);
  width: 0.78rem;
  opacity: 0.95;
  background-image: radial-gradient(circle, rgb(44 110 73 / 0.72) 0.18rem, transparent 0.23rem);
  background-position: center top;
  background-size: 0.78rem 1.52rem;
  background-repeat: repeat-y;
  filter: none;
  transform: none;
}

.route-stop__no {
  position: absolute;
  left: var(--spine-x);
  overflow: visible;
}

.route-stop__no::before,
.route-stop__no::after {
  pointer-events: none;
}

.route-stop__card {
  overflow: hidden;
}

.route-stop__card::before {
  content: "";
  position: absolute;
  inset: -45% -65%;
  z-index: 0;
  background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.56) 48%, transparent 66%);
  opacity: 0;
  transform: translateX(-120%) rotate(5deg);
  pointer-events: none;
}

.route-stop__card > * {
  position: relative;
  z-index: 1;
}

.route-stop.is-route-active .route-stop__card::before {
  animation: routeCardRevealSweep 760ms cubic-bezier(0.2, 1, 0.24, 1) both;
}

.route-stop.is-route-visited .route-stop__card {
  border-color: rgb(44 110 73 / 0.34);
}

.route-stage.has-ink-route .route-stop__no {
  box-shadow:
    0 0.32rem 0.9rem rgb(44 110 73 / 0.18),
    inset 0 0 0 0.22rem rgb(255 254 242 / 0.46);
}

.chips__chip span {
  position: relative;
  padding-left: 1.45rem;
}

.chips__chip span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.92rem;
  height: 0.92rem;
  border: 1.5px solid rgb(44 110 73 / 0.45);
  border-radius: 0.24rem;
  background: #fefee3;
  transform: translateY(-50%);
}

.chips__chip input:checked + span::before {
  border-color: #2c6e49;
  background: #2c6e49;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.chips__chip input:checked + span::after {
  content: "";
  position: absolute;
  left: 0.33rem;
  top: 50%;
  width: 0.28rem;
  height: 0.52rem;
  border: solid #fefee3;
  border-width: 0 2px 2px 0;
  transform: translateY(-62%) rotate(45deg);
}

@keyframes routeCardRevealSweep {
  0% {
    opacity: 0;
    transform: translateX(-120%) rotate(5deg);
  }
  18% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateX(120%) rotate(5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .route-stop.is-route-active .route-stop__card::before {
    animation: none;
  }
}

@media (max-width: 640px) {
  html {
    scroll-padding-top: 5.65rem;
  }
}