/* ============================================================
   Ridgway Advisors — HR & Benefits Consulting
   Refined executive / editorial design system
   ============================================================ */

:root{
  /* Brand palette — navy/blue (mockup identity, no gold) */
  --navy:        #1B2A4A;   /* RA mark / primary */
  --navy-deep:   #14203a;
  --navy-700:    #243a63;
  --blue:        #2b4a7e;   /* mid blue accent */
  --blue-tint:   #eef2f8;   /* pale blue section bg */
  --blue-tint-2: #e3eaf4;
  --sage:        #9CA59A;
  --sage-deep:   #7c887f;
  --accent:      #1B2A4A;   /* accent = navy (no gold) */
  --paper:       #ffffff;   /* white base */
  --paper-2:     #f4f7fb;   /* very pale blue */
  --ink:         #1d2433;
  --ink-soft:    #56607a;
  --line:        #e2e8f0;
  --white:       #ffffff;

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 10px rgba(27,42,74,.06);
  --shadow:    0 14px 40px -18px rgba(27,42,74,.22);
  --shadow-lg: 0 30px 70px -28px rgba(20,32,58,.38);

  --serif: "Outfit", system-ui, -apple-system, sans-serif;   /* headings now sans */
  --sans:  "Outfit", system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:90px; }
html.lenis,html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
html:not(.lenis){ scroll-behavior:smooth; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:clamp(1rem,.96rem + .2vw,1.05rem);
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--sans); font-weight:700; line-height:1.15; letter-spacing:-.02em; }

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.eyebrow{
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--navy); display:inline-block; }
.section{ padding:clamp(2.75rem,5vw,4rem) 0; }
.section-head{ max-width:680px; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
.section-head h2{ font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem); margin:.6rem 0 .9rem; }
.section-head p{ color:var(--ink-soft); font-size:1.12rem; }
.center{ margin-inline:auto; text-align:center; }
.center .eyebrow{ justify-content:center; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:.98rem;
  padding:.95rem 1.7rem; border-radius:100px; cursor:pointer;
  border:1.5px solid transparent; transition:.25s ease; will-change:transform;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-deep); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-gold{ background:var(--navy); color:#fff; }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:rgba(27,42,74,.25); }
.btn-ghost:hover{ border-color:var(--navy); background:var(--navy); color:#fff; transform:translateY(-2px); }

/* ============================================================ HEADER */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:1.1rem 0; transition:transform .4s cubic-bezier(.4,0,.2,1), padding .35s ease, background .35s ease, box-shadow .35s ease;
  transform:translateY(0);
}
.site-header.scrolled{
  background:rgba(247,246,242,.86); backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line); padding:.65rem 0;
}
.site-header.hidden{ transform:translateY(-100%); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.nav-logo img{ height:38px; width:auto; transition:.35s ease; }
.site-header.scrolled .nav-logo img{ height:32px; }
.nav-links{ display:flex; align-items:center; gap:2.2rem; list-style:none; }
.nav-links a{
  font-weight:500; font-size:.96rem; color:var(--ink); position:relative; padding:.2rem 0;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:2px; width:0; background:var(--navy); transition:.28s ease;
}
.nav-links a:hover::after{ width:100%; }
.nav-links li:has(.nav-mobile-cta) .nav-mobile-cta::after{ display:none; }
.nav-mobile-cta{ display:none; }   /* hidden on desktop; revealed inside open mobile menu */
.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; flex-direction:column; gap:5px; padding:.4rem; }
.nav-toggle span{ width:26px; height:2px; background:var(--navy); transition:.3s; border-radius:2px; }

