/* JW Stark — v4 revenue design, polished interactions.
   Warm paper, ink, amber accent. Weights 300/400/600. */
:root{
  --bg:#F7F7F2;
  --ink:#18342E;
  --soft:#596963;
  --line:#DDE4DE;
  --card:#FFFFFF;
  --amber:#F1AD52;
  --amber-soft:#FFF0D8;
  --green:#24745C;
  --mint:#DDEDE4;
  --red:#A33A2A;
  --display:'Inter Tight',system-ui,-apple-system,sans-serif;
  --body:'Atkinson Hyperlegible',Verdana,system-ui,sans-serif;
  --wide:66rem;
  --measure:44rem;
  --radius:12px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; background:var(--bg)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}
body{
  margin:0; min-width:320px;
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:1.15rem; line-height:1.65;
  overflow-x:hidden;
}
::selection{background:var(--amber); color:var(--ink)}
a{color:var(--ink); transition:color .15s ease, opacity .15s ease}
p a,li a{text-decoration:underline; text-underline-offset:2px}
p a:hover,li a:hover{opacity:.7}
button,input,textarea,select{font:inherit}
img,svg{max-width:100%; height:auto}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--ink); outline-offset:3px; border-radius:4px}

.wrap{width:min(calc(100% - 2.8rem),var(--wide)); margin-inline:auto}
.narrow{width:min(calc(100% - 2.8rem),var(--measure)); margin-inline:auto}

.skip-link{
  position:fixed; top:.7rem; left:.7rem; z-index:200;
  padding:.7rem 1.1rem; background:var(--ink); color:#fff;
  transform:translateY(-160%); transition:transform .15s ease;
  border-radius:8px; text-decoration:none;
}
.skip-link:focus{transform:none}

/* Header */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(247,247,242,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-inner{min-height:4.6rem; display:flex; align-items:center; justify-content:space-between; gap:1rem}
.brand{
  text-decoration:none; color:var(--ink);
  font-family:var(--display); font-weight:600; font-size:1.1rem; letter-spacing:.32em;
  display:flex; align-items:center; gap:.5rem;
}
.brand::after{content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--amber); transition:transform .2s var(--ease)}
.brand:hover::after{transform:scale(1.35)}
.site-nav{display:flex; align-items:center; gap:1.8rem}
.site-nav a{text-decoration:none; color:var(--ink); font-family:var(--display); font-weight:400; font-size:.93em; padding:.4rem 0}
.site-nav a:not(.btn){position:relative}
.site-nav a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:.1rem; height:1.5px; width:100%;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .22s var(--ease);
}
.site-nav a:not(.btn):hover::after{transform:scaleX(1)}
.site-nav a.nav-quiet{color:var(--soft); font-size:.86em}
.site-nav a.nav-quiet::after{background:var(--soft)}
.site-nav a.btn-primary{color:#fff}
.nav-toggle{
  display:none;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:8px; min-width:3rem; min-height:3rem; cursor:pointer; font-weight:600;
}

/* Buttons — lift + shadow + sliding arrow */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:3.4rem; padding:.7rem 1.8rem;
  border-radius:10px; border:1px solid var(--ink);
  font-family:var(--display); font-weight:600; font-size:1em;
  text-decoration:none; cursor:pointer;
  color:var(--ink); background:transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease),
             background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(22,21,20,.13); background:#fff}
