/* ============================================================
   TOKENS — light is the base, dark overrides
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-alt:#f4f3f1;
  --bg-band:#ecebe8;
  --surface:#ffffff;
  --surface-2:#f7f6f4;
  --ink:#16161a;
  --ink-soft:#40404a;
  --ink-mute:#6d6d78;
  --line:rgba(22,22,26,.12);
  --line-soft:rgba(22,22,26,.07);
  --invert-bg:#0d0d0f;
  --invert-ink:#f0efee;
  --invert-mute:#9a9aa2;
  --invert-surface:#1a1a1d;
  --invert-line:rgba(255,255,255,.1);
  --btn-bg:#16161a;
  --btn-ink:#ffffff;
  --shadow:0 1px 2px rgba(22,22,26,.05), 0 12px 32px -18px rgba(22,22,26,.35);

  --accent:#e0791c;
  --accent-deep:#b55b0f;
  --accent-lift:#f2a141;
  --accent-grad:linear-gradient(103deg,var(--accent-deep) 0%, var(--accent) 48%, var(--accent-lift) 100%);

  --logo-light:1;   /* dark-ink wordmark, for light backgrounds */
  --logo-dark:0;

  --logo-light-display:Inline;   /* dark-ink wordmark, for light backgrounds */
  --logo-dark-display:none;

  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-pill:999px;
  --pad:clamp(20px,5vw,40px);
  --maxw:1180px;
  --step:clamp(64px,8vw,112px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d0d0f; --bg-alt:#121214; --bg-band:#0a0a0b;
    --surface:#16161a; --surface-2:#1b1b1f;
    --ink:#f2f1f0; --ink-soft:#c6c5c8; --ink-mute:#8e8e97;
    --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
    --invert-bg:#050506; --invert-ink:#f2f1f0; --invert-mute:#8e8e97;
    --invert-surface:#141417; --invert-line:rgba(255,255,255,.09);
    --btn-bg:#ffffff; --btn-ink:#0d0d0f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.9);
    --logo-light:0; --logo-dark:1;
    --logo-light-display:none; --logo-dark-display:block;
  }
}
:root[data-theme="dark"]{
  --bg:#0d0d0f; --bg-alt:#121214; --bg-band:#0a0a0b;
  --surface:#16161a; --surface-2:#1b1b1f;
  --ink:#f2f1f0; --ink-soft:#c6c5c8; --ink-mute:#8e8e97;
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
  --invert-bg:#050506; --invert-ink:#f2f1f0; --invert-mute:#8e8e97;
  --invert-surface:#141417; --invert-line:rgba(255,255,255,.09);
  --btn-bg:#ffffff; --btn-ink:#0d0d0f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.9);
  --logo-light:0; --logo-dark:1;
  --logo-light-display:none; --logo-dark-display:block;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Figtree","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .35s ease, color .35s ease;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:700}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--step)}
.center{text-align:center}
.eyebrow-line{color:var(--ink-mute);font-size:.94rem;line-height:1.65;max-width:62ch;margin-inline:auto}

