/* The Wound Specialists — consolidated active Version 5 refinements.
   Preserves CSS source order from Version 5.14 to avoid design regressions.
   Maintained as one stylesheet for subsequent small edits. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@900&display=swap');

/* Keep the utility actions inside the viewport while the compact navigation is
   active. The inherited desktop translate exceeds the 24px side gutter in the
   871–1320px range. The element-qualified selector intentionally outranks the
   compiled base rule without adding a priority override. */
@media (min-width: 871px) and (max-width: 1320px) {
  body .utility .wrap { transform: none; }
}

/* ===== Existing stylesheet: tws-version-5-vale-palette.css (unchanged declaration order) ===== */
/* TWS Version.5: Vale-inspired palette and restrained display sizing.
   Built on Version 4.82; deliberately non-destructive and reversible.
   Reference palette (Vale v2.2): ink #202a26, green #263f34,
   cream #f7f4ed, stone #e9e2d7, taupe #b9a994.
   Preserve Playfair headings, unchanged navigation case, and mobile eyebrow matching. */

:root {
  --navy: #263f34;
  --deep: #20352d;
  --teal: #406652;
  --aqua: #d8c9b5;
  --mint: #eee8df;
  --paper: #f7f4ed;
  --off: #eee8df;
  --ink: #202a26;
  --body: #4e5650;
  --line: #ded6cb;
  --white: #fff;
}

