/* ============================================================
   Prime Path Brokerage - Collage Hero
   Everything is scoped under .hero-v2 because styles.css already
   defines .hero, .hero-inner, .btn and .stars for the rest of the
   site, and those rules must keep working everywhere else.
   ============================================================ */

.hero-v2{
  --hv-bg:#0A0A0A;
  --hv-hairline:#333333;
  --hv-white:#FFFFFF;
  --hv-grey:#B7B5B2;
  --hv-ink:#16181D;
  --hv-orange:#EE5A22;
  --hv-orange-700:#C9450F;
  --hv-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hv-display:"Source Serif 4", Georgia, "Times New Roman", serif;
  --hv-script:"Sacramento", "Segoe Script", cursive;
  --hv-radius:18px;
  --hv-ring:0 0 0 3px #0A0A0A, 0 0 0 6px var(--hv-orange);
  --hv-ring-light:0 0 0 3px #FFFFFF, 0 0 0 6px var(--hv-orange);

  position:static;
  display:block;
  min-height:0;
  background:var(--hv-bg);
  color:var(--hv-grey);
  font-family:var(--hv-ui);
  /* .navbar is position:fixed at 96px tall, so the hero has to clear it
     itself — the old .hero-inner padding-top that used to do that is
     overridden below. */
  --hv-nav:96px;
  padding:calc(var(--hv-nav) + clamp(20px, 2.4vw, 44px)) clamp(20px, 3.5vw, 60px) clamp(52px, 6vw, 88px);
  padding-left:max(clamp(20px, 3.5vw, 60px), env(safe-area-inset-left));
  padding-right:max(clamp(20px, 3.5vw, 60px), env(safe-area-inset-right));
  overflow:hidden;
}
.hero-v2 *,.hero-v2 *::before,.hero-v2 *::after{box-sizing:border-box;}

.hero-v2 .hero-inner{
  max-width:1620px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(40px, 4.5vw, 60px);align-items:center;
  padding:0;
  /* .hero-inner in styles.css sets min-height:calc(100vh - 56px) and a
     150px top padding for the old video hero. Left in place they stretch
     this composition to the full viewport height on every laptop. */
  min-height:0;
}

/* ---------- copy ---------- */
.hero-v2 .hv-eyebrow{
  display:flex;align-items:center;gap:16px;margin:0 0 20px;flex-wrap:wrap;
  color:var(--hv-orange);
  font-size:14px;font-weight:700;letter-spacing:.02em;
}
.hero-v2 .hv-eyebrow::before{content:"";flex:none;width:44px;height:3px;border-radius:var(--radius-s);background:currentColor;}

.hero-v2 h1{
  /* 15ch broke this headline over five lines at desktop. A wider measure
     and a slightly smaller top size keep it to three. */
  margin:0 0 22px;max-width:20ch;
  font-family:var(--hv-display);font-weight:700;
  font-size:clamp(34px, 3.25vw, 54px);line-height:1.12;letter-spacing:-.02em;
  color:var(--hv-white);text-wrap:balance;
}
.hero-v2 h1 em{font-style:normal;color:var(--hv-orange);}

.hero-v2 .hv-lede{
  margin:0 0 30px;max-width:46ch;
  font-size:clamp(16px, 1.1vw, 18px);line-height:1.6;
  color:var(--hv-grey);text-wrap:pretty;
}

.hero-v2 .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px;max-width:640px;}
/* The hero's buttons are the shared .btn styles from styles.css; only the
   size steps up, so the page has one button system rather than a second one
   here. Colours come from .btn-primary / .btn-outline unchanged. */
.hero-v2 .hero-actions .btn{gap:14px;min-height:56px;padding:0 28px;font-size:16px;}
.hero-v2 .hero-actions .btn svg{flex:none;}

.hero-v2 .hv-points{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:20px 32px;}
.hero-v2 .hv-points li{display:flex;align-items:center;gap:14px;}
.hero-v2 .hv-points li span{
  display:grid;place-items:center;width:48px;height:48px;flex:none;
  border:1.5px solid var(--hv-orange);border-radius:50%;color:var(--hv-orange);
}
.hero-v2 .hv-points li p{margin:0;max-width:15ch;font-size:15px;line-height:1.35;color:var(--white);}

/* ---------- collage ---------- */
.hero-v2 .hv-collage{
  /* Scaling root. Everything inside is sized in em against this, so the
     collage shrinks as one composition instead of keeping desktop-sized
     labels and cards inside boxes that got narrower. */
  font-size:14px;
  display:grid;gap:14px;grid-template-columns:repeat(2, minmax(0,1fr));
}

.hero-v2 .hv-tile{
  position:relative;border-radius:var(--hv-radius);overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#22344F,#3E4A5C);
  box-shadow:0 26px 56px -26px rgba(0,0,0,.95);
}
.hero-v2 .hv-tile img,
.hero-v2 .hv-tile video{width:100%;height:100%;object-fit:cover;display:block;}
.hero-v2 .hv-tile[data-tone="coast"]{background:linear-gradient(165deg,#1E5F86,#37A4C4 55%,#D9C7A8);}
.hero-v2 .hv-tile[data-tone="interior"]{background:linear-gradient(160deg,#4A4238,#B9AA97);}
.hero-v2 .hv-tile[data-tone="sunset"]{background:linear-gradient(165deg,#2B3A63,#8C5C74 55%,#D89A6A);}
.hero-v2 .hv-tile::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,10,14,.4) 0%, rgba(8,10,14,0) 30%, rgba(8,10,14,0) 60%, rgba(8,10,14,.55) 100%);
}

.hero-v2 .hv-pin{
  position:absolute;z-index:2;top:1.07em;left:1.07em;
  display:inline-flex;align-items:center;gap:.57em;
  padding:.64em 1.07em .64em .86em;border-radius:999px;
  background:rgba(18,20,24,.66);backdrop-filter:blur(6px);
  color:var(--hv-white);font-size:1.036em;font-weight:500;white-space:nowrap;
}
.hero-v2 .hv-pin svg{flex:none;width:1.1em;height:1.1em;}

.hero-v2 .hv-counter{
  position:absolute;z-index:2;top:1.07em;right:1.07em;
  padding:.5em .93em;border-radius:999px;
  background:rgba(18,20,24,.5);backdrop-filter:blur(6px);
  color:var(--hv-white);font-size:.96em;font-variant-numeric:tabular-nums;
}

.hero-v2 .hv-script{
  position:absolute;z-index:2;left:1.86em;bottom:1.86em;margin:0;max-width:64%;
  font-family:var(--hv-script);font-size:2.86em;line-height:.96;
  color:var(--hv-white);text-shadow:0 2px 16px rgba(8,10,14,.6);
}
.hero-v2 .hv-script b{display:block;font-weight:400;}
.hero-v2 .hv-script b:nth-child(2){padding-left:.65em;}
.hero-v2 .hv-script span{display:block;width:2.4em;height:.1em;margin-top:.25em;margin-left:.5em;border-radius:var(--radius-s);background:var(--hv-orange);transform:rotate(-2deg);}

/* ---------- cards ---------- */
.hero-v2 .hv-card{
  border-radius:var(--radius-l);background:var(--hv-white);color:var(--hv-ink);
  padding:1.43em 1.71em;box-shadow:0 26px 56px -26px rgba(0,0,0,.95);
}
.hero-v2 .hv-card-approved{display:flex;align-items:flex-start;gap:1.14em;}
.hero-v2 .hv-card-shot{
  width:3.71em;height:3.71em;flex:none;
  border-radius:var(--radius-m);object-fit:cover;display:block;
  background:linear-gradient(150deg,#DCD8D3,#B9AA97);
}
.hero-v2 .hv-card-approved .hv-card-title{margin:0 0 .4em;font-size:1.43em;font-weight:700;line-height:1.2;max-width:11ch;color:var(--hv-ink);}
.hero-v2 .hv-card-approved p{margin:0;font-size:1.07em;color:var(--ink-muted);}
.hero-v2 .hv-card-approved strong{display:block;margin-top:.2em;font-size:1.47em;color:var(--hv-ink);font-variant-numeric:tabular-nums;}

.hero-v2 .hv-card-quote{display:flex;align-items:center;gap:1.29em;}
.hero-v2 .hv-avatar{
  width:4.43em;height:4.43em;flex:none;border-radius:50%;object-fit:cover;
  background:linear-gradient(150deg,#DCD8D3,#B9AA97);
}
.hero-v2 .hv-card-quote blockquote{margin:0 0 .5em;font-size:1.14em;font-weight:600;line-height:1.35;color:var(--hv-ink);}
.hero-v2 .hv-stars{display:flex;gap:.2em;margin-bottom:.5em;color:var(--hv-orange);}
.hero-v2 .hv-stars svg{width:1.21em;height:1.21em;}
.hero-v2 .hv-card-quote cite{font-style:normal;font-size:1.04em;color:var(--ink-muted);}
.hero-v2 .hv-card-quote cite b{color:var(--hv-ink);}

/* ---------- handwritten marks on the black ---------- */
.hero-v2 .hv-mark{
  margin:0;font-family:var(--hv-script);font-size:2.43em;line-height:.98;
  color:var(--hv-white);pointer-events:none;
}
.hero-v2 .hv-mark b{display:block;font-weight:400;}
.hero-v2 .hv-mark b:nth-child(2){padding-left:.53em;}
.hero-v2 .hv-mark b:nth-child(3){padding-left:1em;}
.hero-v2 .hv-mark span{display:block;width:2.6em;height:.12em;margin-top:.24em;border-radius:var(--radius-s);background:var(--hv-orange);transform:rotate(-3deg);}
.hero-v2 .hv-mark-arrow{color:var(--hv-orange);pointer-events:none;}

/* mobile stacking: the marks only work in the overlapping desktop layout */
.hero-v2 .hv-tile-main{grid-column:span 2;aspect-ratio:16/13;}
.hero-v2 .hv-tile-coast,
.hero-v2 .hv-tile-interior{aspect-ratio:4/3;}
.hero-v2 .hv-tile-sydney{grid-column:span 2;aspect-ratio:16/10;}
.hero-v2 .hv-card-approved,
.hero-v2 .hv-card-quote{grid-column:span 2;}
.hero-v2 .hv-mark,
.hero-v2 .hv-mark-arrow{display:none;}

/* ---------- desktop: overlapping collage ---------- */
@media (min-width: 1080px){
  /* Laptop-first split: the copy column keeps close to half the hero so the
     headline holds a comfortable measure, and the collage stops eating 60%
     of the viewport. Large desktops widen the collage back out below. */
  .hero-v2 .hero-inner{grid-template-columns:minmax(0, 47%) minmax(0,1fr);}

  .hero-v2 .hv-collage{
    position:relative;display:block;aspect-ratio:1145 / 710;
    container-type:inline-size;
    /* One knob for the whole composition: every pin, card and mark inside
       is em-based, so this shrinks them together with the tiles. */
    font-size:clamp(8.5px, 0.83vw, 14px);
  }
  .hero-v2 .hv-collage > *{position:absolute;}

  .hero-v2 .hv-tile-main     {left:4.8%;  top:6.3%;  width:38.9%; height:66.9%; aspect-ratio:auto; z-index:1;}
  .hero-v2 .hv-tile-coast    {left:44.1%; top:0;     width:30.1%; height:38.5%; aspect-ratio:auto; z-index:2;}
  .hero-v2 .hv-tile-sydney   {left:48.9%; top:45.1%; width:38%;   height:43%;   aspect-ratio:auto; z-index:3;}
  .hero-v2 .hv-card-approved {left:66.8%; top:27.9%; width:25.8%; z-index:4;}
  .hero-v2 .hv-tile-interior {left:0;     top:67.3%; width:25.5%; height:29.6%; aspect-ratio:auto; z-index:5;}
  .hero-v2 .hv-card-quote    {left:27.5%; top:74.6%; width:29.7%; z-index:6;}

  .hero-v2 .hv-mark,
  .hero-v2 .hv-mark-arrow{display:block;z-index:7;}
  /* Proportional to the collage width so the marks hold the same relative
     size — and the same clearances — at every desktop and laptop width. */
  .hero-v2 .hv-mark{font-size:3.79cqw;}
  .hero-v2 .hv-script{font-size:4.46cqw;}
  /* Only the black to the right of the tiles is free. Two marks fit there;
     the third and the arrow collided with the Sydney tile and each other. */
  .hero-v2 .hv-mark-live  {left:75.5%; top:5.5%;  transform:rotate(-4deg);}
  /* Anchored to the right edge so the longest line cannot run off the hero. */
  .hero-v2 .hv-mark-real  {left:auto;right:0;top:auto;bottom:2%;transform:rotate(-4deg);font-size:3.13cqw;text-align:right;}
  .hero-v2 .hv-mark-real b:nth-child(2),
  .hero-v2 .hv-mark-real b:nth-child(3){padding-left:0;padding-right:.6em;}
  .hero-v2 .hv-mark-real b:nth-child(3){padding-right:0;}
  .hero-v2 .hv-mark-real span{margin-left:auto;}
}

/* ---------- laptop / compact desktop ---------- */
@media (min-width: 1080px) and (max-width: 1599px){
  /* The two white cards carry the most text per pixel, so they are the
     first things to feel cramped as the collage narrows. Give them a
     slightly larger share of the composition here — same positions, same
     layering, just a little more room for the copy inside. */
  .hero-v2 .hv-card-approved{width:29.5%;}
  .hero-v2 .hv-card-quote{width:33%;}
  .hero-v2 .hv-card-approved .hv-card-title{max-width:14ch;}
  /* The avatar costs the quote card a third of its text width at this size. */
  .hero-v2 .hv-avatar{width:3.2em;height:3.2em;}
  .hero-v2 .hv-card-quote{gap:1em;}
}

/* ---------- large desktop: the original composition ---------- */
@media (min-width: 1600px){
  .hero-v2 .hero-inner{grid-template-columns:minmax(0, 41%) minmax(0,1fr);}
}

/* ---------- tablet landscape / small laptop ---------- */
@media (min-width: 700px) and (max-width: 1079px){
  /* Stacked, but the collage is capped so a full-width tablet doesn't turn
     the tiles into a metre of scrolling. */
  .hero-v2 .hv-collage{font-size:12px;max-width:620px;margin-inline:auto;}
  .hero-v2 .hv-tile-main{aspect-ratio:16/9;}
}

/* Short laptop screens (1366x768 and friends): trim the hero's own vertical
   padding so the composition sits closer to the fold without shrinking any
   of the content. */
@media (min-width: 1080px) and (max-height: 820px){
  .hero-v2{
    padding-top:calc(var(--hv-nav) + clamp(12px, 1.6vw, 26px));
    padding-bottom:clamp(36px, 3.8vw, 60px);
  }
}

/* ---------- mobile ---------- */
@media (max-width: 699px){
  .hero-v2 .hv-collage{font-size:12px;gap:12px;}
  .hero-v2 .hv-tile-main{aspect-ratio:4/3;}
  .hero-v2 .hero-actions .btn{width:100%;}
  .hero-v2 .hv-points li p{max-width:none;}
}

@media (prefers-reduced-motion: no-preference){
  .hero-v2 .hero-inner > *{animation:hv-rise .6s cubic-bezier(.2,.75,.3,1) both;}
  .hero-v2 .hero-inner > *:nth-child(2){animation-delay:.09s;}
}
@keyframes hv-rise{from{opacity:0;transform:translateY(18px);}}