.app-frame { padding-bottom:calc(var(--dock) + 12px + env(safe-area-inset-bottom)) }
.topbar { min-height:78px; display:flex; justify-content:space-between; align-items:center; gap:14px }
.brand,.head-actions { display:flex; align-items:center; gap:11px }
.brand img { flex:none; border-radius:12px }
.brand small,.brand strong { display:block; line-height:1 }
.brand small { font-size:.59rem; letter-spacing:.24em; font-weight:800; margin-bottom:4px }
.brand strong { font-family:var(--display); font-size:1.52rem; letter-spacing:-.055em }
.demo-tag { padding:7px 10px; color:var(--muted); font-size:.72rem; font-weight:750; border:1px solid var(--line); border-radius:99px; white-space:nowrap }
.demo-tag span,.hero-eyebrow span { width:7px; height:7px; display:inline-block; margin-right:4px; border-radius:50%; background:#a96328 }
.hero { min-height:clamp(365px,47vw,500px); position:relative; isolation:isolate; overflow:hidden; display:grid; align-items:center; border-radius:24px; background:var(--ink-deep); color:white }
.hero::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#0d2027 0%,#0d2027ed 18%,#0d2027a8 37%,#0d202733 67%,#0d202714),linear-gradient(0deg,#0d2027a8,transparent 46%) }
.hero-photo { position:absolute; z-index:-2; inset:0 0 0 auto; width:81%; height:100%; object-fit:cover; object-position:58% 50% }
.hero-content { max-width:560px; padding:38px 7% 54px; position:relative }
.hero-eyebrow { color:#ffd297 }
.hero-eyebrow span { background:var(--accent) }
.hero h1 { font-family:var(--display); font-size:clamp(4.1rem,9vw,7.8rem); font-weight:700; line-height:.83; letter-spacing:-.085em; margin:14px 0 20px }
.hero h1 em { font-weight:400; color:var(--accent); padding-right:.07em }
.hero-lede { max-width:285px; color:#edf3ed; font-size:.95rem; margin-bottom:18px }
.hero-index { position:absolute; inset:auto 22px 18px auto; font-size:.63rem; font-weight:800; letter-spacing:.13em; display:flex; align-items:center; gap:8px }
.hero-index i { width:22px; height:1px; background:#ffca7e }
.install-banner { display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:13px; border:1px solid #cfddd6; background:#e9f3eb; padding:12px 13px; margin-top:14px; border-radius:15px }
.install-mark { display:grid; place-items:center; width:42px; height:42px; border-radius:10px; color:#2d6263; background:#d5e8dc }
.install-copy strong,.install-copy span { display:block }
.install-copy strong { font-size:.93rem }
.install-copy span { font-size:.8rem; color:var(--muted) }
.install-button { background:var(--ink); color:white }
.install-button:hover { background:#21505b }
.dismiss { border-color:transparent; background:transparent; width:38px }
.dismiss svg { width:18px; height:18px }
.section { margin-top:clamp(38px,7vw,72px) }
.section-head { display:flex; justify-content:space-between; align-items:end; gap:14px; margin-bottom:19px }
.section-head .eyebrow,.coverage .eyebrow,.quote-section .eyebrow { margin-bottom:8px }
.section-side { font-size:.65rem; letter-spacing:.14em; color:var(--muted); font-weight:750; text-align:right }
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.tile { display:grid; align-content:start; position:relative; min-height:143px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--card); transition:transform .16s,border-color .16s }
.tile:hover { transform:translateY(-3px); border-color:#5a9396 }
.tile-icon { display:grid; place-items:center; height:42px; width:42px; border-radius:11px; margin-bottom:8px; color:#14576a; background:#dcebf0 }
.tile-amber .tile-icon { color:#744512; background:#fae7ca }
.tile-teal .tile-icon { color:#1b665f; background:#dcece1 }
.tile strong { font-size:1.04rem }
.tile small { color:var(--muted); font-size:.79rem }
.tile-arrow { width:17px; height:17px; position:absolute; top:16px; right:14px; color:#547077 }
.service-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px }
.service { padding:16px; border-top:1px solid #c9d2c8 }
.service>span { font-size:.68rem; font-weight:800; color:#35646b }
.service h3 { font-size:1rem; margin:3px 0 4px }
.service p { color:var(--muted); font-size:.85rem }
.service a { display:inline-flex; gap:7px; align-items:center; min-height:44px; font-size:.78rem; font-weight:800; text-decoration:underline; text-underline-offset:3px }
.gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.gallery figure { overflow:hidden; border-radius:15px; border:1px solid var(--line); background:var(--card) }
.gallery img { width:100%; aspect-ratio:1.13; height:auto; object-fit:cover; background:#dce1d8 }
.gallery figcaption { padding:9px 11px; font-size:.8rem; font-weight:750 }
.gallery figcaption span { color:#526d71; margin-right:5px }
.coverage { display:flex; gap:16px; align-items:center; padding:23px; border:1px solid #d3dfd4; border-radius:18px; background:#e7eee4 }
.coverage-icon { display:grid; place-items:center; width:50px; height:50px; color:#286167; border:1px solid #b2cac1; border-radius:12px; flex:none }
.coverage p:not(.eyebrow),.quote-section p:not(.eyebrow) { color:var(--muted); margin-top:9px }
.quote-section { display:grid; grid-template-columns:1fr 1fr; gap:22px; padding:clamp(19px,5vw,38px); background:var(--card); border:1px solid var(--line); border-radius:19px }
.quote-section form { display:grid; gap:6px }
.quote-section form .button { justify-self:start; margin-top:6px }
.quote-section label { display:block; font-size:.85rem; font-weight:800 }
.quote-section :is(select,input,textarea) { width:100%; min-height:44px; border-radius:8px; border:1px solid #97a8a3; background:#fff; color:var(--ink); padding:8px 10px }
.quote-section textarea { resize:vertical }
.quote-result { grid-column:1/-1; border-top:1px solid var(--line); padding-top:14px }
.quote-result .button { margin-top:5px }
.site-footer { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:32px; padding:12px 0; border-top:1px solid #cbd4ca }
.site-footer span { font-weight:800 }
.site-footer small { color:var(--muted) }
.site-footer button { background:none; border:0; color:var(--ink); text-decoration:underline; text-underline-offset:4px; min-height:44px; margin-left:auto }
.dock { position:fixed; z-index:2; inset:auto max(12px,calc((100% - 470px)/2)) max(8px,env(safe-area-inset-bottom)); background:#122c34; color:#f7f3e8; display:grid; grid-template-columns:repeat(4,1fr); padding:5px; border:1px solid #34505a; border-radius:16px; box-shadow:0 6px 26px #10293238 }
.dock a { display:grid; place-content:center; justify-items:center; gap:3px; min-height:48px; border-radius:10px; font-size:.68rem; font-weight:750 }
.dock a[aria-current],.dock a:hover { background:#2e4544; color:#ffcc86 }
.dock svg { width:18px; height:18px }
.panel-dialog { width:min(390px,calc(100% - 30px)); border:1px solid #c5d4ca; border-radius:16px; padding:20px; background:var(--card); color:var(--ink) }
.panel-dialog::backdrop { background:#0d2027a0 }
.panel-dialog h2 { font-size:1.65rem; margin:12px 44px 12px 0 }
.panel-dialog p { color:var(--muted) }
.panel-dialog a { display:flex; align-items:center; min-height:44px; border-bottom:1px solid var(--line) }
.close-dialog { position:absolute; top:9px; right:9px }
.nojs { padding:10px 20px 80px }
@media (max-width:600px) {
  :root { --shell:calc(100% - 24px) }
  .topbar { min-height:66px }
  .brand img { width:39px; height:39px }
  .brand strong { font-size:1.3rem }
  .demo-tag { font-size:.63rem; padding:5px 7px }
  .hero { min-height:355px; border-radius:17px; align-items:end }
  .hero-photo { width:100%; object-position:62% 50% }
  .hero::after { background:linear-gradient(90deg,#0d2027ed,#0d202764 68%,#0d20271a),linear-gradient(0deg,#0d2027df,transparent 64%) }
  .hero-content { padding:28px 18px 40px }
  .hero h1 { font-size:clamp(3.75rem,15vw,5rem); margin-top:12px }
  .hero-lede { max-width:250px; font-size:.85rem }
  .hero-index { display:none }
  .install-banner { gap:7px; padding:9px; grid-template-columns:1fr auto }
  .install-mark { display:none }
  .install-copy { grid-column:1; grid-row:1 }
  .install-button { grid-column:1; grid-row:2; justify-self:start }
  .dismiss { grid-column:2; grid-row:1; align-self:start }
  .section-head { align-items:start }
  .section-side { display:none }
  .tiles,.gallery { gap:7px }
  .tile { padding:8px; min-height:112px; border-radius:11px }
  .tile-icon { width:33px; height:33px; margin-bottom:6px }
  .tile-icon svg { width:19px; height:19px }
  .tile strong { font-size:clamp(.73rem,3.55vw,.93rem); overflow-wrap:anywhere }
  .tile small { font-size:.68rem }
  .tile-arrow { top:10px; right:7px; width:11px; height:11px }
  .service-grid,.quote-section { grid-template-columns:1fr }
  .service { padding:10px 2px 2px }
  .gallery img { aspect-ratio:.82 }
  .gallery figcaption { padding:6px; font-size:.66rem }
  .gallery figcaption span { display:none }
  .coverage { padding:15px }
}
.comparison { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:12px; align-items:center; margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:15px; background:var(--card) }
.comparison>div { padding:4px }
.comparison h3 { font-family:var(--display); font-size:clamp(1.2rem,2.5vw,1.75rem); letter-spacing:-.035em; line-height:1.1; margin:6px 0 }
.comparison p:not(.eyebrow) { color:var(--muted); font-size:.8rem }
.comparison figure { position:relative; overflow:hidden; border-radius:10px; background:#dce1d8 }
.comparison img { aspect-ratio:1.25; width:100%; height:auto; object-fit:cover }
.comparison figcaption { position:absolute; inset:auto auto 5px 5px; padding:2px 7px; background:var(--ink); color:white; border-radius:6px; font-size:.71rem; font-weight:750 }
@media (max-width:600px) {
  .comparison { grid-template-columns:1fr 1fr; gap:7px }
  .comparison>div { grid-column:1/-1 }
}