/* Major surfaces: replace the former green-tinted backgrounds with ivory, stone and taupe. */
body { background: var(--paper); }
.header { background: rgba(249,247,242,.98); border-bottom-color: var(--line); }
.header .nav { background-color: #f9f7f2; }
.utility { background: var(--deep); color: #f6f1e8; }
.utility a { color: #f6f1e8; }
main .hero { background: #f7f4ed; }
main .page-hero { background: #efe9e0; }
main .section.off { background: #eee8df; }
main .section.off.home-approach,
main .choice-section { background: #f4efe7; }
main .proof { background: #e9e2d7; color: var(--ink); }
main .proof div { border-color: #d3c7b7; }
main .proof span { color: #617365; }
main .band { background: #263f34; }
.footer { background: #20352d; color: #f7f4ed; }
.copyright { border-top-color: #587365; }

/* Cards and editorial highlight panels. */
main .card,
main .review-card,
main .choice-card,
main .contact-panel,
main .clinic-path,
main .contact-info-card { border-color: var(--line); }
main .choice-card,
main .review-card,
main .clinic-path { background: #fcfaf6; }
main .care-panel,
main .about-portrait,
main .quote-panel,
main .referral-process-assurance,
main .feature-art { background: #e9e2d7; }
main .resource-card,
main .condition-index { background: #f2ede5; border-color: #ded5c8; }
main .resource-card:hover,
main .choice-card:hover { background: #ece5da; border-color: #b9a994; }
main .service-tag,
main .choice-icon,
main .notice { background: #eee8df; border-color: #cdbda9; }
main .care-panel div,
main .about-portrait div,
main .referral-process-assurance li,
main .resource-questions li { border-color: #d2c6b6; }

/* Labels, rules and interactive colors. All intentionally high contrast. */
.eyebrow,
main .eyebrow,
main .resource-type,
main .home-route-label { color: #46604c; }
main .textlink,
main .choice-arrow,
main .resource-card b { color: #345643; }
.header .nav a:not(.btn):hover,
.header .nav a[aria-current="page"]:not(.btn) { color: #345643; }
main .btn,
main .btn.dark-cta,
a.btn[href^="tel:"],
a.btn[href^="mailto:"] { background: #263f34 !important; border-color: #263f34 !important; color: #fff !important; }
main .btn:hover,
main .btn.dark-cta:hover,
a.btn[href^="tel:"]:hover,
a.btn[href^="mailto:"]:hover { background: #345443 !important; border-color: #345443 !important; color: #fff !important; }
main .btn.outline { background: transparent !important; color: #263f34 !important; border-color: #697c6c !important; }
main .btn.outline:hover { background: #eee8df !important; }
main .band .btn.white { background: #f7f4ed !important; border-color: #f7f4ed !important; color: #263f34 !important; }
main .band .btn.white:hover { background: #e9e2d7 !important; border-color: #e9e2d7 !important; color: #263f34 !important; }
/* The Wound Care CTA is light, unlike the dark callout bands. */
main #page-services .band.wound-care-cta { background: #eee8df; }
main #page-services .band.wound-care-cta .btn.white { background: #263f34 !important; border-color: #263f34 !important; color: #fff !important; }
main #page-services .band.wound-care-cta .btn.white:hover { background: #345443 !important; border-color: #345443 !important; }

/* Display scale: slightly smaller, leaving body, micro-labels, cards and navigation unchanged. */
/* Version 5.19 typography roles. Continuous scales; no orientation/pointer typography. */
:root {
 --home-section-size:clamp(1.85rem,max(min(7.4vw,2.1rem),min(calc(1.257142857rem + 2.285714286vw),2.6rem),3.62vw),3.93rem);
 --visit-title-size:clamp(2.4rem,max(min(10.75vw,2.9rem),4.95vw),5.12rem);
}
main #page-home .section h2 {
 font-size:var(--home-section-size);line-height:1.17;letter-spacing:-.035em;
}
main #page-home .hero h1 {font-size:clamp(2.68rem,max(min(10vw,2.6875rem),5.25vw),5.35rem);}
main #page-patients .visit-hero-title {
 font-size:var(--visit-title-size);line-height:1.12;letter-spacing:-.05em;
}
/* Feature title retains its own narrow-screen minimum and shared wide-screen scale. */
main #page-reviews .patient-video-heading {font-size:max(1.94rem,var(--home-section-size));line-height:1.16;white-space:normal;}
/* Compact homepage landscape heading is an intentional layout role.
   Blend into the desktop scale after the two-column phone composition ends. */
@media (max-width:590px) and (orientation:landscape) {
 main #page-home .hero h1 {font-size:1.9rem;}
}
@media (min-width:1001px) and (max-width:1100px) and (orientation:landscape) {
 main #page-home .hero h1 {font-size:calc(-8.59375rem + 17.75vw);}
}
main h1 { font-size: clamp(2.68rem,5.25vw,5.35rem); line-height: 1.12; }
main h2 { font-size: var(--home-section-size); line-height: 1.16; }
main .page-hero h1 { font-size: clamp(2.62rem,4.95vw,5.12rem); }
main .image-hero h1 { font-size: clamp(2.62rem,4.38vw,4.68rem); }
main #page-resources .resources-hero h1 { font-size: clamp(3.0rem, 4.17vw, 4.04rem); }
main .band h2 { font-size: clamp(2.12rem, 3.25vw, 3.14rem); }
main .care-panel h2,
main .resource-questions h2 { font-size: clamp(2.04rem, 2.8vw, 2.98rem); }
/* Keep narrow card headings and uppercase section eyebrows at their established sizes. */

@media (max-width: 870px) {
  .header .nav { background: #f9f7f2; }
}
@media (max-width: 590px) {
  main h1 { line-height: 1.12; }
  main h2 { line-height: 1.16; }
  main #page-resources .resources-hero h1 { font-size: clamp(2.56rem, 8.5vw, 3rem); }
  main .resource-questions h2 { font-size: clamp(2rem, 7.3vw, 2.46rem); }
}
@media print {
  body, main .hero, main .page-hero, main .section.off { background: #fff !important; }
}

/* ===== Existing stylesheet: tws-version-5-1-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists — Version.5.1 aesthetic refinement.
   Extends Version.5 without changing content, layouts, functionality, or nav.
   Principle: stone/ivory page sections, sage/forest only in contained highlights,
   consistent DM Sans card typography, fine editorial photo edges. */
:root {
  --paper: #f7f4ed;
  --off: #ece5db;
  --mint: #e5e9df;
  --line: #d9d0c4;
  --body: #4e5650;
  --ink: #202a26;
  --teal: #466850;
}

/* Warm backgrounds establish the primary visual rhythm; no broad green panels. */
body, main .section { background-color: #f7f4ed; }
main .hero { background: #f7f4ed; }
main .page-hero { background: #eee7dd; }
main .section.off,
main .section.off.consulting-inquiry-section,
main .section.off.contact-form-section { background: #ece5db; }
main .choice-section,
main .section.off.home-approach { background: #f0e9df; }
main .proof { background: #e8dfd3; color: #202a26; }
main .proof div { border-color: #d5c8b7; }
main .proof span { color: #466850; }
main .resource-preview,
main .section.reviews-home,
main .section.home-conditions-section,
main .section.patient-video-section,
main .section.contact-practice-section,
main .section.referral-process-section { background: #f7f4ed; }
main .section.dark { background: #ece5db; color: #202a26; }
main .section.dark p { color: #4e5650; }

/* CTAs are contained highlights in warm stone, not full-width green blocks.
   A high-contrast forest button carries the green accent instead. */
main .band,
main #page-services .band.wound-care-cta {
  background: #e7ded2;
  color: #202a26;
  border-top: 1px solid #d7cbbb;
  border-bottom: 1px solid #d7cbbb;
}
main .band p { color: #4e5650; }
main .band :is(h1,h2,h3) {
  color: #202a26 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
}
main .band .btn.white,
main #page-services .band.wound-care-cta .btn.white {
  background: #263f34 !important;
  border-color: #263f34 !important;
  color: #fff !important;
}
main .band .btn.white:hover,
main #page-services .band.wound-care-cta .btn.white:hover {
  background: #345443 !important;
  border-color: #345443 !important;
  color: #fff !important;
}

/* Green stays in accent labels, controls, and selected softly highlighted cards. */
main .eyebrow,
main .resource-type,
main .home-route-label,
main .card .index,
main .breadcrumb,
main .contact-info-card strong { color: #466850; }
main :is(.card,.service-card,.choice-card,.path-card,.clinic-path,.resource-card,
  .review-card,.referral-process-card,.contact-info-card,.contact-panel,
  .contact-form-card) {
  border-color: #ded5c9;
}
main :is(.card,.service-card,.choice-card,.path-card,.resource-card,
  .review-card,.referral-process-card,.contact-info-card,.contact-panel) {
  background: #fcfaf6;
}
main .clinic-path,
main .resource-card.clinic-resource,
main #page-resources .resource-card.clinic-resource {
  background: #e7ebe2;
  border-color: #cdd8cb;
}
main .clinic-path:hover,
main #page-resources .resource-card.clinic-resource:hover { background: #dfe8dc; }
main .resource-card,
main #page-resources .resource-card.external-resource,
main #page-resources .clinic-guides .resource-card {
  border-color: #ded5c9;
}
main .care-panel,
main .referral-process-assurance,
main .quote-panel { background: #e7ebe2; }
main .about-portrait,
main .feature-art { background: #e8dfd3; }
main .service-tag,
main .choice-icon,
main .notice { background: #e7ebe2; border-color: #ccd8ca; }
main .contact-form-card { background: #f6f1ea; border-color: #ded5c9; }
main .photo-caption { background: #fcfaf6; border-left-color: #849b82; }

/* Consistent card typography: DM Sans throughout card families, including
   condition headings, reviews, navigation cards and referral cards.
   Playfair remains only for major editorial section/page headings. */
main :is(.card,.service-card,.choice-card,.path-card,.clinic-path,.resource-card,
  .review-card,.referral-process-card,.contact-info-card,.contact-panel,
  .contact-form-card,.care-panel) {
  font-family: var(--sans);
}
main :is(.card,.service-card,.choice-card,.path-card,.clinic-path,
  .review-card,.referral-process-card,.contact-info-card,.contact-panel,
  .contact-form-card,.care-panel) :is(h2,h3,h4,strong,blockquote) {
  font-family: var(--sans) !important;
  letter-spacing: -.018em;
}
/* Resource titles share the same typography in both the basics grid and library.
   The dedicated resource-card title rule below defines their font family. */
main :is(.card,.service-card,.choice-card,.path-card,.clinic-path,.resource-card,
  .review-card,.referral-process-card,.contact-info-card,.contact-panel,
  .contact-form-card,.care-panel) :is(h3,strong):where(:not(#page-resources .resource-card strong)) {
  font-weight: 700 !important;
}
/* These titles are short information headings, not display headlines. */
main :is(.card,.service-card) h3 { font-size: clamp(1.27rem, 1.35vw, 1.39rem); line-height: 1.34; }
main .wound-condition-card h3 { font-size: clamp(1.3rem, 1.36vw, 1.43rem); line-height: 1.34; }
main .choice-copy strong { font-size: clamp(1.35rem, 1.6vw, 1.55rem); line-height: 1.25; }
/* Resource card font swap: serif titles and sans descriptions.
   Preserve the approved sizing, weights, colors and spacing. */
main #page-resources .resource-card strong { font-family: var(--serif); letter-spacing: -.018em; font-size: clamp(1.34rem, 1.6vw, 1.55rem); line-height: 1.27; }
main #page-resources .resource-card > span:not(.resource-origin) { font-family: var(--sans); }
main .path-card h3 { font-size: clamp(1.52rem, 2.3vw, 2.08rem); line-height: 1.23; }
main .referral-process-card h3 { font-size: clamp(1.42rem, 2.05vw, 1.86rem); line-height: 1.26; }
main .care-panel h3 { font-size: clamp(1.65rem, 2.45vw, 2.35rem); line-height: 1.28; }
main .review-card :is(p,blockquote) {
  font-family: var(--sans) !important;
  font-size: clamp(1.03rem, 1.2vw, 1.14rem);
  line-height: 1.56;
  letter-spacing: -.005em;
}
main .choice-copy small,
main .card .index,
main .resource-type,
main .review-card small,
main .review-card figcaption,
main .referral-process-card .index {
  font-family: var(--sans) !important;
}

/* Concierge visit image: preserve the approved full photographic composition.
   Reuse existing image-hero grid and service-photo styling at all breakpoints. */
@media (min-width: 871px) {
  main section[aria-label="Concierge wound care"] .image-hero-grid {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    gap: 42px;
  }
}
main section[aria-label="Concierge wound care"] .concierge-visit-photo {
  height: 390px;
  margin: 0;
}
main section[aria-label="Concierge wound care"] .concierge-visit-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 591px) and (max-width: 870px) {
  main section[aria-label="Concierge wound care"] .concierge-visit-photo { height: 330px; }
}
@media (max-width: 590px) {
  main section[aria-label="Concierge wound care"] .concierge-visit-photo { height: 250px; }
}

/* Photography: remove padded green picture frames. A single, quiet stone
   hairline and restrained shadow connect imagery with warm paper surfaces. */
main :is(.hero-visual,.service-photo,.physician-portrait,.doctor-home-photo,
  .resource-feature-image,.contact-clinic-photo),
#page-contact .contact-clinic-photo {
  padding: 0;
  background: #e8dfd3;
  border: 1px solid #d8cec1;
  border-radius: 7px;
  box-shadow: 0 9px 24px rgba(43,39,31,.065);
}
main :is(.hero-visual,.service-photo,.physician-portrait,.doctor-home-photo,
  .resource-feature-image,.contact-clinic-photo) img,
#page-contact .contact-clinic-photo img {
  border-radius: 6px;
}
main .physician-portrait,
main .doctor-home-photo { overflow: hidden; }
main .physician-portrait figcaption,
main .doctor-home-photo figcaption { background: #fcfaf6; }
main .service-photo,
main #page-services .image-hero .service-photo,
main #page-resources .resources-hero .service-photo {
  padding: 0;
  background: #e8dfd3;
  border: 1px solid #d8cec1;
  border-radius: 7px;
  box-shadow: 0 9px 24px rgba(43,39,31,.065);
}
main .service-photo img,
main #page-services .image-hero .service-photo img,
main #page-resources .resources-hero .service-photo img { border-radius: 6px; }

@media (max-width: 590px) {
  main :is(.card,.service-card) h3,
  main .wound-condition-card h3 { font-size: 1.32rem; }
  main .choice-copy strong,
  main .resource-card strong { font-size: 1.39rem; }
  main .referral-process-card h3 { font-size: 1.52rem; }
  main .path-card h3 { font-size: 1.67rem; }
  main :is(.hero-visual,.service-photo) {
    box-shadow: 0 6px 18px rgba(43,39,31,.055);
  }
}
@media print {
  main .band, main .section.off { background: #fff !important; }
}

/* ===== Existing stylesheet: tws-version-5-2-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists — Version.5.2
   Three scoped visual corrections to Version.5.1:
   (1) homepage condition cards match the readable DM Sans wound-care card titles;
   (2) Contact Us / Visit the clinic card adopts warm stone instead of cool green;
   (3) homepage hero matches the warm-stone interior page-hero backgrounds.
   Preserve all layout/content, navigation, editorial typography, and interactions. */

/* Same warm-stone opening treatment used on the interior pages. */
main #page-home .hero {
  background: #eee7dd;
}

/* Standardize home wound cards to the wound-care card title treatment.
   Card grid and index/arrow behavior remain intact. */
main #page-home .home-condition-card {
  background: #fcfaf6;
  border-color: #ded5c9;
  color: #202a26;
  box-shadow: 0 7px 20px rgba(43,39,31,.065), 0 2px 5px rgba(43,39,31,.025);
}
main #page-home .home-condition-card h3 {
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  font-size: clamp(1.3rem,1.36vw,1.43rem);
  line-height: 1.34;
  letter-spacing: -.018em;
  text-transform: none;
  color: #202a26;
  overflow-wrap: normal;
}
main #page-home .home-condition-card .home-condition-index {
  color: #466850;
}
@media (hover:hover) {
  main #page-home .home-condition-card:hover {
    background: #f4f4ec;
    border-color: #c9d0c0;
    box-shadow: 0 11px 25px rgba(43,39,31,.095), 0 3px 8px rgba(43,39,31,.035);
  }
}
@media (hover:none) {
  main #page-home .home-condition-card:hover { background: #fcfaf6; border-color: #ded5c9; }
}
@media (min-width:871px) {
  /* Keep the nine-card desktop section compact, as in Version.5.1. */
  main #page-home .home-condition-card h3 {
    font-size: clamp(1.27rem,1.36vw,1.39rem);
    line-height: 1.32;
  }
}
@media (max-width:870px) {
  main #page-home .home-condition-card h3 { font-size: clamp(1.15rem,2.2vw,1.31rem); }
}
@media (max-width:590px) {
  /* Two-column mobile cards need slightly smaller display sizing than the
     single-column Wound Care page, not the former 0.63rem micro-type. */
  main #page-home .home-condition-card h3,
  main #page-home .home-condition-card:has(.home-condition-title-mobile) h3 {
    font-size: clamp(1.05rem,3.2vw,1.16rem);
    line-height: 1.32;
    letter-spacing: -.018em;
  }
}

/* Replace the one remaining mint-green contact card with a warm-stone panel.
   Retain green eyebrow/buttons for accents and preserve photograph framing. */
main #page-contact .contact-practice-feature {
  background: #f0e9df;
  border-color: #d8cdbf;
  box-shadow: 0 10px 26px rgba(43,39,31,.055);
}

/* Optional Version.5.2 menu trial: all navigation entries are extra-bold,
   preserving their title case, size, and spacing. DM Sans 800 is already
   fairly bold in Version.5.1; 900 makes the comparison visible. */
.header .nav a,
.header .nav a:not(.btn),
.header .nav a.btn {
  font-family: var(--sans);
  font-weight: 900;
}

/* ===== Existing stylesheet: tws-version-5-3-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists — Version.5.3
   - Uppercase menu labels, original weight (not Version.5.2 extra-bold)
   - Fully clickable Wound Care guide cards with sage hover/focus feedback.
   - Informational wound cards remain visually non-interactive. */

/* Preserve original title-case source text for assistive technology. */
.header .nav a,
.header .nav a:not(.btn),
.header .nav a.btn {
  font-family: var(--sans);
  font-weight: 800;
  text-transform: uppercase;
}

/* A stretched link makes every portion of linked Wound Care cards actionable
   while keeping a single semantic link for keyboard and screen reader users. */
main #page-services .wound-care-clickable {
  position: relative;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease,
              box-shadow .2s ease, transform .2s ease;
}
main #page-services .wound-care-clickable > a[href]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media (hover: hover) {
  main #page-services .wound-care-clickable:hover {
    background: #e7ebe2;
    border-color: #c3d0be;
    box-shadow: 0 11px 25px rgba(43, 65, 47, .095);
    transform: translateY(-2px);
  }
}
main #page-services .wound-care-clickable:focus-within {
  background: #e7ebe2;
  border-color: #d8cdbf;
  outline: 2px solid #466850;
  outline-offset: 2px;
}
main #page-services .wound-care-clickable > a[href]:focus-visible {
  outline: none; /* focus ring is shown around the entire parent card */
}
@media (prefers-reduced-motion: reduce) {
  main #page-services .wound-care-clickable { transition: none; }
  main #page-services .wound-care-clickable:hover { transform: none; }
}

/* ===== Existing stylesheet: tws-version-5-4-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists — Version.5.4
   Keeps all Version.5.3 content, layout, and links intact.
   1. Homepage condition cards share Wound Care's sage hover/focus response.
   2. Mobile homepage condition cards receive the soft green halo already used
      on How We Can Help pathway cards.
   3. Uppercase menu is lighter and active-page marker is neutral taupe,
      replacing the old green-filled active-page pill. */

/* Homepage links: exact sage surface and border behavior of the linked
   Wound Care guide cards in Version.5.3. */
@media (hover: hover) {
  main #page-home .home-condition-card:hover {
    background: #e7ebe2;
    border-color: #c3d0be;
    box-shadow: 0 11px 25px rgba(43,65,47,.095);
    transform: translateY(-2px);
  }
}
main #page-home .home-condition-card:focus-visible {
  background: #e7ebe2;
  border-color: #a5bca5;
  outline: 2px solid #466850;
  outline-offset: 2px;
}

/* Mobile: echo the delicate green-tinted shadow underneath the
   How We Can Help cards without turning the whole section green. */
@media (max-width: 590px) {
  main #page-home .home-condition-card {
    background: #fcfaf6;
    border-color: #d5e3d9;
    box-shadow: 0 8px 24px rgba(29,78,58,.11),
                0 2px 5px rgba(29,78,58,.035);
  }
  main #page-home .home-condition-card:active {
    background: #e7ebe2;
    border-color: #c3d0be;
  }
}
@media (max-width: 590px) and (hover: none) {
  main #page-home .home-condition-card:hover {
    background: #fcfaf6;
    border-color: #d5e3d9;
    box-shadow: 0 8px 24px rgba(29,78,58,.11),
                0 2px 5px rgba(29,78,58,.035);
    transform: none;
  }
}

/* Give ALL-CAPS navigation a quieter editorial rhythm.
   Contact Us remains the forest-green action button, just less heavy. */
.header .nav a,
.header .nav a:not(.btn) {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.header .nav a.btn {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.header .nav a:not(.btn):hover,
.header .nav a[aria-current="page"]:not(.btn) {
  color: #202a26;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
  animation: none;
}

/* Desktop active/hover links: understated warm-taupe hairline, no green box. */
@media (min-width: 1361px) {
  .header .nav a:not(.btn) { position: relative; }
  .header .nav a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    border-radius: 1px;
    background: #b9a994;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
  }
  .header .nav a[aria-current="page"]:not(.btn)::after,
  .header .nav a:not(.btn):hover::after,
  .header .nav a:not(.btn):focus-visible::after {
    transform: scaleX(1);
  }
}

/* Dropdown on tablets/phones: slim taupe left rule instead of a wide
   underline spanning an entire menu row. */
@media (max-width: 1360px) {
  .header .nav a[aria-current="page"]:not(.btn) {
    box-shadow: inset 2px 0 #b9a994;
    padding-left: 12px;
  }
  .header .nav a:not(.btn):hover { color: #202a26; }
}
@media (prefers-reduced-motion: reduce) {
  .header .nav a:not(.btn)::after { transition: none; }
}

/* ===== Existing stylesheet: tws-version-5-5-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists — Version.5.5
   Navigation refinement and more consistent space below the site header.
   Preserves Version.5.4 content, colors, card typography, and interactions. */

/* Desktop navigation: lighter, smaller uppercase labels, and more breathing
   room for the Contact Us action at standard laptop widths. */
@media (min-width: 1361px) {
  .header .nav { gap: 12px; box-shadow: -15px 0 0 #f9f7f2; }
  .header .nav a:not(.btn) {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .035em;
  }
  .header .nav a.btn {
    font-size: .76rem;
    font-weight: 600;
    letter-spacing: .035em;
    padding-inline: 18px;
    gap: 9px;
  }
}
.header .nav a.btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* No traveling line, expanding border, pill, or other visual effect on hover.
   The current page alone has a restrained, static taupe hairline. */
@media (min-width: 1361px) {
  .header .nav a:not(.btn)::after {
    content: none !important;
    display: none !important;
    transition: none !important;
  }
  .header .nav a[aria-current="page"]:not(.btn) {
    color: #333a34;
    position: relative;
    animation: none !important;
    background: transparent !important;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .header .nav a[aria-current="page"]:not(.btn)::before {
    content: "";
    position: absolute;
    width: 55%;
    left: 22.5%;
    bottom: -8px;
    height: 1px;
    background: #c9bfb2;
  }
}
.header .nav a:not(.btn):hover {
  color: inherit;
  background: transparent;
  animation: none !important;
}
/* Preserve a keyboard-only focus cue despite eliminating pointer-hover cues. */
.header .nav a:not(.btn):focus-visible {
  outline: 2px solid #6e806f;
  outline-offset: 5px;
}
@media (max-width: 1360px) {
  .header .nav a[aria-current="page"]:not(.btn) {
    box-shadow: inset 1px 0 #d0c4b5;
  }
  .header .nav a:not(.btn):hover { color: inherit; }
}

/* Lift page introductions slightly, not the body sections. The breadcrumb and
   top padding previously added unnecessary blank space on interior pages. */
@media screen and (min-width: 871px) {
  main .page-hero { padding-top: 64px; }
  main .page-hero.image-hero { padding-top: 48px; }
  main #page-home .hero-grid { padding-top: 52px; min-height: 590px; }
}
@media screen and (min-width: 591px) and (max-width: 870px) {
  main .page-hero { padding-top: 52px; }
  main .page-hero.image-hero { padding-top: 46px; }
  main #page-home .hero-grid { padding-top: 55px; }
}
@media screen and (max-width: 590px) {
  main .page-hero { padding-top: 47px; }
  main .page-hero.image-hero { padding-top: 42px; }
  main #page-home .hero-grid { padding-top: 47px; }
  main #page-contact .contact-page-hero { padding-top: 43px; }
}
main .page-hero .breadcrumb { margin-bottom: 19px; }

@media print {
  main .page-hero,
  main .page-hero.image-hero { padding-top: 24px; }
}

/* ===== Existing stylesheet: tws-version-5-7-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists — Version.5.7
   Approved image unchanged. Homepage image placement, quiet active navigation,
   consistent first-screen rhythm, resource hero, mobile eyebrow labels,
   and fully linked Google review cards. */

/* Current page cue fades into place. No traveling underline or hover line. */
@keyframes tws-v57-current-fade { from { opacity: 0; } to { opacity: 1; } }
@media (min-width: 1361px) {
  .header .nav a[aria-current="page"]:not(.btn)::before {
    animation: tws-v57-current-fade .65s ease-out .08s both;
  }
  .header .nav a:not([aria-current="page"]):not(.btn)::before,
  .header .nav a:not(.btn):hover::before { /* Not an interactive hover effect. */ }
}
@media (max-width: 1360px) {
  .header .nav a[aria-current="page"]:not(.btn) {
    box-shadow: none;
    position: relative;
  }
  .header .nav a[aria-current="page"]:not(.btn)::before {
    content:""; position:absolute; left:0; top:25%; bottom:25%; width:1px;
    background:#c9bfb2;
    animation: tws-v57-current-fade .65s ease-out .08s both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .header .nav a[aria-current="page"]:not(.btn)::before { animation:none; }
}

/* The homepage photo is deliberately NOT replaced, edited or recompressed.
   Bias the framing left so the patient and window retain priority and the far
   right faucet/cabinets are cropped. A modestly wider column on desktop. */
@media (min-width: 1101px) {
  main #page-home .hero-grid {
    width: min(1390px, calc(100% - 48px));
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.12fr);
    gap: 36px;
  }
  main #page-home .hero-visual {
    overflow: hidden;
    height: clamp(435px, 32vw, 470px);
  }
  main #page-home .hero-visual img {
    object-position: left center;
    transform:scale(1.075);
    transform-origin:left center;
  }
}
@media (min-width: 871px) and (max-width:1100px) {
  main #page-home .hero-visual { overflow:hidden; }
  main #page-home .hero-visual img { object-position: 8% center; }
}
@media (max-width: 870px) {
  main #page-home .hero-visual img { object-position: 45% center; }
}

/* Interior page intros should begin at the same vertical position and use a
   consistent first-screen height. On phones, natural flow is easier to read. */
@media (min-width: 871px) and (min-height: 650px) {
  main .page-hero {
    min-height: max(570px, calc(100svh - 125px));
    box-sizing: border-box;
  }
  main .page-hero.image-hero { min-height: max(570px, calc(100svh - 125px)); }
  main #page-home .hero-grid { min-height: max(590px, calc(100svh - 125px)); }
}
@media (min-width:871px) and (max-height:649px) {
  main .page-hero { min-height:480px; }
}
@media (max-width:870px) {
  main .page-hero, main .page-hero.image-hero { min-height:0; }
}

/* Resources: narrower explanatory column, more prominent image at top right. */
@media (min-width: 1101px) {
  main #page-resources .resources-hero .image-hero-grid {
    grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
    gap: 34px;
  }
  main #page-resources .resources-hero h1 {
    font-size: clamp(2.68rem, 3.3vw, 3.16rem);
  }
  main #page-resources .resources-hero .lead {
    max-width: 415px;
  }
  main #page-resources .resources-hero .service-photo {
    height: 410px;
  }
}

/* The two homepage eyebrows must use identical mobile typography. */
@media (max-width: 590px) {
  main #page-home .home-resource-feature .eyebrow,
  main #page-home .reviews-home .section-head .eyebrow {
    font-family: var(--sans) !important;
    font-size: .74rem !important;
    font-weight: 800 !important;
    letter-spacing: .16em !important;
    line-height: 1.45 !important;
    text-transform: uppercase !important;
    color: #466850 !important;
  }
}

/* Google review cards: stretch their existing single Google link to the whole
   card; preserve accessible link semantics and keyboard focus. */
main .review-card { position:relative; cursor:pointer; transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
main .review-card figcaption a[href]::after { content:""; position:absolute; inset:0; z-index:1; }
@media (hover:hover) {
  main .review-card:hover { background:#e7ebe2; border-color:#c3d0be; box-shadow:0 11px 25px rgba(43,65,47,.095); transform:translateY(-2px); }
}
main .review-card:focus-within { background:#e7ebe2; border-color:#a5bca5; outline:2px solid #466850; outline-offset:2px; }
main .review-card figcaption a[href]:focus-visible { outline:none; }
@media (hover:none) {
  main .review-card:active { background:#e7ebe2; border-color:#c3d0be; }
}
@media (prefers-reduced-motion:reduce) { main .review-card { transition:none; } main .review-card:hover { transform:none; } }
@media print { main .page-hero, main .page-hero.image-hero { min-height:0 !important; } }

/* ===== Existing stylesheet: tws-version-5-8-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists — Version.5.8
   Scoped refinements: homepage image composition, patient-video seeking,
   resource heading hierarchy, and removal of first-paint entrance flashes.
   The approved homepage image and video assets are unchanged. */

/* Editorial balance: keep the photo on the right, but let the headline breathe.
   The source image is not edited. Anchoring object-position left means the
   browser discards the far right of the source whenever it must crop. */
@media (min-width: 1101px) {
  main #page-home .hero-grid {
    width: min(1250px, calc(100% - 48px));
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: clamp(36px, 3.4vw, 48px);
  }
  main #page-home .hero-visual { height: clamp(405px, 30.5vw, 442px); }
  main #page-home .hero-visual img {
    object-fit: cover;
    object-position: left center;
    transform: none !important;
  }
}
@media (min-width: 871px) and (max-width: 1100px) {
  main #page-home .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 30px;
  }
  main #page-home .hero-visual { height: 400px; }
  main #page-home .hero-visual img {
    object-position: left center;
    transform: none !important;
  }
}

/* Make the two-line Resources title feel as authoritative as other page
   introductions despite the larger right-hand photograph in Version.5.7. */
@media (min-width: 1101px) {
  main #page-resources .resources-hero h1 {
    font-size: clamp(3.42rem, 3.95vw, 3.575rem);
    line-height: 1.1;
    letter-spacing: -.046em;
    max-width: none;
  }
}
@media (min-width: 871px) and (max-width: 1100px) {
  main #page-resources .resources-hero h1 {
    font-size: clamp(3.03rem, calc(-.87rem + 6.24vw), 3.42rem);
  }
}

/* The previous first-screen 'page-enter' and hero-photo animations started
   with opacity:0. Remove them to prevent an apparent flash of blank content
   during ordinary full-page navigation. The active-menu hairline still fades. */
main .page-hero .wrap,
main #page-home .hero-grid > div:first-child,
main #page-home .hero-visual {
  animation: none !important;
  opacity: 1 !important;
  transform: none;
}

/* Accessible supplementary video timeline, in addition to native controls. */
main .patient-video-seek {
  display: grid;
  grid-template-columns: auto minmax(100px,1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f5f1e9;
  border: 1px solid #ded5c9;
  border-top: 0;
  border-radius: 0 0 9px 9px;
  color: #25372c;
  font-family: var(--sans);
}
main .patient-video-seek button {
  background: #fffdfa;
  color: #263f34;
  border: 1px solid #d1c8ba;
  border-radius: 6px;
  padding: 8px 11px;
  font: 700 .78rem/1.3 var(--sans);
  white-space: nowrap;
  cursor: pointer;
  min-height: 39px;
}
main .patient-video-seek button:hover { background: #e7ebe2; border-color: #b8c9b5; }
main .patient-video-seek button:focus-visible,
main .patient-video-seek input:focus-visible { outline: 2px solid #42644a; outline-offset: 3px; }
main .patient-video-seek input[type="range"] {
  width: 100%;
  min-width: 0;
  accent-color: #355d46;
  cursor: pointer;
}
main .patient-video-seek .patient-video-time {
  font: 600 .76rem/1.3 var(--sans);
  color: #4e5650;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 590px) {
  main .patient-video-seek {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
  }
  main .patient-video-seek input[type="range"] { grid-column: 1 / -1; grid-row: 1; }
  main .patient-video-seek .patient-video-time { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  main .patient-video-seek button { grid-row: 3; }
  main .patient-video-seek button:first-of-type { grid-column: 1; }
  main .patient-video-seek button:last-of-type { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  main .patient-video-seek button { transition: none; }
}

/* ===== Existing stylesheet: tws-version-5-9-refinements.css (unchanged declaration order) ===== */
/* TWS Version.5.9 — refined page balance, flash prevention and in-video captions. */
/* Make image wider exclusively on its right edge. This keeps the left text
   column untouched while revealing more of the doctor's right side. */
@media (min-width: 1101px) {
 main #page-home .hero-visual {
   width: calc(100% + clamp(18px, 1.85vw, 30px));
   max-width: none;
 }
 main #page-home .hero-visual img {object-position:left center;transform:none!important;}
}
/* Natural, content-aware interior introductions: text-only pages are shorter,
   photographic heroes retain more height, and the homepage stays spacious. */
@media (min-width: 871px) {
 main .page-hero {min-height: clamp(440px, 55svh, 565px)!important; padding-bottom: clamp(58px, 6.5vw, 90px);}
 main .page-hero.image-hero {min-height: clamp(525px, 64svh, 635px)!important; padding-bottom:clamp(55px, 5vw, 85px);}
 main #page-home .hero-grid {min-height:clamp(570px, 69svh, 650px)!important; padding-bottom:clamp(56px, 5vw, 78px);}
}
@media (max-width:870px) {
 main .page-hero, main .page-hero.image-hero {min-height:0!important;}
 main #page-home .hero-grid {min-height:0!important;}
}
/* Avoid delayed reveals that make content blink into place on navigation.
   Keep interaction styling (card hover, focus, underline) separate. */
main .page-hero .wrap, main .hero-grid>div:first-child, main .hero-visual {
 animation:none!important;
 opacity:1!important;
}
html,body,main{background-color:#f7f4ed;}
/* Preserve named warm sections while preventing white paint flashes on reload. */
main .hero{background-color:#efe9e0;}
/* Native video timeline plus small inset CC toggle. No controls below video. */
.patient-video-seek{display:none!important;}
.patient-video-frame {position:relative;}
.patient-video-cc {
 position:absolute;top:12px;right:12px;z-index:2;
 background:rgba(30,44,37,.82);color:#fff;
 border:1px solid rgba(255,255,255,.55);border-radius:5px;
 font:700 13px/1.2 Arial,sans-serif;letter-spacing:.06em;
 padding:8px 10px;min-width:42px;min-height:35px;
 cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.14);
}
.patient-video-cc[aria-pressed="true"] {background:#e4eddf;color:#1b3a2b;border-color:#75937d;}
.patient-video-cc:focus-visible {outline:3px solid #f7f4ed;outline-offset:2px;}
.patient-video-frame video::cue {background-color:rgba(19,25,21,.86);color:white;font:600 18px/1.3 Arial,sans-serif;}
@media (max-width:590px) {.patient-video-cc{top:8px;right:8px;padding:6px 8px;}}
@media (prefers-reduced-motion: reduce) {.patient-video-cc{transition:none;}}

/* An editorial hint of more content, not a persistent floating control. */
@media (min-width:871px) {
 main #page-home .hero {position:relative;}
 main #page-home .home-scroll-cue {
   position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
   display:flex;align-items:center;flex-direction:column;gap:1px;
   color:#687266;text-decoration:none;text-transform:uppercase;
   font:650 10px/1.3 Arial,sans-serif;letter-spacing:.14em;
   opacity:.77;transition:opacity .35s ease;
 }
 main #page-home .home-scroll-cue span:last-child {font:400 20px/1.2 Arial,sans-serif;}
 main #page-home .home-scroll-cue:hover,main #page-home .home-scroll-cue:focus-visible{opacity:1;}
 html.tws-scrolled main #page-home .home-scroll-cue {opacity:0;pointer-events:none;}
}
@media (max-width:870px){main #page-home .home-scroll-cue{display:none!important;}}
@media (prefers-reduced-motion:reduce){main #page-home .home-scroll-cue{transition:none;}}

/* ===== Existing stylesheet: tws-version-5-10-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists | Version.5.10 focused refinements. */
/* Full-card linked Patient Rights and Notices act like linked wound cards. */
main #page-patients .patient-doc-list a[href]{
  cursor:pointer;
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
@media (hover:hover){
  main #page-patients .patient-doc-list a[href]:hover {
    background:#e7ebe2;
    border-color:#c3d0be;
    box-shadow:0 11px 25px rgba(43,65,47,.095);
    transform:translateY(-2px);
  }
}
main #page-patients .patient-doc-list a[href]:focus-visible {
  background:#e7ebe2;
  border-color:#a5bca5;
  outline:2px solid #466850;
  outline-offset:3px;
}
/* Concierge email link matches the solid evergreen CTAs elsewhere. */
main section[aria-label="Concierge wound care"] a.btn.concierge-email,
main section[aria-label="Concierge wound care"] a.btn.concierge-email:visited {
  background:#263f34!important;
  border-color:#263f34!important;
  color:#fff!important;
}
main section[aria-label="Concierge wound care"] a.btn.concierge-email:hover {
  background:#345346!important;
  border-color:#345346!important;
  color:#fff!important;
}
/* Consulting: desktop introduction no longer reserves vertical space for a CTA. */
@media (min-width:871px) {
 main section[aria-label="Clinical consulting"] .page-hero .actions {display:none!important;}
 main section[aria-label="Clinical consulting"] .page-hero {min-height:0!important;}
}
/* Homepage: preserve headline column and both container margins.
   Take ~20-25px from the image/text gap and return it to the photo's width.
   This reveals slightly more of the physician on the right, with no scaling. */
@media (min-width:1101px) {
  main #page-home .hero-grid {
    grid-template-columns:minmax(0,calc(54% - clamp(20px, 1.85vw, 26px))) minmax(0,1fr)!important;
    column-gap:clamp(21px,2vw,27px)!important;
  }
  main #page-home .hero-visual {
    width:100%!important;
    max-width:100%!important;
    overflow:hidden;
  }
  main #page-home .hero-visual img {
    object-fit:cover;
    object-position:left center;
    transform:none!important;
  }
}
main #page-home .home-scroll-cue{display:none!important;}
@media (prefers-reduced-motion:reduce) {
 main #page-patients .patient-doc-list a[href] {transition:none;}
 main #page-patients .patient-doc-list a[href]:hover {transform:none;}
}

/* ===== Existing stylesheet: tws-version-5-11-refinements.css (unchanged declaration order) ===== */
/* TWS Version.5.11 — targeted mobile typography and hero containment.
   Does not change the approved homepage photo or desktop positioning. */

/* Mobile paragraphs must never expand a grid beyond the viewport.
   A fixed-height photo previously imposed its aspect-ratio intrinsic width on
   the single-column homepage grid, visibly clipping the hero description. */
@media (max-width: 870px) {
  main #page-home .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 100%;
  }
  main #page-home .hero-grid > div,
  main #page-home .hero-visual {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  main #page-home .hero-visual img {
    display: block;
    max-width: 100%;
    width: 100%;
  }
}

/* Full readable width for mobile introductory and section descriptions.
   Allow natural multiline wrapping; don't hide the ends of paragraphs. */
@media (max-width: 590px) {
  main .page-hero .lead,
  main .image-hero .lead,
  main #page-home .hero .lead,
  main #page-home .home-resource-detail,
  main #page-home .reviews-home .section-head > p,
  main #page-home .home-conditions-section .section-head > p,
  main #page-home .doctor-home-split .lead,
  main .section-head > p {
    width: 100%;
    max-width: none !important;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: break-word;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
  main #page-home .home-resource-feature,
  main #page-home .home-resource-heading,
  main #page-home .reviews-home .section-head,
  main #page-home .doctor-home-split > div:first-child {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* These were accidentally kept at 0.74rem despite the larger mobile eyebrow scale. */
  main #page-home .home-resource-feature .eyebrow,
  main #page-home .reviews-home .section-head .eyebrow {
    font-family: var(--sans) !important;
    font-size: 0.87rem !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: .15em !important;
    text-transform: uppercase !important;
    color: #466850 !important;
  }
}

/* Intentional two-line headings in portrait, rather than arbitrary phone wraps. */
@media (max-width: 590px) and (orientation: portrait) {
  main #page-home .reviews-home .home-reviews-heading .reviews-mobile-final-line {
    display: block;
  }
  main #page-home .doctor-home-split .home-physician-final-line {
    display: block;
  }
}
/* Desktop / landscape preserve earlier line breaks and established heading scale. */
@media not all and (max-width: 590px) and (orientation: portrait) {
  main #page-home .reviews-home .home-reviews-heading .reviews-mobile-final-line {display: inline;}
  main #page-home .doctor-home-split .home-physician-final-line {display: inline;}
}

/* A restrained italic emphasizes the listening promise, not a new font or color. */
main #page-home .hero h1 .listening-emphasis {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: inherit;
}

/* Phone in landscape: same two useful direct actions as portrait.
   Keep the CTA menu on narrow desktop/tablet otherwise unchanged. */
@media (min-width: 591px) and (max-width: 1000px) and (orientation: landscape) {
  main #page-home .hero .actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
    max-width: 510px;
    width: 100%;
  }
  main #page-home .hero .actions .call-cta-mobile,
  main #page-home .hero .actions .home-email-cta-mobile {
    display: inline-flex !important;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 10px 12px;
    justify-content: center;
    background: #263f34 !important;
    border-color: #263f34 !important;
    color: #fff !important;
  }
  main #page-home .hero .actions .contact-cta-desktop {display: none !important;}
}

@media (max-width:590px) and (orientation:portrait) {
  main #page-home .reviews-home .reviews-desktop-break {display:none;}
}

/* ===== Existing stylesheet: tws-version-5-12-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists | Version.5.12
   Typography consistency, mobile layout, manual review carousel, and warm-stone contrast.
   Existing image and video assets are preserved byte-for-byte. */

/* A deeper warm-stone backdrop makes patient feedback ivory cards read distinctly.
   The sage hover/focus state for linked review cards remains unchanged. */
main #page-home .section.reviews-home,
main #page-reviews .section.care-remember-section {
  background-color:#e6ddd1!important;
}
main #page-home .reviews-home .review-card,
main #page-reviews .care-remember-section .review-card {
  background:#fcfaf6;
  border:1px solid #d9cec0;
  box-shadow:0 6px 18px rgba(41,46,35,.035);
}
@media (hover:hover){
 main #page-home .reviews-home .review-card:hover,
 main #page-reviews .care-remember-section .review-card:hover {
   background:#e7ebe2;
   border-color:#c3d0be;
 }
}
main #page-home .reviews-home .review-card:focus-within,
main #page-reviews .care-remember-section .review-card:focus-within {
  background:#e7ebe2;
  border-color:#a5bca5;
}

/* Referral reassurance should be warm stone rather than a lingering green-tinted panel. */
main #page-referrals .referral-process-assurance {
  background:#eee7dd!important;
  border-color:#d6cabb!important;
}

/* Keep text and columns precisely where they were. Expand the photo to the left,
   with the RIGHT edge anchored to the original right margin. */
@media (min-width:1101px) {
  main #page-home .hero-visual {
    margin-left:calc(-1 * clamp(12px, 1.3vw, 22px))!important;
    width:calc(100% + clamp(12px, 1.3vw, 22px))!important;
    max-width:none!important;
  }
  main #page-home .hero-visual img {
    object-position:left center!important;
    transform:none!important;
  }
}

/* The green-tinted card edges and shadows should work in phone landscape too. */
@media (min-width:591px) and (max-width:1000px) and (orientation:landscape) {
  main #page-home .home-condition-card {
    background:#fcfaf6;
    border-color:#d5e3d9;
    box-shadow:0 8px 24px rgba(29,78,58,.11),0 2px 5px rgba(29,78,58,.035);
  }
  main #page-home .home-condition-card:active {background:#e7ebe2; border-color:#c3d0be;}
  .header .nav .btn .arrow {display:none!important;}
}

/* Patient Experiences: retain three review cards in a user-controlled
   horizontal scroll on portrait phones. Never auto-advance the testimonials. */

/* One manual carousel contract. Desktop remains a three-column grid. */

main #page-home .home-review-pagination {display:none;}

@media (max-width:870px), (max-width:1000px) and (orientation:landscape) {
 main #page-home .reviews-home [data-review-rotation][data-count="3"] {
  display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:12px;
  scroll-snap-type:x mandatory;scroll-padding-inline:0;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;align-items:stretch;padding:2px 2px 15px;
 }
 main #page-home .reviews-home [data-review-rotation]::-webkit-scrollbar {display:none;}
 main #page-home .reviews-home [data-review-rotation] .review-card:not([hidden]) {
  display:flex;flex:0 0 calc(100% - 36px);width:calc(100% - 36px);min-width:0;
  min-height:230px;scroll-snap-align:start;scroll-snap-stop:always;
 }
 main #page-home .reviews-home [data-review-rotation] .review-card[hidden] {display:none;}
 main #page-home .home-review-pagination {display:flex;align-items:center;justify-content:center;gap:0;padding:0;}
 main #page-home .home-review-pagination button {
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;
  background:transparent;cursor:pointer;border-radius:50%;
 }
 main #page-home .home-review-pagination button::before {
  content:"";box-sizing:border-box;width:9px;height:9px;border:1px solid #9fafa1;border-radius:50%;
 }
 main #page-home .home-review-pagination button[aria-current="true"]::before {
  background:#466850;border-color:#466850;width:10px;height:10px;
 }
 main #page-home .home-review-pagination button:focus-visible {outline:2px solid #263f34;outline-offset:0;}
}

