/* ==========================================================================
   Dactyl Websites — the inner pages, brought up to the home page.

   Loaded last on every page in the footer (and pricing). Nothing here adds
   to the palette: linen, sand, ink, umber, terracotta as a mark, gold only
   for Pro. What it adds is structure the pages were missing and a few new
   ways of moving, so no two sections in a row behave the same:

     HERO      every page opens the same way: a label row over a hairline,
               the title at the guide pages' scale, then the page's own
               object (a photograph, a map, a figure).
     CONTACT   a real desktop layout: the invitation and the direct lines
               beside a photograph of the studio, the form on a sand band
               of its own, the process as one line drawn through four steps.
     FAQ       a ruled index of questions that open in place, beside a
               pinned photograph and the two direct ways to ask.
     FOCUS     Western Sydney: three rows set large; the one being read is
               at full strength and the others fall back.
     LEDGER    Small businesses: one large figure that rolls to each
               reason's share as that reason is read.
     REEL      Small businesses: the case studies travel sideways across a
               held section.
     CALENDAR  Search & AI: three cadences side by side, dividers drawing
               down, words rising out of their lines.
     NEXT      Features: the way on to pricing, as a destination.

   Motion is polish.js, GSAP on Lenis, transform / opacity / clip-path only,
   and none of it runs for reduced motion; every component here is a
   finished layout without it.

   Contrast, computed against the surface actually underneath (WCAG
   relative luminance):
     ink-3 #665e52 on linen 5.77 / sand 5.00      labels, numerals
     accent-ink #a7471b on linen 5.33 / sand 4.62 small terracotta text
     on-navy white 75% on umber lamp #1e1e1e 9.86 body on dark
     on-navy-2 white 62% on #1e1e1e 7.18          labels on dark
     FOCUS and LEDGER dim only their large headings, never the body copy:
     a whole row at .38 measured 2.57 for its paragraph. Dimmed headings
     are large text (3:1): ivory at .42 on umber 3.63, ink at .55 on
     sand 3.86.
   ========================================================================== */

/* ------------------------------------------------------------ Shared */
/* The page width, the same as Features (desk.css --edge): 92rem of content. */
.px-in { width: 100%; max-width: calc(92rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.px-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 clamp(1.6rem, 4.5vw, 3rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--hair-2);
  font-family: var(--mono);
  font-size: max(12px, .72rem);
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.px-meta__r { display: none; }

.px-kicker {
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: max(12px, .72rem);
  line-height: 1.4;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* The inner pages' titles at the guide pages' scale, so every page opens
   at the same size as every other. */
.pg-title.px-title { font-size: clamp(3.2rem, 15vw, 8.6rem); line-height: .97; letter-spacing: -.038em; }
.pg-h.px-h { font-size: clamp(2.2rem, 8vw, 4rem); line-height: 1.04; letter-spacing: -.025em; }
.pg-h.px-h em { font-style: italic; color: var(--accent); }

/* A heading on the left and its paragraph on the right, on one baseline. */
.px-head { display: grid; gap: 1rem; }
.px-head .gd-p { margin: 0; }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .px-meta__r { display: inline; }
  .px-head { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 5rem); }
  .px-herorow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem); align-items: end; gap: 3rem; }
  .px-herorow .pg-lead { margin: 0 0 1rem; }
}

/* ------------------------------------------------------------ Features */
.pg-hero--fx .px-in { padding-bottom: .5rem; }

.px-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: .4rem 1.5rem;
  padding: 1.6rem 0 1.8rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hair-2);
  color: var(--ink);
  text-decoration: none;
}
.px-next__k { grid-column: 1 / -1; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.px-next__t { font-family: var(--display); font-size: clamp(3.2rem, 12vw, 6rem); line-height: .95; letter-spacing: -.04em; transition: transform .7s var(--glide); }
.px-next__ico {
  display: grid;
  place-items: center;
  width: clamp(3.4rem, 9vw, 4.6rem);
  aspect-ratio: 1;
  margin-bottom: .4rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--ink);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease);
}
.px-next__ico svg { width: 42%; height: 42%; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .45s var(--ease), transform .6s var(--glide); }
.px-next:hover .px-next__t { transform: translateX(.6rem); }
.px-next:hover .px-next__ico { background-color: var(--ink); }
.px-next:hover .px-next__ico svg { stroke: var(--linen); transform: translateX(3px); }
.px-next:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 4px; }
@media (hover: none) { .px-next:hover .px-next__t { transform: none; } .px-next:hover .px-next__ico { background-color: transparent; } .px-next:hover .px-next__ico svg { stroke: var(--ink); transform: none; } }
/* The pager: back and next, the same piece twice, side by side on one
   line at every width, Next at the right. Back mirrors it (the arrow
   first, pointing left, leaning left on hover). Phones scale the words
   and the round arrow down so the pair fits the line. */
.px-pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(1rem, 5vw, 5rem); }
.px-next--prev { grid-template-columns: auto minmax(0, 1fr); }
.px-next--prev:hover .px-next__t { transform: translateX(-.6rem); }
.px-next--prev:hover .px-next__ico svg { transform: translateX(-3px); }
.px-pager .px-next:not(.px-next--prev) { grid-template-columns: minmax(0, 1fr) auto; text-align: right; }
.px-pager .px-next__t { font-size: clamp(2.8rem, 4.6vw, 4.6rem); }
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .px-pager .px-next { column-gap: .6rem; align-items: center; }
  .px-pager .px-next__t { font-size: clamp(1.45rem, 6.4vw, 2.2rem); line-height: 1; letter-spacing: -.03em; }
  .px-pager .px-next__ico { width: 2.6rem; margin-bottom: 0; }
}

/* ------------------------------------------------------------ Contact */

/* The two direct lines: set as type, not as pills. A number and an
   address are what someone came here for, so they are the largest thing
   after the title. */
.cx-lines { margin: 2.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.cx-lines li { border-bottom: 1px solid var(--hair-2); }
.cx-lines a {
  display: grid;
  grid-template-columns: 4.2rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .8rem;
  padding: 1.15rem 0 1.25rem;
  color: var(--ink);
  text-decoration: none;
}
.cx-lines small { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.cx-lines b { font-family: var(--display); font-size: clamp(1.45rem, 5.6vw, 2.2rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; transition: transform .6s var(--glide); }
.cx-lines svg { align-self: center; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--glide); }
.cx-lines a:hover b { transform: translateX(.4rem); }
.cx-lines a:hover svg { transform: translateX(4px); }
.cx-lines a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
/* The narrow version, beside the FAQ: the label above the line, so an email
   address has the whole width and only breaks after the @. */
.cx-lines--sm a { grid-template-columns: minmax(0, 1fr) auto; row-gap: .35rem; padding: .95rem 0 1.05rem; }
.cx-lines--sm small { grid-column: 1 / -1; }
.cx-lines--sm b { font-size: clamp(1.2rem, 4.6vw, 1.4rem); overflow-wrap: normal; }
.cx-where { margin-top: 1.6rem; }

.cx-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--sand); aspect-ratio: 4 / 3; }
.cx-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 40% 25%; }
.cx-photo figcaption, .fq-photo figcaption {
  position: absolute;
  left: 1rem; bottom: 1rem;
  padding: .45rem .8rem;
  border-radius: 999px;
  background: rgba(20, 17, 13, .78);
  font-family: var(--mono);
  font-size: max(12px, .7rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory);
}


/* Its foot as generous as its head: at 1rem the four steps ran straight
   into the footer. */
.cx-process { padding-block: clamp(4.75rem, 11vw, 7.5rem) clamp(4.5rem, 10vw, 7rem); }

/* The path: one line through four numbered steps. --p (0 to 1) is how much
   of it is drawn; polish.js scrubs it and lights each numeral as the line
   reaches it. Drawn whole without JS. */
.px-path { --p: 1; position: relative; display: grid; gap: 2.2rem; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0 0 0 3.6rem; list-style: none; }
.px-path::before, .px-path::after {
  content: "";
  position: absolute;
  left: 1.25rem; top: 1.2rem; bottom: 1.2rem;
  width: 1px;
  background: var(--hair-2);
}
.px-path::after { background: var(--accent); transform: scaleY(var(--p)); transform-origin: top; }
.px-path li { position: relative; }
.px-path__n {
  position: absolute;
  left: -3.6rem; top: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--linen);
  box-shadow: inset 0 0 0 1px var(--hair-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-3);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease);
}
.px-path li.is-lit .px-path__n, .px-path:not(.is-live) .px-path__n { background: var(--ink); color: var(--linen); box-shadow: inset 0 0 0 1px var(--ink); }
.px-path p { margin: 0; padding-top: .35rem; max-width: 26em; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {

  .px-path { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2rem; padding: 3.6rem 0 0; }
  .px-path::before, .px-path::after { left: 1.25rem; right: 1.25rem; top: 1.25rem; bottom: auto; width: auto; height: 1px; }
  .px-path::after { transform: scaleX(var(--p)); transform-origin: left; }
  .px-path__n { left: 0; top: -3.6rem; }
  .px-path p { padding-top: 0; }
}

/* ------------------------------------------------------------ FAQ */
.fq-hero .pg-lead { max-width: 30ch; }
.fq-body { padding-block: clamp(3.5rem, 8vw, 5rem) 0; }
.fq-grid { display: grid; gap: 3rem; }

.fq-list { border-top: 1px solid var(--ink); }
.fq-q { border-bottom: 1px solid var(--hair-2); }
.fq-q summary {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) 2rem;
  align-items: baseline;
  gap: .6rem;
  padding: 1.35rem 0 1.4rem;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fq-q summary::-webkit-details-marker { display: none; }
.fq-q summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.fq-n { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .12em; color: var(--ink-3); transition: color .4s var(--ease); }
.fq-q h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 5vw, 2.15rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: pretty;
  transition: transform .6s var(--glide);
}
/* A plus that turns to a cross. */
.fq-ico { position: relative; align-self: center; justify-self: end; width: 1.1rem; height: 1.1rem; transition: transform .6s var(--glide); }
.fq-ico::before, .fq-ico::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink); border-radius: 2px; }
.fq-ico::after { transform: rotate(90deg); }
.fq-q[open] .fq-ico { transform: rotate(45deg); }
.fq-q[open] .fq-n { color: var(--accent-ink); }
@media (hover: hover) { .fq-q summary:hover h2 { transform: translateX(.35rem); } }

.fq-a { overflow: hidden; }
.fq-a p { margin: 0; padding: 0 2.6rem 1.8rem 3.2rem; max-width: 40em; font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); }
.fq-a p:not(:last-child) { padding-bottom: 1rem; }

.fq-side { display: grid; gap: 1.6rem; align-content: start; }
.fq-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--sand); aspect-ratio: 4 / 3; }
.fq-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fq-side .cx-lines { margin-top: 0; }

/* The FAQ as four groups. Each group's label (a mono name and its count)
   pins under the header while its questions pass, so you always know
   where you are in eighteen. A question is a generous ruled row: italic
   terracotta numeral, the question in the serif, a round control; opened,
   the row becomes a sand card with the answer in it. On a phone the photo
   comes after the questions as its own feature, "Still got a question?",
   with the two ways to ask under it (it is not wallpaper). */
.fq-group + .fq-group { margin-top: clamp(3rem, 9vw, 4.5rem); }
.fq-group__h {
  position: sticky;
  top: var(--nav-h, 56px);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding: 1.1rem 0 .8rem;
  border-bottom: 1px solid var(--ink);
  background: var(--linen);
  font-family: var(--mono);
  font-size: max(12px, .72rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
}
.fq-group__h small { font-size: 1em; letter-spacing: .1em; color: var(--accent-ink); }
.fq-list { border-top: 0; }
.fq-q { position: relative; border-radius: 0; transition: background-color .5s var(--ease), border-radius .5s var(--ease), margin .5s var(--glide); }
.fq-n { font-family: var(--display); font-style: italic; font-weight: 300; font-size: 1.6rem; letter-spacing: -.02em; line-height: 1; color: var(--accent); }
.fq-q[open] .fq-n { color: var(--accent-ink); }
.fq-ico { width: 2.2rem; height: 2.2rem; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-2); transition: transform .6s var(--glide), background-color .4s var(--ease), box-shadow .4s var(--ease); }
.fq-ico::before, .fq-ico::after { left: 30%; right: 30%; }
.fq-q[open] .fq-ico { background: var(--ink); box-shadow: none; }
.fq-q[open] .fq-ico::before, .fq-q[open] .fq-ico::after { background: var(--linen); }
.fq-q[open] { margin: .5rem 0; border-bottom-color: transparent; border-radius: 1.5rem; background: var(--sand); }
.fq-photo, .fq-side__h { display: block; }
.fq-side__h { margin: 0 0 1.2rem; font-family: var(--display); font-size: clamp(2rem, 8vw, 2.6rem); line-height: 1.05; letter-spacing: -.025em; color: var(--ink); }
.fq-side__h .qm { font-style: normal; color: var(--accent); }

@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .fq-grid { gap: clamp(4.5rem, 16vw, 6rem); }
  .fq-q summary { grid-template-columns: 2.6rem minmax(0, 1fr) 2.2rem; align-items: center; padding: 1.35rem 0 1.4rem; }
  .fq-q[open] summary { padding-inline: 1.1rem; }
  .fq-q h2 { font-size: 1.32rem; }
  .fq-a p { padding: 0 1.2rem 1.5rem 3.7rem; }
  .fq-side { padding-bottom: 1rem; }
  /* Edge to edge: the picture is the feature here. */
  .fq-photo { aspect-ratio: 4 / 4.6; margin: 0 calc(var(--gutter) * -1) 1.6rem; border-radius: 0; box-shadow: none; }
  .fq-photo img { height: 118%; margin-top: -9%; }
}
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .fq-side__h { font-size: 2rem; }
  .fq-q[open] summary { padding-inline: 1.4rem; }
  .fq-q[open] .fq-a p { padding-left: 5rem; }
}
@media (prefers-reduced-motion: reduce) { .fq-q, .fq-ico { transition: none; } }

/* Wide screens: the photograph is a feature, not a thumbnail: a bigger
   column, taller, and it drifts inside its frame as the list scrolls past
   (polish.js, INDEX). */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .fq-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .fq-side { position: sticky; top: calc(var(--nav-h, 56px) + 2rem); }
  .fq-photo { aspect-ratio: auto; height: min(68svh, 44rem); box-shadow: var(--lift, 0 30px 50px -30px rgba(40, 24, 8, .42)); }
  .fq-photo img { height: 120%; margin-top: -10%; }
  .fq-q summary { grid-template-columns: 3.6rem minmax(0, 1fr) 2.4rem; padding: 1.6rem 0 1.65rem; }
  .fq-a p { padding-left: 4.2rem; }
}

/* ------------------------------------------------------------ Focus (Western Sydney) */
.px-focus { margin: clamp(2.4rem, 6vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .3); }
.px-focus li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: .2rem .8rem;
  padding: clamp(1.8rem, 4vw, 2.8rem) 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.px-focus__n { padding-top: .9rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .12em; color: var(--accent-lit-ink); }
.px-focus h3 { margin: 0; font-family: var(--display); font-size: clamp(2.1rem, 8vw, 4.4rem); font-weight: 400; line-height: 1.02; letter-spacing: -.035em; color: var(--ivory); text-wrap: balance; }
.px-focus p { grid-column: 2; margin: .9rem 0 0; max-width: 30em; font-size: 1.0625rem; line-height: 1.65; color: var(--on-navy); }
.px-focus h3 { transition: opacity .7s var(--ease); }
.px-focus.is-live li h3 { opacity: .42; }
.px-focus.is-live li.is-on h3 { opacity: 1; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .px-focus li { grid-template-columns: 5rem minmax(0, 1fr) minmax(16rem, 24rem); gap: 0 2.5rem; align-items: baseline; }
  .px-focus p { grid-column: 3; margin: 0; }
}

/* ------------------------------------------------------------ Ledger (Small businesses) */
.px-ledger { margin-top: clamp(2.4rem, 6vw, 4rem); }
.px-ledger__fig { display: none; }
.px-ledger__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.px-ledger__item { padding: 1.8rem 0 2rem; border-bottom: 1px solid var(--hair-2); }
.px-ledger__n { margin: 0; font-family: var(--display); font-size: clamp(4rem, 20vw, 6rem); line-height: .9; letter-spacing: -.045em; color: var(--ink); font-variant-numeric: lining-nums; }
.px-ledger__n small { font-size: .42em; letter-spacing: 0; color: var(--accent); }
.px-ledger__tag { margin: 1.2rem 0 0; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
.px-ledger__item h3 { margin: .5rem 0 0; font-family: var(--display); font-size: clamp(1.7rem, 6vw, 2.6rem); font-weight: 400; line-height: 1.1; letter-spacing: -.022em; color: var(--ink); }
.px-ledger__item p:last-child { margin: .8rem 0 0; max-width: 30em; font-size: 1.0625rem; line-height: 1.68; color: var(--ink-2); }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .px-ledger { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(3rem, 6vw, 6rem); }
  .px-ledger__fig {
    display: flex;
    align-items: flex-start;
    position: sticky;
    top: calc(50svh - 7rem);
    align-self: start;
    font-family: var(--display);
    font-size: clamp(9rem, 17vw, 15rem);
    line-height: .86;
    letter-spacing: -.055em;
    color: var(--ink);
    font-variant-numeric: lining-nums;
  }
  .px-ledger__win { display: block; height: .86em; overflow: hidden; }
  .px-ledger__roll { display: flex; flex-direction: column; transform: translateY(calc(var(--k, 0) * -.86em)); transition: transform 1.1s var(--glide); }
  .px-ledger__roll b { display: block; height: .86em; font-weight: 400; }
  .px-ledger__fig small { margin: .12em 0 0 .04em; font-size: .36em; letter-spacing: 0; color: var(--accent); }
  .px-ledger__n { display: none; }
  .px-ledger__item { display: flex; flex-direction: column; justify-content: center; min-height: 46svh; padding: 3rem 0; }
  .px-ledger__item:first-child .px-ledger__tag { margin-top: 0; }
  .px-ledger__tag { margin-top: 0; }
  .px-ledger.is-live .px-ledger__item h3 { opacity: .55; transition: opacity .6s var(--ease); }
  .px-ledger.is-live .px-ledger__item.is-on h3 { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .px-ledger__roll { transition: none; } }

/* ------------------------------------------------------------ Reel (Small businesses) */
.px-reel { margin-top: clamp(2.4rem, 6vw, 4rem); }
.px-reel .gd-deckwrap { margin-top: 0; padding-inline: var(--gutter); }
.px-reel .gd-deck { margin-inline: calc(-1 * var(--gutter)); }
.px-story {
  display: flex;
  flex-direction: column;
  min-height: 25rem;
  padding: 2rem 1.6rem 2.2rem;
  border-radius: var(--r-xl);
  background: var(--bg);
  color: var(--t2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12), 0 30px 50px -30px rgba(0, 0, 0, .55);
}
.px-story__n { font-family: var(--display); font-size: clamp(4.6rem, 20vw, 7rem); line-height: .9; letter-spacing: -.045em; color: var(--t1); font-variant-numeric: lining-nums; }
.px-story__n em { font-style: italic; color: var(--ac); }
.px-story__n small { font-size: .42em; letter-spacing: 0; color: var(--ac); }
.px-story__tag { margin: auto 0 0; padding-top: 2rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .16em; text-transform: uppercase; color: var(--t3); }
.px-story h3 { margin: .6rem 0 0; font-family: var(--display); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; color: var(--t1); }
.px-story h3 span { display: block; margin-top: .45rem; font-family: var(--mono); font-size: max(12px, .7rem); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.px-story > p:last-child { margin: .9rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--t2); }
.px-reelsec .gd-fine { margin-top: 2.4rem; }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .px-reel { overflow: hidden; }
  .px-reel .gd-deckwrap { padding-inline: 0; }
  .px-reel .gd-deck.px-reel__track {
    display: flex;
    gap: clamp(1.4rem, 2.4vw, 2.2rem);
    width: max-content;
    margin: 0;
    padding: 1rem max(var(--gutter), calc((100vw - 72rem) / 2 + var(--gutter))) 2.5rem;
    overflow: visible;
    will-change: transform;
  }
  .px-story { width: min(40rem, 58vw); min-height: 30rem; padding: 2.8rem 3rem 3rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr auto auto; column-gap: 2.6rem; }
  .px-story__n { grid-column: 1; grid-row: 1 / -1; align-self: end; font-size: clamp(6rem, 9vw, 9rem); }
  .px-story__tag { grid-column: 2; grid-row: 1; margin: 0; padding: 0; }
  .px-story h3 { grid-column: 2; grid-row: 3; }
  .px-story > p:last-child { grid-column: 2; grid-row: 4; }
}

/* ------------------------------------------------------------ Calendar (Search & AI) */
.px-cal { display: grid; margin: clamp(2.4rem, 6vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.px-cal li { position: relative; padding: 1.8rem 0 2rem; border-bottom: 1px solid var(--hair-2); }
.px-cal__when { margin: 0; overflow: hidden; padding-bottom: .08em; font-family: var(--display); font-size: clamp(2.4rem, 10vw, 3.9rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); }
.px-cal__when span { display: inline-block; }
.px-cal__when em { font-style: italic; color: var(--accent); }
.px-cal__plan { display: inline-block; margin: 1.1rem 0 0; padding: .4rem .8rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink-3); font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.px-cal__t { margin: 1rem 0 0; max-width: 24em; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .px-cal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .px-cal li { padding: 2.4rem 2.2rem 0; border-bottom: 0; }
  .px-cal li:first-child { padding-left: 0; }
  .px-cal li + li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--hair-2); transform: scaleY(var(--d, 1)); transform-origin: top; }
  .px-cal__when { font-size: clamp(2.6rem, 4.4vw, 4rem); }
}

/* ------------------------------------------------------------ Image wipe
   A photograph that opens upward out of its frame as it arrives
   (polish.js). Without JS it is simply there. */
.px-wipe img { transform-origin: 50% 70%; }

/* ------------------------------------------------------------ Pro tag
   The features page's gold Pro tag, small, for a line that says what Pro
   adds (Search & AI, contact). */
