/* ============================================================
   Henry Adams / Adams Web Design
   Direction C, "The Masthead": a bold dark band top and bottom,
   warm paper in between, forest accent, receipt line motif.
   Work section uses layout 3, lead plus two.
   ------------------------------------------------------------
   1.  Tokens
   2.  Base and helpers
   3.  Buttons
   4.  Masthead: nav and hero
   5.  Recent work
   6.  Sections on paper: services, pricing, quote, about
   7.  Contact and footer
   8.  Case study pages
   9.  Motion preferences
   ============================================================ */


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

:root {
  /* colour */
  --paper:         #FBF9F5;  /* body background */
  --paper-sunk:    #F4F0E7;  /* faintly recessed blocks on paper */
  --band:          #1D3528;  /* masthead, deep bottle green */
  --ink:           #171613;
  --muted:         #6E675C;
  --rule:          #E2DBCD;
  --sage:          #DCE5DC;  /* soft forest tint that breaks up the paper */
  --accent:        #1F4D3D;  /* forest */
  --accent-ink:    #FBF9F5;
  --accent-band:   #6FA98F;  /* the forest is unreadable on the band, so this stands in */
  --on-band:       #F4F1EA;
  --on-band-muted: #A8A396;  /* lifted from #9C978B so it clears 5:1 on the green band */
  --band-rule:     rgba(251, 249, 245, 0.14);
  --band-edge:     rgba(251, 249, 245, 0.32);

  /* type: two families, plus mono for the receipt line only */
  --display: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-mono: 0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.625rem;
  --fs-2xl:  clamp(1.75rem, 3.5vw, 2.25rem);
  --fs-hero: clamp(2.5rem, 7vw, 4.75rem);

  /* space */
  --gutter:  clamp(1.25rem, 5vw, 5rem);
  --section: clamp(3.5rem, 9vw, 7rem);
  --maxw:    1240px;

  /* how far the lead screenshot hangs below the masthead */
  --overhang: clamp(2.5rem, 6vw, 4.5rem);
}


/* ---- 2. Base and helpers --------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.wrap {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }

.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }

.section__head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}

.section__lede {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-lg);
  line-height: 1.55;
  max-width: 52ch;
}

/* small uppercase mono label. Used sparingly, not above every heading. */
.label {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

/* the receipt line: url, status, machinery, town */
.receipt {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: lowercase;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  /* Each item carries its separator dot in front. The line is shifted left by
     one dot's width and that strip is clipped, so a dot that starts a wrapped
     line is hidden instead of dangling at the end of the line above. */
  position: relative;
  left: -1.5em;
  clip-path: inset(-0.5em -0.5em -0.5em 1.5em);
}
.receipt span::before {
  content: "\00b7";
  display: inline-block;
  width: 1.5em;
  text-align: center;
  color: var(--rule);
}
.receipt .live { color: var(--accent); font-weight: 500; }

.band .receipt { color: var(--on-band-muted); }
.band .receipt span::before { color: var(--band-rule); }
.band .receipt .live { color: var(--accent-band); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1.25rem;
  font-size: var(--fs-sm);
  text-decoration: none;
}
.skip:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* ---- 3. Buttons ------------------------------------------ */

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1;
  padding: 0.85em 1.4em;
  background: var(--on-band);
  color: var(--band);
  border: 1px solid var(--on-band);
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:hover { background: transparent; color: var(--on-band); }

/* ghost button inside the dark band. --band-rule is right for a hairline
   between sections but disappears as a button edge, so this is stepped up. */
.btn--ghost-dark {
  background: transparent;
  color: var(--on-band);
  border-color: var(--band-edge);
}
.btn--ghost-dark:hover { background: transparent; border-color: var(--on-band); }

.btn--submit {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  padding: 1em 1.75em;
}
.btn--submit:hover { background: var(--on-band); border-color: var(--on-band); color: var(--band); }


/* ---- 4. Masthead: nav and hero --------------------------- */

.band { background: var(--band); color: var(--on-band); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--band-rule);
}

