/* =========================================================
   Chocolate Cake Media - site styles
   Colours, fonts and spacing are set once here in :root.
   Change a value here and it updates across every page.
   ========================================================= */

:root {
  --cyan: #5ef2ee;
  --coral: #ff6f5e;
  --lavender: #cdbdf9;
  --cream: #faf7f0;
  --ink: #141414;
  --white: #ffffff;
  --sticky: #f9ee9c;
  --grey: #5c5c5c;

  --font-head: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  --max: 1240px;
  --gutter: 24px;
  --radius: 999px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Colour themes for sections ---------- */
.theme-cyan     { background: var(--cyan); }
.theme-coral    { background: var(--coral); }
.theme-lavender { background: var(--lavender); }
.theme-cream    { background: var(--cream); }
.theme-dark     { background: var(--ink); color: var(--white); }

/* ---------- Header and navigation ---------- */
.site-header {
  padding: 28px 0;
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 40px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
}
.logo-img { height: 64px; width: auto; display: block; }
.footer-logo { height: 56px; width: auto; display: block; margin-bottom: 16px; }
.logo-text { font-family: var(--font-head); font-size: 22px; letter-spacing: -0.01em; }
.logo-text strong { display: block; font-weight: 900; }
.logo-text span { display: block; font-weight: 400; }

.main-nav { display: flex; gap: 32px; flex: 1; }
.main-nav a {
  text-decoration: none;
  font-size: 16px;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a.active { border-bottom-color: currentColor; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 28px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 17px;
  white-space: nowrap;
}
.btn-outline:hover { background: var(--ink); color: var(--white); border-color: var(--ink); }
.theme-dark .btn-outline:hover { background: var(--white); color: var(--ink); }

.nav-toggle { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  font-size: 19px;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-cyan { background: var(--cyan); color: var(--ink); }
.btn .arrow { font-size: 0.9em; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.theme-dark .eyebrow { color: var(--cyan); }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 0 0 20px;
}
h1 { font-size: clamp(48px, 7.4vw, 104px); }
h2 { font-size: clamp(38px, 5vw, 72px); }
h3 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.03em; }

.lead { font-size: clamp(19px, 1.8vw, 26px); line-height: 1.35; max-width: 34ch; margin: 0 0 32px; }
.small-print { font-size: 13px; letter-spacing: 0.08em; margin-top: 40px; }

.hand {
  font-family: var(--font-hand);
  font-size: 28px;
  line-height: 1.15;
}

/* ---------- Hero ---------- */
.hero { padding: 24px 0 72px; overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero-media { position: relative; }
.hero-media img { width: 100%; height: auto; border-radius: 6px; }
.hero-media.tilt img { transform: rotate(1.5deg); box-shadow: 0 20px 40px rgba(0,0,0,.25); }

/* Sticky notes placed over images */
.sticky {
  position: absolute;
  background: var(--sticky);
  color: var(--ink);
  font-family: var(--font-hand);
  font-size: 26px;
  line-height: 1.15;
  padding: 18px 20px;
  width: 170px;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  transform: rotate(-4deg);
}
.sticky.right { right: -10px; top: 10%; transform: rotate(5deg); }
.sticky.bottom { left: -20px; bottom: 8%; }

/* ---------- Generic sections ---------- */
.section { padding: 96px 0; }
.section-tight { padding: 40px 0; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* Client logo strip */
.logo-strip { display: flex; align-items: center; gap: 56px; flex-wrap: wrap; }
.logo-strip .label { font-size: 16px; }
.logo-strip .client { font-family: var(--font-head); font-weight: 900; font-size: 34px; letter-spacing: -0.03em; }

/* Underlined link list */
.link-list { display: flex; gap: 40px; flex-wrap: wrap; padding: 0; margin: 24px 0 0; list-style: none; }
.link-list a { text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 10px; display: inline-block; }

/* Numbered steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 48px; padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; gap: 22px; border-bottom: 1.5px solid var(--ink); padding-bottom: 16px; font-size: 20px; }
.steps .num {
  flex: none;
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--cyan);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 22px;
}

/* Sticky-note cards (after mock-ups #6 and Our work) */
.theme-cream { --section-bg: var(--cream); } .theme-lavender { --section-bg: var(--lavender); }
.theme-cyan { --section-bg: var(--cyan); } .theme-coral { --section-bg: var(--coral); } .theme-dark { --section-bg: var(--ink); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 40px; margin-top: 56px; padding: 0 10px; align-items: start; }
.cards.four { grid-template-columns: repeat(4, 1fr); gap: 40px 30px; }
.card {
  --rot: -2.5deg; position: relative; padding: 36px 30px 32px; color: var(--ink);
  transform: rotate(var(--rot)); transition: transform .2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 18px 30px -12px rgba(0,0,0,.35);
}
.cards > .card:nth-child(3n+2) { --rot: 2deg; margin-top: 28px; }
.cards > .card:nth-child(3n) { --rot: -1deg; margin-top: 10px; }
.cards.four > .card:nth-child(4n) { --rot: 2.5deg; margin-top: 22px; }
.card:hover { transform: rotate(0deg) translateY(-6px); z-index: 2; }
.card h3 { text-transform: none; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 14px; }
.card h3::after { content: ""; display: block; width: 84px; height: 11px; margin-top: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 C 30 3, 70 2, 117 6' fill='none' stroke='%23141414' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.card.dark h3::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 C 30 3, 70 2, 117 6' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.card p:last-child { margin-bottom: 0; }
.card ul { padding: 0; margin: 0; list-style: none; }
.card li { margin-bottom: 6px; }
.card .card-num { font-family: var(--font-hand); font-size: 40px; display: block; margin-bottom: 8px; }
.card.cyan { background: var(--cyan); }
.card.coral { background: var(--coral); }
.card.lavender { background: var(--lavender); }
.card.dark { background: var(--ink); color: var(--white); box-shadow: 0 18px 30px -12px rgba(0,0,0,.5); }
.card.cream { background: var(--cream); color: var(--ink); }
.card.yellow { background: var(--sticky); }
.card a { font-weight: 600; }
/* Folded corner on the middle note */
.cards > .card:nth-child(3n+2)::after {
  content: ""; position: absolute; top: 0; right: 0; width: 36px; height: 36px;
  background: linear-gradient(225deg, var(--section-bg, #faf7f0) 50%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.06));
  box-shadow: -3px 3px 6px rgba(0,0,0,.12);
}
/* Doodle sparks */
.cards > .card:nth-child(3n+1)::before, .cards > .card:nth-child(3n)::before {
  content: ""; position: absolute; width: 38px; height: 38px; top: -30px; left: -30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 20 L16 22 M12 6 L19 15 M26 3 L25 13' fill='none' stroke='%23141414' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.cards > .card:nth-child(3n)::before { left: auto; right: -32px; transform: scaleX(-1); }
.theme-dark .cards > .card::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 20 L16 22 M12 6 L19 15 M26 3 L25 13' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Icon outcomes row */
.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 40px; }
.outcome { display: flex; gap: 18px; padding: 0 24px; border-left: 1px solid #ddd; text-decoration: none; }
.outcome:first-child { border-left: 0; padding-left: 0; }
.outcome .icon { flex: none; width: 64px; height: 64px; border-radius: 50%; background: #ffd9d3; display: grid; place-items: center; font-size: 28px; }
.outcome h3 { font-size: 26px; margin-bottom: 6px; }
.outcome p { margin: 0; font-size: 16px; color: var(--grey); }

/* ---------- Video placeholders ----------
   Replace each .video-placeholder with your embed code.
   Example for Vimeo:
   <div class="video-frame"><iframe src="https://player.vimeo.com/video/VIDEO_ID" allow="autoplay; fullscreen" allowfullscreen></iframe></div>
*/
.video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: #2a2a2a center / cover no-repeat;
  color: var(--white);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 2px dashed rgba(255,255,255,.35);
}
.video-placeholder::before {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);
}
.video-placeholder .play {
  position: relative;
  width: 84px; height: 84px;
  border-radius: 50%;
  border: 3px solid var(--white);
  display: grid; place-items: center;
}
.video-placeholder .play::after {
  content: "";
  border-left: 24px solid var(--white);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  margin-left: 6px;
}
.video-placeholder .vp-label {
  position: absolute;
  left: 16px; top: 14px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  background: rgba(0,0,0,.55); padding: 6px 10px; border-radius: 4px;
}
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-caption { margin-top: 14px; }
.video-caption strong { display: block; font-family: var(--font-head); font-size: 24px; letter-spacing: -0.02em; }

.video-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-top: 40px; }
.video-grid .stack { display: grid; gap: 28px; }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
@media (max-width: 1100px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
.tape-label {
  display: inline-block;
  background: var(--cream); color: var(--ink);
  font-family: var(--font-hand); font-size: 26px;
  padding: 4px 16px; margin-top: 12px;
  transform: rotate(-1.5deg);
}

/* Filter buttons on Our work */
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.filters button {
  font: inherit; font-size: 15px;
  padding: 8px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--ink); background: transparent; cursor: pointer;
}
.filters button.active, .filters button:hover { background: var(--ink); color: var(--white); }

/* Tabs row (manufacturing) */
.tab-row { display: flex; gap: 0; margin-top: 48px; }
.tab-row div { padding: 0 32px; border-left: 1px solid #444; }
.tab-row div:first-child { padding-left: 0; border-left: 0; }
.tab-row .n { color: var(--cyan); font-family: var(--font-head); font-weight: 900; font-size: 24px; display: block; }
.tab-row .t { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom: 3px solid var(--cyan); padding-bottom: 8px; display: inline-block; }

/* Banner strip (torn tape) */
.banner {
  display: inline-block;
  background: var(--coral); color: var(--ink);
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(30px, 4vw, 56px); letter-spacing: -0.04em;
  padding: 16px 32px; transform: rotate(-2deg);
}

/* Team */
.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 40px; }
.team-member .photo {
  aspect-ratio: 4 / 5; background: #e6e1d6; border-radius: 8px;
  display: grid; place-items: center; color: var(--grey); font-size: 14px; text-align: center; padding: 12px;
  border: 2px dashed #bbb;
}
.team-member h3 { font-size: 26px; margin: 16px 0 4px; }
.team-member p { margin: 0; color: var(--grey); font-size: 16px; }

/* Towns */
.towns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 40px; }
.town { background: var(--white); padding: 28px; border-radius: 8px; }
.town h3 { font-size: 28px; }
.town p { margin: 0; font-size: 16px; }

/* Testimonial quote */
.quote { font-family: var(--font-head); font-weight: 700; font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 16px; }
.quote-by { color: var(--grey); }
.theme-dark .quote-by { color: #aaa; }

/* Calendly embed area */
.calendly-box {
  background: var(--white); color: var(--ink);
  border-radius: 10px; min-height: 320px;
  display: grid; place-items: center; text-align: center; padding: 32px;
  border: 2px dashed #bbb;
}

/* ---------- Closing call to action ---------- */
.cta-band { padding: 88px 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band h2 { margin-bottom: 12px; }
.cta-band .container > div:first-child { flex: 1 1 0; min-width: 0; }
.cta-band .cta-side { flex: 0 0 auto; }
@media (max-width: 900px) { .cta-band .container > div:first-child { flex: 1 1 100%; } .cta-band .cta-side { flex: 1 1 100%; max-width: none; } }
.cta-band p { margin: 0; font-size: 20px; max-width: 46ch; }
.cta-side { text-align: center; max-width: 420px; }
.cta-side .call-points { display: inline-block; text-align: left; margin-left: auto; margin-right: auto; }
.cta-side small { text-align: center !important; }
.cta-side small { display: block; margin-top: 12px; font-size: 15px; opacity: .85; }
.cta-alt, .cta-band .cta-alt { margin: 14px auto 0; font-size: 15px; line-height: 1.5; }
.cta-alt a[href^="tel:"] { white-space: nowrap; }
.cta-alt a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.cta-alt a:hover { color: var(--cyan); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #cfcfcf; padding: 56px 0 40px; font-size: 15px; }
.site-footer .container { display: grid; grid-template-columns: 1.5fr 1.15fr 1.15fr 0.8fr; gap: 0; }
/* Vertical keylines between footer columns */
.site-footer .container > div { padding: 0 32px; }
.site-footer .container > div:first-child { padding-left: 0; }
.site-footer .container > div:nth-child(4) { padding-right: 0; }
.site-footer .container > div + div { border-left: 1px solid #3a3a3a; }
/* Headings sit level with the logo */
.site-footer h4, .site-footer .footer-h { color: var(--white); font-family: var(--font-head); font-size: 16px; height: 56px; display: flex; align-items: center; margin: 0 0 16px; line-height: 1.2; letter-spacing: normal; text-transform: none; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--cyan); }
.footer-contact { font-style: normal; line-height: 1.7; margin: 16px 0; }
.socials { display: flex; gap: 12px; list-style: none; padding: 0; margin: 16px 0 0; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; transition: transform .15s ease, opacity .15s ease; }
.socials a:hover { transform: translateY(-2px); opacity: .9; }
.socials svg { width: 20px; height: 20px; fill: #ffffff; }
.socials img { display: block; width: 40px; height: 40px; }
.socials .social-linkedin { background: #0a66c2; }
.socials .social-instagram { background: #e1306c; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.socials .social-youtube { background: #ff0000; }
.site-footer .legal { grid-column: 1 / -1; border-top: 1px solid #3a3a3a; padding: 20px 0 0 !important; margin-top: 40px; font-size: 13px; border-left: 0 !important; }
.site-footer .legal p { margin: 0 0 6px; }
.site-footer .legal .company-no { color: #ffffff; font-size: 14px; margin: 0; }

/* ---------- Problem list (logistics) ---------- */
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 40px; }
.pain { border-top: 4px solid var(--coral); padding-top: 20px; }
.pain h3 { font-size: 26px; }
.pain p { margin: 0; color: var(--grey); }

/* Why-us list */
.why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.why-list li { padding-left: 34px; position: relative; }
.why-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); }

/* Four-step variant */
.steps.four { grid-template-columns: repeat(4, 1fr); }
.steps.four li { align-items: flex-start; font-size: 17px; }

/* FAQ */
.faq { margin-top: 32px; border-top: 1.5px solid var(--ink); }
.faq-item { border-bottom: 1.5px solid var(--ink); padding: 20px 0; }
.faq-item summary { cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; list-style: none; display: flex; justify-content: space-between; gap: 20px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 28px; line-height: 1; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin: 12px 0 0; max-width: 70ch; }

@media (max-width: 900px) {
  .pains, .steps.four, .post-grid { grid-template-columns: 1fr; }
  .map-frame { aspect-ratio: 4 / 3; }
  .cookie-notice { flex-direction: column; align-items: flex-start; }
}


/* ---------- Contact ---------- */
.contact-lines { font-size: 20px; line-height: 1.7; margin: 0; }
.contact-lines a { text-decoration: none; font-weight: 600; }
.enquiry-form { display: grid; gap: 16px; margin-top: 24px; }
.enquiry-form label { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.enquiry-form input, .enquiry-form select, .enquiry-form textarea {
  font: inherit; font-weight: 400; font-size: 17px; padding: 12px 14px;
  border: 1.5px solid var(--ink); border-radius: 8px; background: var(--white); color: var(--ink);
}
.enquiry-form input:focus, .enquiry-form select:focus, .enquiry-form textarea:focus { outline: 3px solid var(--cyan); outline-offset: 1px; }
.enquiry-form .btn { justify-self: start; border: 0; cursor: pointer; font: inherit; font-size: 19px; }
.form-note { font-size: 14px; color: var(--grey); margin: 0; }
.map-frame { position: relative; aspect-ratio: 16 / 7; border-radius: 10px; overflow: hidden; margin-top: 24px; background: #e6e1d6; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Legal and article pages ---------- */
.narrow { max-width: 780px; }
.legal-page h1, .post h1 { font-size: clamp(40px, 5vw, 64px); }
.legal-page h2, .post-body h2 { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.03em; margin: 40px 0 12px; }
.legal-page ul, .post-body ul, .post-body ol { padding-left: 22px; }
.legal-page li, .post-body li { margin-bottom: 8px; }
.eyebrow a { text-decoration: none; }

/* ---------- Blog ---------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.post-card { text-decoration: none; display: flex; flex-direction: column; gap: 8px; }
.post-thumb { aspect-ratio: 16 / 10; border-radius: 10px; background: #e6e1d6 center / cover no-repeat; margin-bottom: 8px; transition: transform .2s ease; }
.post-card:hover .post-thumb { transform: translateY(-3px); }
.post-card h3 { font-size: 24px; margin: 0; }
.post-card p { margin: 0; color: var(--grey); font-size: 16px; }
.post-tag { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.post-date { font-size: 14px; color: var(--grey); }
.post-hero { aspect-ratio: 16 / 8; border-radius: 10px; background: #e6e1d6 center / cover no-repeat; margin: 24px 0 32px; }
.post-body { font-size: 19px; line-height: 1.65; }
.post-body p { margin: 0 0 18px; }
.post-body a { font-weight: 600; }
.post-body .video-placeholder { margin: 32px 0; }
.post-body blockquote { margin: 32px 0; padding: 24px 28px; background: var(--lavender); border-radius: 10px; font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; }
.post-body blockquote span { display: block; margin-top: 12px; font-family: var(--font-body); font-weight: 400; font-size: 16px; letter-spacing: 0; }
.post-next { margin-top: 48px; padding-top: 20px; border-top: 1.5px solid var(--ink); }

/* Steps on dark backgrounds */
.steps.on-dark li { border-bottom-color: #444; }
.steps.on-dark .num { color: var(--ink); }

/* ---------- Cookie notice ---------- */
.cookie-notice {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50;
  max-width: 640px; margin: 0 auto; padding: 16px 20px;
  background: var(--ink); color: var(--white); border-radius: 12px;
  display: flex; gap: 16px; align-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.cookie-notice[hidden] { display: none; }
.cookie-notice p { margin: 0; font-size: 14px; }
.cookie-notice .btn { padding: 10px 22px; font-size: 15px; border: 0; cursor: pointer; flex: none; }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .site-header .container { flex-wrap: wrap; gap: 16px; }
  .nav-toggle { display: block; margin-left: auto; background: none; border: 1.5px solid currentColor; border-radius: 8px; padding: 6px 12px; font: inherit; color: inherit; }
  .main-nav { display: none; flex-basis: 100%; flex-direction: column; gap: 14px; order: 3; }
  .main-nav.open { display: flex; }
  .site-header .btn-outline { display: none; }
  .logo-img { height: 48px; }
  .hero-grid, .split, .video-grid, .work-grid { grid-template-columns: 1fr; }
  .cards, .cards.four, .steps, .towns { grid-template-columns: 1fr; }
  .cards > .card { margin-top: 0 !important; --rot: -1.2deg; }
  .cards > .card:nth-child(2n) { --rot: 1.2deg; }
  .cards > .card::before { display: none; }
  .outcomes { grid-template-columns: 1fr 1fr; gap: 28px; }
  .outcome { border-left: 0; padding: 0; }
  .team { grid-template-columns: 1fr 1fr; }
  .tab-row { flex-wrap: wrap; gap: 20px; }
  .tab-row div { border-left: 0; padding: 0; }
  .section { padding: 64px 0; }
  .sticky { display: none; }
  .site-footer .container { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .outcomes, .team { grid-template-columns: 1fr; }
  .btn { font-size: 17px; padding: 14px 24px; }
}

/* Mobile overrides for components defined above */
@media (max-width: 900px) {
  .post-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .map-frame { aspect-ratio: 4 / 3; }
  .cookie-notice { flex-direction: column; align-items: flex-start; }
  .post-body { font-size: 17px; }
}
@media (max-width: 560px) {
  .post-grid { grid-template-columns: 1fr; }
  .site-footer .container { grid-template-columns: 1fr; }
}

/* ---------- 404 page ---------- */
.e404 .hero-grid { align-items: center; }
.e404-actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.slate-wrap { position: relative; padding: 24px; }
.slate { max-width: 460px; margin: 0 auto; transform: rotate(-3deg); filter: drop-shadow(0 24px 40px rgba(0,0,0,.45)); }
.slate-sticks { position: relative; height: 58px; }
.slate-sticks span {
  position: absolute; left: 0; right: 0; height: 46px; border-radius: 6px 6px 0 0;
  background: repeating-linear-gradient(-45deg, #fff 0 26px, #141414 26px 52px);
  border: 3px solid #141414;
}
.slate-sticks span:first-child { top: 0; transform-origin: 8% 100%; transform: rotate(-12deg); animation: clap 3.2s ease-in-out infinite; }
.slate-sticks span:last-child { bottom: 0; }
@keyframes clap { 0%, 70%, 100% { transform: rotate(-12deg); } 78% { transform: rotate(0deg); } 84% { transform: rotate(-12deg); } }
.slate-board { background: #1d1d1d; color: #f2f2f2; border: 3px solid #141414; border-radius: 0 0 8px 8px; padding: 18px 20px 20px; font-family: var(--font-hand); }
.slate-row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid #3a3a3a; padding: 8px 0; font-size: 24px; }
.slate-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid #3a3a3a; }
.slate-grid div { padding: 10px 8px; border-left: 2px solid #3a3a3a; display: flex; flex-direction: column; }
.slate-grid div:first-child { border-left: 0; padding-left: 0; }
.slate .k { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #9a9a9a; }
.slate .v { color: #fff; }
.slate .v.big { font-size: 56px; line-height: 1; color: var(--cyan); }
.e404-note-a { left: 0; bottom: 4%; }
.e404-note-b { right: 0; top: 0; transform: rotate(6deg); background: var(--coral); }
.e404-card { text-decoration: none; transition: transform .15s ease; }
.e404-card:hover { transform: translateY(-4px); }
.e404-report { margin-top: 40px; }
.e404-report a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .slate-sticks span:first-child { animation: none; } }
@media (max-width: 900px) { .slate .v.big { font-size: 44px; } .slate-wrap { padding: 8px 0; } }

/* Footer on smaller screens: drop the keylines, stack neatly */
@media (max-width: 900px) {
  .site-footer .container { gap: 32px; }
  .site-footer .container > div { padding: 0; border-left: 0 !important; }
  .site-footer h4, .site-footer .footer-h { height: auto; margin-bottom: 12px; }
  .site-footer .legal { margin-top: 8px; }
}

/* ---------- How we work ---------- */
.glance { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; }
.glance a { display: flex; flex-direction: column; gap: 8px; text-decoration: none; padding: 14px 12px; border-top: 3px solid var(--cyan); font-size: 15px; line-height: 1.3; height: 100%; }
.glance a:hover { background: #222; }
.glance span { font-family: var(--font-head); font-weight: 900; font-size: 26px; color: var(--cyan); }
.process { display: grid; gap: 28px; margin-top: 40px; }
.process-step { background: var(--white); border-radius: 12px; padding: 32px; scroll-margin-top: 24px; }
.process-head { display: flex; gap: 24px; align-items: flex-start; }
.process-head h3 { font-size: clamp(26px, 2.6vw, 36px); margin-bottom: 8px; }
.process-head p { margin: 0; max-width: 60ch; }
.process-num { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-weight: 900; font-size: 24px; }
.process-num.cyan { background: var(--cyan); } .process-num.coral { background: var(--coral); } .process-num.lavender { background: var(--lavender); }
.process-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 24px 0 0 88px; }
.process-cols h4 { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 10px; }
.process-cols ul { margin: 0; padding-left: 18px; }
.process-cols li { margin-bottom: 6px; }
.process-next { margin: 24px 0 0 88px; padding: 14px 18px; background: var(--cream); border-left: 4px solid var(--ink); border-radius: 0 8px 8px 0; }
.process-next strong { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 4px; }
.pull-line { margin: 48px 0 0; font-family: var(--font-head); font-weight: 900; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; text-align: center; }
.mini-head { font-size: 22px; margin: 0 0 14px; }
.why-list + .mini-head { margin-top: 32px; }
.tools-line { margin-top: 40px; color: #cfcfcf; }
.steps-more { margin-top: 28px; }
@media (max-width: 900px) {
  .glance { grid-template-columns: repeat(2, 1fr); }
  .process-step { padding: 24px 20px; }
  .process-head { gap: 16px; }
  .process-num { width: 48px; height: 48px; font-size: 18px; }
  .process-cols { grid-template-columns: 1fr; gap: 16px; margin-left: 0; }
  .process-next { margin-left: 0; }
}

/* Testimonial block */
.testimonial { margin: 0; max-width: 980px; }
.testimonial .quote { margin: 0 0 24px; padding: 0; border: 0; font-size: clamp(22px, 2.3vw, 32px); }
.testimonial .quote-by { color: var(--ink); font-size: 16px; line-height: 1.5; }
.testimonial .quote-by strong { font-family: var(--font-head); font-size: 18px; }

/* ---------- Blog post template ---------- */
.post-hero-band .hero-grid { align-items: center; }
.post-title { font-size: clamp(40px, 5.6vw, 80px); }
.post-meta { font-size: 15px; letter-spacing: .04em; margin: 8px 0 0; opacity: .85; }
.post-hero-band .hero-media img { aspect-ratio: 4 / 3; object-fit: cover; }
.post-hero-band .sticky.right { top: auto; bottom: -14px; right: -6px; }
.post .narrow { padding-top: 8px; }
.post-body > p:first-child { font-size: 22px; line-height: 1.5; font-weight: 500; }
.post-body h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 48px; }
.post-body blockquote {
  background: var(--sticky); transform: rotate(-1deg);
  clip-path: polygon(0 3%, 8% 0, 22% 3%, 40% 0, 58% 3%, 76% 0, 92% 3%, 100% 0, 100% 97%, 88% 100%, 70% 97%, 50% 100%, 30% 97%, 12% 100%, 0 97%);
}
.post-back { margin-top: 48px; font-weight: 600; }
.post-back a { text-decoration: none; }
.post-related { text-decoration: none; display: flex; flex-direction: column; gap: 10px; min-height: 220px; transition: transform .15s ease; }
.post-related:hover { transform: translateY(-4px); }
.post-related h3 { text-transform: none; font-size: 26px; margin: 0; }
.post-related .post-date { color: inherit; opacity: .75; margin-top: auto; }
.testimonial-card { background: var(--cream); border-radius: 12px; padding: 32px 36px; margin: 32px 0 8px; max-width: none; border-left: 6px solid var(--ink); }
@media (max-width: 900px) { .testimonial-card { padding: 24px 20px; } }

/* ---------- Testimonial cards (sticky notes, after mock-up #6) ---------- */
.t-head { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.t-head h2 { margin: 0; }
.stamp {
  flex: none; font-family: var(--font-head); font-weight: 900; text-transform: uppercase;
  font-size: 18px; line-height: 1; letter-spacing: .02em; text-align: center;
  color: #e2483a; border: 3px solid #e2483a; border-radius: 6px; padding: 10px 14px;
  transform: rotate(-7deg); opacity: .9;
  -webkit-mask: repeating-linear-gradient(35deg, #000 0 6px, rgba(0,0,0,.75) 6px 8px);
          mask: repeating-linear-gradient(35deg, #000 0 6px, rgba(0,0,0,.75) 6px 8px);
}
.tgrid { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 56px 44px; margin-top: 72px; padding: 0 12px; }
.tgrid .tcard { flex: 0 1 360px; }
.tgrid-2 .tcard { flex-basis: 420px; }
.tgrid-1 .tcard { flex-basis: 600px; }

.tcard {
  --bg: var(--cyan); --rot: -3deg;
  position: relative; margin: 0; padding: 38px 32px 26px; background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; gap: 6px;
  transform: rotate(var(--rot)); transition: transform .2s ease;
  box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 18px 30px -12px rgba(0,0,0,.35);
}
.tcard:hover { transform: rotate(0deg) translateY(-6px); z-index: 2; }
.tc-cream { --bg: var(--cream); } .tc-white { --bg: var(--white); } .tc-yellow { --bg: var(--sticky); }
.tc-cyan { --bg: var(--cyan); } .tc-coral { --bg: var(--coral); } .tc-lavender { --bg: var(--lavender); }

/* Stagger: varied tilt and height, like notes stuck on a board */
.tgrid .tcard:nth-child(2) { --rot: 2.5deg; margin-top: 48px; }
.tgrid .tcard:nth-child(3) { --rot: -1.5deg; margin-top: 16px; }
.tgrid-1 .tcard { --rot: -2deg; }

/* Folded corner on every other note */
.tcard:nth-child(2n)::after {
  content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px;
  background: linear-gradient(225deg, var(--section-bg, #faf7f0) 50%, rgba(0,0,0,.18) 50%, rgba(0,0,0,.06));
  box-shadow: -3px 3px 6px rgba(0,0,0,.12);
}
.theme-lavender .tcard:nth-child(2n)::after { --section-bg: var(--lavender); }
.theme-dark .tcard:nth-child(2n)::after { --section-bg: var(--ink); }

/* Doodle spark marks */
.t-spark { position: absolute; width: 40px; height: 40px; top: -30px; left: -30px; color: var(--ink); }
.tcard:nth-child(2n) .t-spark { left: auto; right: -34px; top: -26px; transform: scaleX(-1); }
.tcard:nth-child(3n) .t-spark { top: auto; bottom: -30px; left: -28px; transform: scaleY(-1); }
.theme-dark .t-spark { color: var(--white); }

/* Handwritten project tag on a small yellow note */
.t-sticky {
  position: absolute; top: -20px; right: 22px; background: var(--sticky); color: var(--ink);
  font-family: var(--font-hand); font-size: 22px; line-height: 1; padding: 8px 14px 7px;
  transform: rotate(5deg); box-shadow: 0 6px 12px rgba(0,0,0,.18);
}
.tcard:nth-child(2n) .t-sticky { right: auto; left: 22px; transform: rotate(-5deg); }
.tc-yellow .t-sticky { background: var(--white); }

.t-pull {
  margin: 6px 0 0; font-family: var(--font-head); font-weight: 900; font-size: 30px;
  line-height: 1.04; letter-spacing: -0.035em;
}
.tgrid-1 .t-pull { font-size: clamp(30px, 3.4vw, 44px); }
.t-line { width: 92px; height: 12px; margin: 6px 0 10px; color: var(--ink); }
.tcard figcaption { display: flex; flex-direction: column; gap: 2px; }
.t-name { font-family: var(--font-hand); font-size: 30px; line-height: 1; }
.t-role { font-size: 13px; line-height: 1.4; opacity: .8; }
.stars { color: #f5a623; font-size: 20px; letter-spacing: 2px; }
.tc-coral .stars, .tc-cyan .stars, .tc-yellow .stars { color: var(--ink); }

/* Full review tucked away so the notes stay compact */
.t-more { margin-top: 14px; border-top: 2px dashed rgba(20,20,20,.25); padding-top: 10px; }
.t-more summary { cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; display: inline-flex; gap: 8px; align-items: center; }
.t-more summary::-webkit-details-marker { display: none; }
.t-more summary::after { content: "+"; font-family: var(--font-head); font-weight: 900; font-size: 18px; line-height: 1; transition: transform .2s ease; }
.t-more[open] summary::after { transform: rotate(45deg); }
.t-more blockquote { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }

/* Wall of kind words */
.twall { columns: 3 300px; column-gap: 48px; margin-top: 72px; padding: 0 12px; }
.twall .tcard { break-inside: avoid; margin: 0 0 64px; }
.twall .tcard:nth-child(4n+1) { --rot: -3deg; }
.twall .tcard:nth-child(4n+2) { --rot: 2.5deg; }
.twall .tcard:nth-child(4n+3) { --rot: -1.5deg; }
.twall .tcard:nth-child(4n) { --rot: 3.5deg; }

/* Chris Dolby feature card */
.testimonial-card { position: relative; border-left: 0; transform: rotate(-.6deg); box-shadow: 0 12px 24px rgba(0,0,0,.1); }
.testimonial-card::before { content: ""; position: absolute; top: -12px; left: 40px; width: 110px; height: 26px; background: rgba(255,255,255,.6); transform: rotate(-4deg); }

@media (max-width: 900px) {
  .tgrid { gap: 48px; }
  .tgrid .tcard { flex-basis: 100%; margin-top: 0 !important; }
  .tcard { padding: 34px 24px 22px; --rot: -1.5deg; }
  .tcard:nth-child(2n) { --rot: 1.5deg; }
  .t-pull, .tgrid-1 .t-pull { font-size: 25px; }
  .t-spark { display: none; }
  .stamp { font-size: 14px; padding: 8px 10px; }
  .t-head { flex-direction: column; align-items: flex-start; }
}


/* ---------- Logistics hero: bento grid (after "Work worth watching" mock-up) ---------- */
.lg-hero { padding: 32px 0 80px; }
.lg-top { display: flex; align-items: flex-start; gap: 48px; margin-bottom: 28px; }
.lg-top h1 { margin: 0 0 14px; font-size: clamp(44px, 5.6vw, 88px); line-height: .95; }
.lg-top .lead { margin: 0; max-width: 46ch; }
.lg-note {
  flex: none; margin: 0; font-family: var(--font-hand); color: var(--ink); line-height: 1.15;
  padding: 18px 22px 22px; box-shadow: 0 14px 24px -8px rgba(0,0,0,.45); position: relative;
}
.lg-note::after { content: ""; display: block; width: 70px; height: 10px; margin-top: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 C 30 3, 70 2, 117 6' fill='none' stroke='%23141414' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.lg-note-lav { background: var(--lavender); font-size: 34px; transform: rotate(-8deg); margin-top: 8px; }
.lg-note-yel { background: var(--sticky); font-size: 26px; position: absolute; right: 28px; bottom: -22px; transform: rotate(-8deg); }
.lg-note-lav::before, .lg-note-yel::before { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 22px;
  background: linear-gradient(225deg, var(--ink) 50%, rgba(0,0,0,.22) 50%); }

.lg-bento { display: grid; grid-template-columns: 1.45fr 1.12fr .86fr; grid-template-rows: minmax(300px, 1fr) minmax(330px, auto); gap: 14px; }
.lg-tile { position: relative; display: block; background: #222 center / cover no-repeat; color: var(--white); text-decoration: none; overflow: hidden; }
.lg-tile::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.65), rgba(0,0,0,0) 45%); }
.lg-tall { grid-row: 1 / span 2; min-height: 620px; }
.lg-wide { grid-column: 2 / span 2; }
.lg-cap { position: absolute; left: 22px; bottom: 20px; font-size: 18px; line-height: 1.3; }
.lg-cap strong { display: block; font-family: var(--font-head); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
.lg-play { position: absolute; right: 26px; bottom: 26px; width: 66px; height: 66px; border: 3px solid var(--white); border-radius: 50%; transition: transform .2s ease; }
.lg-play::after { content: ""; position: absolute; left: 25px; top: 19px; border-left: 20px solid var(--white); border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
.lg-tile:hover .lg-play { transform: scale(1.08); }
.lg-block { position: relative; padding: 28px 28px 32px; color: var(--ink); }
.lg-block h2 { margin: 0; font-size: clamp(34px, 3.6vw, 56px); line-height: .92; letter-spacing: -0.045em; }
.lg-coral h2 { max-width: 8.5ch; }
.lg-coral { background: var(--coral); }
.lg-cyan { background: var(--cyan); display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.lg-cyan h2 { max-width: 6ch; }
.lg-cyan .btn { align-self: flex-start; white-space: nowrap; font-size: 15px; padding: 14px 20px; }
.lg-spark { position: absolute; top: 40px; right: 18px; width: 64px; height: 64px; color: var(--ink); transform: rotate(10deg); }

@media (max-width: 900px) {
  .lg-top { flex-direction: column; gap: 20px; }
  .lg-note-lav { font-size: 26px; align-self: flex-end; margin-top: -8px; }
  .lg-bento { grid-template-columns: 1fr; grid-template-rows: none; }
  .lg-tall { grid-row: auto; min-height: 420px; }
  .lg-wide { grid-column: auto; min-height: 230px; }
  .lg-coral { padding-bottom: 70px; }
  .lg-block h2 { font-size: 40px; }
}
/* ---------- Torn-paper collage (after 'The right video' mock-up) ---------- */
.cl-t1 { clip-path: polygon(0.0% 0.7%, 3.6% 0.3%, 7.1% 1.4%, 10.7% 0.2%, 14.3% 1.2%, 17.9% 0.8%, 21.4% 0.1%, 25.0% 1.1%, 28.6% 0.1%, 32.1% 1.0%, 35.7% 0.2%, 39.3% 0.2%, 42.9% 0.9%, 46.4% 1.8%, 50.0% 0.3%, 53.6% 0.5%, 57.1% 1.4%, 60.7% 2.1%, 64.3% 1.3%, 67.9% 0.9%, 71.4% 2.1%, 75.0% 0.1%, 78.6% 1.9%, 82.1% 0.6%, 85.7% 0.3%, 89.3% 0.3%, 92.9% 0.7%, 96.4% 1.8%, 100.0% 0.4%, 99.3% 12.5%, 99.2% 25.0%, 99.6% 37.5%, 99.3% 50.0%, 99.9% 62.5%, 99.9% 75.0%, 99.8% 87.5%, 100.0% 98.5%, 96.4% 99.1%, 92.9% 99.3%, 89.3% 98.7%, 85.7% 99.0%, 82.1% 99.3%, 78.6% 98.3%, 75.0% 98.5%, 71.4% 99.5%, 67.9% 98.7%, 64.3% 98.8%, 60.7% 98.1%, 57.1% 98.4%, 53.6% 99.4%, 50.0% 97.8%, 46.4% 99.7%, 42.9% 99.1%, 39.3% 98.3%, 35.7% 99.7%, 32.1% 98.9%, 28.6% 99.9%, 25.0% 98.5%, 21.4% 98.3%, 17.9% 98.7%, 14.3% 98.1%, 10.7% 99.3%, 7.1% 98.5%, 3.6% 98.7%, 0.0% 98.7%, 0.5% 87.5%, 1.0% 75.0%, 1.1% 62.5%, 0.6% 50.0%, 0.8% 37.5%, 0.1% 25.0%, 0.8% 12.5%); }
.cl-t2 { clip-path: polygon(0.0% 2.1%, 4.5% 3.2%, 9.1% 2.6%, 13.6% 0.9%, 18.2% 1.2%, 22.7% 2.1%, 27.3% 0.1%, 31.8% 1.5%, 36.4% 0.5%, 40.9% 0.4%, 45.5% 0.2%, 50.0% 2.5%, 54.5% 0.4%, 59.1% 0.8%, 63.6% 1.3%, 68.2% 2.8%, 72.7% 0.3%, 77.3% 1.4%, 81.8% 1.8%, 86.4% 2.8%, 90.9% 2.6%, 95.5% 2.8%, 100.0% 0.9%, 99.5% 12.5%, 99.6% 25.0%, 98.9% 37.5%, 98.9% 50.0%, 99.8% 62.5%, 99.8% 75.0%, 99.7% 87.5%, 100.0% 99.3%, 95.5% 98.4%, 90.9% 98.1%, 86.4% 99.2%, 81.8% 100.0%, 77.3% 98.7%, 72.7% 98.8%, 68.2% 98.2%, 63.6% 97.0%, 59.1% 97.8%, 54.5% 98.4%, 50.0% 98.0%, 45.5% 97.8%, 40.9% 99.8%, 36.4% 97.1%, 31.8% 97.5%, 27.3% 97.2%, 22.7% 97.4%, 18.2% 98.7%, 13.6% 98.7%, 9.1% 99.7%, 4.5% 98.0%, 0.0% 99.8%, 0.1% 87.5%, 0.3% 75.0%, 0.2% 62.5%, 0.4% 50.0%, 0.1% 37.5%, 0.0% 25.0%, 0.2% 12.5%); }
.cl-t3 { clip-path: polygon(0.0% 0.2%, 3.6% 0.8%, 7.1% 0.1%, 10.7% 1.9%, 14.3% 1.4%, 17.9% 0.3%, 21.4% 0.6%, 25.0% 0.8%, 28.6% 0.8%, 32.1% 0.3%, 35.7% 1.9%, 39.3% 2.2%, 42.9% 1.0%, 46.4% 1.1%, 50.0% 0.2%, 53.6% 0.2%, 57.1% 0.8%, 60.7% 0.6%, 64.3% 1.8%, 67.9% 0.4%, 71.4% 0.1%, 75.0% 2.1%, 78.6% 1.2%, 82.1% 0.3%, 85.7% 1.2%, 89.3% 0.1%, 92.9% 1.2%, 96.4% 2.2%, 100.0% 1.9%, 99.2% 12.5%, 99.7% 25.0%, 99.6% 37.5%, 99.8% 50.0%, 99.1% 62.5%, 99.4% 75.0%, 99.1% 87.5%, 100.0% 99.3%, 96.4% 99.5%, 92.9% 98.2%, 89.3% 97.8%, 85.7% 98.1%, 82.1% 98.2%, 78.6% 98.2%, 75.0% 98.4%, 71.4% 99.5%, 67.9% 98.9%, 64.3% 99.2%, 60.7% 99.9%, 57.1% 99.9%, 53.6% 99.4%, 50.0% 99.4%, 46.4% 98.5%, 42.9% 97.9%, 39.3% 99.0%, 35.7% 97.9%, 32.1% 97.8%, 28.6% 97.9%, 25.0% 99.2%, 21.4% 99.5%, 17.9% 99.5%, 14.3% 99.6%, 10.7% 99.6%, 7.1% 98.6%, 3.6% 98.0%, 0.0% 98.2%, 0.6% 87.5%, 0.8% 75.0%, 1.0% 62.5%, 0.1% 50.0%, 0.8% 37.5%, 1.1% 25.0%, 0.9% 12.5%); }
.cl-t4 { clip-path: polygon(0.0% 1.7%, 4.5% 1.1%, 9.1% 0.4%, 13.6% 1.7%, 18.2% 0.7%, 22.7% 1.8%, 27.3% 2.1%, 31.8% 0.9%, 36.4% 0.9%, 40.9% 2.1%, 45.5% 1.6%, 50.0% 0.4%, 54.5% 0.3%, 59.1% 0.3%, 63.6% 2.0%, 68.2% 1.8%, 72.7% 0.3%, 77.3% 1.8%, 81.8% 2.2%, 86.4% 1.4%, 90.9% 0.8%, 95.5% 1.2%, 100.0% 0.3%, 100.0% 12.5%, 98.8% 25.0%, 99.2% 37.5%, 99.4% 50.0%, 98.9% 62.5%, 99.5% 75.0%, 99.0% 87.5%, 100.0% 98.2%, 95.5% 99.5%, 90.9% 99.4%, 86.4% 99.4%, 81.8% 99.5%, 77.3% 98.7%, 72.7% 99.4%, 68.2% 99.1%, 63.6% 99.7%, 59.1% 98.0%, 54.5% 99.2%, 50.0% 99.0%, 45.5% 98.7%, 40.9% 98.0%, 36.4% 99.1%, 31.8% 98.0%, 27.3% 98.9%, 22.7% 98.8%, 18.2% 98.8%, 13.6% 100.0%, 9.1% 99.0%, 4.5% 99.6%, 0.0% 100.0%, 1.0% 87.5%, 0.2% 75.0%, 0.6% 62.5%, 0.9% 50.0%, 0.7% 37.5%, 0.4% 25.0%, 0.6% 12.5%); }
.cl-strip-paper { clip-path: polygon(0.0% 7.8%, 3.3% 11.0%, 6.7% 1.5%, 10.0% 7.8%, 13.3% 3.5%, 16.7% 3.9%, 20.0% 10.8%, 23.3% 7.1%, 26.7% 7.9%, 30.0% 10.6%, 33.3% 12.8%, 36.7% 6.2%, 40.0% 8.6%, 43.3% 7.1%, 46.7% 7.2%, 50.0% 9.7%, 53.3% 6.3%, 56.7% 7.5%, 60.0% 6.7%, 63.3% 13.2%, 66.7% 9.8%, 70.0% 12.3%, 73.3% 13.2%, 76.7% 3.6%, 80.0% 7.8%, 83.3% 13.2%, 86.7% 11.8%, 90.0% 1.9%, 93.3% 1.7%, 96.7% 6.2%, 100.0% 1.0%, 100.0% 96.6%, 96.7% 99.0%, 93.3% 90.6%, 90.0% 89.0%, 86.7% 87.4%, 83.3% 97.8%, 80.0% 90.0%, 76.7% 90.8%, 73.3% 98.0%, 70.0% 87.6%, 66.7% 86.5%, 63.3% 96.9%, 60.0% 86.7%, 56.7% 94.4%, 53.3% 93.2%, 50.0% 86.1%, 46.7% 88.3%, 43.3% 97.7%, 40.0% 94.0%, 36.7% 92.8%, 33.3% 95.3%, 30.0% 97.3%, 26.7% 95.5%, 23.3% 89.9%, 20.0% 99.7%, 16.7% 92.2%, 13.3% 93.8%, 10.0% 99.7%, 6.7% 95.4%, 3.3% 91.3%, 0.0% 92.8%); }
.collage { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); gap: 0 18px; margin-top: 64px; padding: 10px 0 40px; }
.cl-piece { position: relative; filter: drop-shadow(0 16px 18px rgba(0,0,0,.22)); transition: transform .2s ease; }
.cl-piece:hover { transform: rotate(0deg) translateY(-4px) !important; z-index: 5; }
.cl-paper { position: relative; padding: 46px 44px 48px; color: var(--ink); height: 100%; box-sizing: border-box; }
.cl-paper.cyan { background: var(--cyan); } .cl-paper.coral { background: var(--coral); }
.cl-paper.lavender { background: var(--lavender); } .cl-paper.yellow { background: var(--sticky); }
.cl-paper.dark { background: var(--ink); color: var(--white); }
.cl-paper h3 { margin: 0 0 14px; font-family: var(--font-head); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.3vw, 52px); line-height: .9; letter-spacing: -0.04em; }
.cl-paper p { margin: 0; font-size: 18px; line-height: 1.45; max-width: 34ch; }
.cl-paper .cl-tags { font-size: 19px; margin-bottom: 10px; opacity: .95; }
/* Circled handwritten number */
.cl-num { position: relative; display: inline-block; font-family: var(--font-hand); font-size: 46px; line-height: 1; padding: 10px 18px 12px; margin: 0 0 18px -6px; }
.cl-num::before { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 70' preserveAspectRatio='none'%3E%3Cpath d='M58 6 C 20 2, 4 22, 8 40 C 12 62, 60 68, 84 52 C 100 40, 96 12, 64 7 C 52 5, 40 8, 34 11' fill='none' stroke='%23141414' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.cl-num::after { content: ""; position: absolute; left: 4px; bottom: -12px; width: 80px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 C 30 3, 70 2, 117 6' fill='none' stroke='%23141414' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.cl-paper.dark .cl-num::before { filter: invert(1); } .cl-paper.dark .cl-num::after { filter: invert(1); }
/* Wide pieces sit number-left, text-right */
.cl-p2 .cl-paper, .cl-p3 .cl-paper { display: flex; gap: 28px; align-items: flex-start; }
.cl-p2 .cl-num, .cl-p3 .cl-num { flex: none; margin-top: -4px; }
/* Placement */
.cl-p1 { grid-column: 1 / 6; grid-row: 1 / 3; transform: rotate(-2.5deg); margin-top: 30px; z-index: 2; }
.cl-p2 { grid-column: 6 / 13; grid-row: 1; transform: rotate(1.2deg); z-index: 1; }
.cl-strip { grid-column: 6 / 12; grid-row: 2; margin: -26px 0 -22px 30px; transform: rotate(-2deg); z-index: 4; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); align-self: start; }
.cl-strip-paper { margin: 0; background: #efe9dc; font-family: var(--font-hand); font-size: 36px; line-height: 1; padding: 22px 40px 24px; text-align: center; color: var(--ink); }
.cl-p3 { grid-column: 6 / 13; grid-row: 3; transform: rotate(-1deg); margin-top: 10px; z-index: 2; }
.cl-p4 { grid-column: 1 / 6; grid-row: 3 / 5; transform: rotate(2deg); margin: 70px 10px 0 30px; z-index: 3; }
.cl-stamp { position: absolute; right: 12%; bottom: 40px; font-size: 30px; padding: 14px 22px; transform: rotate(-9deg); z-index: 6; }
/* Hand-drawn arrows */
.cl-arrow { position: absolute; width: 150px; height: 84px; color: var(--ink); z-index: 6; pointer-events: none; }
.cl-a1 { left: 32%; top: 10px; }
.cl-a2 { right: -26px; top: 41%; transform: rotate(8deg); }
.cl-a3 { left: 40%; bottom: 150px; }
.theme-dark .cl-arrow { color: var(--white); }
@media (max-width: 900px) {
  .collage { display: flex; flex-direction: column; gap: 26px; }
  .cl-piece, .cl-strip { margin: 0 !important; }
  .cl-p1 { transform: rotate(-1.5deg); } .cl-p2 { transform: rotate(1deg); } .cl-p3 { transform: rotate(-1deg); } .cl-p4 { transform: rotate(1.2deg); }
  .cl-strip { order: 5; align-self: center; }
  .cl-p2 .cl-paper, .cl-p3 .cl-paper { display: block; }
  .cl-paper { padding: 34px 28px 36px; }
  .cl-arrow { display: none; }
  .cl-stamp { position: static; align-self: flex-end; order: 6; font-size: 22px; }
}

/* ---------- Logistics experience: film gallery (after "Hear it from the people" + About mock-ups) ---------- */
.ex-grid { position: relative; display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto auto; gap: 34px 40px; margin-top: 70px; }
.ex-tile { position: relative; display: block; color: var(--ink); text-decoration: none; filter: drop-shadow(0 18px 22px rgba(0,0,0,.4)); transition: transform .2s ease; }
.ex-tile:hover { transform: translateY(-5px) rotate(0deg) !important; z-index: 5; }
.ex-img { position: relative; display: block; background: #222 center / cover no-repeat; aspect-ratio: 16 / 10; }
.ex-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.35), transparent 50%); }
.ex-tile .lg-play { right: 50%; bottom: 50%; transform: translate(50%, 50%); }
.ex-tile:hover .lg-play { transform: translate(50%, 50%) scale(1.08); }
/* Polaroid big tile */
.ex-big { grid-column: 1; grid-row: 1 / span 2; transform: rotate(-2deg); align-self: start; }
.ex-polaroid { background: #fbfaf6; padding: 18px 18px 92px; }
.ex-polaroid .ex-img { aspect-ratio: 4 / 3.2; }
.ex-tape { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-3deg); z-index: 3; background: var(--cyan); padding: 10px 22px; font-family: "Courier New", ui-monospace, monospace; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0,0,0,.18); }
.ex-hand { position: absolute; left: 26px; bottom: 26px; font-family: var(--font-hand); font-size: 28px; line-height: 1.1; max-width: 46%; }
.ex-hand::after { content: ""; display: block; width: 180px; height: 10px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 C 30 3, 70 2, 117 6' fill='none' stroke='%23141414' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.ex-torn { position: absolute; right: -34px; bottom: 34px; z-index: 4; transform: rotate(-4deg); filter: drop-shadow(0 8px 10px rgba(0,0,0,.25)); }
.ex-torn .cl-strip-paper { background: var(--coral); font-family: var(--font-head); font-weight: 900; font-size: clamp(26px, 2.6vw, 40px); letter-spacing: -0.04em; padding: 22px 34px 26px; }
/* Smaller torn tiles with cream caption strips */
.ex-s1 { grid-column: 2; grid-row: 1; transform: rotate(1.5deg); margin-top: 40px; }
.ex-s2 { grid-column: 2; grid-row: 2; transform: rotate(-1deg); }
.ex-cap { position: absolute; left: -14px; bottom: -22px; z-index: 3; display: block; max-width: 88%; background: #efe9dc; padding: 12px 20px 14px; transform: rotate(-2deg); clip-path: polygon(0 6%, 8% 0, 22% 5%, 38% 1%, 55% 6%, 72% 0, 88% 5%, 100% 2%, 99% 50%, 100% 96%, 85% 100%, 66% 95%, 48% 100%, 30% 95%, 14% 100%, 0 96%, 1% 50%); }
.ex-who { display: block; margin: 0; font-family: var(--font-hand); font-size: 27px; line-height: 1.05; }
.ex-line { display: block; margin: 4px 0 0; font-size: 14px; line-height: 1.4; }
/* Logic Ticks result strip */
.ex-strip { grid-column: 1 / -1; grid-row: 3; margin-top: 24px; transform: rotate(-.8deg); filter: drop-shadow(0 16px 20px rgba(0,0,0,.35)); }
.ex-strip-paper { background: var(--sticky); color: var(--ink); padding: 34px 48px 40px; }
.ex-strip-paper .ex-who { font-size: 30px; margin-bottom: 8px; }
.ex-big-line { margin: 0; font-family: var(--font-head); font-weight: 900; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 52px); line-height: .92; letter-spacing: -0.04em; }
.ex-strip-paper .ex-line { font-size: 17px; }
/* Doodles */
.ex-label { position: absolute; top: -118px; right: 4%; z-index: 4; margin: 0; background: var(--cyan); color: var(--ink); font-family: var(--font-hand); font-size: 34px; line-height: 1.05; padding: 16px 26px 20px; transform: rotate(4deg); clip-path: polygon(0 4%, 12% 0, 30% 5%, 52% 0, 74% 4%, 100% 0, 98% 52%, 100% 100%, 76% 96%, 50% 100%, 26% 95%, 0 100%, 2% 50%); }
.ex-arrow { position: absolute; top: -50px; right: 26%; width: 150px; height: 84px; color: var(--white); z-index: 6; }
.ex-stamp { position: absolute; right: 36px; bottom: -26px; z-index: 6; font-size: 24px; transform: rotate(-8deg); background: var(--ink); }
@media (max-width: 1100px) { .ex-label { display: none; } .ex-arrow { display: none; } }
@media (max-width: 900px) {
  .ex-grid { display: flex; flex-direction: column; gap: 48px; }
  .ex-big, .ex-s1, .ex-s2, .ex-strip { transform: none; margin: 0; }
  .ex-big { transform: rotate(-1deg); align-self: stretch; }
  .ex-tile { align-self: stretch; }
  .ex-polaroid { padding-bottom: 110px; }
  .ex-torn { bottom: auto; top: 58%; }
  .ex-polaroid { padding-bottom: 70px; }
  .ex-hand { max-width: 90%; font-size: 22px; bottom: 18px; }
  .ex-big.ex-polaroid { padding-bottom: 90px; }
  .ex-tape { white-space: nowrap; font-size: 14px; }
  .ex-cap { position: relative; left: -8px; bottom: auto; margin-top: -24px; }
  .ex-torn { right: -6px; bottom: 50px; }
  .ex-hand { font-size: 20px; max-width: 70%; }
  .ex-strip-paper { display: block; padding: 28px 26px 30px; }
  .ex-stamp { display: none; }
}

/* ---------- Real torn-paper graphics (supplied PNGs, saved as WebP in images/paper) ----------
   Each piece uses border-image, so the torn edges stay sharp at any size.
   To swap a colour, change the url; keep the slice numbers for that shape (1 to 6). */
.cl-t1, .cl-t2, .cl-t3, .cl-t4, .cl-strip-paper, .ex-torn .cl-strip-paper, .ex-cap, .ex-label, .ex-strip-paper, .post-body blockquote {
  clip-path: none; background: none !important; border-style: solid; border-color: transparent;
}
/* Shape 1: long strip */
.cl-t3, .ex-cap, .ex-label, .post-body blockquote { border-width: 25px 15px 36px 38px; border-image-slice: 62 38 90 96 fill; border-image-repeat: stretch; }
/* Shape 2: chunky rounded piece */
.cl-t1, .cl-t4 { border-width: 40px 70px 44px 70px; border-image-slice: 104 201 115 200 fill; border-image-repeat: stretch; }
/* Shape 3: long angled strip */
.cl-t2, .ex-torn .cl-strip-paper, .ex-strip-paper { border-width: 34px 70px 40px 24px; border-image-slice: 91 200 105 65 fill; border-image-repeat: stretch; }
/* Shape 6: curled strip with shadow */
.cl-strip-paper { border-width: 22px 50px 50px 34px; border-image-slice: 62 145 140 95 fill; border-image-repeat: stretch; }

.cl-t1 { border-image-source: url(../images/paper/turquoise-2.webp); }
.cl-t2 { border-image-source: url(../images/paper/charcoal-3.webp); }
.cl-t3 { border-image-source: url(../images/paper/lavender-1.webp); }
.cl-t4 { border-image-source: url(../images/paper/white-2.webp); }
.cl-strip-paper { border-image-source: url(../images/paper/white-6.webp); }
.ex-torn .cl-strip-paper { border-image-source: url(../images/paper/coral-3.webp); border-image-slice: 91 200 105 65 fill; border-width: 30px 64px 36px 22px; }
.ex-cap { border-image-source: url(../images/paper/white-1.webp); }
.ex-label { border-image-source: url(../images/paper/turquoise-1.webp); }
.ex-strip-paper { border-image-source: url(../images/paper/white-3.webp); }
.post-body blockquote { border-image-source: url(../images/paper/white-1.webp); }

/* Inner spacing now that the paper edge takes up the border */
.cl-paper { padding: 16px 6px 18px 14px; }
.cl-strip-paper { padding: 4px 12px 0; }
.ex-torn .cl-strip-paper { padding: 0 0 2px 10px; }
.ex-cap { padding: 0 8px 0 0; }
.ex-label { padding: 0 10px 0 0; }
.ex-strip-paper { padding: 4px 0 4px 26px; }
.post-body blockquote { padding: 6px 10px 6px 4px; }
/* The PNGs carry their own soft shadow, so lighten the CSS one */
.cl-piece { filter: drop-shadow(0 8px 10px rgba(0,0,0,.12)); }
.ex-strip, .ex-torn { filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
@media (max-width: 900px) {
  .cl-paper { padding: 10px 0 12px 6px; }
  .cl-t1, .cl-t4 { border-width: 30px 44px 34px 44px; }
}

.ex-rip2 { clip-path: polygon(0.0% 2.1%, 4.5% 3.2%, 9.1% 2.6%, 13.6% 0.9%, 18.2% 1.2%, 22.7% 2.1%, 27.3% 0.1%, 31.8% 1.5%, 36.4% 0.5%, 40.9% 0.4%, 45.5% 0.2%, 50.0% 2.5%, 54.5% 0.4%, 59.1% 0.8%, 63.6% 1.3%, 68.2% 2.8%, 72.7% 0.3%, 77.3% 1.4%, 81.8% 1.8%, 86.4% 2.8%, 90.9% 2.6%, 95.5% 2.8%, 100.0% 0.9%, 99.5% 12.5%, 99.6% 25.0%, 98.9% 37.5%, 98.9% 50.0%, 99.8% 62.5%, 99.8% 75.0%, 99.7% 87.5%, 100.0% 99.3%, 95.5% 98.4%, 90.9% 98.1%, 86.4% 99.2%, 81.8% 100.0%, 77.3% 98.7%, 72.7% 98.8%, 68.2% 98.2%, 63.6% 97.0%, 59.1% 97.8%, 54.5% 98.4%, 50.0% 98.0%, 45.5% 97.8%, 40.9% 99.8%, 36.4% 97.1%, 31.8% 97.5%, 27.3% 97.2%, 22.7% 97.4%, 18.2% 98.7%, 13.6% 98.7%, 9.1% 99.7%, 4.5% 98.0%, 0.0% 99.8%, 0.1% 87.5%, 0.3% 75.0%, 0.2% 62.5%, 0.4% 50.0%, 0.1% 37.5%, 0.0% 25.0%, 0.2% 12.5%); }
.ex-rip3 { clip-path: polygon(0.0% 0.2%, 3.6% 0.8%, 7.1% 0.1%, 10.7% 1.9%, 14.3% 1.4%, 17.9% 0.3%, 21.4% 0.6%, 25.0% 0.8%, 28.6% 0.8%, 32.1% 0.3%, 35.7% 1.9%, 39.3% 2.2%, 42.9% 1.0%, 46.4% 1.1%, 50.0% 0.2%, 53.6% 0.2%, 57.1% 0.8%, 60.7% 0.6%, 64.3% 1.8%, 67.9% 0.4%, 71.4% 0.1%, 75.0% 2.1%, 78.6% 1.2%, 82.1% 0.3%, 85.7% 1.2%, 89.3% 0.1%, 92.9% 1.2%, 96.4% 2.2%, 100.0% 1.9%, 99.2% 12.5%, 99.7% 25.0%, 99.6% 37.5%, 99.8% 50.0%, 99.1% 62.5%, 99.4% 75.0%, 99.1% 87.5%, 100.0% 99.3%, 96.4% 99.5%, 92.9% 98.2%, 89.3% 97.8%, 85.7% 98.1%, 82.1% 98.2%, 78.6% 98.2%, 75.0% 98.4%, 71.4% 99.5%, 67.9% 98.9%, 64.3% 99.2%, 60.7% 99.9%, 57.1% 99.9%, 53.6% 99.4%, 50.0% 99.4%, 46.4% 98.5%, 42.9% 97.9%, 39.3% 99.0%, 35.7% 97.9%, 32.1% 97.8%, 28.6% 97.9%, 25.0% 99.2%, 21.4% 99.5%, 17.9% 99.5%, 14.3% 99.6%, 10.7% 99.6%, 7.1% 98.6%, 3.6% 98.0%, 0.0% 98.2%, 0.6% 87.5%, 0.8% 75.0%, 1.0% 62.5%, 0.1% 50.0%, 0.8% 37.5%, 1.1% 25.0%, 0.9% 12.5%); }

/* ---------- Torn-paper labels used across the site (.rip) ----------
   Markup: <span class="rip rip-COLOUR rip-sSHAPE rip-POSITION rip-STYLE">Words</span>
   COLOUR: coral, turquoise, lavender, white, charcoal   SHAPE: 1 or 3
   POSITION: band (runs off both sides of the image), bl, tr, inline   STYLE: bold or hand */
.hero-media, .rip-wrap { position: relative; }
.rip {
  position: absolute; z-index: 5; display: block; box-sizing: border-box;
  border-style: solid; border-color: transparent; border-image-repeat: stretch;
  color: var(--ink); white-space: nowrap; filter: drop-shadow(0 8px 10px rgba(0,0,0,.2));
}
.rip-s1 { border-width: 25px 15px 36px 38px; border-image-slice: 62 38 90 96 fill; }
.rip-s3 { border-width: 34px 70px 40px 24px; border-image-slice: 91 200 105 65 fill; }
.rip-coral.rip-s1 { border-image-source: url(../images/paper/coral-1.webp); }
.rip-coral.rip-s3 { border-image-source: url(../images/paper/coral-3.webp); }
.rip-turquoise.rip-s1 { border-image-source: url(../images/paper/turquoise-1.webp); }
.rip-turquoise.rip-s3 { border-image-source: url(../images/paper/turquoise-3.webp); }
.rip-lavender.rip-s1 { border-image-source: url(../images/paper/lavender-1.webp); }
.rip-lavender.rip-s3 { border-image-source: url(../images/paper/lavender-3.webp); }
.rip-white.rip-s1 { border-image-source: url(../images/paper/white-1.webp); }
.rip-white.rip-s3 { border-image-source: url(../images/paper/white-3.webp); }
.rip-charcoal.rip-s1 { border-image-source: url(../images/paper/charcoal-1.webp); }
.rip-charcoal.rip-s3 { border-image-source: url(../images/paper/charcoal-3.webp); }
.rip-charcoal { color: var(--white); }
.rip-bold { font-family: var(--font-head); font-weight: 900; font-size: clamp(24px, 2.7vw, 42px); line-height: 1; letter-spacing: -0.04em; padding: 0 4px 4px 14px; }
.rip-hand { font-family: var(--font-hand); font-size: clamp(22px, 2.1vw, 32px); line-height: 1.05; padding: 0 8px 0 2px; }
.rip-band { left: -8%; right: -8%; bottom: 7%; text-align: center; white-space: normal; transform: rotate(-3deg); }
.rip-bl { left: -7%; bottom: 8%; transform: rotate(-4deg); }
.rip-tr { right: -7%; top: 7%; transform: rotate(4deg); }
.rip-inline { position: relative; display: inline-block; margin: 22px 0 6px -12px; transform: rotate(-2deg); }
.hero-media .ex-tape { top: -16px; }
.section, .hero { overflow-x: clip; }

/* Like-for-like swaps: earlier drawn paper now uses the real graphics */
.tape-label {
  background: none; border-style: solid; border-color: transparent;
  border-width: 18px 11px 26px 28px; border-image: url(../images/paper/white-1.webp) 62 38 90 96 fill / 18px 11px 26px 28px stretch;
  padding: 0 6px 0 2px; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18));
}
.banner {
  background: none; border-style: solid; border-color: transparent;
  border-width: 34px 70px 40px 24px; border-image: url(../images/paper/coral-3.webp) 91 200 105 65 fill / 34px 70px 40px 24px stretch;
  padding: 0 4px 6px 18px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.2));
}
@media (max-width: 900px) {
  .rip-band { left: -3%; right: -3%; }
  .rip-bl { left: -3%; } .rip-tr { right: -3%; }
  .rip-bold { font-size: 24px; } .rip-hand { font-size: 22px; }
}
.rip-ml { left: -7%; top: 46%; transform: rotate(-3deg); }
.hero-media .ex-tape { white-space: nowrap; }
@media (max-width: 900px) { .rip-ml { left: -3%; } }

/* ---------- Photo headers (full-bleed header graphics) ----------
   The header image fills the right of the hero and fades into the page colour.
   Swap the <img> in .hero-media to change it; set --obj on the section to move the focus. */
.hero-photo { position: relative; padding: 0; overflow: hidden; }
.hero-photo .hero-grid { position: static; display: flex; align-items: center; min-height: clamp(540px, 42vw, 700px); padding-top: 48px; padding-bottom: 72px; }
.hero-photo .hero-grid > div:first-child { position: relative; z-index: 3; max-width: 540px; }
.hero-photo .hero-media { position: absolute; top: 0; bottom: 0; right: 0; left: var(--left, 34%); z-index: 1; margin: 0; }
@media (max-width: 1200px) and (min-width: 901px) { .hero-photo .hero-media { left: 48%; } .hero-photo .hero-grid > div:first-child { max-width: 45%; } .hero-photo h1 { font-size: clamp(40px, 4.6vw, 60px); } }
.hero-photo .hero-media img, .hero-photo .hero-media.tilt img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--obj, right center);
  transform: none; box-shadow: none; border-radius: 0; aspect-ratio: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 60px);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 60px);
          mask-composite: intersect;
}
.hero-photo .hero-media .rip { left: auto; right: 6%; top: auto; bottom: 11%; }
.hero-photo .hero-media .rip-band { width: auto; max-width: 70%; }
.hero-photo .hero-media .sticky { z-index: 4; }
@media (max-width: 900px) {
  .hero-photo .hero-grid { display: block; min-height: 0; padding-top: 32px; padding-bottom: 0; }
  .hero-photo .hero-grid > div:first-child { max-width: none; }
  .hero-photo .hero-media { position: relative; left: auto; margin: 28px -16px 0; height: 66vw; }
  .hero-photo .hero-media img, .hero-photo .hero-media.tilt img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 40px); mask-image: linear-gradient(to bottom, transparent 0, #000 40px);
  }
  .hero-photo .hero-media .rip { right: 4%; bottom: 8%; max-width: none; white-space: nowrap; font-size: 20px; }
  .hero-photo .hero-media img, .hero-photo .hero-media.tilt img { object-position: var(--obj-m, var(--obj, right center)); }
}
.hero-photo .hero-media .rip-band { white-space: nowrap; }

/* East Midlands: whole picture visible, text above the notebook */
.hero-full .hero-media { left: 0; }
.hero-full .hero-media img {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 60px); mask-image: linear-gradient(to bottom, transparent 0, #000 60px);
  -webkit-mask-composite: source-over; mask-composite: add;
}
.hero-full .hero-grid { align-items: flex-start; min-height: min(66.67vw, 820px); padding-top: 40px; }
.hero-full .hero-grid > div:first-child { max-width: 640px; }
.hero-full h1 { font-size: clamp(44px, 4.6vw, 68px); }
.hero-full .lead { max-width: 30em; }
.note-hand {
  position: absolute; z-index: 2; margin: 0; left: 6.5%;
  top: calc(44vw - (66.67vw - min(66.67vw, 820px)) * 0.7);
  font-family: var(--font-hand); font-size: clamp(22px, 2.6vw, 40px); line-height: 1.1; color: var(--ink);
  transform: rotate(-13deg); transform-origin: left top;
}
@media (max-width: 900px) {
  .hero-full .hero-media { height: 66.67vw; margin-top: 20px; }
  .hero-full .hero-media img { object-position: center; }
  .note-hand { top: 64%; font-size: 5vw; }
}
.hero-full .lead { max-width: 25em; }
@media (max-width: 1200px) and (min-width: 901px) { .hero-full .lead { max-width: 46vw; } .hero-full .hero-grid > div:first-child { max-width: 52%; } }
@media (max-width: 900px) {
  .note-hand { top: 67%; left: 7%; font-size: 3.4vw; }
  .hero-full .hero-media .rip { top: 3%; bottom: auto; right: 3%; }
}

/* ---------- East Midlands hero collage (after the "Local roots" mock-up) ----------
   The picture keeps its 3:2 shape, so every label sits in the same place on the photo. */
.em-hero .hero-grid { min-height: min(66.67vw, 1000px); padding-top: 4vw; }
.em-hero .hero-media { left: 50%; right: auto; bottom: auto; width: min(100%, 1500px); aspect-ratio: 3 / 2; transform: translateX(-50%); }
.em-hero .hero-media img { object-fit: contain; }
.em-hero h1 { font-size: clamp(40px, 4.9vw, 76px); line-height: .95; }
.em-hero .hero-grid > div:first-child { max-width: min(46vw, 700px); }
.em-hero .lead { max-width: 23em; }
.uline { position: relative; white-space: nowrap; }
.uline::after { content: ""; position: absolute; left: 40%; right: 4%; bottom: -8px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 10 C 60 3, 140 2, 197 8' fill='none' stroke='%23141414' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.em-town { position: absolute; z-index: 3; background: var(--coral); color: var(--ink); font-family: var(--font-hand); font-size: clamp(13px, 1.6vw, 26px); line-height: 1; padding: .35em .6em .4em; transform: rotate(var(--r, -6deg)); box-shadow: 0 6px 12px rgba(0,0,0,.18); }
.em-sticky { position: absolute; z-index: 3; margin: 0; background: var(--sticky); color: var(--ink); font-family: var(--font-hand); line-height: 1.12; box-shadow: 0 12px 20px -6px rgba(0,0,0,.3); }
.em-sticky::after { content: ""; display: block; width: 60%; height: .35em; margin-top: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M3 8 C 30 3, 70 2, 117 6' fill='none' stroke='%23141414' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain; }
.em-sticky::before { content: ""; position: absolute; top: 0; right: 0; width: 1.1em; height: 1.1em; background: linear-gradient(225deg, var(--lavender) 50%, rgba(0,0,0,.14) 50%); }
.em-sticky-a { left: 66.5%; top: 9%; font-size: clamp(16px, 2.1vw, 34px); padding: .7em .9em .6em; transform: rotate(-7deg); }
.em-sticky-b { left: 2.5%; top: 52%; font-size: clamp(16px, 2.3vw, 36px); padding: .6em .8em .5em; transform: rotate(-6deg); }
.em-mindmap { position: absolute; z-index: 2; left: 5.5%; top: 63%; width: 22%; height: auto; transform: rotate(-13deg); transform-origin: left top; }
.em-strip { position: absolute; z-index: 3; left: 24.5%; top: 79%; margin: 0; white-space: nowrap; transform: rotate(-1.5deg);
  font-family: var(--font-hand); font-size: clamp(14px, 2vw, 32px); color: var(--ink);
  border-style: solid; border-color: transparent; border-width: 1.4vw 2.6vw 1.8vw 1.6vw;
  border-image: url(../images/paper/turquoise-3.webp) 91 200 105 65 fill / 1.4vw 2.6vw 1.8vw 1.6vw stretch;
  padding: 0 .4em .1em; filter: drop-shadow(0 8px 10px rgba(0,0,0,.18)); }
.em-strip i { font-style: normal; margin: 0 .35em; }
.em-btn { position: absolute; z-index: 4; left: 36%; top: 90%; }
.em-btn .btn { white-space: nowrap; }
.em-btn-mobile { display: none; }
.em-spark { position: absolute; z-index: 2; width: clamp(18px, 3vw, 46px); height: auto; color: var(--ink); }
.em-sp1 { left: 61%; top: 6%; transform: rotate(-30deg); } .em-sp2 { left: 49%; top: 1%; transform: rotate(-60deg) scale(1.1); }
.em-sp3 { right: 4%; top: 13%; transform: rotate(40deg); } .em-sp4 { left: 15%; top: 50%; transform: rotate(10deg); }
.em-sp5 { left: 40%; top: 74%; transform: rotate(-80deg); } .em-sp6 { left: 79%; top: 42%; transform: rotate(130deg); }
.em-hero .hero-media .rip, .em-hero .note-hand { display: none; }
@media (max-width: 900px) {
  .em-hero .hero-grid { min-height: 0; padding-top: 32px; }
  .em-hero .hero-grid > div:first-child { max-width: none; }
  .em-hero .hero-media { position: relative; left: auto; transform: none; width: auto; height: auto; margin: 24px -16px 0; }
  .em-hero .hero-media img { height: auto; }
  .em-btn { display: none; }
  .em-btn-mobile { display: inline-block; }
  .em-strip { left: 16%; top: 80%; font-size: 3.4vw; }
  .uline::after { bottom: -10px; height: 10px; }
}
@media (max-width: 900px) {
  .em-sticky-a, .em-sticky-b { font-size: 2.9vw; }
  .em-town { font-size: 2.5vw; }
  .em-strip { font-size: 2.7vw; left: 20%; }
  .em-spark { display: none; }
}

/* ---------- Real Post-it notes (images/sticky/postit-1 to 14) ----------
   Replaces the flat yellow notes everywhere. Change the number in the url to pick a different note. */
.sticky:not(.e404-note-b), .t-sticky, .em-sticky, .lg-note-yel, .card.yellow, .tcard.tc-yellow {
  background: url(../images/sticky/postit-1.webp) center / 100% 100% no-repeat !important;
  box-shadow: none !important; filter: drop-shadow(0 8px 10px rgba(0,0,0,.22));
}
.sticky.right { background-image: url(../images/sticky/postit-2.webp) !important; }
.sticky.bottom, .e404-note-a { background-image: url(../images/sticky/postit-4.webp) !important; }
.t-sticky { background-image: url(../images/sticky/postit-9.webp) !important; padding: 12px 18px 12px; }
.tcard:nth-child(3n+2) .t-sticky { background-image: url(../images/sticky/postit-10.webp) !important; }
.tcard:nth-child(3n) .t-sticky { background-image: url(../images/sticky/postit-12.webp) !important; }
.em-sticky-a { background-image: url(../images/sticky/postit-2.webp) !important; }
.em-sticky-b { background-image: url(../images/sticky/postit-6.webp) !important; }
.lg-note-yel { background-image: url(../images/sticky/postit-3.webp) !important; }
.card.yellow { background-image: url(../images/sticky/postit-8.webp) !important; }
.tcard.tc-yellow { background-image: url(../images/sticky/postit-5.webp) !important; }
.tcard.tc-yellow:nth-child(2n) { background-image: url(../images/sticky/postit-7.webp) !important; }
/* The real notes have their own curled corner, so drop the drawn folds */
.em-sticky::before, .lg-note-yel::before, .tcard.tc-yellow::after, .cards > .card.yellow::after { display: none !important; }
.sticky, .em-sticky { padding-bottom: 1.1em; }

/* ---------- Post-its recoloured to the brand palette (postit-coral-N, postit-cyan-N, postit-lavender-N) ---------- */
.tcard.tc-cyan, .tcard.tc-coral, .tcard.tc-lavender,
.card.cyan, .card.coral, .card.lavender,
.em-town, .e404-note-b, .lg-note-lav {
  background-color: transparent !important; background-position: center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important;
  box-shadow: none !important; filter: drop-shadow(0 10px 12px rgba(0,0,0,.24));
}
.tcard.tc-cyan { background-image: url(../images/sticky/postit-cyan-1.webp) !important; }
.tcard.tc-coral { background-image: url(../images/sticky/postit-coral-2.webp) !important; }
.tcard.tc-lavender { background-image: url(../images/sticky/postit-lavender-4.webp) !important; }
.tcard.tc-cyan:nth-child(2n) { background-image: url(../images/sticky/postit-cyan-5.webp) !important; }
.tcard.tc-coral:nth-child(2n) { background-image: url(../images/sticky/postit-coral-6.webp) !important; }
.tcard.tc-lavender:nth-child(2n) { background-image: url(../images/sticky/postit-lavender-8.webp) !important; }
.card.cyan { background-image: url(../images/sticky/postit-cyan-9.webp) !important; }
.card.coral { background-image: url(../images/sticky/postit-coral-10.webp) !important; }
.card.lavender { background-image: url(../images/sticky/postit-lavender-13.webp) !important; }
.cards > .card.cyan:nth-child(4n), .cards > .card.coral:nth-child(4n), .cards > .card.lavender:nth-child(4n) { background-image: url(../images/sticky/postit-cyan-13.webp) !important; }
.em-town { background-image: url(../images/sticky/postit-coral-9.webp) !important; padding: .45em .7em .55em; }
.em-town:nth-of-type(2n) { background-image: url(../images/sticky/postit-coral-11.webp) !important; }
.e404-note-b { background-image: url(../images/sticky/postit-coral-2.webp) !important; }
.lg-note-lav { background-image: url(../images/sticky/postit-lavender-3.webp) !important; }
/* Real curls replace the drawn folded corners; extra bottom room so text clears the curl */
.tcard.tc-cyan::after, .tcard.tc-coral::after, .tcard.tc-lavender::after,
.cards > .card.cyan::after, .cards > .card.coral::after, .cards > .card.lavender::after,
.lg-note-lav::before, .e404-note-b::before { display: none !important; }
.tcard.tc-cyan, .tcard.tc-coral, .tcard.tc-lavender { padding-bottom: 40px; }
.card.cyan, .card.coral, .card.lavender { padding-bottom: 46px; }

/* White Post-its (postit-white-N) */
.tcard.tc-white, .tcard.tc-cream, .card.cream {
  background-color: transparent !important; background-position: center !important; background-size: 100% 100% !important; background-repeat: no-repeat !important;
  box-shadow: none !important; filter: drop-shadow(0 10px 12px rgba(0,0,0,.24));
}
.tcard.tc-white, .tcard.tc-cream { background-image: url(../images/sticky/postit-white-2.webp) !important; padding-bottom: 40px; }
.tcard.tc-white:nth-child(2n), .tcard.tc-cream:nth-child(2n) { background-image: url(../images/sticky/postit-white-6.webp) !important; }
.card.cream { background-image: url(../images/sticky/postit-white-9.webp) !important; padding-bottom: 46px; }
.cards > .card.cream:nth-child(2n) { background-image: url(../images/sticky/postit-white-13.webp) !important; }
.tcard.tc-white::after, .tcard.tc-cream::after, .cards > .card.cream::after { display: none !important; }
.hero-promo h1 { font-size: clamp(40px, 4.4vw, 68px); } .hero-promo .hero-grid > div:first-child { max-width: 620px; }
@media (max-width: 900px) { .hero-photo .hero-media .rip-band { white-space: normal; max-width: 88%; left: auto; right: 4%; text-align: center; } }

/* East Midlands: keep the text inside the left of the picture at every screen width (incl. ultrawide) */
@media (min-width: 901px) {
  .em-hero { --imgw: min(100vw, 1500px); }
  .em-hero .container.hero-grid { max-width: var(--imgw); padding-left: calc(var(--imgw) * .045); padding-right: 0; }
  .em-hero .hero-grid > div:first-child { max-width: calc(var(--imgw) * .42); }
  .em-hero h1 { font-size: calc(var(--imgw) * .047); }
  .em-hero .lead { max-width: none; font-size: max(16px, calc(var(--imgw) * .0135)); }
  .em-hero .eyebrow { font-size: max(11px, calc(var(--imgw) * .0085)); }
  .em-hero .hero-grid { min-height: calc(var(--imgw) * .6667); padding-top: calc(var(--imgw) * .04); }
}
@media (min-width: 1501px) {
  .em-hero .hero-media img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }
}

/* East Midlands: bigger three-line headline, intro tucked underneath */
@media (min-width: 901px) {
  .em-hero h1 { font-size: calc(var(--imgw) * .066); line-height: .92; }
  .em-hero .hero-grid > div:first-child { max-width: calc(var(--imgw) * .4); }
  .em-hero .lead { max-width: calc(var(--imgw) * .33); margin-top: calc(var(--imgw) * .02); }
  .em-hero .uline::after { left: 0; right: 6%; }
}

/* East Midlands: page colour matched to the picture's own background (#d5cdfe), so no fade or overlay is needed */
.theme-em, .site-header.theme-em, .em-hero.theme-em { background: var(--lavender); }
.em-hero .hero-media img, .em-hero .hero-media.tilt img { -webkit-mask-image: none !important; mask-image: none !important; }
.em-hero .hero-media img.em-mindmap { position: absolute; inset: auto; left: 6.5%; top: 69%; width: 18.5% !important; height: auto !important; object-fit: contain; -webkit-mask-image: none; mask-image: none; transform: rotate(-13deg); transform-origin: left top; }

/* Filming & editing: editing banner photo */
.edit-banner { position: relative; margin: 40px 0 16px; }
.edit-banner img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 940; object-fit: cover; border-radius: 6px; transform: rotate(-.6deg); box-shadow: 0 24px 40px -16px rgba(0,0,0,.6); }
.edit-banner-rip { position: absolute; left: -2%; bottom: 7%; transform: rotate(-3deg); }
@media (max-width: 900px) { .edit-banner { margin-top: 28px; } .edit-banner-rip { position: relative; display: inline-block; left: auto; bottom: auto; margin: -18px 0 0 -6px; font-size: 20px; } }

/* Editing banner: full-bleed band, photo runs off the right edge and fades into its own lavender on the left */
.edit-banner { width: 100vw; margin: 48px 0 40px calc(50% - 50vw); background: var(--lavender); display: flex; justify-content: flex-end; overflow: hidden; }
.edit-banner img { width: min(78vw, 1500px); aspect-ratio: 1600 / 940; border-radius: 0; transform: none; box-shadow: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20%); mask-image: linear-gradient(to right, transparent 0, #000 20%); }
.edit-banner-rip { left: max(16px, calc(50vw - 600px)); bottom: 9%; }
@media (max-width: 900px) {
  .edit-banner { flex-direction: column; align-items: flex-end; margin-top: 28px; }
  .edit-banner img { width: 100vw; -webkit-mask-image: none; mask-image: none; }
  .edit-banner { background: transparent; }
  .edit-banner-rip { position: relative; left: auto; bottom: auto; align-self: flex-start; margin: -16px 0 0 12px; }
}

/* Photo headers: keep the whole picture visible on wide screens.
   The picture is anchored to the right edge but never wider than it can show without cropping the top,
   and the top fade is removed so nothing at the top of a picture is hidden. */
@media (min-width: 901px) {
  .hero-photo:not(.hero-full) .hero-media { left: auto; right: 0; width: min(calc(100% - var(--left, 34%)), calc(50vw + 120px)); }
  .hero-photo:not(.hero-full) .hero-media img, .hero-photo:not(.hero-full) .hero-media.tilt img {
    object-position: var(--obj, right center);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%);
  }
}

/* Editing banner v3: heading over the photo; photo further right with only a short fade */
.edit-banner { margin-top: 0; margin-bottom: 48px; }
.edit-banner img { width: min(74vw, 1460px); margin-right: -2vw;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%); mask-image: linear-gradient(to right, transparent 0, #000 9%); }
.edit-banner-copy { position: absolute; z-index: 3; top: clamp(40px, 5vw, 80px); left: max(16px, calc(50vw - 600px)); max-width: min(34vw, 520px); color: var(--ink); }
.edit-banner-copy .eyebrow { color: var(--ink); }
.edit-banner-copy h2 { margin: 0 0 14px; font-size: clamp(36px, 4.4vw, 72px); line-height: .95; }
.edit-banner-copy .lead { margin: 0; max-width: 22em; }
@media (max-width: 900px) {
  .edit-banner-copy { position: static; max-width: none; padding: 40px 16px 20px; color: var(--white); order: -1; align-self: stretch; }
  .edit-banner-copy .eyebrow { color: var(--cyan); }
  .edit-banner img { width: 100vw; margin-right: 0; }
}
@media (min-width: 901px) { .edit-banner-copy .lead { max-width: min(26vw, 380px); font-size: clamp(16px, 1.3vw, 20px); } .edit-banner-copy { top: clamp(32px, 4vw, 70px); } }

/* Filming & editing: photos extended to the left edge, so there is no fade over any part of the picture */
@media (min-width: 901px) {
  .hero-ext .hero-media, .hero-photo.hero-ext:not(.hero-full) .hero-media { left: 0; right: 0; width: auto; }
  .hero-ext .hero-media img, .hero-photo.hero-ext:not(.hero-full) .hero-media img { object-fit: cover; object-position: right center; -webkit-mask-image: none; mask-image: none; }
  .edit-banner { display: block; height: clamp(520px, 44vw, 760px); }
  .edit-banner img { width: 100%; height: 100%; margin: 0; aspect-ratio: auto; object-fit: cover; object-position: right center; -webkit-mask-image: none; mask-image: none; }
}
@media (max-width: 900px) {
  .hero-ext .hero-media img { object-position: right center; }
  .edit-banner img { aspect-ratio: 1600 / 940; object-fit: cover; object-position: right center; }
}
@media (min-width: 901px) { .hero-ext .hero-media img, .hero-photo.hero-ext:not(.hero-full) .hero-media img { object-position: right bottom; } }
/* Filming & editing header: camera bottom-right at a size that never reaches the text; page colour matched to the photo */
.hero-ext.theme-coral, .site-header.theme-coral:has(+ * .hero-ext) { background: var(--coral); }
@media (min-width: 901px) {
  .hero-photo.hero-ext:not(.hero-full) .hero-media { top: auto; bottom: 0; height: min(100%, 33vw); }
  .hero-photo.hero-ext:not(.hero-full) .hero-media img { object-fit: cover; object-position: right bottom;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }
}
.site-header.theme-fe { background: var(--coral); }
.site-header.theme-mg, .hero-ext.theme-mg { background: var(--lavender); }
@media (min-width: 901px) { .hero-ext.theme-mg .hero-media .rip { right: 2%; bottom: 3%; } }

/* Filming & editing, round 4 */
/* Header: camera larger again, sitting on the bottom edge, never reaching the text */
@media (min-width: 901px) {
  .hero-photo.hero-ext.theme-fe .hero-media { height: min(100%, calc(35.5vw + 14px)); }
}
/* Editing banner: the real photo (not extended), anchored right. The wall fades into the band,
   the desk keeps its crisp left end so the table edge shows. */
@media (min-width: 901px) {
  .edit-banner { display: flex; justify-content: flex-end; height: auto; }
  .edit-banner img { width: min(74vw, 1460px); height: auto; aspect-ratio: 1600 / 940; margin-right: -2vw; object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%), linear-gradient(#000, #000);
    -webkit-mask-size: 100% 77%, 100% 23.5%; -webkit-mask-position: 0 0, 0 100%; -webkit-mask-repeat: no-repeat;
            mask-image: linear-gradient(to right, transparent 0, #000 7%), linear-gradient(#000, #000);
            mask-size: 100% 77%, 100% 23.5%; mask-position: 0 0, 0 100%; mask-repeat: no-repeat; }
}

/* Client and credential logos (images/logos). Shown in dark grey on light sections, white on dark */
.logo-strip { gap: 40px 56px; }
.client-logo { display: block; height: 40px; width: auto; max-width: 180px; object-fit: contain; opacity: .85; filter: grayscale(1); transition: opacity .2s ease; }
.client-logo:hover { opacity: 1; }
.theme-dark .client-logo, .site-footer .client-logo { filter: grayscale(1) invert(1); }
.client-logo.cred { height: 48px; }
.cred-band { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 48px; padding-bottom: 40px; margin-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.14); }
.cred-band .client-logo { height: 44px; }
.cred-label { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--white); margin-right: auto; }
/* What happens on the first call */
.call-points { list-style: none; margin: 14px 0 10px; padding: 0; font-size: 14px; line-height: 1.5; }
.call-points li { padding-left: 22px; position: relative; }
.call-points li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 7px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
/* Team without photos */
.team-member { border-top: 3px solid var(--ink); padding-top: 18px; }
.team-member h3 { margin: 0 0 6px; }
@media (max-width: 900px) { .cred-label { margin-right: 0; width: 100%; } .client-logo { height: 32px; } }
.site-footer .container.cred-band { display: flex; grid-template-columns: none; }
.cta-side .call-points { text-align: left; }
.cta-side .call-points li { padding-left: 22px; }
.cred-band .client-logo + .client-logo { margin-left: 28px; } 

/* ---------- Colour consistency (14 Oct) ----------
   Every header photo has been colour-matched so its backdrop is exactly the brand colour
   (--cyan, --coral or --lavender). Header bar, hero and photo are now one continuous shade on every page.
   Originals are kept in images/_originals. */
@media (min-width: 901px) {
  /* soft top edge so a photo never meets the header bar with a hard line */
  .hero-photo:not(.hero-full):not(.hero-ext) .hero-media img, .hero-photo:not(.hero-full):not(.hero-ext) .hero-media.tilt img {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 48px);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 22%), linear-gradient(to bottom, transparent 0, #000 48px);
            mask-composite: intersect;
  }
}
/* Editing banner: cut-out photo. The desk now has its own clean end and the wall is the brand lavender,
   so no fade or straight crop is needed */
@media (min-width: 901px) { .edit-banner { background: var(--lavender); } }
.edit-banner img { -webkit-mask-image: none !important; mask-image: none !important; }
@media (max-width: 900px) { .edit-banner img { background: var(--lavender); } }

/* ---------- Round 2 (14 Oct) ---------- */
/* Torn-paper labels: drawn as one picture instead of a 9-slice border image, which left faint keylines in Safari */
.rip, .em-strip { border: 0 !important; border-image: none !important; background-position: center; background-size: 100% 100%; background-repeat: no-repeat; }
.rip-coral.rip-s1 { background-image: url(../images/paper/coral-1.webp); }
.rip-coral.rip-s3 { background-image: url(../images/paper/coral-3.webp); }
.rip-turquoise.rip-s1 { background-image: url(../images/paper/turquoise-1.webp); }
.rip-turquoise.rip-s3 { background-image: url(../images/paper/turquoise-3.webp); }
.rip-lavender.rip-s1 { background-image: url(../images/paper/lavender-1.webp); }
.rip-lavender.rip-s3 { background-image: url(../images/paper/lavender-3.webp); }
.rip-white.rip-s1 { background-image: url(../images/paper/white-1.webp); }
.rip-white.rip-s3 { background-image: url(../images/paper/white-3.webp); }
.rip-charcoal.rip-s1 { background-image: url(../images/paper/charcoal-1.webp); }
.rip-charcoal.rip-s3 { background-image: url(../images/paper/charcoal-3.webp); }
/* the old border widths become padding, so the words sit in the same place on the paper */
.rip.rip-s1 { padding: 25px 15px 36px 38px; }
.rip.rip-s3 { padding: 34px 70px 40px 24px; }
.rip.rip-s1.rip-bold { padding: 25px 19px 40px 52px; }
.rip.rip-s3.rip-bold { padding: 34px 74px 44px 38px; }
.rip.rip-s1.rip-hand { padding: 25px 23px 36px 40px; }
.rip.rip-s3.rip-hand { padding: 34px 78px 40px 26px; }
.em-strip { background-image: url(../images/paper/turquoise-3.webp); padding: 1.4vw calc(2.6vw + .4em) calc(1.8vw + .1em) calc(1.6vw + .4em); }

/* Camera headers (Filming & editing, How we work): no fade, so the page colour never shows through the camera.
   The photo's backdrop is exactly the page coral, so it can sit straight on the page. The picture is sized so the
   whole camera fits to the right of the text. --sl = where the camera starts in the photo, --sw = how much of the photo's width it takes. */
.hero-fit .hero-media img { -webkit-mask-image: none !important; mask-image: none !important; }
@media (min-width: 901px) {
  .hero-photo.hero-fit .hero-media img, .hero-photo.hero-fit .hero-media.tilt img {
    position: absolute; left: 0; right: auto; top: auto; bottom: 0;
    width: calc(100% / var(--sw, .65)) !important; height: auto !important; max-width: none; aspect-ratio: auto; object-fit: fill;
    transform: translateX(calc(var(--sl, .28) * -100%));
  }
}
@media (max-width: 900px) { .hero-photo.hero-fit .hero-media img { object-position: 40% center; } }


/* Editing banner (round 3): cut-out edit suite with a transparent background. The whole desk is shown, nothing fades
   or covers it, and it sits on the lavender band like the page headers. The label sits under the words, off the desk. */
.edit-banner img { width: 100%; height: auto !important; aspect-ratio: auto !important; object-fit: contain !important; transform: none !important; margin: 0 !important;
  -webkit-mask-image: none !important; mask-image: none !important; border-radius: 0 !important; box-shadow: none !important; }
.edit-banner-copy .edit-banner-rip { position: relative; display: inline-block; left: auto; bottom: auto; top: auto; margin: 26px 0 0 -10px; transform: rotate(-2deg);
  font-size: clamp(20px, 1.9vw, 30px); white-space: nowrap; }
@media (min-width: 901px) {
  .edit-banner { display: flex; justify-content: flex-end; align-items: flex-end; height: auto; min-height: clamp(460px, 38vw, 640px); padding-top: 40px; }
  .edit-banner img { width: min(60vw, 1120px) !important; flex: none; }
  .edit-banner-copy { max-width: min(36vw, 520px); }
}

/* ---------- Torn paper, everywhere (14 Oct) ----------
   Safari drew faint keylines where the nine pieces of a border-image meet. Every remaining paper shape now
   paints its picture as one background stretched over the whole box (border included), so the layout is unchanged
   and there are no joins to show. */
.cl-t1, .cl-t2, .cl-t3, .cl-t4, .cl-strip-paper, .ex-torn .cl-strip-paper, .ex-cap, .ex-label, .ex-strip-paper,
.post-body blockquote, .tape-label, .banner {
  border-image: none !important; border-color: transparent !important;
  background-origin: border-box !important; background-clip: border-box !important;
  background-position: 0 0 !important; background-size: 100% 100% !important; background-repeat: no-repeat !important;
}
.cl-t1 { background-image: url(../images/paper/turquoise-2.webp) !important; }
.cl-t2 { background-image: url(../images/paper/charcoal-3.webp) !important; }
.cl-t3 { background-image: url(../images/paper/lavender-1.webp) !important; }
.cl-t4 { background-image: url(../images/paper/white-2.webp) !important; }
.cl-strip-paper { background-image: url(../images/paper/white-6.webp) !important; }
.ex-torn .cl-strip-paper { background-image: url(../images/paper/coral-3.webp) !important; }
.ex-cap { background-image: url(../images/paper/white-1.webp) !important; }
.ex-label { background-image: url(../images/paper/turquoise-1.webp) !important; }
.ex-strip-paper { background-image: url(../images/paper/white-3.webp) !important; }
.post-body blockquote { background-image: url(../images/paper/white-1.webp) !important; background-color: transparent !important; }
.tape-label { background-image: url(../images/paper/white-1.webp) !important; }
.banner { background-image: url(../images/paper/coral-3.webp) !important; }

/* Paper shapes whose torn edge now runs a little deeper: keep the words clear of the tear */
.cl-t2 { padding-top: 22px !important; }
.ex-strip-paper { padding-left: 46px !important; }

/* ---------- Home page header: everything important on the first screen ----------
   Headline sized by the height of the window as well as its width, the button and the
   "Make every frame count." label always above the fold. */
@media (min-width: 901px) {
  .hero-home .hero-grid { min-height: clamp(460px, calc(100vh - 150px), 760px); padding-top: 20px; padding-bottom: 36px; }
  .hero-home .hero-grid > div:first-child { max-width: min(46vw, 660px); }
  .hero-home h1 { font-size: clamp(44px, min(5.4vw, 8.6vh), 92px); line-height: .95; margin-bottom: .3em; }
  .hero-home .eyebrow { margin-bottom: 14px; }
  .hero-home .lead { font-size: clamp(18px, min(1.6vw, 2.6vh), 24px); margin-bottom: 26px; }
  .hero-home .hero-media .rip { bottom: 9%; }
}

/* ---------- Free-bees page (freebees.html) ---------- */
.fb-hero { padding: 24px 0 64px; }
.fb-hero .hero-grid { min-height: clamp(420px, 36vw, 600px); }
.fb-bee { position: relative; }
.fb-bee img { width: 100%; max-width: 600px; height: auto; margin-left: auto; transform-origin: 60% 40%; animation: fb-hover 4s ease-in-out infinite; }
@keyframes fb-hover { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(-1.5deg); } }
@media (prefers-reduced-motion: reduce) { .fb-bee img { animation: none; } }
.fb-bee .fb-rip { position: absolute; left: 0; top: 6%; bottom: auto; transform: rotate(-4deg); font-size: clamp(22px, 2.4vw, 36px); }
.fb-cards { margin-top: 40px; }
.fb-card { display: flex; flex-direction: column; align-items: flex-start; }
.fb-card .btn { margin-top: auto; border: 0; cursor: pointer; font: inherit; font-size: 17px; padding: 12px 22px; }
.fb-card p { margin: 0 0 20px; }
.fb-type { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 10px; }
.fb-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; border: 0; border-radius: 14px; padding: 36px 32px 28px; background: var(--cream); color: var(--ink); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.fb-dialog::backdrop { background: rgba(20,20,20,.55); }
.fb-dialog h2 { margin: 0 0 8px; font-size: clamp(30px, 3vw, 42px); }
.fb-dialog .eyebrow { margin: 0 0 8px; }
.fb-close { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 34px; line-height: 1; cursor: pointer; color: var(--ink); }
.fb-for { margin: 0; font-size: 16px; }
.fb-form { margin-top: 0; }
.fb-optional { font-weight: 400; color: var(--grey); }
.enquiry-form .fb-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; }
.enquiry-form .fb-check input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.fb-done p { margin: 0 0 22px; }
@media (max-width: 900px) {
  .fb-hero .hero-grid { min-height: 0; }
  .fb-bee img { max-width: 420px; margin: 0 auto; }
  .fb-bee .fb-rip { left: 0; top: 4%; font-size: 22px; }
  .fb-cards { grid-template-columns: 1fr; }
}
.fb-dialog [hidden] { display: none !important; }

/* ---------- Home page showreel (straight under the header) ---------- */
.showreel { padding: clamp(40px, 5vw, 72px) 0; }
.reel { position: relative; aspect-ratio: 16 / 9; max-width: 1100px; margin: 0 auto; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 30px 60px -20px rgba(0,0,0,.7); }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.reel-play { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; cursor: pointer; background: rgba(0,0,0,.18); display: grid; place-items: center; transition: background .2s ease; }
.reel-play:hover { background: rgba(0,0,0,.05); }
.reel-play span { width: clamp(72px, 8vw, 112px); aspect-ratio: 1; border-radius: 50%; background: var(--coral); display: grid; place-items: center; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .2s ease; }
.reel-play:hover span { transform: scale(1.06); }
.reel-play span::after { content: ""; margin-left: 12%; border-left: clamp(22px, 2.4vw, 34px) solid var(--ink); border-top: clamp(14px, 1.5vw, 21px) solid transparent; border-bottom: clamp(14px, 1.5vw, 21px) solid transparent; }
.reel .reel-rip { position: absolute; z-index: 2; left: 3%; bottom: 6%; transform: rotate(-3deg); pointer-events: none; font-size: clamp(18px, 2vw, 30px); }
.reel.playing .reel-play, .reel.playing .reel-rip { display: none; }
/* play button sits bottom-right so it never covers the logo in the opening still */
.reel-play { place-items: end; padding: 0 4% 5% 0; }
@media (max-width: 600px) { .reel-play span { width: 58px; } .reel .reel-rip { display: none; } }

/* Free-bees: Quick Tips (about, benefits and compact download list) */
.fb-about { align-items: start; gap: 64px; }
.fb-about h2 { margin-top: 0; }
.fb-about p { max-width: 34em; }
.fb-tag { margin-top: 18px; }
.fb-benefits { background: #fff; border-radius: 12px; padding: 34px 32px 30px; box-shadow: 0 18px 40px -20px rgba(0,0,0,.25); position: relative; }
.fb-tag-hand { position: absolute; top: -34px; left: 18px; margin: 0; transform: rotate(-3deg); font-size: 26px; }
.fb-benefits .why-list { margin-top: 18px; gap: 16px; font-size: 17px; }
.fb-benefits .why-list li:nth-child(3n+2)::before { background: var(--coral); }
.fb-benefits .why-list li:nth-child(3n)::before { background: var(--lavender); }
.fb-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.fb-list-head h2 { margin: 0; }
.fb-tag-time { margin: 0 0 6px; transform: rotate(3deg); font-size: clamp(20px, 2vw, 28px); }
.fb-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin-top: 36px; }
.fb-row { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 20px; background: var(--cream); border-radius: 12px; padding: 16px 20px 16px 16px; }
.fb-thumb { width: 76px; height: auto; aspect-ratio: 4 / 5; border-radius: 6px; transform: rotate(-3deg); box-shadow: 0 8px 14px -6px rgba(0,0,0,.35); }
.fb-row:nth-child(2n) .fb-thumb { transform: rotate(2deg); }
.fb-row h3 { margin: 0 0 4px; font-size: 22px; text-transform: none; }
.fb-row p { margin: 0; font-size: 15px; line-height: 1.4; color: #333; }
.fb-row .btn { border: 0; cursor: pointer; font: inherit; font-size: 15px; padding: 10px 18px; white-space: nowrap; }
.fb-small { margin: 28px 0 0; font-size: 15px; }
@media (max-width: 1000px) { .fb-list { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .fb-about { gap: 56px; } }
@media (max-width: 560px) {
  .fb-row { grid-template-columns: 60px 1fr; }
  .fb-thumb { width: 60px; }
  .fb-row .btn { grid-column: 1 / -1; justify-self: start; }
}
.fb-about > * { min-width: 0; } @media (max-width: 560px) { .fb-about h2 { font-size: 36px; } }

/* ---------- Free-bees: the hive (collections) ---------- */
.fb-hive-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: 44px; }
.fb-hive-head h2 { margin: 0 0 10px; }
.fb-hive-lead { margin: 0; max-width: 30em; font-size: clamp(17px, 1.5vw, 21px); }
.fb-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.fb-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; color: var(--ink); background: var(--cyan); }
.fb-chip span { background: var(--ink); color: #fff; border-radius: 999px; font-size: 13px; min-width: 24px; height: 24px; display: grid; place-items: center; padding: 0 6px; }
.fb-chip.fb-c-coral { background: var(--coral); } .fb-chip.fb-c-lavender { background: var(--lavender); }
.fb-chip-soon { background: transparent; border: 2px dashed rgba(20,20,20,.3); color: var(--grey); }
.fb-collection { --fb-col: var(--cyan); background: #fff; border-radius: 18px; overflow: visible; box-shadow: 0 24px 50px -28px rgba(0,0,0,.35); border: 3px solid var(--fb-col); margin-bottom: 40px; scroll-margin-top: 24px; }
.fb-collection.fb-c-coral { --fb-col: var(--coral); } .fb-collection.fb-c-lavender { --fb-col: var(--lavender); }
.fb-col-head { position: relative; background: var(--fb-col); border-radius: 14px 14px 0 0; padding: 28px 36px 26px; display: flex; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; }
.fb-col-head h2 { margin: 0; font-size: clamp(30px, 3.4vw, 48px); }
.fb-col-num { width: 100%; font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.fb-col-count { font-weight: 600; font-size: 16px; background: var(--ink); color: #fff; padding: 6px 14px; border-radius: 999px; }
.fb-col-rip { position: absolute; right: 28px; top: -26px; transform: rotate(3deg); font-size: clamp(18px, 1.8vw, 26px); }
.fb-col-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; padding: 40px 36px 12px; }
.fb-col-body > * { min-width: 0; }
.fb-col-about h3 { margin: 0 0 14px; font-size: clamp(24px, 2.3vw, 32px); text-transform: none; line-height: 1.05; }
.fb-col-about p { margin: 0 0 14px; font-size: 17px; }
.fb-col-why { position: relative; background: var(--cream); border-radius: 12px; padding: 54px 26px 24px; }
.fb-why-tag { position: absolute; top: -24px; left: 14px; transform: rotate(-3deg); font-size: 24px; }
.fb-col-why .why-list { gap: 12px; font-size: 16px; }
.fb-col-why .why-list li::before { background: var(--fb-col); outline: 2px solid var(--ink); outline-offset: -2px; width: 16px; height: 16px; }
.fb-col-downloads { padding: 28px 36px 36px; }
.fb-col-label { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; padding-top: 22px; border-top: 2px dashed rgba(20,20,20,.18); font-family: var(--font-head); font-weight: 900; font-size: 22px; letter-spacing: -0.02em; }
.fb-col-hint { font-family: var(--font-body); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.fb-collection .fb-list { margin-top: 0; }
.fb-collection .fb-row { background: var(--cream); border: 2px solid transparent; transition: border-color .15s ease; }
.fb-collection .fb-row:hover { border-color: var(--fb-col); }
.fb-soon { border: 3px dashed rgba(20,20,20,.22); border-radius: 18px; padding: 44px 36px 32px; position: relative; text-align: center; }
.fb-soon p { margin: 18px auto 0; max-width: 34em; color: var(--grey); }
.fb-soon-rip { position: relative; display: inline-block; transform: rotate(-2deg); font-size: clamp(20px, 2vw, 28px); }
@media (max-width: 900px) {
  .fb-col-body { grid-template-columns: 1fr; gap: 44px; padding: 32px 20px 8px; }
  .fb-col-head { padding: 26px 20px 22px; }
  .fb-col-downloads { padding: 24px 20px 24px; }
  .fb-col-rip { right: 12px; top: -22px; }
}
@media (max-width: 600px) { .fb-col-rip { position: relative; right: auto; top: auto; margin: 10px 0 0 -6px; transform: rotate(-2deg); } }

/* =========================================================
   Buttons and links: clear interaction (15 Oct)
   Anything you can click reacts: pointer cursor, hover change, press-down on click,
   and a visible outline for keyboard users. Things you can't click stay still.
   ========================================================= */
.btn, .btn-outline, .fb-chip, .nav-toggle, .reel-play, .fb-close, .filters button, .faq-item summary, .t-more summary, button { cursor: pointer; }

/* Main buttons (dark): lift, turn coral, cast a shadow; press down when clicked */
.btn { transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-3px); background: var(--coral); color: var(--ink); box-shadow: 0 12px 22px -10px rgba(0,0,0,.45); }
.btn:active { transform: translateY(0) scale(.97); box-shadow: 0 4px 8px -4px rgba(0,0,0,.4); }
/* Cyan buttons (on dark bands and the cookie notice): turn white */
.btn-cyan:hover { background: var(--white); color: var(--ink); }
/* Coral sections: a coral hover would vanish, so go cyan instead */
.theme-coral .btn:not(.btn-cyan):hover { background: var(--cyan); }
/* The arrow nudges in the direction it points */
.btn .arrow, .btn-outline .arrow { display: inline-block; transition: transform .15s ease; }
.btn:hover .arrow, .btn-outline:hover .arrow { transform: translate(2px, -2px); }
.fb-get:hover .arrow, a.btn[href^="#"]:hover .arrow, .fb-form .btn:hover .arrow, #fb-link:hover .arrow { transform: translateY(3px); }

/* "Let's talk" outline button */
.btn-outline { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; }
.btn-outline:active { transform: scale(.96); }

/* Menu links: underline slides in */
.main-nav a { transition: border-color .15s ease, opacity .15s ease; }
.main-nav a:hover { opacity: .75; }
.nav-toggle { transition: background-color .15s ease, color .15s ease; }
.nav-toggle:hover, .nav-toggle[aria-expanded="true"] { background: var(--ink); color: var(--white); }

/* Free-bees chips and download rows */
.fb-chip { transition: transform .15s ease, box-shadow .15s ease; }
a.fb-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(0,0,0,.4); }
a.fb-chip:active { transform: scale(.97); }
.fb-chip-soon { cursor: default; }
.fb-collection .fb-row:hover { box-shadow: 0 10px 22px -14px rgba(0,0,0,.4); }

/* Showreel play button */
.reel-play span { transition: transform .2s ease, background-color .2s ease; }
.reel-play:hover span { background: var(--cyan); }
.reel-play:active span { transform: scale(.94); }

/* Blog and related-post cards: the title underlines so it reads as a link */
.post-card h3, .post-related h3 { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .15s ease; }
.post-card:hover h3, .post-related:hover h3 { text-decoration-color: currentColor; }
.lg-tile, .ex-tile, .e404-card, .post-card, .post-related { cursor: pointer; }

/* Footer and in-text links */
.site-footer a { transition: color .15s ease; }
.site-footer ul a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Cards that are NOT links no longer jump on hover, so they don't pretend to be buttons */
div.card:hover, figure.tcard:hover, div.tcard:hover { transform: rotate(var(--rot, 0deg)) !important; }
.cl-piece:hover { z-index: auto; }
.cl-p1:hover { transform: rotate(-2.5deg) !important; } .cl-p2:hover { transform: rotate(1.2deg) !important; }
.cl-p3:hover { transform: rotate(-1deg) !important; } .cl-p4:hover { transform: rotate(2deg) !important; }
@media (max-width: 900px) { .cl-p1:hover { transform: rotate(-1.5deg) !important; } .cl-p2:hover { transform: rotate(1deg) !important; } .cl-p3:hover { transform: rotate(-1deg) !important; } .cl-p4:hover { transform: rotate(1.2deg) !important; } }

/* Keyboard users: a clear outline on whatever has focus */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px;
}
.theme-dark a:focus-visible, .theme-dark button:focus-visible, .site-footer a:focus-visible, .cookie-notice button:focus-visible { outline-color: var(--cyan); }
.btn:focus-visible, .btn-outline:focus-visible, .fb-chip:focus-visible { border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-outline, .fb-chip, .reel-play span, .btn .arrow { transition: none; }
  .btn:hover, a.fb-chip:hover { transform: none; }
}

/* ---------- Client logos (images/logos/clients): one colour, sized to look equal ---------- */
.clients { padding-top: 48px; padding-bottom: 48px; }
.clients-label { margin: 0 0 22px; font-size: 16px; text-align: center; }
.logo-wall { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid #e8e2d4; border-left: 1px solid #e8e2d4; }
.logo-wall li { height: 112px; display: grid; place-items: center; padding: 10px 16px; border-right: 1px solid #e8e2d4; border-bottom: 1px solid #e8e2d4; }
.logo-wall .client-logo, .logo-strip-even .client-logo { max-width: 100%; width: auto; object-fit: contain; filter: none; opacity: .82; transition: opacity .2s ease, transform .2s ease; }
.logo-wall li:hover .client-logo { opacity: 1; transform: scale(1.04); }
.logo-strip-even { gap: 28px 48px; justify-content: space-between; }
.theme-dark .logo-strip-even .client-logo { filter: invert(1); opacity: .85; }
@media (max-width: 900px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } .logo-wall li { height: 96px; } }
@media (max-width: 560px) {
  .logo-wall { grid-template-columns: repeat(2, 1fr); }
  .logo-wall li { height: 84px; padding: 8px 12px; }
  .logo-wall .client-logo { transform: scale(.78); }
  .logo-wall li:hover .client-logo { transform: scale(.8); }
  .logo-strip-even { justify-content: center; }
  .logo-strip-even .client-logo { transform: scale(.8); }
}
@media (min-width: 561px) { .logo-strip-even { flex-wrap: nowrap; gap: 32px; } .logo-strip-even .client-logo { zoom: .68; } }
@media (max-width: 1000px) and (min-width: 561px) { .logo-strip-even { flex-wrap: wrap; justify-content: center; } }

/* YouTube films (js/youtube.js): thumbnail button that loads the player on click */
button.video-placeholder.yt { width: 100%; border: 0; padding: 0; cursor: pointer; font: inherit; }
button.video-placeholder.yt::before { background: rgba(0,0,0,.18); transition: background .2s ease; }
button.video-placeholder.yt:hover::before { background: rgba(0,0,0,.05); }
button.video-placeholder.yt .play { transition: transform .2s ease; background: rgba(0,0,0,.35); }
button.video-placeholder.yt:hover .play { transform: scale(1.08); }

/* Testimonial Shorts: portrait tiles side by side */
.video-grid.shorts { grid-template-columns: repeat(3, 1fr); align-items: start; }
.video-grid.shorts .stack { display: contents; }
.video-placeholder.yt-vertical { aspect-ratio: 9 / 16; max-height: 640px; }
.video-grid.shorts .video-frame { aspect-ratio: 9 / 16; max-height: 640px; }
@media (max-width: 900px) { .video-grid.shorts { grid-template-columns: 1fr 1fr; } }

/* Home hero: cake sits larger and closer to the headline (19 Oct 2026). Image is a crop of hdr-cake-cyan.jpg. */
@media (min-width: 901px) {
  .hero-home .hero-media { left: 47%; right: 2%; top: 4%; bottom: 4%; }
  .hero-home .hero-media img { object-fit: contain; object-position: left center; }
  .hero-home .hero-media img { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 92%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 94%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 10%, #000 92%, transparent 100%); mask-composite: intersect; }
  .hero-home .hero-media .rip { right: 4%; bottom: 8%; }
}
@media (max-width: 1200px) and (min-width: 901px) { .hero-home .hero-media { left: 49%; } }

/* ---------- How we work: step cards in the 2026 brand style (19 Oct 2026) ----------
   Hand-drawn circled numbers, torn-paper headings in the step colour, and the "Next step" on a Post-it.
   Colour comes from the class on each <article>: step-cyan, step-coral or step-lavender. */
.process-tag { margin: 18px 0 0 -6px; }
.process { gap: 40px; margin-top: 48px; }
.process-step {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px; grid-template-areas: "head note" "cols note";
  column-gap: 40px; align-items: start; padding: 36px 36px 40px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 14px 30px -18px rgba(0,0,0,.25);
}
.process-head { grid-area: head; gap: 20px; align-items: center; }
.process-cols { grid-area: cols; margin: 28px 0 0 96px; gap: 36px; }

/* number: handwritten, in a scribbled ring, like the brand boards */
.process-num, .process-num.cyan, .process-num.coral, .process-num.lavender {
  width: 76px; height: 76px; border-radius: 0; background: none;
  font-family: var(--font-hand); font-weight: 500; font-size: 40px; line-height: 1; letter-spacing: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58 9C30 4 8 22 9 50c1 27 24 42 48 40 25-2 37-22 35-44C90 25 72 10 47 12' fill='none' stroke='%23141414' stroke-width='4.5' stroke-linecap='round'/%3E%3Cpath d='M22 96c18-4 40-5 58-2' fill='none' stroke='%23141414' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  padding-bottom: 6px; transform: rotate(-6deg);
}

/* heading on a strip of torn paper */
.process-head h3 {
  display: inline-block; margin: 0 0 12px -10px; padding: 16px 40px 20px 22px;
  background: url(../images/paper/turquoise-3.webp) center / 100% 100% no-repeat;
  transform: rotate(-1.5deg); filter: drop-shadow(0 6px 8px rgba(0,0,0,.14));
}
.step-coral .process-head h3 { background-image: url(../images/paper/coral-3.webp); transform: rotate(1deg); }
.step-lavender .process-head h3 { background-image: url(../images/paper/lavender-3.webp); }

/* column labels get a marker underline in the step colour */
.process-cols h4 { display: inline-block; position: relative; padding-bottom: 7px; margin-bottom: 14px; }
.process-cols h4::after {
  content: ""; position: absolute; left: -2px; right: -6px; bottom: 0; height: 6px; border-radius: 6px;
  background: var(--cyan); transform: rotate(-1.2deg);
}
.step-coral .process-cols h4::after { background: var(--coral); }
.step-lavender .process-cols h4::after { background: var(--lavender); }

/* hand-drawn ticks instead of dots */
.process-cols ul { list-style: none; padding-left: 0; }
.process-cols li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.process-cols li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M3 12c2.5 2 4.5 4.3 6 7 3-6.5 7.5-12 13-16' fill='none' stroke='%23141414' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* "Next step" on a real Post-it */
.process-next {
  grid-area: note; align-self: center; margin: 0; border: 0; border-radius: 0;
  aspect-ratio: 1 / 1; display: flex; flex-direction: column; justify-content: center;
  padding: 30px 28px 38px; font-size: 16px; line-height: 1.4;
  background: url(../images/sticky/postit-1.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.2)); transform: rotate(2.5deg);
}
.process-step:nth-child(2n) .process-next { background-image: url(../images/sticky/postit-5.webp); transform: rotate(-2deg); }
.process-step:nth-child(3n) .process-next { background-image: url(../images/sticky/postit-8.webp); transform: rotate(1.5deg); }
.process-next strong {
  font-family: var(--font-hand); font-weight: 500; font-size: 30px; letter-spacing: 0; text-transform: none;
  margin-bottom: 6px; line-height: 1;
}
.process-next strong::after { content: " \2192"; }

@media (max-width: 1100px) and (min-width: 901px) {
  .process-step { grid-template-columns: minmax(0, 1fr) 230px; column-gap: 28px; }
  .process-cols { grid-template-columns: 1fr; margin-left: 96px; gap: 18px; }
  .process-next { padding: 24px 22px 32px; font-size: 15px; }
}
@media (max-width: 900px) {
  .process-step { display: block; padding: 26px 20px 30px; }
  .process-num, .process-num.cyan, .process-num.coral, .process-num.lavender { width: 58px; height: 58px; font-size: 30px; }
  .process-head { align-items: flex-start; }
  .process-head h3 { padding: 12px 30px 16px 16px; }
  .process-cols { margin-left: 0; }
  .process-next { max-width: 300px; margin: 26px auto 0; }
}


/* ---------- On set photo sections (20 Oct 2026) ----------
   A bento of real CCM shoot photos. The first photo is the big one and carries the tape label.
   onset-1 / onset-4 / onset-5 / onset-7 set the layout for that number of photos. */
.onset h2 { margin-bottom: 36px; }
.onset-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(170px, 17vw, 250px); }
.onset-fig { position: relative; margin: 0; border-radius: 8px; overflow: visible; min-width: 0; }
.onset-fig img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px; box-shadow: 0 14px 28px -18px rgba(0,0,0,.45); }
.onset-fig figcaption { position: absolute; left: 12px; bottom: 12px; max-width: calc(100% - 24px); background: rgba(20,20,20,.82); color: #fff; font-size: 13px; line-height: 1.3; padding: 6px 10px; border-radius: 4px; }
.onset-fig .ex-tape { left: 28px; transform: rotate(-3deg); font-size: 14px; padding: 8px 16px; white-space: nowrap; }
.onset-grid > .onset-fig:first-child { grid-column: span 2; grid-row: span 2; }
.onset-4 > .onset-fig:nth-child(4) { grid-column: span 3; }
.onset-5 > .onset-fig:nth-child(5) { grid-column: span 2; }
.onset-7 > .onset-fig:nth-child(7) { grid-column: span 3; }
.onset-1 { grid-template-columns: 1fr; grid-auto-rows: clamp(260px, 38vw, 560px); }
.onset-1 > .onset-fig:first-child { grid-column: auto; grid-row: auto; }
.onset-1 .onset-fig img { object-position: center 40%; }
/* one deliberately tilted box per layout */
.onset-grid > .onset-fig:nth-child(3) { transform: rotate(1.4deg); }
@media (max-width: 900px) {
  .onset-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 44vw; gap: 12px; }
  .onset-grid > .onset-fig:first-child { grid-column: span 2; grid-row: span 1; }
  .onset-4 > .onset-fig:nth-child(4) { grid-column: span 2; }
  .onset-5 > .onset-fig:nth-child(5), .onset-7 > .onset-fig:nth-child(7) { grid-column: span 1; }
  .onset-1 { grid-template-columns: 1fr; grid-auto-rows: 66vw; }
  .onset-1 > .onset-fig:first-child { grid-column: auto; }
  .onset-fig figcaption { font-size: 12px; left: 8px; bottom: 8px; }
  .onset-grid > .onset-fig:nth-child(3) { transform: none; }
}
/* tape label: pinned to the top-left corner of the first photo, clear of the heading */
.onset .onset-grid .onset-fig .ex-tape { left: 18px; right: auto; top: -15px; transform: rotate(-3deg); max-width: calc(100% - 36px); overflow: hidden; text-overflow: ellipsis; }
.onset h2 { margin-bottom: 44px; }
@media (max-width: 900px) { .onset .onset-grid .onset-fig .ex-tape { font-size: 12px; padding: 6px 12px; left: 12px; top: -12px; } .onset h2 { margin-bottom: 30px; } }


/* ---------- Wide cinema films (2.35:1), e.g. "Are you in logistics?" on Logistics (20 Oct 2026) ----------
   The YouTube still is 4:3 with black bars; "cover" on a 2.35:1 box shows just the picture. */
.video-placeholder.yt-cine { aspect-ratio: 2.35 / 1; background-size: cover; background-position: center; border: 0; }
.lg-film { padding-top: 8px; }
.lg-film-head { display: grid; gap: 6px; max-width: 760px; margin-bottom: 36px; }
.lg-film-head h2 { margin: 0; }
.lg-film-head .lead { margin: 0; }
.lg-film-wrap { position: relative; }
.lg-film-wrap .ex-tape { left: 24px; top: -16px; transform: rotate(-2.5deg); font-size: 14px; padding: 8px 16px; white-space: nowrap; }
.lg-film-wrap .video-placeholder, .lg-film-wrap .video-frame { box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
@media (max-width: 900px) { .lg-film-wrap .ex-tape { font-size: 12px; padding: 6px 12px; left: 12px; top: -12px; } .lg-film-head { margin-bottom: 26px; } }
.lg-film-wrap .ex-tape { color: var(--ink); }


/* ---------- How we work: additions from the client guide (20 Oct 2026) ---------- */
.mini-steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.mini-steps li { display: flex; align-items: center; gap: 8px; background: var(--cream); border-radius: 999px; padding: 6px 14px 6px 6px; font-weight: 600; font-size: 15px; }
.mini-steps li span { width: 26px; height: 26px; border-radius: 50%; background: var(--coral); display: grid; place-items: center; font-family: var(--font-hand); font-size: 20px; line-height: 1; }
.mini-steps li + li::before { content: "92"; margin: 0 4px 0 -2px; order: -1; display: none; }
.prep-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; margin-top: 36px; }
.prep-card { background: var(--white); border-radius: 12px; padding: 30px 28px 26px; position: relative; min-width: 0; box-shadow: 0 14px 30px -20px rgba(0,0,0,.35); }
.prep-card:nth-child(2) { transform: rotate(-1.2deg); }
.prep-card h3 { margin: 6px 0 14px; font-size: 22px; }
.prep-n { font-family: var(--font-hand); font-size: 44px; line-height: 1; display: block; }
.prep-note { position: absolute; right: -10px; top: -78px; width: 230px; aspect-ratio: 1; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 26px 24px 34px; font-family: var(--font-hand); font-size: 26px; line-height: 1.1; background: url(../images/sticky/postit-1.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 10px 12px rgba(0,0,0,.2)); transform: rotate(4deg); box-sizing: border-box; }
.if-change { margin-top: 34px; padding: 22px 24px; border: 2px dashed rgba(255,255,255,.35); border-radius: 12px; max-width: 820px; }
.if-change h3 { margin: 0 0 6px; color: var(--cyan); font-size: 20px; }
.if-change p { margin: 0; }
@media (max-width: 1100px) { .prep-note { position: static; transform: rotate(-2deg); margin: 6px auto 0; grid-column: 1 / -1; width: 220px; } }
@media (max-width: 900px) { .prep-grid { grid-template-columns: 1fr; } .prep-card:nth-child(2) { transform: none; } }
.prep-card .why-list { gap: 10px; }
@media (min-width: 1101px) { .prep-note { top: -215px; right: 30px; width: 205px; font-size: 24px; } }

/* ---------- Consent buttons, form thanks and spam trap (21 Oct 2026) ---------- */
.cookie-notice a { color: var(--cyan); }
.cookie-btns { display: flex; gap: 10px; flex: none; flex-wrap: wrap; }
.cookie-notice .btn-outline { color: var(--white); border-color: var(--white); background: transparent; padding: 9px 18px; font-size: 15px; cursor: pointer; }
.cookie-notice .btn-outline:hover { background: var(--white); color: var(--ink); }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.form-thanks { background: var(--white); border: 2px solid var(--ink); border-radius: 18px; padding: 32px 28px; }
.form-thanks h3 { margin: 0 0 10px; }
.form-thanks p { margin: 0; }

/* Hidden headings for screen readers and search engines (added 26 Oct 2026) */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }