/* Chucky Law — native adaptations of reviewed 21st patterns, September 2026.
   Sources and omitted dependencies: reviews/21st-implementation-2026-09-10.
   Reuse the approved daylight palette and existing serif/sans pairing. */

/* Vertical Tabs / 0xUrvish: ruled service navigation with a real current route. */
.service-view .view-wrap { max-width: 1320px; }
.service-layout { display: grid; grid-template-columns: minmax(220px,.75fr) minmax(0,2fr); gap: clamp(36px,5vw,76px); align-items: start; margin-top: 30px; }
.service-directory { position: sticky; top: calc(var(--consultation-offer-height,0px) + 82px); min-width: 0; }
.service-menu { border: 0; background: none; color: var(--day-ink); }
.service-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; padding: 0 0 18px; border-bottom: 2px solid var(--gold-deep); font: 700 .7rem/1.5 var(--sans); text-transform: uppercase; letter-spacing: .12em; cursor: pointer; list-style: none; }
.service-menu > summary::-webkit-details-marker { display: none; }
.service-toggle { font: 400 1.3rem/1 var(--sans); }
.service-menu[open] .service-toggle { transform: rotate(45deg); }
.service-menu nav { display: block; position: static; padding: 10px 0 0; margin: 0; border: 0; background: none; box-shadow: none; }
.service-menu nav a { display: grid; grid-template-columns: 20px minmax(0,1fr) 15px; align-items: start; gap: 10px; min-height: 54px; padding: 17px 0; border-bottom: 1px solid var(--day-rule); color: var(--day-muted); font: 400 1.06rem/1.35 var(--editorial); text-decoration: none; }
.service-index { padding-top: 3px; font: 500 .64rem/1.5 var(--sans); color: var(--day-muted); }
.service-arrow { color: var(--burgundy); font: 400 1rem/1.2 var(--sans); }
.service-menu nav a[aria-current="page"] { color: var(--burgundy); font-weight: 500; box-shadow: -3px 0 var(--burgundy); padding-left: 12px; margin-left: -12px; }
.service-menu nav a[aria-current="page"] .service-index { color: var(--burgundy); }
.service-menu nav a.service-separate { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--gold-deep); }
.service-menu nav a:hover { color: var(--burgundy); background: var(--day-paper); }
.service-menu summary:focus-visible, .service-menu a:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
.service-copy { min-width: 0; }
.service-copy .view-head { display: grid; grid-template-columns: 200px minmax(0,1fr); margin-top: 0; gap: 24px; }
.service-copy .view-head img { width: 200px; height: 150px; object-fit: cover; }
.service-copy .view-head h2 { min-width: 0; font-size: clamp(2.6rem,3.8vw,4rem); overflow-wrap: normal; }
.service-copy .view-head:not(:has(img)) { grid-template-columns: minmax(0,1fr); }
.service-copy .lede { font-size: 1.08rem; line-height: 1.75; }
.service-copy .practice-detail-info { background: var(--day-paper); border: 0; border-top: 2px solid var(--gold-deep); padding: 30px; gap: 26px; }
.service-copy .practice-detail-info h3 { font-size: 1.6rem; }
.service-copy .view-ctas { padding-top: 20px; border-top: 1px solid var(--day-rule); }
.service-copy .view-ctas .btn { font-size: .72rem; padding: 16px 20px; }
.service-view[data-view="probate"] .service-copy { padding: 28px 32px; background: var(--day-paper); border-top: 2px solid var(--gold-deep); }

/* Scroll 01 / felipemenezes098: native DOM order follows the phone story.
   journey.js moves the existing second portrait, never duplicates the asset. */
@media (max-width: 700px) {
  .journey-story .brenda .portrait-scene { padding: 0; margin: 0 0 32px; max-width: 270px; }
  .journey-story .brenda .portrait-scene .polaroid:first-child img { aspect-ratio: 4/5; object-position: 44% 35%; }
  .brenda .story-beats > .polaroid.two { position: relative; inset: auto; width: 82%; margin: 4px 0 40px auto; border: 0; padding: 0; background: transparent; }
  .brenda .story-beats > .polaroid.two img { aspect-ratio: 4/5; object-position: 50% 66%; width: 100%; height: auto; }
  .brenda .story-beats > .polaroid.two .cap { padding: 14px 0 0; border: 0; color: var(--burgundy); font: italic 400 1.35rem/1.35 var(--editorial); }
}

/* Timeline / nyxbui: list semantics, connected markers, full wrapping headings.
   No statuses, completion claims, truncation or animation runtime. */
.client-guide > .wrap { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 30px clamp(40px,7vw,100px); align-items: start; }
.client-guide .section-jump-links { grid-column: 1/-1; margin-bottom: 0; }
.guide-grid.reading-timeline { display: block; list-style: none; margin: 0; padding: 0; }
.guide-grid.reading-timeline > li { display: grid; grid-template-columns: 36px minmax(0,1fr); column-gap: 24px; position: relative; padding: 0 0 34px; margin: 0; border: 0; }
.guide-grid.reading-timeline > li::before { content: ""; position: absolute; width: 1px; background: var(--day-rule); top: 40px; bottom: 4px; left: 17px; }
.guide-grid.reading-timeline > li:last-child { padding-bottom: 0; }
.guide-grid.reading-timeline > li:last-child::before { display: none; }
.reading-timeline .guide-number { grid-column: 1; grid-row: 1/3; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; border: 1px solid var(--gold-deep); border-radius: 50%; color: var(--burgundy); font: 500 .73rem/1 var(--sans); }
.guide-grid.reading-timeline h3, .guide-grid.reading-timeline p { grid-column: 2; }
.guide-grid.reading-timeline h3 { margin: 2px 0 14px; font-size: 1.8rem; }
.guide-grid.reading-timeline p { margin: 0; }
#how > .wrap:nth-of-type(2) { display: grid; grid-template-columns: minmax(0,.75fr) minmax(0,1.3fr); align-items: start; gap: 28px 70px; }
#how .reading-timeline { display: block; list-style: none; padding: 0 0 0 50px; margin: 0; }
#how .reading-timeline .station { position: relative; min-width: 0; overflow: visible; margin: 0; padding: 0 0 46px 24px; border: 0; border-left: 1px solid var(--day-rule); border-radius: 0; box-shadow: none; background: transparent; }
#how .reading-timeline .station:last-child { padding-bottom: 0; border-left-color: transparent; }
#how .station::before, #how .station::after, #how .st-mark::after { display: none; }
#how .reading-timeline .st-mark { position: absolute; left: -19px; top: 0; opacity: 1; transform: none; width: 36px; height: 36px; background: var(--day-ivory); border: 1px solid var(--gold-deep); color: var(--burgundy); box-shadow: none; border-radius: 50%; font: 500 .85rem/1 var(--sans); }
#how .reading-timeline .st-mark b { font: inherit; }
#how .station h3 { font: 400 1.9rem/1.16 var(--editorial); text-transform: none; letter-spacing: -.02em; margin: 0 0 18px; }
#how .station p { font-size: 1rem; line-height: 1.8; }
#how .station .hand { font: italic 400 1.3rem/1.4 var(--editorial); margin-top: 18px; }
#how .station .tl-stamp { display: inline-block; position: static; transform: none; opacity: 1; padding: 16px 22px; margin: 22px 0 0; font: 600 .75rem/1.4 var(--sans); color: var(--burgundy); border: 1px solid var(--gold-deep); border-radius: 0; background: var(--day-paper); box-shadow: none; }
#how .section-jump-links { grid-column: 2; margin-bottom: 0; }

