:root {
  --page-gutter: clamp(32px, 5vw, 50px);  /* side padding on every page */
  --case-max: 1320px;       /* case-study container width */
  --case-gutter: clamp(24px, 5vw, 64px);
  --header-h: 152px;        /* replaced at runtime with the measured height */
  /* Palette sampled from the supplied swatches. */
  --coral: #DD928A;            /* coral */
  --peach: #EDC7BE;            /* peach */
  --periwinkle-light: #CCD3E8; /* pale periwinkle — nav bar and buttons */
  --periwinkle: #8EA2D4;       /* cornflower blue */
  --mist: #D1D7D4;             /* pale grey-green */
  --sage: #A5ADA6;             /* sage */

  --btn: #C13B05;              /* button, as specified */
  --btn-text: #EDC7BE;         /* button label, as specified */
  --btn-hover: #9A2E03;        /* deeper on hover */

  /* Working roles. The palette is uniformly light, so anything carrying small
     text uses a deepened version of the same hue to stay legible; button
     labels sit dark on the pale blue rather than reversed out of it. */
  --blush: #EDC7BE;            /* alias — hairlines and footer headings */
  --mauve: #DD928A;            /* coral — rules, numerals, underlines */
  --mauve-dark: #A8564B;       /* coral text accent — 5.2:1 on white */
  --indigo: #525E88;           /* deep indigo — top nav and footer field */
  --near-black: #525E88;       /* the footer field */
  --charcoal: #2E333B;         /* headings and button labels */
  --body-text: #5C626C;        /* body copy */
  --white: #FFFFFF;            /* page ground */
  --paper: #FFFFFF;            /* surfaces sit on white */
  --on-field: #FFFFFF;
  --wrap: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--body-text);
  font-family: 'Archivo', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.7;
}
h1, h2, h3 { font-family: 'Bodoni Moda', serif; font-weight: 400; color: var(--charcoal); margin: 0; }
a { text-decoration: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--page-gutter); }

/* Header / logo lockup */
.site-header {
  padding: 8px 0;
  background: var(--indigo);
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.site-nav { display: flex; gap: 32px; flex-wrap: wrap; }
.site-nav a {
  font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #FFFFFF; font-weight: 600;
  position: relative;
}
/* A 44px hit area centred on the label, so short labels like FAQ still clear
   the touch minimum without moving the type or the current-page rule. */
.site-nav a::after {
  content: ""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 44px); height: 48px;
}
.site-nav a:hover { color: var(--periwinkle-light); }

/* ── Menu button ───────────────────────────────────────────
   Hidden on wide screens, where the links sit out in the open. It only takes
   over below the tablet breakpoint, so the markup carries one nav, not two. */
.nav-toggle {
  display: none;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; cursor: pointer; color: #FFFFFF;
}
.nav-toggle__box { display: block; position: relative; width: 26px; height: 18px; margin: 0 auto; }
/* One element draws the middle bar; the other two are its pseudo-elements, so
   the whole mark can rotate into a cross from a single transform origin. */
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.18s ease;
}
.nav-toggle__bar { top: 8px; }
.nav-toggle__bar::before { content: ""; top: -8px; }
.nav-toggle__bar::after { content: ""; top: 8px; }
.site-header.is-open .nav-toggle__bar { transform: rotate(45deg); }
.site-header.is-open .nav-toggle__bar::before { opacity: 0; transform: translateY(8px); }
.site-header.is-open .nav-toggle__bar::after { transform: translateY(-8px) rotate(-90deg); }

.logo { display: inline-block; color: inherit; }
/* The mark reverses to white on the indigo nav and the footer field. */
.logo-img { height: 132px; width: auto; display: block; filter: brightness(0) invert(1); }
/* On the deep-rust footer field the mark reverses to cream, the way it
   sits on the rust cards in the brand moodboard. */
.logo-img--footer { height: 78px; margin-bottom: 18px; filter: brightness(0) invert(1); opacity: 0.95; }

/* Hero (home page) */
.hero {
  position: relative;
  background-color: var(--paper);
  background-image: url('assets/pattern-botanical.png?v=1789473277');
  background-size: 288px 139px;
  background-repeat: repeat;
  padding: 140px 0 120px;
  text-align: left;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.95) 0%,
    rgba(255,255,255,0.90) 46%,
    rgba(255,255,255,0.68) 78%,
    rgba(255,255,255,0.55) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 640px; }
.hero__kicker {
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mauve-dark);
  margin: 0 0 18px;
}
.hero h1 { font-size: clamp(36px, 6vw, 58px); line-height: 1.15; margin-bottom: 16px; }
.hero__body {
  font-size: 17px; line-height: 1.6; max-width: 560px; margin: 0 0 36px; color: var(--body-text);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--btn);
  color: var(--btn-text);
  font-family: 'Archivo', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 2px;
  transition: background 0.25s ease;
}
.btn:hover { background: var(--btn-hover); color: var(--btn-text); }
.btn--small { padding: 12px 26px; font-size: 12px; }
.btn--onnavy { background: var(--btn); color: var(--btn-text); }
.btn--onnavy:hover { background: var(--btn-hover); }

