/* =========================================================
   Design tokens — the one place for colours, type sizes and spacing.
   Change a value here and it updates everywhere.

   Breakpoints (same as the Framer site):
     desktop ≥1200px · tablet 810–1199px · phone ≤809px
   ========================================================= */

:root {
  /* Colour */
  /* Text — just two colours */
  --black: #1e1e1e;                /* "Dark": body copy, headings, buttons, outlines */
  --gray: #646261;                 /* captions and disabled text only */
  --white: #fff;
  --hover-gray: #ededed;           /* hover fill for white buttons */
  --placeholder: #7d818d;          /* grey stand-in where an image doesn't exist yet */
  --line: #ebe6e6;                 /* light gray line — top of the footer, above "Keep reading", between FAQs */
  --screen-stroke: #dcd7d6;        /* gray outline around screenshots (class="cs-screen") */
  --page-top: #fffafa;             /* page background: soft pink at the top… */
  --page-bottom: #fcfaff;          /* …fading to soft lavender at the bottom */
  /* Gradient backgrounds: always the brand colours at 25%.
     Bands alternate down the page (.band, then .band--alt) so the colours swap sides. */
  --tint: 0.25;
  --band: linear-gradient(135deg, rgba(var(--green-rgb), var(--tint)) 0%, rgba(var(--pink-rgb), var(--tint)) 50%, rgba(var(--purple-rgb), var(--tint)) 100%);
  --band-alt: linear-gradient(135deg, rgba(var(--purple-rgb), var(--tint)) 0%, rgba(var(--pink-rgb), var(--tint)) 50%, rgba(var(--green-rgb), var(--tint)) 100%);

  --pink: rgb(255, 173, 173);
  --pink-hover: rgb(254, 122, 120);
  --purple: rgb(202, 187, 233);
  --green: rgb(179, 222, 193);
  --sage: rgb(131, 163, 141);      /* article icons */
  --mauve: rgb(155, 144, 176);     /* video icons */

  /* Brand tints: the pastel colour channels, for soft backgrounds */
  --pink-rgb: 255, 173, 173;
  --purple-rgb: 202, 187, 233;
  --green-rgb: 179, 222, 193;

  /* Layout — side margins:
     --edge is the minimum side margin: 64px down to 600px wide, 16px on phones below that.
     Content can grow to --max wide; on wider screens the margins grow to keep it centred.
     Use var(--gutter) for every page-edge left/right padding. */
  --edge: 64px;
  --max: 1600px;
  --gutter: max(var(--edge), calc((100vw - var(--max)) / 2));
  --section-pad: 124px;            /* space above and below each section — the same everywhere */
  --text-max: 700px;               /* widest a block of text gets */
  --card-pad: 24px;                /* padding inside every card, every screen size */
  --block-gap: 24px;               /* heading → text → button inside a content block, every screen size */
  --header-h: 86px;                /* 40px space above + 30px logo + 16px below (shrinks as you scroll, see header.css) */
  --header-top: 40px;              /* space above the menu at the top of the page */
  --header-top-compact: 24px;      /* … once you scroll past the hero */

  /* Type */
  --font: "Albert Sans", sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;  /* navigation, captions, tags */

  /* Text sizes — three, the same on every screen size */
  --body-size: 15px;       --body-line: 24px;      /* primary body copy (black) and button text, every screen size */
  --secondary-size: 14px;  --secondary-line: 21px; /* secondary body copy (gray) */
  --caption-size: 12px;                            /* captions: DM Mono, all caps */
  --h1-size: 56px;     --h1-line: 64.4px;  --h1-track: -0.56px;
  --h2-size: 40px;     --h2-line: 46px;    --h2-track: -0.4px;
  --h3-size: 25px;     --h3-line: 31px;
  --h4-size: 20px;     --h4-line: 26px;
  --h5-size: 18px;     --h5-line: 22.5px;  --h5-track: 0.18px;

  /* Corners */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 100px;

  /* Motion */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
}

/* Tablet */
@media (max-width: 1199px) {
  :root {
    --section-pad: 100px;
    --h1-size: 40px;  --h1-line: 46px;    --h1-track: -0.4px;
    --h2-size: 36px;  --h2-line: 41.4px;  --h2-track: -0.36px;
    --h3-size: 22px;  --h3-line: 28px;
    --h4-size: 18px;  --h4-line: 23.4px;
    --h5-size: 16px;  --h5-line: 20px;    --h5-track: 0.16px;
  }
}

