/* Cathy Teesdale website prototype: shared styles for every page.
   Sizes match Figma at 1920 / 1024 / 390 and keep growing on bigger screens. */
:root {
  --teal: #19616B;
  --dark: #2C3636;
  --panel: #D9D9D9;
  --ink: #1F2626;
  --light-text: #D2E4E6;
  --off-white: #F5F5F5;
  --max: clamp(1024px, 78.125vw, 2400px);
  --pad-x: 30px;
  --pad-x-tablet: 24px;
  --pad-x-mobile: 20px;

  --cta-hover-light: #0e3b41;   /* CTA text/arrow hover colour on light backgrounds */
  --cta-hover-dark: #8fd6cf;    /* CTA text/arrow hover colour on dark backgrounds */

  --page-bg: #ffffff;
  --page-text: var(--ink);

  /* type scale: 16pt body, 22pt headings, 36pt top-block heading; all grow past 1920 */
  --body: clamp(16px, 0.8333vw, 28px);
  --h2: clamp(22px, 1.1458vw, 38px);
  --h-top: clamp(36px, 1.875vw, 60px);
}
* { box-sizing: border-box; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0;
  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--page-bg);
  color: var(--page-text);
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Linked images: a gentle fade on hover so they read as clickable */
a.img-link { display: block; }
a.img-link img { transition: opacity .2s ease; }
a.img-link:hover img, a.img-link:focus-visible img { opacity: .88; }

/* ================= NAV ================= */
.site-nav { background: var(--teal); color: var(--off-white); }
.site-nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 89px; padding: 12px var(--pad-x);
  width: 100%; box-sizing: border-box;
}
.site-nav__logo { font-weight: 100; font-size: clamp(28px, 2.0833vw, 64px); text-decoration: none; color: var(--off-white); white-space: nowrap; }
.site-nav__links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.site-nav__item { display: flex; align-items: center; gap: 5px; }
.site-nav__item::after { content: ""; width: 1px; height: 18px; background: var(--off-white); }
.site-nav__link {
  display: inline-block;
  font-size: clamp(14px, 0.7292vw, 22.4px); font-weight: 200; text-decoration: none; color: var(--off-white);
  opacity: .65; padding: 3px 0;
  transition: opacity .15s ease, transform .15s ease;
}
.site-nav__link[aria-current="page"] { font-weight: 400; opacity: 1; }
.site-nav__link:hover, .site-nav__link:focus-visible { opacity: 1; transform: translateY(-3px); }
.site-nav__social-row { display: flex; align-items: center; }
.site-nav__social { display: block; width: 19px; height: 19px; transition: opacity .15s ease; }
.site-nav__social svg { display: block; width: 100%; height: 100%; }
.site-nav__social:hover, .site-nav__social:focus-visible { opacity: .7; }
.site-nav__toggle { display: none; background: none; border: 0; padding: 8px; color: var(--off-white); cursor: pointer; }
.site-nav__toggle svg { width: 26px; height: 26px; display: block; }

@media (max-width: 900px) {
  .site-nav__inner { flex-wrap: wrap; min-height: 72px; padding: 12px var(--pad-x-mobile); }
  .site-nav__logo { font-size: 28px; }
  .site-nav__toggle { display: block; }
  .site-nav__panel { display: none; width: 100%; }
  .site-nav.is-open .site-nav__panel { display: block; }
  .site-nav__links { flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 0 16px; }
  .site-nav__item { width: 100%; }
  .site-nav__item::after { display: none; }
  .site-nav__link { display: block; width: 100%; padding: 10px 0; font-size: 16px; }
  .site-nav__social-row { margin-top: 8px; }
}

/* ================= HERO ================= */
.hero { background: #D9D9D9; }
.hero__image { width: 100%; aspect-ratio: 1920 / 780; }
@media (max-width: 1024px) { .hero__image { aspect-ratio: 1920 / 1119; } }
.hero__dots { display: flex; justify-content: center; gap: 5px; padding: 40px 0 30px; }
.hero__dots span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--teal); }
.hero__dots span:first-child { background: var(--teal); }

/* ================= STICKY BLOCKS =================
   A sticky block scrolls until its bottom (and CTA) is on screen, then pins
   while every later block rolls up over it (top offset set in site.js). */
[data-sticky] { position: sticky; top: 0; z-index: 1; }
[data-sticky] ~ section, [data-sticky] ~ footer, [data-sticky] ~ aside {
  position: relative; z-index: 2;
  -webkit-transform: translateZ(0); transform: translateZ(0);
}

/* ================= 2 COLUMN TEXT BOX (heading + body, quote on the right) ================= */
.welcome { background: var(--panel); }
.welcome__inner {
  max-width: var(--max); margin: 0 auto; padding: 100px var(--pad-x) 150px;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; row-gap: 0;
}
.welcome__copy { display: contents; }
.welcome__copy h1, .welcome__copy h2 { grid-column: 1; grid-row: 1; font-weight: 200; font-size: var(--h-top); margin: 0 0 45px; }
.welcome__body { grid-column: 1; grid-row: 2; }
.welcome__copy p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 16px; color: var(--ink); }
/* The quote is centred on the 16pt body text only. The last paragraph's bottom
   margin is removed so it doesn't pad the box and push the quote low. */
.welcome__body > :last-child { margin-bottom: 0; }
.welcome__quote { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: center; align-self: center; }
.welcome__quote blockquote {
  margin: 0; max-width: clamp(300px, 23.4375vw, 780px); font-weight: 100; font-size: clamp(28px, 1.6667vw, 52px); line-height: 1.3; color: #000;
}
/* Heading-only version (News & events page title) */
.welcome--title .welcome__inner { padding-bottom: 20px; }
.welcome--title .welcome__copy h1 { margin-bottom: 0; }
@media (max-width: 1024px) {
  .welcome__inner { padding: 114px 24px 150px; }
  .welcome__quote blockquote { font-size: 26px; max-width: 294px; }
  .welcome--title .welcome__inner { padding-bottom: 20px; }
}
@media (max-width: 700px) {
  .welcome__inner { grid-template-columns: 1fr; padding: 90px 20px 150px; }
  .welcome__quote { grid-column: 1; grid-row: 3; margin-top: 32px; justify-content: center; }
  .welcome__quote blockquote { font-size: 30px; text-align: center; margin: 0 auto; }
  .welcome--title .welcome__inner { padding-bottom: 10px; }
}

/* ================= CTA link (used across dark & light blocks) ================= */
.cta-link {
  display: inline-flex; align-items: center; gap: 15px; text-decoration: none;
  font-weight: 300; font-size: clamp(16px, 0.8333vw, 25.6px); color: inherit;
  transition: opacity .15s ease, color .15s ease;
}
.cta-link svg { width: 39px; height: 16px; transition: transform .15s ease; flex: none; }
.cta-link svg path { stroke: currentColor; }
.cta-link:hover, .cta-link:focus-visible { opacity: .85; }
.cta-link:hover svg, .cta-link:focus-visible svg { transform: translateX(6px); }
.cta-row { display: flex; justify-content: flex-end; }
.on-dark .cta-link:hover, .on-dark .cta-link:focus-visible { color: var(--cta-hover-dark); }
.on-light .cta-link { color: var(--ink); }
.on-light .cta-link:hover, .on-light .cta-link:focus-visible { color: var(--cta-hover-light); }

/* ================= CTA BAR (contact strip above the footer) ================= */
.cta-bar { background: var(--teal); color: var(--off-white); }
.cta-bar__inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad-x); min-height: 80px;
  display: flex; align-items: center; justify-content: flex-end;
}
.cta-bar .cta-link { color: var(--off-white); opacity: .8; }
.cta-bar .cta-link:hover, .cta-bar .cta-link:focus-visible { opacity: 1; }
.cta-bar .cta-link:focus-visible { outline-color: var(--off-white); }
@media (max-width: 1024px) { .cta-bar__inner { padding: 0 24px; } }
@media (max-width: 700px) { .cta-bar__inner { padding: 0 20px; } }

/* ================= IMAGE CAROUSEL (dark) ================= */
.carousel-block { background: var(--dark); color: var(--light-text); }
.carousel-block__inner { max-width: var(--max); margin: 0 auto; padding: 128px var(--pad-x) 220px; }
.carousel-block h2 { font-weight: 200; font-size: var(--h2); margin: 0 0 45px; color: var(--off-white); }
.carousel-block p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 14px; }
.carousel-media { position: relative; }
.carousel-block__image { display: block; width: 100%; aspect-ratio: 1120 / 432; margin: 24px 0 0; }
.carousel-block__dots {
  position: absolute; left: 50%; top: calc(100% + 45px); transform: translate(-50%, -50%);
  display: flex; gap: 5px; align-items: center; margin: 0;
}
.carousel-block__dots span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #2DB2C4; }
.carousel-block__dots span:first-child { background: #2DB2C4; }
.carousel-block .cta-row {
  position: absolute; right: 0; top: calc(100% + 122px); transform: translateY(-50%);
  gap: 48px; flex-wrap: wrap;
}
@media (max-width: 1024px) { .carousel-block__inner { padding: 106px 24px 220px; } }
@media (max-width: 700px) {
  .carousel-block__inner { padding: 90px 20px 220px; }
  .carousel-block__image { aspect-ratio: 350 / 216; }
  .carousel-block .cta-row { gap: 18px 32px; }
}
/* the sticky one gets 50px more room under the CTA */
.carousel-block[data-sticky] .carousel-block__inner { padding-bottom: 270px; }

/* ================= 4 IMAGES ================= */
.four { background: var(--panel); }
.four--dark { border-left: 30px solid var(--dark); border-right: 30px solid var(--dark); border-top: 30px solid var(--dark); }
.four__panel { max-width: var(--max); margin: 0 auto; padding: 128px 30px 70px; }
.four--no-heading .four__panel { padding-top: 0; }
.four__panel h1 { font-weight: 200; font-size: var(--h-top); margin: 0 0 45px; color: var(--ink); }
.four__panel h2 { font-weight: 200; font-size: var(--h2); margin: 0 0 45px; color: var(--ink); }
.four__panel p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 14px; color: var(--ink); }
.four__panel .cta-row { margin-top: 50px; }
.four__grid { display: flex; gap: 22px; margin: 24px 0; }
.four__grid > * { flex: 1; min-width: 0; }
.four__grid img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (max-width: 1024px) { .four__panel { padding: 106px 24px 70px; } }
@media (max-width: 700px) {
  .four--dark { border-left-width: 20px; border-right-width: 20px; }
  .four__panel { padding: 90px 20px 74px; }
  .four__grid { flex-wrap: wrap; gap: 12px; }
  .four__grid > * { flex: 1 1 calc(50% - 6px); }
}

