with no semantics, so display:contents costs
nothing in the accessibility tree. */
.start-hero-copy { display: contents !important; }
/* Descendant selectors, NOT child. display:contents changes the box
tree, not the DOM tree — .start-hero-copy > h1 is still the child of
the copy div as far as a selector is concerned, so `>` from the grid
matches nothing and every item auto-places instead. That put the
headline in the portrait's column on the first build. */
.start-hero-grid .eyebrow,
.page-hero .container .eyebrow { grid-area: eyebrow; margin-bottom: 8px; }
.start-hero-grid h1,
.page-hero .container h1 { grid-area: head; margin: 0 0 10px; }
.start-lede { grid-area: lede; margin: 0 0 10px !important; }
.start-cred { grid-area: cred; }
.start-actions { grid-area: acts; }
.hp-jump { grid-area: jump; }
.start-portrait {
grid-area: photo;
order: 0 !important;
align-self: start !important;
justify-self: end;
width: var(--m-portrait);
margin: 0 calc(var(--m-bleed) * -1) 0 0 !important;
pointer-events: none; /* never intercepts a tap */
}
.start-portrait picture { display: block; }
.start-portrait img {
display: block;
width: 100% !important;
max-width: none !important;
height: auto;
/* The mobile source is 480x499. Declaring it here reserves the right
box before the image lands — without it the browser reserves the
DESKTOP ratio from the width/height attributes and the headline
jumps when the bust paints. */
aspect-ratio: 480 / 499;
margin: 0 !important;
border-radius: 0;
/* The bust crop ends in a straight cut across the jacket. Over a
flat navy that reads as a crop; a short dissolve at the very
bottom reads as depth instead. Safe here in a way it was NOT safe
under the old full-length portrait: this fades to transparent
over whatever the hero's own background is — flat navy on
/start/, the ring pattern on the Telugu page — so it cannot open
the visible gap that a fade over a mismatched ground did. */
-webkit-mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
mask-image: linear-gradient(to bottom, #000 0 84%, transparent 100%);
}
/* No scrim, and deliberately so. Lettering and photograph are in
SEPARATE grid columns — nothing is ever set over his face, so there
is nothing to darken. A gradient here would also overwrite the
Telugu page's own hero background (the concentric rings), which is
not this release's to remove. */
.start-lede {
font-size: 0.97rem !important;
line-height: 1.5 !important;
font-style: normal !important;
font-family: inherit !important;
}
/* The identification line. font-style and family are forced because
the Telugu page sets an italic serif on hero paragraphs, and a
brokerage name set in italic display type is neither legible at
12.5px nor appropriate for what is a TRESA disclosure. */
.start-cred {
margin: 0 0 12px !important;
font-size: 0.781rem !important;
line-height: 1.45 !important;
font-style: normal !important;
font-family: inherit !important;
color: rgba(240, 233, 224, .72);
}
.start-cred b { color: #fff; font-weight: 700; }
.section-cream .start-cred { color: var(--h-muted, #667084); }
.section-cream .start-cred b { color: var(--h-navy, #07142e); }
/* Two compact links, not two full-width slabs. */
/* Full width, so the two links sit SIDE BY SIDE. Kept inside the
text column they had ~176px to share, which is not enough for two
labels, so they stacked — and a stacked pair under a 190px portrait
leaves exactly the empty block this release exists to remove. */
.start-actions {
display: flex !important;
flex-wrap: wrap;
gap: 8px;
margin: 12px 0 0 !important;
}
.start-actions .btn {
flex: 0 1 auto;
min-height: var(--m-tap);
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px !important;
font-size: 0.875rem !important;
border-radius: 12px;
}
/* .btn-outline is drawn for a light ground: navy text on a navy hero
is invisible, which is what "Ask a question" was. Both landing
heroes are dark, so the outline variant is inverted here. */
.start-hero .start-actions .btn-outline,
.page-hero .start-actions .btn-outline {
color: #fff !important;
border-color: rgba(255, 255, 255, .38) !important;
background: rgba(255, 255, 255, .06) !important;
}
}
/* ── The pre-construction row ────────────────────────────────────────
Was: a capsule with a NEW flag, a subtitle, and the same conic
running light the review tiles use — which at 390px was the brightest
object in the hero and bled across the portrait beside it.
Now: one row, 48px, square-ish corners, a single gold hairline. It is
a navigation control, and it should look like the third most
important thing in the hero, because it is. */
@media (max-width: 900px) {
.hp-jump {
display: flex !important;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-height: 48px;
margin: 14px 0 0 !important;
padding: 10px 14px !important;
border-radius: 12px !important;
background: rgba(200, 163, 90, .12) !important;
border: 1px solid rgba(200, 163, 90, .38) !important;
animation: none !important; /* the running light, off */
}
.hp-jump::before, .hp-jump::after { display: none !important; content: none !important; }
.hp-jump-flag { display: none !important; } /* the NEW badge */
.hp-jump-label {
font-size: 0.906rem !important;
font-weight: 600;
line-height: 1.3;
}
.hp-jump-arrow { flex: 0 0 auto; }
/* Bilingual, on the Telugu page: two deliberate lines in one control.
The Telugu line does not wrap — a conjunct broken across lines is
not a line break, it is a different word — so it is nowrap and the
label is short enough to hold at 360px. If it ever grows, shrink
the font, do not let it wrap. */
.hp-jump-lines { display: grid; gap: 2px; min-width: 0; }
.hp-jump-bi { min-height: 60px; align-items: center; }
.hp-jump-te {
white-space: nowrap;
font-size: 0.938rem !important;
line-height: 1.75 !important; /* room for vattulu */
color: #fff;
}
.hp-jump-en {
white-space: nowrap;
font-size: 0.781rem !important;
font-weight: 500;
letter-spacing: .01em;
color: rgba(240, 233, 224, .74);
}
}
@media (max-width: 400px) {
/* The clamp above already narrows the portrait here; this is only the
type. */
.start-lede { font-size: 0.938rem !important; }
.hp-jump-te { font-size: 0.875rem !important; }
.hp-jump-en { font-size: 0.719rem !important; }
}
/* ── Enlarged text ───────────────────────────────────────────────────
The breakpoint below is in em, not px, and that is the whole point: an
em query is measured against the ROOT FONT SIZE, so it fires when the
reader has enlarged text even though the viewport has not changed
width. At the default 16px, 21em is 336px — narrower than any phone
in use, so this never fires by accident. At a 390px viewport it fires
once the root passes about 18.5px, which is roughly a 116% text
setting.
When it fires, side-by-side stops being a composition and becomes two
unreadable strips, so the hero unstacks into one column: heading,
paragraph, portrait, controls. The portrait shrinks and moves right
rather than disappearing. */
@media (max-width: 21em) {
.start-hero-grid,
.page-hero .container {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-areas:
"eyebrow"
"head"
"lede"
"photo"
"cred"
"acts"
"jump" !important;
}
.start-portrait {
justify-self: end;
width: 150px;
margin: 4px calc(var(--m-bleed) * -1) 10px 0 !important;
}
.start-actions .btn { flex: 1 1 100%; }
}
/* ═══════════════════════════════════════════════════════════════════
6. THE SECTION JUMP BAR (markup: includes/section-nav.php)
/start/ is seven sections and, before this file, 14,025px. A visitor
who wants the price list should not have to scroll past everything
else to find it. One scrollable row of chips, directly under the
hero, and it scrolls away with the page rather than sticking — a
second sticky bar on top of the header and the contact bar would be
three fixed things on a 390px screen.
═══════════════════════════════════════════════════════════════════ */
.hp-secnav { display: none; }
/* The identification line, at every width. It is a TRESA disclosure —
name, title, registered brokerage — so it is set quietly but never
smaller than it needs to be to read. Without this base rule it
inherits the page's paragraph size, which on the Telugu page is an
18.9px italic serif: the wrong voice for a licence statement. */
.start-cred {
margin: 0 0 14px;
font-size: 0.875rem;
line-height: 1.5;
font-style: normal;
font-family: inherit;
color: var(--h-muted, #667084);
}
.start-hero .start-cred, .page-hero .start-cred {
color: rgba(240, 233, 224, .72);
/* Repeated at two-class specificity because hp-start.css sizes hero
paragraphs at that weight — on the Telugu page the credential line
was coming out at 18.9px, larger than the sentence above it. */
font-size: 0.875rem;
line-height: 1.5;
font-style: normal;
font-family: inherit;
}
.start-cred b { font-weight: 700; color: inherit; }
.start-hero .start-cred b, .page-hero .start-cred b { color: #fff; }
@media (max-width: 900px) {
.hp-secnav {
display: block;
border-bottom: 1px solid var(--h-line, rgba(7, 20, 46, .13));
background: var(--h-paper, #fbf8f3);
}
.hp-secnav-scroll {
display: flex;
gap: 8px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
padding: 10px var(--m-gutter);
-webkit-overflow-scrolling: touch;
}
.hp-secnav-scroll::-webkit-scrollbar { display: none; }
.hp-secnav a {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
min-height: var(--m-tap, 44px);
padding: 0 14px;
border: 1px solid var(--h-line, rgba(7, 20, 46, .13));
border-radius: 999px;
background: #fff;
color: var(--h-navy, #07142e);
font-size: 13.5px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
}
.hp-secnav a:active { background: var(--h-navy, #07142e); color: #fff; }
}
/* Anchors land under nothing — there is no sticky header on these two
pages — but a little breathing room above the heading reads better
than the section starting hard against the top edge. */
@media (max-width: 900px) {
#results, #available, #precon, #talk, #work { scroll-margin-top: 12px; }
}
/* ═══════════════════════════════════════════════════════════════════
7. PROPERTY CARDS — sold and current, one component
Full-bleed photo above 120px of text meant a card was 480px tall and
three of them were a screen and a half. On a phone the photograph is
confirmation, not the message: the address, the price and WHICH SIDE
Harish acted for are the message.
So the card turns on its side. .listing-media becomes display:contents
so its children join the card's own grid — that is what lets the
status badge move out of the photo and sit at the top of the text
column, where "SOLD CONDITIONALLY" is readable instead of being an
8px overlay on a 116px thumbnail.
┌────────┬──────────────────┐
│ │ FOR SALE │ ← badge, its own row
│ thumb ├──────────────────┤
│ 116px │ $1,099,000 │
│ │ 3 Armilia Place │
│ │ Whitby · Brooklin
│ │ Listed and sold…│
└────────┴──────────────────┘
All four distinctions the brief asks for survive intact, because
none of them was ever in the photo: "For sale" and "Sold
conditionally" are the badge (includes/active-card.php), "Buyer
represented by Harish" and "Listed and sold by Harish" are the
.start-side line (includes/sold-card.php).
═══════════════════════════════════════════════════════════════════ */
/* The row layout starts at 900, not 720: a 768px tablet showing one
full-bleed 400px card per row is the same waste as a phone showing
one 480px card, and the row simply looks better with a bigger
thumbnail. Only the thumbnail size changes between the two. */
@media (max-width: 900px) {
.listing-grid { grid-template-columns: 1fr !important; gap: var(--m-gap) !important; }
.listing-card {
display: grid !important;
grid-template-columns: 116px minmax(0, 1fr);
grid-template-areas:
"thumb badge"
"thumb body";
grid-template-rows: auto 1fr;
align-items: start;
border-radius: var(--m-radius) !important;
overflow: hidden;
}
.listing-card .listing-media {
display: contents !important;
position: static !important;
}
.listing-card .listing-media > img,
.listing-card .listing-noimg {
grid-area: thumb;
width: 116px;
height: 100%;
min-height: 116px;
object-fit: cover;
display: block;
border-radius: 0;
}
.listing-card .listing-noimg {
display: grid;
place-items: center;
padding: 8px;
font-size: 11px;
line-height: 1.3;
text-align: center;
}
.listing-card .listing-badges {
grid-area: badge;
position: static !important;
top: auto !important; left: auto !important; right: auto !important;
padding: 12px 12px 0;
gap: 6px;
}
.listing-card .lbadge {
font-size: 9.5px !important;
padding: 5px 8px !important;
letter-spacing: .04em;
}
.listing-card .listing-body {
grid-area: body;
padding: 6px 12px 12px !important;
min-width: 0;
}
.listing-price { font-size: 21px !important; margin-bottom: 3px !important; }
.listing-body > strong { font-size: 15.5px !important; line-height: 1.3 !important; }
.listing-body > small { font-size: var(--m-meta) !important; }
.listing-meta {
margin-top: 8px !important;
padding-top: 8px !important;
gap: 12px !important;
font-size: 13px !important;
}
.hp-performance-pill {
margin-top: 8px !important;
font-size: 10px !important;
padding: 6px 9px !important;
}
.start-side { font-size: 11px !important; margin-top: 6px; }
.start-cond-note { font-size: 12px !important; padding: 4px 9px !important; }
}
@media (max-width: 400px) {
.listing-card { grid-template-columns: 100px minmax(0, 1fr); }
.listing-card .listing-media > img,
.listing-card .listing-noimg { width: 100px; min-height: 108px; }
.listing-price { font-size: 19px !important; }
}
/* The counted proof strip. Four or five figures across a phone is a
grid of two, not a column of five. */
@media (max-width: 720px) {
.start-proof { padding: 14px 0 !important; }
.start-proof-grid {
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important;
gap: 10px 14px !important;
}
.start-proof-grid strong { font-size: 1.45rem !important; }
.start-proof-grid span { font-size: 12px !important; line-height: 1.3; }
}
/* ═══════════════════════════════════════════════════════════════════
8. PRE-CONSTRUCTION — the same component on both pages
Seven cities, 5,480px, because each card led with a full-width 8:5
photograph. The photograph is the least informative thing on the
card: every one of them is an illustration, and each is labelled as
one.
Turned on its side with a 112×70 thumbnail — which is exactly 8:5, so
the roof and the garage are still in frame and nothing is cropped
out. The artist's-concept credit stays attached to the image: the
becomes display:contents so the can sit
immediately under the thumbnail rather than being scaled down to
illegibility on top of it.
PRICES DO NOT COLLAPSE AND DO NOT HIDE. The brief is explicit and so
is the compliance position: all four home types stay visible, every
"on request" stays visible, and the enquiry button stays visible
without expanding anything. A condo entry price must never be able to
read as a detached price, so the type label and its figure stay on
one row together at every width. Only the area description — the
longest and least decisive element — is allowed to be a summary.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.precon-grid { grid-template-columns: 1fr !important; gap: var(--m-gap) !important; }
}
@media (max-width: 900px) {
.precon-card {
display: grid !important;
grid-template-columns: 112px minmax(0, 1fr);
grid-template-areas:
"photo title"
"credit title"
"types types"
"blurb blurb"
"proj proj"
"cta cta";
grid-template-rows: auto auto auto auto auto auto;
column-gap: 12px;
row-gap: 0;
padding: var(--m-card) !important;
border-radius: var(--m-radius);
align-items: start;
}
/* The figure dissolves so its two children can be placed separately.
.precon-photo-drawn (the inline SVG fallback, used when a city has
no licensed image) has no caption, so it is placed as one piece. */
figure.precon-photo { display: contents !important; }
.precon-photo > img {
grid-area: photo;
width: 112px;
height: 70px;
object-fit: cover;
border-radius: 10px;
display: block;
}
.precon-photo > figcaption {
grid-area: credit;
position: static !important;
width: 112px;
margin-top: 5px;
padding: 0 !important;
background: none !important;
color: var(--h-muted, #667084) !important;
font-size: 9.5px !important;
line-height: 1.25 !important;
text-align: left !important;
}
.precon-photo.precon-photo-drawn {
grid-area: photo;
width: 112px;
height: 70px;
overflow: hidden;
border-radius: 10px;
}
.precon-photo.precon-photo-drawn svg { width: 100%; height: 100%; display: block; }
.precon-card h3 {
grid-area: title;
align-self: start;
margin: 0 !important;
font-size: var(--m-h3) !important;
line-height: 1.25 !important;
}
/* The price table. Label left, figure right, one row each, four rows
always — never two columns, because a two-column price grid on a
phone is how a condo figure ends up looking like a detached one. */
.precon-types {
grid-area: types;
margin: 12px 0 0 !important;
display: block !important;
}
.precon-type {
display: flex !important;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 5px 0 !important;
border-bottom: 1px solid var(--h-line, rgba(7, 20, 46, .1));
}
.precon-type:last-child { border-bottom: 0; }
.precon-type dt { font-size: 13px !important; }
.precon-type dd { margin: 0 !important; font-size: 13px !important; text-align: right; white-space: nowrap; }
.precon-type dd strong { font-size: 15px !important; }
.precon-from { font-size: 10.5px !important; }
/* The description is the one element on the card that summarises.
Three lines, and the rest opens on tap — the full sentence stays in
the DOM, so search engines and screen readers get all of it either
way. Prices never do this: they are the reason the card exists. */
.precon-blurb {
grid-area: blurb;
margin: 9px 0 0 !important;
font-size: var(--m-meta) !important;
line-height: 1.45 !important;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.precon-card:focus-within .precon-blurb,
.precon-card:hover .precon-blurb { -webkit-line-clamp: unset; overflow: visible; }
.precon-projects {
grid-area: proj;
margin: 8px 0 0 !important;
font-size: 12.5px !important;
line-height: 1.35;
}
.precon-projects li { margin: 0 0 4px !important; }
.precon-interest {
grid-area: cta;
margin-top: 12px !important;
min-height: var(--m-tap);
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 100%;
padding: 10px 14px !important;
font-size: 14.5px !important;
text-align: center;
}
.precon-cta {
margin-top: 18px;
padding: var(--m-card) !important;
}
.precon-cta .btn { width: 100%; min-height: var(--m-tap); display: inline-flex; align-items: center; justify-content: center; }
.precon-legal { font-size: 11.5px !important; line-height: 1.5 !important; margin-top: 14px !important; }
}
/* The description is the one element allowed to summarise, and only
below 400px where the card is genuinely tight. Line clamp, not
display:none — the full sentence stays in the DOM for search engines
and for anyone reading with a screen reader, and it opens on tap
because .precon-card:focus-within releases the clamp. */
@media (max-width: 400px) {
.precon-blurb { -webkit-line-clamp: 2; }
.precon-card { column-gap: 10px; }
.precon-photo > img,
.precon-photo > figcaption,
.precon-photo.precon-photo-drawn { width: 104px; }
.precon-photo > img, .precon-photo.precon-photo-drawn { height: 65px; } /* 8:5 held */
.precon-card { grid-template-columns: 104px minmax(0, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════
9. REVIEWS
The reel keeps rolling — it is the thing Harish asked for and it
works — but a 284px tile on a 390px screen leaves 53px of the next
one showing, which reads as breakage rather than as a hint. Narrower
tiles, so two edges are visible and the row obviously continues.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* ── The reel becomes a carousel ─────────────────────────────────
A continuous marquee is fine on a wide screen, where there is hover
to pause it and three tiles visible at once. On a 390px screen it
is a review sliding past faster than it can be read, with no hover
to stop it.
So on mobile the animation stops and the track becomes a scroll-
snap carousel: one readable card, with the edge of the next one
showing, which is how a phone says "swipe me". hp-mobile.js adds a
gentle 7-second auto-advance and a real pause button on top; both
are absent under prefers-reduced-motion, and the carousel is still
swipeable with no script at all. */
.hp-tst-rail { padding: 12px 0 14px !important; }
.hp-tst-strip { padding: 14px 0 !important; }
.hp-tst-rail-track {
height: auto !important;
min-height: 0 !important;
overflow-x: auto !important;
overflow-y: hidden;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 11px var(--m-gutter) 11px;
margin: -11px 0;
/* The end-fade is a desktop device; on a carousel it dims the card
you are reading. */
-webkit-mask-image: none !important;
mask-image: none !important;
}
.hp-tst-rail-track::-webkit-scrollbar { display: none; }
.hp-tst-reel {
animation: none !important;
transform: none !important;
gap: 12px;
}
/* The script wraps the tiles in two .hp-tst-set blocks for the
marquee. Dissolving them puts the tiles back on the scroll line so
each one can be a snap target. */
.hp-tst-set { display: contents !important; }
.hp-tst-rail-track .hp-tst-tile,
.hp-tst-tile {
/* One card, with a real peek of the next — about 70px at 390px. */
width: min(300px, 76vw) !important;
flex: 0 0 auto;
height: auto !important;
padding: 13px 14px !important;
scroll-snap-align: center;
scroll-snap-stop: always;
}
.hp-tst-tile blockquote, .hp-tst-tile p { font-size: 14px !important; line-height: 1.5 !important; }
.hp-tst-name { font-size: 13px !important; }
.hp-tst-meta { font-size: 11px !important; }
.hp-tst-stars { font-size: 12px !important; }
/* The rating line, and the pause control beside it. */
.hp-tst-rail-head {
display: flex !important;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
padding: 0 var(--m-gutter) 8px;
}
.hp-tst-rail-score { flex: 1 1 auto; }
.hp-tst-score { font-size: 20px !important; }
.hp-tst-count { font-size: 12.5px !important; }
.hp-tst-rail-src {
flex: 1 1 100%;
order: 3;
min-height: 0;
font-size: 11.5px !important;
line-height: 1.4;
}
.hp-tst-toggle {
flex: 0 0 auto;
min-height: 32px;
padding: 5px 11px;
border-radius: 999px;
border: 1px solid rgba(200, 163, 90, .42);
background: rgba(200, 163, 90, .12);
color: inherit;
font: inherit;
font-size: 11.5px;
font-weight: 600;
letter-spacing: .02em;
cursor: pointer;
}
.hp-tst-toggle[hidden] { display: none; }
/* Reviews follow the hero immediately — 14px, not a section gap. */
.start-hero + .hp-tst-rail,
.page-hero + .hp-tst-rail,
.start-hero + * > .hp-tst-rail,
.page-hero + * > .hp-tst-rail { margin-top: 14px !important; }
}
@media (max-width: 720px) {
/* Homepage quote cards. */
.testimonial-grid { grid-template-columns: 1fr !important; gap: var(--m-gap) !important; }
.quote { padding: var(--m-card) !important; }
.quote p { font-size: 14.5px !important; line-height: 1.5 !important; }
}
/* ═══════════════════════════════════════════════════════════════════
10. HOMEPAGE SECTIONS
Scannable, not shrunken. Two columns only where the content is a
label and a number; one column wherever a card carries a sentence.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
/* Trust strip — label/value pairs, so two across is right. */
.trust-strip { padding: 14px 0 !important; }
.trust-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px 14px !important;
}
.trust-item small { font-size: 11px !important; }
.trust-item strong { font-size: 15px !important; line-height: 1.2 !important; }
/* Discovery shortcuts — two across, they are one line each. */
.signal-strip { padding: 16px 0 22px !important; }
.signal-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.signal-card {
min-height: 0 !important;
padding: 14px !important;
border-radius: var(--m-radius) !important;
}
.signal-card:before { display: none; }
.signal-card h3, .signal-card strong { font-size: 15px !important; }
.signal-card p, .signal-card small { font-size: 12px !important; line-height: 1.4 !important; }
/* Market Lens, services, strategy, process — one column each: every
one of these cards carries a sentence, and a sentence in a 170px
column is four words a line. */
.lens-grid, .services-grid, .strategy-grid, .process-grid, .community-grid {
grid-template-columns: 1fr !important;
gap: var(--m-gap) !important;
}
.service-card, .process-step, .lens-card {
min-height: 0 !important;
padding: var(--m-card) !important;
border-radius: var(--m-radius) !important;
}
.service-card h3, .strategy-card h3, .process-step h3,
.strategy-content h3 { font-size: var(--m-h3) !important; line-height: 1.25 !important; }
.service-card p, .strategy-card p, .process-step p { font-size: var(--m-meta) !important; line-height: 1.5 !important; }
.service-icon { margin-bottom: 12px !important; width: 40px; height: 40px; }
/* r7-sprint7-polish holds the padding at two-class specificity with
!important, so a one-class rule cannot reach it however many
!importants it carries. Matched selector, matched weight. */
.hp-premium-services .service-card {
min-height: 0 !important;
padding: var(--m-card) !important;
}
.hp-premium-services .service-card p {
line-height: 1.5 !important;
margin-bottom: 10px !important;
}
.hp-premium-services .service-card h3 { margin-bottom: 6px !important; }
/* Decoration that costs layout: a 220px radial blob positioned off
the corner of a card that is now 150px tall. */
.service-card:after { display: none !important; }
/* ── The strategy cards ─────────────────────────────────────────
These are 470px tall by construction, not by content: the "01"
badge carries margin-bottom:140px to push the copy to the foot of
a background photograph. Zeroing that margin and the min-height
together collapsed the card to a 14px bar, because the photograph
is a background-image with nothing to give it height.
So the height is reduced deliberately rather than removed — enough
for the image to read as an image, and the badge margin comes down
in step with it. Change one of these two and you must change the
other. */
.strategy-card {
min-height: 178px !important;
border-radius: var(--m-radius) !important;
}
.strategy-content { padding: 14px !important; }
.strategy-content > span {
width: 32px !important; height: 32px !important;
margin-bottom: 42px !important;
font-size: 11px !important;
}
.strategy-content b { font-size: 13px; }
/* Same shape of problem: a two-panel block whose media half is held
open by min-height alone. */
.selling-panel { min-height: 0 !important; }
.selling-media { min-height: 170px !important; }
.selling-copy { padding: var(--m-card) !important; }
.checks { gap: 7px !important; margin: 12px 0 18px !important; }
.checks span { font-size: 11.5px !important; padding: 6px 10px !important; }
.selling-copy .btn { align-self: stretch; min-height: var(--m-tap); display: inline-flex; align-items: center; justify-content: center; }
/* Communities: the card was 410px tall, most of it photograph. */
.community-card { height: auto !important; min-height: 0 !important; }
.community-card img, .community-media { height: 148px !important; object-fit: cover; }
.community-body { padding: var(--m-card) !important; }
/* ── Numbered sequences ─────────────────────────────────────────
The Market Lens points and the four process steps are the same
shape of content: a number, a two-word title, one sentence. As
full-width tiles they were 250px each and the numbering — which is
the only thing carrying the order — was the largest element on the
card.
Both become rows: the number keeps its job as an index, at index
size, and the sentence gets the width. The numbering is NOT
decoration here; these really are ordered, which is why the marker
stays rather than being dropped for a bullet. */
.lens-grid, .process-grid { gap: 10px !important; }
.lens-card, .process-grid > article {
display: grid !important;
grid-template-columns: 30px minmax(0, 1fr);
column-gap: 12px;
row-gap: 2px;
align-items: start;
min-height: 0 !important;
padding: 12px 14px !important;
border-radius: var(--m-radius) !important;
}
.lens-card > .lens-number, .process-grid > article > span {
grid-column: 1;
grid-row: 1 / span 2;
font-size: 15px !important;
line-height: 1.4 !important;
opacity: .55;
font-variant-numeric: tabular-nums;
margin: 0 !important;
}
.lens-card > h3, .process-grid > article > h3 {
grid-column: 2;
font-size: 16px !important;
line-height: 1.3 !important;
margin: 0 !important;
}
.lens-card > p, .process-grid > article > p {
grid-column: 2;
font-size: var(--m-meta) !important;
line-height: 1.45 !important;
margin: 0 !important;
}
.process-grid > article + article,
.lens-card + .lens-card { border-top: 0; }
/* The Market Lens call-out under them. */
.lens-callout {
display: block !important;
padding: var(--m-card) !important;
border-radius: var(--m-radius) !important;
}
.lens-callout h3 { font-size: var(--m-h3) !important; line-height: 1.3 !important; }
.lens-callout p { font-size: var(--m-meta) !important; line-height: 1.5 !important; }
.lens-callout .btn {
width: 100%;
min-height: var(--m-tap);
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 14px;
}
/* The closing call to action. */
.cta { display: block !important; text-align: left; }
.cta .btn { width: 100%; min-height: var(--m-tap); display: inline-flex; align-items: center; justify-content: center; margin-top: 14px; }
}
/* ── Instagram ────────────────────────────────────────────────────────
Three third-party iframes, each of which renders as a blank white
rectangle whenever a browser blocks third-party embeds — which on a
phone is most of them — and 3,479px of section either way. The
iframes come out on mobile and the fallback link that was already in
the markup becomes the control: a compact row with a play mark,
linking to the same reel. Nothing is lost; the section goes from
3,479px to about 320px. */
@media (max-width: 720px) {
.instagram-embeds { grid-template-columns: 1fr !important; gap: 10px !important; }
.instagram-embed-card {
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
border-radius: var(--m-radius) !important;
overflow: hidden;
}
.instagram-embed-card iframe { display: none !important; }
.instagram-embed-card .instagram-fallback {
display: grid !important;
grid-template-columns: 46px minmax(0, 1fr);
align-items: center;
column-gap: 12px;
row-gap: 1px;
min-height: 66px;
padding: 11px 14px !important;
text-decoration: none;
}
/* The play mark: a brand-gradient tile with a triangle punched out of
it. The triangle is a clip-path on a separate ::after rather than a
background image, so it stays crisp at any density and needs no
network request — which matters here, because the whole point of
this block is that it must work when third-party content does
not. */
.instagram-embed-card .instagram-fallback::before {
content: "";
grid-row: 1 / span 2;
width: 46px; height: 46px;
border-radius: 13px;
background: linear-gradient(135deg, #7a2f98, #f95e28);
}
.instagram-embed-card .instagram-fallback::after {
content: "";
grid-column: 1;
grid-row: 1 / span 2;
justify-self: center;
align-self: center;
width: 0; height: 0;
margin-left: 3px;
border-left: 13px solid #fff;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.ig-mini-title {
grid-column: 2;
font-size: 14.5px;
font-weight: 700;
line-height: 1.25;
color: var(--h-navy, #07142e);
}
.ig-mini-cta {
grid-column: 2;
font-size: 12px;
font-weight: 600;
letter-spacing: .02em;
color: var(--hp-blue, #0e2885);
}
.ig-mini-cta::after { content: " →"; }
}
/* ═══════════════════════════════════════════════════════════════════
11. FORMS
16px on every input. Not a style preference: below 16px iOS Safari
zooms the page on focus, and the visitor then has to pinch back out
to reach the send button. Labels stay visible — a placeholder-only
form is unusable the moment someone starts typing.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.form-grid { grid-template-columns: 1fr !important; gap: var(--m-gap) !important; }
.hp-field { min-width: 0; }
.hp-field label {
display: block;
font-size: 13.5px;
font-weight: 600;
margin-bottom: 5px;
}
.hp-field input,
.hp-field select,
.hp-field textarea,
.start-form-wrap input,
.start-form-wrap select,
.start-form-wrap textarea {
font-size: 16px !important;
min-height: var(--m-tap);
width: 100%;
padding: 11px 12px !important;
border-radius: 12px;
}
.hp-field textarea { min-height: 108px; }
.form-status { font-size: 13.5px; }
form .btn[type="submit"], .start-form-wrap button[type="submit"] {
width: 100%;
min-height: 50px;
font-size: 16px;
}
.consent-label, .hp-consent-row {
display: flex;
gap: 10px;
align-items: flex-start;
font-size: 13px;
line-height: 1.5;
}
.consent-label input[type="checkbox"] {
width: 22px; height: 22px; flex: 0 0 22px; margin-top: 1px;
}
}
/* ═══════════════════════════════════════════════════════════════════
12. THE INSTAGRAM CARD ON /start/ AND /telugu/, AND ODDS AND ENDS
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
.start-ig-inner { gap: 14px !important; }
.start-ig-inner .btn { width: 100%; min-height: var(--m-tap); display: inline-flex; align-items: center; justify-content: center; }
/* Every interactive control clears 44px, even where the visible pill
is smaller — the padding does the work, not the font size. */
.btn, .precon-interest, .hp-jump, .hp-secnav a, .navlinks a {
touch-action: manipulation;
}
/* Nothing on these pages may scroll sideways. The reel and the
section nav scroll inside themselves; the page does not. */
html, body { overflow-x: hidden !important; }
img, video, svg, iframe { max-width: 100%; }
}
/* ═══════════════════════════════════════════════════════════════════
13. "READ MORE" (
)
Used on the Telugu page, where the introduction ran to eleven
paragraphs before the first piece of evidence. Two rules make it
safe to use for real content rather than for asides:
• ABOVE 900px IT IS FORCED OPEN. The desktop page shows every word
exactly as it did before — no one who was reading this page on a
laptop loses anything.
• THE TEXT IS ALWAYS IN THE DOM.
does not remove content,
it hides it, so Google indexes it, browser find-in-page opens the
panel automatically to show a match, and a screen reader can
reach it. That is why this is a
and not a truncation
and not a JavaScript accordion.
═══════════════════════════════════════════════════════════════════ */
.hp-more { margin: 14px 0 4px; }
.hp-more > summary {
display: flex;
align-items: center;
gap: 8px;
min-height: var(--m-tap, 44px);
padding: 8px 2px;
color: var(--hp-blue, #0e2885);
font-size: 15px;
font-weight: 600;
cursor: pointer;
list-style: none;
}
.hp-more > summary::-webkit-details-marker { display: none; }
.hp-more > summary::after {
content: "";
width: 8px; height: 8px;
margin-left: 2px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px);
transition: transform .2s ease;
}
.hp-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.hp-more[open] > summary { margin-bottom: 2px; }
/* Desktop and tablet: no disclosure at all. The summary is hidden and
hp-mobile.js leaves the element open, so the layout above 900px is
what it was before this file existed.
The summary is hidden here rather than by script, but the OPEN state
is script's job and not CSS's: a closed
does not render its
contents at all, and no display value on the child brings them back.
That is why the markup ships `open` and the script closes it — the
failure mode of no JavaScript is the whole page, not a missing
third of it. */
@media (min-width: 901px) {
.hp-more > summary { display: none !important; }
}
/* Reduced motion: the reel is the only thing that moves, and it is
already handled in hp-testimonials.css. Restated so a future edit to
this file cannot reintroduce motion without meeting it. */
@media (prefers-reduced-motion: reduce) {
.hp-tst-set, .hp-tst-tile { animation: none !important; }
}
/* ═══════════════════════════════════════════════════════════════════
14. THE TABLET BAND (721–900px)
Everything above applies from 900px down. This block is only the
handful of places where a tablet should not get the phone's numbers:
bigger thumbnails, because there is room for them, and touch targets,
because a tablet is still a touchscreen and several controls were
sized by their text alone.
═══════════════════════════════════════════════════════════════════ */
@media (min-width: 721px) and (max-width: 900px) {
.listing-card { grid-template-columns: 168px minmax(0, 1fr); }
.listing-card .listing-media > img,
.listing-card .listing-noimg { width: 168px; min-height: 132px; }
.listing-card .lbadge { font-size: 10.5px !important; }
.listing-price { font-size: 23px !important; }
.precon-card { grid-template-columns: 160px minmax(0, 1fr); column-gap: 16px; }
.precon-photo > img,
.precon-photo.precon-photo-drawn { width: 160px; height: 100px; } /* 8:5 */
.precon-photo > figcaption { width: 160px; font-size: 10.5px !important; }
.precon-type dt, .precon-type dd { font-size: 14px !important; }
.precon-type dd strong { font-size: 16px !important; }
.precon-blurb { -webkit-line-clamp: unset; overflow: visible; }
/* Sized by their text, and their text is small. */
.precon-interest, .hp-jump, .hp-tst-rail-src, .hp-saas-account {
min-height: var(--m-tap);
display: inline-flex !important;
align-items: center;
}
.precon-interest { justify-content: center; }
.hp-saas-account { min-width: var(--m-tap); justify-content: center; }
.remax, .hp-saas-remax { object-fit: contain; }
}
/* The running light on a review tile is drawn on ::before/::after with
a negative inset, so an overflow:hidden track clips the glow at top
and bottom. A little vertical room inside the track, pulled back out
with a negative margin, gives the light somewhere to be without
moving the tiles or changing the marquee arithmetic. */
@media (max-width: 900px) {
.hp-tst-rail-track { padding: 11px 0; margin: -11px 0; }
}