/* Native disclosures: consistent editorial rows on both FAQ surfaces. */
.home-faq > .wrap { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.2fr); gap: 30px 70px; align-items: start; }
.home-faq .section-jump-links { grid-column: 2; margin: 0; }
#know .know-grid { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: 65px; }
#know .checkcard { border: 0; border-top: 2px solid var(--gold-deep); border-radius: 0; padding: 30px; }
#know .checkcard h3 { font: 400 1.9rem/1.15 var(--editorial); text-transform: none; letter-spacing: -.02em; }
#know .faq { padding: 0; gap: 0; background: transparent; }
#know .faq details, .home-faq .faq details { border: 0; border-top: 1px solid var(--day-rule); border-radius: 0; background: transparent; }
#know .faq details:last-child, .home-faq .faq details:last-child { border-bottom: 1px solid var(--day-rule); }
#know .faq summary, .home-faq .faq summary { display: flex; justify-content: space-between; align-items: start; gap: 22px; min-height: 64px; padding: 24px 0; color: var(--day-ink); font: 400 1.35rem/1.3 var(--editorial); list-style: none; }
#know .faq summary::-webkit-details-marker { display: none; }
#know .faq summary::after, .home-faq .faq summary::after { content: "+"; flex: none; width: 24px; color: var(--burgundy); font: 400 1.4rem/1 var(--sans); }
#know .faq details[open] summary::after, .home-faq .faq details[open] summary::after { content: "−"; }
#know .faq details[open] summary, .home-faq .faq details[open] summary { color: var(--burgundy); }
#know .faq details > div, .home-faq .faq details > div { padding: 0 34px 26px 0; font: 400 .96rem/1.8 var(--sans); color: var(--day-muted); }
.faq summary:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }

/* Retain native controls; use fieldsets to make the callback form easier to scan. */
#caseForm .form-group { min-width: 0; padding: 24px 0 0; margin: 26px 0 0; border: 0; border-top: 1px solid var(--day-rule); }
#caseForm .form-group legend { padding-right: 16px; color: var(--burgundy); font: 400 1.3rem/1.3 var(--editorial); }
#caseForm .form-group .form-row { margin: 0; }
#caseForm input:focus-visible, #caseForm select:focus-visible, #caseForm textarea:focus-visible { border-color: var(--burgundy); outline: 2px solid var(--burgundy); outline-offset: 3px; }
#caseForm button[type="submit"] { width: 100%; justify-content: center; margin-top: 28px; }
#caseForm .form-lead { margin-bottom: 0; }

@media (max-width: 1050px) {
  .service-layout { grid-template-columns: 220px minmax(0,1fr); gap: 36px; }
  .service-copy .view-head { display: block; }
  .service-copy .view-head img { width: 100%; height: 180px; margin-bottom: 24px; }
  .service-copy .practice-detail-info { grid-template-columns: 1fr; }
  #how > .wrap:nth-of-type(2) { gap: 26px 36px; }
  #know .know-grid, .home-faq > .wrap { gap: 28px 36px; }
}
@media (max-width: 760px) {
  .service-layout { display: flex; flex-direction: column; gap: 30px; margin-top: 20px; }
  .service-directory { position: static; width: 100%; }
  .service-menu > summary { padding: 16px 0; border-block: 1px solid var(--day-rule); min-height: 54px; }
  .service-menu nav { padding: 0 12px; background: var(--day-paper); }
  .service-menu nav a { min-height: 52px; }
  .service-copy .view-head img { height: auto; aspect-ratio: 2.6; }
  .service-copy .view-head h2 { font-size: clamp(2.4rem,8vw,3.6rem); overflow-wrap: break-word; }
  .service-copy .practice-detail-info { padding: 24px 20px; }
  .service-view[data-view="probate"] .service-copy { padding: 24px 20px; }
  .client-guide > .wrap, .home-faq > .wrap, #how > .wrap:nth-of-type(2) { display: block; }
  .guide-grid.reading-timeline > li { column-gap: 18px; padding-bottom: 30px; }
  .guide-grid.reading-timeline h3 { font-size: 1.6rem; }
  #how .reading-timeline { margin-top: 36px; padding-left: 20px; }
  #how .reading-timeline .station { padding-left: 30px; }
  #how .station h3 { font-size: 1.75rem; }
  #how .section-jump-links { margin-top: 36px; }
  #know .know-grid { display: block; }
  #know .checkcard { margin-bottom: 32px; padding: 24px; }
  #know .faq summary, .home-faq .faq summary { font-size: 1.25rem; }
  .home-faq .section-jump-links { margin-top: 28px; }
  #caseForm .form-group { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .service-toggle { transition: none; }
}