/* ==========================================================================
   Site header
   ========================================================================== */

.slice--site-header {
  align-items: center;
  padding-inline: var(--space-s);                /* vertically centre logo + actions */
  padding-block: var(--space-m);
}

/* Right-hand side: CTA + menu button */
.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-xs);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-block: 12px;
  padding-inline: 18px;
  border: 1px solid var(--bg);
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-size: clamp(14px, calc(15.3px + 0.14vw), 18px);
  font-weight: 500;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.header-cta:hover {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--text);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: 50%;
  border: 1px solid var(--colour-light-200);
  cursor: pointer;
  padding: 0;
  background: var(--colour-light-0);
}

/* Base icon size */
.menu-toggle .menu-svg {
  width: 28px;
  height: 28px;
  stroke: var(--colour-light-1000);
}

/* By default: show menu, hide close */
.menu-svg--close {
  display: none;
}

/* When drawer is open: hide menu icon, show close icon */
.nav-disclosure[open] .menu-svg--open {
  display: none;
}

.nav-disclosure[open] .menu-svg--close {
  display: block;
  stroke: #fff !important;
}

/* Hover & open states */
.nav-disclosure:hover .menu-toggle {
  border-color: var(--text);
}

/* When open and over dark drawer, keep the button fixed in same spot */
.nav-disclosure[open] > .menu-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  background: #000;
  border-color: var(--colour-dark-200);
  transition: border-color 0.5s ease;
}

/* Make sure close icon is visible on dark background */
.nav-disclosure[open] .menu-svg--close {
  stroke: #fff;
}

/* Hover & open states */
.nav-disclosure .menu-toggle:hover {
  border-color: var(--colour-light-500);
}

/* ============================================================
   Header buttons in dark mode
   ============================================================ */

.dark .header-cta {
  background: var(--colour-dark-0);                  /* black background */
  color: var(--colour-dark-1000);                        /* white text */
  border: 1px solid var(--colour-dark-500);             /* white border */
}

.dark .header-cta:hover {
  background: var(--colour-dark-blue);                 /* invert on hover */
  color: #fff;
  border-color: var(--colour-dark-0);
  opacity: revert;
}

/* Menu toggle button in dark mode */
.dark .menu-toggle {
  background: var(--colour-dark-0);                    /* black background */
  border: 1px solid var(--colour-dark-500);                   /* white border */
}

.dark .menu-toggle .menu-svg {
  stroke: var(--colour-dark-1000);               /* white icon lines */
}

/* When drawer is open on a dark page */
.dark .nav-disclosure[open] > .menu-toggle {
  background: #000;
  border-color: #fff;
}

.dark .nav-disclosure[open] .menu-svg--close {
  stroke: #fff !important;
}


/* a11y helper if you haven't got one already */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 720px) {
  .slice--site-header {
    padding-block: var(--space-xs);
  }

  .header-actions {
    gap: var(--space-s);
  }


}

/* Default logo colour */
.logo-link .logo {
  color: var(--text);
  transition: color 180ms ease;
}

.logo-link:hover {opacity: initial;}

/* Hover → accent */
.logo-link:hover .logo {
  color: var(--accent);
}

/* Keep header in two columns until 480px */
@media (max-width: 720px) {
  .slice--site-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-block: var(--space-m);
  }

  /* Logo: left column */
  .slice--site-header .logo-link {
    grid-column: 1 / 2;
  }

  /* CTA + menu button: right column */
  .slice--site-header .header-actions {
    grid-column: 2 / 3;
    justify-content: flex-end;
  }
}

/* === Drawer base === */
.nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  right: 0;
  background: #000;
  color: #fff;
  z-index: 1000;
  padding: 2rem;
  width: 100vw;                     /* full width by default */
  transform: translateX(100%);
  opacity: 0;                       /* hidden initially */
  transition:
    transform 0.45s cubic-bezier(.4,0,.2,1),
    opacity 0.3s ease;
}

/* Drawer open state */
.nav-disclosure[open] .nav-drawer {
  display: block;
  transform: translateX(0);
  opacity: 1;
}

/* === Overlay background (fades in/out) === */
.nav-disclosure::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 999;
  pointer-events: none;
  transition: background 0.3s ease;
}
.nav-disclosure[open]::before {
  background: rgba(0,0,0,0.45);
  pointer-events: auto;
}

/* === Toggle positioning and icon swap when open === */
.nav-disclosure[open] > .menu-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1001;
  color: #fff;
}

/* === Drawer contents === */
.nav-list {
  font-size: 2rem;
  font-weight: 300;
  list-style: none;
  padding: 0;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  animation: fadeSlideIn 0.6s cubic-bezier(.4,0,.2,1) both;
}