@media (min-width:591px) and (max-width:1000px) and (orientation:landscape) {
 main #page-home .reviews-home [data-review-rotation][data-count="3"] {gap:14px;padding:3px 3px 15px;}
 main #page-home .reviews-home [data-review-rotation] .review-card:not([hidden]) {
  flex-basis:min(78%,560px);width:min(78%,560px);min-height:220px;
 }
}

@media (prefers-reduced-motion:reduce) {
 main #page-home .reviews-home [data-review-rotation] {scroll-behavior:auto;}
}

/* Mobile viewport headings: intentional language-based line groupings. */
@media (max-width:870px) {
  main #page-home .reviews-home .home-reviews-heading .reviews-desktop-break {display:none!important;}
  main #page-home .reviews-home .home-reviews-heading .reviews-mobile-final-line {display:block!important;}

  main #page-about .about-physician-title .about-physician-final {display:block;}
}
@media (max-width:590px) and (orientation:portrait) {
  main #page-services .wound-concern-heading .wound-concern-final,
  main #page-patients .visit-options-heading .visit-options-final {display:block;}
  main #page-reviews .patient-video-heading {letter-spacing:-.037em;}
  main #page-reviews .patient-video-heading br {display:none;}
}

/* Direct-action CTAs on portrait phone: side by side, identical forest color. */
@media (max-width:590px) and (orientation:portrait) {
  main section[aria-label="Concierge wound care"] .page-hero .actions,
  main section[aria-label="Clinical consulting"] .page-hero .actions,
  main #page-about .about-care-cta .actions {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
    gap:10px;
    width:100%;
  }
  main section[aria-label="Concierge wound care"] .page-hero .actions a.btn,
  main section[aria-label="Clinical consulting"] .page-hero .actions a.btn,
  main #page-about .about-care-cta .actions a.btn {
    display:inline-flex!important;
    width:100%;min-width:0;
    padding:10px 8px;
    min-height:48px;
    justify-content:center;
    background:#263f34!important;
    border:1px solid #263f34!important;
    color:#fff!important;
  }
  main section[aria-label="Concierge wound care"] .page-hero .actions a.contact-cta-desktop,
  main #page-about .about-care-cta .actions a.contact-cta-desktop {display:none!important;}
}

