/* By The Books — Central Coast design system
   Palette: Pacific navy (logo), harbor teal, sea glass, coastal sand, poppy accent */
:root{
  --navy:#0b2a4a;--deep:#061b31;--ocean:#13607a;--teal:#1f8a8f;--seaglass:#d6ece8;
  --mist:#eef6f5;--sand:#f7f1e6;--dune:#e8dcc5;--poppy:#e9823a;--ink:#16293b;
  --muted:#556b7c;--line:#d7e4e2;--white:#fff;
  --serif:Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);line-height:1.68;background:#fff;font-size:17px}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:1200px;margin:auto;padding:0 28px}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--poppy);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:50}
.skip:focus{left:10px}

/* Utility bar */
.utility{background:var(--deep);color:#cfe3e6;font-size:13.5px}
.utilityin{display:flex;justify-content:space-between;gap:16px;padding:8px 28px;flex-wrap:wrap}
.utility a:hover{color:#fff}
.utility .appt{color:#ffd9b8;font-weight:700;letter-spacing:.3px}

/* Header */
.top{background:#fff;border-bottom:1px solid var(--line)}
.topin{min-height:96px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:14px;color:var(--navy)}
.brand img{width:68px;height:68px;object-fit:contain}
.brand-wordmark{display:flex;flex-direction:column;font-family:var(--serif);font-weight:700;font-size:28px;letter-spacing:-.5px;line-height:1.1}
.brand-tagline{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-top:5px}
.top-contact{display:flex;align-items:center;gap:12px}
.phone{color:var(--navy);font-weight:800;font-size:19px;border:1px solid var(--line);padding:10px 18px;border-radius:999px}
.phone:hover{background:var(--mist)}

/* Nav */
nav{background:var(--mist);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.navin{display:flex;justify-content:space-between;align-items:center;gap:12px}
.links{display:flex;flex-wrap:wrap}
.links a{padding:15px 15px;font-weight:700;font-size:15px;color:var(--navy)}
.links a:hover,.links a[aria-current="page"]{color:var(--ocean);box-shadow:inset 0 -3px 0 var(--teal)}
.cta{background:var(--poppy);color:#fff!important;padding:11px 20px;border-radius:999px;font-weight:800;font-size:14px;letter-spacing:.4px;white-space:nowrap}
.cta:hover{filter:brightness(1.06)}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fdf8f0 0%,#f3efe4 45%,#e4f1ef 100%);color:var(--navy)}
.heroin{position:relative;z-index:2;display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:center;padding:78px 28px 150px}
.hero h1{font-family:var(--serif);font-size:clamp(40px,5vw,68px);line-height:1.05;letter-spacing:-1.5px;margin:12px 0 20px}
.hero p{font-size:19px;color:#3f586b;max-width:640px}
.hero .sun{position:absolute;right:9%;top:46px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,#ffd7a8 0%,#f7b77a 55%,#f7b77a00 72%);opacity:.7;z-index:0}
.coastline{position:absolute;left:0;right:0;bottom:0;width:100%;height:170px;z-index:1;display:block}
.eyebrow{text-transform:uppercase;letter-spacing:2.2px;font-weight:800;font-size:12.5px;color:var(--teal)}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 24px 50px #0b2a4a1f}
.hero-card h2{margin:0;padding:22px 26px;background:var(--navy);color:#fff;font-family:var(--serif);font-size:26px}
.hero-card p{color:var(--muted);font-size:15.5px;padding:14px 26px 4px;margin:0}
.hero-card a{display:flex;justify-content:space-between;padding:13px 26px;border-top:1px solid var(--line);font-weight:700;color:var(--navy)}
.hero-card a:hover{background:var(--mist);color:var(--ocean)}
.hero-card .addr{background:var(--sand);font-size:14px;color:var(--ink);padding:14px 26px;border-top:1px solid var(--dune);margin:0}

/* Buttons */
.btn{display:inline-block;background:var(--navy);color:#fff;padding:13px 24px;font-weight:800;margin:6px 8px 6px 0;border:2px solid var(--navy);border-radius:999px;cursor:pointer;font-size:16px;font-family:var(--sans)}
.btn:hover{background:var(--ocean);border-color:var(--ocean)}
.btn.alt{background:transparent;color:var(--navy);border-color:#9fbfc2}
.btn.alt:hover{background:#fff}
.btn.sun{background:var(--poppy);border-color:var(--poppy)}
.btn.sun:hover{filter:brightness(1.06)}
.btn.light{background:#fff;color:var(--navy);border-color:#fff}

/* Band */
.band{background:var(--navy);color:#fff;padding:15px 0}
.bandin{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:center;font-weight:700;font-size:14.5px}
.bandin a:hover{color:#ffd9b8}
.bandin a:before{content:"◦";color:#8fd3cf;margin-right:7px}

/* Sections */
section{padding:84px 0}
.soft{background:var(--mist);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sand{background:var(--sand);border-top:1px solid var(--dune);border-bottom:1px solid var(--dune)}
.section-title{font-family:var(--serif);color:var(--navy);font-size:clamp(30px,3.8vw,48px);line-height:1.12;letter-spacing:-.8px;margin:8px 0 18px}
.lead{font-size:19px;color:var(--muted);max-width:860px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 10px 26px #0b2a4a0b;transition:transform .2s,box-shadow .2s;position:relative}
.card:before{content:"";position:absolute;left:30px;right:30px;top:0;height:4px;border-radius:0 0 4px 4px;background:linear-gradient(90deg,var(--teal),var(--ocean))}
.card:hover{transform:translateY(-3px);box-shadow:0 18px 34px #0b2a4a17}
.card h3{font-family:var(--serif);color:var(--navy);font-size:23px;margin:6px 0 10px}
.card p{color:var(--muted)}
.more{color:var(--ocean);font-weight:800}
.more:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:60px;align-items:center}
.portrait{background:linear-gradient(160deg,var(--seaglass),#bfdcd8);border-radius:24px;padding:34px;display:grid;place-items:center}
.jacob-photo{width:100%;max-width:340px;border-radius:14px;box-shadow:0 16px 36px #0b2a4a33}
.quote{border-left:4px solid var(--poppy);padding:8px 0 8px 20px;font-family:var(--serif);font-size:23px;color:var(--navy)}
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.step{background:#fff;border:1px solid var(--dune);border-radius:18px;padding:28px}
.step:before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--poppy);color:#fff;font-weight:800;margin-bottom:12px}
.step h3{margin:0 0 6px;color:var(--navy);font-family:var(--serif)}
.step p{margin:0;color:var(--muted)}

/* Inner pages */
.innerhero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fdf8f0,#e4f1ef);color:var(--navy);padding:76px 0 120px}
.innerhero .wrap{position:relative;z-index:2}
.innerhero h1{font-family:var(--serif);font-size:clamp(35px,4.4vw,58px);line-height:1.08;letter-spacing:-1.2px;margin:10px 0 14px}
.innerhero p{max-width:800px;color:#3f586b;font-size:18.5px}
.innerhero .coastline{height:110px}
.crumbs{font-size:14px;color:var(--muted)}
.crumbs a{color:var(--ocean);font-weight:700}
.content{max-width:920px}
.content h2{font-family:var(--serif);color:var(--navy);font-size:31px;line-height:1.2;margin-top:42px}
.content h2:first-child{margin-top:0}
.content h3{color:var(--navy)}
.content li{margin-bottom:8px}
.content a:not(.btn){color:var(--ocean);font-weight:700}
.price-highlight{font-size:24px;font-weight:800;color:var(--navy);font-family:var(--serif)}
.faq-item{padding:14px 0;border-bottom:1px solid var(--line)}
.faq-item h3{margin:0 0 6px;font-size:19px}
.faq-item p{margin:0;color:var(--muted)}

/* Locations */
.location-links{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0}
.location-links a{border:1px solid var(--line);border-radius:999px;padding:8px 15px;color:var(--navy);background:#fff;font-weight:700;font-size:15px}
.location-links a:hover{background:var(--mist);border-color:var(--teal)}
.region-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:30px}
.region{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px}
.region h3{font-family:var(--serif);color:var(--navy);margin:0;font-size:22px}
.region .sub{color:var(--teal);font-weight:800;font-size:12.5px;letter-spacing:1.6px;text-transform:uppercase;margin:4px 0 12px}
.region ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:7px}
.region li{background:var(--mist);border-radius:999px;padding:4px 12px;font-size:14.5px}
.region li a{color:var(--ocean);font-weight:700}

/* Office card */
.office{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--dune);border-radius:22px;overflow:hidden;background:var(--sand);margin:24px 0}
.office-info{padding:30px}
.office-info h3{font-family:var(--serif);color:var(--navy);font-size:24px;margin:0 0 8px}
.office-info p{margin:8px 0}
.office .badge{display:inline-block;background:var(--poppy);color:#fff;font-weight:800;font-size:12.5px;letter-spacing:1.5px;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.office iframe{width:100%;height:100%;min-height:300px;border:0;display:block}

/* Contact strip */
.contactstrip{background:linear-gradient(125deg,var(--navy),var(--ocean));color:#fff;position:relative;overflow:hidden}
.contactstrip .section-title{color:#fff}
.contactstrip p{color:#d8eaec;font-size:18px}
.contactstrip .eyebrow{color:#ffd9b8}

/* Form */
.form{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:30px;box-shadow:0 12px 30px #0b2a4a0d}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font-weight:700;color:var(--navy);font-size:15px}
.form input,.form select,.form textarea{width:100%;margin-top:6px;padding:12px 14px;border:1px solid #bcd1d0;border-radius:10px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.form textarea{min-height:130px;resize:vertical}
.hidden{display:none}

/* Footer */
footer{background:var(--deep);color:#c5d7dc;padding:64px 0 28px;position:relative}
.foot{display:grid;grid-template-columns:1.35fr 1fr 1.35fr;gap:48px}
footer h3{color:#fff;font-family:var(--serif);font-size:19px;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid #ffffff22}
footer p{margin:0 0 16px}
footer a:hover{color:#fff;text-decoration:underline}
.footer-links{display:flex;flex-direction:column;gap:10px}
.footer-areas{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;font-size:14.5px}
.footer-all{display:inline-block;margin-top:18px;font-weight:800;color:#fff}
.footer-appt{color:#ffd9b8;font-weight:800}
.legal{border-top:1px solid #ffffff1c;margin-top:40px;padding-top:20px;font-size:13.5px;color:#8fa9b2}

@media(max-width:900px){
  .heroin,.split,.office{grid-template-columns:1fr}
  .heroin{padding:54px 28px 130px;gap:34px}
  .grid,.steps,.region-grid,.grid.two{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot>div:first-child{grid-column:1/-1}
  .hero .sun{width:120px;height:120px;right:4%}
}
@media(max-width:700px){
  body{font-size:16px}
  .wrap,.utilityin{padding-left:18px;padding-right:18px}
  .heroin{padding-left:18px;padding-right:18px}
  .topin{min-height:78px;gap:10px}
  .brand img{width:48px;height:48px}
  .brand-wordmark{font-size:20px}
  .brand-tagline{font-size:10px;letter-spacing:1.2px}
  .phone{font-size:14px;padding:8px 12px}
  .navin{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .links{flex-wrap:nowrap;overflow-x:auto;width:100%;order:2}
  .links a{white-space:nowrap;padding:10px 11px}
  .cta{order:1}
  .form .row,.foot{grid-template-columns:1fr}
  section{padding:58px 0}
  .utility{font-size:12.5px}
}