/* ============================================================ HERO */
.hero{
  position:relative; padding:clamp(7rem,12vw,9.5rem) 0 clamp(3rem,6vw,5rem);
  background:linear-gradient(165deg, var(--blue-tint) 0%, var(--paper) 70%);
  overflow:hidden;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.hero-copy h1{ font-size:clamp(2.6rem,1.6rem + 4vw,4.6rem); letter-spacing:-.02em; }
.hero-copy h1 em{ font-style:normal; color:var(--navy); }
.hero-lead{ font-size:1.22rem; color:var(--ink-soft); margin:1.5rem 0 2rem; max-width:33ch; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero-badges{ display:flex; gap:1.6rem; margin-top:2.6rem; flex-wrap:wrap; }
.hero-badge{ display:flex; gap:.7rem; align-items:flex-start; flex:1; min-width:150px; }
.hero-badge .hb-ic{ flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; }
.hero-badge .hb-ic svg{ width:19px; height:19px; color:var(--navy); }
.hero-badge b{ display:block; font-family:var(--serif); font-size:1.05rem; color:var(--navy); line-height:1.2; }
.hero-badge span{ font-size:.82rem; color:var(--ink-soft); margin-top:.2rem; display:block; line-height:1.35; }

/* hero art panel */
.hero-art{ position:relative; }
.hero-art .art-svg{ width:100%; height:auto; border-radius:var(--radius-lg); filter:drop-shadow(0 24px 50px -28px rgba(20,32,58,.30)); }

/* trust strip */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--white); }
.trust .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:1.4rem; flex-wrap:wrap; }
.trust p{ font-weight:600; color:var(--navy); font-family:var(--serif); font-size:1.05rem; }
.trust ul{ display:flex; gap:2.2rem; list-style:none; flex-wrap:wrap; }
.trust li{ display:flex; align-items:center; gap:.55rem; color:var(--ink-soft); font-size:.95rem; font-weight:500; }
.trust li svg{ width:20px; height:20px; color:var(--navy); flex:none; }

