/* === animation.css === */

.fade-in-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.fade-in-up.in-view {
  opacity: 1;
  transform: translateY(0);
}
.zoom-in {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}
.zoom-in.in-view {
  opacity: 1;
  transform: scale(1);
}
.fade-in {
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.fade-in.in-view {
  opacity: 1;
}
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* ================== Responsive Core v1 (device-agnostic) ================== */
/* Tokens */
:root{
  --container-max: 1280px;            /* design max width */
  --gutter-phone: 16px;               /* minimum side space */
  --gutter-fluid: 3vw;                /* fluid growth */
  --gutter-max: 40px;                 /* maximum side space */
}

/* Safety defaults */
img{ max-width:100%; height:auto; display:block; }
html, body{ overflow-x: clip; }       /* prevent accidental sideways scroll */

/* 1) Containers — tablet and up (phones remain edge-to-edge) */
@media (min-width: 768px){
  :where(.w-container, .w-layout-blockcontainer){
    box-sizing: border-box;
    max-width: min(
      var(--container-max),
      calc(100vw - 2 * clamp(var(--gutter-phone), var(--gutter-fluid), var(--gutter-max)))
    );
    margin-inline: auto;
    padding-inline: clamp(var(--gutter-phone), var(--gutter-fluid), var(--gutter-max));
  }
  /* avoid double padding for nested containers */
  :where(.w-container, .w-layout-blockcontainer)
  :where(.w-container, .w-layout-blockcontainer){
    padding-inline: 0;
  }
}

/* 2) Full-bleed wrappers that should align with containers on tablet+ */
@media (min-width: 768px){
  :where(
    .imagerevealwrapper-home,
    .tmm_imageouterwrapper-home,
    .casestudy_heroimagecontainer,
    .about-hero-container
  ){
    box-sizing: border-box;
    max-width: min(
      var(--container-max),
      calc(100vw - 2 * clamp(var(--gutter-phone), var(--gutter-fluid), var(--gutter-max)))
    );
    margin-inline: auto;
  }
}

/* 3) Home showcase grid hardening (3→2→1) */
:where(.showcasegrid-home){
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 1140px){
  :where(.showcasegrid-home){ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px){
  :where(.showcasegrid-home){ grid-template-columns: 1fr; }
}
:where(.showcasecard-home){ min-width: 0; } /* prevent overflow in cards */

/* 4) Access modal centring + sizing */
#access-modal{
  position: fixed; inset: 0; z-index: 9999;
  display: none;
  background: rgba(0,0,0,.75);
}
#access-modal[style*="display: block"],
#access-modal[aria-hidden="false"],
#access-modal.is-open{
  display: grid !important;
  place-items: center;
}
#access-modal .access-modal-content{
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow: auto;
  margin: 0 16px;
}
.w-nav-overlay{ z-index: 1000; }      /* keep nav overlays below modal */

/* 5) Optional notch / safe-area support (no change on non-notch devices)
   NOTE: Full effect requires <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> */
@supports (padding: max(0px)){
  /* Keep modal content clear of notches/home indicators */
  #access-modal{
    padding:
      max(0px, env(safe-area-inset-top))
      max(0px, env(safe-area-inset-right))
      max(0px, env(safe-area-inset-bottom))
      max(0px, env(safe-area-inset-left));
  }
}
/* ===== Responsive Core v1 — Reinforcement for tablet widths (iPad Pro V / iPad Air L) ===== */
@media (min-width: 768px) and (max-width: 1366px){
  /* Containers */
  :where(.w-container, .w-layout-blockcontainer){
    width: auto !important; /* allow max-width to reduce the box */
    max-width: min(
      var(--container-max),
      calc(100vw - 2 * clamp(var(--gutter-phone), var(--gutter-fluid), var(--gutter-max)))
    ) !important;
    margin-inline: auto !important;
  }

  /* Full-bleed wrappers that must align visually with containers */
  :where(
    .imagerevealwrapper-home,
    .tmm_imageouterwrapper-home,
    .casestudy_heroimagecontainer,
    .about-hero-container
  ){
    width: auto !important;
    max-width: min(
      var(--container-max),
      calc(100vw - 2 * clamp(var(--gutter-phone), var(--gutter-fluid), var(--gutter-max)))
    ) !important;
    margin-inline: auto !important;
  }
}

/* ===========================
   Home: Extended Showcase — tablet fixes
   Targets iPad Pro (1024×1366) portrait and iPad Air (1180×820) landscape,
   plus similar tablet widths. No header styles touched.
   =========================== */
@media (min-width: 1024px) and (max-width: 1200px) {
  /* 1) Restore side gutters for the whole section */
  .showcasecontainer-home {
    padding-left: clamp(20px, 4vw, 32px) !important;
    padding-right: clamp(20px, 4vw, 32px) !important;
    box-sizing: border-box; /* ensure padding forms the gutter */
  }

  /* 2) Grid: prevent row collisions & give breathing room */
  .showcasegrid-home {
    grid-auto-rows: auto !important;   /* cards define their own height */
    align-items: start !important;      /* avoid vertical stretching tricks */
    row-gap: clamp(24px, 3.5vmin, 40px) !important; /* more space between rows */
  }

  /* 3) Cards: let content dictate height; avoid text overlap */
  .showcasecard-home {
    height: auto !important;
    display: flex;
    flex-direction: column;
  }
  .showcasecard-home img {
    display: block;           /* removes stray line-height gaps */
    height: auto !important;  /* no fixed heights on tablet */
    width: 100%;
  }
  .showcasetextwrapper-home {
    flex: 1 1 auto;           /* content grows naturally */
  }

  /* 4) Heading legibility on dark band */
  .showcase_heading-home,
  .showcase_heading-home h1,
  .showcase_heading-home .h1 {
    color: #f5f5f6 !important;
  }
}
/* =========================
   Home – Extended Showcase (tablet hardening)
   iPad Pro (1024×1366 V) / iPad Air (1180×820 L) and similar widths
   ========================= */
