/* ===========================================================================
   Booked Wild — case studies (/case-study/*)

   One sheet shared by both case studies so they read as a family: the same
   hero, the same "numbers posted upfront" results bar, the same brief callout,
   the same before/after component and the same quotation band. Each page then
   composes those pieces around its own content — Nomadic gets goals, a mobile
   device feature and a three-part GSC breakdown; Safari gets before/after
   bullet columns, a results table and a mid-page CTA.

   Built from the existing production tokens and section rhythm. Page-scoped:
   no shared stylesheet is modified.
   =========================================================================== */

/* ---- hero ---------------------------------------------------------------- */
.cshero { background: var(--ink); color: var(--cream); padding: 176px var(--pad) 0; }
.cshero__inner { max-width: var(--max); margin: 0 auto; }
.cshero .eyebrow { color: var(--accent-soft); margin: 0 0 22px; font-size: 14px; }
.cshero h1 {
  margin: 0; font-size: clamp(36px, 5vw, 78px); line-height: 0.98;
  letter-spacing: -0.045em; font-weight: 800; color: var(--white); max-width: 18ch;
}
.cshero__who {
  margin: 26px 0 0; font-family: 'Karla', sans-serif; font-size: 17px;
  color: rgba(242, 246, 238, 0.78);
}
.cshero__who span:first-child { color: var(--white); font-weight: 700; }
.cshero__sep { margin: 0 8px; color: var(--accent-mid); }
.cshero__lede {
  margin: 22px 0 0; font-family: 'Karla', sans-serif;
  font-size: clamp(17px, 1.45vw, 21px); line-height: 1.62;
  color: rgba(242, 246, 238, 0.88); max-width: 62ch;
}
/* the hero screenshot sits half in the dark band and half over the next
   section, so the page opens on the work rather than on a wall of type */
.cshero__shot {
  max-width: var(--max); margin: 54px auto -120px; padding: 0;
  border-radius: var(--r-card) var(--r-card) 0 0; overflow: hidden;
  box-shadow: 0 -2px 0 rgba(159, 220, 169, 0.22), 0 40px 90px rgba(6, 20, 13, 0.44);
}
.cshero__shot img {
  display: block; width: 100%; aspect-ratio: 16 / 7;
  object-fit: cover; object-position: 50% 0%;
}
.cshero__shot--wide img { aspect-ratio: 21 / 8; }

/* ---- the numbers, posted upfront: the shared results/USP bar -------------- */
/* 156px of top padding existed to clear the old hero screenshot, which used a
   -120px bottom margin to overlap this section. The split hero no longer
   overlaps, so that allowance was left stranded as a blank band. */
.nums { background: var(--field); color: var(--cream); padding: 88px var(--pad) 74px; }
.nums .wrap { max-width: var(--max); margin: 0 auto; }
.nums .eyebrow { color: var(--accent-soft); margin: 0 0 18px; font-size: 14px; }
.nums__h {
  margin: 0 0 44px; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.08;
  letter-spacing: -0.035em; font-weight: 800; color: var(--white); max-width: 24ch;
}
.csnums {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 30px;
}
.csnum { padding-top: 22px; border-top: 2px solid rgba(159, 220, 169, 0.52); }
.csnum__v {
  margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900;
  font-size: clamp(38px, 4.2vw, 62px); line-height: 1; letter-spacing: -0.04em;
  color: var(--white);
}
.csnum__k {
  margin: 12px 0 0; font-family: 'Karla', sans-serif; font-size: 17px;
  font-weight: 700; color: var(--accent-soft);
}
.csnum__src {
  margin: 6px 0 0; font-family: 'Karla', sans-serif; font-size: 14px;
  line-height: 1.5; color: rgba(242, 246, 238, 0.66);
}
/* Safari's values are longer strings (£140 → £52), so they get a little less
   type size to keep all four on one line each */
.csnums--safari .csnum__v { font-size: clamp(30px, 3.2vw, 48px); }
.nums__note {
  margin: 40px 0 0; padding-top: 22px; border-top: 1px solid rgba(159, 220, 169, 0.3);
  font-family: 'Karla', sans-serif; font-size: 15px; line-height: 1.6;
  color: rgba(242, 246, 238, 0.72); max-width: 70ch;
}

