/* ==========================================================================
   Faratbibi | faratbibi.info
   One stylesheet for every page. No build step, no external requests.

   1. Fonts
   2. Tokens
   3. Base
   4. Utilities
   5. Buttons and links
   6. Header, nav and mobile menu
   7. Patterns (damask)
   8. Home: hero
   9. Home: about + photo card
   10. Home: industries band + chart silhouette
   11. Home: services
   12. Home: why / what you get
   13. Home: results grid
   14. Footer
   15. Floating WhatsApp button
   16. SHARED COMPONENTS FOR INDUSTRY PAGES (page-hero, breadcrumb, shot figure,
       figures table, approach list, audience blocks, CTA band, other industries)
   17. 404 page
   18. Motion and print
   19. Industry pages: page-specific additions
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/oswald-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/open-sans-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/open-sans-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/open-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/open-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/open-sans-latin-700-normal.woff2") format("woff2"); }

/* 2. Tokens --------------------------------------------------------------- */
:root {
  /* palette (BRIEF.md section 3) */
  --cream: #EBE7D7;          /* header background */
  --hero: #F1ECE8;           /* damask hero base */
  --hero-light: #FBF9F7;     /* light zone behind the hero screenshots */
  --slate: #395862;          /* H1, headings, dark card, footer */
  --slate-card: #3B5E6B;     /* patterned statement card */
  --steel: #5788A2;          /* decorative fills only */
  --steel-deep: #4A7690;     /* chart silhouette base */
  --steel-ink: #3B6680;      /* nav links, small blue text */
  --green: #4A9E46;          /* pills, big green H2 */
  --green-hover: #3B873A;
  --green-ink: #2E7533;      /* small green text and links */
  --band: #F7F7F7;           /* alternate section background */
  --body: #666666;           /* paragraph text */
  --yellow: #F4CE19;         /* footer links */
  --white: #FFFFFF;
  --line: #E3E3E3;
  --whatsapp: #25D366;
  --on-slate: #D9E4E8;       /* soft text on slate (5.9:1) */

  /* type */
  --font-display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* layout */
  --container: 1080px;
  --gutter: 16px;
  --header-h: 82px;
  --section-y: 90px;
  --radius-card: 15px;
  --radius-pill: 50px;
  --shadow-header: 0 0 7px rgba(0, 0, 0, .1);
  --shadow-hero: 0 8px 18px rgba(0, 0, 0, .07);
  --shadow-frame: 0 14px 34px rgba(57, 88, 98, .18), 0 2px 6px rgba(57, 88, 98, .1);
  --focus: 3px solid var(--steel-ink);
}
@media (max-width: 979px) { :root { --header-h: 76px; --section-y: 72px; } }
@media (max-width: 699px) { :root { --section-y: 56px; } }

/* 3. Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0;
  background: var(--white);
  color: var(--body);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.8;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4 { color: var(--slate); font-weight: 700; margin: 0 0 .5em; line-height: 1.15; }
h2 { font-size: 43px; }
h3 { font-size: 31px; }
h4 { font-size: 28px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; }
a { color: var(--green-ink); text-underline-offset: .18em; }
a:hover { color: var(--green-hover); }
strong, b { font-weight: 700; }
:focus-visible { outline: var(--focus); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--yellow); color: #1f2f35; }
/* no single word left alone on the last line of short display text */
h1, h2, h3, .hero__sub, .page-hero__sub, .about-photo__line, .proof-stack__caption, .why__alt, .result-card__result { text-wrap: balance; }
@media (max-width: 699px) {
  h2 { font-size: 30px; }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }
}

/* 4. Utilities ------------------------------------------------------------ */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.section { padding-block: var(--section-y); }
.section--tight-top { padding-top: calc(var(--section-y) * .5); }
.section--tight-bottom { padding-bottom: calc(var(--section-y) * .5); }
.band { background: var(--band); }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 1000;
  background: var(--slate); color: var(--white); padding: 12px 18px; border-radius: 0 0 8px 8px;
  font-weight: 700; font-size: 16px; text-decoration: none;
}
.skip-link:focus { top: 0; color: var(--white); }
.lead { font-size: 20px; line-height: 1.7; }
.small { font-size: 16px; line-height: 1.7; }
.note { font-size: 15px; line-height: 1.6; color: var(--body); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.h-green { color: var(--green); font-size: 48px; line-height: 1.15; }
.h-xl { font-size: 52px; line-height: 1.1; }
.prose p { line-height: 2.2; }
.prose p:last-child { margin-bottom: 0; }
@media (max-width: 699px) {
  .h-green { font-size: 38px; }
  .h-xl { font-size: 38px; }
  .lead { font-size: 18px; }
  .prose p { line-height: 2; }
}

/* 5. Buttons and links ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 6px 22px;
  border: 2px solid var(--green); border-radius: var(--radius-pill);
  background: var(--green); color: var(--white);
  font-family: var(--font-body); font-weight: 700; font-size: 20px; line-height: 1.25;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible { background: var(--green-hover); border-color: var(--green-hover); color: var(--white); }
.btn--caps { text-transform: uppercase; letter-spacing: .01em; }
/* outline pill for dark (slate) backgrounds */
.btn--ghost { background: transparent; border-color: var(--white); color: var(--white); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--white); border-color: var(--white); color: var(--slate); }
/* outline pill for light backgrounds */
.btn--outline { background: transparent; border-color: var(--green-ink); color: var(--green-ink); }
.btn--outline:hover, .btn--outline:focus-visible { background: var(--green-ink); border-color: var(--green-ink); color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.btn-split { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; }
.text-link { color: var(--green-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; }
.text-link:hover { color: var(--green-hover); text-decoration-thickness: 2px; }
.on-dark :focus-visible, .site-footer :focus-visible, .pattern-slate :focus-visible { outline-color: var(--yellow); }
@media (max-width: 399px) {
  .btn { font-size: 19px; padding-inline: 18px; }
  .btn--caps { letter-spacing: 0; }
}
@media (max-width: 359px) {
  .btn { font-size: 17px; padding-inline: 14px; }
}

/* 6. Header, nav and mobile menu ----------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  box-shadow: var(--shadow-header);
}
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--header-h); }
.site-logo { display: inline-flex; align-items: center; flex: 0 0 auto; padding-block: 8px; border-radius: 4px; }
.site-logo img { width: auto; height: 56px; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 27px; }
.site-nav a {
  display: inline-block; padding: 15px 0 11px;
  color: var(--steel-ink); font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: .02em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 2px solid var(--steel);
  transition: color .2s ease, border-color .2s ease;
}
.site-nav a:hover { color: var(--green-ink); border-bottom-color: var(--green); }
.site-nav .site-nav__last a { color: var(--slate); border-bottom-color: transparent; }
.site-nav .site-nav__last a:hover { color: var(--green-ink); border-bottom-color: var(--green); }
.site-nav a[aria-current="page"] { color: var(--slate); border-bottom-color: var(--green); }

.nav-toggle {
  display: none; align-items: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 6px 10px; margin-right: -10px;
  border: 0; background: transparent; color: var(--slate); cursor: pointer;
  font: 700 14px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  border-radius: 6px;
}
.nav-toggle__icon { position: relative; width: 24px; height: 2.5px; background: currentColor; border-radius: 2px; transition: background-color .2s ease; }
.nav-toggle__icon::before, .nav-toggle__icon::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2.5px; background: currentColor; border-radius: 2px;
  transition: transform .2s ease;
}
.nav-toggle__icon::before { top: -7.5px; }
.nav-toggle__icon::after { top: 7.5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-7.5px) rotate(-45deg); }

@media (max-width: 979px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    border-top: 3px solid var(--green);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .12);
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav-open .site-nav { display: block; }
  .site-nav__list { display: block; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding: 8px var(--gutter) 16px; }
  .site-nav li { border-bottom: 1px solid #EEEEEE; }
  .site-nav li:last-child { border-bottom: 0; }
  .site-nav a, .site-nav .site-nav__last a {
    display: flex; align-items: center; min-height: 52px; width: 100%; padding: 8px 4px;
    font-size: 16px; border-bottom: 0; color: var(--slate);
  }
  .site-nav a:hover, .site-nav .site-nav__last a:hover { color: var(--green-ink); }
}
@media (max-width: 374px) {
  .site-logo img { height: 46px; }
}
@media (max-width: 339px) {
  /* very narrow phones: icon-only toggle; the word stays available to screen readers */
  .nav-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
/* the reference header runs edge to edge on wide screens */
@media (min-width: 1181px) {
  .site-header .container { max-width: none; padding-inline: 33px; }
}

/* 7. Patterns (original damask tiles in assets/img) ------------------------ */
.pattern-cream { background-color: var(--hero); background-image: url("../img/damask-cream.svg"); background-size: 400px 262px; }
.pattern-slate { background-color: var(--slate-card); background-image: url("../img/damask-slate.svg"); background-size: 300px 196px; color: var(--white); }

/* 8. Home: hero ---------------------------------------------------------- */
.hero { position: relative; overflow: hidden; box-shadow: var(--shadow-hero); z-index: 1; }
.hero::before {
  /* light zone that the screenshots sit in, fading in from the left like the reference photo */
  content: ""; position: absolute; top: 0; bottom: 0; left: 46%; right: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 249, 247, 0) 0%, rgba(251, 249, 247, .78) 22%, rgba(251, 249, 247, .94) 48%, var(--hero-light) 100%);
}
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); align-items: center; min-height: 470px; gap: 24px; }
.hero__text { padding-block: 56px; }
.hero__title {
  margin: 0; color: var(--slate);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 78px; line-height: 1.1; letter-spacing: .005em;
}
.hero__title .line { display: block; white-space: nowrap; }
.hero__sub { margin: 4px 0 26px; color: var(--slate); font-weight: 700; font-size: 40px; line-height: 1.2; }

