/* ============================================================
   Creative Baguette — global styles
   Re-platform of creativebaguette.com. Same look/feel as the
   Elementor site: side rail nav, Akzidenz Grotesk, yellow/black.
   ============================================================ */

@font-face {
  font-family: "Akzidenz Grotesk";
  src: url("../fonts/akzidenzgroteskbe-regular-webfont.woff") format("woff");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Akzidenz Grotesk";
  src: url("../fonts/akzidenzgroteskbe-md-webfont.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/InstrumentSans-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: url("../fonts/NeueHaasUnicaPro-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: url("../fonts/NeueHaasUnicaPro-Medium.ttf") format("truetype");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: url("../fonts/NeueHaasUnicaPro-Bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}

:root {
  --yellow: #fef757;
  --black: #111111;
  --ink: #1c1c1c;
  --grey-card: #c9c9c4;
  --grey-light: #eceae3;
  --rail-bg: #f4f3ee;
  --white: #ffffff;
  --rail-w: 88px;
  --box-w: 1240px;   /* boxed sections: three ways, work, faq, contact */
  --font: Arial, "Helvetica Neue", sans-serif;   /* body = Arial per Manon (clear bold contrast); headers = Akzidenz */
  --font-head: "Neue Haas Unica", "Helvetica Neue", Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
strong { font-weight: 700; }
a { color: inherit; }

/* ---------- side rail nav ---------- */
.rail {
  position: fixed; inset: 0 auto 0 0;
  width: var(--rail-w);
  background: var(--rail-bg);
  display: flex; flex-direction: column; align-items: center;
  padding: 22px 0 26px;
  z-index: 100;
}
.rail__logo { width: 46px; margin-bottom: 44px; transform: rotate(25deg); transition: transform .8s ease; }
.rail__logo:hover { transform: rotate(385deg); }
.rail__nav { display: flex; flex-direction: column; gap: 30px; flex: 1; justify-content: center; margin-top: -40px; }
.rail__item {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 14px; text-decoration: none; color: var(--ink);
  text-align: center; line-height: 1.15;
}
.rail__item img { width: 23px; height: 23px; }
.rail__item:hover { font-weight: 500; }
.rail__cta {
  color: var(--ink); text-decoration: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 500;
}
.rail__cta img { width: 44px; height: 44px; }

/* floating Google reviews badge */
.gbadge { position: fixed; right: 0; bottom: 90px; z-index: 90; background: var(--white); padding: 10px 12px; border: 1px solid #ececec; border-right: 0; }
.gbadge img { width: 86px; }

/* mobile top bar */
.topbar { display: none; }
.topbar__drawer { display: none; }
@media (max-width: 900px) {
  .topbar {
    display: flex; position: sticky; top: 0; z-index: 200;
    background: var(--white);
    box-shadow: 0 2px 10px rgba(0,0,0,.07);
    padding: 6px 18px; justify-content: space-between; align-items: center;
  }
  .topbar__logo img { width: 30px; transform: rotate(25deg); }
  .topbar__book {
    font: 700 15px var(--font); text-decoration: none; color: var(--ink);
    border: 1px solid var(--ink); background: var(--yellow);
    padding: 9px 18px; margin: 0 14px;
  }
  .topbar__menu {
    background: none; border: 0; cursor: pointer; padding: 4px;
    display: flex; flex-direction: column; gap: 5px; z-index: 220; position: relative;
  }
  .topbar__menu span {
    display: block; width: 24px; height: 3px; background: var(--ink); border-radius: 2px;
    transition: transform .3s ease, opacity .2s ease;
  }
  .topbar__menu.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .topbar__menu.open span:nth-child(2) { opacity: 0; }
  .topbar__menu.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* drawer: circle-reveals from the hamburger */
  .drawer__close {
    position: absolute; top: 14px; right: 18px;
    background: none; border: 0; cursor: pointer;
    font-size: 40px; line-height: 1; font-family: var(--font); color: var(--ink);
  }
  .topbar__drawer {
    display: flex; flex-direction: column; justify-content: center; gap: 26px;
    position: fixed; inset: 0; z-index: 210;
    background: var(--yellow);
    padding: 40px 32px;
    clip-path: circle(0px at calc(100% - 42px) 32px);
    transition: clip-path .55s cubic-bezier(.6, .05, .3, 1);
    pointer-events: none; visibility: hidden;
  }
  .topbar__drawer.open {
    clip-path: circle(150% at calc(100% - 42px) 32px);
    pointer-events: auto; visibility: visible;
  }
  .topbar__drawer a {
    text-decoration: none; font-family: var(--font-head); font-weight: 700;
    font-size: 30px; text-transform: uppercase;
    opacity: 0; transform: translateY(10px);
    transition: opacity .3s ease, transform .3s ease;
  }
  .topbar__drawer.open a { opacity: 1; transform: none; }
  .topbar__drawer.open a:nth-child(1) { transition-delay: .18s; }
  .topbar__drawer.open a:nth-child(2) { transition-delay: .24s; }
  .topbar__drawer.open a:nth-child(3) { transition-delay: .30s; }
  .topbar__drawer.open a:nth-child(4) { transition-delay: .36s; }
  .topbar__drawer.open a:nth-child(5) { transition-delay: .42s; }
  .topbar__drawer.open a:nth-child(6) { transition-delay: .48s; }
  .topbar__drawer.open a:nth-child(7) { transition-delay: .54s; }
  @media (prefers-reduced-motion: reduce) {
    .topbar__drawer { transition: none; }
    .topbar__drawer a { transition: none; opacity: 1; transform: none; }
  }
}

html, body { overflow-x: clip; }
main { overflow-x: clip; }
main { margin-left: var(--rail-w); background: var(--white); }
/* content spans wide; the deep left indent is reserved for hero/text sections */
.wrap { margin: 0 auto; padding: 0 70px; }
.wrap--indent { padding-left: 120px; }

/* ---------- full-bleed helpers (lines + colour bands span the whole screen) ---------- */
.rule {
  border: 0; height: 2px; background: var(--ink);
  width: calc(100vw - var(--rail-w));
  margin-left: calc((100% - (100vw - var(--rail-w))) / 2);
}
.section-title { position: relative; padding-bottom: 14px; margin-bottom: 60px; }
.section-title::after {
  content: ""; position: absolute; bottom: 0; height: 2px; background: var(--ink);
  left: calc((100% - (100vw - var(--rail-w))) / 2);
  width: calc(100vw - var(--rail-w));
}

/* ---------- typography ---------- */
h1, h2, h3, .display, .step__num {
  font-family: var(--font-head);
  font-weight: 700; letter-spacing: 0.01em; line-height: 1.05;
  text-transform: uppercase;
}
.display { font-size: clamp(44px, 7vw, 96px); }
h2 { font-size: 45px; }
h3 { font-size: clamp(18px, 2vw, 24px); }
.kicker { font-size: 14px; font-style: italic; color: #555; }
.hl { background: var(--yellow); padding: 0 4px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: 500 17px var(--font);
  border: 1px solid var(--ink); background: var(--white); color: var(--ink);
  padding: 12px 26px; transition: all .15s ease;
}
.btn:hover { background: var(--ink); color: var(--white); }
.btn--solid { background: var(--yellow); border-color: var(--yellow); }
.btn--solid:hover { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ---------- hero ---------- */
.hero { padding-block: 56px 140px; }
.hero.wrap { padding-left: 44px; padding-right: 0; }
.hero__top {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; padding-left: 10%;
  margin-right: calc((100% - (100vw - var(--rail-w))) / 2);   /* photo column reaches the screen edge */
}
.hero__wordmark { width: min(420px, 90%); }
.hero__photo img { width: 100%; height: clamp(320px, 24vw, 440px); object-fit: cover; object-position: right center; }
.hero .rule { margin-top: 44px; }
.hero__bottom {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px;
  /* rule sits exactly mid-gap between headline lines: pull up by half the line box */
  margin-top: calc(-0.5 * 1.32 * clamp(32px, 3.6vw, 66px) - 0.66 * clamp(32px, 3.6vw, 66px));
}
.hero__pitch { padding-top: 120px; max-width: 470px; }
.hero__tagline { max-width: 620px; }
.hero__tagline .display { font-size: clamp(32px, 3.6vw, 66px); line-height: 1.32; }
.hero__sub { margin-top: 14px; font-size: 16px; }
.hero__pitch p:first-child { font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1.2; }
.hero__pitch p + p { margin-top: 8px; font-size: 18px; }
.hero__pitch .btn { margin-top: 22px; }

/* ---------- trust strip (wide, colour logos, thick rule below) ---------- */
.trust { padding: 34px 7% 0; border-bottom: 2px solid var(--ink); }
.trust__line { text-align: center; font-size: 14px; font-weight: 500; margin-bottom: 20px; }
/* auto-scrolling logo marquee (seamless: track holds two copies, shifts -50%) */
.trust__marquee {
  overflow: hidden; padding-bottom: 30px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.trust__track {
  display: flex; align-items: center; width: max-content;
  animation: trust-marquee 85s linear infinite;
}
.trust__track img { height: 56px; width: auto; flex: none; margin-right: 80px; }
@keyframes trust-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* desktop only: logos sit greyscale, colour in on hover; scroll pauses on hover */
@media (hover: hover) {
  .trust__track img { filter: grayscale(1); opacity: .55; transition: filter .35s ease, opacity .35s ease; }
  .trust__track img:hover { filter: none; opacity: 1; }
  .trust__marquee:hover .trust__track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }
}

/* ---------- check section (black card) ---------- */
.check { padding: 140px 70px; }
.check__stage {
  background: url("../images/creative_baguette_warehouse_office.png") center/cover;
  max-width: 1300px; margin: 0 auto; padding: 90px 6%;
}
.check__card {
  background: rgba(17,17,17,.94); color: var(--white);
  max-width: 1080px; margin: 0 auto; padding: 80px 70px;
}
.check__card h2 { margin-bottom: 40px; }
.check__card p { font-size: 19px; margin-top: 16px; color: #ddd; }
.check__card strong { color: var(--white); }
.check__card .hl { color: var(--black); font-weight: 700; }

/* ---------- three ways ---------- */
.ways { padding-block: 140px; }

.ways__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: var(--box-w); margin: 0 auto; }
.ways__card { padding: 70px 42px 60px; display: flex; flex-direction: column; min-height: 460px; }
.ways__card--grey { background: var(--grey-card); }
.ways__card--light { background: var(--grey-light); }
.ways__card--yellow { background: var(--yellow); }
.ways__card h3 { text-transform: none; margin-bottom: 2px; font-size: clamp(26px, 2.6vw, 32px); line-height: 1.15; }
.ways__card .kicker { margin-bottom: 16px; }
.ways__card p { font-size: 18px; flex: 1; }
.ways__card .btn { align-self: center; margin-top: 30px; background: transparent; }
.ways__card .btn:hover { background: var(--ink); color: var(--white); }

/* ---------- quote ---------- */
.quote { padding-block: 90px 140px; }
.quote__row { max-width: 860px; margin: 0 auto; padding-left: 0; text-align: center; }
.quote__row > div { margin-top: 36px; }
.quote blockquote { font-size: 26px; line-height: 1.45; }
.quote cite { display: block; font-style: normal; font-size: 14px; margin-top: 14px; }
.quote cite small { display: block; font-style: italic; color: #666; }

/* ---------- process (staggered containers + tall baguette) ---------- */
.process { padding-block: 0 30px; }
.process.wrap { padding-right: 0; }   /* beige/yellow bands reach the screen edge naturally */
.step__title { display: flex; align-items: stretch; gap: 0; margin-bottom: 0; }
.step__num { order: -1; align-self: center; margin-right: 46px; }
.step__title::before { content: ""; width: clamp(240px, 28%, 520px); background: var(--grey-light); }
.step__num { font-size: 45px; flex: 0 0 auto; }
.step__title h2 { background: none; padding: 26px 0 26px 44px; flex: 1; align-self: center; }

/* steps 1 + 2 share a grid; step 1 sits on a full-width cream band */
.process12 { display: grid; grid-template-columns: 5fr 7fr; column-gap: 0; }
.process12 .step__title--1 { grid-column: 1 / -1; }
.band1 {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 5fr 7fr; column-gap: 0;
  background: var(--grey-light);
  margin-left: -70px;   /* cream reaches the menu, no white gap */
  padding: 0 0 120px 0;
}
.baguette-figure {
  position: relative; z-index: 2; align-self: start;
  /* keep the figure's row contribution (340px) below the text column's height,
     so the band always closes 120px under the text; photo hangs the rest */
  margin: 40px 0 calc(300px - min(80vh, 820px)) 0;
}
.baguette-figure img { height: min(80vh, 820px); width: auto; max-width: none; }
.panel--1 { padding: 70px 120px 0 110px; max-width: 860px; }
.step__title--2 { grid-column: 2; margin-top: 110px; }
.step__title--2::before { display: none; }
.step__title--2 h2 { padding-left: 0; }
.step__title--2 h2 { background: none; padding: 0; }
.panel--2 { grid-column: 2; padding: 26px 120px 0 82px; }

.pbody { max-width: 760px; }
.pbody .lead { font-family: "Neue Haas Unica", Arial, sans-serif; font-weight: 700; font-size: 21px; margin-bottom: 28px; }
.pbody p { font-size: 16.5px; line-height: 1.75; margin-top: 14px; max-width: 420px; }
.step--3 .pbody p { max-width: 300px; }
.pbody .hl { font-weight: 500; }

/* step 3: yellow band */
.step--3 { margin-top: 100px; }
.step--3 .step__title::before { background: var(--yellow); }
.step--3 .hl { background: var(--white); font-weight: 700; }
.step--3 .step__body {
  background: var(--yellow); padding: 95px 100px 90px 120px;
  display: grid; grid-template-columns: 300px 300px 1fr; gap: 90px;
  margin-left: calc((100% - (100vw - var(--rail-w))) / 2 - 70px);
}
.step--3 .step__photo { margin: 0 -100px 0 0; display: flex; justify-content: flex-end; align-items: start; }
.step--3 .step__photo img { width: 80%; height: calc(100% + 100px); object-fit: cover; }

/* ---------- pricing ---------- */
.pricing { padding-block: 90px 90px; }
.pricing__row { display: grid; grid-template-columns: 1.4fr .6fr; gap: 40px; align-items: center; max-width: 980px; margin: 0 auto; }
.pricing h2 { text-transform: none; font-size: 24px; margin-bottom: 18px; }
.pricing li { list-style: none; font-size: 18px; font-weight: 500; margin-bottom: 4px; }
.pricing .note { font-size: 14px; color: #555; margin-top: 14px; }

/* ---------- work / people we've helped ---------- */
.work { padding-block: 140px 160px; }

.work__carousel { display: contents; }   /* desktop: wrapper is invisible, grid unchanged */
.work__nav { display: none; }
.work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: var(--box-w); margin: 0 auto; }
.work__card { text-decoration: none; }
/* uniform preview size across every work card (Manon 2026-07-15): use the
   widest real image's own ratio as the shared box — that image needs zero
   crop, every narrower/taller one crops ONLY from the bottom (object-
   position: top), width always fits edge to edge, never cropped on the
   sides. ⚠️ Recheck this ratio whenever a new hub image is added — it must
   always match whichever current image is widest (updated 2026-07-15 to
   ADX Accountants, 1400×572, after Frankston Money's 20:9 was exceeded). */
.work__card img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; object-position: top; border: 1px solid #e4e4df; }
.work__card h3 { text-transform: uppercase; font-size: 18px; margin-top: 14px; }
.work__card .kicker { display: block; margin-top: 2px; }
.work__card .services { font-size: 12px; margin-top: 6px; color: #444; }
.work__more { text-align: center; margin-top: 40px; }
.faq details { max-width: var(--box-w); margin-inline: auto; }

/* ---------- testimonials ---------- */
.testimonials { display: grid; grid-template-columns: repeat(3, 1fr); }
.testimonial { padding: 100px 80px; display: flex; flex-direction: column; }
.testimonial--grey { background: var(--grey-card); }
.testimonial--light { background: var(--grey-light); }
.testimonial--yellow { background: var(--yellow); }
.testimonial h3 { text-transform: none; font-family: var(--font-head); font-weight: 700; font-size: 21px; line-height: 1.4; margin-bottom: 56px; }
.testimonial p { font-size: 18px; margin-bottom: 10px; flex-grow: 0; }
.testimonial footer { margin-top: auto; display: flex; gap: 12px; align-items: center; padding-top: 22px; }
.testimonial footer img { width: 55px; height: 55px; border-radius: 50%; object-fit: cover; }
.testimonial footer strong { display: block; font-size: 14px; font-style: italic; }
.testimonial footer span { font-size: 12px; font-style: italic; }

/* ---------- FAQ ---------- */
.faq { padding-block: 140px; }

.faq details { border-bottom: 1px solid #d8d8d3; }
.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-head); font-weight: 500; font-size: 18px; padding: 20px 4px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "↓"; font-size: 18px; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq .a { padding: 0 4px 22px; font-size: 18px; max-width: 760px; }
.faq .a p + p { margin-top: 8px; }

/* ---------- final CTA ---------- */
.final { padding-block: 140px; text-align: center; }
.final h2 { text-transform: none; font-size: 26px; }
.final p { font-size: 18px; max-width: 520px; margin: 12px auto 0; }
.final .strong { font-weight: 700; margin-top: 10px; }
.final .quiet { font-style: italic; font-size: 14px; color: #555; }
.final .btn { margin-top: 26px; }

/* ---------- duffy break ---------- */
.duffy { position: relative; padding: 0 8%; }
.duffy img.bg { width: 100%; height: 560px; object-fit: cover; filter: grayscale(1); }
.duffy .card {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  background: var(--white); padding: 56px;
}
.duffy .card img { width: 300px; }

/* ---------- contact ---------- */
.contact { padding-block: 90px; }
.contact__inner { max-width: 560px; margin: 0 auto; }
.contact h2 { text-transform: none; font-size: 24px; margin-bottom: 24px; text-align: center; }
.contact iframe { width: 100%; border: 0; min-height: 560px; }
.contact__doodle { width: 150px; margin: 0 auto 28px; }
.contact__placeholder {
  border: 1px dashed #bbb; padding: 40px 30px; text-align: center; font-size: 18px;
}
.contact__placeholder p + p { margin-top: 10px; }

/* ---------- journey strip (above footer) ---------- */
.journey { display: grid; grid-template-columns: 1.1fr .9fr 1.1fr 1.1fr; gap: 40px; align-items: center; padding-block: 60px 120px; }
.journey p { font-size: clamp(22px, 2.2vw, 34px); text-align: center; line-height: 1.3; }
.journey img, .journey video { border: 1px solid #e4e4df; width: 100%; }

/* ---------- footer (wordmark overlaps the grey block) ---------- */
.footer { background: transparent; margin-top: 40px; margin-left: var(--rail-w); }
.footer__logo { padding: 0 48px; position: relative; z-index: 2; }
.footer__logo img { width: min(440px, 46%); height: auto; margin-bottom: -48px; }
.footer__grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 36px;
  padding: 96px 48px 30px; font-size: 14px;
  background: var(--grey-card);
}
.footer__grid h4 { font-size: 12px; text-transform: uppercase; margin-bottom: 12px; }
.footer__grid ul { list-style: none; }
.footer__grid li { margin-bottom: 7px; }
.footer__grid a { text-decoration: none; }
.footer__grid a:hover { text-decoration: underline; }
.footer__contact p { margin-bottom: 8px; }
.footer__social { display: flex; gap: 14px; margin-top: 14px; }
.footer__social svg { width: 20px; height: 20px; }
.newsletter input {
  width: 100%; padding: 11px 12px; border: 1px solid var(--ink);
  font: 400 14px var(--font); margin-bottom: 10px; background: var(--white);
}
.newsletter button {
  width: 100%; padding: 12px; background: var(--yellow); border: 0;
  font: 500 14px var(--font); cursor: pointer;
}
.footer__legal {
  border-top: 1px solid #aaa; padding: 16px 48px; font-size: 12px;
  display: flex; gap: 24px; background: var(--grey-card);
}
.footer__legal a { text-decoration: none; }

@media (min-width: 1400px) {
  p, li, blockquote { padding-right: 0; }
  .check__card p, .pbody p, .hero__pitch p { max-width: calc(100% - 20px); }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  :root { --rail-w: 0px; }
  .rail { display: none; }
  .wrap { padding: 0 20px; }
  .hero__top, .hero__bottom, .step__body, .quote__row, .pricing__row, .process12 { grid-template-columns: 1fr; }
  .baguette-figure { grid-row: auto; grid-column: 1; margin: 20px 0 0; }
  .panel--1, .step__title--2, .panel--2 { grid-column: 1; }
  .panel--1 { padding: 36px 24px; }
  .step--3 .step__body { margin-left: 0; }
  .step--3 .step__photo { margin: 0; }
  .gbadge { bottom: 20px; }
  .hero__top { padding-left: 0; }
  .hero__bottom { margin-top: 0; }
  .hero__pitch { padding-top: 0; padding-right: 0; }
  .step--3 .step__body { padding-left: 24px; }
  .ways__grid, .work__grid, .testimonials { grid-template-columns: 1fr; }
  .step--3 .step__body { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .check__stage { padding: 40px 6%; }
  .check__card { padding: 30px 24px; }
  .hero__photo img { height: 240px; }
}


/* ============================================================
   Motion — calm, once-only, conversion-first.
   Everything is opacity/transform only and respects
   prefers-reduced-motion.
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .65s ease-out, transform .65s ease-out; }

/* rules draw in from the menu edge */
.js .rule, .js .section-title::after { transform: scaleX(0); transform-origin: left; }
.js .rule.in, .js .section-title.in::after { transform: scaleX(1); transition: transform .55s ease-out .1s; }

/* marker-highlight sweep */
.js .hl {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-color: transparent;
  background-repeat: no-repeat; background-size: 0% 100%; background-position: 0 0;
}
.js .hl.in { background-size: 100% 100%; transition: background-size .6s ease-out .25s; }
.js .step--3 .hl { background-image: linear-gradient(var(--white), var(--white)); }

/* hero entrance: eye journey ends on the CTA */
.js .hero__wordmark { animation: rise .7s ease-out both; }
.js .hero__photo { animation: slide-left .8s ease-out .15s both; }
.js .hero .rule { animation: draw .6s ease-out .45s both; transform-origin: left; }
.js .hero__tagline { animation: rise .7s ease-out .6s both; }
.js .hero__pitch { animation: rise .7s ease-out .8s both; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes slide-left { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* micro-interactions */
.btn { transition: background-color .18s ease, color .18s ease, transform .18s ease; }
.btn:hover { transform: translateY(-2px); }
.ways__card, .work__card img { transition: transform .25s ease, box-shadow .25s ease; }
.ways__card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.work__card:hover img { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(0,0,0,.10); }
.duffy .card img { transition: transform .3s ease; }
.duffy .card img:hover { transform: rotate(-4deg) scale(1.04); }
.faq summary::after { transition: transform .25s ease; }
.rail__item { transition: transform .18s ease; }
.rail__item:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .js .reveal, .js .rule, .js .section-title::after, .js .hl { opacity: 1 !important; transform: none !important; background-size: 100% 100% !important; }
  .js .hero__wordmark, .js .hero__photo, .js .hero .rule, .js .hero__tagline, .js .hero__pitch { animation: none !important; }
  .btn, .ways__card, .work__card img, .duffy .card img, .rail__item { transition: none !important; }
}

/* ============================================================
   Mobile & small screens — full pass over the final structures
   ============================================================ */
@media (max-width: 900px) {
  :root { --rail-w: 0px; }

  /* rhythm compresses gracefully */
  .hero { padding-block: 24px 72px; }
  .check, .ways, .quote, .work, .faq, .final, .contact { padding-block: 72px; }
  .pricing { padding-block: 96px 72px; }
  .section-title { margin-bottom: 36px; }

  /* hero */
  .hero.wrap { padding-left: 20px; padding-right: 20px; }
  .hero__top { padding-left: 0; margin-right: -20px; }
  .hero__wordmark { width: min(300px, 80%); }
  .hero__photo img { height: 240px; }
  .hero .rule { margin-top: 24px; }
  .hero__bottom { margin-top: 20px; }
  .hero__tagline .display { font-size: 34px; line-height: 1.25; }
  .hero__pitch { padding-top: 28px; max-width: none; }
  .hero__pitch p:first-child { font-size: 22px; }
  /* no load choreography on mobile — content immediately */
  .js .hero__wordmark, .js .hero__photo, .js .hero .rule,
  .js .hero__tagline, .js .hero__pitch { animation: none; }

  /* trust */
  .trust { padding: 28px 20px 0; }
  .trust__logos { justify-content: center; gap: 26px; }
  .trust__logos img { height: 38px; }

  /* check card */
  .check { padding-left: 20px; padding-right: 20px; }
  .check__stage { padding: 36px 5%; }
  .check__card { padding: 40px 26px; }
  .check__card p { font-size: 17px; }

  /* cards */
  .ways__card { min-height: 0; padding: 44px 26px 40px; }

  /* quote */
  .quote__row { padding-left: 0; grid-template-columns: 1fr; gap: 36px; }
  .quote blockquote { font-size: 21px; }

  /* process */
  .step__num { font-size: 30px; margin-right: 18px; }
  .step__title::before { width: 60px; }
  .step__title h2 { padding: 18px 0 18px 20px; }
  .band1 { grid-template-columns: 1fr; margin-left: -20px; margin-right: -20px; padding: 0 0 60px; }
  .baguette-figure { margin: 24px auto -60px; }
  .baguette-figure img { height: 380px; }
  .panel--1 { padding: 32px 24px 0; max-width: none; }
  .step__title--2 { grid-column: 1; margin-top: 70px; }
  .panel--2 { grid-column: 1; padding: 20px 24px 0; }
  .step--3 { margin-top: 70px; }
  .step--3 .step__body {
    grid-template-columns: 1fr; gap: 44px;
    margin-left: -20px; margin-right: -20px;
    padding: 56px 24px;
  }
  .step--3 .pbody p { max-width: none; }
  .step--3 .step__photo { margin: 0 -24px -56px 0; justify-content: flex-end; }
  .step--3 .step__photo img { width: 92%; height: 260px; }
  .pbody .lead { margin-bottom: 28px; }

  /* pricing + work */
  .pricing__row { grid-template-columns: 1fr; gap: 28px; }
  .work__grid { grid-template-columns: 1fr; gap: 36px; }
  /* mobile: full image, no crop — desktop's uniform 20:9 crop-bottom rule
     is a desktop-only refinement; cards can differ in height on mobile
     (Manon 2026-07-15) */
  .work__card img, .work__card video { aspect-ratio: auto; height: auto; object-fit: contain; object-position: center; }

  /* testimonials */
  .testimonial { padding: 56px 26px; }

  /* faq + final */
  .faq summary { font-size: 16px; }
  .final h2 { font-size: 22px; }

  /* duffy + journey */
  .duffy { padding: 0 20px; }
  .duffy img.bg { height: 320px; }
  .duffy .card { padding: 24px; }
  .duffy .card img { width: 160px; }
  .journey { grid-template-columns: 1fr 1fr; padding-block: 40px 72px; }
  .journey p { grid-column: 1 / -1; order: -1; }

  /* contact */
  .contact__doodle { width: 110px; }

  /* footer */
  .footer { margin-left: 0; }
  .footer__logo { padding: 0 20px; }
  .footer__logo img { width: min(300px, 70%); height: auto; margin-bottom: -30px; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; padding: 60px 20px 24px; }
  .footer__legal { padding: 14px 20px; }

  /* floating bits */
  .gbadge { bottom: 14px; padding: 6px 8px; }
  .gbadge img { width: 62px; }
}

/* mobile: simplified process layout (like the live mobile site) */
@media (max-width: 900px) {
  .step__title { display: flex; align-items: baseline; gap: 12px; margin: 0 -20px; padding: 26px 24px 10px; }
  .step__title::before { display: none; }
  .step__num { font-size: 22px; margin-right: 0; order: 0; align-self: baseline; }
  .step__title h2 { padding: 0; font-size: 24px; }

  /* step 1 heading sits on the cream, flowing into the band */
  .process12 .step__title--1 { background: var(--grey-light); }
  .band1 { margin-top: 0; }
  .baguette-figure { margin-top: 10px; }

  /* step 2 heading on white, simple */
  .step__title--2 { margin: 70px 0 0; padding: 0 4px 10px; }

  /* step 3 heading on the yellow, flowing into the body */
  .step--3 .step__title { background: var(--yellow); padding-bottom: 0; }
  .step--3 .step__body { margin-top: 0; }
}

/* eyebrow */
.eyebrow {
  display: none;
  font-family: var(--font-head); font-weight: 500; font-size: 16px;
  letter-spacing: .04em; text-transform: uppercase;
}

/* mobile: hero + process typography per live mobile */
@media (max-width: 900px) {
  /* 120px vertical rhythm */
  .hero { padding-block: 0 120px; }
  .check, .ways, .quote, .work, .faq, .final, .contact { padding-block: 120px; }
  .pricing { padding-block: 120px; }

  /* hero: photo full-width first, no wordmark, short centred rule */
  .hero.wrap { padding-left: 20px; padding-right: 20px; }
  .hero__wordmark { display: none; }
  .hero__top { grid-template-columns: 1fr; margin: 0 -20px; }
  .hero__photo { margin: 0; }
  .hero__photo img { width: 100%; height: 300px; object-position: right center; }
  .hero .rule { width: 280px; margin: 28px auto 0; transform-origin: center; }
  .hero__tagline .display { font-size: 34px; }

  /* eyebrow + big step headings */
  .process12 .eyebrow { display: block; background: var(--grey-light); margin: 0 -20px; padding: 40px 24px 0; }
  /* 38px (was 45) — long H2 words like "ORGANISATIONS" ran out of frame on phones (Manon 2026-07-18) */
  .step__title h2, .section-title { font-size: 38px; line-height: 1.12; overflow-wrap: break-word; }
  .step__num { font-size: 45px; }

  /* step 1: text first, baguette after, image centred */
  .band1 { display: flex; flex-direction: column; }
  .panel--1 { order: 1; }
  .baguette-figure { order: 2; margin: 36px auto -60px; }

  /* step 3: photo inside the yellow, padded */
  .step--3 .step__photo { margin: 20px 0 0; justify-content: center; }
  .step--3 .step__photo img { width: 100%; height: 360px; object-fit: cover; }
}

/* mobile: carousel, stacked journey, full 120px rhythm */
@media (max-width: 900px) {
  /* people we've helped: auto-scrolling carousel */
  .work__grid {
    display: flex; grid-template-columns: none; gap: 20px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin: 0 -20px; padding: 0 20px 14px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .work__grid::-webkit-scrollbar { display: none; }
  .work__card { flex: 0 0 82%; scroll-snap-align: center; }

  /* journey: stacked, text leading */
  .journey { grid-template-columns: 1fr; gap: 34px; padding-block: 120px; }
  .journey p { order: -1; }

  /* remaining 120px rhythm */
  .duffy { margin-block: 0 120px; }
  .process { padding-block: 0 120px; }
  .band1 { padding-bottom: 80px; }
}

/* hero conversion elements: desktop keeps the approved layout */
.hero__cta-mobile, .hero__call, .hero__proof { display: none; }

@media (max-width: 900px) {
  .hero__cta-desktop { display: none; }
  .hero__cta-mobile { display: inline-block; width: 100%; text-align: center; padding: 16px 26px; font-size: 17px; }
  .hero__call {
    display: block; text-align: center; margin-top: 14px;
    font-size: 16px; text-decoration: underline; text-underline-offset: 3px;
  }
  .hero__proof {
    display: block; text-align: center; margin-top: 18px;
    font-size: 13.5px; color: #444; letter-spacing: .01em;
  }
  .hero__sub { display: none; }           /* one reassurance line, not two */
  .gbadge { display: none; }              /* proof lives under the CTA instead */
  .hero__pitch { padding-top: 20px; }
}

/* mobile trust strip: no duplicate sentence, only the recognisable logos, bigger */
@media (max-width: 900px) {
  .trust__line { display: none; }
  .trust__logos img { height: 44px; }
  .trust__logos img[alt="Harbour"],
  .trust__logos img[alt="Impact Ag Australia"],
  .trust__logos img[alt="Beneath The Brim"] { display: none; }
}

/* ============================================================
   Mobile polish round 2 (screenshots #94–#103) — final block,
   wins the cascade over earlier mobile rules.
   ============================================================ */
@media (max-width: 900px) {

  /* --- steps: heading fully left-aligned — wrapped lines share the body text edge --- */
  .step__title { display: block; margin: 0; padding: 0 0 12px; background: none; }
  .step__title::before { display: none; }
  .step__num { display: inline; font-size: 45px; margin: 0; }
  .step__title h2 { display: inline; padding: 0; font-size: 45px; line-height: 1.12; }

  /* step 1: doubled top padding on the cream band, more side room */
  .process12 .eyebrow { margin: 0 -20px; padding: 96px 30px 0; }
  .process12 .step__title--1 {
    background: var(--grey-light);
    margin: 0 -20px; padding: 8px 30px 12px;
  }

  /* step 2: heading on white, aligned with its body text, doubled space above */
  .step__title--2 { margin: 200px 0 0; padding: 0 10px 12px; background: none; }
  .panel--2 { padding: 10px 10px 0; }
  .panel--1 { padding: 28px 30px 0; }

  /* step 3: no number, heading flows into the yellow band, doubled space above */
  .step--3 { margin-top: 140px; }
  .step--3 .step__num { display: none; }
  .step--3 .step__title { background: var(--yellow); margin: 0 -20px; padding: 80px 30px 0; }
  .step--3 .step__body { padding-top: 24px; padding-inline: 30px; }

  /* --- baguette: bigger, 15px from each screen edge, doubled space below --- */
  .band1 { padding-bottom: 144px; }
  .baguette-figure { order: 2; margin: 44px 15px 0; }
  .baguette-figure img { width: 100%; height: auto; margin-inline: auto; }

  /* step 3 photo: centred, 15px from each screen edge */
  .step--3 .step__photo { margin: 24px -15px 0; justify-content: center; }
  .step--3 .step__photo img { width: 100%; height: 340px; object-fit: cover; }

  /* --- pricing: 30% less than round 2 (screenshot #111) --- */
  .pricing { padding-block: 105px; }
  .pricing h2 { margin-bottom: 28px; }
  .pricing li { margin-bottom: 10px; }
  .pricing .note { margin-top: 24px; }
  .pricing__row { gap: 44px; }
  .pricing__row > div:last-child { text-align: center; }

  /* --- buttons: centred on mobile --- */
  .panel--1 .btn, .panel--2 .btn, .pbody .btn { display: block; width: fit-content; margin-inline: auto; }
  .hero__cta-mobile { width: 100%; }   /* hero stays full-width — it's the primary action */

  /* --- work carousel: ONE card per view + arrows (screenshot #101) --- */
  .work { padding-block: 150px 160px; }
  .work__carousel { display: block; position: relative; }
  .work__grid {
    display: flex; gap: 0;
    margin: 0; padding: 0 0 10px;
    scroll-snap-type: x mandatory;
  }
  .work__card { flex: 0 0 100%; scroll-snap-align: start; padding: 0 34px; }
  .work__card img { border: 1px solid var(--ink); }
  .work__nav {
    display: flex; align-items: center; justify-content: center;
    position: absolute; top: 90px; z-index: 5;
    width: 34px; height: 44px;
    background: none; border: 0; cursor: pointer;
    font-size: 26px; line-height: 1; color: var(--ink);
    padding: 0;
  }
  .work__nav--prev { left: -6px; }
  .work__nav--next { right: -6px; }
  .work__more { margin-top: 56px; }
  .js .work__card.reveal { opacity: 1; transform: none; }   /* slides shouldn't fade on each advance */

  /* --- final CTA: more space top + bottom (screenshot #102) --- */
  .final { padding-block: 160px; }
  .final p { margin-top: 18px; }
  .final .btn { margin-top: 36px; }

  /* --- testimonials: more vertical + horizontal room (screenshot #103) --- */
  .testimonial { padding: 90px 38px; }
  .testimonial h3 { margin-bottom: 44px; }
  .testimonial p { margin-bottom: 14px; }
  .testimonial footer { padding-top: 34px; }

  /* --- round 3 (screenshots #104–#106) --- */
  /* check card: smaller header, like live */
  .check__card h2 { font-size: 24px; margin-bottom: 24px; }

  /* gap between the black card and "Three ways": 30% less (120 → 84) */
  .check { padding-block: 120px 84px; }
  .ways { padding-block: 84px 120px; }

  /* the three grey/yellow boxes: 26px/30px headers */
  .ways__card h3 { font-size: 26px; line-height: 30px; }

  /* quote (Jo Stewart): more side padding */
  .quote.wrap { padding-inline: 44px; }

  /* --- round 4 (screenshots #113–#117) --- */
  /* final CTA: no arrow, tighter measure so "sorted?" wraps to line 2 */
  .final.wrap { padding-inline: 52px; }

  /* journey images + video: same dark border as the carousel */
  .journey img, .journey video { border: 1px solid var(--ink); }

  /* footer: newsletter moves up under the social icons */
  .footer__contact { order: -2; }
  .footer__grid .newsletter { order: -1; }

  /* ==== round 5 (screenshots #118–#121): one padding system ====
     text = 24px from screen edge · wide images = 15px · colour bands + hero photo = full bleed */
  .wrap { padding-inline: 24px; }
  .trust { padding-inline: 24px; }
  .check { padding-inline: 24px; }
  .footer__logo { padding-inline: 24px; }
  .footer__grid { padding-inline: 24px; }
  .footer__legal { padding-inline: 24px; }

  /* hero: photo full bleed (no side padding), shorter; sub-line restored */
  .hero.wrap { padding-inline: 24px; }
  .hero__top { margin: 0 -24px; }
  .hero__photo img { height: 230px; }
  .hero__sub { display: block; margin-top: 12px; }
  .hero__pitch p + p { margin-top: 13px; }   /* +5px between "For small businesses…" and "No jargon…" */

  /* process: bands bleed, text at 24px, images at 15px */
  .process12 .eyebrow { margin-inline: -24px; padding-inline: 24px; }
  .process12 .step__title--1 { margin-inline: -24px; padding-inline: 24px; }
  .panel--1 { padding-inline: 24px; }
  .step__title--2 { padding-inline: 0; }
  .panel--2 { padding-inline: 0; }
  .band1 { margin-inline: -24px; }
  .baguette-figure { align-self: stretch; margin: 44px 15px 0; }
  .baguette-figure img { width: 100%; height: auto; object-fit: contain; margin-inline: auto; }
  .step--3 .step__title { margin-inline: -24px; padding-inline: 24px; }
  .step--3 .step__body { margin-inline: -24px; padding-inline: 24px; }
  .step--3 .step__photo { margin: 24px -9px 0; }   /* 15px from screen edge */

  /* wide-image sections at 15px */
  .journey.wrap { padding-inline: 15px; }
  .duffy { padding-inline: 15px; }

  /* leads: tighter line height ("One meeting. No perfect brief needed.") */
  .pbody .lead { line-height: 1.3; }

  /* final CTA heading: more line height so the highlight rows don't touch */
  .final h2 { line-height: 1.5; }

  /* ==== round 6 (screenshots #122–#125) ==== */
  /* ROOT CAUSE of the missing right padding: this desktop rule leaked into mobile */
  .process.wrap { padding-right: 24px; }

  /* hero: one reassurance line only (the sub carries it), double button spacing, shorter photo */
  .hero__jargon { display: none; }
  .hero__cta-mobile { margin-top: 44px; }
  .hero__photo img { height: 185px; }

  /* check card heading: a touch more line height */
  .check__card h2 { line-height: 1.25; }

  /* three ways boxes: +15px top and bottom */
  .ways__card { padding: 59px 26px 55px; }

  /* quote: yellow highlight bold */
  .quote .hl { font-weight: 700; }

  /* ==== round 7 (screenshots #126–#127) ==== */
  .faq summary { font-size: 20px; }
  .journey img, .journey video,
  .work__card img { border: 3px solid var(--ink); }

  /* ==== round 8 (screenshots #128–#129) ==== */
  /* quote: 30% less top padding, fonts +2 */
  .quote { padding-block: 84px 120px; }
  .quote blockquote { font-size: 23px; }
  .quote cite { font-size: 16px; }

  /* white gap above the yellow band = the yellow band's own top padding (80px) */
  .step--3 { margin-top: 80px; }

  /* ==== round 9 (screenshots #131–#132) ==== */
  /* yellow band: internal top spacing ×1.5 */
  .step--3 .step__title { padding-top: 120px; }
  /* white gap above "2:" matches the cream band's internal bottom spacing (144px) */
  .step__title--2 { margin-top: 144px; }
}

/* ============================================================
   Inner pages — page hero, breadcrumb, 4-card services grid.
   Composes the homepage system; no new colours or type styles.
   ============================================================ */
.page-hero { padding-block: 56px 140px; }
.crumb { font-size: 13px; color: #666; margin-bottom: 30px; }
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.page-hero .display { font-size: clamp(38px, 5vw, 76px); max-width: 900px; }
.page-hero .rule { margin-block: 44px 60px; }
.page-hero__pitch { max-width: 640px; }
.page-hero__pitch .lead-strong {
  font-family: var(--font-head); font-weight: 700;
  font-size: 28px; line-height: 1.3; margin-bottom: 18px;
}
.page-hero__pitch p + p { margin-top: 12px; }
.page-hero__pitch .btn { margin-top: 30px; }
.ways__grid--4 { grid-template-columns: repeat(2, 1fr); }
.ways__grid--4 .ways__card { min-height: 0; }

@media (max-width: 900px) {
  .page-hero { padding-block: 32px 120px; }
  /* 31px (was 34) — long H1s like "not-for-profits" were touching the frame edge on phones (Manon 2026-07-18) */
  .page-hero .display { font-size: 31px; overflow-wrap: break-word; }
  .page-hero .rule { margin-block: 28px 40px; transform-origin: center; }
  .page-hero__pitch .lead-strong { font-size: 22px; }
  .page-hero__pitch .btn {
    display: block; width: 100%; text-align: center;
    padding: 16px 26px; font-size: 17px; margin-top: 36px;
  }
  .page-hero .hero__call { display: block; }
  .page-hero .hero__proof { display: block; }
  .ways__grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   Services hub (main.hub) — hero photo, stacked-pillars rhythm,
   dark pricing/proof card. Scoped so other pages keep the
   default inner-page spacing.
   ============================================================ */
.hub .page-hero { padding-block: 56px 70px; }
.hub .page-hero__row {
  display: grid; grid-template-columns: minmax(auto, 640px) 1fr;
  gap: 70px; align-items: start;
}
.hub .page-hero__photo { margin-top: -100px; position: relative; z-index: 1; }   /* photo breaks over the hero rule */
.hub .page-hero__photo img {
  width: 100%; height: clamp(300px, 26vw, 400px);
  object-fit: cover; object-position: center 25%;
}
.hub .ways { padding-block: 44px; }
.hub .ways__card { min-height: 0; }
.hub .check { padding: 80px 70px 90px; }
/* all black-card headlines: keep the .hl highlighter off the neighbouring line */
.check__card h2 { line-height: 1.4; }
.hub .check__list { list-style: none; padding: 0; margin: 0; }
.hub .check__list li { font-size: 19px; color: #ddd; margin-top: 12px; }
.hub .check__quote { margin-top: 44px; font-size: 22px; line-height: 1.45; color: var(--white); }
.hub .check__quote cite { display: block; font-style: normal; font-size: 14px; margin-top: 12px; color: #ddd; }
.hub .check__quote cite small { display: block; font-style: italic; color: #999; }
.hub .check__card .btn { margin-top: 40px; }
.hub .work { padding-block: 90px 100px; }
.hub .faq { padding-block: 80px; }
.hub .final { padding-block: 80px 120px; }

@media (max-width: 900px) {
  .hub .page-hero { padding-block: 32px 44px; }
  .hub .page-hero__row { grid-template-columns: 1fr; gap: 36px; }
  .hub .page-hero__photo { order: -1; margin-top: 0; }
  .hub .page-hero__photo img { height: 240px; object-position: center 20%; }
  .hub .ways { padding-block: 32px; }
  .hub .check { padding: 48px 20px 56px; }
  .hub .check__list li { font-size: 17px; }
  .hub .check__quote { font-size: 19px; margin-top: 36px; }
  .hub .check__card .btn { display: block; text-align: center; margin-top: 36px; }
  .hub .work { padding-block: 64px 72px; }
  .hub .faq { padding-block: 56px; }
  .hub .final { padding-block: 56px 90px; }
}

/* step 2 grey card (Manon's mockup 2026-07-11): --grey-card completes the
   cream/grey/yellow triad across the three process steps. Desktop only —
   mobile keeps its own band treatment. */
@media (min-width: 901px) {
  .panel--2 { background: var(--grey-card); padding: 48px 60px 56px 60px; position: relative; }
  .panel--2::before {
    content: ""; position: absolute;
    left: 80px; top: -104px; width: 70px; height: 104px;
    background: var(--grey-card);
  }
  .step__title--2 h2 { padding-left: 100px; }
}

/* work-card video thumbnails (Decoder Network etc.) — mirror .work__card img.
   Never crop: fit full width, height follows naturally (Manon 2026-07-15,
   caught Frankston Money's hub card and the True Blue IT video cropping
   into the text at both edges). */
.work__card video { aspect-ratio: 16 / 9; height: auto; width: 100%; object-fit: cover; object-position: top; border: 1px solid #e4e4df; display: block; }
@media (max-width: 900px) {
  .work__card video { border: 3px solid var(--ink); }
}

/* service inner pages (main.svc) — hero media column + single testimonial band.
   Mirrors the hub hero-row but stays scoped so other pages keep defaults. */
.svc .page-hero__row {
  display: grid; grid-template-columns: minmax(auto, 640px) 1fr;
  gap: 70px; align-items: start;
}
.svc .page-hero__photo { margin-top: -40px; position: relative; z-index: 1; }
.svc .page-hero__photo video,
.svc .page-hero__photo img {
  width: 100%; height: clamp(300px, 26vw, 400px);
  object-fit: cover; object-position: top;
  border: 4px solid var(--ink); display: block;
}
.svc .page-hero__photo .hero__proof { margin-top: 10px; }
.testimonials--one { grid-template-columns: 1fr; }
.testimonials--two { grid-template-columns: 1fr 1fr; } /* stacks via the global .testimonials 1fr rule at 900px */
@media (max-width: 900px) {
  /* mobile conversion order: H1 -> lead promise -> image proof -> detail -> CTA.
     display:contents lets the pitch's children join the single-column grid so the
     lead can sit ABOVE the image without changing the desktop 2-col DOM. */
  .svc .page-hero__row { grid-template-columns: 1fr; gap: 13px; }
  .svc .page-hero__pitch { display: contents; }
  .svc .page-hero__pitch .lead-strong { order: -2; }
  .svc .page-hero__photo { order: -1; margin: 8px 0 6px; }
  .svc .page-hero__photo video,
  .svc .page-hero__photo img { height: 230px; border: 4px solid var(--ink); }
}

/* GLOBAL design rule (Manon 2026-07-11): every website screenshot or scroll
   video gets a 3px dark border, everywhere, both breakpoints. */
.work__card img, .work__card video,
.journey img, .journey video { border: 3px solid var(--ink); }

/* True Blue IT's video is wider than the 16:9 hub/hero box, so object-fit:cover
   would crop it centered and cut into its left-edge sidebar menu/logo. Anchor
   left instead so any crop lands on the decorative right side only. */
.crop-left { object-position: left top !important; }

/* service-page screenshot gallery (old-site style: 2-up big visuals) */
.svc .gallery { padding-block: 30px 60px; }
.svc .gallery__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: var(--box-w); margin: 0 auto; }
.svc .gallery__grid img { width: 100%; height: auto; display: block; border: 3px solid var(--ink); }
@media (max-width: 900px) {
  .svc .gallery__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* service inner pages: same tightened vertical rhythm as the approved hub
   (homepage band spacing is too airy for inner pages) */
.svc .page-hero { padding-block: 56px 70px; }
.svc .ways { padding-block: 44px; }
.svc .ways__card { min-height: 0; }
.svc .check { padding: 80px 70px 90px; }
.svc .work { padding-block: 64px 80px; }
.svc .faq { padding-block: 80px; }
.svc .final { padding-block: 80px 120px; }
.svc .testimonials--one .testimonial { padding: 72px 80px; }
.svc .testimonials--two .testimonial { padding: 64px 56px; }
@media (max-width: 900px) {
  .svc .page-hero { padding-block: 32px 44px; }
  .svc .ways { padding-block: 32px; }
  .svc .check { padding: 48px 20px 56px; }
  .svc .work { padding-block: 48px 56px; }
  .svc .faq { padding-block: 56px; }
  .svc .final { padding-block: 56px 90px; }
  .svc .testimonials--one .testimonial, .svc .testimonials--two .testimonial { padding: 56px 26px; }
  /* .testimonials--two's unconditional 1fr-1fr (below, unscoped) otherwise beats the
     mobile .testimonials 1fr rule on source order alone - force the stack explicitly. */
  .testimonials--two { grid-template-columns: 1fr; }
}

/* svc: pricing band uses inner-page rhythm (base 200px is homepage-only) */
.svc .pricing { padding-block: 44px 60px; }
@media (max-width: 900px) {
  .svc .pricing { padding-block: 32px 44px; }
}

/* GLOBAL hero-media standard (Manon 2026-07-11): on every inner page the hero
   image/video is 500x300, same position, lightly overlapping the hero rule. */
@media (min-width: 901px) {
  .hub .page-hero__photo, .svc .page-hero__photo { margin-top: -100px; }
  .hub .page-hero__photo img,
  .svc .page-hero__photo img,
  .svc .page-hero__photo video {
    width: 500px; max-width: 100%; height: 300px;
    object-fit: cover;
  }
}

/* ===== service pages: "How it works" as a numbered editorial flow =====
   Deliberately NOT the .ways card grid — steps are a journey (1/ 2/ 3/), so
   they read as a hairline-ruled path with oversized numerals + the cream/
   grey/yellow highlighter triad, echoing the homepage process. */
.svc .flow { padding-block: 44px 60px; }
.svc .flow__list { display: flex; flex-direction: column; }
.svc .flow__step {
  display: grid; grid-template-columns: 300px 1fr; gap: 48px;
  align-items: start; padding: 46px 0; border-top: 2px solid var(--ink);
}
.svc .flow__step:last-child { border-bottom: 2px solid var(--ink); }
.svc .flow__num {
  font-family: var(--font-head); font-weight: 700; line-height: .82;
  font-size: clamp(72px, 9vw, 132px); letter-spacing: .01em;
  display: inline-block; align-self: start; padding: 0 .1em;
}
.svc .flow__step:nth-child(1) .flow__num { background: var(--grey-card); }
.svc .flow__step:nth-child(2) .flow__num { background: var(--grey-light); }
.svc .flow__step:nth-child(3) .flow__num { background: var(--yellow); }
.svc .flow__body h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 14px; }
.svc .flow__body p { margin-bottom: 10px; }
.svc .flow__note { margin-top: 4px; }
/* zig-zag: even step flips the giant numeral to the right */
.svc .flow__step:nth-child(even) { grid-template-columns: 1fr 300px; }
.svc .flow__step:nth-child(even) .flow__num { order: 2; justify-self: end; text-align: right; }
.svc .flow__step:nth-child(even) .flow__body { order: 1; }

/* ===== service pages: pricing as a 2-column editorial split ===== */
.svc .pricing__row--split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; max-width: var(--box-w); }
.svc .pricing__anchors ul { margin-top: 18px; }
.svc .pricing__value-line {
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.4; font-weight: 500;
  padding-left: 20px; border-left: 3px solid var(--yellow); margin-bottom: 20px;
}
.svc .pricing__value .btn { margin-top: 24px; }

@media (max-width: 900px) {
  .svc .flow__step,
  .svc .flow__step:nth-child(even) { grid-template-columns: 1fr; gap: 14px; padding: 34px 0; }
  .svc .flow__step:nth-child(even) .flow__num { order: 0; justify-self: start; text-align: left; }
  .svc .flow__step:nth-child(even) .flow__body { order: 0; }
  .svc .pricing__row--split { grid-template-columns: 1fr; gap: 32px; }
}

/* ===== svc refinements (Manon 2026-07-12) ===== */
/* no rule above step 1 — the section title already carries its own underline */
.svc .flow__step:first-child { border-top: none; }

/* consistent ~120px vertical gap between sections on desktop (was too cramped).
   Each content section ~60px top+bottom → ~120px between neighbours.
   STANDARD for all service/inner pages going forward. */
@media (min-width: 901px) {
  .svc .page-hero   { padding-block: 56px 60px; }
  .svc .testimonials--one, .svc .testimonials--two { padding-block: 60px; }
  .svc .ways        { padding-block: 60px; }
  .svc .flow        { padding-block: 60px; }
  .svc .work        { padding-block: 60px; }
  .svc .gallery     { padding-block: 60px; }
  .svc .pricing     { padding-block: 60px; }
  .svc .faq         { padding-block: 60px; }
  .svc .final       { padding-block: 60px 120px; }
  .svc .check       { padding: 100px 70px; }
}

/* pricing as a dark conversion box (echoes the hub's dark pricing card).
   Yellow CTA pops on dark; value-line keeps its yellow rule. */
.svc .pricing--dark .pricing__box {
  background: var(--ink); color: var(--white);
  padding: clamp(32px, 4vw, 64px); max-width: var(--box-w); margin: 0 auto;
}
.svc .pricing--dark h2 { color: var(--white); }
.svc .pricing--dark li { color: var(--white); }
.svc .pricing--dark .pricing__value-line { color: var(--white); border-left-color: var(--yellow); }
.svc .pricing--dark .note { color: #cfcfcf; }
@media (max-width: 900px) {
  .svc .pricing--dark .pricing__box { padding: 32px 22px; }
}

/* exception to the 3px screenshot border: images that already carry their own
   frame/browser-chrome baked in (e.g. Village Pilates hero) skip the CSS border */
.svc .page-hero__photo img.self-framed,
.work__card img.self-framed { border: none; }

/* single testimonial on service pages: aligned to the same content width (box-w)
   as the sections below, not a full-bleed band */
.svc .testimonials--one, .svc .testimonials--two { max-width: var(--box-w); margin-inline: auto; }
.svc .testimonials--one .testimonial { padding: 56px 60px; }
.svc .testimonials--two .testimonial { padding: 56px 48px; }
@media (max-width: 900px) {
  .svc .testimonials--one .testimonial, .svc .testimonials--two .testimonial { padding: 40px 26px; }
}

/* highlighter text stays black on yellow even inside the dark pricing box */
.svc .pricing--dark .hl { color: var(--ink); }

/* yellow button on the dark pricing box: hover to WHITE (default ink-hover
   disappears into the black background) */
.svc .pricing--dark .btn--solid:hover {
  background: var(--white); border-color: var(--white); color: var(--ink);
}

/* hub: generous vertical rhythm so sections breathe (Manon 2026-07-12; >120px gaps) */
@media (min-width: 901px) {
  .hub .page-hero { padding-block: 56px 80px; }
  .hub .ways      { padding-block: 80px; }
  .hub .check     { padding: 110px 70px; }
  .hub .work      { padding-block: 80px; }
  .hub .faq       { padding-block: 80px; }
  .hub .final     { padding-block: 80px 120px; }
}

/* ---- homepage mobile polish (Manon 2026-07-12) ---- */
@media (max-width: 900px) {
  /* less white space above the fold: hero bottom padding was 140px */
  .hero { padding-block: 24px 8px; }
  /* de-float the trust logos: space-between spreads them; centre + tighten instead.
     top 12px + hero bottom 8px = 20px gap between the proof line and the carousel */
  .trust { padding: 12px 6% 0; }
  .trust__line { margin-bottom: 14px; }
  .trust__marquee { padding-bottom: 20px; }
  .trust__track img { height: 40px; margin-right: 52px; }
  /* the black check card sat under a big gap (140px top) on mobile */
  .check { padding-block: 52px; }
}

/* hub: full-width "not sure where to start" off-ramp band (yellow) */
.hub .helpband {
  background: var(--yellow); max-width: var(--box-w); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 48px;
  padding: 48px 56px;
}
.hub .helpband h3 { font-size: clamp(24px, 2.6vw, 34px); }
.hub .helpband p { margin-top: 10px; max-width: 62ch; }
.hub .helpband .btn { flex: none; }
@media (max-width: 900px) {
  .hub .helpband { flex-direction: column; align-items: flex-start; gap: 22px; padding: 32px 24px; }
}

/* mobile hero: close the big gap between the tagline ("No brief needed…") and
   the pitch ("For small businesses…") — appended last so it wins the stacked
   @media blocks (Manon 2026-07-12) */
@media (max-width: 900px) {
  .hero__bottom { gap: 14px; margin-top: 12px; }
  .hero__pitch { padding-top: 2px; }
  .hero__pitch .hero__cta-mobile { margin-top: 48px; }   /* space above the yellow button (beats .hero__pitch .btn) */
  .hero__proof { margin-top: 40px; }                     /* space under the phone number */
}

/* mobile: proof line stacks — each claim (incl. ★★★★★ 5.0 on Google) on its own line */
@media (max-width: 900px) {
  .hero__proof--stack span { display: block; line-height: 1.7; }
  .hero__proof--stack .proof-sep { display: none; }
}

/* dark-box headlines: the .hl highlighter needs breathing room or its yellow
   block overlaps the line above when the heading wraps (Manon 2026-07-13).
   pricing--dark h2 computed at lh 1.05 on mobile — the overlap culprit.
   2026-07-18 (Manon): broadened to EVERY heading style that hosts .hl —
   the plain light .pricing box (web-design-sydney) had the same overlap. */
.pricing h2 { line-height: 1.4; }
.check__card h2 { line-height: 1.4; }
.final h2 { line-height: 1.4; }

/* svc mobile rhythm: more air between sections, and testimonials had ZERO
   vertical padding — give every section clear space (Manon 2026-07-13) */
@media (max-width: 900px) {
  .svc .ways { padding-block: 56px; }
  .svc .flow, .svc .work, .svc .gallery { padding-block: 56px; }
  .svc .check { padding-top: 64px; padding-bottom: 64px; }
  .svc .testimonials--one, .svc .testimonials--two { padding-block: 48px; }
  .svc .pricing { padding-block: 56px 64px; }
  .svc .faq { padding-block: 64px; }
  .svc .final { padding-block: 64px 96px; }
}

/* HERO IMAGE RULE (Manon 2026-07-13): every hero-banner image keeps its
   original proportion — FIT, never fill, never crop. Beats the fixed
   500x300 desktop / 230px mobile frames by coming last in the cascade. */
.hub .page-hero__photo img,
.svc .page-hero__photo img {
  height: auto;
  object-fit: contain;
}

/* marquee: wide wordmark logos read oversized at the uniform 56px height —
   knock them down so they sit visually equal with the mark-based logos
   (Manon 2026-07-13) */
.trust__track img.logo--sm { height: 40px; }
@media (max-width: 900px) {
  .trust__track img.logo--sm { height: 28px; }
}

/* about "How we work": short editorial lead under the section title
   (Manon's old HOW-I-WORK copy, 2026-07-15) */
.section-lead { max-width: var(--box-w); margin: -24px auto 48px; font-size: 18px; line-height: 1.6; }
@media (max-width: 900px) {
  .section-lead { margin: -8px auto 36px; font-size: 16px; }
}

/* branding "What we create": the free-logo note (CLAIMS row 23) rendered as a
   bare unstyled line under the card grid (Manon 2026-07-14 "seems out of
   place") — style it as a quiet centered footnote aligned to the grid */
.ways .note {
  max-width: var(--box-w);
  margin: 28px auto 0;
  font-size: 15px;
  color: #555;
  text-align: center;
}

/* case-studies hub mobile: the homepage work carousel (one 82% card, sideways
   swipe) is wrong for a 14-card browsing hub — stack the cards vertically
   (Manon 2026-07-15 "can only see one case study") */
@media (max-width: 900px) {
  #cs-grid {
    display: grid; grid-template-columns: 1fr; gap: 36px;
    overflow: visible; scroll-snap-type: none; margin: 0; padding: 0;
  }
  #cs-grid .work__card { flex: none; }
  /* uniform aspect-ratio card (see base .work__card img/video rule) applies
     on mobile too now — superseded by the 2026-07-15 uniform-size request */
}

/* hub cards whose study page isn't built yet — dev marker for Manon, remove
   per card as each study ships (all 14 must exist at cutover) */
.work__card .soon { display: block; margin-top: 4px; font-size: 13px; font-style: italic; color: #8a8a84; }

/* case-study before/after gallery strip — PROTOTYPE 2026-07-15, Village Pilates only.
   Small supporting-image row under the hero, before the black card. Manon wanted to
   see this before deciding whether to roll it out to all case studies. */
/* CSS grid, not flex: a flex row with a leftover item wrapping alone would
   stretch that item to fill the whole row (exactly the bug Manon caught on
   Decoder Network). Grid keeps every image the same size no matter the count
   (max 3 images per gallery, none ever allowed to dominate). */
.cs-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: var(--box-w); margin: 0 auto 48px; }
.cs-gallery__item { margin: 0; }
.cs-gallery__item img { width: 100%; height: auto; display: block; border: 3px solid var(--ink); }
.cs-gallery__item figcaption { margin-top: 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #6a6a64; }
.cs-gallery--2 { grid-template-columns: repeat(2, 1fr); }
.cs-gallery--1 { grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (max-width: 900px) {
  .cs-gallery { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; }
}

/* case-studies hub: industry filter buttons (2026-07-15). Quiet outlined pills;
   active = ink inverse. Yellow stays reserved for booking CTAs. */
.filters { max-width: var(--box-w); margin: 0 auto 36px; display: flex; flex-wrap: wrap; gap: 10px; }
.filters__btn {
  font: inherit; font-size: 14px; letter-spacing: .02em; cursor: pointer;
  padding: 8px 16px; background: transparent; border: 1px solid var(--ink); color: var(--ink);
}
.filters__btn.is-active { background: var(--ink); color: #fff; }
@media (hover: hover) {
  .filters__btn:hover { background: var(--ink); color: #fff; }
}
@media (max-width: 900px) {
  .filters { gap: 8px; margin-bottom: 28px; }
  .filters__btn { font-size: 13px; padding: 7px 12px; }
}
/* decoder card uses a video where the others use img — same border treatment */
.work__card video { width: 100%; display: block; border: 3px solid var(--ink); }

/* mobile: video sits directly under the top bar (wordmark is hidden there),
   so the hero's top padding reads as a dead gap — close it (Manon 2026-07-15) */
@media (max-width: 900px) {
  .hero { padding-block-start: 4px; }
}

/* homepage hero video (Manon 2026-07-14): keep the natural 16:9 proportion,
   FIT never crop; on desktop sit 40px in from the right edge of the column */
.hero__photo video { width: 100%; height: auto; object-fit: contain; display: block; }
@media (min-width: 901px) {
  .hero__photo video { width: calc(100% - 40px); }
  /* give the video column a touch more presence (~53%) without touching the
     tagline/pitch row below (Manon 2026-07-14: "timid, but don't take away
     from the messaging") */
  .hero__top { grid-template-columns: 1fr 1.15fr; }
}

/* /locations/ hub — grouped-by-city list (2026-07-16, replaces one-card-per-page
   grid). One row per city no matter how many page variants it has, so the hub
   stays readable as more regional pages get added — see scripts/build-locations.py. */
.loc-list { max-width: var(--box-w); margin-inline: auto; }
.loc-list__row {
  display: grid; grid-template-columns: 220px 1fr auto; align-items: center;
  gap: 24px; padding: 32px 0; border-bottom: 1px solid #d8d8d3;
}
.loc-list__row:first-child { border-top: 1px solid #d8d8d3; }
.loc-list__city h3 { font-size: 22px; margin-bottom: 4px; }
.loc-list__city .kicker { font-size: 13px; font-style: italic; color: #8a8a84; }
.loc-list__blurb { font-size: 16px; color: var(--ink); }
.loc-list__links { display: flex; gap: 10px; flex-wrap: wrap; justify-self: end; }
.loc-list__links .btn { padding: 10px 18px; font-size: 14px; }
@media (max-width: 900px) {
  .loc-list__row { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .loc-list__links { justify-self: start; }
}

/* Blog article layout (2026-07-17, hero widened 2026-07-17 per Manon: "too big
   and too skinny", she prefers her old site's pattern — full-width title that
   wraps naturally, plain date/author byline, then a wide image) — a real post,
   not a landing page. Distinct from the .svc sales-page pattern used everywhere
   else (Manon: "reads like a webpage not a blog post"). */
.post-hero { max-width: var(--box-w); margin: 0 auto; padding-top: 60px; }
.post-hero .display { font-size: clamp(24px, 3vw, 46px); max-width: none; }
.post-meta { font-size: 15px; color: #6a6a64; margin: 20px 0 32px; }
.post-hero__image {
  width: 100%; max-height: 520px; object-fit: cover;
  border: none; border-radius: 10px; display: block;
}
.post-body { max-width: var(--box-w); margin: 0 auto; padding-block: 48px; }
.post-body h2 { font-size: clamp(26px, 2.6vw, 32px); margin: 40px 0 16px; }
.post-body h2:first-child { margin-top: 0; }
.post-body p { margin-bottom: 20px; font-size: 18px; line-height: 1.7; }
.post-body ul, .post-body ol { margin: 0 0 20px 22px; }
.post-body li { margin-bottom: 8px; font-size: 18px; line-height: 1.6; }
@media (max-width: 900px) {
  .post-hero { padding-top: 32px; }
  .post-body { padding-block: 32px; }
}

/* Blog hub cards — reuses the .work__card image-card pattern (already proven on
   the case-studies hub) instead of plain text .ways__card, per Manon's "I like it
   with picture" feedback on her old WP archive layout. Softer treatment than the
   case-studies hub, per her follow-up: no black border, just a soft card with
   background + shadow (her old-site reference), image bleeds to the card edges. */
.blog-grid { max-width: var(--box-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.blog-grid .work__card {
  background: var(--white); border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,0.08);
}
.blog-grid .work__card img, .blog-grid .work__card video { border: none; }
.blog-grid .work__card h3, .blog-grid .work__card .kicker, .blog-grid .work__card .services {
  padding-inline: 20px;
}
.blog-grid .work__card h3 { margin-top: 20px; }
.blog-grid .work__card .services { padding-bottom: 20px; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* Website payback calculator (2026-07-17, Manon's idea) — honest arithmetic:
   how many clients until the website pays for itself. Lives on the
   cost-in-sydney post, tradie post and web-design page. Beige per Manon
   2026-07-17 ("lots of black") — yellow rejected: reserved for booking CTAs.
   Fields are flex columns so inputs stay bottom-aligned even when one label
   wraps to two lines. */
.calc { max-width: var(--box-w); margin: 0 auto; }
.calc__box { background: var(--grey-light); padding: 56px 60px; }
.calc__box h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 8px; }
.calc__box .calc__sub { color: #6a6a64; margin-bottom: 32px; }
.calc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 28px; align-items: stretch; }
.calc__field { display: flex; flex-direction: column; }
.calc__field label { display: block; flex: 1; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: #6a6a64; margin-bottom: 8px; }
.calc__field input {
  width: 100%; padding: 14px 16px; font-size: 18px; font-family: var(--font);
  background: var(--white); border: 1px solid var(--ink); color: var(--ink);
}
.calc__field input:focus { outline: 2px solid var(--yellow); border-color: var(--yellow); }
.calc__result { border-top: 1px solid var(--ink); padding-top: 24px; font-size: 20px; line-height: 1.6; }
.calc__result strong { background: var(--yellow); color: var(--ink); padding: 0 4px; }
.calc__note { font-size: 13px; color: #8a8a84; margin-top: 12px; }
@media (max-width: 900px) {
  .calc__box { padding: 36px 24px; }
  .calc__grid { grid-template-columns: 1fr; }
}

/* ---------- blog hub grid (2026-07-17) ----------
   .blog-grid had no styles and its cards inherited the case-study CAROUSEL's
   mobile padding (0 34px), which inset the images. Blog hub is a plain grid:
   no snap, no nav arrows, and on mobile the image spans the full card width. */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; max-width: var(--box-w); margin: 0 auto; }
@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; gap: 44px; }
  .blog-grid .work__card { padding: 0; flex: none; }
  .blog-grid .work__card .kicker { font-size: 15px; }   /* category line under the title (Manon 2026-07-17) */
}
/* bottom spacing inside every blog card = 14px (Manon 2026-07-17) — covers the hub
   cards (description last) and the "More insights" cards on posts (kicker last) */
.blog-grid .work__card > :last-child { padding-bottom: 14px; }

/* ---------- 4-card work grid (2026-07-17) ----------
   Desktop .work__grid is a fixed 3-column grid, so a 4th card orphans onto its
   own row (accountants + NFP niche pages have exactly 4 deck-mandated mini case
   studies). 2x2 matches the ways__grid--4 rhythm already on those pages.
   Mobile untouched: the <=900px carousel flex rules override grid-template. */
@media (min-width: 901px) {
  .work__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Section intro paragraph: sits between a .section-title and its grid
   (first use: packages section on /services/web-design/). The title's own
   60px margin-bottom stays; the intro pulls itself up under it. */
.section-intro { max-width: 720px; margin: -36px auto 48px; }

/* ---------- mobile 4-box colour alternation (2026-07-18) ----------
   Stacked single-column, the desktop colour rule (yellow TL, grey BR) reads as
   yellow/beige/beige/grey. Manon: alternate yellow/beige/grey/beige instead.
   `order` only bites in the stacked grid; desktop 2x2 keeps grey bottom-right.
   Scoped with :has() to coloured grids only, so all-beige grids keep DOM order. */
@media (max-width: 900px) {
  .ways__grid--4:has(> .ways__card--grey) > .ways__card:nth-child(1) { order: 1; }
  .ways__grid--4:has(> .ways__card--grey) > .ways__card:nth-child(2) { order: 2; }
  .ways__grid--4:has(> .ways__card--grey) > .ways__card:nth-child(3) { order: 4; }
  .ways__grid--4:has(> .ways__card--grey) > .ways__card:nth-child(4) { order: 3; }
}

/* Founder band: full-width B&W backdrop photo with the white-studio portrait
   layered on top as an inset card (recreates the old site's above-footer effect
   Manon liked). Sits as the LAST section inside <main>, directly above the footer.
   Pure image band; any author text goes in a separate .founder-band__caption. */
.founder-band { position: relative; overflow: hidden; margin: 0 70px; }
.founder-band__bg { display: block; width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; filter: grayscale(1); }
.founder-band__inset { position: relative; display: block; width: min(72%, 980px); margin: 64px auto; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.founder-band__inset img { display: block; width: 100%; height: auto; }
.founder-caption { text-align: center; margin: 18px auto 46px; font-size: 15px; }
@media (max-width: 900px) {
  .founder-band { margin: 0 20px; }
  .founder-band__inset { width: 86%; margin: 34px auto; }
}

/* footer newsletter status line (Brevo wiring, 2026-07-18) */
.newsletter__note { margin-top: 10px; font-size: 14px; line-height: 1.5; }

/* ---------- founder band (2026-07-18, Manon's layered style) ----------
   Sits AFTER the final CTA on all industry pages: the warehouse-office stage
   (same image as .check__stage) with Manon's portrait layered on top and an
   ink caption bar overlaid on the photo. Trust note after the ask. */
.founder { padding: 0 70px 140px; }
.founder__stage {
  background: url("../images/creative_baguette_warehouse_office.png") center/cover;
  max-width: 1300px; margin: 0 auto; padding: 90px 6%;
}
.founder__stage figure { max-width: 760px; margin: 0 auto; position: relative; }
.founder__stage img { width: 100%; height: auto; display: block; }
.founder__caption {
  position: absolute; left: 0; bottom: 28px;
  background: rgba(17,17,17,.94); color: var(--white);
  padding: 12px 22px; font-size: 15px; letter-spacing: .04em;
}
@media (max-width: 900px) {
  .founder { padding: 0 20px 80px; }
  .founder__stage { padding: 32px 5%; }
  .founder__caption { position: static; display: inline-block; margin-top: 0; font-size: 13px; padding: 10px 14px; }
}