/* ============================================================
   hp-home.css — Editorial Authority refresh (home page only)
   Loads AFTER style.css. Uses scoped .hp-* classes that don't
   conflict with existing template classes. Roll back by removing
   the <link> tag from resources/views/partials/header.blade.php
   ============================================================ */

/* ----------------------------------------------------------
   1. Scoped tokens (additive — do not redefine template vars)
   ---------------------------------------------------------- */
:root {
  --hp-ink: #0F0F10;
  --hp-paper: #FBFAF7;
  --hp-cream: #F5F1E8;
  --hp-gold: #AB8A62;
  --hp-gold-deep: #8A6E4B;
  --hp-line: rgba(255, 255, 255, 0.14);
  --hp-mute: rgba(255, 255, 255, 0.7);

  --hp-ease-luxe: cubic-bezier(0.65, 0.05, 0.36, 1);
  --hp-ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --hp-dur-fast: 320ms;
  --hp-dur-base: 800ms;
  --hp-dur-slow: 1200ms;

  /* Section padding — used by all .hp-* sections. */
  --hp-section-pad: clamp(96px, 11vw, 160px);
}

/* ----------------------------------------------------------
   2. Generic opt-in reveal (for future sections)
   ---------------------------------------------------------- */
.hp-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--hp-dur-base) var(--hp-ease-luxe),
    transform var(--hp-dur-base) var(--hp-ease-luxe);
}
.hp-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   PHASE 1 — HERO ("Editorial cover")
   Markup hooks (in welcome.blade.php inside .banner__video__section):
     .hp-hero__overlay        — full-bleed gradient over video
     .hp-hero__content        — absolute-positioned text layer
       .hp-hero__inner          — max-width gutter, anchored bottom-left
         .hp-hero__eyebrow      — small-caps gold label with 32px rule
         .hp-hero__headline     — oversized Gilda serif
         .hp-hero__byline       — small Jost line crediting principals
   ============================================================ */

/* Poster fallback: paint the video poster IMMEDIATELY via CSS bg
   so slow connections never see a blank/black hero before the
   video buffers. Scoped to the home-video hero only. */
.banner__area.is__home__video .video__area {
  background-color: #0F0F10;
  background-image: url('https://highperformancebuckets3.s3.eu-north-1.amazonaws.com/home/hp_vid_banner.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.hp-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(15, 15, 16, 0.50) 0%,
    rgba(15, 15, 16, 0.18) 32%,
    rgba(15, 15, 16, 0.42) 70%,
    rgba(15, 15, 16, 0.88) 100%
  );
}

.hp-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}

.hp-hero__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px) clamp(56px, 9vw, 120px);
  pointer-events: auto;
}

.hp-hero__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 22px 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}

/* Signature element: thin gold rule before eyebrow.
   This is the ONE recurring motif across the page. */
.hp-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-hero__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(2.5rem, 6.2vw, 5.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.022em;
  color: var(--hp-paper);
  margin: 0 0 26px 0 !important;
  font-weight: 400 !important;
  max-width: 14ch;
  text-wrap: balance;
}

.hp-hero__byline {
  font-family: "Jost", sans-serif;
  font-size: 13.5px;
  color: var(--hp-mute);
  letter-spacing: 0.05em;
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
}

.hp-hero__byline strong {
  color: var(--hp-paper);
  font-weight: 500;
}

/* Staggered reveal — fires on DOMContentLoaded via hp-home.js */
.hp-hero__content .hp-hero__eyebrow,
.hp-hero__content .hp-hero__headline,
.hp-hero__content .hp-hero__byline {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--hp-dur-base) var(--hp-ease-luxe),
    transform var(--hp-dur-base) var(--hp-ease-luxe);
}
.hp-hero__content.is-revealed .hp-hero__eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 180ms;
}
.hp-hero__content.is-revealed .hp-hero__headline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 380ms;
}
.hp-hero__content.is-revealed .hp-hero__byline {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 680ms;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .hp-hero__inner {
    padding-bottom: clamp(48px, 12vw, 90px);
  }
  .hp-hero__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.22em;
    padding-left: 38px;
    margin-bottom: 18px;
  }
  .hp-hero__eyebrow::before {
    width: 24px;
  }
  .hp-hero__headline {
    max-width: none;
  }
}

/* ============================================================
   PHASE 2 — AUTHORITY STRIP ("By the numbers")
   Cream band right after the hero. 4 oversized serif metrics
   with small-caps labels. Provides credibility break between
   the dark hero and the editorial body below.
   Markup hooks (in welcome.blade.php after the hero):
     .hp-stats              — section wrapper, cream bg
       .hp-stats__inner       — max-width gutter
         .hp-stats__eyebrow     — signature eyebrow with gold rule
         .hp-stats__grid        — 4-column responsive flex
           .hp-stats__item        — each metric column
             .hp-stats__value       — oversized Gilda serif number
             .hp-stats__label       — small-caps Jost label
   ============================================================ */
.hp-stats {
  background: var(--hp-cream);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
  position: relative;
  overflow: hidden;
}

.hp-stats__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-stats__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 56px 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-stats__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 64px);
}

.hp-stats__item {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* Subtle vertical divider between items (desktop only) */
.hp-stats__item:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(clamp(32px, 4vw, 64px) * -0.5);
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: rgba(15, 15, 16, 0.10);
}

.hp-stats__value {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--hp-ink);
  font-weight: 400;
}

.hp-stats__label {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.60);
  font-weight: 500;
  line-height: 1.4;
}

/* Tablet: 2x2 */
@media (max-width: 992px) {
  .hp-stats__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(36px, 6vw, 56px);
  }
  .hp-stats__item:not(:first-child)::before { display: none; }
  /* Divider between rows only — vertical line between columns */
  .hp-stats__item:nth-child(2n)::before {
    display: block;
    left: -28px;
  }
}

/* Mobile: stack */
@media (max-width: 540px) {
  .hp-stats__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .hp-stats__item::before { display: none !important; }
  .hp-stats__item {
    padding-bottom: 36px;
    border-bottom: 1px solid rgba(15, 15, 16, 0.10);
  }
  .hp-stats__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }
}

/* ============================================================
   PHASE 3 — PRINCIPALS ("Meet your principals")
   Dark ink band. One row per principal. Portrait + bio alternate
   sides on desktop (Sebastian left, Nadia right). Portraits use
   monogram placeholder until real photos arrive — swap via
   config/hp-content.php principals[].portrait.
   Markup hooks (in welcome.blade.php after .hp-stats):
     .hp-principals             — section wrapper, ink bg
       .hp-principals__inner      — max-width gutter
         .hp-principals__eyebrow    — signature eyebrow
         .hp-principals__list       — flex column wrapping rows
           .hp-principal              — grid row (portrait + bio)
           .hp-principal--reverse     — bio left, portrait right
             .hp-principal__portrait    — placeholder/photo container
               .hp-principal__monogram    — placeholder serif initials
             .hp-principal__bio         — bio column
               .hp-principal__role        — small caps role
               .hp-principal__name        — serif name
               .hp-principal__copy        — bio paragraph
               .hp-principal__cta         — speak-to link
   ============================================================ */
.hp-principals {
  background: var(--hp-ink);
  color: var(--hp-paper);
  padding: var(--hp-section-pad) 0;
  position: relative;
}

.hp-principals__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-principals__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 80px 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-principals__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-principals__list {
  display: flex;
  flex-direction: column;
}

.hp-principal {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.35fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  margin-bottom: clamp(72px, 9vw, 140px);
}
.hp-principal:last-child {
  margin-bottom: 0;
}

/* Reverse layout for alternating principals (Nadia row) */
.hp-principal--reverse {
  grid-template-columns: minmax(280px, 1.35fr) minmax(260px, 1fr);
}
.hp-principal--reverse .hp-principal__portrait {
  order: 2;
}
.hp-principal--reverse .hp-principal__bio {
  order: 1;
}

/* Portrait container — placeholder OR photo */
.hp-principal__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  background-color: #1a1a1c;
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
  border: 1px solid rgba(171, 138, 98, 0.18);
  overflow: hidden;
}

/* Inset double-line frame for editorial feel */
.hp-principal__portrait::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(171, 138, 98, 0.22);
  pointer-events: none;
  z-index: 2;
}

/* Subtle radial vignette */
.hp-principal__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 60%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Monogram (only shown when no portrait image is set) */
.hp-principal__monogram {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(80px, 13vw, 180px);
  color: var(--hp-gold);
  opacity: 0.42;
  letter-spacing: -0.025em;
  line-height: 1;
  user-select: none;
  z-index: 0;
}
.hp-principal__portrait[data-has-portrait="true"] .hp-principal__monogram {
  display: none;
}

/* Bio side */
.hp-principal__bio {
  display: flex;
  flex-direction: column;
}

.hp-principal__role {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 20px 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
  align-self: flex-start;
}
.hp-principal__role::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-principal__name {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(2rem, 4vw, 3.25rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em;
  color: var(--hp-paper) !important;
  margin: 0 0 26px 0 !important;
  font-weight: 400 !important;
}

.hp-principal__copy {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(251, 250, 247, 0.78);
  margin: 0 0 32px 0;
  font-weight: 400;
  max-width: 52ch;
}

.hp-principal__cta {
  font-family: "Jost", sans-serif;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--hp-paper);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  transition: color var(--hp-dur-fast) ease, gap var(--hp-dur-fast) var(--hp-ease-out);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(171, 138, 98, 0.30);
}
.hp-principal__cta::after {
  content: "→";
  font-family: "Gilda Display", serif;
  font-size: 18px;
  color: var(--hp-gold);
  transition: transform var(--hp-dur-fast) var(--hp-ease-out);
  line-height: 1;
}
.hp-principal__cta:hover {
  color: var(--hp-gold);
  gap: 18px;
  border-bottom-color: var(--hp-gold);
}
.hp-principal__cta:hover::after {
  transform: translateX(4px);
}

/* Mobile: stack and reset reverse order */
@media (max-width: 768px) {
  .hp-principal,
  .hp-principal--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: clamp(56px, 10vw, 80px);
  }
  .hp-principal--reverse .hp-principal__portrait { order: 0; }
  .hp-principal--reverse .hp-principal__bio { order: 1; }
  .hp-principal__portrait {
    aspect-ratio: 4 / 4.6;
    max-width: 440px;
  }
}

/* Actions row — CTA + social icons together (used on About principals) */
.hp-principal__actions {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
  flex-wrap: wrap;
  margin-top: 8px;
}

.hp-principal__socials {
  display: flex;
  align-items: center;
  gap: 14px;
}

.hp-principal__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(171, 138, 98, 0.35);
  color: rgba(251, 250, 247, 0.78);
  text-decoration: none;
  transition:
    border-color var(--hp-dur-fast) ease,
    background-color var(--hp-dur-fast) ease,
    color var(--hp-dur-fast) ease,
    transform var(--hp-dur-fast) var(--hp-ease-out);
}
.hp-principal__socials a:hover {
  border-color: var(--hp-gold);
  background-color: var(--hp-gold);
  color: var(--hp-ink);
  transform: translateY(-2px);
}
.hp-principal__socials svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ============================================================
   PHASE 4 — DISTRICTS ("Our territory · Curated districts")
   Paper band with editorial header + 3x2 photo-tile grid.
   Each tile: full-bleed image, hover-scale, dark gradient
   bottom with name + summary. Placeholder (no image) shows
   gradient + faded serif district name as background.
   Markup hooks (in welcome.blade.php after .hp-principals):
     .hp-districts            — section wrapper, paper bg
       .hp-districts__inner     — max-width gutter
         .hp-districts__header    — eyebrow + headline + intro
         .hp-districts__grid      — 3x2 desktop / 2x3 tablet / stack mobile
           .hp-district             — anchor tile, 4:5 aspect
             .hp-district__image      — bg-image layer (or placeholder gradient)
             .hp-district__ghost      — faded serif district name (placeholder only)
             .hp-district__overlay    — dark gradient overlay
             .hp-district__content    — name + summary, bottom-anchored
   ============================================================ */
.hp-districts {
  background: var(--hp-paper);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
}

.hp-districts__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-districts__header {
  margin-bottom: clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}

.hp-districts__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 22px 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-districts__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-districts__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(2rem, 4.5vw, 3.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.022em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 14ch;
}

.hp-districts__intro {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(15, 15, 16, 0.65);
  margin: 0;
  max-width: 48ch;
}

@media (max-width: 768px) {
  .hp-districts__header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Grid — 3 columns desktop, 2 tablet, 1 mobile */
.hp-districts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
}
@media (max-width: 992px) {
  .hp-districts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .hp-districts__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Tile */
.hp-district {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #1a1a1c;
  text-decoration: none;
  color: var(--hp-paper);
  display: block;
  isolation: isolate;
}
@media (max-width: 540px) {
  .hp-district { aspect-ratio: 4 / 3.4; }
}

.hp-district__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 1100ms var(--hp-ease-luxe);
  z-index: 0;
}

/* Placeholder when no image — subtle dark gradient with warm gold tint */
.hp-district:not([data-has-image="true"]) .hp-district__image {
  background-image:
    radial-gradient(ellipse at top right, rgba(171, 138, 98, 0.10) 0%, transparent 50%),
    linear-gradient(155deg, #0F0F10 0%, #1f1d1a 55%, #14110e 100%);
}

/* Ghost district name (only for placeholder tiles) */
.hp-district__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(48px, 8vw, 120px);
  color: var(--hp-gold);
  opacity: 0.08;
  letter-spacing: -0.025em;
  line-height: 1;
  text-align: center;
  padding: 0 20px;
  z-index: 1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

/* Dark gradient overlay (always present, deepens on hover) */
.hp-district__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.45) 70%,
    rgba(0, 0, 0, 0.82) 100%
  );
  transition: background var(--hp-dur-base) ease;
  z-index: 2;
}

.hp-district__content {
  position: absolute;
  inset: 0;
  padding: clamp(20px, 2.4vw, 36px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  z-index: 3;
}

.hp-district__name {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.35rem, 2.4vw, 2.1rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.012em;
  color: var(--hp-paper) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.hp-district__summary {
  font-family: "Jost", sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.78);
  letter-spacing: 0.04em;
  line-height: 1.5;
  margin: 0;
}

/* Hover: subtle image scale + overlay deepen */
.hp-district:hover .hp-district__image {
  transform: scale(1.045);
}
.hp-district:hover .hp-district__overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.10) 30%,
    rgba(0, 0, 0, 0.62) 70%,
    rgba(0, 0, 0, 0.92) 100%
  );
}

/* Focus-visible (a11y) */
.hp-district:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 4px;
}

/* ============================================================
   PHASE 5 — INSIGHTS ("Market intelligence")
   Merged section combining YouTube market videos (JS-populated
   via loadvideos.js into #youtube-videos) with latest blog
   posts. Editorial header on top, video block, then 3-up
   blog card grid. All on paper background.
   Markup hooks (in welcome.blade.php after .hp-districts):
     .hp-insights              — section wrapper, paper bg
       .hp-insights__inner       — max-width gutter
         .hp-insights__header      — eyebrow + headline + intro
         .hp-insights__videos      — wraps existing #youtube-videos
           .hp-insights__subhead     — small-caps section label
         .hp-insights__articles    — wraps blog card grid
           .hp-insights__subhead     — small-caps section label
           .hp-insights__grid        — 3 col blog cards
             .hp-insight-card          — single article card
               .hp-insight-card__image   — top image
               .hp-insight-card__body    — content below
                 .hp-insight-card__meta    — date + category
                 .hp-insight-card__title   — serif title
                 .hp-insight-card__cta     — read link
   ============================================================ */