/* ================= 5 IMAGE PORTRAIT GALLERY ================= */
.five { background: var(--panel); }
.five__inner { max-width: var(--max); margin: 0 auto; padding: 128px var(--pad-x) 70px; }
.five__inner h2 { font-weight: 200; font-size: var(--h2); margin: 0 0 45px; color: var(--ink); }
.five__inner p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 14px; color: var(--ink); }
.five__grid { display: flex; gap: 33px; margin: 30px 0; }
.five__grid > * { flex: 1; min-width: 0; }
.five__grid img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.five__inner .cta-row { margin-top: 50px; }
@media (max-width: 1024px) { .five__inner { padding: 106px 24px 70px; } .five__grid { gap: 22px; } }
@media (max-width: 700px) {
  .five__inner { padding: 90px 20px 74px; }
  .five__grid { flex-wrap: wrap; gap: 12px; }
  .five__grid > * { flex: 1 1 calc(33.333% - 8px); }
  .five__grid > :nth-child(4), .five__grid > :nth-child(5) { flex: 1 1 calc(50% - 6px); }
}

/* ================= 2 COLUMN IMAGE + TEXT (image left or right) ================= */
.split { background: var(--panel); }
.split--dark { border-left: 30px solid var(--dark); border-right: 30px solid var(--dark); }
.split__panel { max-width: var(--max); margin: 0 auto; padding: 128px 30px 90px; }
.split__panel h1 { font-weight: 200; font-size: var(--h-top); margin: 0 0 45px; color: var(--ink); }
.split__panel h2 { font-weight: 200; font-size: var(--h2); margin: 0 0 45px; color: var(--ink); }
.split__row { display: flex; gap: 60px; align-items: flex-start; }
.split--right .split__row { flex-direction: row-reverse; }
.split__image { flex: 0 0 clamp(400px, 33.75vw, 1050px); aspect-ratio: 648 / 491; }  /* 648 x 491 at 1920 */
.split__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.split__text { flex: 1; min-width: 0; }
.split__text p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 14px; color: var(--ink); }
.split__cta-row { display: flex; justify-content: flex-end; margin-top: 95px; }
.split__divider { height: 1px; background: var(--ink); margin-top: 45px; }
.split__divider--no-cta { margin-top: 119px; }
@media (max-width: 1024px) { .split__panel { padding: 106px 24px 82px; } .split__row { gap: 40px; } .split__image { flex: 1; } }
@media (max-width: 700px) {
  .split--dark { border-left-width: 20px; border-right-width: 20px; }
  .split__panel { padding: 90px 20px 74px; }
  .split__row { flex-direction: column; gap: 24px; }
  .split--right .split__row { flex-direction: column-reverse; }
  .split__image { flex: none; width: 100%; }
  .split__cta-row { margin-top: 75px; }
  .split__divider--no-cta { margin-top: 99px; }
}

/* ================= 2 COLUMN IMAGE + TEXT, LANDSCAPE (Collages page) ================= */
.land { background: var(--panel); border-left: 30px solid var(--dark); border-right: 30px solid var(--dark); }
.land--top { border-top: 30px solid var(--dark); }
.land__panel { max-width: var(--max); margin: 0 auto; background: var(--panel); padding: 128px 30px 90px; }
.land__panel h2 { font-weight: 200; font-size: var(--h2); margin: 0 0 45px; color: var(--ink); }
.land__row { display: flex; gap: 60px; align-items: flex-start; }
.land__image { flex: 1.4; aspect-ratio: 2.585 / 1; }
.land__text { flex: 1; }
.land__text p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 14px; color: var(--ink); }
.land__cta-row { display: flex; justify-content: flex-end; margin-top: 95px; }
.land__divider { height: 1px; background: var(--ink); margin: 45px 0 0; }
@media (max-width: 1024px) { .land__panel { padding: 106px 24px 82px; } .land__row { gap: 40px; } }
@media (max-width: 700px) {
  .land { border-left-width: 20px; border-right-width: 20px; }
  .land__panel { padding: 90px 20px 74px; }
  .land__row { flex-direction: column; gap: 24px; }
  .land__image { width: 100%; }
  .land__cta-row { margin-top: 75px; }
}

