/* ==========================================================================
   Dactyl Websites — the guide pages (Search & AI, Western Sydney, Sydney
   Metro, Small Businesses).

   These use the home page's own materials and none of their own:

     linen    the page
     sand     a card cut out of it
     umber    what "dark" means here: the same lamp-lit near-black as the
              price stage. No blue anywhere but a pressed button.
     ember    the terracotta card, as on "Building for the locals"; used for
              one or two things per page, never as a wallpaper
     line     an outlined card, for a quieter beat between two solid ones

   and the home page's way of moving: a section is an object that arrives,
   not text that fades in. Cards roll in from the side and settle at their
   tilt, dark sections rise over the one before them as a sheet, stacks of
   cards pile up and the one underneath steps back, long lists swipe
   sideways on a phone, and the numbers count up. Every one of those is
   transform or opacity, runs from guides.js, and is skipped for anyone who
   has asked for reduced motion; without JS the page is simply its resting
   layout.

   Built phone-first. Each rule is written for 375px and widened at 820px.

   Contrast, measured: ink / ink-2 / ink-3 on linen and sand pass 4.5:1;
   ivory and on-navy white on the umber lamp pass 6.4:1; terracotta text is
   only ever the -ink value on light or the -lit-ink value on umber; text on
   the ember card is solid paper on a gradient that never goes lighter than
   #b9501f (4.96:1), a step deeper than the home page's tab so that small
   text clears 4.5:1 everywhere on it.
   ========================================================================== */

.gd {
  --dark-bg: radial-gradient(120% 70% at 55% 16%, var(--umber-lamp) 0%, var(--umber) 55%, var(--umber-deep) 100%);
  --ember-bg: linear-gradient(150deg, #b9501f 0%, #a2441b 52%, #8f3718 100%);
  --lift: 0 2px 6px rgba(40, 24, 8, .08), 0 30px 50px -30px rgba(40, 24, 8, .42);
  padding-top: calc(var(--nav-h, 56px) + 2.5rem);
  /* Cards run off the sides while they roll in; this stops the page
     scrolling sideways to follow them. Clip, not hidden: it makes no
     scroll box, so the sticky stacks keep working. */
  overflow-x: clip;
}
/* The page width, the same as Features (desk.css --edge): 92rem of content. */
.gd-in { width: 100%; max-width: calc(92rem + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* One rhythm for every section on every guide page: at least 4.5rem a
   side on a phone (about 130px between two sections' words), 7.5rem on a
   wide screen. Erring generous: nothing should feel pressed against the
   next thing. */
/* The foot is deliberately deeper than the head: the room after a section
   is what lets it finish before the next one starts, and a section that
   ends tight against the next always reads as cramped. This is the
   permanent rule, so every section on these pages gets it by default. */
.gd-sec { padding-block: clamp(4.5rem, 12vw, 7.5rem) clamp(6.5rem, 17vw, 11.5rem); }

/* ------------------------------------------------------------ Surfaces
   One set of variables per material. Components read them, so a card is the
   same card on sand, umber or ember and only the material changes. */
.s-sand  { --bg: var(--sand);       --t1: var(--ink);   --t2: var(--ink-2);     --t3: var(--ink-3);     --ac: var(--accent);     --acs: var(--accent-ink);     --rule: var(--hair-2); }
.s-line  { --bg: transparent;       --t1: var(--ink);   --t2: var(--ink-2);     --t3: var(--ink-3);     --ac: var(--accent);     --acs: var(--accent-ink);     --rule: var(--hair-2); }
.s-dark  { --bg: var(--dark-bg);    --t1: var(--ivory); --t2: var(--on-navy);   --t3: var(--on-navy-2); --ac: var(--accent-lit); --acs: var(--accent-lit-ink); --rule: rgba(255, 255, 255, .16); }
.s-ember { --bg: var(--ember-bg);   --t1: var(--paper); --t2: var(--paper);     --t3: var(--paper);     --ac: var(--paper);      --acs: var(--paper);          --rule: rgba(255, 255, 255, .34); }

/* Full-bleed bands take the same variables. */
.gd-sand { --bg: var(--sand);    --t1: var(--ink);   --t2: var(--ink-2);   --t3: var(--ink-3);     --ac: var(--accent);     --acs: var(--accent-ink);     --rule: var(--hair-2); background: var(--bg); }
.gd-dark { --bg: var(--dark-bg); --t1: var(--ivory); --t2: var(--on-navy); --t3: var(--on-navy-2); --ac: var(--accent-lit); --acs: var(--accent-lit-ink); --rule: rgba(255, 255, 255, .16); background: var(--bg); color: var(--t2); }

/* A dark band rises over the section before it as a sheet, the way the
   price stage arrives on the home page. Rounded at BOTH ends, always: a
   sheet that is round on top and square at the foot reads as a band that
   was cut off. Every dark sheet on the site is this shape (contact's form
   sheet and privacy's promises match it). */
.gd-sheet {
  position: relative;
  z-index: 1;
  margin-top: -2.75rem;
  padding-top: calc(clamp(4.5rem, 12vw, 7.5rem) + 1rem);
  border-radius: 2.25rem;
  box-shadow: 0 -22px 40px -28px rgba(40, 24, 8, .5), 0 40px 80px -50px rgba(40, 24, 8, .55);
}

/* ------------------------------------------------------------ Type */
.gd-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(--t3, var(--ink-3));
}

.gd-title {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.2rem, 15vw, 9rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--ink);
}
.gd-title em:not(.dot) { font-style: italic; color: var(--accent); padding-right: .04em; }
.gd-title em.dot { font-style: normal; color: inherit; }

.gd-lead {
  margin: 1.6rem 0 0;
  max-width: 30ch;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}

.gd-h {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.2rem, 8vw, 4rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--t1, var(--ink));
  text-wrap: balance;
}
.gd-h em:not(.dot) { font-style: italic; color: var(--ac, var(--accent)); }
.gd-h em.dot { font-style: normal; color: inherit; }

.gd-p {
  margin: 1.3rem 0 0;
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.72;
  color: var(--t2, var(--ink-2));
  text-wrap: pretty;
}
.gd-p strong { color: var(--t1, var(--ink)); font-weight: 600; }
.gd-p a, .gd-qs a, .gd-row p a, .gd-pane p a, .gd-slab p a, .gd-letter p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ac, var(--accent));
  text-decoration-thickness: 1.5px;
  text-underline-offset: .2em;
}
.gd-p a:hover, .gd-qs a:hover, .gd-pane p a:hover { text-decoration-thickness: 2.5px; }
/* The site sets inline links in terracotta text (site.css: main p > a). On a
   dark or ember surface that has to be that surface's own link colour, which
   the surface variables carry. */
