:root {
      --teal: #003746;
      --teal-mid: #0A4D5E;
      --teal-light: #0E6377;
      --orange: #E8652B;
      --orange-light: #F07D4A;
      /* Darkened from #C8511E so white button text clears WCAG AA (4.7:1). */
      --orange-dark: #C24F1D;
      --orange-darker: #A8441A;
      --earth: #1E2D33;
      --earth-mid: #3A5058;
      --earth-light: #6B8890;
      --sand: #F0F4F5;
      --sand-light: #F7F9FA;
      --sand-dark: #D8E0E3;
      --green-deep: #1A3A3A;
      --green-mid: #2D6B5A;
      --green-light: #4A9E85;
      --cream: #FBFCFC;
      --white: #FFFFFF;
      --text: #1E2D33;
      --text-mid: #3A5058;
      /* Darkened from #6B8890 (3.8:1) so small grey text passes AA on white and
         on the pale hero gradient. --earth-light keeps the old tone for decoration. */
      --text-light: #52717A;
      --display: 'Poppins', -apple-system, sans-serif;
      --sans: 'Source Sans 3', -apple-system, sans-serif;
      --max-w: 1200px;
      --section-pad: clamp(4rem, 8vw, 7rem);
    }

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

    html { scroll-behavior: smooth; }

    html { overflow-x: hidden; max-width: 100%; }

    body {
      font-family: var(--sans);
      color: var(--text);
      background: var(--cream);
      line-height: 1.65;
      font-size: 17px;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

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

    /* ============================================
       DECORATIVE PATTERNS
       ============================================ */
    /* ============================================
       NAVIGATION
       ============================================ */
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      padding: 1rem 2rem;
      transition: all 0.4s ease;
    }

    .nav.scrolled {
      background: rgba(251, 252, 252, 0.95);
      backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(0, 55, 70, 0.06);
    }

    .nav-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      font-family: var(--sans);
      font-weight: 700;
      font-size: 1.15rem;
      color: var(--earth);
      text-decoration: none;
      letter-spacing: -0.02em;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .nav-logo-mark {
      width: 32px;
      height: 32px;
      background: var(--teal);
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.03em;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }

    .nav-links a {
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--text-mid);
      text-decoration: none;
      transition: color 0.18s ease;
      letter-spacing: 0.01em;
    }

    .nav-links a:hover { color: var(--orange); }

    .nav-cta {
      background: var(--orange-dark) !important;
      color: var(--white) !important;
      padding: 0.6rem 1.3rem;
      border-radius: 8px;
      font-weight: 600 !important;
      box-shadow: 0 2px 8px rgba(232, 101, 43, 0.2);
      transition: background 0.18s ease, box-shadow 0.18s ease !important;
    }

    .nav-cta:hover {
      background: var(--orange-darker) !important;
      box-shadow: 0 4px 14px rgba(232, 101, 43, 0.28);
    }

    .nav-mobile-toggle {
      display: none;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.5rem;
    }

    .nav-mobile-toggle span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--earth);
      margin: 5px 0;
      transition: all 0.3s;
    }

    /* ============================================
       HERO
       ============================================ */
    .hero {
      display: flex;
      align-items: center;
      position: relative;
      padding: 9rem 2rem 5rem;
      background: linear-gradient(135deg, var(--cream) 0%, #EEF5F7 40%, #E8F0F2 70%, var(--cream) 100%);
      overflow: hidden;
    }

    .hero-inner {
      max-width: var(--max-w);
      margin: 0 auto;
      width: 100%;
      /* Defensive: flex items default to min-width:auto, so on a narrow enough
         phone the hero SVG's intrinsic width could stop this shrinking. */
      min-width: 0;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin-bottom: 4rem;
    }

    .hero h1 {
      font-family: var(--display);
      font-size: clamp(1.75rem, 4.2vw, 2.6rem);
      line-height: 1.12;
      color: var(--teal);
      margin-bottom: 1.5rem;
      letter-spacing: -0.02em;
      font-weight: 700;
    }

    .hero h1 em {
      color: var(--orange);
      font-style: normal;
    }

    .hero-actions {
      display: flex;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.9rem 1.85rem;
      border-radius: 10px;
      font-family: var(--sans);
      font-size: 0.95rem;
      font-weight: 600;
      text-decoration: none;
      transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
      cursor: pointer;
      border: none;
    }

    /* White on --orange is 3.3:1, which fails AA at button size. The fill is the
       darker orange (4.7:1); --orange stays for accents and large type. */
    .btn-primary {
      background: var(--orange-dark);
      color: var(--white);
    }

    .btn-primary:hover {
      background: var(--orange-darker);
    }

    .btn-secondary {
      background: var(--white);
      color: var(--teal);
      border: 1.5px solid var(--sand-dark);
    }

    .btn-secondary:hover {
      border-color: var(--teal-light);
      color: var(--teal-light);
      box-shadow: 0 4px 14px rgba(0, 55, 70, 0.07);
      transform: translateY(-2px);
    }

    /* Hero visual — paper-to-digital transformation */
    .hero-visual {
      position: relative;
      z-index: 1;
    }

    .transform-visual {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      max-width: 560px;
      margin: 0;
    }

    .paper-form {
      position: absolute;
      top: 8%;
      left: 0;
      width: 55%;
      background: var(--white);
      border: 1px solid var(--sand-dark);
      border-radius: 3px;
      padding: 1.25rem;
      box-shadow: 4px 4px 0 var(--sand-dark), 8px 8px 0 var(--sand);
      transform: rotate(-4deg);
      z-index: 1;
      transition: transform 0.6s ease;
    }

    .paper-form:hover { transform: rotate(-2deg) translateY(-4px); }

    .paper-line {
      height: 8px;
      background: var(--sand);
      border-radius: 4px;
      margin-bottom: 0.6rem;
    }

    .paper-line:nth-child(1) { width: 45%; background: var(--earth-light); height: 10px; }
    .paper-line:nth-child(2) { width: 80%; }
    .paper-line:nth-child(3) { width: 65%; }
    .paper-line:nth-child(4) { width: 90%; }
    .paper-line:nth-child(5) { width: 40%; }
    .paper-line:nth-child(7) { width: 75%; }
    .paper-line:nth-child(8) { width: 55%; }

    .paper-checkbox {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .paper-checkbox-box {
      width: 12px;
      height: 12px;
      border: 1.5px solid var(--earth-light);
      border-radius: 2px;
      flex-shrink: 0;
    }

    .paper-checkbox-line {
      height: 7px;
      background: var(--sand);
      border-radius: 3px;
      flex: 1;
    }

    .transform-arrow {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 3;
      width: 56px;
      height: 56px;
      background: var(--orange);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 20px rgba(232, 101, 43, 0.35);
    }

    .transform-arrow svg {
      width: 24px;
      height: 24px;
      fill: white;
    }

    .digital-form {
      position: absolute;
      bottom: 8%;
      right: 0;
      width: 58%;
      background: var(--white);
      border-radius: 3px;
      padding: 1.25rem;
      box-shadow: 0 18px 48px rgba(0, 55, 70, 0.14), 0 4px 12px rgba(0, 55, 70, 0.06);
      border: 1px solid rgba(0, 55, 70, 0.08);
      z-index: 2;
      transform: rotate(2deg);
      transition: transform 0.6s ease;
    }

    .digital-form:hover { transform: rotate(0deg) translateY(-4px); }

    .digital-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      margin-bottom: 1rem;
      padding-bottom: 0.75rem;
      border-bottom: 1px solid var(--sand);
    }

    .digital-header-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green-mid);
      box-shadow: 0 0 0 3px rgba(45, 107, 90, 0.18);
    }

    .digital-header-text {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--earth);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .digital-field {
      margin-bottom: 0.7rem;
    }

    .digital-field-label {
      font-size: 0.6rem;
      font-weight: 600;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 0.25rem;
    }

    .digital-field-input {
      height: 26px;
      background: var(--sand-light);
      border-radius: 3px;
      border: 1px solid var(--sand-dark);
    }

    .digital-field-input.filled {
      background: var(--sand);
      position: relative;
    }

    .digital-field-input.filled::after {
      content: '';
      position: absolute;
      left: 8px;
      top: 50%;
      transform: translateY(-50%);
      width: 60%;
      height: 7px;
      background: var(--earth-light);
      border-radius: 3px;
    }

    .digital-stats {
      margin-top: 0.75rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--sand);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
    }

    .digital-stat {
      text-align: center;
      padding: 0.4rem;
      background: rgba(45, 74, 62, 0.06);
      border-radius: 3px;
    }

    .digital-stat-num {
      font-size: 1rem;
      font-weight: 700;
      color: var(--green-deep);
    }

    .digital-stat-label {
      font-size: 0.55rem;
      color: var(--text-light);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    /* ============================================
       SECTION STYLES
       ============================================ */
    section {
      padding: var(--section-pad) 2rem;
    }

    .section-inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .section-title {
      /* Titles are single sentences now and wrap on their own, so cap the
         measure rather than breaking them by hand. */
      max-width: 640px;
      font-family: var(--display);
      font-size: clamp(1.8rem, 3.5vw, 2.6rem);
      color: var(--teal);
      line-height: 1.2;
      margin-bottom: 1rem;
      letter-spacing: -0.01em;
      font-weight: 700;
    }

    .section-subtitle {
      font-size: 1.1rem;
      color: var(--text-mid);
      max-width: 600px;
      line-height: 1.7;
    }

    /* Section headings alternate left / centre down the page, so no two
       consecutive sections open the same way. Left is the default. */
    .section-head-center {
      text-align: center;
    }

    .section-head-center .section-title {
      margin-left: auto;
      margin-right: auto;
    }

    .section-head-center .section-subtitle {
      margin-left: auto;
      margin-right: auto;
    }

    /* ============================================
       PROBLEM / SOLUTION
       ============================================ */
    .problem {
      background: var(--teal);
      color: var(--sand);
      position: relative;
    }

    .problem .section-title { color: var(--sand-light); }
    .problem .section-subtitle { color: var(--sand-dark); }

    .problem-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .problem-card {
      background: rgba(255, 255, 255, 0.04);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 3px;
      padding: 1.75rem;
      transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    }

    .problem-card:hover {
      background: rgba(255, 255, 255, 0.07);
      border-color: rgba(232, 101, 43, 0.25);
      transform: translateY(-2px);
    }

    .problem-card-icon {
      width: 40px;
      height: 40px;
      background: rgba(232, 101, 43, 0.15);
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1rem;
      font-size: 1.2rem;
    }

    .problem-card h3 {
      font-family: var(--sans);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--sand-light);
      margin-bottom: 0.5rem;
    }

    .problem-card p {
      font-size: 0.92rem;
      color: var(--sand-dark);
      line-height: 1.6;
    }

    /* ============================================
       HOW IT WORKS
       ============================================ */
    .how-it-works {
      background: var(--sand-light);
      position: relative;
    }

    .steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
      margin-top: 3rem;
      position: relative;
    }

    .steps::before {
      content: '';
      position: absolute;
      top: 36px;
      left: calc(16.66% + 1rem);
      right: calc(16.66% + 1rem);
      height: 2px;
      background: linear-gradient(90deg, var(--orange-light), var(--teal-light));
      opacity: 0.3;
    }

    .step {
      text-align: center;
      position: relative;
    }

    .step-number {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      background: var(--white);
      border: 2px solid var(--sand-dark);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 1.25rem;
      font-family: var(--display);
      font-size: 1.5rem;
      color: var(--orange);
      font-weight: 700;
      position: relative;
      z-index: 1;
      transition: all 0.3s ease;
    }

    .step:hover .step-number {
      border-color: var(--orange);
    }

    .step h3 {
      font-family: var(--sans);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--earth);
      margin-bottom: 0.5rem;
    }

    .step p {
      font-size: 0.92rem;
      color: var(--text-mid);
      line-height: 1.6;
      max-width: 320px;
      margin: 0 auto;
    }

    /* ============================================
       TESTIMONIAL
       ============================================ */
    /* Padding is deliberately not set here. The base `section` rule supplies it
       and the mobile media query narrows it to 1.5rem; a class-level padding
       here outranked that override and killed the gutter on phones. */
    .testimonial {
      background: var(--teal);
    }
    .testimonial .section-title    { color: var(--sand-light); }
    .testimonial .section-subtitle { color: var(--sand-dark); }

    .testimonial-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: clamp(2rem, 4vw, 3.5rem);
      align-items: center;
      margin-top: clamp(2.5rem, 5vw, 4rem);
    }

    /* The frame reads as a physical object sitting on the teal, which stops the
       video looking like a hole punched in the section. */
    .testimonial-video video {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 3px;
      background: #000;
    }
    .testimonial-video { position: relative; }

    /* The preview is a button, so keyboard and screen readers get a real control
       rather than a video they cannot operate. */
    .tv-preview {
      display: block;
      position: relative;
      width: 100%;
      max-width: 100%;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      border-radius: 3px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
    }
    .tv-preview:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }

    .tv-sound {
      position: absolute;
      left: 50%;
      bottom: clamp(1rem, 3vw, 1.75rem);
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.7rem 1.4rem;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.62);
      backdrop-filter: blur(6px);
      color: var(--white);
      font-family: var(--display);
      font-weight: 500;
      font-size: 0.95rem;
      white-space: nowrap;
      pointer-events: none;
      transition: background-color 0.18s ease;
    }
    .tv-sound-icon { font-size: 0.8em; }
    .tv-preview:hover .tv-sound { background: var(--orange); }

    /* The real video only appears once it has been asked for. */
    .testimonial-video .tv-full { display: none; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38); }
    .testimonial-video.is-playing .tv-preview { display: none; }
    .testimonial-video.is-playing .tv-full.tv-wide { display: block; }

    .testimonial-video .tv-preview-tall { display: none; }

    /* Someone who has asked for less motion gets the poster, not a moving one. */
    @media (prefers-reduced-motion: reduce) {
      .tv-preview video { display: block; }
    }

    /* The play button is JS-driven, so this is the only route in without it. */
    .tv-noscript { margin: 1rem 0 0; }
    .tv-noscript a { color: var(--orange-light); font-weight: 600; }

    .testimonial-quote { margin: 0; }
    .testimonial-quote blockquote {
      margin: 0;
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(1.45rem, 2.3vw, 2rem);
      line-height: 1.38;
      letter-spacing: -0.005em;
      color: var(--white);
    }
    /* Pull quote: one large orange opening mark set above the text is the only
       accent. It ties the quote to the buttons without another colour entering
       the section. The empty alt text keeps it out of screen readers. */
    .testimonial-quote blockquote::before,
    .tc blockquote::before {
      content: '\201C';
      content: '\201C' / '';
      display: block;
      font-family: Georgia, 'Times New Roman', serif;
      font-weight: 400;
      font-size: 5.5rem;
      line-height: 1;
      height: 2.6rem;
      color: var(--orange);
      margin-bottom: 0.9rem;
    }
    .testimonial-quote figcaption {
      margin-top: 1.5rem;
    }
    .tq-name {
      display: block;
      font-family: var(--display);
      font-weight: 600;
      font-size: 1.05rem;
      color: var(--white);
    }
    .tq-role {
      display: block;
      margin-top: 0.2rem;
      font-size: 0.95rem;
      /* Lighter than --earth-light, which was 3.4:1 on the teal. */
      color: #95ADB3;
    }

    @media (max-width: 860px) {
      /* minmax(0,1fr), not 1fr. A bare 1fr track carries min-width:auto, so the
         video's intrinsic 864px forced the track wider than the phone and
         clipped the heading off the right edge. */
      .testimonial-grid { grid-template-columns: minmax(0, 1fr); }

      /* Swap to the portrait cut. A 16:9 clip inside a phone viewport is a
         letterbox about 55mm tall; the 4:5 crop is roughly twice the height for
         the same width, so her face is actually legible. */
      .testimonial-video .tv-preview-wide { display: none; }
      .testimonial-video .tv-preview-tall { display: block; }
      .testimonial-video.is-playing .tv-full.tv-wide { display: none; }
      .testimonial-video.is-playing .tv-full.tv-tall { display: block; }

      /* A 4:5 video at full width is 1.25x the viewport width tall, which is
         about 58% of a phone screen. No height capping needed, and capping it
         with width:auto let the button size to the file's intrinsic 864px and
         blew out the page. */
      .testimonial-video .tv-preview,
      .testimonial-video .tv-full { width: 100%; max-width: 100%; }

      .testimonial-quote blockquote { font-size: 1.3rem; }
    }

    /* Quote cards (trades page). White cards on the teal so a partner's own
       logo, dark on transparent, stays legible. */
    .testimonial-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
      gap: clamp(1.25rem, 3vw, 2rem);
      margin-top: clamp(2.5rem, 5vw, 4rem);
      max-width: 960px;
    }
    .tc {
      margin: 0;
      background: var(--white);
      border-radius: 3px;
      padding: clamp(1.5rem, 3vw, 2.25rem);
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }
    .tc-head { display: flex; align-items: center; gap: 1rem; }
    .tc-photo {
      width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
      border: 3px solid var(--sand-dark);
    }
    .tc .tq-name { color: var(--earth); }
    .tc .tq-role { color: var(--text-light); }
    .tc blockquote {
      margin: 0;
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(1.2rem, 1.75vw, 1.5rem);
      line-height: 1.42;
      color: var(--earth);
    }
    .tc blockquote::before { font-size: 4.5rem; height: 2.15rem; margin-bottom: 0.75rem; }
    .tc figcaption {
      margin-top: auto;
      display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    }
    .tc-context { font-size: 0.88rem; line-height: 1.5; color: var(--text-mid); max-width: 30rem; }
    .tc-logo img { display: block; width: auto; height: 34px; }
    /* A third client, set as a card beside the two quotes rather than a loose line. */
    .tc-also {
      margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
      display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 1.75rem);
      background: var(--white);
      border-radius: 3px;
      padding: clamp(1.1rem, 2.5vw, 1.6rem) clamp(1.25rem, 3vw, 2rem);
    }
    .tc-also { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); max-width: 960px; }
    .tc-also-logo { width: 88px; height: auto; flex-shrink: 0; }
    .tc-also p { font-size: 1rem; line-height: 1.55; color: var(--text-mid); }
    .tc-also strong { color: var(--earth); }
    .tc-also a { color: var(--orange-dark); font-weight: 600; }
    .tc-also-label {
      display: block; margin-bottom: 0.25rem;
      font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
      color: var(--text-light);
    }
    @media (max-width: 560px) {
      .tc-also { flex-direction: column; align-items: flex-start; }
      .tc-also-logo { width: 72px; }
    }

    @media (max-width: 860px) {
      .tc blockquote { font-size: 1.15rem; }
    }

    /* ============================================
       FEATURES
       ============================================ */
    .features-header {
      margin-bottom: 3.5rem;
    }

    .features-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1.5rem;
    }

    /* Static by design: these cards are read, not clicked, so no hover state. */
    .feature-card {
      background: var(--white);
      border: 1px solid var(--sand-dark);
      border-radius: 3px;
      padding: 2rem;
      box-shadow: 0 1px 3px rgba(0, 55, 70, 0.04);
      position: relative;
      overflow: hidden;
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      background: rgba(0, 55, 70, 0.06);
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.25rem;
      font-size: 1.4rem;
    }

    .feature-card h3 {
      font-family: var(--sans);
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--earth);
      margin-bottom: 0.5rem;
    }

    .feature-card p {
      font-size: 0.92rem;
      color: var(--text-mid);
      line-height: 1.65;
    }

    /* ============================================
       COMPARISON / BEFORE-AFTER
       ============================================ */
    .comparison {
      background: var(--sand-light);
      position: relative;
      overflow: hidden;
    }

    .comparison-table {
      margin-top: 3rem;
      border-radius: 3px;
      overflow: hidden;
      border: 1px solid var(--sand-dark);
      box-shadow: 0 4px 16px rgba(44, 36, 24, 0.05);
    }

    .comparison-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .comparison-row.header {
      background: var(--teal);
    }

    .comparison-cell {
      padding: 1rem 1.5rem;
      font-size: 0.92rem;
      line-height: 1.5;
      border-bottom: 1px solid var(--sand-dark);
    }

    .comparison-row.header .comparison-cell {
      font-weight: 600;
      font-size: 0.85rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--sand-light);
      border-bottom-color: rgba(255,255,255,0.1);
      padding: 1.1rem 1.5rem;
    }

    .comparison-cell.before {
      background: var(--white);
      color: var(--text-mid);
      border-right: 1px solid var(--sand-dark);
    }

    .comparison-cell.after {
      background: rgba(45, 107, 90, 0.05);
      color: var(--earth);
      font-weight: 500;
      box-shadow: inset 3px 0 0 var(--green-light);
    }

    .comparison-row:last-child .comparison-cell {
      border-bottom: none;
    }

    /* ============================================
       PRICING
       ============================================ */
    .pricing {
      background: var(--cream);
    }

    /* Deliberately a single statement, not a card grid: there are no packages
       to compare, so nothing to lay out side by side. */
    .pricing-lead {
      max-width: 680px;
      margin: 2.5rem auto 0;
    }

    .pricing-lead p {
      font-size: 1.02rem;
      line-height: 1.75;
      color: var(--text-mid);
      margin-bottom: 1.15rem;
    }

    .pricing-cta {
      margin-top: 2rem;
      text-align: center;
    }

    .pricing-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1.5rem;
      margin-top: 3rem;
    }

    .pricing-card {
      background: var(--white);
      border: 1px solid var(--sand-dark);
      border-radius: 3px;
      padding: 2.5rem;
      box-shadow: 0 1px 3px rgba(0, 55, 70, 0.04);
      position: relative;
    }

    .pricing-card.featured {
      border-color: var(--orange);
      box-shadow: 0 12px 44px rgba(232, 101, 43, 0.12);
    }

    .pricing-card.featured::before {
      content: 'Most Common';
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: var(--orange);
      color: var(--white);
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      padding: 0.3rem 1rem;
      border-radius: 100px;
      box-shadow: 0 4px 12px rgba(232, 101, 43, 0.25);
    }

    .pricing-card-name {
      font-size: 0.82rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--text-light);
      margin-bottom: 0.5rem;
    }

    .pricing-card-price {
      font-family: var(--display);
      font-size: 2.4rem;
      color: var(--teal);
      font-weight: 700;
      margin-bottom: 0.25rem;
    }

    .pricing-card-price span {
      font-family: var(--sans);
      font-size: 0.9rem;
      color: var(--text-light);
      font-weight: 400;
    }

    .pricing-card-desc {
      font-size: 0.88rem;
      color: var(--text-mid);
      margin-bottom: 1.5rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid var(--sand);
    }

    .pricing-card ul {
      list-style: none;
      margin-bottom: 2rem;
    }

    .pricing-card li {
      font-size: 0.9rem;
      color: var(--text-mid);
      padding: 0.4rem 0;
      padding-left: 1.75rem;
      position: relative;
    }

    .pricing-card li::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0.62rem;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: rgba(45, 107, 90, 0.14);
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232D6B5A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
      background-size: 11px 11px;
      background-position: center;
      background-repeat: no-repeat;
    }

    /* ============================================
       ABOUT
       ============================================ */
    .about { background: var(--sand-light); }

    .about-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      margin-top: 3rem;
      align-items: start;
    }

    .about-text p {
      font-size: 1.05rem;
      color: var(--text-mid);
      line-height: 1.75;
      margin-bottom: 1.25rem;
    }

    .about-values {
      display: grid;
      gap: 1.25rem;
    }

    /* Plain cards: read, not clicked, so no hover state and no coloured edge. */
    .about-value {
      background: var(--white);
      border: 1px solid var(--sand-dark);
      border-radius: 3px;
      padding: 1.5rem;
    }

    .about-value h4 {
      font-family: var(--sans);
      font-size: 1rem;
      font-weight: 600;
      color: var(--earth);
      margin-bottom: 0.35rem;
    }

    .about-value p {
      font-size: 0.88rem;
      color: var(--text-mid);
      line-height: 1.55;
    }

    /* ============================================
       CONTACT
       ============================================ */
    .contact {
      background: var(--teal);
      color: var(--sand-light);
      position: relative;
      overflow: hidden;
    }

    .contact > .section-inner { position: relative; z-index: 2; }

    .contact .section-title { color: var(--sand-light); }

    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4rem;
      margin-top: 2.5rem;
    }

    .contact-info p {
      font-size: 1.05rem;
      color: var(--sand-dark);
      line-height: 1.7;
      margin-bottom: 2rem;
    }

    .contact-detail {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 1rem;
      font-size: 0.95rem;
      color: var(--sand);
    }

    .contact-detail-icon {
      width: 36px;
      height: 36px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      flex-shrink: 0;
    }

    .contact-form {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .contact-form input,
    .contact-form textarea {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 3px;
      padding: 0.85rem 1rem;
      font-family: var(--sans);
      font-size: 0.92rem;
      color: var(--sand-light);
      transition: border-color 0.18s ease, background-color 0.18s ease;
      outline: none;
    }

    .contact-form input::placeholder,
    .contact-form textarea::placeholder {
      color: rgba(245, 237, 224, 0.6);
    }

    .contact-form input:focus,
    .contact-form textarea:focus {
      border-color: var(--orange-light);
      background: rgba(255, 255, 255, 0.09);
    }

    .contact-form textarea {
      resize: vertical;
      min-height: 120px;
    }

    .contact-form .btn-primary {
      align-self: flex-start;
    }

    /* ============================================
       FOOTER
       ============================================ */
    .footer {
      background: #001E28;
      color: var(--sand-dark);
      padding: 3rem 2rem 2rem;
    }

    .footer-inner {
      max-width: var(--max-w);
      margin: 0 auto;
    }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 1.5rem;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      font-size: 0.8rem;
    }

    .footer-bottom a {
      color: var(--sand-dark);
      text-decoration: none;
      transition: color 0.2s;
    }

    .footer-bottom a:hover { color: var(--orange-light); }

    /* Site links: three columns on desktop, stacked on phones. */
    .footer-nav {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 2rem 3rem;
      padding-bottom: 2.25rem;
    }

    .footer-h {
      font-family: var(--display);
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--white);
      margin-bottom: 0.75rem;
    }

    .footer-col ul { list-style: none; }

    .footer-col li {
      font-size: 0.95rem;
      color: var(--sand-dark);
      padding: 0.3rem 0;
    }

    .footer-col a {
      color: var(--sand-dark);
      text-decoration: none;
      transition: color 0.2s;
      overflow-wrap: anywhere;
    }

    .footer-col a:hover { color: var(--orange-light); text-decoration: underline; }

    .footer a:focus-visible { outline: 2px solid var(--orange-light); outline-offset: 3px; border-radius: 2px; }

    @media (max-width: 720px) {
      .footer-nav { grid-template-columns: 1fr; gap: 1.75rem; }
      .footer-col li { padding: 0; }
      /* 44px tap targets on phones */
      .footer-col a { display: flex; align-items: center; min-height: 44px; }
      .footer-col li:not(:has(a)) { min-height: 44px; display: flex; align-items: center; }
      .footer-bottom { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
    }

    /* ============================================
       SHARED COMPONENTS
       ============================================ */
    /* Visually hidden, still read by screen readers (form labels). */
    .sr-only {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* FAQ: a list of <details>. Markup:
       <div class="faq"><details><summary>Question</summary><div class="faq-a"><p>Answer</p></div></details></div> */
    .faq {
      display: grid;
      gap: 0.75rem;
      max-width: 820px;
      margin-top: 2.5rem;
    }

    .section-head-center + .faq,
    .section-head-center .faq { margin-left: auto; margin-right: auto; }

    .faq details {
      background: var(--white);
      border: 1px solid var(--sand-dark);
      border-radius: 3px;
      box-shadow: 0 1px 3px rgba(0, 55, 70, 0.04);
      transition: border-color 0.18s ease, box-shadow 0.18s ease;
    }

    .faq details[open] {
      border-color: var(--teal-light);
      box-shadow: 0 8px 20px rgba(0, 55, 70, 0.07);
    }

    .faq summary {
      position: relative;
      list-style: none;
      cursor: pointer;
      min-height: 44px;
      padding: 1.05rem 3.25rem 1.05rem 1.35rem;
      font-family: var(--sans);
      font-size: 1.05rem;
      font-weight: 600;
      line-height: 1.4;
      color: var(--earth);
      border-radius: 3px;
      transition: color 0.18s ease;
    }

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

    /* Chevron drawn with borders, so there is no glyph for a screen reader to read. */
    .faq summary::after {
      content: '';
      position: absolute;
      right: 1.4rem;
      top: 50%;
      width: 9px;
      height: 9px;
      border-right: 2px solid var(--orange-dark);
      border-bottom: 2px solid var(--orange-dark);
      transform: translateY(-70%) rotate(45deg);
      transition: transform 0.2s;
    }

    .faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }

    .faq summary:hover { color: var(--teal-light); }
    .faq summary:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

    .faq details > :not(summary) {
      padding: 0 1.35rem 1.25rem;
      font-size: 0.98rem;
      color: var(--text-mid);
      line-height: 1.65;
    }

    .faq .faq-a p + p { margin-top: 0.75rem; }

    /* Straight answers: plain prose, one column, a bold question leading each
       paragraph. Markup:
       <div class="answers"><p><strong>Question?</strong> Answer.</p></div> */
    .answers {
      max-width: 680px;
      margin-top: 2rem;
    }
    .section-head-center + .answers { margin-left: auto; margin-right: auto; }
    .answers p {
      font-size: 1.02rem;
      line-height: 1.7;
      color: var(--text-mid);
      margin: 0;
    }
    .answers p + p { margin-top: 1.6rem; }
    .answers strong {
      color: var(--earth);
      font-weight: 600;
    }

    /* Call, Text, Email: big buttons that wrap to full width on phones.
       Use with .btn .btn-primary / .btn-secondary on each link. */
    .contact-quick {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin: 1.5rem 0;
    }

    .contact-quick .btn {
      flex: 1 1 11rem;
      justify-content: center;
      min-height: 52px;
      font-size: 1.05rem;
      text-align: center;
    }

    .contact-quick .btn-secondary:hover { transform: none; }

    @media (max-width: 480px) {
      .contact-quick .btn { flex-basis: 100%; }
    }

    /* ============================================
       ANIMATIONS
       ============================================ */
    .fade-up {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Asked for less motion: show it straight away, no slide. */
    @media (prefers-reduced-motion: reduce) {
      .fade-up,
      .fade-up.visible {
        opacity: 1;
        transform: none;
        transition: none;
      }
    }

    /* stagger children */
    .stagger > * { transition-delay: calc(var(--i, 0) * 0.1s); }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 900px) {
      .hero-content { margin-bottom: 2.5rem; }
      .transform-visual { max-width: 320px; }
      .steps { grid-template-columns: 1fr; gap: 2.5rem; }
      .steps::before { display: none; }
      .features-grid { grid-template-columns: 1fr; }
      .about-content { grid-template-columns: 1fr; gap: 2rem; }
      .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
      .comparison-row { grid-template-columns: 1fr; }
      .comparison-cell.before { border-right: none; border-bottom: 1px solid var(--sand-dark); }
      .comparison-row.header { display: none; }
      .comparison-cell::before {
        display: block;
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-bottom: 0.35rem;
        opacity: 0.5;
      }
      .comparison-cell.before::before { content: 'Before'; }
      .comparison-cell.after::before { content: 'After'; }
    }

    @media (max-width: 640px) {
      .nav-links { display: none; }
      .nav-mobile-toggle { display: block; }
      .nav-links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--cream);
        padding: 1.5rem 2rem;
        box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        border-bottom: 1px solid var(--sand-dark);
      }
      /* anchor to the top instead of centring, so padding controls the gap under the nav */
      .hero { padding: 11rem 1.5rem 4rem; min-height: 100vh; min-height: 100dvh; align-items: flex-start; }
      .hero h1 { font-size: 1.8rem; }
      /* The desktop line breaks strand a word on narrow screens, so let the
         headline wrap to the column instead. */
      .hero h1 br { display: none; }
      .hero-visual { display: none; }
      .pricing-cards { grid-template-columns: 1fr; }
      section { padding: clamp(3rem, 6vw, 5rem) 1.5rem; }
    }

    /* ============================================
       DAVID'S PHOTO
       A real person is the one thing a template can't fake.
       ============================================ */
    .about-photo {
      margin: 0 0 1.75rem;
      max-width: 260px;
    }
    .about-photo-tall { max-width: 300px; }
    .about-photo img,
    .contact-photo img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 3px;
    }
    .about-photo figcaption {
      margin-top: 0.6rem;
      font-size: 0.85rem;
      color: var(--text-light);
    }
    .contact-photo {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 0 0 1.5rem;
    }
    .contact-photo img { width: 72px; flex: none; }
    .contact-photo figcaption {
      font-size: 0.95rem;
      line-height: 1.45;
    }
    @media (max-width: 860px) {
      .about-photo, .about-photo-tall { max-width: 220px; }
    }