/* ==========================================================================
   Interior page template — shared across every content page (About's
   sub-pages, services, patient info, etc.). Home page keeps its own
   bespoke sections in home.css; this file is the reusable kit for
   everything else.
   ========================================================================== */

/* --- Breadcrumb --- */
.breadcrumb {
  background: var(--navy-800);
  padding: 0 var(--gutter);
  min-height: 54px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.breadcrumb a {
  color: var(--text-light-blue);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--white);
}
.breadcrumb__sep {
  color: var(--text-navy-faint);
}
.breadcrumb__current {
  color: var(--white);
}

/* Bulleted list inside a content item (e.g. levels of sedation) */
.service-section__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-section__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-body);
}
.service-section__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  background: var(--blue-accent);
  border-radius: 50%;
}
.service-section__list strong {
  color: var(--text-navy);
  font-weight: 500;
}

/* Sub-headings within a content item (e.g. individual CEREC benefits) */
.service-subsection {
  margin-top: 22px;
  padding-left: 22px;
  border-left: 2px solid var(--cream-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service-subsection__title {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--text-navy);
}

/* --- Sidebar: sibling-service navigation --- */
.service-nav {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--white);
}
.service-nav__title {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--blue-accent);
}
.service-nav__list {
  display: flex;
  flex-direction: column;
}
.service-nav__list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-body);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
}
.service-nav__list a:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
/* Transparent marker on every row keeps the labels aligned whether or not
   the row is the current page. */
.service-nav__list a::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  height: 15px;
  background: transparent;
}
.service-nav__list a:hover {
  color: var(--blue-accent);
}
.service-nav__list a.is-current {
  color: var(--text-navy);
  font-weight: 500;
}
.service-nav__list a.is-current::before {
  background: var(--blue-accent);
}

@media (max-width: 780px) {
  .service-subsection {
    padding-left: 16px;
  }
}

/* ==========================================================================
   Strata-style service layout
   Adapted from the HTML5 UP "Strata" template: a full-height dark intro
   column pinned beside a scrolling content well, sections divided by thin
   rules, and a borderless two-up image grid. Our palette and type only.
   ========================================================================== */

.svc-layout {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 34% 1fr;
  /* grid items stretch by default, which is what gives the dark intro
     column its full-height edge regardless of how long the content runs */
}

/* --- Left intro column --- */
.svc-side {
  background: var(--navy-900);
}
.svc-side__inner {
  position: sticky;
  top: 24px;
  padding: 76px 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
}
/* Practice logo at the top of the intro column. The footer artwork is
   already light, so it sits directly on the dark column. Sized by width so
   the wordmark keeps its natural proportions instead of being cropped. */
.svc-side__avatar {
  width: 210px;
  max-width: 100%;
  flex-shrink: 0;
  margin-bottom: 6px;
}
.svc-side__avatar img {
  width: 100%;
  height: auto;
  display: block;
}
.svc-side__title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 300;
  color: var(--white);
  letter-spacing: -0.01em;
}
.svc-side__title strong {
  font-weight: 400;
}
.svc-side__lede {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-light-blue-2);
  text-wrap: pretty;
}
.svc-side__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.svc-side__actions .btn {
  justify-content: center;
}
.svc-side__meta {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid #1B3446;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-light-blue-2);
}
.svc-side__meta-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-light-blue);
}

/* --- Right content well --- */
.svc-main {
  padding: 76px 56px 88px;
  max-width: 860px;
}
.svc-sec {
  border-top: 2px solid var(--border-light);
  margin-top: 56px;
  padding-top: 56px;
}
.svc-sec:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.svc-sec__eyebrow {
  display: block;
  margin-bottom: 12px;
}
.svc-sec__title {
  font-family: var(--font-display);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 400;
  color: var(--text-navy);
  margin-bottom: 20px;
}
/* Opening section gets a larger headline, like Strata's "major" header */
.svc-sec--major .svc-sec__title {
  font-size: 36px;
  line-height: 1.18;
}
.svc-sec p {
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-body);
  text-wrap: pretty;
  margin-bottom: 16px;
  max-width: 700px;
}
.svc-sec p:last-child {
  margin-bottom: 0;
}
.svc-sec__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

/* --- Service list: one item per row, rule-separated, with occasional
       full-width image bands breaking up the run --- */
