/* ============================================================
   Duo Property Management — landing page
   Design language: Refit — structure, palette, spacing, accordion, and the
   type scale measured directly off refit.framer.website (Manrope throughout).
   Sections are laid out as inset rounded panels separated by white space.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* height:auto matters — without it an <img height="…"> attribute beats any
   aspect-ratio set in CSS and the image renders at its intrinsic height */
img,video,svg{display:block;max-width:100%;height:auto}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit;background:transparent;border:0}
button{cursor:pointer}

:root{
  /* palette — from Refit tokens */
  --ink:        #101014;   /* near-black foreground        */
  --ink-2:      #28282c;   /* secondary                    */
  --muted:      #3d3d47;   /* muted foreground             */
  --muted-2:    #6b6b78;
  --line:       #d0d1db;   /* hairline borders             */
  --line-soft:  #e8e9ef;
  --surface:    #fafafa;
  --bg:         #ffffff;

  /* type — measured off refit.framer.website so the scale matches exactly:
       hero h1   58 / 500 / 69.6 / -1px
       section   50 / 500 / 55   / -0.8px
       lead      22 / 400 / 33   / -0.3px
       body      18 / 400 / 27   / -0.1px
       small     16 / 400 / 20.8 / -0.1px
       eyebrow   16 / 500 / 16   / +0.5px                                   */
  --display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* rhythm */
  --wrap: 1280px;
  --pad: 32px;
  /* viewport-relative so a section lands inside one screen instead of
     spilling past the fold on a laptop */
  --sec-y: clamp(48px, 6vh, 96px);
  --r-pill: 9999px;
  --r-md: 16px;
  --r-lg: 24px;

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

body{
  font-family:var(--body);
  font-size:18px;
  line-height:1.5;
  letter-spacing:-.1px;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}

.skip{position:absolute;left:-9999px;top:0;background:#000;color:#fff;padding:12px 20px;z-index:200}
.skip:focus{left:8px;top:8px}

/* ── shared type ───────────────────────────────────────────── */
.h2{
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(32px,4vw,50px);
  line-height:1.1;
  letter-spacing:-.8px;
}
.h2 em{font-style:normal}
.h2--light{color:#fff}
.h2--tight{font-size:clamp(30px,3.6vw,46px)}
.center{text-align:center}
.sub{color:var(--muted);font-size:22px;line-height:1.5;letter-spacing:-.3px;max-width:52ch}
.sub.center{margin-inline:auto}

.eyebrow{
  display:inline-block;
  font-size:16px;font-weight:500;letter-spacing:.5px;line-height:1;
  color:#fff;
  background:var(--ink);
  border:1px solid var(--ink);
  border-radius:var(--r-pill);
  padding:10px 18px;
  margin-bottom:20px;
}
.eyebrow--light{color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.26)}

.sec{padding-block:var(--sec-y)}
/* anchored sections must clear the fixed header */
.sec[id],.hero[id]{scroll-margin-top:88px}

/* ── buttons ───────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:14px;font-weight:500;
  border-radius:var(--r-pill);
  transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  will-change:transform;
}
.btn:hover{transform:scale(1.03)}
.btn:active{transform:scale(.99)}
.btn--pill{background:#000;color:#fff;padding:10px 24px}
.btn--hero{background:#000;color:#fff;padding:20px 56px;font-size:16px}
.btn--ghost{
  padding:20px 40px;font-size:16px;color:#fff;
  border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.06);
}
.btn--ghost:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.7)}
.btn--submit{
  background:#fff;color:#000;padding:18px 32px;width:100%;font-size:15px;font-weight:600;margin-top:8px;
}
.btn--submit:hover{transform:scale(1.01)}

/* ══════════════ NAV — liquid-glass pill ══════════════
   Smoked glass rather than clear: the header passes over a dark hero, white
   sections and a near-black contact block, and a dark tint is the only way the
   same white text stays legible over all of them. */
.glass-defs{position:absolute;width:0;height:0;overflow:hidden}

.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:16px var(--pad) 0;
  pointer-events:none;                 /* only the pill itself is clickable */
}
.nav__pill{
  position:relative;
  max-width:var(--wrap);margin-inline:auto;
  border-radius:var(--r-pill);
  overflow:hidden;
  pointer-events:auto;
  transition:max-width .7s cubic-bezier(.175,.885,.32,1.28),
             box-shadow .5s var(--ease),
             transform .5s var(--ease);
}
/* layered glass: refracted backdrop, tint, then the rim highlight */
.nav__glass{position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.nav__glass-warp,
.nav__glass-tint,
.nav__glass-edge{position:absolute;inset:0;border-radius:inherit}
/* The reference applies an feDisplacementMap over the blurred backdrop. At any
   scale strong enough to see, it drags dark pixels across the bar and reads as
   a smear rather than refraction, so the distortion is left out and the glass
   is built from blur + saturation + a rim highlight instead. */
.nav__glass-warp{
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  opacity:0;transition:opacity .5s var(--ease);
}
.nav__glass-tint{
  background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.52));
  opacity:0;transition:opacity .5s var(--ease);
}
.nav__glass-edge{
  box-shadow:
    inset 1.5px 1.5px 1px 0 rgba(255,255,255,.9),
    inset -1px -1px 1px 1px rgba(255,255,255,.55),
    inset 0 0 0 1px rgba(16,16,20,.06);
  opacity:0;transition:opacity .5s var(--ease);
}

.nav__inner{
  position:relative;z-index:2;
  padding:14px 16px 14px 24px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
}
.brand{
  font-family:var(--display);font-weight:600;font-size:24px;line-height:1;
  letter-spacing:-.6px;color:#fff;
}
.brand sup{font-size:.38em;vertical-align:super;font-weight:500}
.nav__links{display:flex;gap:36px;justify-self:center}
.nav__links a{
  font-size:16px;font-weight:500;letter-spacing:-.1px;color:rgba(255,255,255,.82);
  transition:color .3s var(--ease);
}
.nav__links a:hover{color:#fff}
.nav__cta{justify-self:end;background:#fff;color:#000;font-size:16px;padding:11px 22px}

/* Past the hero the bar contracts into a floating pill of light glass, and the
   type flips to ink — white-on-glass is unreadable over the white sections
   that make up most of the page. */
.nav.is-solid .nav__pill{
  max-width:980px;
  box-shadow:0 6px 6px rgba(16,16,20,.10),0 0 24px rgba(16,16,20,.08);
}
.nav.is-solid .nav__glass-warp,
.nav.is-solid .nav__glass-tint,
.nav.is-solid .nav__glass-edge{opacity:1}
.nav.is-solid .brand{color:var(--ink)}
.nav.is-solid .nav__links a{color:var(--muted)}
.nav.is-solid .nav__links a:hover{color:var(--ink)}
.nav.is-solid .nav__cta{background:var(--ink);color:#fff}
.nav.is-solid .nav__burger span{background:var(--ink)}

.nav__burger{display:none;justify-self:end;width:44px;height:44px;position:relative}
.nav__burger span{
  position:absolute;left:11px;width:22px;height:1.5px;background:#fff;
  transition:transform .3s var(--ease),background-color .4s var(--ease),opacity .2s;
}
.nav__burger span:nth-child(1){top:19px}
.nav__burger span:nth-child(2){top:25px}
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

.nav__mobile{
  display:none;flex-direction:column;
  max-width:var(--wrap);margin:10px auto 0;
  pointer-events:auto;
  background:rgba(18,18,22,.82);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:8px 20px 14px;
}
.nav__mobile a{
  padding:15px 0;font-size:18px;font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav__mobile a:last-child{border-bottom:0}

/* ══════════════ HERO ══════════════ */
.hero{
  --bleed:clamp(120px,16vh,200px);
  position:relative;
  /* one full screen for the hero proper, plus a strip below the fold where the
     footage carries on and dissolves away. The first screenful is untouched —
     the dissolve never intrudes on it. */
  min-height:calc(100svh + var(--bleed));
  display:flex;align-items:flex-start;justify-content:center;
  overflow:hidden;background:#0d1a22;
}
.hero__media{position:absolute;inset:0}
.hero__video{width:100%;height:100%;object-fit:cover}
.hero__scrim{
  position:absolute;inset:0;
  /* the dark wash stops short of the bottom so it doesn't fight the white
     dissolve that carries the hero into the next section */
  background:
    linear-gradient(180deg,rgba(8,12,16,.62) 0%,rgba(8,12,16,.18) 26%,rgba(8,12,16,.20) 55%,rgba(8,12,16,.78) 100%),
    radial-gradient(ellipse 78% 58% at 50% 46%,rgba(8,12,16,.50) 0%,rgba(8,12,16,0) 78%);
}
/* lives entirely in the strip below the fold */
.hero__merge{
  position:absolute;left:0;right:0;bottom:-1px;
  height:var(--bleed);
  background:linear-gradient(180deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.45) 42%,
    rgba(255,255,255,.9) 76%,
    var(--bg) 100%);
  pointer-events:none;z-index:1;
}
.hero__content{
  position:relative;z-index:2;
  /* exactly one screen tall and self-centring, so adding the bleed strip below
     does not shift the composition of the first view */
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  max-width:var(--wrap);padding:110px var(--pad) 96px;
  text-align:center;color:#fff;
}
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:500;letter-spacing:.02em;
  color:rgba(255,255,255,.9);
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  border-radius:var(--r-pill);
  padding:7px 16px;margin-bottom:30px;
  backdrop-filter:blur(8px);
}
.dot{width:7px;height:7px;border-radius:50%;background:#7ee0a8;box-shadow:0 0 0 3px rgba(126,224,168,.22)}

.hero__h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(34px,4.8vw,58px);
  line-height:1.2;
  letter-spacing:-1px;
  text-wrap:balance;
  text-shadow:0 2px 40px rgba(0,0,0,.35);
}
.hero__h1 em{font-style:normal}

.hero__sub{
  max-width:670px;margin:24px auto 0;
  font-size:22px;line-height:1.5;letter-spacing:-.3px;
  color:rgba(255,255,255,.88);
  text-shadow:0 1px 24px rgba(0,0,0,.4);
}
.hero__actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:48px}

/* sits above the white dissolve, so it inks up rather than disappearing */
.hero__scroll{position:absolute;bottom:calc(var(--bleed) + 34px);left:50%;transform:translateX(-50%);z-index:3}
.hero__scroll span{
  display:block;width:1px;height:52px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.85));
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{0%{opacity:0;transform:scaleY(.2);transform-origin:top}
  40%{opacity:1;transform:scaleY(1);transform-origin:top}
  70%{opacity:1}100%{opacity:0}}

/* entrance — fade & rise, staggered */
.rise{opacity:0;transform:translateY(24px);animation:rise .8s var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* ══════════════ THE PROBLEMS (stage + card stack) ══════════════
   The graphic sits directly on the page — no panel, no border. Boxing a
   white-background render inside a grey card just draws attention to the
   mismatched whites. Choosing a card flies its thumbnail onto the stage and
   removes the card from the list; the outgoing one takes its place back. */
.probs{background:var(--bg)}
/* just the label — the copy that changes with the card carries the section */
.probs__head{margin:0 auto clamp(24px,3.5vh,44px);text-align:center}
.probs__head .eyebrow{margin-bottom:0}

.probs__grid{
  display:grid;grid-template-columns:1.3fr .7fr;
  gap:clamp(24px,3vw,56px);align-items:start;
}

/* ── the stage ─────────────────────────────────────────── */
.stage{margin:0}
.stage__art{
  position:relative;width:100%;max-width:600px;
  aspect-ratio:5/4;
  max-height:min(46vh,460px);
  margin-left:-2%;              /* sits under the copy, not adrift of it */
  margin-top:-3%;               /* absorbs the render's own top whitespace */
}
/* The renders arrived on their own off-white, which showed as a visible
   rectangle against the page; their white point has been lifted to pure #fff
   in the asset itself, so the ground now disappears and the object floats. */
.stage__art img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:contain;
  /* FLIP target — script.js adds a transition only for the flight itself */
  will-change:transform,opacity;
}
/* fixed floor so the graphic below does not jump as copy length changes
   between cards */
.stage__cap{margin-bottom:clamp(6px,1.2vh,16px);max-width:44ch}
.stage__title{
  font-family:var(--display);font-weight:500;
  font-size:clamp(22px,2.3vw,30px);line-height:1.15;letter-spacing:-.6px;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.stage__body{
  margin-top:10px;color:var(--muted);
  font-size:18px;line-height:1.5;letter-spacing:-.1px;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.stage.is-swapping .stage__title,
.stage.is-swapping .stage__body{opacity:0;transform:translateY(6px)}

/* ── the card stack ──────────────────────────────────────
   Dark cards with a large image panel on the left, per the reference. The
   image is the card's dominant element, not a bullet-sized icon. */
.probs__list{display:flex;flex-direction:column;gap:14px}
.prob__text{display:none}          /* full copy — mirrored onto the stage */

.prob{
  overflow:hidden;
  border-radius:18px;
  background:var(--ink);
  border:1px solid var(--ink);
  transition:height .5s var(--ease),
             opacity .38s var(--ease),
             margin .5s var(--ease),
             transform .5s var(--ease),
             box-shadow .4s var(--ease);
}
.prob:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 40px -28px rgba(16,16,20,.75);
}

/* the card currently on stage is gone from the list */
.prob.is-active{
  height:0!important;opacity:0;margin-bottom:-14px;
  transform:scale(.94);
  pointer-events:none;border-color:transparent;
}

.prob__head{
  display:flex;align-items:stretch;gap:16px;width:100%;
  padding:12px 18px 12px 12px;text-align:left;
}
.prob__thumb{
  flex:0 0 auto;
  width:clamp(84px,7.2vw,104px);
  align-self:stretch;min-height:84px;
  border-radius:12px;overflow:hidden;
  background:#fff;
  display:grid;place-items:center;
}
.prob__thumb img{width:94%;height:94%;object-fit:contain}

.prob__copy{
  flex:1;display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding-block:6px;
}
.prob__title{
  font-size:16.5px;font-weight:600;letter-spacing:-.3px;line-height:1.25;color:#fff;
}
.prob__short{
  font-size:14px;line-height:1.4;letter-spacing:-.1px;color:rgba(255,255,255,.58);
}
.prob__num{
  align-self:center;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.38);
  font-variant-numeric:tabular-nums;
}

/* ══════════════ WHY US + TERMS (glass cards over warm interior) ══════════════
   Deliberately NOT a second hero: it is shorter than the viewport, the type is
   left-aligned rather than centred, and the whole thing assembles on scroll —
   the photograph drifts against the content and the cards deal themselves in. */
/* The section arrives full-bleed and draws itself into an inset rounded card
   as you scroll to it, so it reads as a distinct panel rather than a second
   hero butting straight up against the first. clip-path is used rather than
   margins so the whole thing animates on the compositor with no reflow. */
.terms{
  position:relative;overflow:hidden;
  padding-block:clamp(72px,9vh,116px);
  background:#241a12;
  clip-path:inset(0 0 0 0 round 0);
  will-change:clip-path;
}
/* white gutter the card sits in */
.terms-wrap{background:var(--bg)}
/* explicit, non-negative stacking — negative z-index children are easy to get
   wrong once a parent creates a stacking context */
.terms__bg{position:absolute;inset:-8% 0 -8% 0;z-index:0;will-change:transform}
.terms__bg img{width:100%;height:100%;object-fit:cover}
.terms__scrim{
  position:absolute;inset:0;z-index:1;
  /* dark enough for white type on the left, light enough that the room still
     reads on the right — two gradients multiply, so keep each one modest */
  background:
    linear-gradient(180deg,rgba(22,15,9,.82) 0%,rgba(22,15,9,.40) 34%,rgba(22,15,9,.48) 68%,rgba(22,15,9,.88) 100%),
    linear-gradient(95deg,rgba(22,15,9,.58) 0%,rgba(22,15,9,.16) 58%,rgba(22,15,9,0) 100%);
}

.terms__inner{position:relative;z-index:2}
.terms__head{max-width:760px}
.terms__h2{margin-bottom:26px}
.terms__lead{
  color:rgba(255,255,255,.78);font-size:22px;line-height:1.5;letter-spacing:-.3px;max-width:52ch;
}
.terms__lead+.terms__lead{margin-top:16px}
.terms__lead--em{color:#fff}

.cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:clamp(28px,4vh,56px);
}
.card{
  position:relative;
  padding:26px 24px 28px;
  border-radius:20px;
  background:linear-gradient(155deg,rgba(255,255,255,.22),rgba(255,255,255,.085));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 20px 44px -24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.3);
  color:#fff;
  /* dealt in on scroll, staggered by --i */
  opacity:0;transform:translateY(30px) scale(.97);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--i) * 90ms);
}
.cards.in .card{opacity:1;transform:none}
.card__ico{display:block;width:30px;height:30px;margin-bottom:20px}
.card__ico svg{
  width:100%;height:100%;fill:none;stroke:#fff;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.92;
}
.card__v{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(28px,2.6vw,38px);line-height:1.1;letter-spacing:-.8px;
}
.card__l{
  display:block;margin-top:10px;
  font-size:16px;line-height:1.3;letter-spacing:-.1px;color:rgba(255,255,255,.74);
}

/* ══════════════ OUR WORK (stacking cards) ══════════════
   Each card sticks under the header while the next scrolls up over it. JS
   scales and dims the card underneath so it reads as being pushed back. */
