/* Dayton studio: layout controls occupy real rows, never floating over each other. */
.page-siding-studio { --navy:#12334d; --navy-deep:#0a1628; --text:#243b50; --text-soft:#536879; --safety:#16768a; --safety-dark:#105767; --caution:#6de5ed; --paper:#f3f7f8; --steel:#5e8195; --font-head:var(--font-heading); --ease-build:ease; --shadow-soft:0 8px 24px #143a5c0d; --shadow-strong:0 16px 42px #143a5c1a; }
.studio-skip { position:fixed; top:-100px; left:16px; z-index:10000; background:white; padding:12px; }
.studio-skip:focus { top:10px; }
.studio-hero { padding:125px 24px 56px; background:linear-gradient(130deg,#0a1628,#16465d); color:#dceaf2; }
.studio-hero-inner { max-width:1360px; margin:auto; display:grid; grid-template-columns:1.05fr 1fr; gap:60px; align-items:center; }
.studio-eyebrow { color:#7ce3ec; letter-spacing:.13em; font-size:.72rem; font-weight:800; }
.studio-hero h1 { color:white; font-size:clamp(2.3rem,4.3vw,4.5rem); line-height:1.08; letter-spacing:-.045em; margin:20px 0; }
.studio-hero h1 span { color:#86dbe3; }
.studio-hero p { max-width:580px; }
.studio-hero figure { position:relative; }
.studio-hero figure img { width:100%; height:410px; object-fit:cover; border-radius:22px; }
.studio-hero figcaption { padding:12px 0; font-size:.8rem; color:#bbd1de; }
.studio-hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin:26px 0 18px; }
.studio-contact { color:white; font-weight:700; }
.studio-fine { font-size:.8rem; color:#bbd1de; }
.studio-breadcrumb,.page-content { max-width:1440px; margin:auto; padding:22px 32px; }
.studio-breadcrumb { font-size:.82rem; }
.page-content { padding-top:8px; }
.page-content > .panel { margin-bottom:40px; }
.page-content .panel-intro p { margin-top:12px; }
.page-content .about-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.page-content .about-card { background:white; padding:24px; border:1px solid #dce6eb; border-radius:14px; }
.page-content .about-card h3 { margin-bottom:12px; }
.page-content .section-title { margin-bottom:20px; }
.page-content .trust-panel { padding:28px; background:#e4eef3; border-radius:18px; }
.page-content .hero-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:16px; }
.page-content .hero-button { background:#12334d; color:white; border-radius:9px; padding:12px 20px; }
.gutter-intro h3 { font-size:1.45rem; margin:8px 0 12px; }
.gutter-intro p,.gutter-service-note p { font-size:.86rem; }
.gutter-service-note { padding:16px; border-radius:12px; background:#edf5f6; }
.gutter-service-note h4 { margin-bottom:8px; }
.gutter-service-note a { font-size:.82rem; font-weight:700; color:#105767; }
.gutter-view-actions { display:grid; gap:8px; }
.ss { grid-template-columns:minmax(0,1fr) minmax(340px,390px); }
.ss__stage { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto minmax(300px,1fr) auto auto; gap:8px; padding:12px; height:720px; min-height:0; aspect-ratio:auto; background:#e8f0f4; }
.ss__stage::after { display:none; }
.ss__viewport,.ss__photo { position:relative; inset:auto; grid-column:1; grid-row:3; min-height:0; overflow:hidden; border-radius:12px; }
.ss__hud { position:static; inset:auto; max-width:100%; min-width:0; flex-wrap:wrap; gap:8px; grid-column:1; }
.ss__hud--tl { grid-row:1; }
.ss__hud--tr { grid-row:2; }
.ss__hud--bl { grid-row:4; }
.ss__hud--br { grid-row:5; }
.ss__hud--tr .ss__group { display:flex; }
.ss__group,.ss__modes { flex-wrap:wrap; border-radius:14px; max-width:100%; }
.ss__group button,.ss__mode { min-height:44px; padding:8px 12px; }
.ss__icon { width:44px; height:44px; flex:0 0 44px; }
.ss__readout { flex-wrap:wrap; border-radius:12px; }
.ss__meta { white-space:normal; }
.ss__tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; flex-shrink:0; }
.ss__tab,.ss__tab[data-tab="play"] { min-width:0; min-height:44px; white-space:normal; letter-spacing:0; }
.ss__panels { scrollbar-gutter:stable; overflow-anchor:none; }
.ss__panel,.ss__extra { overflow-anchor:none; }
.ss__panel { overflow-wrap:anywhere; }
.ss__extra .switch { position:relative; min-height:44px; width:100%; }
.ss .switch { position:relative; min-height:44px; }
.ss .switch input { width:40px; height:30px; left:0; top:7px; margin:0; }
.ss .switch input:focus-visible + .switch__track { outline:3px solid #13788d; outline-offset:4px; }
.ss__mini { min-width:36px; min-height:36px; }
.ss button:focus-visible,.ss a:focus-visible { outline:3px solid #148aa1; outline-offset:3px; }
.ss__status,.ss__badge { top:150px; max-width:calc(100% - 28px); }
.ss__stage.is-full { height:100dvh; min-height:0; grid-template-rows:auto auto minmax(80px,1fr) auto auto; }
.ss__photo .photo-drop { position:absolute; inset:0; }
@media(max-width:1180px) {
  .ss { grid-template-columns:minmax(0,1fr); }
  .ss__stage { height:660px; }
  .ss__dock { height:auto; min-height:0; }
  .ss__panels { overflow:visible; }
}
@media(max-width:760px) {
  .studio-hero { padding:104px 20px 30px; }
  .studio-hero-inner { grid-template-columns:1fr; gap:28px; }
  .studio-hero figure img { height:240px; }
  .studio-breadcrumb,.page-content { padding-left:12px; padding-right:12px; }
  .page-content .about-grid { grid-template-columns:1fr; }
  .ss__stage { height:660px; padding:8px; grid-template-rows:auto auto minmax(260px,1fr) auto auto; }
  .ss__group button,.ss__mode { font-size:.67rem; letter-spacing:.015em; padding:8px 9px; }
  .ss__hud--tr { gap:6px; }
  .ss__hud--tr .ss__group { width:100%; }
  .ss__readout .ss__meta { display:none; }
  .ss__panels { padding:14px; }
  .ss__tabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ss__actions { padding:12px; }
  .ss__btn { white-space:normal; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }