/* Hegetic sector pages (Stays, Keys, Ledger, Care). Builds on ../assets/site.css (top bar, buttons, parts, steps,
   footer) and ../brand/tokens.css. Namespace: hs- (Hegetic sector). The page's world comes from <body data-sector="…">:
   colours --s-ground/deep/mid/light and shapes --s-media/card/btn. Shared layout first, the theme layer after it,
   then each sector's hero visual and signature details. */

.hs-logo svg { height: 22px; }
.hs-topr { display: flex; align-items: center; gap: 10px; }
.hs-lang { display: flex; padding: 3px; border-radius: var(--pill); border: 1px solid rgba(14, 17, 23, .14); background: rgba(246, 246, 243, .7); }
.hs-lang button { height: 32px; min-width: 40px; padding: 0 10px; border: 0; border-radius: var(--pill); background: transparent; color: inherit; font: 600 12.5px/1 var(--sans); letter-spacing: .04em; cursor: pointer; opacity: .6; }
.hs-lang button[aria-pressed="true"] { background: var(--ink); color: var(--plaster); opacity: 1; }
body.is-dark .hs-lang { border-color: var(--ink-line); background: rgba(22, 26, 34, .7); }
body.is-dark .hs-lang button[aria-pressed="true"] { background: var(--plaster); color: var(--ink); }

/* ---------- hero ---------- */
.hs-hero { position: relative; min-height: max(100svh, 760px); display: flex; align-items: center; padding: 104px 0 70px; overflow: hidden; isolation: isolate; }
.hs-hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s6); align-items: center; }
.hs-h1 { font: 750 clamp(46px, 7.4vw, 110px)/.94 var(--sans); letter-spacing: -.052em; text-wrap: balance; }
.hs-clock { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hs-sub { font-size: var(--t-l); line-height: 1.5; color: var(--stone-text); max-width: 46ch; margin-top: var(--s5); text-wrap: pretty; }
.hs-sub em { color: var(--ink); }
.hs-cta { justify-content: flex-start; }
.hs-proof { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); max-width: 560px; }
.hs-proof li { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--stone-text); }
.hs-proof b { font: 600 22px/1 var(--mono); color: var(--ink); letter-spacing: -.02em; }

.hs-visual { position: relative; justify-self: center; }
.hs-phone {
  position: relative; width: 340px; height: 640px; border-radius: 46px; padding: 10px; background: var(--ink);
  box-shadow: 0 2px 4px rgba(14, 17, 23, .1), 0 50px 90px -40px rgba(14, 17, 23, .55), inset 0 0 0 1.5px #2b313c;
}
.hs-phone::before { content: ""; position: absolute; top: 18px; left: 50%; width: 96px; height: 26px; margin-left: -48px; border-radius: 20px; background: #000; z-index: 2; }
.hs-phone__bar { display: flex; align-items: center; gap: 10px; padding: 50px 16px 12px; background: #F8F7F3; border-radius: 36px 36px 0 0; border-bottom: 1px solid var(--line); }
.hs-phone__bar b { display: block; font: 650 15px/1.2 var(--sans); }
.hs-phone__bar small { display: block; font-size: 11.5px; color: #1F6B43; }
.hs-phone__bar .hx-mono { margin-left: auto; color: var(--stone-text); }
.hs-ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--aegean); color: #fff; font: 600 12px/1 var(--sans); }
.hs-phone__chat { height: calc(100% - 96px); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 12px 16px; background: #EFEDE7; border-radius: 0 0 36px 36px; font-size: 13.5px; line-height: 1.38; }
.hs-note-ai { align-self: center; text-align: center; font: 500 10.5px/1.4 var(--mono); color: var(--stone-text); background: rgba(255, 255, 255, .6); padding: 6px 10px; border-radius: 10px; max-width: 90%; }
.hs-b { max-width: 84%; padding: 9px 11px; border-radius: 14px; box-shadow: 0 1px 1px rgba(14, 17, 23, .06); }
.hs-b--in { align-self: flex-start; background: #fff; border-top-left-radius: 4px; }
.hs-b--out { align-self: flex-end; background: var(--ink); color: var(--plaster); border-top-right-radius: 4px; }
.hs-booked { align-self: stretch; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #CBE3D3; }
.hs-booked b { font: 650 14px/1.2 var(--sans); }
.hs-booked .hx-mono { font-size: 10.5px; color: var(--stone-text); }
.hs-booked__ok { color: #1F6B43 !important; }
.hs-chip-a { position: absolute; left: -54px; top: 120px; box-shadow: 0 10px 24px -14px rgba(14, 17, 23, .35); }
.hs-cur { left: -96px; top: 470px; }

/* ---------- leaks ---------- */
.hs-leaks { padding: var(--s7) 0; }
.hs-leak-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hs-leak { padding: 26px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); }
.hs-leak .hx-ico { width: 24px; height: 24px; color: var(--aegean); }
.hs-leak__n { font: 650 clamp(30px, 3.4vw, 46px)/1.05 var(--sans); letter-spacing: -.04em; margin: var(--s5) 0 var(--s2); text-wrap: balance; }
.hs-leak h3 { font: 650 18px/1.25 var(--sans); margin-bottom: var(--s3); }
.hs-leak > p:last-child { color: var(--stone-text); font-size: 15.5px; }

/* ---------- parts (reuse hx-part, without the visual) ---------- */
.hs-parts { padding: var(--s6) 0 var(--s7); }
.hs-parts .hx-part { min-height: 340px; }

/* ---------- calculator ---------- */
.hs-worth { padding: var(--s7) 0; }
.hs-calc { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }
.hs-calc__in { display: grid; gap: 4px; padding: 22px 26px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line); }
.hs-calc__in label { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.hs-calc__in label:last-child { border-bottom: 0; }
.hs-calc__in output { font: 600 15px/1 var(--mono); }
.hs-calc__in input { grid-column: 1 / -1; width: 100%; height: 26px; margin: 0; background: transparent; accent-color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; }
.hs-calc__in input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(var(--ink), var(--ink)) no-repeat 0 / var(--fill, 50%) 100%, var(--line); }
.hs-calc__in input::-moz-range-track { height: 4px; border-radius: 4px; background: var(--line); }
.hs-calc__in input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--ink); }
.hs-calc__in input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -9px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); box-shadow: 0 2px 6px rgba(14, 17, 23, .2); }
.hs-calc__in input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.hs-calc__in input:focus-visible { outline: 2px solid var(--aegean); outline-offset: 4px; }
.hs-calc__out { position: sticky; top: 90px; align-self: start; padding: 28px; border-radius: 20px; background: var(--ink); color: var(--plaster); }
.hs-calc__lbl { color: var(--stone); }
.hs-calc__big { font: 750 clamp(54px, 6.4vw, 92px)/1 var(--sans); letter-spacing: -.05em; margin: 10px 0 var(--s4); font-variant-numeric: tabular-nums; }
.hs-calc__rows { margin: 0; border-top: 1px solid var(--ink-line); }
.hs-calc__rows div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--ink-line); }
.hs-calc__rows dt { color: #B7BCC4; }
.hs-calc__rows dd { margin: 0; font: 600 16px/1.3 var(--mono); }
.hs-calc__f { margin-top: var(--s4); color: #8DB7D3; line-height: 1.6; }
.hs-calc__note { margin-top: var(--s3); font-size: 13.5px; color: var(--stone); }

/* ---------- the report sheet ---------- */
.hs-report { padding: var(--s7) 0; }
.hs-report__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: center; }
.hs-sheet { position: relative; padding: 30px 32px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(14, 17, 23, .08), 0 40px 70px -40px rgba(14, 17, 23, .45); transform: rotate(1.2deg); }
.hs-sheet::after { content: ""; position: absolute; inset: 12px -10px -12px 10px; z-index: -1; background: var(--paper); border-radius: 6px; transform: rotate(-2.4deg); box-shadow: 0 20px 40px -30px rgba(14, 17, 23, .4); }
.hs-sheet header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); color: var(--stone-text); }
.hs-sheet__brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.hs-sheet__brand svg { height: 20px; width: auto; }
.hs-sheet__brand b { font: 650 16px/1 var(--sans); }
.hs-sheet__k { margin-top: 22px; color: var(--stone-text); }
.hs-sheet__big { font: 750 64px/1 var(--sans); letter-spacing: -.05em; margin: 8px 0 18px; }
.hs-sheet__rows { margin: 0; }
.hs-sheet__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 15px; }
.hs-sheet__rows dt { color: var(--stone-text); }
.hs-sheet__rows dd { margin: 0; font: 600 14px/1.4 var(--mono); text-align: right; }
.hs-sheet__rows small { font-weight: 400; color: var(--stone-text); }
.hs-sheet footer { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--aegean); line-height: 1.6; }

