/* ==========================================================================
   Downward Dog — warm-luxe editorial design system
   Cream paper, espresso ink, one clay accent borrowed from the poodles.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@0;1&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --paper:        #f6e4cf;
  --paper-light:  #fff9f2;
  --paper-deep:   #efd7bc;
  --ink:          #321c04;
  --ink-hover:    #1f1003;
  --muted:        #d9c4aa;
  --muted-deep:   #ceba9e;
  /* Deep enough to clear 4.5:1 for small caps set on --paper, the lightest
     surface the accent ever prints on. */
  --clay:         #9d4b2b;
  --clay-soft:    #c8734c;

  --ink-70: rgba(50, 28, 4, 0.70);
  --ink-55: rgba(50, 28, 4, 0.55);
  --ink-14: rgba(50, 28, 4, 0.14);
  --ink-08: rgba(50, 28, 4, 0.08);

  --font-display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-sans:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* 8px spacing system */
  --s1: 0.5rem;  --s2: 1rem;   --s3: 1.5rem;  --s4: 2rem;
  --s5: 3rem;    --s6: 4rem;   --s7: 6rem;    --s8: 8rem;   --s9: 11rem;

  --shell:   min(1440px, 100% - 3rem);
  --shell-n: min(1180px, 100% - 3rem);

  --radius:  26px;
  --radius-s: 14px;

  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 180ms;
  --t-mid:  320ms;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body.dd-site {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.dd-site.is-locked { overflow: hidden; }

.dd-site img { max-width: 100%; display: block; }
/* :where() keeps these at class-only specificity so component modifiers such as
   .dd-btn--ink can still set their own colour and background. */
.dd-site :where(a) { color: inherit; text-decoration: none; }
.dd-site :where(button) { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.dd-site :focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; border-radius: 4px; }

.dd-shell   { width: var(--shell);   margin-inline: auto; }
.dd-shell-n { width: var(--shell-n); margin-inline: auto; }

.dd-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.dd-skip {
  position: absolute; top: -100px; left: var(--s3); z-index: 999;
  background: var(--paper-light); color: var(--ink);
  padding: 0.75rem 1.25rem; border-radius: 999px; font-size: 0.875rem;
}
.dd-skip:focus { top: var(--s3); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

.dd-site h1, .dd-site h2, .dd-site h3, .dd-site h4 { margin: 0; font-weight: 400; }

.dd-display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.dd-h1 { font-size: clamp(3.25rem, 10.5vw, 9.5rem); }
.dd-h2 { font-size: clamp(2.75rem, 7vw, 6rem); line-height: 0.98; }
.dd-h3 { font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.08; }

.dd-em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
}

.dd-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.4;
}

.dd-lead {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.6;
  max-width: 62ch;
}

.dd-body { max-width: 68ch; color: var(--ink-70); }

.dd-statement {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.6vw, 2.875rem);
  line-height: 1.24;
  letter-spacing: -0.015em;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.dd-btn {
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 46px; padding: 0.6rem 1.5rem;
  border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  transition: background-color var(--t-fast) ease-out,
              color var(--t-fast) ease-out,
              transform var(--t-fast) ease-out;
}
.dd-btn:active { transform: translateY(1px); }

.dd-btn--ink   { background: var(--ink); color: var(--paper-light); }
.dd-btn--ink:hover { background: var(--ink-hover); }

.dd-btn--muted { background: var(--muted); color: var(--ink); }
.dd-btn--muted:hover { background: var(--muted-deep); }

.dd-btn--paper { background: var(--paper-light); color: var(--ink); }
.dd-btn--paper:hover { background: #fff; }

.dd-btn--ghost {
  background: transparent; color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}
.dd-btn--ghost:hover { background: currentColor; }
.dd-btn--ghost:hover .dd-btn__label { color: var(--ink); }

/* Circular icon chip that leads the pill buttons */
.dd-btn__chip {
  display: grid; place-items: center;
  width: 26px; height: 26px; margin-left: -0.6rem;
  border-radius: 50%;
  background: var(--paper-light); color: var(--ink);
  flex: none;
}
.dd-btn__chip svg { width: 14px; height: 14px; }

.dd-link {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase;
  padding-bottom: 3px;
  box-shadow: inset 0 -1px 0 0 currentColor;
  transition: gap var(--t-fast) ease-out, opacity var(--t-fast) ease-out;
}
.dd-link:hover { gap: 0.9rem; opacity: 0.68; }

/* --------------------------------------------------------------------------
   5. Navigation — floating pill
   -------------------------------------------------------------------------- */

/* The closed drawer still occupies layout, so the header box reaches well down
   the viewport — it must not swallow clicks meant for the page beneath it. */
.dd-nav {
  position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%);
  z-index: 200; width: max-content; max-width: calc(100% - 2rem);
  pointer-events: none;
}

.dd-nav__pill {
  pointer-events: auto;
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.5rem 0.5rem 0.5rem 1.5rem;
  border-radius: 999px;
  background: rgba(255, 249, 242, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 8px 30px rgba(31,16,3,0.16);
  transition: background-color var(--t-mid) ease-out, box-shadow var(--t-mid) ease-out;
}
.dd-nav.is-stuck .dd-nav__pill {
  background: rgba(255, 249, 242, 0.97);
  box-shadow: 0 8px 34px rgba(31,16,3,0.2);
}

.dd-nav__brand {
  font-family: var(--font-display);
  font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1;
  white-space: nowrap;
}

.dd-nav__links { display: flex; align-items: center; gap: 1.4rem; }

.dd-nav__link {
  position: relative;
  font-size: 0.75rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--t-fast) ease-out;
}
.dd-nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px; background: var(--clay);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t-mid) var(--ease);
}
.dd-nav__link:hover::after,
.dd-nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.dd-nav__link.is-active { color: var(--clay); }

.dd-nav__quiz {
  font-family: var(--font-display); font-style: italic;
  font-size: 1rem; white-space: nowrap;
  box-shadow: inset 0 -1px 0 0 var(--ink-14);
  transition: box-shadow var(--t-fast) ease-out;
}
.dd-nav__quiz:hover { box-shadow: inset 0 -1px 0 0 var(--ink); }

.dd-nav__cta { padding: 0.55rem 1.2rem; min-height: 40px; }

/* Animated hamburger */
.dd-burger {
  display: none; position: relative;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); flex: none;
}
.dd-burger span {
  position: absolute; left: 11px; width: 18px; height: 1.5px;
  background: var(--paper-light); border-radius: 2px;
  transition: transform 300ms cubic-bezier(0.77, 0, 0.175, 1),
              opacity 160ms ease-out;
}
.dd-burger span:nth-child(1) { top: 17px; }
.dd-burger span:nth-child(2) { top: 22px; }
.dd-nav.is-open .dd-burger span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.dd-nav.is-open .dd-burger span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }

.dd-nav__drawer {
  margin-top: 0.6rem; padding: 1.25rem;
  border-radius: var(--radius);
  background: var(--paper-light);
  box-shadow: 0 18px 46px rgba(31,16,3,0.24);
  opacity: 0; transform: translateY(-10px) scale(0.97);
  pointer-events: none;
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.dd-nav.is-open .dd-nav__drawer {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
/* The row rule deliberately skips .dd-btn: the nav items are list rows, but the
   button is a pill and keeps its own size. The left margin lines its edge up
   with the text of the rows above rather than with the drawer's inner wall. */
.dd-nav__drawer a, .dd-nav__drawer button:not(.dd-btn) {
  display: block; width: 100%; text-align: left;
  padding: 0.7rem 0.25rem;
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2;
  border-bottom: 1px solid var(--ink-08);
}
.dd-nav__drawer > *:last-child { border-bottom: 0; }
.dd-nav__drawer .dd-btn { margin: 1.25rem 0 0.25rem 0.25rem; }

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.dd-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 calc(var(--s6) + 25px);
  overflow: hidden;
  margin-bottom: -25px;
  isolation: isolate;
}

/* Contains the slow scale drift on the plates. */
.dd-hero__media { position: absolute; inset: 0; z-index: -2; background: var(--ink); overflow: clip; }

.dd-hero__plate {
  position: absolute; inset: 0;
  object-fit: cover; width: 100%; height: 100%;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 1600ms ease-in-out;
  will-change: opacity, transform;
}
.dd-hero__plate.is-live {
  opacity: 1;
  animation: dd-drift 21s linear forwards;
}
@keyframes dd-drift {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

.dd-hero__video {
  position: absolute; inset: 0; z-index: -1;
  object-fit: cover; width: 100%; height: 100%;
}

.dd-hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  /* The radial layer sits under the copy column only, so the media keeps its
     daylight at the edges while the eyebrow stops landing on lit foliage. The
     film runs brighter than the stills, so both layers carry the copy column
     through its lightest frames. */
  background:
    radial-gradient(76% 56% at 50% 52%, rgba(31,16,3,0.50) 0%, rgba(31,16,3,0) 100%),
    linear-gradient(180deg, rgba(31,16,3,0.44) 0%, rgba(31,16,3,0.18) 32%, rgba(31,16,3,0.30) 58%, rgba(31,16,3,0.70) 100%);
}

.dd-hero__inner {
  width: var(--shell); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  color: #fff;
}

.dd-hero__copy { width: 100%; }

.dd-hero__eyebrow { color: rgba(255,255,255,0.92); margin-bottom: var(--s4); }

.dd-hero__title { color: #fff; text-wrap: balance; }
.dd-hero__title .dd-em { color: #fff; }

.dd-hero__lead {
  margin: var(--s3) auto 0;
  max-width: 44ch;
  color: #fff;
  font-size: 0.9375rem; font-weight: 500; line-height: 1.6;
  text-wrap: pretty; /* four lines on a phone, and none of them a single word */
}

/* One row on a wide screen, a stack on a phone. Shrink-wrapping the two
   controls is what lets the centred stack centre them. */
.dd-hero__actions {
  margin-top: var(--s4);
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}

.dd-hero__bar {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 0.3rem 0.3rem 0.3rem 1.5rem;
  border-radius: 16px;
  background: rgba(31,16,3,0.34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.dd-hero__bar p {
  margin: 0; font-size: 0.8125rem; font-weight: 500;
  color: rgba(255,255,255,0.9); white-space: nowrap;
}
.dd-hero__bar p.dd-only-sm { display: none; }
.dd-hero__bar .dd-btn { border-radius: 13px; }

/* No strapline: the glass has nothing to sit behind, so the button stands alone. */
.dd-hero__bar.is-bare {
  padding: 0; border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dd-hero__bar.is-bare .dd-btn { border-radius: 999px; }

.dd-hero__secondary { color: rgba(255,255,255,0.86); }

/* Three figures the page already states elsewhere, set as a rail under the copy.
   Narrow screens split the shell evenly so the labels can wrap; a wide screen
   lets each cell take its own width, which keeps the rail short and anchored
   under the copy instead of stretched across the frame. */
.dd-hero__stats {
  width: var(--shell); margin: var(--s5) auto 0;
  display: flex;
  color: #fff;
}
.dd-hero__stat {
  flex: 1 1 0; min-width: 0;
  padding-left: var(--s2);
  border-left: 1px solid rgba(255,255,255,0.24);
}
.dd-hero__stat:first-child { padding-left: 0; border-left: 0; }
.dd-hero__stat dt {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.5rem, 4.6vw, 2.75rem); line-height: 1;
}
.dd-hero__stat dd {
  margin: 0.5rem 0 0;
  font-size: 0.75rem; line-height: 1.4;
  color: rgba(255,255,255,0.78);
}

/* Wide screens drop the centred stack: the copy holds one column on the left
   and the rail runs beneath it, so the right of the frame is left to the film. */
@media (min-width: 1024px) {
  .dd-hero__inner { align-items: flex-start; text-align: left; }
  /* The headline keeps the full shell so it stays two lines — narrowing the
     column pushes it to three and the hero outgrows the viewport. It is the
     lead's measure that holds the copy to the left. */
  .dd-hero__lead { margin-inline: 0; max-width: 46ch; }

  /* Both ways in read as one line of controls under the copy. */
  .dd-hero__actions { flex-direction: row; align-items: center; gap: var(--s4); }

  /* The copy sits on the floor of the hero, so a deeper floor is what lifts it
     off the bottom edge now that there is no rail under it. */
  .dd-hero { padding-bottom: calc(var(--s8) + 25px); }
  /* The radial is centred, so moving the copy left took it off the darkest
     part of the wash. This carries the left edge without touching the right,
     which is the half of the frame the film is now free to hold. */
  .dd-hero__scrim {
    background:
      linear-gradient(90deg, rgba(31,16,3,0.46) 0%, rgba(31,16,3,0.20) 42%, rgba(31,16,3,0) 66%),
      radial-gradient(76% 56% at 50% 52%, rgba(31,16,3,0.34) 0%, rgba(31,16,3,0) 100%),
      linear-gradient(180deg, rgba(31,16,3,0.44) 0%, rgba(31,16,3,0.18) 32%, rgba(31,16,3,0.30) 58%, rgba(31,16,3,0.70) 100%);
  }
  .dd-hero__stats { margin-top: var(--s4); }
  .dd-hero__stat { flex: 0 0 auto; padding-left: var(--s5); margin-left: var(--s5); }
  .dd-hero__stat:first-child { margin-left: 0; }
  .dd-hero__stat dd { font-size: 0.8125rem; }
}

/* A short desktop window — a 720p laptop, or a tall browser chrome — cannot
   hold the headline and the rail in one viewport. The figures are restated
   further down the page, so the rail is what gives way, not the hero. */
@media (min-width: 1024px) and (max-height: 799px) {
  .dd-hero__stats { display: none; }
}

/* --------------------------------------------------------------------------
   7. About
   -------------------------------------------------------------------------- */

.dd-about {
  position: relative; z-index: 10;
  background: var(--paper);
  border-radius: 25px 25px 0 0;
  padding: var(--s8) 0 var(--s7);
}

.dd-about__top {
  max-width: 46rem; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
}
.dd-about__top .dd-lead { max-width: 34rem; }

.dd-about__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }

.dd-rule {
  display: flex; align-items: center; gap: 2px;
  margin: var(--s7) 0 var(--s6);
}
.dd-rule i { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dd-rule b { flex: 1; height: 2px; background: var(--muted); }

.dd-about__bottom {
  display: flex; flex-direction: column; gap: var(--s5);
  align-items: flex-start;
}
.dd-mark { display: flex; align-items: flex-start; gap: 1rem; flex: none; }
.dd-mark svg { width: 40px; height: 40px; flex: none; }
.dd-mark span {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.6;
}

/* --------------------------------------------------------------------------
   8. Studio band — photographic strip with a vertical word rail
   -------------------------------------------------------------------------- */

.dd-band {
  position: relative;
  background: var(--ink);
  padding: var(--s7) 0;
  color: var(--paper-light);
  overflow: hidden;
}
/* One column until there is room for a photo and a readable measure side by
   side. Two half-columns of a phone leave ~140px each, which is a thumbnail
   next to three words a line. */
.dd-band__grid {
  display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: center;
}
.dd-band__figure {
  position: relative; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 5;
}
.dd-band__figure img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.0);
  transition: transform 1200ms var(--ease);
}
.dd-band__figure:hover img { transform: scale(1.05); }

.dd-band__rail {
  position: absolute; top: 0; right: 0; bottom: 0; width: 56px;
  background: rgba(31,16,3,0.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: grid; place-items: center; overflow: hidden;
}
.dd-band__rail ul {
  display: flex; flex-direction: column; gap: 3rem;
  list-style: none; margin: 0; padding: 0;
  writing-mode: vertical-rl;
  animation: dd-rail 26s linear infinite;
}
.dd-band__rail li {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(255,249,242,0.7); white-space: nowrap;
}
@keyframes dd-rail {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

.dd-band__quote { max-width: 34rem; }
.dd-band__quote .dd-statement { color: var(--paper-light); }
.dd-band__quote .dd-eyebrow { color: var(--clay-soft); margin-bottom: var(--s3); }
.dd-band__quote p.dd-body { color: rgba(255,249,242,0.62); margin-top: var(--s3); }

/* --------------------------------------------------------------------------
   9. Process — sticky rail + scroll-revealed cards
   -------------------------------------------------------------------------- */

.dd-process {
  position: relative;
  background: var(--ink);
  padding: var(--s7) 0 var(--s8);
  color: var(--paper-light);
  isolation: isolate;
}
.dd-process__bg {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  background-attachment: fixed;
}
.dd-process__bg::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(31,16,3,0.72);
}

.dd-process__grid { display: grid; gap: var(--s5); }

.dd-process__rail h2 { color: var(--paper-light); }
.dd-process__nav { display: none; flex-direction: column; gap: 0.5rem; margin-top: var(--s4); }
.dd-process__nav button {
  text-align: left; padding: 0.7rem 1.1rem;
  border-radius: 12px;
  background: rgba(31,16,3,0.35);
  color: rgba(255,249,242,0.42);
  font-size: 0.8125rem; font-weight: 500;
  transition: color var(--t-mid) ease-out, background-color var(--t-mid) ease-out;
}
.dd-process__nav button.is-active {
  color: var(--paper-light);
  background: rgba(31,16,3,0.6);
}
.dd-process__nav button span {
  font-family: var(--font-display); font-style: italic;
  margin-right: 0.6rem; color: var(--clay-soft);
}

.dd-process__foot { display: none; }
.dd-process__foot p {
  max-width: 24rem; margin: 0 0 var(--s2);
  font-size: 0.8125rem; color: rgba(255,249,242,0.6);
}

/* Clipped so the pre-reveal translateX on the cards can't widen the document. */
.dd-process__cards { display: flex; flex-direction: column; gap: var(--s4); overflow-x: clip; }

.dd-card {
  padding: var(--s4);
  border-radius: var(--radius);
  background: rgba(31,16,3,0.34);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px rgba(255,249,242,0.08);
  opacity: 0; transform: translateX(56px);
  transition: opacity 700ms ease-out, transform 700ms ease-out;
}
.dd-card.is-in { opacity: 1; transform: translateX(0); }

.dd-card__no {
  font-family: var(--font-display); font-style: italic;
  font-size: 3.25rem; line-height: 1; color: var(--clay-soft);
}
.dd-card h3 { margin: var(--s2) 0 var(--s3); font-family: var(--font-display); font-size: clamp(1.5rem,2.6vw,2rem); }
.dd-card figure { margin: 0 0 var(--s3); border-radius: var(--radius-s); overflow: hidden; aspect-ratio: 16/10; }
.dd-card figure img { width: 100%; height: 100%; object-fit: cover; }
.dd-card p { margin: 0; color: rgba(255,249,242,0.62); font-size: 0.9375rem; }

/* --------------------------------------------------------------------------
   10. Classes
   -------------------------------------------------------------------------- */

.dd-classes { background: var(--paper-light); padding: var(--s8) 0; }

.dd-secthead {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s3);
  margin-bottom: var(--s6);
}
.dd-secthead .dd-eyebrow { color: var(--clay); margin-bottom: var(--s2); }

.dd-classes__grid {
  display: grid; gap: 1px;
  background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
}

.dd-class {
  position: relative;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s3);
  background: var(--paper-light);
  transition: background-color var(--t-mid) ease-out;
}
.dd-class:hover { background: var(--paper); }
.dd-class__meta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dd-class__level {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay);
}
.dd-class__spots {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.6875rem; color: var(--ink-55);
}
.dd-class__spots::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--clay); flex: none;
}
.dd-class__when {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55);
}
.dd-class__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.05;
  margin: 0.6rem 0 0.4rem;
}
.dd-class__where { font-size: 0.8125rem; color: var(--ink-55); }
.dd-class__go {
  position: absolute; inset: 0;
  font-size: 0; /* full-card hit area */
}

.dd-class--cta { background: var(--ink); color: var(--paper-light); justify-content: center; }
.dd-class--cta:hover { background: var(--ink-hover); }
.dd-class--cta .dd-class__name { color: var(--paper-light); }

/* --------------------------------------------------------------------------
   11. Ticker
   -------------------------------------------------------------------------- */

.dd-ticker {
  background: var(--ink); color: var(--paper-light);
  padding: var(--s3) 0; overflow: hidden;
  border-block: 1px solid rgba(255,249,242,0.1);
}
.dd-ticker__track {
  display: flex; align-items: center; gap: 2.5rem;
  width: max-content;
  animation: dd-marquee 46s linear infinite;
}
.dd-ticker:hover .dd-ticker__track { animation-play-state: paused; }
.dd-ticker__track span {
  font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255,249,242,0.55);
}
.dd-ticker__track em {
  font-family: var(--font-display); font-style: italic;
  font-size: 1.5rem; letter-spacing: -0.01em; color: var(--paper-light);
}
@keyframes dd-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   12. The pups
   -------------------------------------------------------------------------- */

.dd-pups { background: var(--paper); padding: var(--s8) 0; }
.dd-pups__note { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: var(--s5); color: var(--ink-55); font-size: 0.875rem; }

.dd-pups__grid { display: grid; gap: var(--s3); }

.dd-pup {
  position: relative; overflow: hidden;
  border-radius: var(--radius);
  background: var(--ink);
  aspect-ratio: 3 / 4;
}
.dd-pup img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease), filter 500ms ease-out;
}
.dd-pup:hover img, .dd-pup:focus-within img { transform: scale(1.06); filter: brightness(0.72); }

/* Several of these photos are shot on grass or pale stone, so the name plate
   needs its own footing rather than relying on the picture being dark. */
/* ::before, not ::after — it must paint above the photo but beneath the plate. */
.dd-pup::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 55%;
  background: linear-gradient(180deg, rgba(31,16,3,0) 0%, rgba(31,16,3,0.7) 100%);
  pointer-events: none;
  transition: opacity var(--t-mid) ease-out;
}
.dd-pup:hover::before, .dd-pup:focus-within::before { opacity: 0; }

.dd-pup__tag {
  position: absolute; left: var(--s3); bottom: var(--s3); right: var(--s3);
  color: #fff;
  transition: opacity var(--t-mid) ease-out, transform var(--t-mid) ease-out;
}
.dd-pup__tag h3 { font-family: var(--font-display); font-size: 2rem; line-height: 1; }
.dd-pup__tag p { margin: 0.35rem 0 0; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.dd-pup:hover .dd-pup__tag, .dd-pup:focus-within .dd-pup__tag { opacity: 0; transform: translateY(10px); }

.dd-pup__reveal {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s4) var(--s3);
  color: #fff;
  background: linear-gradient(180deg, rgba(31,16,3,0) 0%, rgba(31,16,3,0.86) 38%);
  opacity: 0; transform: translateY(24px);
  transition: opacity var(--t-mid) ease-out, transform 420ms var(--ease);
}
.dd-pup:hover .dd-pup__reveal, .dd-pup:focus-within .dd-pup__reveal { opacity: 1; transform: translateY(0); }
.dd-pup__reveal h3 { font-family: var(--font-display); font-size: 1.875rem; line-height: 1; }
.dd-pup__reveal p { margin: 0.75rem 0 var(--s3); font-size: 0.875rem; line-height: 1.6; color: rgba(255,255,255,0.8); }
.dd-pup__stat {
  display: inline-block;
  font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  background: rgba(255,255,255,0.14); color: #fff;
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */

.dd-says { background: var(--paper-light); padding: var(--s8) 0; overflow: hidden; }
.dd-says__rows { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s6); }

.dd-says__row { overflow: hidden; }
.dd-says__track {
  display: flex; gap: var(--s3); width: max-content;
  animation: dd-marquee 64s linear infinite;
}
.dd-says__row--rev .dd-says__track { animation-direction: reverse; animation-duration: 78s; }
.dd-says__row:hover .dd-says__track { animation-play-state: paused; }

.dd-quote {
  flex: none; width: min(30rem, 82vw);
  padding: var(--s4);
  border-radius: var(--radius);
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4);
}
.dd-quote blockquote {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.9vw, 1.625rem); line-height: 1.3;
}
.dd-quote footer { display: flex; align-items: baseline; gap: 0.75rem; }
.dd-quote cite { font-style: normal; font-size: 0.875rem; font-weight: 600; }
.dd-quote span { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); }

/* --------------------------------------------------------------------------
   14. Membership
   -------------------------------------------------------------------------- */

.dd-members { background: var(--paper); padding: var(--s8) 0; }

.dd-members__lead { margin: 0; max-width: 36ch; font-size: 1rem; line-height: 1.7; color: var(--ink-70); }

/* Hairline-separated cells rather than floating cards, matching the timetable:
   one system for "here are the options", used twice. */
