/* ==========================================================================
   Golden Hill Legal Runner — slate design system
   One file drives every public page. Change a token here, the whole site moves.
   ========================================================================== */
:root{
  --bg:#131619;
  --bg-2:#191d22;
  --card:#1e232a;
  --invert:#f4f5f7;
  --ink:#0e1113;
  --text:#e7eaee;
  --muted:#959ba4;
  --line:#2a3038;
  --line-2:#333b45;
  --accent:#6ba5e7;
  --accent-dim:#3d7ab5;
  --ok:#5cba7d;
  --warn:#e0b45c;
  --error:#e0705c;
  --r:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:-.01em;line-height:1.18;color:#fff}
::selection{background:var(--accent-dim);color:#fff}
.hidden,[hidden]{display:none!important}

/* --- container: wide and left-aligned, not a narrow centre strip --- */
.wrap{max-width:1140px;margin:0 auto;padding:0 28px}
@media(max-width:600px){.wrap{padding:0 18px}}

/* --- full-bleed band: background runs edge to edge, content stays on the rail --- */
.band,.pitch,.serves,.cta-strip{
  margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
  padding-left:calc(50vw - 50%);padding-right:calc(50vw - 50%);
}
.pitch,.serves,.cta-strip{padding-top:56px;padding-bottom:56px;border-bottom:1px solid var(--line)}
.serves{background:var(--bg-2)}
.cta-strip{background:var(--bg-2)}
@media(max-width:600px){.pitch,.serves,.cta-strip{padding-top:40px;padding-bottom:40px}}

/* --- header --- */
header.top{
  background:rgba(19,22,25,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
}
.top-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:15px 28px;max-width:1140px;margin:0 auto;
}
.brand{display:flex;flex-direction:column;line-height:1.2;text-decoration:none}
.brand b{font-family:Georgia,serif;letter-spacing:.01em;font-size:17px;color:#fff}
.brand span{font-size:10.5px;color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin-top:2px}
.top-links{display:flex;align-items:center;gap:18px}
.top a.navlink{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.top a.navlink:hover{color:var(--text)}
.top a.call{
  background:var(--invert);color:var(--ink);border:1px solid var(--invert);text-decoration:none;
  padding:9px 16px;border-radius:var(--r);font-size:14px;white-space:nowrap;font-weight:700;
}
.top a.call:hover{background:#fff}
/* Three nav items plus the phone button overflow a 390px screen, so the header
   wraps to a second row rather than pushing the page sideways. */
@media(max-width:600px){
  .top-inner{padding:12px 18px;flex-wrap:wrap;gap:10px}
  .brand b{font-size:14px}
  .top-links{width:100%;justify-content:space-between;gap:12px}
  .top a.call{font-size:13px;padding:8px 12px}
  .top a.navlink{font-size:13px}
}

/* --- hero: centred, running the full width of the rail --- */
.hero{padding:60px 0 52px;text-align:center}
@media(max-width:600px){.hero{padding:36px 0 32px}}
.eyebrow{color:var(--accent);text-transform:uppercase;letter-spacing:.18em;font-size:11.5px;font-weight:700;margin:0 0 14px;white-space:nowrap}
@media(max-width:700px){.eyebrow{white-space:normal;font-size:10.5px;letter-spacing:.13em}}
h1{font-size:48px;margin:0 auto 12px;max-width:26ch}
@media(max-width:920px){h1{font-size:34px;max-width:none}}
@media(max-width:420px){h1{font-size:29px}}
.sub{color:var(--muted);margin:22px auto 0;max-width:62ch;font-size:17.5px}
.notlaw{color:#7d838c;font-size:12.5px;max-width:70ch;margin:30px auto 0;padding-top:16px;border-top:1px solid var(--line)}

.tt-badge{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;text-decoration:none;
  border:1px solid var(--line-2);border-radius:var(--r);padding:9px 16px;background:var(--card);
}
.tt-badge:hover{border-color:var(--accent)}
.tt-badge .tt-star{color:var(--accent);font-size:17px;line-height:1}
.tt-badge .tt-text{color:var(--text);font-size:13px;line-height:1.2}
.tt-badge .tt-text b{color:#fff}

/* --- section headings --- */
.pitch h2,.serves h2{font-size:27px;margin:0 0 6px}
.pitch h2::after,.serves h2::after{content:"";display:block;width:44px;height:2px;background:var(--accent);margin:14px 0 26px}

/* --- value props --- */
.props{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:620px){.props{grid-template-columns:1fr}}
.prop{background:var(--bg);padding:24px}
.serves .prop{background:var(--bg-2)}
.prop .ic{display:block;font-size:20px;line-height:1;margin-bottom:9px;color:var(--accent)}
.prop b{display:block;font-family:Georgia,serif;color:#fff;font-size:17px;margin-bottom:6px}
.prop span{color:var(--muted);font-size:14px;line-height:1.55}

/* --- what we serve --- */
.serve-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 32px;margin:0;padding:0}
@media(max-width:820px){.serve-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.serve-grid{grid-template-columns:1fr}}
.serve-grid li{list-style:none;color:var(--text);font-size:15px;padding:7px 0;display:flex;gap:10px;align-items:flex-start}
.serve-grid li::before{content:"";flex:none;width:6px;height:6px;margin-top:9px;background:var(--accent);transform:rotate(45deg)}
.serves ul{margin:0;padding:0}

/* --- reviews --- */
.reviews-band,.blog-band{
  margin-left:calc(-50vw + 50%);margin-right:calc(-50vw + 50%);
  padding:56px calc(50vw - 50%);border-bottom:1px solid var(--line);
}
@media(max-width:600px){.reviews-band,.blog-band{padding-top:40px;padding-bottom:40px}}
.reviews-band{background:var(--invert);color:#3a4048;border-bottom:none}
.reviews-band h2{font-size:27px;margin:0 0 6px;color:#12161a}
.reviews-band h2::after{content:"";display:block;width:44px;height:2px;background:var(--accent-dim);margin:14px 0 18px}
.rating{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 28px;color:#5c636c;font-size:14px}
.rating .stars{color:var(--accent-dim);letter-spacing:3px;font-size:16px}
.rating b{font-size:17px;color:#12161a}
.reviews{columns:2;column-gap:40px}
@media(max-width:820px){.reviews{columns:1}}
.review{margin:0 0 26px;break-inside:avoid;padding-left:18px;border-left:2px solid var(--accent-dim)}
.review blockquote{margin:0 0 9px;font-family:Georgia,serif;font-size:17px;line-height:1.5;color:#1b1f24}
.review figcaption{color:#6b727b;font-size:12.5px}

/* --- from the blog --- */
.blog-band{background:var(--bg-2)}
.blog-band h2{font-size:27px;margin:0 0 6px}
.blog-band h2::after{content:"";display:block;width:44px;height:2px;background:var(--accent);margin:14px 0 22px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:0;padding:0;list-style:none}
@media(max-width:860px){.post-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.post-grid{grid-template-columns:1fr}}
.post-grid li{background:var(--bg-2)}
.post-grid a{display:block;padding:20px;color:var(--text);text-decoration:none;font-size:15px;line-height:1.45;height:100%}
.post-grid a:hover{background:var(--card);color:var(--accent)}
.all-posts{margin:22px 0 0}
.all-posts a{font-size:14.5px;font-weight:700;text-decoration:none}
.all-posts a:hover{text-decoration:underline}

/* --- cta strip --- */
.cta-strip b{font-family:Georgia,serif;font-size:24px;color:#fff;display:block;margin-bottom:6px}
.cta-strip span{color:var(--muted);font-size:15px}
.booknow{margin:48px 0 0}
.booknow .eyebrow{margin-bottom:6px}

/* --- hero call to action --- */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:28px 0 0}
.btn-primary,.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border-radius:var(--r);font-family:inherit;font-size:15.5px;
  font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;
}
.btn-primary{background:var(--invert);color:var(--ink);border:1px solid var(--invert)}
.btn-primary:hover{background:#fff}
.btn-secondary{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:430px){
  .hero-cta{flex-direction:column;align-items:stretch}
  .btn-primary,.btn-secondary{width:100%}
}

/* --- forms --- */
form{margin:24px 0 64px;max-width:760px}
fieldset{border:none;border-top:1px solid var(--line);border-radius:0;margin:0 0 6px;padding:24px 0 8px;background:transparent}
fieldset:first-of-type{border-top:none;padding-top:0}
legend{padding:0;color:var(--accent);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700}
label{display:block;font-size:13.5px;color:var(--text);margin:16px 0 6px;font-weight:600}
label .req{color:var(--accent)}
.hint{font-weight:400;color:var(--muted);font-size:12.5px}
input[type=text],input[type=tel],input[type=email],input[type=date],select,textarea{
  width:100%;background:#15191e;border:1px solid var(--line-2);border-radius:var(--r);
  color:var(--text);padding:12px;font-size:16px;font-family:inherit;
}
input::placeholder,textarea::placeholder{color:#6d737b}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
select option{background:#15191e;color:var(--text)}
textarea{min-height:76px;resize:vertical}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.row{grid-template-columns:1fr}}

.price-box{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:20px;padding:18px 0;border-top:2px solid var(--accent);border-bottom:1px solid var(--line);
}
.price-box .lbl{color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.16em;font-weight:700}
.price-box .amt{font-family:Georgia,serif;font-size:38px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1.05;text-align:right}
.price-box .amt small{font-size:12.5px;color:var(--muted);font-weight:400;letter-spacing:0;display:block;margin-top:4px}

.zip-feedback{font-size:12.5px;font-weight:600;margin-top:6px;min-height:18px}
.zip-feedback--success{color:var(--ok)}
.zip-feedback--warning{color:var(--warn)}
.zip-feedback--error{color:var(--error)}

.upload-zone{
  border:1.5px dashed var(--line-2);border-radius:var(--r);padding:22px;text-align:center;
  background:#15191e;cursor:pointer;transition:border-color .15s,background .15s;
}
.upload-zone:hover,.upload-zone.drag{border-color:var(--accent);background:#1a2028}
.upload-zone p{margin:4px 0;color:var(--muted);font-size:13.5px}
.upload-zone b{color:var(--text)}
.extra-addr{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line-2)}
.addr-controls{display:flex;gap:12px;align-items:center;margin-top:12px;flex-wrap:wrap}
.addr-add-btn,.addr-remove-btn{
  background:none;border:1px solid var(--line-2);color:var(--text);border-radius:var(--r);
  padding:9px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer;
}
.addr-add-btn:hover{border-color:var(--accent);color:var(--accent)}
.addr-remove-btn{color:var(--muted)}
.addr-remove-btn:hover{border-color:var(--muted);color:var(--text)}
#fileList{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.file-item{
  display:flex;align-items:center;gap:10px;background:#15191e;border:1px solid var(--line-2);
  border-radius:var(--r);padding:9px 11px;font-size:13px;flex-wrap:wrap;
}
.file-item .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item .sz{color:var(--muted);font-size:12px}
.file-item .x{color:var(--error);cursor:pointer;font-weight:700;padding:0 4px;background:none;border:none;font-size:17px;line-height:1}
.bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:4px;width:100%}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}

.ack{display:flex;gap:10px;align-items:flex-start;margin:12px 0}
.ack input{margin-top:3px;width:17px;height:17px;accent-color:var(--accent);flex:none}
.ack label{margin:0;font-weight:400;font-size:13.5px;color:var(--muted)}
.checkbox-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-weight:400;font-size:14.5px;color:var(--text)}
.checkbox-label input[type="checkbox"]{width:17px;height:17px;flex-shrink:0;margin:3px 0 0;cursor:pointer;accent-color:var(--accent)}

.submit{
  width:100%;background:var(--invert);color:var(--ink);border:1px solid var(--invert);border-radius:var(--r);
  padding:17px;font-size:16px;font-weight:700;letter-spacing:0;cursor:pointer;margin-top:22px;font-family:inherit;
}
.submit:hover{background:#fff}
.submit:disabled{opacity:.45;cursor:not-allowed}
.redirect-note{color:var(--muted);font-size:12.5px;margin-top:10px}
.msg{border-radius:var(--r);padding:13px 15px;font-size:14.5px;margin-top:16px;display:none}
.msg.show{display:block}
.msg.err{background:rgba(224,112,92,.12);border:1px solid var(--error);color:#f0b3a6}
.msg.ok{background:rgba(92,186,125,.12);border:1px solid var(--ok);color:#b0dec1}
.field-err{color:var(--error);font-size:12.5px;margin-top:5px;display:none}
.invalid input,.invalid select,.invalid textarea{border-color:var(--error)}

/* --- blog article body --- */
main article{max-width:74ch}
main article h1{font-size:36px;margin:0 0 18px}
@media(max-width:600px){main article h1{font-size:28px}}
main article h2{font-size:24px;margin:38px 0 12px}
main article p{color:#c3c9d1;margin:0 0 18px}
main article ul,main article ol{color:#c3c9d1;padding-left:22px;margin:0 0 18px}
main article li{margin-bottom:8px}
main article strong{color:#fff}
#soro-blog{min-height:200px;margin-bottom:60px}

/* --- footer --- */
footer{background:var(--ink);border-top:1px solid var(--line);padding:42px 0 44px;color:#7d838c;font-size:12.5px}
footer b{color:#fff;font-family:Georgia,serif;font-size:15px}
footer a{color:var(--accent)}
.footer-row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.disclaimer{max-width:100ch;line-height:1.65}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}