/* ==========================================================================
   ROHTAK PROPERTY POINT
   Palette taken from the client's colour sheet (hh.pdf):
     Red       #ED1C24   brand colour — logo, pin, buttons, accents
     Amber     #ECA72C   highlights, lit windows, buttons on dark
     Off-white #FFFFFC   page background, text on dark
   The sheet has no dark colour, so text and the deepest sections use shades of
   the same red (--ink, --deep, --red-900). Nothing outside the red, amber and
   off-white families appears on the page. The whole ramp sits about five steps
   lighter than the first version: surfaces are true reds, not near-black maroon.
   Type: Fraunces (display) · Manrope (UI) · Tiro Devanagari Hindi (Hindi name)
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* brand */
  --red:         #ED1C24;
  --amber:       #ECA72C;
  --paper:       #FFFFFC;

  /* red range — 500 is the brand; the rest are shades of it */
  --red-500:     #ED1C24;
  --red-600:     #D6151D;
  --red-700:     #C8141C;
  --red-800:     #A8111A;
  --red-900:     #8A0D13;
  --deep:        #6B0A10;   /* deepest surface: footer, drawer, hero base */
  --ink:         #44090E;   /* text on light — 15:1 on off-white */

  /* amber range */
  --amber-500:   #ECA72C;
  --amber-400:   #F5C768;
  --amber-300:   #FBDFA0;
  --amber-soft:  #FBDFA0;   /* small amber text on the brighter reds (5:1+) */
  --amber-600:   #C98511;   /* stars on white cards — 3.0:1 */
  --amber-100:   #FDF4E1;   /* tint of amber on off-white */
  --amber-50:    #FFFAF0;
  --white:       #FFFFFF;

  /* Red for SMALL TYPE ON LIGHT. Brand red on off-white is 4.3:1 — fine for
     buttons, pins and large type, a hair under AA for 12px labels. This
     shade gives 6.0:1 and still reads as the same red. Buttons with small
     off-white labels use --red-600 (5.2:1) for the same reason. */
  --red-ink:     #C4121A;

  /* semantic */
  --bg:          var(--paper);
  --fg:          var(--ink);
  --rule:        rgba(68, 9, 14, .13);
  --rule-light:  rgba(255, 255, 252, .16);
  --rule-amber:  rgba(236, 167, 44, .5);

  /* type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-ui:      'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-hi:      'Tiro Devanagari Hindi', 'Nirmala UI', 'Mangal', serif;

  --step--1: clamp(.76rem, .74rem + .1vw, .82rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.1rem + .38vw, 1.42rem);
  --step-2:  clamp(1.5rem, 1.34rem + .8vw, 2.05rem);
  --step-3:  clamp(1.9rem, 1.55rem + 1.8vw, 3rem);
  --step-4:  clamp(2.35rem, 1.7rem + 3.2vw, 4.4rem);
  --step-5:  clamp(2.8rem, 1.6rem + 5.4vw, 6.3rem);

  /* layout */
  --gutter:     clamp(1rem, 4vw, 3.5rem);
  --shell:      min(1240px, 100% - 2 * var(--gutter));
  --shell-wide: min(1480px, 100% - 2 * var(--gutter));
  --section-y:  clamp(4.5rem, 9vw, 9rem);
  --header-h:   84px;
  --radius:     16px;

  --ease:       cubic-bezier(.22, .61, .36, 1);
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
}

/* ---- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}

::selection { background: var(--amber); color: var(--ink); }

/* red outline on light surfaces, amber on the dark ones */
:focus-visible {
  outline: 2px solid var(--focus, var(--red-600));
  outline-offset: 3px;
  border-radius: 4px;
}
.hero, .services, .why, .sell, .footer, .drawer, .mbar { --focus: var(--amber); }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- 3. Primitives ------------------------------------------------------ */
.shell      { width: var(--shell); margin-inline: auto; }
.shell-wide { width: var(--shell-wide); margin-inline: auto; }
.section    { padding-block: var(--section-y); position: relative; }

.ticker.is-idle .ticker__track,
.seal.is-idle svg:first-child { animation-play-state: paused; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red-ink);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: .85rem;
}
.eyebrow::before {
  content: "";
  width: 10px; height: 10px;
  flex: none;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: currentColor;
}
.why .eyebrow,
.sell .eyebrow { color: var(--amber); }
/* the hero and services reds are brighter now: use the softer amber for small text */
.hero .eyebrow,
.services .eyebrow { color: var(--amber-soft); }

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  max-width: 58ch;
  margin: 0;
  color: inherit;
  color: color-mix(in srgb, currentColor 82%, transparent);
}

.script {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--red-ink);
}
.hero .script, .services .script, .why .script, .sell .script { color: var(--amber); }

.stars { color: var(--amber-600); letter-spacing: .12em; }

/* ---- 4. Buttons --------------------------------------------------------- */
.btn {
  --btn-fg: var(--paper);
  --btn-bg: var(--red-600);
  --btn-fill: var(--amber);
  --btn-fill-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 1rem 1.75rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bg);
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
  transition: color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--btn-fill);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.btn:hover::after, .btn:focus-visible::after { transform: translateY(0); }
.btn:hover, .btn:focus-visible { color: var(--btn-fill-fg); border-color: var(--btn-fill); }
.btn:active { transform: translateY(1px); }
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }
.btn .ico { width: 16px; height: 16px; fill: currentColor; flex: none; }

/* amber button for the dark sections */
.btn--amber { --btn-bg: var(--amber); --btn-fg: var(--ink); --btn-fill: var(--paper); }
.btn--ghost { --btn-bg: transparent; --btn-fg: currentColor; border-color: currentColor; }
.btn--line  { --btn-bg: transparent; --btn-fg: var(--ink); border-color: rgba(68,9,14,.3); --btn-fill: var(--ink); --btn-fill-fg: var(--paper); }
.btn--sm    { padding: .72rem 1.2rem; font-size: .7rem; }

/* text link with sliding underline */
.link-u {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-ink);
  padding-bottom: .3rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .45s var(--ease-out), color .3s var(--ease);
}
.link-u:hover { background-size: 0% 1.5px; }
.drawer .link-u { color: var(--amber); }

/* ---- 5. Logo lockup ----------------------------------------------------- */
.lockup { display: inline-flex; align-items: center; gap: .75rem; }
.lockup__mark { width: 46px; height: 46px; flex: none; }
.lockup__mark .badge { fill: var(--red); }
.lockup__mark .pin   { fill: var(--paper); }
.lockup__type { display: grid; gap: .2rem; line-height: 1; }
.lockup__city {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--city, var(--red-ink));
  transition: color .4s var(--ease);
}
.lockup__word {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.32rem;
  letter-spacing: -.01em;
  color: var(--word, var(--ink));
  white-space: nowrap;
  transition: color .4s var(--ease);
}
.lockup--footer { --city: var(--amber); --word: var(--paper); }

/* ---- 6. Header ---------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--ease), height .5s var(--ease), border-color .5s var(--ease);
}
.header__in {
  width: var(--shell-wide);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.header--over { --city: var(--amber); --word: var(--paper); }
.header--over .nav__link { color: rgba(255, 255, 252, .92); }

.header.is-stuck {
  height: 70px;
  background: rgba(255, 255, 252, .96);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--rule);
}
@media (max-width: 900px) {
  .header.is-stuck { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.header.is-stuck .nav__link { color: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.3rem); }
.nav__link {
  position: relative;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem 0;
  transition: color .35s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease-out);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.header--over .nav__link:hover, .header--over .nav__link.is-active { color: var(--amber-400); }
.header.is-stuck .nav__link:hover, .header.is-stuck .nav__link.is-active { color: var(--red-ink); }
.header.is-stuck .nav__link::after { background: var(--red); }

.header__cta { --btn-bg: var(--amber); --btn-fg: var(--ink); --btn-fill: var(--paper); padding: .8rem 1.3rem; letter-spacing: .08em; }
.header.is-stuck .header__cta { --btn-bg: var(--red-600); --btn-fg: var(--paper); --btn-fill: var(--amber); }

/* burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  align-items: center; justify-content: center;
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  cursor: pointer;
  color: var(--ink);
  transition: color .4s var(--ease);
}
/* backed by a dark disc: the photo can sit right behind this button */
.header--over .burger { color: var(--paper); background: rgba(68,9,14,.5); }
.header.is-stuck .burger { color: var(--ink); }
.burger span {
  display: block; position: relative;
  width: 18px; height: 1.5px; background: currentColor;
  transition: background .25s var(--ease);
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0;
  width: 18px; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease-out);
}
.burger span::before { top: -6px; }
.burger span::after  { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }
/* the drawer is dark whatever the scroll position, so the header must read light over it */
body.is-locked .burger { color: var(--paper); }
body.is-locked .header { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; --city: var(--amber); --word: var(--paper); }

/* mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 89;
  background: var(--deep);
  display: grid;
  align-content: center;
  align-content: safe center;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6rem var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .65s var(--ease-out);
  pointer-events: none;
}
.drawer.is-open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.drawer__list { display: grid; gap: .1rem; }
.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 1.1rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule-light);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7.4vw, 2.5rem);
  color: var(--paper);
}
.drawer__link i {
  font-family: var(--font-ui);
  font-style: normal;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--amber);
}
.drawer__foot { margin-top: 2.4rem; display: grid; gap: 1.1rem; justify-items: start; }
.drawer__hi { margin: .6rem 0 0; font-family: var(--font-hi); font-size: 1.3rem; color: rgba(255, 255, 252, .62); }
@media (max-height: 760px) {
  .drawer { padding-top: 5rem; padding-bottom: 2rem; }
  .drawer__link { padding: .55rem 0; font-size: clamp(1.4rem, 6vw, 2.05rem); }
  .drawer__foot { margin-top: 1.6rem; }
}

/* ---- 7. Hero ------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: end;
  background: linear-gradient(100deg, var(--deep) 0%, var(--red-900) 42%, var(--red-800) 100%);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }

/* The office photo fills the right of the hero and fades into the red on its
   left edge. A red screen-blend lifts the black night sky to brand red while
   the lights stay bright, so the photo reads as part of the palette. */