.work{padding-bottom:clamp(80px,10vw,140px)}
.work__eyebrow{display:block;width:max-content;margin-inline:auto}
.work__stack{
  max-width:var(--wrap);margin:clamp(48px,6vw,80px) auto 0;
  padding-inline:var(--pad);
}
.work__card{
  position:sticky;top:104px;
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);
  align-items:stretch;
  /* a stacking card has to fit the viewport or the effect never reads */
  max-height:calc(100svh - 140px);
  padding:clamp(20px,2.2vw,30px);
  border-radius:var(--r-lg);
  background:var(--surface);
  border:1px solid var(--line-soft);
  box-shadow:0 30px 60px -40px rgba(16,16,20,.5);
  transform-origin:center top;
  will-change:transform;
}
.work__card + .work__card{margin-top:36px}
.work__card--dark{background:var(--ink);border-color:rgba(255,255,255,.1);color:#fff}
.work__card--dark .work__body p{color:rgba(255,255,255,.68)}
.work__card--dark .tag{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.work__card--dark .work__note{color:rgba(255,255,255,.5);border-top-color:rgba(255,255,255,.14)}

/* the image fills whatever height the copy sets, so the two columns always
   finish level and the card never runs past the viewport */
.work__media{position:relative;border-radius:16px;overflow:hidden;background:#e9e9ee;min-height:300px}
.work__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.work__body{align-self:center;padding-block:6px}
.work__body h3{
  font-family:var(--display);font-weight:500;
  font-size:clamp(26px,3vw,40px);line-height:1.1;letter-spacing:-.8px;
  margin-bottom:16px;
}
.work__body p{color:var(--muted);font-size:18px;line-height:1.5;letter-spacing:-.1px}
.work__body p+p{margin-top:14px}
.work__tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.tag{
  font-size:12.5px;font-weight:500;padding:7px 14px;border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);
}
.work__note{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:14px;color:var(--muted-2);line-height:1.6;
}

/* ══════════════ WHO WE ARE ══════════════ */
.duo{background:var(--surface);border-block:1px solid var(--line-soft)}
.duo__h2{max-width:20ch}
.duo__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,4vw,64px);align-items:center;margin-top:clamp(28px,4vh,48px)}

.duo__photo{position:relative}
.ph{
  position:relative;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:#eceef1;
}
.ph__bg{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) contrast(.94) brightness(1.03)}
.ph__label{
  position:absolute;inset:auto 16px 16px 16px;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  background:rgba(255,255,255,.93);backdrop-filter:blur(10px);
  border:1px dashed var(--line);border-radius:12px;
  padding:14px 16px;
}
.ph__label svg{width:20px;height:20px;color:var(--muted-2);margin-bottom:4px}
.ph__label strong{font-size:13px;font-weight:600;letter-spacing:.01em}
.ph__label span{font-size:12.5px;color:var(--muted-2);line-height:1.45}

.duo__text .lead{font-size:22px;line-height:1.5;letter-spacing:-.3px;color:var(--ink);margin-bottom:18px}
.duo__text p{color:var(--muted);font-size:18px;line-height:1.5;letter-spacing:-.1px}
.duo__points{margin-top:22px;border-top:1px solid var(--line)}
.duo__points li{
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:18px;line-height:1.5;color:var(--muted);
}
.duo__points strong{color:var(--ink);font-weight:600}

/* ══════════════ SERVICES ══════════════ */
.services .eyebrow{display:block;width:max-content;margin-inline:auto}
/* the media column matches the accordion's height exactly, so the image can
   never run past the list no matter how many panels are open */
.svc{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(32px,4vw,56px);align-items:stretch;margin-top:clamp(28px,4vh,48px)}
.svc__media{
  position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--surface);
  min-height:min(52vh,430px);
}
.svc__media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:opacity .45s var(--ease);
}
.svc__media.is-swapping img{opacity:0}

