:root {
        --ink: #0a0a0a;
        --paper: #fafaf7;
        --paper-warm: #f4efe6;
        --hair: rgba(10, 10, 10, 0.12);
        --hair2: rgba(10, 10, 10, 0.25);
        --muted: rgba(10, 10, 10, 0.55);
        --faint: rgba(10, 10, 10, 0.35);

        /* pastel category bgs (lifted from Forkd pills) */
        --bg-sage: #e8f0d8;
        --ink-sage: #2d3f12;
        --bg-salmon: #f8dcdc;
        --ink-salmon: #5c1f1f;
        --bg-glacier: #d4e6ee;
        --ink-glacier: #0f3a4a;
        --bg-amber: #f8e5c2;
        --ink-amber: #5c3a0f;
        --bg-rose: #f6d2e2;
        --ink-rose: #5c1840;
        --bg-orchid: #edc8ed;
        --ink-orchid: #3f0f4a;
        --bg-canary: #fff3b0;
        --ink-canary: #5c4a0f;

        --serif: "Montserrat", -apple-system, system-ui, sans-serif;
        --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
        --sans: "Inter", -apple-system, system-ui, sans-serif;
      }

      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
      }
      html {
        scroll-behavior: smooth;
        overflow-x: clip;
        max-width: 100vw;
      }
      body {
        background: var(--paper);
        color: var(--ink);
        font-family: var(--sans);
        font-size: 16px;
        line-height: 1.55;
        -webkit-font-smoothing: antialiased;
        text-wrap: pretty;
        overflow-x: clip;
        max-width: 100vw;
        touch-action: pan-y;
      }
      ::selection {
        background: #fff59d;
        color: var(--ink);
      }
      h1,
      h2,
      h3,
      h4,
      h5 {
        overflow-wrap: break-word;
        hyphens: auto;
      }
      img {
        max-width: 100%;
        height: auto;
      }

      a {
        color: inherit;
      }
      button {
        font-family: inherit;
      }

      /* ---------- Tokens ---------- */
      .mono-label {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
      }
      .mono-label.ink {
        color: var(--ink);
      }
      .mono-micro {
        font-family: var(--mono);
        font-size: 9px;
        font-weight: 600;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--faint);
      }
      .pill {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        background: #0a0a0a;
        color: #fff59d;
      }

      /* ---------- Layout ---------- */
      .wrap {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 32px;
      }
      @media (max-width: 720px) {
        .wrap {
          padding: 0 20px;
        }
      }

      /* ---------- Top nav ---------- */
      .nav {
        position: sticky;
        top: 0;
        z-index: 50;
        background: rgba(250, 250, 247, 0.92);
        backdrop-filter: saturate(140%) blur(8px);
        border-bottom: 1px solid var(--hair);
      }
      .nav-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
      }
      .logo {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
      }
      .logo-mark {
        width: 64px;
        height: 64px;
        display: grid;
        place-items: center;
      }
      @media (max-width: 480px) {
        .logo-mark {
          width: 55px;
          height: 55px;
        }
      }
      .logo-mark img,
      .logo-mark svg {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .logo-word {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 17px;
        letter-spacing: -0.5px;
        line-height: 1;
      }
      .logo-sub {
        font-family: var(--mono);
        font-size: 9px;
        color: var(--muted);
        letter-spacing: 0.8px;
        text-transform: uppercase;
        margin-top: 2px;
      }

      .nav-links {
        display: flex;
        align-items: center;
        gap: 36px;
      }
      .nav-links a {
        text-decoration: none;
        font-family: var(--mono);
        font-size: 18px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--ink);
        opacity: 0.7;
      }
      .nav-links a:hover {
        opacity: 1;
      }
      .nav-links .nav-phone {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--ink);
        color: var(--paper);
        padding: 10px 16px;
        opacity: 1;
        font-size: 18px;
        letter-spacing: 0.4px;
        text-transform: none;
        white-space: nowrap;
      }
      .nav-links .nav-phone:hover {
        background: #000;
        opacity: 1;
      }
      .nav-links .nav-phone svg {
        display: block;
        flex: 0 0 auto;
      }
      @media (max-width: 1100px) {
        .nav-links {
          gap: 24px;
        }
        .nav-links a {
          font-size: 16px;
        }
        .nav-links .nav-phone {
          font-size: 15px;
          padding: 8px 12px;
        }
      }
      @media (max-width: 760px) {
        .nav-links a:not(.nav-phone) {
          display: none;
        }
        .nav-links .nav-phone {
          font-size: 13px;
          padding: 7px 10px;
          gap: 6px;
        }
        .nav-links .nav-phone svg {
          width: 14px;
          height: 14px;
        }
      }
      @media (max-width: 420px) {
        .nav-links .nav-phone {
          font-size: 12px;
          padding: 6px 9px;
          letter-spacing: 0.2px;
        }
      }

      /* ---------- Hero ---------- */
      .hero {
        border-bottom: 1px solid var(--ink);
        padding: 72px 0 88px;
        position: relative;
      }
      .hero-grid {
        display: grid;
        grid-template-columns: 1.15fr 1fr;
        gap: 60px;
        align-items: start;
      }
      @media (max-width: 920px) {
        .hero-grid {
          grid-template-columns: 1fr;
          gap: 40px;
        }
        .hero {
          padding: 48px 0 64px;
        }
      }

      .hero-eyebrow {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 22px;
      }
      .hero-eyebrow .dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #4ea34e;
        box-shadow: 0 0 0 4px rgba(78, 163, 78, 0.18);
      }

      .hero-title {
        font-family: var(--serif);
        font-weight: 700;
        font-size: clamp(34px, 6.4vw, 76px);
        line-height: 1.02;
        letter-spacing: -1.2px;
        margin: 0 0 22px;
        overflow-wrap: break-word;
        hyphens: auto;
      }
      @media (min-width: 600px) {
        .hero-title {
          letter-spacing: -1.6px;
          line-height: 0.98;
        }
      }
      .hero-title em {
        font-style: normal;
        background: linear-gradient(transparent 62%, var(--bg-canary) 62%);
        padding: 0 2px;
      }

      .hero-lede {
        font-family: var(--serif);
        font-weight: 400;
        font-size: 20px;
        line-height: 1.45;
        color: var(--muted);
        max-width: 540px;
        margin: 0 0 32px;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 28px;
      }
      .btn {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        text-decoration: none;
        border: 1.5px solid var(--ink);
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.7px;
        text-transform: uppercase;
        background: var(--paper);
        color: var(--ink);
        transition: transform 0.08s ease;
      }
      .btn:hover {
        transform: translate(-1px, -1px);
        box-shadow: 3px 3px 0 var(--ink);
      }
      .btn.primary {
        background: var(--ink);
        color: var(--paper);
      }
      .btn.primary:hover {
        background: var(--paper);
        color: var(--ink);
      }
      .btn svg {
        width: 14px;
        height: 14px;
      }

      .hero-meta {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
        border-top: 1px solid var(--hair);
        padding-top: 20px;
      }
      .hero-meta-item {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .hero-meta-item .v {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 18px;
        letter-spacing: -0.3px;
      }
      .hero-meta-item .l {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
      }

      /* Price card on right of hero */
      .price-card {
        background: var(--bg-canary);
        border: 1.5px solid var(--ink);
        padding: 32px 32px 28px;
        position: relative;
        display: flex;
        flex-direction: column;
      }
      .price-card .guarantee-sticker {
        position: absolute;
        top: -18px;
        right: -18px;
        width: 110px;
        height: 110px;
        background: var(--ink);
        color: var(--paper);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-family: var(--serif);
        font-weight: 800;
        font-size: 17px;
        line-height: 1;
        letter-spacing: -0.4px;
        text-transform: uppercase;
        border: 2px solid var(--ink);
        outline: 2px solid var(--paper);
        outline-offset: 2px;
        transform: rotate(-8deg);
        box-shadow: 0 6px 0 -2px rgba(10, 10, 10, 0.25);
      }
      .price-card .guarantee-sticker .guarantee-label {
        display: block;
      }
      @media (max-width: 720px) {
        .price-card .guarantee-sticker {
          width: 86px;
          height: 86px;
          font-size: 13px;
          top: -12px;
          right: -10px;
        }
      }
      .price-big {
        display: flex;
        align-items: baseline;
        gap: 10px;
        margin-top: 14px;
      }
      .price-big .num {
        font-family: var(--serif);
        font-weight: 700;
        font-size: clamp(80px, 10vw, 132px);
        line-height: 0.9;
        letter-spacing: -4px;
      }
      .price-big .unit {
        font-family: var(--serif);
        font-weight: 500;
        font-size: 28px;
        letter-spacing: -0.5px;
      }
      .price-explain {
        font-size: 14px;
        line-height: 1.55;
        color: var(--ink-canary);
        border-top: 1px solid rgba(10, 10, 10, 0.18);
        padding-top: 14px;
        margin-top: 14px;
      }
      .price-explain strong {
        font-weight: 700;
      }
      .price-row {
        display: flex;
        justify-content: space-between;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.4px;
        padding: 6px 0;
      }
      .price-row .key {
        color: var(--ink-canary);
        opacity: 0.75;
        text-transform: uppercase;
      }
      .price-row .val {
        color: var(--ink);
        font-weight: 600;
      }
      .strike {
        text-decoration: line-through;
        opacity: 0.5;
      }
      .price-fees {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px dashed rgba(10, 10, 10, 0.22);
      }
      .price-fees-label {
        display: block;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.8px;
        text-transform: uppercase;
        color: var(--ink-canary);
        opacity: 0.85;
        margin-bottom: 4px;
      }
      .price-fees .price-row {
        padding: 4px 0;
      }
      .price-fees-note {
        margin-top: 8px;
        font-family: var(--mono);
        font-size: 10.5px;
        line-height: 1.5;
        letter-spacing: 0.3px;
        color: var(--ink-canary);
        opacity: 0.75;
      }

      /* ---------- Section header ---------- */
      .section {
        padding: 88px 0;
        border-bottom: 1px solid var(--hair);
      }
      @media (max-width: 720px) {
        .section {
          padding: 56px 0;
        }
      }
      .section-head {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 60px;
        margin-bottom: 48px;
      }
      @media (max-width: 760px) {
        .section-head {
          grid-template-columns: 1fr;
          gap: 14px;
          margin-bottom: 36px;
        }
      }
      .section-num {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.7px;
        text-transform: uppercase;
        color: var(--muted);
        border-top: 1.5px solid var(--ink);
        padding-top: 12px;
      }
      .section-title {
        font-family: var(--serif);
        font-weight: 700;
        font-size: clamp(26px, 4.4vw, 48px);
        line-height: 1.05;
        letter-spacing: -0.8px;
        margin: 0 0 14px;
      }
      @media (min-width: 600px) {
        .section-title {
          letter-spacing: -1.2px;
          line-height: 1.02;
        }
      }
      .section-lede {
        font-size: 17px;
        color: var(--muted);
        max-width: 640px;
        line-height: 1.5;
        margin: 0;
      }

      /* ---------- Services (compact tile grid + dialog) ---------- */
      .services-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 14px;
      }
      @media (max-width: 1023px) {
        .services-grid { grid-template-columns: repeat(3, 1fr); }
      }
      @media (max-width: 479px) {
        .services-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      }

      .service-tile {
        appearance: none;
        background: var(--paper);
        border: 1.5px solid var(--ink);
        border-radius: 0;
        padding: 18px 12px 16px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
        font: inherit;
        color: var(--ink);
        min-height: 130px;
        /* Raised "physical button" — solid shadow only on bottom */
        box-shadow: 0 4px 0 0 var(--ink);
        transform: translateY(0);
        transition:
          transform 0.16s cubic-bezier(0.32, 0.72, 0, 1),
          box-shadow 0.16s cubic-bezier(0.32, 0.72, 0, 1);
        will-change: transform, box-shadow;
      }
      .service-tile:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 0 0 var(--ink);
      }
      /* "Pressed-down" state — JS adds .pressed; mirrors :active for keyboard */
      .service-tile:active,
      .service-tile.pressed {
        transform: translateY(4px);
        box-shadow: 0 0 0 0 var(--ink);
        transition:
          transform 0.08s ease-out,
          box-shadow 0.08s ease-out;
      }
      .service-tile:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 3px;
      }
      .service-tile .tile-icon {
        width: 52px;
        height: 52px;
        border-radius: 0;
        display: grid;
        place-items: center;
      }
      .service-tile .tile-icon svg {
        width: 26px;
        height: 26px;
      }
      .service-tile .tile-title {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 14px;
        letter-spacing: -0.2px;
        line-height: 1.2;
        overflow-wrap: break-word;
      }
      @media (max-width: 479px) {
        .service-tile { padding: 14px 8px 12px; min-height: 110px; gap: 10px; }
        .service-tile .tile-icon { width: 46px; height: 46px; border-radius: 0; }
        .service-tile .tile-icon svg { width: 22px; height: 22px; }
        .service-tile .tile-title { font-size: 13px; }
      }

      /* Pastel bg + ink color per service */
      .service-tile.glacier .tile-icon { background: var(--bg-glacier); color: var(--ink-glacier); }
      .service-tile.amber   .tile-icon { background: var(--bg-amber);   color: var(--ink-amber); }
      .service-tile.salmon  .tile-icon { background: var(--bg-salmon);  color: var(--ink-salmon); }
      .service-tile.sage    .tile-icon { background: var(--bg-sage);    color: var(--ink-sage); }
      .service-tile.rose    .tile-icon { background: var(--bg-rose);    color: var(--ink-rose); }
      .service-tile.orchid  .tile-icon { background: var(--bg-orchid);  color: var(--ink-orchid); }
      .service-tile.canary  .tile-icon { background: var(--bg-canary);  color: var(--ink-canary); }

      /* Dialog */
      .service-dialog {
        border: 1.5px solid var(--ink);
        border-radius: 0;
        padding: 0;
        max-width: 540px;
        width: calc(100% - 32px);
        background: var(--paper);
        color: var(--ink);
        margin: auto;
        /* Animation: closed/initial state */
        opacity: 0;
        transform: translateY(40px) scale(0.96);
        transition:
          opacity 0.22s ease-out,
          transform 0.32s cubic-bezier(0.22, 0.85, 0.3, 1),
          overlay 0.32s allow-discrete,
          display 0.32s allow-discrete;
      }
      .service-dialog[open].is-open {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      .service-dialog::backdrop {
        background: rgba(10, 10, 10, 0);
        backdrop-filter: blur(0px);
        transition:
          background 0.24s ease-out,
          backdrop-filter 0.24s ease-out,
          overlay 0.24s allow-discrete,
          display 0.24s allow-discrete;
      }
      .service-dialog[open].is-open::backdrop {
        background: rgba(10, 10, 10, 0.5);
        backdrop-filter: blur(4px);
      }
      .service-dialog-inner {
        position: relative;
        padding: 32px 28px 26px;
      }
      .service-dialog .close-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 32px;
        height: 32px;
        background: transparent;
        border: 1.5px solid var(--ink);
        border-radius: 0;
        cursor: pointer;
        font-size: 18px;
        line-height: 1;
        display: grid;
        place-items: center;
        color: var(--ink);
        padding: 0;
      }
      .service-dialog .close-btn:hover { background: var(--bg-canary); }
      .service-dialog .dialog-icon {
        width: 56px;
        height: 56px;
        border-radius: 0;
        display: grid;
        place-items: center;
        margin-bottom: 14px;
      }
      .service-dialog .dialog-icon svg { width: 28px; height: 28px; }
      .service-dialog .dialog-icon.glacier { background: var(--bg-glacier); color: var(--ink-glacier); }
      .service-dialog .dialog-icon.amber   { background: var(--bg-amber);   color: var(--ink-amber); }
      .service-dialog .dialog-icon.salmon  { background: var(--bg-salmon);  color: var(--ink-salmon); }
      .service-dialog .dialog-icon.sage    { background: var(--bg-sage);    color: var(--ink-sage); }
      .service-dialog .dialog-icon.rose    { background: var(--bg-rose);    color: var(--ink-rose); }
      .service-dialog .dialog-icon.orchid  { background: var(--bg-orchid);  color: var(--ink-orchid); }
      .service-dialog .dialog-icon.canary  { background: var(--bg-canary);  color: var(--ink-canary); }
      .service-dialog h3 {
        font-family: var(--serif);
        font-size: 22px;
        line-height: 1.2;
        letter-spacing: -0.4px;
        margin: 0 36px 10px 0;
        font-weight: 700;
      }
      .service-dialog p {
        font-size: 15px;
        line-height: 1.55;
        color: var(--muted);
        margin: 0 0 16px;
      }
      .service-dialog ul {
        list-style: none;
        padding: 14px 0 0;
        margin: 0 0 22px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        border-top: 1px dashed var(--hair2);
      }
      .service-dialog ul li {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--ink);
        display: flex;
        gap: 8px;
      }
      .service-dialog ul li::before { content: "·"; color: var(--faint); }
      .service-dialog .dialog-cta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
      }
      .service-dialog .dialog-price {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        padding: 6px 12px;
        background: var(--bg-canary);
        border: 1px solid var(--ink);
        border-radius: 999px;
        color: var(--ink);
      }

      /* Bottom-sheet on mobile — slides up from below the viewport */
      @media (max-width: 720px) {
        .service-dialog {
          margin: 0 auto auto;
          max-width: 100%;
          width: 100%;
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          top: auto;
          border-radius: 0;
          border-bottom: none;
          max-height: 88vh;
          overflow-y: auto;
          transform: translateY(100%);
        }
        .service-dialog[open].is-open {
          transform: translateY(0);
        }
        .service-dialog-inner {
          padding: 26px 20px 28px;
          padding-bottom: max(28px, env(safe-area-inset-bottom));
        }
        .service-dialog h3 { font-size: 20px; }
      }

      .service {
        padding: 28px 26px 30px;
        border-right: 1px solid var(--ink);
        border-bottom: 1px solid var(--ink);
        display: flex;
        flex-direction: column;
        gap: 14px;
        background: var(--paper);
        position: relative;
        min-height: 240px;
      }
      .service .pill-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .service-pill {
        display: inline-flex;
        padding: 4px 10px;
        border-radius: 999px;
        font-family: var(--mono);
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.6px;
        text-transform: uppercase;
      }
      .service-icon {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
      }
      .service h3 {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 22px;
        line-height: 1.15;
        letter-spacing: -0.5px;
        margin: 0;
        overflow-wrap: break-word;
        hyphens: auto;
      }
      .service p {
        font-size: 14px;
        color: var(--muted);
        margin: 0;
        line-height: 1.5;
      }
      .service ul {
        list-style: none;
        padding: 0;
        margin: auto 0 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
        border-top: 1px dashed var(--hair2);
        padding-top: 12px;
      }
      .service ul li {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--ink);
        display: flex;
        gap: 8px;
      }
      .service ul li::before {
        content: "·";
        color: var(--faint);
      }

      /* tinted variants */
      .service.sage {
        background: var(--bg-sage);
      }
      .service.salmon {
        background: var(--bg-salmon);
      }
      .service.glacier {
        background: var(--bg-glacier);
      }
      .service.amber {
        background: var(--bg-amber);
      }
      .service.rose {
        background: var(--bg-rose);
      }
      .service.orchid {
        background: var(--bg-orchid);
      }
      .service.canary {
        background: var(--bg-canary);
      }

      /* ---------- How it works ---------- */
      .steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      @media (max-width: 760px) {
        .steps {
          grid-template-columns: 1fr;
        }
      }
      .step {
        border: 1px solid var(--ink);
        padding: 28px 26px;
        background: var(--paper);
        display: flex;
        flex-direction: column;
        gap: 12px;
      }
      .step-num {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 56px;
        line-height: 0.9;
        letter-spacing: -2px;
        color: var(--ink);
      }
      .step h4 {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 22px;
        margin: 0;
        letter-spacing: -0.5px;
      }
      .step p {
        margin: 0;
        color: var(--muted);
        font-size: 15px;
        line-height: 1.5;
      }
      .step .tag {
        margin-top: auto;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
        padding-top: 14px;
        border-top: 1px dashed var(--hair2);
      }

      /* ---------- About ---------- */
      .about-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 56px;
        align-items: start;
      }
      @media (max-width: 860px) {
        .about-grid {
          grid-template-columns: 1fr;
          gap: 32px;
        }
      }

      .portrait {
        aspect-ratio: 4 / 5;
        background: repeating-linear-gradient(
          135deg,
          var(--bg-glacier) 0 14px,
          #c8dce6 14px 28px
        );
        border: 1px solid var(--ink);
        position: relative;
        display: grid;
        place-items: center;
      }
      .portrait .label {
        position: absolute;
        bottom: 14px;
        left: 14px;
        background: var(--paper);
        border: 1px solid var(--ink);
        padding: 6px 10px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
      }
      .portrait .silhouette {
        width: 60%;
        height: 70%;
        color: var(--ink-glacier);
        opacity: 0.7;
      }
      .portrait-img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }

      .about-content h2 {
        font-family: var(--serif);
        font-weight: 700;
        font-size: clamp(28px, 3.6vw, 40px);
        letter-spacing: -1px;
        line-height: 1.05;
        margin: 0 0 18px;
      }
      .about-content p {
        font-size: 17px;
        line-height: 1.6;
        color: var(--ink);
        margin: 0 0 18px;
      }
      .about-content p.muted {
        color: var(--muted);
      }

      .about-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0;
        border-top: 1px solid var(--hair);
        border-bottom: 1px solid var(--hair);
        margin-top: 24px;
      }
      .about-stat {
        padding: 16px 12px;
        border-right: 1px solid var(--hair);
        text-align: center;
      }
      .about-stat:last-child {
        border-right: none;
      }
      .about-stat .v {
        font-family: var(--serif);
        font-weight: 700;
        font-size: 28px;
        letter-spacing: -0.6px;
      }
      .about-stat .l {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
      }

      /* ---------- Tack-banner ---------- */
      .tack-banner {
        position: fixed;
        top: 70px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 70;
        background: var(--bg-canary);
        color: var(--ink);
        border: 1.5px solid var(--ink);
        padding: 12px 18px;
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 14px;
        box-shadow: 4px 4px 0 var(--ink);
        max-width: calc(100vw - 24px);
      }
      .tack-banner button {
        background: transparent;
        border: none;
        font-size: 18px;
        cursor: pointer;
        line-height: 1;
        color: var(--ink);
        padding: 0;
      }

      /* ---------- Booking form ---------- */
      .booking-section { background: var(--paper-warm); }
      .booking-form {
        max-width: 720px;
        margin: 0;
        background: var(--paper);
        border: 1.5px solid var(--ink);
        padding: 32px;
      }
      @media (max-width: 720px) {
        .booking-form { padding: 22px 18px; }
      }
      .booking-honey { display: none !important; }
      .booking-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 18px;
      }
      @media (max-width: 560px) {
        .booking-grid { grid-template-columns: 1fr; gap: 14px; }
      }
      .booking-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
      }
      .booking-field--full { grid-column: 1 / -1; }
      .booking-label {
        font-family: var(--mono);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
      }
      .booking-form input[type="text"],
      .booking-form input[type="tel"],
      .booking-form textarea {
        width: 100%;
        font-family: var(--sans);
        font-size: 16px;
        line-height: 1.4;
        padding: 12px 14px;
        background: var(--paper);
        color: var(--ink);
        border: 1.5px solid var(--ink);
        border-radius: 0;
        outline: none;
        appearance: none;
      }
      .booking-form input:focus,
      .booking-form textarea:focus {
        background: var(--bg-canary);
      }
      .booking-form textarea {
        resize: vertical;
        min-height: 96px;
        font-family: var(--sans);
      }
      .booking-radio {
        border: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .booking-radio legend { padding: 0; margin-bottom: 4px; }
      .booking-radio > div,
      .booking-radio-opt {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        cursor: pointer;
        padding: 6px 0;
      }
      @media (min-width: 480px) {
        .booking-radio { flex-direction: row; flex-wrap: wrap; gap: 18px; }
        .booking-radio legend { flex-basis: 100%; }
      }
      .booking-radio input[type="radio"] {
        appearance: none;
        width: 18px;
        height: 18px;
        border: 1.5px solid var(--ink);
        border-radius: 50%;
        cursor: pointer;
        flex-shrink: 0;
        position: relative;
      }
      .booking-radio input[type="radio"]:checked::after {
        content: "";
        position: absolute;
        inset: 3px;
        background: var(--ink);
        border-radius: 50%;
      }
      .booking-submit {
        margin-top: 22px;
        display: flex;
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
      }
      .booking-submit .btn {
        cursor: pointer;
        font-family: var(--mono);
      }
      .booking-privacy {
        margin: 0;
        font-size: 12px;
        color: var(--muted);
        line-height: 1.5;
        max-width: 560px;
      }
      .booking-error {
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        color: var(--ink-salmon);
        background: var(--bg-salmon);
        border: 1.5px solid var(--ink-salmon);
        padding: 10px 14px;
        margin: 0;
      }
      .booking-error a { font-weight: 700; }
      .booking-done {
        max-width: 720px;
        background: var(--bg-canary);
        border: 1.5px solid var(--ink);
        padding: 32px;
        box-shadow: 4px 4px 0 var(--ink);
      }
      .booking-done h3 {
        font-family: var(--serif);
        font-size: clamp(24px, 3.6vw, 32px);
        line-height: 1.1;
        letter-spacing: -0.6px;
        margin: 0 0 12px;
      }
      .booking-done p {
        font-size: 16px;
        line-height: 1.55;
        color: var(--ink);
        margin: 0;
        max-width: 560px;
      }
      .booking-done a { font-weight: 600; }
      @media (max-width: 720px) {
        .booking-done { padding: 22px 18px; }
      }

      /* ---------- Contact ---------- */
      .contact-section {
        background: var(--paper-warm);
        border-top: 1.5px solid var(--ink);
        border-bottom: 1.5px solid var(--ink);
      }
      .contact-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 60px;
        align-items: center;
      }
      @media (max-width: 860px) {
        .contact-grid {
          grid-template-columns: 1fr;
          gap: 36px;
        }
      }

      .contact-headline {
        font-family: var(--serif);
        font-weight: 700;
        font-size: clamp(36px, 5vw, 60px);
        line-height: 1;
        letter-spacing: -1.4px;
        margin: 0 0 24px;
      }
      .contact-sub {
        font-family: var(--serif);
        font-size: 19px;
        color: var(--muted);
        margin: 0 0 32px;
        max-width: 480px;
      }

      .contact-card {
        background: var(--paper);
        border: 1.5px solid var(--ink);
        padding: 0;
      }
      .contact-row {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 22px 24px;
        border-bottom: 1px solid var(--hair);
        text-decoration: none;
        color: var(--ink);
        transition: background 0.1s;
      }
      .contact-row:last-child {
        border-bottom: none;
      }
      .contact-row:hover {
        background: var(--bg-canary);
      }
      .contact-row .icon-box {
        width: 44px;
        height: 44px;
        border: 1.5px solid var(--ink);
        display: grid;
        place-items: center;
        flex-shrink: 0;
        background: var(--paper);
      }
      .contact-row .meta {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
      }
      .contact-row .meta .l {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--muted);
      }
      .contact-row .meta .v {
        font-family: var(--serif);
        font-weight: 600;
        font-size: 19px;
        letter-spacing: -0.3px;
        word-break: break-all;
      }
      .contact-row .arrow {
        margin-left: auto;
        font-family: var(--mono);
        color: var(--muted);
      }

      /* ---------- Footer ---------- */
      .footer {
        padding: 40px 0 56px;
        background: var(--ink);
        color: var(--paper);
      }
      .footer .wrap {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr 1fr;
        gap: 40px;
      }
      @media (max-width: 760px) {
        .footer .wrap {
          grid-template-columns: 1fr 1fr;
        }
      }
      .footer h5 {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.7px;
        text-transform: uppercase;
        color: rgba(250, 250, 247, 0.5);
        margin: 0 0 16px;
        font-weight: 600;
      }
      .footer ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .footer a {
        color: var(--paper);
        text-decoration: none;
        opacity: 0.85;
        font-size: 14px;
        overflow-wrap: anywhere;
        word-break: normal;
      }
      .footer ul li {
        min-width: 0;
      }
      .footer a:hover {
        opacity: 1;
        text-decoration: underline;
      }
      .footer .footer-logo .logo-mark img {
        filter: invert(1);
      }
      .footer .footer-logo .logo-word {
        color: var(--paper);
      }
      .footer .footer-logo .logo-sub {
        color: rgba(250, 250, 247, 0.5);
      }
      .footer p {
        font-size: 14px;
        line-height: 1.6;
        color: rgba(250, 250, 247, 0.7);
        margin: 14px 0 0;
        max-width: 280px;
      }
      .footer .colophon {
        grid-column: 1 / -1;
        border-top: 1px solid rgba(250, 250, 247, 0.2);
        margin-top: 16px;
        padding-top: 20px;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: rgba(250, 250, 247, 0.5);
        flex-wrap: wrap;
      }

      /* ---------- Marquee strip ---------- */
      .strip {
        background: var(--ink);
        color: var(--paper);
        padding: 14px 0;
        overflow: hidden;
        border-top: 1px solid var(--ink);
        border-bottom: 1px solid var(--ink);
      }
      .strip-track {
        display: flex;
        gap: 40px;
        white-space: nowrap;
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        animation: scroll 40s linear infinite;
      }
      .strip-track span {
        display: inline-flex;
        align-items: center;
        gap: 14px;
      }
      .strip-track span::after {
        content: "✦";
        color: #fff59d;
        opacity: 0.7;
      }
      @keyframes scroll {
        from {
          transform: translateX(0);
        }
        to {
          transform: translateX(-50%);
        }
      }

      /* ---------- Sticky mobile CTA ---------- */
      .sticky-cta {
        display: none;
      }
      @media (max-width: 720px) {
        .sticky-cta {
          display: inline-flex;
          position: fixed;
          left: 12px;
          right: 12px;
          bottom: max(12px, env(safe-area-inset-bottom));
          z-index: 60;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 14px 18px;
          background: var(--ink);
          color: var(--paper);
          text-decoration: none;
          font-family: var(--mono);
          font-size: 13px;
          font-weight: 700;
          letter-spacing: 0.6px;
          text-transform: uppercase;
          border: 1.5px solid var(--ink);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
        }
        body {
          padding-bottom: 72px;
        }
      }

      /* ---------- Mobile polish ---------- */
      .contact-row .meta .v {
        word-break: normal;
        overflow-wrap: anywhere;
      }

      @media (max-width: 720px) {
        .wrap {
          padding-left: max(24px, env(safe-area-inset-left));
          padding-right: max(24px, env(safe-area-inset-right));
        }

        /* Card internals */
        .service,
        .step,
        .zone {
          padding: 22px 20px;
        }
        .price-card {
          padding: 24px 22px 22px;
          min-height: auto;
        }

        /* Typography */
        .hero {
          padding: 40px 0 56px;
        }
        .hero-lede {
          font-size: 17px;
        }
        .hero-meta-item .v {
          font-size: 16px;
        }
        .hero-meta {
          gap: 18px;
          padding-top: 16px;
        }
        .hero-actions .btn {
          padding: 12px 16px;
          font-size: 11px;
        }

        .price-big .num {
          font-size: 72px;
          letter-spacing: -3px;
        }
        .price-big .unit {
          font-size: 22px;
        }

        .service h3 {
          font-size: 19px;
        }
        .step h4 {
          font-size: 19px;
        }
        .step-num {
          font-size: 44px;
        }
        .zone .zone-name {
          font-size: 22px;
        }
        .about-content h2 {
          font-size: 24px;
        }
        .about-stat {
          padding: 12px 6px;
        }
        .about-stat .v {
          font-size: 20px;
        }
        .about-stat .l {
          letter-spacing: 0.4px;
        }

        .contact-headline {
          font-size: 32px;
          letter-spacing: -1px;
        }
        .contact-row {
          padding: 14px 14px;
          gap: 10px;
        }
        .contact-row .icon-box {
          width: 32px;
          height: 32px;
        }
        .contact-row .icon-box svg {
          width: 16px;
          height: 16px;
        }
        .contact-row .meta .v {
          font-size: clamp(13px, 3.8vw, 16px);
          letter-spacing: -0.2px;
        }
        .contact-row .meta .l {
          font-size: 9px;
        }
        .contact-row .arrow {
          display: none;
        }

        /* Section + footer rhythm */
        .section {
          padding: 48px 0;
        }
        .section-head {
          margin-bottom: 28px;
        }
        .footer {
          padding: 32px 0 40px;
        }
        .footer .wrap {
          gap: 28px;
        }

        /* About: portrait → round bubble top-right, content wraps around */
        #om .about-grid {
          display: block;
        }
        .portrait {
          float: right;
          width: 96px;
          height: 96px;
          max-width: none;
          aspect-ratio: 1 / 1;
          border-radius: 50%;
          overflow: hidden;
          margin: 4px 0 12px 16px;
          shape-outside: circle();
        }
        .portrait .label {
          display: none;
        }
      }

      /* ---------- Stars + ratings ---------- */
      .stars {
        display: inline-flex;
        align-items: center;
        gap: 1px;
        color: #c79b3a;
        line-height: 1;
      }
      .stars .star {
        display: block;
      }

      /* Hero rating badge */
      .hero-rating {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: var(--ink);
        font-family: var(--mono);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.4px;
      }
      .hero-rating .google-g {
        flex: 0 0 auto;
        display: block;
      }
      .hero-rating .stars {
        gap: 2px;
      }
      .hero-rating .rating-value {
        font-weight: 700;
        font-size: 18px;
      }
      .hero-rating .rating-meta {
        opacity: 0.7;
        text-transform: none;
        letter-spacing: 0;
      }
      .hero-rating:hover {
        text-decoration: underline;
      }
      @media (max-width: 560px) {
        .hero-eyebrow {
          flex-wrap: wrap;
        }
        .hero-rating {
          font-size: 13px;
          gap: 8px;
        }
        .hero-rating .google-g {
          width: 18px;
          height: 18px;
        }
        .hero-rating .stars svg {
          width: 18px;
          height: 18px;
        }
        .hero-rating .rating-value {
          font-size: 16px;
        }
        .hero-rating .rating-meta {
          display: none;
        }
      }

      /* Testimonials section */
      .testimonials-section {
        background: var(--paper-warm);
      }
      .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin: 32px 0 24px;
      }
      .testimonial-card {
        background: var(--paper);
        border: 1px solid var(--hair);
        padding: 22px 22px 20px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .testimonial-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: -4px;
      }
      .testimonial-avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        font-family: var(--serif);
        font-size: 17px;
        font-weight: 700;
        letter-spacing: -0.5px;
        border: 1.5px solid var(--ink);
        flex: 0 0 auto;
      }
      .testimonial-avatar.glacier { background: var(--bg-glacier); color: var(--ink-glacier); }
      .testimonial-avatar.amber   { background: var(--bg-amber);   color: var(--ink-amber); }
      .testimonial-avatar.salmon  { background: var(--bg-salmon);  color: var(--ink-salmon); }
      .testimonial-avatar.sage    { background: var(--bg-sage);    color: var(--ink-sage); }
      .testimonial-avatar.rose    { background: var(--bg-rose);    color: var(--ink-rose); }
      .testimonial-avatar.orchid  { background: var(--bg-orchid);  color: var(--ink-orchid); }
      .testimonial-avatar.canary  { background: var(--bg-canary);  color: var(--ink-canary); }
      .testimonial-stars {
        font-size: 0;
      }
      .testimonial-body {
        font-family: var(--serif);
        font-size: 17px;
        line-height: 1.5;
        margin: 0;
        color: var(--ink);
        flex: 1;
      }
      .testimonial-body::before {
        content: '\201C';
      }
      .testimonial-body::after {
        content: '\201D';
      }
      .testimonial-author {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.4px;
        text-transform: uppercase;
        color: var(--muted);
        padding-top: 12px;
        border-top: 1px solid var(--hair);
      }
      .testimonial-author .author-name {
        color: var(--ink);
        font-weight: 700;
        display: block;
      }
      .testimonial-author .author-meta {
        display: block;
        margin-top: 3px;
        opacity: 0.7;
      }
      .testimonials-cta {
        display: inline-block;
        font-family: var(--mono);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.6px;
        text-transform: uppercase;
        color: var(--ink);
        text-decoration: none;
        padding: 8px 0;
        border-bottom: 1px solid var(--ink);
      }
      .testimonials-cta:hover {
        opacity: 0.7;
      }
      @media (max-width: 900px) {
        .testimonials-grid {
          grid-template-columns: 1fr;
          gap: 14px;
        }
      }

      /* Footer rating link */
      .footer-rating {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        color: inherit;
        opacity: 0.85;
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 0.4px;
      }
      .footer-rating:hover {
        opacity: 1;
        text-decoration: underline;
      }