/* Design services section */
/* What Actually Builds Trust — knowledge-forward framework */
.framework { padding: 90px 0 100px; background: var(--paper); }
.framework h2 { font-size: clamp(28px, 3.6vw, 40px); max-width: 760px; margin-bottom: 20px; }
.framework__intro { font-size: 18px; max-width: 640px; margin: 0 0 48px; }
.framework__list { list-style: none; display: grid; gap: 32px; max-width: 820px; margin: 0 0 48px; }
.framework__list li { display: grid; grid-template-columns: 64px 1fr; gap: 20px; align-items: start; }
.framework__num {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 22px; font-weight: 500; color: #7A8773;
  border-bottom: 2px solid #7A8773; padding-bottom: 4px; line-height: 1;
}
.framework__title { font-family: 'Bodoni Moda', serif; font-size: 19px; margin: 0 0 6px; color: var(--charcoal); }
.framework__desc { font-size: 15.5px; line-height: 1.55; margin: 0; }
.signup__form { display: flex; gap: 12px; flex-wrap: wrap; position: relative; }
.signup__form input[type="email"] {
  font-family: 'Archivo', sans-serif; font-size: 14px; padding: 14px 18px;
  border: 1px solid rgba(68,68,68,0.25); border-radius: 2px; min-width: 240px;
}
.signup__form .btn { padding: 14px 28px; }
.signup__form--footer { flex-direction: column; }
.signup__form--footer input[type="email"] { min-width: 0; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: var(--on-field); }
.signup__form--footer input[type="email"]::placeholder { color: rgba(255,255,255,0.5); }

/* Closing CTA */
.closing-cta { padding: 90px 0; background: var(--white); }
.closing-cta__inner { max-width: 640px; margin-inline: auto; text-align: center; }
.closing-cta h2 { margin: 0 auto 12px; }
.closing-cta p { max-width: 52ch; margin: 0 auto 30px; }

/* Portfolio section (home page) */
.portfolio { padding: 90px 0 0; background: var(--white); }
.portfolio__head { text-align: center; margin-bottom: 64px; }
.portfolio__head .hero__kicker { color: var(--mauve-dark); }
/* "How it works" picks up the deep indigo of the nav and footer field. */
.process-steps .hero__kicker { color: var(--indigo); }
.portfolio__head h2 { font-size: clamp(30px, 4.5vw, 42px); margin-bottom: 14px; }
.portfolio__head p { max-width: 520px; margin: 0 auto; }

.tag {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  background: rgba(237,199,190,0.55);
  color: var(--charcoal);
  padding: 4px 10px;
  border-radius: 2px;
}
.card__tags { display: flex; flex-wrap: wrap; gap: 6px; }

.project-hero {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  background: var(--white);
  border-bottom: 1px solid rgba(237,199,190,0.8);
}
.project-hero__text {
  display: flex; flex-direction: column; justify-content: center;
  padding: 76px clamp(28px, 4vw, 56px) 76px
           calc(max(0px, (100vw - var(--case-max)) / 2) + var(--case-gutter));
  min-width: 0;
}
.project-hero__media {
  background: var(--paper);
  overflow: hidden;
  height: clamp(380px, 42vw, 560px);
}
.project-hero__media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}
.project-hero h1 { font-size: clamp(32px, 4.4vw, 50px); line-height: 1.12; margin-bottom: 22px; }
.project-tags { justify-content: flex-start; }
.project-intro__inner { max-width: 640px; margin: 0 auto; padding-inline: var(--page-gutter); }

.project-nav { border-top: 1px solid rgba(68,68,68,0.1); padding: 28px 0 64px; }
.project-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.project-nav__link {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--charcoal);
}
.project-nav__link:hover { color: var(--mauve); }
.project-nav__link--all { color: var(--mauve-dark); }
.project-nav__link--next { text-align: right; }

/* Footer */
.site-footer { background: var(--near-black); color: rgba(255,255,255,0.65); padding: 64px 0 28px; }
.site-footer .logo__name { color: var(--on-field); font-size: 26px; }
.site-footer .logo__rule { background: var(--blush); }
.footer__grid {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px;
  margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.12);
  text-align: left;
}
.footer__grid .logo { text-align: left; }
.footer__grid .logo__sub { justify-content: flex-start; }
.footer__heading {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blush);
  margin: 0 0 14px; font-weight: 600;
}
.footer__bio-label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blush); margin: 24px 0 10px; font-weight: 600; }
.footer__bio { font-size: 14px; line-height: 1.6; margin: 0; }
.footer__phone { display: block; font-family: 'Bodoni Moda', 'Prata', serif; font-size: 22px; color: var(--on-field); margin-bottom: 14px; }
.footer__phone:hover { color: var(--blush); }
.footer__contact { margin: 0 0 16px; font-size: 15px; }
.footer__contact a { color: rgba(255,255,255,0.85); }
.footer__contact a:hover { color: var(--blush); }
.footer__social { display: flex; gap: 20px; }
.footer__social a { color: rgba(255,255,255,0.65); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.footer__social a:hover { color: var(--blush); }
.footer__copy { font-size: 12px; color: rgba(255,255,255,0.35); text-align: center; }

@media (max-width: 900px) {
  .footer__grid { grid-template-columns: 1fr; text-align: center; }
  .footer__grid .logo { text-align: center; }
  .footer__grid .logo__sub { justify-content: center; }
  .footer__social { justify-content: center; }
}
@media (max-width: 600px) {
  .hero { padding: 100px 0 72px; text-align: center; }
  .hero__inner { max-width: none; }
  .hero__overlay { background: rgba(255,255,255,0.9); }
  .portfolio { padding: 64px 0 0; }
  /* No room for a side-by-side composition — the scrim becomes a full wash
     and every band reads left-aligned. */
  /* No room for two panels — split bands fall back to the washed full-bleed. */
  .project-nav__inner { flex-wrap: wrap; justify-content: center; text-align: center; }
  .project-nav__link--next { text-align: center; }
  .site-header__inner { justify-content: center; text-align: center; }
  .site-nav { justify-content: center; }
}

/* ── Reveal on scroll ────────────────────────────────────────
   The fade and rise are off: content renders at full opacity straight away.
   The transition is kept so re-enabling is a two-line change. */
.js-reveal [data-reveal] {
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ══ Multi-page site ═══════════════════════════════════════ */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--charcoal); color: var(--on-field);
  padding: 12px 20px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--mauve-dark); outline-offset: 3px; }