/* ================= WIDE IMAGE (landscape block, text column off) ================= */
.wide { background: var(--panel); }
.wide__panel { max-width: var(--max); margin: 0 auto; padding: 100px 30px 150px; }
.wide__panel h2 { font-weight: 200; font-size: var(--h2); margin: 0 0 45px; color: var(--ink); }
.wide__image { width: 100%; aspect-ratio: 1500 / 580; }
.wide__image img { width: 100%; height: 100%; object-fit: cover; }
.wide__panel .cta-row { margin-top: 95px; }
@media (max-width: 1024px) { .wide__panel { padding: 106px 24px 120px; } }
@media (max-width: 700px) { .wide__panel { padding: 90px 20px 100px; } .wide__image { aspect-ratio: 350 / 216; } .wide__panel .cta-row { margin-top: 75px; } }

/* ================= FULL LENGTH PARAGRAPH ================= */
.full-para { background: var(--panel); }
.full-para__inner { max-width: var(--max); margin: 0 auto; padding: 80px var(--pad-x); }
.full-para p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 14px; color: var(--ink); }
@media (max-width: 1024px) { .full-para__inner { padding: 80px 24px; } }
@media (max-width: 700px) { .full-para__inner { padding: 80px 20px; } }

/* ================= NEWS AND STORIES ================= */
.news { background: var(--panel); }
.news__inner { max-width: var(--max); margin: 0 auto; padding: 125px var(--pad-x) 110px; }
.news--flush .news__inner { padding-top: 50px; }
.news__inner h2 { font-weight: 200; font-size: var(--h2); margin: 0 0 45px; color: var(--ink); }
.news__featured { display: flex; gap: 60px; margin-bottom: 40px; }
.news__featured img, .news__cards img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.news__featured > * { flex: 1; min-width: 0; }
/* featured image is exactly the same size as each of the three story images (cards gap 55px) */
.news__featured > :first-child { flex: 0 0 calc((100% - 110px) / 3); }
.news__featured + .news__featured { margin-top: 80px; }
.news__featured h3 { font-weight: 300; font-size: clamp(16px, 0.8333vw, 28px); margin: 0 0 14px; color: var(--ink); }
.news__featured p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 14px; color: var(--ink); }
.news__cards { display: flex; align-items: flex-start; gap: 55px; margin-bottom: 40px; }
.news__cards + .news__cards { margin-top: 140px; }
.news__featured + .news__cards { margin-top: 80px; }
.news__cards > * { flex: 1; min-width: 0; }
.news__cards h3 { font-weight: 300; font-size: clamp(16px, 0.8333vw, 28px); line-height: 1.4; margin: 40px 0 14px; color: var(--ink); }
.news__cards p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0; color: var(--ink); overflow-wrap: break-word; }
.news__divider { height: 1px; background: var(--dark); margin: 80px 0 100px; }
.news__cta-row { display: flex; justify-content: flex-end; margin-top: 50px; }
@media (max-width: 1024px) {
  .news__inner { padding: 106px 24px 70px; }
  .news--flush .news__inner { padding-top: 50px; }
  .news__featured, .news__cards { gap: 32px; }
  .news__featured > :first-child { flex: 0 0 calc((100% - 64px) / 3); }
}
@media (max-width: 700px) {
  .news__inner { padding: 90px 20px 74px; }
  .news--flush .news__inner { padding-top: 40px; }
  .news__featured { flex-direction: column; gap: 45px; }
  .news__featured > :first-child { flex: none; width: 100%; }
  .news__cards { flex-direction: column; gap: 40px; }
  .news__cards + .news__cards, .news__featured + .news__cards { margin-top: 40px; }
  .news__cards h3 { margin-top: 45px; }
  .news__divider { margin: 50px 0 70px; }
}