/* ---------- how ---------- */
.hs-how { padding: var(--s7) 0; }

/* ---------- price ---------- */
.hs-price { padding: var(--s6) 0 var(--s7); }
.hs-price__card { display: grid; grid-template-columns: 1.2fr .8fr; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.hs-price__l { padding: var(--s6) var(--s5); }
.hs-price__p { color: var(--stone-text); font-size: var(--t-l); max-width: 46ch; margin: var(--s4) 0 var(--s5); }
.hs-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.hs-incl li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; }
.hs-incl li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--aegean); flex: none; transform: translateY(-1px); }
.hs-price__r { padding: var(--s6) var(--s5); background: var(--ink); color: var(--plaster); display: flex; flex-direction: column; gap: 8px; }
.hs-price__r .hx-mono { color: var(--stone); }
.hs-price__n { font: 750 56px/1 var(--sans); letter-spacing: -.05em; margin-bottom: var(--s4); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hs-price__n s { font-size: 26px; font-weight: 400; color: var(--stone); text-decoration-thickness: 2px; }
.hs-price__n small { font: 500 14px/1 var(--mono); color: var(--stone); letter-spacing: 0; }
.hs-price__fine { font-size: 13.5px; color: #B7BCC4; margin: auto 0 var(--s4); }
.hs-price__r .hx-btn { align-self: flex-start; }

/* the report sheet is drawn slightly turned; on a phone its corner must not make the page scroll sideways */
main { overflow-x: clip; }

/* ---------- you decide: the control panel (components/control) ---------- */
.hs-ctl { padding: var(--s7) 0; }
.hs-ctl__grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: var(--s6); align-items: center; }
.hs-ctl__p { margin-top: var(--s4); color: var(--stone-text); font-size: var(--t-l); line-height: 1.5; max-width: 40ch; }
.hx-ctl__static { display: grid; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: #fff; font: 500 14px/1.4 var(--mono); }
@media (max-width: 1080px) { .hs-ctl__grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- faq ---------- */
.hs-faq { padding: var(--s6) 0 var(--s7); }
.hs-faq__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s6); }
.hs-qs { border-top: 1px solid var(--line); }
.hs-qs details { border-bottom: 1px solid var(--line); }
.hs-qs summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 600 18px/1.35 var(--sans); cursor: pointer; list-style: none; }
.hs-qs summary::-webkit-details-marker { display: none; }
.hs-qs summary::after { content: "+"; font: 400 22px/1 var(--mono); color: var(--aegean); transition: transform var(--t-mid) var(--ease); }
.hs-qs details[open] summary::after { transform: rotate(45deg); }
.hs-qs details p { padding: 0 0 22px; color: var(--stone-text); max-width: 60ch; }