.hero__proof { position: relative; align-self: stretch; margin: 0; }
.proof-stack { position: relative; height: 100%; min-height: 470px; margin: 0; }
.proof {
  position: absolute; margin: 0;
  background: var(--white); padding: 6px; border-radius: 10px;
  border: 1px solid rgba(57, 88, 98, .12);
  box-shadow: var(--shadow-frame);
}
.proof img { width: 100%; border-radius: 5px; }
.proof__label {
  position: absolute; left: 14px; top: -15px;
  display: inline-block; padding: 3px 12px; border-radius: var(--radius-pill);
  background: var(--slate); color: var(--white);
  font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; z-index: 3;
}
.proof--front { z-index: 2; left: -30px; top: 190px; width: 500px; }
.proof--back { z-index: 1; left: 96px; top: 50px; width: 560px; }
.proof--back::after {
  /* soft fade into the light zone, like the reference photo melting into the texture */
  content: ""; position: absolute; top: -28px; bottom: -40px; right: -44px; width: 46%; pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 249, 247, 0) 0%, rgba(251, 249, 247, .7) 45%, var(--hero-light) 82%);
}
.proof-stack__caption {
  position: absolute; z-index: 2; left: -26px; top: 436px; width: 500px;
  font-size: 15px; line-height: 1.4; color: var(--slate); font-weight: 600;
}

@media (max-width: 1180px) {
  .hero__inner { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
  .hero__title { font-size: 66px; }
  .hero__sub { font-size: 34px; }
  .proof--front { width: 440px; top: 200px; left: -20px; }
  .proof--back { width: 480px; left: 70px; }
  .proof-stack__caption { width: 440px; top: 414px; left: -16px; }
}
@media (max-width: 979px) {
  .hero::before { left: 0; top: 46%; background: linear-gradient(180deg, rgba(251, 249, 247, 0) 0%, rgba(251, 249, 247, .85) 26%, var(--hero-light) 70%); }
  .hero__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; }
  .hero__text { padding-block: 40px 28px; }
  .hero__title { font-size: clamp(44px, 11.6vw, 72px); }
  .hero__sub { font-size: clamp(25px, 6.4vw, 34px); margin-bottom: 22px; }
  .hero__proof { padding-bottom: 36px; }
  /* one column: the two screenshots sit one above the other, nothing hidden */
  .proof-stack { min-height: 0; height: auto; padding-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .proof, .proof--front, .proof--back { position: relative; left: auto; right: auto; top: auto; width: auto; }
  .proof--back::after { display: none; }
  .proof-stack__caption { position: static; grid-column: 1 / -1; width: auto; margin-top: -16px; }
}
@media (min-width: 600px) and (max-width: 979px) {
  .proof-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
}

/* 9. Home: about + photo card --------------------------------------------- */
/* The heading sits inside the grid so the photo card can run from the heading
   down beside the paragraphs. Her photo fills the whole card (wall softened in the image itself). */
.about__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; gap: 0 60px; align-items: start; }
.about__title { grid-column: 1; margin: 0 0 52px; }
.about__grid .prose { grid-column: 1; }
.about__grid .prose p { text-wrap: pretty; }
.about-photo {
  grid-column: 2; grid-row: 1 / span 2; align-self: start;
  margin: 0; overflow: hidden; border-radius: var(--radius-card);
  background: var(--slate-card);
  box-shadow: 0 16px 34px rgba(57, 88, 98, .16), 0 2px 6px rgba(57, 88, 98, .08);
}
.about-photo__img { display: block; width: 100%; height: auto; }
@media (min-width: 980px) and (max-width: 1279px) {
  /* keep the photo card clear of the floating WhatsApp button (fixed, 18px from the right, 56px wide):
     a full 64px below the 1112px container width, easing to nothing by about 1260px */
  .about__grid { padding-right: clamp(0px, calc(630px - 50vw), 64px); }
}
@media (max-width: 979px) {
  .about__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; }
  .about__title { margin-bottom: 28px; }
  .about-photo { grid-column: 1; grid-row: auto; width: 100%; max-width: 300px; margin: 44px auto 0; }
}

