:root {
  --brand-blue: #4473A1;
  --ink: #174776;
  --leaf: #99CC9A;
  --mint: #65CDCC;
  --sun: #FEFF98;
  --sky: #679ACC;
  --paper: #FEFFB7;
  --shadow: 0 4px 20px rgba(103, 154, 204, .19);
}

/* ===============================
   GLOBAL
================================= */
* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: "Quattrocento Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  display: flex; flex-direction: column; min-height: 100vh;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(10px, 4vw, 48px);
  width: min(100%, 94vw);
}

/* ===============================
   HEADER / NAV
================================= */
.site-header { position: relative; z-index: 1000; background: #fff; box-shadow: var(--shadow); }

.header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 14px; padding-inline: clamp(16px, 4vw, 32px);
}

.brand { display: flex; align-items: center; gap: clamp(10px, 1.8vw, 14px); min-width: 0; }
.logo-img { height: clamp(84px, 10vw, 100px); width: auto; flex: 0 0 auto; }

.brand-title { display: flex; flex-direction: column; gap: 2px; }
.brand-title h1 {
  margin: 0; font: 700 clamp(18px, 2.2vw, 24px) "Roboto Slab", serif; letter-spacing: .02em;
}
.brand-title small {
  margin: 0; font: 700 clamp(11px, 1.6vw, 12.5px) "Quicksand", sans-serif; color: #6b6b6b; letter-spacing: .06em;
}

.primary { display: flex; align-items: center; }
.primary ul { list-style: none; display: flex; align-items: center; gap: clamp(10px, 2vw, 16px); margin: 0; padding: 0; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: clamp(10px, 1.5vw, 12px) clamp(14px, 2vw, 18px); border-radius: 6px;
  font: 400 clamp(15px, 1.6vw, 17px) "Roboto Slab", serif; line-height: 1; background: transparent;
}
.pill.is-active { background: var(--leaf); font-weight: 700; }
.pill:hover { background: rgba(0,0,0,.05); }

.nav-toggle {
  display: none; flex-direction: column; justify-content: space-between;
  width: 34px; height: 23px; background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 4px; border-radius: 2px; background: var(--leaf); }