/* ---------- call ---------- */
.hs-call { padding: 0 var(--gutter) var(--s7); }
.hs-call__in { max-width: var(--wrap); padding: var(--s7) var(--s5); border-radius: var(--r-xl); background: var(--ink); color: var(--plaster); text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.hs-call__in::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(141, 183, 211, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(141, 183, 211, .07) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(closest-side, #000, transparent); mask-image: radial-gradient(closest-side, #000, transparent); }
.hs-call__h { font: 700 var(--t-3xl)/1 var(--sans); letter-spacing: -.045em; max-width: 16ch; margin: 0 auto; text-wrap: balance; }
.hs-call__p { color: #B7BCC4; font-size: var(--t-l); max-width: 52ch; margin: var(--s4) auto 0; }
.hs-call .hx-hero__cta { justify-content: center; }
.hs-foot .hx-foot__mark { margin-top: 0; }

/* =====================================================================================================
   THEME LAYER: the sector's world. Everything above is layout; colour and shape come from here.
   ===================================================================================================== */
body[data-sector] { background: var(--s-ground); }
body[data-sector] .hx-top.is-scrolled { background: color-mix(in srgb, var(--s-ground) 88%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--s-mid) 40%, transparent); }
body[data-sector] .hx-logo .hx-sub { fill: var(--s-deep); }
body[data-sector] ::selection { background: color-mix(in srgb, var(--s-mid) 35%, transparent); }
body[data-sector] :focus-visible { outline-color: var(--s-deep); }
.hs-motif { position: absolute; inset: 0; z-index: -1; color: var(--s-mid); opacity: .5; pointer-events: none; -webkit-mask-image: radial-gradient(120% 100% at 70% 50%, #000 35%, transparent 85%); mask-image: radial-gradient(120% 100% at 70% 50%, #000 35%, transparent 85%); }
.hs-motif svg { width: 100%; height: 100%; display: block; }
body[data-sector] .hx-kicker { color: var(--s-deep); border-color: color-mix(in srgb, var(--s-mid) 55%, transparent); background: color-mix(in srgb, var(--s-ground) 70%, #fff); }
body[data-sector] .hx-label { color: var(--s-deep); }
body[data-sector] .hs-h1 { color: var(--s-deep); }
body[data-sector] .hx-soft { color: color-mix(in srgb, var(--s-deep) 72%, var(--s-ground)); }
body[data-sector] .hs-sub, body[data-sector] .hx-lead, body[data-sector] .hs-proof li { color: color-mix(in srgb, var(--ink) 72%, var(--s-ground)); }
body[data-sector] .hs-proof { border-top-color: color-mix(in srgb, var(--s-mid) 45%, transparent); }
body[data-sector] .hs-proof b { color: var(--s-deep); }
body[data-sector] .hx-btn { border-radius: var(--s-btn); }
body[data-sector] .hx-btn--ink { background: var(--s-deep); }
body[data-sector] .hx-btn--ghost { border-color: color-mix(in srgb, var(--s-deep) 35%, transparent); color: var(--s-deep); background: color-mix(in srgb, var(--s-ground) 60%, #fff); }
body[data-sector] .hx-btn--ghost:hover { border-color: var(--s-deep); }
body[data-sector] .hs-lang { border-radius: var(--s-btn); border-color: color-mix(in srgb, var(--s-deep) 25%, transparent); }
body[data-sector] .hs-lang button { border-radius: var(--s-btn); }
body[data-sector] .hs-lang button[aria-pressed="true"] { background: var(--s-deep); }

body[data-sector] .hs-leak { background: color-mix(in srgb, var(--s-ground) 45%, #fff); border-color: color-mix(in srgb, var(--s-mid) 40%, transparent); border-radius: var(--s-card); }
body[data-sector] .hs-leak .hx-ico, body[data-sector] .hs-leak__n { color: var(--s-deep); }
body[data-sector] .hs-leak > p:last-child { color: color-mix(in srgb, var(--ink) 70%, var(--s-ground)); }
body[data-sector] .hx-part { background: var(--s-deep); border-radius: var(--s-card); }
body[data-sector] .hx-part::before { background-image: none; }
body[data-sector] .hx-part > p { color: color-mix(in srgb, var(--s-light) 85%, #fff); }
body[data-sector] .hx-part__top { color: color-mix(in srgb, var(--s-light) 70%, transparent); }
body[data-sector] .hx-part__top .hx-ico { color: var(--s-light); }
body[data-sector] .hx-part__cap { border-top-color: color-mix(in srgb, var(--s-light) 22%, transparent); color: color-mix(in srgb, var(--s-light) 75%, transparent) !important; }
body[data-sector] .hx-steps li::before { border-color: var(--s-deep); background: var(--s-ground); }
body[data-sector] .hx-steps li.is-on::before { background: var(--s-deep); }
body[data-sector] .hx-steps__line { background: color-mix(in srgb, var(--s-mid) 45%, transparent); }
body[data-sector] .hx-steps__line i { background: var(--s-deep); }
body[data-sector] .hx-steps .hx-mono { color: var(--s-deep); }
body[data-sector] .hx-steps p { color: color-mix(in srgb, var(--ink) 70%, var(--s-ground)); }
body[data-sector] .hs-calc__in { background: color-mix(in srgb, var(--s-ground) 45%, #fff); border-color: color-mix(in srgb, var(--s-mid) 40%, transparent); border-radius: var(--s-card); }
body[data-sector] .hs-calc__in label { border-bottom-color: color-mix(in srgb, var(--s-mid) 30%, transparent); }
body[data-sector] .hs-calc__in input::-webkit-slider-runnable-track { background: linear-gradient(var(--s-deep), var(--s-deep)) no-repeat 0 / var(--fill, 50%) 100%, color-mix(in srgb, var(--s-mid) 35%, transparent); }
body[data-sector] .hs-calc__in input::-moz-range-progress { background: var(--s-deep); }
body[data-sector] .hs-calc__in input::-webkit-slider-thumb { border-color: var(--s-deep); }
body[data-sector] .hs-calc__in input::-moz-range-thumb { border-color: var(--s-deep); }
body[data-sector] .hs-calc__out { background: var(--s-deep); border-radius: var(--s-card); }
body[data-sector] .hs-calc__f { color: var(--s-light); }
body[data-sector] .hs-calc__rows dt, body[data-sector] .hs-calc__lbl, body[data-sector] .hs-calc__note { color: color-mix(in srgb, var(--s-light) 80%, transparent); }
body[data-sector] .hs-calc__rows, body[data-sector] .hs-calc__rows div { border-color: color-mix(in srgb, var(--s-light) 20%, transparent); }
body[data-sector] .hs-sheet footer, body[data-sector] .hs-sheet__brand { color: var(--s-deep); }
body[data-sector] .hs-price__card { background: color-mix(in srgb, var(--s-ground) 45%, #fff); border-color: color-mix(in srgb, var(--s-mid) 40%, transparent); border-radius: var(--s-card); }
body[data-sector] .hs-price__r { background: var(--s-deep); }
body[data-sector] .hs-price__r .hx-mono, body[data-sector] .hs-price__n s, body[data-sector] .hs-price__n small { color: color-mix(in srgb, var(--s-light) 75%, transparent); }
body[data-sector] .hs-price__fine { color: color-mix(in srgb, var(--s-light) 85%, transparent); }
body[data-sector] .hs-incl li::before { background: var(--s-deep); }
body[data-sector] .hs-qs, body[data-sector] .hs-qs details { border-color: color-mix(in srgb, var(--s-mid) 40%, transparent); }
body[data-sector] .hs-qs summary::after { color: var(--s-deep); }
body[data-sector] .hs-call__in { background: var(--s-deep); border-radius: var(--s-card); }
body[data-sector] .hs-call__in::before { display: none; }
body[data-sector] .hs-call__in .hs-motif { color: var(--s-light); opacity: .16; -webkit-mask-image: none; mask-image: none; }
body[data-sector] .hs-call__p { color: color-mix(in srgb, var(--s-light) 85%, #fff); }
body[data-sector] .hs-call .hx-label { color: var(--s-light); }
body[data-sector] .hx-foot { background: var(--s-deep); }
body[data-sector] .hx-foot__mark .hx-sub { fill: var(--s-light); }
body[data-sector] .hx-foot__legal { color: color-mix(in srgb, var(--s-light) 70%, transparent); border-top-color: color-mix(in srgb, var(--s-light) 18%, transparent); }

/* the other sectors, in the footer: each in its own colours */
.hx-foot .hs-others { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin-bottom: var(--s6); }
.hx-foot .hs-others a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: var(--pill); text-decoration: none; font: 600 15px/1 var(--sans); background: var(--s-ground); color: var(--s-deep); transition: transform var(--t-fast) var(--ease); }
.hx-foot .hs-others a:hover { transform: translateY(-2px); }
.hx-foot .hs-others a[aria-current="page"] { outline: 1.5px solid var(--s-light); outline-offset: 3px; }
.hs-others svg { width: 30px; height: 30px; padding: 4px; border-radius: 50%; background: #fff; color: var(--s-deep); }
.hs-others small { font: 500 12px var(--mono); opacity: .7; }

/* =====================================================================================================
   SIGNATURES: what makes each world recognisable beyond its colours
   ===================================================================================================== */
/* Stays: the arch, the horizon, warm serif */
[data-sector="stays"] .hs-accent { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.03em; }
[data-sector="stays"] .hs-visual::before { content: ""; position: absolute; z-index: -1; left: -80px; right: -80px; top: 60px; bottom: -40px; border-radius: var(--s-media); background: linear-gradient(var(--stays-light) 0 62%, color-mix(in srgb, var(--stays-mid) 55%, var(--stays-light)) 62%); }
[data-sector="stays"] .hs-visual::after { content: ""; position: absolute; z-index: -1; width: 64px; height: 64px; border-radius: 50%; background: var(--ember); right: -40px; top: calc(60px + 62% * .82); box-shadow: 0 0 60px 10px rgba(255, 90, 43, .35); }
[data-sector="stays"] section + section::before { content: ""; display: block; max-width: var(--wrap); height: 1px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--stays-mid), transparent); opacity: .6; }
[data-sector="stays"] .hs-leak { border-radius: 160px 160px 22px 22px; padding-top: 52px; text-align: center; }
[data-sector="stays"] .hs-leak .hx-ico { margin: 0 auto; }

/* Keys: plan lines, corner ticks, measurements */
[data-sector="keys"] .hs-accent { position: relative; white-space: nowrap; }
[data-sector="keys"] .hs-accent::after { content: attr(data-dim); position: absolute; left: 0; right: 0; bottom: -.32em; height: .22em; border: solid var(--keys-mid); border-width: 0 1.5px 1.5px; font: 500 12px/1 var(--mono); letter-spacing: 0; color: var(--keys-mid); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 6px; }
[data-sector="keys"] .hs-leak, [data-sector="keys"] .hs-price__card, [data-sector="keys"] .hs-calc__in { background-image: linear-gradient(var(--keys-deep), var(--keys-deep)), linear-gradient(var(--keys-deep), var(--keys-deep)), linear-gradient(var(--keys-deep), var(--keys-deep)), linear-gradient(var(--keys-deep), var(--keys-deep)); background-size: 14px 1.5px, 1.5px 14px, 14px 1.5px, 1.5px 14px; background-position: 0 0, 0 0, 100% 100%, 100% 100%; background-repeat: no-repeat; }
[data-sector="keys"] .hs-leak__n { font-family: var(--mono); font-weight: 500; letter-spacing: -.03em; }

/* Ledger: ruled paper, columns, the double underline, tabular figures */
[data-sector="ledger"] { font-variant-numeric: tabular-nums; }
[data-sector="ledger"] .hs-accent { text-decoration: underline double; text-decoration-thickness: 2px; text-underline-offset: .12em; text-decoration-color: var(--ledger-mid); }
[data-sector="ledger"] .hs-leak { background-image: repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--ledger-mid) 35%, transparent) 31px 32px), linear-gradient(90deg, transparent 18px, color-mix(in srgb, var(--ledger-mid) 60%, transparent) 18px 19px, transparent 19px 22px, color-mix(in srgb, var(--ledger-mid) 60%, transparent) 22px 23px, transparent 23px); padding-left: 40px; }
[data-sector="ledger"] .hx-h2 .hx-soft { text-decoration: underline double; text-decoration-thickness: 1px; text-underline-offset: 8px; text-decoration-color: color-mix(in srgb, var(--ledger-mid) 70%, transparent); }

/* Care: round, soft, a pulse between sections */
[data-sector="care"] .hs-accent { color: var(--care-deep); background: linear-gradient(transparent 62%, color-mix(in srgb, var(--care-light) 90%, transparent) 62%); border-radius: 999px; padding: 0 .08em; }
[data-sector="care"] .hs-leak, [data-sector="care"] .hs-price__card, [data-sector="care"] .hs-calc__in { box-shadow: 0 30px 60px -40px color-mix(in srgb, var(--care-deep) 60%, transparent); border-color: transparent; }
[data-sector="care"] section + section::before { content: ""; display: block; max-width: 480px; height: 40px; margin: 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 40'%3E%3Cpath d='M0 20h200l14-14 18 28 14-14h234' fill='none' stroke='%23958CC4' stroke-width='1.6'/%3E%3Ccircle cx='246' cy='20' r='4' fill='%23FF5A2B'/%3E%3C/svg%3E") center / contain no-repeat; }

/* =====================================================================================================
   HERO VISUALS (one per sector)
   ===================================================================================================== */
.hs-panel { position: relative; width: 460px; max-width: calc(100vw - 2 * var(--gutter)); background: #fff; color: var(--ink); border-radius: var(--s-card); box-shadow: 0 2px 4px rgba(14, 17, 23, .06), 0 50px 90px -40px color-mix(in srgb, var(--s-deep) 55%, transparent); overflow: hidden; }
.hs-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid color-mix(in srgb, var(--s-mid) 35%, transparent); }
.hs-panel__head b { font: 650 15px/1.2 var(--sans); color: var(--s-deep); }
.hs-panel__head .hx-mono { color: var(--stone-text); }
.hs-float { position: absolute; z-index: 2; background: #fff; border-radius: var(--s-card); padding: 12px 14px; font-size: 13.5px; line-height: 1.4; box-shadow: 0 20px 40px -24px color-mix(in srgb, var(--s-deep) 60%, transparent); border: 1px solid color-mix(in srgb, var(--s-mid) 35%, transparent); }
.hs-float .hx-mono { display: block; color: var(--stone-text); margin-bottom: 4px; font-size: 11px; }
.hs-float b { color: var(--s-deep); }

/* Keys: the plan, the pin, the lead stream */
.hs-plan svg { display: block; width: 100%; height: auto; }
.hs-plan .wall { fill: none; stroke: var(--keys-deep); stroke-width: 3; }
.hs-plan .thin { fill: none; stroke: var(--keys-mid); stroke-width: 1.2; }
.hs-plan .swing { fill: none; stroke: var(--keys-mid); stroke-width: 1.2; stroke-dasharray: 3 4; }
.hs-plan text { font: 500 10px var(--mono); fill: var(--keys-deep); }
.hs-plan .pin { fill: var(--ember); }
.hs-plan .pin-ring { fill: none; stroke: var(--ember); stroke-width: 1.5; opacity: .5; }
.hs-leads { position: absolute; right: -36px; bottom: -28px; width: 250px; display: grid; gap: 8px; }
.hs-leads .hs-float { position: relative; }

/* Ledger: the sheet */
.hs-book { font-variant-numeric: tabular-nums; }
.hs-book table { width: 100%; border-collapse: collapse; font-size: 13px; background: repeating-linear-gradient(transparent 0 33px, color-mix(in srgb, var(--ledger-mid) 30%, transparent) 33px 34px); }
.hs-book th { text-align: left; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ledger-deep); padding: 10px 8px; border-bottom: 3px double var(--ledger-mid); }
.hs-book td { padding: 9px 8px; height: 34px; white-space: nowrap; }
.hs-book td:first-child, .hs-book th:first-child { padding-left: 26px; border-left: 0; box-shadow: inset 18px 0 0 -16.5px var(--ledger-mid); }
.hs-book td.n { text-align: right; font: 500 12.5px var(--mono); }
.hs-book td.ok { color: #1F6B43; font: 500 12px var(--mono); }
.hs-book td.wait { color: var(--stone-text); font: 500 12px var(--mono); }
.hs-stamp { position: absolute; right: 18px; bottom: 58px; width: 86px; height: 86px; border-radius: 50%; border: 2px solid var(--ember); color: var(--ember); display: grid; place-items: center; text-align: center; font: 600 11px/1.15 var(--mono); letter-spacing: .08em; transform: rotate(-12deg); background: rgba(255, 255, 255, .7); }
.hs-book__foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; font: 500 11.5px var(--mono); color: var(--ledger-deep); background: color-mix(in srgb, var(--ledger-light) 60%, #fff); }

/* Care: the call, the voice, the booking */
.hs-callcard { padding: 22px; text-align: center; }
.hs-callcard__ring { width: 96px; height: 96px; margin: 6px auto 14px; border-radius: 50%; display: grid; place-items: center; background: var(--care-light); color: var(--care-deep); box-shadow: 0 0 0 14px color-mix(in srgb, var(--care-light) 55%, transparent), 0 0 0 30px color-mix(in srgb, var(--care-light) 28%, transparent); }
.hs-callcard__ring svg { width: 40px; height: 40px; }
.hs-callcard h3 { font: 650 18px/1.2 var(--sans); color: var(--care-deep); margin-top: 22px; }
.hs-callcard p { color: var(--stone-text); font-size: 13.5px; }
.hs-wave { display: flex; justify-content: center; align-items: center; gap: 4px; height: 44px; margin: 14px 0; }
.hs-wave i { width: 4px; border-radius: 4px; background: var(--care-mid); height: var(--h); animation: hs-wave 1.1s var(--ease) infinite alternate; animation-delay: var(--d); }
@keyframes hs-wave { to { transform: scaleY(.35); } }
.hs-transcript { display: grid; gap: 8px; text-align: left; margin-top: 8px; }
.hs-transcript p { margin: 0; padding: 9px 12px; border-radius: 16px; font-size: 13.5px; color: var(--ink); }
.hs-transcript .in { background: var(--care-ground); border-top-left-radius: 4px; justify-self: start; max-width: 88%; }
.hs-transcript .out { background: var(--care-deep); color: #fff; border-top-right-radius: 4px; justify-self: end; max-width: 88%; }
.hs-transcript .hx-mono { display: block; font-size: 10.5px; opacity: .7; margin-bottom: 3px; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .hs-hero__grid { grid-template-columns: 1fr; }
  .hs-visual { margin-top: var(--s5); justify-self: center; }
  .hs-leads { right: -8px; bottom: -40px; width: 220px; }
  [data-sector="stays"] .hs-visual::before { left: -30px; right: -30px; }
  [data-sector="stays"] .hs-visual::after { right: -10px; }
  .hs-leak-grid { grid-template-columns: 1fr; }
  .hs-calc { grid-template-columns: 1fr; }
  .hs-calc__out { position: relative; top: 0; }
  .hs-report__grid, .hs-faq__grid { grid-template-columns: 1fr; }
  .hs-price__card { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hs-lang button { min-width: 34px; padding: 0 8px; }
  .hs-topr .hx-btn { display: none; }
  .hs-hero { padding-top: 96px; }
  .hs-phone { width: 300px; height: 580px; }
  .hs-chip-a { left: -14px; top: 96px; }
  .hs-cur { left: -8px; top: 430px; }
  .hs-incl { grid-template-columns: 1fr; }
  .hs-price__l, .hs-price__r { padding: var(--s5) var(--s4); }
  .hs-sheet { padding: 22px 20px; transform: none; }
  .hs-sheet__rows div { flex-direction: column; gap: 2px; }
  .hs-sheet__rows dd { text-align: left; }
  .hs-call__in { padding: var(--s6) var(--s4); }
  .hs-calc__in { padding: 14px 18px; }
}
@media (max-width: 560px) {
  .hs-book th:nth-child(3), .hs-book td:nth-child(3) { display: none; }
  .hs-leads { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 12px; }
  .hs-stamp { width: 70px; height: 70px; font-size: 10px; right: 10px; }
}
@media (max-width: 760px) { .hs-hero .hs-motif { opacity: .22; } }