.hero__photo {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(58%, 900px);
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40%);
          mask-image: linear-gradient(90deg, transparent 0, #000 40%);
}
.hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 75%;   /* keeps the gate sign in frame */
  transform-origin: 60% 40%;
  animation: herosettle 2.6s var(--ease-out) both;
}
.hero__photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(214,21,29,.92) 0%, rgba(214,21,29,.55) 42%, rgba(214,21,29,.18) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes herosettle { from { transform: scale(1.07); } to { transform: scale(1); } }

/* a touch of shade on the left (copy) and at the top (nav) so off-white text
   keeps at least 5:1 against the red */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(90,9,13,.5) 0%, rgba(90,9,13,.22) 40%, rgba(90,9,13,0) 62%),
    linear-gradient(180deg, rgba(90,9,13,.6) 0, rgba(90,9,13,0) 130px, rgba(90,9,13,0) 72%, rgba(107,10,16,.75) 100%);
}

.hero__caption {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(10.5rem, 24vh, 14rem);
  z-index: 1;
  display: flex; align-items: center; gap: .7rem;
  margin: 0;
  padding: .65rem 1.15rem .65rem .85rem;
  border: 1px solid var(--rule-amber);
  border-radius: 999px;
  background: rgba(90,9,13,.66);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: .84rem; line-height: 1.3;
  color: rgba(255,255,252,.94);
}
.hero__caption svg { width: 20px; height: 20px; flex: none; fill: var(--amber); }
.hero__caption b {
  display: block;
  font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber-soft);
}
.hero__in {
  width: var(--shell-wide);
  margin-inline: auto;
  padding-block: clamp(7rem, 16vh, 10rem) clamp(3.5rem, 9vh, 6rem);
}
.hero h1 {
  font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
  max-width: 15ch;
  margin-bottom: 1.5rem;
  color: var(--paper);
}
.hero h1 em { font-style: italic; color: var(--amber); }
.hero__sub { max-width: 46ch; margin: 0; color: rgba(255,255,252,.92); font-size: var(--step-1); line-height: 1.55; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }

.rating {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 2rem;
  padding: .55rem 1.1rem .55rem .9rem;
  border: 1px solid var(--rule-amber);
  border-radius: 999px;
  font-size: .82rem;
  letter-spacing: .04em;
  color: rgba(255,255,252,.92);
  background: rgba(90,9,13,.6);
  transition: border-color .35s var(--ease), background .35s var(--ease);
}
.rating .stars { color: var(--amber); font-size: .95rem; }
.rating b { color: var(--paper); }
.rating:hover { border-color: var(--amber); background: rgba(236,167,44,.16); }

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 6vh, 4rem);
  display: grid;
  justify-items: center;
  gap: .9rem;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,252,.7);
}
.hero__scroll i { display: block; width: 1px; height: 56px; background: rgba(255,255,252,.26); position: relative; overflow: hidden; }
.hero__scroll i::after {
  content: ""; position: absolute; inset: 0;
  background: var(--amber);
  animation: scrollcue 2.4s var(--ease) infinite;
}
@keyframes scrollcue { 0% { transform: translateY(-100%); } 60%,100% { transform: translateY(100%); } }