/* 10. Home: industries band + chart silhouette --------------------------- */
.industries__grid { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr) 260px; gap: 40px; align-items: start; }
.industries__intro h2 { margin-bottom: 22px; }
.industries__intro p { line-height: 2.2; margin-bottom: 18px; }
.industry-list { margin: 6px 0 0; padding: 0; list-style: none; counter-reset: ind; }
.industry-list li { counter-increment: ind; position: relative; padding-left: 30px; margin-bottom: 14px; line-height: 1.5; font-size: 16px; color: var(--body); }
.industry-list li::before { content: counter(ind) "."; position: absolute; left: 0; top: 0; color: var(--slate); font-weight: 600; font-size: 18px; line-height: 1.45; }
.industry-list__name { color: var(--slate); font-weight: 600; font-size: 18px; text-decoration: none; border-bottom: 2px solid rgba(87, 136, 162, .45); display: inline-block; padding-top: 15px; margin-top: -15px; }
.industry-list__name:hover { color: var(--green-ink); border-bottom-color: var(--green); }
.industry-list__colon { color: var(--slate); font-weight: 600; font-size: 18px; }
.industry-list__result { display: block; margin-top: 2px; }
.industries__note { margin: 18px 0 0; font-size: 14px; line-height: 1.55; font-style: italic; font-weight: 400; }
.industries__chart { margin: 0; padding-top: 4px; }
.industries__chart-svg { display: block; width: 100%; height: auto; }
.industries__chart-dots text { font-family: var(--font-body); font-weight: 700; font-size: 16px; fill: var(--green-ink); }
@media (max-width: 1100px) {
  /* two columns: intro over chart on the left, the list on the right */
  .industries__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .industries__intro { grid-column: 1; grid-row: 1; }
  .industries__list { grid-column: 2; grid-row: 1 / span 2; }
  .industries__chart { grid-column: 1; grid-row: 2; max-width: 240px; justify-self: start; }
}
@media (max-width: 849px) {
  .industries__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .industries__intro, .industries__list, .industries__chart { grid-column: auto; grid-row: auto; }
  .industries__intro p { line-height: 2; }
  .industries__chart { max-width: 270px; justify-self: center; }
}

/* 11. Home: services ------------------------------------------------------ */
.services__intro { max-width: 760px; margin: 0 auto 56px; }
.service { padding-top: 8px; margin-bottom: 52px; }
.service:last-of-type { margin-bottom: 0; }
.service__title { margin-bottom: 6px; }
.service__line { margin-bottom: 18px; font-weight: 600; color: var(--steel-ink); line-height: 1.5; }
.service h4 { margin: 20px 0 10px; }
/* every bulleted list shares one small indent (6px) from the heading above it, like the reference */
.list { margin: 0 0 8px; padding-left: 6px; line-height: 1.5; }
.list li { margin-bottom: 8px; }
/* content bullets (services lists, What You Get, other industries): a green 8px dot centred on the
   first line, with a hanging indent so wrapped lines start under the text. The dot is a border, not a
   background, so it also shows when the page is printed without background graphics. */
.list, .plain-list, .other-industries { list-style: none; }
.list > li, .plain-list > li, .other-industries > li { padding-left: 22px; }
.list > li::before, .plain-list > li::before, .other-industries > li::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 14px 0 -22px;
  border: 4px solid var(--green); border-radius: 50%;
  vertical-align: middle; position: relative; top: -1px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.service__cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 56px; }