.nav__mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  text-decoration: none;
  color: var(--on-band);
}

.nav__links { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.nav__links a {
  font-size: var(--fs-sm);
  color: var(--on-band-muted);
  text-decoration: none;
  transition: color 180ms ease;
}
.nav__links a:hover { color: var(--on-band); }

/* .nav__links a is (0,1,1) and outranks .btn at (0,1,0), so restate the button */
.nav__links a.btn { color: var(--band); }
.nav__links a.btn:hover { color: var(--on-band); }

/* the toggle only exists on narrow screens, and only when JS is running */
.nav__toggle { display: none; }

@media (max-width: 720px) {
  .js .nav__toggle {
    display: inline-block;
    font-family: var(--mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-band);
    background: transparent;
    border: 1px solid var(--band-edge);
    border-radius: 2px;
    padding: 0.7em 1em;
    cursor: pointer;
  }

  .js .nav__links {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 0.5rem;
  }
  .js .nav__inner { flex-wrap: wrap; }
  .js .nav__links[data-open="true"] { display: flex; }

  .js .nav__links a {
    padding-block: 0.9rem;
    border-top: 1px solid var(--band-rule);
  }
  .js .nav__links a.btn {
    margin-top: 0.9rem;
    text-align: center;
    border: 1px solid var(--on-band);
  }
}

/* The hero is a split: the pitch on the left, the lead screenshot on the right.
   The screenshot carries a negative bottom margin, which shortens the band and
   lets the image hang below it onto the paper. */
.hero { padding-top: clamp(3rem, 8vw, 5.5rem); }

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 3.5rem);
}
@media (min-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: end;
  }
  .hero__copy { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
}

.hero__shot {
  display: block;
  margin-bottom: calc(-1 * var(--overhang));
  position: relative;  /* paints over the paper it hangs onto */
}
/* a faint dark block set just behind and below the screenshot, so it
   sits on something instead of hanging. On hover the screenshot lifts
   up and off it. */
.hero__shot::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(0.3125rem, 0.3125rem);
  background: rgba(23, 22, 19, 0.3);
  border-radius: 2px;
}
.hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  /* against the dark band a warm hairline reads better than the paper rule */
  border: 1px solid rgba(251, 249, 245, 0.22);
  border-radius: 2px;
  /* a dark hairline outside it, so a pale screenshot still has an edge
     where it hangs down onto the paper */
  box-shadow: 0 0 0 1px rgba(23, 22, 19, 0.16);
  position: relative;
  transition: border-color 180ms ease, transform 220ms ease;
}
.hero__shot:hover img { border-color: var(--on-band); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero__shot:hover img,
  .hero__shot:focus-visible img { transform: translate(-0.1875rem, -0.1875rem); }
}
.hero__shot:focus-visible { outline: 2px solid var(--on-band); outline-offset: 6px; }

.hero .label { color: var(--on-band-muted); margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }

.hero h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-hero);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0 0 1.5rem;
  max-width: 12ch; /* breaks as "Websites that / do a job." */
}

.hero__lede {
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.5;
  color: var(--on-band-muted);
  max-width: 48ch;
  margin: 0 0 2.5rem;
}
/* the price is one unit, so it never breaks across two lines */
.hero__lede strong { color: var(--on-band); font-weight: 500; white-space: nowrap; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }


/* ---- 5. Recent work -------------------------------------- */
/* le bar leads from inside the masthead. Its caption lands here, in
   the same column the screenshot occupies above, with the section
   head filling the column beside it. */

.work {
  /* clear the screenshot hanging down out of the band */
  padding-top: calc(var(--overhang) + clamp(1.75rem, 4vw, 2.75rem));
  padding-bottom: var(--section);
}

.work__lead { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) {
  .work__lead {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(2.5rem, 5vw, 4rem);
  }
}

.work__head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.work__lede { margin: 1.25rem 0 0; color: var(--muted); max-width: 34ch; }

/* one clickable card per site */
.card { display: block; text-decoration: none; color: inherit; }

.card__shot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--rule);
  transition: border-color 180ms ease;
}