/* ---- editorial prose ----------------------------------------------------- */
.prose { max-width: 74ch; margin-top: 30px; }
.prose p {
  margin: 0 0 20px; font-family: 'Karla', sans-serif;
  font-size: 17px; line-height: 1.74; color: var(--body);
}
.prose p:last-child { margin-bottom: 0; }
.sec--dark .prose p, .sec--field .prose p { color: rgba(242, 246, 238, 0.86); }
.ohead--gap { margin-top: 64px; }

/* ---- the brief, in one line: the callout ---------------------------------- */
.brief {
  margin: 54px 0 0; padding: 34px 38px 38px;
  background: var(--white); border: 1px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--r-md);
  max-width: 78ch;
  box-shadow: 0 18px 44px rgba(12, 42, 28, 0.07);
}
.brief__lbl {
  margin: 0 0 14px; font-family: 'Karla', sans-serif; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accent);
}
.brief__t {
  margin: 0; font-size: clamp(21px, 2.1vw, 31px); line-height: 1.26;
  letter-spacing: -0.03em; font-weight: 700; color: var(--ink);
}

/* ---- goals (Nomadic) ------------------------------------------------------ */
.goals { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.goal {
  background: var(--card); border: 1px solid rgba(159, 220, 169, 0.18);
  border-radius: var(--r-card); padding: 34px 34px 36px;
}
.goal__n { margin: 0 0 16px; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 32px; line-height: 1; color: rgba(159, 220, 169, 0.5); }
.goal__t { margin: 0; font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.68; color: rgba(242, 246, 238, 0.9); }
.goal__close {
  margin: 40px 0 0; padding-top: 26px; border-top: 3px solid var(--accent-mid);
  font-size: clamp(19px, 1.7vw, 26px); line-height: 1.3; letter-spacing: -0.025em;
  font-weight: 700; color: var(--white);
}

/* ---- phases (Nomadic: full rows) ------------------------------------------ */
.phases { list-style: none; margin: 54px 0 0; padding: 0; }
.ph {
  display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 0 40px;
  padding: 36px 0; border-top: 1px solid var(--line);
}
.ph:last-child { border-bottom: 1px solid var(--line); }
.ph__n { margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: clamp(36px, 3.6vw, 56px); line-height: 1; color: var(--tint); }
.ph__t { margin: 0 0 14px; font-size: clamp(22px, 1.9vw, 30px); line-height: 1.14; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); }
.ph__b { margin: 0 0 14px; font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.72; color: var(--body); max-width: 76ch; }
.ph__b:last-child { margin-bottom: 0; }
.ph__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 26px; max-width: 60ch; }
.ph__list li {
  position: relative; padding-left: 22px;
  font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.6; color: var(--ink); font-weight: 600;
}
.ph__list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 8px; height: 2px; border-radius: 2px; background: var(--accent); }
.ph__result {
  margin: 40px 0 0; padding-top: 26px; border-top: 3px solid var(--accent-mid);
  font-size: clamp(19px, 1.7vw, 26px); line-height: 1.3; letter-spacing: -0.025em;
  font-weight: 700; color: var(--ink);
}

/* ---- approach cards (Safari: four across) --------------------------------- */
.pcards { list-style: none; margin: 52px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; }
.pcard {
  background: var(--card); border: 1px solid rgba(159,220,169,.18);
  border-top: 4px solid var(--accent-mid);
  border-radius: var(--r-card); padding: 30px 28px 32px;
  display: flex; flex-direction: column;
}
.pcard__n { margin: 0 0 14px; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 26px; line-height: 1; color: var(--accent-soft); }
.pcard__t { margin: 0; font-size: clamp(19px, 1.5vw, 23px); line-height: 1.16; letter-spacing: -0.03em; font-weight: 800; color: var(--white); }
.pcard__b { margin: 12px 0 0; font-family: 'Karla', sans-serif; font-size: 15.5px; line-height: 1.66; color: rgba(242,246,238,.82); }

/* ---- before / after: shared component ------------------------------------- */
.ba { margin-top: 52px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 30px; align-items: start; }
.ba__side { margin: 0; }
.ba__lbl {
  margin: 0 0 14px; font-family: 'Karla', sans-serif; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700;
  display: inline-flex; align-items: center; gap: 9px;
}
.ba__lbl::before { content: ""; width: 9px; height: 9px; border-radius: 50%; }
.ba__lbl--before { color: var(--muted); }
.ba__lbl--before::before { background: var(--line-2); }
.ba__lbl--after { color: var(--accent); }
.ba__lbl--after::before { background: var(--accent); }
/* both frames are identical, so the two screenshots are directly comparable —
   same width, same aspect, both anchored to the top of the page capture */