/* ================= FOOTER ================= */
.footer { background: var(--dark); color: var(--light-text); }
.footer__inner {
  width: 100%; margin: 0; padding: 50px var(--pad-x);
  display: flex; justify-content: space-between; gap: 40px;
}
.footer h2 { font-weight: 300; font-size: clamp(14px, 0.7292vw, 22.4px); margin: 0 0 14px; color: var(--light-text); }
.footer__sitemap { display: flex; gap: 32px; }
.footer__sitemap ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__link {
  font-size: 13px; font-weight: 200; text-decoration: none; color: var(--light-text);
  padding-bottom: 1px; border-bottom: 1px solid transparent; transition: opacity .15s ease, border-color .15s ease;
}
.footer__link:hover, .footer__link:focus-visible { opacity: .75; border-bottom-color: currentColor; }
.footer__contact { text-align: right; }
.footer__contact .brand { font-weight: 100; font-size: 24px; margin-bottom: 8px; }
.footer__contact a.email { font-size: clamp(14px, 0.7292vw, 22.4px); font-weight: 200; text-decoration: none; color: var(--light-text); border-bottom: 1px solid transparent; transition: opacity .15s ease, border-color .15s ease; }
.footer__contact a.email:hover, .footer__contact a.email:focus-visible { opacity: .75; border-bottom-color: currentColor; }
.footer__social { display: flex; justify-content: flex-end; gap: 12px; margin-top: 12px; }
.footer__social a { transition: opacity .15s ease; }
.footer__social a:hover, .footer__social a:focus-visible { opacity: .7; }
@media (max-width: 700px) {
  .footer__inner { flex-direction: column; padding: 40px var(--pad-x-mobile); }
  .footer__contact { order: -1; text-align: left; }
  .footer__social { justify-content: flex-start; }
  .footer__sitemap { flex-wrap: wrap; gap: 20px; }
  .footer__sitemap ul { flex: 1 1 calc(33% - 14px); }
}

/* ================= MOBILE TYPE (+2pt on everything that isn't 16pt body) ================= */
@media (max-width: 700px) {
  :root { --h2: 24px; --h-top: 32px; }
  .site-nav__logo { font-size: 30px; }
  .site-nav__link { font-size: 18px; }
  .cta-link { font-size: 18px; }
  .news__featured h3, .news__cards h3 { font-size: 18px; }
  .footer h2 { font-size: 16px; }
  .footer__link { font-size: 15px; }
  .footer__contact a.email { font-size: 16px; }
  .footer__contact .brand { font-size: 26px; }
}

/* ================= RED REBEL FLIP BOOK ================= */
/* Red Rebel flip book: shared by the Red Rebel block (homepage, Projects, News) and red-rebel-preview.html */
.flip { margin-top: 45px; }
.flip__stage { position: relative; }
/* Book is two landscape pages side by side; height capped so a spread fits the screen */
.flip__book {
  position: relative; margin: 0 auto;
  width: min(100%, calc((100vh - 170px) * 2 * 1600 / 1240));
  aspect-ratio: 3200 / 1240;
  perspective: 3000px;
}
.flip__shift { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.4,.1,.2,1); }
/* one soft shadow under whichever pages are showing */
.flip__shift::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); transition: left .9s cubic-bezier(.4,.1,.2,1), right .9s cubic-bezier(.4,.1,.2,1);
}
.flip__book[data-at="start"] .flip__shift::before { left: 50%; }
.flip__book[data-at="end"] .flip__shift::before { right: 50%; }
.flip__book[data-at="start"] .flip__shift { transform: translateX(-25%); }
.flip__book[data-at="end"] .flip__shift { transform: translateX(25%); }
.flip__leaf {
  position: absolute; top: 0; left: 50%; width: 50%; height: 100%;
  transform-origin: left center; transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.4,.1,.2,1);
  cursor: pointer;
}
.flip__leaf.is-flipped { transform: rotateY(-180deg); }
.flip__face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff; overflow: hidden;
}
.flip__face--back { transform: rotateY(180deg); }
.flip__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* soft shading at the spine */
.flip__face::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; }
.flip__face--front::after { left: 0; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,0)); }
.flip__face--back::after { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.28), rgba(0,0,0,0)); }
/* outer covers have no spine shading */
.flip__leaf:first-child .flip__face--front::after,
.flip__leaf:last-child .flip__face--back::after { display: none; }

/* arrows: either side of the book on wide screens, below it otherwise */
.flip__arrow {
  background: none; border: 0; padding: 0; width: 56px; height: 56px; cursor: pointer;
  color: var(--light-text); opacity: .6; display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .15s ease, transform .15s ease;
}
.flip__arrow svg { width: 40px; height: 16px; display: block; }
.flip__arrow:hover:not(:disabled), .flip__arrow:focus-visible { opacity: 1; }
.flip__arrow--next:hover:not(:disabled) { transform: translateX(4px); }
.flip__arrow--prev:hover:not(:disabled) { transform: translateX(-4px); }
.flip__arrow:disabled { opacity: .18; cursor: default; }
.flip__arrow--side { position: absolute; top: 50%; margin-top: -28px; }
.flip__arrow--side.flip__arrow--prev { right: calc(100% + 44px); }
.flip__arrow--side.flip__arrow--next { left: calc(100% + 44px); }