.nav-list a {
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-list a:hover {
  color: var(--colour-dark-blue);
}

ul.secondary {
  color: var(--colour-light-200);
  font-weight: 300;
  font-size: 1.5rem;
  margin-top: var(--space-l);
}

ul.secondary a {color: var(--colour-dark-700);}
ul.secondary a:hover {color: var(--colour-dark-blue);}

/* === Large screens: narrower drawer on the right === */
@media (min-width: 720px) {
  .nav-drawer { width: 400px; left: auto; }
  .nav-list { font-size: 1.5rem; }
  ul.secondary { font-size: 1.2rem; }
}

  
/* === Animation keyframes === */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ==========================================================================
   Footer
   ========================================================================== */

.slice--footer {
  position: relative;                      /* needed for the background logo */
  overflow: hidden;                        /* prevents logo overflow */
  padding-block: var(--space-xl);          /* generous vertical spacing */
  gap: var(--space-l);
}

/* Contact block */
.footer-contact .muted {
  color: var(--muted);
}

/* .footer-contact p.body-s {margin-bottom: 0;} */

.footer-contact {
}
  
.footer-contact a {
  font-size: 2.5em;
  margin-block-start: 0;
  margin-top: 0;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--text);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.footer-email a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.footer-address address, .footer-email {
  margin-top: 0;
}

.footer-address p {
  margin: 0;
}

.footer-nav-wrapper {
  display: flex;
  flex-direction: row;     /* horizontal */
  justify-content: flex-end;
  align-items: flex-end;
  gap: var(--space-l);    /* space between the two lists */
}



.slice--footer .nav-list {
  font-size: 90%;
  margin-bottom: 0;
}

.slice--footer .nav-list li {
  margin-block-start: 0;
  margin-block-end: var(--space-s);
}

/* Navigation layout */
.footer-nav {
  border-left: 1px solid rgba(255,255,255,0.2); /* subtle divider */
  padding-inline-start: var(--space-m);
  align-self: start;   /* aligns each nav to the top of its grid cell */
}

.footer-nav ul {
  margin-block-start: 0; /* remove browser default margin pushing list down */
}

/* no margin needed — grid gap already gives spacing */
.footer-nav--secondary {
  border-left: 1px solid rgba(255,255,255,0.2);
}

.slice--footer ul.secondary {margin-top: 0;}



/* Nav links */

.footer-nav a {
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

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

/* Legal row */
.footer-legal {
}

.legal-copyright, .legal-regco {color: var(--muted-2);}

.legal-regco {text-align: right;}

/* Text alignment helper */
.text-right {
  text-align: right;
}

/* Background logo watermark */
.footer-logo-bg {
  position: absolute;

  bottom: calc(var(--space-xl) * -0.55);     /* half tucked below baseline */
  left: 50%;
  transform: translateX(-50%);
  inline-size: clamp(400px, 60vw, 800px);
  aspect-ratio: 160 / 40;
  fill: #fff;
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Bring main footer content above the logo */
.slice--footer > *:not(.footer-logo-bg) {
  position: relative;
  z-index: 1;
}

/* Responsive adjustments */
@media (max-width: 720px) {
  .slice--footer {
  gap: var(--space-s);
}

  .footer-contact a { font-size: 2em; }
  
  .footer-nav-wrapper {
    margin-block: var(--space-l);
    display: flex;
    flex-direction: row;     /* horizontal */
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--space-l);    /* space between the two lists */
  }

.slice--footer .nav-list {
  font-size: 110%;
}
  
  .footer-nav {
    width: 50%;
    /* margin-top: var(--space-l); */
  }
  
  .footer-nav--primary {
    border: none;
    padding-left: 0;
    }

  .footer-nav--secondary {
    margin-top: 0;
  }

  .footer-legal {
    text-align: left;
    padding: 0;
    margin: 0;
    
  }
  
  .legal-regco {text-align: left; margin-bottom: var(--space-l);}

  .footer-logo-bg {
    inline-size: clamp(300px, 80vw, 500px);
    bottom: calc(var(--space-l) * -0.8);
  }
}




/* === HOMEPAGE === */

/* Featured articles component. 3 blocks in 8 column grid so needs some tweaking */

.slice--miniwhatwedo.slice--grid {
column-gap: var(--space-xl);
}

.miniwhatwedo__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);  /* 3 perfectly equal columns */
  gap: var(--space-m);
}

@media (max-width: 760px) {
  .miniwhatwedo__grid {
    grid-template-columns: 1fr;  /* stack on mobile */
    gap: var(--space-m);
  }
}

.miniwhatwedo__grid-item {
  border-left: 1px var(--colour-light-200) solid;
  padding-inline-start: var(--space-m); 
}

.miniwhatwedo__grid-item:first-child {
  border: none;
  padding-inline-start: 0;
}

.numeral {
display: block;
color: var(--muted-3);
}

.miniwhatwedo__grid-item p {
  color: var(--colour-light-700);  
}




/* What we do – desktop layout */
@media (min-width: 759px) {
  .slice--miniwhatwedo > h2 {
    grid-column: 1 / span 4;    /* left half of the 8-col grid */
    grid-row: 1;
    align-self: end;
    margin-bottom: var(--space-m);
    
  }

  .slice--miniwhatwedo > p {
    grid-column: 5 / -1;        /* right half */
    grid-row: 1;                /* same row as the H2 */
    justify-self: flex-end;     /* push to the right */
    align-self: end;            /* align with H2 baseline-ish */
    margin: 0;
    transform: translateY(-32px)
  }

  .slice--miniwhatwedo .miniwhatwedo__grid {
    grid-column: 1 / -1;        /* full width */
    grid-row: 2;                /* row below the heading/link */
  }
}

@media (max-width: 760px) {
  .slice--miniwhatwedo > h2,
  .slice--miniwhatwedo > p,
  .slice--miniwhatwedo .miniwhatwedo__grid {
    grid-row: auto;           /* let DOM order decide */
  }

  .slice--miniwhatwedo > p {
    justify-self: flex-start; /* left aligned on mobile */
    margin-block-start: var(--space-m);
  }
  
  .miniwhatwedo__grid-item {
    border: none;
    border-top: 1px var(--colour-light-200) solid;
    padding-inline-start: 0;
    padding-block: var(--space-m); 
  }
}