.site-nav a.is-current { color: #FFFFFF; border-bottom: 1px solid var(--coral); padding-bottom: 3px; }

.btn--ghost { background: transparent; color: var(--charcoal); box-shadow: inset 0 0 0 1px var(--charcoal); }
.btn--ghost:hover { background: var(--charcoal); color: var(--on-field); }
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.hero__meta { font-size: 13px; letter-spacing: 0.06em; color: var(--body-text); margin: 0; }

/* Interior page hero */
.page-hero { background: var(--paper); padding: 64px 0 72px; border-bottom: 1px solid rgba(237,199,190,0.5); }
.page-hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.1; margin-bottom: 20px; }
.page-hero__intro { font-size: 19px; line-height: 1.65; max-width: 660px; margin: 0; }
.crumbs { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 26px; color: var(--body-text); }
.crumbs a { color: var(--mauve-dark); position: relative; }
/* Breadcrumb type is small by design, so the hit area is painted rather than
   padded: the separators keep neighbouring targets from overlapping. */
.crumbs a::after {
  content: ""; position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: max(100%, 48px); height: 44px;
}
.crumbs a:hover { color: var(--mauve); }
.crumbs__sep { padding: 0 8px; opacity: 0.5; }

/* Pain points */
.pains { padding: 90px 0 100px; background: var(--white); }
.pains h2 { font-size: clamp(27px, 3.6vw, 38px); line-height: 1.18; max-width: 780px; margin-bottom: 20px; }
/* The heading now hands off to a paragraph, so the 48px of air that used to sit
   under it moves below the paragraph instead. */
.pains__intro { font-size: 17px; line-height: 1.7; color: var(--body-text);
                max-width: 720px; margin: 0 0 48px; }
.pains__list { list-style: none; padding: 0; margin: 0 0 40px; display: grid; gap: 1px; grid-template-columns: 1fr 1fr; background: rgba(237,199,190,0.6); }
.pains__list li { background: var(--white); padding: 36px 34px; }
.pain__title { font-size: 20px; line-height: 1.3; margin: 0 0 12px; }
.pain__body { font-size: 15.5px; line-height: 1.6; margin: 0; }

/* Service cards */
.svc { padding: 56px 0 60px; background: var(--paper); }
.svc h2 { font-size: clamp(27px, 3.6vw, 38px); line-height: 1.15; max-width: 720px; margin-bottom: 18px; }
.svc__intro { font-size: 18px; max-width: 640px; margin: 0 0 48px; }
.svc__grid {
  list-style: none; padding: 0; margin: 0 0 56px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 26px;
}
/* Each service owns a tint from the palette, and alternate tiles drop to give
   the block an editorial stagger rather than a flat four-square. */
.svc-tile { display: block; }
.svc-tile:nth-child(even) { margin-top: 56px; }

.svc-tile__link {
  position: relative;
  display: block;
  padding: 40px 36px 36px;
  min-height: 300px;
  color: var(--charcoal);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.svc-tile--peach .svc-tile__link { background: var(--peach); }
.svc-tile--periwinkle .svc-tile__link { background: var(--periwinkle-light); }
.svc-tile--mist .svc-tile__link { background: var(--mist); }
.svc-tile--sage .svc-tile__link { background: var(--sage); }

.svc-tile__num {
  position: absolute; right: 18px; top: 6px;
  font-family: 'Bodoni Moda', serif;
  font-size: 120px; line-height: 1;
  color: rgba(255,255,255,0.55);
  pointer-events: none;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-tile__inner { position: relative; display: block; }
.svc-tile__title {
  display: block;
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(21px, 2.1vw, 25px); line-height: 1.2;
  margin-bottom: 14px; max-width: 16ch;
}
.svc-tile__body { display: block; font-size: 15.5px; line-height: 1.65; margin-bottom: 22px; }
.svc-tile__cta {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(46,51,59,0.35);
  transition: border-color 0.25s ease;
}
.svc-tile__link:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(46,51,59,0.16); }
.svc-tile__link:hover .svc-tile__num { transform: translateY(-6px) scale(1.06); }
.svc-tile__link:hover .svc-tile__cta { border-color: var(--charcoal); }

.process-steps { padding: 90px 0 100px; background: #E4E8F2; }
.process-steps h2 { font-size: clamp(27px, 3.6vw, 38px); margin-bottom: 44px; }

/* Service detail rows */
.svc-detail { padding: 76px 0; border-bottom: 1px solid rgba(237,199,190,0.55); }
.svc-detail:nth-child(even) { background: var(--paper); }
.svc-detail__inner { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--page-gutter); align-items: start; }
.svc-detail h2 { font-size: clamp(26px, 3.2vw, 34px); margin: 14px 0 18px; }
.svc-detail__summary { font-size: 17.5px; line-height: 1.65; margin: 0 0 20px; }
.svc-detail__outcome { font-size: 16px; color: var(--charcoal); margin: 0; }
.svc-detail__outcome strong { font-weight: 600; }

.ticklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.ticklist li { position: relative; padding-left: 26px; font-size: 15.5px; line-height: 1.55; }
.ticklist li::before { content: '—'; position: absolute; left: 0; color: var(--mauve); }
.ticklist--wide li { font-size: 16.5px; margin-bottom: 4px; }

/* Pricing table */
.pricing { padding: 84px 0 96px; background: var(--white); }
.pricing h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 16px; }
.table-scroll { overflow-x: auto; }
.rate-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 15.5px; }
.rate-table th, .rate-table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid rgba(237,199,190,0.7); }
.rate-table th { font-family: 'Archivo', sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mauve-dark); font-weight: 600; }
.rate-table tbody tr:hover { background: var(--paper); }

