.studio--boutique-hotel { --surface: #173c3a; --tone: #eee5ca; --display-font: StudioBodoni; }
.sola-hero { min-height: 900px; display: flex; flex-direction: column; }
.sola-background { position: absolute; inset: 0; }
.sola-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#092d3680,#143a3130,#092d3680); }
.sola-hero .s-nav, .sola-copy, .sola-visit, .sola-side { position: relative; z-index: 1; }
.sola-hero .s-brand { font: 40px/.9 StudioBodoni; letter-spacing: .05em; }
.sola-hero .s-brand span { display: block; font: 10px PortfolioSans; letter-spacing: .4em; margin-top: 7px; }
.sola-copy { text-align: center; padding: 13% 5% 8%; }
.sola-copy .s-title { font-size: 7.5cqw; text-shadow: 0 3px 25px #17332255; }
.sola-visit { margin: auto 6% 40px; padding: 23px 30px; background: #173c3a; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.sola-visit > span { font-size: 10px; letter-spacing: .18em; }
.sola-visit p { font: 27px/1.1 StudioBodoni; }
.sola-visit .s-button { background: transparent; color: inherit; border-bottom: 1px solid; padding: 10px 0; }
.sola-side { position: absolute; left: 25px; top: 38%; writing-mode: vertical-rl; font-size: 9px; letter-spacing: .2em; }
.studio--boutique-hotel .studio-body { background: #eee5ca; color: #173c3a; }
.studio--event-venue { --surface: #f2e4d9; --tone: #7b5548; --display-font: StudioBodoni; }
.willow-hero { padding: 25px 4%; }
.willow-frame { border: 1px solid #ba9a87; padding: 25px 4% 20px; }
.willow-frame nav { display: flex; align-items: center; justify-content: space-between; font-size: 10px; gap: 25px; }
.willow-brand { font: 23px StudioBodoni; letter-spacing: .04em; }
.willow-title { text-align: center; padding: 55px 0 35px; }
.willow-title .s-title { font-size: 6.2cqw; }
.willow-title .s-kicker { font-size: 8px; }
.willow-images { display: grid; grid-template-columns: 1fr .75fr 1fr; gap: 5%; align-items: center; }
.willow-images > img { height: 350px; border-radius: 200px 200px 0 0; }
.willow-images > img:last-child { height: 300px; border-radius: 0 0 200px 200px; }
.willow-images > div { text-align: center; }
.willow-script { font: 42px/1.1 StudioScript; transform: rotate(-7deg); display: block; }
.willow-images .s-button { font-size: 10px; padding: 10px 0; background: transparent; color: inherit; border-bottom: 1px solid; margin-top: 30px; }
.willow-bottom { font-size: 8px; letter-spacing: .17em; text-align: center; padding-top: 30px; }
.studio--event-venue .studio-body { margin: 0 4%; padding: 6% 5%; }
.studio--photography { --surface: #f3f2ed; --tone: #252625; --display-font: StudioBodoni; }
.frame-hero { padding: 25px 5%; }
.frame-nav { display: flex; justify-content: space-between; gap: 30px; font: 11px StudioMono; border-bottom: 1px solid #9b9d94; padding-bottom: 22px; }
.frame-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 35px 0; }
.frame-heading .s-title { font-size: 7.3cqw; }
.frame-heading p { font-size: 12px; }
.frame-contact-sheet { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 200px 200px; gap: 30px; }
.frame-contact-sheet figure { min-height: 0; }
.frame-contact-sheet img { height: calc(100% - 25px); filter: saturate(.45); }
.frame-primary { grid-row: span 2; }
.frame-contact-sheet figcaption { font: 8px StudioMono; letter-spacing: .08em; padding-top: 10px; }
.frame-bottom { display: flex; align-items: center; justify-content: space-between; margin: 30px 0 0; gap: 25px; }
.frame-bottom > span { font-size: 8px; }
.frame-bottom .s-button { background: transparent; color: inherit; border-bottom: 1px solid; padding: 10px 0; }
.studio--photography .studio-body { background: #252625; color: #f3f2ed; }
.studio--logistics { --surface: #eef2f3; --tone: #1849a1; --display-font: StudioSpace; --body-font: StudioMono; }
.studio--logistics .s-brand { font-size: 23px; letter-spacing: -.04em; }
.studio--logistics .s-brand span { padding: 0 8px; }
.route-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 5%; padding: 45px 5% 0; align-items: center; }
.route-type .s-title { font-size: 6.5cqw; line-height: 1.08; font-weight: 700; }
.route-type .s-title em { font-style: normal; color: #2b353e; }
.route-type .s-button { margin-top: 25px; }
.route-map { background: #1849a1; color: #e7eef9; padding: 30px; border-radius: 8px; }
.route-status { font-size: 9px; letter-spacing: .1em; }
.route-path { display: flex; align-items: center; margin: 55px 0 15px; }
.route-path i { font-style: normal; border: 1px solid #e7eef9; border-radius: 50%; width: 45px; height: 45px; display: grid; place-items: center; }
.route-path span { flex: 1; border-top: 1px dashed #e7eef9; }
.route-path b { font: 35px StudioMono; }
.route-waypoints { display: flex; justify-content: space-between; font-size: 8px; margin-bottom: 35px; }
.route-map .s-choice-row button[aria-pressed='true'] { background: #e7eef9; color: #1849a1; }
.route-map .s-choice-copy { font-size: 11px; }
.route-image { grid-column: 1 / -1; height: 250px; position: relative; margin-top: 40px; }
.route-image > span { position: absolute; bottom: 20px; left: 20px; background: #eef2f3; font-size: 9px; padding: 12px; }
.studio--logistics .studio-body { background: #e0e6ed; }
.studio--manufacturing { --surface: #272c2d; --tone: #ebeee6; --display-font: StudioSpace; --body-font: StudioMono; }
.industrial-hero { padding: 25px 5% 40px; background-image: linear-gradient(#84979412 1px,transparent 1px),linear-gradient(90deg,#84979412 1px,transparent 1px); background-size: 40px 40px; }
.industrial-nav { display: flex; justify-content: space-between; align-items: center; gap: 30px; border-bottom: 1px solid #828c83; padding-bottom: 25px; font-size: 11px; }
.industrial-nav > span { font-size: 8px; color: #adb8b0; }
.industrial-title { padding: 40px 0; }
.industrial-title .s-title { font-size: 8.7cqw; font-weight: 700; line-height: 1; }
.industrial-title .s-title em { color: #efaa65; font-style: normal; }
.industrial-system { display: grid; grid-template-columns: 1.1fr 1fr .65fr; gap: 3%; }
.industrial-drawing { border: 1px solid #99a69c; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; min-height: 290px; }
.industrial-drawing > span { font-size: 8px; }
.industrial-part { display: flex; align-items: center; justify-content: center; transform: rotate(-20deg); gap: 15px; }
.industrial-part i { display: block; width: 40px; height: 100px; border: 1px solid #efaa65; transform: skewY(20deg); }
.industrial-part b { display: block; width: 100px; height: 120px; border: 2px solid #efaa65; background: repeating-linear-gradient(90deg,transparent 0 10px,#efaa6540 10px 11px); transform: skewY(20deg); }
.industrial-measure { text-align: center; font-size: 8px; letter-spacing: .1em; }
.industrial-photo { height: 290px; }
.industrial-photo img { filter: saturate(.35); }
.industrial-note { border-top: 4px solid #efaa65; padding-top: 20px; }
.industrial-note > span { font-size: 8px; }
.industrial-note p { font: 28px/1.25 StudioSpace; margin: 20px 0; }
.industrial-note .s-button { background: #efaa65; color: #272c2d; font-size: 10px; padding: 12px; }
.studio--manufacturing .studio-body { background: #e0e4da; color: #272c2d; }
@container (max-width: 700px) {
  .sola-hero { min-height: 760px; }
  .sola-copy { padding: 120px 7% 80px; }
  .sola-copy .s-title { font-size: 12cqw; }
  .sola-side { display: none; }
  .sola-visit { flex-wrap: wrap; padding: 20px; }
  .sola-visit > span { font-size: 8px; }
  .sola-visit p { font-size: 23px; }
  .willow-frame nav { gap: 12px; font-size: 8px; flex-wrap: wrap; justify-content: center; }
  .willow-brand { order: -1; flex-basis: 100%; text-align: center; margin-bottom: 10px; }
  .willow-title { padding-top: 40px; }
  .willow-title .s-title { font-size: 10.7cqw; }
  .willow-images { grid-template-columns: 1fr 1fr; gap: 25px; }
  .willow-images > img { height: 250px; }
  .willow-images > img:last-child { height: 220px; }
  .willow-images > div { grid-column: 1 / -1; grid-row: 2; }
  .willow-script { font-size: 38px; }
  .willow-bottom { font-size: 7px; letter-spacing: .07em; }
  .frame-nav { font-size: 8px; }
  .frame-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .frame-heading .s-title { font-size: 15cqw; }
  .frame-contact-sheet { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 170px; gap: 25px 15px; }
  .frame-primary { grid-column: 1 / -1; grid-row: 1; }
  .frame-contact-sheet figcaption { font-size: 7px; }
  .frame-bottom { flex-direction: column; align-items: flex-start; }
  .route-hero { grid-template-columns: 1fr; gap: 30px; padding-top: 25px; }
  .route-type .s-title { font-size: 11cqw; }
  .route-map { padding: 22px; }
  .route-image { margin-top: 0; height: 230px; }
  .route-image > span { left: 10px; font-size: 7px; padding: 8px; max-width: 90%; }
  .industrial-nav { font-size: 9px; }
  .industrial-nav > span { display: none; }
  .industrial-title .s-title { font-size: 14cqw; }
  .industrial-system { grid-template-columns: 1fr; gap: 25px; }
  .industrial-drawing { min-height: 290px; }
  .industrial-photo { height: 240px; }
  .industrial-note { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; }
  .industrial-note p { grid-row: 2; margin: 0; }
  .industrial-note .s-button { grid-row: 2; }
}