.card__num {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  color: var(--accent);
  display: block;
  margin-bottom: 0.6rem;
}
.card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 0.6rem;
  max-width: 20ch;
}
.card__line { margin: 0 0 0.9rem; color: var(--muted); font-size: var(--fs-sm); max-width: 44ch; }
.card__cta {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
  margin-top: 0.9rem;
  transition: color 180ms ease;
}
.card__cta i { font-style: normal; display: inline-block; transition: transform 180ms ease; }

.card:hover .card__shot { border-color: var(--accent); }
.card:hover .card__cta { color: var(--accent); }
.card:hover .card__cta i { transform: translateX(3px); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

/* layout 3: lead plus two. The lead card is caption only, since its
   screenshot is up in the masthead. */
.card--lead .card__title { font-size: var(--fs-2xl); line-height: 1.08; max-width: 18ch; }
.card--lead:hover .card__title { color: var(--accent); }
.card--lead .card__title { transition: color 180ms ease; }

.leadpair__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--rule);
}
@media (min-width: 720px) {
  .leadpair__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; }
}
.leadpair__pair .card__body {
  background: var(--sage);
  padding: 1.25rem 1.5rem 1.5rem;
}
.leadpair__pair .card__shot { border-bottom: 0; border-radius: 2px 2px 0 0; }
.leadpair__pair .card__cta { margin-top: 0.5rem; }
.leadpair__pair .receipt { color: #5E584E; } /* muted is 4.3:1 on sage, this is 5.5:1 */
.leadpair__pair .card__title { font-size: var(--fs-lg); max-width: 18ch; }


/* ---- 6. Sections on paper -------------------------------- */

/* services: hairline separated columns, not a soft shadow card grid */
.services { border-top: 1px solid var(--rule); }

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 860px) {
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
}

.service { border-top: 2px solid var(--accent); padding-top: 1.25rem; }
.service h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-lg);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  max-width: 20ch;
}
.service p { margin: 0; color: var(--muted); }

/* the owner app callout: a sage panel, so it reads as the stand-out
   offer rather than a fourth card */
.services__app {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--sage);
  border-left: 3px solid var(--accent);
}
@media (min-width: 860px) {
  .services__app {
    display: grid;
    grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
    column-gap: 3rem;
    align-items: start;
  }
  .services__app p,
  .services__app-link { grid-column: 2; justify-self: start; }
  .services__app h3 { grid-row: 1 / span 2; }
}
.services__app h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-xl);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
}
.services__app p { margin: 0 0 1rem; max-width: 56ch; }
.services__app-link {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}
.services__app-link i { font-style: normal; display: inline-block; transition: transform 180ms ease; }
.services__app-link:hover { color: var(--accent); }
.services__app-link:hover i { transform: translateX(3px); }

.services__foot {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 68ch;
}
.services__foot .label { display: block; margin-bottom: 0.5rem; color: var(--ink); }

/* pricing: two rows, priced like a menu rather than boxed in cards */
.pricing { background: var(--paper-sunk); border-block: 1px solid var(--rule); }

.price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-block: 1.75rem;
  border-top: 1px solid var(--rule);
}
.price:last-of-type { border-bottom: 1px solid var(--rule); }

.price__main { max-width: 46ch; }
.price__main h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
}
.price__main p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

.price__tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: -0.03em;
  color: var(--accent);
  margin: 0;
  white-space: nowrap;
}
.price__tag span {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-transform: lowercase;
  margin-right: 0.35em;
}

.price__note {
  margin: 1.5rem 0 0;
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 52ch;
}

/* testimonial: one pull quote on the dark band. No portrait, no oversized
   decorative quote mark, and the attribution set large enough to register as a real
   client rather than a caption. */
.quote { padding-block: clamp(3.5rem, 8vw, 5.5rem); }

.quote__inner { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 900px) {
  .quote__inner {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 0.45fr);
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: end;
  }
}

