/* home.css — homepage-only sections for the "Guided Journey" reskin (index.html) */

/* the homepage design relies on a light backdrop so white cards (stepper, float-card,
   roadmap steps, phil-cards) read with depth — override the site-wide white body bg
   for this page only (home.css loads after theme.css, so this wins here). */
body{ background:var(--bg); }

.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:1.3px; text-transform:uppercase; color:var(--path); }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--path); }

/* hero */
.hero{ padding:56px 0 70px; }
.hero-grid{ display:grid; grid-template-columns:1fr; gap:44px; align-items:center; }
@media(min-width:960px){ .hero-grid{ grid-template-columns:1.05fr .95fr; } }
.hero-copy .eyebrow{ margin-bottom:20px; }
.hero-copy h1{ font-size:clamp(2.3rem,5.2vw,3.7rem); margin-bottom:22px; font-weight:700; letter-spacing:-.5px; }
.hero-copy h1 span{ color:var(--path); }
.hero-copy p.lead{ font-size:1.05rem; color:var(--ink-soft); max-width:480px; margin-bottom:30px; }
.hero-ctas{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:38px; }
.stepper{ display:flex; align-items:center; flex-wrap:wrap; gap:0; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; }
.step{ display:flex; align-items:center; gap:10px; }
.step .sn{ width:28px; height:28px; border-radius:50%; background:var(--path-soft); color:var(--path); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.76rem; flex:0 0 auto; }
.step.done .sn{ background:var(--path); color:#fff; }
.step span.lbl{ font-size:.78rem; font-weight:700; color:var(--ink); white-space:nowrap; }
.step-line{ width:32px; height:2px; background:var(--line); margin:0 10px; }
.hero-visual{ position:relative; }
.hero-photo{ border-radius:24px; overflow:hidden; }
.hero-photo img{ width:100%; height:420px; object-fit:cover; }
.float-card{ position:absolute; bottom:-24px; left:-24px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 20px; box-shadow:0 16px 34px rgba(28,35,64,.14); display:flex; align-items:center; gap:12px; }
@media(max-width:640px){ .float-card{ left:12px; bottom:12px; } }
.float-card .ic{ width:38px; height:38px; border-radius:10px; background:var(--accent2-soft); color:var(--accent2); display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.float-card b{ display:block; font-size:.9rem; }
.float-card span{ font-size:.72rem; color:var(--ink-soft); }

/* dashed rail connecting major homepage sections */
.rail-wrap{ position:relative; }
.rail-wrap::before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; background:repeating-linear-gradient(180deg,var(--path) 0 8px,transparent 8px 16px); transform:translateX(-1px); z-index:0; display:none; }
@media(min-width:900px){ .rail-wrap::before{ display:block; } }
.waypoint{ position:relative; z-index:1; display:flex; justify-content:center; margin-bottom:-14px; }
.waypoint .wp{ width:44px; height:44px; border-radius:50%; background:var(--path); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; font-size:.85rem; border:5px solid var(--bg); }

/* statement */
.statement{ padding:56px 0 90px; text-align:center; }
.statement .container{ max-width:760px; }
.statement p.big{ font-size:clamp(1.2rem,2.4vw,1.5rem); font-weight:600; margin:22px 0 18px; font-family:'Sora',sans-serif; }
.statement p.sub{ color:var(--ink-soft); margin-bottom:30px; }
.statement-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* destinations as waypoints */
.dest{ padding:20px 0 90px; }
.dest-head{ text-align:center; margin-bottom:40px; }
.dest-head h2{ font-size:clamp(1.5rem,3vw,2.1rem); margin-top:14px; }
.dest-path{ display:flex; overflow-x:auto; gap:0; padding:10px 4px 18px; scrollbar-width:none; align-items:flex-start; }
.dest-path::-webkit-scrollbar{ display:none; }
.d-stop{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:10px; width:96px; position:relative; }
.d-stop::before{ content:''; position:absolute; top:24px; left:-48px; width:96px; height:2px; background:var(--line); }
.d-stop:first-child::before{ display:none; }
.d-stop .ring{ width:50px; height:50px; border-radius:50%; border:2px solid var(--path); padding:3px; }
.d-stop img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.d-stop span{ font-size:.78rem; font-weight:600; text-align:center; }

/* services as roadmap */
.services{ padding:20px 0 100px; }
.serv-head{ text-align:center; margin-bottom:50px; }
.serv-head h2{ font-size:clamp(1.6rem,3.2vw,2.2rem); margin-top:14px; }
.serv-head p{ color:var(--ink-soft); max-width:540px; margin:14px auto 0; }
.roadmap{ max-width:760px; margin:0 auto; position:relative; }
.roadmap::before{ content:''; position:absolute; left:23px; top:10px; bottom:10px; width:2px; background:var(--line); }
.rm-step{ position:relative; padding:0 0 40px 68px; }
.rm-step:last-child{ padding-bottom:0; }
.rm-step .rn{ position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%; background:var(--card); border:2px solid var(--path); color:var(--path); display:flex; align-items:center; justify-content:center; font-family:'Sora',sans-serif; font-weight:700; font-size:.9rem; z-index:1; }
.rm-step.alt .rn{ border-color:var(--accent2); color:var(--accent2); }
.rm-step .body{ background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.rm-step h3{ font-size:1rem; margin-bottom:8px; }
.rm-step p{ color:var(--ink-soft); font-size:.88rem; margin-bottom:12px; }
.rm-step a{ font-size:.8rem; font-weight:700; color:var(--path); }

/* why us */
.why{ padding:90px 0; background:var(--ink); }
.why-head{ text-align:center; margin-bottom:48px; }
.why-head .eyebrow{ color:var(--sun); }
.why-head .eyebrow .dot{ background:var(--sun); }
.why-head h2{ color:#fff; font-size:clamp(1.6rem,3.2vw,2.2rem); margin-top:14px; }
.why-grid{ display:grid; grid-template-columns:1fr; gap:18px; }
@media(min-width:760px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }
.why-item{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:26px 22px; }
.why-item .n{ font-family:'Sora',sans-serif; font-weight:700; color:var(--sun); font-size:1.2rem; margin-bottom:14px; display:block; }
.why-item h4{ color:#fff; font-size:.95rem; margin-bottom:8px; }
.why-item p{ color:rgba(255,255,255,.62); font-size:.85rem; }

/* philosophy */
.phil{ padding:100px 0; }
.phil-head{ text-align:center; margin-bottom:48px; }
.phil-head h2{ font-size:clamp(1.6rem,3.2vw,2.2rem); margin-top:14px; }
.phil-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(min-width:860px){ .phil-grid{ grid-template-columns:repeat(4,1fr); } }
.phil-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 20px; text-align:center; }
.phil-card .icon{ width:42px; height:42px; border-radius:12px; background:var(--path-soft); color:var(--path); display:flex; align-items:center; justify-content:center; margin:0 auto 14px; font-size:1.05rem; }
.phil-card h4{ font-size:.88rem; margin-bottom:8px; }
.phil-card p{ color:var(--ink-soft); font-size:.8rem; }

/* cta band */
.cta-band{ padding:90px 0; text-align:center; background:linear-gradient(120deg,var(--path),#5a7bf0); }
.cta-band h3{ color:#fff; font-size:clamp(1.6rem,3.4vw,2.3rem); max-width:620px; margin:0 auto 16px; }
.cta-band p{ color:rgba(255,255,255,.82); margin-bottom:32px; }
.cta-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.btn-white{ background:#fff; color:var(--path); padding:14px 28px; font-size:.85rem; font-weight:700; border-radius:10px; display:inline-flex; align-items:center; gap:8px; }