.slice--miniwhatwedo .body-xxl {
  line-height: 1.4;
}

.minipowers {
  text-align: right;
}

.slice--miniwhatwedo dl {
  margin-block-end: var(--space-l);
}

.slice--miniwhatwedo dd {
  margin-bottom: var(--space-m);
}


/* Allows the read more link to right align */
.cluster--spread {
  justify-content: space-between;
  align-items: center;
}
/* Previous clients slice */
.slice--clients .clients-head {
  text-align: center;
  margin-block-end: var(--space-m);
}

/* 2x4 on large: four equal columns (auto-wrap makes 2 rows when 8 items) */
.slice--clients .clients-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* gap: var(--space-l); */
  align-items: center;
}

/* Logo tile: center each logo; keeps hit-area consistent if linked */
.slice--clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-m);
  text-decoration: none;
  color: inherit;
  aspect-ratio: 3 / 2; /*Keeps all cells the same height */
  border-right: 1px solid var(--colour-light-200);
  border-bottom: 1px solid var(--colour-light-200);
}

/* Logos scale down but don’t stretch */
.slice--clients .client-logo img,
.slice--clients .client-logo svg {
  max-width: 100%;
  max-height: 48px;   /* tweak if you want bigger/smaller strip */
  height: auto;
}

/* ---------------- Desktop: 4 columns (default, >1024px) ---------------- */
@media (min-width: 1025px) {
  .slice--clients .clients-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* remove right border on last column */
  .slice--clients .client-logo:nth-child(4n) {
    border-right: none;
  }

  /* remove bottom border on last row */
  .slice--clients .client-logo:nth-last-child(-n + 4) {
    border-bottom: none;
  }
}

/* ---------------- Tablet: 3 columns (721–1024px) ---------------- */
@media (min-width: 721px) and (max-width: 1024px) {
  .slice--clients .clients-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* reset borders in case we came from a wider layout */
  .slice--clients .client-logo {
    border-right: 1px solid var(--colour-light-200);
    border-bottom: 1px solid var(--colour-light-200);
  }

  .slice--clients .client-logo:nth-child(3n) {
    border-right: none;
  }

  .slice--clients .client-logo:nth-last-child(-n + 2) {
    border-bottom: none;
  }
  
  .slice--clients .client-logo img,
  .slice--clients .client-logo svg {
    max-width: 85%;
    max-height: 36px;   /* tweak if you want bigger/smaller strip */
  }
}

/* ---------------- Large mobile: 2 columns (421–720px) ---------------- */
@media (max-width: 720px) {
  .slice--clients .clients-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .slice--clients .client-logo {
    border-right: 1px solid var(--colour-light-200);
    border-bottom: 1px solid var(--colour-light-200);
  }

  .slice--clients .client-logo:nth-child(2n) {
    border-right: none;
  }

  .slice--clients .client-logo:nth-last-child(-n + 2) {
    border-bottom: none;
  }

.slice--clients .client-logo img,
.slice--clients .client-logo svg {
  max-width: 80%;
  max-height: 32px;   /* tweak if you want bigger/smaller strip */
}
}




.slice--who-we-are { gap: var(--space-l); }

/* === WHAT WE DO === */

.slice--para-intro h1 {
margin-bottom: 0;
}
  .slice--para-intro .body-xxl {
  line-height: 140%;
  text-wrap: balance;
}

 /* Ensures img goes full width */
.slice--whatwedo-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--space-xs);
}

.slice--superpowers h4 {
  margin-bottom: var(--space-m);
}

.slice--superpowers ul {
  margin: 0;
}

/* Increase vertical space on small screen */
@media (max-width: 720px) {
  .slice--superpowers .stack > div + div {margin-block-start: var(--space-l);}
}

.slice--working-with-us > header {
  text-align: center;
}

.slice--cta {
  text-align: center;
  padding-block: var(--space-xxl);
  padding-block: calc(var(--space-xxl) * 1.25);
}
.slice--cta h2 {margin-block-end: var(--space-s);}
.slice--cta p {
  text-align: center;
  max-width: none;
  margin-bottom: var(--space-l);
}

/* Inline lozenge list */
.pill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);          /* space between pills */
}

/* Activity lozenges */
.pill-list li {
  border: 1px solid var(--colour-light-200);
  background: var(--colour-light-0);
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-s);   /* vertical padding */
  padding-inline: var(--space-s);   /* horizontal padding */
  border-radius: 999px;             /* pill shape */
  white-space: nowrap;              /* keep each pill on one line */
  margin: 0;
}

/* ==========================================================================
   Full-width image strip
   ========================================================================== */

.slice--image-strip {
     padding: 0;                 /* full-bleed vertically */
     position: relative;
     overflow: hidden;           /* crop anything wider than the viewport */
     margin-bottom: calc(-1 * var(--space-xl));  /* slight overlap onto next slice */
     z-index: 1;
   }
   
 .slice:has(.image-strip) {
   background-color: transparent;
 }  
 
.slice--working-with-us {
  padding-top: var(--space-xxl);
}