.ba__frame {
  border-radius: var(--r-md); overflow: hidden; background: var(--tint);
  border: 1px solid var(--line);
  box-shadow: 0 22px 54px rgba(12, 42, 28, 0.14);
}
.ba__frame img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 0%; }
.ba__panel { border-radius: var(--r-md); padding: 28px 30px 30px; height: 100%; }
.ba__panel--before { background: var(--tint); border: 1px solid var(--line); }
.ba__panel--after { background: var(--white); border: 1px solid var(--accent-mid); box-shadow: 0 18px 44px rgba(12,42,28,.08); }
.ba__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ba__list li {
  position: relative; padding-left: 26px;
  font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.6; color: var(--body);
}
.ba__list li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 9px; height: 9px; border-radius: 50%; }
.ba__panel--before .ba__list li::before { background: var(--line-2); }
.ba__panel--after  .ba__list li::before { background: var(--accent); }
/* Was 62ch while the before/after grid above it spans the section, so it read
   as a narrow column inside a much wider block. */
.ba__cap {
  margin: 34px 0 0; font-size: clamp(18px, 1.6vw, 25px); line-height: 1.34;
  letter-spacing: -0.025em; font-weight: 700; color: var(--ink); max-width: 84ch;
}

/* ---- mobile device feature (Nomadic) -------------------------------------- */
.mob { margin-top: 60px; display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 52px; align-items: center; }
.mob__device {
  margin: 0; border-radius: 26px; overflow: hidden;
  border: 8px solid var(--ink); background: var(--ink);
  box-shadow: 0 26px 60px rgba(12, 42, 28, 0.24);
}
.mob__device img { display: block; width: 100%; aspect-ratio: 1 / 2.1; object-fit: cover; object-position: 50% 0%; }
.mob__b { margin: 0 0 18px; font-family: 'Karla', sans-serif; font-size: 17px; line-height: 1.74; color: var(--body); }
.mob__b:last-child { margin-bottom: 0; }

/* ---- GSC three-part breakdown (Nomadic) ----------------------------------- */
.gscs { list-style: none; margin: 60px 0 0; padding: 0; display: grid; gap: 0; }
.gsc { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 22px; padding: 28px 0; border-top: 1px solid var(--line); }
.gsc:last-child { border-bottom: 1px solid var(--line); }
.gsc__n { margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 26px; line-height: 1.1; color: var(--accent-mid); }
.gsc__t { margin: 0; font-size: clamp(19px, 1.5vw, 24px); line-height: 1.2; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); }
.gsc__m {
  margin: 10px 0 0; font-family: 'Chivo', sans-serif; font-weight: 900;
  font-size: 21px; letter-spacing: -0.02em; color: var(--accent);
}
.gsc__b { margin: 10px 0 0; font-family: 'Karla', sans-serif; font-size: 16px; line-height: 1.7; color: var(--body); max-width: 76ch; }
.src { margin: 22px 0 0; font-family: 'Karla', sans-serif; font-size: 14.5px; color: var(--muted); }
.src--tight { margin-top: 18px; }

/* ---- SEMrush supporting block --------------------------------------------- */
.sem { margin-top: 52px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); padding: 34px 36px 36px; }
.sem__h { margin: 0; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.16; letter-spacing: -0.03em; font-weight: 800; color: var(--ink); }
.sem__lede { margin: 12px 0 0; font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.7; color: var(--body); max-width: 76ch; }
.sem__list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 44px; }
.sem__list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: 'Karla', sans-serif; font-size: 16.5px;
}
.sem__k { color: var(--body); }
.sem__v { font-family: 'Chivo', sans-serif; font-weight: 900; color: var(--accent); white-space: nowrap; }

/* ---- what this means (Nomadic) -------------------------------------------- */
.means { list-style: none; margin: 46px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.mean {
  background: rgba(10, 31, 20, 0.30); border: 1px solid rgba(159, 220, 169, 0.28);
  border-radius: var(--r-card); padding: 28px 28px 30px;
  display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 0 15px; align-items: start;
}
.mean__tick { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); display: grid; place-items: center; margin-top: 2px; }
.mean__tick svg { width: 12px; height: 12px; display: block; }
.mean p { margin: 0; font-family: 'Karla', sans-serif; font-size: 16.5px; line-height: 1.66; color: rgba(242, 246, 238, 0.92); }

/* ---- detailed results (Safari) -------------------------------------------- */
.ress { list-style: none; margin: 50px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 56px; }
.res { padding: 26px 0; border-top: 1px solid var(--line); }

.res__k { margin: 0; font-family: 'Karla', sans-serif; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.res__v { margin: 10px 0 0; font-family: 'Chivo', sans-serif; font-weight: 900; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.06; letter-spacing: -0.035em; color: var(--ink); }
.res__n { margin: 8px 0 0; font-family: 'Karla', sans-serif; font-size: 16px; line-height: 1.66; color: var(--body); }
#results .actions { margin-top: 40px; }

/* ---- quotation band -------------------------------------------------------- */
.quo { background: var(--ink); color: var(--cream); padding: 92px var(--pad); }
.quo--safari { background: var(--ink-2); }
.quo__inner { max-width: var(--max); margin: 0 auto; }
.quo__mark {
  margin: 0; font-family: 'Chivo', sans-serif; font-weight: 900;
  font-size: 92px; line-height: 0.7; color: var(--accent-mid); opacity: .55;
}
.quo__q { margin: 18px 0 0; }
.quo__q p {
  margin: 0; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.26;
  letter-spacing: -0.03em; font-weight: 700; color: var(--white); max-width: 30ch;
}
.quo__who { margin: 34px 0 0; padding-top: 22px; border-top: 2px solid rgba(159,220,169,.36); display: flex; flex-direction: column; gap: 3px; max-width: 30ch; }
.quo__name { font-family: 'Karla', sans-serif; font-size: 17px; font-weight: 700; color: var(--white); }
.quo__role { font-family: 'Karla', sans-serif; font-size: 15.5px; color: var(--accent-soft); }

/* ---- closing CTA ----------------------------------------------------------- */
.closx { background: var(--field); color: var(--cream); padding: 96px var(--pad); }
.closx--safari { background: var(--field); }
.closx__inner { max-width: var(--max); margin: 0 auto; }
.closx .eyebrow { color: var(--accent-soft); font-size: 14px; }
.closx .rule { background: var(--accent-mid); }
.closx__h { margin: 0; font-size: clamp(32px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -0.04em; font-weight: 800; color: var(--white); max-width: 22ch; }
.closx__b { margin: 22px 0 0; font-family: 'Karla', sans-serif; font-size: clamp(16.5px, 1.4vw, 19px); line-height: 1.7; color: rgba(242,246,238,.9); max-width: 62ch; }
.closx .actions { margin-top: 36px; }
/* a:hover in services.css outranks .btn--ghost's colour, so hold it here */
.closx .btn--ghost, .closx .btn--ghost:hover { color: var(--white); }
.closx .btn--ghost { border-color: rgba(242,246,238,.5); }
.closx .btn--ghost:hover { background: rgba(242,246,238,.14); border-color: var(--white); }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .pcards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .means { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
}

@media (max-width: 1024px) {
  .cshero { padding-top: 150px; }
  .cshero__shot { margin-bottom: -90px; }
  .nums { padding-top: 72px; }
  .csnums { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px 34px; }
  .goals { grid-template-columns: minmax(0,1fr); }
  .ph { grid-template-columns: 90px minmax(0,1fr); gap: 0 26px; }
  .mob { grid-template-columns: minmax(0,1fr); gap: 34px; justify-items: start; }
  .mob__device { max-width: 300px; }
  .sem__list { grid-template-columns: minmax(0,1fr); gap: 0; }
  .means { grid-template-columns: minmax(0,1fr); }
  .ress { grid-template-columns: minmax(0,1fr); gap: 0; }

}

@media (max-width: 768px) {
  /* Before first, After second — the stack order the markup already gives */
  .ba { grid-template-columns: minmax(0,1fr); gap: 34px; }
  /* The source captures are 1200x1500 — 4/5 exactly, which is why the base
     rule matches them. Overriding to 3/4 here made object-fit:cover take a
     slice off the bottom of both homepage screenshots below 768px, and 4/5
     is the shorter box at these widths anyway. */
  .pcards { grid-template-columns: minmax(0,1fr); }
  .ph { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 30px 0; }
  .ph__n { font-size: 32px; }
  .ph__list { grid-template-columns: minmax(0,1fr); }
  .gsc { grid-template-columns: 40px minmax(0,1fr); gap: 0 14px; }
  .brief { padding: 28px 26px 30px; }
  .sem { padding: 28px 26px 30px; }
  .quo { padding: 72px var(--pad); }
  .closx { padding: 76px var(--pad); }
  .cshero__shot img, .cshero__shot--wide img { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .cshero { padding-top: 132px; }
  .cshero__shot { margin: 40px auto -70px; }
  .nums { padding-top: 64px; }
  .csnums { grid-template-columns: minmax(0,1fr); }
  .goal, .pcard, .mean { padding: 26px 24px 28px; }
  .mob__device { max-width: none; }
}

/* ===========================================================================
   Design pass — the pages were composing too much content into the left half
   and leaving accidental empty columns. These add the split compositions,
   icon tiles and panels that use the full width deliberately.
   =========================================================================== */

/* ---- split hero: copy one side, the work on the other -------------------- */
.cshero--split { padding: 172px var(--pad) 96px; }
.cshero__grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 64px; align-items: center;
}
.cshero--split h1 { max-width: 16ch; }
.cshero--split .cshero__lede { max-width: 48ch; }
/* link out to the client's live site, under the intro copy */
.cshero__cta { margin: 32px 0 0; }

/* a browser frame, and on Safari a phone overlapping it — the site's own
   .chrome/.phone device language, rebuilt here so the hero carries the work */
.mocks { position: relative; }
.mocks__browser {
  border-radius: 14px; overflow: hidden; background: var(--white);
  box-shadow: 0 38px 90px rgba(6, 20, 13, 0.46);
}
.mocks__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: #E9EFE4; border-bottom: 1px solid var(--line);
}
.mocks__bar span { width: 9px; height: 9px; border-radius: 50%; background: #C3D3BF; flex: none; }
.mocks__bar em {
  margin-left: 10px; font-family: 'Karla', sans-serif; font-style: normal;
  font-size: 12.5px; color: var(--muted);
  background: var(--white); border-radius: 999px; padding: 4px 12px;
}
/* The screenshots are full-page captures at their own ratios (safariandbeach
   2.19:1, nomadic 0.80:1). Forcing an aspect-ratio and cropping with cover was
   cutting the sides off the sites. They render at their natural ratio instead:
   nothing cropped, nothing stretched, and the frame sizes itself to the shot. */
.mocks__browser img { display: block; width: 100%; height: auto; }

.mocks__phone {
  position: absolute; right: -12px; bottom: -44px; width: 27%;
  border: 7px solid var(--ink); border-radius: 22px; overflow: hidden; background: var(--ink);
  box-shadow: 0 26px 56px rgba(6, 20, 13, 0.5);
}
.mocks__phone img { display: block; width: 100%; height: auto; }

/* ---- results tiles with icons -------------------------------------------- */
.csnum--tile {
  border-top: 0;
  background: rgba(10, 31, 20, 0.26);
  border: 1px solid rgba(159, 220, 169, 0.30);
  border-radius: var(--r-card);
  padding: 26px 26px 28px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.csnum--tile:hover { border-color: rgba(159, 220, 169, 0.6); transform: translateY(-3px); }
.csnum__icon { display: block; width: 30px; height: 30px; color: var(--accent-soft); margin-bottom: 18px; }
.csnum__icon svg { width: 100%; height: 100%; display: block; }

/* ---- two-column editorial: copy + a project visual ------------------------ */
.split2 {
  margin-top: 30px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
  gap: 56px; align-items: center;
}
.split2--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); }
.split2 .prose { margin-top: 0; max-width: none; }
.split2__media { margin: 0; border-radius: var(--r-card); overflow: hidden; box-shadow: 0 24px 56px rgba(12,42,28,.16); }
/* Same reasoning as the hero mocks: these are website captures, so they keep
   their own proportions rather than being cropped to fit a fixed frame. */
.split2__media img { display: block; width: 100%; height: auto; }


/* ---- phases as a 2x2 grid (Nomadic) --------------------------------------- */
.phases--grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
}
.phases--grid .ph {
  display: block; padding: 32px 32px 34px; border-top: 0;
  background: var(--white); border: 1px solid var(--line);
  border-top: 4px solid var(--accent-mid);
  border-radius: var(--r-card);
}
.phases--grid .ph:last-child { border-bottom: 1px solid var(--line); }
.phases--grid .ph__n { font-size: 30px; color: var(--accent-mid); margin-bottom: 12px; }
.phases--grid .ph__b { max-width: none; font-size: 16px; }
.phases--grid .ph__list { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: none; }

