/* The shared header, footer and home styles are intentionally inherited. */
.design-page{padding-top:calc(var(--header-mobile) + 4px)}
.design-page .design-intro{padding:48px 0 64px;background:var(--paper);color:var(--forest)}
.design-page .design-intro-grid{display:grid;gap:36px}
.design-page .design-intro-copy{display:grid;gap:24px;min-width:0}
.design-page .design-intro-summary{min-width:0}
.design-page .design-intro .eyebrow{color:var(--rose-gold);font-size:.8rem;letter-spacing:.14em}
.design-page .design-intro .display{font-size:clamp(2.7rem,5.5vw,4.8rem);line-height:1.02}
.design-page .design-intro .lead{margin:0;max-width:49ch;color:var(--muted)}
.design-page .design-intro-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:24px}
.design-page .design-intro .btn-primary{background:var(--forest);color:var(--warm-white)}
.design-page .design-inline-link{display:inline-flex;align-items:center;gap:12px;min-height:48px;font-size:.9rem;font-weight:650;text-decoration:underline;text-underline-offset:5px}
.design-page .design-comparison{min-width:0}
.design-page .compare{border-radius:var(--radius);isolation:isolate}
.design-page .compare:focus-within{outline:2px solid var(--forest);outline-offset:5px}
.design-page .design-intro .compare{aspect-ratio:16/10}
.design-page .design-comparison-title{margin:18px 0 4px;font-size:1rem;font-weight:650}
.design-page .design-comparison-hint{margin:12px 0 0;font-size:.8rem;line-height:1.5;color:var(--muted)}
.design-page .project-photo-actions{margin-top:12px;padding-top:6px}
.design-page .design-service{padding:72px 0;background:var(--forest);color:var(--warm-white)}
.design-page .design-service .eyebrow{color:#e5c3c3}
.design-page .design-service .lead{color:var(--warm-white)}
.design-page .design-service .lead,.design-page .design-projects .lead{margin:0}
.design-page .design-service-grid{display:grid;gap:30px;margin-top:42px}
.design-page .design-service-grid article{padding-top:22px;border-top:1px solid var(--white-line);min-width:0}
.design-page .design-service-grid h3{margin:0 0 12px;font-size:1.25rem;line-height:1.2;font-weight:650}
.design-page .design-service-grid p{margin:0;color:var(--warm-white);opacity:.82}
.design-page .design-projects{padding:72px 0;background:var(--paper-2)}
.design-page .design-project{display:grid;gap:28px;align-items:center;margin-top:52px}
.design-page .design-project+.design-project{padding-top:52px;border-top:1px solid var(--line)}
.design-page .design-project-copy{min-width:0}
.design-page .design-project-copy h3{margin:0;font-size:clamp(1.9rem,3.1vw,2.75rem);line-height:1.08;letter-spacing:-.035em;font-weight:550}
.design-page .design-project-copy>p:not(.eyebrow){margin:22px 0 0;color:var(--muted);max-width:42ch}
.design-page .design-project-details{margin:26px 0 0;display:grid;gap:14px}
.design-page .design-project-details div{padding-top:12px;border-top:1px solid var(--line)}
.design-page .design-project-details dt{font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;font-weight:750;color:var(--muted)}
.design-page .design-project-details dd{margin:4px 0 0;font-size:.94rem}
.design-page .design-project-portrait .compare{aspect-ratio:1/1}
.design-page .contact .btn-primary{font-size:1rem;min-height:56px;padding-inline:26px}
.design-page .contact .text-link{overflow-wrap:anywhere}
.design-page a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
@media(min-width:760px){
  .design-page .design-intro .compare{aspect-ratio:16/9}
  .design-page .design-service-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
  .design-page .design-service,.design-page .design-projects{padding:96px 0}
}
@media(min-width:980px){
  .design-page{padding-top:calc(var(--header-desktop) + 1px)}
  .design-page .design-intro{padding:56px 0 80px}
  .design-page .design-intro-grid{gap:40px}
  .design-page .design-intro-copy{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,4vw,64px);align-items:end}
  .design-page .design-project{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;margin-top:64px}
  .design-page .design-project+.design-project{padding-top:72px}
  .design-page .design-project-reverse{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  .design-page .design-project-reverse .design-project-copy{grid-column:2;grid-row:1}
  .design-page .design-project-reverse .design-comparison{grid-column:1;grid-row:1}
}