.px-pro__tag {
  flex: none;
  padding: .2rem .6rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: #1a1103;
  background: linear-gradient(160deg, #f6da8c 0%, #ebc166 40%, #dcab4f 100%);
  box-shadow: inset 0 1px 0 rgba(255, 250, 225, .85);
}
.px-pro__tag:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.gd-q__why { display: block; margin-top: .7rem; max-width: 38em; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; letter-spacing: 0; color: var(--ink-2); }


/* ------------------------------------------------------------ Search & AI: built in
   The heading and a tall photograph pinned together on the left while the
   six rows pass. The photograph is sized to what's left of the screen
   under the heading, so the pair always fits whole. */
.sa-photo { position: relative; margin: 2rem 0 0; overflow: hidden; border-radius: var(--r-xl); background: var(--sand); aspect-ratio: 4 / 3; box-shadow: var(--lift); }
.sa-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.sa-spec__p { margin: 0 0 1.8rem; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .sa-spec__head .gd-h { font-size: clamp(2.3rem, 3.6vw, 3.3rem); }
  .sa-photo { aspect-ratio: auto; height: calc(100svh - var(--nav-h, 56px) - 17rem); min-height: 18rem; max-height: 38rem; margin-top: 1.8rem; }
  .sa-spec__body { padding-top: .4rem; }
}

/* ------------------------------------------------------------ Search & AI: after launch
   A ledger on the umber sheet, set like a field guide: the title with its
   line beside it, then a row for each thing we keep doing, an italic
   numeral, what we do, and in the margin what Pro adds. The note for local
   businesses closes it as the guide's footer line, not a callout. */
.sa-led__head { display: grid; gap: 1.2rem; }
.sa-led__head .gd-h { margin-bottom: 0; }
.sa-led__sub { margin: 0; max-width: 32em; font-size: 1.0625rem; line-height: 1.65; color: var(--t2); text-wrap: pretty; }
.sa-led__sub a { color: var(--t1); text-decoration: underline; text-decoration-color: var(--ac); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.sa-led { margin: clamp(2.4rem, 6vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--t1, var(--ink)); }
.sa-led__row {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.7rem 0 1.9rem;
}
.sa-led__row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rule);
  transform: scaleX(var(--d, 1));
  transform-origin: left;
}
.sa-led__n { overflow: hidden; padding-bottom: .08em; }
.sa-led__n span { display: block; font-family: var(--display); font-style: italic; font-weight: 300; font-size: 2.3rem; line-height: .95; letter-spacing: -.02em; color: var(--ac, var(--accent)); }
.sa-led__body h3 { margin: 0; font-family: var(--display); font-size: clamp(1.4rem, 5vw, 1.8rem); font-weight: 400; line-height: 1.18; letter-spacing: -.015em; color: var(--t1); }
.sa-led__body p { margin: .6rem 0 0; max-width: 34em; font-size: 1.0625rem; line-height: 1.65; color: var(--t2); text-wrap: pretty; }
.sa-led__pro { grid-column: 2; display: grid; justify-items: start; gap: .55rem; margin: 1.1rem 0 0; font-size: .975rem; line-height: 1.6; color: var(--t2); }
.sa-led__foot { display: grid; gap: .6rem; margin: 2.6rem 0 0; }
.sa-led__foot-k { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .22em; text-transform: uppercase; color: var(--acs); }
.sa-led__foot-t { max-width: 40em; font-family: var(--display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--t1); text-wrap: pretty; }
.sa-ask__p { margin: 1.2rem 0 0; max-width: 40em; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .sa-led__head { grid-template-columns: 1fr 1fr; align-items: end; gap: clamp(2rem, 5vw, 5rem); }
  .sa-led__row { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 19rem); column-gap: clamp(2rem, 4vw, 3.5rem); padding: 2.1rem 0 2.3rem; }
  .sa-led__n span { font-size: 3.6rem; }
  .sa-led__pro { grid-column: 3; margin: .35rem 0 0; }
  .sa-led__foot { grid-template-columns: 7rem minmax(0, 1fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: baseline; margin-top: 3rem; }
}

/* ------------------------------------------------------------ Privacy
   Set like the FAQ: the title at the inner pages' scale with a label row
   over it, then the three promises on the umber sheet (the contact page's
   material, rising over the page as it arrives), then the detail as a
   ruled, numbered ledger. Beside the ledger on a wide screen, pinned: the
   page's contents, marking the section being read (polish.js), and the
   two direct lines.

   Contrast, computed: ivory on umber-lamp 12.28, on-navy 8.64, the
   accent-lit numerals 4.75 (large); ink-2 on linen 9.41, ink-3 5.77,
   accent-ink 5.33 (the active contents line). */
.pv-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 clamp(1.8rem, 5vw, 3rem);
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--hair-2);
  font-family: var(--mono);
  font-size: max(12px, .72rem);
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pv-hero { padding-bottom: clamp(4.5rem, 12vw, 7.5rem); }
.pv-lead { max-width: 36ch; }

.pv-short {
  position: relative;
  z-index: 1;
  padding-block: clamp(4.75rem, 12vw, 8.5rem);
  border-radius: 2.25rem;                      /* round at both ends, as every sheet is */
  background: radial-gradient(120% 70% at 30% 0%, var(--umber-lamp) 0%, var(--umber) 55%, var(--umber-deep) 100%);
  color: var(--on-navy);
  box-shadow: 0 -22px 40px -28px rgba(40, 24, 8, .5), 0 40px 80px -50px rgba(40, 24, 8, .6);
}
.pv-kicker { margin: 0 0 1.4rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .22em; text-transform: uppercase; color: var(--on-navy-2); }
.pv-short__h { margin: 0; font-family: var(--display); font-size: clamp(2.8rem, 12vw, 5.4rem); font-weight: 400; line-height: .98; letter-spacing: -.04em; color: var(--ivory); }
.pv-short__h em { font-style: italic; font-weight: 300; color: var(--accent-lit); }
.pv-short__h .dot { margin-left: -.04em; color: var(--ivory); }
.pv-promises { display: grid; gap: 0; margin: clamp(2.6rem, 7vw, 4rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .3); }
.pv-promises li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 1rem; padding: 1.6rem 0 1.75rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.pv-promises__n { grid-row: span 2; font-family: var(--display); font-style: italic; font-weight: 300; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; color: var(--accent-lit); }
.pv-promises h3 { margin: 0; font-family: var(--display); font-size: clamp(1.45rem, 5.4vw, 1.9rem); font-weight: 400; line-height: 1.15; letter-spacing: -.015em; color: var(--ivory); }
.pv-promises p { margin: .55rem 0 0; max-width: 30em; font-size: 1.0625rem; line-height: 1.65; color: var(--on-navy); text-wrap: pretty; }

.pv-body { padding-block: clamp(4.75rem, 12vw, 8rem) clamp(5rem, 13vw, 9rem); }
.pv-grid { display: grid; gap: clamp(3.5rem, 9vw, 4.5rem); }
.pv-list { border-top: 1px solid var(--ink); }
.pv-sec {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.9rem 0 2.1rem;
  scroll-margin-top: calc(var(--nav-h, 56px) + 1.5rem);
}
.pv-sec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--hair-2); transform: scaleX(var(--d, 1)); transform-origin: left; }
.pv-sec__n { overflow: hidden; padding-bottom: .08em; }
.pv-sec__n span { display: block; font-family: var(--display); font-style: italic; font-weight: 300; font-size: 2.1rem; line-height: .95; letter-spacing: -.02em; color: var(--accent); }
.pv-sec h2 { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 5.6vw, 2rem); font-weight: 400; line-height: 1.15; letter-spacing: -.018em; color: var(--ink); text-wrap: balance; }
.pv-sec p { margin: .75rem 0 0; max-width: 38em; font-size: 1.0625rem; line-height: 1.72; color: var(--ink-2); text-wrap: pretty; }
.pv-sec p + p { margin-top: 1rem; }
.pv-sec a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.pv-sec a:hover { text-decoration-thickness: 2.5px; }
.pv-sec a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.pv-side { display: grid; gap: 2.4rem; align-content: start; }
.pv-toc { display: none; }
.pv-side .cx-lines { margin-top: 0; }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .pv-short { margin-inline: clamp(.5rem, 1.4vw, 1.25rem); border-radius: 2.25rem; }
  .pv-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); border-top: 0; }
  .pv-promises li { grid-template-columns: 1fr; align-content: start; padding: 1.8rem 0 0; border-top: 1px solid rgba(255, 255, 255, .3); border-bottom: 0; }
  .pv-promises__n { grid-row: auto; margin-bottom: 1.4rem; font-size: 3.2rem; }

  /* The lead beside the title, on its last line, as the other inner
     pages' hero rows do, rather than under it with half the screen empty. */
  .pv-hero .px-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 25rem); column-gap: clamp(3rem, 6vw, 6rem); align-items: end; }
  .pv-meta { grid-column: 1 / -1; }
  .pv-lead { margin: 0 0 1.4rem; font-size: 1.2rem; }

  .pv-grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .pv-sec { grid-template-columns: 6rem minmax(0, 1fr); column-gap: clamp(1.5rem, 3vw, 2.5rem); padding: 2.3rem 0 2.5rem; }
  .pv-sec__n span { font-size: 3rem; }
  .pv-side { position: sticky; top: calc(var(--nav-h, 56px) + 2rem); }
  .pv-toc { display: block; }
  .pv-toc__k { margin: 0 0 1rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
  .pv-toc ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
  .pv-side .pv-toc a {
    position: relative;
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    padding: .62rem 0 .66rem;
    border-bottom: 1px solid var(--hair-2);
    font-size: .975rem;
    line-height: 1.35;
    color: var(--ink-2);
    text-decoration: none;
    transition: color .35s var(--ease), padding-left .5s var(--glide);
  }
  .pv-side .pv-toc a span { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; line-height: 1.9; color: var(--ink-3); transition: color .35s var(--ease); }
  .pv-side .pv-toc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 0; height: 1.5px; background: var(--accent); transition: width .5s var(--glide); }
  .pv-side .pv-toc a:hover { color: var(--ink); }
  .pv-side .pv-toc a.is-on { padding-left: 1.1rem; color: var(--ink); }
  .pv-side .pv-toc a.is-on span { color: var(--accent-ink); }
  .pv-side .pv-toc a.is-on::before { width: .7rem; }
  .pv-side .pv-toc a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-side .pv-toc a, .pv-side .pv-toc a::before, .pv-side .pv-toc a span { transition: none; }
}