/* ============================================================ PROBLEM */
.problem{ background:var(--white); }
.problem .section-head{ text-align:center; margin-inline:auto; }
.problem .section-head .eyebrow{ justify-content:center; }
.problem-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.problem-pills{ display:flex; flex-direction:column; gap:.9rem; }
.ppill{
  display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:1rem 1.3rem; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ppill:hover{ transform:translateX(4px); box-shadow:var(--shadow-sm); border-color:rgba(43,74,126,.4); }
.ppill .pic{
  flex:none; width:44px; height:44px; border-radius:11px; background:var(--navy);
  display:grid; place-items:center; transition:.3s ease;
}
.ppill .pic svg{ width:22px; height:22px; color:#fff; }
.ppill span:last-child{ font-weight:500; color:var(--navy); font-size:1rem; }
.problem-quote{ position:relative; padding:0 1rem; }
.problem-quote .qmark{ font-family:var(--sans); font-size:5rem; line-height:.6; color:var(--navy); opacity:.4; display:block; }
.problem-quote p{ font-family:var(--sans); font-style:normal; font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); color:var(--navy); line-height:1.4; margin-top:.5rem; }


/* ============================================================ SOLUTION */
.solution{ background:var(--paper-2); }
.solution .section-head{ max-width:760px; text-align:center; margin-inline:auto; }
.solution .section-head .eyebrow{ justify-content:center; }
.steps{ display:flex; align-items:stretch; gap:0; }
.step{
  flex:1; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:1.8rem 1.5rem; transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.step:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
.step-top{ display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; }
.step .sic{ width:30px; height:30px; color:var(--navy); flex:none; }
.step h3{ font-size:1.2rem; color:var(--navy); }
.step p{ font-size:.94rem; color:var(--ink-soft); line-height:1.55; }
.step-arrow{ display:flex; align-items:center; padding:0 .5rem; flex:none; }
.step-arrow svg{ width:24px; height:24px; color:var(--sage); }

/* ============================================================ IMPACT */
.impact{ background:var(--white); }
.impact-callouts{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem 2rem; }
.callout .cic{
  width:52px; height:52px; border-radius:50%; background:var(--navy);
  display:grid; place-items:center; margin-bottom:1.1rem; transition:.35s ease;
}
.callout:hover .cic{ background:var(--navy-deep); transform:translateY(-3px); }
.callout .cic svg{ width:26px; height:26px; color:#fff; transition:.35s ease; }
.callout:hover .cic svg{ color:#fff; }
.callout h3{ font-size:1.3rem; color:var(--navy); margin-bottom:.5rem; letter-spacing:-.01em; }
.callout p{ font-size:.94rem; color:var(--ink-soft); line-height:1.55; }

/* ============================================================ COMPARE */
.compare{ background:var(--paper-2); }
.compare .section-head{ max-width:720px; text-align:center; margin-inline:auto; }
.compare .section-head .eyebrow{ justify-content:center; }
.ctable{ background:#fff; border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line); }
.ctable table{ width:100%; border-collapse:collapse; }
.ctable th,.ctable td{ padding:1.15rem 1.5rem; text-align:left; vertical-align:middle; }
.ctable thead th{ font-family:var(--sans); font-size:.95rem; font-weight:600; color:var(--ink-soft); }
.ctable thead{ background:var(--paper-2); }
.ctable thead th.win{ background:var(--navy); color:#fff; }
.ctable tbody tr{ border-top:1px solid var(--line); }
.ctable tbody tr:nth-child(even){ background:rgba(0,0,0,.015); }
.ctable tbody td:first-child{ font-weight:600; color:var(--navy); }
.ctable tbody td:nth-child(2){ color:var(--ink-soft); }
.ctable td.win{ background:rgba(27,42,74,.05); font-weight:600; color:var(--navy); }
.ctable td.win .ck{ display:inline-flex; align-items:center; gap:.6rem; }
.ctable td.win .ck svg{ width:18px; height:18px; color:var(--navy); flex:none; }

/* Comparison table → stacked cards on mobile */
@media (max-width:640px){
  .ctable{ background:transparent; box-shadow:none; border:0; border-radius:0; }
  .ctable table,.ctable tbody,.ctable tr,.ctable td{ display:block; width:100%; }
  .ctable thead{ display:none; }
  .ctable tr{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow-sm); padding:.4rem 0; margin-bottom:1rem; overflow:hidden;
  }
  .ctable tbody tr:nth-child(even){ background:#fff; }
  .ctable td{
    padding:.85rem 1.2rem; border-top:1px solid var(--line);
    display:flex; flex-direction:column; gap:.25rem;
  }
  .ctable td:first-child{
    border-top:0; background:var(--navy); color:#fff !important; font-family:var(--serif);
    font-size:1.15rem; padding:1rem 1.2rem;
  }
  .ctable td[data-label]:not(:first-child)::before{
    content:attr(data-label); font-family:var(--sans); font-size:.72rem; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--sage-deep);
  }
  .ctable td.win{ background:rgba(27,42,74,.05); }
  .ctable td.win[data-label]::before{ color:var(--navy); }
}

/* ============================================================ SERVICES */
.services{ background:var(--white); }
.services .section-head{ text-align:center; margin-inline:auto; }
.services .section-head .eyebrow{ justify-content:center; }
.svc-row-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem 1.5rem; }
.svcitem{ text-align:center; padding:0 .4rem; transition:transform .35s ease; }
.svcitem:hover{ transform:translateY(-5px); }
.svc-ic{
  width:60px; height:60px; margin:0 auto 1.1rem; border-radius:50%;
  border:1px solid var(--line); background:#fff; display:grid; place-items:center; transition:.35s ease;
}
.svcitem:hover .svc-ic{ background:var(--navy); border-color:var(--navy); }
.svc-ic svg{ width:28px; height:28px; color:var(--navy); transition:.35s ease; }
.svcitem:hover .svc-ic svg{ color:#fff; }
.svcitem h3{ font-size:1rem; color:var(--navy); margin-bottom:.45rem; line-height:1.25; }
.svcitem p{ font-size:.85rem; color:var(--ink-soft); line-height:1.5; }

/* ============================================================ CTA / CONTACT */
.cta{ position:relative; background:var(--paper); }
.cta-card{
  background:
    radial-gradient(130% 120% at 100% 0%, rgba(36,58,99,.55), transparent 60%),
    var(--navy);
  border-radius:var(--radius-lg); padding:clamp(2.5rem,5vw,4.5rem);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center;
  box-shadow:var(--shadow-lg); overflow:hidden; position:relative;
}
.cta-card::before{
  content:""; position:absolute; inset:auto auto -40% -10%; width:380px; height:380px;
  background:radial-gradient(circle,rgba(43,74,126,.3),transparent 70%); pointer-events:none;
}
.cta-copy .eyebrow{ color:var(--sage); }
.cta-copy h2{ color:#fff; font-size:clamp(1.9rem,1.3rem + 2.2vw,2.9rem); margin:.6rem 0 1rem; }
.cta-copy p{ color:#c2cadb; font-size:1.08rem; margin-bottom:1.5rem; }
.cta-points{ list-style:none; display:grid; gap:.8rem; }
.cta-points li{ display:flex; gap:.7rem; align-items:flex-start; color:#dde3ee; font-size:.98rem; }
.cta-points svg{ width:20px; height:20px; color:#8ea7d4; flex:none; margin-top:2px; }

/* form */
.form-card{ background:#fff; border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.4rem); box-shadow:var(--shadow); }
.form-card h3{ font-size:1.35rem; color:var(--navy); margin-bottom:.3rem; }
.form-card .fc-sub{ color:var(--ink-soft); font-size:.92rem; margin-bottom:1.4rem; }
.field{ margin-bottom:1.05rem; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--navy); margin-bottom:.4rem; letter-spacing:.01em; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:.98rem; color:var(--ink);
  padding:.85rem 1rem; border:1.5px solid var(--line); border-radius:10px; background:var(--paper);
  transition:.2s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--navy); background:#fff; box-shadow:0 0 0 4px rgba(27,42,74,.08);
}
.field textarea{ resize:vertical; min-height:110px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-card .btn{ width:100%; justify-content:center; margin-top:.4rem; }
.form-note{ font-size:.8rem; color:var(--ink-soft); text-align:center; margin-top:.9rem; }
.form-status{ display:none; padding:.9rem 1rem; border-radius:10px; font-size:.92rem; font-weight:500; margin-bottom:1rem; }
.form-status.ok{ display:block; background:#e8f3ec; color:#1f6b3b; border:1px solid #b9ddc6; }
.form-status.err{ display:block; background:#fbeaea; color:#9b2c2c; border:1px solid #f0c2c2; }
.hp{ position:absolute; left:-9999px; }

/* ============================================================ FOOTER */
.footer{ background:var(--navy-deep); color:#aeb7c7; padding:clamp(3rem,6vw,4.5rem) 0 2rem; }
.footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-brand img{ height:40px; margin-bottom:1.1rem; }
.footer-brand p{ font-size:.95rem; max-width:34ch; line-height:1.6; }
.footer h4{ font-family:var(--sans); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:1.1rem; }
.footer ul{ list-style:none; display:grid; gap:.7rem; }
.footer ul a{ color:#aeb7c7; font-size:.95rem; transition:.2s; }
.footer ul a:hover{ color:#fff; }
.footer-contact a,.footer-contact .fc-loc{ display:flex; gap:.6rem; align-items:center; color:#aeb7c7; font-size:.95rem; }
.footer-contact svg{ width:17px; height:17px; color:var(--sage); flex:none; }
.footer-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.8rem; font-size:.85rem; }
.footer-bottom a{ color:#aeb7c7; }
.footer-bottom a:hover{ color:#fff; }

/* ============================================================ REVEAL ANIM */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================ RESPONSIVE */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ order:-1; max-width:520px; margin-inline:auto; }
  .steps{ flex-wrap:wrap; }
  .step{ flex:1 1 calc(50% - 1rem); }
  .step-arrow{ display:none; }
  .impact-callouts{ grid-template-columns:1fr 1fr; }
  .svc-row-grid{ grid-template-columns:repeat(2,1fr); row-gap:2.5rem; }
  .cta-card{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .problem-layout{ grid-template-columns:1fr; }
  .problem-quote{ display:none; }
}
@media (max-width:640px){
  .nav-links,.nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .nav{ gap:1rem; }
  .nav.open .nav-links{
    display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:flex-start;
    background:var(--paper); padding:1.5rem var(--gutter) 1.75rem; gap:1.2rem; box-shadow:var(--shadow); border-top:1px solid var(--line);
  }
  .nav.open .nav-links .nav-mobile-cta{ display:inline-flex; margin-top:.4rem; }
  .field-row{ grid-template-columns:1fr; }
  .timeline{ grid-template-columns:1fr; }
  .steps .step{ flex:1 1 100%; }
  .impact-callouts{ grid-template-columns:1fr; }
  .svc-row-grid{ grid-template-columns:1fr 1fr; }
  .footer-top{ grid-template-columns:1fr; }
  .hero-badges{ flex-direction:column; gap:1.1rem; }
  .hero-badge{ min-width:0; }
}