.dd-members__grid {
  display: grid; gap: 1px;
  background: var(--ink-14);
  border-block: 1px solid var(--ink-14);
}

.dd-plan {
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4) var(--s3) var(--s3);
  background: var(--paper);
  transition: background-color var(--t-mid) ease-out;
}
.dd-plan:hover { background: var(--paper-light); }

.dd-plan__name {
  margin: 0;
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--clay);
}

/* The number is the whole point of the card, so it is set at display scale
   rather than as bolded body copy. */
.dd-plan__price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; flex-wrap: wrap; }
.dd-plan__price strong {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 5.2vw, 4rem); line-height: 0.95; letter-spacing: -0.02em;
}
.dd-plan__price span { font-size: 0.8125rem; color: var(--ink-55); }

.dd-plan__note { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ink-70); max-width: 30ch; }

.dd-plan__lines { list-style: none; margin: var(--s1) 0 var(--s3); padding: 0; display: grid; gap: 0.55rem; }
.dd-plan__lines li {
  position: relative; padding-left: 1.35rem;
  font-size: 0.875rem; line-height: 1.5;
}
.dd-plan__lines li::before {
  content: ''; position: absolute; left: 0; top: 0.5rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--clay);
}

/* Pushes the button to a common floor so three cards of unequal copy still
   line their calls to action up. */
.dd-plan .dd-btn { margin-top: auto; align-self: flex-start; }

.dd-plan--feature { background: var(--ink); color: var(--paper-light); }
.dd-plan--feature:hover { background: var(--ink-hover); }
.dd-plan--feature .dd-plan__name { color: var(--clay-soft); }
.dd-plan--feature .dd-plan__price span,
.dd-plan--feature .dd-plan__note { color: rgba(255,249,242,0.66); }
.dd-plan--feature .dd-plan__lines li::before { background: var(--clay-soft); }

.dd-members__trial {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s5);
  padding: var(--s4);
  border-radius: var(--radius);
  background: var(--ink); color: var(--paper-light);
}
.dd-members__trial .dd-eyebrow { color: var(--clay-soft); }
.dd-members__trialtitle {
  margin: 0.5rem 0 0;
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.05;
}
.dd-members__trialnote { margin: 0.5rem 0 0; font-size: 0.875rem; line-height: 1.65; color: rgba(255,249,242,0.66); max-width: 48ch; }

.dd-members__perks { margin-top: var(--s7); }
.dd-members__perks .dd-eyebrow { color: var(--clay); margin-bottom: var(--s2); }

.dd-members__perklist {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: grid; gap: var(--s4) var(--s5);
}
.dd-members__perklist li { border-top: 1px solid var(--ink-14); padding-top: var(--s2); }
.dd-members__perklist strong {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
}
.dd-members__perklist small { display: block; font-size: 0.875rem; line-height: 1.65; color: var(--ink-70); }

/* --------------------------------------------------------------------------
   15. Private hire
   -------------------------------------------------------------------------- */

/* The one dark band on the page — the buyout should read as the step up from
   a single mat, so it interrupts the paper rather than continuing it. */
.dd-private { background: var(--ink); color: var(--paper-light); padding: var(--s8) 0; }
.dd-private .dd-eyebrow { color: var(--clay-soft); }
.dd-private h2 { color: var(--paper-light); }
.dd-private .dd-lead { margin-top: var(--s3); max-width: 34ch; color: rgba(255,249,242,0.68); }

.dd-private__grid { display: grid; gap: var(--s6); align-items: start; }

.dd-private__perks { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.dd-private__perks li { border-top: 1px solid rgba(255,249,242,0.16); padding-top: var(--s2); }
.dd-private__perks strong {
  display: block; margin-bottom: 0.4rem;
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 400;
}
.dd-private__perks small { display: block; font-size: 0.875rem; line-height: 1.65; color: rgba(255,249,242,0.6); max-width: 40ch; }

.dd-private__aside { display: grid; gap: var(--s3); justify-items: start; }

.dd-private__figure {
  margin: 0; width: 100%; aspect-ratio: 4 / 3;
  border-radius: var(--radius); overflow: hidden;
}
.dd-private__figure img { display: block; width: 100%; height: 100%; object-fit: cover; }

.dd-private__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dd-private__tags li {
  padding: 0.4rem 0.85rem; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,249,242,0.74);
  box-shadow: inset 0 0 0 1px rgba(255,249,242,0.18);
}

.dd-private__note { font-size: 0.875rem; line-height: 1.7; color: rgba(255,249,242,0.6); max-width: 46ch; }

/* --------------------------------------------------------------------------
   16. Contact
   -------------------------------------------------------------------------- */

.dd-contact { background: var(--paper); padding: var(--s8) 0; }
.dd-contact__grid { display: grid; gap: var(--s6); }

.dd-contact__facts { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.dd-contact__facts li { border-top: 1px solid var(--ink-14); padding-top: var(--s2); }
.dd-contact__facts strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; }
.dd-contact__facts small { font-size: 0.75rem; color: var(--ink-55); }

.dd-form { display: grid; gap: var(--s3); }
.dd-form__row { display: grid; gap: var(--s3); }

.dd-field { display: flex; flex-direction: column; gap: 0.5rem; }
.dd-field label {
  font-size: 0.625rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-55);
}
.dd-field input, .dd-field select, .dd-field textarea {
  font: inherit; color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--ink-14);
  border-radius: 0;
  padding: 0.7rem 0;
  transition: border-color var(--t-fast) ease-out;
}
.dd-field textarea { resize: vertical; min-height: 120px; }
.dd-field select { -webkit-appearance: none; appearance: none; cursor: pointer; }
.dd-field input:focus, .dd-field select:focus, .dd-field textarea:focus {
  outline: none; border-bottom-color: var(--clay);
}
.dd-field input::placeholder, .dd-field textarea::placeholder { color: rgba(50,28,4,0.34); }