/* marquee strip — amber under the red hero */
.ticker {
  background: var(--amber);
  color: var(--ink);
  overflow: hidden;
  padding-block: .95rem;
}
.ticker__track {
  display: flex;
  gap: 3.2rem;
  width: max-content;
  animation: ticker 36s linear infinite;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.ticker__track span { display: inline-flex; align-items: center; gap: 3.2rem; }
.ticker__track span::after { content: "◆"; color: var(--red-700); font-size: .55em; letter-spacing: 0; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ---- 8. Quick finder ---------------------------------------------------- */
.finder { background: var(--amber-100); padding-block: clamp(3.2rem, 6.5vw, 5.5rem); }
.finder .eyebrow { margin-bottom: 1rem; }
.finder__line {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.55;
  letter-spacing: -.01em;
  color: var(--ink);
}
.finder__line > span, .finder__budget > span { margin-right: .28em; }
.finder__budget { display: inline; }
.finder__line select,
.finder__line input {
  font-family: var(--font-display);
  font-style: italic;
  font-size: inherit;
  line-height: 1.2;
  color: var(--red-ink);
  background-color: transparent;
  border: 0;
  border-bottom: 2px solid var(--red);
  border-radius: 0;
  padding: 0 .1em .05em;
  margin-right: .28em;
  cursor: pointer;
  field-sizing: content;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.finder__line select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 1.05em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C4121A' stroke-width='1.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .1em center;
  background-size: .5em auto;
}
.finder__line select option { font-style: normal; color: var(--ink); }
.finder__line input { width: 6.4em; cursor: text; }
@supports (field-sizing: content) {
  .finder__line input { width: auto; min-width: 3ch; }
}
.finder__line input::placeholder { color: var(--red-ink); opacity: .6; }
.finder__line select:hover, .finder__line input:hover,
.finder__line select:focus, .finder__line input:focus { background-color: rgba(237,28,36,.08); outline: none; border-bottom-color: var(--ink); }
.finder__go { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; }
.finder__note { font-size: .86rem; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.finder__note a { font-weight: 700; color: var(--red-ink); border-bottom: 1px solid currentColor; white-space: nowrap; }

/* ---- 9. Statement / pillars -------------------------------------------- */
.statement { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: end; }
.statement__head h2 { font-size: var(--step-4); }
.statement__hi { margin: 1.2rem 0 0; font-family: var(--font-hi); font-size: var(--step-2); color: var(--red-ink); line-height: 1.3; }
.statement__body { display: grid; gap: 1.4rem; }
.statement__body em { font-style: italic; font-family: var(--font-display); color: var(--red-ink); }

.pillars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  border-top: 1px solid var(--rule);
}
.pillar {
  padding: 2.2rem 1.6rem 2.2rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.pillar + .pillar { padding-left: clamp(1.2rem, 2.6vw, 2.4rem); }
.pillar + .pillar::before {
  content: "";
  position: absolute; left: 0; top: 2.2rem; bottom: 2.2rem;
  width: 1px; background: var(--rule);
}
.pillar h3 { font-size: var(--step-2); margin-bottom: .4rem; }
.pillar p {
  margin: 0;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--red-ink);
}

/* ---- 10. Services ------------------------------------------------------- */
.services { background: linear-gradient(160deg, var(--red-700) 0%, var(--red-800) 100%); color: var(--paper); overflow: hidden; }
.services::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 6% 0%, rgba(237,28,36,.55), transparent 64%),
    radial-gradient(50% 55% at 100% 100%, rgba(236,167,44,.2), transparent 62%);
  pointer-events: none;
}
.services > * { position: relative; }
.services__top {
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: end;
  padding-bottom: clamp(2.8rem, 5.5vw, 4.5rem);
}
.services__top h2 { font-size: var(--step-4); max-width: 14ch; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(.9rem, 1.6vw, 1.4rem);
}
.scard {
  position: relative;
  display: grid;
  gap: .8rem;
  align-content: start;
  padding: clamp(1.6rem, 2.8vw, 2.4rem);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  background: rgba(255,255,252,.05);
  transition: border-color .45s var(--ease), background .45s var(--ease), transform .45s var(--ease-out);
}
.scard:hover { border-color: var(--rule-amber); background: rgba(236,167,44,.1); transform: translateY(-4px); }
.scard__ico {
  width: 38px; height: 38px;
  fill: none; stroke: var(--amber); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  margin-bottom: .4rem;
}
.scard__n {
  position: absolute; top: clamp(1.4rem, 2.6vw, 2.2rem); right: clamp(1.4rem, 2.6vw, 2.2rem);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: rgba(255,255,252,.38);
  line-height: 1;
}
.scard h3 { font-size: var(--step-1); }
.scard p { margin: 0; color: rgba(255,255,252,.84); font-size: .96rem; }
.scard__cta {
  margin-top: .4rem;
  justify-self: start;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-soft);
  display: inline-flex; gap: .45rem;
  transition: gap .35s var(--ease), color .3s var(--ease);
}
.scard__cta:hover { gap: .8rem; color: var(--paper); }

/* how a deal moves */
.steps { margin-top: clamp(3.5rem, 7vw, 5.5rem); }
.steps__title {
  font-family: var(--font-ui);
  font-size: var(--step--1); font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,252,.78);
  margin-bottom: 1.6rem;
}
.steps__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: relative;
}
.steps__list::before {
  content: "";
  position: absolute; left: 23px; right: 10%; top: 23px;
  height: 1px;
  background: linear-gradient(90deg, var(--amber), rgba(236,167,44,.18));
}
.steps__list li { display: grid; gap: .9rem; justify-items: start; padding-right: 1rem; position: relative; }
.steps__list b {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--amber);
  background: var(--red-800);
  font-family: var(--font-display); font-weight: 400; font-size: 1rem;
  color: var(--amber-soft);
}
.steps__list li:last-child b { background: var(--amber); color: var(--ink); }
.steps__list span { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }

/* ---- 11. Listings ------------------------------------------------------- */
.listings { background: var(--amber-50); }
.listings__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.2rem);
}
.listings__head h2 { font-size: var(--step-4); }

.filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter {
  padding: .6rem 1.15rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  background: transparent;
  border: 1.5px solid rgba(68,9,14,.2);
  border-radius: 999px;
  cursor: pointer;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease);
}
.filter:hover { border-color: var(--red); color: var(--red-ink); }
.filter.is-active { background: var(--red-600); border-color: var(--red-600); color: var(--paper); }
.filter__n { opacity: .65; font-weight: 600; margin-left: .25em; }

.lgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
.lgrid__empty { margin: 1rem 0 0; color: color-mix(in srgb, var(--ink) 80%, transparent); }
.lgrid__empty a { color: var(--red-ink); font-weight: 700; border-bottom: 1px solid currentColor; }

.lcard {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(68,9,14,.07), 0 14px 34px -18px rgba(90,9,13,.35);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
}
.lcard:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(68,9,14,.07), 0 26px 50px -22px rgba(90,9,13,.5); }
.lcard.is-hidden { display: none; }
.lcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;   /* the posters are square */
  padding: 0; border: 0;
  background: var(--red-900);
  cursor: pointer;
  overflow: hidden;
}
.lcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.lcard:hover .lcard__media img { transform: scale(1.05); }
.lcard__status {
  position: absolute; top: 1rem; left: 1rem;
  padding: .38rem .8rem;
  border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  background: var(--amber); color: var(--ink);
}
.lcard__status--rent { background: var(--paper); }
.lcard__status--done { background: var(--deep); color: var(--paper); }
/* flex column so size/price and the buttons line up across a row even when
   one title wraps to two lines */
.lcard__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.4rem 1.45rem; flex: 1; }
.lcard__tag { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red-ink); }
.lcard__title { font-size: var(--step-2); line-height: 1.12; }
.lcard__loc { display: flex; align-items: center; gap: .45rem; margin: 0; font-size: .92rem; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.lcard__loc svg { width: 14px; height: 14px; flex: none; fill: var(--red); }
.lcard__facts {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem;
  margin: auto 0 0; padding-top: .85rem;
  border-top: 1px solid var(--rule);
  font-size: .86rem;
}
.lcard__facts span:last-child { font-weight: 700; }
.lcard__actions { display: flex; gap: .6rem; margin-top: .9rem; }
.lcard__actions .btn { flex: 1; }

.listings__more {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}

/* ---- 12. Why us --------------------------------------------------------- */
.why { background: var(--red-900); color: var(--paper); }
.why__head { display: grid; gap: 1.3rem; max-width: 62ch; margin-bottom: clamp(2.6rem, 5vw, 4.2rem); }
.why__head h2 { font-size: var(--step-4); }

.why__list { border-top: 1px solid var(--rule-light); }
.whyrow {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: start;
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-bottom: 1px solid var(--rule-light);
  position: relative;
  transition: padding-left .5s var(--ease-out);
}
.whyrow::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--amber);
  transform: scaleY(0); transform-origin: top;
  transition: transform .55s var(--ease-out);
}
.whyrow:hover { padding-left: 1.4rem; }
.whyrow:hover::before { transform: scaleY(1); }
.whyrow__n { font-family: var(--font-display); font-size: var(--step-2); color: var(--amber); line-height: 1; }
.whyrow h3 { font-size: var(--step-2); }
.whyrow p { margin: 0; color: rgba(255,255,252,.78); }

.assure {
  margin-top: clamp(2.6rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
  border-radius: var(--radius);
  overflow: hidden;
}
.assure__item { background: var(--red-900); padding: clamp(1.4rem, 3vw, 2.2rem); display: grid; gap: .45rem; }
.assure__n { font-family: var(--font-display); font-size: var(--step-3); color: var(--paper); line-height: 1; }
.assure__item span:last-child {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber-400);
}

/* ---- 13. Reviews -------------------------------------------------------- */
.reviews { background: var(--amber-100); }
.reviews__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-bottom: clamp(2.6rem, 5vw, 4rem);
}
.reviews__score {
  display: grid; justify-items: center; gap: .35rem;
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.8rem, 3.4vw, 2.8rem);
  border-radius: 999px 999px var(--radius) var(--radius);
  background: var(--deep);
  box-shadow: 0 24px 44px -26px rgba(90,9,13,.7);
  text-align: center;
}
.reviews__score strong { font-family: var(--font-display); font-weight: 400; font-size: var(--step-5); line-height: .95; color: var(--paper); }
.reviews__score .stars { font-size: 1.25rem; color: var(--amber); }
.reviews__count { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--amber-400); }
.reviews__head h2 { font-size: var(--step-3); line-height: 1.15; max-width: 24ch; }
.reviews__by { margin: 1rem 0 0; font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red-ink); }

