/*
 * AVEN compositions built from Pattern Index Enterprise blocks.
 * Source system: mxmsmnv/pattern-index-enterprise (blocks and complete pages).
 * This layer maps the portable components to AVEN brand tokens and content.
 */

.pattern-compose { background: var(--su-surface); color: var(--su-ink); }
.site-header .header-cta { border-color: #fff; color: #fff; }

.compose-hero {
  display: grid;
  min-height: 540px;
  grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
  background: var(--su-surface-muted);
}
.compose-hero > img { width: 100%; height: 100%; min-height: 540px; object-fit: cover; }
.compose-copy { display: flex; max-width: 720px; padding: clamp(48px, 7vw, 100px); align-self: center; flex-direction: column; align-items: flex-start; }
.service-hero-copy.compose-copy { max-width: none; padding-inline: 0; }
.compose-copy h1 { max-width: 12ch; margin: 14px 0 20px; font: 700 clamp(42px, 5vw, 72px)/1.02 var(--su-font-slab); letter-spacing: -.045em; }
.compose-copy > p:not(.eyebrow) { max-width: 42ch; margin: 0 0 28px; color: var(--su-muted); font-size: 18px; line-height: 1.55; }
.home-hero-grid.compose-hero { background: transparent; }
.home-hero-grid.compose-hero { grid-template-columns: minmax(0, 1.18fr) minmax(420px, .82fr); }
.home-hero-copy.compose-copy { max-width: none; padding: clamp(52px, 5vw, 78px) 0; }
.home-hero .compose-copy h1 { max-width: 900px; }
.home-hero .compose-copy > p:not(.eyebrow) { color: #e0ebf0; }

.compose-quick {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(var(--aven-max), calc(100% - (2 * var(--aven-gutter))));
  margin: -34px auto 0;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--su-border);
  border-radius: var(--su-radius-card);
  overflow: hidden;
  box-shadow: var(--su-shadow-card);
}
.compose-quick a { position: relative; display: grid; min-height: 116px; padding: 22px; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border-right: 1px solid var(--su-border); background: var(--su-surface); color: var(--su-ink); font-weight: 700; text-decoration: none; }
.compose-quick a:last-child { border-right: 0; }
.compose-quick a > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--su-surface-muted); color: var(--su-link); font-size: 13px; }
.compose-quick a > b { color: var(--su-action); }
.compose-quick a:focus-visible { background: var(--aven-navy); color: #fff; }

.compose-intro { max-width: 900px; margin: 0 auto; padding: 110px 28px 88px; text-align: center; }
.compose-intro small, .compose-section-head small, .compose-feature small, .compose-cta small { color: var(--su-link); font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.compose-intro h2, .compose-section-head h2, .compose-feature h2, .compose-cta h2 { margin: 12px 0 18px; font: 700 clamp(32px, 4vw, 50px)/1.08 var(--su-font-slab); letter-spacing: -.035em; }
.compose-intro p { max-width: 70ch; margin: 0 auto; color: var(--su-muted); font-size: 18px; line-height: 1.6; }

.compose-section { padding: 84px 0; background: var(--su-surface-muted); }
.compose-section-head { max-width: 700px; margin-bottom: 38px; }
.compose-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.compose-card { overflow: hidden; border: 1px solid var(--su-border); border-radius: var(--su-radius-card); background: var(--su-surface); box-shadow: var(--su-shadow-card); }
.compose-card > img { width: 100%; height: 230px; object-fit: cover; }
.compose-card > div { padding: 26px; }
.compose-card small { color: var(--su-link); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.compose-card h3 { margin: 10px 0 8px; font: 700 24px/1.2 var(--su-font-slab); }
.compose-card p { color: var(--su-muted); line-height: 1.55; }
.compose-card a { color: var(--su-link); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }

.compose-feature { display: grid; min-height: 500px; grid-template-columns: 1fr 1fr; background: var(--su-surface); }
.compose-feature > img { width: 100%; height: 100%; min-height: 500px; object-fit: cover; }
.compose-feature > div { padding: clamp(46px, 7vw, 100px); align-self: center; }
.compose-feature p { color: var(--su-muted); font-size: 17px; line-height: 1.6; }
.compose-feature a { color: var(--su-link); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.compose-feature .su-button--primary { color: #fff; text-decoration: none; }

.source-score { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); overflow: hidden; border-radius: var(--su-radius-card); background: var(--su-surface-muted); }
.source-score.inverse { border-radius: 0; background: var(--aven-navy); color: #fff; }
.source-score > div { display: flex; min-height: 160px; padding: 36px; flex-direction: column; justify-content: center; border-right: 1px solid #ccd7dd; text-align: center; }
.source-score > div:last-child { border-right: 0; }
.source-score strong { font: 700 30px/1.2 var(--su-font-slab); }
.source-score span { margin-top: 8px; font-size: 15px; line-height: 24px; }
.source-score.inverse span { color: #d5e6ee; }

.source-promo { display: grid; width: 100%; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--su-radius-card); background: #fff; box-shadow: var(--su-shadow-card); }
.source-promo.v1 { direction: rtl; }
.source-promo > * { direction: ltr; }
.source-promo > img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.source-promo > div { display: flex; padding: clamp(36px, 6vw, 72px); flex-direction: column; justify-content: center; }
.source-promo > .story-image { padding: 0; }
.source-promo > .story-image img { width: 100%; height: 100%; min-height: 390px; object-fit: cover; }
.source-promo small { color: var(--su-link); font-size: 14px; font-weight: 700; line-height: 21px; }
.source-promo h2 { margin: 18px 0; font: 700 clamp(30px, 4vw, 48px)/1.1 var(--su-font-slab); }
.source-promo p { color: var(--su-muted); font-size: 18px; line-height: 27px; }
.source-promo a:not(.su-button) { display: flex; align-items: center; gap: 6px; color: var(--su-link); font-weight: 700; text-decoration: underline; }

.source-inline-cta { display: grid; width: 100%; padding: 36px; grid-template-columns: 1fr auto; align-items: center; gap: 36px; border-radius: var(--su-radius-card); background: var(--su-surface-muted); }
.source-inline-cta h3 { margin: 0; font: 700 24px/30px var(--su-font-slab); }
.source-inline-cta p { margin: 6px 0 0; color: var(--su-muted); font-size: 18px; line-height: 27px; }

.source-quick-links { display: grid; width: 100%; grid-template-columns: repeat(4, 1fr); }
.source-quick-links > a, .source-quick-links > span { display: flex; min-height: 72px; padding: 12px 18px; align-items: center; justify-content: center; gap: 12px; border-right: 1px solid var(--su-border); color: var(--su-link); font-size: 15px; font-weight: 700; text-decoration: none; }
.source-quick-links > :last-child { border-right: 0; }

.source-anchor { display: flex; width: 100%; border-bottom: 1px solid var(--su-border); }
.source-anchor a { padding: 18px 24px; border-bottom: 3px solid transparent; color: var(--su-link); font-size: 15px; font-weight: 700; text-decoration: none; }
.source-anchor a:first-of-type { border-color: var(--su-action); color: var(--su-action-strong); }

.source-infographic { display: grid; width: 100%; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.source-infographic > article, .source-infographic > div { display: grid; min-height: 230px; padding: 24px; grid-template-columns: 1fr auto; align-content: space-between; border-radius: var(--su-radius-card); background: var(--su-surface-muted); }
.source-infographic span { color: var(--su-muted); font-size: 12px; }
.source-infographic strong, .source-infographic h3 { grid-column: 1/-1; font: 700 24px/30px var(--su-font-slab); }
.source-infographic h3 { color: var(--su-ink); }
.source-infographic p { grid-column: 1/-1; color: var(--su-muted); }

.source-list { width: 100%; max-width: 760px; margin: 0; padding: 0; list-style: none; }
.source-list li { display: grid; padding: 24px 0; grid-template-columns: 60px 1fr; gap: 18px; border-bottom: 1px solid var(--su-border); }
.source-list li > span { color: var(--su-action); font-size: 24px; }
.source-list strong { font-size: 18px; }
.source-list p { margin: 6px 0 0; color: var(--su-muted); font-size: 15px; line-height: 24px; }

.source-panels { display: grid; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
.source-panels > section, .source-panels > a { display: flex; padding: 36px; flex-direction: column; border-radius: var(--su-radius-card); background: #fff; color: var(--su-ink); text-decoration: none; box-shadow: var(--su-shadow-card); }
.source-panels > :nth-child(2) { background: var(--aven-navy); color: #fff; }
.source-panels small { font-size: 14px; font-weight: 700; }
.source-panels h2, .source-panels strong { margin: 14px 0; font: 700 30px/36px var(--su-font-slab); }
.source-panels img { display: block; width: 100%; height: 180px; margin-top: 18px; border-radius: var(--su-radius-card); object-fit: cover; }
.source-panels span { margin-top: auto; color: var(--su-link); font-weight: 700; }
.source-panels > :nth-child(2) span { color: #fff; }
.contact-hero-cards.source-panels { gap: 18px; }
.contact-hero-cards.source-panels strong { overflow-wrap: anywhere; font-size: clamp(18px, 1.35vw, 20px); line-height: 1.25; }
.contact-hero-cards.source-panels > :nth-child(2) strong,
.contact-hero-cards.source-panels > :nth-child(2) span { color: #fff; }

.accordion-demo { width: 100%; border-top: 1px solid var(--su-border); }
.accordion-demo details { border-bottom: 1px solid var(--su-border); }
.accordion-demo summary { display: flex; padding: 22px 0; justify-content: space-between; gap: 24px; color: var(--aven-navy); font-size: 18px; font-weight: 700; cursor: pointer; list-style: none; }
.accordion-demo summary span { color: var(--su-action); }
.accordion-demo details[open] summary span { transform: rotate(45deg); }
.accordion-demo details p { max-width: 70ch; margin: 0 48px 22px 0; color: var(--su-muted); font-size: 16px; line-height: 1.6; }

.compose-cta { padding: 92px 0; background: var(--su-surface-muted); text-align: center; }
.compose-cta h2 { max-width: 760px; margin-inline: auto; }

.need-path-grid.compose-quick { width: 100%; margin: 0; grid-template-columns: repeat(3, 1fr); border: 0; border-radius: 0; box-shadow: none; }
.need-path-grid.compose-quick a { min-height: 134px; background: transparent; color: #fff; }
.need-path-grid.compose-quick a > span { width: auto; height: auto; margin-left: auto; background: transparent; color: #fff; font-size: 20px; }
.need-path-grid.compose-quick a:focus-visible { background: rgb(255 255 255 / 8%); }

.service-directory.compose-card-grid { border-top: 0; }
.service-directory.compose-card-grid .compose-card { display: flex; min-width: 0; min-height: 340px; padding: 0; overflow: hidden; border-bottom: 0; flex-direction: column; }
.service-directory.compose-card-grid .compose-card > span { display: block; padding: 26px 26px 0; }
.service-directory.compose-card-grid .compose-card > div { display: flex; height: 100%; padding: 10px 26px 30px; flex-direction: column; }
.service-directory.compose-card-grid .compose-card h2 { overflow-wrap: anywhere; font-size: clamp(1.75rem, 2.8vw, 2.65rem); }
.service-directory.compose-card-grid .text-arrow { margin-top: auto; padding-top: 18px; }
.story-grid.source-promo { gap: 0; }

.process-band .section-heading > p:last-child { color: #bcd2dd; }
.process-band .source-infographic article > span { color: var(--su-action); }

.service-area-band .source-inline-cta { border-radius: 0; background: transparent; }
.service-area-band .source-inline-cta .eyebrow--light { color: #d9e9f0; }

@media (max-width: 900px) {
  .compose-hero, .compose-feature, .source-promo { grid-template-columns: 1fr; }
  .compose-hero > img { min-height: 320px; max-height: 420px; }
  .compose-quick { grid-template-columns: repeat(2, 1fr); }
  .need-path-grid.compose-quick { grid-template-columns: 1fr; }
  .compose-card-grid, .source-infographic { grid-template-columns: 1fr 1fr; }
  .source-score { grid-template-columns: 1fr; }
  .source-quick-links { grid-template-columns: repeat(2, 1fr); }
  .source-score > div { min-height: 120px; border-right: 0; border-bottom: 1px solid rgb(255 255 255 / 18%); }
  .source-score > div:last-child { border-bottom: 0; }
}

@media (max-width: 600px) {
  .compose-copy { padding: 52px 24px; }
  .compose-quick { width: calc(100% - 32px); margin-top: -20px; grid-template-columns: 1fr; }
  .compose-quick a { min-height: 90px; border-right: 0; border-bottom: 1px solid var(--su-border); }
  .compose-card-grid, .source-infographic, .source-panels { grid-template-columns: 1fr; }
  .source-promo > img, .compose-feature > img { min-height: 300px; }
  .source-promo > div, .compose-feature > div { padding: 36px 24px; }
  .source-inline-cta { grid-template-columns: 1fr; }
  .source-quick-links { grid-template-columns: 1fr; }
  .source-quick-links > a, .source-quick-links > span { border-right: 0; border-bottom: 1px solid var(--su-border); }
  .source-anchor { overflow-x: auto; }
  .source-anchor a { padding-inline: 16px; white-space: nowrap; }
}

/* AVEN responsive integration layer: keeps the source components comfortable
   inside the site's shared gutters at desktop, tablet, and phone widths. */
.pattern-compose { overflow: clip; }
.pattern-compose :where(p, li) { text-wrap: pretty; }
.pattern-compose :where(h1, h2, h3) { text-wrap: balance; }
.prose-content { max-width: 78ch; }
.prose-content > :first-child { margin-top: 0; }
.prose-content > :last-child { margin-bottom: 0; }
.editable-page-body { border-top: 1px solid var(--su-border); }

@media (min-width: 901px) and (max-width: 1180px) {
  .compose-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr); }
  .home-hero-grid.compose-hero { grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr); }
  .compose-card-grid { gap: 20px; }
  .source-panels { gap: 20px; }
  .home-hero h1, .page-hero h1, .service-hero h1 { max-width: 14ch; }
}

@media (min-width: 861px) and (max-width: 1024px) {
  .compose-hero { grid-template-columns: minmax(0, 1fr) 340px; }
  .home-hero-grid { gap: 32px; }
  .service-starter { padding: 28px; }
  .compose-quick { width: min(calc(100% - (2 * var(--aven-gutter))), var(--aven-max)); }
  .compose-card-grid, .source-infographic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { gap: 32px; }
}

@media (max-width: 900px) {
  .compose-hero { min-height: auto; }
  .home-hero-grid.compose-hero { padding-block: clamp(54px, 8vw, 76px); grid-template-columns: 1fr; }
  .compose-card-grid, .source-infographic { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .source-promo { overflow: visible; }
  .source-promo > .story-image img { min-height: 340px; }
  .source-score > div { padding: 28px var(--aven-gutter); }
}

@media (max-width: 600px) {
  :root { --aven-gutter: 20px; --aven-section-space: clamp(56px, 15vw, 72px); }
  .compose-quick { width: min(calc(100% - (2 * var(--aven-gutter))), var(--aven-max)); }
  .compose-card-grid, .source-infographic { grid-template-columns: 1fr; }
  .compose-section, .compose-cta { padding-inline: 0; }
  .home-hero h1, .page-hero h1, .service-hero h1 { max-width: none; font-size: clamp(2.7rem, 12.5vw, 3.75rem); line-height: 1.01; }
  .home-hero-copy > p:last-child, .page-hero-inner > p:not(.breadcrumbs):not(.eyebrow), .service-hero-copy > p:not(.eyebrow):not(.breadcrumbs) { font-size: 1.05rem; line-height: 1.55; }
  .service-starter, .estimate-panel, .included-panel { padding: 24px 20px; }
  .service-link-card { padding: 24px; }
  .service-directory article { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .source-promo > div { padding-inline: 22px; }
  .source-promo > .story-image img { min-height: 260px; }
  .source-anchor { width: 100%; margin-inline: auto; padding-inline: 0; }
  .contact-hero-cards.source-panels { grid-template-columns: 1fr; }
  .contact-hero-cards.source-panels > a { min-width: 0; padding: 24px 20px; }
  .contact-hero-cards.source-panels strong { overflow-wrap: anywhere; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .su-button { justify-content: center; }
  .mobile-action-dock { padding-bottom: env(safe-area-inset-bottom); background: var(--aven-navy-deep); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

@media (max-width: 380px) {
  :root { --aven-gutter: 16px; }
  .brand-logo { width: 154px; }
  .menu-toggle span { display: none; }
  .work-filter { grid-template-columns: 1fr; }
  .mobile-action-dock a { padding-inline: 9px; font-size: .84rem; }
}

/* AVEN control and container contract. Keep source-system components aligned
   with the shell used by the global header and every page section. */
.source-anchor { width: 100%; margin-inline: auto; padding-inline: 0; }
.pattern-compose :is(.su-button, button, [role='button']) { border-radius: var(--aven-radius-control); }
.pattern-compose .su-field { border-radius: 10px; }
.project-inputs .source-quick-links > span { color: #d5d5d7; }