:root {
  --green: #99C057;
  --blue: #B0C2E1;
  --dark: #1a1a1a;
  --light: #f1f1f1;
  --font: 'Inter', sans-serif;
}

body {
  font-family: var(--font);
  margin: 0;
  color: var(--dark);
  background: #ffffff;
  line-height: 1.6;
}

body {
  overflow-x: hidden;
}


h1, h2, h3 {
  font-weight: 800;
  margin-bottom: 0.5em;
}

p {
  margin: 0 auto 1.5em auto;
  font-size: 1.1rem;
}

a {
  text-decoration: none;
  color: var(--dark);
}





/* === NAVBAR (desktop + mobile + overlay + shrink) === */

/* === NAVBAR (desktop + mobile + overlay + shrink) === */

/* Easy-tune variables */
:root {
  --nav-pad-y-lg: 1.5em;   /* full-size vertical padding */
  --nav-pad-y-sm: 0.4em;   /* shrink vertical padding */
  --logo-scale-sm: 0.85;   /* logo scale in shrink state */
  --nav-link-font-lg: 0.9em; /* normal nav link font size */
  --nav-link-font-sm: 0.8em; /* shrink nav link font size */
}

/* Base */
* { box-sizing: border-box; }

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--nav-pad-y-lg) 5vw;
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
  background: #fff;
  transition:
    padding 250ms ease,
    background-color 250ms ease,
    border-bottom 250ms ease,
    backdrop-filter 250ms ease;
}

.navbar.transparent {
  background: transparent;
  border-bottom: 1px solid transparent;
}

.navbar:not(.transparent) .nav-links a {
  color: #000;
}

.logo {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--green, #99C057);
  transform-origin: left center;
  transition: transform 250ms ease;
}

/* Desktop nav links */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5em;
  justify-content: flex-end;
  align-items: center;
  max-width: 100%;
}

.nav-links a {
  margin-left: 2em;
  text-transform: uppercase;
  font-size: var(--nav-link-font-lg);
  letter-spacing: 0.05em;
  position: relative;
  color: #fff;
  text-decoration: none;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 200ms ease,
    font-size 250ms ease;
}

.nav-links a::after {
  content: '';
  display: block;
  height: 2px;
  width: 0%;
  background-color: currentColor;
  transition: width 0.3s ease, background-color 0.3s ease;
  position: absolute;
  bottom: -4px; left: 0;
}

.nav-links a:hover::after { width: 100%; }

/* Shrink state on scroll */
.navbar.shrink {
  padding: var(--nav-pad-y-sm) 5vw;
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid #ececec;
  backdrop-filter: saturate(160%) blur(8px);
}

.navbar.shrink .logo {
  transform: scale(var(--logo-scale-sm));
}

.navbar.shrink .nav-desktop a {
  transform: translateY(-1px);
  font-size: var(--nav-link-font-sm);
}

.navbar.transparent.shrink {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid #ececec;
}

/* Hover-expand while shrunk: padding, logo, and link text return to full size */
.navbar.shrink:hover,
.navbar.hover-expand {
  padding: var(--nav-pad-y-lg) 5vw;
}

.navbar.shrink:hover .logo,
.navbar.hover-expand .logo {
  transform: scale(1);
}

.navbar.shrink:hover .nav-desktop a,
.navbar.hover-expand .nav-desktop a {
  font-size: var(--nav-link-font-lg);
  transform: translateY(0);
}

/* Force full size while overlay is open */
.navbar.force-expanded {
  padding: var(--nav-pad-y-lg) 5vw !important;
  background: #fff;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column; /* stack lines vertically */
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border: 0; background: transparent; padding: 0;
  margin-left: 0rem;
  cursor: pointer;
  position: relative;
  z-index: 10001;
}

.nav-toggle .line {
  display: block;
  width: 26px; height: 3px;
  background: #000;
  border-radius: 999px;
  transition: transform 0.25s ease, opacity 0.2s ease, background 0.2s ease;
}

.navbar.transparent .nav-toggle .line { background: #fff; }

/* Full-screen overlay */
.nav-overlay {
  position: fixed; inset: 0;
  background: #fff;
  z-index: 10000;
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transform: scale(1.02);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.nav-overlay.open {
  opacity: 1; pointer-events: auto; transform: scale(1);
}

.overlay-nav {
  display: flex; flex-direction: column; gap: 2.5em;
  text-align: center; padding: 2rem;
}

.overlay-link {
  text-decoration: none;
  color: #000;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: relative;
  padding: 0.15em 0;
}

.overlay-link::after {
  content: "";
  position: absolute; left: 0; bottom: -6px;
  width: 0%; height: 2px; background: #000;
  transition: width 0.3s ease;
}

.overlay-link:hover::after { width: 100%; }

body.no-scroll { overflow: hidden; }

/* Animate hamburger into “X” when open */
.nav-toggle[aria-expanded="true"] .line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .line:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Visibility rules */
@media (max-width: 1034px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .logo {
    font-size: 1.3em;
  }
}





/* === HERO / LANDING === */
.hero-section {
  position: relative;
  min-height: 100dvh;    /* iOS-safe viewport */
  min-height: 100svh;    /* fallback */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(3rem, 6vw, 6rem); /* adjust if you have a fixed navbar */
  overflow: hidden;
  color: #000;
}

/* Image stays on the RIGHT and fills the hero height on desktop/tablet */
.hero-img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;          /* << key fix: lock vertical size to hero */
  width: 55vw;           /* keep your vibe; tweak if needed */
  object-fit: cover;
  object-position: center right;
  z-index: -1;
  filter: brightness(0.9);
}

/* Optional scrim for mobile readability (keep if you added it) */
.hero-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.25) 15%,
    rgba(0,0,0,0.05) 30%,
    rgba(0,0,0,0) 35%
  );
  opacity: 0;            /* off on desktop/tablet */
  transition: opacity 0.3s ease;
  z-index: 0;
}

/* Text block (left) */
.hero-overlay {
  padding-left: 5vw;
  padding-bottom: 2em;
  max-width: 40%;
  z-index: 1;
}

.hero-overlay h2 {
  font-size: clamp(2rem, 10vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 0.5em;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease-out forwards;
}

.hero-overlay p {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 300;
  margin-bottom: 1.5em;
  margin-top: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.25s;
}

.hero-overlay li {
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  font-weight: 300;
}

.hero-overlay .btn-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s ease-out forwards;
  animation-delay: 0.5s;
}

/* === MOBILE: overlay text centered vertically on image === */
@media (max-width: 900px) {
  .hero-section {
    display: flex;               /* flex container for centering */
    flex-direction: column;
    justify-content: center;     /* vertical center */
    align-items: center;         /* horizontal center */
    min-height: 100dvh;          /* full viewport height */
    min-height: 100svh;          /* safari fallback */
    position: relative;
    padding-top: 6em;              /* remove old padding */
  }

  .hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
    z-index: -1;
  }

  .hero-scrim { opacity: 1; }

  .hero-overlay {
    position: relative;
    padding: 0 1.25rem;
    padding-bottom: 2em;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    z-index: 1;
  }
  
  .hero-overlay li {
    text-align: left;
  }
  
}


@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}


/* === BUTTONSONE === */


.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: left;
  gap: 0.6em;
  padding: 1em 2em;
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: #000000;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.btn-cta span {
  position: relative;
  z-index: 2;
}

/* 🟢 The key fix: offset the circle to match text start */
.btn-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%); /* Center vertically */
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: rgba(154, 192, 87, 0.681);
  transition: width 0.3s ease, background 0.3s ease;
  z-index: 1;
}


.btn-cta svg {
  position: relative;
  z-index: 2;
  margin-left: 10px;
  fill: none;
  stroke: #000000;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateX(-5px);
  transition: transform 0.3s ease;
}

.btn-cta:hover::before {
  width: 100%;        /* Expand fully right */
  border-radius: 28px; /* Stay rounded */
  background: #EE893B;
}

.btn-cta:hover svg {
  transform: translateX(0);
}

.btn-cta:active {
  transform: scale(0.96);
}


/* Blog & Contact tweaks only */
.blog-btn,
.contact-btn {
  justify-content: flex-start;
  width: fit-content;
}


/* === TPI SPLIT SECTION === */
.tpi-split-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4em;
  text-align: left;
}

.tpi-image {
  max-width: 500px;
  width: 100%;
  border-radius: 10px;
  flex: 1 1 40%;
}

.tpi-text {
  max-width: 600px;
  flex: 1 1 50%;
}

.tpi-text h2 {
  color: var(--green);
  font-size: 2.5em;
  margin-bottom: 0.5em;
  text-align: left;
}

.tpi-text p {
  font-size: 1.1em;
  line-height: 1.6;
  margin-bottom: 1.5em;
  text-align: left;
}



/* === WHAT IS TPI? === */

.section {
  padding: 6em 10vw;
}

.section:nth-of-type(even) {
  background-color: #ffffff;
}

.section h2 {
  color: var(--green);
  font-family: var(--font);
  font-size: 2em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section a {
  color: black;
  font-weight: 600;
}

.btn-black svg {
  stroke: black;
}

.btn-black span {
  position: relative;
  z-index: 2;
}



/* === TPI micro-accordion === */
.tpi-keyideas{
  margin-top:.8rem;
  margin-bottom:1.8rem;        /* space before your CTA button */
  display:grid;
  gap:14px;                    /* space between items */
  max-width:36ch;              /* keeps it tidy in a narrow column */
}

.tpi-keyideas details{
  border-left:2px solid #99C057;/* your green accent */
  padding:10px 0 10px 14px;
}

.tpi-keyideas summary{
  list-style:none;
  cursor:pointer;
  font-weight:700;
  line-height:1.35;
  transition:color .2s ease;
}
.tpi-keyideas summary:hover{ color:#99C057; }

/* caret without icons */
.tpi-keyideas summary::after{
  content:"›";
  float:right;
  transform:translateY(-1px) rotate(90deg);
  transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .2s ease;
  opacity:.6;
}
.tpi-keyideas details[open] summary::after{
  transform:translateY(-1px) rotate(270deg);
  opacity:1;
}

/* panel: height animated via JS */
.tpi-keyideas .panel{
  overflow:hidden;
  height:0;
  opacity:0;
  will-change:height,opacity;
  font-size:.95rem;
  line-height:1.5;
  color:#222;
}

@media (prefers-reduced-motion: reduce){
  .tpi-keyideas .panel{ transition:none !important; }
}







/* === WHY TPI MATTERS (title=first card, touching squares, responsive type) === */
.why-tpi-section {
  padding: clamp(1.25rem, 4vw, 6rem) clamp(3vw, 7vw, 10vw);
}

/* Base grid: 3 cols, cards touch */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                    /* 👈 no space between cards */
  width: 100%;
  margin: 0 auto;
}

/* Desktop: in-between bigger size & centered grid */
@media (min-width: 1000px) {
  .why-grid {
    grid-template-columns: repeat(3, clamp(340px, 32vw, 420px));
    justify-content: center;
  }
}

/* Tablet / phones: still squares, fewer columns */
@media (max-width: 900px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .why-grid { grid-template-columns: 1fr; } }

/* Title behaves like a normal square card and is perfectly centered */
.title-card {
  aspect-ratio: 1 / 1;
  background: none !important;
  border: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.title-card h2 {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  /*text-align: center;*/
  line-height: 1.05;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1rem, 3.1vw, 2.1rem);
  color: var(--green);
  width: min(90%, 22ch);
}

/* Cards: ALWAYS squares; left-aligned content */
.why-card {
  position: relative;
  overflow: hidden;      /* contains bloom */
  border-radius: 0;
  color: #111;
  background: var(--green); /* inline per-card bg overrides still work */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: left;
  aspect-ratio: 1 / 1;   /* 👈 keep perfect squares everywhere */
  padding: clamp(0.7rem, 2.2vw, 1.1rem);
  transition: color 0.2s ease; /* no hover lift */
  
  /* Typography hierarchy knobs (title > text) */
  --why-title-size: clamp(1.05rem, 2.35vw, 1.40rem);
  --why-text-size:  clamp(0.84rem, 1.60vw, 1.00rem);
}

/* Type scales and stays inside the square */
.why-card small {
  font-size: clamp(0.68rem, 1.25vw, 0.80rem);
  font-weight: 500;
  opacity: 0.55;
  margin-bottom: 0.45em;
  display: block;
}
.why-card h3 {
  font-size: var(--why-title-size); /* always bigger than body */
  line-height: 1.25;
  font-weight: 600;
  margin-bottom: 0.4em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.why-card p {
  font-size: var(--why-text-size);
  line-height: 1.45;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* === WHITE BLOOM HOVER (slower + starts from outside) === */
.why-card:not(.title-card) { --bloom-origin: 115% 115%; } /* bottom-right outside */
.why-card:not(.title-card)::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 240%; height: 240%;
  background: #fff;
  border-radius: 50%;
  transform-origin: var(--bloom-origin);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 950ms ease; /* slower bloom */
  z-index: 0; /* behind text */
}
.why-card:not(.title-card):hover::after {
  transform: translate(-50%, -50%) scale(1);
}

/* Text stays above and flips to black over white bloom */
.why-card small,
.why-card h3,
.why-card p {
  position: relative;
  z-index: 1;
  transition: color 0.2s ease;
}
.why-card:hover small,
.why-card:hover h3,
.why-card:hover p { color: #000 !important; }

/* Title doesn’t bloom */
.title-card::after,
.title-card:hover::after { display: none; }
.title-card:hover { color: inherit; }

/* No hover effects on touch devices */
@media (hover: none), (pointer: coarse) {
  .why-card::after { display: none; }
}






/* === MEET MARCEL === */
.profile-section {
  background-color: var(--light) !important;
  display: flex;
  align-items: center;
  gap: 4em;
  justify-content: center;
  flex-wrap: wrap;
}


.profile-section p{
max-width: 600px;
}


.profile-pic {
  width: 450px;
  height: 450px;
  border-radius: 50%;
  object-fit: cover;
}

/* === CONTACT FULL-SCREEN SPLIT === */
.contact-section {
  min-height: 100vh;
  display: flex;
}

.contact-split {
  display: flex;
  flex: 1 1 auto;
  min-height: 100vh;
}

/* Left: Map fills its half */
.map-wrap {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
}

.map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Right: Form */
.contact-form {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  padding: clamp(1.25rem, 4vw, 4rem);
  background: #fff; /* keep Marcel site clean look */
  box-sizing: border-box;
}

.contact-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 0.25rem 0;
  line-height: 1.1;
  color: #111;
}

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

/* Rows for side-by-side fields */
.field-row {
  display: flex;
  gap: 1.5rem;
}

.field-row .field {
  flex: 1 1 0;
  min-width: 0;
}

/* Base field container */
.field {
  position: relative;
}

/* Underlined inputs + textarea with animated black sweep */
.contact-form input,
.contact-form textarea {
  width: 100%;
  background:
    /* layer 1: gray baseline (full width) */
    linear-gradient(#cfcfcf, #cfcfcf) left bottom / 100% 1px no-repeat,
    /* layer 2: black sweep (starts hidden) */
    linear-gradient(#000, #000) left bottom / 0% 2px no-repeat;
  border: none;
  outline: none;
  padding: 0.75rem 0 0.75rem;
  font-size: 1rem;
  line-height: 1.4;
  color: #111;
  transition: background-size 0.35s ease, color 0.2s ease;
}

/* Hover/focus: black underline expands */
.contact-form input:hover,
.contact-form input:focus,
.contact-form textarea:hover,
.contact-form textarea:focus {
  background-size: 100% 1px, 100% 2px;
}

/* Textarea specifics */
.field--textarea textarea {
  resize: vertical;
  min-height: 120px;
}

/* Socials inside the form */
.contact-socials {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  margin-top: 0.5rem;
}

.contact-socials a {
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #99C057; /* your green accent */
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}

.contact-socials a:hover {
  border-bottom-color: currentColor;
  opacity: 0.85;
}

/* Responsive: stack map over form */
@media (max-width: 900px) {
  .contact-split {
    flex-direction: column;
    min-height: auto;
  }
  .map-wrap {
    height: min(55vh, 320px);
  }
  .contact-form {
    min-height: auto;          /* was 55vh */
    padding-bottom: 2.5rem;
    justify-content: flex-start;
    padding-top: 2rem;
  }
  .field-row {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Tiny screens: slightly tighter gaps */
@media (max-width: 420px) {
  .contact-form {
    gap: 0.9rem;
  }
}







/* === WORD LOOP SECTION === */
/* === WORD LOOP SECTION (Responsive + Seamless) === */
.word-loop-section {
  /* responsive knobs */
  --loop-font: clamp(1.1rem, 6vw, 3rem);
  --loop-gap: clamp(0.7rem, 3.6vw, 2.2em);   /* ↑ a touch more space */
  --loop-letter: clamp(0.04em, 0.35vw, 0.15em);
  --loop-padY: clamp(0.75rem, 5vw, 3em);
  --loop-speed: 20s;                         /* can tweak per breakpoint */
  --loop-shift: 50%;                         /* JS will overwrite to exact px for seamlessness */

  background: var(--green);
  overflow: hidden;
  padding: var(--loop-padY) 0;
  z-index: 0;
}

.word-loop-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* Prevent “flash” while fonts/layout settle */
.word-loop-track {
  display: flex;
  min-width: max-content;       /* keep on one line */
  will-change: transform;
  opacity: 0;                   /* hidden until ready */
  transform: translateX(0);
  animation: scrollLeft var(--loop-speed) linear infinite paused; /* start paused */
}

.word-loop-section.is-ready .word-loop-track {
  opacity: 1;
  animation-play-state: running;  /* start once ready */
}

.word-loop-track span {
  font-size: var(--loop-font);
  font-weight: 300;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: var(--loop-letter);
  padding: 0 var(--loop-gap);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Optional: slower on medium screens, even smoother read */
@media (max-width: 900px) and (min-width: 381px) {
  .word-loop-section { --loop-speed: 24s; }
}
@media (max-width: 380px) {
  .word-loop-section {
    --loop-font: clamp(1rem, 7vw, 2.2rem);
    --loop-gap: clamp(0.5rem, 3.5vw, 1.3em);
    --loop-letter: clamp(0.03em, 0.3vw, 0.12em);
    --loop-padY: clamp(0.6rem, 4.5vw, 2.2rem);
    --loop-speed: 26s;
  }
}

/* Use a CSS var for the exact shift distance (set by JS) */
@keyframes scrollLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--loop-shift))); }
}






/* === IMAGE LOOP SECTION === */
.scroll-container {
  width: 100%;
  overflow: hidden;
  height: 400px;
  position: relative;
}

.scroll-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.scroll-track img {
  height: 400px;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}


/* === TPI Split Section === */
.tpi-split-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3em;
}

.tpi-image {
  max-width: 500px;
  width: 100%;
  border-radius: 10px;
}

.tpi-text {
  max-width: 500px;
}

.tpi-text h2 {
  color: var(--green);
  font-size: 2.2em;
  margin-bottom: 0.5em;
}

/* === Fullscreen Studio Preview Section === */
.studio-preview {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: black; /* Fallback */
  z-index: 0;
}

.studio-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: 1;
}

.studio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2em;
  background: rgba(0, 0, 0, 0.3); /* darkens the video a bit for readability */
}

.studio-overlay h2 {
  font-size: 4em;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 0.5em;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s ease-out forwards;
  text-transform: capitalize;
  color: rgba(255, 255, 255, 0.771);
}

.studio-overlay p {
  max-width: 800px;
  font-size: 1em;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.757);
}







/* === BOOKING SECTION === */


.book-section {
  text-align: center;
  background-color: var(--light) !important;
}

.what-to-bring {
  margin-top: 4em;
}

.what-to-bring h3 {
  font-size: 1.5em;
  margin-bottom: 0.6em;
}

.what-to-bring ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  text-align: left;
}

.what-to-bring li {
  margin-bottom: 0.5em;
  font-size: 1em;
}

.booking-options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5em; /* ⬅️ Reduced gap between cards */
  padding: 3em 0; /* Optional: vertical spacing from other sections */
}

.booking-card {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 540px;
  padding: 2em;
  /* 🔥 REMOVE external margin to avoid doubling the gap */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: white;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: color 0.2s ease;
  z-index: 1;
}



/* Circle reveal */
.booking-card::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 100%;
  width: 0;
  height: 0;
  background: var(--green);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease; /* ⏳ slower */
  z-index: 0;
}

.booking-card:hover::before {
  width: 230%;
  height: 230%; /* ⬅️ bigger circle = less oval distortion */
}


/* Text stays above overlay */
.booking-card * {
  position: relative;
  z-index: 2;
}

.booking-card:hover {
  color: rgb(255, 255, 255);
}

/* Headings */
.booking-card h3 {
  font-size: 1.6em;
  margin-bottom: 0.5em;
}

/* Paragraph */
.booking-card p {
  font-size: 1em;
  margin-bottom: 2em;
}

/* === NAVBAR STYLE BUTTON === */
.booking-card a {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.9em;
  letter-spacing: 0.05em;
  color: inherit;
  position: relative;
  text-decoration: none;
  display: inline-block;
  transition: color 0.1s ease; /* ✅ faster */
}

.booking-card a::after {
  content: '';
  display: block;
  height: 2px;
  width: 0%;
  background: currentColor;
  transition: width 0.4s ease;
  position: absolute;
  bottom: -4px;
  left: 0;
}

.booking-card a:hover::after {
  width: 100%;
}

/* === CHECKLIST STYLE (Better Version) === */
.checklist {
  list-style: none;
  padding: 0;
  margin: 3em auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  max-width: 600px;
  font-size: 1.3em;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 1em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* 👇 SVG check inside a circle */
.checkmark-circle {
  width: 2.2em;
  height: 2.2em;
  min-width: 2.2em;
  border-radius: 50%;
  background-color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

.check-icon {
  width: 1.2em;
  height: 1.2em;
  stroke: white;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ✅ Subtle pop effect on hover */
.checkmark-circle:hover {
  transform: scale(1.05);
}

/* Triggered when in viewport */
.checklist li.visible {
  opacity: 1;
  transform: translateY(0);
}


.styled-checklist {
  list-style: none;
  padding: 0;
  text-align: left; /* ⬅️ align all text and checkmarks to the left */
  max-width: 600px;
  margin: 0 auto; /* center the whole block on the page */
}

.styled-checklist li {
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: 1.2em;
  margin-bottom: 1em;
  position: relative;
}

.icon {
  width: 2.5em;
  height: 2.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.check-icon {
  stroke: black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  width: 1.5em;
  height: 1.5em;
  z-index: 1;
  transition: stroke 0.3s ease;
}

.icon::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color:  #EE893B;
  border-radius: 50%;
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 0;
}

li:hover .icon::before {
  transform: translateX(0);
}

li:hover .check-icon {
  stroke: white;
}



/* === FAQ STYLES START === */
/* === FAQ (Accordion) Styles === */

.wrapper {
  width: 100%;
  max-width: 900px;
  margin: 6em auto;
  padding: 2em;
}

input[type='radio'] {
  display: none;
}

input[type='radio']:checked + .item .title {
  color: #ffffff;
  background-color: #99C057;
  border-color: #99C057;
}

input[type='radio']:checked + .item .title::after {
  transform: rotate(180deg);
}

input[type='radio']:checked + .item .content {
  height: auto;
  opacity: 1;
  visibility: visible;
  margin-top: 1em;
  margin-bottom: 1em;
  transition: all 0.3s, opacity 0.7s;
}

.item {
  display: block;
  margin-bottom: 1em;
}

.title {
  padding: 1em 1.5em;
  border-radius: 10rem;
  color: #EE893B;
  border: 2px solid;
  font-weight: 600;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
}

.title::after {
  content: '▾';
  font-size: 1em;
  color: inherit;
  transition: transform 0.3s ease;
}

.content {
  color: #000000;
  padding: 0 1.5em;
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: all 0.2s;
  font-size: 1em;
  line-height: 1.6;
  background: #ffffff;
  
}

.main-title {
  text-align: center;
  margin-bottom: 2em;
  color: #99C057;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  font-family: var(--font);
  font-size: 2.4em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === FAQ ENHANCEMENTS END === */

/* === FAQ STYLES END === */




/* === BLOG SECTION === */
.blog-section {
  background: var(--light) !important;
  padding: 6em 10vw;
  text-align: center;
}

.section-intro {
  max-width: 50ch;
  margin: 0 auto 3em;
  color: #444;
  font-size: 1.1em;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.5em;
  margin-bottom: 4em;
}

.blog-card {
  background: white;
  border-radius: 0.5em;
  padding: 2em;
  text-align: left;
  display: flex;
  flex-direction: column;
}

.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  margin-bottom: 1.2em;
}

.blog-card h3 {
  color: var(--green);
  font-size: 1.2em;
  margin-bottom: 0.5em;
}

.blog-card .date {
  font-size: 0.9em;
  color: #888;
  margin-bottom: 0.8em;
}

.blog-card .excerpt {
  flex-grow: 1;
  color: #333;
  margin-bottom: 1.2em;
}

/* === TPI STATS SECTION === */
/* === TPI STATS SECTION === */
.stats-section {
  background-color: var(--light) !important;
  padding: 6em 10vw;
  text-align: center;
}

.stats-grid {
  position: relative; /* anchor for the moving circle */
  display: flex;
  flex-wrap: wrap;
  gap: 3em;
  justify-content: center;
  margin-top: 3em;
}

/* The moving "golf ball" */
.moving-circlestat {
  position: absolute;
  width: 360px;
  height: 360px;
  background: #f9f9f9;
  border-radius: 50%;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
  /* smooth movement + fade */
  transition: transform 400ms ease, opacity 300ms ease;
  will-change: transform, opacity;
}

/* Each stat circle */
.stat-box {
  width: 360px;
  height: 360px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.5em;
  transition: transform 0.4s ease;
  z-index: 2;      /* above the moving circle */
  position: relative;
}

.stat-box:hover { transform: translateY(-5px); }

.stat-number {
  font-size: 3.6em;
  font-weight: 900;
  color: var(--green);
  margin-bottom: 0.4em;
  line-height: 1;
}

.stat-label {
  font-size: 1em;
  line-height: 1.4;
  max-width: 80%;
}

/* --- Responsive sizing --- */
@media (max-width: 900px) {
  .stats-section { padding: 4.5em 6vw; }
  .stats-grid { gap: 2em; }

  .stat-box {
    width: clamp(220px, 70vw, 320px);
    height: clamp(220px, 70vw, 320px);
    padding: 2em;
  }

  .stat-number { font-size: clamp(2.2em, 9vw, 3.2em); }
  .stat-label { font-size: clamp(0.9em, 3.8vw, 1em); }

  .moving-circlestat {
    width: clamp(220px, 70vw, 320px);
    height: clamp(220px, 70vw, 320px);
  }
}

/* Tiny phones */
@media (max-width: 380px) {
  .stats-grid { gap: 1.5em; }
}






/* === FOOTER === */
.site-footer {
  background: var(--green, #99C057);
  color: #000;
  padding: clamp(2rem, 5vw, 4rem) clamp(4vw, 8vw, 10vw);
}

/* grid */
.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .site-footer {  background: var(--green, #99C057);
  color: #000;
  padding: clamp(2rem, 5vw, 4rem) clamp(4vw, 8vw, 10vw);
margin-top: 5em;}
}

/* columns */
.footer-col h4 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 0.75rem 0;
}

.footer-address {
  font-style: normal;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}

.footer-link {
  color: #000;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, opacity .2s ease;
}
.footer-link:hover { border-bottom-color: currentColor; opacity: 0.8; }

/* links list (the “Links” column) */
.footer-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: .4rem .75rem;
}

/* word-length underline + left→right sweep */
.footer-links a {
  position: relative;
  display: inline-block; /* underline matches word width */
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  font-size: clamp(.85rem, 1.5vw, .95rem);
  outline: none;
  transition: opacity .2s ease;
}

.footer-links a {
  justify-self: start;     /* stop stretching across the grid track */
  width: max-content;      /* shrink-wrap to word length */
  display: inline-block;   /* (harmless with grid, but fine to keep) */
}

.footer-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;       /* tweak offset as you like */
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);        /* start hidden */
  transform-origin: left center;
  transition: transform .28s ease;
}

.footer-links a:hover::after,
.footer-links a:focus-visible::after { transform: scaleX(1); }
.footer-links a:hover,
.footer-links a:focus-visible { opacity: .9; }

@media (prefers-reduced-motion: reduce) {
  .footer-links a::after { transition: none; }
}

/* newsletter */
.footer-newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .8rem .8rem;
  align-items: center;
}

.footer-input {
  width: 100%;
  font-size: 1rem; /* ≥16px to prevent iOS zoom */
  background:
    linear-gradient(#000,#000) left bottom / 100% 1px no-repeat,
    linear-gradient(#000,#000) left bottom / 0% 2px no-repeat;
  border: none; outline: none;
  padding: .7rem 0 .7rem;
  color: #000;
  transition: background-size .35s ease;
}
.footer-input::placeholder { color: #000; opacity: .55; }
.footer-input:hover,
.footer-input:focus {
  background-size: 100% 1px, 100% 2px; /* sweep underline */
}

/* use your existing CTA button; darker blob on green for contrast */
.site-footer .btn-cta.footer-btn::before { background: rgba(255, 255, 255, 0.419); }
.site-footer .btn-cta.footer-btn:hover::before { background: #ffffff; }
.footer-btn { justify-self: start; }

/* consent */
.footer-consent {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .9rem;
  line-height: 1.4;
}
.footer-consent input { accent-color: #000; }
.footer-consent a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* bottom bar */
.footer-bottom {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,.15);
  text-align: center;
  font-size: .92rem;
}

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




/* ===============================
   STEPS WHAT TO EXPECT HORIZONTAL STEPPER — STACKED + CENTERED TEXT
   =============================== */
/* ===============================
   GOLF PATH STEPPER — clean build
   =============================== */

/* Tokens (expects --green defined globally) */
.golf-stepper { --accent: var(--green); --ball: #111; --track: rgba(255,255,255,.78); }

/* Header */
.expect-header { text-align:center; margin-bottom: 1.5rem; }
.expect-header h2 { margin-bottom:2rem; font-size: clamp(1.3rem,2.2vw,2rem); }
.expect-header .expect-meta { margin-bottom:4rem; opacity:.9; font-weight:600; font-size: clamp(1rem,1.2vw,1.1rem); }

/* Layout */
.gwrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr; /* desktop: path row then content row */
}

/* Default: horizontal path */
.gpath {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: center;
  gap: 0; /* connectors touch circles */
}

/* Circles */
.gnode {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(56px, 8.5vw, 88px);
  height: clamp(56px, 8.5vw, 88px);
  border: 4px solid var(--green);
  border-radius: 50%;
  background:#ffffff;
  color: #000000;
  font-weight: 800;
  letter-spacing: .2px;
  cursor: pointer;
  transition: transform .12s ease, border-color .2s ease, box-shadow .2s ease;
  z-index: 2; /* above connectors */
}
.gnode .ball { font-size: clamp(1rem,1.3vw,1.2rem); line-height: 1; }
.gnode:hover { transform: scale(1.08); }
.gnode:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.gnode.is-active {  border-color: #EE893B; box-shadow: 0 0 0 5px color-mix(in oklab, #EE893B 38%, transparent); }
.gnode.is-done { color: white; background: var(--accent); border-color: var(--accent); }

/* Connectors (HORIZONTAL) — square ends */
.glink {
  position: relative;
  height: 8px;                            /* thickness of the bar */
  min-width: clamp(48px, 10vw, 150px);
  background: var(--track);
  border: none;
  border-radius: 0;                        /* no rounding */
  margin-inline: -1px;                     /* overlap circle border so it touches */
  overflow: hidden;
  z-index: 1;
}
.glink::after { content: none; }           /* no extra rings */
.glink .fill {
  position: absolute; inset: 0;
  height: 100%;
  width: 0%;                               /* grows to the right */
  background: var(--accent);
  border-radius: 0;                        /* square ends */
  transition: width .32s ease;
}

/* Info + Panels */
.ginfo { margin-top: 2em; text-align: center; margin: .25rem auto .5rem; }
.ginfo-title { margin: 1em; font-size: clamp(1.15rem,1.8vw,1.6rem); }
.ginfo-time { margin: .25rem 0 0; opacity: .85; }
.gpanels { max-width: 72ch; margin: 0 auto; }
.gpanel { font-size: clamp(.95rem,1.05vw,1rem); line-height: 1.6; }
.gpanel.is-active { animation: gFade .22s ease both; }
.gpanel[hidden] { display: none; }
@keyframes gFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* SR helper */
.sr-only { position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ===============================
   VERTICAL MODE (≤640px)
   - Connectors are 15% of path width, centered
   - No rounded corners anywhere
   =============================== */
@media (max-width: 640px) {
  .gwrap { grid-template-columns: auto 1fr; align-items: start; }

  .gpath {
    display: flex;               /* column so connectors get natural heights */
    flex-direction: column;
    align-items: center;         /* center children */
    gap: 0;
  }

  /* Circles a bit bigger on vertical */
  .gnode {
    width: clamp(64px, 18vw, 96px);
    height: clamp(64px, 18vw, 96px);
  }
  .gnode:hover { transform: scale(1.05); }

  /* Connector TRACK: centered skinny rectangle, 15% of path width */
  .glink {
    width: 15%;
    height: clamp(18px, 4.8vh, 40px);  /* gap between circles */
    background: var(--track);
    border: none;
    border-radius: 0;                  /* square ends */
    margin: -1px auto;                 /* touch circles + center */
    overflow: hidden;
  }

  /* Progress FILL grows downward inside the 15% track */
  .glink .fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;            /* 100% of the 15% track */
    height: 0%;
    background: var(--accent);
    border-radius: 0;
    transition: height .28s ease;
  }

  /* Content to the right, left-aligned on small screens */
  .gcontent { padding-left: .75rem; }
  .ginfo, .gpanels { text-align: left; margin-left: 0; }
}


/* === Vertical progress: thin, centered, square connectors === */
@media (max-width: 640px) {
  /* Make the path a clean column and center children */
  #session.golf-stepper .gpath {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* Circle sizing stays as you had it */

  /* Connector TRACK (between circles) */
  #session.golf-stepper .gpath .glink {
    position: relative;

    /* Your 15%… but CLAMPED so it never gets fat */
    width: 15%;
    max-width: 4px;   /* <- hard cap (feel free to try 3px) */
    min-width: 2px;   /* <- never thinner than 2px */

    /* height = the gap between circles */
    height: clamp(16px, 5vh, 40px);

    /* center it, no overlap hacks */
    margin: -1px 0;          /* touch circles */
    left: 50%;
    transform: translateX(-50%);

    /* make it look like a line (not a pill) */
    background: var(--track, rgba(255,255,255,.78));
    border: none;
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
  }

  /* kill any inner ring effect if you still have one */
  #session.golf-stepper .gpath .glink::after { content: none; }

  /* The green FILL grows downward inside that skinny track */
  #session.golf-stepper .gpath .glink .fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;     /* 100% of the (clamped) track width */
    height: 0%;      /* JS animates this to 100% */
    background: var(--accent);
    border-radius: 0;
    transition: height .28s ease;
  }
}

/* Horizontal: square-ended too (no rounded pills) */
#session.golf-stepper .glink,
#session.golf-stepper .glink .fill {
  border-radius: 0;
  border: 0;
}



/* === Vertical alignment fix: center the skinny connector exactly === */
@media (max-width: 640px) {
  /* make sure the column centers children on the cross-axis */
  #session.golf-stepper .gpath {
    display: flex;
    flex-direction: column;
    align-items: center;   /* <- key */
    gap: 0;
    position: relative;
  }

  /* consistent box sizing so borders don't nudge centers */
  #session.golf-stepper .gpath .gnode,
  #session.golf-stepper .gpath .glink { box-sizing: border-box; }

  /* the connector: use auto margins to center; remove left/transform hacks */
  #session.golf-stepper .gpath .glink {
    width: 15%;
    max-width: 4px;      /* try 4px first; even px centers best */
    min-width: 2px;
    height: clamp(16px, 5vh, 40px);
    margin: -1px auto;   /* touches circles + centers horizontally */
    background: var(--track, rgba(255,255,255,.78));
    border: 0;
    border-radius: 0;
    overflow: hidden;
    left: auto;          /* reset any earlier left:50% */
    transform: none;     /* reset any earlier translateX */
  }

  /* the green fill stays 100% of that centered track */
  #session.golf-stepper .gpath .glink .fill {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 0%;
    background: var(--accent);
    border-radius: 0;
    transition: height .28s ease;
  }
}