.work-list {
  display: flex;
  flex-direction: column;
}
.work-figure {
  aspect-ratio: var(--photo-ratio);
  border-radius: 8px;
  overflow: hidden;
  background: var(--placeholder-bg);
  margin: 34px 0;
}
.work-figure:first-child {
  margin-top: 0;
}
.work-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--border-light);
}
/* Portrait subject (e.g. a headshot) — the default figure ratio is the photo
   library's landscape 768:580; this swaps to the doctor portrait's own ratio
   and narrows the figure so a person-shaped photo doesn't stretch full width. */
.work-figure--portrait {
  aspect-ratio: var(--portrait-ratio);
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* An image band already separates the next item, so skip the rule there */
.work-figure + .work-item,
.work-list > .work-item:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.work-item__num {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--blue-accent);
}
.work-item__title {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--text-navy);
}
.work-item p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
  text-wrap: pretty;
  margin-bottom: 12px;
}
.work-item p:last-child {
  margin-bottom: 0;
}

/* --- Labeled contact list (Strata's labeled-icons, without the icons) --- */
.labeled-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 34px;
}
.labeled-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.labeled-list__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-accent);
}
.labeled-list__value {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-navy);
}
.labeled-list__value a {
  color: var(--text-navy);
  text-decoration: none;
}
.labeled-list__value a:hover {
  color: var(--blue-accent);
}

/* --- Sibling services, rendered as a plain two-column rule list --- */
.svc-links .service-nav {
  border: 0;
  padding: 0;
  background: transparent;
  gap: 0;
}
.svc-links .service-nav__title {
  display: none;
}
.svc-links .service-nav__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 34px;
}
.svc-links .service-nav__list a {
  padding: 13px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 14.5px;
}
.svc-links .service-nav__list a::before {
  width: 3px;
  height: 14px;
}

@media (max-width: 1100px) {
  .svc-layout {
    grid-template-columns: 1fr;
  }
  .svc-side__inner {
    position: static;
    max-height: none;
    overflow: visible;
    align-items: flex-start;
    text-align: left;
    padding: 52px var(--gutter);
    max-width: var(--max-content);
    margin: 0 auto;
  }
  .svc-side__actions {
    flex-direction: row;
    width: auto;
  }
  .svc-side__meta {
    width: auto;
  }
  .svc-main {
    padding: 56px var(--gutter) 72px;
    max-width: var(--max-content);
    margin: 0 auto;
  }
}

@media (max-width: 780px) {
  .svc-side__title {
    font-size: 27px;
  }
  .svc-sec {
    margin-top: 40px;
    padding-top: 40px;
  }
  .svc-sec__title,
  .svc-sec--major .svc-sec__title {
    font-size: 25px;
  }
  .work-figure {
    margin: 26px 0;
  }
  .labeled-list,
  .svc-links .service-nav__list {
    grid-template-columns: 1fr;
  }
  .svc-side__actions {
    flex-direction: column;
    align-self: stretch;
  }
}

/* --- Variation sections used inside the Strata content well --- */

/* Pull-quote: lifts a line out of the body copy for emphasis */
.svc-pullquote {
  margin: 26px 0 0;
  padding: 26px 30px;
  background: var(--cream);
  border-left: 3px solid var(--blue-accent);
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-navy);
  text-wrap: pretty;
}

/* Patient review cards, two-up */
.svc-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.svc-review {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 24px 22px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.svc-review:hover {
  border-color: var(--blue-accent);
  box-shadow: 0 20px 38px -26px rgba(10, 29, 44, 0.3);
}
.svc-review__stars {
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--blue-accent);
}
.svc-review__quote {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-navy);
  text-wrap: pretty;
  flex: 1;
  /* Some reviews are a sentence, others a full paragraph; clamp so the grid
     stays even, and let quote-toggle open the long ones. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.svc-review__quote.is-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
  flex: none;
}
.svc-review__name {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted-2);
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

/* Latest blog posts — rule-separated, same rhythm as the work list */
.svc-posts {
  display: flex;
  flex-direction: column;
}
.svc-post {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--border-light);
}
.svc-posts > .svc-post:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.svc-post__date {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-accent);
}
.svc-post__title {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.25;
  font-weight: 400;
  color: var(--text-navy);
}
.svc-post p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-body);
  text-wrap: pretty;
}

