:root {
  --section-space: clamp(2.35rem, 4.2vw, 4.15rem);
  --layout-gap: clamp(1.4rem, 3.5vw, 3.25rem);
  --card-padding: clamp(1rem, 2vw, 1.65rem);
}

.page-intro, .case-heading {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: .8rem var(--layout-gap);
}
.page-intro { padding-block: var(--section-space) clamp(1.45rem, 2.7vw, 2.7rem); }
.page-intro h1 { max-inline-size: 15ch; text-wrap: pretty; }
.intro-aside, .case-heading > div + div { padding-block-end: .24rem; }
.intro-aside p, .case-heading > div + div p { max-inline-size: 35ch; }
.section-head { margin-block-end: clamp(1rem, 2.2vw, 1.65rem); }
.home-services, .estimate-band, .process-band, .callout { padding-block: var(--section-space); }
.portfolio-forward, .service-details { margin-block-end: var(--section-space); }
.portfolio-section, .case-content { padding-block-end: var(--section-space); }
.feature-selector button { min-block-size: 3.45rem; }
.feature-visual figcaption, .portfolio-detail { padding: .72rem var(--card-padding); }
.feature-copy { gap: .65rem; }
.service-card, .service-detail, .price-row, .portfolio-copy { padding: var(--card-padding); }
.service-card p, .service-detail p { margin-block: .45rem .85rem; }
.portfolio-grid { gap: clamp(.8rem, 1.4vw, 1.2rem); }
.portfolio-copy > p:not(.kicker) { margin-block-end: .65rem; }
.callout > .page-width > div { min-width: 0; }
.callout h2 { max-inline-size: 24ch; }
.callout p { margin-block-start: .6rem; }
.footer-inner { min-block-size: 5.4rem; }

.studio-profile {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center;
  gap: var(--layout-gap);
  padding-block: var(--section-space);
}
.studio-profile h1 { margin-block: .42rem .85rem; text-wrap: pretty; }
.studio-profile-copy > p:last-child { max-inline-size: 38ch; color: var(--muted); }
.studio-identity { border: 1px solid var(--rule); background: var(--panel); }
.studio-identity-art {
  display: grid;
  place-items: center;
  inline-size: 100%;
  min-block-size: 13rem;
  aspect-ratio: 1.8;
  padding: 1.4rem;
  background: radial-gradient(ellipse at 37% 35%, var(--panel), transparent 78%), var(--selected);
}
.studio-identity-art img { width: min(55%, 15rem); }
.studio-identity figcaption, .case-gallery figcaption { color: var(--muted); font-size: .83rem; }
.studio-identity figcaption { padding: .65rem .85rem; border-block-start: 1px solid var(--rule); }
.studio-approach {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: .75rem var(--layout-gap);
  align-items: center;
  padding-block: clamp(1.5rem, 3vw, 2.7rem) var(--section-space);
  border-block-start: 1px solid var(--rule);
}
.studio-approach h2 { max-inline-size: 21ch; }
.studio-approach p { max-inline-size: 49ch; color: var(--muted); margin-block-end: .7rem; }
.process-band ol { gap: 1rem 1.4rem; margin-block-start: 1.2rem; }
.process-band li { padding-block-start: .75rem; }

.inquiry-layout {
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(1rem, 2.7vw, 2.35rem);
  padding-block: 0 var(--section-space);
}
.inquiry-layout aside, .inquiry-form { padding: 0; border: 1px solid var(--rule); }
.inquiry-form, .inquiry-aside-copy { padding: var(--card-padding); }
.inquiry-form h2, .inquiry-aside h2 { font-size: clamp(2.1rem, 3.5vw, 3.5rem); }
.form-note { margin-block: .5rem 1.05rem; }
.form-fields { gap: .9rem 1rem; margin-block-end: 1rem; }
.form-fields :is(input, select, textarea) { min-block-size: 44px; margin-block-start: .3rem; }
.inquiry-aside .inquiry-links { margin-block-start: .95rem; padding-block-start: .82rem; }
.inquiry-aside-art {
  aspect-ratio: 2.7;
  border-block-start: 1px solid var(--rule);
  background: var(--callout);
}
.receipt { min-block-size: min(31rem, 62vh); }

.case-header { padding-block-start: clamp(1.15rem, 2.6vw, 2.25rem); }
.case-heading { margin-block: clamp(.85rem, 1.7vw, 1.45rem) clamp(1.15rem, 2.1vw, 1.85rem); }
.case-heading h1 { overflow-wrap: anywhere; }
.case-gallery { gap: clamp(.65rem, 1.7vw, 1.25rem); margin-block-end: clamp(1rem, 2.5vw, 2.15rem); }
.case-gallery figure { min-width: 0; background: var(--panel); border: 1px solid var(--rule); }
.case-gallery img { border: 0; }
.case-gallery figcaption { margin: 0; border-block-start: 1px solid var(--rule); padding: .62rem .8rem; }
.case-demo, .case-demo-link { padding: var(--card-padding); margin-block: 0 clamp(1rem, 2.4vw, 2rem); }
.case-notes { gap: 1rem var(--layout-gap); padding-block: clamp(1rem, 2.5vw, 2rem); }
.case-notes p, .case-notes ul { max-inline-size: 62ch; }
.case-capture-strip { margin-block: 0 clamp(1rem, 2.4vw, 2rem); }
.next-project { padding-block-start: 1.05rem; }