/* Phone */
@media (max-width: 809px) {
  :root {
    --header-h: 54px;  --header-top: 12px;  --header-top-compact: 8px;   /* 12px + 30px logo + 12px; 8px once compact */
    --section-pad: 64px;
    --h1-size: 32px;    --h1-line: 36.8px;  --h1-track: -0.32px;
    --h2-size: 26px;    --h2-line: 29.9px;  --h2-track: -0.26px;
  }
}

/* Phones narrower than 600px: 16px side margins */
@media (max-width: 599px) {
  :root { --edge: 16px; }
}

/* =========================================================
   Base — reset, text styles, page layout, utilities, animations
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.lenis { scroll-behavior: auto; }   /* Lenis handles smooth scrolling when it's running */
html { background: var(--page-bottom); }
/* Links to a section from another page (e.g. /#read) stop just below the fixed header */
main [id] { scroll-margin-top: var(--header-h); }
body {
  margin: 0;
  background: linear-gradient(180deg, var(--page-top) 0%, var(--page-bottom) 100%);
  color: var(--black);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: var(--body-line);
  letter-spacing: 0.2px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Text styles ---------- */
h1 { font-size: var(--h1-size); line-height: var(--h1-line); font-weight: 400; letter-spacing: var(--h1-track); color: var(--black); }
h2 { font-size: var(--h2-size); line-height: var(--h2-line); font-weight: 500; letter-spacing: var(--h2-track); color: var(--black); }
h3 { font-size: var(--h3-size); line-height: var(--h3-line); font-weight: 400; letter-spacing: -0.25px; color: var(--black); }
h3 strong { font-weight: 500; }
h4 { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: 500; letter-spacing: normal; color: var(--black); }
h5 { font-size: var(--h5-size); line-height: var(--h5-line); font-weight: 600; letter-spacing: var(--h5-track); color: var(--black); }
h6 { font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: normal; color: var(--black); }

/* All body copy is black, 15px. Gray (--gray) is only for captions and disabled text such as "Case study coming soon".
   .secondary is kept so older markup still works; it now looks the same as body copy. */
.secondary { color: var(--black); font-size: var(--body-size); line-height: var(--body-line); }

/* Caption text — DM Mono, capitals, same as the jewelry site.
   Used for navigation, captions, tags and small print. Add .caption to anything else that should match. */
.caption,
.site-nav__link, .dropdown a, .mobile-menu__sub a,
.hero__hi, .hero__art figcaption, .voice__meta h6, .stats__label, .tag, .footer-bottom {
  font-family: var(--font-mono);
  font-size: var(--caption-size);
  line-height: 1.5;
  font-weight: 400;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- Icons (see src/partials/icons.html) ---------- */
.icon { display: inline-block; flex-shrink: 0; fill: currentColor; }
.icon--16 { width: 16px; height: 16px; }
.icon--20 { width: 20px; height: 20px; }
.icon--24 { width: 24px; height: 24px; }
.icon--32 { width: 32px; height: 32px; }
.c-sage { color: var(--sage); }
.c-mauve { color: var(--mauve); }
.c-pink { color: var(--pink); }
.c-purple { color: var(--purple); }

/* ---------- Page layout ----------
   .section   page-edge side margins (var(--gutter)) and standard top/bottom space.
   .container same side margins, no top/bottom space. */
.section,
.container {
  padding: var(--section-pad) var(--gutter);
}
.container { padding-top: 0; padding-bottom: 0; }

/* Gradient bands — alternate them down a page: band, band--alt, band, … */
.band { background: var(--band); }
.band--alt { background: var(--band-alt); }

/* A section's own heading never stretches wider than a block of text */
.section > h2 { max-width: var(--text-max); }

/* Full-screen section: at least as tall as the screen, content centred top-to-bottom.
   Only when the screen is 810px+ wide AND wider than it is tall (desktop, landscape tablet).
   Phones and portrait tablets keep natural heights, so short sections don't float in empty space. */
@media (min-width: 810px) and (min-aspect-ratio: 1/1) {
  .screen { min-height: 100vh; min-height: 100svh; display: grid; align-content: center; }
}

/* First section on a page: clears the fixed header with 64px to spare (same as the home hero) */
.section.page-top { padding-top: calc(var(--header-h) + 64px); }

/* Text width: any block of running text is at most 700px wide (--text-max).
   Use .text-block on a wrapper, or .stack (which also spaces its children). */
.text-block { max-width: var(--text-max); }

/* Simple vertical spacing for stacked text: <div class="stack"> … </div> */
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--block-gap); max-width: var(--text-max); }