/* The emergency notice uses one discreet red label only. */
main #page-contact .contact-info-emergency > strong { color:#a4433d!important; }
/* Match arrow/no-arrow treatment between Concierge desktop buttons. */
main section[aria-label="Concierge wound care"] .page-hero .actions .link-arrow {display:none!important;}
@media (max-width:1000px) and (orientation:landscape) {
 main #page-about .about-care-cta .actions {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 main #page-about .about-care-cta .actions .contact-cta-desktop {display:none!important;}
 main #page-about .about-care-cta .actions .call-cta-mobile,
 main #page-about .about-care-cta .actions .about-email-mobile {
  display:inline-flex!important;justify-content:center;width:100%;min-width:0;
  background:#263f34!important;border-color:#263f34!important;color:#fff!important;
 }
}
/* Phones in landscape up to 1000px should retain the requested deliberate title wraps. */
@media (min-width:871px) and (max-width:1000px) and (orientation:landscape) {
  main #page-home .reviews-home .home-reviews-heading .reviews-desktop-break{display:none!important;}
  main #page-home .reviews-home .home-reviews-heading .reviews-mobile-final-line{display:block!important;}
  main #page-about .about-physician-title .about-physician-final{display:block;}
}

/* ===== Existing stylesheet: tws-version-5-13-refinements.css (unchanged declaration order) ===== */
/* TWS Version.5.13 — editorial heading motion, responsive image framing, and refined cards. */
/* Desktop: preserve the same left text column and right page boundary. The
   frame becomes slightly shorter so more of the source photo fits horizontally. */
@media (min-width:1101px) {
 main #page-home .hero-visual {
   margin-left:calc(-1 * clamp(17px,1.75vw,27px))!important;
   width:calc(100% + clamp(17px,1.75vw,27px))!important;
   max-width:none!important;
   height:clamp(390px,28.5vw,410px)!important;
 }
 main #page-home .hero-visual img {
   object-fit:cover!important;
   object-position:left center!important;
   transform:none!important;
 }
}
/* Mobile landscape: show the complete approved photograph, with no crop.
   Keep the existing portrait-phone framing untouched. */
@media (min-width:591px) and (max-width:1000px) and (orientation:landscape) {
 main #page-home .hero-grid {grid-template-columns:minmax(0,1fr)!important;gap:24px!important;}
 main #page-home .hero-grid>div:first-child {width:100%;min-width:0;}
 main #page-home .hero-visual {
   width:min(100%,750px)!important;
   max-width:100%!important;
   height:auto!important;
   aspect-ratio:1672 / 941;
   margin:0 auto!important;
 }
 main #page-home .hero-visual img {
   object-fit:contain!important;
   object-position:center center!important;
   transform:none!important;
 }
}
/* Treat the emergency notice like every other practice-information card;
   the label itself retains its muted-red text emphasis. */
main #page-contact .contact-info-emergency {
 background:#fff!important;
 border-color:var(--line)!important;
}
/* Numbered What-to-expect titles match the clean DM Sans wound-care cards. */
main #page-patients .steps .step h3 {
 font-family:var(--sans)!important;
 font-size:clamp(1.13rem,1.45vw,1.24rem)!important;
 font-style:normal!important;
 font-weight:700!important;
 letter-spacing:-.016em!important;
 line-height:1.32!important;
}
@media(max-width:590px){ main #page-patients .steps .step h3{font-size:1.13rem!important;} }
@media(prefers-reduced-motion:reduce){
 main #page-home .hero h1 .listening-emphasis {animation:none!important;}
}

/* Desktop-only intentional hero title line breaks.
   Preserve the original inline reading order on tablet and mobile. */
@media (min-width:1001px) {
  main section[aria-label="Clinical consulting"] .page-hero h1 .consulting-hero-team,
  main section[aria-label="Concierge wound care"] .page-hero h1 .concierge-hero-second-line { display:block; }
}

/* Contact Us form: keep the emergency instruction on its own line on all screens. */
main #page-contact .contact-form-emergency-notice span { display:block; }
main #page-contact .contact-form-emergency-notice span + span { margin-top:5px; }

/* ===== Existing stylesheet: tws-version-5-14-refinements.css (unchanged declaration order) ===== */
/* The Wound Specialists | Version.5.14
   CSS-only landscape-hero presentation and consistent portrait-phone homepage headings.
   Leaves original photograph, tablet, desktop and portrait-photo framing unchanged. */

/* Mobile landscape: pair the approved image with the introduction instead of
   making the wide photograph consume an entire second viewport-height panel.
   Keep the original complete image visible with no enlargement or face cropping. */
@media (min-width: 591px) and (max-width: 1000px) and (orientation: landscape) {
  main #page-home .hero-grid {
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr) !important;
    align-items: center !important;
    gap: clamp(20px, 3.2vw, 32px) !important;
    padding-top: clamp(34px, 6vh, 52px) !important;
    padding-bottom: clamp(42px, 7vh, 62px) !important;
  }
  main #page-home .hero-grid > div:first-child {
    min-width: 0 !important;
    width: 100%;
  }
  main #page-home .hero .eyebrow {
    margin-bottom: 12px;
  }
  main #page-home .hero h1 {
    font-size: clamp(1.9rem, 4vw, 2.5rem) !important;
    line-height: 1.14 !important;
    max-width: 100%;
    margin-bottom: 14px;
  }
  main #page-home .hero .lead {
    max-width: 100% !important;
    font-size: clamp(.9rem, 1.7vw, 1rem) !important;
    line-height: 1.55 !important;
  }
  main #page-home .hero .actions {
    margin-top: 20px;
    max-width: 100%;
  }
  main #page-home .hero-visual {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 1672 / 941;
    padding: 7px !important;
    margin: 0 !important;
    align-self: center;
    min-width: 0 !important;
  }
  main #page-home .hero-visual img {
    display: block;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}