.btn:active{transform:translateY(0); box-shadow:0 3px 8px rgba(22,21,20,.12)}
.btn-primary{background:var(--ink); color:#fff}
.btn-primary:hover{background:#000; color:#fff; box-shadow:0 10px 26px rgba(22,21,20,.28)}
.btn .arrow{display:inline-block; transition:transform .18s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-small{min-height:2.9rem; padding:.45rem 1.3rem; font-size:.9em}

/* Sections */
.section{padding:clamp(3.5rem,8vw,6rem) 0}
h1,h2,h3{font-family:var(--display); font-weight:300; letter-spacing:-.015em; line-height:1.18; margin:0}
.section-title{font-size:clamp(1.7rem,3.6vw,2.3rem); margin-bottom:.7rem}
.section-intro{color:var(--soft); margin:0 0 2.4rem; max-width:38rem}
.eyebrow{margin:0 0:.8rem!important; color:var(--green)!important; font-family:var(--display); font-size:.78rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase}

/* Hero */
.hero{position:relative; overflow:hidden; background:linear-gradient(135deg,#f7f7f2 0%,#eef3ed 100%)}
.hero::before{content:""; position:absolute; width:24rem; height:24rem; border-radius:50%; background:rgba(241,173,82,.14); left:-10rem; top:-12rem; pointer-events:none}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2.5rem,6vw,5rem); align-items:center; min-height:min(42rem,78vh)}
.hero-copy{padding:clamp(2.5rem,6vw,4rem) 0}
.hero-copy h1{font-size:clamp(2.8rem,6.5vw,4.7rem); margin-bottom:1.2rem; line-height:1.02}
.hero-copy h1 em{font-style:normal; color:var(--green)}
.hero-copy .lede{color:var(--soft); margin:0 0 1.4rem; max-width:29rem}
.price-anchor{
  font-family:var(--display); font-weight:600; font-size:1.02em;
  background:var(--amber-soft); border-radius:8px; display:inline-block;
  padding:.45rem .9rem; margin-bottom:1.8rem;
}
.hero-ctas{display:flex; gap:.9rem; align-items:center; flex-wrap:wrap; margin-bottom:1.3rem}
.hero-phone{font-size:.92em; color:var(--soft); margin:0}
.hero-phone a{font-weight:700}
.hero-media{align-self:stretch; position:relative; overflow:hidden; border-radius:0 0 8rem 8rem; box-shadow:0 24px 70px rgba(24,52,46,.15)}
.hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(24,52,46,.1),transparent 30%,transparent 75%,rgba(24,52,46,.2)); pointer-events:none}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; transform:scale(1.06)}
.hero-note{position:absolute; z-index:2; left:1.2rem; bottom:1.2rem; background:rgba(255,255,255,.94); backdrop-filter:blur(12px); border-radius:12px; padding:.8rem 1rem; box-shadow:0 10px 30px rgba(24,52,46,.16)}
.hero-note b,.hero-note span{display:block}.hero-note b{font-family:var(--display)}.hero-note span{font-size:.82rem;color:var(--soft)}

/* Credential bar */
.cred-bar{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--card)}
.cred-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding:1.3rem 0; text-align:center}
.cred-grid b{display:block; font-family:var(--display); font-weight:600; font-size:1em}
.cred-grid span{color:var(--soft); font-size:.85em}

/* Pricing — hover lift */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-bottom:1rem}
.price-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.6rem 1.5rem; display:flex; flex-direction:column;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}
.price-card:hover{transform:translateY(-5px); border-color:var(--ink); box-shadow:0 16px 38px rgba(22,21,20,.10)}
.price-card.featured{border-color:var(--ink); position:relative}
.price-card.featured::before{
  content:"Most common"; position:absolute; top:-0.8rem; left:1.2rem;
  background:var(--amber); color:var(--ink); font-family:var(--display); font-weight:600;
  font-size:.78em; padding:.15rem .7rem; border-radius:99px;
}
.price-card.featured:hover{box-shadow:0 16px 38px rgba(22,21,20,.13), 0 4px 16px rgba(245,168,0,.18)}
.price-card h3{font-weight:600; font-size:1.05em; margin-bottom:.2rem}
.price-card .amount{font-family:var(--display); font-weight:300; font-size:2.3em; margin:.15rem 0 .5rem}
.price-card > p{margin:0 0 1rem; color:var(--soft); font-size:.9em}
.price-card ul{margin:0 0 1.4rem; padding-left:1.1rem; color:var(--soft); font-size:.88em}
.price-card ul li{margin:.3rem 0}
.price-card .btn{margin-top:auto; width:100%}
.price-note{color:var(--soft); font-size:.92em; margin:1.2rem 0 0}
.price-note b{color:var(--ink)}