/* ---------- Scroll-in animations ----------
   data-reveal       fades in when scrolled into view
   data-reveal="up"  fades in while rising 50px */
.js [data-reveal] {
  opacity: 0;
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease);
}
.js [data-reveal="up"] { transform: translateY(50px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }
@keyframes fade-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Buttons and links
     .btn                 white pill, 1.5px outline, 44px tall; light gray on hover
     .btn--primary        pink (main call to action)
     .btn-row             a row of buttons
     .text-link           bold inline link, usually with an icon
   ========================================================= */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;                    /* every button is 44px tall, 16px text, on every screen size */
  padding: 0 24px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--black);
  font-size: var(--body-size);
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--black);
  pointer-events: none;
}
/* Secondary (white) buttons turn light gray on hover */
.btn:hover { background: var(--hover-gray); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); }
.btn--primary { background: var(--pink); }
.btn--primary:hover { background: var(--pink-hover); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16); }
/* On gradient backgrounds (.band, .band--alt) buttons are white so they don't blend into the colour.
   Buttons inside a white card on a band (news cards) stay pink. */
:is(.band, .band--alt) .btn--primary { background: var(--white); }
:is(.band, .band--alt) .btn--primary:hover { background: var(--hover-gray); }
:is(.band, .band--alt) .news-card .btn--primary { background: var(--pink); }
:is(.band, .band--alt) .news-card .btn--primary:hover { background: var(--pink-hover); }

.btn-row { display: flex; flex-wrap: wrap; gap: 24px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* Phone: buttons go full width and stack */
@media (max-width: 599px) {
  .btn { width: 100%; }
  .btn-row { flex-direction: column; gap: 16px; align-self: stretch; }
}

/* =========================================================
   Header — fixed top bar, Case studies dropdown, phone menu
   Markup: src/partials/header.html
   ========================================================= */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  background: var(--page-top);   /* solid page colour, never see-through */
  transition: box-shadow 0.3s var(--ease);
}
/* (no divider line under the compact header) */
.site-header__inner {
  padding: var(--header-top) var(--gutter) 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: padding 0.3s var(--ease);
}
.site-header__logo img { display: block; height: 30px; width: auto; transition: height 0.3s var(--ease); }   /* 30px tall, like the jewelry site */

/* Compact bar: once the page scrolls past the hero, the space above the menu drops from
   40px to 24px (24px → 16px on phones) and the logo shrinks from 30px to 24px.
   The class is added in src/js/main.js. */
.site-header.is-compact .site-header__inner { padding-top: var(--header-top-compact); }
.site-header.is-compact .site-header__logo img { height: 24px; }
@media (prefers-reduced-motion: reduce) {
  .site-header__inner, .site-header__logo img { transition: none; }
}

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  color: var(--black);
}
.site-header .site-nav__link { font-size: 14px; line-height: 24px; letter-spacing: 0.06em; }
@media (max-width: 1199px) { .site-header__cta { display: none; } }
.site-nav__link:hover,
.site-nav__link[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }

/* Case studies dropdown */
.site-nav__dropdown { position: relative; }
.site-nav__toggle .icon { transition: transform 0.2s var(--ease); }
.dropdown {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  width: 242px;
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--white);
  border-radius: 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px 0;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.dropdown::before { /* hover bridge between the link and the menu */
  content: "";
  position: absolute;
  inset: -16px 0 auto 0;
  height: 16px;
}
.dropdown a { padding: 0 25px; color: var(--black); white-space: nowrap; }
.dropdown a:hover { color: var(--black); text-decoration: underline; text-underline-offset: 3px; }
.site-nav__dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.site-nav__dropdown.is-open .site-nav__toggle .icon { transform: rotate(180deg); }