/* ---- outcome cards with icons (Nomadic) ----------------------------------- */
.mean--card {
  display: block;
  background: rgba(10, 31, 20, 0.30);
  border: 1px solid rgba(159, 220, 169, 0.28);
  border-radius: var(--r-card);
  padding: 30px 28px 32px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.mean--card:hover { border-color: rgba(159, 220, 169, 0.6); transform: translateY(-3px); }
.mean__icon { display: block; width: 30px; height: 30px; color: var(--accent-soft); margin-bottom: 18px; }
.mean__icon svg { width: 100%; height: 100%; display: block; }

/* ---- fifth results tile: the CTA (Safari) --------------------------------- */
.res--cta { border-top: 0; padding: 26px 0 0; }
.res__cta {
  display: flex; flex-direction: column; gap: 8px;
  height: 100%; padding: 28px 30px 30px;
  background: var(--accent); border-radius: var(--r-card);
  text-decoration: none;
  transition: background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.res__cta:hover, .res__cta:focus-visible { background: var(--ink); transform: translateY(-3px); }
.res__cta:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 3px; }
.res__cta-k {
  font-family: 'Karla', sans-serif; font-size: 15px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; color: rgba(255,255,255,.78);
}
.res__cta-v {
  font-size: clamp(21px, 1.9vw, 28px); line-height: 1.12; letter-spacing: -0.03em;
  font-weight: 800; color: var(--white);
}
.res__cta-go { margin-top: auto; font-size: 24px; line-height: 1; color: var(--white); }

/* ---- split testimonial ----------------------------------------------------- */
.quo__grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 64px; align-items: center;
}
.quo--split .quo__q p { max-width: none; }
.quo__aside { display: grid; gap: 18px; }
.quo__stat {
  margin: 0; padding: 18px 22px;
  background: rgba(242, 246, 238, 0.06);
  border: 1px solid rgba(159, 220, 169, 0.24);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 4px;
}
.quo__stat-v { font-family: 'Chivo', sans-serif; font-weight: 900; font-size: 27px; letter-spacing: -0.03em; color: var(--white); }
.quo__stat-k { font-family: 'Karla', sans-serif; font-size: 14.5px; color: var(--accent-soft); }
/* Nomadic: no photograph of Mark is available, so the left column is a
   typographic lead rather than an image well */
