/* ===========================================================
   I BUY REAL ESTATE — "Guides" (How to Rent / How to Buy)
   Additive stylesheet. Loaded AFTER areas.css and reuses its
   design tokens (colours, type, radius, easing) as-is.

   v2 — no photography dependency. Heroes and portal cards use
   gradient washes + a faint monogram, the same "photo not in
   yet" idiom areas.css already uses for hotel-card .ph. Drop
   real photography in later by adding an <img> back into
   .hub-hero, .area-hero .bg or .portal-card .thumb — the
   gradient is just a background sitting behind it.

   Components:
     1) .hub-hero / .area-hero.no-photo — gradient hero washes
     2) .portal-card                     — gradient choice cards
     3) .steps / .step                   — zig-zag icon timeline
   =========================================================== */

/* ---------- gradient hero washes (replace photography) ---------- */
.hub-hero{
  background:
    radial-gradient(circle at 86% 8%, rgba(198,161,91,.26), transparent 52%),
    radial-gradient(circle at 8% 96%, rgba(79,189,100,.18), transparent 50%),
    linear-gradient(158deg, var(--ink-deep), var(--green-dk) 130%);
}
.area-hero.no-photo .bg{
  background:
    radial-gradient(circle at 88% 10%, rgba(198,161,91,.28), transparent 52%),
    radial-gradient(circle at 6% 94%, rgba(79,189,100,.2), transparent 50%),
    linear-gradient(158deg, var(--ink-deep), var(--green-dk) 130%);
}
.area-hero.no-photo .bg::before{
  content:attr(data-mono); position:absolute; right:1%; bottom:-9%; z-index:0;
  font-family:'Fraunces', serif; font-weight:700; font-style:italic;
  font-size:min(46vw, 460px); line-height:1; color:rgba(255,255,255,.045);
  pointer-events:none; user-select:none;
}
/* photography can still be dropped in later — hide the wash + mono once a real <img> is present */
.area-hero.no-photo .bg:has(img)::before{ display:none; }
.area-hero.no-photo .bg:has(img){ background:none; }
/* anchor the crop to the top so tower tops stay in frame instead of being cut by center-crop */
.area-hero.no-photo .bg img{ object-position: top center; }

/* ---------- hub hero: optional photo layer (falls back to gradient wash above) ---------- */
.hub-hero .bg{ position:absolute; inset:0; z-index:0; }
.hub-hero .bg img{ width:100%; height:100%; object-fit:cover; object-position: top center; filter:saturate(1.08) contrast(1.04); }
.hub-hero .bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,31,20,.15) 0%, rgba(11,31,20,.5) 50%, rgba(8,22,14,.95) 100%),
             radial-gradient(circle at 86% 8%, rgba(198,161,91,.16), transparent 52%);
}
.hub-hero .wrap{ position:relative; z-index:1; }
.portal-grid{ position:relative; display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:26px; padding-top:8px; }
.portal-or{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; z-index:3;
  background:var(--ink-deep); color:var(--gold-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:14px;
  box-shadow:0 12px 30px rgba(11,31,20,.28), 0 0 0 6px var(--paper);
}
.portal-card{
  display:block; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .35s var(--ease), transform .35s var(--ease), border-color .35s;
}
.portal-card:hover{ box-shadow:0 30px 60px rgba(11,31,20,.2); transform:translateY(-6px); border-color:transparent; }
.portal-card .thumb{
  aspect-ratio:5/4; overflow:hidden; position:relative;
  display:flex; align-items:center; justify-content:center;
  background: var(--portal-grad, linear-gradient(135deg, var(--green-dk), var(--ink-deep)));
}
.portal-card .thumb img{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.06) contrast(1.03); transition:transform .7s var(--ease);
}
.portal-card:hover .thumb img{ transform:scale(1.07); }
.portal-card .thumb:has(img)::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, transparent 40%, rgba(11,31,20,.78) 100%);
}
.portal-card .thumb:has(img) .mono{ display:none; }
.portal-card.rent .thumb{ --portal-grad: radial-gradient(circle at 78% 18%, rgba(126,215,142,.28), transparent 55%), linear-gradient(150deg, var(--green-dk), var(--ink-deep) 120%); }
.portal-card.buy  .thumb{ --portal-grad: radial-gradient(circle at 78% 18%, rgba(198,161,91,.34), transparent 55%), linear-gradient(150deg, #2b2416, var(--ink-deep) 120%); }
.portal-card.mortgage .thumb{ --portal-grad: radial-gradient(circle at 78% 18%, rgba(140,182,214,.3), transparent 55%), linear-gradient(150deg, #1c2a3a, var(--ink-deep) 120%); }
.portal-card.own .thumb{ --portal-grad: radial-gradient(circle at 78% 18%, rgba(150,200,160,.28), transparent 55%), linear-gradient(150deg, #1c3324, var(--ink-deep) 120%); }
.portal-card.sell .thumb{ --portal-grad: radial-gradient(circle at 78% 18%, rgba(215,160,120,.3), transparent 55%), linear-gradient(150deg, #3a2418, var(--ink-deep) 120%); }
.portal-card .thumb .mono{
  position:absolute; left:-4%; bottom:-16%; font-family:'Fraunces',serif; font-weight:700; font-style:italic;
  font-size:min(28vw, 220px); line-height:1; color:rgba(255,255,255,.07); pointer-events:none;
}
.portal-card .thumb .glyph{
  position:relative; z-index:1; width:64px; height:64px; border-radius:50%;
  background:rgba(255,255,255,.1); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.portal-card:hover .thumb .glyph{ transform:scale(1.08) rotate(-4deg); background:rgba(255,255,255,.16); }
.portal-card .thumb .glyph svg{ width:30px; height:30px; color:var(--gold-soft); }
.portal-card.rent .thumb .glyph svg{ color:var(--mint-soft); }
.portal-card .thumb .eyebrow{ position:absolute; left:22px; top:18px; z-index:1; color:var(--gold-soft); margin:0; }
.portal-card .thumb .eyebrow::before{ background:var(--gold-soft); }
.portal-card.rent .thumb .eyebrow{ color:var(--mint-soft); }
.portal-card.rent .thumb .eyebrow::before{ background:var(--mint-soft); }
.portal-card .body{ padding:28px 26px 30px; }
.portal-card h3{ font-size:25px; margin-bottom:10px; }
.portal-card p{ font-size:14.5px; color:var(--ink-soft); margin-bottom:20px; }
.portal-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; list-style:none; padding:0; }
.portal-tags span{ font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--green-dk); background:var(--paper-alt); border:1px solid var(--line); padding:6px 12px; border-radius:100px; }
.portal-card .go{ font-size:13px; font-weight:600; color:var(--green-dk); display:inline-flex; align-items:center; gap:7px; }
.portal-card .go svg{ width:14px; height:14px; transition:transform .25s var(--ease); }
.portal-card:hover .go svg{ transform:translateX(5px); }
@media (max-width:820px){
  .portal-grid{ grid-template-columns:1fr; gap:22px; }
  .portal-or{ display:none; }
}

/* ---------- step timeline — zig-zag, icon-led, ghost numerals ---------- */
.steps{ position:relative; margin-top:8px; padding-top:20px; }
.steps::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg, transparent, var(--line) 6%, var(--line) 94%, transparent);
  transform:translateX(-50%);
}
.step{ position:relative; display:grid; grid-template-columns:1fr 60px 1fr; align-items:start; gap:0 30px; }
.step .marker{
  grid-column:2; grid-row:1; justify-self:center; align-self:start; margin-top:24px;
  position:relative; z-index:2; width:14px; height:14px; border-radius:50%; flex-shrink:0;
  background:var(--paper); border:2px solid var(--gold);
  box-shadow:0 0 0 6px var(--paper);
  transition:background .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.step:hover .marker{ background:var(--gold); transform:scale(1.35); }
.step .card{
  grid-row:1; position:relative; overflow:hidden;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:24px 26px 22px; margin-bottom:26px;
  transition:box-shadow .3s var(--ease), transform .3s var(--ease), border-color .3s var(--ease);
}
.step .card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(11,31,20,.14); border-color:transparent; }
.step .card::after{
  content:attr(data-num); position:absolute; top:-14px; z-index:0;
  font-family:'Fraunces',serif; font-weight:700; font-size:64px; line-height:1;
  color:var(--paper-alt); pointer-events:none;
}
.step .card > *{ position:relative; z-index:1; }
.step .card h4{ font-family:'Fraunces',serif; font-size:18.5px; margin:0 0 7px; color:var(--green-dk); }
.step .card p{ font-size:14.5px; color:var(--ink-soft); margin:0; line-height:1.6; }
.step:nth-child(odd)  .card{ grid-column:1; text-align:right; }
.step:nth-child(odd)  .card::after{ right:16px; }
.step:nth-child(even) .card{ grid-column:3; text-align:left; }
.step:nth-child(even) .card::after{ left:16px; }

@media (max-width:900px){
  .steps::before{ left:26px; transform:none; }
  .step{ grid-template-columns:52px 1fr; gap:0 18px; }
  .step .marker{ grid-column:1; margin-top:26px; box-shadow:0 0 0 5px var(--paper); }
  .step .card{ grid-column:2 !important; text-align:left !important; margin-bottom:16px; }
  .step .card::after{ left:auto !important; right:14px; font-size:50px; }
}

/* ---------- horizontal step rail — swipeable card row everywhere; ---------- */
/* on wide viewports guides.js pins the section and scrubs it via scroll (Apple-style) */
.hscroll-steps{ position:relative; padding:56px 0; }
.hscroll-head{ margin-bottom:8px; display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hscroll-hint{ font-size:12px; color:var(--ink-soft); white-space:nowrap; display:flex; align-items:center; gap:6px; }
.hscroll-hint svg{ width:14px; height:14px; }
.hscroll-track{
  display:flex; gap:22px; align-items:stretch;
  overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding:16px 6vw 30px; margin:24px -6vw 0; scrollbar-width:none;
}
.hscroll-track::-webkit-scrollbar{ display:none; }
.hscroll-card{
  scroll-snap-align:start; flex:0 0 auto; width:min(360px,78vw);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px 26px; position:relative; overflow:hidden;
  transition:box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.hscroll-card:hover{ box-shadow:0 22px 46px rgba(11,31,20,.14); border-color:transparent; }
.hscroll-card::after{
  content:attr(data-num); position:absolute; top:-18px; right:14px; z-index:0;
  font-family:'Fraunces',serif; font-weight:700; font-size:68px; line-height:1; color:var(--paper-alt);
}
.hscroll-card > *{ position:relative; z-index:1; }
.hscroll-card .kicker{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:12px; }
.hscroll-card h4{ font-family:'Fraunces',serif; font-size:19px; margin:0 0 9px; color:var(--green-dk); }
.hscroll-card p{ font-size:14.5px; color:var(--ink-soft); line-height:1.62; margin:0; }
@media (min-width:901px){
  .hscroll-card{ width:340px; }
}
.yt-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:28px; }
.yt-card{ cursor:pointer; }
.yt-thumb{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  background:var(--ink-deep); box-shadow:0 16px 40px rgba(11,31,20,.14);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.yt-card:hover .yt-thumb{ transform:translateY(-4px); box-shadow:0 24px 50px rgba(11,31,20,.22); }
.yt-thumb img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); transition:transform .6s var(--ease); }
.yt-card:hover .yt-thumb img{ transform:scale(1.05); }
.yt-thumb::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,31,20,.05) 0%, rgba(11,31,20,.45) 100%); pointer-events:none; }
.yt-thumb iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.yt-thumb .play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:60px; height:60px; border-radius:50%; z-index:1;
  background:rgba(255,253,249,.92); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(11,31,20,.35);
  transition:background .25s var(--ease), transform .25s var(--ease);
}
.yt-card:hover .yt-thumb .play{ background:var(--gold); transform:translate(-50%,-50%) scale(1.08); }
.yt-thumb .play svg{ width:20px; height:20px; margin-left:3px; color:var(--ink-deep); }
.yt-card:hover .yt-thumb .play svg{ color:#fff; }
.yt-thumb .dur{
  position:absolute; right:10px; bottom:10px; z-index:1;
  background:rgba(11,31,20,.78); color:#fff; font-size:11.5px; font-weight:600;
  padding:3px 8px; border-radius:6px; letter-spacing:.02em;
}
.yt-card h4{ font-family:'Fraunces',serif; font-size:16px; font-weight:600; margin:14px 0 4px; color:var(--green-dk); line-height:1.3; }
.yt-card .yt-meta{ font-size:12.5px; color:var(--ink-soft); }
@media (max-width:700px){ .yt-grid{ grid-template-columns:1fr; } }

/* ---------- checklist grid ---------- */
.checklist{ display:grid; grid-template-columns:1fr 1fr; gap:2px 40px; margin-top:22px; }
.checklist div{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); }
.checklist div::before{ content:""; width:17px; height:17px; border:1.5px solid var(--gold); border-radius:5px; flex-shrink:0; }
@media (max-width:700px){ .checklist{ grid-template-columns:1fr; } }

/* ---------- simple budget / line-item table ---------- */
.budget-table{ margin-top:20px; border-top:1px solid var(--line); }
.budget-table .row{ display:flex; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); font-size:14.5px; color:var(--ink-soft); }
.budget-table .row b{ color:var(--green-dk); font-weight:600; white-space:nowrap; }
.budget-table .row.total{ font-family:'Fraunces',serif; font-size:17px; color:var(--green-dk); padding-top:16px; }
.budget-table .row.total b{ color:var(--gold); font-family:'Fraunces',serif; }