/* the question Nick was asked, so the answer reads as a reply rather than copy */
.quote__ask {
  margin: 0 0 1.25rem;
  max-width: 52ch;
  color: var(--on-band-muted);
  font-size: var(--fs-base);
}

.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.625rem, 3.8vw, 2.5rem);
  line-height: 1.16;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
  /* hang the opening quote mark so the text edge stays aligned with the question */
  text-indent: -0.42em;
}

.quote__by { padding-top: 1.25rem; border-top: 1px solid var(--band-rule); }
.quote__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  margin: 0;
}
.quote__role { margin: 0.15rem 0 0.9rem; color: var(--on-band-muted); font-size: var(--fs-sm); }

/* about */
.about { border-top: 1px solid var(--rule); }

.about__inner { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 800px) {
  .about__inner {
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 0.65fr);
    gap: 3.5rem;
    align-items: start;
  }
}

/* headshot, 4:5 */
.about__photo {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--band);
}

.about__text h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 1rem;
}
.about__text p { margin: 0 0 1.125rem; max-width: 56ch; }
.about__text .receipt { margin-top: 1.75rem; max-width: none; }


/* ---- 7. Contact and footer ------------------------------- */

.contact { padding-block: var(--section); }

.contact__inner { display: grid; grid-template-columns: 1fr; gap: 3rem; }
@media (min-width: 880px) {
  .contact__inner {
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
    gap: 4.5rem;
    align-items: start;
  }
}

.contact__pitch h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0 0 1.25rem;
}
.contact__pitch p { margin: 0; color: var(--on-band-muted); max-width: 44ch; }

.contact__direct { margin: 2.5rem 0 0; }
.contact__direct div {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  padding-block: 0.9rem;
  border-top: 1px solid var(--band-rule);
}
.contact__direct dt {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--on-band-muted);
  min-width: 5rem;
}
.contact__direct dd { margin: 0; font-size: var(--fs-sm); }
.contact__direct a { color: var(--on-band); text-decoration: none; border-bottom: 1px solid var(--band-edge); }
.contact__direct a:hover { border-bottom-color: var(--on-band); }

/* form */
.form__hp { position: absolute; left: -9999px; }

.field { margin-bottom: 1.25rem; }
.field--pair { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 520px) {
  .field--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--on-band);
  margin-bottom: 0.45rem;
}
.field__opt { color: var(--on-band-muted); font-weight: 400; }

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--on-band);
  background: rgba(251, 249, 245, 0.05);
  border: 1px solid var(--band-edge);
  border-radius: 2px;
  padding: 0.75em 0.9em;
  transition: border-color 180ms ease, background 180ms ease;
}
.field textarea { resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--on-band-muted); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--on-band);
  background: rgba(251, 249, 245, 0.09);
}
/* the dark band already supplies contrast, so a ring here would be noise */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline-offset: 1px; }

/* the native dropdown paints its list with the page colours, so keep the
   option text dark enough to read in either rendering */
.field select option { color: var(--ink); background: var(--paper); }

.form__note {
  margin: 1rem 0 0;
  font-size: var(--fs-sm);
  color: var(--on-band-muted);
}

/* footer */
.foot { border-top: 1px solid var(--band-rule); padding-block: 2.5rem 3rem; }

.foot__inner { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: baseline; }

.foot__mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  margin: 0;
}

.foot__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot__links a {
  font-size: var(--fs-sm);
  color: var(--on-band-muted);
  text-decoration: none;
}
.foot__links a:hover { color: var(--on-band); }

.foot__fine {
  flex-basis: 100%;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--band-rule);
  font-size: var(--fs-sm);
  color: var(--on-band-muted);
}


/* ---- 8. Case study pages --------------------------------- */
/* Same masthead, same overhanging screenshot as the home page, then
   editorial blocks: a narrow heading column beside the content. */

.hero--case h1 {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  line-height: 1.02;
  max-width: 15ch;
}
.hero--case .hero__lede { margin-bottom: 1.5rem; }
.hero--case .receipt { margin-bottom: 2rem; }

/* On wide screens the client's site is the first thing seen: the
   screenshot sits level with the headline instead of at the foot of the
   copy, where a laptop-height window pushed it below the fold. */