main.gd :is(p, li) > a:not(.btn) { color: var(--acs, var(--accent-ink)); }
.gd a:focus-visible { outline: 2px solid var(--ac, var(--accent)); outline-offset: 3px; border-radius: 2px; }
.s-ember a:focus-visible { outline-color: var(--paper); }

/* ------------------------------------------------------------ Hero */
.gd-hero { padding-bottom: clamp(5.5rem, 13vw, 7rem); }
/* A hero straight into a dark sheet: the sheet rises 2.75rem over the
   hero's foot, so the hero gives that back and more. */
.gd-hero:has(+ .gd-sheet) { padding-bottom: clamp(8rem, 18vw, 11rem); }
/* Phones: the inner pages' titles start well clear of the header. */
@media (max-width: 819px), (max-device-width: 599px), (max-device-height: 599px) {
  .gd { padding-top: calc(var(--nav-h, 56px) + 4.75rem); }
}

.gd-glance {
  display: grid;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
.gd-glance li { display: flex; align-items: baseline; gap: 1.2rem; padding: 1.15rem 0; border-bottom: 1px solid var(--hair-2); }
.gd-glance b { min-width: 3.4em; font-family: var(--display); font-size: 1.9rem; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.gd-glance span { font-size: 1rem; line-height: 1.4; color: var(--ink-3); }
@media (min-width: 760px) {
  .gd-glance { grid-template-columns: repeat(3, 1fr); }
  .gd-glance li { flex-direction: column; gap: .35rem; padding: 1.5rem 1.5rem 0; border-bottom: 0; border-left: 1px solid var(--hair-2); }
  .gd-glance li:first-child { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------ Swipe decks
   A phone swipes: the row is one scroll-snap strip with the next card
   peeking in from the edge and a thin bar showing how far along you are.
   From 820px it is an ordinary grid. */
.gd-deckwrap { margin-top: clamp(2rem, 5vw, 3.5rem); }
.gd-deck {
  display: flex;
  gap: .9rem;
  margin-inline: calc(-1 * var(--gutter));
  padding: 0 var(--gutter) 1.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gd-deck::-webkit-scrollbar { display: none; }
.gd-deck > * { flex: 0 0 min(82vw, 23rem); scroll-snap-align: start; }
.gd-deckbar { height: 2px; margin-top: .2rem; background: var(--hair-2); border-radius: 2px; overflow: hidden; }
.gd-deckbar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, .35)); border-radius: 2px; }
.gd-swipe { margin: .9rem 0 0; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-deck { display: grid; margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .gd-deck > * { flex: none; }
  .gd-deckbar, .gd-swipe { display: none; }
}

/* ------------------------------------------------------------ Letters (cards in a deck) */
.gd-letter {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.6rem 2.2rem;
  border-radius: var(--r-xl);
  background: var(--bg);
  box-shadow: var(--lift);
  min-height: 24rem;
}
.s-line.gd-letter, .s-line.gd-tile, .s-line.gd-card, .s-line.gd-step { box-shadow: inset 0 0 0 1px var(--ink); }
.gd-letter__abbr { font-family: var(--display); font-size: clamp(3.8rem, 15vw, 6rem); font-style: italic; line-height: 1; letter-spacing: -.035em; color: var(--ac); }
.gd-letter h3 { margin: 1.4rem 0 0; font-family: var(--display); font-size: 1.55rem; font-weight: 400; line-height: 1.2; letter-spacing: -.015em; color: var(--t1); }
.gd-letter p { margin: .7rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--t2); }
.gd-letter small { margin-top: auto; padding-top: 1.6rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-letters.gd-deck { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
  .gd-letter { min-height: 26rem; padding: 2.4rem 2rem 2.6rem; }
  .gd-letter:nth-child(2) { margin-top: 3.5rem; }
}
.gd-after-note { margin-top: 1.4rem; }

/* ------------------------------------------------------------ The statement (umber) */
.gd-quote {
  max-width: 17em;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 7.4vw, 4.6rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.028em;
  color: var(--ivory);
  text-wrap: balance;
}
.gd-quote em { font-style: italic; color: var(--accent-lit); }
.gd-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2.4rem 0 0; padding: 0; list-style: none; }
.gd-chips li { padding: .55rem 1rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .08em; color: var(--on-navy); }
.gd-src { margin: 2.2rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--on-navy); max-width: 36em; }
.gd-src a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--accent-lit); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }

/* ------------------------------------------------------------ Spec sheet */
.gd-spec { display: grid; gap: 2.4rem; }
.gd-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.gd-row { position: relative; display: grid; grid-template-columns: 2.6rem 1fr; padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--hair-2); }
.gd-row__n { padding-top: .5rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .12em; color: var(--accent-ink); }
.gd-row h3 { margin: 0; font-family: var(--display); font-size: 1.6rem; font-weight: 400; line-height: 1.15; letter-spacing: -.015em; color: var(--ink); }
.gd-row p { margin: .55rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--ink-2); max-width: 34em; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-spec { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .gd-spec__head { position: sticky; top: calc(var(--nav-h, 56px) + 2.5rem); align-self: start; }
}

/* Ink rules that draw themselves as each row arrives. */
@media (prefers-reduced-motion: no-preference) {
  .js .gd-row::after, .js .gd-qs li::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s var(--ease);
  }
  .js .gd-row.is-in::after, .js .gd-qs li.is-in::after { transform: scaleX(1); }
}

/* ------------------------------------------------------------ The slab
   A card on a tilt, rolling in from the side as on the home page's
   "Building for the locals". */
.gd-slab {
  position: relative;
  max-width: 62rem;
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--r-xl);
  background: var(--bg);
  color: var(--t2);
  box-shadow: var(--lift);
  transform: rotate(var(--tilt, 0deg));
  will-change: transform;
}
.gd-slab.s-ember { box-shadow: inset 0 1px 0 rgba(255, 214, 186, .4), 0 2px 6px rgba(110, 36, 8, .14), 0 34px 60px -34px rgba(110, 36, 8, .5); }
.gd-slab .gd-h .dot { color: inherit; }

.gd-cadence { display: grid; margin-top: clamp(1.6rem, 4vw, 2.6rem); border-top: 1px solid var(--rule); }
.gd-cad { display: grid; gap: .45rem; padding: 1.6rem 0 1.7rem; border-bottom: 1px solid var(--rule); }
.gd-cad__when { font-family: var(--display); font-size: clamp(2.4rem, 10vw, 3.9rem); line-height: 1; letter-spacing: -.035em; color: var(--t1); }
.gd-cad__when em { font-style: italic; }
.gd-cad__plan { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.gd-cad p { margin: .3rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--t2); max-width: 26em; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-cadence { grid-template-columns: repeat(3, 1fr); }
  .gd-cad { padding: 1.8rem 1.8rem 0; border-bottom: 0; border-left: 1px solid var(--rule); }
  .gd-cad:first-child { padding-left: 0; border-left: 0; }
}

/* ------------------------------------------------------------ Questions */
.gd-qs { counter-reset: q; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.gd-qs li {
  position: relative;
  counter-increment: q;
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  padding: 1.7rem 0 1.8rem;
  border-bottom: 1px solid var(--hair-2);
  font-family: var(--display);
  font-size: clamp(1.45rem, 5vw, 2.4rem);
  line-height: 1.18;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: pretty;
}
.gd-qs li::before { content: counter(q, decimal-leading-zero); padding-top: .75em; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .12em; color: var(--accent-ink); }
.gd-qs li em { font-style: italic; color: var(--accent); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) { .gd-qs li { grid-template-columns: 5rem 1fr; } }

/* ------------------------------------------------------------ Western Sydney */
.gd-split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) { .gd-split { grid-template-columns: 1.15fr .85fr; gap: 4rem; } }

.gd-map { margin: 0; padding: 1.2rem 1rem 1.4rem; border-radius: var(--r-xl); background: var(--dark-bg); color: var(--paper); box-shadow: var(--lift); }
.gd-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.gd-map .ln { stroke: rgba(255, 255, 255, .26); stroke-width: 1; stroke-dasharray: 3 5; fill: none; }
.gd-map .nd { fill: var(--ivory); }
.gd-map .hq { fill: var(--accent-lit); }
.gd-map .pulse { fill: none; stroke: var(--accent-lit); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: gd-pulse 3.2s var(--ease) infinite; }
.gd-map text { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; fill: var(--on-navy); }
.gd-map text.hqt { fill: var(--ivory); font-size: 13.5px; }
.gd-map figcaption { margin: .8rem .4rem 0; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-2); }
/* The suburbs light up one after another, once, as the page opens. */
@media (prefers-reduced-motion: no-preference) {
  .js .gd-map .ln, .js .gd-map .nd, .js .gd-map text:not(.hqt) { animation: gd-fade .9s var(--ease) both; animation-delay: calc(.35s + var(--n, 0) * .18s); }
}
@keyframes gd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gd-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gd-map .pulse { animation: none; opacity: .35; } }

.gd-statement {
  max-width: 16em;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2rem, 7vw, 4.2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  color: var(--t1, var(--ink));
  text-wrap: balance;
}
.gd-statement em { font-style: italic; color: var(--ac, var(--accent)); }
.gd-cols { display: grid; gap: 1.6rem; margin-top: 2.4rem; }
@media (min-width: 760px) { .gd-cols { grid-template-columns: 1fr 1fr; gap: 3rem; } .gd-cols .gd-p { margin-top: 0; } }

/* The areas: a ruled index. The one nearest the middle of the screen warms
   to terracotta and steps forward; the rest stay at full strength. */
.gd-areas { margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.gd-areas li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1.5rem; padding: 1.3rem 0 1.4rem; border-bottom: 1px solid var(--hair-2); }
.gd-areas b { font-family: var(--display); font-size: clamp(2.1rem, 9vw, 4rem); font-weight: 400; line-height: 1.05; letter-spacing: -.03em; color: var(--ink); transition: color .35s var(--ease), transform .5s var(--ease); }
.gd-areas span { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.gd-areas li.is-more b { font-style: italic; color: var(--accent-ink); }
.gd-areas li.is-focus b { color: var(--accent-ink); transform: translateX(.6rem); }
@media (hover: hover) { .gd-areas li:hover b { color: var(--accent-ink); transform: translateX(1rem); } }

/* ------------------------------------------------------------ Stacks
   Cards that pile up as you scroll: each sticks a little lower than the one
   before, and the one underneath steps back (guides.js). Pure CSS without
   the step back. */
.gd-stack { display: grid; gap: 1.1rem; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.gd-pane {
  position: sticky;
  top: calc(var(--nav-h, 56px) + .8rem + var(--i, 0) * .85rem);
  display: flex;
  flex-direction: column;
  min-height: 21rem;
  padding: 2rem 1.6rem 2.2rem;
  border-radius: var(--r-xl);
  background: var(--bg);
  color: var(--t2);
  box-shadow: var(--lift);
  transform-origin: 50% 0;
}
/* Room to read each card while it is pinned, before the next one covers it.
   The LAST card's room must be content after it in the stack, never its own
   margin: a sticky element's margin is part of it, so a margin on the last
   card leaves it no room to stay pinned and it scrolls away instead of
   landing on the pile. Hence the spacer. (Bit the Search & AI stack twice.) */
.gd-pane { margin-bottom: max(2.5rem, 22svh); }
.gd-pane:last-child { margin-bottom: 0; }
.gd-stack::after { content: ""; display: block; height: max(2.5rem, 30svh); }
.gd-pane.s-line { box-shadow: inset 0 0 0 1px var(--ink), var(--lift); background: var(--linen); }
.gd-pane__n { font-family: var(--display); font-size: clamp(4.6rem, 22vw, 8.5rem); line-height: .92; letter-spacing: -.045em; color: var(--t1); }
.gd-pane__n em { font-style: italic; color: var(--ac); }
.gd-pane__n small { font-size: .42em; letter-spacing: 0; }
.gd-pane__tag { margin: 0 0 1rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.gd-pane h3 { margin: 1.2rem 0 0; font-family: var(--display); font-size: 1.65rem; font-weight: 400; line-height: 1.15; letter-spacing: -.02em; color: var(--t1); }
.gd-pane h3 span { display: block; margin-top: .45rem; font-family: var(--mono); font-size: max(12px, .72rem); font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
.gd-pane p { margin: .8rem 0 0; font-size: 1.0625rem; line-height: 1.7; color: var(--t2); max-width: 32em; }
.gd-pane__n + div { margin-top: 1.6rem; }
.gd-pane__tag + h3 { margin-top: 0; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-stack { gap: 1.6rem; }
  .gd-pane { min-height: 24rem; padding: 3rem 3.4rem; display: grid; grid-template-columns: 5fr 7fr; gap: 0 4rem; align-content: center; align-items: center; }
  .gd-pane > div { grid-column: 2; }
  .gd-pane > .gd-pane__n { grid-column: 1; }
  .gd-pane__n + div { margin-top: 0; }
  .gd-pane.gd-pane--solo { display: flex; justify-content: center; }
  .gd-pane--solo > div { grid-column: auto; }
}

/* ------------------------------------------------------------ Region tiles */
.gd-bento { gap: 1rem; }
.gd-tile { display: flex; flex-direction: column; gap: .7rem; min-height: 17rem; padding: 1.9rem 1.5rem 2.1rem; border-radius: var(--r-xl); background: var(--bg); box-shadow: var(--lift); }
.gd-tile h3 { margin: 0; font-family: var(--display); font-size: clamp(1.9rem, 6vw, 2.6rem); font-weight: 400; line-height: 1.08; letter-spacing: -.022em; color: var(--t1); }
.gd-tile p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--t2); max-width: 30em; }
.gd-tile small { margin-top: auto; padding-top: 1rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .14em; text-transform: uppercase; color: var(--t3); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-bento.gd-deck { grid-template-columns: repeat(6, 1fr); }
  .gd-tile { grid-column: span 3; min-height: 15rem; }
  .gd-tile--wide { grid-column: span 4; }
  .gd-tile--narrow { grid-column: span 2; }
}
.gd-aside { margin-top: 1.6rem; }

/* ------------------------------------------------------------ Steps (tilted cards) */
.gd-steps { counter-reset: s; display: grid; gap: 1.1rem; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.gd-step { counter-increment: s; padding: 1.7rem 1.5rem 2rem; border-radius: var(--r-lg); background: var(--bg); box-shadow: var(--lift); transform: rotate(var(--tilt, 0deg)); will-change: transform; }
.gd-step::before { content: counter(s); display: block; font-family: var(--display); font-size: 3.6rem; font-style: italic; line-height: 1; letter-spacing: -.03em; color: var(--ac); }
.gd-step h3 { margin: 1rem 0 0; font-family: var(--display); font-size: 1.6rem; font-weight: 400; line-height: 1.15; letter-spacing: -.015em; color: var(--t1); }
.gd-step p { margin: .6rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--t2); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-steps { grid-template-columns: repeat(4, 1fr); align-items: start; gap: 1.2rem; }
  .gd-step:nth-child(even) { margin-top: 2.5rem; }
}

/* ------------------------------------------------------------ Big figures on umber */
.gd-stats { display: grid; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .3); }
.gd-stat { padding: 1.9rem 0 2.1rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.gd-stat b { display: block; font-family: var(--display); font-size: clamp(4.4rem, 20vw, 7.5rem); font-weight: 400; line-height: .95; letter-spacing: -.04em; color: var(--ivory); }
.gd-stat b small { margin-left: .04em; font-size: .45em; letter-spacing: 0; color: var(--accent-lit); }
.gd-stat p { margin: .9rem 0 0; max-width: 20em; font-size: 1.0625rem; line-height: 1.6; color: var(--on-navy); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-stats { grid-template-columns: repeat(3, 1fr); }
  .gd-stat { padding: 2rem 2rem 0; border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, .14); }
  .gd-stat:first-child { padding-left: 0; border-left: 0; }
}
.gd-fine { margin: 2rem 0 0; max-width: 40em; font-size: .9375rem; line-height: 1.65; color: var(--on-navy-2); }
.gd-fine a { color: var(--ivory); text-decoration: underline; text-decoration-color: var(--accent-lit); text-underline-offset: .2em; }

/* ------------------------------------------------------------ Card wall (business types) */
.gd-wall { margin-top: clamp(2rem, 5vw, 3.5rem); column-gap: 1rem; }
.gd-card { break-inside: avoid; margin: 0 0 1rem; padding: 1.8rem 1.5rem 2rem; border-radius: var(--r-xl); background: var(--bg); box-shadow: var(--lift); transform: rotate(var(--tilt, 0deg)); will-change: transform; }
.gd-card h3 { margin: 0; font-family: var(--display); font-size: 1.7rem; font-weight: 400; line-height: 1.12; letter-spacing: -.02em; color: var(--t1); }
.gd-card p { margin: .7rem 0 0; font-size: 1rem; line-height: 1.65; color: var(--t2); }
.gd-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.gd-tags li { padding: .45rem .85rem; border-radius: 999px; background: var(--linen); font-size: .9375rem; line-height: 1.3; color: var(--ink-2); }
.s-dark .gd-tags li { background: rgba(255, 255, 255, .1); color: var(--ivory); }
.s-ember .gd-tags li { background: rgba(255, 255, 255, .18); color: var(--paper); }
.s-line .gd-tags li { background: var(--sand); }

.gd-note { margin: 2.2rem 0 0; padding-left: 1.1rem; border-left: 2px solid var(--accent); max-width: 40em; font-size: .9375rem; line-height: 1.65; color: var(--ink-3); }
.gd-note a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: .2em; }