.slice--image-strip .image-strip {
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     gap: var(--space-s);
     width: 2000px;          /* strip is wider than many viewports */
     max-width: 2000px;
     margin-inline: auto;    /* centre it in the viewport */
     align-items: center;                /* vertical centring */
     justify-content: center;           /* horizontal centring (belt + braces) */
   }

.slice--image-strip img {
     display: block;
     border-radius: 8px;
   }
   
 .slice--working-with-us header {
   margin-bottom: var(--space-l);
 }  
 
 /* Boxman added this to override the max-width which is applied globally to .body-l  */
 .slice--working-with-us > header > p.body-l {
  margin-inline: auto;
}

 .slice--working-with-us article {
    margin-bottom: var(--space-m);
  }  
  
  @media (max-width: 720px) {
    .slice--image-strip .image-strip {
      width: 1400px;
      margin-left: 50%;
      transform: translateX(-50%);
    }
    .slice--working-with-us article {
      text-align: center;
      padding-inline: var(--space-l);
    }
  }
  
  

/* FEATURED CASE STUDIES
     Simple flex layout: image left, text right
     -------------------------------------------------- */
  
     
     .featured-case {
       background: var(--colour-light-100);
       border-radius: 8px;
       padding: 8px;
     }
     
     /* Make the whole card a flex row */
     .featured-case__link {
       display: flex;
       align-items: center;
       gap: var(--space-m);
       text-decoration: none;
       color: inherit;
     }
     
     /* Image */
     .featured-case__media {
       margin: 0;
       flex: 0 0 clamp(100px, 16vw, 280px); /* scales with viewport */
       border-radius: 4px;
       overflow: hidden;
     }
     
     .featured-case__media img {
       display: block;
       width: 100%;       /* fills the flex width above */
       height: auto;
     }
     
     /* Content */
     .featured-case__content {
       flex: 1 1 auto;    /* text takes remaining space */
     }
     
     .featured-case__content p.body-l {
       margin-bottom: 0;
       line-height: 1.2;
     }
     
     .featured-case__content p span {
       display: block;
     }
     
     /* CTA link – black text, blue underline, blue hover */
     .featured-case__cta {
       display: inline-block;
       margin-top: var(--space-s);
       color: var(--text);                              /* black / body colour */
       text-decoration: underline;
       text-decoration-color: var(--accent);           /* blue underline */
       text-underline-offset: 0.2em;
     }
     
     .featured-case__cta:hover {
       color: var(--accent);                            /* text turns blue */
     }
     
     /* Stack image above text on small screens */
     @media (max-width: 720px) {
       .featured-case__link {
         flex-direction: column;
         align-items: flex-start;
       }
     
       .featured-case__media {
         flex: 0 0 auto;
         width: 100%;
       }
     
       .featured-case__media img {
         width: 100%;
         max-width: none;
       }
     }
     
     .featured-case:hover { background: var(--colour-light-200);}
     .featured-case:hover img {opacity: revert;}


/* === WHO WE ARE === */

/* Adds the top border to certain components on the Who we are page without additional markup */
.slice--berstians,
.slice--founders,
.slice--associates
 {
  /* position: relative;
  padding-top: 3em; /* NEEDS ADDRESSING - gives padding on certain blovks becuase it was hurting my eyes without */ */

}
.slice--berstians::before,
.slice--founders::before,
.slice--associates::before
 {
  /* content: "";
  position: absolute;
  top: 0;
  left: var(--gutter, 2rem); 
  right: var(--gutter, 2rem);
  height: 1px;
  background: var(--muted); */
}

@media (max-width: 720px) {
.slice--berstians article {margin-block-end: var(--space-m);}
.founder-bio {margin-block-end: var(--space-l);}
}

.founders-intro, .associated-intro {
  margin-bottom: var(--space-m);
}

.slice--founders figure {
  margin-bottom: var(--space-m);
}

.slice--founders h3 { margin-bottom: 0; }
.slice--founders h4 { margin-bottom: var(--space-m); }

.slice--founders p.linkedin {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;                /* space between icon + text */
}

/* LinkedIn icon to the left */
.slice--founders p.linkedin::before {
  content: "";
  width: 28px;
  height: 28px;
  display: inline-block;
  background-image: url("/img/logos/linkedin-sml.svg"); /* <-- update path */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.associate {
  border-bottom: 1px solid var(--colour-light-200);
}

.slice--associates {gap: 0;}

/* === Funky Associates block (hover image pinned top-right) === */
.slice--associates .associate {
  position: relative; 
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
  padding-block: var(--space-l);
  overflow: visible;  /* allow overlay to bleed */
  align-items: center;
}

/* Text columns: name/title left (1–4), link middle (5–6) */
.slice--associates .associate h3,
.slice--associates .associate h4 {
  grid-column: 1 / span 1;
  margin: 0;
}

.slice--associates .associate h4 {
  font-weight: normal;
  color: var(--colour-light-500);
}

.slice--associates .associate p {
  grid-column: 2 / span 1;        /* link column */
  margin: 0;
}

/* Hover image overlay */
.slice--associates .associate figure {
  position: absolute;
  top: 0; /* top-right of the row */
  right: 0;
  width: 350px;
  height: 350px;
  aspect-ratio: 1 / 1;
  margin: 0;
  opacity: 0;
  transform: translateY(-8%); /* slight lift */
  transition: opacity 160ms ease, transform 200ms ease;
  z-index: 5;
  pointer-events: none; /* ignore pointer so hover stays on row */
}

.slice--associates .associate figure img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop nicely into the square */
  display: block;
}

