/* ==========================================================================
   Dactyl Websites — the home page's own sections (October 2026 rebuild)

   The page is now one idea: six questions to ask any web designer, with our
   answers under them. Everything here is made of the site's existing
   materials (linen and sand, Gambetta and Switzer, the one terracotta, the
   umber price screen) so it reads as the same site as every other page.

     The headline    the question large, the six-questions line under it.
     Grab a pen      the intro and the copy button.
     The questions   each question set large on the page, our answer on a
                     sand card under it, the package tag at the foot with a
                     pen tick drawn as it comes up (home.js).
     John            who you'll be talking to, and the no lock-in note.
     The price       the umber stage as before, with what websites usually
                     cost over the panel.
     The packages    Pro and Essential side by side.

   Written for phones first; wide screens are at the foot.
   ========================================================================== */

/* --------------------------------------------------------- Scroll measure
   With scripts running, the page's own scroll-behavior is auto (Lenis does
   the smoothing). site.css sets smooth for the no-script page, and GSAP's
   ScrollTrigger notes that value when it loads and puts it back on <html>
   after every refresh; with it smooth, the jump to the top that a refresh
   measures from became an animation, so any refresh made part-way down the
   page measured everything below from the wrong place (the John photo
   played while the questions were still being read). */
html.js { scroll-behavior: auto; }

/* -------------------------------------------------------------- Headline
   One <h1> in two voices. The question at display size, then the promise
   at a reading size, still in the serif so it belongs to the heading. */
.hero__h1-s {
  display: block;
  margin-top: .5em;
  max-width: 21em;
  font-size: .44em;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.01em;
  text-wrap: balance;
}

@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  /* "Thinking about" is the longest line and has to sit on one line at
     375px, so the display size comes down a step from the old three-word
     headline. */
  .hero .hero__h1,
  [data-hero-frames="on"] .hero__h1 { font-size: clamp(2.6rem, 12vw, 3.5rem); }
  /* The titles are set right on the film; the small line keeps to that. */
  [data-hero-frames="on"] .hero__h1-s { margin-left: auto; color: rgba(255, 255, 255, .92); }
  [data-hero-frames="on"] .hero__cta { row-gap: .55rem; }

  /* The linen that rises over the film starts at the top of the stack
     here (the old studio card bridged the edge; "Grab a pen" sits wholly
     on the linen), with the panel radius on its leading corners so it
     arrives as the next sheet of the page. */
  [data-hero-frames="on"] .stack--asks { --sheet-top: 0px; }
  [data-hero-frames="on"] .stack--asks::before { border-radius: var(--r-xl) var(--r-xl) 0 0; }
}

/* ------------------------------------------------------------ Grab a pen */
.asks { padding: 5.5rem 0 3.5rem; }
.asks__pin, .asks__lede, .asks__copy { max-width: 40rem; }
.asks__h { margin-bottom: 1.6rem; }
.asks__lede { display: grid; gap: 1.5rem; }
.asks__lede p { margin: 0; }
.asks__lede p:not(.lead) { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

.asks__copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.1rem;
  margin-top: 2.1rem;
}
/* The button's icon is two drawings in one place: the two sheets, and a
   tick that is drawn in once the questions are on the clipboard. */
.copyq__ico { display: grid; }
.copyq__ico svg { grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .45s var(--glide); }
.copyq__done { opacity: 0; }
.copyq__done path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s var(--glide) .08s; }
.copyq.is-done .copyq__sheet { opacity: 0; transform: scale(.6); }
.copyq.is-done .copyq__done { opacity: 1; }
.copyq.is-done .copyq__done path { stroke-dashoffset: 0; }
.copyq.is-done .btn__ico { transform: none; }

/* The line under the button. Empty (and taking no room) until the button
   is pressed; then it comes up beside or under it. */
.copyq__said {
  flex-basis: 100%;
  margin: 0;
  max-width: 26rem;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s var(--ease), transform .6s var(--glide);
}
.copyq__said:empty { display: none; }
.copyq__said.is-on { opacity: 1; transform: none; }