/* Narrow landscape phones retain a single-column introduction, with a
   contained, centered image instead of a landscape-spanning oversized frame. */
@media (min-width: 591px) and (max-width: 735px) and (orientation: landscape) {
  main #page-home .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }
  main #page-home .hero-visual {
    width: min(100%, 560px) !important;
    max-width: 100% !important;
    margin-inline: auto !important;
  }
}

/* Portrait-phone: a single consistent editorial size across all five
   homepage section titles. Older Version 4 and later Version 5 overrides
   inadvertently introduced several different scales. */
@media (max-width: 590px) and (orientation: portrait) {
  /* Homepage portrait hero: editorial reading order.
     Display contents exposes the existing intro children to the hero grid
     without duplicating content or changing desktop/landscape markup. */
  main #page-home .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  main #page-home .hero-grid > div:first-child {
    display: contents;
  }
  main #page-home .hero-grid .eyebrow {
    grid-row: 1;
    margin-bottom: 14px;
  }
  main #page-home .hero-grid h1 {
    grid-row: 2;
    margin-bottom: 23px;
  }
  main #page-home .hero-grid > .hero-visual {
    grid-row: 3;
    margin-bottom: 24px;
  }
  main #page-home .hero-grid .lead {
    grid-row: 4;
    margin: 0 0 22px;
  }
  main #page-home .hero-grid .actions {
    grid-row: 5;
    margin-top: 0;
  }

  /* Concierge portrait hero: match the approved homepage reading order.
     Preserve the existing breadcrumb, heading, image, copy, and CTAs. */
  main section[aria-label="Concierge wound care"] .image-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    align-items: start;
  }
  main section[aria-label="Concierge wound care"] .image-hero-grid > div:first-child {
    display: contents;
  }
  main section[aria-label="Concierge wound care"] .image-hero-grid .breadcrumb {
    grid-row: 1;
    margin-bottom: 18px;
  }
  main section[aria-label="Concierge wound care"] .image-hero-grid .eyebrow {
    grid-row: 2;
    margin-bottom: 14px;
  }
  main section[aria-label="Concierge wound care"] .image-hero-grid h1 {
    grid-row: 3;
    margin-bottom: 23px;
  }
  main section[aria-label="Concierge wound care"] .image-hero-grid > .concierge-visit-photo {
    grid-row: 4;
    width: 100%;
    margin: 0 0 24px;
  }
  main section[aria-label="Concierge wound care"] .image-hero-grid .lead {
    grid-row: 5;
    margin: 0 0 22px;
  }
  main section[aria-label="Concierge wound care"] .image-hero-grid .actions {
    grid-row: 6;
    margin-top: 0;
  }

  /* Wound Care portrait hero: preserve the existing photograph and copy,
     but present the image immediately below the heading as on the other
     approved mobile-portrait page heroes. No desktop/landscape changes. */
  main #page-services .page-hero .image-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    align-items: start;
  }
  main #page-services .page-hero .image-hero-grid > div:first-child {
    display: contents;
  }
  main #page-services .page-hero .image-hero-grid .breadcrumb {
    grid-row: 1;
    margin-bottom: 18px;
  }
  main #page-services .page-hero .image-hero-grid .eyebrow {
    grid-row: 2;
    margin-bottom: 14px;
  }
  main #page-services .page-hero .image-hero-grid h1 {
    grid-row: 3;
    margin-bottom: 23px;
  }
  main #page-services .page-hero .image-hero-grid > .service-photo {
    grid-row: 4;
    width: 100%;
    margin: 0 0 24px;
  }
  main #page-services .page-hero .image-hero-grid .lead {
    grid-row: 5;
    margin: 0;
  }

  /* Resources portrait hero: show the existing education photograph before
     the introduction, matching the approved homepage and concierge sequence.
     No content duplication or changes to landscape/desktop. */
  main #page-resources .resources-hero .image-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    align-items: start;
  }
  main #page-resources .resources-hero .image-hero-grid > div:first-child {
    display: contents;
  }
  main #page-resources .resources-hero .image-hero-grid .breadcrumb {
    grid-row: 1;
    margin-bottom: 18px;
  }
  main #page-resources .resources-hero .image-hero-grid .eyebrow {
    grid-row: 2;
    margin-bottom: 14px;
  }
  main #page-resources .resources-hero .image-hero-grid h1 {
    grid-row: 3;
    margin-bottom: 23px;
  }
  main #page-resources .resources-hero .image-hero-grid > .service-photo {
    grid-row: 4;
    width: 100%;
    margin: 0 0 24px;
  }
  main #page-resources .resources-hero .image-hero-grid .lead {
    grid-row: 5;
    margin: 0;
  }

  /* Approved two-line patient-experiences title: 
     What our patients / have to say. */
  main #page-home .reviews-home .home-reviews-heading .reviews-desktop-break {
    display: none !important;
  }
  main #page-home .reviews-home .home-reviews-heading .reviews-mobile-final-line {
    display: block !important;
  }
}