.quo--nomadic .quo__grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); align-items: start; }
.quo__label {
  margin: 14px 0 0; font-family: 'Karla', sans-serif; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accent-soft);
}
.quo--nomadic .quo__who { margin-top: 22px; border-top-width: 2px; }
.quo__q--split p { font-size: clamp(21px, 2.2vw, 34px); }

/* ---- split closing CTA ----------------------------------------------------- */
.closx__grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 60px; align-items: center;
}
.closx--split .closx__h { max-width: 18ch; }
.closx__panel {
  background: rgba(10, 31, 20, 0.34);
  border: 1px solid rgba(159, 220, 169, 0.30);
  border-radius: var(--r-card);
  padding: 34px 34px 36px;
}
.closx__panel-k {
  margin: 0 0 22px; font-family: 'Karla', sans-serif; font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--accent-soft);
}
.closx__panel .actions { margin-top: 0; display: grid; gap: 12px; }
.closx__panel .actions .btn { width: 100%; justify-content: center; }

/* ---- responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .cshero--split { padding: 146px var(--pad) 76px; }
  .cshero__grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
  .cshero--split h1, .cshero--split .cshero__lede { max-width: none; }
  .mocks__phone { width: 24%; right: 0; bottom: -30px; }
  .split2, .split2--wide { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .phases--grid { grid-template-columns: minmax(0, 1fr); }
  .quo__grid, .quo--nomadic .quo__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .closx__grid { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .closx--split .closx__h { max-width: none; }
}

@media (max-width: 768px) {
  .mocks__phone { position: static; width: 46%; margin: 18px 0 0; }
  .csnum--tile { padding: 24px 22px 26px; }
  .phases--grid .ph { padding: 28px 26px 30px; }
  .phases--grid .ph__list { grid-template-columns: minmax(0,1fr); }
  .res__cta { padding: 26px 24px 28px; }
  .closx__panel { padding: 28px 26px 30px; }
  .quo__stat { padding: 16px 20px; }
}

@media (max-width: 560px) {
  .cshero--split { padding: 128px var(--pad) 64px; }
  .mocks__phone { width: 58%; }
  .mean--card { padding: 26px 24px 28px; }
}

/* ---- Nomadic challenge: prose beside the brief ---------------------------
   The challenge copy alone filled about half the container. Pairing it with
   the brief callout gives the section two weighted columns instead of one
   column and an empty gutter — and puts the one-line brief where it reads as
   the answer to the copy beside it. */