/* A closing card. */
.gd-links { display: flex; flex-wrap: wrap; gap: .4rem 2.4rem; margin-top: 1.8rem; }

/* ------------------------------------------------------------ The price, as a figure */
.gd-fig { display: grid; gap: 1.8rem; align-items: end; }
.gd-fig__n { margin: 0; font-family: var(--display); font-size: clamp(5rem, 26vw, 11rem); font-weight: 400; line-height: .92; letter-spacing: -.045em; color: var(--ink); }
.gd-fig__n small { font-size: .32em; vertical-align: top; position: relative; top: .3em; margin-right: .05em; letter-spacing: 0; color: var(--accent); }
.gd-fig__t { margin: 0; max-width: 28em; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) { .gd-fig { grid-template-columns: auto 1fr; gap: 4.5rem; } }
.gd-fig .pg-next { margin-top: 1.4rem; }

/* ------------------------------------------------------------ Photographs
   Each page opens with a picture that belongs to it, in the same warm light
   as the home page's: custom frames, not stock. The picture sits in a frame
   that overflows, and the image inside drifts a little against it as the
   page moves (guides.js), so a still photograph still has some life. */
.gd-photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--sand); box-shadow: var(--lift); }
.gd-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.gd-photo--tall { aspect-ratio: 4 / 5; }
.gd-photo--sq { aspect-ratio: 1 / 1; }
.gd-photo figcaption {
  position: absolute;
  left: .9rem; bottom: .9rem;
  max-width: calc(100% - 1.8rem);
  padding: .5rem .85rem;
  border-radius: 999px;
  background: rgba(18, 18, 18, .8);
  font-family: var(--mono);
  font-size: max(12px, .72rem);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ivory);
}
.gd-photo--tilt { transform: rotate(var(--tilt, 0deg)); will-change: transform; }