/* Prose pages */
.prose-section { padding: 76px 0 90px; background: var(--white); }
.prose { max-width: 720px; }
.prose h2 { font-size: clamp(24px, 3vw, 31px); margin: 48px 0 16px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 18px; }
.prose strong { color: var(--charcoal); font-weight: 600; }

/* FAQ */
.faq { padding: 84px 0 96px; background: var(--paper); }
.faq__inner { max-width: 820px; }
.faq h2 { font-size: clamp(26px, 3.4vw, 36px); margin-bottom: 36px; }
.faq__list { margin-bottom: 36px; border-top: 1px solid rgba(237,199,190,0.8); }
.faq__item { border-bottom: 1px solid rgba(237,199,190,0.8); }
.faq__q {
  cursor: pointer; list-style: none; padding: 22px 40px 22px 0; position: relative;
  font-family: 'Bodoni Moda', serif; font-size: 19px; line-height: 1.35; color: var(--charcoal);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-family: 'Archivo', sans-serif; font-size: 22px; color: var(--mauve); transition: transform 0.25s ease;
}
.faq__item[open] .faq__q::after { content: '–'; }
.faq__q:hover { color: var(--mauve-dark); }
.faq__a { padding: 0 40px 24px 0; }
.faq__a p { margin: 0; font-size: 16.5px; line-height: 1.7; }


.portfolio__more { padding-top: 56px; text-align: center; }

/* ── Case study layout ─────────────────────────────────────
   Identical on every project: hero, sticky anchor rail, then
   narrative sections that each own a fixed-ratio media frame. */
.project-hero__headline {
  font-family: 'Bodoni Moda', serif; font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.35; color: var(--charcoal); margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.project-hero__services { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mauve-dark); margin: 0; font-weight: 600; }
.project-hero__text > * { max-width: 480px; }

.case-layout {
  display: grid; grid-template-columns: 240px 1fr; gap: 72px;
  max-width: var(--case-max); margin: 0 auto; padding: 72px var(--case-gutter) 40px;
}
.rail { position: sticky; top: calc(var(--header-h) + 14px); align-self: start; }
.rail__heading { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mauve-dark); font-weight: 600; margin: 0 0 18px; }
.rail__list { list-style: none; padding: 0; margin: 0 0 28px; border-left: 1px solid rgba(237,199,190,0.9); }
.rail__link {
  display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: baseline;
  padding: 10px 0 10px 18px; margin-left: -1px;
  min-height: 44px; box-sizing: border-box; align-content: center;
  border-left: 2px solid transparent;
  color: var(--body-text); font-size: 14px; line-height: 1.35;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.rail__num { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11px; color: var(--mauve); }
.rail__link:hover { color: var(--charcoal); }
.rail__link.is-active { color: var(--charcoal); border-left-color: var(--mauve); font-weight: 500; }
.rail__link.is-active .rail__num { color: var(--mauve-dark); }
.rail__cta { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--charcoal); border-bottom: 1px solid var(--mauve); padding-bottom: 4px; }
.rail__cta:hover { color: var(--mauve-dark); }

.case-content { min-width: 0; }
.case-section { padding-bottom: 72px; scroll-margin-top: calc(var(--header-h) + 10px); }
.case-section__title { font-size: clamp(24px, 3vw, 32px); line-height: 1.2; margin-bottom: 20px; }
.case-section__body { max-width: 680px; }
.case-section__body p { margin: 0 0 18px; font-size: 17px; line-height: 1.75; }
.case-section__body .ticklist { margin-top: 20px; }

/* Fixed-ratio media frame — every project gets the same image footprint,
   and nothing is ever upscaled past its own resolution. */
/* Every frame is the same size with a transparent ground; the image sits
   inside at its own scale and is never enlarged past its own pixels. */
.media {
  width: 100%;
  margin: 36px 0 0;
  background: none;
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.media img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  min-width: 0; min-height: 0;
  object-fit: contain; display: block;
}

