/* ============ HAND-HELD DEVICE + REDESIGNED PORTAL UI ============
   Asset: assets/phone-hand.png (706x964, hand keyed off a flat studio grey).
   Screen rect measured off the alpha, not guessed:
     left 11.76%  top 1.56%  width 44.76%  height 70.23%
   Screen content is a real DOM layer sitting on top of the PNG. ============ */

.phonefly{width:min(460px,88vw)}
.phonefly .inner{aspect-ratio:706/964}

/* DESKTOP: hand + phone is ONE composed object anchored to the lower-right
   corner of the viewport, so the wrist crop leaves the frame instead of
   floating as a rectangle inside the hero. Size is driven by viewport
   HEIGHT because the arm occupies the bottom ~28% of the asset: the taller
   the object, the higher the screen rides. Screen centre lands within ~40px
   of the h1 centre from 1280x800 up to 1920x1080. */
.phonefly.fly{
  width:min(clamp(430px,64vh,700px),42vw);
  top:auto; bottom:-16px;        /* wrist cut sits below the fold */
  right:-26px;                   /* clears a classic scrollbar, so the forearm's
                                    outer edge is past the fold either way */
}
.phonefly.fly.docked{bottom:auto}

/* contact shadow, not a glow: directional and navy-tinted (light from the
   upper right, matching the hero plate), plus a tight edge that grounds it */
.phonefly .inner > img{
  filter:drop-shadow(-13px 18px 26px rgba(5,11,30,.42)) drop-shadow(0 2px 4px rgba(5,11,30,.34));
}
.phonefly.fly .inner > img{
  filter:drop-shadow(-16px 22px 30px rgba(5,11,30,.46)) drop-shadow(0 2px 4px rgba(5,11,30,.36));
}