/* Phone menu (hidden until phone width) */
/* Phone menu button: small gradient burger + the word Menu (Close when open), in the nav's DM Mono style */
.menu-button { display: none; align-items: center; gap: 8px; height: 44px; color: var(--black); }
.menu-button__label { font-family: var(--font-mono); font-size: 14px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; }
.menu-button__close { display: none; }
.mobile-menu { display: none; }

/* Phone */
@media (max-width: 809px) {
  .site-nav { display: none; }
  .site-header__inner { padding-bottom: 12px; }
  /* Still a 44px tap target, but it doesn't push the bar taller than the logo */
  .menu-button { display: inline-flex; margin-block: -7px; }
  .site-header.menu-open .menu-button__open { display: none; }
  .site-header.menu-open .menu-button__close { display: block; }

  .mobile-menu {
    display: none;
    flex-direction: column;
    padding: 0 var(--gutter) 40px;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .site-header.menu-open .mobile-menu { display: flex; }
  /* Same items as the desktop nav, in the same DM Mono style, sized for tapping */
  .mobile-menu__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--black);
    cursor: pointer;
    list-style: none;
  }
  .mobile-menu__item::-webkit-details-marker { display: none; }
  .mobile-menu__item .icon { transition: transform 0.3s var(--ease); }
  .mobile-menu__work[open] .mobile-menu__item .icon { transform: rotate(180deg); }
  .mobile-menu__sub { display: flex; flex-direction: column; padding: 8px 0 8px 16px; }
  .mobile-menu__sub a { display: flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--black); }
  .mobile-menu__cta { margin-top: 40px; }
}

/* =========================================================
   Footer — "Let's connect", link columns, social cards, small print
   Markup: src/partials/footer.html
   ========================================================= */

/* One simple full-width band on the page background (no fill of its own), a thin line on top so it's clear the
   footer has started, 100px of space above the content, the page's side margins (64px),
   and 64px between "Let's connect", the link columns and the small print. */
.site-footer {
  padding: 100px var(--gutter) 40px;
  border-top: 1px solid var(--line);
}
/* Every page's last section ends 100px above the footer line (64px on phones) — the same as the space below it */
main > section:last-child { padding-bottom: 100px; }
@media (max-width: 809px) { main > section:last-child { padding-bottom: 64px; } }
@media (min-width: 810px) {
  /* Elsewhere column sits on the right */
  .footer-cols .footer-col--social { justify-self: end; align-items: flex-end; text-align: right; }
}
.footer-card__top { display: flex; justify-content: space-between; gap: 24px; }
.footer-card__top > div { max-width: var(--text-max); }
.footer-card__top p { margin-top: var(--block-gap); }
.footer-card__top .btn { margin-top: var(--block-gap); }
/* Horizontal logo (dog + name), same on every screen size */
.footer-card__art { width: auto; height: 164px; max-width: 100%; object-fit: contain; flex-shrink: 0; }

.footer-cols { display: grid; grid-template-columns: auto auto 1fr; column-gap: 72px; align-items: start; margin-top: 64px; }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-col h5 { margin-bottom: 12px; }
/* Footer navigation links: DM Mono, same style as the header menu */
.footer-col > a:not(.social) { font-family: var(--font-mono); font-size: 14px; line-height: 24px; letter-spacing: 0.06em; text-transform: uppercase; }
.footer-col > a:not(.social):hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-col--social { gap: 16px; }
.footer-col--social h5 { margin-bottom: 8px; }   /* 24px from heading to first card, same as the link columns */