.case-meta { display: grid; grid-template-columns: 150px 1fr; gap: 14px 24px; margin: 0 0 28px; max-width: 680px; }
.case-meta dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mauve-dark); font-weight: 600; padding-top: 3px; }
.case-meta dd { margin: 0; font-size: 16px; color: var(--charcoal); }
.case-meta__services { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.case-meta__note { font-size: 15px; font-style: italic; margin: 0; }

/* Contact */
.contact { padding: 76px 0 96px; background: var(--white); }
.contact__inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 72px; align-items: start; }
.contact h2 { font-size: clamp(24px, 3vw, 31px); margin-bottom: 18px; }
/* The row gap is set by the touch target, not the type: it keeps the 44px hit
   areas on the email and phone links from overlapping each other. */
.contact__details { display: grid; grid-template-columns: 130px 1fr; gap: 26px 20px; margin: 28px 0; }
.contact__details dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mauve-dark); font-weight: 600; padding-top: 3px; }
.contact__details dd { margin: 0; font-size: 16px; color: var(--charcoal); }
.contact__details a { color: var(--charcoal); border-bottom: 1px solid var(--mauve); position: relative; }
.contact__details a::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 44px;
}
.contact__social { margin-top: 8px; }
.contact__social a { color: var(--mauve-dark); }
.contact__form-wrap { background: var(--paper); padding: 40px; }
.field { display: grid; gap: 7px; margin: 0 0 20px; }
.field label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mauve-dark); font-weight: 600; }
.field input, .field select, .field textarea {
  font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 300;
  padding: 13px 15px; border: 1px solid rgba(107,95,90,0.28); border-radius: 2px;
  background: var(--white); color: var(--charcoal); width: 100%;
}
.field textarea { resize: vertical; }
.contact__fallback { font-size: 13.5px; margin: 18px 0 0; }
.contact__fallback a { color: var(--mauve-dark); border-bottom: 1px solid var(--mauve); }

/* Footer additions */
.footer__grid { grid-template-columns: 1.4fr 0.8fr 1fr 1.2fr; }
.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer__list a { color: rgba(255,255,255,0.72); font-size: 14.5px; }
.footer__list a:hover { color: var(--blush); }
.footer__heading--sub { margin-top: 26px; }

@media (max-width: 1080px) {
  .case-layout { grid-template-columns: 200px 1fr; gap: 48px; }
}
@media (max-width: 900px) {
  .svc-tile:nth-child(even) { margin-top: 0; }
  .pains__list, .svc__grid, .contact__inner,
  .svc-detail__inner, .media-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* The rail becomes a horizontal scroller pinned under the sticky header. */
  .case-layout { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .rail {
    position: sticky; top: calc(var(--header-h) + 2px); z-index: 20;
    /* A grid item defaults to min-width:auto, so the nowrap link list would
       widen the whole 1fr track instead of scrolling inside it. */
    min-width: 0;
    background: var(--white); border-bottom: 1px solid rgba(237,199,190,0.9);
    margin: 0 calc(-1 * clamp(24px, 5vw, 64px)) 36px;
    padding: 14px clamp(24px, 5vw, 64px);
  }
  .rail__heading, .rail__cta { display: none; }
  .rail__list { display: flex; gap: 6px; overflow-x: auto; border-left: 0; margin: 0; padding-bottom: 4px; min-width: 0; }
  .rail__list li { flex: 0 0 auto; }
  .rail__link { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 14px; white-space: nowrap; display: flex; gap: 8px; align-items: center; min-height: 44px; }
  .rail__link.is-active { border-left-color: transparent; border-bottom-color: var(--mauve); }
}
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: 1fr; }
  .page-hero { padding: 44px 0 52px; }
  .contact__form-wrap { padding: 26px 20px; }
  .case-meta, .contact__details { grid-template-columns: 1fr; gap: 4px 0; }
  .case-meta dd, .contact__details dd { margin-bottom: 14px; }
  .media { aspect-ratio: 3 / 2; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
}

/* Portrait sources keep a portrait frame — the frame system stays uniform,
   it just has two standard ratios rather than letterboxing tall art. */

/* ── Botanical pattern ─────────────────────────────────────
   Used sparingly as a ground for the interior page headers and the
   closing call to action, so it reads as texture rather than wallpaper. */
.page-hero {
  background-color: var(--paper);
  background-image: url('assets/pattern-botanical.png?v=1789473277');
  background-size: 288px 139px;
  background-repeat: repeat;
  position: relative;
}
.page-hero > .wrap { position: relative; z-index: 2; }
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.88) 55%, rgba(255,255,255,0.72) 100%);
}
.closing-cta {
  background-color: var(--paper);
  background-image: url('assets/pattern-botanical.png?v=1789473277');
  background-size: 288px 139px;
  position: relative;
}
.closing-cta > .wrap { position: relative; z-index: 2; }
.closing-cta::before {
  content: '';
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.9);
}

/* ── Work rows ─────────────────────────────────────────────
   Crisp image, no scrim, no wash. The headline does the selling; the
   teaser gives just enough to make the click feel worth it. */
.work-rows { padding: 24px 0 8px; display: grid; gap: 104px; }
.work-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}
.work-row:nth-child(even) .work-row__media { order: 2; }

.work-row__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(46,51,59,0.06), 0 18px 40px rgba(46,51,59,0.09);
}
.work-row__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.work-row:hover .work-row__media img { transform: scale(1.03); }