.chsplit {
  margin-top: 30px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: 56px; align-items: start;
}
.chsplit .prose { margin-top: 0; max-width: none; }
.brief--aside { margin: 0; max-width: none; position: sticky; top: 108px; }

@media (max-width: 1024px) {
  .chsplit { grid-template-columns: minmax(0, 1fr); gap: 38px; }
  .brief--aside { position: static; }
}

/* ---- Safari challenge: the brief sits inside the copy column -------------
   It previously followed the two-column block as a sibling with 54px of its
   own margin, which opened a band of empty space above and below it while the
   image column stayed short. Inside the column it reads as the conclusion to
   the copy it belongs to, and both sides align at the top. */
.split2--brief { align-items: start; }
.split2__col { display: flex; flex-direction: column; }
.brief--inline { margin: 34px 0 0; max-width: none; }
/* The phone capture is 0.64:1, so at the column's full width it rendered far
   taller than the copy beside it — 228px of dead space under the brief at
   1440, and a ~1500px-tall image once stacked. Held to a phone-like size so
   the two columns finish at roughly the same point. */
.split2--brief .split2__media { max-width: 372px; justify-self: center; align-self: start; }

/* ---- Nomadic: visibility results beside the mobile device ---------------- */
/* Two paragraphs set as two columns: the block now spans the same width as the
   sections around it while each measure stays readable, rather than one narrow
   column or one over-long line. */
.mobcopy { margin-top: 44px; max-width: none; }
.mobcopy--two {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 56px;
}
.mobcopy--two .mob__b { margin: 0; max-width: 62ch; }

@media (max-width: 1024px) {
  .mobcopy--two { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .split2--brief .split2__media { max-width: 320px; justify-self: start; }
}
.gscsplit {
  margin-top: 52px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.42fr);
  gap: 56px; align-items: center;
}
.gscsplit__copy { min-width: 0; }
.gscsplit .gscs { margin-top: 0; }
.gscsplit .mob__device { margin: 0; }

@media (max-width: 1024px) {
  /* content first, the device below it. The figure needs an explicit width:
     justify-items:start makes the grid item shrink-to-fit, and its image is
     width:100%, so a max-width alone collapsed it to just its 7px borders. */
  .gscsplit { grid-template-columns: minmax(0, 1fr); gap: 38px; justify-items: start; }
  .gscsplit .mob__device { width: min(300px, 62%); }
}
@media (max-width: 768px) {
  .brief--inline { margin-top: 28px; }
  .gscsplit .mob__device { width: min(280px, 72%); }
}
@media (max-width: 560px) {
  .gscsplit .mob__device { width: 78%; }
}


/* ---- contrast fixes for two new section/component pairings ----------------
   Both existing case studies put .brief on a cream section and .goal__close on
   a dark one, so neither combination below had come up before.

   1. .brief on a dark section. The card itself stays white, but .sec--dark sets
      a light body colour on its descendants at (0,1,1), which outranks
      .brief__lbl and .brief__t at (0,1,0) — the card rendered near-white text
      on white, 1.09:1. Restated here at (0,2,0). */
/* --accent on white is only 4.05:1; --field is the same brand green at 6.5:1 */
.sec--dark .brief__lbl { color: var(--field); }
.sec--dark .brief__t   { color: var(--ink); }

/* 2. .goal__close on a light section. The component assumes the dark ground it
      has on Nomadic Tours and sets white, which on cream was also 1.09:1. */
.sec:not(.sec--dark):not(.sec--field) .goal__close { color: var(--ink); }


/* ---- editorial section: copy left, site visual right ----------------------
   The media column takes its height from the copy beside it rather than from
   the screenshot's own proportions, so each composition balances against its
   own text instead of a fixed height imposed on both. The image then fills that
   box and crops from the top, which is the part of a page worth showing. */
/* the two-column rule must be width-scoped: this file's responsive
   .split2 { grid-template-columns: minmax(0,1fr) } rule appears earlier, so an
   unscoped override here would keep the section two-up on a phone */
@media (min-width: 1025px) {
  .split2--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.split2--even { align-items: stretch; }
.chsplit--even { align-items: stretch; }
.split2__media--fill { align-self: stretch; position: relative; min-height: 340px; }
/* absolute so the screenshot contributes no intrinsic height: the row is sized
   by the copy column, and the image then fills whatever that turns out to be */
.split2__media--fill img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 0;
}
@media (max-width: 1024px) {
  /* stacked, there is no copy column to match, so the visual takes a landscape
     crop instead of running the full height of a tall screenshot */
  .split2__media--fill { aspect-ratio: 16 / 10; min-height: 0; position: relative; }
}
@media (max-width: 560px) {
  .split2__media--fill { aspect-ratio: 4 / 3; }
}

/* ---- results intro spans the content beneath it ---------------------------
   .ohead--wide caps at 78ch while the comparison and card grids below use the
   full wrap, so the intro read as a narrow column above a wide layout. The
   paragraphs keep a readable measure of their own.
   Scoped to .cs--ey: Safari and Nomadic match #results > .wrap > .ohead--wide
   too, and an unscoped rule here widened their intros and rewrapped their
   headings — both are already live at the 78ch cap. */
.cs--ey #results > .wrap > .ohead--wide { max-width: none; }
.cs--ey #results > .wrap > .ohead--wide .h2 { max-width: 22ch; }
.cs--ey #results > .wrap > .ohead--wide .lede { max-width: 68ch; }

/* ---- before / after showcase ---------------------------------------------
   One comparison per row: a labelled old capture, a transition arrow, and the
   rebuilt equivalent, each inside the browser frame used by .mocks and the
   work gallery. Landscape crops of the same region of each page, at the same
   scale, so the change reads at a glance rather than needing inspection. */
.bax { margin: 54px 0 0; display: grid; gap: 56px; }
.bax__row { display: grid; grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr); gap: 0; align-items: center; }
.bax__cap {
  grid-column: 1 / -1; margin: 0 0 6px;
  font-family: 'Karla', sans-serif; font-size: 13px; letter-spacing: .18em;
  text-transform: uppercase; font-weight: 700; color: var(--field);
}
.bax__item { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.bax__lbl {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: 'Karla', sans-serif; font-size: 12.5px; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 800; border-radius: 999px; padding: 7px 15px;
}
.bax__lbl--before { background: var(--tint); color: var(--body); border: 1px solid var(--line); }
.bax__lbl--after  { background: var(--accent); color: var(--white); }
.bax__shot {
  margin: 0; border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--white);
  box-shadow: 0 22px 54px rgba(12, 42, 28, .14);
}
.bax__bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: var(--tint); border-bottom: 1px solid var(--line);
}
.bax__bar span { width: 9px; height: 9px; border-radius: 50%; background: #C9D3C3; }
.bax__bar em {
  font-style: normal; margin-left: 8px; font-family: 'Karla', sans-serif;
  font-size: 12.5px; color: var(--muted); background: var(--white);
  border-radius: 999px; padding: 4px 12px;
}
.bax__shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; }
.bax__arrow {
  display: grid; place-items: center; align-self: center;
  width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
  background: var(--accent); color: var(--white);
}
.bax__arrow svg { width: 18px; height: 18px; display: block; }
.bax__note { margin: 14px 0 0; grid-column: 1 / -1; font-family: 'Karla', sans-serif;
  font-size: 15px; line-height: 1.6; color: var(--muted); }

@media (max-width: 900px) {
  /* stacked: before, arrow turned down, then after — the order the story reads */
  .bax { gap: 44px; }
  .bax__row { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .bax__arrow { transform: rotate(90deg); }
}


/* ---- USP bar: the results-tile component carrying words, not figures -------
   The Wyndham Arms case study has no measured results to report, but it does
   have four things the old site could not do. Those reuse the results tiles so
   the bar stays scannable and compact rather than becoming a fifth editorial
   section. The only difference is the value: a short phrase needs heading type
   at heading size, not the Chivo numeral treatment a figure gets.
   Scoped to --usp, which no existing page uses, so Safari, Nomadic and
   Expedition Yorkshire keep their number bars exactly as they are. */
.csnums--usp .csnum__v {
  font-family: 'Schibsted Grotesk', sans-serif;
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.16; letter-spacing: -0.03em; font-weight: 800;
}
.csnums--usp .csnum__src { margin-top: 10px; }

/* .pcard had no icon slot because no page had needed one; the treatment is the
   results tile's, so the two card families stay visually related. */
.pcard__icon { display: block; width: 28px; height: 28px; color: var(--accent-soft); margin-bottom: 16px; }
.pcard__icon svg { width: 100%; height: 100%; display: block; }