h2.head{font-size:clamp(1.9rem,4.2vw,2.75rem)}
h3.sub{font-size:clamp(1.55rem,3.4vw,2.1rem)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.62rem .72rem .62rem 1.35rem;
  background:var(--btn-bg);color:var(--btn-ink);
  border-radius:var(--r-pill);border:1px solid transparent;
  font-weight:600;font-size:.98rem;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn .disc{
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;flex:none;
  background:var(--accent-grad);color:#fff;
}
.btn .disc svg{width:13px;height:13px}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn.ghost{
  background:transparent;color:var(--ink);
  border-color:var(--line);
}
.btn.on-dark{background:#fff;color:#0d0d0f}
.btn.ghost.on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
.brand{display:flex;align-items:center}
.brand img{height:30px;width:auto}
.logo-light{opacity:var(--logo-light); display:var(--logo-light-display);}
.logo-dark{opacity:var(--logo-dark); display:var(--logo-dark-display)}
.brand .stack{position:relative;height:19px}
.brand .stack img{position:absolute;inset:0;transition:opacity .3s ease}
.nav-links{display:flex;gap:1.9rem;font-size:.95rem;font-weight:500;color:var(--ink-soft)}
.nav-links a{position:relative;padding-block:4px}
.nav-links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.btn.nav-cta{padding:.42rem .5rem .42rem 1.05rem;font-size:.92rem}
.btn.nav-cta .disc{width:24px;height:24px}
@media (max-width:760px){.nav-links{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(60px,10vw,120px) clamp(48px,7vw,86px);text-align:center}
.hero::before{
  content:"";position:absolute;left:50%;top:-320px;translate:-50% 0;
  width:min(1100px,150vw);height:620px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, color-mix(in srgb,var(--accent) 26%, transparent) 0%, transparent 66%);
  opacity:.5;filter:blur(30px);
}
.hero h1{
  font-size:clamp(2.35rem,6.1vw,4.05rem);
  font-weight:700;letter-spacing:-.035em;line-height:1.04;
  max-width:16ch;margin-inline:auto;
  position:relative;
}
.hero-sub{margin:1.5rem auto 0;max-width:54ch;color:var(--ink-mute);font-size:1.02rem;position:relative}
.stats{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(1.8rem,6vw,4.2rem);
  margin-top:2.9rem;position:relative;
}
.stat b{
  display:block;font-size:1.45rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat span{display:block;font-size:.72rem;color:var(--ink-mute);margin-top:.15rem;letter-spacing:.01em}
.hero .btn{margin-top:2.6rem;position:relative}

/* load reveal — one orchestrated moment, nothing else animates on scroll */
.reveal{opacity:0;transform:translateY(14px);animation:rise .8s cubic-bezier(.2,.7,.25,1) forwards}
.reveal.d1{animation-delay:.08s}
.reveal.d2{animation-delay:.18s}
.reveal.d3{animation-delay:.28s}
.reveal.d4{animation-delay:.38s}
@keyframes rise{to{opacity:1;transform:none}}

/* ============================================================
   MARQUEE
   ============================================================ */
.strip{border-block:1px solid var(--line-soft);background:var(--bg-alt);overflow:hidden}
.strip-in{display:flex;align-items:center;gap:0;height:56px;position:relative}
.strip-label{
  flex:none;padding-inline:var(--pad) 1.4rem;font-size:.66rem;letter-spacing:.14em;
  color:var(--ink-mute);text-transform:uppercase;white-space:nowrap;
  background:var(--bg-alt);z-index:2;
}
.track-mask{overflow:hidden;position:relative;flex:1;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 88%,transparent);}
.track{display:flex;gap:2.9rem;width:max-content;animation:slide 38s linear infinite}
.track span{font-size:.9rem;font-weight:500;color:var(--ink-mute);white-space:nowrap}
@keyframes slide{to{transform:translateX(-50%)}}
@media (max-width:640px){.strip-label{display:none}}

/* ============================================================
   SPLIT
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1.06fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.split h2{max-width:14ch}
.split p{margin-top:1.3rem;color:var(--ink-mute);max-width:52ch;font-size:.98rem}
.split .btn{margin-top:2rem}
@media (max-width:880px){.split{grid-template-columns:1fr}}

.figure{
  border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--surface-2);
  aspect-ratio:16/10;
}
.figure svg{width:100%;height:100%;display:block}

/* ============================================================
   CARD GRIDS
   ============================================================ */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:3.2rem}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
@media (max-width:900px){.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.grid-4{grid-template-columns:1fr}}

.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.5rem 1.45rem;
}
.card h4{font-size:1.06rem;margin-bottom:.55rem}
.card p{color:var(--ink-mute);font-size:.92rem}

/* work cards */
.work{border-radius:var(--r-md);overflow:hidden}
.work .thumb{
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;
  aspect-ratio:4/3;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--surface-2);
}
.work .thumb img{}
.work .pin{
  position:absolute;left:12px;bottom:12px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.9);color:#16161a;display:grid;place-items:center;
  transition:transform .25s ease;
}
.work:hover .pin{transform:translate(2px,-2px)}
.work .meta{padding:.95rem .1rem 0}
.work .meta strong{font-size:1rem;font-weight:600;display:block}
.work .meta span{font-size:.85rem;color:var(--ink-mute)}

.hover-to-scroll {
  width: 100%;          /* Set your preferred card width */
  height: 100%;         /* Set your preferred card height */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);

  /* Link your full-page screenshot here */
  background-image: url('assets/vurose_full capture.png');

  /* Critical settings */
  background-size: cover;
  background-position: top center;

  /* Smooth transition (adjust seconds to change scroll speed) */
  transition: background-position 3s ease-in-out;
}

.hover-to-scroll2 {
  width: 100%;          /* Set your preferred card width */
  height: 100%;         /* Set your preferred card height */
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);

  /* Link your full-page screenshot here */
  background-image: url('assets/maison_realty.png');

  /* Critical settings */
  background-size: cover;
  background-position: top center;

  /* Smooth transition (adjust seconds to change scroll speed) */
  transition: background-position 3s ease-in-out;
}

