/* Viewport Taxonomy
 * Mobile, ≤ 767px
 * Tablet, 768–999px
 * Tablet Plus, 1000–1329px
 * Desktop, ≥ 1330px
 * Superwide (Ultra-wide Desktop), ≥ 1920px
 * 
 * Desktop, type can scale modestly with viewport up to 1920px
 * Superwide, typography is locked, layout breathes via gutters only
 */

:root{
  --csg-gold:#AFA287;
  --charcoal:#1C1F22;
  --stone:#EAE8E4;
  --grey:#7B7F85;
  --copper:#B67352;
  --forest:#2F4A3B;

  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-editorial:#F7F6F3;
  --surface-card:#FFFFFF;
  --border:rgba(28,31,34,.14);
  --shadow:0 16px 50px rgba(28,31,34,.10);
  --radius:18px;
  --btn-radius: 6px;

  --max:1180px;
  --pad:24px;
  --hero-rail: min(1180px, calc(100% - 48px));
  --hero-fullbleed-top-gap: clamp(28px, 3.2vw, 64px);

  --h1:clamp(34px, 4vw, 54px);
  --h2:clamp(22px, 2.6vw, 34px);
  --h3:20px;
  --body:17px;
  --small:13px;

  --lh:1.55;
  
  --header-height: 132px; 
  --header-offset: var(--header-height);
  --header-blur: 10px;

  /* header surfaces */
  --surface-header-light: var(--bg);
  --surface-header-dark: #000000;

  /* header opacity/blur (tunable) */
  --header-light-alpha: 0.84;   /* tweak 0.80–0.90 if needed */

  /* wide gutters for header and footer on ultra-wide screens */
  --gutter-wide: clamp(24px, calc((100vw - 1920px) / 2 + 150px), 150px);
  
  --matte-inner-ratio: 0.63636;
  --matte-radius: 22px;
  --print-radius: 6px;

  /* Golden ratio spacing */
  --phi: 1.618;
  --space-1: 12px;
  --space-2: calc(var(--space-1) * var(--phi));
  --space-3: calc(var(--space-2) * var(--phi));
  --space-4: calc(var(--space-3) * var(--phi));

  --panel-black: #000;
  --panel-white: transparent;

  --callout-bg: transparent;
  --callout-border: rgba(255,255,255,.08);  /* on dark sections */
  --callout-border-light: rgba(28,31,34,.14); /* if used on light sections */
  --callout-radius: 6px;   /* near-square, print-like */
  --callout-pad: 34px;
  --callout-max: 560px;

  --cta-btn-bg: var(--csg-gold);
  --cta-btn-fg: #111;
  --cta-btn-radius: 999px;
  --cta-btn-h: 46px;
}

/* Typography scaling, Desktop to 1920, then lock on superwide */
@media (min-width: 1330px){
  :root{
    --body: clamp(17px, 1.35vw, 21px);
    --small: clamp(13px, 0.85vw, 14px);
    --h3:   clamp(17px, 1.35vw, 21px);
    --h4:   clamp(17px, 1.35vw, 21px);
    --h2: clamp(28px, 2.2vw, 42px);
    --h1: clamp(48px, 3.40vw, 60px);
  }
}

@media (min-width: 1920px){
  :root{
    --body: 21px;
    --small: 14px;
    --h3:   21px;
    --h4:   21px;
    --h2: 42px;
    --h1: 60px;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--charcoal);
  padding-top: var(--header-height);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:var(--body);
  line-height:var(--lh);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Enforce serif on all headings by default */
h1, h2, h3, h4, h5, h6{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Explicitly lock body + UI elements to Inter */
p,
li,
span,
a,
button,
input,
textarea,
label,
nav{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.serif{font-family:"Playfair Display", Georgia, "Times New Roman", serif}
a{color:inherit; text-decoration:none}
button{font:inherit}
img{max-width:100%; display:block}

.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.is-protected{
  position:relative;
}

.is-protected .image-shield{
  position:absolute;
  inset:0;
  z-index:2;
  background:transparent;
  cursor:default;
  pointer-events:auto;
}

.is-protected img{
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}

/* Wide rail modifier - aligns with header/footer gutters */
.wrap--wide{
  max-width: none;
  width: 100%;
}

@media (min-width: 768px){
  .wrap--wide{
    padding-inline: 75px;
  }
}

@media (min-width: 1330px){
  .wrap--wide{
    padding-inline: max(75px, var(--gutter-wide));
  }
}

.section{padding:64px 0}

.section--editorialWide{
  margin-top: clamp(48px, 7vw, 120px);
}

.section--editorialWide .editorialWide-inner{
  max-width: 72ch;
}

.section--editorialWide h2{
  margin-top: 0;
}

/* About page: longform sections should use the full wide rail */
.section-about .section--editorialWide .editorialWide-inner{
  max-width: none;
  width: 100%;
}

/* About page: tighten vertical rhythm between longform sections */
.section-about .section--editorialWide{
  margin-top: 0;
}

/* Intro section – dark background */
.section-intro--dark{
  background:#000;
  color:#fff;
}

.section-intro--dark h2,
.section-intro--dark h3{
  color:#fff;
}

.section-intro--dark p,
.section-intro--dark li,
.section-intro--dark span{
  color:rgba(255,255,255,.9);
}

.section-intro--dark .muted{
  color:rgba(255,255,255,.7);
}

.section-intro--dark .card{
  background:#111;
  border-color:rgba(255,255,255,.12);
}

.section-intro--dark .tick{
  background-color:#fff;
}

/* Intro section – remove the default section divider seam */
#section-intro.section-intro--dark{
  border-top: 0;
  margin-top: 0;
}

/* If there is still a 1px seam due to sub-pixel rendering, cover it */
#section-intro.section-intro--dark{
  margin-top: -1px;
}

/* Intro editorial points (no bullets) */
#section-intro .intro-points{
  margin-top: 16px;
}

/* Intro editorial points – Condé-style hierarchy */
#section-intro .intro-points p{
  margin: 0 0 18px 0;
}

#section-intro .point-lead{
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 4px;
}

#section-intro .point-body{
  display: block;
  font-size: 0.95rem;
  line-height: 1.45;
  color: rgba(255,255,255,.82);
}

/* =====================================================
   Phase 3 – News section (wider rail + breathing room)
   ===================================================== */

#section-news{
  background: #000;
  color: #fff;

  /* Widen only this section's rail.
     Uses min() so it never exceeds viewport minus padding. */
  --max: min(1480px, calc(100% - 48px));
}

#section-news h2{
  color: #fff;
}

/* Keep cards white on dark ground */
#section-news .card{
  background: var(--surface-card);
  color: var(--charcoal);
}

/* =====================================================
   Phase 3 – News cards (editorial finish)
   ===================================================== */

#section-news .card{
  border: 0;
  overflow: hidden;

  /* Single editorial shadow */
  box-shadow: 0 22px 60px rgba(0,0,0,.42);

  /* Matte inset outline to kill corner anti-alias shine */
  outline: 2px solid rgba(0,0,0,1);
  outline-offset: -1px;
}

/* More breathing room for the 3-up grid */
#section-news.section{
  padding: 84px 0;
}

/* =====================================================
   Clients marquee section
   ===================================================== */

.section-clients{
  padding: 64px 0;
  background: #fff;
}

.clients-title{
  text-align: center;
  margin: 0 0 48px 0;
  font-size: var(--h2);
}

.clients-marquee{
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to right, transparent 0, #000 55px, #000 calc(100% - 55px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55px, #000 calc(100% - 55px), transparent 100%);
}

.clients-track{
  display: flex;
  align-items: center;
  gap: 42px;
  width: max-content;
  animation: clients-marquee 110s linear infinite;
}

.clients-marquee:hover .clients-track{
  animation-play-state: paused;
}

.client-logo{
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.client-logo img{
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: none;
  opacity: 1;
}

@keyframes clients-marquee{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce){
  .clients-track{
    animation: none;
  }
}

/* Tablet (768–1024) */
@media (min-width: 768px) and (max-width: 1024px){
  .clients-marquee{
    mask-image: linear-gradient(to right, transparent 0, #000 75px, #000 calc(100% - 75px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 75px, #000 calc(100% - 75px), transparent 100%);
  }

  .clients-track{
    gap: 58px;
    animation-duration: 120s;
  }

  .client-logo{
    height: 42px;
  }
}

/* Tablet_plus (1025–1329) */
@media (min-width: 1025px) and (max-width: 1329px){
  .clients-marquee{
    mask-image: linear-gradient(to right, transparent 0, #000 85px, #000 calc(100% - 85px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 85px, #000 calc(100% - 85px), transparent 100%);
  }

  .clients-track{
    gap: 64px;
    animation-duration: 125s;
  }

  .client-logo{
    height: 46px;
  }
}

/* Desktop (≥1330) */
@media (min-width: 1330px){
  .clients-marquee{
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;

    padding-left: 75px;
    padding-right: 75px;

    overflow: hidden;

    mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 75px,
      #000 calc(100% - 75px),
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0,
      #000 75px,
      #000 calc(100% - 75px),
      transparent 100%
    );
  }

  .clients-track{
    gap: 70px;
    animation-duration: 160s;
  }

  .client-logo{
    height: 46px;
  }
}

/* =====================================================
   Phase 3 – News section card spacing (aligned breakpoints)
   ===================================================== */

#section-news .grid{
  gap: 44px;
}

@media (max-width: 767px){
  #section-news .grid{
    gap: 24px;
  }
}

@media (min-width: 768px) and (max-width: 999px){
  #section-news .grid{
    gap: 32px;
  }
}

@media (min-width: 1000px) and (max-width: 1329px){
  #section-news .grid{
    gap: 44px;
  }
}

@media (min-width: 1330px){
  #section-news .grid{
    gap: 56px;
  }
}

#section-news .snippets-grid{
  margin-top: 28px;
}

.kicker{
  font-size:var(--small);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(28,31,34,.70);
}

/* Utilities (Phase 1 cleanup) */
.mt-6{ margin-top:6px; }
.mt-18{ margin-top:18px; }
.m-0{ margin:0; }

.grid-gap-sm{
  display:grid;
  gap:10px;
}

.wrap-narrow{
  max-width:860px;
}

/* Header */
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  will-change: transform;
  transition: transform 160ms ease;
  border-bottom: 0;
  box-shadow: none;

  --header-surface: var(--surface-header-light);
  --header-alpha: var(--header-light-alpha);

  background: color-mix(in srgb, var(--header-surface) calc(var(--header-alpha) * 100%), transparent);
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}
.header-rail {
  width: 100%;
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-block: 14px;
  padding-inline: var(--header-gutter, var(--pad));
}  
.header.is-hidden{
  transform: translateY(-110%);
}

/* Defensive: hero-top never hides header even if .is-hidden is applied */
body.is-hero-top .header.is-hidden{
  transform: translateY(0);
}

/* Header theme classes */
.header.is-theme-dark {
  --header-surface: var(--surface-header-dark);
  --header-alpha: 1;
  background: var(--header-surface);
  color: #fff;
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.header.is-theme-dark .nav a,
.header.is-theme-dark .menu a,
.header.is-theme-dark .nav-toggle,
.header.is-theme-dark .menu-toggle {
  color: #fff;
}

.header.is-theme-dark .nav a:hover,
.header.is-theme-dark .nav button:hover {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.12);
}

.header.is-theme-light {
  --header-surface: var(--surface-header-light);
  --header-alpha: var(--header-light-alpha);
  background: color-mix(in srgb, var(--header-surface) calc(var(--header-alpha) * 100%), transparent);
  color: var(--charcoal);
  border-bottom: 0;
  box-shadow: none;
  -webkit-backdrop-filter: blur(var(--header-blur));
  backdrop-filter: blur(var(--header-blur));
}

.header.is-theme-light .nav a,
.header.is-theme-light .menu a,
.header.is-theme-light .nav-toggle,
.header.is-theme-light .menu-toggle {
  color: rgba(28,31,34,.86);
}

.header.is-theme-light .nav a:hover,
.header.is-theme-light .nav button:hover {
  border-color: var(--border);
  background: rgba(255,255,255,.55);
}

.brandmark{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:200px;
}
.brandmark img{height:104px; width:auto}

.brandmark-img--mobile{ display:none; }
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;          /* stop header height changing */
  justify-content:flex-end;
  white-space:nowrap;        /* belt and braces */
}

@media (max-width: 767px){
  .nav{
    flex-wrap:wrap;          /* allow wrap only on small screens */
    white-space:normal;
  }
}

.brand-mark{
  height:56px;
  display:flex;
  align-items:center;
  margin-bottom:12px;
  margin-top:14px;
  flex:0 0 auto;
}

.brand-mark-img{
  height:100%;
  max-height:56px;
  max-width:180px;
  width:auto;
  object-fit:contain;
  display:block;
  opacity:.65;
  transition:opacity .18s ease;
}

.card:hover .brand-mark-img{ opacity:1; }

.brand-hero{
  height:80px;            /* was ~64 */
  display:flex;
  align-items:center;
  margin:14px 0 18px;
}

.brand-hero img{
  height:100%;
  width:auto;
  max-width:280px;        /* allow real presence */
  object-fit:contain;
  display:block;

  filter:none;            /* colour ON */
  opacity:1;
  }

.brand-hero img[src*="stunning"]{ transform:scale(1.2); }
.brand-hero img[src*="10x15"]{ transform:scale(1.1); }
.brand-hero img[src*="sail"]{ transform:scale(1.08); }
.brand-hero img[src*="folly"]{ transform:scale(1.06); }

.card:hover .brand-mark img{
  filter:none;
  opacity:1;
}

/* Primary CTA inside cards */
.btn.alt{
  background:var(--csg-gold);
  border-color:var(--csg-gold);
  color:#1C1F22; /* charcoal for legibility */
  font-weight:500;
}

.btn.alt:hover{
  background:#9E956F;
  border-color:#9E956F;
  color:#1C1F22;
}

.nav a, .nav button{
  padding:10px 12px;
  border-radius: var(--btn-radius);
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  font-size:14px;
  color:rgba(28,31,34,.86);
  transition:all .18s ease;
}
.nav a:hover, .nav button:hover{
  border-color:var(--border);
  background:rgba(255,255,255,.55);
}

/* Mobile menu */
.nav-toggle{
  appearance:none;
  background:transparent;
  border:0;
  padding:10px;
  margin:0;
  cursor:pointer;
  display:none;
}

.nav-toggle-lines{
  width:22px;
  height:14px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}
.nav-toggle-lines span{
  display:block;
  height:1px;
  background:currentColor;
  opacity:.9;
}

/* Overlay – visibility via opacity/pointer-events, no display toggle */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.25);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  z-index: 1100;
  display: none;
}

/* Panel – visibility via transform/pointer-events, no display toggle */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: rgba(255,255,255,0.92);
  transform: translateY(-100%);
  transition: transform 0.45s cubic-bezier(.4,0,.2,1);
  z-index: 1200;
  overflow-y: auto;
  pointer-events: none;
}

@media (max-width: 767px){
  /* On mobile, avoid viewport-width gutters to prevent layout viewport from inflating scrollWidth */
  :root{
    --gutter-wide: 24px;
  }

  /* On mobile, contain horizontal overflow at document level */
  html,
  body{
    overflow-x: hidden;
  }

  /* On mobile, header participates in normal flow; remove global header offset padding */
  body{
    padding-top: 0;
  }

  /* Mobile header: size to document width and stick to top (no fixed overflow) */
  .header{
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
  }

  /* Neutralise scroll-hide behaviour on mobile */
  .header.is-hidden{
    transform: none;
  }

  /* Mobile header: solid black background, always black, no theme switching */
  .header,
  .header.is-theme-light,
  .header.is-theme-dark {
    background: #000 !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    color: #fff !important;
  }

  /* Burger icon must always be white on mobile */
  .nav-toggle,
  .nav-toggle-lines span{
    color: #fff !important;
  }

  /* Show brandmark on mobile */
  .brandmark {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    min-width: auto;
  }

  /* Hide desktop logo, show mobile logo */
  #csgHeaderLogo {
    display: none !important;
  }

  .brandmark-img--mobile {
    display: block !important;
    height: 26px;
    width: auto;
    max-width: 180px;
  }

  /* On mobile, contain the clients marquee so its wide track does not affect document scrollWidth */
  .clients-marquee{
    overflow-x: hidden;           /* clip horizontal overflow of .clients-track */
    contain: layout paint;        /* prevent track from expanding the page’s scrollable area */
  }

  .header .nav{ display:none; }
  .nav-toggle{ display:inline-flex; color:#fff; }

  /* Mobile closed: transform/opacity/pointer-events only, no display toggle */
  .nav-overlay{
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    z-index: 1100 !important;
    background: rgba(0,0,0,0.25) !important;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-nav{
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow-y: auto !important;
    z-index: 1200 !important;
    background: rgba(255,255,255,0.92) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
    transform: translateY(-100%);
    pointer-events: none;
    will-change: transform;
    display: none;
  }

  .mobile-nav-portfolio{
    background: rgba(255,255,255,0.92) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
    backdrop-filter: blur(12px) saturate(120%) !important;
  }

  /* Ensure header-inner aligns like a clean rail */
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }

  /* Open state: explicit transform + pointer-events so overlay/close/links are clickable */
  body.nav-open .nav-overlay {
    opacity: 1;
    pointer-events: auto !important;
    display: block;
    background: rgba(0,0,0,0.25) !important;
  }

  body.nav-open .mobile-nav {
    transform: translateY(0);
    pointer-events: auto !important;
    display: block;
    background: rgba(255,255,255,0.89) !important;
    -webkit-backdrop-filter: blur(0px) saturate(0%) !important;
    backdrop-filter: blur(0px) saturate(0%) !important;
    isolation: isolate;
  }

  body.nav-open .nav-close {
    pointer-events: auto !important;
  }

  body.nav-open .mobile-nav-inner a,
  body.nav-open .mobile-nav-portfolio .mobile-nav-portfolio-link {
    pointer-events: auto !important;
  }

  /* Inner spacing */
  .mobile-nav-inner {
    padding: 96px 32px 96px; /* reserve space for the logo rail */
    display: flex;
    flex-direction: column;
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  }

  /* Close button */
  .nav-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: 0;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    line-height: 1;
    color: var(--charcoal);
  }

  /* Typography */
  .mobile-nav-inner a {
    display: block;
    font-size: 22px;
    line-height: 1.3;
    padding: 12px 0;
    color: var(--charcoal);
    text-decoration: none;
    opacity: 0.6;
    transition: opacity 0.25s ease;
    letter-spacing: -0.01em;
    font-weight: 500;
  }

  .mobile-nav-inner a:hover {
    opacity: 1;
  }

  .mobile-nav-inner a:focus-visible{
    outline:1px solid rgba(0,0,0,.25);
    outline-offset:6px;
  }

  /* Portfolio logos rail at bottom of mobile menu */
  .mobile-nav-portfolio{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;   /* evenly distribute across width */
    gap: 0;                          /* spacing comes from space-between */
    flex-wrap: nowrap;               /* prevent wrapping */
    padding: 14px 16px;
    border-top: 1px solid rgba(0,0,0,0.08);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  /* 0–430px: scale up to fill rail */
  .mobile-nav-portfolio-logo{
    display: block;
    height: clamp(20px, calc(20px + (8 * (100vw - 320px) / 110)), 28px);
    width: auto;
    max-width: 100%;
    opacity: 0.85;        /* increase visibility, still quiet */
  }

  .mobile-nav-portfolio-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 25%;        /* each link takes equal space */
    text-decoration: none;
  }

  /* 430–767px: lock to the 430px end size */
  @media (min-width: 430px){
    .mobile-nav-portfolio-logo{
      height: 28px;
    }
  }

}

/* Body lock when menu open */
body.nav-open{
  overflow:hidden;
}

/* Hero */
.hero{
  position:relative;
  z-index:0;
  min-height:72vh;
  display:grid;
  align-items:end;
  padding:72px 0 40px;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  background:var(--charcoal);
  color:#fff;
}

/* Remove hero border-bottom on home page to eliminate seam with intro section */
body.home .hero{
  border-bottom: 0;
}

.hero-headerLogo{
  display: none;
  position: relative;
  z-index: 2;
}

/* Hero-top mode: header logo rail + inset hero image */
/* Hero-top: header becomes nav-only, so reduce reserved height */
/* Hero-top: compact nav-only header */
body.is-hero-top{
  --header-height: 72px; /* compact target */
}

/* Ensure header actually matches the compact target */
body.is-hero-top .header-inner{
  padding-block: 10px;           /* reduce vertical padding */
  min-height: var(--header-height);
}

/* Brandmark must not occupy layout space pre-scroll */
body.is-hero-top:not(.has-scrolled) .brandmark{
  display: none;
}

/* Compact layout: nav aligned right */
body.is-hero-top:not(.has-scrolled) .header-inner{
  justify-content: flex-end;
}

/* After scroll: restore brandmark and normal spacing */
body.is-hero-top.has-scrolled .brandmark{
  display: flex;
}

body.is-hero-top.has-scrolled .header-inner{
  justify-content: space-between;
  padding-block: 14px;           /* restore existing */
  min-height: 0;             /* let content define full header */
}

body.is-hero-top .hero{
  background: var(--bg);
}

body.is-hero-top .hero-headerLogo{
  display: block;
  width: var(--hero-rail);
  margin: 0 auto;
  padding-top: clamp(24px, 4vw, 48px);
}

body.is-hero-top .hero-headerLogo-img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}



/* Hero full-width: taller hero without stealing image height */
body.is-hero-top.has-scrolled .hero{
  min-height: 80vh;
  padding-top: calc(var(--header-height) + var(--hero-fullbleed-top-gap));
  padding-bottom: 40px;
  overflow: hidden;
  background: var(--bg);
}

/* Full-width state: expand to viewport width */
body.is-hero-top.has-scrolled .hero-media{
  width: 100vw;
}


.hero-title-spacer{
  height:clamp(56px, 7vw, 88px); /* roughly the headline height */
}

.hero-media{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:-1px;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background: transparent;
  filter: none;
  transform: none;
}

/* Hero media: centred rail with width animation (desktop/tablet only) */
@media (min-width: 768px){
  .hero .hero-media{
    position: absolute;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: var(--hero-rail);
    transition: width 2000ms cubic-bezier(.2, .8, .2, 1);
  }

  .hero-media-img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
  }
}

.hero .hero-media-img{
  object-position: 50% 18%;
  transition: none;
}

/* Tablet/tablet_plus: fixed 75px gutters pre-scroll, preserve smooth full-width transition */
@media (min-width: 768px) and (max-width: 1329px){
  .hero{
    --hero-gutter: 75px;
  }

  /* Pre-scroll hero media width: fixed gutters, keep existing centring */
  .hero .hero-media{
    width: calc(100vw - (var(--hero-gutter) * 2));
    /* keep existing left:50% and transform translateX(-50%) from base rule */
    /* keep existing transition: width 1400ms cubic-bezier(.22,.61,.36,1) */
  }

  /* Scrolled/full-width state: ensure it goes to true full width */
  body.is-hero-top.has-scrolled .hero-media{
    width: 100vw;
  }

  /* CTA aligns to the image edge, not viewport edge */
  .hero-cta{
    right: var(--hero-gutter);
  }
}

.hero-title{
  position:absolute;
  left:var(--pad);
  right:var(--pad);
  top: clamp(-110px, -12vw, -70px);             /* adjust until it sits in the strip */
  max-width:var(--max);
  margin:0 auto;
  z-index:3;

  /* keep the headline readable */
  text-shadow: 0 10px 30px rgba(0,0,0,.55);
}

.hero-title-bg{
  display:inline-block;
  padding:22px 32px;
  background:rgba(28,31,34,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius:18px;
  color:#fff;
}

.hero-copy{
  max-width:68ch;
  background:rgba(28,31,34,.42);
  padding:18px 22px;
  border-radius:14px;
}

.hero-copy p{
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:18px;
  backdrop-filter: blur(2px);
}

.hero-inner{
  position:relative;
  z-index:2;
  padding:0 var(--pad);
  padding-bottom:clamp(18px, 3vw, 36px);
  max-width:var(--max);
  margin:0 auto;
  width:100%;
  display:grid;
  gap:18px;
  min-height:100%;
}
h1{
  margin:0;
  margin-top:-24px;
  font-size:var(--h1);
  letter-spacing:-.02em;
  line-height:1.05;
  font-weight:520;
}
.hero p{
  margin:0;
  max-width:70ch;
  font-size:18px;
  color:rgba(255,255,255,.82);
}

.hero-cta{
  position:absolute;
  right:0;
  bottom:0;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;

  background:rgba(28,31,34,.35);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  padding:12px 14px;
  border-radius: var(--btn-radius);
  width:max-content;
}

/* base */
.hero-cta .btn{
  color:#fff;
}

/* primary */
.hero-cta .btn.primary{
  background:rgba(28,31,34,.92);
  border:1px solid rgba(28,31,34,.92);
}
.hero-cta .btn.primary:hover{
  background:rgba(28,31,34,1);
  border-color:rgba(28,31,34,1);
}

/* secondary */
.hero-cta .btn.secondary{
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.35);
}
.hero-cta .btn.secondary:hover{
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.45);
}

/* Mobile hero: height comes from image, no forced tall container */
@media (max-width: 767px){
  .hero{
    position: relative; /* anchor for absolute CTA */
    background: #000 !important;
    color: #fff;
    min-height: 0 !important;
    height: auto !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
    transition: none !important;
  }

  .hero-inner{
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* keep media in-flow */
  .hero-media{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    background: #000 !important;
  }

  .hero-media-img{
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* CTA overlays image */
  .hero-cta{
    position: absolute !important;
    right: 12px;
    bottom: 12px;
    margin: 0 !important;
    width: auto;
    z-index: 5; /* above image */
  }
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-radius: var(--btn-radius);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  transition:all .18s ease;
  font-size:14px;
  transform: translateY(0);
  box-shadow: none;
}
.btn:hover{
  background:rgba(255,255,255,.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(0,0,0,.16);
}
.btn:focus-visible{
  outline: 2px solid rgba(175,162,135,.55); /* csg-gold */
  outline-offset: 3px;
}
@media (hover: none){
  .btn:hover{
    transform: none;
    box-shadow: none;
  }
}

.btn--ghost{
  background: transparent;
  border: 1px solid rgba(28,31,34,.18);
  color: var(--charcoal);
}

.btn--ghost:hover{
  background: rgba(28,31,34,.04);
  border-color: rgba(28,31,34,.28);
}

.btn--dark{
  background: var(--charcoal);
  border: 1px solid var(--charcoal);
  color: #fff;
}

.btn--dark:hover{
  background: rgba(28,31,34,.92);
  border-color: rgba(28,31,34,.92);
}

.link-underline{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.scrollhint{font-size:13px; color:rgba(255,255,255,.70)}

/* Site modal */
.site-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.site-modal.is-open{
  display: block;
}

.site-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}

.site-modal__panel{
  position: relative;
  max-width: 640px;
  max-height: 85vh;
  margin: 12vh auto 0;
  background: #fff;
  padding: 56px 56px 48px;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.site-modal__panel--schedule{
  max-width: 1136px; /* 1024px content + 56px padding each side */
  height: 1024px;
  padding-left: 0;
  padding-right: 0;
  position: relative;
  background: #f4f4f4;
}

.site-modal__panel--schedule::before{
  content: '';
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 104px;
  background: #f4f4f4;
  z-index: 0;
}

@media (max-width: 1100px){
  .site-modal__panel--schedule{
    max-width: calc(100vw - 48px);
  }
}

.site-modal__title{
  margin: 0 0 12px;
}

.site-modal__copy{
  font-size: 14px;
  line-height: 1.6;
  color: rgba(0,0,0,0.7);
}

.site-modal__close{
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: 0;
  font-size: 22px;
  cursor: pointer;
  color: rgba(0,0,0,0.6);
  z-index: 10;
}

.site-modal__logo-wrapper{
  position: absolute;
  top: 24px;
  left: 24px;
  height: 104px;
  z-index: 1;
  background: #f4f4f4;
  padding: 8px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.site-modal__logo{
  height: 100%;
  width: auto;
}

@media (max-width: 767px){
  .site-modal__panel--schedule::before{
    height: 10vw;
    min-height: 60px;
    max-height: 104px;
    top: 12px;
  }
  
  .site-modal__logo-wrapper{
    height: 10vw;
    min-height: 60px;
    max-height: 104px;
    top: 12px;
    left: 12px;
    padding: 4px 8px;
  }
  
  .site-modal__logo{
    height: 100%;
    width: auto;
  }
}

.booking-embed {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding-top: 25px;
}

.booking-embed__iframe {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  min-height: 0;
}

.booking-embed__fallback {
  margin: 0;
  padding: 10px 16px;
  font-size: 14px;
  text-align: center;
  color: rgba(0,0,0,0.7);
}

.booking-embed__fallback a {
  color: var(--csg-gold);
  text-decoration: underline;
}

@media (min-width: 768px) and (max-width: 1068px){
  .booking-embed {
    padding-top: 50px;
  }
}

/* Tell modal, widen panel on tablet plus and above, keep mobile comfortable */
.site-modal__panel--tell{
  max-width: 640px;
  padding: 56px 56px 48px; /* Ensure consistent padding for alignment */
}

@media (min-width: 1000px){
  .site-modal__panel--tell{
    max-width: 1136px; /* 1024px content + 56px padding each side */
  }
}

/* Tell modal header with logo and title - aligns with form rail via panel padding */
.site-modal__header--tell{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 135px;
}

.site-modal__logo-wrapper--tell{
  position: relative;
  height: 135px;
  background: #f4f4f4;
  padding: 8px 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

.site-modal__logo-wrapper--tell .site-modal__logo{
  height: 100%;
  width: auto;
  display: block;
}

.site-modal__title--tell{
  margin: 0 !important;
  padding: 0;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 135px;
}

@media (max-width: 767px){
  .site-modal__header--tell{
    gap: 20px;
    min-height: 113px;
  }
  
  .site-modal__logo-wrapper--tell{
    height: 113px;
    padding: 6px 12px;
  }
  
  .site-modal__title--tell{
    font-size: 1.5rem;
    height: 113px;
  }
}

/* Tell modal: align logo wrapper to the same left rail as the form */
#tellModal .site-modal__logo-wrapper--tell{
  padding-left: 0;
  margin-left: 0;
}

/* Tell modal: header controls vertical layout */
#tellModal .site-modal__header--tell{
  margin-left: 0;
  background: transparent;
  padding: 24px 0;
  display: flex;
  align-items: stretch;
  gap: 25px;
}

/* Ensure no wider ancestor is painting the background */
#tellModal .site-modal__panel--tell{
  background: #fff;
}

/* Tell modal: make header share the same rail as the form body */
#tellModal .site-modal__panel{
  display: flex;
  flex-direction: column;
}

/* Remove any inset on the logo wrapper and correct 24px offset */
#tellModal .site-modal__logo-wrapper--tell{
  padding: 0;
  margin: 0;
  width: auto;
  justify-content: flex-start;
  position: relative;
  left: -24px;
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
}

/* Optional: ensure logo never forces horizontal layout */
#tellModal .site-modal__logo--tell{
  display: block;
  max-width: 320px;
  height: auto;
}

/* Ensure title and intro copy sit on the same left rail */
#tellModal .site-modal__title,
#tellModal .site-modal__copy{
  margin-left: 0;
  padding-left: 0;
}

/* Title pinned to bottom of header */
#tellModal .site-modal__title{
  display: flex;
  align-items: flex-end;
  margin: 0;
}

/* Tell modal, body can scroll if content exceeds max-height */
#tellModal .site-modal__body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-top: 18px;
}

/* Gravity Forms, scoped to Tell modal only */
#tellModal .gform_wrapper{
  margin: 0;
}

#tellModal .gform_wrapper form{
  margin: 0;
}

/* Remove default lists and tighten spacing */
#tellModal .gform_fields{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

#tellModal .gfield{
  margin: 0;
}

#tellModal .gfield_label{
  display: block;
  font-size: 14px;
  line-height: 1.4;
  margin: 0 0 6px;
  color: rgba(0,0,0,0.85);
}

/* Make helper text calm and consistent */
#tellModal .gfield_description,
#tellModal .gform_wrapper .gfield_description{
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.60);
}

/* Required fields indicator - smallest font on modal */
#tellModal .gform_required_legend,
#tellModal .gform_description,
#tellModal .gform_wrapper .gform_description,
#tellModal .gform_wrapper .gform_required_legend{
  font-size: 11px;
  line-height: 1.4;
  color: rgba(0,0,0,0.50);
  margin: 0 0 12px;
}

/* Inputs */
#tellModal input[type="text"],
#tellModal input[type="email"],
#tellModal input[type="tel"],
#tellModal input[type="url"],
#tellModal input[type="number"],
#tellModal input[type="date"],
#tellModal select,
#tellModal textarea{
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(28,31,34,.18);
  background: rgba(255,255,255,.96);
  color: rgba(0,0,0,0.86);
  outline: none;
}

#tellModal textarea{
  min-height: 120px;
  resize: vertical;
}

#tellModal input:focus,
#tellModal select:focus,
#tellModal textarea:focus{
  border-color: rgba(175,162,135,.55);
  box-shadow: 0 0 0 3px rgba(175,162,135,.18);
}

/* Name field, remove the boxy default framing */
#tellModal .ginput_container_name{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 0;
}

@media (max-width: 767px){
  #tellModal .ginput_container_name{
    grid-template-columns: 1fr;
  }
}

#tellModal .ginput_container_name span{
  margin: 0;
}

/* Tell modal: remove browser fieldset / legend framing for Name field */
#tellModal fieldset{
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

#tellModal legend{
  padding: 0;
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
  color: rgba(0,0,0,0.85);
}

/* Checkboxes */
#tellModal .gfield_checkbox{
  margin: 0;
  padding: 0;
}

#tellModal .gfield_checkbox li{
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

#tellModal .gfield_checkbox input[type="checkbox"]{
  margin-top: 3px;
}

#tellModal .gfield_checkbox label{
  font-size: 14px;
  line-height: 1.4;
  color: rgba(0,0,0,0.80);
}

/* Privacy HTML field */
#tellModal .gfield_html{
  font-size: 13px;
  line-height: 1.5;
  color: rgba(0,0,0,0.60);
}

#tellModal .gfield_html a{
  color: var(--csg-gold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer and submit button */
#tellModal .gform_footer{
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
}

@media (min-width: 1000px){
  #tellModal .gform_footer{
    justify-content: flex-end; /* bottom right on tablet plus and above */
  }
}

#tellModal .gform_footer input[type="submit"],
#tellModal .gform_footer button,
#tellModal .gform_button{
  appearance: none;
  border: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: #fff;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

#tellModal .gform_footer input[type="submit"]:hover,
#tellModal .gform_footer button:hover,
#tellModal .gform_button:hover{
  background: rgba(28,31,34,.92);
  border-color: rgba(28,31,34,.92);
}

#tellModal .gform_footer input[type="submit"]:focus-visible,
#tellModal .gform_footer button:focus-visible,
#tellModal .gform_button:focus-visible{
  outline: 2px solid rgba(175,162,135,.55);
  outline-offset: 3px;
}

/* Validation, keep it tidy */
#tellModal .validation_message,
#tellModal .gfield_validation_message{
  font-size: 13px;
  line-height: 1.4;
  margin-top: 6px;
}

#tellModal .gform_validation_errors{
  margin: 0 0 12px;
  border-radius: 12px;
}

/* Layout */
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2, minmax(0, 1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0, 1fr))}
.grid-4{grid-template-columns:repeat(4, minmax(0, 1fr))}
@media (max-width:980px){
  .grid-4{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 767px){
  .grid-3,.grid-2{grid-template-columns:1fr}
  .header-inner{gap:10px}
  .brandmark{min-width:auto}
}

.card{
  background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 1px 0 rgba(28,31,34,.04);
}
.card-pad{padding:18px}

/* Editorial callout container */
.cta-callout{
  background: var(--callout-bg) !important;
  border: none !important;
  border-radius: var(--callout-radius) !important;
  padding: var(--callout-pad) !important;
  box-shadow: none !important;
  background-image: none !important;
  backdrop-filter: none !important;
  max-width: var(--callout-max);
  overflow: visible;
}

/* If the callout appears on light sections anywhere */
.section:not(.is-dark) .cta-callout,
body .cta-callout.is-on-light{
  border-color: var(--callout-border-light);
}

/* Typographic hierarchy */
.cta-callout-title{
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: .01em;
  font-weight: 500;
  margin: 0 0 12px 0;
}

.cta-callout-copy{
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px 0;
  opacity: .92; /* keep calm, not greyed out */
}

/* Single decisive CTA - minimal editorial outline */
.cta-callout-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: var(--btn-radius);
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none;
  text-transform: none;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin-top: 0;
  transition: border-color 120ms ease;
}

/* Hover/focus: very subtle */
.cta-callout-btn:hover{
  border-color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
  filter: none;
  transform: none;
}

.cta-callout-btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.65);
  outline-offset: 3px;
  border-color: rgba(255,255,255,0.45) !important;
  background: transparent !important;
}

/* Mobile: full width button and slightly tighter pad */
@media (max-width: 767px){
  .cta-callout{
    padding: 24px;
    max-width: 100%;
  }
  .cta-callout-btn{
    width: 100%;
  }
}

.muted{color:rgba(28,31,34,.70)}
h2{
  margin:8px 0 0;
  font-size:var(--h2);
  letter-spacing:-.01em;
  line-height:1.15;
  font-weight:520;
}
h3{margin:0 0 6px; font-size:var(--h3); font-weight:520; letter-spacing:-.01em}

/* Value props */
.bullets{margin:14px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.bullets li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:rgba(28,31,34,.82);
}
.tick{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--csg-gold);
  position:relative;
  margin-top:2px;
  flex:0 0 auto;
}

.tick::after{
  content:"";
  position:absolute;
  left:5px;
  top:3px;
  width:6px;
  height:10px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}

/* Portfolio tiles */
.portfolio-tile{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.portfolio-tile .img{
  height: 190px;
  background: #ddd;
  flex: 0 0 auto;
  overflow: hidden;
}

.portfolio-tile .img .tile-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio-tile .meta{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.portfolio-grid{
  margin-top: 18px;
}
.portfolio-desc{
  margin: 0;
}

/* Portfolio outbound links */
.portfolio-url{
  display:inline-block;
  width:max-content;
  margin-top:8px;
  font-size:13px;
  font-weight:500;
  color:rgba(28,31,34,.86);
  text-decoration:none;
  border-bottom:1px solid rgba(28,31,34,.25);
  padding-bottom:1px;
  transition:color .18s ease, border-color .18s ease;
}
.portfolio-url:hover{
  color:var(--charcoal);
  border-bottom-color:rgba(28,31,34,.55);
}

/* Snippets */
.snippet{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* keeps image corners clean */
}

.snippet .card-pad{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  height: 100%;
}

.snippet .snippet-summary{
  flex: 1;
}

/* Image wrapper */
.snippet .img{
  height: 190px;
  background: #ddd; /* neutral fallback only */
  flex: 0 0 auto;
  overflow: hidden;
}

/* Actual image */
.snippet .img .snippet-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.snippet .row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}

.tag{
  font-size:11px;
  color:rgba(28,31,34,.55);
  border:1px solid rgba(28,31,34,.12);
  background:rgba(255,255,255,.75);
  padding:6px 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width:60%;
}

.brand-chip-logo{
  height:14px;
  width:auto;
  opacity:.85;
}

.brand-mark{
  margin-top: 14px;
  flex: 0 0 auto;
}

.brand-mark-img{
  height: 26px;
  width: auto;
  display: block;
  opacity: .65;
}

/* News card brand mark: responsive sizing */
#section-news .brand-mark{
  width: 100%;
}

#section-news .brand-mark-img{
  width: 60%;
  height: auto;     /* overrides fixed 26px */
  max-width: none;  /* overrides 180px cap so % can work */
  max-height: none; /* overrides 56px cap */
  display: block;
  object-fit: contain;
  opacity: 1;
  transition: none;
}

#section-news .card:hover .brand-mark-img{
  opacity: 1;
}

.snippet-link{
  position: relative;
  display: inline-block;
  font-size:13px;
  color:rgba(28,31,34,.86);
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 1px;
  white-space:nowrap;
  margin-left: 4px;
}

.snippet-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(28,31,34,.65);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
  pointer-events: none;
}

.snippet-link:hover::after{
  transform: scaleX(1);
}

.snippets-grid{
  margin-top: 18px;
}

.snippet-summary .snippet-link{
  font-weight: 600;
}

/* TODO (CSS hygiene): empty hover ruleset flagged by linting, remove or implement during next CSS cleanup pass */
.snippet-summary .snippet-link:hover{
  /* Animated underline handled by ::after */
}

/* Footer */
footer{
  padding:16px 0 34px;
  border-top: none;
  background: var(--bg);
  margin-top:20px;
}

.footer-grid{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.footer-rail{
  width: 100%;
}

/* Desktop: expand footer beyond standard container */
@media (min-width: 1330px){
  footer .wrap{
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  footer .footer-grid{
    /* Full-bleed row, controlled gutters */
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  footer .footer-rail{
    /*
      Gutters:
      - stay at 24px up to ~1568px
      - then ramp linearly
      - hit 200px at 1920px
      Uses shared --gutter-wide token
    */
    padding-left: var(--gutter-wide);
    padding-right: var(--gutter-wide);
  }
}

/* Desktop: expand header rail beyond standard container */
@media (min-width: 1330px){
  .header-inner {
    --header-gutter: var(--gutter-wide);
    max-width: none;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* Header inner no longer controls width */
  .header .wrap,
  .site-header .wrap,
  header .wrap {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }

  /* Ensure header container spans full width */
  .header,
  .site-header,
  header {
    left: 0;
    right: 0;
    width: 100%;
  }
}

.footer-social{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-start;
  font-size:14px;
  color:rgba(28,31,34,.72);
}

.footer-social a{
  position: relative;
  display: inline-block;
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 2px;
}

.footer-social a::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(28,31,34,.65);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.footer-social a:hover::after{
  transform: scaleX(1);
}

.footer-logos{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
}

.footer-logo:hover{
  background:rgba(255,255,255,.55);
  border-color:var(--border);
}

/* Dark UI: remove grey hover box, only opacity lift */
body[data-ui="dark"] footer .footer-logo:hover{
  background: transparent;
  border-color: transparent;
}

.footer-logos img{
  height:72px;
  width:auto;
  display:block;
}

.footer-divider{
  width: 100%;
  height: 1px;
  background: rgba(28,31,34,.24);
  margin: 1px 0;
}

.footer-copyright{
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
}

@media (min-width: 1025px){
  footer .footer-logos img{
    height: clamp(72px, 6.2vw, 130px);
    width: auto;
  }
}

/* CSG stays full colour */
.logo-colour{
  filter:none;
  opacity:1;
}

/* Brands default to greyed out, hover to colour */
.logo-dim{
  filter:grayscale(100%);
  opacity:.55;
  transition:filter .18s ease, opacity .18s ease;
}

.footer-logo:hover .logo-dim{
  filter:grayscale(0%);
  opacity:1;
}

/* Dark UI: white logo variants should be subdued until hover (match light-mode behaviour) */
body[data-ui="dark"] footer .footer-brand-logo{
  opacity: .55;
  transition: opacity .18s ease;
}

/* Hover brings them up to full strength */
body[data-ui="dark"] footer .footer-logo:hover .footer-brand-logo{
  opacity: 1;
}

@media (max-width: 767px){
  .footer-logos img{ height:58px; }
}

/* Hide portfolio logos in footer on mobile (use burger menu rail instead) */
@media (max-width: 767px){
  footer .footer-logos{
    display: none !important;
  }
}

/* Footer theme sync with header via global UI state */
body[data-ui="dark"] footer{
  background: #000;
  color: #fff;
}

body[data-ui="dark"] .footer-social{
  color: rgba(255,255,255,.72);
}

body[data-ui="dark"] .footer-social a::after{
  background: rgba(255,255,255,.65);
}

body[data-ui="light"] footer{
  background: var(--bg);
  color: var(--charcoal);
}

body[data-ui="light"] .footer-social{
  color: rgba(28,31,34,.72);
}

body[data-ui="light"] .footer-social a::after{
  background: rgba(28,31,34,.65);
}

/* Contact section - footer-style three-column block */
.contact-footer{
  padding: 0; /* let the internal wrap handle vertical rhythm if needed */
}


.contact-footer-rule{
  height: 1px;
  background: rgba(28,31,34,.24);
  opacity: 1;
}

body[data-ui="dark"] .contact-footer-rule{
  background: rgba(255,255,255,.18);
}

.contact-footer-rule--bottom{
  margin-top: 0;
}

.contact-footer-grid{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
  align-items: start;
  gap: 48px;
  padding: 40px 0;
}

.contact-footer-policies{
  display: grid;
  gap: 10px;
  justify-items: start;
  padding-top: 28px; /* matches title height so policy lines align with 'Creative House' */
}

.contact-footer-link{
  position: relative;
  display: inline-block;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: .92;
  padding-bottom: 1px;
}

.contact-footer-link::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.contact-footer-link:hover{
  opacity: 1;
}

.contact-footer-link:hover::after{
  transform: scaleX(1);
}

.contact-footer-addressTitle{
  font-size: 18px;
  line-height: 1.15;
  font-weight: 600;
  margin: -6px 0 10px; /* lifts title slightly higher on the page */
}

.contact-footer-addressLine{
  font-size: 14px;
  line-height: 1.6;
  opacity: .92;
}

.contact-footer-addressLine a[href^="tel:"]{
  display: inline-block;
  margin-top: 14px;
  font-weight: 600;
}

.contact-footer-cta{
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.contact-footer-tell-more{
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
  padding-bottom: 1px;
}

.contact-footer-tell-more::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.contact-footer-tell-more:hover::after{
  transform: scaleX(1);
}

/* Intro section: Tell us more button (inverted colors for dark background) */
.intro-tell-more{
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding-bottom: 1px;
}

.intro-tell-more::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}

.intro-tell-more:hover{
  color: #fff;
}

.intro-tell-more:hover::after{
  transform: scaleX(1);
}

.contact-footer-headline{
  margin: 0 0 0 0;
  font-size: var(--h2);
}

.contact-footer-cta .btn.alt{
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid rgba(28, 31, 34, 0.24);
  background: transparent;
  color: rgba(28, 31, 34, 0.92);
  letter-spacing: 0.84px;
  transition: border-color 0.12s;
  box-shadow: 0 2px 8px rgba(28, 31, 34, 0.08);
}

.contact-footer-cta .btn.alt:hover{
  border-color: rgba(28, 31, 34, 0.40);
  background: transparent;
  color: rgba(28, 31, 34, 0.92);
}

@media (max-width: 920px){
  .contact-footer-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* =====================================================
   Phase 3 CSS discipline
   - Primitives only (reusable across 2+ sections)
   - Exceptions must be justified
   - No per-section selectors (#section-* .foo)
   ===================================================== */

/* =====================================================
   Editorial layout scaffold (Phase 3)
   Structure only, no section-specific styling
   ===================================================== */

.editorial-section{
  position:relative;
  padding:clamp(64px, 8vw, 120px) 0;
}

.editorial-section .wrap{
  width:min(1200px, calc(100% - 48px));
  margin:0 auto;
}

.editorial-grid{
  display:grid;
  align-items:center;
  gap:clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

/* Alternating rhythm */
.editorial-section--image-left .editorial-media{ order:0; }
.editorial-section--image-left .editorial-body{ order:1; }

.editorial-section--image-right .editorial-media{ order:1; }
.editorial-section--image-right .editorial-body{ order:0; }

/* Text discipline */
.editorial-body{
  max-width:56ch;
}

/* Media abstraction */
.editorial-media{
  position:relative;
}

.editorial-mediaFrame{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:rgba(0,0,0,.04);
}

.editorial-mediaFrame > *{
  display:block;
  width:100%;
  height:auto;
}

/* Responsive collapse */
@media (max-width: 920px){
  .editorial-grid{
    grid-template-columns:1fr;
  }

  .editorial-section--image-left .editorial-media,
  .editorial-section--image-right .editorial-media{
    order:0;
  }

  .editorial-section--image-left .editorial-body,
  .editorial-section--image-right .editorial-body{
    order:1;
  }
}

/* =====================================================
   Portfolio 3-column grid layout
   ===================================================== */

.section-portfolio{
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  --portfolio-img-shadow:
    0 0 0 1px rgba(0,0,0,.14),
    0 10px 22px rgba(0,0,0,.26),
    0 28px 60px rgba(0,0,0,.18);
  --portfolio-logo-h: 64px;
}

.section-about{
  overflow-x: clip;
  overflow-y: visible;
  position: relative;

  --about-img-shadow:
    0 0 0 1px rgba(0,0,0,.14),
    0 10px 22px rgba(0,0,0,.26),
    0 28px 60px rgba(0,0,0,.18);

  --about-logo-h: 64px;
  --about-content-offset-y: clamp(-60px, -6vw, -24px);
}

.section-about .aboutList{
  padding-left: 20px;
  margin: 0 0 18px 0;
}

.section-about .aboutList li + li{
  margin-top: 6px;
}


.portfolio-grid{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(-18px, -2vw, -36px);
  padding: var(--space-4) 0;
  display: grid;
  gap: 0;
  row-gap: 0;
  column-gap: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background: transparent;
}

.section-portfolio .portfolio-rail{
  width: 100%;
}

.editorial-sectionHeader{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-top: clamp(72px, 10vw, 140px);
  padding-bottom: clamp(18px, 3.2vw, 42px);
  padding-inline: 0;
  text-align: center;
  box-sizing: border-box;
  position: relative;
  z-index: 3;
  overflow: visible;
}

.editorial-sectionHeader-inner{
  width: 100%;
  box-sizing: border-box;
}

.editorial-sectionHeader-rail{
  position: relative;
}

.editorial-sectionHeader h2{
  margin: 0;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-wrap: nowrap;
  font-size: clamp(16px, 2.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--charcoal);
  text-shadow:
    0 14px 28px rgba(0,0,0,.22),
    0 40px 110px rgba(0,0,0,.26),
    0 72px 180px rgba(0,0,0,.18);
}

.editorial-sectionHeader h2::before,
.editorial-sectionHeader h2::after{
  content: none !important;
  display: none !important;
}

/* Grid-quotes modifier: disable pseudo-element quotes, use grid-based quotes instead */
.editorial-sectionHeader.editorial-sectionHeader--gridQuotes::before,
.editorial-sectionHeader.editorial-sectionHeader--gridQuotes::after{
  content: none;
  display: none;
}

/* Grid-quotes modifier: allow wrapping for long headlines */
.editorial-sectionHeader.editorial-sectionHeader--gridQuotes h2,
.editorial-sectionHeader.editorial-sectionHeader--gridQuotes h1{
  white-space: normal;
  text-wrap: balance;
}

/* Grid-quotes modifier: grid-based quote layout */
/* Mobile base (≤767px): stretching middle column, wrapping headline */
.editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  padding-inline: 0;
  column-gap: 8px;
}

.editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h2,
.editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h1{
  margin: 0;
  width: 100%;
  max-width: none;
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  min-width: 0;
  font-size: clamp(15px, 2.9vw, 30px);
}

/* Tablet+ (768px+): tight lockup with max-content */
@media (min-width: 768px){
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid{
    grid-template-columns: auto max-content auto;
    justify-content: center;
    column-gap: 8px;
    padding-inline: 0;
  }

  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h2,
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h1{
    width: auto;
    max-width: none;
  }
}

/* Tablet Plus+ (1000px+): enforce single line */
@media (min-width: 1000px){
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h2,
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h1{
    white-space: nowrap;
  }
}

@media (max-width: 767px){
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid{
    grid-template-columns: auto minmax(0, clamp(28ch, 86vw, 44ch)) auto;
    justify-content: center;
    align-items: center;
    column-gap: 12px;
  }

  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h2,
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h1{
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 18px;
    line-height: 1.14;
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
  }
}

@media (min-width: 768px) and (max-width: 999px) {
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h2,
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h1 {
    font-size: clamp(18px, 2.2vw, 26px);
  }
}

@media (min-width: 1000px) and (max-width: 1329px) {
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h2,
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h1 {
    font-size: clamp(22px, 2.2vw, 27px);
  }
}

@media (min-width: 1330px) and (max-width: 1919px) {
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h2,
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h1 {
    font-size: clamp(28px, 2.2vw, 42px);
  }
}

@media (min-width: 1920px) {
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h2,
  .editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-sectionHeader-grid h1 {
    font-size: clamp(28px, 2.2vw, 42px);
  }
}

/* Grid-quotes modifier: quote glyph styling */
.editorial-sectionHeader.editorial-sectionHeader--gridQuotes .editorial-quote{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 400;
  line-height: 1;
  align-self: center;
  color: rgba(28,31,34,.20);
  letter-spacing: -0.05em;
  font-size: clamp(40px, 15vw, 160px);
  transform: translateY(-0.08em);
  user-select: none;
  pointer-events: none;
  display: block;
  white-space: nowrap;
}

/* Dark context: lighter quote glyphs for legibility (News section) */
#section-news .editorial-sectionHeader--gridQuotes .editorial-quote{
  color: rgba(255, 255, 255, .30);
}

.portfolio-row{
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 0;
  position: relative;
  width: 100%;
}

.portfolio-row.is-right{
  grid-template-columns: 1fr 2fr;
}

.portfolio-row.is-right .portfolio-media{
  order: 2;
}

.portfolio-row.is-right .portfolio-content{
  order: 1;
}

.portfolio-media{
  background: transparent;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: visible;
  z-index: 1;
}

.portfolio-row.is-left .portfolio-media{
  margin-right: 0;
}

.portfolio-row.is-right .portfolio-media{
  margin-left: 0;
}

.portfolio-row + .portfolio-row .portfolio-media{
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.portfolio-media-inner{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 6.2vw, 120px);
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
}

.portfolio-media-img{
  max-width: 85%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--about-img-shadow);
  /* "Wrapped print" depth */
  outline: 0;
  background: transparent;
}

/* Portfolio hero images: use section token so shadow applies (match About/Careers) */
#section-portfolio .portfolio-media-img{
  box-shadow: var(--portfolio-img-shadow);
}

.portfolio-content{
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 2.4vw, 56px);
  gap: var(--space-2);
  position: relative;
  top: var(--about-content-offset-y);
  z-index: 3;

  /* Centre the copy block within its grid cell, while keeping text left-aligned */
  max-width: 56ch;
  margin-inline: auto;
  text-align: left;
}

/* Anchor the copy column towards the image seam (keeps pairing tight) */
.portfolio-row.is-right .portfolio-content{
  margin-left: auto;
  margin-right: 0;
  padding-left: clamp(28px, 3vw, 64px);
  padding-right: clamp(18px, 2vw, 48px);
}

.portfolio-row.is-left .portfolio-content{
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(18px, 2vw, 48px);
  padding-right: clamp(28px, 3vw, 64px);
}

.portfolio-logo{
  background: none;
  border: none;
  box-shadow: none;
  height: var(--about-logo-h);
  display: flex;
  align-items: center;
}

.portfolio-logo img{
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

/* Portfolio: per-logo scale (presentation only, no asset changes) */
#section-portfolio .portfolio-logo{
  --logo-scale: 1;
  overflow: visible;
  justify-content: center;
}

#section-portfolio .portfolio-logo[data-logo-scale="0.9"]{
  --logo-scale: 0.9;
}
#section-portfolio .portfolio-logo[data-logo-scale="1.4"]{
  --logo-scale: 1.4;
}
#section-portfolio .portfolio-logo[data-logo-scale="1.6"]{
  --logo-scale: 1.6;
}

#section-portfolio .portfolio-logo img{
  display: block;
  transform: scale(var(--logo-scale));
  transform-origin: center center;
}


.portfolio-title{
  margin: 0;
}

.portfolio-desc{
  margin: 0;
  max-width: 48ch;
}

.portfolio-link{
  width: fit-content;
}

/* Portfolio CTA overlay positioning baseline */
#section-portfolio.section-portfolio .portfolio-media-inner {
  position: relative;
}

#section-portfolio.section-portfolio .portfolio-mediaOverlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

#section-portfolio.section-portfolio .portfolio-mediaCta {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  pointer-events: auto;
}

.portfolio-cta-overlay {
  display: none;
}

/* Portfolio overlay CTA – neutralized container, solid button */
#section-portfolio .portfolio-mediaCta .hero-cta{
  background: none;
  padding: 0;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  outline: none;
  isolation: auto;
}

#section-portfolio .portfolio-mediaCta .btn{
  background: rgba(28,31,34,.88);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--btn-radius);
  box-shadow:
    0 12px 30px rgba(0,0,0,.38),
    0 4px 10px rgba(0,0,0,.22);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

#section-portfolio .portfolio-mediaCta .btn:hover{
  background: rgba(28,31,34,.94);
  transform: translateY(-1px);
  box-shadow:
    0 16px 36px rgba(0,0,0,.42),
    0 6px 14px rgba(0,0,0,.26);
}

/* =====================================================
   About page layout (forked from Portfolio)
   ===================================================== */

.section-about .about-grid{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: clamp(-18px, -2vw, -36px);
  padding: var(--space-4) 0;
  display: grid;
  gap: 0;
  /* row-gap removed - using margin-bottom on rows instead */
  column-gap: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background: transparent;
}

.section-about .about-rail{
  width: 100%;
}

.section-about .about-row{
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 0;
  position: relative;
  width: 100%;
  margin-bottom: clamp(64px, 8vw, 100px);
}

.section-about .about-row:last-child{
  margin-bottom: 0;
}

.section-about .about-row.is-right{
  grid-template-columns: 1fr 2fr;
}


.section-about .about-row.is-right .about-media{
  order: 2;
}

.section-about .about-row.is-right .about-content{
  order: 1;
}

.section-about .about-media{
  background: transparent;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: visible;
  z-index: 1;
}

.section-about .about-row.is-left .about-media{
  margin-right: 0;
}

.section-about .about-row.is-right .about-media{
  margin-left: 0;
}

.section-about .about-row + .about-row .about-media{
  margin-top: 0;
  position: relative;
  z-index: 1;
}

.section-about .about-media-inner{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 6.2vw, 120px);
  box-sizing: border-box;
  background: transparent;
  border-radius: 0;
}

.section-about .about-media-img{
  max-width: 85%;
  max-height: 85%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center center;
  display: block;
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--about-img-shadow);
  /* "Wrapped print" depth */
  outline: 0;
  background: transparent;
}

/* About page: 50/50 split rows (is-even) — images must fill their cells (override base "shrink + centre") */
.section-about .about-row.is-even{
  grid-template-columns: 1fr 1fr;
  column-gap: 100px;
}

/* Remove the matte padding and centring behaviour for is-even rows */
.section-about .about-row.is-even .about-media-inner{
  padding: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

/* Remove padding from content on is-even rows (gap handles spacing) */
.section-about .about-row.is-even .about-content{
  padding: 0 !important;
}

/* Force the About image element (classed) to fill the cell */
.section-about .about-row.is-even .about-media-img{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  box-shadow: var(--about-img-shadow);
}

.section-about .about-content{
  background: transparent;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 2.4vw, 56px);
  gap: var(--space-2);
  position: relative;
  top: 0;
  z-index: 3;

  /* Copy fills the full width of its grid cell */
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

/* Anchor the copy column towards the image seam (keeps pairing tight) */
.section-about .about-row.is-right .about-content{
  margin-left: auto;
  margin-right: 0;
  padding-left: clamp(28px, 3vw, 64px);
  padding-right: clamp(18px, 2vw, 48px);
}

.section-about .about-row.is-left .about-content{
  margin-left: 0;
  margin-right: auto;
  padding-left: clamp(18px, 2vw, 48px);
  padding-right: clamp(28px, 3vw, 64px);
}

.section-about .about-logo{
  background: none;
  border: none;
  box-shadow: none;
  height: var(--about-logo-h);
  display: flex;
  align-items: center;
}

.section-about .about-logo img{
  height: 100%;
  width: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.section-about .about-title{
  margin: 0;
}

.section-about .about-desc{
  margin: 0;
  max-width: none;
}

.section-about .about-link{
  width: fit-content;
}

/* About page: style non-editorial H1s (editorial header uses GridQuotes ladder) */
.section-about h1:not(.editorial-sectionHeader-headline){
    font-size: clamp(28px, 2.2vw, 42px);
}

/* About page: Reduce H2 sizing from 2.2vw to 2.0vw */
.section-about h2{
  font-size: clamp(28px, 2.0vw, 42px);
}

@media (min-width: 1000px) and (max-width: 1329px){

  /* Match desktop shadow in tablet_plus */
  .section-about{
    --about-img-shadow:
      0 0 0 1px rgba(0,0,0,.14),
      0 10px 22px rgba(0,0,0,.26),
      0 28px 60px rgba(0,0,0,.18);
    --about-logo-h: 64px;
  }

  /* About tablet_plus: keep 2-column pairing but constrain to a centred rail */
  .section-about .about-row{
    width: min(1180px, calc(100% - 48px)); /* centred rail with 24px gutters */
    margin-left: auto;
    margin-right: auto;
    column-gap: clamp(24px, 3vw, 56px);
  }

  /* Remove "shrink + centre" behaviour that causes drift at these widths */
  .section-about .about-content{
    max-width: none;
    margin-inline: 0;
    top: 0; /* no vertical nudging on this breakpoint */
  }

  /* Keep the seam-anchoring idea, but make it deterministic */
  .section-about .about-row.is-left .about-content{
    margin-left: 0;
    margin-right: auto;
  }

  .section-about .about-row.is-right .about-content{
    margin-left: auto;
    margin-right: 0;
  }

  /* Ensure the image wrapper doesn't inflate the perceived alignment */
  .section-about .about-media-inner{
    padding: clamp(28px, 3.2vw, 64px);
  }

  /* Logos: keep consistent left edge without forcing full-width scaling */
  .section-about .about-logo img{
    width: auto;
    max-width: min(420px, 100%);
    height: auto;
  }

  /* Text fills the full width of its grid cell */
  .section-about .about-desc{
    max-width: none;
  }
}

@media (max-width: 999px){

  /* About tablet, one stable centred rail */
  .section-about{
    --about-tablet-rail: min(960px, calc(100% - 48px)); /* 24px gutter each side */
    --about-img-shadow:
      0 0 0 1px rgba(0,0,0,.14),
      0 10px 22px rgba(0,0,0,.26),
      0 28px 60px rgba(0,0,0,.18);
    --about-logo-h: 56px;
  }

  /* Stack every row to one column, make layout deterministic */
  .section-about .about-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 18px;
    justify-items: stretch !important;
    align-items: start !important;
  }

  /* Force copy ABOVE image on tablet, regardless of DOM order */
  .section-about .about-content{
    order: 1 !important;
  }

  .section-about .about-media{
    order: 2 !important;
  }

  /* Both blocks share the exact same centred rail and same left edge */
  .section-about .about-media,
  .section-about .about-content{
    width: var(--about-tablet-rail) !important;
    max-width: var(--about-tablet-rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Remove any vertical nudging that causes overlaps */
  .section-about .about-content{
    top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Media wrapper must not add padding or centring bias */
  .section-about .about-media{
    aspect-ratio: auto !important;
  }

  .section-about .about-media-inner{
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Image renders at full rail width, so edges match content rail */
  .section-about .about-media-img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Keep logo sane without affecting rail alignment */
  .section-about .about-logo{
    width: 100%;
  }

  /* Copy fills the full width of its grid cell */
  .section-about .about-title,
  .section-about .about-desc,
  .section-about .about-link{
    width: 100%;
    max-width: none;
    text-align: left !important;
  }
}

@media (max-width: 1329px){

  .section-about .about-grid{
    background: transparent;
  }

  .section-about .about-media,
  .section-about .about-media-inner,
  .section-about .about-content{
    background: transparent;
  }
}

/* =====================================================
   About breakpoint correction
   - Existing @media (max-width: 999px) is too broad.
   - Override tablet explicitly (768–999)
   - Reset mobile explicitly (<=767) to avoid tablet rules bleeding down
   ===================================================== */

@media (min-width: 768px) and (max-width: 999px){

  /* Tablet rail + tunable shadow */
  .section-about{
    --about-tablet-rail: min(960px, calc(100% - 48px)); /* 24px gutters */
    /* Start identical to desktop/tablet_plus, tune in DevTools later */
    --about-img-shadow:
      0 0 0 1px rgba(0,0,0,.14),
      0 10px 22px rgba(0,0,0,.26),
      0 28px 60px rgba(0,0,0,.18);
    --about-logo-h: 112px; /* was 56px */
    --about-media-pad: clamp(48px, 6.2vw, 120px);
  }

  /* Deterministic single-column stack */
  .section-about .about-row{
    grid-template-columns: 1fr !important;
    row-gap: 18px;
    align-items: start !important;
    justify-items: stretch !important;
  }

  /* Ensure content above media for tablet */
  .section-about .about-content{ order: 1 !important; }
  .section-about .about-media{ order: 2 !important; }

  /* One shared centred rail for BOTH blocks */
  .section-about .about-media,
  .section-about .about-content{
    width: var(--about-tablet-rail) !important;
    max-width: var(--about-tablet-rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Remove any inner padding/centering bias so edges match exactly */
  .section-about .about-content{
    top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-inline: auto !important; /* keep centred rail */
    max-width: none !important;     /* avoid "rail inside rail" */
    align-items: stretch !important;
    text-align: left !important;
  }

  .section-about .about-media{
    aspect-ratio: auto !important;
  }

  .section-about .about-media-inner{
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    background: transparent !important;
  }

  /* Image must define the rail width */
  .section-about .about-media-img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    /* do not hardcode shadow here, keep variable-driven */
  }

  /* Logo normalisation: height-driven, no width-based scaling games */
  .section-about .about-logo{
    height: var(--about-logo-h) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .section-about .about-logo img{
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transform: none !important; /* neutralise any per-brand transforms if present elsewhere */
  }

  /* Copy fills the full width of its grid cell */
  .section-about .about-title,
  .section-about .about-desc,
  .section-about .about-link{
    width: 100% !important;
    max-width: none;
    text-align: left !important;
  }
}

@media (max-width: 767px){

  /* Mobile must not be forced into the tablet rail constraints */
  .section-about{
    /* Keep shadow variable-driven, start identical, tune later if desired */
    --about-img-shadow:
      0 0 0 1px rgba(0,0,0,.14),
      0 10px 22px rgba(0,0,0,.26),
      0 28px 60px rgba(0,0,0,.18);
    /* Allow a slightly smaller logo on phones by default */
    --about-logo-h: 96px; /* was 48px */
  }

  /* Undo tablet rail forcing from the broad <=999 block */
  .section-about .about-media,
  .section-about .about-content{
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Let existing mobile styles control spacing, don't pin to a desktop-like rail */
  .section-about .about-content{
    padding-left: clamp(18px, 4vw, 24px) !important;
    padding-right: clamp(18px, 4vw, 24px) !important;
  }

  .section-about .about-media-inner{
    padding: 0 !important;
  }

  .section-about .about-media-img{
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-about .about-logo{
    height: var(--about-logo-h) !important;
  }

  .section-about .about-logo img{
    height: 100% !important;
    width: auto !important;
    transform: none !important;
  }
}

/* =====================================================
   About tablet cohesion, 768–999px
   - Keep seam alignment
   - Add quiet editorial stitching (rule + frame context)
   ===================================================== */

@media (min-width: 768px) and (max-width: 999px){

  .section-about{
    --about-tablet-inset: clamp(32px, 5vw, 72px);
    --about-tablet-gap: 10px;
    --about-tablet-rule: rgba(28,31,34,.14);
    --about-tablet-frame: rgba(28,31,34,.03);
  }

  /* Keep seam alignment */
  .section-about .about-media-inner{
    padding-left: var(--about-tablet-inset) !important;
    padding-right: var(--about-tablet-inset) !important;
    background: var(--about-tablet-frame) !important;
  }

  .section-about .about-content{
    padding-left: var(--about-tablet-inset) !important;
    padding-right: var(--about-tablet-inset) !important;
  }

  /* Caption ↔ image proximity */
  .section-about .about-row{
    row-gap: var(--about-tablet-gap) !important;
  }

  /* Editorial "production rule": fades out so it doesn't look like UI */
  .section-about .about-media{
    position: relative;
  }

  /* Hairline rule tying image to caption */
  .section-about .about-media::after{
    content: "";
    display: block;
    height: 1px;
    margin-top: 10px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--about-tablet-rule),
      transparent
    );
  }

  /* Tighten caption cadence slightly */
  .section-about .about-logo{
    margin-bottom: 6px;
  }
}

/* =====================================================
   About tablet text should wrap to photo edge, 768–999px
   - Remove inner max-width caps that force early line breaks
   ===================================================== */

@media (min-width: 768px) and (max-width: 999px){

  /* Make the content column truly match the image rail width */
  .section-about .about-content{
    max-width: none !important;
  }

  /* Remove the "48ch" limiter on the paragraph (and any 72ch from earlier overrides) */
  .section-about .about-title,
  .section-about .about-desc,
  .section-about .about-link{
    max-width: none !important;
  }

  /* Optional: keep link from looking stranded on very wide rails */
  .section-about .about-link{
    display: inline-block;
  }
}

@media (min-width: 1330px){
  .section-about{
    /* scale logo height with viewport, but keep sane bounds */
    --about-logo-h: clamp(72px, 6.2vw, 160px);
  }
}

/* =====================================================
   Editorial cover hero (Phase 3)
   ===================================================== */

.editorial-hero{
  position:relative;
  min-height:clamp(480px, 65vh, 720px);
  overflow:hidden;
}

.editorial-heroMedia{
  position:absolute;
  inset:0;
  background:var(--charcoal);
  min-height:clamp(480px, 65vh, 720px);
}

.editorial-heroMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.editorial-heroImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.editorial-heroOverlay{
  position:absolute;
  inset:0;
  z-index:3;
}

.editorial-heroOverlay .wrap{
  position:relative;
  height:100%;
  padding-top:clamp(14px, 6vw, 62px);
}

.editorial-heroTitle{
  margin:0;
  font-size:var(--h1);
  letter-spacing:-.02em;
  line-height:1.05;
  font-weight:520;
  color:#fff;
  text-shadow:0 10px 30px rgba(0,0,0,.55);
}

.editorial-heroCta{
  position:absolute;
  right:var(--pad);
  bottom:var(--pad);
  margin:0;
}

@media (min-width: 1000px) and (max-width: 1329px){

  /* Match desktop shadow in tablet_plus */
  #section-portfolio.section-portfolio{
    --portfolio-img-shadow:
      0 0 0 1px rgba(0,0,0,.14),
      0 10px 22px rgba(0,0,0,.26),
      0 28px 60px rgba(0,0,0,.18);
    --portfolio-logo-h: 64px;
  }

  /* Portfolio tablet_plus: keep 2-column pairing but constrain to a centred rail */
  #section-portfolio.section-portfolio .portfolio-row{
    width: min(1180px, calc(100% - 48px)); /* centred rail with 24px gutters */
    margin-left: auto;
    margin-right: auto;
    column-gap: clamp(24px, 3vw, 56px);
  }

  /* Remove "shrink + centre" behaviour that causes drift at these widths */
  #section-portfolio.section-portfolio .portfolio-content{
    max-width: none;
    margin-inline: 0;
    top: 0; /* no vertical nudging on this breakpoint */
  }

  /* Keep the seam-anchoring idea, but make it deterministic */
  #section-portfolio.section-portfolio .portfolio-row.is-left .portfolio-content{
    margin-left: 0;
    margin-right: auto;
  }

  #section-portfolio.section-portfolio .portfolio-row.is-right .portfolio-content{
    margin-left: auto;
    margin-right: 0;
  }

  /* Ensure the image wrapper doesn't inflate the perceived alignment */
  #section-portfolio.section-portfolio .portfolio-media-inner{
    padding: clamp(28px, 3.2vw, 64px);
  }

  /* Logos: keep consistent left edge without forcing full-width scaling */
  #section-portfolio.section-portfolio .portfolio-logo img{
    width: auto;
    max-width: min(420px, 100%);
    height: auto;
  }

  /* Text should align consistently, avoid a second "max-width rail inside rail" */
  #section-portfolio.section-portfolio .portfolio-desc{
    max-width: 56ch;
  }
}

@media (max-width: 999px){

  /* Portfolio tablet, one stable centred rail */
  #section-portfolio.section-portfolio{
    --portfolio-tablet-rail: min(960px, calc(100% - 48px)); /* 24px gutter each side */
    --portfolio-img-shadow:
      0 0 0 1px rgba(0,0,0,.14),
      0 10px 22px rgba(0,0,0,.26),
      0 28px 60px rgba(0,0,0,.18);
    --portfolio-logo-h: 56px;
  }

  /* Stack every row to one column, make layout deterministic */
  #section-portfolio.section-portfolio .portfolio-row{
    display: grid !important;
    grid-template-columns: 1fr !important;
    row-gap: 18px;
    justify-items: stretch !important;
    align-items: start !important;
  }

  /* Force copy ABOVE image on tablet, regardless of DOM order */
  #section-portfolio.section-portfolio .portfolio-content{
    order: 1 !important;
  }

  #section-portfolio.section-portfolio .portfolio-media{
    order: 2 !important;
  }

  /* Both blocks share the exact same centred rail and same left edge */
  #section-portfolio.section-portfolio .portfolio-media,
  #section-portfolio.section-portfolio .portfolio-content{
    width: var(--about-tablet-rail) !important;
    max-width: var(--about-tablet-rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Remove any vertical nudging that causes overlaps */
  #section-portfolio.section-portfolio .portfolio-content{
    top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }

  /* Media wrapper must not add padding or centring bias */
  #section-portfolio.section-portfolio .portfolio-media{
    aspect-ratio: auto !important;
  }

  #section-portfolio.section-portfolio .portfolio-media-inner{
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Image renders at full rail width, so edges match content rail */
  #section-portfolio.section-portfolio .portfolio-media-img{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
  }

  /* Keep logo sane without affecting rail alignment */
  #section-portfolio.section-portfolio .portfolio-logo{
    width: 100%;
  }


  /* Allow readable line length while keeping the left edge aligned to the rail */
  #section-portfolio.section-portfolio .portfolio-title,
  #section-portfolio.section-portfolio .portfolio-desc,
  #section-portfolio.section-portfolio .portfolio-link{
    width: 100%;
    max-width: 72ch;
    text-align: left !important;
  }
}

@media (max-width: 1329px){

  .portfolio-grid{
    background: transparent;
  }

  .portfolio-media,
  .portfolio-media-inner,
  .portfolio-content{
    background: transparent;
  }

}

/* =====================================================
   Portfolio breakpoint correction
   - Existing @media (max-width: 999px) is too broad.
   - Override tablet explicitly (768–999)
   - Reset mobile explicitly (<=767) to avoid tablet rules bleeding down
   ===================================================== */

@media (min-width: 768px) and (max-width: 999px){

  /* Tablet rail + tunable shadow */
  #section-portfolio.section-portfolio{
    --portfolio-tablet-rail: min(960px, calc(100% - 48px)); /* 24px gutters */
    /* Start identical to desktop/tablet_plus, tune in DevTools later */
    --portfolio-img-shadow:
      0 0 0 1px rgba(0,0,0,.14),
      0 10px 22px rgba(0,0,0,.26),
      0 28px 60px rgba(0,0,0,.18);
    --portfolio-logo-h: 112px; /* was 56px */
    --portfolio-media-pad: clamp(48px, 6.2vw, 120px);
  }

  /* Deterministic single-column stack */
  #section-portfolio.section-portfolio .portfolio-row{
    grid-template-columns: 1fr !important;
    row-gap: 18px;
    align-items: start !important;
    justify-items: stretch !important;
  }

  /* Ensure content above media for tablet */
  #section-portfolio.section-portfolio .portfolio-content{ order: 1 !important; }
  #section-portfolio.section-portfolio .portfolio-media{ order: 2 !important; }

  /* One shared centred rail for BOTH blocks */
  #section-portfolio.section-portfolio .portfolio-media,
  #section-portfolio.section-portfolio .portfolio-content{
    width: var(--about-tablet-rail) !important;
    max-width: var(--about-tablet-rail) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Remove any inner padding/centering bias so edges match exactly */
  #section-portfolio.section-portfolio .portfolio-content{
    top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-inline: auto !important; /* keep centred rail */
    max-width: none !important;     /* avoid "rail inside rail" */
    align-items: flex-start !important;
    text-align: left !important;
  }

  #section-portfolio.section-portfolio .portfolio-media{
    aspect-ratio: auto !important;
  }

  #section-portfolio.section-portfolio .portfolio-media-inner{
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    background: transparent !important;
  }

  /* Image must define the rail width */
  #section-portfolio.section-portfolio .portfolio-media-img{
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    /* do not hardcode shadow here, keep variable-driven */
  }

  /* Logo normalisation: height-driven, no width-based scaling games */
  #section-portfolio.section-portfolio .portfolio-logo{
    height: var(--portfolio-logo-h) !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  #section-portfolio.section-portfolio .portfolio-logo img{
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    transform: scale(var(--logo-scale)) !important;
    transform-origin: center center;
  }

  /* Copy stays aligned to rail edge, readable line length */
  #section-portfolio.section-portfolio .portfolio-title,
  #section-portfolio.section-portfolio .portfolio-desc,
  #section-portfolio.section-portfolio .portfolio-link{
    width: 100% !important;
    max-width: 72ch;
    text-align: left !important;
  }

  /* Compensate CTA positioning for media padding */
  #section-portfolio.section-portfolio .portfolio-mediaCta{
    right: calc(var(--about-media-pad) + 16px);
    bottom: 16px;
  }
}

@media (max-width: 767px){

  /* Mobile must not be forced into the tablet rail constraints */
  #section-portfolio.section-portfolio{
    /* Keep shadow variable-driven, start identical, tune later if desired */
    --portfolio-img-shadow:
      0 0 0 1px rgba(0,0,0,.14),
      0 10px 22px rgba(0,0,0,.26),
      0 28px 60px rgba(0,0,0,.18);
    /* Allow a slightly smaller logo on phones by default */
    --portfolio-logo-h: 96px; /* was 48px */
  }

  /* Undo tablet rail forcing from the broad <=999 block */
  #section-portfolio.section-portfolio .portfolio-media,
  #section-portfolio.section-portfolio .portfolio-content{
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Let existing mobile styles control spacing, don't pin to a desktop-like rail */
  #section-portfolio.section-portfolio .portfolio-content{
    padding-left: clamp(18px, 4vw, 24px) !important;
    padding-right: clamp(18px, 4vw, 24px) !important;
  }

  #section-portfolio.section-portfolio .portfolio-media-inner{
    padding: 0 !important;
  }

  #section-portfolio.section-portfolio .portfolio-media-img{
    width: 100% !important;
    max-width: 100% !important;
  }

  #section-portfolio.section-portfolio .portfolio-logo{
    height: var(--portfolio-logo-h) !important;
  }

  #section-portfolio.section-portfolio .portfolio-logo img{
    height: 100% !important;
    width: auto !important;
    transform: scale(var(--logo-scale)) !important;
    transform-origin: center center;
  }

  /* Show overlay CTA, hide inline link */
  .portfolio-cta-inline{
    display: none !important;
  }

  .portfolio-cta-overlay{
    display: inline-flex !important;
  }

  /* Mobile CTA sizing – match tablet behaviour */
  #section-portfolio.section-portfolio .portfolio-mediaCta .portfolio-cta-overlay{
    width: 200px;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Slightly tighter positioning on small screens */
  #section-portfolio.section-portfolio .portfolio-mediaCta{
    right: 12px;
    bottom: 12px;
  }
}

/* =====================================================
   Portfolio tablet cohesion, 768–999px
   - Keep seam alignment
   - Add quiet editorial stitching (rule + frame context)
   ===================================================== */

@media (min-width: 768px) and (max-width: 999px){

  #section-portfolio.section-portfolio{
    --portfolio-tablet-inset: clamp(32px, 5vw, 72px);
    --portfolio-tablet-gap: 10px;
    --portfolio-tablet-rule: rgba(28,31,34,.14);
    --portfolio-tablet-frame: rgba(28,31,34,.03);
  }

  /* Keep seam alignment */
  #section-portfolio.section-portfolio .portfolio-media-inner{
    padding-left: var(--about-tablet-inset) !important;
    padding-right: var(--about-tablet-inset) !important;
    background: var(--about-tablet-frame) !important;
  }

  #section-portfolio.section-portfolio .portfolio-content{
    padding-left: var(--portfolio-tablet-inset) !important;
    padding-right: var(--portfolio-tablet-inset) !important;
  }

  /* Caption ↔ image proximity */
  #section-portfolio.section-portfolio .portfolio-row{
    row-gap: var(--about-tablet-gap) !important;
  }

  /* Editorial "production rule": fades out so it doesn't look like UI */
  #section-portfolio.section-portfolio .portfolio-media{
    position: relative;
  }

  /* Hairline rule tying image to caption */
  #section-portfolio.section-portfolio .portfolio-media::after{
    content: "";
    display: block;
    height: 1px;
    margin-top: 10px;
    background: linear-gradient(
      90deg,
      transparent,
      var(--about-tablet-rule),
      transparent
    );
  }

  /* Tighten caption cadence slightly */
  #section-portfolio.section-portfolio .portfolio-logo{
    margin-bottom: 6px;
  }

  /* Portfolio CTA overlay: show overlay button, hide inline link */
  .portfolio-cta-inline {
    display: none !important;
  }

  .portfolio-cta-overlay {
    display: inline-flex !important;
  }

  #section-portfolio.section-portfolio .portfolio-mediaCta .portfolio-cta-overlay{
    width: 200px;               /* fixed size for all brands */
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;

    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* =====================================================
   Portfolio tablet text should wrap to photo edge, 768–999px
   - Remove inner max-width caps that force early line breaks
   ===================================================== */

@media (min-width: 768px) and (max-width: 999px){

  /* Make the content column truly match the image rail width */
  #section-portfolio.section-portfolio .portfolio-content{
    max-width: none !important;
  }

  /* Remove the "48ch" limiter on the paragraph (and any 72ch from earlier overrides) */
  #section-portfolio.section-portfolio .portfolio-title,
  #section-portfolio.section-portfolio .portfolio-desc,
  #section-portfolio.section-portfolio .portfolio-link{
    max-width: none !important;
  }

  /* Optional: keep link from looking stranded on very wide rails */
  #section-portfolio.section-portfolio .portfolio-link{
    display: inline-block;
  }
}

/* =====================================================
   Portfolio desktop CTA hover affordance, ≥1000px
   - Editorial underline on hover for clear clickability
   - No layout shift, no button styling
   ===================================================== */

@media (min-width: 1000px){

  .portfolio-cta-inline{
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: rgba(28,31,34,.86);
  }

  .portfolio-cta-inline::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: rgba(28,31,34,.65);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
  }

  .portfolio-cta-inline:hover{
    color: var(--charcoal);
  }

  .portfolio-cta-inline:hover::after{
    transform: scaleX(1);
  }
}

@media (min-width: 1330px){
  #section-portfolio.section-portfolio{
    /* scale logo height with viewport, but keep sane bounds */
    --portfolio-logo-h: clamp(72px, 6.2vw, 160px);
  }
}

/* =====================================================
   Home hero wordmark (standalone, beneath header)
   ===================================================== */

.hero-wordmark{
  background: var(--bg);
  padding-top: clamp(18px, 3vw, 36px);
  padding-bottom: clamp(12px, 2vw, 24px);
}

.hero-wordmark-inner{
  max-width: var(--hero-rail);
  margin: 0 auto;
}

.hero-wordmark-img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* Hero-top mode compatibility */
body.is-hero-top .hero-wordmark{
  background: var(--bg);
}

@media (max-width: 767px){
  .hero-wordmark{
    display: none;
  }
  
  #section-wordmark{
    display: none;
  }
}

/* =====================================================
   Hero-top: disable legacy hero overlays now that
   standalone .hero-wordmark exists above hero
   ===================================================== */

body.is-hero-top .hero-headerLogo{
  display: none !important;
}

body.is-hero-top .hero-inner{
  display: grid !important;  /* restore container so CTA can render */
}

/* Belt and braces, in case any hero overlay exists outside .hero-inner */
body.is-hero-top .hero-title,
body.is-hero-top .kicker,
body.is-hero-top h1.visually-hidden{
  display: none !important;
}

/* Hero CTA must remain visible even in hero-top mode */
body.is-hero-top .hero-cta{
  display: flex !important;
}

/* Fix: ensure portfolio overlay CTA renders above image on mobile/tablet */
#section-portfolio.section-portfolio .portfolio-media-inner{
  position: relative; /* ensure containing block */
}

#section-portfolio.section-portfolio .portfolio-media-img{
  position: relative;
  z-index: 1; /* keep image below overlay stack */
}

#section-portfolio.section-portfolio .portfolio-mediaOverlay{
  position: absolute;
  inset: 0;
  z-index: 5;          /* above image */
  pointer-events: none; /* allow clicks only on CTA */
}

#section-portfolio.section-portfolio .portfolio-mediaCta{
  position: absolute;
  z-index: 6;          /* above overlay */
  pointer-events: auto;
}

/* Page shells: About + Careers */
.section--pageBanner{
  padding-top: clamp(60px, 8vw, 120px);
  padding-bottom: clamp(14px, 2vw, 28px);
}

/* Avoid double vertical gap: content section follows banner with its own padding */
.section--pageBanner + .section{
  padding-top: 0;
}

/* Tighter gap between policy banner and body content */
.section--pageBanner + .section .pageBody{
  padding-top: clamp(12px, 1.5vw, 22px);
}

.pageBanner{
  border-top: 1px solid rgba(0,0,0,.14);
  padding-top: clamp(18px, 2.5vw, 28px);
}

.pageBanner__kicker{
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28,31,34,.55);
  margin: 0 0 14px 0;
}

.pageBanner__title{
  margin: 0 0 18px 0;
}

.pageBanner__sub{
  max-width: 62ch;
  color: rgba(28,31,34,.78);
  margin: 0;
}

.pageBody{
  border-top: 1px solid rgba(0,0,0,.14);
  padding-top: clamp(22px, 3vw, 38px);
}

.pageBody :is(p, ul, ol){
  max-width: 70ch;
}

/* Policy pages: allow content to fill container width */
.section--pageBanner + .section .pageBody :is(p, ul, ol){
  max-width: none;
}

/* About page styles */
.aboutPage .aboutLead :is(p, ul, ol){
  max-width: 70ch;
}

.aboutLead p{
  margin-top: 0;
}

.aboutSection{
  margin-top: clamp(26px, 3.2vw, 44px);
  padding-top: clamp(26px, 3.2vw, 44px);
  border-top: 1px solid rgba(0,0,0,.14);
}

.aboutSection h2{
  margin: 0 0 16px 0;
}

.aboutList{
  padding-left: 20px;
  margin: 0 0 18px 0;
}

.aboutBrandGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin: 18px 0 18px 0;
}

.aboutBrand h3{
  margin: 0 0 10px 0;
}

.aboutBrand p{
  margin: 0;
  max-width: 70ch;
}

@media (min-width: 1000px){
  .aboutBrandGrid{
    grid-template-columns: 1fr 1fr;
    gap: 28px 34px;
  }
}

/* Login gate - minimal standalone page */
body.login-page{
  margin: 0;
  padding: 0 !important;
  padding-top: 0 !important;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.loginGate-wrapper{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.loginGate{
  max-width: 400px;
  width: 100%;
  text-align: center;
}

.loginGate__title{
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 520;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px 0;
  color: var(--charcoal);
}

.loginGate__subtitle{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  color: rgba(28,31,34,.65);
  margin: 0 0 32px 0;
}

.loginGate__form{
  display: grid;
  gap: 16px;
  margin-top: 0;
}

.loginGate__input{
  width: 100%;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(28,31,34,.18);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--charcoal);
  box-sizing: border-box;
}

.loginGate__input:focus{
  outline: 2px solid rgba(175,162,135,.55);
  outline-offset: 2px;
  border-color: rgba(28,31,34,.28);
}

.loginGate__input::placeholder{
  color: rgba(28,31,34,.45);
}

.loginGate__error{
  color: rgba(120,0,0,.82);
  margin: 0 0 16px 0;
  font-size: 14px;
}

@media (max-width: 767px){

  /* Tell modal header: stack on mobile */
  #tellModal .site-modal__header--tell{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    min-height: auto;
    padding: 16px 0;
    background: transparent;
  }

  /* Logo wrapper: remove fixed height constraints */
  #tellModal .site-modal__logo-wrapper--tell{
    height: auto;
    padding: 0;
    background: transparent;
    align-items: flex-start;
  }

  /* Logo image: scale by width, not height */
  #tellModal .site-modal__logo-wrapper--tell img{
    height: auto;
    width: 100%;
    max-width: 220px;
  }

  /* Title sits under logo */
  #tellModal .site-modal__title--tell{
    height: auto;
    align-items: flex-start;
    font-size: 1.35rem;
  }
}