.nav-toggle span:nth-child(2){ width:72%; margin-left:auto; }
.nav-toggle span:nth-child(3){ width:92%; margin-left:4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===============================
   HERO
================================= */
.hero {
  background: var(--paper);
  box-shadow: inset 0 10px 24px rgba(0,0,0,.06);
  min-height: clamp(520px, 70vh, 680px); overflow: hidden;
}
.hero .wrap {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(24px, 4vw, 40px);
  flex-wrap: nowrap; min-height: clamp(520px, 70vh, 680px); padding-block: clamp(32px, 5vw, 56px);
}

/* Full-width helpers */
section { max-width: 1440px; margin-inline: auto; }
.hero, .site-header, .strip3 { max-width: none; margin-inline: 0; width: 100%; }

.collage {
  --collage-width: clamp(340px, 48vw, 640px);
  flex: 1 1 var(--collage-width);
  max-width: var(--collage-width);
  width: 100%;
  position: relative;
  aspect-ratio: 600 / 650;
  min-width: 320px;
}
.tile {
  position: absolute;
  width: 50%;
  aspect-ratio: 300 / 290.75;
  height: auto;
  object-fit: cover;
}
.t1{ left:50%; top:10.75%; background: var(--sky); }
.t2{ left:50%; top:55.48%; background: var(--leaf); }
.t3{ left:0; top:0; background: var(--mint); }
.t4{ left:0; top:44.73%; background: var(--sun); }

.hero-copy {
  flex: 1 1 clamp(420px, 44vw, 520px); max-width: 560px; padding-inline: clamp(6px, 1vw, 10px);
  display: flex; flex-direction: column; gap: clamp(16px, 2vw, 18px);
}
.hero-copy h2 {
  margin: 0; color: #315e89; font: 500 clamp(32px, 6vw, 46px) "Roboto Slab", serif;
  line-height: 1.25; letter-spacing: .01em;
}
.lead-strong { font-weight: 700; font-size: clamp(20px, 2.8vw, 22px); line-height: 1.5; color: #111; }
.lead { font-weight: 400; font-size: clamp(16px, 2.6vw, 18px); line-height: 1.7; color: #222; }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: min(100%, 309px); padding: clamp(10px, 1.6vw, 12px) clamp(24px, 4vw, 30px); border-radius: 10px;
  background: var(--brand-blue); color: #fff; font: 700 clamp(15px, 1.4vw, 16px) "Roboto Slab", serif;
  cursor: pointer; text-decoration: none; border: none;
}
.cta--block { align-self: flex-start; }

/* ===============================
   SECTIONS
================================= */
.section { padding-block: clamp(36px, 7vw, 80px); }
.section h2 {
  margin: 0 0 8px; text-align: center; color: var(--brand-blue);
  font-family: "Roboto Slab", serif; font-weight: 500; font-size: clamp(22px, 3.2vw, 30px); line-height: 32px;
}

.copy-narrow {
  max-width: 830px; margin-inline: auto; font-size: clamp(17px, 2vw, 18px); line-height: clamp(28px, 3vw, 30px); color: #000; padding-inline: clamp(4px, 1vw, 8px);
}
.copy { margin-inline: auto; font-size: clamp(17px, 2vw, 18px); line-height: clamp(28px, 3vw, 30px); color: #000; padding-left: clamp(48px, 6vw, 75px); padding-inline-end: clamp(4px, 1vw, 8px); }

/* ===============================
   SPECIALTY CHIPS
================================= */
.chips {
  --chip-size: clamp(150px, 17vw, 187px);
  width: 100%; max-width: 1080px; margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(45%, var(--chip-size)), var(--chip-size)));
  justify-content: center;
  justify-items: center;
  column-gap: clamp(18px, 3vw, 32px);
  row-gap: clamp(20px, 3vw, 32px);
}
.chip { width: var(--chip-size); aspect-ratio: 187 / 174; position: relative; }
.chip-inner { position: absolute; inset: 0; transform-origin: center; transform: none; }
.chip .label {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 100%; text-align: center; font-weight: 700; font-size: clamp(18px, 2vw, 20px); line-height: clamp(22px, 2.6vw, 24px); color: #000; pointer-events: none;
}
.chip .ring { position: absolute; border-radius: 9999px; border: 0.075rem rgba(153, 204, 154, .95) solid; }

/* ===============================
   BULLET GRID
================================= */
.bullet-grid {
  max-width: 1170px; margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(16px, 3vw, 26px);
  margin-top: clamp(18px, 3vw, 26px);
}
.bullet { display: flex; align-items: center; justify-content: center; gap: 5px; text-align: center; font-weight: 700; font-size: clamp(18px, 2vw, 20px); line-height: clamp(24px, 2.6vw, 26px); }
.bullet .dot { width: 7px; height: 7px; background: var(--leaf); flex-shrink: 0; }

/* ===============================
   STRIP OF 3 IMAGES
================================= */
.strip3 { display: flex; }
.strip3 img { flex: 1 1 0; height: clamp(160px, 16vw, 186px); object-fit: cover; }

/* ===============================
   CONTACT CARD (shared)
================================= */
.card {
  max-width: 1210px; margin-inline: auto; background: #fff;
  box-shadow: 0 4px 20px rgba(119, 147.79, 176.02, .35);
  padding: clamp(22px, 3vw, 30px); border-radius: 8px; display: flex; flex-direction: column; gap: clamp(16px, 2.2vw, 20px);
}
.card-heading {
  text-align: center; color: var(--brand-blue);
  font-family: "Roboto Slab", serif; font-weight: 500; font-size: 28px; line-height: 32px;
}
.card--spaced { margin-top: clamp(14px, 3vw, 18px); }
.card-heading--left { text-align: left; font-size: 28px; line-height: 32px; margin: 0 0 clamp(6px, 2vw, 10px); padding: 0; }
.split { display: flex; gap: clamp(26px, 4vw, 42px); flex-wrap: wrap; align-items: flex-start; }
.split--about { align-items: flex-start; gap: clamp(32px, 6vw, 60px); }
.col { flex: 1 1 320px; min-width: min(100%, 340px); display: flex; flex-direction: column; gap: clamp(14px, 2vw, 18px); }
.col--portrait { max-width: 300px; }

.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-label { height: 20px; font-size: 16px; line-height: 20px; font-weight: 400; color: #000; }
.input-required { color: #B57272; margin-left: 4px; }
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.contact-form { display: flex; flex-direction: column; gap: clamp(12px, 3vw, 16px); width: 100%; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 5px;
  border: 1px #94A4B5 solid;
  font: 16px/22px "Quattrocento Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: #000;
  background: #fff;
}
.contact-form textarea { min-height: clamp(140px, 24vw, 159px); resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--leaf); outline-offset: 1px; box-shadow: 0 0 0 1px var(--leaf); }
.contact-form button { margin-top: clamp(6px, 2vw, 10px); }

.col--contact-info { gap: clamp(22px, 3vw, 34px); padding-block: clamp(12px, 2vw, 20px); }
.col--map { max-width: 550px; }
.hours-title { font-size: 20px; font-weight: 700; line-height: 1.4; text-transform: uppercase; }
.info-text { font-size: 16px; line-height: 24px; }
.info-text--strong { font-weight: 700; }

.contact-row { display: flex; align-items: center; gap: 10px; }
.contact-row--spaced { margin-bottom: clamp(6px, 2vw, 10px); }
.contact-icon { font-size: 20px; color: var(--sky); min-width: 20px; }
.contact-address { color: var(--brand-blue); font-size: 20px; font-weight: 700; }

.copy--spaced { margin-top: clamp(24px, 5vw, 32px); }
.map-frame { position: relative; width: 100%; max-width: 536px; }
.map-frame img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.12); }