.rgrid { columns: 4 230px; column-gap: clamp(.9rem, 1.6vw, 1.3rem); }
.rcard {
  break-inside: avoid;
  margin: 0 0 clamp(.9rem, 1.6vw, 1.3rem);
  padding: 1.4rem 1.4rem 1.3rem;
  background: var(--paper);
  border: 1px solid rgba(236,167,44,.4);
  border-radius: var(--radius);
  display: grid; gap: .7rem;
  transition: border-color .35s var(--ease), transform .45s var(--ease-out);
}
.rcard:hover { border-color: var(--red); transform: translateY(-3px); }
.rcard .stars { font-size: .85rem; }
.rcard blockquote { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.35; }
.rcard figcaption {
  font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
  display: flex; align-items: center; gap: .5rem;
}
.rcard figcaption::after { content: "· Google"; font-weight: 600; letter-spacing: .08em; text-transform: none; color: var(--red-ink); }
.reviews__cta { margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; }

/* ---- 14. Sell band ------------------------------------------------------ */
.sell {
  overflow: hidden;
  /* dark red on the left, where the copy is, opening to full brand red on the right */
  background: linear-gradient(105deg, var(--red-900) 0%, var(--red-700) 42%, var(--red-500) 100%);
  color: var(--paper);
  isolation: isolate;
}
.sell::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(255,255,252,.07) 38px 39px),
    radial-gradient(55% 110% at 88% 50%, rgba(236,167,44,.38), transparent 64%);
}
.sell__in {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.sell h2 { font-size: var(--step-4); max-width: 17ch; margin-bottom: 1.3rem; }
.sell__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }

.seal {
  justify-self: center;
  width: min(290px, 70vw);
  aspect-ratio: 1;
  position: relative;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,252,.5);
}
.seal::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px dashed rgba(255,255,252,.5); }
.seal svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 48s linear infinite; }
.seal__text { font-family: var(--font-ui); font-size: 11px; font-weight: 700; letter-spacing: 3.2px; fill: var(--paper); }
.seal__mark { width: 38%; fill: var(--paper); position: relative; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- 15. Contact -------------------------------------------------------- */
.contact { background: var(--paper); }
.contact__in {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.4rem, 5vw, 5rem);
}
.contact h2 { font-size: var(--step-4); max-width: 13ch; margin-bottom: 1.2rem; }
.contact__detail { display: grid; gap: 1.4rem; margin: 2.4rem 0 0; }
.contact__detail div { display: grid; gap: .2rem; }
.contact__detail dt { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--red-ink); }
.contact__detail dd { margin: 0; font-size: var(--step-1); font-family: var(--font-display); line-height: 1.4; overflow-wrap: anywhere; }
.contact__detail .link-u { font-family: var(--font-ui); font-size: .78rem; }
.contact__addr { font-size: var(--step-0) !important; }

.form {
  display: grid; gap: 1.1rem;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid rgba(236,167,44,.45);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 1px 2px rgba(68,9,14,.05), 0 24px 50px -30px rgba(90,9,13,.4);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 82%, transparent);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: .9rem 1rem;
  background: var(--amber-50);
  border: 1.5px solid rgba(236,167,44,.28);
  border-radius: 10px;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(237,28,36,.14);
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--red-700); background: #FFF1EF; }
.field__err { font-size: .76rem; font-weight: 600; color: var(--red-700); display: none; }
.field.is-invalid .field__err { display: block; }
.form__note { margin: 0; font-size: .8rem; line-height: 1.6; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.form__ok {
  display: none;
  padding: .9rem 1.1rem;
  border: 1px solid var(--amber);
  background: var(--amber-100);
  border-radius: 10px;
  font-size: .9rem;
}
.form__ok.is-shown { display: block; }
.form .btn { justify-self: start; }

.map {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  background: var(--amber-100);
  border: 1px solid rgba(236,167,44,.45);
  box-shadow: 0 24px 50px -30px rgba(90,9,13,.45);
}
.map iframe { width: 100%; height: clamp(320px, 42vw, 460px); border: 0; }
.map__btn { position: absolute; left: clamp(1rem, 2.4vw, 1.6rem); bottom: clamp(1rem, 2.4vw, 1.6rem); box-shadow: 0 10px 26px rgba(68,9,14,.35); }

/* ---- 16. Footer --------------------------------------------------------- */
.footer { background: var(--deep); color: rgba(255,255,252,.8); padding-block: clamp(3rem, 6vw, 5rem) 2rem; }
.footer__top {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: 2.8rem;
  border-bottom: 1px solid var(--rule-light);
}
@media (min-width: 901px) {
  .footer__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
}
.footer h4 {
  font-family: var(--font-ui);
  font-size: .66rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 1.1rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; font-size: .92rem; overflow-wrap: anywhere; }
.footer a { transition: color .3s var(--ease); }
.footer a:hover { color: var(--amber-400); }
.footer__hi { margin: 1.2rem 0 0; font-family: var(--font-hi); font-size: 1.2rem; color: rgba(255,255,252,.9); }
.footer__blurb { max-width: 40ch; margin: .8rem 0 0; font-size: .92rem; color: rgba(255,255,252,.72); }
.footer__bot {
  padding-top: 1.8rem;
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem;
  justify-content: space-between;
  font-size: .78rem; letter-spacing: .05em;
  color: rgba(255,255,252,.68);
}

/* ---- 17. Listing modal -------------------------------------------------- */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: rgba(68,9,14,.84);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadein .35s var(--ease);
}
.modal__panel {
  position: relative;
  width: min(980px, 100%);
  max-height: calc(100vh - 2 * clamp(.75rem, 3vw, 2.5rem));
  max-height: calc(100dvh - 2 * clamp(.75rem, 3vw, 2.5rem));
  overflow: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  background: var(--white);
  border-radius: calc(var(--radius) + 6px);
  animation: rise .5s var(--ease-out);
}
.modal__media { background: var(--red-900); }
.modal__media img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 1 / 1; }
.modal__body { display: grid; gap: .8rem; align-content: start; padding: clamp(1.4rem, 3vw, 2.4rem); }
.modal__status { justify-self: start; padding: .36rem .8rem; border-radius: 999px; font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; background: var(--amber); color: var(--ink); }
.modal__status--rent { background: var(--amber-100); border: 1px solid var(--amber); }
.modal__status--done { background: var(--deep); color: var(--paper); }
.modal__body h3 { font-size: var(--step-3); padding-right: 2.2rem; }
.modal__loc { margin: 0; color: color-mix(in srgb, var(--ink) 82%, transparent); }
.modal__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: .6rem 0 0; padding: 1rem 0; border-block: 1px solid var(--rule); }
.modal__facts div { display: grid; gap: .15rem; }
.modal__facts dt { font-size: .64rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red-ink); }
.modal__facts dd { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.25; }
.chips { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.chips li { padding: .4rem .85rem; border-radius: 999px; background: var(--amber-100); font-size: .78rem; font-weight: 600; }
.modal__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .8rem; }
.modal__x {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--rule);
  color: var(--ink); cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.modal__x:hover { background: var(--ink); color: var(--paper); }
@keyframes fadein { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ---- 18. WhatsApp FAB + mobile contact bar ------------------------------ */
.wa {
  position: fixed;
  right: clamp(1rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 2.4vw, 2rem);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  height: 60px;
  border-radius: 999px;
  background: #25D366;
  color: #062E14;
  box-shadow: 0 10px 28px rgba(68,9,14,.34), 0 2px 6px rgba(68,9,14,.2);
  transition: max-width .45s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease);
  overflow: hidden;
  max-width: 60px;
}
.wa__ico { width: 60px; height: 60px; display: grid; place-items: center; flex: none; }
.wa__ico svg { width: 30px; height: 30px; fill: currentColor; }
.wa__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  padding-right: 1.4rem;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.wa:hover, .wa:focus-visible { max-width: 320px; transform: translateY(-2px); box-shadow: 0 16px 38px rgba(68,9,14,.4); }
.wa:hover .wa__label, .wa:focus-visible .wa__label { opacity: 1; }
.wa::before {
  content: "";
  position: absolute; left: 0; top: 0;
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid #25D366;
  animation: wapulse 2.8s var(--ease) infinite;
  pointer-events: none;
}
@keyframes wapulse { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

.mbar { display: none; }

/* ---- 19. Reveal on scroll ---------------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ticker__track, .seal svg:first-child, .wa::before, .hero__scroll i::after,
  .hero__photo img, .modal, .modal__panel { animation: none !important; }
}

/* ---- 20. Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .statement, .services__top, .sell__in, .contact__in { grid-template-columns: 1fr; }
  .whyrow { grid-template-columns: 3.6rem 1fr; }
  .whyrow p { grid-column: 2; }
  .seal { display: none; }
  .modal__panel { grid-template-columns: 1fr; }
  /* the copy column runs further across the photo at these widths — shade more */
  .hero::after {
    background:
      linear-gradient(90deg, rgba(90,9,13,.78) 0%, rgba(90,9,13,.55) 50%, rgba(90,9,13,.2) 100%),
      linear-gradient(180deg, rgba(90,9,13,.6) 0, rgba(90,9,13,0) 130px, rgba(90,9,13,0) 60%, rgba(107,10,16,.8) 100%);
  }
  .hero__photo { width: 62%; }
  .hero__caption { display: none; }
}