.svc__item{border-bottom:1px solid var(--line)}
.svc__item:first-child{border-top:1px solid var(--line)}
.svc__head{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:18px 4px;text-align:left;
}
.ico{width:26px;height:26px;flex:0 0 26px;fill:none;stroke:var(--ink);stroke-width:1.35;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.svc__name{flex:1;font-size:20px;font-weight:500;letter-spacing:-.3px}
.svc__plus{position:relative;width:16px;height:16px;flex:0 0 16px}
.svc__plus::before,.svc__plus::after{
  content:"";position:absolute;background:var(--ink);transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.svc__plus::before{top:7.5px;left:0;width:16px;height:1.4px}
.svc__plus::after{left:7.5px;top:0;width:1.4px;height:16px}
.svc__item.is-open .svc__plus::after{transform:rotate(90deg);opacity:0}

.svc__panel{overflow:hidden;height:0;transition:height .42s var(--ease)}
.svc__panel p{
  padding:0 4px 22px 42px;max-width:60ch;
  color:var(--muted);font-size:18px;line-height:1.5;letter-spacing:-.1px;
}
.svc__panel strong{color:var(--ink);font-weight:600}

.svc__note{
  margin-top:clamp(24px,3vh,40px);text-align:center;font-size:15px;color:var(--muted-2);
}
.svc__note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ══════════════ UNDER MANAGEMENT (auto-sliding strip) ══════════════
   The track carries the tile set twice and travels exactly one set width, so
   the wrap lands on an identical frame and the slide never appears to jump. */
/* sized so the whole section — heading, strip and footnote — lands inside a
   single screen rather than running off the bottom */
.estate{
  background:var(--surface);border-block:1px solid var(--line-soft);overflow:hidden;
  padding-block:clamp(48px,6.5vh,84px);
}
.estate__head{margin-bottom:clamp(28px,4vh,52px);text-align:center}
.estate__head .eyebrow{display:inline-block;margin-bottom:20px}
.estate__head .sub{font-size:20px;max-width:46ch}

.marquee{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{display:flex;width:max-content;animation:slide 56s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__set{display:flex;gap:22px;padding-right:22px}
@keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* height drives the tile; width follows from the 4:3 crop */
.plot{
  position:relative;flex:0 0 auto;
  height:clamp(200px,34vh,320px);
  aspect-ratio:4/3;
  border-radius:var(--r-md);overflow:hidden;
  background:#e9e9ee;
  box-shadow:0 18px 36px -28px rgba(16,16,20,.55);
}
.plot img{width:100%;height:100%;object-fit:cover;display:block}
.plot__tag{
  position:absolute;left:12px;bottom:12px;
  font-size:14px;font-weight:500;letter-spacing:-.1px;color:#fff;
  background:rgba(16,16,20,.62);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-pill);
  padding:7px 14px;
}
.estate__note{
  margin-top:clamp(20px,2.6vh,34px);
  text-align:center;font-size:15px;color:var(--muted-2);
}

/* ══════════════ PRICING — the arithmetic ══════════════
   The persuasion is structural: every bar is scaled against the same fixed
   maximum, so the percentage bars visibly stretch past the Duo bar as the rent
   rises while the Duo bar does not move at all. */
.fee{--namew:clamp(150px,15vw,210px);background:var(--surface);border-block:1px solid var(--line-soft)}
.fee__head{max-width:660px;margin:0 auto clamp(32px,4.5vh,56px);text-align:center}
.fee__head .eyebrow{margin-bottom:18px}
.fee__lede{font-size:22px;line-height:1.5;letter-spacing:-.3px;color:var(--muted)}

.fee__grid{
  display:grid;grid-template-columns:.72fr 1.28fr;
  gap:clamp(32px,4.5vw,72px);align-items:center;
}

/* ── the control ─────────────────────────────────────── */
.fee__label{display:block;font-size:15px;color:var(--muted-2)}
.fee__rent{
  display:block;margin:6px 0 18px;
  font-family:var(--display);font-weight:500;
  font-size:clamp(38px,4.4vw,58px);line-height:1;letter-spacing:-1.4px;
  font-variant-numeric:tabular-nums;
}
.fee__slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:34px;background:transparent;cursor:grab;display:block;
}
.fee__slider:active{cursor:grabbing}
.fee__slider::-webkit-slider-runnable-track{
  height:4px;border-radius:99px;background:var(--line);
}
.fee__slider::-moz-range-track{height:4px;border-radius:99px;background:var(--line)}
.fee__slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:26px;height:26px;margin-top:-11px;border-radius:50%;
  background:var(--ink);border:3px solid #fff;
  box-shadow:0 3px 10px rgba(16,16,20,.3);
  transition:transform .18s var(--ease);
}
.fee__slider::-moz-range-thumb{
  width:26px;height:26px;border-radius:50%;
  background:var(--ink);border:3px solid #fff;
  box-shadow:0 3px 10px rgba(16,16,20,.3);
}
.fee__slider:hover::-webkit-slider-thumb{transform:scale(1.1)}
.fee__slider:focus-visible{outline:none}
.fee__slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(16,16,20,.16)}
.fee__scale{
  display:flex;justify-content:space-between;
  font-size:13px;color:var(--muted-2);font-variant-numeric:tabular-nums;
}
.fee__foot{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:15px;line-height:1.55;color:var(--muted-2);
}
.fee__foot strong{color:var(--ink);font-variant-numeric:tabular-nums}

/* ── the bars ────────────────────────────────────────── */
.fee__chart{position:relative;display:flex;flex-direction:column;gap:22px}
/* the line Duo holds, so overshoot is unmistakable */
/* left is set from real track geometry in script.js — a percentage here would
   resolve against the chart, not the bar track, and land in the wrong place */