.services .btn-split { margin-top: 64px; }
@media (max-width: 849px) {
  .service__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .services__intro { margin-bottom: 36px; }
  .service { margin-bottom: 40px; }
  .services .btn-split { margin-top: 44px; flex-direction: column; align-items: flex-start; }
  .services .btn-split .btn:last-child { align-self: flex-end; }
}

/* 12. Home: why / what you get ------------------------------------------- */
.why__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 56px; align-items: start; }
.why__main p { line-height: 2.2; }
.why__main .btn { margin-top: 6px; }
.why__alt { margin: 18px 0 0; font-size: 16px; line-height: 1.6; }
/* inline (not inline-block) so the full stop after the link never drops to a line of its own;
   the vertical padding still gives the link a tall tap area without moving the text */
.why__alt a { padding-block: 10px; }
.plain-list { list-style: none; margin: 30px 0 0; padding: 0 0 0 6px; line-height: 1.55; }
.plain-list li { margin-bottom: 6px; }
@media (max-width: 849px) {
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .why__main p { line-height: 2; }
}
@media (max-width: 699px) {
  .plain-list { margin-top: 18px; }
}

/* 13. Home: results grid -------------------------------------------------- */
.results__intro { max-width: 860px; margin-bottom: 44px; }
.results__intro .small { color: var(--body); }
.results-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 33px; }
.result-card { display: flex; flex-direction: column; }
.result-card__title { font-size: 17px; line-height: 1.3; margin: 0 0 14px; }
.result-card__shot {
  margin: 0 0 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--white);
  box-shadow: 0 6px 16px rgba(57, 88, 98, .08);
}
.result-card__shot img { width: 100%; }
.result-card__shot a { display: block; }
.result-card__result { margin: 0 0 8px; color: var(--slate); font-weight: 700; font-size: 18px; line-height: 1.45; }
.result-card__small { margin: 0 0 14px; font-size: 15px; line-height: 1.6; }
.result-card__link { margin-top: auto; align-self: flex-start; font-size: 16px; line-height: 1.5; padding-block: 10px; }
.result-card--cta { padding: 30px 20px; border-radius: var(--radius-card); justify-content: center; }
.result-card--cta .result-card__title { color: var(--white); font-size: 26px; font-weight: 300; margin-bottom: 14px; }
.result-card--cta p { color: var(--on-slate); font-size: 16px; line-height: 1.7; margin-bottom: 22px; }
.result-card--cta .btn { align-self: flex-start; }
@media (min-width: 650px) {
  /* four industry cards, then this card fills the rest of the last row */
  .results-grid .result-card--cta { grid-column: span 2; }
  .results-grid .result-card--cta p { max-width: 560px; }
}
@media (min-width: 650px) and (max-width: 979px) {
  .results-grid .result-card--cta { grid-column: 1 / -1; }
}
@media (min-width: 650px) and (max-width: 1100px) {
  /* narrow three- and two-column cards: keep "Send me your account" on one line */
  .result-card--cta .btn { font-size: 18px; padding-inline: 18px; }
}
@media (max-width: 979px) {
  .results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 649px) {
  .results-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .results__intro { margin-bottom: 32px; }
}