@media (max-width: 900px) {
  .nav, .header__cta { display: none; }
  .burger { display: inline-flex; }
  .assure { grid-template-columns: 1fr 1fr; }
  .steps__list { grid-template-columns: 1fr; gap: 1.1rem; }
  .steps__list::before { left: 23px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; background: linear-gradient(180deg, var(--amber), rgba(236,167,44,.18)); }
  .steps__list li { grid-template-columns: 46px 1fr; align-items: center; gap: 1rem; }
  .reviews__head { grid-template-columns: 1fr; }
  .reviews__score { justify-self: start; }
}

@media (max-width: 640px) {
  :root { --header-h: 68px; }
  .form__row { grid-template-columns: 1fr; }
  .pillar + .pillar { padding-left: 0; }
  .pillar + .pillar::before { display: none; }
  .hero__scroll { display: none; }
  .hero__actions .btn { flex: 1 1 auto; }
  .lockup__mark { width: 40px; height: 40px; }
  .lockup__word { font-size: 1.14rem; }
  .lockup__city { font-size: .56rem; }

  /* two big thumbs-first buttons replace the floating WhatsApp bubble */
  .wa { display: none; }
  .mbar {
    position: fixed; inset: auto 0 0; z-index: 100;
    display: grid; grid-template-columns: 1fr 1fr;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--deep);
    box-shadow: 0 -8px 24px rgba(68,9,14,.3);
  }
  .mbar a {
    display: flex; align-items: center; justify-content: center; gap: .55rem;
    height: 58px;
    font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  }
  .mbar svg { width: 18px; height: 18px; fill: currentColor; }
  .mbar__call { background: var(--amber); color: var(--ink); }
  .mbar__wa { background: #25D366; color: #062E14; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  body.is-locked .mbar { display: none; }
}

/* Portrait phones and tablets: the scene gets the top of the screen (house
   and pin in full view) and the copy sits below it on solid deep red, instead
   of printing text across the lit windows. The scene's foreground is the same
   deep red, so the join is seamless. */
@media (max-width: 1080px) and (orientation: portrait) {
  .hero { align-items: start; background: var(--deep); }
  .hero__bg { bottom: auto; height: 46vh; height: 46svh; }
  .hero__photo {
    left: 0; width: 100%;
    -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  }
  .hero__photo img { object-position: 50% 32%; }
  .hero::after {
    background: linear-gradient(180deg, rgba(90,9,13,.55) 0, rgba(90,9,13,0) 100px, rgba(90,9,13,0) 28vh, var(--deep) 46vh);
  }
  .hero__in { padding-block: calc(46vh - 2.2rem) 2.6rem; padding-block: calc(46svh - 2.2rem) 2.6rem; }
  .hero__scroll { display: none; }
  /* the office caption sits on the lower edge of the photo, above the copy */
  .hero__caption {
    display: flex;
    right: auto; left: var(--gutter);
    top: calc(46vh - 6.2rem); top: calc(46svh - 6.2rem);
    bottom: auto;
  }
}

@media (max-width: 380px) {
  .header__in { gap: .6rem; }
  .lockup { gap: .55rem; }
  .lockup__mark { width: 36px; height: 36px; }
  .lockup__word { font-size: 1.02rem; }
}

/* ---- 21. Poster cards + Instagram ------------------------------------- */
/* a poster that is not square is shown whole on a matte instead of cropped */
.lcard__media--contain img { object-fit: contain; }

.ico-ig { width: 16px; height: 16px; flex: none; fill: currentColor; margin-right: .1rem; }
.modal__ig { justify-self: start; margin-top: .6rem; }

/* ---- 22. Listings toolbar + paging ------------------------------------ */
.ltools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.4rem;
  margin: 0 0 clamp(1.2rem, 2.4vw, 1.8rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
.ltools__count {
  margin: 0 auto 0 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--red-ink);
}
.ltools__sel { display: flex; align-items: center; gap: .6rem; }
.ltools__sel[hidden] { display: none; }
.ltools__sel span {
  font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 80%, transparent);
}
.ltools__sel select {
  padding: .55rem 2.1rem .55rem .9rem;
  font-size: .86rem; font-weight: 600;
  color: var(--ink);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23C4121A' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat right .8rem center / .62rem auto;
  border: 1.5px solid rgba(68, 9, 14, .2);
  border-radius: 999px;
  -webkit-appearance: none; appearance: none;
  cursor: pointer;
  max-width: 62vw;
  transition: border-color .3s var(--ease);
}
.ltools__sel select:hover, .ltools__sel select:focus { border-color: var(--red); outline: none; }
.lgrid__morewrap { display: flex; justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.lgrid__morewrap .btn[hidden] { display: none; }

@media (max-width: 640px) {
  .ltools__count { flex: 1 0 100%; }
  .ltools__sel { flex: 1 1 100%; justify-content: space-between; }
  .ltools__sel select { flex: 1; max-width: none; }
}