/* ------------------------------------------------------------ Search & AI, October
   Built from the 10K checklist: one idea per surface, the palette held to
   linen, sand and ink with terracotta as the mark, and a phone layout that
   is its own design rather than the desktop's stacked.

   GLANCE   the three acronyms as tiles: an italic numeral, the letters
            large in the serif, the words in mono, the question they answer.
            Paper on the linen, lifted, with a terracotta rule that draws
            across each top as it arrives (searchai.js). Clear of the hero.
   ROOM     the acronyms, every-build and after-launch sections end with
            far more air before the next.
   BUILT    phones: the photograph pins and keeps growing, frame and picture,
            while the six things scroll up over it on frosted glass.
   AFTER    no longer dark: a sand sheet. On a phone, a carousel of cards
            that swipes and snaps; wide, the ledger on the sand.
   ASK      phones: the questions stack as sticky cards, each covering the
            one before as it arrives, which steps back (searchai.js), so it
            is a different gesture and shape from the carousel above. */
.sa-glance { margin-top: clamp(4.5rem, 10vw, 7.5rem); gap: 1rem; border-top: 0; }
.sa-glance li {
  position: relative;
  display: grid;
  gap: .3rem;
  padding: 1.6rem 1.5rem 1.7rem;
  border: 0;
  border-radius: var(--r-xl);
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(20, 17, 13, .05), 0 2px 6px rgba(40, 24, 8, .05), 0 28px 50px -34px rgba(40, 24, 8, .4);
  overflow: hidden;
  transition: transform .6s var(--glide), box-shadow .6s var(--glide);
}
.sa-glance li::before { content: ""; position: absolute; left: 1.5rem; right: 1.5rem; top: 0; height: 2px; background: var(--accent); transform: scaleX(var(--d, 1)); transform-origin: left; }
.sa-glance__n { font-family: var(--display); font-style: italic; font-weight: 300; font-size: 1.5rem; line-height: 1; color: var(--accent); }
.sa-glance b { margin-top: .9rem; min-width: 0; font-family: var(--display); font-size: clamp(3.2rem, 12vw, 4.4rem); font-weight: 400; line-height: .95; letter-spacing: -.035em; color: var(--ink); }
.sa-glance small { font-family: var(--mono); font-size: max(12px, .7rem); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.sa-glance span:last-child { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hair-2); font-family: var(--display); font-size: 1.3rem; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) {
  .sa-glance li:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(20, 17, 13, .06), 0 4px 10px rgba(40, 24, 8, .06), 0 40px 60px -34px rgba(40, 24, 8, .5); }
}
@media (min-width: 760px) {
  .sa-glance { gap: 1.25rem; }
  .sa-glance li { padding: 2rem 1.9rem 2.1rem; border-left: 0; }
  .sa-glance li:first-child { padding-left: 1.9rem; }
  .sa-glance li:nth-child(2) { margin-top: 2.5rem; }
}

/* ROOM */
#what, #built-in { padding-bottom: clamp(8rem, 16vw, 11rem); }
.sa-after { padding-bottom: clamp(7rem, 14vw, 10rem); margin-bottom: clamp(1rem, 3vw, 2rem); }
.sa-led__swipe { display: none; }

@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  /* The acronyms: no progress bar under the strip. */
  #what .gd-deckbar { display: none; }

  /* BUILT: the head opens out, so its photograph is a child of the
     section's grid and can pin for the section's whole length. */
  .sa-spec { gap: 0; }
  .sa-spec__head { display: contents; }
  .sa-spec__head .gd-h { margin-bottom: 2rem; }
  .sa-photo {
    position: sticky;
    top: calc(var(--nav-h, 56px) + 1rem);
    z-index: 0;
    height: calc(100svh - var(--nav-h, 56px) - 1rem);
    margin: 0 calc(var(--gutter) * -1) calc(-100svh + var(--nav-h, 56px) + 1rem);
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .sa-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 243, 238, 0) 55%, rgba(246, 243, 238, .55) 100%); pointer-events: none; }
  .sa-spec__body { position: relative; z-index: 1; padding-top: 58svh; }
  .sa-spec__p {
    margin: 0 0 1rem;
    padding: 1.3rem 1.3rem 1.4rem;
    border-radius: 1.5rem;
    background: rgba(246, 243, 238, .82);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 22px 44px -28px rgba(40, 24, 8, .45);
  }
  .sa-spec .gd-rows { display: grid; gap: .8rem; border-top: 0; }
  .sa-spec .gd-row {
    padding: 1.4rem 1.3rem 1.5rem;
    border: 0;
    border-radius: 1.5rem;
    background: rgba(246, 243, 238, .8);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 22px 44px -28px rgba(40, 24, 8, .45);
  }
  .js .sa-spec .gd-row::after { display: none; }

  /* AFTER: the carousel. */
  .sa-after .sa-led {
    display: flex;
    gap: .9rem;
    margin: 2.4rem calc(var(--gutter) * -1) 0;
    /* Deep enough below for the cards' whole shadow: the scroller clips
       on both axes, so a shallow pad cut it off flat. Given back by the
       margin. */
    padding: 1.2rem var(--gutter) 4.2rem;
    margin-bottom: -2.4rem;
    border-top: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .sa-after .sa-led::-webkit-scrollbar { display: none; }
  .sa-after .sa-led__row {
    flex: 0 0 min(80vw, 22rem);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    padding: 1.8rem 1.5rem 1.7rem;
    border-radius: 1.75rem;
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(20, 17, 13, .05), 0 26px 44px -30px rgba(40, 24, 8, .45);
  }
  .sa-after .sa-led__row::after { display: none; }
  /* Dealt in the acronyms' three materials, in their order: paper, ember,
     umber, then round again, so the strip reads as a hand of cards. */
  .sa-after .sa-led__row:nth-child(3n+2) {
    --t1: var(--paper); --t2: rgba(255, 255, 255, .9); --ac: var(--paper); --rule: rgba(255, 255, 255, .34);
    background: var(--ember-bg);
    box-shadow: inset 0 1px 0 rgba(255, 214, 186, .4), 0 30px 46px -30px rgba(110, 36, 8, .55);
  }
  .sa-after .sa-led__row:nth-child(3n) {
    --t1: var(--ivory); --t2: var(--on-navy); --ac: var(--accent-lit); --rule: rgba(255, 255, 255, .16);
    background: var(--dark-bg);
    box-shadow: 0 30px 46px -30px rgba(0, 0, 0, .6);
  }
  .sa-after .sa-led__n span { font-size: 3.6rem; }
  .sa-after .sa-led__body { margin-top: 1rem; }
  .sa-after .sa-led__pro { margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--rule, var(--hair-2)); font-size: .95rem; }
  .sa-after .sa-led__body + .sa-led__pro { margin-top: 1.4rem; }

  /* ASK: the sticky stack. */
  .sa-ask .gd-qs { border-top: 0; margin-top: 2.4rem; }
  .sa-ask .gd-qs li {
    position: sticky;
    top: calc(var(--nav-h, 56px) + 1rem + var(--i, 0) * .7rem);
    display: block;
    min-height: 15rem;
    /* The scroll between cards is margin ABOVE each one, not below: a
       sticky card's margin counts against the list's end, so a margin
       below let the tallest card be pushed off the pile early. */
    margin: 0;
    padding: 1.9rem 1.5rem 2rem;
    border: 0;
    border-radius: 1.75rem;
    background: var(--sand);
    box-shadow: 0 0 0 1px rgba(20, 17, 13, .04), 0 -10px 30px -18px rgba(40, 24, 8, .3), 0 26px 44px -30px rgba(40, 24, 8, .45);
    font-size: 1.55rem;
    transform-origin: 50% 0;
  }
  .sa-ask .gd-qs li + li { margin-top: 16svh; }
  .sa-ask .gd-qs li::before { display: block; margin-bottom: 1rem; padding: 0; font-family: var(--display); font-style: italic; font-weight: 300; font-size: 2.6rem; letter-spacing: -.02em; line-height: 1; color: var(--accent); }
  .js .sa-ask .gd-qs li::after { display: none; }
  .sa-ask .gd-qs li:nth-child(2) { --i: 1; } .sa-ask .gd-qs li:nth-child(3) { --i: 2; } .sa-ask .gd-qs li:nth-child(4) { --i: 3; }
  .sa-ask .gd-qs li:nth-child(5) { --i: 4; } .sa-ask .gd-qs li:nth-child(6) { --i: 5; }
  .sa-ask .gd-q__why { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sa-glance li { transition: none; }
}