/* A hero with a photograph: on a phone the picture follows the lead, on a
   wide screen it sits beside it. */
.gd-herogrid { display: grid; gap: 2.4rem; }
.gd-herogrid .gd-photo { margin-top: .4rem; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-herogrid { grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center; }
  .gd-herogrid .gd-photo { margin-top: 0; }
}
.gd-hero--wide .gd-photo { margin-top: clamp(2rem, 5vw, 3.5rem); }
.gd-hero--wide .gd-photo img { aspect-ratio: 941 / 1670; object-fit: cover; }
/* Wide: the photograph steps out past the text column to nearly the full
   width of the screen, at its own proportions so no one is cut off, and fills the
   opening rather than sitting in it as a strip. */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-hero--wide .gd-photo {
    --w: min(100vw - 2.5rem, 110rem);
    width: var(--w);
    left: 50%;
    margin-left: calc(var(--w) / -2);
  }
  .gd-hero--wide .gd-photo img { aspect-ratio: 1600 / 679; }
}

/* A picture beside a block of text. */
.gd-with { display: grid; gap: 2rem; margin-top: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-with { grid-template-columns: 5fr 7fr; gap: 5rem; }
  .gd-with--rev { grid-template-columns: 7fr 5fr; }
  .gd-with .gd-photo { position: sticky; top: calc(var(--nav-h, 56px) + 2rem); }
}
.gd-with > .gd-areas, .gd-with > div > .gd-areas { margin-top: 0; }

/* A card that opens with a photograph. */
.gd-card__img { display: block; max-width: none; width: calc(100% + 3rem); height: 11.5rem; margin: -1.8rem -1.5rem 1.5rem; object-fit: cover; border-radius: var(--r-xl) var(--r-xl) 0 0; }

/* ------------------------------------------------------------ Questions & answers (FAQ) */
.gd-qa { margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--t1, var(--ink)); }
.gd-qa li { display: grid; gap: .9rem; padding: 1.8rem 0 2rem; border-bottom: 1px solid var(--rule, var(--hair-2)); }
.gd-qa h3 { margin: 0; font-family: var(--display); font-size: clamp(1.5rem, 5.4vw, 2.15rem); font-weight: 400; line-height: 1.15; letter-spacing: -.02em; color: var(--t1, var(--ink)); text-wrap: balance; }
.gd-qa p { margin: 0; max-width: 36em; font-size: 1.0625rem; line-height: 1.72; color: var(--t2, var(--ink-2)); }
.gd-qa a { color: inherit; text-decoration: underline; text-decoration-color: var(--ac, var(--accent)); text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) { .gd-qa li { grid-template-columns: 5fr 7fr; gap: 3.5rem; } }
.gd-slab .gd-qa { border-top-color: var(--rule); }

/* Topic links under the FAQ heading: real tap targets, not a row of specks. */
.gd-topics { display: flex; flex-wrap: wrap; gap: .6rem; margin: clamp(2rem, 5vw, 3rem) 0 0; padding: 0; list-style: none; }
.gd-topics a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--ink); font-size: .9375rem; color: var(--ink); text-decoration: none; transition: background-color .3s var(--ease), color .3s var(--ease); }
.gd-topics a:hover { background: var(--ink); color: var(--paper); }
@media (hover: none) { .gd-topics a:hover { background: transparent; color: var(--ink); } }
.gd-photo--captop figcaption { top: .9rem; bottom: auto; }

/* ------------------------------------------------------------ After launch
   A calm timeline, not a slab: a hairline track down the left with one
   terracotta dot per beat, the cadence set large in the serif, the plan it
   belongs to as a small outlined tag, then one line of what happens. */
.gd-beats { position: relative; margin: 0; padding: 0 0 0 1.9rem; list-style: none; }
.gd-beats::before { content: ""; position: absolute; left: .32rem; top: 2.2rem; bottom: 2.4rem; width: 1px; background: var(--hair-2); }
.gd-beat { position: relative; padding: 1.6rem 0 1.8rem; border-bottom: 1px solid var(--hair-2); }
.gd-beat:first-child { border-top: 1px solid var(--ink); }
.gd-beat::before {
  content: "";
  position: absolute;
  left: -1.9rem; top: 2.45rem;
  width: .65rem; height: .65rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 5px var(--linen);
}
.gd-beat__when { margin: 0; font-family: var(--display); font-size: clamp(2.3rem, 9.5vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; color: var(--ink); }
.gd-beat__when em { font-style: italic; color: var(--accent); }
.gd-beat__plan { display: inline-block; margin: 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); }
.gd-beat__t { margin: .9rem 0 0; max-width: 28em; font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2); }
.gd-spec .gd-note { margin-top: 2rem; }

/* The questions: the number and the sentence are the only two cells. */
.gd-q { display: block; }