.work-row__eyebrow {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mauve-dark); font-weight: 600; margin: 0 0 14px;
}
.work-row__title { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; margin: 0 0 16px; }
.work-row__title a { color: var(--charcoal); }
.work-row__title a:hover { color: var(--mauve-dark); }
.work-row__headline {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.45; letter-spacing: 0.04em;
  color: var(--charcoal);
  margin: 0 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(237,199,190,0.9);
  max-width: 30ch;
}
.work-row__teaser { font-size: 16px; line-height: 1.7; margin: 0 0 18px; max-width: 46ch; }
.work-row__services {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--body-text); margin: 0 0 24px;
}
.work-row__cta {
  display: inline-block;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  color: var(--charcoal);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--mauve);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.work-row:hover .work-row__cta { color: var(--mauve-dark); border-color: var(--mauve-dark); }

@media (max-width: 900px) {
  .work-rows { gap: 64px; }
  .work-row { grid-template-columns: 1fr; gap: 28px; }
  .work-row:nth-child(even) .work-row__media { order: 0; }
}

/* Footer legal row */
.footer__legal {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--page-gutter);
}
.footer__copy { text-align: left; margin: 0; }
.footer__legal-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer__legal-links a { font-size: 12px; color: rgba(255,255,255,0.6); }
.footer__legal-links a:hover { color: var(--periwinkle-light); }

.prose__meta {
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--body-text); margin: 0 0 34px;
}

@media (max-width: 600px) {
  .footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ── Scrollable capture frame ──────────────────────────────
   A full-page website capture is thousands of pixels tall. Rather than
   shrinking it into a fixed frame, it renders full width inside a window
   you scroll — no background fill, the design itself is the surface. */
.media--scroll {
  aspect-ratio: auto;
  background: none;
  padding: 0;
  margin: 36px 0 0;
  width: 100%;
  display: block;
  margin-inline: auto;
  border: 1px solid rgba(46,51,59,0.12);
  box-shadow: 0 2px 4px rgba(46,51,59,0.05), 0 22px 50px rgba(46,51,59,0.10);
  overflow: hidden;
}
.media__viewport {
  height: 640px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: none;
  scrollbar-width: thin;
  scrollbar-color: rgba(46,51,59,0.28) transparent;
}
.media__viewport:focus-visible { outline: 2px solid var(--mauve-dark); outline-offset: -2px; }
.media__viewport::-webkit-scrollbar { width: 10px; }
.media__viewport::-webkit-scrollbar-track { background: transparent; }
.media__viewport::-webkit-scrollbar-thumb {
  background: rgba(46,51,59,0.24); border-radius: 10px;
  border: 3px solid #FFFFFF;
}
.media__viewport::-webkit-scrollbar-thumb:hover { background: rgba(46,51,59,0.4); }
.media--scroll img { width: 100%; height: auto; max-width: 100%; max-height: none; display: block; margin-inline: auto; }

/* Browser chrome, so a website capture reads as a screen */
.media__chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: #F1F2F4;
  border-bottom: 1px solid rgba(46,51,59,0.1);
}
.media__chrome i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(46,51,59,0.18); display: block;
}

@media (max-width: 600px) {
  .media__viewport { height: 460px; }
}

/* ── Gallery mosaic ────────────────────────────────────────
   The narrative frames above stay a uniform size. Down here the pieces sit at
   their own proportions on a twelve-column field, offset so the eye moves
   through the work rather than scanning a grid. */
