/* Quiet depth: sea glass, brushed pearl and the existing architectural navy. */
:root {
  --ink: #102f3d;
  --muted: #435e6a;
  --surface-pearl: linear-gradient(125deg, #fffefa 0%, #ffffff 46%, #f0f6f5 100%);
  --surface-mist: linear-gradient(125deg, #f8f7f1 0%, #edf4f3 48%, #e1eef0 100%);
  --surface-ocean: linear-gradient(125deg, #22647a 0%, #19495f 56%, #102f42 100%);
  --surface-selected: linear-gradient(125deg, #f3f9fa 0%, #e3f0f4 100%);
  --shadow-surface: 0 1px 2px #1437480d, 0 8px 24px #1437480c;
}

.header {
  background: linear-gradient(110deg, #fffefaf5, #f5faf9f2);
  border-bottom-color: #c8d9dd;
}
.header.is-scrolled {box-shadow: 0 2px 10px #1437480d;}
.hero-editorial .sun-scene:after {
  background: linear-gradient(90deg, #091e2aef 0%, #133943c9 27%, #173b4545 50%, #15343d00 72%);
}
.hero-editorial .hero-credentials {background: var(--surface-pearl);}
.hero-editorial .hero-actions .button {
  background: linear-gradient(125deg, #fffef9, #e8e1d4);
  border-color: #eee6d7;
  box-shadow: 0 4px 18px #071c2920, 0 1px 0 #ffffffb3 inset;
}
.hero-editorial .hero-actions .button:hover {background: linear-gradient(125deg, #fffef9, #dfd4c0);}
.service-ribbon {background: linear-gradient(105deg, #ffffff, #f7faf8);}
.intro {background: linear-gradient(165deg, #ffffff 40%, #f6f8f4 100%);}
.difference {background: linear-gradient(160deg, #f6f8f4, #ffffff 55%);}

.collection-stage {box-shadow: 0 2px 4px #1437480d, 0 10px 28px #14374812;}
.collection-detail {
  background: radial-gradient(ellipse at 100% 0%, #39778365, transparent 62%), linear-gradient(145deg, #1d4f63, #112e40);
}
.collection-detail .swatch:hover {background-color: #ffffff18;}
.studio-hub {
  background: radial-gradient(ellipse at 0% 12%, #fffdf4b3, transparent 42%), var(--surface-mist);
  border-block: 1px solid #d3e2e3;
}
.studio-hub>.daylight, .studio-hub>.doors {background: transparent;}
.studio-choice-card, #option-panel, .door-workspace, .planner-card, .studio-layout {
  background: var(--surface-pearl);
  border-color: #aebfc6;
  box-shadow: var(--shadow-surface);
}
.studio-choice-card:hover, .studio-choice-card.is-selected {
  background: var(--surface-selected);
  box-shadow: inset 0 0 0 1px var(--blue), 0 6px 18px #1437480f;
}
.options-tabs, .door-tabs {background: linear-gradient(110deg, #e7eeed, #f4f7f5);}
.options-tabs button[aria-selected=true], .door-tabs button[aria-selected=true] {
  background: linear-gradient(160deg, #fffefb, #f1f7f7);
}
#window-options .option-choice[aria-pressed=true], .doors .door-option[aria-pressed=true],
.config-finish[aria-pressed=true], .door-finish[aria-pressed=true], .door-choice[aria-pressed=true] {
  background: var(--surface-selected);
}
.window-operation-controls {
  background: linear-gradient(130deg, #f9fbfa, #eaf3f4);
  border-color: #c3d7dc;
  box-shadow: 0 1px 0 #fff inset;
}
.button-blue, .button-green, .closing .button,
.window-operation-controls button[aria-pressed=true] {
  background: var(--surface-ocean);
  border-color: #21566c;
  color: #fff;
  box-shadow: 0 4px 12px #163f501a, 0 1px 0 #ffffff1f inset;
}
.button-blue:hover, .button-green:hover, .closing .button:hover {
  background: linear-gradient(125deg, #1c5268, #0c293b);
  border-color: #173f53;
}
.studio-choice-action {background: var(--surface-ocean)!important;}
.planner {
  background: radial-gradient(ellipse at 4% 8%, #39778155, transparent 55%), linear-gradient(125deg, #173e50, #102d40 72%, #1c4a59);
}
.planner:before {
  background: linear-gradient(118deg, transparent 48%, #ffffff04 48%, transparent 72%);
}
.planner-card {box-shadow: 0 2px 4px #051b3014, 0 12px 30px #051b3024;}
.closing {
  background: radial-gradient(ellipse at 82% 8%, #e8dcc0a6, transparent 53%), linear-gradient(120deg, #e4eff0, #f9f8f0 65%, #f1f4ee);
}
.closing:after {opacity: .45;}
.footer {background: linear-gradient(115deg, #fffefa, #f3f8f7);}
.mobile-nav {background: var(--surface-pearl);}

/* Crisp type, defined edges and consistent architectural corners. */
body {font-weight: 450;}
h2, h3 {font-weight: 650;}
.hero-editorial h1 {font-weight: 600;}
.hero-editorial h1>span {font-weight: 550;}
.hero-editorial .hero-description {font-weight: 450;}
.hero-editorial .hero-credentials dd {font-weight: 650;}
.desktop-nav a, .footer-main nav a, .text-link {font-weight: 650;}
.eyebrow {font-weight: 750;}
.studio-choice-card strong {font-weight: 650;}
.option-explanation h3, .door-editor h3 {font-weight: 650;}
#window-options .option-choice strong, .doors .door-option strong {font-weight: 700;}
.option-choice>span, .door-option>span {font-weight: 450;}

.button, .window-operation-controls button {
  border-radius: 4px;
  box-shadow: 0 1px 2px #14374814;
}
.button:hover, .window-operation-controls button:hover {box-shadow: 0 3px 8px #1437481a;}
.button:active {box-shadow: none;}
.header-cta {box-shadow: none; border-width: 1.5px;}
.studio-choice-card, .door-workspace, .planner-card, .studio-layout, .collection-stage {border-radius: 6px;}
#option-panel {border-radius: 0 0 6px 6px;}
.options-tabs {border-radius: 6px 6px 0 0;}
#window-options .option-choice, .doors .door-option {
  border-radius: 4px;
  border-color: #9aafb8;
  box-shadow: none;
}
#window-options .option-choice:hover, .doors .door-option:hover {
  border-color: #245970;
  box-shadow: 0 2px 6px #14374810;
}
#window-options .option-choice[aria-pressed=true], .doors .door-option[aria-pressed=true] {
  border-color: #174a61;
  box-shadow: inset 0 0 0 1px #174a61;
}
.window-operation-controls {border-color: #afc5cd; border-radius: 6px;}
.window-operation-status {color: #18485c; font-weight: 700;}
.options-tabs button[aria-selected=true], .door-tabs button[aria-selected=true] {
  border-bottom-color: #174a61;
  box-shadow: none;
}
.options-tabs button .step-copy>span:first-child {font-weight: 650;}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero-editorial h1>span {
    background: linear-gradient(110deg, #fff8e9 0%, #dfc6a1 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
}
@media (max-width: 760px) {
  .hero-editorial .hero-content {
    background: radial-gradient(ellipse at 100% 0%, #37778459, transparent 75%), linear-gradient(130deg, #143d4d, #102c3f);
  }
  .studio-choice-card, #option-panel, .door-workspace {box-shadow: 0 2px 8px #1437480b;}
}
@media (forced-colors: active) {
  .hero-editorial h1>span {background: none; color: CanvasText;}
}
@media print {
  .hero-editorial h1>span {background: none; color: var(--ink);}
  .planner, .planner-card {background: #fff; box-shadow: none;}
}