/* 14. Footer -------------------------------------------------------------- */
.site-footer { background-color: var(--slate); color: var(--on-slate); padding: 72px 0 28px; }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .9fr); gap: 44px; align-items: start; }
.site-footer__logo { display: inline-block; margin-bottom: 26px; border-radius: 4px; }
.site-footer__logo img { width: auto; height: 56px; }
.footer-links { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.footer-links li { break-inside: avoid; }
.footer-links a, .footer-contact a {
  color: var(--yellow); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; line-height: 1.35; padding-block: 4px;
}
.footer-links a:hover, .footer-contact a:hover { color: var(--white); }
.footer-links a[aria-current="page"] { color: var(--white); text-decoration-thickness: 2px; }
.site-footer__cta { text-align: center; padding-top: 6px; }
.site-footer__prompt { color: var(--white); font-weight: 700; font-size: 20px; line-height: 1.5; margin-bottom: 20px; }
.footer-contact { list-style: none; margin: 0; padding: 0; justify-self: end; }
.footer-contact__heading { color: var(--white); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin: 8px 0 10px; }
.footer-contact li { margin-bottom: 4px; }
.footer-contact a { gap: 14px; min-height: 48px; text-decoration: none; }
.footer-contact a:hover .footer-contact__value { text-decoration-thickness: 2px; }
.footer-contact svg { flex: 0 0 auto; width: 22px; height: 22px; fill: var(--white); }
.footer-contact__label { display: block; color: var(--white); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; line-height: 1.3; }
.footer-contact__value { display: block; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.site-footer__bottom {
  margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .18);
  font-size: 14px; line-height: 1.7; color: var(--on-slate); text-align: center;
}
.site-footer__bottom p { margin: 0; }
/* real spaces sit around each dot in the HTML (so screen readers and copied text keep the items apart);
   the padding tops them up to the old 6px look */
.site-footer__bottom .sep { padding-inline: 2px; }
@media (min-width: 650px) {
  /* links in two even groups: page anchors, then the five industries */
  .footer-links li:nth-child(5) { break-before: column; -webkit-column-break-before: always; }
}
@media (max-width: 1100px) {
  /* two columns: logo + links on the left; the prompt, then contact, on the right.
     Same order on screen as in the HTML, so keyboard focus follows what you see. */
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__nav { grid-column: 1; grid-row: 1 / span 2; }
  .site-footer__cta { grid-column: 2; grid-row: 1; text-align: left; padding: 0 0 28px; border-bottom: 1px solid rgba(255, 255, 255, .18); }
  .footer-contact { grid-column: 2; grid-row: 2; justify-self: start; }
}
@media (max-width: 749px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .site-footer__nav, .site-footer__cta, .footer-contact { grid-column: auto; grid-row: auto; }
  .site-footer__cta { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .18); }
}
@media (max-width: 649px) {
  .site-footer { padding-top: 56px; padding-bottom: 96px; }
  .footer-links { columns: 1; }
  .site-footer__bottom { text-align: left; }
}

/* 15. Floating WhatsApp button ------------------------------------------- */
.wa-float {
  position: fixed; z-index: 90;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--whatsapp); color: var(--white);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22), 0 0 0 3px rgba(255, 255, 255, .9);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float svg { width: 30px; height: 30px; fill: currentColor; }
.wa-float:hover { color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .26), 0 0 0 3px rgba(255, 255, 255, .9); }
.wa-float:focus-visible { outline: 3px solid var(--slate); outline-offset: 4px; border-radius: 50%; }

/* ==========================================================================
   16. SHARED COMPONENTS FOR INDUSTRY PAGES
   Reuse these classes on every industry page. See out/components.md for markup.
   ========================================================================== */

/* page-hero: shorter cream damask hero (add .pattern-cream to the same element) */
.page-hero { position: relative; overflow: hidden; box-shadow: var(--shadow-hero); z-index: 1; }
.page-hero::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 55%; right: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(251, 249, 247, 0), rgba(251, 249, 247, .7) 60%, rgba(251, 249, 247, .9));
}
.page-hero::after {
  /* the steel leaf-pattern chart from the home page, as a quiet decoration on wide screens */
  content: ""; position: absolute; right: max(24px, calc((100vw - var(--container)) / 2 - 40px)); bottom: -1px;
  width: 210px; height: 280px; pointer-events: none;
  background: url("../img/chart-silhouette.svg") no-repeat center bottom / contain;
  opacity: .92;
}
.page-hero__inner { position: relative; z-index: 1; padding-block: 34px 60px; }
.page-hero__inner > * { max-width: 880px; }
.page-hero__title {
  margin: 18px 0 8px; color: var(--slate);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: 66px; line-height: 1.1;
}
.page-hero__title .line { display: block; }
.page-hero__sub { max-width: 880px; margin: 0 0 26px; color: var(--slate); font-weight: 700; font-size: 26px; line-height: 1.4; }
@media (max-width: 1199px) { .page-hero::after { display: none; } }
@media (max-width: 699px) {
  .page-hero__inner { padding-block: 20px 44px; }
  .page-hero__title { font-size: clamp(40px, 11vw, 56px); margin-top: 14px; }
  .page-hero__sub { font-size: 21px; }
}

/* breadcrumb (sits at the top of .page-hero__inner) */
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; line-height: 1.4; font-weight: 600; }
.breadcrumb li { display: inline-flex; align-items: center; color: var(--slate); }
.breadcrumb li + li::before { content: "\203A"; padding: 0 10px; color: var(--steel-ink); font-size: 18px; line-height: 1; }
.breadcrumb a { color: var(--steel-ink); display: inline-flex; align-items: center; min-height: 44px; }
.breadcrumb a:hover { color: var(--green-ink); }
.breadcrumb [aria-current="page"] { color: var(--slate); }

