:root {
  --blue: #0000ff;
  --grey: #b6b6b6;
  --ink: #333333;
  --panel: #1c1c1c;
  --side: 20px;
}

/* =========================
   FONT FACE — GEIST
   ========================= */

@font-face {
  font-family: "Geist";
  src: url("Geist-Medium.woff2") format("woff2"),
       url("Geist-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("Geist-MediumItalic.woff2") format("woff2"),
       url("Geist-MediumItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("Geist-SemiBold.woff2") format("woff2"),
       url("Geist-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("Geist-SemiBoldItalic.woff2") format("woff2"),
       url("Geist-SemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("Geist-Bold.woff2") format("woff2"),
       url("Geist-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("Geist-BoldItalic.woff2") format("woff2"),
       url("Geist-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* =========================
   RESET / BASE
   ========================= */

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

html,
body {
  background: var(--blue);
  color: var(--grey);
  max-width: 100%;
  overflow-x: hidden;
  touch-action: pan-y;
}

html {
  background: var(--panel);
}

body {
  font-family: "Geist", -apple-system, BlinkMacSystemFont,
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.25;
  font-synthesis: none;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  transition: background-color .18s ease;
}

.page-transition {
  position: fixed;
  inset: 0;
  background: var(--blue);
  opacity: 1;        
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 8000;         
}

/* PAGE TRANSITION OVERLAY — this is what will fade in/out */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--blue);   /* same blue as your site */
  opacity: 1;                /* start fully covering the screen */
  pointer-events: none;
  transition: opacity 0.3s ease;  /* made slower so you can clearly see it */
  z-index: 8000;             /* below the sticky header (header is 9000) */
}

/* When the page has loaded, fade the overlay away */
body.page-loaded .page-transition {
  opacity: 0;
}

/* When navigating away, fade the overlay back in */
body.page-fade-out .page-transition {
  opacity: 1;
}


body.page-loaded .page-transition {
  opacity: 0;             
}

body.page-fade-out .page-transition {
  opacity: 1;
}

body.menu-open {
  background: #333333;
  overflow: hidden;
}

/* =========================
   SERVICES — SCROLL COLOR CONTROL
   ========================= */

.services-page {
  transition: none; /* no timing, JS controls color directly */
}

.services-page .sticky-header {
  transition: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a,
button {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

/* =========================
   COLLECTIVE — SCROLL COLOR CONTROL
   ========================= */

.collective-page {
  transition: none; /* JS controls color directly */
}

.collective-page .sticky-header {
  transition: none;
}

/* =========================
   COLLECTIVE — ORBITAL GRADIENT
   ========================= */

.collective-page .collective-focus {
  position: relative;
  z-index: 0;
}

.collective-page .collective-focus::before {
  content: "";
  position: absolute;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
             translateY(var(--collective-orb-y, 0px));

  width: 520px;
  height: 520px;
  border-radius: 50%;

    background: radial-gradient(
    circle at 40% 40%,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(0, 0, 255, 0.85) 35%,
    rgba(0, 0, 255, 0.30) 65%,
    rgba(0, 0, 255, 0.00) 100%
  );

  filter: blur(65px);
  opacity: 0.85;
  mix-blend-mode: screen;

  /* ✨ THIS LINE controls the breathing speed */
  animation: collective-orb-breathe 7s ease-in-out infinite;

  pointer-events: none;
  z-index: -1;
}

/* =========================
   COLLECTIVE — COLLAB WORD MICRO-MOMENT
   ========================= */

.collective-page .collab-word {
  letter-spacing: 0em;
  transition: letter-spacing 600ms ease, opacity 600ms ease;
}

.collective-page .collective-focus--peak .collab-word {
  letter-spacing: 0.09em;  /* tiny stretch */
  opacity: 0.98;           /* slight emphasis, not a flash */
}

/* breathing keyframes */
@keyframes collective-orb-breathe {
  0%, 100% {
    transform: translate(-50%, -50%)
               translateY(var(--collective-orb-y, 0px))
               scale(1);
    opacity: 0.85;
  }

  50% {
    transform: translate(-50%, -50%)
               translateY(var(--collective-orb-y, 0px))
               scale(1.06);
    opacity: 1;
  }
}

.collective-page .collective-focus {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

/* =========================
   LAYOUT
   ========================= */

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  padding: 0 var(--side);
}

/* =========================
   HEADER
   ========================= */

header {
  padding: 0;
}

header.wrap {
  padding-top: 31px;
  padding-bottom: 24px;
  position: relative;
  z-index: 10;
}

.header-row {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transform: translateY(-20px);
}

.brand {
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .2px;
}

.brand em {
  font-style: italic;
  font-synthesis: style;
}

/* =========================
   BURGER
   ========================= */

.burger {
  width: 44px;
  height: 24px;
  position: relative;
  opacity: .9;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: none;
}

.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grey);
  transition: transform .18s ease, background-color .18s ease;
}

.burger::before {
  top: 6px;
}

.burger::after {
  bottom: 6px;
}

.burger:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

body.menu-open .burger::before,
body.menu-open .burger::after {
  background: #b6b6b6;
}

/* =========================
   DESKTOP NAV
   ========================= */

.desktop-nav {
  display: none;
}

/* =========================
   STICKY HEADER
   ========================= */

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    to bottom,
    var(--blue) 0%,
    var(--blue) 55%,
    rgba(0, 0, 255, 0.85) 70%,
    rgba(0, 0, 255, 0.4) 85%,
    rgba(0, 0, 255, 0) 100%
  );
  color: var(--grey);
  z-index: 9000;
}

.sticky-header .wrap {
  height: 160px;
}

.sticky-header .brand {
  color: var(--grey);
}

.sticky-header .burger::before,
.sticky-header .burger::after {
  background: var(--grey);
}

body.menu-open .sticky-header {
  background: linear-gradient(
    to bottom,
    var(--blue) 0%,
    var(--blue) 55%,
    rgba(0, 0, 255, 0.85) 70%,
    rgba(0, 0, 255, 0.4) 85%,
    rgba(0, 0, 255, 0) 100%
  );
}

/* =========================
   HOME – HERO
   ========================= */

.lede {
  font-weight: 500;
  color: var(--grey);
  font-size: 48px;
  line-height: 1.2;
  margin: 100px 0 0;
  text-transform: lowercase;
  letter-spacing: 0; /* ✅ adjust this value to match your reference */
}

.br-mobile {
  display: none;
}

@media (max-width: 767px) {
  .br-mobile {
    display: inline;
  }
}

/* Vertical rule */

.rule {
  width: 1px;
  height: 140px;
  background: var(--grey);
  margin: 0;
  margin-left: 5px;
}

/* Copy block */

.copy {
  font-weight: 500;
  font-size: 28px;
  line-height: 1.38;
  max-width: 42ch;
}

.copy strong {
  font-weight: 700;
}

.copy p {
  margin: 42px 0;
}

.copy p.white {
  color: #fff;
}

.copy strong.white {
  color: #fff;
  font-weight: 700;
}

.copy p:first-of-type {
  margin-top: 0;
}

/* ================================
   CTA STRIP
   ================================ */

.cta {
  background: var(--panel);      /* dark background */
  color: var(--grey);            /* light grey text */
  margin-top: 180px;
}

/* Add extra gap above the CTA on all pages except Collective */
body:not(.collective-page) .cta {
  margin-top: 300px; /* 180px original + 120px extra */
}

.cta .wrap {
  padding-top: var(--side);      /* 20px top */
  padding-bottom: 120px;         /* controls overall height of the dark block */
}

.cta-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* ICON CONTAINER */
.cta-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  margin-top: 20px;              /* the nudge you liked */
}

/* INLINE SVG SIZE */
.cta-icon svg {
  width: 60px;
  height: 60px;
  display: block;
}

/* CTA TEXT */
.cta-text {
  font-weight: 600;
  font-size: 48px;
  line-height: 1.2;
  color: var(--grey);            /* default grey */
  transition: color 0.25s ease;  /* smooth fade in/out */
}

.cta-text u {
  text-underline-offset: 6px;
  text-decoration-thickness: 3px;
}

/* ICON BASE STATE */
.cta-icon-path {
  fill: #b6b6b6;                 /* same grey as text */
  transition: fill 0.25s ease;   /* smooth fade in/out */
}

/* HOVER STATE – TEXT + ICON BOTH BLUE */
.cta:hover .cta-text {
  color: #0000f5;
}

.cta:hover .cta-icon-path {
  fill: #0000f5;
}

/* =========================
   FOOTER
   ========================= */

footer {
  background: var(--panel);   /* same dark as CTA */
  color: var(--grey);         /* light grey wordmark + copyright */
}

footer.wrap {
  padding-top: 16px;
  padding-bottom: calc(var(--side) + 6px);   /* 20px + 6px = 26px */
}

.foot-upper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

.wordmark {
  font-family: "Geist", sans-serif;
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .2px;
  color: #333333;          /* footer logo color */
}

.wordmark em {
  font-style: italic;
  font-weight: 500;
  font-synthesis: style;
}

.foot-rule {
  height: 2.333333px;
  background: #333333;  /* subtle mid-grey rule on dark */
  margin: 14px 0;
}

.copyright {
  font-size: 16px;
  color: #333333;
  padding-bottom: 0;
}

/* =========================
   MENU OVERLAY
   ========================= */

.menu-overlay {
  position: fixed;
  inset: 0;
  background: #1c1c1c;
  color: #b6b6b6;
  display: none;
  z-index: 9999;
}

body.menu-open .menu-overlay {
  display: block;
}

.menu-inner {
  width: 100%;
  height: 100%;
  padding: 0 var(--side);
  display: flex;
  flex-direction: column;
}

.menu-top {
  /* mimic header-row behaviour so logo + X don't jump */
  height: 160px;                 /* same as .sticky-header .wrap */
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transform: translateY(-20px);  /* same vertical shift as .header-row */
}

.menu-overlay .brand {
  color: #b6b6b6;
}

.menu-close {
  width: 44px;
  height: 24px;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.menu-close::before,
.menu-close::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #b6b6b6;
  transform-origin: center;
}

.menu-close::before {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.menu-close::after {
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.menu-close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.menu-nav {
  margin-top: 120px;
  margin-left: auto;   /* pushes the nav column to the right side */
  text-align: right;   /* right-align the text inside */
}

.menu-nav a {
  display: block;
  font-size: 48px;
  font-weight: 500;
  line-height: 1.2;
  margin: 18px 0;
  text-transform: lowercase;
  color: #b6b6b6;
}

@media (max-width: 480px) {
  .menu-nav {
    margin-top: 140px;
  }

  .menu-nav a {
    font-size: 40px;
    margin: 14px 0;
  }
}

/* =========================
   CONTACT BLOCK (CONNECT)
   ========================= */

.contact-block {
  background: var(--panel);   /* dark slab */
  color: var(--grey);         /* light text */
  margin-top: 80px;
}

.contact-block .wrap {
  padding-top: 52px;         /* more air above "connect" */
  padding-bottom: 80px;      /* more air before the wordmark/footer */
}

/* underline email link in connect footer */
.contact-block a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

.contact-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.contact-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
}

.contact-icon img {
  width: 32px;
  height: 32px;
  display: block;
}

.contact-heading {
  font-size: 32px;
  font-weight: 700;
}

.office {
  margin-bottom: 180px;       /* more room before the footer wordmark */
  font-size: 28px;           /* SAME as .copy body text */
  line-height: 1.42;         /* a bit more breathing between lines */
}

.office h2 {
  font-size: 54px;           /* strong section title "connect" */
  font-weight: 500;
  margin-bottom: 20px;       /* clear gap before the email */
}

.office p {
  margin: 8px 0;             /* more gap between email and address lines */
}

/* extra breathing room between email and address */
.office p:first-of-type {
  margin-bottom: 20px;
}

/* Manual line-break helper */
.br-desktop {
  display: none;
}

/* =========================
   DESKTOP (≥ 1024px)
   ========================= */

@media (min-width: 1024px) {
  :root {
    --side: 60px;
  }

  .br-desktop {
    display: inline;
  }

  header.wrap {
    padding-top: 40px;
    padding-bottom: 32px;
  }

  .brand,
  .wordmark {
    font-size: 32px;
  }

  .desktop-nav {
    display: flex;
    gap: 32px;
    font-size: 16px;
    text-transform: lowercase;
  }

  .desktop-nav a {
    position: relative;
    white-space: nowrap;
  }

  .desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 1px;
    width: 0;
    background: currentColor;
    transition: width .18s ease;
  }

  .desktop-nav a:hover::after,
  .desktop-nav a:focus-visible::after {
    width: 100%;
  }

  .burger {
    display: none;
  }

  .menu-overlay {
    display: none !important;
  }

  /* 👉 HEADER → HERO GAP */
  main.wrap {
    padding-top: 300px;
  }

  /* 👉 HERO SIZE + SPACE BELOW */
  .lede {
    font-size: 73px;
    line-height: 1.12;
    margin: 0 0 15px;
    max-width: 20ch;
  }

  .rule {
    margin-top: 0;
    margin-bottom: 15px;
  }

  .copy {
    font-size: 28px;
    max-width: 42ch;
    margin-top: 0;
  }

  /* home hero – let the body hero span wider */
  .home-page .copy {
    max-width: none;
  }

    /* home – manifesto block sized like hero */
  .home-page .copy p.manifesto-block {
    font-size: 73px;
    line-height: 1.12;
    max-width: 20ch;
  }

    /* =========================
     HOME — DESKTOP RHYTHM
     ========================= */

  /* a little gap from rule → first paragraph */
  .home-page .copy {
    margin-top: 32px;
  }

  /* reset global paragraph margins for home hero block */
  .home-page .copy p {
    margin: 0;
  }

  /* first paragraph sits fairly close to the rule */
  .home-page .copy p:first-of-type {
    margin-bottom: 24px;
  }

  /* big pause before the CTA on the connect page */
.connect-page .office:last-of-type {
  margin-bottom: 380px;
}

.connect-page .copy a,
.connect-page .copy a:visited {
  text-decoration: underline;
  text-underline-offset: 3px;
}

  /* big pause before the manifesto block (the second hero) */
  .home-page .copy p.manifesto-block {
    margin-top: 380px;
  }

  /* big pause again before the closing line */
  .home-page .copy p:last-of-type {
    margin-top: 380px;
  }

  .cta .wrap {
    padding-top: 40px;
    padding-bottom: 180px;
  }

  .cta-inner {
    align-items: center;
    justify-content: space-between;
  }

  .cta-icon {
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
  }

  .cta-icon svg {
    width: 110px;
    height: 110px;
  }

  .cta-text {
    text-align: right;

    /* more genuinely fluid type for desktop */
    font-size: clamp(48px, 5vw, 90px);
    line-height: 1.05;

    /* keep long CTAs such as "see what we compose together" on one line */
    white-space: nowrap;
  }

  .cta-text br {
    display: none;
  }
}

  /* =========================
   COLLECTIVE — DESKTOP RHYTHM
   ========================= */

@media (min-width: 1024px) {

  /* match home: let the copy span wider */
  .collective-page .copy {
    max-width: none;
    margin-top: 32px; /* same small lift as home */
  }

  /* reset default paragraph margins so we control the rhythm */
  .collective-page .copy p {
    margin: 0;
  }

  /* BIG, EQUAL air between EVERY block (same as home hero gaps) */
  .collective-page .copy p + p {
    margin-top: 380px;
  }

  /* manifesto block: same heroic scale as home */
  .collective-page .copy p.manifesto-block {
    font-size: 73px;
    line-height: 1.12;
    max-width: 20ch;
  }

}

  /* =========================
     SERVICES — DESKTOP RHYTHM
     ========================= */

  /* let the first copy sit like home */
  .services-page .services-hero .copy {
    margin-top: 32px; /* same lift as home */
  }

  .services-page .services-hero .copy p {
    margin: 0;
  }

  /* BIG gap before the manifesto block */
  .services-page .services-hero {
    margin-bottom: 380px;
  }

  /* manifesto block: same heroic scale as home */
  .services-page .services-manifesto .copy p.manifesto-block {
    font-size: 73px;
    line-height: 1.12;
    max-width: 20ch;
    margin: 0;
  }

  /* BIG gap before the final line */
  .services-page .services-manifesto {
    margin-bottom: 380px;
  }

  /* last line: sits cleanly, no extra margins */
  .services-page .services-outro .copy p {
    margin: 0;
  }

/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
    opacity: 1;
  }

  .desktop-nav a::after,
  .burger::before,
  .burger::after,
  .sticky-header {
    transition: none;
  }
}