/* Social link cards */
.social {
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 84px;
  padding: 0 var(--card-pad);
  border-radius: var(--radius-lg);
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--black);
  transition: box-shadow 0.25s var(--ease);
}
.social:hover { box-shadow: inset 0 0 0 2px rgb(var(--card-rgb)); }   /* hover: 2px stroke in the card's main colour (same on every clickable card) */
.social--1, .social--3 { --card-rgb: var(--pink-rgb); }
.social--2 { --card-rgb: var(--purple-rgb); }
.social__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 12px;
}
.social__icon svg { width: 32px; height: 30px; fill: var(--black); }
.social__arrow { margin-left: auto; color: var(--black); }
.social--1 { width: 494px; background: linear-gradient(106deg, rgba(var(--pink-rgb), var(--tint)), rgba(var(--purple-rgb), var(--tint))); }
.social--1 .social__icon { background: linear-gradient(152deg, rgba(var(--purple-rgb), var(--tint)), rgba(var(--pink-rgb), var(--tint))); }
.social--2 { width: 445px; background: linear-gradient(106deg, rgba(var(--purple-rgb), var(--tint)), rgba(var(--green-rgb), var(--tint))); }
.social--2 .social__icon { background: linear-gradient(152deg, rgba(var(--green-rgb), var(--tint)), rgba(var(--purple-rgb), var(--tint))); }
.social--3 { width: 395px; background: linear-gradient(106deg, rgba(var(--pink-rgb), var(--tint)), rgba(var(--purple-rgb), var(--tint))); }
.social--3 .social__icon { background: linear-gradient(152deg, rgba(var(--purple-rgb), var(--tint)), rgba(var(--pink-rgb), var(--tint))); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  color: var(--gray);
}
/* Tagline: plain Albert Sans at 12px, not the mono caps used for the copyright */
.footer-bottom .footer-bottom__tagline { font-family: var(--font); font-size: 12px; text-transform: none; letter-spacing: normal; }

/* Tablet */
@media (max-width: 1199px) {
  /* Work, Navigation and Elsewhere (on the right) side by side */
  .footer-cols { grid-template-columns: auto auto 1fr; column-gap: 40px; row-gap: 40px; }
  .footer-col h5 { line-height: 24px; }
  .social--1 { width: 305px; }
  .social--2 { width: 275px; }
  .social--3 { width: 244px; }
}

/* Small tablet and large phones: Work and Navigation side by side, Elsewhere below (one column under 600px) */
@media (min-width: 600px) and (max-width: 939px) {
  .footer-cols { grid-template-columns: auto 1fr; column-gap: 72px; }
  .footer-cols .footer-col--social { grid-column: 1 / -1; justify-self: start; align-items: flex-start; text-align: left; }
}

/* Phone */
@media (max-width: 809px) {
  .site-footer { padding-top: 64px; }
  /* Logo above the text, left-aligned */
  .footer-card__top { flex-direction: column-reverse; align-items: flex-start; gap: var(--block-gap); }
  .footer-card__art { height: auto; width: 353px; }
  .footer-cols { row-gap: 40px; }
  .footer-col h5 { line-height: 20px; }
  .footer-cols .footer-col--social { justify-self: stretch; align-items: stretch; }
  .social--1 { width: 100%; }
  .social--2 { width: 90%; }
  .social--3 { width: 80%; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 599px) {
  .footer-cols { grid-template-columns: 1fr; }
}

/* =========================================================
   Components — reusable blocks any page can use.
   See them all together on the style guide page (/styleguide).

     .section-title        centred section heading
     .tags / .tag          coloured labels (INTJ, Leo…); .tag--small for card labels
     .process / .step      numbered or icon steps with a coloured line (design process)
     .features / .feature  icon in a tinted square + heading + text (Why work with me)
     .stats                two big numbers with labels
     .cases / .case        case-study cards (pink / purple / green)
     .testimonials         quote cards on a gradient band (add .band or .band--alt)
     .faq                  question list that opens and closes
     .cta                  "Let's work together" box (src/partials/cta.html)
     .breadcrumbs          Home / Work / page (src/partials/breadcrumbs.html)
   ========================================================= */

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-top: calc(var(--header-h) + 24px); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.breadcrumbs li { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--caption-size); line-height: 1.5; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gray); }
.breadcrumbs li + li::before { content: "/"; color: var(--gray); }
/* Links are gray (5.9:1 contrast on the page background) with no underline; they darken on hover.
   The current page is black and bold (DM Mono's boldest loaded weight is 500). */
.breadcrumbs a { color: var(--gray); text-decoration: none; transition: color 0.2s var(--ease); }
.breadcrumbs a:hover { color: var(--black); }
.breadcrumbs a[aria-label="Home"] { display: flex; }   /* house icon instead of the word Home */
.breadcrumbs [aria-current] { color: var(--black); font-weight: 500; }

