.hero-color-picker{margin-top:20px;max-width:440px}
.hero-color-picker p,#about .about-layout-picker p{margin:0 0 10px;font-size:12px;color:var(--muted)}
.hero-color-picker>div,#about .about-layout-picker>div{display:flex;flex-wrap:wrap;gap:8px}
.hero-color-picker button,#about .about-layout-picker button{padding:8px 12px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink);font:500 12px/1.5 var(--sans);cursor:pointer}
.hero-color-picker button[aria-pressed="true"],#about .about-layout-picker button[aria-pressed="true"]{background:var(--pine);color:var(--paper);border-color:var(--pine)}
.hero-color-picker button:focus-visible,#about .about-layout-picker button:focus-visible{outline:2px solid var(--jade);outline-offset:3px}
body .hero .hero-actions{--action-bg:#fffaf0;--action-text:#403b2e}
body .hero .hero-actions[data-color="2"]{--action-bg:#d8c5a5;--action-text:#352f24}
body .hero .hero-actions[data-color="3"]{--action-bg:#bec9b4;--action-text:#29372b}
body .hero .hero-actions[data-color="4"]{--action-bg:#59553e;--action-text:#fffaf0}
body .hero .hero-actions[data-color="5"]{--action-bg:#594236;--action-text:#fffaf0}
body .hero .hero-actions .button,body .hero .hero-actions .button:hover{background:transparent;color:var(--ink);border:0;border-radius:0;box-shadow:none;padding:10px 0;min-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}
body .hero .hero-actions .button:hover{filter:none;text-decoration-thickness:2px}
body .hero .hero-actions .button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
#about .about-layout-picker{margin:0 0 32px;padding:0 0 20px;border-bottom:1px solid var(--line)}
#about .intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;margin-top:36px}
#about .about-copy{min-width:0;max-width:none}
#about .about-copy-block p{font-size:15px;line-height:1.9;margin:0 0 20px}
#about .about-copy .about-lead{font-size:18px;line-height:1.8;color:var(--ink)}
#about .about-visuals{display:flex;flex-direction:column;gap:28px;min-height:0;height:auto;justify-content:flex-start}
#about .about-visuals figure{width:100%;max-width:none;margin:0}
#about .about-visuals .about-installation-scene{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;border-radius:8px}
#about .about-visuals figcaption{font-size:12px;line-height:1.75;margin-top:10px;color:var(--muted)}
@media(min-width:761px){
  #about[data-layout="2"] .intro-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
  #about[data-layout="2"] .about-visuals{grid-column:1;grid-row:1}
  #about[data-layout="2"] .about-copy{grid-column:2;grid-row:1}
  #about[data-layout="3"] .intro-grid{gap:40px 56px;align-items:center}
  #about[data-layout="3"] .about-copy,#about[data-layout="3"] .about-visuals{display:contents}
  #about[data-layout="3"] .about-copy-block:first-child{grid-column:1;grid-row:1}
  #about[data-layout="3"] .about-copy-block:last-child{grid-column:2;grid-row:2}
  #about[data-layout="3"] .about-visuals figure:first-child{grid-column:2;grid-row:1}
  #about[data-layout="3"] .about-visuals figure:last-child{grid-column:1;grid-row:2}
  #about[data-layout="4"] .intro-grid{grid-template-columns:1fr;gap:36px}
  #about[data-layout="4"] .about-visuals{order:-1;display:grid;grid-template-columns:1fr 1fr;gap:28px}
  #about[data-layout="4"] .about-copy{display:grid;grid-template-columns:1fr 1fr;gap:40px}
  #about[data-layout="5"] .intro-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px}
  #about[data-layout="5"] .about-copy{background:var(--mist);padding:32px;border-radius:12px}
  #about[data-layout="5"] .about-visuals{padding-top:24px;gap:40px}
  #about[data-layout="5"] .about-visuals figure:last-child{width:88%;align-self:flex-end}
}
@media(max-width:760px){
  #about .intro-grid{grid-template-columns:1fr;gap:28px}
  #about .about-visuals figure{width:100%;max-width:560px;margin:0 auto}
  #about[data-layout="2"] .about-visuals,#about[data-layout="4"] .about-visuals{order:-1}
  #about[data-layout="5"] .about-copy{background:var(--mist);padding:22px;border-radius:10px}
  #about .about-layout-picker>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  #about .about-layout-picker button{text-align:left}
}
#about #intro-title{letter-spacing:.045em;line-height:1.5}