/* section heading + intro used on industry pages */
.section-head { margin-bottom: 36px; }
.section-head p { max-width: 820px; }

/* shot figure: the screenshot at full container width, click to open full size */
.shot { margin: 0 0 64px; }
.shot:last-child { margin-bottom: 0; }
.shot__figure { margin: 0; }
.shot__title { font-size: 26px; margin: 0 0 28px; }
.shot__link {
  display: block; position: relative; background: var(--white);
  padding: 8px; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-frame);
  transition: box-shadow .2s ease, transform .2s ease;
}
.shot__link img { width: 100%; border-radius: 6px; }
.shot__link:hover { box-shadow: 0 18px 40px rgba(57, 88, 98, .24), 0 2px 6px rgba(57, 88, 98, .12); }
.shot__open {
  position: absolute; right: 22px; top: -14px;
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: var(--radius-pill);
  background: rgba(57, 88, 98, .92); color: var(--white); font-size: 13px; font-weight: 600; line-height: 1.5;
}
.shot__caption { margin-top: 18px; padding-left: 18px; border-left: 3px solid var(--green); font-size: 16px; line-height: 1.75; }
.shot__caption p { margin: 0 0 .6em; }
.shot__caption p:last-child { margin-bottom: 0; }
.shot__caption .shot__note { font-size: 15px; color: var(--body); }
@media (max-width: 979px) {
  /* keep the badge clear of the floating WhatsApp button on the right */
  .shot__open { right: auto; left: 12px; }
}
@media (max-width: 699px) {
  .shot { margin-bottom: 48px; }
  .shot__title { font-size: 21px; }
  .shot__link { padding: 4px; border-radius: 8px; }
  .shot__open { top: -13px; font-size: 13px; }
  .shot__caption { padding-left: 14px; }
}

/* figures table (scrolls inside its wrapper on phones; the page never scrolls sideways) */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 6px 18px rgba(57, 88, 98, .07);
}
.figures { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 16px; line-height: 1.45; font-variant-numeric: tabular-nums; }
.figures caption { caption-side: top; text-align: left; padding: 16px 18px 12px; color: var(--slate); font-weight: 700; font-size: 17px; line-height: 1.45; }
.figures th, .figures td { padding: 12px 16px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.figures thead th { background: var(--slate); color: var(--white); font-weight: 700; font-size: 14px; letter-spacing: .02em; border-top: 0; white-space: normal; vertical-align: bottom; }
.figures th[scope="row"], .figures thead th:first-child { text-align: left; white-space: normal; min-width: 230px; width: 34%; }
.figures th[scope="row"] { color: var(--slate); font-weight: 600; }
.figures tbody tr.is-prev th, .figures tbody tr.is-prev td { background: var(--band); color: var(--body); font-weight: 500; }
.figures tbody tr.is-prev th[scope="row"] { font-weight: 500; font-style: italic; }
@media (max-width: 799px) {
  /* tablets: all six columns fit, nothing scrolls sideways */
  .figures { min-width: 0; }
  .figures th[scope="row"], .figures thead th:first-child { min-width: 0; width: auto; }
  .figures th, .figures td { padding: 10px; }
  .figures thead th { font-size: 13px; letter-spacing: 0; }
}
@media (max-width: 599px) {
  /* phones: each row becomes a small card, every figure labelled */
  .table-wrap { overflow: visible; }
  .figures, .figures caption, .figures tbody, .figures tr, .figures th, .figures td { display: block; }
  .figures thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .figures caption { padding: 14px 16px 12px; }
  .figures tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 14px; padding: 12px 16px 14px; border-top: 1px solid var(--line); }
  .figures tbody tr.is-prev { background: var(--band); }
  .figures tbody tr:last-child { border-radius: 0 0 11px 11px; }
  .figures tbody tr th, .figures tbody tr td, .figures tbody tr.is-prev th, .figures tbody tr.is-prev td { background: transparent; border-top: 0; padding: 4px 0; text-align: left; white-space: normal; }
  .figures th[scope="row"] { grid-column: 1 / -1; padding-bottom: 6px; }
  .figures td::before { content: attr(data-label); display: block; color: var(--slate); font-size: 13px; font-weight: 600; font-style: normal; line-height: 1.35; }
}
.table-note { margin: 16px 0 0; font-size: 15px; line-height: 1.65; }
.table-note + .table-note { margin-top: 8px; }