.hover-to-scroll2:hover {
  background-position: bottom center;
}


.hover-to-scroll:hover {
  background-position: bottom center;
}

/* services */
.svc{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.7rem 1.55rem 1.9rem;
  display:flex;flex-direction:column;gap:.75rem;
}
.svc .ico{width:42px;height:42px;border-radius:12px;background:var(--accent-grad);display:grid;place-items:center;color:#fff;margin-bottom:.4rem}
.svc .ico svg{width:20px;height:20px}
.svc h4{font-size:1.18rem}
.svc p{color:var(--ink-mute);font-size:.93rem}
.svc ul{margin-top:.5rem;display:grid;gap:.42rem}
.svc li{font-size:.88rem;color:var(--ink-soft);padding-left:1.1rem;position:relative}
.svc li::before{content:"";position:absolute;left:0;top:.58em;width:6px;height:6px;border-radius:2px;background:var(--accent)}

/* ============================================================
   INVERTED BAND
   ============================================================ */
.band{background:var(--invert-bg);color:var(--invert-ink)}
.band h2{color:var(--invert-ink)}
.band .eyebrow-line{color:var(--invert-mute)}
.band .card{background:var(--invert-surface);border-color:var(--invert-line)}
.band .card p{color:var(--invert-mute)}
.band .card h4{color:var(--invert-ink)}

/* ============================================================
   STEPS
   ============================================================ */
.step{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);padding:1.4rem 1.35rem 1.6rem;position:relative}
.step .n{font-size:.68rem;letter-spacing:.12em;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.step h4{font-size:1.04rem;margin:.6rem 0 .5rem}
.step p{font-size:.9rem;color:var(--ink-mute)}

/* ============================================================
   CTA
   ============================================================ */
.cta-band{background:var(--invert-bg);color:var(--invert-ink);text-align:center;position:relative;overflow:hidden}
.cta-band::after{
  content:"";position:absolute;left:50%;bottom:-260px;translate:-50% 0;
  width:min(900px,140vw);height:420px;
  background:radial-gradient(ellipse at 50% 50%, color-mix(in srgb,var(--accent) 30%, transparent), transparent 68%);
  filter:blur(34px);opacity:.55;pointer-events:none;
}
.cta-band h2{color:var(--invert-ink);position:relative}
.cta-band p{color:var(--invert-mute);max-width:52ch;margin:1.2rem auto 0;position:relative;font-size:.98rem}
.cta-band .fine{font-size:.82rem;margin-top:1.8rem;color:color-mix(in srgb,var(--invert-mute) 80%, transparent)}
.cta-band .btn{margin-top:1.6rem;position:relative}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{background:var(--invert-bg);color:var(--invert-ink);padding-top:clamp(48px,6vw,76px)}
.foot-top{display:grid;grid-template-columns:1.35fr repeat(4,1fr);gap:2rem 1.4rem}
.foot-lead span{font-size:.78rem;color:var(--invert-mute);display:block;margin-bottom:.5rem}
.foot-lead p{font-size:1.15rem;font-weight:600;max-width:20ch;letter-spacing:-.02em;line-height:1.28}
.foot-lead .btn{margin-top:1.4rem}
.fcol h5{font-size:.68rem;letter-spacing:.13em;color:var(--invert-mute);margin:0 0 1rem;font-weight:600;text-transform:uppercase}
.fcol li{margin-bottom:.62rem}
.fcol a{font-size:.88rem;color:color-mix(in srgb,var(--invert-ink) 82%, transparent)}
.fcol a:hover{color:var(--accent-lift)}
.foot-bot{
  margin-top:clamp(40px,6vw,72px);padding-block:1.4rem;
  border-top:1px solid var(--invert-line);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.79rem;color:var(--invert-mute);
}
.foot-bot img{height:24px;width:auto;opacity:.85}
.foot-bot nav{display:flex;gap:1.4rem}
@media (max-width:980px){.foot-top{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.foot-top{grid-template-columns:1fr}}

/* ============================================================
   THEME TOGGLE
   ============================================================ */
.toggle{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  transition:transform .25s ease, background-color .3s ease, border-color .3s ease;
}
.toggle:hover{transform:translateY(-2px) rotate(-12deg)}
.toggle svg{width:19px;height:19px}
.toggle .moon{display:none}
:root[data-theme="dark"] .toggle .moon{display:block}
:root[data-theme="dark"] .toggle .sun{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .toggle .moon{display:block}
  :root:not([data-theme="light"]) .toggle .sun{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none}
}