.section--contact { padding-bottom: clamp(80px, 12vw, 120px); }

/* ===============================
   FOOTER
================================= */
.site-footer {
  background: var(--sun);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(44px, 6vw, 56px);
  padding-block: 8px;
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
.footer-links span { opacity: 0.6; }
.phone-link { font-weight: 700; color: var(--brand-blue); }

/* ===============================
   THANK YOU MODAL
================================= */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.modal.is-open { display: flex; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.modal-dialog {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  width: min(90vw, 520px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  z-index: 1;
}
.modal-dialog h2 {
  margin: 0;
  color: var(--brand-blue);
  font-family: "Roboto Slab", serif;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 28px);
}
.modal-dialog p { margin: 0; font-size: 16px; line-height: 1.6; }
.modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: 0;
  background: none;
  font-size: 24px;
  cursor: pointer;
  color: #5f7388;
}

/* ===============================
   ABOUT: PORTRAIT + OVAL LINES
   (harmless on index/contact)
================================= */
.portrait-stack {
  --ring-inset-x: 12%;
  --ring-inset-y: 8%;
  position: relative; width: 100%; max-width: 460px;
}
.portrait-img {
  width: 100%; display: block; border-radius: 8px;
  box-shadow: 0 4px 20px rgba(119,148,176,.35);
  position: relative; z-index: 1;
}
.portrait-ovals {
  position: absolute;
  inset: calc(-1 * var(--ring-inset-y)) calc(-1 * var(--ring-inset-x));
  width: calc(100% + 2 * var(--ring-inset-x));
  height: calc(100% + 2 * var(--ring-inset-y));
  z-index: 2; pointer-events: none;
}
.portrait-ovals ellipse {
  stroke-width: 1.2px;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
}
.ring-sky  { stroke: var(--sky);  }
.ring-leaf { stroke: var(--leaf); }
.ring-sun  { stroke: var(--sun);  }
.ring-mint { stroke: var(--mint); }

/* ===============================
   RESPONSIVE
================================= */
@media (min-width: 1440px) {
  .hero .wrap { gap: 32px; }
  .chips { column-gap: 36px; row-gap: 36px; }
}

@media (max-width: 1200px) {
  .header-bar { padding-inline: clamp(14px, 3vw, 24px); }
  .collage { --collage-width: clamp(320px, 52vw, 560px); min-width: 300px; }
  .hero-copy { flex: 1 1 clamp(420px, 48vw, 520px); }
  .chips { --chip-size: clamp(150px, 19vw, 180px); }
  .hero .wrap { justify-content: center; flex-wrap: wrap; }
  .collage,
  .hero-copy {
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  .hero { min-height: auto; }
  .hero .wrap { justify-content: center; min-height: auto; gap: clamp(22px, 3vw, 28px); }
  .collage { flex: 1 1 clamp(420px, 60vw, 520px); margin-inline: auto; }
  .hero-copy { max-width: 100%; }
  .primary ul { gap: 10px; }
}

@media (max-width: 900px) {
  .split { flex-direction: column; gap: 32px; }
  .col--contact-info { padding-block: 0; }
  .hero { padding-block: clamp(32px, 6vw, 48px); }
  .hero-copy { text-align: left; align-items: flex-start; }
  .collage { --collage-width: clamp(320px, 70vw, 480px); }
  .chips { --chip-size: clamp(150px, 22vw, 170px); }
}

@media (max-width: 768px) {
  .header-bar { flex-wrap: wrap; align-items: center; gap: 14px; }
  .brand { width: 100%; justify-content: space-between; }
  .primary { width: 100%; }
  .hero-copy h2 { font-size: clamp(28px, 7vw, 34px); }
  .collage { --collage-width: clamp(300px, 82vw, 440px); }
  .chips { grid-template-columns: repeat(auto-fit, minmax(min(48%, var(--chip-size)), var(--chip-size))); }
  .bullet-grid { gap: 18px; }
}

@media (max-width: 700px) {
  .hero .wrap { align-items: center; }
  .collage,
  .hero-copy {
    flex: 1 1 100%;
    max-width: 100%;
    margin-inline: auto;
  }
  .hero-copy { width: 100%; }
}

@media (max-width: 640px) {
  .container { width: 100%; max-width: none; padding-inline: 0; }
  .logo-img { height: 68px; }
  .header-bar {
    width: 100%;
    padding: 15px 12px;
    border-radius: 0;
    box-shadow: var(--shadow);
    background: #fff;
    margin: 0;
  }
  .site-header { position: sticky; top: 0; left: 0; right: 0; background: #fff; box-shadow: none; }

  .nav-toggle { display: flex; }
  .primary {
    position: absolute; left: 0; right: 0; top: calc(100% + 12px);
    display: none; flex-direction: column; background: #fff; border-radius: 12px;
    box-shadow: var(--shadow); padding: 16px;
  }
  .primary ul { flex-direction: column; align-items: stretch; gap: 8px; }
  .pill { padding: 12px; font-size: 16px; justify-content: flex-start; }
  .primary.is-open { display: flex; }

  .hero { background: var(--paper); }
  .hero .wrap {
    gap: 24px; padding-block: 36px; flex-direction: column; align-items: stretch;
    text-align: left; min-height: auto;
  }
  .hero-copy { order: 1; width: 100%; padding-inline: 0; align-items: flex-start; gap: 20px; }
  .hero-copy h2 { font-size: clamp(26px, 7vw, 32px); line-height: 1.3; }
  .hero-copy .cta { align-self: center; width: 100%; max-width: 309px; }

  .collage {
    order: 2; width: 100%; flex: 1 1 auto; max-width: 100%;
    display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0;
    position: static; min-width: 0; aspect-ratio: auto;
  }
  .collage .tile { position: static; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .collage .tile:nth-child(odd){ justify-self: end; }

  .strip3 { flex-direction: column; }
  .strip3 img { height: auto; min-height: 140px; }
  .chips {
    --chip-size: clamp(110px, 30vw, 150px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 24px;
  }
  .chips .chip { width: min(100%, var(--chip-size)); }
  .chips .chip:nth-child(3) { grid-column: auto; justify-self: center; }
  .bullet-grid { align-items: flex-start; }
  .bullet { font-size: 18px; line-height: 26px; flex: 1 1 100%; justify-content: flex-start; text-align: left; width: 100%; }
  .copy { padding-left: clamp(32px, 8vw, 56px); }
}

@media (max-width: 480px) {
  .header-bar { gap: 10px; }
  .brand { justify-content: flex-start; gap: 10px; }
  .hero { padding-block: 24px; }
  .hero-copy { gap: 16px; }
  .hero-copy h2 { font-size: clamp(24px, 8vw, 28px); }
  .cta { width: 100%; }
  .chips { --chip-size: clamp(105px, 32vw, 140px); grid-template-columns: repeat(3, minmax(0,1fr)); }
  .split { gap: 24px; }
  .card-heading { font-size: 24px; }
}

@media (max-width: 360px) {
  .header-bar { padding-inline: 8px; }
  .pill { font-size: 15px; padding-inline: 12px; }
  .logo-img { height: 62px; }
  .chips { grid-template-columns: 1fr; }
}