.contact-intro { grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: clamp(1rem, 2.7vw, 2.35rem); }
.contact-intro h1 { max-inline-size: none; }
.contact-intro h1 em { display: inline-block; }
.contact-intro .intro-aside { padding-inline: var(--card-padding); }
.case-gallery figcaption { grid-row: 1; border-block-start: 0; border-block-end: 1px solid var(--rule); }
.case-gallery figure { display: grid; }
.case-gallery figure > a { display: block; }
.case-gallery .preview-long img { aspect-ratio: 390 / 920; object-fit: cover; object-position: top; }
.case-gallery .preview-long figcaption { display: flex; align-items: baseline; justify-content: space-between; gap: .4rem; flex-wrap: wrap; }
.case-gallery .preview-long figcaption a { font-size: inherit; }
.portfolio-image { aspect-ratio: 1.75; }
.portfolio-image img { height: 100%; }

@media (max-width: 825px) {
  .page-intro, .case-heading, .contact-intro { grid-template-columns: 1fr; }
  .intro-aside p, .case-heading > div + div p { max-inline-size: 51ch; }
  .contact-intro .intro-aside { padding-inline: 0; }
  .inquiry-layout { grid-template-columns: minmax(0, 1fr); }
  .inquiry-aside {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  }
  .inquiry-aside-art { aspect-ratio: auto; border-block-start: 0; border-inline-start: 1px solid var(--rule); }
}

@media (max-width: 720px) {
  :root { --section-space: clamp(1.85rem, 6.3vw, 2.65rem); --layout-gap: 1.25rem; }
  .action, .mobile-nav summary, .mobile-nav nav a, .portfolio-controls button,
  .demo-options button, .demo-choices button, .dialog-head button { min-block-size: 44px; }
  .mobile-nav nav a { display: flex; align-items: center; }
  .section-head { flex-wrap: wrap; align-items: start; }
  .form-fields :is(input, select, textarea), .pairing-builder select { font-size: 1rem; }
  .case-gallery { grid-template-columns: minmax(0, 1fr) minmax(0, .33fr); }
  .case-gallery figcaption { padding: .48rem .65rem; }
}

@media (max-width: 570px) {
  h1, .case-heading h1, .studio-photo-intro h1 {
    font-size: clamp(2.9rem, 11.7vw, 4.55rem);
    line-height: .97;
  }
  .page-intro h1 { max-inline-size: none; }
  .page-intro, .studio-photo-intro { padding-block: 1.55rem 1.35rem; }
  .studio-profile { padding-block: 1.55rem var(--section-space); }
  .studio-profile, .studio-approach { grid-template-columns: 1fr; }
  .studio-identity-art { min-block-size: 0; aspect-ratio: 2.05; }
  .studio-identity-art img { width: min(50%, 12rem); }
  .studio-approach h2 { max-inline-size: none; }
  .process-band ol { gap: .9rem 1rem; }
  .feature-selector button { padding: .5rem .65rem; }
  .feature-selector button small { font-size: .72rem; }
  .feature-copy { padding: 1rem; }
  .feature-visual figcaption { padding-block: .48rem; }
  .portfolio-forward { flex-wrap: wrap; padding-block: .85rem; }
  .portfolio-grid { grid-template-columns: 1fr; gap: .95rem; }
  .portfolio-copy h2 { font-size: clamp(2rem, 8vw, 2.75rem); }
  .portfolio-copy .kicker { font-size: .68rem; }
  .portfolio-copy > p:not(.kicker), .portfolio-copy .text-link { font-size: .89rem; }
  .portfolio-controls { gap: .42rem .6rem; }
  .portfolio-controls button { font-size: .81rem; }
  .portfolio-detail { min-block-size: 44px; }
  .price-list, .price-row { grid-template-columns: 1fr; }
  .price-row:nth-child(even) { border-inline-start: 0; }
  .price-row + .price-row { border-block-start: 1px solid var(--rule); }
  .price-row strong { font-size: 2rem; }
  .inquiry-layout, .inquiry-aside, .form-fields { grid-template-columns: 1fr; }
  .inquiry-aside-art { aspect-ratio: 3.2; border-inline-start: 0; border-block-start: 1px solid var(--rule); }
  .inquiry-form .action { inline-size: 100%; }
  .footer-inner { gap: .35rem .7rem; padding-block: .8rem; }
  .footer-inner nav { column-gap: .68rem; }
  .footer-inner nav a { padding-block: .28rem; }
  .case-heading { margin-block-end: 1.15rem; }
  .case-gallery { grid-template-columns: 1fr; }
  .case-gallery figure:nth-child(2) { width: min(72%, 15rem); justify-self: center; }
  .case-gallery figure:nth-child(2) img { aspect-ratio: 390 / 725; object-fit: cover; object-position: top; }
  .case-gallery figure:nth-child(2):not(.preview-long) img { aspect-ratio: auto; }
  .case-gallery figcaption { padding: .5rem .7rem; }
  .case-capture-strip > div { padding: .85rem 1rem 1rem; }
  .next-project { flex-wrap: wrap; }
}

@media (max-width: 360px) {
  .pairing-flavors { grid-template-columns: minmax(0, 1fr); }
  .pairing-flavor img { aspect-ratio: 2.55; }
  .feature-visual figcaption { flex-wrap: wrap; }
}

.portfolio-intro {
  padding-block: clamp(1.45rem, 2.7vw, 2.65rem) clamp(1rem, 1.8vw, 1.65rem);
}

@media (min-width: 826px) {
  .portfolio-intro {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
  }

  .portfolio-intro h1 {
    font-size: clamp(3.6rem, 5.8vw, 6.4rem);
    max-inline-size: none;
  }

  .portfolio-intro .intro-aside p { max-inline-size: 40ch; }
}