/* ===== Version 5.15 | Focused refinements ===== */
/* Contact acknowledgment: explicitly override the generic grid form label
   and full-width text input rule. The checkbox sits at the first text line. */
#page-contact .office-contact-form label.contact-form-acknowledgment {
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  gap:11px !important;
  font-weight:500;
  letter-spacing:0;
  line-height:1.45;
  cursor:pointer;
}
#page-contact .office-contact-form label.contact-form-acknowledgment > input[type="checkbox"] {
  display:block;
  flex:0 0 18px;
  width:18px !important;
  min-width:18px;
  height:18px !important;
  margin:2px 0 0;
  padding:0 !important;
  border-radius:3px;
  box-shadow:none;
  accent-color:#466850;
  cursor:pointer;
}
#page-contact .office-contact-form label.contact-form-acknowledgment > span {
  display:block;
  flex:1 1 auto;
  min-width:0;
  color:#b42318;
  font-size:.82rem;
  font-weight:500;
}
#page-contact .office-contact-form label.contact-form-acknowledgment > input[type="checkbox"]:checked + span,
#page-contact .office-contact-form label.contact-form-acknowledgment:has(input:checked) > span {
  color:#52625b;
}
#page-contact .office-contact-form label.contact-form-acknowledgment > span b {
  color:inherit;
  font-weight:800;
}
#page-contact .office-contact-form label.contact-form-acknowledgment:focus-within > input[type="checkbox"] {
  outline:2px solid #466850;
  outline-offset:3px;
}
/* Landscape phones: use the same manually controlled scroll-snap review deck
   as portrait. A peek of the next card makes the horizontal action discoverable. */

/* Mobile landscape: match the shared homepage section-heading scale
   regardless of pointer detection, including external previews and non-touch devices.
   Earlier standalone testimonial overrides were 20-30% smaller. */


/* ===== Hero title motion | Option B+, refined homepage sequence =====
   All hero headings rise 16px over 2s and fade over 1.7s.
   Homepage: rise applies to the full headline, but its two text fragments
   fade independently to prevent parent opacity from weakening the delay.
   Listening starts its 1.7s fade after 1.5s. Layout remains reserved. */