/* ---------- step cards: see the single consolidated block near the end of this file ---------- */

/* ---------- stat-row: Apple-style inline stats, no card chrome ---------- */
.stat-row{ display:flex; flex-wrap:wrap; margin-top:30px; }
.stat-row .item{
  flex:1 1 140px; padding:6px 26px; text-align:center; border-left:1px solid var(--line);
}
.stat-row .item:first-child{ border-left:none; padding-left:0; }
.stat-row b{
  position:relative; display:inline-block; font-family:'Fraunces',serif; font-weight:600;
  font-size:clamp(28px,4vw,40px); color:var(--green-dk); padding-bottom:16px; margin-bottom:8px;
}
.stat-row b::after{
  content:""; position:absolute; left:50%; bottom:0; width:0; height:2px; background:var(--gold);
  transform:translateX(-50%); transition:width .6s var(--ease);
}
.stat-row.in .item:nth-child(1) b::after, .stat-row.reveal.in .item:nth-child(1) b::after{ width:34px; transition-delay:.05s; }
.stat-row.in .item:nth-child(2) b::after, .stat-row.reveal.in .item:nth-child(2) b::after{ width:34px; transition-delay:.15s; }
.stat-row.in .item:nth-child(3) b::after, .stat-row.reveal.in .item:nth-child(3) b::after{ width:34px; transition-delay:.25s; }
.stat-row.in .item:nth-child(4) b::after, .stat-row.reveal.in .item:nth-child(4) b::after{ width:34px; transition-delay:.35s; }
.stat-row span{ display:block; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); line-height:1.4; }
@media (max-width:700px){
  .stat-row{ flex-direction:column; }
  .stat-row .item{ border-left:none !important; border-top:1px solid var(--line); padding:20px 0; text-align:left; }
  .stat-row .item:first-child{ border-top:none; }
}

/* ---------- example-note: light editorial callout with a ghost quotation mark ---------- */
.example-note{
  position:relative; margin-top:24px; padding:36px 40px 32px 44px;
  background:var(--paper-alt); border-radius:var(--radius); overflow:hidden;
}
.example-note::before{
  content:"\201C"; position:absolute; left:8px; top:-26px; z-index:0;
  font-family:'Fraunces',serif; font-weight:700; font-size:130px; line-height:1;
  color:var(--gold); opacity:.16; pointer-events:none;
}
.example-note::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg, var(--gold), var(--mint-soft));
}
.example-note > *{ position:relative; z-index:1; }
.example-note .kicker{ font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:14px; }
.example-note p{ font-size:16.5px; line-height:1.78; color:var(--ink); margin:0 0 10px; }
.example-note p:last-child{ margin-bottom:0; }
.example-note b{ color:var(--green-dk); font-weight:600; }

/* ---------- infinite marquee (safe, pure CSS loop — not a scroll-hijack) ---------- */
.marquee{
  overflow:hidden; white-space:nowrap; position:relative; padding:20px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track{ display:inline-flex; gap:48px; animation:marquee-scroll 32s linear infinite; will-change:transform; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-track span{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:19px;
  color:var(--ink-soft); white-space:nowrap; display:inline-flex; align-items:center; gap:12px;
}
.marquee-track span::after{ content:"\2022"; color:var(--gold); font-style:normal; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce){ .marquee-track{ animation:none; } }

/* ---------- WebGL ambient particle canvas in heroes (see guides-webgl.js) ---------- */
.hero-webgl{
  position:absolute; inset:0; z-index:1; width:100%; height:100%;
  pointer-events:none; display:block;
}
.hub-hero .wrap{ position:relative; z-index:2; }

/* ===========================================================
   v2 aesthetic pass — bigger type, less "card soup", more air.
   Everything below is an override on top of the base kit and
   the components already defined in this file. It cascades to
   all 6 pages since they all load guides.css after areas.css.
   =========================================================== */

/* ---------- rhythm & type scale ---------- */
.block{ padding:clamp(48px,7vw,84px) 0; }
.block h2{ font-size:clamp(26px,3.6vw,40px); letter-spacing:-.01em; line-height:1.12; }
.eyebrow{ font-size:11.5px; letter-spacing:.14em; font-weight:700; }
.lede-wide{ font-size:15px; line-height:1.65; }

/* ---------- glossary: from icon cards to a big editorial spec list ---------- */
.distance-cards{
  display:block; margin-top:36px; border-top:1px solid var(--line);
}
.distance-cards .card{
  display:grid; grid-template-columns:minmax(140px,1fr) 2.2fr; gap:28px; align-items:baseline;
  padding:28px 0; border-bottom:1px solid var(--line); border:0; border-radius:0;
  background:none; box-shadow:none !important; transform:none !important;
}
.distance-cards .card:hover{ background:var(--paper-alt); box-shadow:none !important; transform:none !important; }
.distance-cards .card .icon{ display:none; }
.distance-cards .card b{ font-size:clamp(21px,2.6vw,27px); }
.distance-cards .card.gold b{ color:var(--green-dk); } /* the gold/plain alternation stops mattering without card fills */
.distance-cards .card span{ font-size:15px; margin-top:0; color:var(--ink-soft); }
@media (max-width:640px){
  .distance-cards .card{ grid-template-columns:1fr; gap:6px; padding:22px 0; }
}

/* ---------- (step-card rules consolidated at the end of this file) ---------- */

/* ---------- example-note: drop the fill, keep the accent + the quote mark ---------- */
.example-note{ background:none; padding:6px 0 6px 34px; border-radius:0; }
.example-note::before{ font-size:110px; left:-6px; top:-30px; opacity:.12; }
.example-note p{ font-size:17px; }

/* ---------- stat-row: push the numerals bigger, this is the "spec sheet" moment ---------- */
.stat-row b{ font-size:clamp(32px,5vw,52px); }

/* ---------- portal cards: borderless, shadow-only separation, bigger title ---------- */
.portal-card{ border:0; box-shadow:0 2px 24px rgba(11,31,20,.07); }
.portal-card:hover{ box-shadow:0 34px 64px rgba(11,31,20,.2); }
.portal-card h3{ font-size:clamp(24px,2.6vw,29px); }

/* ---------- CTA band: a statement, not a floating card ---------- */
.cta{ flex-direction:column; align-items:flex-start; text-align:left; padding:clamp(48px,7vw,80px) clamp(32px,6vw,64px); }
.cta h3{ font-family:'Fraunces',serif; font-size:clamp(30px,5vw,50px); max-width:22ch; line-height:1.08; }
.cta .btn-group{ margin-top:30px; }

/* ---------- callout: same idea — thinner, lighter, less "boxed" ---------- */
.callout{ background:none; border:1px solid var(--line); border-left:3px solid var(--gold); color:var(--ink); }
.callout .eyebrow{ color:var(--gold); }
.callout .eyebrow::before{ background:var(--gold); }
.callout p{ color:var(--ink-soft); }

/* ---------- hero stats: match the bolder numeral scale used everywhere else now ---------- */
.area-hero .stat b{ font-size:clamp(34px,4.4vw,46px); }
.hub-hero h1{ font-size:clamp(40px,7.5vw,76px); }

/* ===========================================================
   v3 — real structural contrast, not just spacing tweaks.
   The steps section and the closing CTA become full-bleed dark
   chapters, edge to edge, breaking out of the centered column
   the rest of the page sits in. This is what actually reads as
   "different" when scrolling, the way Apple/Cartier alternate
   dramatic dark moments with calm reference sections.
   =========================================================== */

/* ---------- hero: taller, more cinematic ---------- */
.area-hero{ min-height:100vh; }
.hub-hero{ min-height:92vh; }

/* ---------- steps section: full-bleed dark chapter ---------- */
.block.alt:has(.step-cards){
  background:radial-gradient(circle at 85% 12%, rgba(198,161,91,.16), transparent 55%), linear-gradient(165deg, var(--ink-deep), var(--green-dk) 145%);
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding:clamp(84px,13vw,168px) 0;
}
.block.alt:has(.step-cards) .eyebrow{ color:var(--gold-soft); }
.block.alt:has(.step-cards) .eyebrow::before{ background:var(--gold-soft); }
.block.alt:has(.step-cards) h2{ color:#fff; }
.block.alt:has(.step-cards) .hscroll-hint{ color:rgba(255,253,249,.5); }
.block.alt:has(.step-cards) .step-card{ border-bottom-color:rgba(255,255,255,.14); }
.block.alt:has(.step-cards) .step-cards .step-card:first-child{ border-top-color:rgba(255,255,255,.14); }
.block.alt:has(.step-cards) .step-card .num-big{ color:var(--gold-soft); opacity:1; }
.block.alt:has(.step-cards) .step-card .kicker{ color:var(--mint-soft); }
.block.alt:has(.step-cards) .step-card h3{ color:#fff; }
.block.alt:has(.step-cards) .step-card p{ color:rgba(255,253,249,.72); }
.block.alt:has(.step-cards) .step-card::before{ background:linear-gradient(180deg,var(--gold-soft),var(--mint-soft)); }

/* ---------- CTA band: full-bleed edge to edge, a real statement, not a card ---------- */
.cta{
  position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
  border-radius:0; padding:clamp(64px,10vw,130px) 6vw;
}
.cta h3{ font-size:clamp(34px,6vw,64px); max-width:20ch; }

/* ===========================================================
   v4 — actual composition changes, not just color/spacing.
   Same palette, same type family. Different shapes.
   =========================================================== */

/* ---------- (step-card poster-spread removed — consolidated block at end of file) ---------- */

/* ---------- intro two-col: the note sits gently offset, no heavy drop-shadow glare ---------- */
.two-col{ grid-template-columns:1.7fr .95fr; gap:0; }
.two-col > div:first-child{ padding-right:6vw; }
.two-col .callout{ margin-top:6px; }
@media (max-width:900px){
  .two-col{ grid-template-columns:1fr; }
  .two-col > div:first-child{ padding-right:0; }
  .two-col .callout{ margin-top:26px; }
}

/* ---------- hero stat bar: pulled forward as a distinct floating glass panel, not a plain footer row ---------- */
.area-hero .stats{
  background:rgba(255,253,249,.08); border:1px solid rgba(255,255,255,.16);
  border-top:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  padding:26px 30px; margin-top:40px;
  display:inline-flex; max-width:100%;
}
.area-hero .stats .stat{ border-right-color:rgba(255,255,255,.18); }
@media (max-width:760px){ .area-hero .stats{ display:flex; flex-direction:column; padding:22px 24px; } .area-hero .stats .stat{ border-right:none; border-bottom:1px solid rgba(255,255,255,.18); padding-bottom:14px; margin-bottom:14px; } .area-hero .stats .stat:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; } }


/* ---------- CTA: split composition instead of stacked ---------- */
.cta{ flex-direction:row; align-items:center; justify-content:space-between; text-align:left; }
.cta .btn-group{ flex-direction:column; align-items:flex-start; margin-top:0; flex-shrink:0; }
@media (max-width:760px){ .cta{ flex-direction:column; align-items:flex-start; } .cta .btn-group{ margin-top:26px; flex-direction:row; flex-wrap:wrap; } }

/* ---------- bigger buttons everywhere (WhatsApp / team / listing CTAs) ---------- */
.cta a.btn, .cta a.btn-outline{ padding:19px 36px; font-size:15px; }
.btn-group{ gap:16px; }

/* ===========================================================
   FINAL, single source of truth for the step slideshow.
   One glass frame, fixed size, full-width slides inside it —
   every property the layout depends on is set explicitly here
   so nothing from an earlier draft can leak through again.
   =========================================================== */
.step-cards{
  position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; width:100vw;
  margin-top:28px;
  background:none; border:none; border-radius:0;
  display:flex; flex-direction:row; flex-wrap:nowrap; gap:0;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  height:min(78vh,760px);
}
.step-cards::-webkit-scrollbar{ display:none; }

.step-card{
  flex:0 0 100%; width:100%; height:100%; box-sizing:border-box;
  scroll-snap-align:start;
  background-color:transparent; border:none; box-shadow:none; border-radius:0; backdrop-filter:none; transform:none;
  background-size:cover; background-position:center; position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(20px,4vw,44px);
  grid-template-columns:none; grid-template-rows:none;
}
.step-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,31,20,.2) 0%, rgba(11,31,20,.55) 100%);
}
.step-inner{
  background:rgba(11,31,20,.72); border:1px solid rgba(255,255,255,.2);
  border-radius:var(--radius); padding:44px 48px; max-width:680px;
  display:flex; flex-direction:column; align-items:flex-start;
}
.step-card .kicker{
  font-size:12px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--mint-soft); display:block; margin-bottom:12px;
}
.step-card .num-big{
  display:block; font-family:'Fraunces',serif; font-weight:700; font-style:italic;
  font-size:clamp(42px,5.5vw,58px); line-height:1; color:var(--gold-soft); margin:0 0 12px;
  text-align:left;
}
.step-card h3{
  font-family:'Fraunces',serif; font-weight:600; color:#fff;
  font-size:clamp(21px,2.8vw,28px); margin:0 0 12px; max-width:20ch;
}
.step-card p{ font-size:15px; color:rgba(255,253,249,.9); line-height:1.6; margin:0; max-width:50ch; }