.media-mosaic {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 30px 34px;
  align-items: start;
  margin-top: 8px;
}
.media--free {
  width: 100%;
  margin: 0;
  aspect-ratio: auto;
  background: none;
  display: block;
  overflow: hidden;
}
.media--free img {
  width: 100%; height: auto;
  max-width: 100%; max-height: none;
  object-fit: contain;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.media--free:hover img { transform: scale(1.025); }

.media-mosaic .media--free:nth-child(4n + 1) { grid-column: 1 / span 7; }
.media-mosaic .media--free:nth-child(4n + 2) { grid-column: 8 / span 5; margin-top: 64px; }
.media-mosaic .media--free:nth-child(4n + 3) { grid-column: 4 / span 6; }
.media-mosaic .media--free:nth-child(4n + 4) { grid-column: 9 / span 4; margin-top: 40px; }
/* A scroll capture inside a mosaic takes the full row. The column rules below
   only place .media--free, so without this it lands in a narrow implicit
   track and the image scales down until there is nothing left to scroll. */
.media-mosaic .media--scroll { grid-column: 1 / -1; margin-top: 0; }

/* A single leftover piece runs wider so it never looks stranded. */
.media-mosaic .media--free:last-child:nth-child(4n + 1) { grid-column: 1 / span 9; }

@media (max-width: 700px) {
  .media-mosaic { grid-template-columns: 1fr; gap: 22px; }
  .media-mosaic .media--free { grid-column: 1 / -1 !important; margin-top: 0 !important; }
}

/* ── Slider ────────────────────────────────────────────────
   Scroll-snap does the work, so it still swipes and scrolls with JavaScript
   off; the buttons and counter are the enhancement on top. */
.slider { margin-top: 12px; }
.slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.slider__viewport::-webkit-scrollbar { display: none; }
.slider__viewport:focus-visible { outline: 2px solid var(--mauve-dark); outline-offset: 4px; }
.slider__track {
  display: flex;
  list-style: none;
  margin: 0; padding: 0;
  gap: 0;
}
.slider__slide { flex: 0 0 100%; scroll-snap-align: start; }
.slider__slide figure { margin: 0; }
.slider__slide img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.slider__caption {
  font-size: 14.5px; line-height: 1.6; color: var(--body-text);
  padding: 16px 2px 0; max-width: 62ch;
}
.slider__controls {
  display: flex; align-items: center; gap: 18px;
  margin-top: 18px;
}
.slider__btn {
  width: 46px; height: 46px;
  border: 1px solid rgba(46,51,59,0.22);
  background: none; color: var(--charcoal);
  font-size: 17px; line-height: 1; cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.slider__btn:hover:not(:disabled) { background: var(--charcoal); color: #FFFFFF; border-color: var(--charcoal); }
.slider__btn:disabled { opacity: 0.32; cursor: default; }
.slider__count {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.12em; color: var(--body-text); margin: 0;
}
.slider__count span { color: var(--charcoal); }

@media (prefers-reduced-motion: reduce) {
  .slider__viewport { scroll-behavior: auto; }
}

/* ── Process steps ─────────────────────────────────────────
   Three marks joined by dashed arcs that alternate direction, so the eye is
   carried from one step to the next rather than reading three columns. */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  text-align: center;
}
.step { position: relative; }
.step__mark {
  display: grid; place-items: center;
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  border-radius: 22px;
  background: #FFFFFF;
  color: var(--indigo);
  box-shadow: 0 14px 30px rgba(82,94,136,0.18);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.step__mark svg { width: 38px; height: 38px; }
.step:hover .step__mark { transform: translateY(-5px); }
.step__num {
  display: block;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: 0.22em;
  color: var(--mauve-dark);
  margin-bottom: 8px;
}
.step__title { font-size: 23px; line-height: 1.2; margin: 0 0 12px; }
.step__body { font-size: 15.5px; line-height: 1.65; margin: 0 auto; max-width: 34ch; }

/* The connectors sit in the gap between marks and only exist where there is
   room for them to read. */
.step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 34px;
  left: calc(50% + 58px);
  width: calc(100% - 116px + 48px);
  height: 40px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}
.step:nth-child(1)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 44' fill='none'><defs><marker id='h' viewBox='0 0 10 10' refX='7' refY='5' markerWidth='5.5' markerHeight='5.5' orient='auto'><path d='M1.5 1.5 L8 5 L1.5 8.5' fill='none' stroke='%238EA2D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></marker></defs><path d='M6 12 C46 34 112 34 152 18' stroke='%238EA2D4' stroke-width='2.2' stroke-linecap='round' stroke-dasharray='0.1 6' marker-end='url%28%23h%29'/></svg>");
}
.step:nth-child(2)::after {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 44' fill='none'><defs><marker id='h' viewBox='0 0 10 10' refX='7' refY='5' markerWidth='5.5' markerHeight='5.5' orient='auto'><path d='M1.5 1.5 L8 5 L1.5 8.5' fill='none' stroke='%238EA2D4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></marker></defs><path d='M6 30 C46 8 112 8 152 24' stroke='%238EA2D4' stroke-width='2.2' stroke-linecap='round' stroke-dasharray='0.1 6' marker-end='url%28%23h%29'/></svg>");
}

@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .step:not(:last-child)::after { display: none; }
}

/* The 12px numerals need a touch more depth to clear 4.5:1 on this field. */
.process-steps .step__num { color: #7E4E45; }

/* These blocks carry both .wrap and their own narrower max-width. Left on its
   own that centres the column, pushing body copy right of the page header.
   Keep the wrap at full width and constrain the children instead, so text
   starts on the same line as the heading above it. */
.wrap.prose { max-width: var(--wrap); }
.wrap.prose > * { max-width: 720px; }
.wrap.faq__inner { max-width: var(--wrap); }
.wrap.faq__inner > * { max-width: 820px; }

/* ── Demo video ────────────────────────────────────────────── */
.demo { margin: 0; }
.demo__player {
  width: 100%; height: auto; display: block;
  background: var(--charcoal);
  border: 1px solid rgba(46,51,59,0.12);
  box-shadow: 0 2px 4px rgba(46,51,59,0.05), 0 22px 50px rgba(46,51,59,0.10);
}
.demo__caption {
  font-size: 14.5px; line-height: 1.6; color: var(--body-text);
  padding: 16px 2px 0; max-width: 62ch;
}

/* ── Mobile screens ────────────────────────────────────────
   A row of phone frames that scrolls sideways, each screen scrolling on its
   own inside its frame, because these captures run thousands of pixels tall. */
.phones {
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(46,51,59,0.24) transparent;
  -webkit-overflow-scrolling: touch;
}
.phones:focus-visible { outline: 2px solid var(--mauve-dark); outline-offset: 4px; }
.phones__track {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0; padding: 4px 2px;
  width: max-content;
}
.phone { flex: 0 0 auto; width: 272px; }
.phone__screen {
  display: block;
  height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 26px;
  border: 8px solid var(--charcoal);
  background: #FFFFFF;
  box-shadow: 0 16px 38px rgba(46,51,59,0.18);
  scrollbar-width: none;
}
.phone__screen::-webkit-scrollbar { display: none; }
.phone__screen:focus-visible { outline: 2px solid var(--mauve-dark); outline-offset: 3px; }
.phone__screen img { width: 100%; height: auto; max-width: none; max-height: none; display: block; }
.phone__label {
  display: block;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--body-text);
  padding-top: 14px; text-align: center;
}

@media (max-width: 600px) {
  .phone { width: 228px; }
  .phone__screen { height: 470px; }
}