@media (min-width: 900px) {
  .hero--case { padding-top: clamp(2rem, 4vw, 3.5rem); }
  .hero--case .hero__inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
  }
  .hero--case h1 { font-size: clamp(2.25rem, 4.2vw, 3.5rem); max-width: 16ch; }
  .hero--case .hero__shot { margin-bottom: 0; margin-top: 0.25rem; }
  .band:has(.hero--case) + main .facts { padding-top: clamp(2.5rem, 5vw, 3.5rem); }
}
/* on tall windows there is room for everything, so the screenshot
   centres against the copy rather than leaving empty band beneath it */
@media (min-width: 900px) and (min-height: 820px) {
  .hero--case .hero__inner { align-items: center; }
  .hero--case .hero__shot { margin-top: 0; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
}

.crumb { color: var(--on-band-muted); text-decoration: none; }
.crumb:hover { color: var(--on-band); }
.hero--case .hero__lede a { color: var(--on-band); text-decoration: none; border-bottom: 1px solid var(--band-edge); }
.hero--case .hero__lede a:hover { border-bottom-color: var(--on-band); }

/* the facts sit directly under the hanging screenshot */
.facts {
  padding-top: calc(var(--overhang) + clamp(2rem, 4vw, 3rem));
}
.facts dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 2rem;
  margin: 0;
  padding-bottom: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .facts dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.facts dt { margin-bottom: 0.35rem; }
.facts dd { margin: 0; font-size: var(--fs-sm); line-height: 1.5; }
.facts a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent); }
.facts a:hover { color: var(--accent); }

.cs-block {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem 3rem;
  padding-block: clamp(3rem, 7vw, 5rem);
}
.cs-block + .cs-block { border-top: 1px solid var(--rule); }
@media (min-width: 900px) {
  .cs-block { grid-template-columns: minmax(0, 0.3fr) minmax(0, 0.7fr); }
}
.cs-block h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-2xl);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 14ch;
}
.cs-block__body > p { margin: 0 0 1.125rem; max-width: 60ch; }
.cs-block__body > p:last-child { margin-bottom: 0; }
.cs-block__body .services__grid { margin-top: 2.5rem; }
@media (min-width: 860px) {
  .cs-block__body .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* phone screenshots: a row on wide screens, a swipeable strip on phones */
.phones {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 72%;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
}
@media (min-width: 760px) {
  .phones { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; gap: 2rem; }
}
.phones li { scroll-snap-align: start; }
.phones img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper-sunk);
}
.phones h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--fs-base);
  letter-spacing: -0.015em;
  margin: 1rem 0 0.3rem;
}
.phones p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.cs-block__body > .phones:first-child { margin-top: 0; }