.step-card.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.step-card.reveal.in{ opacity:1; transform:none; }

/* the closing "all steps at once" slide — every card's full content, revealed together */
.step-summary{
  flex:0 0 100%; width:100%; height:100%; box-sizing:border-box;
  scroll-snap-align:start; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; padding:clamp(28px,4vw,44px) clamp(24px,5vw,56px);
}
.step-summary h4{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500; color:var(--gold-soft);
  font-size:clamp(20px,2.4vw,26px); margin:0 0 20px; flex-shrink:0;
}
.step-summary .mini-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:22px 26px;
  align-content:start;
}
.mini-step{
  background:rgba(255,253,249,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--radius-sm); padding:20px 20px 18px;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.mini-step:hover{ background:rgba(255,253,249,.11); border-color:rgba(255,255,255,.3); transform:translateY(-3px); }
.mini-step .n{
  display:block; font-family:'Fraunces',serif; font-weight:700; font-style:italic;
  font-size:26px; color:var(--gold-soft); line-height:1; margin-bottom:8px;
}
.mini-step .kicker{
  font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--mint-soft); display:block; margin-bottom:6px;
}
.mini-step h5{ font-family:'Fraunces',serif; font-weight:600; color:#fff; font-size:15.5px; margin:0 0 8px; line-height:1.25; }
.mini-step p{ font-size:12.5px; color:rgba(255,253,249,.68); line-height:1.5; margin:0; }
@media (max-width:640px){ .step-summary .mini-grid{ grid-template-columns:1fr 1fr; gap:18px; } }

/* prev/next arrows + dots, injected by guides.js */
.step-nav{ display:flex; align-items:center; justify-content:center; gap:18px; margin-top:22px; }
.step-count{ font-size:12px; font-weight:600; letter-spacing:.03em; color:rgba(255,253,249,.65); min-width:74px; text-align:center; }
.step-nav .arrow{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background:rgba(255,253,249,.08); border:1px solid rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .25s, border-color .25s, transform .2s;
}
.step-nav .arrow:hover{ background:rgba(255,253,249,.16); border-color:rgba(255,255,255,.4); }
.step-nav .arrow:active{ transform:scale(.94); }
.step-nav .arrow svg{ width:17px; height:17px; color:#fff; }
.step-nav .arrow[disabled]{ opacity:.3; cursor:default; pointer-events:none; }
.step-dots{ display:flex; gap:9px; }
.step-dots button{
  width:8px; height:8px; border-radius:50%; padding:0; border:none; cursor:pointer;
  background:rgba(255,255,255,.25); transition:background .3s var(--ease), transform .3s var(--ease);
}
.step-dots button.active{ background:var(--gold-soft); transform:scale(1.35); }

@media (max-width:640px){ .step-cards{ height:min(72vh,560px); } }

/* ---------- journey infographic: at-a-glance icon roadmap before the detailed steps ---------- */
.journey{ margin-top:36px; }
.journey-track{
  display:flex; align-items:flex-start; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:8px 2px 14px; scrollbar-width:thin;
}
.jp{ display:flex; flex-direction:column; align-items:center; flex:0 0 auto; width:118px; position:relative; text-align:center; }
.jp:not(:last-child)::after{
  content:""; position:absolute; top:26px; left:calc(50% + 30px); width:calc(100% - 4px); height:1px;
  background:var(--line);
}
.jp .ic{
  width:52px; height:52px; border-radius:50%; background:var(--paper-alt); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; margin-bottom:12px; position:relative; z-index:1;
  transition:background .3s var(--ease), border-color .3s var(--ease);
}
.jp .ic svg{ width:22px; height:22px; color:var(--gold); }
.jp.in .ic, .jp:hover .ic{ background:var(--gold); border-color:var(--gold); }
.jp.in .ic svg, .jp:hover .ic svg{ color:#fff; }
.jp .lbl{ font-size:12.5px; font-weight:600; color:var(--green-dk); line-height:1.3; }

/* dark-chapter variant (journey sits on the light intro section, so no dark override needed by default,
   but keep one in case it's ever placed on a dark block) */
.block.alt:has(.journey) .jp .ic{ background:rgba(255,253,249,.08); border-color:rgba(255,255,255,.18); }
.block.alt:has(.journey) .jp .lbl{ color:#fff; }
.block.alt:has(.journey) .jp:not(:last-child)::after{ background:rgba(255,255,255,.18); }

/* ---------- fact-pair: two flat facts side by side, no card chrome — no more glossy boxes ---------- */
.fact-pair{
  display:grid; grid-template-columns:1fr 1fr; gap:16px 44px;
  margin-top:28px; padding-top:28px; border-top:1px solid var(--line);
}
.fact-pair .eyebrow{ margin-bottom:10px; }
.fact-pair p{ font-size:15px; color:var(--ink-soft); line-height:1.65; margin:0; }
@media (max-width:700px){ .fact-pair{ grid-template-columns:1fr; gap:26px; } }

/* ---------- dial body text back down — was reading too large on real screens ---------- */
.body-copy p{ font-size:15.5px; }

/* ---------- accuracy note: quiet disclaimer, not another callout card — breaks the "same box twice" repetition ---------- */
.accuracy-note{
  border:0; border-left:0; background:none; padding:0; max-width:68ch;
}
.accuracy-note .eyebrow{ color:var(--ink-soft); }
.accuracy-note .eyebrow::before{ background:var(--ink-soft); }
.accuracy-note p{ font-size:13px; font-style:italic; color:var(--ink-soft); opacity:.85; line-height:1.6; }

/* ---------- interactive glossary terms — dotted underline + hover/focus tooltip ---------- */
.gloss{
  position:relative; cursor:help; color:inherit;
  border-bottom:1.5px dotted var(--gold);
  transition:border-color .2s var(--ease);
}
.gloss:hover, .gloss:focus{ border-color:var(--green-dk); outline:none; }
.gloss::after{
  content:attr(data-def);
  position:absolute; left:50%; bottom:calc(100% + 12px); transform:translateX(-50%) translateY(6px);
  width:250px; max-width:72vw; z-index:60;
  background:var(--ink-deep); color:rgba(255,253,249,.95);
  font-family:'Inter',sans-serif; font-weight:400; font-size:12.5px; line-height:1.55;
  text-transform:none; letter-spacing:normal;
  padding:13px 15px; border-radius:10px; box-shadow:0 18px 38px rgba(11,31,20,.28);
  opacity:0; pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.gloss::before{
  content:""; position:absolute; left:50%; bottom:calc(100% + 5px); transform:translateX(-50%);
  z-index:60; border:6px solid transparent; border-top-color:var(--ink-deep);
  opacity:0; pointer-events:none; transition:opacity .2s var(--ease);
}
.gloss:hover::after, .gloss:focus::after{ opacity:1; transform:translateX(-50%) translateY(0); }
.gloss:hover::before, .gloss:focus::before{ opacity:1; }
.gloss.tap-open::after, .gloss.tap-open::before{ opacity:1; transform:translateX(-50%) translateY(0); }

/* dark-chapter variant (inside the step-cards dark section) */
.block.alt:has(.step-cards) .gloss{ border-bottom-color:var(--gold-soft); }
.block.alt:has(.step-cards) .gloss:hover, .block.alt:has(.step-cards) .gloss:focus{ border-color:#fff; }

@media (max-width:520px){ .gloss::after{ width:200px; font-size:12px; } }

/* ---------- mid-page WhatsApp CTA: office photo background ---------- */
.cta-office{
  background-image:url('https://www.ibuyrealestate.ae/public/uploads/guides-exact-20260922-images-photos-office.jpg'); background-size:cover; background-position:center;
  position:relative; isolation:isolate;
}
.cta-office::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(11,31,20,.88) 0%, rgba(11,31,20,.62) 55%, rgba(11,31,20,.4) 100%);
}
.cta-office h3, .cta-office p{ color:#fff; }
@media (max-width:600px){ .step-inner{ max-width:100%; padding:20px 22px; } }

/* ---------- photo-block: full-bleed photo chapter for text sections below the step cards ---------- */
.photo-block{
  position:relative; background-size:cover; background-position:center; isolation:isolate;
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.photo-block::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg, rgba(11,31,20,.9) 0%, rgba(11,31,20,.68) 45%, rgba(11,31,20,.4) 100%);
}
.photo-block .eyebrow{ color:var(--gold-soft); }
.photo-block .eyebrow::before{ background:var(--gold-soft); }
.photo-block h2, .photo-block h3{ color:#fff; }
.photo-block p, .photo-block .lede-wide, .photo-block .body-copy p{ color:rgba(255,253,249,.85); }
.photo-block .checklist div{ color:rgba(255,253,249,.92); border-bottom-color:rgba(255,255,255,.22); }
.photo-block .checklist div::before{ border-color:var(--gold-soft); }
.photo-block .callout{ background:rgba(11,31,20,.55); border-color:rgba(255,255,255,.2); }
.photo-block .callout p{ color:rgba(255,253,249,.85); }