/* approach list: numbered points, bold lead phrase then body text */
.approach { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 44px; }
.approach li { counter-increment: step; position: relative; padding-left: 58px; line-height: 1.75; }
.approach li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--steel-ink); color: var(--white); font-weight: 700; font-size: 18px; line-height: 1;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .35);
}
.approach strong { display: block; color: var(--slate); font-size: 19px; line-height: 1.4; margin-bottom: 4px; }
@media (max-width: 849px) { .approach { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) { .approach li { padding-left: 52px; } .approach li::before { width: 36px; height: 36px; font-size: 16px; } }

/* "what the numbers say" small print */
.small-print { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.65; }

/* owner / agency blocks: two columns, one on phones */
.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.audience { padding: 34px 32px; border-radius: var(--radius-card); background: var(--band); }
.audience::before { content: ""; display: block; width: 48px; height: 4px; border-radius: 2px; background: var(--green); margin-bottom: 18px; }
.audience h3 { font-size: 26px; margin-bottom: 12px; }
.audience p { margin: 0; line-height: 1.85; }
@media (max-width: 849px) { .audience-grid { grid-template-columns: minmax(0, 1fr); } .audience { padding: 28px 22px; } }

/* CTA band: slate patterned card, like the home statement card */
.cta-band { padding-block: var(--section-y); }
.cta-card { border-radius: var(--radius-card); padding: 60px 48px; text-align: center; }
.cta-card h2 { color: var(--white); font-size: 40px; margin-bottom: 14px; }
.cta-card p { color: var(--on-slate); font-size: 19px; line-height: 1.75; max-width: 680px; margin: 0 auto 28px; }
.cta-card .btn-row { justify-content: center; }
@media (max-width: 699px) {
  .cta-card { padding: 44px 22px; text-align: left; }
  .cta-card h2 { font-size: 30px; }
  .cta-card p { font-size: 17px; }
  .cta-card .btn-row { justify-content: flex-start; }
}
@media (max-width: 399px) {
  /* room for "Message me on WhatsApp" on one line */
  .cta-card { padding-inline: 16px; }
}

/* other industries links */
.other-industries { list-style: none; margin: 0 0 24px; padding: 0 0 0 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 44px; }
.other-industries li { line-height: 1.6; font-size: 17px; }
/* its green dot comes from the shared content-bullet rule in section 11 */
.other-industries a { color: var(--slate); font-weight: 600; text-decoration: none; border-bottom: 2px solid rgba(87, 136, 162, .45); display: inline-block; padding-top: 15px; margin-top: -15px; }
.other-industries a:hover { color: var(--green-ink); border-bottom-color: var(--green); }
@media (max-width: 699px) { .other-industries { grid-template-columns: minmax(0, 1fr); } }

/* 17. 404 page ----------------------------------------------------------- */
.notfound .page-hero__inner { padding-block: 64px 80px; }
.notfound__text { max-width: 640px; font-size: 18px; line-height: 2; margin-bottom: 28px; }

/* 18. Motion and print --------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .wa-float, .nav-toggle, .skip-link { display: none !important; }
  .hero, .page-hero, .pattern-cream, .pattern-slate { background-image: none !important; box-shadow: none !important; }
  .pattern-slate, .site-footer { background: #fff !important; color: #000 !important; }
  .site-footer a, .footer-links a, .footer-contact a { color: #000 !important; }
  .pattern-slate *, .site-footer * { color: #000 !important; }
  .footer-contact svg { fill: #000 !important; }
  .btn--ghost { border-color: #000 !important; }
  .btn { background: #fff !important; color: #000 !important; border-color: #000 !important; }
  .site-footer__logo { display: none !important; }
  .about-photo { box-shadow: none !important; background: #fff !important; border: 1px solid #999; break-inside: avoid; }
}

/* ==========================================================================
   19. INDUSTRY PAGES: page-specific additions (added with the 5 industry pages)
   Only affects industry pages; nothing here touches the home page.
   ========================================================================== */

/* the CTA band's own padding-block (section 16) is declared after
   .section--tight-top, so restore the halved top padding it is meant to get */
.cta-band.section--tight-top { padding-top: calc(var(--section-y) * .5); }

/* "See all five industries": give the lone text link a 44px tap height */
.other-industries + p .text-link { display: inline-block; padding-block: 10px; }