.dd-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.dd-form__note { font-size: 0.75rem; color: var(--ink-55); }
.dd-form__status { font-size: 0.875rem; min-height: 1.4em; }
.dd-form__status.is-ok  { color: #2f6b3d; }
.dd-form__status.is-err { color: #9d2f21; }

.dd-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

/* --------------------------------------------------------------------------
   17. Newsletter + footer
   -------------------------------------------------------------------------- */

.dd-news { background: var(--ink); color: var(--paper-light); padding: var(--s7) 0; }
.dd-news__grid { display: grid; gap: var(--s4); align-items: end; }
.dd-news .dd-eyebrow { color: var(--clay-soft); }
.dd-news h2 { color: var(--paper-light); }
.dd-news p { color: rgba(255,249,242,0.62); max-width: 36ch; }
.dd-news__form { display: flex; align-items: flex-end; gap: var(--s2); }
.dd-news__form .dd-field { flex: 1; }
.dd-news__form label { color: rgba(255,249,242,0.5); }
.dd-news__form input {
  color: var(--paper-light);
  border-bottom-color: rgba(255,249,242,0.24);
}
.dd-news__form input::placeholder { color: rgba(255,249,242,0.36); }
.dd-news__form input:focus { border-bottom-color: var(--clay-soft); }

.dd-foot { background: var(--ink); color: var(--paper-light); padding: var(--s6) 0 var(--s4); }
.dd-foot__grid { display: grid; gap: var(--s5); }
.dd-foot__brand h2 { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; }
.dd-foot__brand p.dd-tag { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: var(--clay-soft); margin: 0.4rem 0 var(--s3); }
.dd-foot__brand p { color: rgba(255,249,242,0.55); font-size: 0.875rem; max-width: 34ch; }
.dd-foot__cols { display: grid; gap: var(--s4); }
.dd-foot h3 { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,249,242,0.42); margin-bottom: var(--s2); }
.dd-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.dd-foot li a, .dd-foot li span { font-size: 0.875rem; color: rgba(255,249,242,0.78); transition: color var(--t-fast) ease-out; }
.dd-foot li a:hover { color: var(--clay-soft); }
.dd-foot__base {
  margin-top: var(--s6); padding-top: var(--s3);
  border-top: 1px solid rgba(255,249,242,0.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2);
  font-size: 0.75rem; color: rgba(255,249,242,0.42);
}

/* --------------------------------------------------------------------------
   18. Modals — quiz + booking
   -------------------------------------------------------------------------- */

.dd-modal {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center;
  padding: var(--s3);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid) ease-out;
}
.dd-modal.is-open { opacity: 1; pointer-events: auto; }
.dd-modal__veil { position: absolute; inset: 0; background: rgba(31,16,3,0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.dd-modal__panel {
  position: relative;
  width: min(62rem, 100%); max-height: min(88svh, 60rem);
  overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s5) var(--s4) var(--s4);
  border-radius: var(--radius);
  background: var(--paper-light);
  transform: translateY(22px) scale(0.98);
  transition: transform 420ms var(--ease);
}
.dd-modal.is-open .dd-modal__panel { transform: translateY(0) scale(1); }

.dd-modal__close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper);
  transition: background-color var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.dd-modal__close:hover { background: var(--muted); transform: rotate(90deg); }
.dd-modal__close svg { width: 16px; height: 16px; }

.dd-modal__head { max-width: 34rem; margin-bottom: var(--s5); }
.dd-modal__head .dd-eyebrow { color: var(--clay); margin-bottom: var(--s2); }
.dd-modal__head p { color: var(--ink-70); margin: var(--s2) 0 0; }

/* Quiz */
.dd-quiz__step { display: none; }
.dd-quiz__step.is-live { display: block; animation: dd-step 420ms var(--ease); }
@keyframes dd-step { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* The question needs more air beneath it than above it — the display face sits
   high in its line box, so equal margins read as if it were glued to the list. */
#dd-quiz .dd-modal__head { margin-bottom: var(--s4); }
#dd-quiz .dd-quiz__q { font-family: var(--font-display); font-size: clamp(1.75rem,3.4vw,2.5rem); line-height: 1.1; margin-bottom: var(--s4); }
.dd-quiz__opts { display: grid; gap: 0.75rem; }
.dd-quiz__opts button {
  text-align: left; padding: 1.15rem 1.4rem;
  border-radius: var(--radius-s);
  background: var(--paper);
  font-size: 1rem;
  transition: background-color var(--t-fast) ease-out, transform var(--t-fast) ease-out;
}
.dd-quiz__opts button:hover { background: var(--muted); transform: translateX(4px); }

.dd-quiz__bar { margin-top: var(--s4); }

/* Progress rides with the "3 quick questions" label rather than sitting in the
   footer, so it costs no vertical space and reads as part of the framing. */
.dd-quiz__count { display: flex; align-items: center; gap: 0.9rem; }
.dd-quiz__dots { display: flex; gap: 6px; }
.dd-quiz__dots i { width: 22px; height: 3px; border-radius: 2px; background: var(--muted); transition: background-color var(--t-mid) ease-out; }
.dd-quiz__dots i.is-on { background: var(--clay); }

.dd-quiz__result { display: grid; gap: var(--s4); }
.dd-quiz__match {
  padding: var(--s4); border-radius: var(--radius-s);
  background: var(--ink); color: var(--paper-light);
}
.dd-quiz__match .dd-eyebrow { color: var(--clay-soft); }
.dd-quiz__match h3 { font-family: var(--font-display); font-size: clamp(2rem,4vw,3rem); line-height: 1; margin: var(--s2) 0; }
.dd-quiz__match p { color: rgba(255,249,242,0.66); margin: 0 0 var(--s3); }

/* Booking */
.dd-book__stage { display: none; }
.dd-book__stage.is-live { display: block; animation: dd-step 420ms var(--ease); }

.dd-book__grid { display: grid; gap: var(--s3); }
.dd-book__card {
  width: 100%;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s4);
  padding: var(--s3);
  border-radius: var(--radius-s);
  background: var(--paper);
  text-align: left;
  transition: background-color var(--t-mid) ease-out, transform var(--t-mid) var(--ease);
}
.dd-book__card:hover { background: var(--muted); transform: translateY(-3px); }
.dd-book__card h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; margin: 0.5rem 0 0.3rem; }
.dd-book__card small { display: block; font-size: 0.8125rem; color: var(--ink-55); }
.dd-book__card .dd-class__meta { margin-top: var(--s3); }

/* The class the visitor picked, restated above the capture form so the two
   halves of the flow never drift apart. */
