@font-face { font-family: "Rubik"; src: url("fonts/rubik-latin-var.woff2") format("woff2");
                 font-style: normal; font-weight: 400 800; font-display: swap; }
    .skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 20; padding: 0.75rem 1rem;
                 background: var(--amber); color: var(--ink); font-weight: 600; }
    .skip-link:focus { top: 1rem; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
    }

    * { box-sizing: border-box; }
    :root {
      --ink: #2A2724; --off: #FBF8F3; --linen: #E8D9C6; --amber: #DC8A55;
      --tint: #F7F1E6;                        /* the palest wash of the linen */
      --r: 6px; --r-in: 4px;
      --r-lg: 14px;                           /* photographs and mock-ups */
      --maxw: 1280px;                         /* content cap; widens on big screens */
      --pad-card: clamp(22px, 2.4vw, 34px);   /* every card pads the same */
      --gap-card: clamp(12px, 1.3vw, 18px);   /* every card stacks the same */
      --rule: rgba(42, 39, 36, 0.25);
      --rule-light: rgba(233, 233, 233, 0.30);
      --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
      /* one family, three weights - small offset, wide blur, tinted with the ink */
      --sh-1: 0 1px 2px rgba(42, 39, 36, 0.07), 0 3px 8px rgba(42, 39, 36, 0.07);
      --sh-2: 0 1px 2px rgba(42, 39, 36, 0.08), 0 4px 10px rgba(42, 39, 36, 0.08),
              0 14px 28px rgba(42, 39, 36, 0.10);
      --sh-3: 0 1px 2px rgba(42, 39, 36, 0.10), 0 4px 10px rgba(42, 39, 36, 0.10),
              0 20px 38px rgba(42, 39, 36, 0.16);
    }

    body { margin: 0; font-family: "Rubik", "Helvetica Neue", Arial, sans-serif;
           background: var(--off); color: var(--ink); }
    a { color: var(--amber); text-decoration: none; }
    a:hover { color: var(--ink); }

    .sec { padding-block: clamp(64px, 8vw, 132px); padding-inline: max(clamp(24px, 5vw, 72px), calc((100% - var(--maxw)) / 2));
           display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px); }
    .sec > h2 { margin-bottom: clamp(10px, 1.4vw, 24px); }
    .sec--linen { background: var(--linen); }
    .sec--ink   { background: var(--ink); color: var(--off); }
    .sec--off   { background: var(--off); }
    .sec--tint  { background: var(--tint); }

    h1 { margin: 0; font-weight: 800; letter-spacing: -0.045em; line-height: 0.98;
         font-size: clamp(34px, 4.6vw, 66px); }
    h2 { margin: 0; font-weight: 800; letter-spacing: -0.04em; line-height: 1.02;
         font-size: clamp(28px, 3.8vw, 54px); }
    p  { margin: 0; line-height: 1.5; font-size: clamp(16px, 1.5vw, 22px); }
    .small { font-size: clamp(15px, 1.35vw, 19px); line-height: 1.5; }
    .mono { font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.3;
            font-size: clamp(11px, 0.95vw, 13px); }
    .lede { font-weight: 600; }

    /* the motif: one hand-drawn amber stroke, reused about five times ------
       an underline that sits under a phrase, never a box or a border */
    .swoop { display: inline-block; position: relative; white-space: nowrap; }
    .swoop::after { content: ""; position: absolute; left: -1%; right: -1%; bottom: -0.16em;
                    height: 0.22em; background: var(--amber); opacity: 0.9;
                    -webkit-mask: var(--swoop) center / 100% 100% no-repeat;
                            mask: var(--swoop) center / 100% 100% no-repeat; }
    :root { --swoop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8.4C42 3.6 96 1.8 198 4.2' stroke='%23000' stroke-width='4.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); }

    /* buttons ------------------------------------------------------------ */
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px;
           min-height: 64px; padding: 0 clamp(22px, 2.4vw, 34px); background: var(--amber);
           color: var(--ink); font-weight: 600; font-size: clamp(17px, 1.5vw, 21px);
           border-radius: 999px; box-shadow: var(--sh-1); white-space: nowrap;
           letter-spacing: -0.015em; line-height: 1.2;
           transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
                       background 0.2s var(--ease); }
    .btn, .btn:hover { text-decoration: none; color: var(--ink); }
    .btn:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
    .btn:active { transform: translateY(0); }
    .btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
    .btn__t { white-space: nowrap; }
    .btn__a { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor;
              stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
              transition: transform 0.24s var(--ease); }
    .btn:hover .btn__a { transform: translateX(6px); }

    /* hero --------------------------------------------------------------- */
    .hero { background: var(--off);
            min-height: var(--hero-h, 100vh); min-height: var(--hero-h, 100dvh);
            padding-block: clamp(20px, 3vw, 46px) clamp(26px, 3.4vw, 52px);
            padding-inline: max(clamp(24px, 5vw, 72px), calc((100% - var(--maxw)) / 2));
            display: flex; flex-direction: column; position: relative; overflow: hidden; }
    .hero__bar { display: flex; align-items: center; justify-content: space-between;
                 padding-bottom: clamp(12px, 1.6vw, 22px); position: relative; z-index: 2; }
    /* a wash off the top of the hero instead of a rule under the wordmark */
    .hero::before { content: ""; position: absolute; inset: 0 0 auto 0;
                    height: clamp(220px, 30vw, 420px); pointer-events: none; opacity: 0.5;
                    background: linear-gradient(to bottom, var(--linen), transparent); }
    .mark { font-weight: 800; letter-spacing: -0.04em; font-size: clamp(21px, 2.1vw, 30px); }
    .hero__main { flex-grow: 1; display: flex; flex-direction: column; justify-content: center;
                  gap: clamp(30px, 4vw, 58px); min-height: 0; position: relative; z-index: 1; }
    .hero__top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
                 gap: clamp(24px, 4vw, 64px); align-items: end; }
    .hero__r { display: flex; flex-direction: column; align-items: flex-start;
               gap: clamp(16px, 1.8vw, 22px); padding-bottom: clamp(2px, 0.6vw, 8px); }
    .hero__note { opacity: 0.68; }

    /* the three mock-ups, composed rather than lined up ------------------- */
    .work3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
             gap: clamp(16px, 2.2vw, 34px); align-items: start;
             margin-top: clamp(30px, 4vw, 62px); padding-bottom: clamp(30px, 3vw, 46px); }
    .work3 > div { --ty: 0px; --rot: 0deg; --sc: 1; --lift: 0px;
                   transform: translateY(calc(var(--ty) + var(--lift))) rotate(var(--rot)) scale(var(--sc));
                   transition: transform 0.3s var(--ease); }
    .work3 > div:nth-child(1) { --ty: 34px; --rot: -1.4deg; transform-origin: right center; }
    .work3 > div:nth-child(2) { --ty: -14px; position: relative; z-index: 2; }
    .work3 > div:nth-child(3) { --ty: 44px; --rot: 1.4deg; transform-origin: left center; }
    .work3__more { display: none; }              /* the trio is a desktop composition */
    .work3 > div:nth-child(2) .shot { box-shadow: 0 2px 4px rgba(42, 39, 36, 0.10),
              0 10px 20px rgba(42, 39, 36, 0.12), 0 34px 60px rgba(42, 39, 36, 0.20); }
    .work3:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
    .shot { border-radius: var(--r-lg); overflow: hidden; background: var(--off);
            box-shadow: var(--sh-3); }
    .work3 img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
                 object-position: top center; display: block; }
    .work3 .cap { margin-top: clamp(14px, 1.6vw, 20px); font-weight: 600; letter-spacing: -0.015em;
                  font-size: clamp(15px, 1.25vw, 18px); line-height: 1.3; }
    .work3 .say { margin-top: clamp(4px, 0.5vw, 7px); opacity: 0.7; line-height: 1.45;
                  font-size: clamp(13px, 1.05vw, 15px); }
    .hero__body { display: flex; flex-direction: column; justify-content: center;
                  gap: clamp(14px, 2.4vw, 34px); min-width: 0; }

    /* the process: a 1 - 2 - 3 journey on one line ------------------------ */
    .rail { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
            --rail-gap: clamp(24px, 3.4vw, 56px); --disc: clamp(54px, 4.6vw, 70px);
            gap: var(--rail-gap); margin-top: clamp(8px, 1vw, 16px); }
    .stop { position: relative; z-index: 1; display: flex; flex-direction: column;
            gap: clamp(12px, 1.2vw, 18px); align-items: flex-start; }
    .stop__n { width: var(--disc); height: var(--disc); border-radius: 50%;
               background: var(--amber); color: var(--ink); flex: 0 0 auto;
               display: flex; align-items: center; justify-content: center;
               font-weight: 800; letter-spacing: -0.02em; font-size: clamp(24px, 2.2vw, 31px);
               margin-bottom: clamp(14px, 1.2vw, 18px); }
    .stop__k { font-weight: 600; letter-spacing: -0.025em; font-size: clamp(20px, 1.8vw, 26px);
               line-height: 1.25; }
    .stop__t { opacity: 0.8; max-width: 34ch; }

    /* what you get: six lines with a quiet icon each ---------------------- */
    .get { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
           gap: clamp(30px, 3.4vw, 56px) clamp(28px, 3.4vw, 60px); }
    .get__i { display: flex; flex-direction: column; gap: clamp(9px, 0.9vw, 13px);
              align-items: flex-start; max-width: 38ch; }
    .get__ic { width: clamp(24px, 2vw, 28px); height: clamp(24px, 2vw, 28px);
               fill: none; stroke: var(--amber); stroke-width: 1.7;
               stroke-linecap: round; stroke-linejoin: round; }
    .get__k { font-weight: 600; letter-spacing: -0.025em; line-height: 1.3;
              font-size: clamp(18px, 1.55vw, 23px); }
    .get__t { opacity: 0.74; }
    .sec--ink .get__t { opacity: 0.8; }

    /* is this for me ------------------------------------------------------ */
    .fit { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
           gap: clamp(22px, 3.2vw, 56px) clamp(26px, 4vw, 70px); align-items: start; }
    .fit__t { font-weight: 400; letter-spacing: -0.02em; line-height: 1.5; max-width: 40ch;
              font-size: clamp(17px, 1.85vw, 26px); }
    .fit__tr { font-weight: 700; }
    /* the card sits on a paper band, so it takes the tint to read as a card */
    .fit__not { background: var(--tint); border-radius: var(--r-lg);
                padding: clamp(22px, 2.4vw, 32px);
                display: flex; flex-direction: column; gap: clamp(10px, 1vw, 14px);
                align-self: start; margin-top: calc(clamp(22px, 2.4vw, 32px) * -0.8);
                box-shadow: var(--sh-1); }
    .fit__not .mono { color: var(--amber); }
    .fit__not p { opacity: 0.82; }

    /* Sam: an asymmetric composition, not a card ------------------------- */
    .me { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
          gap: clamp(30px, 5vw, 80px); align-items: center; }
    .me__fig { position: relative; margin: 0; }
    .me img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5;
              object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--sh-3); }
    .me__copy { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 24px); }
    .me__copy p { max-width: 46ch; }

    /* faq ----------------------------------------------------------------- */
    .faq { display: flex; flex-direction: column; }
    .faq__row { border-top: 1px solid var(--rule); }
    .faq__row:last-child { border-bottom: 1px solid var(--rule); }
    .faq__q { display: flex; align-items: center; justify-content: space-between; gap: 24px;
              cursor: pointer; list-style: none; font-weight: 600; letter-spacing: -0.025em;
              font-size: clamp(18px, 1.75vw, 25px); line-height: 1.3;
              padding-block: clamp(20px, 2.2vw, 30px); }
    .faq__q::-webkit-details-marker { display: none; }
    .faq__q:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
    .faq__row:hover .faq__q { color: var(--amber); }
    .faq__chev { flex: 0 0 auto; width: 22px; height: 22px; position: relative; opacity: 0.7;
                 transition: transform 0.24s var(--ease); }
    .faq__chev::before, .faq__chev::after { content: ""; position: absolute; inset: 50% 0 auto 0;
                 height: 2px; background: currentColor; border-radius: 2px; }
    .faq__chev::after { transition: transform 0.24s var(--ease); transform: rotate(90deg); }
    .faq__row[open] .faq__chev { transform: rotate(180deg); }
    .faq__row[open] .faq__chev::after { transform: rotate(0deg); }
    .faq__wrap { display: grid; grid-template-rows: 0fr;
                 transition: grid-template-rows 0.24s var(--ease); }
    .faq__row[open] .faq__wrap, .faq__row.is-open .faq__wrap { grid-template-rows: 1fr; }
    .faq__a { overflow: hidden; }
    .faq__a > div { max-width: 74ch; opacity: 0.82;
                    padding-bottom: clamp(20px, 2.2vw, 30px); }

    /* the close ----------------------------------------------------------- */
    .cta { display: flex; flex-direction: column; align-items: center; text-align: center;
           gap: clamp(18px, 2vw, 28px); }
    .cta h2 { max-width: 18ch; }
    .cta p { max-width: 52ch; opacity: 0.8; }
    .cta .btn { margin-top: clamp(6px, 0.8vw, 12px); min-height: 70px;
                padding: 0 clamp(28px, 3vw, 44px); }
    .cta__terms { opacity: 0.62; }

    /* footer -------------------------------------------------------------- */
    .foot { background: var(--ink); color: var(--off); padding-block: clamp(40px, 4vw, 56px);
            padding-inline: max(clamp(24px, 5vw, 72px), calc((100% - var(--maxw)) / 2));
            display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 32px); }
    .foot__top { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between;
                 gap: clamp(20px, 3vw, 40px); }
    .foot__mark { font-size: clamp(28px, 3.4vw, 48px); line-height: 1; }
    .foot__links { display: flex; flex-direction: row; flex-wrap: wrap; gap: clamp(14px, 2vw, 28px);
                   color: var(--linen); }
    .foot__links a { color: var(--linen); }
    .foot__links a:hover { color: var(--amber); }
    .foot__links a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

    /* theme toggle -------------------------------------------------------- */
    /* both icons always show; the lit one is the mode you are in */
    .theme { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 3px;
             border: 0; border-radius: 999px; background: var(--linen);
             cursor: pointer; line-height: 0; flex: 0 0 auto; color: var(--ink);
             transition: background 0.15s ease; }
    .theme:hover { background: var(--amber); }
    /* the pill stays 32px tall; the thumb gets the 44px it needs */
    .theme::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
                    height: 44px; transform: translateY(-50%); }
    .theme:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
    .theme svg { width: clamp(16px, 1.3vw, 18px); height: clamp(16px, 1.3vw, 18px);
                 padding: clamp(5px, 0.5vw, 6px); box-sizing: content-box; border-radius: 50%;
                 fill: none; stroke: currentColor; stroke-width: 1.9;
                 stroke-linecap: round; stroke-linejoin: round;
                 opacity: 0.34; background: transparent;
                 transition: opacity 0.15s ease, background 0.15s ease; }
    .theme .theme__sun { opacity: 1; background: var(--off); }

    /* entrance motion -----------------------------------------------------
       the hidden state is only ever applied by the script, so an artboard or
       a browser with no JavaScript shows the finished page */
    :root.js-motion .rv { opacity: 0; translate: 0 10px;
                          transition: opacity 0.3s var(--ease), translate 0.3s var(--ease);
                          transition-delay: var(--d, 0ms); }
    :root.js-motion .rv.is-in { opacity: 1; translate: 0 0; }
    @media (prefers-reduced-motion: reduce) {
      :root.js-motion .rv { opacity: 1; translate: none; transition: none; }
    }

    /* ---------------- 1199px and below --------------------------------- */
    @media (max-width: 1199px) {
      .hero__main { flex-direction: column; align-items: stretch; justify-content: center; }
      .hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
      .get { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 640px) and (max-width: 1199px) {
      .hero__main { justify-content: center; gap: clamp(34px, 4.6vw, 52px); }
      .hero h1 { font-size: clamp(40px, 6.4vw, 56px); }
      .hero__r { gap: clamp(18px, 2.4vw, 26px); }
      .hero__r p { font-size: clamp(17px, 2.1vw, 20px); }
      .hero .btn { font-size: clamp(16px, 1.9vw, 19px); min-height: 60px; }
    }
    /* ------- below 700 everything stacks; above it, side by side --------- */
    @media (max-width: 699px) {
      .fit { grid-template-columns: minmax(0, 1fr); gap: 28px; }
      .fit__not { margin-top: 0; }
      .fit__t { font-size: 19px; }
      .me { grid-template-columns: minmax(0, 1fr); gap: 34px; }
      .me img { aspect-ratio: 5 / 4; }
      .get { grid-template-columns: minmax(0, 1fr); gap: 26px; }
      .get__i { max-width: none; }
    }
    @media (min-width: 700px) and (max-width: 1199px) {
      .me { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(26px, 3.6vw, 44px); }
      .fit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
             gap: clamp(20px, 2.8vw, 36px); }
    }
    /* ---------------- 639px and below: the phone ------------------------ */
    @media (max-width: 639px) {
      .hero { padding-block: 22px 30px; padding-inline: 24px; }
      .hero__bar { padding-bottom: 16px; }
      .hero__main { gap: 26px; justify-content: center; padding-top: clamp(34px, 6vh, 62px); }
      .hero__body { gap: 20px; }
      .hero h1 { line-height: 1.02; }
      .hero__body p { line-height: 1.55; }
      /* the label never drops below the body text; on the narrowest phones it
         takes a second line rather than shrinking */
      .btn { width: 100%; min-height: 58px; padding: 0 12px; gap: 8px;
             font-size: clamp(14px, 3.5vw, 17px); }
      .btn__t { white-space: normal; text-align: center; }
      .btn__a { width: 16px; height: 16px; }
      .cta .btn { min-height: 62px; }
      .foot__top { flex-direction: column; align-items: flex-start; gap: 18px; }
      /* the journey turns on its side: one line down the left of the steps */
      .rail { grid-template-columns: minmax(0, 1fr); gap: 30px; }
      .stop { display: grid; grid-template-columns: var(--disc) minmax(0, 1fr);
              column-gap: 18px; row-gap: 8px; align-items: center; }
      .stop__n { grid-row: 1; grid-column: 1; margin-bottom: 0; font-size: 18px; }
      .stop__k { grid-row: 1; grid-column: 2; }
      .stop__t { grid-row: 2; grid-column: 2; max-width: none; }
      .rail { --disc: 38px; --rail-gap: 30px; }
    }
    /* ------- 1199 and below: swipe the mock-ups, one at a time ---------- */
    @media (max-width: 1199px) {
      .work3 { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity;
               overscroll-behavior-x: contain; overscroll-behavior-y: auto;
               touch-action: pan-x pan-y pinch-zoom; -webkit-overflow-scrolling: touch;
               scrollbar-width: none; padding-bottom: 4px; margin-top: 20px; }
      .work3::-webkit-scrollbar { display: none; }
      .work3 { padding-bottom: 4px; }
      .work3 > div:nth-child(1),
      .work3 > div:nth-child(2),
      .work3 > div:nth-child(3),
      .work3 > div:nth-child(4),
      .work3 > div:nth-child(5) { flex: 0 0 84%; scroll-snap-align: start;
                     --ty: 0px; --rot: 0deg; --sc: 1; --lift: 0px; }
      .work3 > div:nth-child(2) .shot { box-shadow: var(--sh-3); }
      .work3__more { display: block; }
    }

    /* ---------------- 1800px and up: widen the measure, scale the type ---- */
    @media (min-width: 1800px) {
      :root { --maxw: 1520px; }
      h1 { font-size: clamp(34px, 4.6vw, 78px); }
      h2 { font-size: clamp(28px, 3.8vw, 59px); }
      p  { font-size: clamp(16px, 1.5vw, 24px); }
      .foot__mark { font-size: clamp(28px, 3.4vw, 53px); }
    }
    @media (min-width: 2400px) {
      :root { --maxw: 1900px; }
      h1 { font-size: clamp(34px, 4.6vw, 92px); }
      h2 { font-size: clamp(28px, 3.8vw, 67px); }
      p  { font-size: clamp(16px, 1.5vw, 27px); }
      .foot__mark { font-size: clamp(28px, 3.4vw, 60px); }
    }
    @media (min-width: 3200px) {
      :root { --maxw: 2400px; }
      h1 { font-size: clamp(34px, 4.6vw, 108px); }
      h2 { font-size: clamp(28px, 3.8vw, 78px); }
      p  { font-size: clamp(16px, 1.5vw, 30px); }
      .foot__mark { font-size: clamp(28px, 3.4vw, 69px); }
    }
    @media (min-width: 4600px) {
      :root { --maxw: 3200px; }
      h1 { font-size: clamp(34px, 4.6vw, 128px); }
      h2 { font-size: clamp(28px, 3.8vw, 92px); }
      p  { font-size: clamp(16px, 1.5vw, 34px); }
      .foot__mark { font-size: clamp(28px, 3.4vw, 82px); }
    }

    /* ---------------- dark ------------------------------------------------
       shades of grey, nothing warm: the amber belongs to the buttons, the
       swoop, the discs and the icons, never to a section background */
    [data-theme="dark"] { --linen: #272727; --rule: var(--rule-light); }
    [data-theme="dark"] body, [data-theme="dark"] .sec--off, [data-theme="dark"] .hero {
      background: #1A1A1A; color: #E9E9E9; }
    [data-theme="dark"] .sec--linen { background: #272727; color: #E9E9E9; }
    [data-theme="dark"] .sec--tint { background: #212121; color: #E9E9E9; }
    [data-theme="dark"] .sec--ink, [data-theme="dark"] .foot { background: #101010; }
    [data-theme="dark"] .sec--ink, [data-theme="dark"] .sec--ink p,
    [data-theme="dark"] .foot, [data-theme="dark"] .foot__links a {
      color: #E9E9E9 !important; }
    [data-theme="dark"] .foot__links a:hover { color: var(--amber) !important; }
    /* the card has to read off its band, and in the dark the shadow cannot */
    [data-theme="dark"] .fit__not { background: #2B2B2B; color: #E9E9E9; }
    [data-theme="dark"] .shot { background: #272727; }
    [data-theme="dark"] .mark, [data-theme="dark"] .foot__mark { color: #FFFFFF !important; }
    [data-theme="dark"] .theme { color: #FBF8F3; }
    [data-theme="dark"] .theme .theme__sun { opacity: 0.34; background: transparent; }
    [data-theme="dark"] .theme .theme__moon { opacity: 1; background: #1A1A1A; }
    [data-theme="dark"] .btn:focus-visible { outline-color: var(--amber); }
    /* --ink is never redefined for dark, so the link hover has to be */
    [data-theme="dark"] a:not(.btn):hover { color: #E9E9E9; }
  
    /* pages either side of the homepage ---------------------------------- */
    .subbar { padding-block: clamp(18px, 2.4vw, 30px);
              padding-inline: max(clamp(24px, 5vw, 72px), calc((100% - var(--maxw)) / 2)); }
    .subbar .hero__bar { padding-bottom: 0; }
    .page { min-height: 62vh; }
    .page h1 { max-width: 20ch; }
    .prose { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px);
             max-width: 68ch; }
    .prose h2 { font-size: clamp(21px, 1.9vw, 28px); margin-top: clamp(14px, 1.6vw, 22px); }
    .soon { opacity: 0.7; }

    /* the enquiry form ---------------------------------------------------- */
    .form { display: flex; flex-direction: column; gap: clamp(16px, 1.8vw, 24px);
            max-width: 560px; width: 100%; }
    .field { display: flex; flex-direction: column; gap: 8px; }
    .field label { font-weight: 600; letter-spacing: -0.02em;
                   font-size: clamp(15px, 1.3vw, 18px); }
    .field input, .field textarea, .field select {
            font: inherit; font-size: clamp(16px, 1.4vw, 18px); color: var(--ink);
            background: var(--off); border: 0; border-radius: var(--r);
            padding: 14px 16px; min-height: 54px; width: 100%;
            box-shadow: var(--sh-1); }
    .field textarea { min-height: 130px; resize: vertical; }
    .field input:focus-visible, .field textarea:focus-visible,
    .field select:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
    .field select { appearance: none; -webkit-appearance: none; cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A2724' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 16px center;
            background-size: 18px; padding-right: 46px; }
    .field__note { opacity: 0.7; }
    .form button.btn { border: 0; cursor: pointer; font-family: inherit; align-self: flex-start; }
    .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
    .form__err { display: none; background: var(--tint); border-radius: var(--r);
                 padding: 16px 18px; }
    .form__err.is-on { display: block; }
    @media (max-width: 639px) {
      .form button.btn { align-self: stretch; }
    }
    [data-theme="dark"] .field input, [data-theme="dark"] .field textarea,
    [data-theme="dark"] .field select { background: #2B2B2B; color: #E9E9E9; }
    [data-theme="dark"] .field select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E9E9E9' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 16px center;
            background-size: 18px; }
    [data-theme="dark"] .form__err { background: #2B2B2B; color: #E9E9E9; }

    /* the onboarding form -------------------------------------------------
       longer than the enquiry form, so it is grouped and the groups are
       numbered: this is a sequence a client works down, not a set of cards */
    .steps { display: flex; flex-direction: column; gap: clamp(34px, 4vw, 54px);
             max-width: 640px; width: 100%; }
    .step2 { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 20px);
             border: 0; margin: 0; padding: 0; min-width: 0; }
    .step2 > legend { padding: 0; display: flex; align-items: baseline; gap: 10px; }
    .step2__n { font-family: inherit; font-weight: 800; color: var(--amber);
                font-size: clamp(15px, 1.3vw, 18px); }
    .step2__h { font-weight: 800; letter-spacing: -0.03em; line-height: 1.15;
                font-size: clamp(21px, 2vw, 28px); }
    .step2__i { opacity: 0.72; }

    /* pick a template: the interaction is real, only the artwork is pending */
    .picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .pick { position: relative; }
    .pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
    .pick > span { display: block; border-radius: var(--r); overflow: hidden;
                 background: var(--off); box-shadow: var(--sh-1); cursor: pointer;
                 outline: 2px solid transparent; outline-offset: 2px;
                 transition: outline-color 0.15s ease, transform 0.15s var(--ease); }
    .pick > span:hover { transform: translateY(-2px); }
    .pick input:checked + span { outline-color: var(--amber); }
    .pick input:focus-visible + span { outline-color: var(--ink); }
    .pick__t { aspect-ratio: 3 / 4; display: flex; flex-direction: column; gap: 5px;
               padding: 10px; background: var(--tint); }
    .pick__t i { display: block; background: rgba(42, 39, 36, 0.16); border-radius: 2px; }
    .pick__t i:nth-child(1) { height: 26%; }
    .pick__t i:nth-child(2) { height: 7%; width: 70%; }
    .pick__t i:nth-child(3) { height: 7%; width: 45%; }
    .pick__t i:nth-child(4) { height: 22%; margin-top: auto; }
    .pick__l { display: block; padding: 8px 10px 10px; font-weight: 600;
               font-size: clamp(12px, 1.05vw, 14px); letter-spacing: -0.015em; }
    .pick__l em { display: block; font-style: normal; font-weight: 400;
                  opacity: 0.6; font-size: 0.9em; }

    .note { background: var(--tint); border-radius: var(--r); padding: 16px 18px; }
    .note strong { font-weight: 600; }

    .pay { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
    .pay .btn { border: 0; cursor: pointer; font-family: inherit; }
    .pay .btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
    .pay .btn[disabled]:hover { transform: none; box-shadow: none; }

    @media (max-width: 639px) {
      .picks { grid-template-columns: 1fr; gap: 10px; }
      .pick > span { display: grid; grid-template-columns: 88px 1fr; align-items: center; }
      .pick__t { aspect-ratio: auto; height: 100%; min-height: 88px; }
      .pay .btn { align-self: stretch; }
    }
    [data-theme="dark"] .pick > span { background: #2B2B2B; }
    [data-theme="dark"] .pick__t { background: #212121; }
    [data-theme="dark"] .pick__t i { background: rgba(233, 233, 233, 0.18); }
    [data-theme="dark"] .note { background: #2B2B2B; color: #E9E9E9; }