/* the interview: question in mono, answer set large, one after another */
.interview { background: var(--paper-sunk); border-block: 1px solid var(--rule); }
.interview ol { list-style: none; margin: 0; padding: 0; }
.interview li { padding-block: 1.5rem; border-top: 1px solid var(--rule); }
.interview li:first-child { border-top: 0; padding-top: 0; }
.interview__q {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  color: var(--muted);
  margin: 0 0 0.6rem;
}
.interview blockquote { margin: 0; }
.interview blockquote p {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 40ch;
  text-indent: -0.42em;
}
.interview__by { margin: 1.5rem 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* closing call to action on the band */
.cs-cta { padding-block: var(--section); }
.cs-cta .contact__direct { max-width: 34rem; }
.cs-cta .hero__actions { margin-top: 2rem; }

.more .leadpair__pair { margin-top: 0; }


/* The le bar wordmark drop. A screenshot of the live hero with the
   wordmark removed, and the real wordmark laid over it in three
   clipped pieces, using le bar's own timing. The settled state is the
   default, so without JS or with reduced motion it is a still image.
   Splash offsets are in cqw (the wordmark is the container), converted
   from le bar's px values at its 273.9px mobile wordmark width (a 428px phone). */
.drop {
  position: relative;
  overflow: hidden;
  container-type: inline-size; /* bubble sizes scale with the phone */
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.phones .drop img.drop__base { border: 0; border-radius: 0; }

.drop__mark {
  position: absolute;
  left: 18%;
  top: 39.5%;
  width: 64%;
  aspect-ratio: 849 / 351;
  container-type: inline-size;
}
.phones .drop__mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  border-radius: 0;
  background: none;
}
/* le bar's fixed nav bar and bottom ticker, cut from the same screenshot
   and laid back on top, so falling pieces and rising bubbles pass behind
   them as they do on the live site */
.drop__nav,
.drop__ticker {
  position: absolute;
  left: 0;
  right: 0;
  background: url("../images/projects/le-bar-mobile-hero-base.webp") center top / 100% auto no-repeat;
}
.drop__nav    { top: 0; height: 7.49%; }
.drop__ticker { bottom: 0; height: 6.15%; background-position: center bottom; }

/* le bar's champagne bubbles: six drifting up the pink on staggered loops.
   Sizes converted from le bar's px at a 428px screen (1px = 0.2336cqw). */
.drop__bubbles span {
  position: absolute;
  bottom: -4.67cqw;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  opacity: 0;
}
.drop__bubbles span:nth-child(1) { left: 8%;  width: 1.87cqw; height: 1.87cqw; animation-duration: 14s; animation-delay: 0s; }
.drop__bubbles span:nth-child(2) { left: 24%; width: 1.17cqw; height: 1.17cqw; animation-duration: 11s; animation-delay: 3s; }
.drop__bubbles span:nth-child(3) { left: 46%; width: 1.64cqw; height: 1.64cqw; animation-duration: 13s; animation-delay: 6s; }
.drop__bubbles span:nth-child(4) { left: 64%; width: 0.93cqw; height: 0.93cqw; animation-duration: 10s; animation-delay: 1.5s; }
.drop__bubbles span:nth-child(5) { left: 80%; width: 1.4cqw; height: 1.4cqw; animation-duration: 12s; animation-delay: 7s; }
.drop__bubbles span:nth-child(6) { left: 92%; width: 1.17cqw; height: 1.17cqw; animation-duration: 15s; animation-delay: 4s; }

.drop__text     { clip-path: inset(0 7.5% 0 24%); }
.drop__bottle-l { clip-path: inset(0 85.75% 0 6.8%); }
.drop__bottle-r { clip-path: inset(0 77.4% 0 14.25%); }

.drop__splash {
  position: absolute;
  width: 2.19cqw;
  height: 3.29cqw;
  background: linear-gradient(180deg, rgba(120, 18, 34, 0.97) 0%, rgba(72, 8, 20, 0.94) 100%);
  border-radius: 50% 50% 40% 40% / 35% 35% 70% 70%;
  opacity: 0;
  transform-origin: 50% 100%;
}
.drop__splash--l { left: 10%; top: 18%; }

/* le bar's tagline, cut out on a transparent background so it can type
   in after the drop. Its caret is a blinking bar at the reveal edge. */
.phones .drop img.drop__tagline {
  position: absolute;
  left: 0;
  top: 52.92%;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  opacity: 0.85;
}
.drop__caret {
  position: absolute;
  top: 54.3%;
  width: 1.2%;
  height: 3.6%;
  background: #1F271A;
  opacity: 0;
}
.drop.is-typing .drop__caret { opacity: 0.85; animation: drop-caret .9s steps(2, end) infinite; }
@keyframes drop-caret { 50% { opacity: 0; } }
.drop__splash--r { left: 18.5%; top: 13%; }

/* AI answer screenshots on the le bar case study */
.ai-shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 2rem 0 0;
}
@media (min-width: 760px) { .ai-shots { grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); align-items: start; } }
.ai-shots figure { margin: 0; }
.ai-shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
}
.ai-shots figcaption { margin-top: 0.6rem; }
.cs-block__body .small { color: var(--muted); font-size: var(--fs-sm); }
.ai-shots + .small { margin-top: 1.5rem; }