/* ------------------------------------------------------------ Small businesses, October
   HERO     more room under it; the photograph's parallax is deeper
            (guides.js, DEEP); on a phone the three businesses play as a
            film scrubbed by the scroll over the still (film.js).
   ALONE    no dark band. The same three businesses pinned behind the
            section as its background (a sticky layer a screen tall, taken
            out of the flow by its own negative margin, so it works on a
            phone where background-attachment: fixed doesn't), drifting as
            it goes; the heading, the figures and the source ride over it on
            liquid glass: linen at 78% with the picture blurred and lifted
            behind (backdrop-filter), a bright top edge, a soft shadow.
            Contrast: ink on that pane over the darkest of the picture (the
            navy wall) stays above 9:1; the terracotta % is large.
   HOLDING  each reason is a conversation: the worry in a bubble, our answer
            under it as a reply. Wide: beside the big rolling figure, the
            one being read lifts on paper and the others fall back. Phones:
            a ring draws to the reason's share above each, instead of a
            second wall of big numbers like the section before. */
.gd-hero--wide { padding-bottom: clamp(7rem, 14vw, 10rem); }
.sb-hero-photo { position: relative; }
.sb-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ease); pointer-events: none; }
.sb-film.is-on { opacity: 1; }

.sb-num { position: relative; padding-block: 0; isolation: isolate; }
/* A clip the size of the section, and inside it the picture, a screen
   tall and sticky: contained by the clip, so it can never hang past the
   section's end. */
.sb-num__bg { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.sb-num__bg picture { position: sticky; top: 0; display: block; height: 100vh; height: 100lvh; overflow: hidden; }
.sb-num__bg picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(246, 243, 238, .35) 0%, rgba(246, 243, 238, 0) 30%, rgba(246, 243, 238, 0) 70%, rgba(246, 243, 238, .4) 100%); }
.sb-num__bg img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.sb-num__in { position: relative; z-index: 1; padding-top: 38vh; padding-bottom: clamp(6rem, 14vw, 9rem); }
.sb-glass {
  border-radius: 1.75rem;
  background: rgba(246, 243, 238, .78);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 30px 60px -34px rgba(40, 24, 8, .55);
}
.sb-num__head { padding: 1.8rem 1.5rem 2rem; }
.sb-num__head .gd-kicker { color: var(--ink-3); }
.sb-num__head .gd-h { margin-bottom: 0; color: var(--ink); }
.sb-stats { gap: .9rem; margin-top: 1rem; border-top: 0; }
.sb-stats .gd-stat {
  padding: 1.7rem 1.5rem 1.8rem;
  border: 0;
  border-radius: 1.75rem;
  background: rgba(246, 243, 238, .78);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 30px 60px -34px rgba(40, 24, 8, .55);
}
.sb-stats .gd-stat b { color: var(--ink); }
.sb-stats .gd-stat b small { color: var(--accent); }
.sb-stats .gd-stat p { color: var(--ink-2); }
.sb-num__fine { margin-top: 1rem; padding: 1.2rem 1.4rem; color: var(--ink-2); }
.sb-num__fine a { color: var(--ink); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .sb-num__in { padding-top: 45vh; }
  .sb-num__head { max-width: 40rem; padding: 2.4rem 2.6rem 2.6rem; }
  .sb-stats { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.25rem; }
  .sb-stats .gd-stat { padding: 2.2rem 2rem 2.3rem; border-left: 0; }
  .sb-stats .gd-stat:first-child { padding-left: 2rem; }
  .sb-stats .gd-stat:nth-child(2) { transform: translateY(2.5rem); }
  .sb-num__fine { max-width: 46rem; margin-top: 3.75rem; }
}

/* HOLDING */
.sb-ring { display: none; }
/* Set like the home page's cards: the tag as the eyebrow, the worry as
   the card's title in the serif, then our take as plain copy under its own
   small label. One surface, no boxes inside it. */
.px-ledger__item .sb-say {
  margin: .7rem 0 0;
  font-style: normal;
  line-height: 1.05;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.px-ledger__item p.sb-reply {
  margin: 1.4rem 0 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink-2);
}
.sb-reply__k { display: block; margin-bottom: .45rem; font-family: var(--mono); font-size: max(12px, .68rem); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .px-ledger__item { padding: 2.2rem 2.2rem 2.4rem; margin-bottom: 1.2rem; border: 0; border-radius: 2rem; transition: background-color .6s var(--ease), box-shadow .6s var(--ease), transform .7s var(--glide), opacity .6s var(--ease); }
  .px-ledger.is-live .px-ledger__item { opacity: .45; transform: scale(.97); }
  .px-ledger.is-live .px-ledger__item.is-on { opacity: 1; transform: none; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(20, 17, 13, .05), 0 34px 60px -38px rgba(40, 24, 8, .5); }
  .px-ledger.is-live .px-ledger__item h3 { opacity: 1; }
  .px-ledger__list { border-top: 0; }
  .px-ledger__item .sb-say { font-size: clamp(2.2rem, 3.2vw, 3rem); }
}
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .px-ledger__list { border-top: 0; display: grid; gap: 1rem; }
  .px-ledger__item { padding: 1.8rem 1.4rem 1.9rem; border: 0; border-radius: 1.75rem; background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 1px rgba(20, 17, 13, .05), 0 26px 44px -30px rgba(40, 24, 8, .4); }
  .px-ledger__n { display: none; }
  .sb-ring { position: relative; display: grid; place-items: center; width: 8.5rem; height: 8.5rem; }
  .sb-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
  .sb-ring circle { fill: none; stroke-width: 7; }
  .sb-ring__bg { stroke: rgba(20, 17, 13, .1); }
  .sb-ring__fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v) * var(--p, 1)); }
  .sb-ring b { font-family: var(--display); font-size: 2.6rem; font-weight: 400; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
  .sb-ring b small { font-size: .45em; color: var(--accent); }
  .px-ledger__item .sb-say { font-size: clamp(1.9rem, 8.5vw, 2.3rem); }
}
#who { padding-bottom: clamp(8rem, 16vw, 11rem); }
@media (prefers-reduced-motion: reduce) { .px-ledger__item { transition: none; } }