/* ---------- Bulleted list ---------- */
.bullets { list-style: disc; padding-left: 22px; max-width: var(--text-max); }
.bullets li + li { margin-top: 4px; }
ol.bullets { list-style: decimal; }

/* ---------- Section title ---------- */
.section-title { text-align: center; max-width: var(--text-max); margin: 0 auto; }

/* ---------- Tags ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 16px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  color: var(--black);
}
.tag .icon, .tag img { width: 20px; height: 20px; color: var(--black); }
.tag--pink { background: var(--pink); }   /* third colour in a set of three case-study tags (purple, green, pink) */
.tag--purple { background: var(--purple); }
.tag--green { background: var(--green); }
.tag--small { height: 20px; padding: 0 14px; border-radius: 6px; }   /* same as the case-study and home tags */

/* ---------- Steps (design process, how we work together) ---------- */
.process h2 { text-align: center; color: var(--black); max-width: var(--text-max); margin: 0 auto; }
.process__list { width: fit-content; max-width: 100%; margin: 64px auto 0; display: flex; flex-direction: column; gap: 40px; }
.step { display: flex; gap: 24px; }
.step__rail { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 64px; }
.step__icon { width: 64px; height: 64px; fill: currentColor; }
.step__bar { flex: 1; width: 4px; margin-top: 10px; border-radius: 4px; background: currentColor; }
.step:last-child .step__bar { display: none; }   /* no line hanging below the last step */
.step__body { max-width: var(--text-max); }
.step h4 + p { margin-top: 8px; }
.step--pink .step__rail { color: var(--pink); }
.step--purple .step__rail { color: var(--purple); }
.step--green .step__rail { color: var(--green); }

/* ---------- Features (icon + heading + text) ---------- */
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 72px; margin-top: 64px; }
.features--3 { grid-template-columns: repeat(3, 1fr); gap: 48px 40px; }
.feature { display: flex; gap: 24px; align-items: flex-start; }
.feature__icon { display: grid; place-items: center; flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius-md); }
.feature__icon svg { width: 42px; height: 42px; fill: currentColor; }
.feature h4 + p { margin-top: 4px; }
.feature--pink .feature__icon { color: var(--pink-hover); background: rgba(var(--pink-rgb), var(--tint)); }
.feature--purple .feature__icon { color: var(--purple); background: rgba(var(--purple-rgb), var(--tint)); }
.feature--green .feature__icon { color: var(--green); background: rgba(var(--green-rgb), var(--tint)); }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; text-align: center; }
.stats__label { color: var(--black); }
.stats__value { margin-top: 2px; }

/* ---------- Case-study cards ----------
   Logo size per breakpoint is set on the <img> with --lw/--lh (desktop),
   --lw-tab/--lh-tab and --lw-phone/--lh-phone. */
.cases { display: flex; flex-direction: column; gap: 72px; }
.case {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: var(--card-pad);
  border-radius: var(--radius-lg);
}
.case--pink { background: rgba(var(--pink-rgb), var(--tint)); }
.case--purple { background: rgba(var(--purple-rgb), var(--tint)); }
.case--green { background: rgba(var(--green-rgb), var(--tint)); }
.case__text { display: flex; flex-direction: column; align-items: flex-start; max-width: var(--text-max); }
.case__logo { width: var(--lw); height: var(--lh); object-fit: contain; object-position: left center; margin-bottom: 24px; }
.case h2 + p { margin-top: var(--block-gap); }
.case__text .btn { margin-top: var(--block-gap); }
.case__image { display: block; border-radius: var(--radius-md); overflow: hidden; }
.case__image--r27 { border-radius: 27px; }
.case__image img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }

/* ---------- Testimonials ---------- */
.testimonials {
  position: relative;
  overflow: hidden;
}
.testimonials__inner {
  position: relative;
  padding: var(--section-pad) var(--gutter);
}
.testimonials__inner > h2 { max-width: var(--text-max); margin: 0 auto; text-align: center; }
.testimonials__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.quote {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: var(--card-pad);
  background: var(--white);
  border-radius: var(--radius-md);
}
.quote blockquote { margin: 0; display: flex; flex-direction: column; gap: 16px; max-width: var(--text-max); }
.quote figcaption { display: flex; align-items: center; gap: 9px; }
/* Short pull quotes: one line of praise in a larger size */
.quote--short blockquote p { font-size: var(--h4-size); line-height: var(--h4-line); font-weight: 500; color: var(--black); }
.quote figcaption img { width: 52px; height: 52px; border-radius: var(--radius-xl); object-fit: cover; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: 428px 1fr; gap: 64px; align-items: start; }
.faq h2 { position: sticky; top: calc(var(--header-h) + 40px); max-width: var(--text-max); }
.faq__list { display: flex; flex-direction: column; }
.faq__item + .faq__item { border-top: 1px solid var(--line); }   /* light gray divider between questions */
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { transition: transform 0.3s var(--ease); }
.faq__item[open] summary .icon { transform: rotate(180deg); }
.faq__answer { padding: 0 20px 24px 0; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.faq__answer p { max-width: var(--text-max); }

/* ---------- Call to action ---------- */
/* Same space above the box as every other section (--section-pad). */
.cta-wrap { padding-bottom: 0; }
/* A second box straight after the first sits 24px below it */
.cta-wrap + .cta-wrap--next { padding-top: var(--block-gap); }
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--block-gap);
  padding: 64px;
  border-radius: var(--radius-lg);
}
.cta__text { max-width: var(--text-max); }
.cta__text p { margin-top: var(--block-gap); }

/* ---------- Back-to-top button ---------- */
/* Floating round button, bottom right, same look as the carousel arrows. Hidden until you scroll down. */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--black);
  background: var(--white);
  color: var(--black);
  box-shadow: rgba(0, 0, 0, 0.08) 0 4px 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s, background-color 0.2s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--hover-gray); }
.to-top .icon { transform: rotate(-90deg); }
.menu-open ~ .to-top { display: none; }   /* hidden while the phone menu is open */
@media (max-width: 599px) { .to-top { right: 16px; bottom: 16px; } }

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width: 1199px) {
  .tags { gap: 12px; }

  .stats { margin-top: 24px; }
  .stats__value { font-size: 22px; line-height: 25.3px; margin-top: 1px; }

  .process__list { margin-top: 40px; }
  .step__rail { width: 48px; }
  .step__icon { width: 48px; height: 48px; }

  .features { gap: 40px; margin-top: 40px; }
  .features--3 { grid-template-columns: repeat(2, 1fr); }

  .cases { gap: 40px; }
  .case { gap: 40px; align-items: stretch; }
  .case__text { justify-content: center; }
  .case__media { display: flex; flex-direction: column; justify-content: center; }
  .case__media:has(.stats) { justify-content: space-between; }
  .case__logo { width: var(--lw-tab); height: var(--lh-tab); }

  .testimonials__grid { gap: 40px; margin-top: 27px; }

  .faq { grid-template-columns: 1fr; gap: 40px; }
  .faq h2 { position: static; }

  .cta { padding: 40px; }
}

/* Small tablet (below 1024px): testimonials stack in one column */
@media (max-width: 1023px) {
  .testimonials__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Phone
   ========================================================= */
@media (max-width: 809px) {
  .tags { gap: 16px; }
  .tag:where(:not(.tag--small)) { height: 33px; }   /* :where keeps this as weak as .tag so page styles still win */

  .stats { margin-top: 16px; }
  .stats__value { font-size: 26px; line-height: 29.9px; margin-top: 2px; }

  .step { gap: 16px; }
  .step__rail { width: 32px; }
  .step__icon { width: 32px; height: 32px; }

  .features, .features--3 { grid-template-columns: 1fr; gap: 32px; }
  .feature { gap: 16px; }
  .feature__icon { width: 56px; height: 56px; }
  .feature__icon svg { width: 32px; height: 32px; }

  .cases { gap: 41px; }
  .case { grid-template-columns: 1fr; gap: 24px; }
  .case__logo { width: var(--lw-phone); height: var(--lh-phone); margin-bottom: 16px; }

  .testimonials__grid { gap: 24px; margin-top: 24px; }
  .quote blockquote { display: block; }
  .quote blockquote p { display: inline; }

  .faq { gap: 24px; }

  .cta { padding: 40px 24px; }
}