/* In person home evaluation (paid landing page). Loads after site.css and
   free-home-evaluation.css, which supply the navy header, the calendar, the
   time picker, the card and the story player. The form markup is the live
   form, unchanged; only its look is set here. */

body.ip{ background:#F5F7FA; }
.ip-nav a{ display:inline-flex; align-items:center; height:40px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:500; color:rgba(255,255,255,.78); transition:background-color .2s ease, color .2s ease; }
.ip-nav a:hover{ background:rgba(255,255,255,.1); color:#fff; }

/* ---------- Hero: Ryan and Paul behind the navy ---------- */
.ip-hero{ position:relative; overflow:hidden; color:#fff; text-align:center; border-radius:0 0 var(--r-sec) var(--r-sec); background:#071931;
  min-height:min(620px, 72svh); display:flex; align-items:center; justify-content:center; padding:clamp(56px, 8vh, 96px) 24px clamp(150px, 18vh, 190px); }
.ip-hero-bg{ position:absolute; inset:0; }
.ip-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; }
.ip-hero-bg::after{ content:""; position:absolute; inset:0;
  background:
    radial-gradient(46% 62% at 50% 46%, rgba(7,25,49,.78) 0%, rgba(7,25,49,.35) 70%, rgba(7,25,49,0) 100%),
    linear-gradient(180deg, rgba(7,25,49,.35) 0%, rgba(7,25,49,.25) 45%, rgba(7,25,49,.92) 100%); }
.ip-hero-in{ position:relative; max-width:860px; display:flex; flex-direction:column; align-items:center; }
.ip-badge{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px 0 12px; border-radius:999px; font-size:14px; font-weight:500;
  background:rgba(4,13,27,.34); border:1px solid rgba(255,255,255,.24); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.ip-badge i{ font-size:18px; color:var(--accent-tint); }
.ip-hero h1{ margin-top:20px; font-size:clamp(2.2rem, 4.4vw, 3.9rem); font-weight:500; letter-spacing:-0.04em; line-height:1.04; text-wrap:balance; }
.ip-hero h1 em{ font-style:normal; color:var(--accent-tint); }
.ip-sub{ margin-top:16px; max-width:52ch; font-size:clamp(16px, 1.3vw, 18px); line-height:1.6; color:rgba(255,255,255,.88); }
.ip-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:26px; }
.ip-trust > span{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:500;
  background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); }
.ip-trust i{ font-size:17px; color:var(--accent-tint); }
.ip-trust b{ font-weight:600; }
.ip-stars{ display:inline-flex; gap:1px; color:var(--accent); font-size:13px; }
.ip-trust .ip-stars i{ font-size:13px; color:var(--accent); }