/* --------------------------------------------------------- The questions */
/* The phone layout's own parts: the index, each question's picture, Read
   more and the locals photograph. asks.css (phones) and desk.css (wide
   screens, October 2026) each show the ones they use. */
.qindex, .ask__vis, .locals, .ask__toggle, .deed, .ask__n-big, .ask__n-of { display: none; }
.asks__list {
  display: grid;
  gap: 4.75rem;
  margin: 4.5rem 0 0;
  padding: 0;
  list-style: none;
}
.ask { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.ask__n { margin-bottom: .9rem; }
.ask__q {
  font-size: clamp(1.8rem, 8vw, 2.5rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.022em;
  text-wrap: balance;
}

/* Our answer: a sand card under the question. */
.ask__a.panel { margin-top: 1.6rem; padding: 1.7rem 1.35rem 1.5rem; }
.ask__ans {
  margin: 0 0 1.3rem;
  padding-bottom: 1.3rem;
  border-bottom: 1px solid var(--hair-2);
  font-family: var(--display);
  font-size: clamp(1.35rem, 5.8vw, 1.6rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.ask__ans em { font-style: italic; color: var(--accent-ink); }   /* 4.62 on sand */
.ask__body { display: grid; gap: 1.5rem; }
.ask__body p { margin: 0; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.ask__body .ticks { margin: .1rem 0; gap: 1.05rem; }
.ask__body .ticks li { font-size: 1rem; line-height: 1.5; }
.ticks--lead b { font-weight: 600; color: var(--ink); }
.ask__pro { font-style: italic; color: var(--ink-3); white-space: nowrap; }

/* The package tag: a small italic line at the foot of the card, with a
   tick drawn in as it comes up the screen (home.js), the way you would
   tick it off on paper. No script: the tick is simply there. */
.ask__tag {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin: 1.5rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hair-2);
  font-family: var(--display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink-2);
}
/* Two tags under one answer, wide screens: stacked, sharing the first
   one's rule. (Phones show them as two pills of the same size, asks.css.) */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .ask__tags .ask__tag + .ask__tag { margin-top: .5rem; padding-top: 0; border-top: 0; }
}
.ask__tick {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: -.05rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ask__tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .ask__tag[data-tick] .ask__tick path { stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.65, 0, .35, 1); }
.js .ask__tag[data-tick].is-ticked .ask__tick path { stroke-dashoffset: 0; }

/* ------------------------------------------------------------------ John */
.john { padding: 4.5rem 0 6rem; }
.john__in { display: grid; gap: 2.4rem; }
.john__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-width: 26rem;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--sand);
}
.john__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Shown only while the photograph is missing (the <img> removes itself if
   it cannot load). */
.john__mono {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(8rem, 40vw, 12rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--sand-3);
}
.john__h { margin-bottom: 1.5rem; }
.john__body { display: grid; gap: 1.5rem; max-width: 36rem; }
.john__body p { margin: 0; }
.john__body p:not(.lead) { font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.john__own {
  max-width: 36rem;
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink);
}
.john__own-h { margin: 0 0 .8rem; font-size: clamp(1.45rem, 6vw, 1.75rem); font-weight: 400; line-height: 1.18; letter-spacing: -.015em; }
.john__own p + p { margin-top: 1.4rem !important; }
.john__own p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }

/* ------------------------------------------------------------- The price
   What websites usually cost, over the panel where its label used to be.
   On the umber it is the dark screen's text colour; anywhere the price is
   on linen (a phone with reduced motion) it is ordinary body copy. */
.price-stage__eyebrow.price__ctx {
  display: block;
  max-width: 30rem;
  margin: 0 auto 1.5rem;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  text-wrap: pretty;
  color: var(--ink-2);
}
.price-stage__eyebrow.price__ctx::before,
.price-stage__eyebrow.price__ctx::after { content: none; }
/* Room under it for the price drifting up 22px while it is read (ui.js,
   priceStage), so a generous gap is still there at the end of the drift. */
.pricing--stage .price-stage__eyebrow.price__ctx { display: block; margin-bottom: 3.5rem; color: var(--on-navy); }
.pricing--stage .price__ctx a { color: var(--accent-lit-ink); }

