/* A third row of services, with native expanding details in document flow. */
.canvas.s14 { display:block; aspect-ratio:auto; padding:0; }
.studio-areas-overview { padding:30px 4.125% 34px; }
.studio-areas-heading-row { display:grid; grid-template-columns:minmax(0,1fr) 31%; gap:22px; align-items:center; margin-bottom:28px; }
.studio-areas-kicker { margin:0 0 14px; color:#ff4b0a; font-size:11px; letter-spacing:.19em; font-weight:600; }
.studio-areas-heading { margin:0; font-size:4.65cqw; font-weight:800; line-height:1.045; letter-spacing:-.04em; word-spacing:.04em; }
.studio-areas-heading>span { display:block; white-space:nowrap; }
.studio-areas-heading em { color:#2924e8; font-style:normal; }
.studio-areas-heading b { color:#ff4b0a; font-weight:inherit; }
.studio-areas-intro { display:grid; grid-template-columns:37% minmax(0,1fr); align-items:center; gap:14px; }
.studio-areas-intro img { width:100%; height:auto; }
.studio-areas-intro p { font-size:clamp(13px,1.375cqw,18px); line-height:1.4; margin:0; }
.studio-areas-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px 2.2cqw; }
.studio-area { min-width:0; position:relative; border-bottom:1px solid #d8ddee; padding:0 0 8px; }
.studio-area::before { content:""; position:absolute; top:0; bottom:0; left:-.8cqw; width:1px; background:#edf0f8; }
.studio-area-image { display:block; width:100%; height:auto; aspect-ratio:2.3; object-fit:cover; }
.studio-area-copy { padding:11px 4px 0 18px; }
.studio-area h3 { position:relative; margin:0; min-height:2.3em; font-size:clamp(17px,1.75cqw,23px); font-weight:700; line-height:1.15; letter-spacing:-.025em; }
.studio-area:nth-child(-n+6) h3 { min-height:1.15em; }
.studio-area h3::before { content:""; position:absolute; top:.38em; left:-16px; width:5px; height:5px; border-left:1px solid #ff4b0a; border-bottom:1px solid #ff4b0a; }
.studio-area-subtitle { margin:5px 0 5px; font-size:clamp(12px,1.02cqw,14px); line-height:1.45; color:#50576a; }
.studio-area-details { margin:0; }
.studio-area-details summary { display:flex; align-items:center; gap:12px; width:fit-content; max-width:100%; min-height:40px; padding:9px 0; color:#2924e8; font-size:13px; line-height:1.4; cursor:pointer; list-style:none; }
.studio-area-details summary::-webkit-details-marker { display:none; }
.studio-area-details summary span::before { content:"+"; font-size:18px; line-height:1; }
.studio-area-details[open] summary span::before { content:"−"; }
.studio-area-description { padding:4px 0 12px; }
.studio-area-description p { margin:0; font-size:15px; line-height:1.55; }
.studio-areas-ending { display:flex; justify-content:space-between; align-items:center; padding-top:24px; }
.studio-areas-ending>span { padding-bottom:10px; min-width:28%; border-bottom:1px solid #d8ddee; font-size:8px; line-height:1.4; letter-spacing:.11em; color:#8990a5; }
.studio-areas-ending i { width:5px; height:5px; background:#ff4b0a; transform:rotate(45deg); box-shadow:-10px 10px 0 -1px #2924e8,10px -10px 0 -1px #2924e8; margin-right:24px; }
@media(max-width:1100px) and (min-width:901px) {
  .studio-areas-heading-row { grid-template-columns:minmax(0,1fr) 25%; gap:18px; }
  .studio-areas-intro { display:block; }
  .studio-areas-intro img { display:none; }
  .studio-area h3 { min-height:2.3em; }
}
@media(max-width:900px) {
  .studio-areas-overview { padding:36px 22px; }
  .studio-areas-heading-row { grid-template-columns:1fr; gap:18px; margin-bottom:26px; }
  .studio-areas-heading { font-size:clamp(30px,5vw,46px); }
  .studio-areas-kicker { font-size:10px; }
  .studio-areas-intro { display:block; }
  .studio-areas-intro img { display:none; }
  .studio-areas-intro p { max-width:48ch; font-size:16px; }
  .studio-areas-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 24px; }
  .studio-area h3 { font-size:21px; }
  .studio-area::before { display:none; }
  .studio-area-copy { padding-top:12px; }
  .studio-area-subtitle { font-size:13px; }
  .studio-area-details summary { min-height:44px; font-size:14px; }
  .studio-areas-ending { display:none; }
}
@media(max-width:600px) {
  .studio-areas-heading { font-size:clamp(29px,7.8vw,44px); line-height:1.06; }
  .studio-areas-heading>span { white-space:normal; }
  .studio-areas-grid { grid-template-columns:1fr; }
  .studio-area h3 { min-height:0; font-size:22px; }
  .studio-area-subtitle { margin-top:8px; }
  .studio-area-description p { font-size:16px; }
}
