:root{
  --accent:#f25c05;
  --accent2:#ff7a2f;
  --text:#12131a;
  --muted:#5d606b;
  --bg:#f6f7fb;
  --card:#ffffff;
  --line:rgba(18,19,26,.10);
  --shadow:0 20px 60px rgba(18,19,26,.12);
  --shadow2:0 14px 40px rgba(18,19,26,.10);
  --r:26px;
  --r2:18px;
  --max:1240px;
  --navh:86px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}

.site-shell{padding:22px}
.site-frame{
  max-width:calc(var(--max) + 60px);
  margin:0 auto;
  border-radius:calc(var(--r) + 8px);
  background:#fff;
  overflow:hidden;
  box-shadow:var(--shadow);
  position:relative;
}

.hero{
  height:min(640px, 74vh);
  background-image:var(--hero);
  background-size:cover;
  background-position:center;
  position:relative;
  padding-top:18px;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.68), rgba(0,0,0,.26));
}
.hero-inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:110px 20px 40px;
  text-align:center;
}
.hero-content{
  max-width: 1040px;      /* match search bar width */
  margin-left:auto;
  margin-right:auto;
}

.hero-kicker{
  color:var(--accent);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.hero-kicker:after{
  content:"";
  display:inline-block;
  width:38px; height:3px;
  background:var(--accent);
  border-radius:999px;
  transform:translateY(1px);
}
.hero-title{
  color:#fff;
  margin:18px 0 10px;
  font-weight:800;
  font-size:clamp(34px, 5vw, 62px);
  line-height:1.05;
}
.hero-title .accent{color:var(--accent)}
.hero-underline{
  width:54px; height:4px;
  background:var(--accent);
  margin:18px auto 22px;
  border-radius:999px;
}
.hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap}

.nav-wrap{
  position:absolute;
  top:18px; left:0; right:0;
  z-index:20;
  padding:0 18px;
}
.nav-pill{
  margin:0 auto;
  max-width:var(--max);
  height:var(--navh);
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 18px 0 16px;
  background:rgba(15,15,18,.55);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(12px);
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.nav-wrap.is-scrolled{position:fixed; top:14px}
.nav-pill.is-scrolled{
  background:#fff;
  border-color:rgba(18,19,26,.10);
  box-shadow:var(--shadow2);
}
.nav-wrap.nav-hidden .nav-pill{transform:translateY(-120px)}

.brand{display:flex; align-items:center; gap:10px; min-width:220px}
.brand-logo{height:34px; width:auto}

.nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex:1;
}
.nav-link{
  color:#fff;
  padding:12px 14px;
  font-weight:600;
  font-size:14px;
  border-radius:999px;
  transition:background .18s ease, color .18s ease;
  white-space:nowrap;
}
.nav-pill.is-scrolled .nav-link{color:var(--text)}
.nav-link:hover{background:rgba(255,255,255,.10)}
.nav-pill.is-scrolled .nav-link:hover{background:rgba(18,19,26,.06)}

.nav-dd{position:relative}
.nav-dd-btn{
  background:transparent;
  border:0;
  cursor:pointer;
  font-family:inherit;
}
.chev{font-size:12px; opacity:.85}
.nav-dd-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:min(320px, 76vw);
  background:#fff;
  border:1px solid rgba(18,19,26,.10);
  border-radius:16px;
  box-shadow:0 18px 50px rgba(18,19,26,.14);
  padding:10px;
  display:none;
  max-height:56vh;
  overflow:auto;
}
.nav-dd:hover .nav-dd-menu,
.nav-dd:focus-within .nav-dd-menu{display:block}
.nav-dd-item{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.nav-dd-item:hover{background:rgba(18,19,26,.06)}

.nav-actions{display:flex; align-items:center; gap:12px}
.icon-btn{
  width:42px; height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  display:none;
  place-items:center;
  font-size:18px;
}
.nav-pill.is-scrolled .icon-btn{
  border-color:rgba(18,19,26,.14);
  background:rgba(18,19,26,.04);
  color:var(--text);
}
/* Link4Help brand (logo + text) */
.link4help-brand{
  display:flex;
  align-items:center;
  gap:10px;
}

.link4help-logo{
  height:40px;
  width:auto;
  display:block;
}

.link4help-text{
  font-size:24px;
  font-weight:800;
  color:#F26A21;
  line-height:1;
  white-space:nowrap;
}
@media (max-width: 768px){
  .link4help-logo{ height:34px; }
  .link4help-text{ font-size:20px; }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:46px;
  padding:0 22px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--accent);
  color:#fff;
  box-shadow:0 14px 30px rgba(242,92,5,.24);
}
.prose a.btn{ color: inherit; }
.prose a.btn-primary{ color:#fff; }
.prose a.btn-ghost{ color: var(--text); }

.btn-primary:hover{background:#e95500}
.btn-ghost{
  background:#fff;
  color:var(--accent);
}
.btn-ghost:hover{background:rgba(255,255,255,.92)}
.w100{width:100%}

.page{
  position:relative;
  background:
    radial-gradient(circle at 10% 20%, rgba(242,92,5,.06), transparent 35%),
    radial-gradient(circle at 90% 0%, rgba(18,19,26,.04), transparent 40%),
    linear-gradient(#fff, #fff);
}

.panel-overlap{
  max-width:var(--max);
  margin:-30px auto 0;
  padding:26px 24px;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--shadow2);
  border:1px solid rgba(18,19,26,.08);
  position:relative;
  z-index:5;
}
.container{max-width:var(--max); margin:0 auto; padding:0 22px}
.section{padding:54px 0}
.section-title{
  text-align:center;
  margin:0 0 10px;
  font-size:36px;
  font-weight:800;
}
.section-sub{max-width:760px; margin:0 auto 26px; text-align:center; color:var(--muted)}
.hr-accent{width:56px; height:4px; background:var(--accent); border-radius:999px; margin:12px auto 0}

.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:22px;
}
.card{
  background:#fff;
  border:1px solid rgba(18,19,26,.08);
  border-radius:22px;
  box-shadow:0 10px 30px rgba(18,19,26,.06);
  padding:22px;
}
.card h3{margin:0 0 10px; font-size:20px}
.card p{margin:0; color:var(--muted); font-size:14px; line-height:1.6}
.card .pill{
  display:inline-flex;
  align-items:center;
  height:28px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:var(--accent);
  margin-bottom:10px;
}
.pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
.pill.pill-featured{background:#2563eb;}
.pill.pill-verified{background:#047857;}
.pill.pill-soft{background:rgba(18,19,26,.06); color:var(--text); border:1px solid rgba(18,19,26,.12);}
.card .cta{margin-top:16px}
.link{ color:var(--accent); font-weight:700; }

.article{ max-width:860px; margin:0 auto; }
.article h1{margin:0 0 8px; font-size:44px; font-weight:800}
.article .meta{color:var(--muted); font-size:14px; margin-bottom:16px}
.prose{line-height:1.8; color:#222}
.prose h2{margin-top:30px}
.prose a{color:var(--accent); font-weight:700}
.prose ul{padding-left:20px}

.footer{
  background:#0f0f12;
  color:#fff;
  padding:46px 22px 20px;
}
.footer-inner{
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:28px;
  align-items:start;
}
.footer-logo{height:34px; width:auto; margin-bottom:12px}
.footer .muted{color:rgba(255,255,255,.68)}
.footer-cols{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.footer-col a{display:block; padding:8px 0; color:rgba(255,255,255,.85); font-weight:600; font-size:14px}
.footer-col a:hover{color:#fff}
.footer-h{font-weight:800; margin-bottom:10px}
.footer-bottom{
  max-width:var(--max);
  margin:18px auto 0;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  font-size:13px;
}
.footer-brand-link{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.footer-brand-text{
  font-size:22px;
  font-weight:800;
  color:#F26A21;
  line-height:1;
  white-space:nowrap;
}
.footer-social{ display:flex; gap:10px; margin-top:14px; }
.social-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.7);
  color:#2b2b2b;
  text-decoration:none;
}
.social-btn svg{ fill: currentColor; }
.social-btn:hover{ transform: translateY(-1px); }

.mobile-drawer{position:fixed; inset:0; z-index:80; pointer-events:none}
.mobile-drawer.open{pointer-events:auto}
.mobile-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.35); opacity:0; transition:opacity .2s ease}
.mobile-drawer.open .mobile-backdrop{opacity:1}
.mobile-panel{
  position:absolute; top:0; right:0; height:100%;
  width:min(420px, 86vw);
  background:#fff;
  transform:translateX(110%);
  transition:transform .22s ease;
  padding:18px;
}
.mobile-drawer.open .mobile-panel{transform:translateX(0)}
.mobile-top{display:flex; justify-content:space-between; align-items:center; padding-bottom:10px; border-bottom:1px solid rgba(18,19,26,.10)}
.mobile-links{padding:12px 0; display:grid; gap:8px; max-height:70vh; overflow:auto}
.mobile-links a{padding:12px 12px; border-radius:14px; font-weight:700}
.mobile-links a:hover{background:rgba(18,19,26,.06)}
.mobile-subhead{margin-top:8px; font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.14em}
.mobile-cta{position:absolute; left:18px; right:18px; bottom:18px}

@media (max-width: 980px){
  .nav{display:none}
  .icon-btn{display:grid}
  .brand{min-width:auto}
  .grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 640px){
  .site-shell{padding:12px}
  .panel-overlap{margin-top:-40px; padding:18px}
  .section-title{font-size:30px}
  .grid{grid-template-columns:1fr}
  .hero{height:min(620px, 78vh)}
}

/* Forms */
input, textarea{
  border:1px solid rgba(18,19,26,.12);
  border-radius:14px;
  padding:12px 14px;
  font-family:inherit;
  font-size:14px;
}
input:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
}
label{
  display:block;
  font-weight:700;
  font-size:13px;
  margin-bottom:6px;
}


/* =========================================================
   HERO SEARCH (homepage) — CLEAN, NO CONFLICTS
   ========================================================= */

/* container: centered + wide on desktop */
.hero-search{
  margin-top:16px;
  width:min(1040px, 92vw);
  margin-left:auto;
  margin-right:auto;
}

/* keep the form normal (do NOT flex-center it) */
.hero-search-form{
  display:block;
}

/* anchor dropdown + button positioning */
.hero-search-field{
  position:relative;
  width:100%;
}

/* prominent input */
.hero-search-input{
  width:100%;
  height:56px;
  padding:0 160px 0 18px; /* room for button */
  border-radius:999px;
  border:1px solid rgba(255,255,255,.38);
  background:rgba(255,255,255,.14);
  color:#fff;
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    0 0 0 1px rgba(0,0,0,.08) inset;
  backdrop-filter: blur(10px);
}

.hero-search-input::placeholder{
  color:rgba(255,255,255,.78);
}

.hero-search-input:focus{
  outline:none;
  border-color:rgba(242,92,5,.85);
  box-shadow:
    0 20px 60px rgba(0,0,0,.34),
    0 0 0 6px rgba(242,92,5,.14);
}

/* button inside the field (no orange side line) */
.hero-search-btn{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  height:44px;
  padding:0 18px;
  border-radius:999px;
  border:0;                 /* removes orange edge */
  outline:0;
  box-shadow:none;          /* prevents odd side artifacts */
  background:var(--accent);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.hero-search-btn:hover{ filter:brightness(1.05); }
.hero-search-btn:active{ transform:translateY(-50%) translateY(1px); }

/* remove hint text completely */
.hero-search-hint{ display:none !important; }

/* dropdown panel (if/when you enable it) */
.hero-search-panel{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 10px);
  z-index:50;
  background:rgba(255,255,255,.96);
  border:1px solid rgba(18,19,26,.10);
  border-radius:18px;
  box-shadow:0 18px 60px rgba(18,19,26,.20);
  overflow:hidden;
  display:none;
}
.hero-search-panel.open{ display:block; }

/* =========================================================
   HERO TITLE — keep “real life moves” together (NOT whole title)
   ========================================================= */
.hero-title{
  white-space:normal;          /* allow wrapping normally */
  text-wrap:balance;           /* nicer wraps (supported modern browsers) */
}

/* your “real life moves” is inside <span class="accent">…</span> */
.hero-title .accent{
  white-space:nowrap;          /* keeps “real life moves” on one line */
}

/* Mobile */
@media (max-width:640px){
  .hero-search{ width:min(720px, 92vw); }

  .hero-search-input{
    padding-right:18px;        /* button stacks below */
  }

  .hero-search-btn{
    position:static;
    transform:none;
    width:100%;
    height:48px;
    margin-top:10px;
  }

  .hero-search-panel{ top:calc(100% + 8px); }
}
/* When hero_kicker contains the search bar */
.hero-kicker-search{
  display:block;          /* overrides inline-flex behavior */
  width:100%;
  text-align:center;
  color:inherit;
}

/* remove the orange kicker line when using search */
.hero-kicker-search:after{
  display:none !important;
}

/* ensure the search container truly centers */
.hero-kicker-search .hero-search{
  margin-left:auto;
  margin-right:auto;
  width:min(700px, 92vw);
}
.nowrap{ white-space:nowrap; }