@keyframes tws-page-heading-soft-arrive {
  from { transform:translate3d(0,16px,0); }
  to   { transform:translate3d(0,0,0); }
}
@keyframes tws-page-heading-soft-fade {
  from { opacity:0; }
  to   { opacity:1; }
}
@media screen and (prefers-reduced-motion:no-preference) {
  main .page-hero h1,
  main #page-home .hero h1 {
    -webkit-mask-image:none!important;
    mask-image:none!important;
    clip-path:none!important;
  }
  main .page-hero h1 {
    animation:tws-page-heading-soft-arrive 2s cubic-bezier(.18,.7,.2,1) both, tws-page-heading-soft-fade 1.7s cubic-bezier(.4,0,.2,1) both!important;
  }
  main #page-home .hero h1 {
    animation:tws-page-heading-soft-arrive 2s cubic-bezier(.18,.7,.2,1) both!important;
  }
  main #page-home .hero h1 .hero-opening-phrase {
    animation:tws-page-heading-soft-fade 1.7s cubic-bezier(.4,0,.2,1) both;
  }
  main #page-home .hero h1 .listening-emphasis {
    animation:tws-page-heading-soft-fade 1.7s cubic-bezier(.4,0,.2,1) 1.5s both;
  }
}
@media (prefers-reduced-motion:reduce), print {
  main .page-hero h1,
  main #page-home .hero h1 {
    animation:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    clip-path:none!important;
    opacity:1!important;
    transform:none!important;
  }
  main #page-home .hero h1 .hero-opening-phrase,
  main #page-home .hero h1 .listening-emphasis {
    animation:none!important;
    opacity:1!important;
  }
}

/* Scroll-heading movement is triggered through Web Animations in
   tws-title-motion.js. No persistent transform or transition is assigned here:
   this avoids Safari portrait repaint/viewport-threshold jumps. Hero unchanged. */

/* Patient video disclaimer is preserved in its original position on desktop
   and landscape; only mobile portrait shows the duplicate beneath the player. */
main #page-reviews .patient-video-disclaimer-mobile {display:none;}
@media (max-width:590px) and (orientation:portrait) {
  main #page-reviews .patient-video-disclaimer-desktop {display:none!important;}
  main #page-reviews .patient-video-disclaimer-mobile {
    display:block;
    margin:13px 0 0;
    font-family:var(--sans);
    font-size:.82rem;
    line-height:1.5;
    color:var(--body);
  }
  main #page-reviews .patient-video-heading {
    letter-spacing:-.037em!important;
    max-width:100%;
  }
  main #page-reviews .patient-video-heading br {display:inline!important;}
  /* Responsive hierarchy: normalize accidental undersizing in earlier
     mobile-only rules without changing established desktop typography. */
  /* Your Visit H1 must retain the same dominant mobile-page hero hierarchy
     as other interior H1 titles (rather than the smaller section-H2 scale). */
  main #page-contact .section h2 {
    font-size:clamp(1.92rem,7.15vw,2.12rem)!important;
    line-height:1.19!important;
  }
}

/* Landscape phone: gently rounded photograph, but no ornamental outer frame. A slight centered enlargement
   retains the approved image, hero position, crop and grid breakpoint. */
@media (min-width:591px) and (max-width:1000px) and (orientation:landscape) {
  main #page-home .hero-visual {
    padding:0!important;
    border:0!important;
    border-radius:9px!important;
    overflow:hidden!important;
    box-shadow:none!important;
    background:transparent!important;
    transform:scale(1.055)!important;
    transform-origin:center center!important;
  }
  main #page-home .hero-visual img {
    border:0!important;
    border-radius:9px!important;
    width: 85.705741627% !important;
    height: auto !important;
    margin-inline: auto;
  }
}


/* Diabetic foot guide 5.19.2bd — scoped editorial treatment; reuses established guide-layout/guide-nav. */
.dfw-guide .dfw-hero { background:linear-gradient(115deg,#f0eee8 0%,#f8f6f0 75%); }
.dfw-guide .dfw-hero h1 { max-width:1000px; }
.dfw-guide .dfw-subtitle { font:400 clamp(1.4rem,2.7vw,2.15rem)/1.24 var(--serif);color:var(--navy);margin:8px 0 20px; }
.dfw-guide .dfw-hero-secondary { max-width:740px;color:#43544e; }
.dfw-guide .dfw-body { background:#fff; }
.dfw-guide .guide-layout { grid-template-columns:245px minmax(0,1fr);gap:clamp(35px,5vw,82px);align-items:start; }
.dfw-guide .guide-nav { top:112px;gap:0;padding:23px 18px;max-height:calc(100vh - 130px);overflow-y:auto;background:#f1f3ef; }
.dfw-guide .guide-nav .eyebrow { padding:0 9px 12px; }
.dfw-guide .guide-nav a { display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;gap:8px;padding:10px 9px;font-size:.85rem;line-height:1.45;border:0;border-left:2px solid transparent;border-radius:2px; }
.dfw-guide .guide-nav a span { font-size:.72rem;color:#61776d;font-weight:700;padding-top:2px; }
.dfw-guide .guide-nav a[aria-current="location"] { border-left-color:#386c55;background:#e3ebe3;color:#163f32;font-weight:700; }
.dfw-guide .guide-nav a:hover,.dfw-guide .guide-nav a:focus-visible { background:#e7eee6;text-decoration:none; }
.dfw-guide .guide-content { min-width:0; }
.dfw-guide .guide-section { scroll-margin-top:125px;margin-bottom:54px;padding-bottom:50px; }
.dfw-guide .guide-section h2 { font-size:clamp(2rem,3.1vw,3.1rem);line-height:1.18;max-width:850px; }
.dfw-guide .guide-section h3 { font:500 clamp(1.3rem,1.9vw,1.62rem)/1.25 var(--serif);color:var(--navy);margin:29px 0 10px; }
.dfw-guide .guide-section p,.dfw-guide .dfw-conclusion p { line-height:1.75;max-width:72ch; }
.dfw-guide .guide-section ul { max-width:72ch;padding-left:23px;line-height:1.7; }
.dfw-guide .guide-section li { padding:4px 0; }
.dfw-guide .dfw-note { margin:30px 0 0;padding:20px 25px;border-left:3px solid #648a73;background:#eff3ee;max-width:760px; }
.dfw-guide .dfw-note strong { display:block;font-family:var(--serif);font-size:1.22rem;color:var(--navy); }
.dfw-guide .dfw-note p { margin:7px 0 0; }
.dfw-guide .dfw-figure { margin:29px 0 30px;max-width:780px; }
.dfw-guide .dfw-figure img { display:block;width:100%;height:auto;border:1px solid #e5e8e1;border-radius:8px;background:#f5f7f3; }
.dfw-guide .dfw-figure figcaption { margin-top:9px;color:#53675d;font-size:.82rem;line-height:1.55; }
.dfw-guide .dfw-urgent { margin:30px 0;padding:22px 26px;background:#f7f0e9;border-left:3px solid #a87c50;border-radius:2px; }
.dfw-guide .dfw-urgent h3 { margin-top:0; }
.dfw-guide .dfw-urgent p:last-child { margin-bottom:0; }
.dfw-guide .dfw-faq details { border-bottom:1px solid var(--line);padding:0; }
.dfw-guide .dfw-faq details:first-of-type { border-top:1px solid var(--line); }
.dfw-guide .dfw-faq summary { cursor:pointer;padding:19px 36px 19px 0;font-weight:650;color:var(--navy);line-height:1.4;position:relative;list-style:none; }
.dfw-guide .dfw-faq summary::-webkit-details-marker { display:none; }
.dfw-guide .dfw-faq summary::after { content:'+';position:absolute;right:8px;top:15px;font-size:1.3rem;font-weight:400; }
.dfw-guide .dfw-faq details[open] summary::after { content:'−'; }
.dfw-guide .dfw-faq details p { margin:0 20px 21px 0; }
.dfw-guide .dfw-conclusion { margin-bottom:35px; }
.dfw-guide .dfw-conclusion h2 { font-size:clamp(1.8rem,2.5vw,2.7rem);margin-bottom:15px; }
.dfw-guide .dfw-mobile-jump { display:none; }
@media(max-width:900px) { .dfw-guide .guide-layout { grid-template-columns:1fr; } .dfw-guide .dfw-desktop-nav { display:none; } .dfw-guide .dfw-mobile-jump { display:block;margin:0 0 32px;background:#f1f3ef;border-radius:6px;padding:0 20px; } .dfw-guide .dfw-mobile-jump summary { padding:17px 30px 17px 0;cursor:pointer;font-weight:700;color:var(--navy);position:relative;list-style:none; } .dfw-guide .dfw-mobile-jump summary::-webkit-details-marker { display:none; } .dfw-guide .dfw-mobile-jump summary::after { content:'+';position:absolute;right:0;top:14px;font-size:1.3rem; } .dfw-guide .dfw-mobile-jump[open] summary::after { content:'−'; } .dfw-guide .dfw-mobile-jump nav { display:grid;padding:0 0 15px; } .dfw-guide .dfw-mobile-jump nav a { display:block;padding:9px 0;border-top:1px solid #dbe3da;color:var(--navy);text-decoration:none; } }
@media(max-width:600px) { .dfw-guide .guide-section h2 { font-size:clamp(1.8rem,8vw,2.35rem); } .dfw-guide .guide-section { margin-bottom:37px;padding-bottom:34px; } .dfw-guide .dfw-note,.dfw-guide .dfw-urgent { padding:18px; } .dfw-guide .dfw-hero .lead { font-size:1.05rem; } }
@media(prefers-reduced-motion:no-preference) { .dfw-guide { scroll-behavior:smooth; } html:has(.dfw-guide) { scroll-behavior:smooth; } }
@media print { .dfw-guide .dfw-desktop-nav,.dfw-guide .dfw-mobile-jump { display:none; } .dfw-guide .guide-layout { display:block; } .dfw-guide .dfw-faq details:not([open]) p { display:block; } }