/* ---------- The booking card ---------- */
.ip-book{ position:relative; z-index:2; margin-top:calc(-1 * clamp(110px, 14vh, 150px)); padding:0 24px; scroll-margin-top:90px; }
.ip-card{ max-width:720px; margin:0 auto; scroll-margin-top:90px; }
.ipe-card-head{ text-align:center; margin-bottom:24px; }
.ipe-card-head h2{ font-size:clamp(1.6rem, 2.6vw, 2.1rem); font-weight:500; letter-spacing:-0.03em; line-height:1.1; }
.ipe-card-head p{ margin:10px auto 0; max-width:48ch; font-size:15.5px; line-height:1.6; color:var(--muted); }
.ipe-form{ display:grid; gap:14px; }
.ip-pick{ display:grid; gap:12px; margin-bottom:6px; }
.ip-pick .fe-times{ margin-bottom:12px; }
.ipe-field{ display:grid; gap:6px; }
.ipe-label{ font-size:13.5px; font-weight:600; color:var(--ink-2); }
.ipe-label .opt{ font-weight:400; color:var(--muted); }
.ipe-help{ margin-top:-2px; font-size:13px; line-height:1.5; color:var(--muted); }
.ipe-form .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ipe-form .field{ width:100%; background:var(--panel); border-color:transparent; }
.ipe-form .field:focus{ background:#fff; }
.ipe-form textarea.field{ min-height:92px; resize:vertical; }
.ipe-form select.field{ color:var(--ink); }
.ipe-form select.field:invalid{ color:#6B7585; }
/* The form's own Best day and Best time selects stay in it (they travel on
   the lead) but the calendar and the time buttons fill them in. */
#ipeForm .field-row:has(#ipeDay){ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ipe-form .btn{ width:100%; height:58px; margin-top:6px; border-radius:999px; font-size:16px; font-weight:600; }
.ipe-micro{ margin-top:14px; font-size:13px; line-height:1.55; color:var(--muted); text-align:center; }
.ipe-micro a{ color:var(--ink); font-weight:600; }
.ipe-done.show{ display:flex; flex-direction:column; align-items:center; gap:0; padding:28px 8px; margin:0; background:none; color:var(--ink); text-align:center; }
.ipe-done .ring{ width:64px; height:64px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--ink); }
.ipe-done .ring svg{ width:28px; height:28px; stroke:currentColor; margin:0; }
.ipe-done h3{ margin-top:18px; font-size:clamp(1.5rem, 2.6vw, 2rem); font-weight:500; letter-spacing:-0.03em; }
.ipe-done p{ margin-top:10px; max-width:44ch; font-size:16px; line-height:1.6; color:var(--muted); }
.ipe-done a{ color:var(--ink) !important; }
/* main.js address suggestions */
.ipe-form .ac-wrap{ position:relative; }
.ipe-form .ac-list{ left:0; right:0; top:calc(100% + 6px); }
.ipe-form .ac-item{ display:grid; grid-template-columns:18px 1fr; column-gap:10px; align-items:center; }
.ipe-form .ac-item svg{ grid-row:span 2; width:18px; height:18px; stroke:var(--accent-text); }
.ipe-form .ac-note{ padding:6px 14px 4px; font-size:11.5px; color:var(--muted); }

/* ---------- Sections ---------- */
.ip-head{ max-width:720px; margin:0 auto clamp(32px, 4vw, 48px); text-align:center; }
.ip-head .h2{ text-wrap:balance; }
.ip-head > p:last-child:not(.kicker){ margin-top:14px; font-size:16.5px; line-height:1.6; color:var(--muted); }
.ip-step-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.ip-step-list li{ position:relative; padding:clamp(24px, 3vw, 36px); border-radius:var(--r-card); background:#fff; box-shadow:0 0 0 1px rgba(7,25,49,.05); }
.ip-num{ position:absolute; right:24px; top:22px; font-size:14px; font-weight:600; color:var(--accent-text); }
.ip-step-list i{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--navy-grad); color:#fff; font-size:24px; }
.ip-step-list h3{ margin-top:22px; font-size:20px; font-weight:500; letter-spacing:-0.02em; }
.ip-step-list p{ margin-top:8px; font-size:15.5px; line-height:1.6; color:var(--muted); }

.ip-why-grid{ display:grid; grid-template-columns:minmax(0, 7fr) minmax(0, 5fr); gap:clamp(28px, 5vw, 72px); align-items:center; }
.ip-video{ max-width:none; margin:0; }
.ip-why-copy .h2{ text-wrap:balance; }
.ip-why-copy > p:not(.kicker){ margin-top:16px; font-size:16.5px; line-height:1.65; color:var(--ink-2); }
.ip-why-list{ list-style:none; margin:22px 0 28px; padding:0; display:grid; gap:14px; }
.ip-why-list li{ display:flex; gap:12px; font-size:15.5px; line-height:1.55; color:var(--muted); }
.ip-why-list b{ color:var(--ink); font-weight:600; }
.ip-why-list i{ width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text); font-size:18px; }

.ip-rev-grid{ columns:3 320px; column-gap:16px; }
.ip-rev{ break-inside:avoid; margin:0 0 16px; padding:24px; border-radius:var(--r-card); background:#fff; box-shadow:0 0 0 1px rgba(7,25,49,.05); }
.ip-rev blockquote{ margin:12px 0 0; font-size:15.5px; line-height:1.65; color:var(--ink-2); }
.ip-rev figcaption{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.ip-av{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--navy-grad); color:#fff; font-size:15px; font-weight:600; }
.ip-rev figcaption > span:last-child{ display:flex; flex-direction:column; line-height:1.25; }
.ip-rev figcaption b{ font-size:15px; font-weight:600; }
.ip-rev figcaption small{ font-size:13px; color:var(--muted); }

.ip-close{ max-width:1040px; margin:0 auto; padding:clamp(40px, 6vw, 72px) 24px; border-radius:var(--r-sec); text-align:center; color:#fff;
  background:radial-gradient(50% 90% at 86% 0%, rgba(201,164,92,.2) 0%, rgba(201,164,92,0) 62%), var(--navy-grad); }
.ip-close .kicker{ color:rgba(255,255,255,.7); }
.ip-close > p:not(.kicker){ margin:14px auto 26px; max-width:46ch; font-size:16.5px; line-height:1.6; color:rgba(255,255,255,.84); }
.ip-close-sec{ padding-bottom:clamp(64px, 8vw, 112px); }

.ip-foot{ padding:clamp(48px, 6vw, 72px) 0 32px; background:#071931; color:rgba(255,255,255,.8); border-radius:var(--r-sec) var(--r-sec) 0 0; }
.ip-foot-top{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
.ip-foot-top > div:first-child p{ margin-top:14px; max-width:40ch; font-size:14.5px; line-height:1.6; }
.ip-foot h5{ margin:0 0 12px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-tint); }
.ip-foot-top > div:not(:first-child){ display:flex; flex-direction:column; gap:6px; font-size:14.5px; line-height:1.6; }
.ip-foot a:hover{ color:#fff; }
.ip-foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px 24px; margin-top:40px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; color:rgba(255,255,255,.6); }
.ip-foot-bottom a{ color:var(--accent-tint); }

@media (max-width:1023px){
  .ip-nav{ display:none; }
  .ip-why-grid{ grid-template-columns:1fr; }
  .ip-step-list{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .ip-hero{ min-height:0; padding:40px 18px 140px; border-radius:0 0 24px 24px; }
  .ip-hero-bg img{ object-position:50% 0%; }
  .ip-hero-bg::after{ background:linear-gradient(180deg, rgba(7,25,49,.45) 0%, rgba(7,25,49,.72) 45%, rgba(7,25,49,.95) 100%); }
  .ip-hero h1{ font-size:clamp(1.9rem, 8.4vw, 2.3rem); }
  .ip-trust{ gap:6px; }
  .ip-trust > span{ height:34px; font-size:13px; padding:0 12px; }
  .ip-trust > span:not(:first-child){ display:none; }
  .ip-book{ margin-top:-110px; padding:0 12px; }
  .ip-card{ padding:22px 14px; border-radius:24px; }
  .ipe-form .field-row{ grid-template-columns:1fr; }
  .ip-rev-grid{ columns:1; }
  .ip-close{ border-radius:24px; padding:36px 20px; }
  .ip-foot-top{ grid-template-columns:1fr; }
  .ip-foot{ border-radius:24px 24px 0 0; }
}
@media (max-width:760px){
  .ip-hero{ padding-left:var(--gut, 30px); padding-right:var(--gut, 30px); }
  .ip-book{ padding:0 var(--gut, 30px); }
}
@media (max-width:760px){
  /* Like the homepage on phones: Ryan and Paul in the top, copy below them */
  .ip-hero{ min-height:0; align-items:flex-start; padding-top:calc(min(66vw, 280px)); }
  .ip-hero-bg{ bottom:auto; height:calc(min(108vw, 450px)); -webkit-mask-image:linear-gradient(180deg, #000 60%, transparent 100%); mask-image:linear-gradient(180deg, #000 60%, transparent 100%); }
  .ip-hero-bg img{ object-position:50% 10%; }
  .ip-hero-bg::after{ background:linear-gradient(180deg, rgba(7,25,49,.4) 0px, rgba(7,25,49,0) 90px); }
  .ip-hero h1{ text-shadow:0 2px 24px rgba(7,25,49,.6); }
}
@media (max-width:760px){ .ip-hero-bg img{ object-position:50% 30%; } }
@media (max-width:760px){
  .ip-hero{ padding-top:min(88vw, 350px); }
  .ip-hero-bg{ height:min(122vw, 500px); }
  .ip-hero-bg img{ object-position:50% 20%; }
}
@media (max-width:760px){ .ip-hero-bg img{ object-position:50% 46%; } }
.ip-social{ display:flex; gap:8px; margin-top:18px; }
.ip-social a{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); color:#fff; font-size:19px; transition:background-color .25s ease, color .25s ease; }
.ip-social a:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