/* ------------------------------------------------------------ Western Sydney: where we work
   Wide: the photograph takes half the width and the screen's height,
   pinned while the suburbs pass; it opens out from an inset card to its
   full frame and the picture drifts inside it (polish.js, WHERE).
   Phones: the same idea turned for a phone: pinned behind the suburbs edge
   to edge (a clip the section's size with the picture sticky inside, so it
   can't hang past the end), and the suburbs ride over it on glass. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .ws-where { position: relative; display: block; margin-inline: calc(var(--gutter) * -1); }
  .ws-where .gd-photo { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; overflow: clip; }
  .ws-where .gd-photo img { position: sticky; top: 0; height: 100vh; height: 100lvh; }
  .ws-where > div { position: relative; z-index: 1; padding: 55svh var(--gutter) 30svh; }
  .ws-where .gd-areas__lead { display: inline-block; padding: .7rem 1rem; border-radius: 999px; background: rgba(246, 243, 238, .82); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
  .ws-where .gd-areas { display: grid; gap: .7rem; border-top: 0; }
  .ws-where .gd-areas li {
    padding: 1.1rem 1.3rem 1.2rem;
    border: 0;
    border-radius: 1.4rem;
    background: rgba(246, 243, 238, .8);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .4), 0 22px 44px -28px rgba(40, 24, 8, .45);
  }
  .ws-where .gd-areas b { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* Small businesses, wide: the collage is the background of "You're not
   alone" straight after, so the hero doesn't show it as well. */
.sb-hero-photo { display: none; }
.gd-hero--wide { padding-bottom: clamp(6rem, 10vw, 8rem); }
/* Wide: on the page's linen, the reason being read lifts into the
   footer's sand, a card with a soft shadow; the others sit as quiet
   outlines on the linen. Ink text throughout, so nothing changes colour
   but the card. */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .px-ledger.is-live .px-ledger__item { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }
  .px-ledger.is-live .px-ledger__item.is-on {
    background: var(--sand);
    box-shadow: 0 0 0 1px rgba(20, 17, 13, .04), 0 40px 70px -40px rgba(40, 24, 8, .5);
  }
  .px-ledger__fig small { transition: color .6s var(--ease); }
}
/* The three figures each in their own glass: paper, ember, sand. The ember
   pane is the deeper ember (#a2441b) at 90%, so its white text holds at
   least 4.5:1 even over the brightest part of the picture behind it. */
.sb-stats .gd-stat:nth-child(1) { background: rgba(255, 253, 249, .8); }
.sb-stats .gd-stat:nth-child(2) { background: linear-gradient(150deg, rgba(162, 68, 27, .9), rgba(143, 55, 24, .92)); box-shadow: inset 0 1px 0 rgba(255, 214, 186, .45), 0 30px 60px -34px rgba(90, 28, 6, .6); }
.sb-stats .gd-stat:nth-child(2) b, .sb-stats .gd-stat:nth-child(2) p { color: #fff; }
.sb-stats .gd-stat:nth-child(2) b small { color: var(--paper); }
.sb-stats .gd-stat:nth-child(3) { background: rgba(233, 227, 216, .86); }

/* Western Sydney, wide: "Where we work, pinned". The section's own column
   is the grid: the photograph on the left (7 parts), the heading block and
   the suburbs sharing the right (5 parts), the suburbs starting under the
   heading (--wh, its measured height, polish.js). The photograph and the
   heading both pin at the same line, T, and the suburbs scroll up under
   the heading (on linen, with PIN CLIP cutting them at its foot) and are
   gone.

   Leaving together: a sticky box is let go when its container's end
   reaches the foot of its margin box. The container (.gd-in) ends exactly
   at the last suburb's foot (no padding under the list). The photograph is
   H tall, so it goes when that foot meets its own; the heading is given a
   margin under it that makes its margin box H tall too, so it goes at the
   same moment. Both feet line up, then everything moves on as one. */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  #where { --wt: calc(var(--nav-h, 56px) + 1.5rem); --whh: calc(100svh - var(--nav-h, 56px) - 3rem); }
  #where .gd-in {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
    max-width: calc(86rem + 2 * var(--gutter));
  }
  #where .ws-where { display: contents; }
  #where .ws-head {
    grid-area: 1 / 2;
    position: sticky;
    top: var(--wt);
    z-index: 2;
    margin-bottom: max(0px, calc(var(--whh) - var(--wh, 20rem)));
    padding-bottom: 1.6rem;
    background: var(--linen);
  }
  #where .ws-head::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.6rem; background: linear-gradient(var(--linen), rgba(246, 243, 238, 0)); pointer-events: none; }
  #where .ws-head .gd-p { margin-bottom: 0; }
  #where .ws-where .gd-photo {
    grid-area: 1 / 1;
    position: sticky;
    top: var(--wt);
    aspect-ratio: auto;
    height: var(--whh);
    margin: 0;
    border-radius: 2.25rem;
  }
  #where .ws-where .gd-photo img { height: 130%; margin-top: -15%; }
  #where .ws-where > div {
    grid-area: 1 / 2;
    position: relative;
    z-index: 1;
    padding: calc(var(--wh, 20rem) + 4rem) 0 0;
  }
  #where .ws-where .gd-areas { margin-bottom: 0; }
  #where .ws-where .gd-areas li { padding: 2.2rem 0 2.3rem; }
}
/* Phones: the pinned photograph runs right to the end of its section and
   darkens into the umber of "Being found locally", whose sheet rises over
   it: one picture handing over to the next section, no white gap. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  #where:has(.ws-where) { padding-bottom: 0; }
  .ws-where > div { padding-bottom: 45svh; }
  .ws-where .gd-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60svh; background: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, .55) 55%, #121212 100%); pointer-events: none; }
  #where:has(.ws-where) + .gd-sheet { margin-top: -4.5rem; box-shadow: 0 -30px 50px -20px rgba(0, 0, 0, .55); }
}

/* Search & AI, phones, the question stack, corrected:
   - The heading pins too, on the linen, with room above it, and the cards
     pin under it (--ah, its measured height, from searchai.js).
   - The last card needs real room after it, as content after it in the
     list (see below), not as its own margin. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .sa-ask { padding-top: clamp(5.5rem, 16vw, 7rem); }
  .sa-askhead { position: sticky; top: var(--nav-h, 56px); z-index: 3; margin-inline: calc(var(--gutter) * -1); padding: 1.6rem var(--gutter) 1.1rem; background: var(--linen); }
  .sa-askhead::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1.4rem; background: linear-gradient(var(--linen), rgba(246, 243, 238, 0)); pointer-events: none; }
  .sa-askhead .gd-h { margin-bottom: 0; font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .sa-ask .gd-qs li { top: calc(var(--nav-h, 56px) + var(--ah, 8rem) + 1.2rem + var(--i, 0) * .7rem); }
  /* The room has to come AFTER the last card, inside the list: a sticky
     element's own margin counts as part of it, so a margin on the last
     card gives it no room at all to stay pinned (that was the bug, twice).
     A spacer after it does: the last card lands on the pile and holds for
     a beat, then the whole stack moves on. Only a beat (10svh, enough for
     the tallest card behind it to stay put while 06 lands), so the line
     after the list comes up right under 06 rather than a screen below.
   - Leaving, the pile is cut off at the pinned heading's foot (searchai.js
     sets the clip), so cards that slide under the heading never show
     again above it, through the clear header. */
  .sa-ask .gd-qs li:last-child { margin-bottom: 0; }
  .sa-ask .gd-qs::after { content: ""; display: block; height: 10svh; }
  .sa-ask .gd-qs + .gd-p { margin-top: 1.25rem; }
}


