/* ===== Global ===== */
html, body {
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Playfair Display', serif;
  overflow-x: hidden; /* prevent sideways scroll on home */

  /* Grey gradient background that starts at top and fades to black */
  background: linear-gradient(
   rgba(163,209,169,.55) 0%,
      rgba(36, 59, 39, 0.35) 10%,
      rgba(106, 42, 42, 0.55) 50%,
      rgba(38, 108, 71, 0.42) 75%,
      #000 100%                     /* pure black toward bottom */
  );
  background-attachment: scroll;
  background-repeat: no-repeat;
  background-size: 100% auto;
  color: #000000;
}



/* ========== LOGO + TAGLINE SECTION ========== */
/* Logo Section */
/* Container for TLDM + subtitle */
.logo-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 2vw;          /* smaller breathing space */
  margin-top: 0;
  box-sizing: border-box;
}

.has-particles {
  overscroll-behavior-y: contain;
}

.has-particles .navbar {
  padding: clamp(12px, 3vw, 24px) 6vw clamp(6px, 1.8vw, 14px);
}


/* TLDM row */
/* TLDM row */
.logo {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.2vw, 20px);
  width: 100%;
  max-width: 100%;
  padding: 0;
  justify-items: center;
}

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

@media (max-width: 768px) {
  .logo-block {
    padding-left: 0;
    padding-right: 0;
  }

  .logo {
    grid-template-columns: 1fr;
    max-width: clamp(180px, 72vw, 260px);
    padding: clamp(6px, 2.8vw, 14px) 0;
    gap: clamp(0px, 1vw, 4px);
  }

  .logo img {
    width: 100%;
    height: clamp(110px, 24vh, 160px);
  }
}

/* Subtitle under TLDM */
.subtitle {
  margin-top: clamp(12px, 2vw, 24px);
  line-height: 1.05;
  text-align: center;
  /* Smaller subtitle under TLDM */
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-size: clamp(20px, 3.4vw, 32px);
  font-weight: 300;
  letter-spacing: 0.6px;
  padding-bottom: clamp(18px, 5vw, 36px);
  width: 100%;               /* matches TLDM width */
}

.subtitle::after {
  content: "";
  display: block;
  width: clamp(68px, 24vw, 180px);
  height: 3px;
  margin: clamp(10px, 2vw, 18px) auto 0;
  background: linear-gradient(90deg, transparent, #8cff9e 35%, #8cff9e 65%, transparent);
  border-radius: 999px;
}




/* ========== ABOUT SECTION (HORIZONTAL IMAGE + TEXT) ========== */
/* ABOUT SECTION (image + text layout) */
.about-section-horizontal {
  display: flex;
  justify-content: center;   /* center everything around the middle */
  align-items: center;
  padding: 20px 5%;          /* was 60px – tighter vertical spacing */
  gap: 20px;                 /* was 40px – closer images to text */
  max-width: 100%;
  flex-wrap: nowrap;
}

/* Image sizing — adjustable with --about-img-width */
:root {
  --about-img-width: 35vw;   /* make bigger */
  --about-img-max: 520px;    /* raise the cap */
  --about-img-radius: 22px;  /* softer corners on desktop */
}


.image-side { border-radius: var(--about-img-radius); overflow: hidden; }
.image-side img {
  /* Revert desktop sizing; JS controls widths on laptop/desktop */
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: var(--about-img-radius);
  transition: transform 0.3s ease;
  backface-visibility: hidden; will-change: transform;
}



/* Middle text — keep strong contrast and alignment */
.about-text {
  flex: 44;
  font-size: clamp(32px, 5.2vw, 48px);  /* desktop: bigger sentences */
  color: #fff;
  text-align: center;
  line-height: 1.6; 
  padding: 0 10px;
}
/* Force black text in the About row (normal + active) */
.about-section-horizontal .about-text,
.about-section-horizontal.is-active .about-text {
  color: #000 !important;
  position: relative;   /* so z-index actually applies */
  z-index: 3;
}
/* mobile/phone layout: stack and shrink */
@media (max-width: 720px){
  .about-section-horizontal {
    flex-direction: row;       /* keep images beside the text */
    align-items: center;
    gap: 2px;                  /* bring inner gap even closer to text */
    padding: 8px 0.5%;         /* further reduce side padding to free width */
    margin: 10px 0;            /* ensure rows don't collide vertically */
  }
  /* Prevent scale-based height changes that can cause row intersection */
  .about-section-horizontal,
  .about-section-horizontal.is-active { transform: none !important; }
  /* Allow image/text inner elements to animate; clip overflow so they don't bleed */
  .about-section-horizontal > .image-side { overflow: hidden; border-radius: var(--about-img-radius); }

  /* Tuned growth for mobile: stronger image pop, subtle text lift without reflow */
  .about-section-horizontal .image-side img {
    transform: scale(1);                       /* full bleed at rest to avoid grey gap */
    transition: transform .40s ease, box-shadow .35s ease;
  }
  .about-section-horizontal.is-active .image-side img {
    transform: scale(1.06);                    /* a touch more punch on mobile */
  }
  .about-section-horizontal .about-text {
    transform: scale(0.985);                   /* subtle at rest */
    transition: color .35s ease, transform .35s ease;
  }
  .about-section-horizontal.is-active .about-text {
    transform: scale(1.025);                   /* gentle lift without shifting layout */
  }
  /* Let images expand to fill remaining space equally */
  .about-section-horizontal > .image-side { flex: 1 1 0; }
  .about-section-horizontal > .image-side img { width: 100% !important; max-width: none !important; }

  /* Allocate a middle band for copy; adjust this to give more/less to images */
  :root { --about-text-mobile-band: 22vw; } /* enlarge images more (≈78% images, 22% text) */
  .about-section-horizontal > .about-text {
    flex: 0 0 var(--about-text-mobile-band);
    max-width: var(--about-text-mobile-band);
    font-size: clamp(14px, 3.6vw, 18px) !important;
    line-height: 1;
  }
}









/* =======================
   Services — adjustable
   ======================= */
:root{
  /* quick knobs */
  --service-card-width: clamp(300px, 32vw, 520px);  /* image+text width */
  --service-gap: clamp(20px, 3vw, 56px);           /* space between cards */
  --service-radius: 14px;                           /* corner radius */

  --service-title-size: clamp(20px, 1.8vw, 30px);
  --service-text-size: clamp(15px, 1.2vw, 20px);
  --service-heading-size: clamp(42px, 5vw, 68px);

  --service-shadow: 0 16px 40px rgba(0,0,0,.45);
}

.services-section{
  padding: 80px 5%;
  text-align: center;
  background:#00000000; /* strong contrast zone */
  color:#000000;
}

.services-section h2{
  font-family:'Playfair Display', serif;
  font-size: var(--service-heading-size);
  letter-spacing:.02em;
  margin: 0 0 60px;
}

.service-columns{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: var(--service-gap);
}

.service-link{ text-decoration:none; color:inherit; display:block; }

.service-box{
  width: var(--service-card-width);
  max-width: 95%;
  text-align:center;
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
  will-change: transform;
}

.service-box img{
  width:100%;
  aspect-ratio: 16/9;        /* keeps a cinematic shape */
  object-fit: cover;
  border-radius: var(--service-radius);
  display:block;
  margin:0 0 16px;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.service-box h3{
  font-family:'Playfair Display', serif;
  font-size: var(--service-title-size);
  margin: 8px 0 8px;
}

.service-box p{
  font-size: var(--service-text-size);
  font-family: 'Playfair Display', serif;
  line-height: 1.1;
  color:#000000;
  max-width: 90%;
  margin: 0 auto;
}

@media (hover:hover) and (pointer:fine){
  .service-box:hover{
    transform: scale(1.01);
    filter: brightness(1.05);
    box-shadow: var(--service-shadow);
    border-radius: var(--service-radius);
  }
}

/* mobile tweaks: two-up grid (2 side-by-side, 3rd below) */
@media (max-width: 720px){
  .services-section{ padding: 48px 4%; }
  .service-columns{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    justify-items: stretch;
    align-items: stretch;
  }
  .service-link{ width: 100%; }
  .service-box{ width: 100%; max-width: 100%; }
  .service-box img{ aspect-ratio: 16/9; width: 100%; }
  /* Center the bottom (3rd) card, keep same dimensions as a single column */
  .service-columns .service-link:nth-child(3){
    grid-column: 1 / -1;           /* span both columns so we can center it */
    justify-self: center;
    /* same width as one grid column: (container - gap) / 2 */
    width: calc((100% - 12px) / 2);
  }
  .service-columns .service-link:nth-child(3) .service-box{ width: 100%; max-width: 100%; }
  /* slightly smaller copy for tighter cards */
  :root{
    --service-title-size: clamp(16px, 4.2vw, 18px);
    --service-text-size: clamp(13px, 3.4vw, 15px);
  }
}



/* ========== HOMEPAGE METHOD STATEMENT (POETIC SCROLL) ========== */
/* METHOD STATEMENT SECTION — AMBIENT SCROLL BLOCK */
.method-section-ambient {
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  /* Tighter vertical spacing: pull closer to Services above,
     and to the CTA below */
  padding: 3vh 0 2.5vh;
  overflow: visible;
  font-family: 'Playfair Display', serif;
  font-size: 20px;                 /* smaller base */
  color: rgb(0, 0, 0);
  font-weight: 300;
  line-height: 1.65;

  /* Local overrides for line spacing within this section only */
  --method-line-height: 1.45;
  --method-line-margin-v: clamp(10px, 2vh, 24px);
}

/* Center and widen content within the method section */
.method-content {
  position: relative;
  z-index: 2;
  max-width: 900px;                /* narrower content container */
  margin: 0 auto;
  text-align: center;
  padding: 0 clamp(24px, 8vw, 70px); /* maintain inner gutters without constraining canvas */
}

/* Larger lines with comfortable spacing */
.method-section-ambient .method-line {
  font-size: var(--method-line-size);
  font-weight: 300;
  line-height: var(--method-line-height);
  margin: var(--method-line-margin-v) auto;
  position: relative;            /* needed for ::before baseline */
  display: inline-block;         /* size to content */
  padding-bottom: 6px;           /* space for baseline underline */
}

/* Tighten bottom spacing by reducing the final line's margin */
.method-section-ambient .method-content .method-line:last-of-type {
  margin-bottom: calc(var(--method-line-margin-v) * 0.35);
}

/* Full-bleed treatment when particles are enabled */
body.has-particles .method-section-ambient {
  width: 100vw;
  min-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

body.has-particles .method-section-ambient .method-content {
  padding: 0 clamp(24px, 8vw, 70px);
}

body.has-particles .method-section-ambient .ash-canvas {
  left: 50%;
  width: 100vw;
  max-width: none;
  transform: translateX(-50%);
}

/* Mobile: tighten method statement typography */
@media (max-width: 720px){
  .method-section-ambient .method-line{
    font-size: clamp(12.5px, 3.0vw, 15px);
    line-height: 1.35;
    margin: 0.8vh auto;           /* tighter gap between lines */
    padding-bottom: 6px;
  }
  .method-section-ambient .emph{
    font-size: calc(1em * 1.00);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    color: #000;                 /* readable, elegant emphasis */
    -webkit-text-stroke: 0;      /* remove bubble-outline on mobile */
  }
}

/* Extra tightening for the last line on phones */
@media (max-width: 720px){
  .method-section-ambient .method-content .method-line:last-of-type { margin-bottom: 0.4vh; }
}

/* Fading baseline (like timeline) */
.method-section-ambient .method-line::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 2px;
  width: 62%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(1, 255, 115, 0.55), rgba(255, 1, 1, 0) 70%);
  border-radius: 999px;
  opacity: var(--line-reveal, 0.15);
  transition: opacity 260ms ease;
}

/* Method section layering */
.method-section-ambient {
  position: relative;       /* contain the canvas */
  overflow: visible;         /* clip ash to this section only */
}

/* Text/content above the ash */
.method-content {
  position: relative;
  z-index: 2; /* ensure text + underlines sit above canvas */
}

/* Ash canvas behind the text */
.ash-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0; /* canvas behind the content */
}


@keyframes floatParticles {
  0% { background-position: 0 0; }
  100% { background-position: 200px 200px; }
}

/* Elegant emphasis */
.method-section-ambient .emph {
  font-family: 'Playfair Display', serif;   /* refined, not bubbly */
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #000;                              /* solid text, no outline */
  -webkit-text-stroke: 0;                   /* remove bubble-outline */
  font-size: calc(1em * var(--emph-size-mult));
  /* underline support */
  position: relative;
  display: inline-block;
  padding-bottom: 2px; /* small space to underline */
}

/* Persistent subtle underline for key phrases — match Methods timeline */
.method-section-ambient .emph::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--emph-underline-offset)); /* match timeline offset */
  height: var(--emph-underline-thickness);
  width: calc(var(--reveal, 0.30) * 100%);
  background: radial-gradient(ellipse at center, var(--brand-green), transparent 70%);
  border-radius: 999px;
  transition: width 280ms ease, opacity 200ms ease;
  opacity: var(--reveal, 0.60);
}

/* Slightly accent the underline on hover (optional) */
.method-section-ambient .emph:hover::after {
  filter: brightness(1.05);
}



/* If you want the green underline too */
.method-line.emph.uline {
  display: inline-block;           /* shrink to text width */
  border-bottom: 3px solid #00ff78; /* emphasised underline */
  padding-bottom: 2px;             /* space between text & underline */
}


.method-section-ambient .emph.uline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--emph-underline-offset));
  width: calc(var(--reveal, 0.30) * 100%);
  height: var(--emph-underline-thickness);
  background: radial-gradient(ellipse at center, var(--brand-green), transparent 70%);
  border-radius: 999px;
  transition: width 280ms ease, opacity 200ms ease;
  opacity: var(--reveal, 0.60);
}

/* Optional: animate underline on hover */
.method-section-ambient .emph.uline:hover::after { filter: brightness(1.05); }

/* === ABOUT "TIMELINE" SCROLL EFFECT === */
.about-section-horizontal {
  position: relative;
  transform: scale(0.96);
  opacity: 0.65;
  filter: saturate(0.7);
  transition: transform .35s ease, opacity .35s ease, filter .35s ease;
}

.about-section-horizontal.is-active {
  transform: scale(1);
  opacity: 1;
  filter: saturate(1);
}

/* Images subtly grow + get a soft shadow when active */
@media (min-width: 721px){
  .about-section-horizontal .image-side { box-shadow: 0 0 0 rgba(0,0,0,0); transition: box-shadow .35s ease; border-radius: var(--about-img-radius); overflow: hidden; }
  .about-section-horizontal .image-side img {
    transform: scale(0.94);
    transition: transform .45s ease;
    border-radius: inherit;            /* ensure rounding stays when scaled */
  }
  .about-section-horizontal.is-active .image-side img { transform: scale(1.20); }
  .about-section-horizontal.is-active .image-side { box-shadow: 0 10px 36px rgba(0,0,0,0.35); border-radius: var(--about-img-radius); }
}

/* Text gently enlarges and brightens when active */
.about-section-horizontal .about-text {
  color: #ddd;
  font-size: clamp(14px, 1.4vw, 18px);
  transition: color .35s ease, font-size .35s ease, letter-spacing .35s ease;
}
.about-section-horizontal.is-active .about-text {
  color: #fff;
  font-size: clamp(16px, 1.8vw, 22px);
}

/* Optional glow frame when active */
.about-section-horizontal::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease, box-shadow .35s ease;
}
.about-section-horizontal.is-active::after {
  opacity: 1;
  box-shadow:
    0 0 0 1px rgba(0, 255, 119, 0),
    0 10px 40px rgba(0, 0, 0, 0);
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .about-section-horizontal.is-active .about-text {
    font-size: clamp(16px, 4vw, 20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-section-horizontal,
  .about-section-horizontal .image-side img,
  .about-section-horizontal .about-text {
    transition: none !important;
  }
}
/* ABOUT: make sure rows can’t start their own scrolling context */
.about-section-horizontal,
.about-section-horizontal * {
  overscroll-behavior: none;      /* prevent nested scroll chaining */
}

.about-section-horizontal {
  overflow: visible;              /* no inner scrollbars */
}

/* Keep the existing .is-active animation you already have:
   .about-section-horizontal { transform: scale(.96); opacity:.65; filter:saturate(.7); transition: ... }
   .about-section-horizontal.is-active { transform: scale(1); opacity:1; filter:saturate(1); }
   .about-section-horizontal .image-side img { transition: ... }
   .about-section-horizontal.is-active .image-side img { transform: scale(1.04); box-shadow: ... }
*/
/* --- Services preview: desktop hover pop --- */
.service-columns { position: relative; }

.service-box {
  transform-origin: center;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

/* Desktop / devices that actually support hover */
@media (hover: hover) and (pointer: fine) {
  .service-box:hover {
    transform: scale(1.06);
    z-index: 2;                 /* sit above neighbors while enlarged */
    filter: brightness(1.05);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
}

/* Mobile / no-hover environments: use a class instead (set via JS) */
@media (hover: none), (pointer: coarse) {
  .service-box.is-active {
    transform: scale(1.06);
    z-index: 2;
    filter: brightness(1.05);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .service-box { transition: none; }
}