.drop__replay {
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: var(--fs-mono);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  padding: 0 0 2px;
  cursor: pointer;
}
.drop__replay:hover { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) {
  /* armed by JS: the pieces wait above the screen until the drop plays */
  .drop.is-armed .drop__mark img { transform: translateY(-1145%); }
  .drop__bubbles span { animation-name: drop-rise; animation-timing-function: linear; animation-iteration-count: infinite; }
  .drop.is-playing .drop__text     { animation: drop-fall 1.2s cubic-bezier(.45, .05, .4, 1) .35s both; }
  .drop.is-playing .drop__bottle-l { animation: drop-fall .55s cubic-bezier(.45, .05, .4, 1) 1.9s both; }
  .drop.is-playing .drop__bottle-r { animation: drop-fall .55s cubic-bezier(.45, .05, .4, 1) 2.4s both; }
  .drop.is-playing .drop__splash--l { animation: splash-l 1.15s linear 2.26s both; }
  .drop.is-playing .drop__splash--r { animation: splash-r 1.2s linear 2.76s both; }
}

/* the phone is 216cqw tall, so -240cqw carries a bubble off the top */
@keyframes drop-rise {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(-240cqw); opacity: 0; }
}
@keyframes drop-fall {
  0%   { transform: translateY(-1145%); }
  65%  { transform: translateY(0); }
  78%  { transform: translateY(2.56cqw); }
  90%  { transform: translateY(-0.73cqw); }
  100% { transform: translateY(0); }
}
@keyframes splash-l {
  0%   { opacity: 0; transform: translate(0, 0) scale(.55); }
  6%   { opacity: 1; transform: translate(-1.1cqw, -1.83cqw) scale(1); }
  20%  { opacity: 1; transform: translate(-4.38cqw, -5.48cqw); }
  35%  { opacity: 1; transform: translate(-8.03cqw, -6.94cqw); }
  50%  { opacity: 1; transform: translate(-11.68cqw, -4.38cqw); }
  65%  { opacity: 1; transform: translate(-15.33cqw, 2.92cqw); }
  80%  { opacity: 1; transform: translate(-18.98cqw, 13.87cqw) scaleY(1.3) scaleX(.85); }
  90%  { opacity: 1; transform: translate(-21.18cqw, 21.91cqw) scaleY(.3) scaleX(2.4); }
  100% { opacity: 0; transform: translate(-21.18cqw, 22.64cqw) scaleY(.15) scaleX(2.8); }
}
@keyframes splash-r {
  0%   { opacity: 0; transform: translate(0, 0) scale(.55); }
  6%   { opacity: 1; transform: translate(1.1cqw, -2.19cqw) scale(1); }
  20%  { opacity: 1; transform: translate(4.75cqw, -6.21cqw); }
  35%  { opacity: 1; transform: translate(8.76cqw, -7.67cqw); }
  50%  { opacity: 1; transform: translate(12.41cqw, -4.75cqw); }
  65%  { opacity: 1; transform: translate(16.79cqw, 2.92cqw); }
  80%  { opacity: 1; transform: translate(21.18cqw, 14.6cqw) scaleY(1.3) scaleX(.85); }
  90%  { opacity: 1; transform: translate(23.37cqw, 23.37cqw) scaleY(.3) scaleX(2.4); }
  100% { opacity: 0; transform: translate(23.37cqw, 24.1cqw) scaleY(.15) scaleX(2.8); }
}

/* a single client quote to close a case study */
.verdict { max-width: 46rem; }
.cs-block__body > p + .verdict { margin-top: 2rem; }
.verdict blockquote { margin: 0; }
.verdict blockquote p {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.375rem, 3vw, 1.875rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  text-indent: -0.42em;
}
.verdict__by { margin: 1rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.verdict__by a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); }
.verdict__by a:hover { color: var(--accent); }

/* marks copy that still needs the owner to confirm it */
.confirm { background: #FFE58A; color: var(--ink); padding: 0 0.2em; }


/* ---- 9. Motion preferences ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}