.hp-insights {
  background: var(--hp-paper);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
}

.hp-insights__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-insights__header {
  margin-bottom: clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
@media (max-width: 768px) {
  .hp-insights__header {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.hp-insights__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 22px 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-insights__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-insights__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(2rem, 4.5vw, 3.75rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.022em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.hp-insights__intro {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(15, 15, 16, 0.65);
  margin: 0;
  max-width: 48ch;
}

.hp-insights__videos {
  margin-bottom: clamp(64px, 8vw, 112px);
}

.hp-insights__articles { }

.hp-insights__subhead {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.55);
  margin: 0 0 28px 0;
  font-weight: 500;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(15, 15, 16, 0.10);
}

/* ---- Video Hub (JS-populated by loadvideos.js into #youtube-videos)
   One large featured player on top, grid of clickable thumbnails below.
   Click thumbnail → featured player swaps in-place + autoplay. */

.hp-video-hub {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
}

/* ---- Featured player ---- */
.hp-video-hub__player {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hp-video-hub__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0c;
  overflow: hidden;
  border: 1px solid rgba(15, 15, 16, 0.08);
}

.hp-video-hub__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Clickable poster (before play) */
.hp-video-hub__poster {
  position: absolute;
  inset: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: #0a0a0c;
  cursor: pointer;
  display: block;
  overflow: hidden;
}
.hp-video-hub__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1100ms var(--hp-ease-luxe);
}
.hp-video-hub__poster:hover img {
  transform: scale(1.025);
}
.hp-video-hub__poster-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.hp-video-hub__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(15, 15, 16, 0.55);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--hp-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    transform var(--hp-dur-base) var(--hp-ease-out),
    background-color var(--hp-dur-fast) ease,
    border-color var(--hp-dur-fast) ease;
}
.hp-video-hub__poster:hover .hp-video-hub__play {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--hp-gold);
  border-color: var(--hp-gold);
  color: var(--hp-ink);
}
.hp-video-hub__play svg { display: block; margin-left: 4px; }

/* Featured meta (title + date · views · channel) */
.hp-video-hub__meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hp-video-hub__title {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.4rem, 2.4vw, 2.1rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.012em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 60ch;
}
.hp-video-hub__sub {
  font-family: "Jost", sans-serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.55);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-weight: 500;
}
.hp-video-hub__sub time { color: inherit; font-family: inherit; }
.hp-video-hub__dot { color: var(--hp-gold); }

/* ---- Thumbnail grid ---- */
.hp-video-hub__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
@media (max-width: 992px) {
  .hp-video-hub__thumbs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .hp-video-hub__thumbs { grid-template-columns: repeat(2, 1fr); }
}

.hp-video-hub__thumb {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
  isolation: isolate;
  transition: transform var(--hp-dur-fast) var(--hp-ease-out);
}
.hp-video-hub__thumb:hover { transform: translateY(-3px); }

.hp-video-hub__thumb-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0a0c;
  border: 1px solid rgba(15, 15, 16, 0.08);
  transition: border-color var(--hp-dur-fast) ease, box-shadow var(--hp-dur-fast) ease;
}
.hp-video-hub__thumb-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 700ms var(--hp-ease-luxe);
}
.hp-video-hub__thumb:hover .hp-video-hub__thumb-image img { transform: scale(1.05); }

/* Subtle play hint in corner of thumb */
.hp-video-hub__thumb-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(15, 15, 16, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-paper);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--hp-dur-fast) ease, transform var(--hp-dur-fast) var(--hp-ease-out), background var(--hp-dur-fast) ease;
}
.hp-video-hub__thumb-play svg { display: block; margin-left: 2px; }
.hp-video-hub__thumb:hover .hp-video-hub__thumb-play {
  opacity: 1;
  transform: translateY(0);
  background: var(--hp-gold);
  color: var(--hp-ink);
}

/* Active thumbnail = the one currently playing in the featured player */
.hp-video-hub__thumb.is-active .hp-video-hub__thumb-image {
  outline: 2px solid var(--hp-gold);
  outline-offset: 3px;
  border-color: transparent;
}
.hp-video-hub__thumb.is-active .hp-video-hub__thumb-title { color: var(--hp-gold); }
.hp-video-hub__thumb.is-active .hp-video-hub__thumb-play {
  opacity: 1;
  transform: translateY(0);
  background: var(--hp-gold);
  color: var(--hp-ink);
}

.hp-video-hub__thumb-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hp-video-hub__thumb-date {
  font-family: "Jost", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.50);
  font-weight: 500;
}
.hp-video-hub__thumb-title {
  font-family: "Jost", sans-serif;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--hp-ink);
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--hp-dur-fast) ease;
}

/* Focus-visible (keyboard) */
.hp-video-hub__thumb:focus-visible .hp-video-hub__thumb-image,
.hp-video-hub__poster:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 3px;
}

/* ---- Skeleton loading state ---- */
.hp-video-hub--loading .hp-video-hub__player,
.hp-video-hub--loading .hp-video-hub__thumb-image {
  background:
    linear-gradient(90deg, rgba(15,15,16,0.05) 0%, rgba(15,15,16,0.10) 50%, rgba(15,15,16,0.05) 100%);
  background-size: 200% 100%;
  animation: hp-video-skel 1.4s ease-in-out infinite;
}
.hp-video-hub--loading .hp-video-hub__player {
  aspect-ratio: 16 / 9;
  width: 100%;
  border: 1px solid rgba(15, 15, 16, 0.06);
}
.hp-video-hub__thumb--skeleton {
  pointer-events: none;
}
@keyframes hp-video-skel {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-video-hub--loading .hp-video-hub__player,
  .hp-video-hub--loading .hp-video-hub__thumb-image { animation: none; }
}

.hp-video-hub__empty {
  padding: clamp(40px, 6vw, 80px) clamp(20px, 3vw, 40px);
  background: var(--hp-cream);
  border: 1px solid rgba(15, 15, 16, 0.06);
  text-align: center;
  color: rgba(15, 15, 16, 0.55);
  font-family: "Jost", sans-serif;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Blog card grid */
.hp-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.6vw, 36px);
}
@media (max-width: 992px) {
  .hp-insights__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .hp-insights__grid { grid-template-columns: 1fr; }
}

.hp-insight-card {
  background: #ffffff;
  border: 1px solid rgba(15, 15, 16, 0.08);
  transition:
    transform var(--hp-dur-base) var(--hp-ease-out),
    box-shadow var(--hp-dur-base) var(--hp-ease-out);
  isolation: isolate;
}
.hp-insight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(15, 15, 16, 0.14);
}

.hp-insight-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.hp-insight-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #efece4;
  transition: transform 1000ms var(--hp-ease-luxe);
  transform-origin: center;
}
/* Subtle zoom on card hover */
.hp-insight-card:hover .hp-insight-card__image {
  transform: scale(1.04);
}

.hp-insight-card__body {
  padding: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 14px;
}

.hp-insight-card__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.55);
  font-weight: 500;
}
.hp-insight-card__meta time { color: inherit; }
.hp-insight-card__cat {
  position: relative;
  padding-left: 14px;
}
.hp-insight-card__cat::before {
  content: "·";
  position: absolute;
  left: 0;
  top: -2px;
  color: var(--hp-gold);
}

.hp-insight-card__title {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.15rem, 1.7vw, 1.5rem) !important;
  line-height: 1.2 !important;
  letter-spacing: -0.005em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  flex: 1 1 auto;
}

.hp-insight-card__cta {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--hp-ink);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(171, 138, 98, 0.30);
  align-self: flex-start;
  transition: gap var(--hp-dur-fast) var(--hp-ease-out), color var(--hp-dur-fast) ease, border-bottom-color var(--hp-dur-fast) ease;
}
.hp-insight-card__cta::after {
  content: "→";
  font-family: "Gilda Display", serif;
  font-size: 15px;
  color: var(--hp-gold);
  line-height: 1;
  transition: transform var(--hp-dur-fast) var(--hp-ease-out);
}
.hp-insight-card:hover .hp-insight-card__cta {
  color: var(--hp-gold);
  gap: 14px;
  border-bottom-color: var(--hp-gold);
}
.hp-insight-card:hover .hp-insight-card__cta::after {
  transform: translateX(4px);
}

/* ============================================================
   PHASE 6 — TRUSTED PARTNERS ("Network")
   Reframes the existing developer marquee as a credibility
   statement. Adds an editorial header above; restyles the
   marquee with full-opacity logos and edge mask. The existing
   .marquee-container / .marquee-logo-content markup is left
   intact so the upstream marquee CSS animation + developer-
   click JS keep working unchanged.
   Markup hooks (in welcome.blade.php after .hp-insights):
     .hp-partners              — section wrapper, paper bg
       .hp-partners__inner       — max-width gutter (header only)
         .hp-partners__header      — eyebrow + headline + intro (centered)
       .hp-partners__marquee     — full-bleed marquee container
         (.block .marquee-container ... — existing markup wrapped)
   ============================================================ */
.hp-partners {
  background: var(--hp-paper);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0 calc(var(--hp-section-pad) - 24px);
}

.hp-partners__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-partners__header {
  margin-bottom: clamp(48px, 6vw, 80px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.hp-partners__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-partners__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-partners__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.85rem, 3.6vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.018em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 22ch;
}

.hp-partners__intro {
  font-family: "Jost", sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(15, 15, 16, 0.62);
  margin: 0;
  max-width: 62ch;
}

/* Marquee — let the existing markup keep its scroll animation
   from style.css. We only re-tune the visual treatment of the
   logos themselves: full opacity, edge fade, grayscale-then-
   colour on hover. */
.hp-partners__marquee {
  -webkit-mask-image: linear-gradient(
    90deg, transparent 0%, #000 8%, #000 92%, transparent 100%
  );
          mask-image: linear-gradient(
    90deg, transparent 0%, #000 8%, #000 92%, transparent 100%
  );
}

.hp-partners__marquee .marquee-logo-item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 clamp(28px, 3vw, 48px);
  min-height: 92px;
}

/* Logo treatment: mix-blend-mode multiply neutralises white JPG backgrounds
   (white pixels effectively become transparent against paper bg).
   Light grayscale + slight brightness reduction unifies the tonal palette
   so logos read as a coherent editorial strip rather than a colour parade.
   Caveat: pure-white-on-transparent PNGs cannot be saved by CSS alone and
   need to be re-exported as proper transparent assets. */
.hp-partners__marquee .marquee-logo-item img {
  max-height: 56px;
  width: auto;
  opacity: 0.82;
  mix-blend-mode: multiply;
  filter: grayscale(0.5) brightness(0.85);
  transition:
    opacity var(--hp-dur-base) var(--hp-ease-luxe),
    filter var(--hp-dur-base) var(--hp-ease-luxe),
    transform var(--hp-dur-base) var(--hp-ease-luxe);
}

.hp-partners__marquee .marquee-logo-item:hover img {
  opacity: 1;
  filter: grayscale(0) brightness(1);
  transform: translateY(-2px);
}

/* Marquee first-paint fix — the upstream animation (scilens.css) runs
   translateX(0) -> translateX(-50%) on infinite loop. Left to itself it is
   already sliding the moment the page paints, which reads as a strange
   "grid sliding from right to left" on refresh. We start it PAUSED and only
   set it running once the section scrolls into view (hp-home.js adds
   .is-revealed). By the time the user reaches the partners section the
   marquee is already in motion — natural, never a load-time slide. */
.hp-partners__marquee .marquee-logo-content {
  opacity: 1;
  animation-play-state: paused;
}
.hp-partners__marquee.is-revealed .marquee-logo-content {
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
  .hp-partners__marquee .marquee-logo-content {
    animation: none !important;
    transform: none !important;
  }
}

/* ============================================================
   PHASE 7 — TESTIMONIALS ("In their words")
   Dark ink section, static vertical stack of 3 magazine-style
   testimonials. Each: oversized gold opening quote mark, small
   uppercase kicker (magazine deck), large serif quote, bottom
   attribution row with avatar (monogram placeholder until photo)
   + name + location. Separated by hairline rules.
   Markup hooks (in resources/views/innerpages/reviews.blade.php):
     .hp-testimonials              — section wrapper, ink bg
       .hp-testimonials__inner       — max-width gutter
         .hp-testimonials__header      — centered eyebrow + headline
         .hp-testimonials__list        — flex column wrapping testimonials
           .hp-testimonial               — figure block
             .hp-testimonial__mark         — oversized gold "
             .hp-testimonial__kicker       — uppercase deck line
             .hp-testimonial__quote        — large serif quote
             .hp-testimonial__attr         — bottom attribution row
               .hp-testimonial__avatar       — circular monogram/photo
               .hp-testimonial__person       — name + location
   ============================================================ */
.hp-testimonials {
  background: var(--hp-ink);
  color: var(--hp-paper);
  padding: var(--hp-section-pad) 0;
}

.hp-testimonials__inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-testimonials__header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: clamp(56px, 7vw, 88px);
}

.hp-testimonials__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-testimonials__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-testimonials__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.85rem, 3.6vw, 3rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.018em;
  color: var(--hp-paper) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.hp-testimonials__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each testimonial */
.hp-testimonial {
  position: relative;
  margin: 0;
  padding: clamp(48px, 6vw, 84px) 0;
  border-top: 1px solid rgba(171, 138, 98, 0.18);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
}
.hp-testimonial:first-child { border-top: 0; padding-top: 0; }
.hp-testimonial:last-child  { padding-bottom: 0; }

.hp-testimonial__mark {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(80px, 9vw, 140px);
  line-height: 0.6;
  color: var(--hp-gold);
  opacity: 0.7;
  user-select: none;
  display: block;
  margin-bottom: -8px;
}

.hp-testimonial__kicker {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.55);
  margin: 0;
  font-weight: 500;
}

.hp-testimonial__quote {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.2vw, 1.95rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--hp-paper);
  margin: 0;
  font-weight: 400;
  font-style: normal;
  max-width: 70ch;
}

.hp-testimonial__attr {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

.hp-testimonial__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: rgba(171, 138, 98, 0.16);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(171, 138, 98, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: hidden;
}
.hp-testimonial__avatar[data-has-portrait="true"] .hp-testimonial__initial {
  display: none;
}
.hp-testimonial__initial {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: 22px;
  color: var(--hp-gold);
  line-height: 1;
}

.hp-testimonial__person {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hp-testimonial__name {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: 18px;
  color: var(--hp-paper);
  letter-spacing: -0.005em;
  line-height: 1.2;
}

.hp-testimonial__location {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.55);
  font-weight: 500;
}

/* ============================================================
   PHASE 8 — SERVICES ("Beyond brokerage · Private client services")
   Editorial numbered list. Each row: oversized gold serif numeral,
   serif service name, body description, gold "Learn more →" link.
   Rows separated by hairline rules. Driven by $services DB.
   Markup hooks (in welcome.blade.php after testimonials include):
     .hp-services              — section wrapper, paper bg
       .hp-services__inner       — max-width gutter
         .hp-services__header      — eyebrow + headline + intro (2-col)
         .hp-services__list        — <ol> wrapping rows
           .hp-service               — single row (grid: numeral + body)
             .hp-service__number       — oversized serif "01"–"04"
             .hp-service__body         — name + copy + cta
               .hp-service__name         — serif name
               .hp-service__copy         — body
               .hp-service__cta          — gold underlined link
   ============================================================ */
.hp-services {
  background: var(--hp-paper);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
}

.hp-services__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-services__header {
  margin-bottom: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
@media (max-width: 768px) {
  .hp-services__header { grid-template-columns: 1fr; gap: 22px; }
}

.hp-services__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 22px 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-services__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-services__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(2rem, 4.5vw, 3.75rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.022em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 16ch;
}

.hp-services__intro {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(15, 15, 16, 0.65);
  margin: 0;
  max-width: 48ch;
}

.hp-services__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hp-service {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: clamp(28px, 4vw, 80px);
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid rgba(15, 15, 16, 0.10);
  align-items: start;
}
.hp-service:first-child { border-top: 0; padding-top: 0; }
.hp-service:last-child  { padding-bottom: 0; }

.hp-service__number {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: var(--hp-gold);
  letter-spacing: -0.02em;
  font-weight: 400;
  user-select: none;
}

.hp-service__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 64ch;
}

.hp-service__name {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.4rem, 2.2vw, 2rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.012em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

.hp-service__copy {
  font-family: "Jost", sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(15, 15, 16, 0.65);
  margin: 0;
}

.hp-service__cta {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--hp-ink);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(171, 138, 98, 0.30);
  align-self: flex-start;
  transition: gap var(--hp-dur-fast) var(--hp-ease-out), color var(--hp-dur-fast) ease, border-bottom-color var(--hp-dur-fast) ease;
  margin-top: 4px;
}
.hp-service__cta::after {
  content: "→";
  font-family: "Gilda Display", serif;
  font-size: 16px;
  color: var(--hp-gold);
  line-height: 1;
  transition: transform var(--hp-dur-fast) var(--hp-ease-out);
}
.hp-service__cta:hover {
  color: var(--hp-gold);
  gap: 14px;
  border-bottom-color: var(--hp-gold);
}
.hp-service__cta:hover::after {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .hp-service {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .hp-service__number {
    font-size: clamp(2.4rem, 9vw, 3.4rem);
  }
}

/* ============================================================
   PHASE 9 — CONTACT CTA ("Begin a conversation")
   Closing dark-ink section. Centered. Subtle gold radial glow
   in the background for warmth. Oversized serif headline,
   primary gold button, secondary direct phone link.
   Markup hooks (in welcome.blade.php before partials.footer):
     .hp-cta                — section wrapper, ink bg
       .hp-cta__glow          — radial gold halo background
       .hp-cta__inner         — centered max-width container
         .hp-cta__eyebrow       — signature eyebrow
         .hp-cta__headline      — oversized serif statement
         .hp-cta__actions       — primary button + phone
           .hp-cta__button        — primary gold CTA
           .hp-cta__phone         — direct phone label + number
   ============================================================ */
.hp-cta {
  background: var(--hp-ink);
  color: var(--hp-paper);
  padding: clamp(112px, 13vw, 184px) 0;
  position: relative;
  overflow: hidden;
}

/* Subtle gold halo — gives the closing section warmth and gravity */
.hp-cta__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 90%);
  aspect-ratio: 1;
  background: radial-gradient(
    circle at center,
    rgba(171, 138, 98, 0.14) 0%,
    rgba(171, 138, 98, 0.04) 35%,
    transparent 65%
  );
  pointer-events: none;
  filter: blur(8px);
}

.hp-cta__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.5vw, 48px);
}

.hp-cta__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-cta__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-cta__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(2.25rem, 4.8vw, 4rem) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.022em;
  color: var(--hp-paper) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 18ch;
  text-wrap: balance;
}

.hp-cta__actions {
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.hp-cta__button {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 20px 36px;
  background: var(--hp-gold);
  color: var(--hp-ink);
  text-decoration: none;
  font-family: "Jost", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  border: 0;
  line-height: 1;
  transition:
    background-color var(--hp-dur-fast) ease,
    color var(--hp-dur-fast) ease,
    transform var(--hp-dur-fast) var(--hp-ease-out),
    gap var(--hp-dur-fast) var(--hp-ease-out),
    box-shadow var(--hp-dur-fast) ease;
}
.hp-cta__button::after {
  content: "→";
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--hp-dur-fast) var(--hp-ease-out);
}
.hp-cta__button:hover {
  background: var(--hp-paper);
  color: var(--hp-ink);
  transform: translateY(-2px);
  gap: 18px;
  box-shadow: 0 18px 38px -14px rgba(171, 138, 98, 0.45);
}
.hp-cta__button:hover::after { transform: translateX(2px); }

.hp-cta__phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.hp-cta__phone-label {
  font-family: "Jost", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.55);
  font-weight: 500;
}
.hp-cta__phone-number {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(1.3rem, 1.9vw, 1.75rem);
  letter-spacing: -0.005em;
  color: var(--hp-paper);
  text-decoration: none;
  line-height: 1.1;
  transition: color var(--hp-dur-fast) ease;
}
.hp-cta__phone-number:hover { color: var(--hp-gold); }

@media (max-width: 540px) {
  .hp-cta__actions {
    flex-direction: column;
    gap: 28px;
    width: 100%;
  }
  .hp-cta__button {
    width: 100%;
    justify-content: center;
  }
}

/* ============================================================
   FOOTER — editorial dark close
   Replaces the legacy .rts__footer template markup.
   Markup hooks (in resources/views/partials/footer.blade.php):
     .hp-footer                — dark ink wrapper
       .hp-footer__inner         — max-width gutter
         .hp-footer__grid          — brand + 2 nav cols
           .hp-footer__brand         — logo + tagline + byline
             .hp-footer__logo
             .hp-footer__tagline
             .hp-footer__byline
           .hp-footer__col           — link group
             .hp-footer__col-label     — small-caps eyebrow with gold rule
             .hp-footer__list          — link list
         .hp-footer__bottom        — copyright + social row
           .hp-footer__copy
           .hp-footer__social
   ============================================================ */
.hp-footer {
  background: var(--hp-ink);
  color: var(--hp-paper);
  padding: clamp(80px, 9vw, 128px) 0 clamp(36px, 4vw, 56px);
}

.hp-footer__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-bottom: clamp(56px, 7vw, 96px);
}
@media (max-width: 768px) {
  .hp-footer__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

.hp-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hp-footer__logo img {
  width: 168px;
  height: auto;
  display: block;
}

.hp-footer__tagline {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  line-height: 1.2;
  color: var(--hp-paper);
  margin: 0;
  max-width: 22ch;
}

.hp-footer__byline {
  font-family: "Jost", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(251, 250, 247, 0.55);
  margin: 0;
  max-width: 38ch;
}

.hp-footer__col-label {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 24px 0;
  font-weight: 500;
  position: relative;
  padding-left: 44px;
  display: inline-block;
}
.hp-footer__col-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 28px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hp-footer__list a {
  font-family: "Jost", sans-serif;
  font-size: 14.5px;
  color: var(--hp-paper);
  text-decoration: none;
  transition: color var(--hp-dur-fast) ease;
  line-height: 1.5;
}
.hp-footer__list a:hover { color: var(--hp-gold); }

.hp-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 640px) {
  .hp-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

.hp-footer__copy {
  font-family: "Jost", sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(251, 250, 247, 0.45);
  margin: 0;
}

.hp-footer__social {
  display: flex;
  gap: 28px;
}
.hp-footer__social a {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(251, 250, 247, 0.65);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--hp-dur-fast) ease;
}
.hp-footer__social a:hover { color: var(--hp-gold); }

/* Suppress legacy .rts__footer if it ever bleeds through */
footer.rts__section.rts__footer.is__home__six { display: none !important; }

/* ============================================================
   ABOUT PAGE — PHASE 1: PAGE HERO (.hp-page-hero)
   Text-first dark editorial opener for inner pages (About first).
   No video, no image — pure typography on ink. Reuses the
   signature gold-rule eyebrow + Gilda Display headline.
   Markup hooks (in resources/views/innerpages/about.blade.php):
     .hp-page-hero             — section wrapper, ink bg
       .hp-page-hero__inner      — max-width gutter, left-aligned
         .hp-page-hero__eyebrow    — signature eyebrow
         .hp-page-hero__headline   — oversized serif tagline
         .hp-page-hero__body       — short editorial intro
   ============================================================ */
.hp-page-hero {
  background: var(--hp-ink);
  color: var(--hp-paper);
  /* Extra top padding to clear the white nav that sits over inner pages */
  padding: clamp(140px, 17vw, 220px) 0 clamp(96px, 11vw, 160px);
  position: relative;
  overflow: hidden;
}

.hp-page-hero__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

.hp-page-hero__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
  align-self: flex-start;
}
.hp-page-hero__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-page-hero__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(2.5rem, 6vw, 5.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.022em;
  color: var(--hp-paper) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 16ch;
  text-wrap: balance;
}

.hp-page-hero__body {
  font-family: "Jost", sans-serif;
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.6;
  color: rgba(251, 250, 247, 0.75);
  margin: 0;
  max-width: 62ch;
  font-weight: 400;
}

/* Staggered fade-in via the existing hp-home.js DOMContentLoaded hook
   (the JS adds .is-revealed to .hp-hero__content; we use a different
    selector here for inner-page hero — wire a reveal class on the
    container too via auto-init below). */
.hp-page-hero__inner .hp-page-hero__eyebrow,
.hp-page-hero__inner .hp-page-hero__headline,
.hp-page-hero__inner .hp-page-hero__body {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity var(--hp-dur-base) var(--hp-ease-luxe),
    transform var(--hp-dur-base) var(--hp-ease-luxe);
}
.hp-page-hero__inner.is-revealed .hp-page-hero__eyebrow  { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.hp-page-hero__inner.is-revealed .hp-page-hero__headline { opacity: 1; transform: translateY(0); transition-delay: 380ms; }
.hp-page-hero__inner.is-revealed .hp-page-hero__body     { opacity: 1; transform: translateY(0); transition-delay: 680ms; }

@media (prefers-reduced-motion: reduce) {
  .hp-page-hero__inner .hp-page-hero__eyebrow,
  .hp-page-hero__inner .hp-page-hero__headline,
  .hp-page-hero__inner .hp-page-hero__body {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   ABOUT PAGE — PHASE 2: PAIRED STATEMENT (.hp-statement)
   Vision + Mission side-by-side editorial pair on paper bg.
   Hairline divider between halves on desktop; stacked vertically
   with a top border on mobile.
   Markup hooks (in resources/views/innerpages/about.blade.php):
     .hp-statement             — section wrapper, paper bg
       .hp-statement__inner      — max-width gutter
         .hp-statement__eyebrow    — signature eyebrow
         .hp-statement__pair       — 2-column grid (half + half)
           .hp-statement__half       — single statement
             .hp-statement__kicker     — small caps label (VISION / MISSION)
             .hp-statement__body       — large serif statement
   ============================================================ */
.hp-statement {
  background: var(--hp-paper);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
}

.hp-statement__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}

.hp-statement__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 clamp(48px, 6vw, 80px) 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-statement__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}

.hp-statement__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 120px);
  align-items: start;
}

.hp-statement__half {
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}

/* Hairline vertical divider on the second half (desktop) */
.hp-statement__half:nth-child(2) {
  border-left: 1px solid rgba(15, 15, 16, 0.10);
  padding-left: clamp(40px, 6vw, 120px);
  margin-left: calc(clamp(40px, 6vw, 120px) * -1);
}

.hp-statement__kicker {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.55);
  margin: 0;
  font-weight: 500;
}

.hp-statement__body {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.005em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 38ch;
}

/* Mobile — stack and switch divider to top border */
@media (max-width: 768px) {
  .hp-statement__pair {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 72px);
  }
  .hp-statement__half:nth-child(2) {
    border-left: 0;
    border-top: 1px solid rgba(15, 15, 16, 0.10);
    padding-left: 0;
    padding-top: clamp(40px, 6vw, 72px);
    margin-left: 0;
  }
}

/* ============================================================
   OFF-PLAN — PHASE 2: TYPE TABS + FILTER STRIP
   .hp-type-tabs   — primary row: All · Studio · Apartment · Villa · Penthouse
   .hp-filter-bar  — secondary row: search · community · sort · count
   Both sit between the dark hero and the property grid; paper background;
   editorial restraint.
   ============================================================ */
.hp-type-tabs {
  background: var(--hp-paper);
  border-bottom: 1px solid rgba(15, 15, 16, 0.08);
}

.hp-type-tabs__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 72px) 0;
  display: flex;
  gap: clamp(20px, 3vw, 44px);
  overflow-x: auto;
  scrollbar-width: none;
}
.hp-type-tabs__inner::-webkit-scrollbar { display: none; }

.hp-type-tab {
  font-family: "Jost", sans-serif;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(15, 15, 16, 0.55);
  text-decoration: none;
  padding: 0 0 18px 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition:
    color var(--hp-dur-fast) ease,
    border-bottom-color var(--hp-dur-fast) ease;
}
.hp-type-tab:hover { color: var(--hp-ink); }
.hp-type-tab.is-active {
  color: var(--hp-ink);
  border-bottom-color: var(--hp-gold);
}

.hp-filter-bar {
  background: var(--hp-paper);
  border-bottom: 1px solid rgba(15, 15, 16, 0.08);
}

.hp-filter-bar__form {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(20px, 2.6vw, 32px) clamp(24px, 4vw, 72px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 28px);
  flex-wrap: wrap;
}

.hp-filter-bar__search {
  flex: 1 1 260px;
  min-width: 0;
  position: relative;
}
.hp-filter-bar__search input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(15, 15, 16, 0.22);
  padding: 10px 0;
  font-family: "Jost", sans-serif;
  font-size: 14.5px;
  color: var(--hp-ink);
  background: transparent;
  outline: none;
  transition: border-bottom-color var(--hp-dur-fast) ease;
}
.hp-filter-bar__search input::placeholder {
  color: rgba(15, 15, 16, 0.40);
  letter-spacing: 0.02em;
}
.hp-filter-bar__search input:focus {
  border-bottom-color: var(--hp-gold);
}

.hp-filter-bar__select {
  font-family: "Jost", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--hp-ink);
  background: #ffffff;
  border: 1px solid rgba(15, 15, 16, 0.20);
  padding: 11px 40px 11px 16px;
  outline: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='%23AB8A62'><path d='M6 8.5L1.5 4h9z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px;
  min-width: 200px;
  transition: border-color var(--hp-dur-fast) ease;
}
.hp-filter-bar__select:hover,
.hp-filter-bar__select:focus {
  border-color: var(--hp-gold);
}

.hp-filter-bar__count {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.55);
  margin-left: auto;
  font-weight: 500;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .hp-filter-bar__form { gap: 14px; }
  .hp-filter-bar__select { width: 100%; min-width: 0; }
  .hp-filter-bar__count { margin-left: 0; }
}

/* ============================================================
   OFF-PLAN — PHASE 3: PROPERTY CARD GRID + EMPTY STATE
   .hp-property-grid       — wrapper section (paper bg, max-width)
     .hp-property-grid__list — responsive CSS grid (3 / 2 / 1 col)
     .hp-property-card       — anchor card (full-image + price + meta)
   .hp-empty-state         — shown when JS filters yield 0 matches
   ============================================================ */
.hp-property-grid {
  background: var(--hp-paper);
  color: var(--hp-ink);
  padding: clamp(48px, 6vw, 80px) 0 var(--hp-section-pad);
}
.hp-property-grid__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}
.hp-property-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
@media (max-width: 992px) { .hp-property-grid__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .hp-property-grid__list { grid-template-columns: 1fr; } }

/* Card */
.hp-property-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--hp-ink);
  background: #ffffff;
  border: 1px solid rgba(15, 15, 16, 0.08);
  transition:
    transform var(--hp-dur-base) var(--hp-ease-out),
    box-shadow var(--hp-dur-base) var(--hp-ease-out);
  isolation: isolate;
}
.hp-property-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -16px rgba(15, 15, 16, 0.14);
  color: var(--hp-ink);
}

.hp-property-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #14131a;
}
.hp-property-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1000ms var(--hp-ease-luxe);
  display: block;
}
.hp-property-card:hover .hp-property-card__media img {
  transform: scale(1.045);
}

.hp-property-card__type-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(15, 15, 16, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--hp-paper);
  font-family: "Jost", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  font-weight: 500;
  padding: 6px 12px;
  z-index: 2;
}

.hp-property-card__price {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: linear-gradient(135deg, var(--hp-gold) 0%, var(--hp-gold-deep) 100%);
  color: var(--hp-ink);
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.1;
  padding: 8px 14px;
  z-index: 2;
  letter-spacing: -0.005em;
}

.hp-property-card__body {
  padding: clamp(18px, 2vw, 24px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.hp-property-card__title {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
  line-height: 1.2 !important;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
}
.hp-property-card__attribution {
  font-family: "Jost", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.55);
  margin: 0;
  font-weight: 500;
}
.hp-property-card__meta {
  font-family: "Jost", sans-serif;
  font-size: 13px;
  color: rgba(15, 15, 16, 0.72);
  margin: 4px 0 0 0;
  line-height: 1.5;
}

/* Home "Featured opportunities" variant — restore full section padding
   (off-plan trims the top because a filter bar sits above the grid). */
.hp-property-grid--home {
  padding: var(--hp-section-pad) 0;
}
.hp-property-grid__more {
  margin-top: clamp(36px, 5vw, 56px);
  text-align: center;
}
.hp-view-all {
  font-family: "Jost", sans-serif;
  font-size: 12px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--hp-ink);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--hp-gold);
  transition: gap var(--hp-dur-fast) var(--hp-ease-out), color var(--hp-dur-fast) ease;
}
.hp-view-all::after {
  content: "\2192";
  font-family: "Gilda Display", "Times New Roman", serif;
  color: var(--hp-gold);
  font-size: 16px;
  line-height: 1;
}
.hp-view-all:hover { color: var(--hp-gold); gap: 16px; }

/* ============================================================
   SERVICES PAGE — .hp-features (Airbnb deep-dive, cream band)
   2-column editorial feature list: gold rule + title + desc.
   No icons, no cards — pure type. Markup hooks:
     .hp-features → .hp-features__inner → .hp-features__header
                  → .hp-features__grid → .hp-feature
                       → .hp-feature__title / .hp-feature__desc
   ============================================================ */
.hp-features {
  background: var(--hp-cream);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
}
.hp-features__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}
.hp-features__header {
  margin-bottom: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
@media (max-width: 768px) {
  .hp-features__header { grid-template-columns: 1fr; gap: 22px; }
}
.hp-features__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 22px 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  display: inline-block;
}
.hp-features__eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 32px; height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}
.hp-features__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.85rem, 3.6vw, 3rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.018em;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 18ch;
}
.hp-features__intro {
  font-family: "Jost", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(15, 15, 16, 0.65);
  margin: 0;
  max-width: 48ch;
}
.hp-features__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(32px, 5vw, 80px);
}
@media (max-width: 640px) {
  .hp-features__grid { grid-template-columns: 1fr; gap: 32px; }
}
.hp-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(171, 138, 98, 0.30);
}
.hp-feature__title {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.15rem, 1.6vw, 1.4rem) !important;
  line-height: 1.2 !important;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}
.hp-feature__desc {
  font-family: "Jost", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(15, 15, 16, 0.65);
  margin: 0;
}

/* ============================================================
   CONTACT PAGE — .hp-contact (form + direct methods, paper band)
   ============================================================ */
.hp-contact {
  background: var(--hp-paper);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
}
.hp-contact__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 860px) {
  .hp-contact__inner { grid-template-columns: 1fr; gap: 48px; }
}

/* Form */
.hp-contact__form { display: flex; flex-direction: column; gap: 28px; }
.hp-contact__honeypot {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.hp-contact__field { display: flex; flex-direction: column; gap: 10px; }
.hp-contact__field label {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.55);
  font-weight: 500;
}
.hp-contact__field input,
.hp-contact__field textarea {
  font-family: "Jost", sans-serif;
  font-size: 15.5px;
  color: var(--hp-ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(15, 15, 16, 0.22);
  padding: 10px 0;
  outline: none;
  width: 100%;
  resize: vertical;
  transition: border-bottom-color var(--hp-dur-fast) ease;
}
.hp-contact__field textarea { min-height: 120px; }
.hp-contact__field input::placeholder,
.hp-contact__field textarea::placeholder { color: rgba(15, 15, 16, 0.38); }
.hp-contact__field input:focus,
.hp-contact__field textarea:focus { border-bottom-color: var(--hp-gold); }

.hp-contact__submit {
  align-self: flex-start;
  margin-top: 8px;
  font-family: "Jost", sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  background: var(--hp-gold);
  color: var(--hp-ink);
  border: 0;
  padding: 18px 36px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  line-height: 1;
  transition:
    background-color var(--hp-dur-fast) ease,
    transform var(--hp-dur-fast) var(--hp-ease-out),
    box-shadow var(--hp-dur-fast) ease;
}
.hp-contact__submit::after {
  content: "\2192";
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: 16px;
  line-height: 1;
}
.hp-contact__submit:hover {
  transform: translateY(-2px);
  box-shadow: var(--hp-gold-glow);
}

.hp-contact__messages { font-family: "Jost", sans-serif; font-size: 14px; line-height: 1.5; }
.hp-contact__messages.success { color: #0E5E45; }
.hp-contact__messages.error   { color: #B23A3A; }

/* Aside — direct methods */
.hp-contact__aside { display: flex; flex-direction: column; gap: 36px; }
.hp-contact__methods { display: flex; flex-direction: column; }
.hp-contact__method {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 0;
  border-top: 1px solid rgba(15, 15, 16, 0.10);
  text-decoration: none;
}
.hp-contact__method:first-child { border-top: 0; padding-top: 0; }
.hp-contact__method-label {
  font-family: "Jost", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hp-gold);
  font-weight: 500;
}
.hp-contact__method-value {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  color: var(--hp-ink);
  letter-spacing: -0.005em;
  transition: color var(--hp-dur-fast) ease;
}
.hp-contact__method:hover .hp-contact__method-value { color: var(--hp-gold); }
.hp-contact__note {
  font-family: "Jost", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(15, 15, 16, 0.60);
  margin: 0;
}

/* Empty state */
.hp-empty-state {
  background: var(--hp-paper);
  padding: clamp(80px, 10vw, 140px) 0 clamp(60px, 8vw, 100px);
  text-align: center;
}
.hp-empty-state__inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hp-empty-state__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0;
  font-weight: 500;
}
.hp-empty-state__headline {
  font-family: "Gilda Display", "Times New Roman", serif !important;
  font-size: clamp(1.5rem, 2.6vw, 2.2rem) !important;
  line-height: 1.2 !important;
  color: var(--hp-ink) !important;
  margin: 0 !important;
  font-weight: 400 !important;
}
.hp-empty-state__body {
  font-family: "Jost", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(15, 15, 16, 0.62);
  margin: 0;
  max-width: 48ch;
}
.hp-empty-state__reset {
  appearance: none;
  background: transparent;
  border: 0;
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--hp-ink);
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  border-bottom: 1px solid var(--hp-gold);
  transition: color var(--hp-dur-fast) ease;
  margin-top: 8px;
}
.hp-empty-state__reset:hover { color: var(--hp-gold); }

/* ============================================================
   HEADER on editorial dark-hero pages (About, Off-plan, Services,
   Contact, Blog — anything whose first section is .hp-page-hero).
   The inner-page nav (.header__position.transparent-header) normally
   sits in NORMAL FLOW over the white body. On these pages we float it
   ABSOLUTELY over the dark hero (which then fills behind it) and switch
   the logo + links to white for contrast. Legacy inner pages (light
   banner heroes, no .hp-page-hero) are untouched — dark logo + links,
   nav in normal flow, as before.
   ============================================================ */
body:has(.hp-page-hero) .header__position.transparent-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  background: transparent;
}

/* Home nav fix: .header__absolute had z-index:2 — identical to the hero
   content (.hp-hero__content z-index:2) — so the hero, being later in the
   DOM, painted in front of the header on scroll. Lift the nav above it. */
.header__absolute {
  z-index: 30;
}

/* Whiten the (single) logo over the dark hero */
body:has(.hp-page-hero) .main__logo img {
  filter: brightness(0) invert(1);
}

/* White nav links on the dark hero */
body:has(.hp-page-hero) .main__header.is__home__four .navigation__menu--item__link {
  color: var(--hp-paper);
}
body:has(.hp-page-hero) .main__header.is__home__four .navigation__menu--item__link:hover {
  color: var(--hp-gold);
}

/* Mobile hamburger icon → white */
body:has(.hp-page-hero) .menu__btn img {
  filter: brightness(0) invert(1);
}

/* Sticky state: the template only gives a dark sticky background to
   is__home__video / is__home__two / is__color__white headers. The inner-page
   nav is is__color__theme / is__home__four, so on scroll it became a
   transparent fixed bar — white logo + links on the light sections behind it
   (white-on-white). Give the editorial pages' sticky nav a solid dark bar so
   the white logo + links stay readable while scrolling. */
body:has(.hp-page-hero) .header__function.is__sticky {
  background: var(--hp-ink) !important;
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.5);
}

/* ----------------------------------------------------------
   3. prefers-reduced-motion — disable transforms/transitions
      and force final state of revealed elements.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
  .hp-hero__content .hp-hero__eyebrow,
  .hp-hero__content .hp-hero__headline,
  .hp-hero__content .hp-hero__byline,
  .hp-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   OFF-PLAN DETAIL PAGE (innerpages/offplandetailed.blade.php)
   Editorial rebuild 2026-05-24. Reuses .hp-page-hero (image variant
   so the nav :has() whitening rules still fire), .hp-cta, .hp-reveal.
   New components: media hero, facts strip, prose blocks, gallery.
   ============================================================ */

/* --- Hero: full-bleed image variant of .hp-page-hero --- */
.hp-page-hero--media {
  padding: 0;
  min-height: clamp(520px, 78vh, 820px);
  display: flex;
  align-items: flex-end;
  background-image:
    linear-gradient(to top, rgba(15, 15, 16, 0.94) 0%, rgba(15, 15, 16, 0.55) 40%, rgba(15, 15, 16, 0.22) 72%, rgba(15, 15, 16, 0.42) 100%),
    var(--hp-detail-hero-img, none);
  background-size: cover;
  background-position: center;
}
.hp-detail-hero__inner {
  padding-top: clamp(140px, 17vw, 200px);
  padding-bottom: clamp(48px, 6vw, 88px);
  gap: clamp(16px, 2vw, 26px);
}
.hp-detail-hero__price {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(1.25rem, 2.4vw, 1.95rem);
  color: var(--hp-gold);
  margin: 0;
  letter-spacing: -0.01em;
}

/* --- Back link (sits at top of the facts strip) --- */
.hp-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(15, 15, 16, 0.55);
  text-decoration: none;
  font-weight: 500;
  margin-bottom: clamp(32px, 4vw, 56px);
  transition: color var(--hp-dur-fast) ease, gap var(--hp-dur-fast) var(--hp-ease-out);
}
.hp-detail-back:hover { color: var(--hp-gold); gap: 12px; }

/* --- Facts strip (cream) --- */
.hp-detail-facts {
  background: var(--hp-cream);
  color: var(--hp-ink);
  padding: clamp(56px, 6vw, 88px) 0;
}
.hp-detail-facts__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}
.hp-detail-facts__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(28px, 3vw, 48px) clamp(24px, 3vw, 56px);
}
.hp-detail-facts__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  padding-top: 18px;
}
.hp-detail-facts__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
}
.hp-detail-facts__label {
  font-family: "Jost", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hp-gold-deep);
  font-weight: 500;
}
.hp-detail-facts__value {
  font-family: "Gilda Display", "Times New Roman", serif;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
  line-height: 1.2;
  color: var(--hp-ink);
  letter-spacing: -0.01em;
}

/* --- Prose blocks (paper) — eyebrow column + body column --- */
.hp-detail-prose {
  background: var(--hp-paper);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
}
.hp-detail-prose__inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 5vw, 80px);
}
.hp-detail-prose__block {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 768px) {
  .hp-detail-prose__block { grid-template-columns: 1fr; gap: 16px; }
}
.hp-detail-prose__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0;
  font-weight: 500;
  position: relative;
  padding-left: 48px;
  padding-top: 8px;
}
.hp-detail-prose__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
}
.hp-detail-prose__body {
  font-family: "Jost", sans-serif;
  font-size: clamp(16px, 1.3vw, 18.5px);
  line-height: 1.7;
  color: rgba(15, 15, 16, 0.82);
  max-width: 64ch;
}

/* --- Gallery (cream) --- */
.hp-detail-gallery {
  background: var(--hp-cream);
  color: var(--hp-ink);
  padding: var(--hp-section-pad) 0;
}
.hp-detail-gallery__inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 72px);
}
.hp-detail-gallery__eyebrow {
  font-family: "Jost", sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--hp-gold);
  margin: 0 0 clamp(28px, 3vw, 44px);
  font-weight: 500;
  position: relative;
  padding-left: 48px;
}
.hp-detail-gallery__eyebrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 32px;
  height: 1px;
  background: var(--hp-gold);
  transform: translateY(-50%);
}
.hp-detail-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.5vw, 20px);
}
@media (max-width: 768px) { .hp-detail-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .hp-detail-gallery__grid { grid-template-columns: 1fr; } }
.hp-detail-gallery__item {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #14131a;
}
.hp-detail-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1000ms var(--hp-ease-luxe);
}
.hp-detail-gallery__item:hover img { transform: scale(1.05); }