/* Search & AI: the glance, take two. Not cards (the acronyms just below
   are cards, and two decks of SEO / AEO / GEO in a row read as one idea
   said twice). Editorial instead: three columns between hairlines, the
   letters set enormous in the serif's light italic as outlines, filling
   with terracotta from the foot up as they arrive (and again on hover),
   the words they stand for in mono, the question in the serif. */
.sa-glance { gap: 0; margin-top: clamp(4.5rem, 10vw, 7.5rem); border-top: 1px solid var(--ink); }
.sa-glance li,
.sa-glance li:first-child,
.sa-glance li:nth-child(2) {
  margin: 0;
  padding: 1.4rem 0 1.5rem;
  border-radius: 0;
  background: none;
  box-shadow: none;
  overflow: visible;
  transform: none;
  border-bottom: 1px solid var(--hair-2);
}
.sa-glance li::before { display: none; }
.sa-glance b {
  --fill: 0%;
  margin-top: .3rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(3rem, 13vw, 3.6rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--ink);
  background: linear-gradient(to top, var(--accent) var(--fill), transparent var(--fill));
  -webkit-background-clip: text;
  background-clip: text;
  padding-right: .08em;
  transition: --fill 1.2s var(--glide);
}
@property --fill { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.sa-glance li.is-in b { --fill: 100%; -webkit-text-stroke-color: var(--accent); }
.sa-glance span:last-child { margin-top: .8rem; padding-top: 0; border-top: 0; font-size: 1.15rem; }
@media (min-width: 760px) {
  .sa-glance li,
  .sa-glance li:first-child,
  .sa-glance li:nth-child(2) { padding: 2.2rem clamp(1.5rem, 3vw, 2.6rem) 0; border-bottom: 0; border-left: 1px solid var(--hair-2); }
  .sa-glance li:first-child { padding-left: 0; border-left: 0; }
  .sa-glance b { font-size: clamp(5.5rem, 9vw, 8.5rem); -webkit-text-stroke-width: 1.5px; }
  .sa-glance li:hover b { --fill: 100%; }
  .sa-glance li.is-in:hover b { -webkit-text-stroke-color: var(--accent-ink); }
  .sa-glance span:last-child { font-size: 1.35rem; max-width: 16em; }
}
/* Phones: one compact row each, the letters beside their question. */
@media (max-width: 759px) {
  .sa-glance li { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); column-gap: 1rem; align-items: center; }
  .sa-glance__n { display: none; }
  .sa-glance b { grid-row: span 2; margin: 0; }
  .sa-glance small { align-self: end; }
  .sa-glance span:last-child { margin-top: .25rem; align-self: start; }
}
@media (prefers-reduced-motion: reduce) { .sa-glance b { transition: none; } }

/* Search & AI, wide: after launch as cards, two rows of three, on the
   sand: the same cards a phone swipes through. */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .sa-after .sa-led { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; border-top: 0; }
  .sa-after .sa-led__row {
    display: flex;
    flex-direction: column;
    padding: 2.2rem 2rem 2.1rem;
    border-radius: 1.75rem;
    background: var(--paper);
    box-shadow: 0 0 0 1px rgba(20, 17, 13, .05), 0 30px 50px -36px rgba(40, 24, 8, .45);
    transition: transform .6s var(--glide), box-shadow .6s var(--glide);
  }
  .sa-after .sa-led__row::after { display: none; }
  .sa-after .sa-led__n span { font-size: 3.4rem; }
  .sa-after .sa-led__body { margin-top: 1.2rem; }
  .sa-after .sa-led__body h3 { font-size: 1.55rem; }
  .sa-after .sa-led__pro { margin: auto 0 0; padding-top: 1.2rem; border-top: 1px solid var(--hair-2); font-size: .95rem; }
  .sa-after .sa-led__body + .sa-led__pro { margin-top: 1.5rem; }
  .sa-after .sa-led { align-items: stretch; }
}
@media (hover: hover) and (pointer: fine) {
  .sa-after .sa-led__row:hover { box-shadow: 0 0 0 1px rgba(20, 17, 13, .06), 0 40px 60px -36px rgba(40, 24, 8, .55); }
}


/* Search & AI, wide: the after-launch cards. No numerals: the title is
   the card's heading, larger and in terracotta (4.6:1 on white, large
   type). The cards are dealt out of the first one on the scroll
   (searchai.js, THE DEAL), so the rows are one height (each card hides
   exactly under the one it comes out of) and 01 is on top, the rest in
   order beneath it. On hover a card simply lifts out towards you; it is on
   the individual translate / scale properties, !important over the
   inline "none" GSAP writes for them, so it never fights the deal's
   transform. */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .sa-after .sa-led { grid-auto-rows: 1fr; }
  .sa-after .sa-led__n { display: none; }
  .sa-after .sa-led__body { margin-top: 0; }
  .sa-after .sa-led__body h3 { font-size: clamp(1.9rem, 2.5vw, 2.35rem); line-height: 1.1; letter-spacing: -.022em; color: var(--accent); text-wrap: balance; }
  .sa-after .sa-led__body p { margin-top: .9rem; }
  .sa-after .sa-led__row { position: relative; z-index: 1; transition: translate .5s var(--glide), scale .5s var(--glide), box-shadow .5s var(--glide); }
  .sa-after .sa-led__row:nth-child(1) { z-index: 6; }
  .sa-after .sa-led__row:nth-child(2) { z-index: 5; }
  .sa-after .sa-led__row:nth-child(3) { z-index: 4; }
  .sa-after .sa-led__row:nth-child(4) { z-index: 3; }
  .sa-after .sa-led__row:nth-child(5) { z-index: 2; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .sa-after .sa-led__row:hover {
    z-index: 7;
    translate: 0 -10px !important;
    scale: 1.025 !important;
    box-shadow: 0 0 0 1px rgba(20, 17, 13, .05), 0 50px 70px -38px rgba(40, 24, 8, .55);
  }
}

/* Search & AI, wide: the three acronyms in one even row, tops and feet
   aligned (the middle card used to drop 3.5rem, which read as a mistake
   rather than a rhythm). */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  #what .gd-letters.gd-deck { align-items: stretch; }
  #what .gd-letter:nth-child(2) { margin-top: 0; }
}

/* In the pricing table the row's name links to the Search & AI guide,
   underlined in terracotta. */
.pr-rowlink { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }

/* ------------------------------------------------------------ COST GUIDE, phones: room to breathe
   Section by section; the important flags beat the inline paddings the
   desktop layout uses. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  [data-page="how-much-does-a-website-cost"] #short-answer { padding-top: 4.5rem !important; padding-bottom: 9rem; }
  [data-page="how-much-does-a-website-cost"] #options { padding-top: 7rem; }
  [data-page="how-much-does-a-website-cost"] #drivers { padding-top: 6rem; padding-bottom: 9rem; }
  [data-page="how-much-does-a-website-cost"] #ours { padding-top: 7rem; padding-bottom: 7rem; }
  [data-page="how-much-does-a-website-cost"] #honest { padding-top: 1.5rem !important; padding-bottom: 7rem; }
  /* The same spacing on the other guides: the first section after the
     hero sits 4.5rem down, and a section after a dark sheet 6rem. */
  [data-page="search-and-ai"] #what { padding-top: 4.5rem !important; }
  [data-page="web-design-western-sydney"] #based { padding-top: 4.5rem !important; }
  [data-page="web-design-sydney-metro"] #ask { padding-top: 6rem !important; }
}