.flip__controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; min-height: 56px; }
.flip__controls .flip__arrow { display: none; }
.flip__dots { display: flex; gap: 5px; list-style: none; margin: 0; padding: 0; }
.flip__dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: var(--panel); transition: background .15s ease, transform .15s ease;
}
.flip__dots button:hover { transform: scale(1.25); }
.flip__dots button[aria-current="true"] { background: #2DB2C4; }
.flip__count { display: none; font-weight: 300; font-size: 18px; min-width: 72px; text-align: center; }

/* single page viewer (phones) */
.flip__single { display: none; position: relative; overflow: hidden; touch-action: pan-y; box-shadow: 0 24px 60px rgba(0,0,0,.45); background: #fff; }
.flip__track { display: flex; transition: transform .45s cubic-bezier(.4,.1,.2,1); will-change: transform; }
.flip__track > div { flex: 0 0 100%; aspect-ratio: 1600 / 1240; background: #e9e9e9; }
.flip__track img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* In the Red Rebel block the book replaces the carousel image, so the block lays out in flow */
.carousel-block--flip .carousel-block__inner { padding-bottom: 128px; }
.carousel-block--flip .flip { margin-top: 24px; }
.carousel-block--flip .cta-row { position: static; transform: none; margin-top: 40px; }
@media (max-width: 1024px) { .carousel-block--flip .carousel-block__inner { padding-bottom: 106px; } }
@media (max-width: 700px) { .carousel-block--flip .carousel-block__inner { padding-bottom: 90px; } }

@media (max-width: 1240px) {
  .flip__arrow--side { display: none; }
  .flip__controls .flip__arrow { display: inline-flex; }
}
@media (max-width: 1024px) { .flip__controls { margin-top: 22px; } }
@media (max-width: 700px) {
  .flip__book { display: none; }
  .flip__single { display: block; }
  .flip__dots { display: none; }
  .flip__count { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .flip__leaf, .flip__shift, .flip__track { transition: none !important; }
}

/* 2026-10-09: a short cards row keeps its card widths; Weddings phone hero is the portrait crop (Figma 390 x 420) */
.news__spacer { visibility: hidden; }
.hero__image picture { display: block; width: 100%; height: 100%; }
@media (max-width: 700px) {
  .news__spacer { display: none; }
  .hero--tall-mobile .hero__image { aspect-ratio: 390 / 420; }
  .five__grid > :nth-child(4), .five__grid > :nth-child(5) { flex: 0 1 calc(33.333% - 8px); }
}

/* ================= 2026-10-12: sticky nav ================= */
/* The nav stays at the top of the screen. --nav-h is measured in site.js; sticky blocks pin just below it. */
.site-nav { position: sticky; top: 0; z-index: 100; }
.site-nav__item:nth-last-child(2)::after { display: none; }   /* no line between Contact and the LinkedIn icon */
html { scroll-padding-top: calc(var(--nav-h, 89px) + env(safe-area-inset-top, 0px)); }
[data-sticky] { top: var(--nav-h, 0px); }
@media (max-width: 900px) {
  .site-nav.is-open .site-nav__panel { max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; }
}

/* Story titles link to their article */
.card-link { color: inherit; text-decoration: none; transition: color .15s ease; }
.card-link:hover, .card-link:focus-visible { color: var(--cta-hover-light); }

/* ================= BLOG ARTICLE BLOCKS ================= */
/* Every block sits on the light panel with 50px above and below, so blocks stack in any order. */
.article-block { background: var(--panel); }
.article-block__inner { max-width: var(--max); margin: 0 auto; padding: 50px var(--pad-x); }
.article-block h2 { font-weight: 200; font-size: var(--h2); margin: 0 0 45px; color: var(--ink); }
.article-block p { font-weight: 200; font-size: var(--body); line-height: 1.6; margin: 0 0 16px; color: var(--ink); }
.article-block p:last-child { margin-bottom: 0; }
.article-block figure { margin: 0; }
.article-block figcaption { font-weight: 200; font-size: clamp(14px, 0.7292vw, 22.4px); line-height: 1.5; color: var(--ink); opacity: .75; margin-top: 14px; }

/* Header */
.article-block--head .article-block__inner { padding-top: 100px; }
.cta-link--back { margin-bottom: 45px; }
.cta-link--back:hover svg, .cta-link--back:focus-visible svg { transform: translateX(-6px); }
.article-block--head h1 { font-weight: 200; font-size: var(--h-top); margin: 0 0 20px; color: var(--ink); max-width: 66.666%; }
.article-head__meta { display: flex; gap: 12px; font-weight: 300 !important; font-size: clamp(14px, 0.7292vw, 22.4px) !important; margin: 0 0 45px !important; }
.article-head__meta span::before { content: ""; display: inline-block; width: 1px; height: .9em; background: currentColor; margin-right: 12px; vertical-align: -1px; }
.article-block .article-head__standfirst { font-weight: 100; font-size: clamp(24px, 1.25vw, 40px); line-height: 1.35; max-width: 66.666%; margin: 0; }

/* Lead image: full width like the page heroes */
.article-block--hero { padding: 50px 0; }
.article-hero__image { width: 100%; aspect-ratio: 1920 / 780; }
.article-hero figcaption { max-width: var(--max); margin: 14px auto 0; padding: 0 var(--pad-x); }

/* Body text: readable column */
.article-text { max-width: 66.666%; }

/* Pull quote */
.article-quote { max-width: 66.666%; margin: 0 auto !important; text-align: center; padding: 50px 0; border-top: 1px solid var(--dark); border-bottom: 1px solid var(--dark); }
.article-quote blockquote { margin: 0; font-weight: 100; font-size: clamp(28px, 1.6667vw, 52px); line-height: 1.3; color: #000; }
.article-quote figcaption { margin-top: 24px; }

/* Single image, pair, gallery */
.article-figure img { width: 100%; height: auto; }
.article-pair { display: flex; gap: 33px; }
.article-pair > * { flex: 1; min-width: 0; }
.article-pair img { aspect-ratio: 3 / 2; object-fit: cover; }
.article-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* Video */
.article-video__frame { position: relative; aspect-ratio: 16 / 9; background: var(--dark); }
.article-video__frame img { opacity: .8; }
.article-video__play { position: absolute; inset: 0; margin: auto; width: clamp(64px, 4.1667vw, 120px); height: clamp(64px, 4.1667vw, 120px); padding: 0; border: 0; background: none; color: var(--off-white); cursor: pointer; transition: transform .2s ease; }
.article-video__play:hover, .article-video__play:focus-visible { transform: scale(1.08); }
.article-video__play svg { width: 100%; height: 100%; display: block; }

/* Key details */
.article-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin: 0; padding: 30px 0; border-top: 1px solid var(--dark); border-bottom: 1px solid var(--dark); }
.article-facts dt { font-weight: 300; font-size: clamp(14px, 0.7292vw, 22.4px); margin-bottom: 6px; color: var(--ink); }
.article-facts dd { margin: 0; font-weight: 200; font-size: var(--body); color: var(--ink); }

/* Blog blocks guide: a label above each block */
.block-label { background: var(--teal); color: var(--off-white); }
.block-label__inner { max-width: var(--max); margin: 0 auto; padding: 14px var(--pad-x); display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; font-size: 14px; font-weight: 200; }
.block-label strong { font-weight: 400; }
.block-label em { font-style: normal; opacity: .85; }
.article-block a:not(.cta-link):not(.img-link) { color: var(--teal); }

@media (max-width: 1024px) {
  .article-block__inner { padding: 50px var(--pad-x-tablet); }
  .article-block--head .article-block__inner { padding-top: 106px; }
  .article-hero figcaption { padding: 0 var(--pad-x-tablet); }
  .article-block--head h1, .article-block .article-head__standfirst, .article-text { max-width: 100%; }
  .article-block .article-head__standfirst { font-size: 26px; }
  .article-quote { max-width: 100%; }
  .article-quote blockquote { font-size: 26px; }
  .article-facts { grid-template-columns: repeat(2, 1fr); }
  .block-label__inner { padding: 14px var(--pad-x-tablet); }
}
@media (max-width: 700px) {
  .article-block__inner { padding: 40px var(--pad-x-mobile); }
  .article-block--head .article-block__inner { padding-top: 90px; }
  .article-hero__image { aspect-ratio: 390 / 300; }
  .article-hero figcaption { padding: 0 var(--pad-x-mobile); }
  .article-block .article-head__standfirst { font-size: 24px; }
  .article-quote blockquote { font-size: 28px; }
  .article-block figcaption, .article-head__meta { font-size: 16px !important; }
  .article-pair { flex-direction: column; gap: 30px; }
  .article-gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .article-facts { gap: 20px; }
  .block-label__inner { padding: 12px var(--pad-x-mobile); }
}
.article-video__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Every phone hero is the portrait 390 x 420 crop, cropped to the centre */
@media (max-width: 700px) { .hero__image { aspect-ratio: 390 / 420; } }

/* ================= 2026-10-21: gallery blocks, dividers and end-of-page gaps (from Figma) ================= */
/* 4 and 5 photo galleries: no intro text, centred dots under the photos, text capped at 700px,
   optional line drawing beside the text (below it on phones) */
.gallery .four__panel h1, .gallery .four__panel h2, .gallery .five__inner h2 { margin-bottom: 58px; }
.gallery .four__grid, .gallery .five__grid { margin: 0; }
.gallery-dots { display: flex; justify-content: center; gap: 5px; margin: 30px 0; }
.gallery-dots span { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--teal); }
.gallery-dots span:first-child { background: var(--teal); }
.gallery-row { display: flex; align-items: flex-start; }
.gallery-row__text { flex: 0 1 700px; min-width: 0; }
.gallery-row__ill { flex: 1; display: flex; justify-content: center; }
.gallery-row__ill img { display: block; width: 340px; max-width: 100%; height: auto; }
@media (max-width: 1024px) {
  .gallery .four__panel h1, .gallery .four__panel h2, .gallery .five__inner h2 { margin-bottom: 50px; }
  .gallery-row { gap: 36px; }
  .gallery-row__ill { justify-content: flex-end; }
  .gallery-row__ill img { width: 180px; }
}
@media (max-width: 700px) {
  .gallery .four__panel h1, .gallery .four__panel h2, .gallery .five__inner h2 { margin-bottom: 40px; }
  .gallery-row { flex-direction: column; align-items: center; gap: 30px; }
  .gallery-row__text { flex: none; width: 100%; }
  .gallery-row__ill { justify-content: center; }
  .gallery-row__ill img { width: 220px; }
}

/* Divider lines: the space from the last text or CTA down to the line matches the space from the line
   to the next block's heading (this block's bottom padding + the next block's 128 / 106 / 90 top padding) */
.block-divider { height: 1px; background: var(--ink); margin-top: 198px; }
.split__divider, .split__divider--no-cta, .land__divider, .wide--divider .block-divider { margin-top: 218px; }
.wide__panel { padding-top: 128px; }
.wide--divider .wide__panel { padding-bottom: 90px; }
@media (max-width: 1024px) {
  .block-divider { margin-top: 176px; }
  .split__divider, .split__divider--no-cta, .land__divider, .wide--divider .block-divider { margin-top: 188px; }
  .wide__panel { padding-top: 106px; }
  .wide--divider .wide__panel { padding-bottom: 82px; }
}
@media (max-width: 700px) {
  .block-divider { margin-top: 164px; }
  .split__divider, .split__divider--no-cta, .land__divider, .wide--divider .block-divider { margin-top: 164px; }
  .wide__panel { padding-top: 90px; }
  .wide--divider .wide__panel { padding-bottom: 74px; }
}

/* Last block before the CTA bar or footer: same gap as that block's divider spacing */
.is-last .four__panel, .is-last .five__inner, .is-last.carousel-block .carousel-block__inner { padding-bottom: 198px; }
.is-last .news__inner { padding-bottom: 208px; }
.is-last .split__panel, .is-last .land__panel, .is-last .wide__panel, .is-last .full-para__inner { padding-bottom: 218px; }
@media (max-width: 1024px) {
  .is-last .four__panel, .is-last .five__inner, .is-last.carousel-block .carousel-block__inner { padding-bottom: 176px; }
  .is-last .news__inner { padding-bottom: 186px; }
  .is-last .split__panel, .is-last .land__panel, .is-last .wide__panel, .is-last .full-para__inner { padding-bottom: 188px; }
}
@media (max-width: 700px) {
  .is-last .four__panel, .is-last .five__inner, .is-last.carousel-block .carousel-block__inner { padding-bottom: 164px; }
  .is-last .news__inner { padding-bottom: 170px; }
  .is-last .split__panel, .is-last .land__panel, .is-last .wide__panel, .is-last .full-para__inner { padding-bottom: 164px; }
}
/* measure gaps from the last line of text, not its paragraph margin */
.split__text > p:last-child, .full-para p:last-child { margin-bottom: 0; }

/* ================= 2026-10-22: text widths that hold their place as the screen narrows ================= */
/* Gallery text (4 and 5 image blocks) and the image carousel intro: 700px at 1920, with the inner edge
   staying a fixed distance from the centre of the page, so the text narrows and the drawing beside it keeps its size */
.gallery-row__text { flex: 0 0 calc(50% - 20px); max-width: none; }
.gallery-row__ill img { width: min(340px, 100%); }
.carousel-block__inner > p { max-width: calc(50% - 20px); }
/* News & stories and Projects: the text beside the first (featured) picture is capped at 700px at 1920 */
.news__featured > :last-child { max-width: 36.4583vw; }
@media (max-width: 1024px) {
  .gallery-row__text { flex: 0 1 700px; }
  .carousel-block__inner > p { max-width: 700px; }
  .news__featured > :last-child { max-width: 700px; }
}
@media (max-width: 700px) {
  .gallery-row__text { flex: none; width: 100%; }
  .carousel-block__inner > p, .news__featured > :last-child { max-width: none; }
}
@media (max-width: 1024px) { .gallery-row__ill img { width: 180px; } }
@media (max-width: 700px) { .gallery-row__ill img { width: 220px; } }

/* 2026-10-22: vector illustrations. Every drawing sits in a 4:3 box (as in Figma), centred
   in the space beside the text and vertically centred on it. */
.gallery-row { align-items: center; }
.gallery-row__ill { justify-content: center; }
.gallery-row__ill img { aspect-ratio: 4 / 3; object-fit: contain; height: auto; }
@media (max-width: 1024px) { .gallery-row__ill { justify-content: center; } }

/* 2026-10-22: carousel block gap from the last paragraph to the image, as in Figma (76/56/32). */
.carousel-block__inner > p:last-of-type { margin-bottom: 0; }
.carousel-block__image, .carousel-block--flip .flip { margin-top: 76px; }
@media (max-width: 1024px) { .carousel-block__image, .carousel-block--flip .flip { margin-top: 56px; } }
@media (max-width: 700px) { .carousel-block__image, .carousel-block--flip .flip { margin-top: 32px; } }

/* 2026-10-22: twice the space under the gallery carousel dots (4 and 5 image blocks) */
.gallery-dots { margin-bottom: 60px; }