/* Full post archive — compact two-column index */
.svc-archive {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 30px;
  border-top: 1px solid var(--border-light);
}
.svc-archive__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
}
.svc-archive__title {
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-navy);
}
.svc-archive__date {
  font-size: 12px;
  color: var(--text-muted-2);
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 780px) {
  .svc-pullquote {
    padding: 22px 20px;
    font-size: 17px;
  }
  .svc-reviews,
  .svc-archive {
    grid-template-columns: 1fr;
  }
}

/* --- Contact page variations: info cards, map, form --- */
.svc-infocards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.svc-infocard {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.svc-infocard__label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-accent);
  margin-bottom: 2px;
}
.svc-infocard__value {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-navy);
}
.svc-infocard__note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted-2);
}
.svc-infocard a {
  color: var(--text-navy);
  text-decoration: none;
}
.svc-infocard a:hover {
  color: var(--blue-accent);
}

.svc-map {
  border: 1px solid var(--border-light);
  border-radius: 10px;
  overflow: hidden;
  line-height: 0;
}
.svc-map iframe {
  width: 100%;
  height: 300px;
  border: 0;
  display: block;
}

/* --- Form --- */
.svc-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.svc-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.svc-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  /* Flex/grid items default to min-width:auto, and a textarea's intrinsic
     (cols-based) width is wider than a phone screen — without this the field
     refuses to shrink and pushes the whole page into horizontal scroll. */
  min-width: 0;
}
.svc-field label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-navy);
  font-weight: 500;
}
.svc-field .req { color: var(--blue-accent); }
.svc-field .opt { color: var(--text-muted-2); font-weight: 400; }
.svc-field input,
.svc-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 13px 14px;
  background: var(--white);
  border: 1px solid var(--cream-border-3);
  border-radius: 6px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-navy);
  outline: none;
  transition: border-color 0.15s ease;
}
.svc-field textarea { resize: vertical; min-height: 110px; }
.svc-field input::placeholder,
.svc-field textarea::placeholder { color: var(--border-light-5); }
.svc-field input:focus,
.svc-field textarea:focus { border-color: var(--blue-accent); }
.svc-field input.is-invalid,
.svc-field textarea.is-invalid { border-color: #b91c1c; }
.svc-field__err {
  display: none;
  font-size: 12px;
  line-height: 1.4;
  color: #b91c1c;
}
.svc-field__err.show { display: block; }

/* Choice chips (what are you interested in) */
.svc-choices { display: flex; flex-wrap: wrap; gap: 8px; }
/* The label must be the positioning context, otherwise the visually-hidden
   radio resolves against a distant ancestor and drags the page wider. */
.svc-choice { position: relative; display: inline-block; }
.svc-choice input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.svc-choice span {
  display: inline-block;
  padding: 10px 15px;
  border: 1px solid var(--cream-border-3);
  border-radius: 6px;
  background: var(--white);
  font-size: 13.5px;
  color: var(--text-body);
  cursor: pointer;
  transition: all 0.12s ease;
}
.svc-choice span:hover { border-color: var(--blue-accent); color: var(--blue-accent); }
.svc-choice input:checked + span {
  background: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}
.svc-choice input:focus-visible + span { outline: 2px solid var(--blue-accent); outline-offset: 2px; }

/* A2P consent rows */
.svc-consent { display: flex; flex-direction: column; gap: 10px; }
.svc-consent__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  background: var(--cream);
}
.svc-consent__row input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--blue-accent);
  cursor: pointer;
}
.svc-consent__row label {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-body);
  cursor: pointer;
}
.svc-consent__row a { color: var(--blue-accent); }
.svc-legal {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--text-muted-2);
}
.svc-legal a { color: var(--blue-accent); }

.svc-form__status {
  display: none;
  padding: 13px 16px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
}
.svc-form__status.show { display: block; }
.svc-form__status--error { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }

.svc-form__done {
  display: none;
  flex-direction: column;
  gap: 12px;
  padding: 34px 30px;
  border: 1px solid var(--border-light);
  border-radius: 10px;
  background: var(--cream);
  text-align: center;
}
.svc-form__done.show { display: flex; }
.svc-form__done h3 {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 400;
  color: var(--text-navy);
}
.svc-form__done p { font-size: 15px; line-height: 1.7; color: var(--text-body); }

@media (max-width: 780px) {
  .svc-infocards,
  .svc-form__row { grid-template-columns: 1fr; }
  .svc-map iframe { height: 240px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 780px) {  .breadcrumb {
    min-height: 44px;
    font-size: 10px;
  }}