/* Page-specific rules from the handoff's <head> (index.html: the framed hero, .hx-e).
   --hx-photo is the hero photo the editor can swap; the handoff's photo is its fallback. */
.hx-e{background-image:linear-gradient(270deg,rgba(8,14,20,.93) 0%,rgba(8,14,20,.74) 46%,rgba(22,32,42,.38) 100%),var(--hx-photo,url("../assets/img/photos/downtown-a-clean-bw.jpg"));background-size:cover;background-position:center 40%}

@media (max-width:900px){.hx-e-img{order:2;padding-left:0 !important}
.hx-e-tag{left:50% !important}
.hx-e{background-image:linear-gradient(180deg,rgba(8,14,20,.92) 0%,rgba(8,14,20,.78) 55%,rgba(8,14,20,.35) 100%),var(--hx-photo,url("../assets/img/photos/downtown-a-clean-bw.jpg")) !important}
}

@media (max-width:700px){.hx-e-text{padding:52px 24px 8px !important}
.hx-e-sec{padding:12px 12px 48px !important}
}

/* THE HOME HERO FILLS THE FIRST SCREEN ON A DESKTOP, ITS THREE CREDENTIALS STILL IN VIEW (owner,
   2026-10-02: "make the hero image larger side to side and more up and down -- we can see the 2nd
   section start", then "raise it up so the 3 things below are still able to be seen at the
   bottom"). The framed photo was 1384 x 780 at every size, so a tall screen showed the next band
   and a laptop hid the credentials. Above 900 px the frame runs to 1864 px wide and its height is
   the screen's less everything else the band shows: the 83 px header, the band's 28 px top, the
   credentials (44 px gap, ~82 px row) and its 64 px bottom = 301 px -- so the band ends at the
   screen's foot -- up to 1864 x 1000 px: on a larger screen (4K, portrait) the frame stops there
   rather than stretch, and the credentials follow it (owner, 2026-10-02: "set a cut off for max
   size"). The row is held at 82 px (one-line titles are 63) so the band always ends there. Not below 440 px; on a short screen the words' padding and gaps give way first (88 -> 40
   px), and the attorneys' cut-out keeps its share of the frame (480-740 px wide, and no wider than the screen's width allows: wider crowds the words on a tall screen).
   Published site only (`html[data-irs-js]`, set by src/lib/deferBg.ts outside the editor): the
   editor's canvas grows to its page, where a screen-height rule would chase itself. */
@media (min-width:901px){
html[data-irs-js] .hx-e{max-width:1864px !important;min-height:clamp(440px,calc(100svh - 301px),1000px) !important}
html[data-irs-js] .hx-e-sec>ul{max-width:1864px !important;min-height:82px;align-content:start}
html[data-irs-js] .hx-e-text{padding-top:clamp(40px,calc((100svh - 301px)*.11),88px) !important;padding-bottom:clamp(40px,calc((100svh - 301px)*.11),88px) !important}
html[data-irs-js] .hx-e-img{padding-top:clamp(40px,calc((100svh - 301px)*.1),80px) !important}
:where(html[data-irs-js] .hx-e-img) img{max-width:clamp(480px,min(calc((100svh - 301px)*.84),calc((100vw - 1440px)*.75 + 500px)),740px) !important}
}
/* The words toward the middle (owner, 2026-10-02: "move the hero text closer to the center some
   more"): past the design's 1440 px the frame widens, and every extra pixel went to the cut-out's
   side, pinning the words to the right edge. Their column now takes 60% of that extra width as
   right-hand room (to 260 px at 1873+), so they move left as the frame grows. */
@media (min-width:901px){
html[data-irs-js] .hx-e{--hx-shift:clamp(0px,calc((100vw - 1440px)*.6),260px)}
html[data-irs-js] .hx-e-text{max-width:calc(680px + var(--hx-shift)) !important;padding-right:calc(72px + var(--hx-shift)) !important}
}
@media (min-width:901px) and (max-height:820px){html[data-irs-js] .hx-e-text{gap:18px !important}}
/* Home hero, 2026-10-06 (owner: "the image on the homepage hero needs moved up so Sloan's head is
   pretty much in line with the 'Standing by your side' text"). The cut-out stands on the frame's
   floor, so it RISES by growing, not by moving (moved up, the two would float above the edge).
   The words are centred in a frame of height H = clamp(440, 100svh - 301, 1000) and the block is
   ~440 px tall with the eyebrow and its gap (~43) above the headline, so the headline starts at
   (H - 440)/2 + 43 and a cut-out of H/2 + 175 tall starts there too. Side by side only (the
   columns wrap below ~1290 px, where the picture sits above the words); published site only.
   The size is said as a WIDTH (x 1.2942, the cut-out's own proportions) and both hero picture
   rules sit in :where(), so they carry no weight of their own: a width the editor sets on the
   picture (element knob `w`, [data-s] [data-e] !important) wins, and this is only the default
   (owner, 2026-10-06: "give her the ability to be able to change this stuff also"). */
@media (min-width:1300px){:where(html[data-irs-js] .hx-e-img) img{width:calc((clamp(440px,calc(100svh - 301px),1000px)/2 + 175px)*1.2942) !important;height:auto !important;max-width:100% !important}}

/* ── PPC landing hero (app/src/v2/pages/landing.tsx LpHero, 2026-10-07) ─────────────────────
   Desktop: the hero's own side-to-side wash (inline). Phones stack the words over the photo, so
   the wash runs top to bottom instead, from the photo the band names in --lp-photo. */
.irs-lp-hero{padding:72px 0 80px}
.irs-btn-goldfill:hover{background:#e6c987 !important;border-color:#e6c987 !important}
@media (max-width:900px){
  .irs-lp-hero{padding:44px 0 56px;background-image:linear-gradient(180deg,rgba(8,14,20,.62) 0%,rgba(8,14,20,.82) 45%,rgba(8,14,20,.94) 100%),var(--lp-photo) !important}
  .irs-lp-row{padding:0 20px !important;gap:36px !important}
  .irs-lp-call{align-self:stretch !important}
}