.pscreen{
  left:11.76%; top:1.56%; width:44.76%; height:70.23%;
  border-radius:6.5%/4.2%;
  background:#0d1730;
  z-index:2;                     /* under the PNG so the bezel and fingers overlap it */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.phonefly .inner > img{z-index:3}
.phonefly .notch{display:none}
.demo-tag{top:auto; bottom:5.5%; right:auto; left:50%; transform:translateX(-118%); z-index:4;
  font-size:.46rem; padding:3px 8px; background:rgba(255,255,255,.14)}

/* ---------------- TABLET + MOBILE: phone only, no hand ----------------
   phone-hand.png is a photograph of a hand and there is no hand-free version
   of it; phone-cutout.png is generated art with fingers in frame. So the
   device below 1041px is drawn in CSS: sharp at any size, no 780KB download,
   and nothing on the page claims to be a photo that isn't. */
@media(max-width:1040px){
  /* 300px puts the live screen at ~283x602, within 10% of the 258x552 the
     portal UI is drawn at. The internal type is rem-based, so oversizing the
     device just opens dead space between the content and the tab bar. */
  .phonefly{width:min(300px,82vw);margin:0 auto}
  .phonefly .inner{aspect-ratio:392/812;background:#080b12;border-radius:13.5%/6.5%;
    box-shadow:0 0 0 1px rgba(255,255,255,.07) inset,
               0 1px 0 rgba(255,255,255,.10) inset,
               -6px 14px 26px rgba(5,11,30,.30), 0 2px 5px rgba(5,11,30,.22)}
  .phonefly .inner > img{display:none}
  .phonefly .notch{display:block;position:absolute;z-index:5;left:50%;transform:translateX(-50%);
    top:2.4%;width:31%;height:2.5%;min-height:16px;border-radius:100px;background:#080b12}
  .pscreen{left:2.9%;top:1.5%;width:94.2%;height:97%;border-radius:11.6%/5.4%;z-index:2}
  .demo-tag{bottom:3.4%;left:50%;transform:translateX(-50%)}

  /* the phone becomes its own portal section directly after the estimator.
     overflow-x:clip contains the full-bleed 100vw panel behind it without
     creating a scroll container (the fixed phone is desktop-only, so nothing
     here is at risk of being clipped) */
  #journey{display:flex;flex-direction:column;overflow-x:clip}
  .hero{order:1}
  .phonefly{order:2}
  .chapter{order:3}          /* equal order keeps DOM sequence 01-04 */
  .demo-note{order:4}
  #journeyEnd{order:5}

  /* its controls ride with it (moved here by the breakpoint handler) */
  .phonefly > .tabs-hint{margin:22px 0 0;text-align:center}
  /* max-content, never 100vw: the buttons sit on one row when the viewport
     allows it and wrap when it does not, without ever forcing a sideways scroll */
  .phonefly > .demo-tabs{justify-content:center;margin-top:10px;
    width:max-content;max-width:calc(100vw - 40px);margin-left:50%;transform:translateX(-50%)}
}

/* ---------------- PORTAL UI, rebuilt for legibility ---------------- */
.pstate{padding:0;display:flex;flex-direction:column;gap:0}

/* status bar */
.ps-chrome{display:flex;justify-content:space-between;align-items:center;
  padding:5.5% 7% 0;font-size:.52rem;font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.04em}

/* header */
.ps-top{padding:4% 7% 5%;text-align:left;border-bottom:1px solid rgba(255,255,255,.09)}
.ps-brand{font-size:.5rem;font-weight:800;letter-spacing:.22em;color:var(--gold)}
.ps-job{font-size:1.02rem;font-weight:800;letter-spacing:-.03em;color:#fff;margin-top:6px;line-height:1.12}
.ps-status{display:inline-block;margin-top:8px;font-size:.52rem;font-weight:800;letter-spacing:.1em;
  color:#0d1730;background:var(--gold);padding:4px 9px;border-radius:2px}

/* the one big number */
.ps-hero{padding:7% 7% 5%;text-align:center}
.ps-hero .big{font-size:2.7rem;font-weight:900;letter-spacing:-.05em;color:#fff;line-height:.9}
.ps-hero .big small{font-size:1rem;font-weight:800;color:var(--gold);margin-left:2px}
.ps-hero .lab{margin-top:8px;font-size:.55rem;font-weight:800;letter-spacing:.16em;color:rgba(255,255,255,.5)}
.ps-track{margin-top:12px;height:6px;border-radius:100px;background:rgba(255,255,255,.14);overflow:hidden}
.ps-track i{display:block;height:100%;border-radius:100px;background:var(--gold);transition:width .8s var(--ease)}
.ps-phase{display:flex;justify-content:space-between;margin-top:9px;font-size:.5rem;font-weight:800;
  letter-spacing:.09em;color:rgba(255,255,255,.38)}
.ps-phase b{color:var(--gold);font-weight:800}

/* list rows */
.ps-list{padding:2% 7% 0;display:grid;gap:8px}
.ps-item{display:flex;align-items:center;gap:9px;font-size:.65rem;color:#fff;line-height:1.25}
.ps-item .dot{width:15px;height:15px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.5rem;font-weight:900;background:var(--gold);color:#0d1730}
.ps-item.todo .dot{background:rgba(255,255,255,.14);color:rgba(255,255,255,.5)}
.ps-item.todo{color:rgba(255,255,255,.45)}

/* money */
.ps-fig{padding:5% 7% 0;display:grid;gap:9px}
.ps-figrow{display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.09);font-size:.62rem}
.ps-figrow span{color:rgba(255,255,255,.55);font-weight:700;letter-spacing:.06em}
.ps-figrow b{font-size:.86rem;color:#fff;font-weight:800}
.ps-figrow b.paid{color:var(--gold)}

/* docs */
.ps-files{padding:4% 7% 0;display:grid;gap:7px}
.ps-file{display:flex;justify-content:space-between;align-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:3px;
  padding:9px 10px;font-size:.62rem;color:#fff}
.ps-file em{font-style:normal;font-size:.48rem;font-weight:900;letter-spacing:.09em;color:var(--gold)}

/* photo grid: 2x2, big enough to actually read */
.ps-grid{padding:4% 7% 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ps-grid figure{cursor:pointer;position:relative;overflow:hidden;border-radius:3px}
.ps-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s var(--ease)}
.ps-grid figure:hover img{transform:scale(1.06)}
.ps-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:11px 7px 5px;
  font-size:.44rem;font-weight:800;letter-spacing:.05em;color:#fff;
  background:linear-gradient(to top,rgba(6,10,20,.9),transparent)}
.ps-note{padding:9px 7% 0;font-size:.52rem;color:rgba(255,255,255,.5)}

/* bottom bar */
.ps-tab{margin-top:auto;display:flex;justify-content:space-around;align-items:center;
  padding:4% 0 5%;border-top:1px solid rgba(255,255,255,.09)}
.ps-tab i{width:15px;height:15px;border-radius:3px;background:rgba(255,255,255,.2);display:block}
.ps-tab i.on{background:var(--gold)}

/* lightbox sits inside the screen */
.pv{border-radius:6.5%/4.2%}
.pv img{border-radius:3px}
.pv .cap{font-size:.5rem}

/* --- hero balance: the spacer column reserves exactly the object's width,
       so the copy can never run under the hand at any desktop size --- */
.hero .wrap{grid-template-columns:1fr min(clamp(430px,64vh,700px),42vw)}
.hero h1{font-size:clamp(2rem,3.5vw,3.15rem);max-width:18ch;text-wrap:balance}
.hero p{max-width:46ch}
@media(max-width:1180px){.hero h1{max-width:17ch}}
@media(max-width:1040px){.hero .wrap{grid-template-columns:1fr}.hero h1{max-width:18ch}}

/* DEMO chip belongs on the glass, bottom-left of the screen */
.demo-tag{top:auto;bottom:auto;left:13.5%;right:auto;transform:none;z-index:4;
  margin-top:0;position:absolute;top:62%;font-size:.44rem;padding:3px 7px;
  background:rgba(255,255,255,.16);letter-spacing:.16em}

/* ---------------- HERO: estimator as the call to action ---------------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.heroaddr{display:flex;gap:9px;margin-top:26px;max-width:460px;flex-wrap:wrap}
.heroaddr input{flex:1;min-width:210px;padding:15px 17px;border-radius:var(--r);
  border:1px solid rgba(242,245,252,.24);background:rgba(255,255,255,.07);color:#fff;
  font-family:inherit;font-size:.96rem;backdrop-filter:blur(8px)}
.heroaddr input::placeholder{color:rgba(242,245,252,.5)}
.heroaddr input:focus{outline:none;border-color:var(--gold-lit);background:rgba(255,255,255,.11)}
.heroaddr .btn{padding:15px 26px}
.hero-sat{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:.8rem;color:var(--muted)}
.sat-ping{width:7px;height:7px;border-radius:50%;background:var(--gold-lit);flex:none;
  box-shadow:0 0 0 0 rgba(236,204,99,.6);animation:satping 2.6s ease-out infinite}
@keyframes satping{0%{box-shadow:0 0 0 0 rgba(236,204,99,.55)}70%{box-shadow:0 0 0 11px rgba(236,204,99,0)}100%{box-shadow:0 0 0 0 rgba(236,204,99,0)}}
.hero-meta .tourlink{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(236,204,99,.4);margin-left:8px}
.hero-meta .tourlink:hover{color:#fff;border-color:#fff}
@media(prefers-reduced-motion:reduce){.sat-ping{animation:none}}

/* ---------------- PROOF WALL ---------------- */
.wall{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(20px,3vw,44px);margin-top:34px;align-items:stretch}
@media(max-width:900px){.wall{grid-template-columns:1fr}}
.wall-shot{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--hair);min-height:100%}
.wall-shot img{width:100%;height:100%;min-height:340px;object-fit:cover;display:block}
.wall-shot figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  font-size:.78rem;font-weight:600;color:#fff;
  background:linear-gradient(to top,rgba(8,12,20,.88),transparent)}
.wall-list{display:grid;align-content:center;gap:0}
.wi{padding:20px 0;border-bottom:1px solid var(--hair)}
.wi:first-child{padding-top:0}
.wi:last-child{border-bottom:0;padding-bottom:0}
.wi b{display:block;font-size:1.04rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.wi span{display:block;margin-top:6px;color:var(--ink-2);font-size:.9rem;max-width:56ch}