.dd-book__chosen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3); margin-bottom: var(--s4);
  border-radius: var(--radius-s);
  background: var(--ink); color: var(--paper-light);
}
.dd-book__chosen .dd-eyebrow { color: var(--clay-soft); }
.dd-book__chosen h3 { font-family: var(--font-display); font-size: 1.75rem; line-height: 1.1; margin: 0.4rem 0 0.2rem; }
.dd-book__chosen small { font-size: 0.8125rem; color: rgba(255,249,242,0.66); }

/* --------------------------------------------------------------------------
   19. Scroll reveal
   -------------------------------------------------------------------------- */

.dd-rise { opacity: 0; transform: translateY(28px); }
.dd-rise.is-in {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.dd-rise[data-delay="1"].is-in { transition-delay: 90ms; }
.dd-rise[data-delay="2"].is-in { transition-delay: 180ms; }
.dd-rise[data-delay="3"].is-in { transition-delay: 270ms; }
.dd-rise[data-delay="4"].is-in { transition-delay: 360ms; }
.dd-rise[data-delay="5"].is-in { transition-delay: 450ms; }

/* Scroll-linked word fill. --p (0→1) is written by the scroll handler; --lead
   is how many words are mid-fade at once, which is what makes the edge read as
   a soft wipe rather than a hard cursor. */
.dd-scrub { --p: 0; --lead: 6; --dim: 0.2; }
.dd-scrub__w {
  opacity: clamp(var(--dim), calc((var(--p) * (var(--n) + var(--lead)) - var(--i)) / var(--lead)), 1);
  transition: opacity 120ms linear;
}

/* Against the photographic band the words need a higher floor to stay legible
   before they fill. */
.dd-band .dd-scrub { --dim: 0.34; }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .dd-form__row { grid-template-columns: 1fr 1fr; }
  .dd-classes__grid { grid-template-columns: repeat(2, 1fr); }
  /* Only once the cells sit side by side does a common floor matter. */
  .dd-class { min-height: 260px; gap: var(--s5); }
  .dd-pups__grid { grid-template-columns: repeat(2, 1fr); }
  .dd-book__grid { grid-template-columns: repeat(2, 1fr); }
  .dd-foot__cols { grid-template-columns: repeat(3, 1fr); }
  .dd-members__perklist { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .dd-about__bottom { flex-direction: row; gap: var(--s7); }
  .dd-mark { width: 12rem; }
  .dd-band__grid { grid-template-columns: 5fr 6fr; gap: var(--s6); }
  .dd-contact__grid { grid-template-columns: 1fr 1.15fr; }
  .dd-private__grid { grid-template-columns: 1fr 1.05fr; column-gap: var(--s7); }
  .dd-news__grid { grid-template-columns: 1fr 1fr; }
  .dd-foot__grid { grid-template-columns: 1fr 1.4fr; }
  /* Eight portraits: four across keeps the block to two clean rows. */
  .dd-pups__grid { grid-template-columns: repeat(4, 1fr); }
  .dd-book__grid { grid-template-columns: repeat(3, 1fr); }
  /* Three rates read as a comparison only when they sit side by side, so this
     grid skips the two-column step the other blocks take at 640px. */
  .dd-members__grid { grid-template-columns: repeat(3, 1fr); }
  .dd-plan { padding: var(--s5) var(--s4) var(--s4); gap: var(--s2); min-height: 30rem; }
  .dd-members__perklist { grid-template-columns: repeat(3, 1fr); }
  /* The display line takes the full measure and wraps the intro onto its own
     row; sending it to the right margin fills the corner the headline leaves
     rather than stacking two left-aligned blocks with a hole beside them. */
  .dd-members__lead { margin-left: auto; }
}

@media (min-width: 1100px) {
  .dd-classes__grid { grid-template-columns: repeat(3, 1fr); }
  .dd-process__grid { grid-template-columns: 400px 1fr; gap: var(--s8); }
  .dd-process__rail {
    position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: center;
    padding-block: var(--s7);
  }
  .dd-process__nav  { display: flex; }
  .dd-process__foot { display: block; margin-top: auto; }
  .dd-process__cards { gap: var(--s6); padding-block: var(--s7); }
}

@media (min-width: 1280px) {
  .dd-process__grid { grid-template-columns: 460px 1fr; gap: var(--s9); }
}

/* Below the nav breakpoint the pill collapses to brand + burger */
@media (max-width: 1023px) {
  .dd-nav { left: var(--s2); right: var(--s2); transform: none; width: auto; max-width: none; }
  .dd-nav__pill { justify-content: space-between; padding-left: 1.25rem; }
  .dd-nav__links, .dd-nav__quiz, .dd-nav__pill > .dd-btn { display: none; }
  .dd-burger { display: block; }
  .dd-hero__bar p.dd-only-lg { display: none; }
  .dd-hero__bar p.dd-only-sm { display: block; white-space: normal; }
}

/* The tracked micro-type is set for a desktop reading distance. A handheld is
   held closer but rendered smaller, and 0.22em of tracking costs legibility
   that a display face gets for free — so every label goes up one step. This
   tracks the 900px layout breakpoint rather than the phone one, because a
   landscape phone and a small tablet are read at handheld distance too. */
@media (max-width: 899px) {
  .dd-eyebrow,
  .dd-class__when,
  .dd-class__spots { font-size: 0.75rem; }

  .dd-band__rail li,
  .dd-pup__tag p,
  .dd-pup__stat,
  .dd-quote span,
  .dd-class__level,
  .dd-foot h3 { font-size: 0.6875rem; }

  /* A field label is read while typing into the field under it, so it gets the
     larger step rather than the one the decorative labels share. */
  .dd-field label { font-size: 0.75rem; }

  .dd-btn,
  .dd-link,
  .dd-ticker__track span,
  .dd-contact__facts small { font-size: 0.8125rem; }

  .dd-class__where,
  .dd-pups__note { font-size: 0.875rem; }
}

@media (max-width: 639px) {
  :root { --shell: calc(100% - 2rem); --shell-n: calc(100% - 2rem); }
  .dd-hero__bar { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 1rem; text-align: center; }
  .dd-hero__bar .dd-btn { justify-content: center; }
  /* The button is the one thing to press on a phone, so it is given enough
     width to read that way rather than as a chip under the paragraph. */
  .dd-hero__actions { margin-top: var(--s5); }
  .dd-hero__bar.is-bare .dd-btn { min-width: 12rem; }
  .dd-process__bg { background-attachment: scroll; }
  .dd-modal__panel { padding: var(--s5) var(--s3) var(--s3); }
  .dd-news__form { flex-direction: column; align-items: stretch; }
  .dd-news__form .dd-btn { justify-content: center; }
  .dd-quote { width: 84vw; }
  /* The only thing to press in this section, so it stops reading as a chip
     tucked under the paragraph. */
  .dd-private__aside { justify-items: stretch; }
  .dd-private__aside .dd-btn { justify-content: center; }
  /* Same reasoning for the plan cards and the trial: one action each, and on a
     phone it should read as the thing to press rather than as a tag. */
  .dd-plan .dd-btn { align-self: stretch; justify-content: center; }
  .dd-members__trial { padding: var(--s3); }
  .dd-members__trial .dd-btn { align-self: stretch; justify-content: center; width: 100%; }
}

/* Touch targets. The small controls here are text links whose underline is
   drawn with an inset box-shadow, so real padding would detach the rule —
   the hit area is grown with a transparent overlay instead. */
@media (hover: none) and (pointer: coarse) {
  .dd-link,
  .dd-nav__brand,
  .dd-contact__facts a { position: relative; }

  .dd-link::after,
  .dd-nav__brand::after,
  .dd-contact__facts a::after {
    content: ''; position: absolute; inset: -12px -8px;
  }
  .dd-contact__facts a::after { inset: -7px -8px; }

  .dd-burger::before,
  .dd-modal__close::before {
    content: ''; position: absolute; inset: -3px; border-radius: 50%;
  }

  .dd-foot ul { gap: 0; }
  .dd-foot li a { display: inline-block; padding-block: 0.85rem; }

  /* No hover to trigger the reveal, so the pup bios are simply always open. */
  .dd-pup::before { opacity: 0; }
  .dd-pup__tag { display: none; }
  .dd-pup__reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   21. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dd-site *, .dd-site *::before, .dd-site *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .dd-rise, .dd-card { opacity: 1 !important; transform: none !important; }
  .dd-hero__plate.is-live { animation: none; }
  .dd-ticker__track, .dd-says__track, .dd-band__rail ul { animation: none; }
}

/* --------------------------------------------------------------------------
   22. Elementor editor affordances
   -------------------------------------------------------------------------- */

.elementor-editor-active .dd-rise,
.elementor-editor-active .dd-card { opacity: 1 !important; transform: none !important; }
.elementor-editor-active .dd-nav { position: absolute; }

/* --------------------------------------------------------------------------
   23. Interior pages — posts, pages, 404
   -------------------------------------------------------------------------- */

.dd-page { padding: calc(var(--s9) + 2rem) 0 var(--s8); background: var(--paper); }
.dd-entry + .dd-entry { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--ink-14); }
.dd-entry header { margin-bottom: var(--s3); }
.dd-entry__body > * + * { margin-top: 1.25rem; }
.dd-entry__body h2 { font-family: var(--font-display); font-size: 2rem; line-height: 1.1; margin-top: var(--s4); }
.dd-entry__body h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; margin-top: var(--s3); }
.dd-entry__body p, .dd-entry__body li { max-width: 68ch; line-height: 1.7; color: var(--ink-70); }
.dd-entry__body ul, .dd-entry__body ol { padding-left: 1.25rem; display: grid; gap: 0.5rem; }
.dd-entry__body a { box-shadow: inset 0 -1px 0 0 var(--ink-14); transition: box-shadow var(--t-fast) ease-out; }
.dd-entry__body a:hover { box-shadow: inset 0 -1px 0 0 var(--clay); color: var(--clay); }
.dd-entry__body img { max-width: 100%; height: auto; border-radius: var(--radius-s); }
.dd-entry__body blockquote {
  font-family: var(--font-display); font-size: 1.5rem; line-height: 1.3;
  padding-left: var(--s3); border-left: 1px solid var(--clay);
}

