/* ==========================================================================
   Lilo Socials — Homepage
   ========================================================================== */

/* ---------------------------------- Hero (photo-led) ---------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--space-8);
  overflow: hidden;
  background: var(--navy-deep);
}

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lighter than the previous pass — contrast now comes mainly from the
   yellow accent color + text-shadow rather than a heavy dark tint. */
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 15, 41, 0.25) 0%, rgba(15, 15, 41, 0.3) 45%, rgba(15, 15, 41, 0.5) 100%);
}

/* The purple accent reads as "blue" against this blue-toned water photo and
   loses contrast — yellow/sand is complementary and pops instead. Scoped to
   the hero only; the rest of the site keeps purple as its accent per brand rules. */
.hero .accent {
  color: var(--brand-sand);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 880px;
}

.hero-eyebrow {
  margin-bottom: var(--space-4);
  color: var(--brand-sand);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.hero-eyebrow .label-wave path {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
}

/* Hero now sits on a dark photo, so flip the brand's usual dark-ink type
   to light — the accent (purple) words already have enough contrast either way.
   A soft drop shadow keeps the type legible even over the brighter, busier
   parts of the photo, on top of the darkened overlay. */
.hero-title {
  font-size: var(--text-display);
  line-height: 1.2;
  color: var(--text-inverse);
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* line-height above gives descenders (g, y, p) room; overflow:hidden here
   exists only to mask the slide-up entrance animation, not to crop type.
   padding-right/margin-right does the same for trailing punctuation: the
   tight -0.089em tracking shrinks this box's width more than the last
   glyph's actual ink extent, so overflow:hidden was clipping periods. */
.hero-title .word {
  display: inline-block;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
  padding-right: 0.12em;
  margin-right: -0.12em;
  overflow: hidden;
}

.hero-title .word > span {
  display: inline-block;
  will-change: transform;
}

.hero-lead {
  margin-top: var(--space-4);
  max-width: 640px;
  color: rgba(246, 244, 241, 0.92);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.hero .btn-secondary {
  color: var(--brand-sand);
  box-shadow: inset 0 0 0 1.5px rgba(240, 218, 165, 0.55);
}

/* Base .btn-secondary::before sweeps in brown (--brand-ink) on hover, which
   clashes against the yellow outline/text here — swap the sweep to indigo
   (matching the primary CTA) and flip the label to white as it fills in. */
.hero .btn-secondary::before {
  background: var(--brand-primary);
}

.hero .btn-secondary:hover {
  color: var(--text-inverse);
  box-shadow: inset 0 0 0 1.5px var(--brand-primary), var(--shadow-lg), var(--shadow-glow), var(--shadow-glow-sun);
}

.hero-ctas {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  flex-wrap: wrap;
}

/* ---------------------------------- Services quick links ---------------------------------- */
.services-quicklinks {
  position: relative;
  padding-block: var(--section-pad-y);
  background: var(--brand-sand);
}

.services-quicklinks-heading {
  font-size: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
}

.quicklinks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

@media (max-width: 1024px) {
  .quicklinks-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .quicklinks-grid {
    grid-template-columns: 1fr;
  }
}

/* .quicklink-card / .quicklink-image / .quicklink-label live in
   components.css now — the services page reuses this exact card (image on
   top, underlined label below) for its own grid, so it isn't homepage-only
   anymore. */

/* ---------------------------------- About teaser ---------------------------------- */
.about-teaser {
  position: relative;
  background: var(--bg-section-alt);
  overflow: hidden;
}

/* Split layout: a colour panel of copy beside a full-bleed photo, no card
   chrome on either side — overrides the plain-section background above
   since only the content half carries colour here, not the whole section. */
.about-teaser--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: none;
  /* overrides base.css's generic `section { padding-block }` — this section
     needs to be truly edge-to-edge for the photo to bleed full-height and
     for the colour panel to butt straight up against the waves above and
     below it, with no unstyled gap of the page's own background showing
     through in between */
  padding-block: 0 !important;
  /* the two grid items below each extend upward past this container's own
     top edge to reveal the wave curve — .about-teaser's overflow:hidden
     would otherwise clip that overlap off */
  overflow: visible;
  --wave-h: clamp(70px, 8vw, 140px);
  /* No fixed height here on purpose: an explicit height (or 1fr row) fought
     with however much copy is actually in the panel — short copy left the
     photo starved of height, longer copy (like now) clipped the button
     past the bottom. The row instead sizes to the text panel's own natural
     content height (see .about-split-photo below for how the image is kept
     out of that calculation so its tall aspect ratio can't reinflate it). */
}

.about-split-content {
  order: 1;
  display: flex;
  align-items: flex-start;
  background: var(--navy-deep);
  padding: clamp(2rem, 1.5rem + 3vw, 4rem);
  padding-bottom: clamp(3.5rem, 2.5rem + 5vw, 7rem);
  /* Extends this item upward by the wave height (margin) while growing its
     own box by the same amount (padding-top), so its bottom edge and its
     inner content stay exactly where they were — the extra strip at the
     top exists purely to be cut into the wave curve below, revealing this
     panel's own navy through it instead of a separately-drawn swatch. Left
     half of the same curve used site-wide, remapped to fill this column's
     own width so it lines up with .about-split-photo's right half. */
  margin-top: calc(-1 * var(--wave-h));
  padding-top: calc(clamp(2rem, 1.5rem + 3vw, 4rem) + var(--wave-h));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C480,70 960,0 1440,30 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C480,70 960,0 1440,30 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h));
  mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h));
}

.about-split-inner {
  max-width: 560px;
}

.about-split-heading {
  font-size: clamp(2.75rem, 2rem + 4vw, 4.5rem);
  line-height: 1.15;
  color: var(--brand-sand);
}

.about-split-meet {
  font-weight: 700;
  text-transform: uppercase;
  font-style: normal;
}

.about-split-heading em {
  font-style: italic;
}

.about-split-content .text-lead {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  color: var(--brand-sand);
}

.about-split-content .text-lead a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.about-split-content .btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  /* inverted from dark-on-light to sand-on-navy — a dark-ink button would
     have barely shown up against the new dark navy panel background */
  background: var(--brand-sand);
  color: var(--navy-deep);
  text-decoration: none;
  font-weight: 600;
  transition: transform var(--duration-fast) var(--ease-soft);
}

.about-split-content .btn-pill:hover {
  transform: scale(1.03);
}

.about-split-photo {
  order: 2;
  position: relative;
  min-height: 0;
  overflow: hidden;
  /* Same extend+mask trick as .about-split-content, using the right half of
     the curve. Its own padding-top (unlike the content panel, this one has
     none normally) grows the box upward; the absolutely-positioned photo
     pair below fills that padding box automatically (inset:0 resolves
     against the padding edge), so the real photo bleeds into the new strip
     with nothing extra needed there. */
  margin-top: calc(-1 * var(--wave-h));
  padding-top: var(--wave-h);
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C480,60 960,70 1440,30 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C480,60 960,70 1440,30 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h));
  mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h));
}

/* Positioned absolutely so the pair contributes zero intrinsic size to
   this grid item — otherwise its own tall natural aspect ratio would feed
   back into how tall the grid row itself becomes (the original bug), even
   with min-height:0 on the item. This way the row is sized purely by the
   text panel, and the photos just fill/crop into whatever that turns out
   to be, however long or short the copy is on a given pass. */
.about-split-photo-pair {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.about-split-photo-pair picture,
.about-split-photo-pair img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@media (max-width: 900px) {
  .about-teaser--split {
    grid-template-columns: 1fr;
  }
  .about-split-photo {
    order: 1;
    aspect-ratio: 4 / 5;
    /* stacked layout: the photo alone spans the full width at the top now,
       so it needs the complete wave curve rather than just its right half */
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C240,70 480,0 720,30 C960,60 1200,70 1440,30 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
      linear-gradient(#000, #000);
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C240,70 480,0 720,30 C960,60 1200,70 1440,30 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
      linear-gradient(#000, #000);
  }
  .about-split-content {
    order: 2;
    /* no longer sits at the section's top edge in the stacked layout, so
       undo the wave-extension trick entirely — it would otherwise pull
       this panel up to overlap the bottom of the photo above it */
    margin-top: 0;
    padding-top: clamp(2rem, 1.5rem + 3vw, 4rem);
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------------------------------- Process ---------------------------------- */
.process {
  position: relative;
  background: var(--bg-dark);
  color: var(--text-inverse);
}

.process .section-head h2,
.process .section-head .eyebrow {
  color: var(--text-inverse);
}

.process .section-head p {
  color: rgba(246, 244, 241, 0.7);
}

.process-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.process-line {
  position: absolute;
  top: 27px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: rgba(246, 244, 241, 0.15);
  z-index: 0;
}

.process-line-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--brand-sky);
  transform-origin: left center;
}

.process-step {
  position: relative;
  z-index: 1;
}

.process-index {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy-deep);
  border: 2px solid rgba(246, 244, 241, 0.25);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 100;
  font-size: var(--text-h3);
  margin-bottom: var(--space-3);
}

.process-step h3 {
  color: var(--text-inverse);
  font-size: var(--text-h3);
  margin-bottom: var(--space-1);
}

.process-step p {
  color: rgba(246, 244, 241, 0.65);
  font-size: var(--text-small);
}

.process-cta {
  margin-top: var(--space-6);
  text-align: center;
}

/* ---------------------------------- Work teaser ---------------------------------- */
/* #work is pulled up over .process by the wave height and masked into the
   wave curve along its own top edge — this reveals a literal continuation
   of #work's own gradient background through the curve (instead of a
   separately-drawn wave swatch trying to approximate it), so the two can
   never visibly seam no matter how tall either section renders. */
#work {
  --wave-h: clamp(70px, 8vw, 140px);
  margin-top: calc(-1 * var(--wave-h));
  padding-top: calc(var(--section-pad-y) + var(--wave-h));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C240,75 480,5 720,35 C960,65 1200,75 1440,35 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C240,75 480,5 720,35 C960,65 1200,75 1440,35 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h));
  mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h));
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.work-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-sm);
  transition: transform 0.6s var(--ease-premium), box-shadow 0.6s var(--ease-premium);
}

.work-card:nth-child(2) {
  transform: translateY(2.5rem);
}

.work-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.work-card:nth-child(2):hover {
  transform: translate3d(0, calc(2.5rem - 10px), 0);
  box-shadow: var(--shadow-lg);
}

.work-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s var(--ease-premium);
}

.work-card:hover .work-card-bg {
  transform: scale(1.06);
}

.work-card-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-3);
  color: var(--text-inverse);
  background: linear-gradient(0deg, rgba(32,31,77,0.65), transparent);
}

.work-card-info .eyebrow {
  color: var(--brand-sand);
}

.work-card-info h3 {
  color: var(--text-inverse);
  font-size: var(--text-h3);
  margin-top: var(--space-1);
}

/* ---------------------------------- Testimonials ---------------------------------- */
/* Same technique as #work above: pulled up over #work by the wave height
   and masked into the wave curve along its own top edge, so the curve
   reveals a literal continuation of this section's own stripe texture
   instead of a flat swatch that can't carry a repeating pattern. */
.testimonials {
  position: relative;
  overflow: hidden;
  --wave-h: clamp(70px, 8vw, 140px);
  margin-top: calc(-1 * var(--wave-h));
  padding-top: calc(var(--section-pad-y) + var(--wave-h));
  -webkit-mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C240,75 480,5 720,35 C960,65 1200,75 1440,35 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,35 C240,75 480,5 720,35 C960,65 1200,75 1440,35 L1440,100 L0,100 Z' fill='%23000'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top, bottom;
  mask-position: top, bottom;
  -webkit-mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h));
  mask-size: 100% var(--wave-h), 100% calc(100% - var(--wave-h));
}

.marquee {
  display: flex;
  gap: var(--space-4);
  width: max-content;
}

.marquee-track {
  position: relative;
  z-index: 1;
  overflow: hidden;
  margin-top: var(--space-7);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.testimonial-card {
  flex: 0 0 360px;
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  box-shadow: var(--shadow-md);
}

.testimonial-card .quote-mark {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--brand-primary-soft);
  line-height: 1;
}

.testimonial-card p {
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.testimonial-card .who {
  margin-top: var(--space-3);
  font-weight: 700;
  color: var(--text-primary);
}

.testimonial-card .who span {
  display: block;
  font-weight: 400;
  font-size: var(--text-small);
  color: var(--text-muted);
}

/* ---------------------------------- Responsive ---------------------------------- */
@media (max-width: 1024px) {
  .process-track,
  .work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .work-card:nth-child(2) {
    transform: none;
  }
  .work-card:nth-child(2):hover {
    transform: translateY(-10px);
  }
}

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
  .process-track { grid-template-columns: 1fr; }
  .process-line { display: none; }
  .work-grid { grid-template-columns: 1fr; }
}