/* ------------------------------------------------------------ Business types: swipe + search
   On a phone the cards are one swipe strip, as the letters and the regions
   are, and a search box above it narrows them. From 820px the strip is the
   ordinary masonry wall again. */
.gd-trades .gd-wall { margin-top: 1.4rem; }
.gd-trades .gd-card { margin: 0; }
.gd-trades .gd-deck { align-items: stretch; }
.gd-trades .gd-card h3 { text-wrap: balance; }
.gd-trades .gd-tags li { transition: background-color .3s var(--ease), color .3s var(--ease); }
.gd-tags li.is-hit { background: var(--ac); color: var(--paper); }
.s-ember .gd-tags li.is-hit { background: var(--paper); color: #8f3718; }
.s-dark .gd-tags li.is-hit { background: var(--accent-lit); color: #14110d; }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-trades .gd-deck.gd-wall { display: block; columns: 2; column-gap: 1rem; padding: 0; margin-inline: 0; overflow: visible; }
  .gd-trades .gd-card { margin: 0 0 1rem; }
}
@media (min-width: 1100px) { .gd-trades .gd-deck.gd-wall { columns: 3; } }

.gd-find { margin-top: clamp(2rem, 5vw, 3rem); max-width: 30rem; }
.gd-find__label { display: block; margin: 0 0 .8rem; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.gd-find__box { position: relative; }
.gd-find__box svg { position: absolute; left: 1.15rem; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: var(--ink-2); stroke-width: 1.7; stroke-linecap: round; pointer-events: none; }
.gd-find__box input {
  display: block;
  width: 100%;
  height: 3.5rem;
  padding: 0 1.2rem 0 3.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--linen);
  box-shadow: inset 0 0 0 1px var(--ink);
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .3s var(--ease);
}
.gd-find__box input::placeholder { color: var(--ink-3); opacity: 1; }
.gd-find__box input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-ink); }
.gd-find__box input::-webkit-search-cancel-button { -webkit-appearance: none; }
.gd-find__count { min-height: 1.4em; margin: .8rem 0 0; font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.gd-empty { margin-top: 1.4rem; padding: 2rem 1.6rem 2.2rem; border-radius: var(--r-xl); background: var(--sand); }
.gd-empty__h { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.12; letter-spacing: -.022em; color: var(--ink); text-wrap: balance; }
.gd-empty__h em { font-style: italic; color: var(--accent-ink); }
.gd-empty .pg-next { margin-top: 1.4rem; }

.gd-areas__lead { margin: 0 0 1.1rem; }

/* ------------------------------------------------------------ Thank-you page */
.th-kicker { display: flex; align-items: center; gap: .7rem; }
.th-tick { flex: none; width: 1.7rem; height: 1.7rem; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .js .th-tick circle { stroke-dasharray: 63; stroke-dashoffset: 63; animation: th-draw 1.1s var(--ease) .4s forwards; }
  .js .th-tick path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: th-draw .6s var(--ease) 1.1s forwards; }
}
@keyframes th-draw { to { stroke-dashoffset: 0; } }
.th-direct { display: grid; margin: 2.4rem 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .3); }
.th-direct li { display: grid; gap: .5rem; padding: 1.5rem 0 1.6rem; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.th-direct span { font-family: var(--mono); font-size: max(12px, .72rem); letter-spacing: .22em; text-transform: uppercase; color: var(--on-navy-2); }
main.gd .th-direct li > a:not(.btn) { display: inline-block; min-height: 44px; font-family: var(--display); font-size: clamp(1.7rem, 7.4vw, 3.4rem); line-height: 1.1; letter-spacing: -.028em; color: var(--ivory); text-decoration: none; overflow-wrap: anywhere; }
main.gd .th-direct li > a:not(.btn):hover { color: var(--accent-lit-ink); }
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) { .th-direct { grid-template-columns: 1fr 1fr; } .th-direct li { padding-right: 2rem; } .th-direct li + li { padding-left: 2rem; border-left: 1px solid rgba(255, 255, 255, .14); } }
.th-links { flex-direction: column; gap: .2rem; margin-top: 2rem; }
.th-links .pg-next { padding-block: .35rem; }
main.gd .th-direct li:last-child > a:not(.btn) { font-size: clamp(1.2rem, 5.5vw, 2.4rem); overflow-wrap: normal; }

/* ------------------------------------------------------------ Sticky headings
   On a wide screen the heading over a stack of cards stays put, and the cards
   pin beneath it (guides.js measures it into --sh): they pass up under it, and
   the last one lands on top of the pile. A phone has no room to spare for a
   pinned heading, so there it scrolls away as before. */
@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .gd-stickhead {
    position: sticky;
    top: var(--nav-h, 56px);
    z-index: 4;
    padding: 2.6rem 0 1.4rem;
    background: var(--solid, var(--sand));
  }
  /* The band reaches up to the top of the screen (behind the site's header) as well as out to both sides, so a card that has gone up under the heading is not seen through the header. */
  .gd-stickhead::before { content: ""; position: absolute; inset: calc(-1 * var(--nav-h, 56px) - 2px) calc(50% - 50vw) 0; background: inherit; z-index: -1; }
  .gd-stickhead::after { content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); top: 100%; height: 1.6rem; background: linear-gradient(var(--solid, var(--sand)), transparent); pointer-events: none; }
  .gd-dark .gd-stickhead { --solid: #131313; }
  .gd-stickhead .gd-kicker { margin-bottom: 1rem; }
  .gd-sec:has(.gd-stickhead) .gd-pane { top: calc(var(--nav-h, 56px) + var(--sh, 9rem) + 1rem + var(--i, 0) * .85rem); }
}