/* Header whose media is the demo: framed on the right, waiting to be played. */
.project-hero--framed .project-hero__media {
  background: var(--paper);
  display: grid; place-items: center;
  padding: clamp(24px, 3vw, 48px);
}
.project-hero__video {
  width: 100%; height: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  background: var(--charcoal);
  border: 1px solid rgba(46,51,59,0.14);
  box-shadow: 0 2px 4px rgba(46,51,59,0.06), 0 18px 40px rgba(46,51,59,0.16);
}

/* Services numerals and rules use the coral accent rather than the sage the
   home-page framework uses. */
/* Each service numeral takes its own hue from the palette. The swatches
   themselves sit at 1.5:1 to 2.5:1 on white, so these are deepened versions of
   the same hues, all clearing 4.5:1 while staying recognisably coral, blue,
   sage and terracotta. */
.svc-detail .framework__num { color: var(--mauve-dark); border-bottom-color: var(--mauve); }
.svc-detail--1 .framework__num { color: #A8564B; border-bottom-color: #DD928A; }
.svc-detail--2 .framework__num { color: #4F5E8C; border-bottom-color: #8EA2D4; }
.svc-detail--3 .framework__num { color: #6B7665; border-bottom-color: #A5ADA6; }
.svc-detail--4 .framework__num { color: #9C6B4A; border-bottom-color: #EDC7BE; }
.svc-detail { border-bottom-color: rgba(221,146,138,0.45); }

/* Exactly two pieces sit as an even pair rather than a staggered mosaic. */
.media-mosaic--pair .media--free:nth-child(1),
.media-mosaic--pair .media--free:nth-child(2) {
  grid-column: span 6;
  margin-top: 0;
  align-self: start;
}

/* Portrait header photographs fit the cell rather than cropping to it. */
.project-hero--contain .project-hero__media { background: var(--paper); padding: clamp(18px, 2vw, 32px); }
.project-hero--contain .project-hero__media img { object-fit: contain; object-position: center; }

/* Portrait pieces get a portrait frame so they are not shrunk to a landscape
   frame's height. */
.media--portrait {
  aspect-ratio: auto;
  display: block;
  margin-inline: auto;
}
.media--portrait img {
  width: 100%; height: auto;
  max-width: 100%; max-height: none;
}

/* Three pieces sit as an even row rather than a staggered mosaic. */
/* nth-child keeps specificity level with the staggered mosaic rules above. */
.media-mosaic--trio .media--free:nth-child(n) {
  grid-column: span 4;
  margin-top: 0;
  align-self: start;
}
@media (max-width: 860px) {
  .media-mosaic--trio .media--free:nth-child(n) { grid-column: span 6; }
}

/* Complete screens sit whole in the frame rather than scrolling inside it. The
   sources differ slightly in proportion, so one shared ratio keeps the three
   frames the same height and the labels on one line. */
.phones--fit .phone__screen {
  height: auto;
  aspect-ratio: 48 / 100;
  overflow: hidden;
}
.phones--fit .phone__screen img { width: 100%; height: 100%; object-fit: cover; }
.phones--fit .phones__track { width: auto; }
.phones--fit .phone { flex: 1 1 0; width: auto; max-width: 280px; }

/* Fitting three phones across a 375px screen leaves each about 90px wide, too
   small to read the UI being shown. On a phone the row scrolls instead. */
@media (max-width: 700px) {
  .phones--fit .phones__track { width: max-content; }
  .phones--fit .phone { flex: 0 0 auto; width: 200px; max-width: 200px; }
}

/* ══ Phone and tablet header, and the stacked case-study hero ══════
   These come last so they win over the desktop .is-current rule without
   needing a more specific selector. */
@media (max-width: 900px) {
  .nav-toggle { display: block; }

  /* The logo stays centred and the button is pinned to the corner, so the
     header keeps its shape whether the menu is open or shut. */
  .site-header__inner { position: relative; justify-content: center; }
  .nav-toggle { position: absolute; right: 4px; top: 22px; }

  .site-nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.18);
    /* A short landscape phone must still be able to reach the last link. */
    max-height: calc(100vh - 150px);
    overflow-y: auto;
  }
  .site-header.is-open .site-nav { display: flex; }

  .site-nav a {
    padding: 16px 4px; text-align: center; font-size: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .site-nav a:last-child { border-bottom: 0; }
  /* Each row is already well past the touch minimum, and the painted hit area
     would reach into the rows above and below it. */
  .site-nav a::after { content: none; }
  .site-nav a.is-current {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--coral);
    background: rgba(255,255,255,0.06);
  }

  /* Title, then image. The text block drops the wide desktop gutter that was
     there to line it up with the content below. */
  .project-hero { grid-template-columns: 1fr; }
  .project-hero__text { padding: 40px var(--case-gutter) 30px; }
  .project-hero__text > * { max-width: none; }
  .project-hero__media { height: clamp(240px, 58vw, 420px); }
  .project-hero--framed .project-hero__media { height: auto; }
}

/* ══ Homepage and services positioning lines ══════ */
.hero__deck {
  font-family: 'Bodoni Moda', serif;
  font-size: clamp(21px, 2.5vw, 28px);
  line-height: 1.25;
  color: var(--indigo);
  margin: 0 0 14px;
}
.hero__lede {
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--charcoal);
  max-width: 560px;
  margin: 0 0 22px;
}