/* =========================
   ACCESS OVERLAY
   ========================= */

.access-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, rgba(0, 0, 255, .38), rgba(0, 0, 255, .96));
  color: #f5f5f5;
  transition: opacity 180ms ease, visibility 180ms ease;
}

.access-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.access-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.access-inner {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 40px;
}

.access-panel {
  background: #333;
  border-radius: 0;
  box-shadow: none;
  max-width: 1240px;
  width: 100%;
  padding: 24px 64px 144px;
  display: flex;
  flex-direction: column;
  gap: 88px;
}

.access-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 14px;
  letter-spacing: .02em;
  color: #b6b6b6;
}

.access-label {
  text-transform: lowercase;
}

.access-status strong {
  font-weight: 600;
}

.access-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

.access-title {
  font-size: 26px;
  line-height: 1.35;
  font-weight: 500;
  color: #b6b6b6;
}

.access-form {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin-top: 4px;
}

.access-label-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#access-code {
  background: #b6b6b6;
  color: #333;
  border-radius: 999px;
  border: none;
  padding: 20px 24px;
  font-size: 16px;
  text-align: center;
  outline: none;
  box-shadow: none;
}

#access-code::placeholder {
  color: rgba(51, 51, 51, .78);
}

.access-panel .access-submit {
  background: transparent;
  color: #b6b6b6;
  border-radius: 999px;
  padding: 20px 24px;
  width: 100%;
  font-size: 16px;
  border: 1px solid #b6b6b6;
  text-transform: lowercase;
  cursor: pointer;
  transition:
    background 140ms ease,
    color 140ms ease,
    border-color 140ms ease;
}

.access-panel .access-submit:hover {
  background: #fff;
  color: #333;
  border-color: #fff;
}

.access-message {
  margin-top: 6px;
  font-size: 14px;
  min-height: 1.2em;
  color: #b6b6b6;
}

.access-message--error {
  color: #9b3232;
}

.access-message--success {
  color: #b5ff9a;
}

@media (max-width: 768px) {
  .access-inner {
    padding: 20px;
  }

  .access-panel {
    padding: 32px 20px 72px;
    border-radius: 0;
    max-width: 100%;
    gap: 64px;
  }

  .access-header {
    font-size: 13px;
  }

  .access-title {
    font-size: 22px;
    line-height: 1.4;
  }

  .access-form {
    max-width: none;
  }

  #access-code,
  .access-submit {
    font-size: 15px;
    padding: 16px 18px;
  }
}

/* ======================================
   ACCESS OVERLAY — CONSISTENT FRAME
   ====================================== */

/* desktop & laptop: fixed 60px blue frame */
@media (min-width: 769px) {
  .access-overlay .wrap {
    padding-left: 60px;
    padding-right: 60px;
  }
}

/* mobile: keep the tighter 20px padding you already use */
@media (max-width: 768px) {
  .access-overlay .wrap {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* =========================
   COLLECTIVE — LOGO GRID
   ========================= */

.collective-page .logos-block {
  width: 100%;
  max-width: 700px;
  margin-top: 56px;
  margin-bottom: 120px;
}

/* wrapper: stacks the two rows with a gap */
.collective-page .logos-rows {
  display: flex;
  flex-direction: column;
  gap: 72px;             /* space between row 1 and row 2 on desktop */
}

/* each row: logos spread from left edge to right edge */
.collective-page .logos-row {
  display: flex;
  justify-content: space-between; /* LV flush left, Etihad/Kraft flush right, equal gaps */
  align-items: center;
}

/* single logo item */
.collective-page .logo-item {
  display: block;
  height: 70px;          /* tweak this number if you want them a bit bigger/smaller */
  width: auto;
}

/* thin grey lines above & below */
.collective-page .logos-line {
  display: block;
  height: 1px;
  background: var(--grey);
  opacity: 0.3;          /* keep the nice soft lines */
  margin: 56px 0;        /* blue gap line ↔ logos like before */
  max-width: 700px;      /* align lines with logos */
}

/* Desktop refinement */
@media (min-width: 1024px) {
  .collective-page .logos-block {
    margin-bottom: 96px; /* tweak if needed */
  }

  .collective-page .logos-block .logos-line:last-of-type {
    margin-top: 56px;
  }
}

.connect .copy a {
  text-decoration: underline;
  text-underline-offset: 3px; /* matches your aesthetic spacing */
}

/* ============================================================
   INTER–HUMAN RESPONSIVE LAYER — MOBILE
   A refined layer of adjustments crafted exclusively
   for handheld experiences.
   ============================================================ */

/* ------------------------------------------------------------
   HOME — HERO + COPY (MOBILE)
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* breathing from sticky header → hero */
  .home-page main.wrap {
    padding-top: 220px;
  }

  /* hero text (mobile) */
  .home-page .lede {
    margin-top: 0;
    max-width: 14ch;   /* narrow, strong column */
    /* font-size stays 48px from your existing base rule */
  }

  /* normal body copy under the rule */
  .home-page .copy {
  font-size: 29px;
  line-height: 1.4;
  max-width: 44ch;   /* ← FIX: restores original line length */
  margin-top: 0;
  }

  /* base paragraph rhythm */
  .home-page .copy p {
    margin: 24px 0;
  }
  
  /* no extra margin on the first paragraph (directly under the rule) */
  .home-page .copy p:first-of-type {
    margin-top: 0;
  }

  /* MANIFESTO BLOCK: "we don't prompt / we compose..." */
.home-page .copy p.manifesto-block {
  font-size: 48px;
  line-height: 1.2;
  max-width: 18ch;

  margin-top: 240px;
  margin-bottom: 240px;
  }
}

@media (max-width: 768px) {

  .collective-page .logos-block {
    max-width: 100%;
    margin-top: 40px;
    margin-bottom: 96px;
  }

  /* equal big vertical gaps between all rows */
  .collective-page .logos-rows {
    gap: 140px;                 /* space between the “IKEA row” and the “Jeep row” etc. */
  }

  .collective-page .logos-row {
    flex-wrap: wrap;
    row-gap: 140px;             /* space between the two wrapped lines inside each row */
  }

  .collective-page .logo-item {
    flex: 0 0 calc(50% - 20px); /* 2 logos per row */
    height: 70px;               /* bigger logos on mobile */
    margin-bottom: 0;
    margin-inline: auto;        /* center each logo in its half */
  }
}

/* --------------------------------------------------------
   CTA — MOBILE VERTICAL ALIGNMENT
   + EXTRA BREATH ABOVE FOOTER
   -------------------------------------------------------- */
@media (max-width: 768px) {
  .home-page .cta-icon,
  .collective-page .cta-icon {
    margin-top: 0;
  }

  .home-page .cta-inner,
  .collective-page .cta-inner {
    gap: 20px;
  }

  /* ✅ Push footer content further down on mobile only */
  .home-page footer.wrap,
  .collective-page footer.wrap {
    padding-top: 80px;  /* try 80; go 100–120px if you want more air */
  }
}

@media (max-width: 768px) {
  /* ...your existing mobile rules... */

  /* Footer copyright — mobile-only size reduction */
  .home-page .copyright,
  .collective-page .copyright {
    font-size: 13px;   /* or 12px if you want it more subtle */
  }
}

@media (max-width: 768px) {
  /* More breathing room under the copyright on mobile */
  footer.wrap {
    padding-bottom: 60px;   /* try 80px; adjust 100–120px for more space */
  }
}

/* ------------------------------------------------------------
   COLLECTIVE — HERO + COPY (MOBILE)
   mirrors home-page mobile rhythm
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* breathing from sticky header → hero */
  .collective-page main.wrap {
    padding-top: 220px;
  }

  /* hero word "collective" */
  .collective-page .lede {
    margin-top: 0;
    max-width: 14ch; /* keeps it in a strong narrow column, like home */
  }

  /* body copy under the rule */
  .collective-page .copy {
    font-size: 29px;
    line-height: 1.4;
    max-width: 44ch;
    margin-top: 0;
  }

  /* base paragraph rhythm */
  .collective-page .copy p {
    margin: 24px 0;
  }

  /* first paragraph hugs the rule */
  .collective-page .copy p:first-of-type {
    margin-top: 0;
  }

 /* space between body copy blocks */
.collective-page .copy p + p {
  margin-top: 24px; /* same as index page */
}

/* ------------------------------------------------------------
   COLLECTIVE — MOBILE SPACING FIX
------------------------------------------------------------ */
@media (max-width: 768px) {

  /* add spacing between all body copy blocks */
  .collective-page .copy p {
    margin: 240px 0;
  }

  /* first paragraph stays tight */
  .collective-page .copy p:first-of-type {
    margin-top: 0;
  }
}

  /* "whether you build brands..." block */
  .collective-page .copy p.manifesto-block {
    font-size: 48px;
    line-height: 1.2;
    max-width: 18ch;
    margin-top: 240px;
    margin-bottom: 240px;
  }
}

@media (max-width: 768px) {
  /* tighten ONLY the last line before the logo block */
  .collective-page .copy p:last-of-type {
    margin-bottom: 100px;   /* adjust until it looks right */
  }
}

/* ------------------------------------------------------------
   SERVICES — HERO + COPY (MOBILE)
   mirrors collective-page mobile rhythm
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* same breathing from sticky header → hero as collective */
  .services-page main.wrap {
    padding-top: 220px;
  }

  /* "services" hero word: same treatment as home/collective */
  .services-page .lede {
    margin-top: 0;
    max-width: 14ch; /* narrow, strong column */
  }

  /* base body copy under the rule – same as collective */
  .services-page .copy {
    font-size: 29px;
    line-height: 1.4;
    max-width: 44ch;
    margin-top: 0;
  }

  /* big vertical gaps between copy blocks – same as collective */
  .services-page .copy p {
    margin: 250px 0;
  }

  /* first paragraph stays tight under the rule */
  .services-page .copy p:first-of-type {
    margin-top: 0;
  }

  /* manifesto block in the dark scene – same big type as collective */
  .services-page .services-manifesto .copy p.manifesto-block {
    font-size: 48px;
    line-height: 1.2;
    max-width: 18ch;
    margin-top: 240px;
    margin-bottom: 240px;
  }

  /* make sure the outro breathes nicely before the CTA/footer */
  .services-page .services-outro {
    padding-bottom: 160px;
  }
}

/* ------------------------------------------------------------
   SERVICES — CTA + FOOTER (MOBILE MATCH TO COLLECTIVE)
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* CTA icon vertical alignment */
  .services-page .cta-icon {
    margin-top: 0;
  }

  /* CTA inner gap (same as collective) */
  .services-page .cta-inner {
    gap: 20px;
  }

  /* Footer top breathing (same as collective) */
  .services-page footer.wrap {
    padding-top: 80px;
  }

  /* Smaller copyright text */
  .services-page .copyright {
    font-size: 13px;
  }

  /* Footer bottom breathing */
  footer.wrap {
    padding-bottom: 60px;
  }
}

/* ------------------------------------------------------------
   CONNECT — HERO + COPY (MOBILE)
   mirrors home / collective / services mobile rhythm
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* same breathing from sticky header → hero as the other pages */
  .connect-page main.wrap {
    padding-top: 220px;
  }

  /* "connect" hero word: same treatment as home/collective/services */
  .connect-page .lede {
    margin-top: 0;
    max-width: 14ch; /* narrow, strong column */
    /* font-size stays 48px from the base .lede rule */
  }

  /* body copy under the rule — same size & line length */
  .connect-page .copy {
    font-size: 29px;
    line-height: 1.4;
    max-width: 44ch;
    margin-top: 0;
  }

  /* same paragraph rhythm as the other mobile heroes */
  .connect-page .copy p {
    margin: 24px 0;
  }

  /* first paragraph hugs the rule */
  .connect-page .copy p:first-of-type {
    margin-top: 0;
  }

  /* CTA: align behavior with other pages, for when you add content */
  .connect-page .cta-icon {
    margin-top: 0;
  }

  .connect-page .cta-inner {
    gap: 20px;
  }

  /* Footer: same vertical breathing + copyright size as others */
  .connect-page footer.wrap {
    padding-top: 80px;
  }

  .connect-page .copyright {
    font-size: 13px;
  }
}

/* ------------------------------------------------------------
   CONNECT — EMAIL LINK STYLING (ALL VIEWPORTS)
   consistent underline for the mailto link in the copy block
   ------------------------------------------------------------ */
.connect-page .copy a,
.connect-page .copy a:visited {
  text-decoration: underline;
  text-underline-offset: 3px;
}