:root { color-scheme: light; --ink:#10242b; --muted:#5d6d74; --paper:#f4f7f8; --surface:#fff; --line:#d8e2e6; --brand:#0b7b88; --accent:#f2a63c; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
.gallery-skip { position:fixed; top:-100px; left:1rem; z-index:100; background:#fff; padding:.8rem; }
.gallery-skip:focus { top:1rem; }
.gallery-header { border-bottom:1px solid var(--line); background:#fff; }
.gallery-shell { width:min(1220px,calc(100% - 36px)); margin:auto; }
.gallery-nav { min-height:70px; display:flex; align-items:center; gap:1rem; }
.gallery-brand { font-weight:950; text-decoration:none; }
.gallery-back { margin-left:auto; color:var(--muted); }
.gallery-hero { padding:2.4rem 0 1.8rem; }
.eyebrow { margin:0 0 .8rem; color:var(--brand); font-size:.75rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1 { max-width:850px; margin:0; font-size:clamp(2.35rem,5vw,4.35rem); line-height:.96; letter-spacing:-.045em; }
.gallery-lede { max-width:760px; color:var(--muted); font-size:1.08rem; line-height:1.7; }
.niche-tabs { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem; }
.niche-tabs a { padding:.7rem .9rem; border:1px solid var(--line); border-radius:999px; background:#fff; text-decoration:none; font-weight:800; font-size:.86rem; }
.niche-tabs a[aria-current="page"] { background:var(--ink); border-color:var(--ink); color:#fff; }
.selection-note { display:flex; justify-content:space-between; gap:1rem; align-items:center; margin:0 0 1.2rem; padding:1rem 1.15rem; border:1px solid #a7d7dc; background:#eaf8fa; }
.selection-note p { margin:0; }
.compare-button { min-height:44px; padding:.65rem 1rem; border:0; background:var(--ink); color:#fff; font-weight:850; cursor:pointer; }
.compare-button:disabled { opacity:.45; cursor:not-allowed; }
.design-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.4rem; padding-bottom:5rem; }
.design-card { overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:0 16px 40px rgba(19,44,52,.07); }
.design-visual { position:relative; min-height:390px; padding:1rem 110px 1rem 1rem; background:#dce7ea; overflow:hidden; }
.design-visual .design-desktop { width:100%; height:358px; object-fit:cover; object-position:top; border:6px solid #fff; box-shadow:0 14px 34px rgba(7,27,33,.18); }
.design-visual .design-mobile { position:absolute; right:18px; bottom:16px; width:116px; height:252px; object-fit:cover; object-position:top; border:6px solid #fff; border-radius:16px; box-shadow:0 14px 34px rgba(7,27,33,.28); }
.design-body { padding:1.35rem; }
.design-head { display:flex; gap:1rem; justify-content:space-between; align-items:start; }
.design-head h2 { margin:0; font-size:1.55rem; }
.design-head label { white-space:nowrap; font-size:.8rem; font-weight:800; }
.design-body p { color:var(--muted); line-height:1.6; }
.tag-row { display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0; }
.tag { padding:.35rem .55rem; background:#eef3f4; color:#41545b; font-size:.72rem; font-weight:800; }
.design-actions { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.button { min-height:47px; display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; border:1px solid var(--line); background:#fff; color:var(--ink); text-decoration:none; font-weight:900; cursor:pointer; }
.button.primary { background:var(--brand); border-color:var(--brand); color:#fff; }
.gallery-footer { padding:2rem 0; background:#071b21; color:#fff; }
.gallery-footer p { color:rgba(255,255,255,.68); }
dialog { width:min(760px,calc(100vw - 26px)); max-width:calc(100vw - 26px); max-height:calc(100vh - 28px); padding:0; border:0; overflow-x:hidden; background:#fff; color:var(--ink); box-shadow:0 30px 100px rgba(0,0,0,.35); }
dialog::backdrop { background:rgba(3,16,20,.72); backdrop-filter:blur(5px); }
.dialog-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; gap:1rem; align-items:start; padding:1.25rem; border-bottom:1px solid var(--line); background:#fff; }
.dialog-head h2,.dialog-head p { margin:0; }
.dialog-head p { margin-top:.35rem; color:var(--muted); }
.dialog-close { width:44px; height:44px; border:1px solid var(--line); background:#fff; font-size:1.4rem; cursor:pointer; }
.design-intake { padding:1.25rem; }
.intake-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.intake-grid > * { min-width:0; }
.intake-grid label { display:grid; gap:.4rem; font-weight:780; }
.intake-grid .wide { grid-column:1/-1; }
.intake-grid small { color:var(--muted); line-height:1.4; font-weight:500; }
.intake-grid input,.intake-grid select,.intake-grid textarea { width:100%; max-width:100%; min-width:0; min-height:48px; padding:.75rem; border:1px solid var(--line); background:#f8fafb; color:var(--ink); }
.intake-grid textarea { min-height:115px; resize:vertical; }
.intake-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.25rem; }
.intake-status { min-height:1.4rem; color:var(--brand); font-weight:800; }
.compare-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding:1.25rem; }
.compare-card { padding:1rem; border:1px solid var(--line); }
.compare-card h3 { margin-top:0; }
.compare-card ul { padding-left:1.15rem; color:var(--muted); line-height:1.6; }
.customer-boundary { margin-top:1rem; padding:1rem; border-left:4px solid var(--brand); background:#eef8f9; color:#345159; line-height:1.55; }
@media(max-width:800px){.design-grid{grid-template-columns:1fr}.compare-grid{grid-template-columns:1fr}.selection-note{align-items:flex-start;flex-direction:column}.compare-button{width:100%}.design-visual{min-height:330px}.design-visual .design-desktop{height:298px}}
@media(max-width:560px){.gallery-shell{width:min(100% - 24px,1220px)}.gallery-hero{padding:2rem 0 1.4rem}.design-actions,.intake-grid{grid-template-columns:1fr}.intake-grid .wide{grid-column:auto}.design-head{display:block}.design-head label{display:block;margin-top:.7rem}.design-visual{min-height:300px;padding:.7rem 76px .7rem .7rem}.design-visual .design-desktop{height:278px;border-width:4px}.design-visual .design-mobile{right:9px;bottom:10px;width:86px;height:187px;border-width:4px}}