/* A shorter section, for the pricing page's bands: shorter on a wide
   screen only. On a phone it keeps the full rhythm; at 2.8rem the build,
   the plans and the rates ran into each other. */
.gd-sec--tight { padding-block: clamp(4.5rem, 10vw, 6rem) clamp(6rem, 15vw, 9rem); }

/* When a guide was last checked, under the lead. Plain and quiet: it is
   there for readers (and for search and AI tools, which favour pages that
   say how current they are), not as a label. */
.gd-stamp { margin: 1.1rem 0 0; font-size: .9375rem; line-height: 1.5; color: var(--ink-3); }
.gd-stamp time { color: var(--ink-2); }

/* Figures that are ranges ($3–10k, 30–80 hrs) run wider than a single
   number, so they are set a size down and never break across lines. */
.gd-stats--range .gd-stat b { font-size: clamp(3.4rem, 14vw, 5.4rem); white-space: nowrap; }


/* ------------------------------------------------------------ The build price
   web-design-western-sydney.html. Open on the linen, no panel: the question
   is the biggest thing here, then what websites usually cost in the serif,
   then our figure a size down from the question, then the $500 smaller
   again in the accent. Structure from rules alone: an ink rule under the
   question, hairlines between the columns, one more over the link out.
   Contrast on linen, measured: ink 17.0, ink-2 9.4, accent-ink 5.3 (the
   guide link), accent 4.2 (only the large $ and $500). */
.bp { padding-block: clamp(6rem, 16vw, 11rem) clamp(4rem, 10vw, 7rem); }
/* The question on one line at any width: sized to the column (cqi), the
   line measuring about 10.1em in the serif. Everything under it is set a
   size down from it on a phone too. */
.bp .gd-in { container-type: inline-size; }
.bp__q {
  margin: 0;
  font-family: var(--display);
  font-size: min(8.6rem, 9.6cqi);
  white-space: nowrap;
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--ink);
}
.bp__q .qm { font-style: normal; color: inherit; }
.bp__grid {
  display: grid;
  gap: 2.4rem;
  margin-top: clamp(2.4rem, 6vw, 4.5rem);
  padding-top: clamp(1.8rem, 4vw, 2.8rem);
  border-top: 1px solid var(--ink);
}
.bp__ctx {
  max-width: 20em;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 5.8vw, 2.2rem);
  line-height: 1.22;
  letter-spacing: -.015em;
  color: var(--ink-2);
  text-wrap: pretty;
}
main.gd .bp__ctx a { color: var(--accent-ink); }
.bp__n {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 3rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: -.045em;
  color: var(--ink);
  font-variant-numeric: lining-nums;
}
.bp__cur { margin: .28em .04em 0 0; font-size: .34em; letter-spacing: 0; color: var(--accent); }
.bp__for { max-width: 17em; margin: 1rem 0 0; font-family: var(--display); font-size: clamp(1.1rem, 4.4vw, 1.35rem); line-height: 1.35; color: var(--ink); }
.bp__dep { margin: 0; font-family: var(--display); font-size: clamp(1.15rem, 4.4vw, 1.35rem); line-height: 1.3; color: var(--ink); }
.bp__dep b {
  display: block;
  margin-bottom: .45rem;
  font-size: clamp(1.5rem, 6.4vw, 2.2rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.bp__note { max-width: 18em; margin: .5rem 0 0; font-family: var(--display); font-size: clamp(1.15rem, 4.4vw, 1.35rem); line-height: 1.3; color: var(--ink); }
.bp__next {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: clamp(2.6rem, 6vw, 4rem) 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hair-2);
}
main.gd .bp__next > a:not(.btn) {
  font-family: var(--display);
  font-size: clamp(1.35rem, 5.2vw, 1.8rem);
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 0 1px no-repeat;
  transition: background-size .6s var(--glide);
}
main.gd .bp__next > a:not(.btn):hover { background-size: 100% 1px; }
.bp__next svg { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--glide); }
.bp__next:hover svg { transform: translateX(4px); }

@media (min-width: 820px) and (min-device-width: 600px) and (min-device-height: 600px) {
  .bp__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .9fr); gap: 0; }
  .bp__grid > * { padding-inline: clamp(1.6rem, 3vw, 3.2rem); }
  .bp__grid > :first-child { padding-left: 0; }
  .bp__grid > :last-child { padding-right: 0; }
  .bp__grid > * + * { border-left: 1px solid var(--hair-2); }
  .bp__ctx { font-size: clamp(1.6rem, 2.3vw, 2.3rem); }
  .bp__n { font-size: clamp(4.2rem, 6vw, 6rem); }
  .bp__dep b { font-size: clamp(2.4rem, 3.2vw, 3.2rem); }
  .bp__next { justify-content: flex-end; }
}