@media (min-width: 1024px) and (max-width: 1200px){
  /* 1) Put the gutters on the OUTER section as well, so the band itself respects side space */
  .visualshowcasesection-home{
    box-sizing: border-box;
    padding-left: clamp(20px, 4vw, 32px) !important;
    padding-right: clamp(20px, 4vw, 32px) !important;
  }

  /* Reinforce the inner container too (in case a nested rule zeroed its padding) */
  .showcasecontainer-home{
    box-sizing: border-box;
    padding-left: clamp(20px, 4vw, 32px) !important;
    padding-right: clamp(20px, 4vw, 32px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Ensure the grid itself isn’t using negative margins or full-bleed width */
  .showcasegrid-home{
    width: 100% !important;
    margin: 0 !important;
  }

  /* 2) Kill the stray top gap inside cards (caused by upstream margins/padding) */
  .showcasecard-home{
    padding-top: 0 !important;
  }
  /* Reset the first block inside the card (image/wrapper) */
  .showcasecard-home > img,
  .showcasecard-home > picture,
  .showcasecard-home > .showcaseimagebox-home,
  .showcasecard-home > .showcase_image-home{
    display: block;
    margin-top: 0 !important;
  }

  /* Bonus: make sure the text area can grow so there’s no overlap at the bottom */
  .showcasecard-home{
    height: auto !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .showcasetextwrapper-home{ flex: 1 1 auto; overflow: visible; }
}
/* ===== Home → Extended Showcase (tablet hardening) ===== */
/* Fix 1: kill fixed grid tracks; use fractional tracks so gutters show */
@media (min-width: 1024px) and (max-width: 1366px){

  /* Fix 2: remove the tiny top gap above images inside cards */
  .showcasecard-home{ padding-top: 0 !important; }
  .showcasecard-home > *:first-child{ margin-top: 0 !important; }
  .showcasecard-home img,
  .showcasecard-home picture,
  .showcasecard-home .showcase_image-home,
  .showcasecard-home .showcaseimagebox-home{
    display: block;
    margin-top: 0 !important;
  }
}
/* =========================
   Showcase Grid hardening
   (tablet widths, iPad etc.)
   ========================= */

/* 1) Kill the mysterious top-gap and make images truly flush */
.showcasecard-home { 
  padding-top: 0 !important;        /* some Webflow blocks inject top padding */
  display: flex !important;          /* prep for intrinsic card sizing */
  flex-direction: column;
}
.showcasecard-home > *:first-child { 
  margin-top: 0 !important;          /* guard if a first-child had a top margin */
}
.showcasecard-home img,
.showcasecard-home picture img,
.showcasecard-home .showcase_image_1-home,
.showcasecard-home .showcase_image-home {
  display: block !important;         /* kill inline-image baseline gap */
  width: 100%;
  height: auto;
  margin: 0 !important;
  border-top-left-radius: inherit;   /* keep rounded top corners clean */
  border-top-right-radius: inherit;
}

/* 2) Let content breathe; never overlap the next row */
.showcasetextwrapper-home {
  flex: 1 1 auto;                    /* grow with content */
  display: flex;
  flex-direction: column;
  gap: 0.6rem;                        /* tidy internal spacing */
  min-height: 0 !important;          /* allow flex to shrink if needed */
}
.showcasetextwrapper-home > :last-child {
  margin-top: auto;                  /* pushes CTA/last line to the bottom */
}

/* Remove any rigid heights that can cause overflow */
.showcasecard-home,
.showcasetextwrapper-home {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;      /* content defines the card height */
}

/* 3) Grid safety for tablet widths (iPad Air/Pro landscape & portrait) */
@media (min-width: 835px) and (max-width: 1199px) {
  .showcasegrid-home {
    /* ensure three equal, fluid columns without fixed 320px tracks */
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: clamp(20px, 3vw, 32px);
    row-gap: clamp(24px, 3vw, 36px);
    align-items: start;              /* rows size to tallest card */
    justify-items: stretch;
  }
  /* keep the section gutters consistent with the header rhythm */
  .showcasecontainer-home { 
    padding-inline: clamp(20px, 4vw, 40px);
  }
}
/* ======================
   Home – Extended Showcase
   Row alignment + clamping (device-agnostic)
   ====================== */

/* Card: enforce a clean box with no stray gaps and keep the rounded corners */
.showcasecard-home{
  display: flex !important;
  flex-direction: column;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;                   /* makes image flush with rounded top */
}

/* Remove any white band above the card image */
.showcasecard-home > *:first-child{ margin-top: 0 !important; }
.showcasecard-home img,
.showcasecard-home picture img,
.showcasecard-home .showcase_image-home,
.showcasecard-home .showcaseimagebox-home{
  display: block !important;
  width: 100%;
  height: auto;
  margin: 0 !important;
}

/* Text stack inside the card: 4 fixed rows → label / title / excerpt (flex) / CTA */
.showcasetextwrapper-home{
  display: grid !important;
  grid-template-rows: auto auto 1fr auto; /* label, title, excerpt, CTA pinned bottom */
  row-gap: 0.6rem;
  min-height: 0 !important;
}

/* ---------- Line-clamp tokens (change counts per breakpoint below) ---------- */
:root{
  --lines-title-d: 3;      /* desktop */
  --lines-excerpt-d: 8;
  --lines-title-t: 3;      /* tablets (both orientations) */
  --lines-excerpt-t: 7;
  --lines-title-m: 2;      /* mobiles */
  --lines-excerpt-m: 6;
}

/* Apply clamping to title and the first paragraph (main excerpt) */
.showcasetextwrapper-home :where(h1,h2,h3,.showcase-title){
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--lines-title-d);
  line-clamp: var(--lines-title-d);
}
.showcasetextwrapper-home p:first-of-type{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: var(--lines-excerpt-d);
  line-clamp: var(--lines-excerpt-d);
}

/* Keep the CTA anchored to the bottom of the card */
.showcasetextwrapper-home a:last-of-type{ margin-top: auto; }

/* ---------- Breakpoints: adjust clamp counts so rows line up across devices ---------- */

/* Tablets (iPad Pro/Air, Galaxy Tabs, foldables unfolded) */
@media (min-width: 768px) and (max-width: 1366px){
  .showcasetextwrapper-home :where(h1,h2,h3,.showcase-title){
    -webkit-line-clamp: var(--lines-title-t);
            line-clamp: var(--lines-title-t);
  }
  .showcasetextwrapper-home p:first-of-type{
    -webkit-line-clamp: var(--lines-excerpt-t);
            line-clamp: var(--lines-excerpt-t);
  }
}

/* Mobiles (portrait & landscape) */
@media (max-width: 767.98px){
  .showcasetextwrapper-home :where(h1,h2,h3,.showcase-title){
    -webkit-line-clamp: var(--lines-title-m);
            line-clamp: var(--lines-title-m);
  }
  .showcasetextwrapper-home p:first-of-type{
    -webkit-line-clamp: var(--lines-excerpt-m);
            line-clamp: var(--lines-excerpt-m);
  }
}

/* Grid: guarantee equal fractional columns and tidy gaps at tablet widths */
@media (min-width: 835px) and (max-width: 1199px){
  .showcasegrid-home{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    align-items: start;
    column-gap: clamp(20px, 3vw, 32px);
    row-gap: clamp(24px, 3vw, 36px);
  }
}
/* ------------------------------------------------------------------
   Extended Showcase – alignment patch (append-only, non-breaking)
   Purpose: make image tops, client label, title baseline, excerpt start,
   and CTA bottoms align across cards & breakpoints.
   Scope: only affects elements inside the Extended Showcase container.
   ------------------------------------------------------------------ */

/* 1) Base scope – try known container class names without risking globals */
:where(.extended-showcase, .section-showcase, [data-section="extended-showcase"]) {
  --showcase-title-lines: 2;
  --showcase-excerpt-lines: 5;
  --showcase-media-aspect: 16/9;    /* keeps image tops aligned */
  --showcase-card-radius: 16px;     /* uses inherited radius for clean tops */
}

/* 2) Card as a vertical grid so baselines/CTA line up */
:where(.extended-showcase, .section-showcase, [data-section="extended-showcase"])
  :where(.showcase-card, [class*="card"]) {
  display: grid;
  grid-template-rows: auto /* media */
                       auto /* client/label */
                       auto /* title */
                       1fr  /* excerpt fills remaining */
                       auto /* CTA */;
  height: 100%;
  border-radius: var(--showcase-card-radius);
  overflow: hidden; /* ensures rounded bottoms stay clean */
}

/* 3) Media: flush to top, no white band, consistent height via aspect-ratio */
:where(.extended-showcase, .section-showcase, [data-section="extended-showcase"])
  :where(.showcase-card, [class*="card"])
  :where(.card-media, .showcase-media, .w-dyn-item .media, [class*="media"]) {
  margin: 0;
}
:where(.extended-showcase, .section-showcase, [data-section="extended-showcase"])
  :where(.showcase-card, [class*="card"])
  :where(.card-media img, .showcase-media img, .w-dyn-item .media img, [class*="media"] img) {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--showcase-media-aspect);
  object-fit: cover; /* crop to align image tops */
  border-top-left-radius: var(--showcase-card-radius);
  border-top-right-radius: var(--showcase-card-radius);
}

/* 4) Title clamp – preserves shared baseline across a row */
:where(.extended-showcase, .section-showcase, [data-section="extended-showcase"])
  :where(.showcase-card, [class*="card"])
  :where(.card-title, .showcase-title, h2, h3) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--showcase-title-lines);
  overflow: hidden;
  margin-top: 0.25rem; /* tiny buffer so label/title rhythm matches */
}

/* 5) Excerpt clamp – fills grid’s 1fr track so CTA bottoms align */
:where(.extended-showcase, .section-showcase, [data-section="extended-showcase"])
  :where(.showcase-card, [class*="card"])
  :where(.card-excerpt, .showcase-excerpt, .excerpt, p) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--showcase-excerpt-lines);
  overflow: hidden;
}

/* 6) CTA pinned to the bottom of the card */
:where(.extended-showcase, .section-showcase, [data-section="extended-showcase"])
  :where(.showcase-card, [class*="card"])
  :where(.card-cta, .showcase-cta, .cta, a[href*="case"], a[href*="study"]) {
  align-self: end;
  margin-top: 0.75rem;
}

/* 7) Responsive line clamps – tuned per breakpoint for consistent baselines */
@media (min-width: 768px) {
  :where(.extended-showcase, .section-showcase, [data-section="extended-showcase"]) {
    --showcase-title-lines: 2;
    --showcase-excerpt-lines: 6;
    --showcase-media-aspect: 16/9;
  }
}
@media (min-width: 992px) {
  :where(.extended-showcase, .section-showcase, [data-section="extended-showcase"]) { }
  }
/* Desktop gets a touch more excerpt room */
@media (min-width: 1200px){
}

/* Phones tighten very slightly */
@media (max-width: 834.98px){
}
/* iPad / tablet band (e.g., 1024×1366) — match your mock-up */
@media (min-width: 1024px) and (max-width: 1199.98px){
}

/* Desktop — roomy, still aligned */
@media (min-width: 1200px){
}

/* ==============================================================
   Extended Showcase — consolidated, conflict-free rules (scoped)
   ============================================================== */

/* Row height matches tallest card in that row */
.visualshowcasesection-home .showcasegrid-home {
  align-items: stretch !important;
}

/* Card: vertical stack, clipped to radius, no phantom gaps */
.visualshowcasesection-home .showcasecard-home {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;     /* ensures media is clipped to the card */
  gap: 0 !important;               /* neutralise any inherited row-gap */
}

/* Ensure the very first block sits flush and inherits the top rounding */
.visualshowcasesection-home .showcasecard-home > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
}

/* Media: normalise all image variants (no inline baseline, no self-rounding) */
.visualshowcasesection-home .showcasecard-home > img,
.visualshowcasesection-home .showcasecard-home [class^="showcase_image_"],
.visualshowcasesection-home .showcasecard-home picture > img {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;     /* card supplies the outer rounding */
  vertical-align: top !important;
}

/* Text stack: flexible column; full copy shown; CTA pinned to bottom */
.visualshowcasesection-home .showcasetextwrapper-home {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  min-height: 0 !important;
}
.visualshowcasesection-home .showcase_cta_link-home {
  margin-top: auto !important;     /* “sticky footer” in card */
}

/* Absolutely no clamping/ellipsis in this section */
.visualshowcasesection-home .showcase_title-home,
.visualshowcasesection-home .showcase_description-home {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  -webkit-box-orient: initial !important;
  -webkit-line-clamp: initial !important;
          line-clamp: initial !important;
}

/* ==============================================================
   Case-study pages (body-2) — width cap + full-bleed hero
   ============================================================== */
body.body-2 .w-layout-blockcontainer.container,
body.body-2 .w-layout-blockcontainer.project-header {
  max-width: 1280px !important;
  width: 100% !important;
}

body.body-2 .casestudy_heroimagecontainer > img {
  display: block;
  width: 100%;
  height: auto;
}

/* === Shrinking header (single, fixed; compact responsive spec) ========= */
/* One fixed header that shrinks via .is-scrolled. Values chosen to reduce
   visual bulk on desktop/tablet/mobile, esp. mobile-landscape.             */

/* Base (≥1200) — 88 → 48 total height ----------------------------------- */
.site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 1002;
  background-color: #0a0a0a; color: #fff;
  /* Top state: total height 88px = 22 + 44 + 22 (padding + logo + padding) */
  padding-top: 22px; padding-bottom: 22px;
  transition: padding .24s cubic-bezier(.2,.8,.2,1), background-color .24s cubic-bezier(.2,.8,.2,1);
}
.site-header + *{ padding-top: 88px !important; margin-top: 0 !important; } /* keep content flush; kill outside margin */

/* Tighten the very first heading under the fixed header */
.site-header + * h1:first-child,
.site-header + * .w-container h1:first-child{
  margin-top: 0 !important;
}

.site-header .w-container{
  max-width: 1280px !important; width: 100% !important;
  margin-left: auto !important; margin-right: auto !important;
  padding-left: 20px !important; padding-right: 20px !important;
}
.headerflex{ display:flex; justify-content:space-between; align-items:center; }

/* Brand sizes (TOP) — editable numbers */
.site-header .header-logo-link img{
  height: 44px; width: auto !important; max-width: none !important;
  display: block; object-fit: contain; image-rendering: auto;
  transition: height .24s cubic-bezier(.2,.8,.2,1);
}
.site-header .header-name-link{
  font-family: 'Montserrat', sans-serif;   /* NEW: lock family */
  font-weight: 800;                         /* NEW: adjust to taste (700–900) */
  font-size: 32px; line-height: 1; margin: 0; display: block;
  transition: font-size .24s cubic-bezier(.2,.8,.2,1);
}
.site-header .header-about-link{
  font-family: 'Montserrat', sans-serif;   /* NEW */
  font-weight: 600;                         /* NEW: adjust to taste (500–700) */
  font-size: 20px; line-height: 1; margin: 0; display: block;
  transition: font-size .24s cubic-bezier(.2,.8,.2,1);
}
.site-header a{ color: inherit; text-decoration: none; }
.site-header a:hover{ opacity: .9; }

/* Shrunk state: 48px total = 9 + 30 + 9 --------------------------------- */
.site-header.is-scrolled{ padding-top: 9px; padding-bottom: 9px; }
.site-header.is-scrolled + *{ padding-top: 48px !important; }
.site-header.is-scrolled .header-logo-link img{ height: 30px; }
.site-header.is-scrolled .header-name-link{ font-size: 22px; }
.site-header.is-scrolled .header-about-link{ font-size: 16px; }

/* ---------- Responsive sizes (project breakpoints) ---------------------- */
/* Each tier sets: top total height  → shrunk total height
   and pairs paddings + logo + text so vertical centring stays perfect.    */

/* 992–1199: 80 → 44  (pad 20/20 with 40 logo → pad 7/7 with 30 logo) */
@media (max-width: 1199.98px){
  .site-header{ padding-top: 20px; padding-bottom: 20px; }
  .site-header + *{ padding-top: 80px !important; }
  .site-header .header-logo-link img{ height: 40px; }
  .site-header .header-name-link{ font-size: 28px; }
  .site-header .header-about-link{ font-size: 18px; }

  /* Raised shrunk height to 56px (12 + 32 + 12) */
  .site-header.is-scrolled{ padding-top: 12px; padding-bottom: 12px; }
  .site-header.is-scrolled + *{ padding-top: 56px !important; }
  .site-header.is-scrolled .header-logo-link img{ height: 32px; }
  .site-header.is-scrolled .header-name-link{ font-size: 22px; }
  .site-header.is-scrolled .header-about-link{ font-size: 16px; }
}

/* 768–991: 72 → 40  (pad 18/18 + 36 → pad 6/6 + 28) */
@media (max-width: 767.98px){
  .site-header{ padding-top: 16px; padding-bottom: 16px; }
  .site-header + *{ padding-top: 64px !important; }
  .site-header .header-logo-link img{ height: 32px; }
  .site-header .header-name-link{ font-size: 22px; }
  .site-header .header-about-link{ font-size: 15px; }

  /* Raised shrunk height to 48px (10 + 28 + 10) */
  .site-header.is-scrolled{ padding-top: 10px; padding-bottom: 10px; }
  .site-header.is-scrolled + *{ padding-top: 48px !important; }
  .site-header.is-scrolled .header-logo-link img{ height: 28px; }
  .site-header.is-scrolled .header-name-link{ font-size: 18px; }
  .site-header.is-scrolled .header-about-link{ font-size: 14px; }
}

/* 425–575: 60 → 36  (pad 15/15 + 30 → pad 4/4 + 28) */
@media (max-width: 575.98px){
  .site-header{ padding-top: 15px; padding-bottom: 15px; }
  .site-header + *{ padding-top: 60px !important; }
  .site-header .header-logo-link img{ height: 30px; }
  .site-header .header-name-link{ font-size: 20px; }
  .site-header .header-about-link{ font-size: 14px; }

  /* Raised shrunk height to 44px (9 + 26 + 9) */
  .site-header.is-scrolled{ padding-top: 9px; padding-bottom: 9px; }
  .site-header.is-scrolled + *{ padding-top: 44px !important; }
  .site-header.is-scrolled .header-logo-link img{ height: 26px; }
  .site-header.is-scrolled .header-name-link{ font-size: 16px; }
  .site-header.is-scrolled .header-about-link{ font-size: 14px; }
}

/* 375–424: 56 → 34  (pad 14/14 + 28 → pad 3/3 + 28) */
@media (max-width: 424.98px){
  .site-header{ padding-top: 14px; padding-bottom: 14px; }
  .site-header + *{ padding-top: 56px !important; }
  .site-header .header-logo-link img{ height: 28px; }
  .site-header .header-name-link{ font-size: 18px; }
  .site-header .header-about-link{ font-size: 14px; }

  /* Raised shrunk height to 44px (10 + 24 + 10) */
  .site-header.is-scrolled{ padding-top: 10px; padding-bottom: 10px; }
  .site-header.is-scrolled + *{ padding-top: 44px !important; }
  .site-header.is-scrolled .header-logo-link img{ height: 24px; }
  .site-header.is-scrolled .header-name-link{ font-size: 15px; }
  .site-header.is-scrolled .header-about-link{ font-size: 13px; }
}

/* ≤374: 52 → 32  (pad 13/13 + 26 → pad 3/3 + 26) */
@media (max-width: 374.98px){
  .site-header{ padding-top: 13px; padding-bottom: 13px; }
  .site-header + *{ padding-top: 52px !important; }
  .site-header .header-logo-link img{ height: 26px; }
  .site-header .header-name-link{ font-size: 17px; }
  .site-header .header-about-link{ font-size: 13px; }

  /* Raised shrunk height to 44px (11 + 22 + 11) */
  .site-header.is-scrolled{ padding-top: 11px; padding-bottom: 11px; }
  .site-header.is-scrolled + *{ padding-top: 44px !important; }
  .site-header.is-scrolled .header-logo-link img{ height: 22px; }
  .site-header.is-scrolled .header-name-link{ font-size: 14px; }
  .site-header.is-scrolled .header-about-link{ font-size: 12px; }
}

/* === Ensure hero blocks stay centred regardless of parent quirks === */
.casestudy_heroimagecontainer{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
.casestudy_heroimagecontainer .hero-image{
  display: block;
  width: 100%;
  height: auto;
}
/* ===== ABOUT page: remove stray top margins under fixed header ===== */
/* Keep the header's intentional padding-top from .site-header + *.
   Only neutralise the extra margins added by Webflow on this page. */
.about-hero-section {
  margin-top: 0 !important;              /* keep outside gap zero to avoid white band */
  padding-top: clamp(16px, 2.5vw, 48px); /* gentle breathing room; grows on larger viewports */
}

.about-hero-section > *:first-child {
  margin-top: 0 !important;              /* still kill the old 64px margin */
}

/* Belt-and-braces: if the H1 had any top margin, remove it too */
.about-hero-section h1.h1:first-child {
  margin-top: 0 !important;
}
/* === First block under fixed header: equal inside breathing (all pages) === */
/* Trigger only when the first sibling contains a container whose first child is a hero heading. */
@supports selector(:has(*)) {
  .site-header + *:has(> .w-container > .h1:first-child),
  .site-header + *:has(> .w-layout-blockcontainer > .h1:first-child){
    /* no outside gaps; we’ll pad inside the background */
  }

  /* Remove stray container top margins that Webflow sometimes adds */
  .site-header + * > .w-container:first-child,
  .site-header + * > .w-layout-blockcontainer:first-child{
    margin-top: 0 !important;
  }

  /* Apply equal top/bottom padding inside the container (so no white band) */
  .site-header + *:has(> .w-container > .h1:first-child) > .w-container:first-child,
  .site-header + *:has(> .w-layout-blockcontainer > .h1:first-child) > .w-layout-blockcontainer:first-child{
    padding-block: clamp(20px, 2.2vw, 48px);
  }

  /* Keep the hero H1’s own margins from fighting this padding (local only) */
  .site-header + *:has(> .w-container > .h1:first-child) > .w-container:first-child > .h1:first-child,
  .site-header + *:has(> .w-layout-blockcontainer > .h1:first-child) > .w-layout-blockcontainer:first-child > .h1:first-child{
    margin: 0 !important;
  }
}
/* === Case study 'purple band' under fixed header ======================= */
/* Put the masthead offset inside the purple .project-header, not on the section */
.site-header + .project-header-container { 
  /* keep outside margin collapsed to avoid white strip */
  margin-top: 0 !important;
  /* no padding reset here—let the offset rules below take effect */
}
.site-header + .project-header-container{
  padding-top: 88px;
}
.site-header.is-scrolled + .project-header-container{
  padding-top: 48px;
}

/* Match your responsive masthead heights exactly */
@media (max-width: 1199.98px){            /* 992–1199 → 80 / 56 */
  .site-header + .project-header-container{ padding-top: 80px; }
  .site-header.is-scrolled + .project-header-container{ padding-top: 56px; }
}
@media (max-width: 767.98px){             /* ≤767 → 64 / 48 */
  .site-header + .project-header-container{ padding-top: 64px; }
  .site-header.is-scrolled + .project-header-container{ padding-top: 48px; }
}
@media (max-width: 575.98px){             /* 425–575 → 60 / 44 */
  .site-header + .project-header-container{ padding-top: 60px; }
  .site-header.is-scrolled + .project-header-container{ padding-top: 44px; }
}
@media (max-width: 424.98px){             /* 375–424 → 56 / 44 */
  .site-header + .project-header-container{ padding-top: 56px; }
  .site-header.is-scrolled + .project-header-container{ padding-top: 44px; }
}
@media (max-width: 374.98px){             /* ≤374 → 52 / 44 */
  .site-header + .project-header-container{ padding-top: 52px; }
  .site-header.is-scrolled + .project-header-container{ padding-top: 44px; }
}

/* Keep inner content breathing symmetric but small */
.project-header-container > .project-header{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Belt-and-braces: remove stray top margins inside the purple band only */
.site-header + .project-header-container > .project-header > *:first-child{
  margin-top: 0 !important;
}
.project-header .header-project-name{      /* title inside the band */
  margin-top: 0 !important;
}