.fee__anchor{
  position:absolute;top:2px;bottom:2px;width:1px;left:0;
  border-left:1px dashed rgba(16,16,20,.28);
  opacity:0;transition:opacity .3s var(--ease);
}
.fee__anchor.is-set{opacity:1}
.bar{
  display:grid;
  grid-template-columns:var(--namew) 1fr auto;
  align-items:center;gap:16px;
}
.bar__name{font-size:15px;color:var(--muted-2);line-height:1.3}
.bar__track{
  position:relative;height:16px;border-radius:99px;
  background:rgba(16,16,20,.06);overflow:hidden;
}
.bar__fill{
  position:absolute;inset:0 auto 0 0;
  width:var(--pct,40%);border-radius:99px;
  background:linear-gradient(90deg,#cfcfd6,#b6b6c0);
  transition:width .35s var(--ease);
}
.bar__val{
  font-size:17px;font-weight:500;letter-spacing:-.3px;
  font-variant-numeric:tabular-nums;min-width:96px;text-align:right;
}
.bar__val i{font-style:normal;font-size:13px;color:var(--muted-2)}

.bar--duo .bar__name{color:var(--ink);font-weight:500}
.bar--duo .bar__track{background:rgba(16,16,20,.08)}
.bar--duo .bar__fill{background:linear-gradient(90deg,#2a2a30,var(--ink))}
.bar--duo .bar__val{color:var(--ink);font-weight:600}

/* ── the result ──────────────────────────────────────── */
.fee__result{
  margin-top:clamp(32px,4.5vh,56px);padding-top:clamp(24px,3vh,36px);
  border-top:1px solid var(--line);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start;
}
.fee__keep{
  font-family:var(--display);font-weight:500;
  font-size:clamp(24px,2.7vw,34px);line-height:1.2;letter-spacing:-.7px;
}
.fee__keep strong{font-weight:500;font-variant-numeric:tabular-nums}
.fee__small{font-size:15px;line-height:1.6;color:var(--muted-2)}
.fee__small strong{color:var(--muted);font-variant-numeric:tabular-nums}

/* when a percentage would actually cost less, say so rather than hide it */
.fee.is-cheaper .bar--duo .bar__fill{background:linear-gradient(90deg,#8a8a95,#6b6b78)}

/* ══════════════ CONTACT ══════════════ */
.contact{background:var(--ink);color:#fff}
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,72px);align-items:start}
.contact__sub{margin-top:24px;max-width:44ch;color:rgba(255,255,255,.7);font-size:22px;line-height:1.5;letter-spacing:-.3px}
.contact__details{margin-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.contact__details>div{
  display:grid;grid-template-columns:130px 1fr;gap:20px;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.contact__details dt{font-size:13px;color:rgba(255,255,255,.45);letter-spacing:.02em}
.contact__details dd{font-size:18px;line-height:1.4}
.contact__details a:hover{text-decoration:underline;text-underline-offset:3px}
.muted{color:rgba(255,255,255,.45)}

.contact__right{background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:clamp(24px,2.6vw,34px)}
.f{margin-bottom:14px}
.f label{display:block;font-size:13.5px;font-weight:500;margin-bottom:8px}
.f label i{color:#c0392b;font-style:normal}
.f input,.f select,.f textarea{
  width:100%;padding:12px 15px;font-size:16px;
  background:var(--surface);
  border:1px solid var(--line);border-radius:10px;
  transition:border-color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.f textarea{resize:vertical;min-height:88px}
.f select{appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236b6b78' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;background-size:12px;padding-right:42px;
}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none;background:#fff;border-color:var(--ink);box-shadow:0 0 0 3px rgba(16,16,20,.07);
}
.f.has-err input,.f.has-err select{border-color:#c0392b;background:#fff8f7}
.err{min-height:0;font-size:12.5px;color:#c0392b;margin-top:6px;display:none}
.f.has-err .err{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.micro{margin-top:16px;font-size:12.5px;color:var(--muted-2);line-height:1.6;text-align:center}

.thanks{text-align:center;padding:48px 8px}
.thanks svg{width:56px;height:56px;margin:0 auto 20px;fill:none;stroke:#1f9d55;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.thanks h3{font-family:var(--display);font-size:32px;font-weight:500;letter-spacing:-.8px;margin-bottom:12px}
.thanks p{color:var(--muted);font-size:16px;line-height:1.7;max-width:40ch;margin-inline:auto}
.thanks a{text-decoration:underline;text-underline-offset:3px}

/* ══════════════ FOOTER ══════════════ */
.foot{background:var(--ink);color:#fff;padding-top:8px}
.foot__inner{
  display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;
  padding-block:64px;border-top:1px solid rgba(255,255,255,.12);
}
.brand--foot{color:#fff;display:block;margin-bottom:16px}
.foot__brand p{max-width:44ch;color:rgba(255,255,255,.55);font-size:14.5px;line-height:1.7}
.foot__links{display:flex;flex-direction:column;gap:12px}
.foot__links a{font-size:14.5px;color:rgba(255,255,255,.7)}
.foot__links a:hover{color:#fff}
.foot__legal{padding-block:28px;border-top:1px solid rgba(255,255,255,.12)}
.foot__legal p{font-size:12.5px;color:rgba(255,255,255,.38);line-height:1.7;max-width:80ch}

/* ══════════════ REVEAL ON SCROLL ══════════════ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width:1024px){
  :root{--sec-y:100px;--pad:24px}
  /* copy first, then graphic, then cards */
  .probs__grid{grid-template-columns:1fr;gap:24px}
  .stage__art{aspect-ratio:16/10;max-height:32vh;margin-left:0}
  .stage__cap{min-height:0}
  .cards{grid-template-columns:repeat(2,1fr)}
  .fee__grid{grid-template-columns:1fr;gap:34px}
  .fee__result{grid-template-columns:1fr;gap:18px}
  .work__card{grid-template-columns:1fr;gap:24px}
  .work__media img{aspect-ratio:16/10}
  .duo__grid{grid-template-columns:1fr;gap:48px}
  .svc{grid-template-columns:1fr;gap:40px}
  .svc__media{min-height:0;aspect-ratio:16/10}
  .contact__grid{grid-template-columns:1fr;gap:56px}
}

@media (max-width:768px){
  :root{--sec-y:80px}
  .nav__links,.nav__cta{display:none}
  .nav__burger{display:block}
  .nav__inner{grid-template-columns:1fr auto;padding:12px 12px 12px 20px}
        .nav__mobile{display:flex}
  /* [hidden] and .nav__mobile have equal specificity, so the attribute must
     be restated here or the closed menu renders open on mobile */
  .nav__mobile[hidden]{display:none}

  .hero__content{padding:110px 24px 90px}
  .hero__h1{font-size:clamp(36px,10.4vw,52px);letter-spacing:-.028em}
  .hero__sub{font-size:16px;margin-top:22px}
  .hero__actions{margin-top:34px;flex-direction:column;align-items:stretch}
  .btn--hero,.btn--ghost{padding:18px 32px;width:100%}

  /* Refit's 22px lead / 18px body is generous on a phone — step it down a
     notch so lines hold a sensible number of words */
  body{font-size:17px}
  .sub,.terms__lead,.duo__text .lead,.contact__sub{font-size:19px;line-height:1.45}
  .duo__text p,.work__body p,.svc__panel p{font-size:17px}
  .h2{font-size:clamp(28px,7.4vw,34px);letter-spacing:-.6px}
  .eyebrow{font-size:14px;padding:9px 16px}
  .plot{width:clamp(230px,74vw,300px)}
  .marquee__track{animation-duration:42s}

  .prob:hover{transform:none}
  .prob.is-active{transform:scale(.96)}
  .prob__head{padding:10px 14px 10px 10px;gap:12px}
  .prob__thumb{width:74px;min-height:72px;border-radius:10px}
  .prob__title{font-size:15.5px}
  .prob__short{font-size:13px}
  .stage__body{font-size:17px}

  .fee__lede{font-size:19px}
  .bar{grid-template-columns:1fr auto;gap:8px 12px}
  .bar__name{grid-column:1/-1}
  .bar__val{min-width:0}
  .fee__anchor{display:none}   /* no fixed name column to anchor against */

  .cards{grid-template-columns:1fr;gap:14px}
  .card{padding:22px 20px 24px}
  .card__ico{margin-bottom:14px;width:26px;height:26px}
  .terms__lead{font-size:16px}
  /* stacking cards need less top offset on a short screen, and the shrink-back
     effect is disabled because the cards are tall relative to the viewport */
  .work__card{position:static;transform:none!important;opacity:1!important}
  .work__card + .work__card{margin-top:20px}

  .contact__right{padding:26px 20px}
  .contact__details>div{grid-template-columns:1fr;gap:4px}
  .svc__name{font-size:17px}
  .svc__panel p{padding-left:0}
  .foot__inner{flex-direction:column;gap:32px}

  /* 44px minimum tap targets */
  .foot__links{gap:0}
  .foot__links a{display:flex;align-items:center;min-height:48px;font-size:16px}
  .contact__details a{display:inline-flex;align-items:center;min-height:44px;font-size:17px}
  .svc__head{padding-block:20px;min-height:60px}
  .svc__note a{display:inline-block;padding:8px 0}
}

/* portrait screens get the 9:16 cut and its own poster */
@media (max-aspect-ratio:3/4){
  .hero__video{poster:none}
  .hero__media{background:url("assets/img/hero-poster-mobile.jpg") center/cover no-repeat}
}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  .hero__video{display:none}
  .hero__media{background:url("assets/img/hero-poster.jpg") center/cover no-repeat}
}