/* Guarantee band */
.guarantee{background:var(--ink); color:#fff}
.guarantee .wrap{display:flex; align-items:center; gap:2rem; padding:2.6rem 0; flex-wrap:wrap}
.guarantee .mark{width:3.2rem; height:3.2rem; flex:0 0 auto; color:var(--amber)}
.guarantee h2{font-size:clamp(1.4rem,3vw,1.9rem); color:#fff; margin-bottom:.3rem}
.guarantee p{margin:0; color:#C9C4BC; max-width:38rem}

/* Fix grid — hover lift */
.fix-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.8rem; list-style:none; margin:0; padding:0}
.fix-grid li{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:.8rem 1.1rem; font-weight:700; font-size:.95em;
  display:flex; gap:.6rem; align-items:center;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s ease;
}
.fix-grid li:hover{transform:translateY(-2px); border-color:var(--ink); box-shadow:0 7px 18px rgba(22,21,20,.08)}
.fix-grid li::before{content:"✓"; color:var(--green); font-weight:700}
.fix-grid li.else{background:transparent; border-style:dashed}
.fix-grid li.else::before{content:"→"; color:var(--ink); transition:transform .18s var(--ease)}
.fix-grid li.else:hover::before{transform:translateX(3px)}
.fix-grid li.else a{text-decoration:none}

/* Search-friendly service pathways */
.services{background:#fff}
.service-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.service-card{display:grid; grid-template-columns:auto 1fr; column-gap:1rem; background:var(--bg); border:1px solid var(--line); border-radius:18px; padding:1.5rem; text-decoration:none; transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s ease}
.service-card:hover{transform:translateY(-3px); box-shadow:0 16px 38px rgba(24,52,46,.1); border-color:#b9cbbf}
.service-icon{grid-row:1/4; width:3rem;height:3rem;border-radius:12px;background:var(--mint);display:grid;place-items:center;font-size:1.4rem;color:var(--green)}
.service-card h3{font-weight:600;font-size:1.15rem;margin:.1rem 0 .35rem}
.service-card p{color:var(--soft);font-size:.92rem;margin:0 0 .7rem;line-height:1.5}
.text-link{font-family:var(--display);font-weight:600;font-size:.88rem;color:var(--green)}

.about{background:var(--ink);color:#fff}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,7vw,7rem);align-items:start}
.about .section-title{font-size:clamp(2.1rem,5vw,3.6rem)}
.about .eyebrow{color:#a9d4bf!important}
.about-copy p{color:#dce6e1;margin:0 0 1rem}
.about-points{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.about-points span{border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:.35rem .75rem;font-size:.82rem}
.service-hero{background:linear-gradient(145deg,var(--mint),var(--bg));padding:clamp(4.5rem,10vw,8rem) 0}
.service-hero h1{font-size:clamp(2.7rem,7vw,5rem);max-width:50rem;margin-bottom:1.2rem}
.service-hero .lede{color:var(--soft);font-size:1.25rem;max-width:43rem;margin:0 0 2rem}
.content-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.check-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:.8rem}
.check-list li{padding-left:2rem;position:relative}.check-list li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:700}
.soft-panel{background:var(--amber-soft);border-radius:18px;padding:clamp(1.4rem,4vw,2.2rem)}
.soft-panel h2{font-size:1.4rem;font-weight:600;margin-bottom:.6rem}.soft-panel p{margin:0;color:var(--soft)}

/* Steps */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr)}
.steps li{padding:0 clamp(1.2rem,3vw,2.2rem); text-align:center}
.steps li + li{border-left:1px solid var(--line)}
.step-no{display:block; font-family:var(--display); color:var(--soft); letter-spacing:.15em; font-size:.9rem; margin-bottom:.9rem}
.steps h3{font-weight:600; font-size:1.05em; margin-bottom:.4rem}
.steps p{margin:0; color:var(--soft); font-size:.92em}

/* FAQ */
.faq{max-width:46rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer; font-family:var(--display); font-weight:600; font-size:1.02em;
  padding:1.1rem 0; list-style-position:outside;
  transition:color .15s ease, padding-left .18s var(--ease);
}
.faq summary:hover{padding-left:.4rem}
.faq details p{margin:0 0 1.2rem; color:var(--soft); font-size:.95em}

/* Request / form */
.request{border-top:1px solid var(--line); background:var(--card)}
.request-grid{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2.5rem,6vw,5rem); align-items:start}
.request-copy h2{font-size:clamp(1.7rem,3.8vw,2.4rem); margin-bottom:1rem}
.request-copy > p{color:var(--soft); margin:0 0 2rem; max-width:26rem}
.privacy-line{display:flex; align-items:center; gap:.6rem; color:var(--soft); font-size:.88em; margin:0}
.privacy-line svg{width:1.05rem; height:1.05rem; flex:0 0 auto}
.field{margin-bottom:1.3rem}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field label,.field .group-label{display:block; font-weight:700; margin-bottom:.35rem}
.field .hint{font-weight:400; color:var(--soft); font-size:.85em}
.field input[type=text],.field input[type=email],.field input[type=tel],
.field textarea,.field select{
  width:100%; padding:.85rem 1rem;
  border:1px solid #D2CEC7; border-radius:8px;
  background:var(--bg); color:var(--ink); min-height:3.1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:hover,.field textarea:hover{border-color:#B4AFA6}
.field textarea{min-height:10rem; resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:3px solid var(--ink); outline-offset:1px; border-color:var(--ink);
}
.field .field-error{display:none; color:var(--red); font-weight:700; font-size:.88em; margin:.35rem 0 0}
.field.invalid .field-error{display:block}
.field.invalid input,.field.invalid textarea{border-color:var(--red)}
.form-actions .btn{width:100%; font-size:1.05em; min-height:3.9rem}
.form-after{margin:1rem 0 0; text-align:center; color:var(--soft); font-size:.88em}
.form-status{margin-top:1rem; font-weight:700; min-height:1.5em}
.form-status.error{color:var(--red)}
.success-panel{padding:1rem 0}
.success-panel .bigcheck{
  width:4rem; height:4rem; border-radius:50%;
  background:var(--green); color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.9rem; margin-bottom:1.1rem;
}
.success-panel h2{font-size:1.5em; margin-bottom:.6rem; font-weight:400}
.success-panel p{color:var(--soft); max-width:32rem; margin:.4rem 0}
.success-panel .case-no{
  display:inline-block; font-family:var(--display); font-weight:600; font-size:1.3em;
  border:1px solid var(--line); border-radius:8px; background:var(--bg);
  padding:.4rem 1rem; margin:.6rem 0; color:var(--ink);
}

/* Legacy classes for /help */
.intake-panel{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:clamp(1.4rem,3.5vw,2.2rem)}
.choice-row{display:flex; gap:.7rem; flex-wrap:wrap}
.choice-row label{
  display:flex; align-items:center; gap:.55rem;
  border:1px solid #D2CEC7; border-radius:8px;
  padding:.7rem 1.1rem; cursor:pointer; font-weight:700; margin:0; background:var(--bg);
  transition:border-color .15s ease;
}
.choice-row label:hover{border-color:var(--ink)}
.choice-row label:has(input:checked){border-color:var(--ink); background:var(--amber-soft)}
.choice-row input{width:1.25rem; height:1.25rem; accent-color:var(--ink)}
details.more-details{border:1px solid var(--line); border-radius:8px; padding:0 1.1rem; margin-bottom:1.35rem; background:var(--bg)}
details.more-details summary{cursor:pointer; font-weight:700; padding:1rem 0; list-style-position:inside}
details.more-details[open] summary{border-bottom:1px solid var(--line); margin-bottom:1rem}
.consent{display:flex; gap:.8rem; align-items:flex-start; background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:1rem 1.1rem; margin-bottom:1.35rem}
.consent input{width:1.4rem; height:1.4rem; margin-top:.2rem; flex:0 0 auto; accent-color:var(--ink)}
.consent span{font-size:.95em}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:2.4rem 0 3rem; color:var(--soft); font-size:.9em}
.footer-grid{display:flex; justify-content:space-between; gap:1.6rem; flex-wrap:wrap; align-items:baseline}
.footer-brand{font-family:var(--display); font-weight:600; letter-spacing:.28em; color:var(--ink)}
.footer-nav{display:flex; gap:1.4rem; flex-wrap:wrap}
.footer-nav a{text-decoration:none; color:var(--soft)}
.footer-nav a:hover{color:var(--ink)}
.footer-contact{text-align:right}
.footer-contact p{margin:.15rem 0}

/* Mobile */
@media (max-width:860px){
  .hero-grid,.request-grid{grid-template-columns:1fr}
  .hero-copy{padding-bottom:.5rem}
  .hero-media{margin:0 -1.4rem; border-radius:2rem 2rem 0 0; max-height:36rem}
  .hero-media img{max-height:70vh}
  .price-grid{grid-template-columns:1fr}
  .cred-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr; gap:2rem}
  .steps li + li{border-left:0; border-top:1px solid var(--line); padding-top:2rem}
  .footer-grid{flex-direction:column}
  .footer-contact{text-align:left}
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:.5rem 1.4rem 1.4rem; display:none;
  }
  .site-nav.open{display:flex}
  .site-nav a{padding:.9rem 0; border-bottom:1px solid var(--line)}
  .site-nav a:not(.btn)::after{display:none}
  .site-nav a:last-child{border-bottom:0}
  .site-nav .btn{margin-top:.8rem}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .field-row{grid-template-columns:1fr}
  .service-grid,.about-grid,.content-grid{grid-template-columns:1fr}
}
@media (max-width:560px){.service-grid{grid-template-columns:1fr}.hero-copy h1{font-size:2.75rem}}
@media (max-width:860px){body:has(.service-hero) .site-nav{display:flex;position:static;flex-direction:row;align-items:center;border:0;padding:0;background:transparent}body:has(.service-hero) .site-nav a:not(.btn){display:none}body:has(.service-hero) .site-nav .btn{margin:0;border:0;padding:.45rem .8rem}}