.price__head { margin: 0; font-weight: inherit; letter-spacing: inherit; }
.price__for {
  display: block;
  margin-top: 1rem;
  max-width: 17em;
  font-family: var(--display);
  font-size: clamp(1.35rem, 5.8vw, 1.65rem);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -.012em;
  color: var(--paper);
  text-wrap: balance;
}
.pricing--stage .price__for { color: var(--ivory); }
.price__note { color: var(--on-navy); }

/* ----------------------------------------------------------- The packages
   Phones: each row is its name across the top (in the section-label mono)
   and the two answers side by side under it, Pro on the left. The heads
   carry the packages' colours from the pricing page: Pro's gold, and the
   deeper sand Essential has there. */
.plans { padding-bottom: 1rem; }
.duo {
  padding: 1rem 1rem 1.2rem;
  border-radius: var(--r-xl);
  background: var(--sand);
}
.duo__table { width: 100%; border-collapse: separate; border-spacing: 0; }
.duo__table th, .duo__table td { text-align: left; font-weight: 400; vertical-align: top; }
.duo__table thead th { padding: .95rem .9rem .9rem; border-radius: 1.1rem; }
.duo__table thead i {
  display: block;
  font-family: var(--mono);
  font-size: max(12px, .72rem);
  font-style: normal;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.duo__table thead b {
  display: block;
  margin-top: .2rem;
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--ink);
}
.duo__pro {
  background:
    linear-gradient(115deg, rgba(255, 244, 205, 0) 30%, rgba(255, 250, 232, .5) 50%, rgba(255, 244, 205, 0) 70%),
    linear-gradient(160deg, #f6da8c 0%, #ebc166 40%, #dcab4f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .9);
}
.duo__table thead .duo__pro i { color: #3a2808; }
.duo__table thead .duo__pro b { color: #1a1103; }
.duo__ess { background: #ddd5c6; }

.duo__table tbody td { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.duo__table tbody td:nth-child(3) { color: var(--ink); }   /* Pro, the right-hand column */
.duo__price td { font-size: .95rem; }
.duo__price b {
  font-family: var(--display);
  font-size: 1.85rem;
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
/* "Included", with the site's tick in front of it. */
.duo__yes::before {
  content: "";
  display: inline-block;
  width: .58rem;
  height: .32rem;
  margin: 0 .6rem .22rem .1rem;
  border-left: 1.75px solid var(--accent);
  border-bottom: 1.75px solid var(--accent);
  transform: rotate(-45deg);
}
.duo__no { display: block; width: .9rem; height: 1.5px; margin-top: .7rem; background: var(--ink-3); opacity: .7; }

@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .duo__table, .duo__table thead, .duo__table tbody { display: block; }
  .duo__table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: .6rem; }
  .duo__corner { display: none; }
  .duo__table thead tr { margin-bottom: .4rem; }
  .duo__table tbody th {
    grid-column: 1 / -1;
    padding: 1.1rem .9rem .5rem;
    border-top: 1px solid var(--hair-2);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .14em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--accent-ink);
  }
  .duo__table tbody tr:first-child th { border-top: 0; }
  .duo__table tbody td { padding: 0 .9rem 1rem; }
  /* A hairline down between the two answers keeps the columns apart once
     the heads have scrolled away. */
  .duo__table tbody td:nth-child(3) { box-shadow: inset 1px 0 0 var(--hair-2); }
}

.duo__foot { display: grid; justify-items: start; gap: 1.3rem; margin-top: 2rem; max-width: 36rem; }
.duo__foot p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.duo__foot .duo__fine { font-size: .95rem; color: var(--ink-3); }
.duo__foot .btn { margin-top: .6rem; }

/* ---------------------------------------------------------------- Contact */
.contact__head .contact__direct { max-width: 31rem; margin: 1.2rem auto 0; font-size: 1rem; line-height: 1.6; text-wrap: pretty; }

/* ========================================================== Wide screens */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  /* The headline runs nowrap over the print (desktop.css); the small line
     is a paragraph-width block under it. */
  .hero .hero__h1 .hero__h1-s { max-width: 19em; font-size: .3em; white-space: normal; }

  .asks { padding: 9rem 0 8rem; }
  .asks__pin, .asks__lede, .asks__copy { max-width: 46rem; }
  .asks__list { gap: 7rem; margin-top: 7rem; }

  /* The question holds its place beside the answer while the answer is
     read, then goes with it. */
  .ask {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2.5rem, 5vw, 5.5rem);
    align-items: start;
  }
  .ask__head { position: sticky; top: calc(var(--nav-h) + 2.5rem); }
  .ask__q { font-size: clamp(2rem, 3vw, 2.9rem); }
  .ask__a.panel { margin-top: 0; padding: 2.4rem 2.4rem 2rem; }

  .john { padding: 6rem 0 9rem; }
  .john__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }

  .price-stage .price.panel--dark { grid-template-columns: minmax(0, 1fr); max-width: 44rem; margin-inline: auto; }
  .price-stage__eyebrow.price__ctx { color: var(--on-navy); margin-bottom: 1.8rem; font-size: 1.0625rem; }
  .price-stage__eyebrow.price__ctx a { color: var(--accent-lit-ink); }
  .price-stage .price__for { font-size: clamp(1.6rem, 2.2vw, 2.1rem); color: var(--ivory); }

  .duo { padding: clamp(1rem, 2vw, 1.4rem) clamp(1.2rem, 2.4vw, 2rem); }
  .duo__table { table-layout: fixed; }
  .duo__corner { width: 32%; }
  .duo__table thead th { padding: 1.3rem 1.2rem 1.1rem; border-radius: 1.1rem 1.1rem 0 0; }
  .duo__table thead b { font-size: clamp(1.8rem, 2.4vw, 2.3rem); }
  .duo__table tbody th { padding: 1rem 1.2rem 1rem 0; border-bottom: 1px solid var(--hair-2); font-weight: 500; color: var(--ink); }
  .duo__table tbody td { padding: 1rem 1.2rem; border-bottom: 1px solid var(--hair-2); }
  .duo__table tbody td:nth-child(2) { background: #ddd5c6; }
  .duo__table tbody td:nth-child(3) { background: #eddcb8; border-bottom-color: rgba(138, 101, 34, .22); }
  .duo__table tbody tr:last-child th,
  .duo__table tbody tr:last-child td { border-bottom: 0; }
  .duo__table tbody tr:last-child td { border-radius: 0 0 1.1rem 1.1rem; }
  .duo__foot { margin-top: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .copyq__ico svg, .copyq__done path, .copyq__said,
  .js .ask__tag[data-tick] .ask__tick path { transition: none; }
}

/* ================================================ The five questions, phones
   The old Features strip (wheel.js, fit mode; site.css, "The strip" and
   ".features ... wheel" for the icons, the swipe and the card under it),
   with the five questions in it: an icon per question, the question under
   the icons, and a sand box holding our answer (terracotta), the detail and
   the package tag. The cards in .asks__list are its source and the wide
   layout; on a phone they step aside once the strip has taken over.

   Each box is as tall as its answer, up to the screen: a longer one keeps
   to the screen and its text scrolls up inside it, and at the end the
   swipe carries on down the page. Its foot fades out under the last line,
   so a box with more to read shows it. */
.features--asks { display: none; }
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .features.features--asks {
    display: block;
    margin-top: 1.6rem;
    padding: 0 0 2.5rem;
    background: none;
  }
  .asks:has(.features--wheel) .asks__list { display: none; }
  .asks { padding-bottom: 9rem; }
  .asks__copy { margin-top: 1.3rem; }

  .features--asks .wheel { margin-top: 0; }
  .features--asks .wheel__page.wheel__page--html {
    bottom: auto;
    padding: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
  }
  /* The number is in the title ("1. Do you design..."), so the counter goes. */
  .wheel__page--html .wheel__n { display: none; }
  /* The card is a column (so a card held at the height of the one before,
     wheel.js holdThenFit, is exactly its size): the question in a band
     across the top, then the answer, which scrolls inside the card when it
     is longer than the screen allows. The band stays put while it does. */
  .features--asks .wheel__page.wheel__page--html { display: flex; flex-direction: column; }
  .wheel__box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* 23% under the screen's free height: a long answer scrolls inside. */
    max-height: calc((100svh - var(--nav-h, 56px) - 5.5rem) * .77);
    overflow: hidden;
    border-radius: var(--r-xl);
    background: var(--sand);
    box-shadow:
      0 2px 6px rgba(40, 24, 8, .08),
      0 34px 60px -34px rgba(40, 24, 8, .42);
  }

  /* The question. What sets it apart from the answer is a change of
     surface: a band a step deeper than the card, edge to edge, with the
     number in its own column (the design sheet's 7) and the question in
     ink. The answer under it is on the card itself, in the accent. */
  .features--asks .wheel__box .wheel__qh {
    flex: none;
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr);
    align-items: start;
    margin: 0;
    padding: 1.3rem 1.4rem 1.25rem .9rem;
    background: var(--sand-2);
    font-family: var(--display);
    font-size: inherit;
    font-weight: 500;
    color: var(--ink);
  }
  .wheel__qh-n {
    padding-right: .7rem;
    font-size: 2.75rem;
    font-weight: 300;
    line-height: .9;
    letter-spacing: -.03em;
    text-align: center;
    color: var(--accent);                /* a large mark: 3.4:1 on the band */
  }
  /* The hairline is the question's own left edge, so it is always exactly
     as tall as the question. */
  .wheel__qh-t {
    padding-left: .9rem;
    border-left: 1px solid var(--accent);
    font-size: clamp(1.3rem, 5.6vw, 1.45rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
  }

  /* Not a scroll box of its own: a finger on the card always moves the
     page. While the strip is held on the screen (sticky, below) the page's
     own scroll moves the answer up inside the card (home.js, RUN), so
     nothing ever catches a swipe. */
  .wheel__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding: 1.4rem 1.4rem 1.8rem;
    scrollbar-width: none;
  }
  .wheel__scroll::-webkit-scrollbar { display: none; }
  /* The foot fades only while there is more text below it (wheel.js sets
     is-more), as the sign to keep reading; an answer that shows everything
     has a clean edge. */
  /* More to read: the last 15% of the answer fades out, with a small arrow
     bouncing at the card's foot. Only while there is text below (wheel.js
     sets is-more on the answer); at the end of the answer both go. */
  .wheel__box { position: relative; }
  .wheel__scroll.is-more {
    -webkit-mask-image: linear-gradient(#000 85%, transparent);
    mask-image: linear-gradient(#000 85%, transparent);
  }
  .wheel__box::before {
    content: "";
    position: absolute;
    left: 50%; bottom: .7rem;
    z-index: 1;
    width: 1.5rem; height: 1.5rem;
    margin-left: -.75rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    color: var(--accent);
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s var(--ease);
  }
  .wheel__box:has(.wheel__scroll.is-more)::before { opacity: 1; animation: more-bob 1.4s var(--ease) infinite; }
  .wheel__page--umber .wheel__box::before { color: var(--accent-lit); }

  /* Our answer: the card's headline, in terracotta (4.62 on sand). */
  .wheel__box .ask__ans {
    margin: 0 0 1.2rem;
    padding: 0;
    border-bottom: 0;
    font-family: var(--display);
    font-size: clamp(1.5rem, 6.6vw, 1.75rem);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.022em;
    color: var(--accent-ink);
  }
  .wheel__box .ask__body { display: grid; gap: 1.5rem; }
  .wheel__box .ask__body p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
  .wheel__box .ask__body a { color: var(--accent-ink); }
  .wheel__box .ticks { gap: 1.05rem; }
  .wheel__box .ticks li { font-size: 1rem; line-height: 1.5; }
  .wheel__box .ask__tag { margin-top: 1.5rem; }
  .wheel__box .ask__tick path { stroke-dashoffset: 0 !important; }

  /* Two colours, in turn: sand, umber (wheel.js, tone). Umber: the Pro
     features' material, measured at its lightest point (#1d1d1d):
     white 75% 9.20:1, --accent-lit-ink 6.31:1. */
    background: linear-gradient(150deg, #c2521f 0%, #b84b1c 50%, #a8441a 100%);
    color: #fff;
  }

  .wheel__page--umber .wheel__box {
    background: radial-gradient(118% 88% at 50% 26%, #1d1d1d 0%, #121212 50%, #090909 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 2px 6px rgba(40, 24, 8, .12),
      0 34px 60px -34px rgba(40, 24, 8, .55);
  }
  .wheel__page--umber .wheel__box .ask__ans { color: var(--accent-lit-ink); }
  .features--asks .wheel__page--umber .wheel__box .wheel__qh { background: rgba(255, 255, 255, .06); color: var(--ivory); }
  .wheel__page--umber .wheel__qh-n { color: var(--accent-lit); }
  .wheel__page--umber .wheel__qh-t { border-left-color: var(--accent-lit); }
  .wheel__page--umber .wheel__box :is(.ask__body p, .ticks li, .ask__pro, .ask__tag) { color: var(--on-navy); }
  .wheel__page--umber .wheel__box .ticks--lead b { color: var(--ivory); }
  .wheel__page--umber .wheel__box .ask__body a { color: var(--accent-lit-ink); }
  .wheel__page--umber .wheel__box .ticks li::before { border-color: var(--accent-lit); }
  .wheel__page--umber .wheel__box .ask__tag { border-top-color: rgba(255, 255, 255, .16); }
  .wheel__page--umber .wheel__box .ask__tick { stroke: var(--accent-lit); }

  /* No labels under the icons: the question over them says it. Kept for
     screen readers, as the buttons' names. */
  .features--asks .wheel__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  /* The icons first, with room over them; then the question; then the
     card. */
  .features--asks .wheel__ring { order: 0; padding-top: 3.9rem; }
  .features.features--asks { margin-top: 1rem; }

  /* The number on the icon being read (home.js, BADGE): an orange disc on
     the icon's top edge, hopping from icon to icon. Placed and moved by a
     transform only, from the wheel's top-left corner. White on #c2521f
     measures 4.65:1. */
  /* The strip and the card hold on the screen while a long answer is
     read through (home.js, RUN, adds the scroll it needs after the strip
     as .asks__run); a short answer adds none, and the page just carries
     on. */
  .features--asks .wheel {
    position: sticky;
    top: calc(var(--nav-h, 56px) - 3rem);
  }
  .asks__run { display: block; }
  .qbadge {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2.5px var(--linen), 0 8px 16px -8px rgba(120, 40, 10, .55);
    color: #fff;
    pointer-events: none;
    transform-origin: 50% 100%;
    will-change: transform;
  }
  .qbadge b { font-family: var(--display); font-size: 1.15rem; font-weight: 500; line-height: 1; }
  .wheel[hidden] .qbadge, .wheel--bare .qbadge { opacity: 0; }

  /* Copy: just the symbol, after the paragraph's full stop. The big button
     is for wide screens. */
  .asks__copy { display: none; }
  .copyq--icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: -.3rem 0 -.3rem .35rem;
    padding: 0;
    vertical-align: middle;
    border: 0;
    border-radius: 50%;
    background: var(--sand);
    color: var(--ink);
    cursor: pointer;
    transition: transform .16s var(--ease), background-color .25s var(--ease);
  }
  /* A full 44px to tap, without opening up the paragraph's leading. */
  .copyq--icon::after { content: ""; position: absolute; inset: -.375rem; }
  .copyq--icon:active { transform: scale(.92); background: var(--sand-2); }
  .copyq--icon .copyq__ico { width: 16px; height: 16px; }
  .copyq--icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .copyq--icon.is-done { background: var(--ink); color: var(--linen); }
  .copyq__said--m { margin-top: .75rem; }
}
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .copyq--icon, .copyq__said--m { display: none !important; }
}

/* ============================================================ John, phones
   An editorial spread. The photograph runs edge to edge, and the label and
   "Say hi to John." are set over its foot in ivory, on a shade that rises
   from the bottom of the picture. Then the lead, large in the serif, which
   reads itself in word by word as it is scrolled (home.js, JOHN); then the
   rest; then the no lock-in note on the site's umber, as a card of its own.
   The markup is the wide layout's: this is grid placement only (.john__copy
   lets its children into the grid), so the heading can sit on the picture.

   Motion (home.js, JOHN; GSAP ScrollTrigger on the page's Lenis ticker):
   the picture opens from an inset frame to the full width as it arrives,
   and settles from a slight zoom across the whole time it is on screen;
   the card rises and its rule draws. All of it scrubbed by the scroll or
   played once on arrival, and none of it with reduced motion. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .john { padding: 3.5rem 0 11rem; overflow-x: clip; }
  .john__in { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto; gap: 0; }
  .john__copy { display: contents; }
  .john__photo {
    grid-row: 1 / 4;
    grid-column: 1;
    max-width: none;
    margin-inline: calc(var(--gutter) * -1);
    border-radius: 0;
  }
  /* The shade the words stand on: clear over the face, deepening under
     the arms and the table. */
  .john__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
      rgba(12, 9, 6, 0) 42%,
      rgba(12, 9, 6, .38) 64%,
      rgba(12, 9, 6, .86) 100%);
    pointer-events: none;
  }
  .john__photo img { transform-origin: 50% 30%; }
  .john__copy > .eyebrow {
    position: relative;
    z-index: 2;
    grid-row: 2;
    grid-column: 1;
    margin: 0 0 .8rem;
    color: rgba(255, 246, 236, .86);
    letter-spacing: .16em;
  }
  .john__copy > .john__h {
    position: relative;
    z-index: 2;
    grid-row: 3;
    grid-column: 1;
    margin: 0 0 1.7rem;
    font-size: clamp(3rem, 14.5vw, 3.9rem);
    font-weight: 400;
    line-height: .96;
    letter-spacing: -.03em;
    color: var(--ivory);
    text-shadow: 0 2px 24px rgba(12, 9, 6, .35);
  }
  .john__copy > .john__h em:not(.dot) { color: var(--accent-lit); }

  .john__body { grid-row: 4; max-width: none; margin-top: 2.4rem; gap: 1.4rem; }
  /* The lead: a statement in the serif, read in word by word. */
  .john__body .lead {
    font-family: var(--display);
    font-size: clamp(1.6rem, 7vw, 1.95rem);
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: -.016em;
    color: var(--ink);
  }
  .john__body .lead .w { display: inline; }

  /* No lock-in, on sand: the site's card material, lighter than the umber
     price screen it comes before. Ink 15:1, ink-2 8.4:1, the terracotta
     rule a mark at 3.6:1. */
  .john__own {
    grid-row: 5;
    position: relative;
    max-width: none;
    margin-top: 3.2rem;
    padding: 2.1rem 1.5rem 2.2rem;
    border-top: 0;
    border-radius: var(--r-xl);
    background: var(--sand);
    box-shadow: 0 2px 6px rgba(40, 24, 8, .06), 0 30px 54px -32px rgba(40, 24, 8, .38);
  }
  .john__own-h::before {
    content: "";
    display: block;
    width: 2.75rem;
    height: 2px;
    margin-bottom: 1.3rem;
    border-radius: 2px;
    background: var(--accent);
    transform: scaleX(var(--draw, 1));
    transform-origin: left center;
  }
  .john__own .john__own-h {
    margin-bottom: 1.1rem;
    font-size: clamp(1.65rem, 7.2vw, 1.95rem);
    line-height: 1.12;
    color: var(--ink);
  }
  .john__own p { color: var(--ink-2); }

  /* The price: what it takes to start, set as a figure of its own. */
  .price__start { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .55rem; margin-bottom: .45rem; }
  .price__start b {
    font-family: var(--display);
    font-size: clamp(2.6rem, 12vw, 3.2rem);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--accent-lit);
  }
  .price__start {
    font-family: var(--display);
    font-size: clamp(1.3rem, 5.8vw, 1.5rem);
    line-height: 1.15;
    color: var(--ivory);
  }
}
@keyframes more-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .wheel__box::before { animation: none !important; }
}