/* --------------------------------------------------------------------------
   24. Policies page
   -------------------------------------------------------------------------- */

.dd-policies { padding: calc(var(--s9) + 2rem) 0 var(--s8); background: var(--paper); }
.dd-policies__head { max-width: 44ch; margin-bottom: var(--s6); }
.dd-policies__head .dd-eyebrow { margin-bottom: var(--s2); }
.dd-policies__lede { margin-top: var(--s3); line-height: 1.7; color: var(--ink-70); }

.dd-policies__grid { display: grid; gap: var(--s5); }

.dd-policies__rail { display: grid; gap: 2px; align-content: start; }
.dd-policies__rail a {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.25rem;
  font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-70);
  transition: color var(--t-fast) ease-out;
}
/* The marker is a separate element so its scale can animate independently of
   the label colour — a border-left would snap. */
.dd-policies__rail a::before {
  content: ''; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem;
  width: 2px; background: var(--clay);
  transform: scaleY(0); transform-origin: top;
  transition: transform var(--t-mid) var(--ease);
}
.dd-policies__rail a:hover { color: var(--ink); }
.dd-policies__rail a.is-active { color: var(--clay); }
.dd-policies__rail a.is-active::before { transform: scaleY(1); }

.dd-policy { scroll-margin-top: 7rem; }
.dd-policy + .dd-policy { margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--ink-14); }
.dd-policy > * + * { margin-top: 1.25rem; }
.dd-policy__lede { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.4; color: var(--ink); }
.dd-policy h3 { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.2; margin-top: var(--s4); }
.dd-policy p { max-width: 68ch; line-height: 1.7; color: var(--ink-70); }

@media (min-width: 900px) {
  .dd-policies__grid { grid-template-columns: 15rem 1fr; gap: var(--s6); align-items: start; }
  .dd-policies__rail { position: sticky; top: 7rem; }
}

@media (hover: none) and (pointer: coarse) {
  .dd-policies__rail a { padding-block: 1rem; }
}

.dd-pager { margin-top: var(--s6); }
.dd-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 0.5rem;
  font-size: 0.875rem; border-radius: 999px;
  transition: background-color var(--t-fast) ease-out;
}
.dd-pager .page-numbers:hover { background: var(--paper-deep); }
.dd-pager .page-numbers.current { background: var(--ink); color: var(--paper-light); }
.dd-pager .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }