/* ═══════════════════════════════════════════════════════════════════
 * hp-start.css — the /start/ paid-traffic landing page
 *
 * Scoped entirely to .start-* selectors and built on --h- tokens, so
 * loading it cannot alter any existing page. It reuses .listing-grid,
 * .listing-card and .section from the shared sheets rather than
 * redefining them — the cards on this page should be the same object
 * they are everywhere else on the site.
 *
 * Requires hp-tokens.css (loaded first sitewide).
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────────
 * Sized to its content, not to the viewport. A 100vh opener would push
 * the proof — the actual reason to trust him — below the fold, which on
 * a page bought with ad money is the one thing that must not happen. */
.start-hero{
  background:var(--h-navy);
  color:#fff;
  padding:56px 0 48px;
}
.start-hero-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:40px;
  align-items:center;
}
.start-hero .eyebrow{ color:var(--h-orange); }
.start-hero h1{
  font-family:var(--h-font-display);
  font-size:var(--h-step-4);
  line-height:var(--h-lh-tight);
  text-wrap:balance;
  margin:10px 0 16px;
  color:#fff;
}
.start-lede{
  font-size:var(--h-step-1);
  line-height:1.6;
  max-width:56ch;
  color:rgba(255,255,255,.86);
  margin:0 0 26px;
}
.start-actions{ display:flex; flex-wrap:wrap; gap:12px; }
/* This line used to force the outline button white — written when the
   hero was assumed to be dark. It is light. See the .page-start
   override at the foot of this file, which corrects it properly. */

.start-portrait img{
  display:block;
  width:100%;
  max-width:320px;
  height:auto;
  margin-left:auto;
  border-radius:12px;
}

/* ── Proof strip ────────────────────────────────────────────────────
 * Every figure here is a COUNT() of the cards below it. Deliberately
 * plain: a big number in a coloured tile invites the reader to take it
 * on faith, and the whole point is that they can check it. */
.start-proof{
  background:var(--h-paper);
  border-bottom:1px solid var(--h-line);
  padding:22px 0;
}
.start-proof-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:18px;
}
.start-proof-grid div{ display:flex; flex-direction:column; gap:2px; }
.start-proof-grid strong{
  font-family:var(--h-font-display);
  font-size:2rem;
  line-height:1;
  color:var(--h-navy);
  font-variant-numeric:tabular-nums;
}
.start-proof-grid span{
  font-size:.8125rem;
  color:var(--h-muted);
  letter-spacing:.2px;
}

.start-head-gap{ margin-top:44px; }

/* ── Card grids on this page ────────────────────────────────────────
 * The shared .listing-grid stretches its columns to fill the row, which
 * is right on a listings page with twenty results and wrong here: with
 * one active listing, a single card spanned the full 1,120px and the
 * photo rendered enormous — a layout that announces "we only have one".
 * auto-fill with a MAX track size keeps cards at a sane width and lets
 * the row end early instead of inflating to hide the gap. */
.start-cards .listing-grid{
  grid-template-columns:repeat(auto-fill,minmax(250px,300px));
  justify-content:start;
}

/* Which side he acted for. Sits under the address on every closed card
   because "sold by" over a buy-side deal misstates who did what. */
.start-side{
  margin-top:8px;
  font-size:.75rem;
  letter-spacing:.9px;
  text-transform:uppercase;
  color:var(--h-orange);
  font-weight:600;
}

/* ── Instagram ──────────────────────────────────────────────────────
 * A link, not four iframes. Costs ~200px and never renders blank. */
.start-ig-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.start-ig-inner h2{ margin:8px 0 8px; }
.start-ig-inner p{ margin:0; max-width:56ch; color:var(--h-ink); line-height:1.6; }

.start-form-wrap{ max-width:720px; }

@media (max-width:900px){
  .start-hero-grid{ grid-template-columns:1fr; gap:28px; }
  .start-portrait{ order:-1; }
  .start-portrait img{ max-width:200px; margin:0; }
  .start-ig-inner{ flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .start-hero{ padding:36px 0 32px; }
  .start-proof-grid strong{ font-size:1.6rem; }
}

/* ═══════════════════════════════════════════════════════════════════
 * Landing-page corrections
 *
 * The hero's own colours are defined at the top of this file and are
 * correct: a navy band with white type. They only LOOKED broken because
 * hp-tokens.css was never loaded, so var(--h-navy) resolved to nothing.
 * That is fixed in includes/head.php; nothing here repaints the hero.
 *
 * What remains are two things the shared sheets get wrong on a page
 * bought with ad money. Scoped to the body class, so neither can reach
 * any other page.
 * ═══════════════════════════════════════════════════════════════════ */

/* ── Nothing here may depend on JavaScript to be visible ────────────
 * r8-complete-frontend.js tags every .section with [data-r8-reveal],
 * which is opacity:0, and reveals it from an IntersectionObserver. On a
 * measured render the Instagram block and the CONTACT FORM were still at
 * opacity 0 after the full page had been scrolled — so the only
 * conversion point on the page can be invisible to someone we paid to
 * send here.
 *
 * A reveal animation is a nice-to-have whose failure mode is a blank
 * page. Switched off outright here: the content is visible from first
 * paint, which is also what the link preview, the scraper and the
 * visitor who scrolls fast all get. */
.page-start [data-r8-reveal],
.page-telugu-real-estate-agent [data-r8-reveal]{
  opacity:1 !important;
  transform:none !important;
}

/* ── Vertical rhythm ────────────────────────────────────────────────
 * The shared .section rule is clamp(78px,9vw,130px) top AND bottom, so
 * every join between two sections was 230px of nothing — measured 115px
 * a side at 1440px. That spacing suits a homepage someone browses; this
 * page is read top to bottom in one go, and its own file header sets a
 * target of under 3,000px. It measured 5,047px. */
.page-start .section,
.page-telugu-real-estate-agent .section{
  padding-top:clamp(44px,4.4vw,64px);
  padding-bottom:clamp(44px,4.4vw,64px);
}
.page-start .section + .section:not(.section-cream),
.page-telugu-real-estate-agent .section + .section:not(.section-cream){
  padding-top:0;
}

/* ── The secondary hero button, on the navy band ────────────────────
 * The hero IS dark, so a white outline button is correct here — I had
 * briefly "fixed" this to a light treatment while the missing tokens
 * were making the hero look white, which was solving the wrong problem.
 *
 * The !important is needed because main.css:1252 sets this button's
 * border and background with !important, and r8-complete-frontend.css
 * sets its text to dark ink for light sections — dark ink on navy is an
 * invisible label inside a visible pill. */
.page-start .start-actions .btn-outline{
  color:#fff !important;
  background:rgba(255,255,255,.07) !important;
  border:1px solid rgba(255,255,255,.5) !important;
}
.page-start .start-actions .btn-outline:hover{
  background:rgba(255,255,255,.15) !important;
}

/* ── Section heads inside the narrow form column ────────────────────
 * The shared .section-head is a two-column grid (1fr + up to 480px) for
 * a heading beside a button. Inside the 720px form wrapper the heading
 * column collapses to ~240px, which broke "Tell me what you're trying
 * to do." across four short lines. There is no button here, so it is
 * one column. */
.page-start .start-form-wrap .section-head{
  display:block !important;
}
.page-start .start-form-wrap .section-head h2{
  max-width:22ch;
}


/* ── The review rail needs a lane ───────────────────────────────────
 * Measured at 1440x900: the fixed rail's left edge landed at 1134 and
 * the portrait's right edge at 1310 — 176px of overlap, the panel
 * sitting across Harish's face. The rail is 272px plus a 40px gutter,
 * so the hero grid gives that width back on the right at exactly the
 * breakpoint where the rail appears. Below 1280 the rail is
 * display:none and the hero keeps its full width. */
/* ── The lane the review rail needs, measured not guessed ───────────
 *
 * A FIXED 332px was wrong in both directions. The rail is pinned 40px
 * from the VIEWPORT edge; the hero lives inside a CONTAINER that stops
 * growing at 1460px. So the overlap between them shrinks as the screen
 * widens — at 1920 the rail only reaches 82px into the container, and
 * reserving 332 left a 250px hole between Harish's shoulder and the
 * reviews. His note: "it could move right, a bit closer to testimonials."
 *
 * So compute it. container-right minus rail-left, plus a gutter:
 *
 *     container right = 50vw + min(730px, 50vw - 32px)
 *     rail left       = 100vw - 312px      (272 wide + 40 inset)
 *     lane            = the difference + 24px of air
 *
 * which reduces to the expression below. It yields 304px at 1280,
 * 304 at 1440, and 106 at 1920 — the hole closes as the screen grows,
 * instead of the portrait drifting further from the panel.
 *
 * max(0px, …) because past ~2100px the rail clears the container
 * entirely and the hero should give up nothing at all. */
@media (min-width:1280px){
  .page-start .start-hero-grid,
  .page-telugu-real-estate-agent .page-hero .container{
    padding-right:max(0px, calc(min(730px, 50vw - 32px) - 50vw + 336px));
    grid-template-columns:minmax(0,1fr) var(--hp-portrait-w, 340px);
  }
}


/* ── The portrait: bigger, and standing ON the hero's floor ──────────
 * Harish, against the homepage: "bigger and no gaps in the borders",
 * then "enlarge my photo and cover the bottom hero line".
 *
 * The gap was structural rather than a margin. The row was centred and
 * the hero carried bottom padding, so a cut-out figure — a person
 * standing, with nothing beneath them — floated with navy under their
 * feet. The homepage does the opposite: its portrait is bottom-aligned
 * and runs into the edge.
 *
 * So align the row to the bottom and pull the portrait down by exactly
 * the hero's own bottom padding. The value differs per page (48px on
 * /start/, 76px on the Telugu hero once main.css has had its say),
 * which is why it is written twice rather than shared. */
@media (min-width:1280px){
  .page-start .start-hero-grid,
  .page-telugu-real-estate-agent .page-hero .container{
    align-items:end;
  }
  .start-portrait{ align-self:end; }
  .start-portrait picture{ display:block; }
  .start-portrait img{
    display:block;
    width:100%;
    max-width:var(--hp-portrait-w, 340px);
    height:auto;
    margin-left:auto;

    /* Cut-outs are not cards. A radius on a transparent PNG rounds the
       corners of nothing and clips the shoulder that reaches them. */
    border-radius:0;

    /* NO FADE HERE.
       r47 masked the bottom 14% to soften the crop across the jacket.
       It measured flush — hero.bottom minus image.bottom was 0 — and
       still looked like a gap, because a fade to transparent over navy
       IS a gap to anyone looking at it. Harish reported it twice; the
       measurement was right and the treatment was wrong.
       The cut-out already runs to the bottom edge of its own frame, so
       flush geometry is flush appearance once nothing is fading it. */
  }

  /* ONE value, because the two heroes are now the same object. See the
     padding rule below: /start/ was 56/48 and the Telugu hero 140/80, so
     they were different heights AND needed different negative margins to
     sit flush — two chances to be wrong instead of one. */
  .start-portrait img{ margin-bottom:calc(-1 * var(--hp-hero-pad-b)); }

  .page-start, .page-telugu-real-estate-agent{ --hp-portrait-w:380px; }
}

@media (min-width:1600px){
  /* The lane shrinks as the viewport grows (see above) and the container
     keeps widening to 1460px. Both of those go to the portrait rather
     than to an ever-wider line of text. */
  .page-start, .page-telugu-real-estate-agent{ --hp-portrait-w:470px; }
}

/* ── The Telugu headline ────────────────────────────────────────────
 * main.css sizes .page-hero h1 with its own clamp, written for a hero
 * that had the whole container to itself. With a portrait beside it and
 * the review rail beside that, the copy column is about half what it
 * was, and the headline was breaking across four lines.
 *
 * Harish's call to reduce it. Brought onto --h-step-4, the same scale as
 * the /start/ headline — which is what these two pages should have been
 * sharing from the start. */
.page-telugu-real-estate-agent .page-hero h1{
  font-size:var(--h-step-4);
  line-height:var(--h-lh-tight);
  letter-spacing:var(--h-tracking-tight);
  text-wrap:balance;
}
.page-telugu-real-estate-agent .page-hero .start-hero-grid > div > p{
  max-width:52ch;
}


/* ── Latest Instagram card ──────────────────────────────────────────
 * Sits under the contact card in the Telugu sidebar — the empty column
 * Harish circled. A still and a link, never an iframe: see
 * includes/instagram-latest.php for why. */
.hp-ig-card{
  display:block;
  margin-top:18px;
  border-radius:14px;
  overflow:hidden;
  background:var(--h-white);
  border:1px solid var(--h-line);
  text-decoration:none;
  color:inherit;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hp-ig-card:hover{
  border-color:var(--h-line-strong);
  box-shadow:0 10px 28px rgba(7,20,46,.10);
  transform:translateY(-2px);
}

/* No aspect-ratio here — it is set inline per post from the real pixel
   dimensions, so a 9:16 reel is drawn 9:16 and a 4:5 photo 4:5. A fixed
   square box was cropping half of every vertical video away and scaling
   the survivor up, which is what "very bad quality" was. */
.hp-ig-shot{ position:relative; background:var(--h-paper); }
.hp-ig-shot img{
  display:block; width:100%; height:100%;
  /* cover, but with the box already at the image's ratio there is
     nothing left to crop — this only guards a rounding difference. */
  object-fit:cover;
}

/* The play badge marks a reel. It is drawn rather than an emoji so it is
   the same mark on every platform. */
.hp-ig-play{
  position:absolute; right:12px; bottom:12px;
  display:grid; place-items:center;
  width:38px; height:38px;
  border-radius:50%;
  background:rgba(7,20,46,.62);
  color:#fff;
  backdrop-filter:blur(3px);
}

.hp-ig-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:7px; }
.hp-ig-kicker{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.6875rem; font-weight:700;
  letter-spacing:var(--h-tracking-label); text-transform:uppercase;
  color:var(--h-purple);
}
.hp-ig-body p{
  margin:0;
  font-size:var(--h-step--1);
  line-height:1.5;
  color:var(--h-ink);
}
.hp-ig-body time{ font-size:.6875rem; color:var(--h-muted); }
.hp-ig-go{
  margin-top:2px;
  font-size:var(--h-step--1); font-weight:600;
  color:var(--h-blue);
}

@media (prefers-reduced-motion:reduce){
  .hp-ig-card{ transition:none; }
  .hp-ig-card:hover{ transform:none; }
}


/* ── Breathing room under a section heading ─────────────────────────
 * The shared .section-head sets h2 { margin:0 } on the assumption that
 * the grid's row-gap separates it from whatever follows. Inside the
 * narrow single-column form head there is no second row, so the gap
 * never applied and the lede sat directly on the headline's baseline —
 * the two lines touching under "Tell me what you're trying to do."
 *
 * Space between a heading and its own standfirst, on both pages. */
.page-start .section-head h1 + p,
.page-start .section-head h2 + p,
.page-start .section-head > div > h2 + p,
.page-telugu-real-estate-agent .section-head h2 + p,
.page-telugu-real-estate-agent .section-head > div > h2 + p{
  margin-top:14px;
  line-height:1.65;
}

/* The same join inside the hero, where the eyebrow, headline and lede
   stack directly. */
.page-start .start-hero h1,
.page-telugu-real-estate-agent .page-hero h1{
  margin-bottom:18px;
}


/* ── One hero colour across both landing pages ──────────────────────
 * The Telugu hero was on main.css's --hp-gradient-dark: navy bleeding
 * into purple across 135°, which put a lilac wash behind the review
 * panel on the right and made the two landing pages read as two
 * different sites. Harish: use the navy from /start/ here as well.
 *
 * !important because main.css sets .page-hero's background with
 * !important itself (line 1284), and this file loads before the cascade
 * would otherwise settle it.
 *
 * The concentric brand mark stays — it is the one bit of texture in a
 * flat band, and at 0.16 opacity it reads as embossing rather than as a
 * second colour. */
.page-telugu-real-estate-agent .page-hero{
  background:var(--h-navy) !important;
}

/* ── One hero geometry across both landing pages ────────────────────
 * Harish: "hero section height is not similar to harishproperties/start/".
 * It was not: /start/ is padded 56/48 and the Telugu hero came from
 * main.css at 140/80. Different heights, and — worse — different
 * distances for the portrait to travel to reach the floor, which is why
 * the flush value had to be written twice and got it wrong once.
 *
 * One custom property drives the padding AND the portrait's negative
 * margin, so "photo meets the bottom edge" is true by construction
 * rather than by a number that has to be maintained per page. */
.page-start, .page-telugu-real-estate-agent{
  --hp-hero-pad-t:56px;
  --hp-hero-pad-b:48px;
}
.page-start .start-hero,
.page-telugu-real-estate-agent .page-hero{
  padding-top:var(--hp-hero-pad-t) !important;
  padding-bottom:var(--hp-hero-pad-b) !important;
}
@media (max-width:640px){
  .page-start, .page-telugu-real-estate-agent{
    --hp-hero-pad-t:36px;
    --hp-hero-pad-b:32px;
  }
}


/* ── The pre-construction tab, lit like the review tiles ────────────
 * Harish: "For Pre-construction deals also the button should highlight
 * like testimonials."
 *
 * Same mechanism, same --hp-tst-angle keyframes from
 * hp-testimonials.css, so the two never drift out of step. The tab's own
 * border goes transparent for exactly the reason the tiles' did: a solid
 * border paints above the pseudo-element and hides the light behind it.
 *
 * Toned down against the tiles — this sits alone on a dark hero rather
 * than in a moving stack, and at tile intensity it pulses hard enough to
 * pull the eye off the headline. */
.hp-jump{
  position:relative;
  border-color:transparent;
  animation:hp-tst-light 3.4s linear infinite;
}
.hp-jump::before{
  content:'';
  position:absolute; inset:-1.5px;
  border-radius:999px;
  z-index:-1;
  background:conic-gradient(from var(--hp-tst-angle),
      transparent 0 64%,
      var(--h-gold)   73%,
      var(--h-orange) 79%,
      #fff8ee        82%,
      var(--h-orange) 85%,
      var(--h-purple) 90%,
      transparent 96%);
}
.hp-jump::after{
  content:'';
  position:absolute; inset:-7px;
  border-radius:999px;
  z-index:-2;
  background:conic-gradient(from var(--hp-tst-angle),
      transparent 0 64%,
      var(--h-gold)   74%,
      var(--h-orange) 82%,
      var(--h-purple) 90%,
      transparent 96%);
  filter:blur(9px);
  opacity:.5;
  transition:opacity .25s ease;
}
.hp-jump:hover::after{ opacity:.85; }

@media (prefers-reduced-motion:reduce){
  .hp-jump{ animation:none; border-color:rgba(200,163,90,.42); }
  .hp-jump::before, .hp-jump::after{ display:none; }
}


/* Instagram card: the reel whose cover art has not arrived yet. */
.hp-ig-shot-empty{
  display:grid; place-items:center;
  background:linear-gradient(160deg, var(--h-navy), #12225a);
}
.hp-ig-play-lg{
  position:static;
  width:62px; height:62px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
}


/* ── The Instagram card: short, and still uncropped ─────────────────
 *
 * Third attempt, so it is worth writing down what the constraint
 * actually is. Two things were asked for and they pull against each
 * other in a vertical card:
 *
 *   "make sure 16x9 or 9x16 comes here"  — do not crop the reel
 *   "too tall"  (twice)                  — do not be 500px in a sidebar
 *
 * A 9:16 frame at any readable width IS tall; capping the width to 240
 * still left 529px. So the card turned sideways instead. The thumbnail
 * keeps its true 9:16 shape at 96px wide, the caption sits beside it
 * rather than under it, and the whole thing is about 175px tall — a
 * sidebar item rather than a feature panel. Nothing is cropped. */
.hp-ig-card{
  display:flex;
  align-items:stretch;
  gap:0;
  max-width:none;
}
.hp-ig-card .hp-ig-shot{
  flex:0 0 96px;
  width:96px;
}
.hp-ig-card .hp-ig-body{
  flex:1 1 auto;
  justify-content:center;
  padding:12px 14px;
}
.hp-ig-card .hp-ig-play{ right:6px; bottom:6px; width:28px; height:28px; }
.hp-ig-card .hp-ig-play svg{ width:14px; height:14px; }
.hp-ig-play-lg{ width:34px; height:34px; }
.hp-ig-play-lg svg{ width:16px; height:16px; }

/* Under ~420px the sidebar is the full page width and there is room to
   let it breathe again. */
@media (max-width:420px){
  .hp-ig-card .hp-ig-shot{ flex-basis:84px; width:84px; }
}


/* Verdict pills in the bulk importer's review table. */
.admin-pill{ display:inline-block; padding:3px 9px; border-radius:999px;
  font-size:.6875rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
.admin-pill.is-sold{ background:rgba(47,125,93,.14); color:var(--h-ok); }
.admin-pill.is-active{ background:rgba(14,40,133,.12); color:var(--h-blue); }
.admin-pill.is-conditional{ background:rgba(180,118,42,.16); color:var(--h-warn); }


/* ── Status badges on current-listing cards ──────────────────────────
 *
 * The sold cards have carried a badge since they existed; the current
 * ones carried none, so an available listing and a conditionally sold
 * one looked identical. They are different offers and now read as
 * different objects.
 *
 * Colour does the work before the words are read, so the three states
 * are separated by hue rather than by weight: green for done, blue for
 * open, amber for in-between. The amber is the same value the bulk
 * importer uses for a conditional verdict, so the admin screen and the
 * public page describe the same state in the same colour.
 *
 * These are set on .lbadge, which already supplies the pill shape,
 * uppercase tracking and blur from r8-complete-frontend.css. Only the
 * ground and the ink are set here. */
.lbadge-sold   { background:#14532d; color:#fff; }
.lbadge-forsale{ background:var(--h-blue); color:#fff; }
.lbadge-cond   { background:#8a5316; color:#fff; }
/* r58 — rentals. Distinct from the blue "For sale" so the two read as
   different offers at a glance, not as a colour variation. */
.lbadge-forlease{ background:#0F5257; color:#fff; }

/* The badge sits over the photograph, where a fast scroll can miss it.
   "Conditionally sold" is trade language to a first-time buyer, so the
   card also says what it means in the reading flow — amber, quiet, and
   under the address rather than shouting beside the price. */
.start-cond-note{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(180,118,42,.14);
  color:#8a5316;
  font-size:.75rem;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.1px;
}