@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Newsreader:ital,wght@1,400;1,500&display=swap');

:root{
  --navy: #223954;
  --navy-2: #1a2c42;
  --taupe: #8A7C72;
  --teal: #0878A6;
  --cream: #E9DBC9;
  --paper: #FBF7F1;
  --ink: #2b3542;
  --muted: #6b7280;
  --line: rgba(34,57,84,0.14);
  --white: #ffffff;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{ box-sizing:inherit; }
html{ scroll-behavior:smooth; scroll-padding-top: env(safe-area-inset-top,0px); }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Outfit', sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 28px; }
h1,h2,h3,h4{ font-family:'Outfit',sans-serif; font-weight:700; color:var(--navy); margin:0; letter-spacing:-0.01em; }
.accent{ font-family:'Newsreader', serif; font-style:italic; font-weight:500; color:var(--navy); letter-spacing:0; }

/* ---------- announcement bar ---------- */
.announce{ background:var(--navy-2); color:#dfe6ee; padding: 9px 0; }
.announce .wrap{ display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:12.5px; flex-wrap:wrap; }
.announce b{ color:var(--white); font-weight:600; }
.announce a{ color:#cfe7f2; text-decoration:none; }
.announce a:hover{ color:var(--white); }
.dot{ color:var(--teal); margin:0 8px; }

/* ---------- header ---------- */
header.site{ position:sticky; top:0; z-index:40; background:rgba(251,247,241,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:20px; }
.brand img{ height:40px; width:auto; display:block; }
nav.links{ display:flex; align-items:center; gap:30px; }
nav.links a{ font-size:13.5px; font-weight:500; text-decoration:none; color:var(--ink); letter-spacing:0.01em; padding:6px 0; position:relative; transition:color .2s; }
nav.links a.active, nav.links a:hover{ color:var(--navy); }
nav.links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:2px; background:var(--teal); border-radius:2px; }
.head-right{ display:flex; align-items:center; gap:16px; }
.head-phone{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--navy); text-decoration:none; white-space:nowrap; }
.head-phone svg{ width:15px; height:15px; }

.btn-pill{
  font-family:'Outfit',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  padding:13px 26px; border-radius:999px; text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  transition:.2s; border:1px solid transparent; white-space:nowrap;
}
.btn-pill.navy{ background:var(--navy); color:var(--white); }
.btn-pill.navy:hover{ background:var(--navy-2); }
.btn-pill.outline{ border-color:var(--navy); color:var(--navy); }
.btn-pill.outline:hover{ background:var(--navy); color:var(--white); }
.btn-pill.teal{ background:var(--teal); color:var(--white); }
.btn-pill.teal:hover{ background:#066285; }

.menu-btn{ display:none; background:none; border:1px solid var(--line); border-radius:8px; width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after{ content:""; display:block; width:18px; height:1.5px; background:var(--navy); position:relative; }
.menu-btn span::before{ position:absolute; top:-6px; }
.menu-btn span::after{ position:absolute; top:6px; }

/* ---------- hero ---------- */
.hero-section{ padding:44px 0 0; }
.hero-card{
  background: var(--cream); border-radius:28px; overflow:hidden; position:relative;
  display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:0;
}
.hero-copy{ padding:64px 56px; }
.eyebrow{ font-size:12.5px; font-weight:600; letter-spacing:0.14em; color:var(--teal); margin-bottom:22px; }
.hero-copy h1{ font-size:clamp(34px,4.6vw,54px); line-height:1.08; }
.hero-copy h1 .accent{ display:block; font-size:1.05em; }
.hero-copy h1 .bold-line{ display:block; color:var(--taupe); }
.hero-copy p.lede{ font-family:'Outfit',sans-serif; font-size:16px; color:var(--muted); max-width:40ch; margin:22px 0 32px; }
.hero-photo{ position:relative; aspect-ratio:4/4.6; height:100%; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:15% 62%; }
@media (max-width:900px){
  .hero-card{ grid-template-columns:1fr; border-radius:22px; }
  .hero-copy{ padding:40px 30px; order:2; }
  .hero-photo{ aspect-ratio:16/10; order:1; }
}

/* ---------- strip ---------- */
.strip{ background:var(--navy); color:var(--paper); margin-top:0; }
.strip .wrap{ display:grid; grid-template-columns:repeat(3,1fr); }
.strip-item{ padding:24px 26px; display:flex; gap:13px; align-items:flex-start; border-left:1px solid rgba(255,255,255,0.14); }
.strip-item:first-child{ border-left:none; }
.strip-item svg{ width:19px; height:19px; flex:none; margin-top:2px; color:var(--teal); }
.strip-item b{ display:block; font-size:13px; font-weight:600; margin-bottom:2px; }
.strip-item span{ font-size:12.5px; color:#c3cddb; }

/* ---------- sections ---------- */
section{ padding:88px 0; }
.section-head{ text-align:center; max-width:56ch; margin:0 auto 52px; }
.section-head .eyebrow{ justify-content:center; display:flex; }
.section-head h2{ font-size:clamp(26px,3.2vw,36px); margin-bottom:12px; }
.section-head p{ color:var(--muted); font-size:15px; }

/* ---------- services grid (card style) ---------- */
.svc-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.svc-card{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:32px 24px; text-align:center; transition:.2s; }
.svc-card:hover{ box-shadow:0 20px 40px -28px rgba(34,57,84,0.35); transform:translateY(-2px); }
.svc-badge{ width:56px; height:56px; border-radius:50%; background:var(--navy); color:var(--cream); display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.svc-badge svg{ width:26px; height:26px; }
.svc-card h3{ font-size:16.5px; margin-bottom:9px; }
.svc-card p{ font-size:13px; color:var(--muted); line-height:1.55; }
@media (max-width:980px){ .svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .svc-grid{ grid-template-columns:1fr; } }

/* ---------- services full rows (services.html) ---------- */
.svc-full{ display:flex; flex-direction:column; }
.svc-row{ display:grid; grid-template-columns:74px 1fr; gap:26px; align-items:flex-start; padding:38px 0; border-top:1px solid var(--line); }
.svc-row:last-child{ border-bottom:1px solid var(--line); }
.svc-row .svc-badge{ margin:0; width:60px; height:60px; }
.svc-row .svc-badge svg{ width:28px; height:28px; }
.svc-row h3{ font-size:21px; margin-bottom:9px; }
.svc-row p{ color:var(--muted); font-size:14.5px; max-width:60ch; }

/* ---------- welcome / mission section ---------- */
.welcome-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.welcome-copy .eyebrow{ margin-bottom:16px; }
.welcome-copy h2{ font-size:clamp(26px,3vw,34px); margin-bottom:18px; }
.welcome-copy p{ color:var(--muted); font-size:15px; margin-bottom:16px; max-width:52ch; }
.photo-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.photo-strip .ph{ aspect-ratio:3/4; border-radius:16px; overflow:hidden; }
.photo-strip .ph:nth-child(2){ margin-top:26px; }
.photo-strip .ph:nth-child(3){ margin-top:-14px; }
.photo-strip .ph:nth-child(1) img{ object-position:15% 62%; }
.photo-strip img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:900px){ .welcome-grid{ grid-template-columns:1fr; gap:36px; } .photo-strip .ph:nth-child(2), .photo-strip .ph:nth-child(3){ margin-top:0; } }

/* ---------- banner photo (services/about pages) ---------- */
.banner-photo{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:21/8; margin:44px 0; }
.banner-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.banner-photo .cap{ position:absolute; left:0; right:0; bottom:0; padding:20px 28px; background:linear-gradient(0deg, rgba(34,57,84,0.8), rgba(34,57,84,0)); color:var(--white); font-size:13.5px; font-weight:500; }
@media (max-width:640px){ .banner-photo{ aspect-ratio:4/3; } }

/* ---------- CTA band ---------- */
.cta-band{ background:linear-gradient(120deg, var(--cream), #f3e6d1 140%); border-radius:24px; }
.cta-band .wrap{ display:flex; justify-content:space-between; align-items:center; gap:26px; padding:46px 40px; flex-wrap:wrap; }
.cta-band h3{ font-size:clamp(22px,2.6vw,28px); max-width:18ch; }
.cta-wrap-outer{ padding:0 28px; }
.cta-wrap-outer .wrap{ padding:0; max-width:1144px; }

/* ---------- value rows (about) ---------- */
.value-list{ display:flex; flex-direction:column; }
.value-row{ display:flex; gap:20px; padding:26px 0; border-top:1px solid var(--line); }
.value-row:last-child{ border-bottom:1px solid var(--line); }
.value-row .svc-badge{ margin:0; width:46px; height:46px; flex:none; }
.value-row .svc-badge svg{ width:20px; height:20px; }
.value-row h4{ font-size:16.5px; margin-bottom:6px; }
.value-row p{ font-size:14px; color:var(--muted); }

/* ---------- page head (non-home) ---------- */
.page-head{ padding:56px 0 40px; text-align:center; }
.page-head .eyebrow{ justify-content:center; display:flex; }
.page-head h1{ font-size:clamp(30px,4vw,44px); max-width:20ch; margin:0 auto; }
.page-head p{ color:var(--muted); max-width:56ch; margin:16px auto 0; font-size:15px; }

/* ---------- hours card ---------- */
.hours-card{ background:var(--white); border:1px solid var(--line); border-radius:16px; padding:28px 30px; }
.hours-row{ display:flex; justify-content:space-between; font-size:14px; padding:10px 0; border-bottom:1px solid var(--line); }
.hours-row:last-child{ border-bottom:none; }
.hours-row span:first-child{ font-weight:500; }
.hours-row span:last-child{ color:var(--muted); }
.hours-row.off span:last-child{ color:#a8afb9; }

/* ---------- about ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:start; }
.lede-block p{ font-size:15.5px; color:var(--muted); margin-bottom:18px; max-width:64ch; }
.lede-block p.drop::first-letter{ font-family:'Newsreader',serif; font-style:italic; font-size:56px; float:left; line-height:0.75; padding:6px 10px 0 0; color:var(--navy); }

/* ---------- contact ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.contact-card{ display:flex; gap:16px; padding:22px 0; border-top:1px solid var(--line); }
.contact-card:last-child{ border-bottom:1px solid var(--line); }
.contact-card .svc-badge{ margin:0; width:42px; height:42px; flex:none; }
.contact-card .svc-badge svg{ width:18px; height:18px; }
.contact-card h4{ font-size:14.5px; font-weight:600; color:var(--navy); margin-bottom:4px; }
.contact-card a, .contact-card p{ font-size:14.5px; color:var(--muted); text-decoration:none; margin:0; }
.contact-card a:hover{ color:var(--navy); }
.quick-actions{ display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.qbtn{
  display:flex; align-items:center; justify-content:space-between; padding:17px 22px; border:1px solid var(--line);
  border-radius:14px; text-decoration:none; color:var(--navy); font-weight:600; font-size:14px; transition:.2s;
}
.qbtn:hover{ border-color:var(--navy); background:var(--white); }
.qbtn .qa-l{ display:flex; align-items:center; gap:13px; }
.qbtn svg.lead{ width:18px; height:18px; color:var(--teal); }
.qbtn svg.arrow{ width:14px; height:14px; opacity:.5; }
.map-block{ aspect-ratio:16/11; border-radius:16px; overflow:hidden; border:1px solid var(--line); position:relative; }
.map-block svg{ width:100%; height:100%; }
.map-pin-label{ position:absolute; left:50%; top:41%; transform:translate(-50%,-100%); background:var(--white); padding:8px 14px; border-radius:8px; font-size:12px; font-weight:600; color:var(--navy); box-shadow:0 10px 22px -10px rgba(34,57,84,.4); white-space:nowrap; }

/* ---------- footer ---------- */
footer{ background:var(--navy-2); color:#c3cddb; padding:60px 0 calc(28px + env(safe-area-inset-bottom,0px)); margin-top:20px; }
.foot-grid{ display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:46px; }
.foot-brand img{ height:30px; width:auto; margin-bottom:16px; }
footer p{ font-size:13.5px; color:#a7b2c2; max-width:34ch; }
footer h5{ font-size:12px; letter-spacing:0.1em; color:var(--white); margin-bottom:15px; font-weight:600; }
footer .flinks{ display:flex; flex-direction:column; gap:10px; font-size:13.5px; }
footer .flinks a{ text-decoration:none; color:#c3cddb; }
footer .flinks a:hover{ color:var(--white); }
.foot-bottom{ margin-top:50px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; font-size:12px; color:#8b96a8; flex-wrap:wrap; gap:10px; }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
[data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ [data-reveal]{ opacity:1; transform:none; transition:none; } }

/* ---------- mobile drawer ---------- */
.drawer{ position:fixed; inset:0; z-index:60; background:rgba(34,57,84,0.5); opacity:0; pointer-events:none; transition:opacity .25s; }
.drawer.open{ opacity:1; pointer-events:auto; }
.drawer-panel{ position:absolute; top:0; right:0; height:100%; width:78%; max-width:320px; background:var(--paper); padding:calc(24px + env(safe-area-inset-top,0px)) 26px 26px; transform:translateX(100%); transition:transform .3s; display:flex; flex-direction:column; gap:4px; }
.drawer.open .drawer-panel{ transform:translateX(0); }
.drawer-panel a{ font-size:16.5px; text-decoration:none; color:var(--navy); padding:13px 4px; border-bottom:1px solid var(--line); }
.drawer-close{ align-self:flex-end; background:none; border:none; font-size:22px; color:var(--navy); cursor:pointer; margin-bottom:8px; }

@media (max-width:900px){
  nav.links{ display:none; }
  .menu-btn{ display:flex; }
  .strip .wrap{ grid-template-columns:1fr; }
  .strip-item{ border-left:none !important; border-top:1px solid rgba(255,255,255,0.14); }
  .strip-item:first-child{ border-top:none; }
  .about-grid, .contact-grid{ grid-template-columns:1fr; gap:36px; }
  .foot-grid{ grid-template-columns:1fr; gap:32px; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
  .head-phone{ display:none; }
}
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  section{ padding:60px 0; }
  .cta-wrap-outer{ padding:0 20px; }
}