.slice--associates .associate:hover {
background-color: var(--colour-light-100); 
}

.slice--associates .associate:hover figure {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile: hide decorative overlay and let content stack */
@media (max-width: 720px) {
  .slice--associates .associate {
    grid-template-columns: 1fr;
  }
  .slice--associates .associate h3,
  .slice--associates .associate h4,
  .slice--associates .associate p {
    grid-column: 1 / -1;
  }
  .slice--associates .associate figure {
    display: none;
  }
}


/* === OUR WORK === */

.slice--our-work-index {
  row-gap: var(--space-l);
}

.work-index-card  {
  margin-top: var(--space-s);
}

.work-index-card  h2 {font-weight: 400; margin-bottom: 0; }
.work-index-card  p.heading-s {font-weight: 400;}
.work-index-card  p.body-xs {margin: 0;}

.case-card a {
  display: block;          /* make the whole card clickable */
  color: inherit;          /* don’t force default link blue */
  text-decoration: none;   /* avoid underlines inside a big card link */
}

.case-card img {
  display: block;          /* removes inline-img baseline gap */
  width: 100%;             /* image fills card width */
  height: auto;            /* preserves aspect ratio */
  border-radius: var(--space-xs);
}

/* Spacer for odd item count in 2-up grid */
.case-card--spacer {
  pointer-events: none;
  visibility: hidden; /* reserve space, stay invisible */
}

.case-card__image {
  position: relative;
  overflow: hidden;
}

.case-card__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Subtle image zoom + blur on hover */
.case-card__image img {
  transition:
    transform 0.45s cubic-bezier(.4,0,.2,1),
    filter 0.45s cubic-bezier(.4,0,.2,1);
  transform-origin: center center;
}

.case-card:hover .case-card__image img {
  transform: scale(1.05);
  filter: blur(2px);
}

.case-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Trigger on hover */
.case-card:hover .case-card__overlay {
  opacity: 1;
}

.case-card__button {
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: transparent;
  transition: all 0.25s ease;
}

/* Optional subtle hover for the button itself */
.case-card:hover .case-card__button {
  background: white;
  color: black;
}




/* === COMPONENTS === */

/* CTA */
.slice--cta {
  text-align: center; 
}





/* NOT SURE WHERE THESE ARE USED */
/* Case studies specific in new world */




/* CASE STUDY TEMPLATE STYLING */

.slice--case-intro h1 {
color: var(--colour-light-400);
margin-bottom: 0; 
margin-top: var(--space-s); 
}

.slice--case-intro h2 {
margin-bottom: var(--space-s); 
}

.dark .slice--case-intro h1 {
color: var(--colour-dark-400);
margin-bottom: 0; 
}

.case-study-content h3  {
  font-weight: 500;            /* Medium */
  letter-spacing: -0.03em;     /* you had -3% on desktop, -2% on mobile – this is a nice middle ground */
  font-size: clamp(24px, calc(24px + 0.38vw), 28px);
  margin-block-start: var(--space-m);
}

/* Case poster should just span the slice width cleanly */
.case-poster img { display:block; inline-size:100%; block-size:auto; }

/* Case meta layout */
.case-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* two columns */
  column-gap: var(--space-s);
  row-gap: var(--space-m);
}

/* Each meta item */
.case-meta-list li {
  /* inherits .body-m type from the <ul> */
  margin-top: 0;
}

/* Label (Services, Industry, Stage, Website) */
.case-meta-list .case-meta__label {
  display: block;
  font-weight: 500;          /* heading-like */
  margin-bottom: var(--space-xs);
}

.case-meta-list .case-meta__label {
  
}

/* .case-meta li + li { 
grid-template-columns: 1fr;
background-color: yellow;
  }
} */

/* Base badge */
.case-badge {
  display: inline-block;
  padding: 0.4em 0.6em;
  border-radius: 6px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

/* Venture badge colour (keeps your existing styling) */
.case-badge--venture {
  background: var(--colour-light-500);
  color: var(--colour-light-0);
}

/* Small variant for tight meta areas */
.case-badge--small {
  background-color: var(--colour-light-500);
  font-size: 0.8em;        /* slightly smaller than text */
  padding: 0.4em 0.6em;   /* narrower padding */
  border-radius: 4px; /* softer shape */
}

.work-index-meta .case-badge {
  margin-right: var(--space-xs);
}

/* Optional tiny styling hooks if you want them later */
.client { font-size: 0.95rem; opacity: .9; }
.subtitle { margin-block-start: 0.25em; }


/* ============================================================
   NEXT CASE PANEL
   ============================================================ */

.slice--next-case {
  padding: 0;                       /* full-bleed – no default slice padding */
  margin-block-start: var(--space-xl);
}

/* Make whole component clickable */
.next-case {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Top text bar (background changes by theme variant) */
.next-case__bar {
  position: relative;
  z-index: 1;
  padding-block: var(--space-l);
}

.slice--next-case .next-case__bar {
  padding-inline: var(--space-l);
}

/* Content block sits in cols 2–6; just vertically centre it */
.next-case__content {
  align-self: center;
}

/* Text grouping */
.next-case__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
}

/* Arrow: its own grid item in col 7, right-aligned + vertically centred */
.next-case__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  align-self: center;
}

