:root {
  --text: #1c1c1c;
  --muted: #5a5a5a;
  --bg: #fdfcfa;
  --accent: #b5651d;
  --border: #e4e0da;
  --max-width: 760px;
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "Nunito", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.site-title {
  font-weight: bold;
  font-size: 1.25rem;
  color: var(--text);
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.95rem;
  white-space: nowrap;
}

.site-nav a:hover { color: var(--accent); }

/* Dropdown for Case Studies / Copywriting - hover-revealed on
   desktop, always expanded (no hover needed) once the mobile menu
   is open. */
.nav-item {
  position: relative;
}

.nav-item > a::after {
  content: "\25BE";
  display: inline-block;
  margin-left: 0.35em;
  font-size: 0.65em;
  vertical-align: middle;
  color: var(--muted);
}

.nav-dropdown {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 18px 36px -18px rgba(28, 28, 28, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 20;
}

.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown li { margin: 0; }

.nav-dropdown a {
  display: block;
  margin: 0;
  padding: 0.45rem 1.1rem;
  font-size: 0.88rem;
}

.nav-dropdown a:hover { background: rgba(28, 28, 28, 0.04); }

.nav-toggle-checkbox { display: none; }

.nav-toggle-label {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
  cursor: pointer;
}

.nav-toggle-label span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text);
  border-radius: 1px;
}

@media (max-width: 700px) {
  .nav-toggle-label {
    display: flex;
  }

  .site-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    flex-basis: 100%;
    gap: 0.9rem;
    margin-top: 1.25rem;
  }

  .nav-toggle-checkbox:checked ~ .site-nav {
    display: flex;
  }

  .nav-item { width: 100%; }

  .nav-dropdown {
    position: static;
    display: block;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0.6rem 0 0 1rem;
    margin: 0;
  }

  .nav-dropdown li + li { margin-top: 0.6rem; }

  .nav-dropdown a { padding: 0; }
}

.site-main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
}

.site-footer {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.85rem;
  border-top: 1px solid var(--border);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 2.3rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.5rem; margin-top: 2.5rem; }

/* Keyline between narrative sections (e.g. Background / Tactics /
   Results) - same line weight as the one under the case-subtitle,
   sitting above the heading rather than under it. */
h2.case-section-heading {
  margin-top: 3rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--border);
}

/* Homepage H1 doubles as a LinkedIn link - keep it reading as a
   heading, not a typical blue link, with just a hover cue. */
h1 a {
  color: inherit;
  text-decoration: none;
}

h1 a:hover { text-decoration: underline; }

.site-title { font-family: var(--font-heading); }

a { color: var(--accent); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
}

.card-list {
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.card-list li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}

.card-list h3 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.card-list p { margin: 0; color: var(--muted); }

/* Homepage "Featured work" cards - clickable image tiles linking
   straight through to a case study. Always full-width and stacked,
   on both mobile and desktop, rather than a multi-column grid. */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
}

@media (min-width: 700px) {
  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.more-case-studies {
  margin-top: 3.5rem;
}

/* Horizontally-scrolling carousel for "More case studies" - avoids
   an orphaned single card on its own row, which a wrapping grid
   can't guarantee with an odd number of items. */
.case-carousel {
  display: flex;
  gap: 1.25rem;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--accent) var(--border);
  scrollbar-width: thin;
}

.case-carousel .featured-card {
  flex: 0 0 260px;
  scroll-snap-align: start;
}

.case-carousel .featured-card-title {
  font-size: 1.2rem;
}

@media (min-width: 640px) {
  .case-carousel .featured-card {
    flex-basis: 280px;
  }
}

/* Centred call-to-action button under a featured-grid, e.g. "Read
   More Case Studies". */
.button-row {
  text-align: center;
  margin: 0 0 2.5rem;
}

.button {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  color: var(--accent);
  text-decoration: none;
  padding: 0.75rem 1.75rem;
  border: 1px solid var(--accent);
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}

.button:hover {
  background: var(--accent);
  color: #fff;
}

.featured-card {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 18px 36px -18px rgba(28, 28, 28, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.featured-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -18px rgba(28, 28, 28, 0.45);
}

.featured-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.featured-card-title {
  display: block;
  padding: 1.1rem 1.25rem 0.35rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  border-top: 3px solid var(--accent);
}

.featured-card-skills {
  display: block;
  padding: 0 1.25rem 1.1rem;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.7rem;
  color: var(--muted);
}

.featured-card-skills .eyebrow-label {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-right: 0.4em;
}

.placeholder-note {
  background: #fff6e8;
  border: 1px solid #eeddb8;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #6b4f1d;
  margin-bottom: 1.5rem;
}

/* Case study heading hierarchy: short H1 (name) + styled sub-heading (the angle) */
.case-subtitle {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--muted);
  margin: 0 0 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

/* Hero evidence placeholder - sits directly under the sub-heading */
.case-hero-placeholder {
  background: repeating-linear-gradient(
    45deg, #fff6e8, #fff6e8 10px, #fdf1de 10px, #fdf1de 20px
  );
  border: 1px dashed #d8b978;
  border-radius: 6px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: #6b4f1d;
  margin-bottom: 2rem;
}

/* Real hero image once a placeholder is swapped out */
.case-hero-image {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 24px 48px -24px rgba(28, 28, 28, 0.35);
  margin-bottom: 0.75rem;
}

/* Understated photo credit line - sits under a hero image without
   drawing attention to itself. */
.photo-credit {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--muted);
  text-align: right;
  margin: 0 0 2rem;
}

/* Small closing footnote - for a minor factual update at the end of
   a case study (e.g. a company's later status) without disrupting
   the main narrative. */
.case-footnote {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* Personal portrait on the About page - small and offset to one side
   rather than a big centred hero, so text can run alongside it. Drops
   the float on narrow screens where there isn't room for wrap. */
.about-portrait {
  display: block;
  width: 190px;
  max-width: 42%;
  float: right;
  shape-outside: margin-box;
  margin: 0.25rem 0 1.5rem 2rem;
  border-radius: 8px;
  box-shadow: 0 18px 36px -18px rgba(28, 28, 28, 0.35);
}

@media (max-width: 560px) {
  .about-portrait {
    float: none;
    width: 150px;
    max-width: 150px;
    margin: 0 auto 1.5rem;
  }
}

/* "What I Do" card grid - a more graphical treatment than a plain
   bullet list. Uses img-bleed alongside it to get extra width on
   desktop for a proper multi-column grid. */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  margin: 1.5rem 0 2.5rem;
}

@media (min-width: 700px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.skill-card {
  padding: 1.3rem 1.4rem;
  background: #fff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
}

.skill-card h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  color: var(--text);
}

.skill-card p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Client testimonial - sits below Key wins, above the Background
   keyline, on case studies where a quote is available. A quieter,
   card-style treatment (bordered box, no accent bookend) so it
   reads as evidence rather than a personal pull-quote. */
.case-testimonial {
  margin: 2rem 0 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

.case-testimonial blockquote {
  margin: 0 0 0.85rem;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
  color: var(--text);
  line-height: 1.5;
}

.case-testimonial cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Horizontally-scrolling testimonial carousel, e.g. on the homepage.
   Reuses .case-testimonial for each card, sized and snapped so
   longer quotes don't force every card to full page width. */
.testimonial-carousel {
  display: flex;
  gap: 1.25rem;
  margin: 1.5rem 0 2rem;
  padding-bottom: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--accent) var(--border);
  scrollbar-width: thin;
}

.testimonial-carousel .case-testimonial {
  flex: 0 0 90%;
  max-width: 420px;
  scroll-snap-align: start;
  margin: 0;
}

.testimonial-carousel .case-testimonial blockquote {
  font-size: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* "More ..." reveal for testimonial quotes longer than 6 lines -
   same checkbox-toggle pattern used for the mobile nav, so no
   JavaScript is needed. */
.testimonial-toggle { display: none; }

.testimonial-more {
  display: block;
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  margin: 0.5rem 0 0.85rem;
}

.testimonial-more:hover { text-decoration: underline; }

.testimonial-toggle:checked ~ blockquote {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.testimonial-toggle:checked ~ .testimonial-more {
  display: none;
}

.case-testimonial cite strong {
  color: var(--text);
  font-weight: 700;
}

/* "Words matter" pull-quote accent, used on the About page */
.pull-quote {
  margin: 2.5rem 0;
  padding: 0.25rem 0 0.25rem 1.5rem;
  border-left: 3px solid var(--accent);
}

.pull-quote .quote-label {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text);
  margin: 0 0 0.5rem;
}

.pull-quote blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.5;
}

.pull-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--muted);
}

/* Headline stat row - for case studies with clear before/after numbers */
.stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  margin: 1.5rem 0 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.stat-grid .stat { flex: 1 1 130px; }

.stat-grid .stat-number {
  display: block;
  font-family: var(--font-body);
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent);
  line-height: 1.1;
}

.stat-grid .stat-label {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--muted);
}

/* Plain copy-sample blockquote - for reproducing actual email/copy
   text as-written, distinct from the italic .pull-quote treatment
   used for personal quotes. */
.site-main > blockquote,
.sample-section > blockquote {
  margin: 1.5rem 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--border);
  color: var(--text);
}

.site-main > blockquote p,
.sample-section > blockquote p { margin: 0 0 0.75rem; }
.site-main > blockquote p:last-child,
.sample-section > blockquote p:last-child { margin-bottom: 0; }

/* Skills employed line - sits under the case-subtitle, ahead of the
   hero image. Both the label and the skills list stay uppercase for
   consistency with the eyebrow style elsewhere; colour is what
   differentiates the label from the list. */
.case-skills {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0 0 2rem;
}

/* Tighter gap when two case-skills lines stack directly (e.g.
   Objective followed by Call to action). */
.case-skills + .case-skills {
  margin-top: -1.5rem;
}

.case-skills .eyebrow-label {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  color: var(--accent);
  margin-right: 0.5em;
}

/* Individual copy sample - gives each email/piece within a multi-
   example section (e.g. Email copy on a copy-samples page) its own
   clear section feel: a category eyebrow, a title, then a divider
   above the next one. First one in a run has no top border/padding
   since it follows straight on from the intro text. */
.sample-section {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}

.sample-section:first-of-type {
  margin-top: 1.5rem;
  padding-top: 0;
  border-top: none;
}

.sample-section .eyebrow { margin: 0 0 0.35rem; }

.sample-section h3 {
  font-size: 1.2rem;
  margin: 0 0 1.25rem;
}

/* Comparison tables for outcomes with multiple data points */
.stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.stats-table th,
.stats-table td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--border);
}

.stats-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.stats-table td.stat-figure {
  font-weight: bold;
  color: var(--accent);
}

/* Supporting evidence gallery - stacked, full-width so screenshots stay legible */
.case-gallery {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2rem 0;
}

.case-gallery figure { margin: 0; }

.case-gallery img {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 20px 40px -22px rgba(28, 28, 28, 0.3);
}

/* A reproduced piece of written copy standing in for a screenshot
   within the gallery - same left-rule treatment as blockquotes
   elsewhere on the site. */
.case-gallery blockquote {
  margin: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--border);
  color: var(--text);
  font-size: 0.95rem;
}

.case-gallery blockquote p { margin: 0 0 0.85rem; }
.case-gallery blockquote p:last-child { margin-bottom: 0; }

/* "More ..." reveal for long reproduced copy - collapsed by default,
   styled as a plain text link rather than a default disclosure
   triangle. */
.case-gallery-more summary {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
  list-style: none;
  margin: 0.5rem 0 0.85rem;
}

.case-gallery-more summary::-webkit-details-marker { display: none; }

.case-gallery-more summary:hover { text-decoration: underline; }

.case-gallery-more[open] summary { margin-bottom: 0.85rem; }

.case-gallery-more p:last-of-type { margin-bottom: 0; }

.case-gallery figcaption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 0.85rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--accent);
}

/* Side-by-side pair for portrait/email-shaped graphics - deliberately
   NOT using img-bleed, since bleeding a tall portrait image out to
   breakout width would make it enormous height-wise. Sits at a
   sensible email-preview size instead. */
/* Side-by-side collection comparison panels - a boxed feature that
   sits under a hero image to spell out how two similar collections
   are differentiated. */
.collection-compare {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 1.5rem 0 2.5rem;
  overflow: hidden;
}

.collection-compare-panel {
  flex: 1 1 260px;
  padding: 1.5rem 1.75rem;
}

.collection-compare-panel:not(:first-child) {
  border-top: 1px solid var(--border);
}

@media (min-width: 700px) {
  .collection-compare-panel:not(:first-child) {
    border-top: none;
    border-left: 1px solid var(--border);
  }
}

.collection-compare-panel h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.75rem;
}

.collection-compare-panel p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}

.case-gallery-pair {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Inside a sample-section, the email graphic sits alongside the
   reproduced copy (a blockquote indented 1.25rem + its 3px rule) -
   indent the image the same amount so their left edges line up. */
.sample-section .case-gallery-pair {
  margin-left: calc(1.25rem + 3px);
}

.case-gallery-pair figure {
  flex: 1 1 240px;
  max-width: 360px;
  margin: 0;
}

.case-gallery-pair img {
  width: 100%;
  display: block;
  border-radius: 6px;
  box-shadow: 0 20px 40px -22px rgba(28, 28, 28, 0.3);
}

.case-gallery-pair figcaption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
  margin-top: 0.6rem;
}

/* Lets an image/gallery/placeholder run wider than the narrow text
   column on desktop, so screenshots read as full images rather than
   thumbnails squeezed into paragraph width. Safe on mobile - only
   activates once there's room either side to breathe.

   Note: elements with an explicit width (e.g. images set to 100%)
   need their width recalculated too, not just their margins -
   otherwise the negative margins just shove the box sideways instead
   of growing it. Plain block elements (like the placeholder boxes,
   which have no explicit width) expand correctly from the margins
   alone.

   This block is deliberately placed at the very end of the
   stylesheet: CSS resolves equal-specificity rules by source order,
   so keeping this last guarantees it always wins over earlier rules
   like ".case-gallery img { width: 100% }" without needing to bump
   up specificity artificially. */
@media (min-width: 900px) {
  .img-bleed {
    margin-left: -160px;
    margin-right: -160px;
  }

  img.img-bleed,
  .img-bleed img {
    width: calc(100% + 320px);
    max-width: calc(100% + 320px);
  }
}