.next-case__arrow-icon {
  inline-size: 56px;
  block-size: 56px;
  stroke-width: 1.5;
  fill: none;                       /* keep it as outline */
}

.next-case__text p:first-child {
  margin-block-end: var(--space-xs);
}

.slice--next-case--light p, .slice--next-case--dark p {
  margin-block-end: 0;
}
  
/* ------------------------------------------------------------
   Light vs dark CASE STUDY → inverted panel styles
   ------------------------------------------------------------ */

/* Page is LIGHT  ⇒  panel is DARK */
.slice--next-case--light .next-case__bar {
  background: var(--colour-dark-0);
  color: var(--colour-dark-1000);
}

.slice--next-case--light .next-case__arrow-icon {
  stroke: currentColor;
}

/* Page is DARK  ⇒  panel is LIGHT */
.slice--next-case--dark .next-case__bar {
  background: var(--colour-light-0);
  color: var(--colour-light-1000);
}

.slice--next-case--dark .next-case__arrow-icon {
  stroke: currentColor;
}

.slice--next-case--light p.next-case__title {
  color: var(--colour-dark-1000);
}

.slice--next-case--dark p.next-case__title {
  color: var(--colour-light-1000);
}

/* ------------------------------------------------------------
   Image strip underneath – fixed height, hover zoom/blur
   ------------------------------------------------------------ */

.next-case__media {
     position: relative;
     overflow: hidden;
     block-size: clamp(300px, 36vw, 600px);   /* ← adjustable */
   }
   
   /* Important: picture must not be display:block */
   .next-case__media picture {
     display: contents;     /* or display: initial; if you prefer */
   }
   
   .next-case__media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: 50% 50%;
     transform-origin: 50% 50%;
     transition:
       transform 0.45s cubic-bezier(.4,0,.2,1),
       filter 0.45s cubic-bezier(.4,0,.2,1);
   }

/* Hover behaviour – mirror case cards */
.next-case:hover .next-case__media img {
  transform: scale(1.025);
  filter: blur(2px);
}

/* Small nudge on the arrow */
.next-case:hover .next-case__arrow-icon {
  transform: translateX(2px);
  transition: transform 160ms ease;
}

/* ------------------------------------------------------------
   Responsive tweaks
   ------------------------------------------------------------ */

@media (max-width: 720px) {
     .next-case__content {
       /* no flex here any more – grid handles stacking */
     }
   
     .next-case__arrow {
       justify-content: flex-start;
       align-self: flex-start;
       margin-top: var(--space-m);
     }
   }







/* CASE STUDY BLOCKS */

.block {
  margin-block: var(--space-xl);              /* vertical rhythm between blocks */
}

/* Only some blocks need grid alignment */
.block--grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);      /* reuse main 8-col grid */
  gap: var(--space-l);
}

.block-image {
  grid-column: 1 / -1;
  margin-block: var(--space-m);
}                        

.block-image img {
  display: block;
  width: 100%;
  height: auto;                               /* preserve aspect ratio */
}

.block-image figcaption {
  margin-top: var(--space-s);
  max-width: 75%;
}

/* Container for the 50/50 layout */
.block-double-image {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-s);
  grid-column: 1 / -1;                        /* full width if inside grid slice */
}

.double-image-item img {
  display: block;
  width: 100%;
  height: auto;
}

.double-image-item figcaption {
  margin-top: var(--space-s);
}

/* Stack on mobile */
@media (max-width: 720px) {
  .block-double-image {
    grid-template-columns: 1fr;
  }
}


/* Block left layout  */
.block-text-left .col-span-6 {
  /* no extra rules needed, but this is a hook if you want custom spacing */
}

/* Ensure text in blocks isn't constrained by global max-width */
.block-text p,
.block-text li {
  max-width: none;
  line-height: 160%;
}

.block-text-right .col-span-4 {
  /* again, hook for per-layout tweaks if needed */
}

/* Block 50/50m layout */
@media (max-width: 720px) {
  .block-text-right.block--grid {
    grid-template-columns: 1fr;
  }

  .block-text-right .col-span-4 {
    grid-column: 1 / -1;                      /* stack heading then text full-width */
  }
}

/* Testimonial / blockquote layout */
.block-quote.block--grid {
  gap: var(--space-s);
}

.block-quote blockquote {
  margin: 0;
  padding: 0;
}

.block-quote blockquote p {
  font-weight: 300;                           /* lighter weight for quote */
  letter-spacing: -0.02em;
}

.block-quote figcaption {
  margin-top: var(--space-s);
}

.block.block-double-image + .block.block-double-image {
 margin-block-start: 0;
}

.block.block-double-image:has(+ .block.block-double-image) {
  margin-block-end: var(--space-s);
}

/* Image left, text right (50/50) block */
.block-image-left-text-right .block-image {
  grid-column: span 4; /* override the 1 / -1 from .block-image */
  margin-block: 0;
}

.block-image-left-text-right .block-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;     /* if you want it kept roughly square */
  object-fit: cover;
}

/* Stack on mobile */
@media (max-width: 720px) {
  .block-image-left-text-right.block--grid {
    grid-template-columns: 1fr;
  }

  .block-image-left-text-right .col-span-4 {
    grid-column: 1 / -1;   /* image then text, both full width */
  }
}

/* ============================================
   CASE STUDIES – FULL-WIDTH VIDEO BLOCK
   ============================================ */

.block-video--full .block-video__media {
  inline-size: 100%;
}

/* 16:9 frame for the video only */
.block-video__frame {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}

/* Actual <video> element */
.block-video__element {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover; /* or 'contain' if you prefer letterboxing */
}

/* Caption under the video */
.block-video__caption {
  margin-top: var(--space-s);
  color: var(--muted-1, var(--colour-light-500));
}

/* Dark-theme tweak */
.dark .block-video__caption {
  color: var(--colour-dark-200, var(--colour-light-200));
}

/* Optional: slightly tighter spacing on mobile if needed */
@media (max-width: 720px) {
  .block-video--full .block-video__frame {
    aspect-ratio: 16 / 9; /* keep it consistent, but you could relax this */
  }
}

/* =======================================================
   VIDEO LEFT / TEXT RIGHT BLOCK
   ======================================================= */

.block-video-left-text-right .block-video {
  display: block;
}

/* Square video frame */
.block-video-left-text-right .block-video__frame {
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  background: #fff;
}

/* Actual video element */
.block-video-left-text-right .block-video__element {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* Stack on mobile */
@media (max-width: 720px) {
  .block-video-left-text-rightt.block--grid {
    grid-template-columns: 1fr;
  }

  .block-video-left-text-right .col-span-4 {
    grid-column: 1 / -1;
  }
}

/* BLOG INDEX STYLING */

/* === HOW WE THINK === */


/* Home 3 col article grid */
.slice--how-we-think .articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-m);
}

/* Blog index wrapper */
.slice--articles-index {
  row-gap: var(--space-l);
}

/* Keeps cards link-block behavior consistent with rest of the page */
.article-card a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.article-card img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--space-xs);
  margin-bottom: var(--space-m);
}

.slice--articles-index .article-card__body {
  padding-right: var(--space-l);
}

.article-card__body h2.heading-s{
  margin-block-start: var(--space-s);
  margin-block-end: var(--space-xs);
}

.article-card p.body-m, .article-card p.body-s {
  margin-top: var(--space-xs);
}

 .slice--how-we-think .read-more {
   margin: 0;
   align-self: end;
   justify-self: flex-end;  /* pushes it to the right in the grid */
   transform: translateY(-1.6em);
 }

.article-card p + p {
  margin-top: var(--space-xs);
}

  /* Mobile ordering:
     1: H2
     2: articles
     3: read more */
 
@media (max-width: 720px) {     
  .slice--how-we-think > header {
    grid-column: 1 / -1;
    order: 1;
    margin-bottom: var(--space-m);
  }

  .slice--how-we-think .articles-grid {
    grid-column: 1 / -1;
    order: 2;
  }

  .slice--how-we-think .read-more {
    grid-column: 1 / -1;
    order: 3;
    justify-self: flex-start;
    margin-block-start: var(--space-m);
    transform: initial;
  }
}


/* Collapse to 2-up, then 1-up */
@media (max-width: 1024px) {
  .slice--how-we-think .articles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 720px) {
  .slice--how-we-think .articles-grid {
    grid-template-columns: 1fr;
    gap: var(--space-l);
  }
  .minipowers {text-align: left;}
  .slice--miniwhatwedo dl {margin-block: var(--space-l);}
}

/* Horizontal article cards on small screens
   - Home "How we think" slice
   - Blog "How we think" index (non-hero cards)
*/
@media (max-width: 720px) {
  /* Make card links horizontal flex rows */
  .slice--how-we-think .article-card a,
  .slice--articles-index .article-card:not(.article-card--hero) a {
    display: flex;
    align-items: flex-start;
    gap: var(--space-m);
  }

  /* Image column
     - Home: plain <figure>
     - Blog index: .article-card__media wrappers
  */
  .slice--how-we-think .article-card figure,
  .slice--articles-index .article-card__media {
    flex: 0 0 50%;   /* tweak 35–45% to taste */
    aspect-ratio: 1 / 1; 
  }

  /* Text column */
  .slice--how-we-think .article-card__body,
  .slice--articles-index .article-card__body {
    flex: 1 1 auto;
    padding-right: 0;   /* override desktop padding */
  }

  /* Images: fill their column, no bottom margin in horizontal layout */
  .slice--how-we-think .article-card img,
  .slice--articles-index .article-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-bottom: 0;
  }
}

@media (max-width: 420px) {
  .slice--how-we-think .article-card figure,
.slice--articles-index .article-card__media {
  flex: 0 0 40%;   /* tweak 35–45% to taste */
  aspect-ratio: 1 / 1; 
}
}


  




/* BLOG ARTICLE STYLING */


.slice--article-header {
text-align: center;
}

.slice--article-body {
/* border: 1px red solid;
padding-inline: var(--space-l); */
}

 /* Ensures img goes full width */
.slice--article-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: var(--space-xl);
}

/* Author avatar styling */

/* Center the block horizontally */
.article-author {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

/* Circular avatar pulled from CSS var */
.article-author__avatar {
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background-image: var(--avatar);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 auto;
}


.slice--article-header p {
  margin-bottom: var(--space-s);
}

.slice--article-body h2, 
.slice--article-body h3 {
  font-weight: 400;
  letter-spacing: -0.03em;
}

.slice--article-body h4, 
.slice--article-body h5,
.slice--article-body h6 {
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-block-end: 0.25em; 
}


.slice--article-body h2 {
font-size: clamp(44px, calc(35.55px + 2.25vw), 56px);
margin-block-end: 0.4em;  
}

.slice--article-body h3 {
font-size: clamp(44px, calc(35.55px + 2.25vw), 48px);
margin-block-end: 0.25em;  
}

.slice--article-body p {
font-size: clamp(18px, calc(17.3px + 0.14vw), 20px);
line-height: 1.6;
letter-spacing: -0.02em;
margin-block-end: 1.2em;
}

.slice--article-body ul, .slice--article-body ol {
font-size: clamp(18px, calc(17.3px + 0.14vw), 20px);
line-height: 1.4;
letter-spacing: -0.02em;
}

.slice--article-body li {margin: 0.5em;}
  
.slice--article-body blockquote {
  border-left: 2px solid var(--colour-light-200);
  max-width: var(--max-w);
  padding-left: 1em;
}  
  
.slice--article-body blockquote p {
  font-size: clamp(28px, calc(26.9px + 0.14vw), 32px);
  line-height: 1.6;
  font-weight: 300;
  margin-block: var(--space-l);
}  


/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */

/* --- Intro slice --------------------------------------------------------- */

.slice--contact-intro {
  padding-block-end: 0;          /* space between left + right blocks */
}

.slice--contact-intro .heading-xl {
  Margin: 0;}

/* Make the email block feel like a little callout */
.slice--contact-intro .col-span-3 {
  justify-self: end;
}

/* On small screens the grid already collapses to 1 column via slice--grid,
   so just tidy alignment. */
@media (max-width: 720px) {
  .slice--contact-intro .col-span-3 {
    justify-self: start;
  }
}

.feature-link {
  font-size:2.2em;
  letter-spacing: -0.05em;
}

.feature-link a {
  text-decoration-thickness: 0.05em;
}


/* --- Brighton / address slice ------------------------------------------- */

.slice--contact-brighton {
  row-gap: var(--space-m);
}

/* --- Studio image gallery ------------------------------------------------ */


/* 2-column outer grid:
   Left = big portrait
   Right = internal grid of 2 squares + landscape
*/
.contact-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* left 50%, right 50% */
  gap: var(--space-s);
}

.contact-gallery__item:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;   /* still spans both rows */
  height: 100%;           /* stretch to the combined row height */
}

.contact-gallery__item:first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  height: calc(100% - var(--space-s));
}

/* Right side: nested grid (2 squares + landscape) */
.contact-gallery__right {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr; /* two squares side-by-side */
  grid-template-rows: auto auto;
  gap: var(--space-s);
}

/* Square images */
.contact-gallery__right .square {
  aspect-ratio: 1 / 1;
}

/* Landscape spans both columns */
.contact-gallery__right .landscape {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 3; /* adjust this landscape ratio as needed */
}

.contact-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--space-xs);
}

/* Credit line */
.slice--contact-gallery .body-xs {
  margin-top: var(--space-xs);
}

@media (max-width: 720px) {
  .contact-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;  /* keep two columns */
    gap: var(--space-s);
  }

  /* First (portrait on desktop) → square on mobile */
  .contact-gallery__item:first-child {
    grid-column: 1 / -1;     /* span full width */
    aspect-ratio: 1 / 1;     /* square */
  }

  /* Middle two squares stay side-by-side */
  .contact-gallery__right {
    display: contents;       /* flatten wrapper for mobile */
  }

  .contact-gallery__right .square {
    aspect-ratio: 1 / 1;
  }

  /* Landscape → square on mobile */
  .contact-gallery__right .landscape {
    grid-column: 1 / -1;     /* full width */
    aspect-ratio: 1 / 1;
  }
}

/* --- Map slice ----------------------------------------------------------- */

/* Map spans full 8 columns via markup; this just shapes it */
.contact-map {
  border-radius: var(--space-xs);
  overflow: hidden;
  aspect-ratio: 16 / 9;               /* keeps a clean proportion */
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 720px) {
  .contact-map {
    aspect-ratio: 2 / 3;   /* taller map on mobile */
  }
}

/* --- Join us / jobs slice ------------------------------------------------ */


@media (max-width: 720px) {
  .slice--contact-join {
    row-gap: var(--space-m);
  }
}
  
  
  
  
  /* PRIVACY POLICY */
  
  .slice-privacy {
    padding-block-start: 0;
    padding-inline: var(--space-xl);
  }
  
  .slice-privacy h2 {
    margin-block: 1em;
  }
  
  .slice-privacy .body-m {
    max-width: none;
  }
  
  .slice-privacy span.consent-info {
    display: block;
  }
  
  
  .slice-privacy .table-wrapper table {
    table-layout: fixed;
    width: 100%;
    margin-block: var(--space-m);
    
  }
  
.slice-privacy .table-wrapper td:first-child {
    width: 25%;
    font-weight: 500; /* optional but recommended */
  }
  
  .slice-privacy .table-wrapper td:nth-child(2) {
    color: var(--muted-1);
  }
  
  .slice-privacy address {
    width: fit-content;
    border-left: 2px var(--colour-light-200) solid;
    background-color: var(--colour-light-100);
    padding: var(--space-s);
    font-style: normal;
    margin-block: var(--space-m);
  }
  
  .slice-privacy address b{font-weight: 500;}