@import url('https://fonts.googleapis.com/css2?family=Lora:wght@500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Poppins:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root { --ink:#172238; --paper:#e8eaf1; --white:#fffefa; --blue:#3454f4; --coral:#e76650; --soft-blue:#edf0ff; --muted:#5c6675; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:15px/1.45 'Poppins',sans-serif; }
body::selection { background:#c7d3ff; color:var(--ink); }
a { color:inherit; }
button,input,select,textarea { color:inherit; font:inherit; }
button { cursor:pointer; }
fieldset { min-width:0; margin:0; padding:0; border:0; }
legend { padding:0; font-size:12px; font-weight:700; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.site-header { max-width:1360px; margin:auto; padding:23px 34px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; background:var(--paper); }
.wordmark { font-size:18px; font-weight:700; letter-spacing:-.04em; text-decoration:none; }
.wordmark span { color:var(--coral); padding:0 2px; }
nav { display:flex; align-items:center; gap:25px; }
nav a { color:#566172; font-size:13px; text-decoration:none; }
nav a:hover { color:var(--ink); }
.nav-button { padding:10px 15px; background:var(--ink); color:var(--white); }
.nav-button:hover { color:var(--white); }
.nav-toggle { display:none; align-items:center; justify-content:center; width:38px; height:38px; padding:0; border:0; background:transparent; color:var(--ink); }
.nav-toggle svg { display:block; }
main { max-width:1360px; margin:auto; padding:0 34px; }
.page-intro,.contact-intro { padding:38px 0 31px; }
h1,h2,h3,p { margin-top:0; }
p { text-wrap:pretty; }
h1 { margin:0; font-size:clamp(2.75rem,5vw,5rem); font-weight:600; letter-spacing:-.04em; line-height:.98; }
.name-control input { width:100%; max-width:340px; padding:13px 14px; border:0; border-radius:4px; background:#dcddd9; outline:0; }
.name-control input::placeholder { color:#808681; }
.name-control input:focus { box-shadow:0 0 0 3px rgba(52,84,244,.26); }
.showroom { padding:30px 32px 34px; background:var(--white); }
.control-bar { display:grid; grid-template-columns:1.35fr .65fr; gap:28px 30px; align-items:start; }
.control-group legend { margin-bottom:12px; }
.name-control { grid-column:1 / -1; grid-row:1; }
.structure-control { grid-column:1; grid-row:2; }
.type-control { grid-column:2; grid-row:2; }
.palette-control { grid-column:1 / -1; grid-row:3; }
.layout-tabs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.layout-tab { min-width:0; min-height:72px; padding:11px 12px; border:0; border-radius:4px; background:#f0f0ed; text-align:left; transition:background .16s ease,color .16s ease; }
.layout-tab:hover { background:#e5e8ff; }
.layout-tab.selected { background:var(--blue); color:white; }
.layout-tab b { display:block; font-size:13px; line-height:1.2; }
.layout-tab span { display:block; margin-top:7px; color:#6d7480; font-size:11px; line-height:1.2; }
.layout-tab.selected span { color:#dbe2ff; }
.palette-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:14px 10px; }
.palette-option { min-width:0; padding:0; border:0; background:transparent; text-align:left; }
.swatch { display:block; width:100%; height:40px; border-radius:3px; background:linear-gradient(90deg,var(--a) 0 62%,var(--b) 62%); transition:transform .16s ease; }
.palette-option:hover .swatch { transform:translateY(-2px); }
.palette-option.selected .swatch { outline:2px solid var(--ink); outline-offset:3px; }
.palette-option span { display:block; margin-top:6px; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.signage{--a:#16233f;--b:#b8935a}.laundry{--a:#24483d;--b:#e8dcc2}.receipt{--a:#201d1a;--b:#d95b43}.porcelain{--a:#174c62;--b:#a9d7d5}.workwear{--a:#3c3026;--b:#d8a44a}.citrus{--a:#3e4a2f;--b:#d8e26b}.rosewood{--a:#4b2630;--b:#e6b5ad}.slate{--a:#2e4655;--b:#ed754d}.poppy{--a:#8d2634;--b:#f4a4a0}.moss{--a:#415b3f;--b:#cb7f5a}.cobalt{--a:#2546d8;--b:#f1c75b}.lilac{--a:#5a3b80;--b:#d9c6ef}.teal{--a:#005d5d;--b:#7fd5c1}.denim{--a:#2e5487;--b:#c4d9ed}.terracotta{--a:#a64f37;--b:#f0c6a1}.charcoal{--a:#272a30;--b:#b8d2bd}.electric{--a:#3b2ee8;--b:#c8ff3d}.tangerine{--a:#8c2e0b;--b:#ffb13b}.pool{--a:#005e78;--b:#67e8e1}.berry{--a:#7a174b;--b:#ff8ec4}.royal{--a:#1e3a8a;--b:#ff6b6b}.violet{--a:#5b21b6;--b:#f0abfc}.jungle{--a:#075f44;--b:#ffe047}.cherry{--a:#9f1239;--b:#ffd2dc}
.custom-palette { display:grid; grid-template-columns:1fr auto auto; gap:18px; align-items:center; margin-top:22px; padding:17px 18px; background:#f0f0ed; }
.custom-palette.selected { box-shadow:inset 0 0 0 2px var(--blue); }
.custom-palette-copy strong,.custom-palette-copy span { display:block; }
.custom-palette-copy strong { margin-bottom:3px; font-size:13px; }
.custom-palette-copy span { color:#5c6675; font-size:11px; }
.custom-palette label { display:grid; grid-template-columns:auto 54px 67px; gap:9px; align-items:center; font-size:11px; font-weight:600; }
.custom-palette input[type="color"] { width:54px; height:40px; padding:0; border:0; border-radius:3px; background:transparent; }
.custom-palette input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.custom-palette input[type="color"]::-webkit-color-swatch { border:0; border-radius:3px; }
.custom-palette output { color:#626c7a; font-size:11px; font-weight:500; font-variant-numeric:tabular-nums; }
.type-options { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.type-option { min-width:0; min-height:72px; padding:10px 6px; border:0; border-radius:4px; background:#f0f0ed; text-align:center; }
.type-option:hover { background:#e5e8ff; }
.type-option.selected { background:var(--soft-blue); color:var(--blue); box-shadow:inset 0 0 0 2px var(--blue); }
.type-sample { display:block; margin-bottom:7px; font-size:25px; font-style:normal; line-height:1; }
.type-sample.poppins { font-family:'Poppins',sans-serif; font-weight:600; }
.type-sample.source { font-family:'Source Sans 3',sans-serif; font-weight:600; }
.type-sample.playfair { font-family:'Playfair Display',serif; }
.type-sample.lora { font-family:'Lora',serif; font-weight:600; }
.type-option span { display:block; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.preview-toolbar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:29px; margin-bottom:12px; }
.preview-toolbar h2 { margin:0; font-size:16px; font-weight:600; letter-spacing:-.025em; }
.toolbar-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:14px 18px; margin-bottom:12px; }
.toolbar-actions a { color:var(--blue); font-size:12px; font-weight:700; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.toolbar-actions .continue-design-button { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 16px; background:var(--blue); color:white; text-decoration:none; white-space:nowrap; border-radius:2px; }
.continue-design-button:hover { background:#223fd0; }
.toolbar-actions .open-specimen-button { display:inline-flex; align-items:center; gap:6px; justify-content:center; min-height:38px; padding:0 16px; background:transparent; color:var(--ink); border:1.5px solid var(--ink); text-decoration:none; white-space:nowrap; border-radius:2px; font-weight:600; }
.open-specimen-button:hover { background:var(--ink); color:#fff; }
.preview-pages { display:flex; align-items:center; gap:2px; padding:3px; background:#ecece8; }
.preview-page { min-height:34px; padding:0 13px; border:0; background:transparent; color:#5c6675; font-size:12px; font-weight:600; }
.preview-page:hover { color:var(--ink); background:#e1e2de; }
.preview-page.selected { background:var(--white); color:var(--ink); box-shadow:0 1px 4px rgba(23,34,56,.12); }
.preview-frame { overflow:hidden; border-radius:4px; background:#e1e1dd; box-shadow:0 20px 40px rgba(23,34,56,.12); }
.frame-bar { height:29px; padding:0 12px; display:flex; align-items:center; gap:5px; background:#d7d7d1; }
.frame-bar span { width:7px; height:7px; border-radius:50%; background:#8e918e; }
iframe { display:block; width:100%; height:680px; border:0; background:var(--white); }
.pricing { padding:100px 0 88px; }
.pricing > h2 { margin:0 0 28px; font-size:clamp(2.5rem,4vw,4.5rem); font-weight:600; letter-spacing:-.04em; line-height:.95; }
.tier-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }
.tier-card { padding:30px 24px; background:var(--white); border:1px solid #d7d9d2; border-radius:10px; transition:border-color .15s ease,box-shadow .15s ease; }
.tier-card:hover { border-color:var(--blue); box-shadow:0 0 0 3px rgba(52,84,244,.16); }
.tier-card h3 { margin:0 0 8px; font-size:19px; font-weight:600; letter-spacing:-.02em; }
.tier-desc { margin:0 0 22px; min-height:38px; color:#5c6675; font-size:13px; line-height:1.4; }
.tier-price { margin-bottom:22px; font-size:28px; font-weight:600; letter-spacing:-.03em; }
.tier-cta { display:inline-flex; align-items:center; justify-content:center; width:100%; min-height:44px; background:transparent; color:var(--ink); border:1px solid var(--ink); border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; }
.tier-cta:hover { background:var(--ink); color:var(--white); }
.compare-wrap { overflow-x:auto; background:var(--white); }
.compare-table { width:100%; min-width:760px; border-collapse:collapse; table-layout:fixed; }
.compare-table th,.compare-table td { padding:14px 16px; text-align:left; vertical-align:middle; }
.compare-table thead th { padding-top:18px; padding-bottom:16px; border-bottom:1px solid #d7d9d2; color:#5c6675; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.compare-table thead th.compare-feature-col { width:26%; color:var(--ink); font-size:13px; text-transform:none; letter-spacing:0; }
.compare-table tbody tr { border-bottom:1px solid #e7e8e2; }
.compare-table tbody th { color:var(--ink); font-size:13px; font-weight:500; }
.compare-table tbody td { font-size:13px; font-weight:500; color:#5c6675; }
.compare-table .yes { color:var(--ink); font-weight:700; }
.compare-table .no { color:#c2c5bd; }
.care { display:grid; grid-template-columns:.85fr 2.15fr; gap:35px; align-items:end; margin-top:24px; padding:31px 32px 25px; background:var(--ink); color:var(--white); }
.care-heading h3 { margin:0; font-size:24px; font-weight:600; letter-spacing:-.04em; line-height:1.05; }
.care-table-wrap { overflow-x:auto; }
.care-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.care-table th,.care-table td { padding:13px 16px; text-align:left; vertical-align:middle; }
.care-table thead th { padding-top:0; padding-bottom:11px; color:#8994ab; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid rgba(255,255,255,.16); }
.care-table thead th.care-feature-col { color:transparent; }
.care-table tbody th { color:#bfc8d8; font-size:13px; font-weight:600; }
.care-table tbody td { font-size:20px; font-weight:600; letter-spacing:-.03em; }
.care-table tbody td small { margin-left:2px; color:#bfc8d8; font-size:12px; font-weight:500; letter-spacing:0; }
.care-table tbody tr + tr th,.care-table tbody tr + tr td { border-top:1px solid rgba(255,255,255,.1); }
.care-note { grid-column:2; margin:0; color:#bfc8d8; font-size:13px; }
.site-footer { margin-top:40px; padding:40px 34px 26px; background:var(--ink); color:#fff; }
.site-footer .wordmark { color:#fff; }
.footer-inner { max-width:1360px; margin:auto; }
.footer-top { display:flex; justify-content:flex-start; gap:100px; padding-bottom:30px; }
.footer-brand { max-width:280px; }
.footer-brand p { margin:10px 0 0; color:#b6bdcc; font-size:12px; line-height:1.5; }
.footer-links { display:flex; gap:60px; }
.footer-col { display:flex; flex-direction:column; gap:10px; }
.footer-col span { color:#8994ab; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.footer-col a { color:#d3d8e4; font-size:13px; text-decoration:none; }
.footer-col a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid #384057; color:#8994ab; font-size:11px; }
.home-hero { padding:64px 0 84px; }
.home-copy h1 { max-width:1300px; font-size:clamp(3.4rem,8.5vw,7.75rem); }
.home-actions { display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:34px; }
.primary-action,.secondary-action { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-size:13px; font-weight:700; }
.primary-action { min-height:46px; padding:0 18px; background:var(--blue); color:white; }
.primary-action:hover { background:#223fd0; }
.secondary-action { min-height:46px; padding:0 17px; background:var(--white); color:var(--blue); border:1.5px solid var(--blue); }
.secondary-action:hover { background:var(--soft-blue); }
.price-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin:26px 0; padding:38px 40px; background:var(--blue); color:white; }
.price-banner h2 { margin:0; font-size:clamp(1.9rem,3.2vw,2.6rem); font-weight:700; letter-spacing:-.03em; }
.price-banner-actions { display:flex; align-items:center; gap:18px; }
.banner-action { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; text-decoration:none; font-size:13px; font-weight:700; }
.banner-outline { background:transparent; color:white; border:1.5px solid white; }
.banner-outline:hover { background:rgba(255,255,255,.12); }
.banner-solid { background:var(--white); color:var(--blue); }
.banner-solid:hover { background:var(--soft-blue); }
.home-details { padding:44px 0 36px; }
.home-details-inner { display:flex; flex-direction:column; gap:34px; }
.home-details h2 { margin:0; font-size:clamp(2.5rem,4vw,4.5rem); font-weight:600; letter-spacing:-.04em; line-height:.95; }
.detail-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.detail-card { padding:28px; background:var(--white); }
.detail-icon { display:block; margin-bottom:20px; color:#5c6675; }
.detail-card strong { display:block; margin:0 0 7px; font-size:17px; font-weight:600; letter-spacing:-.02em; }
.detail-card span { display:block; color:#5c6675; font-size:14px; text-wrap:pretty; }
.home-examples { padding:50px 0 98px; }
.examples-heading { margin-bottom:22px; }
.examples-heading h2 { max-width:none; margin:0; font-size:clamp(2.5rem,4vw,4.5rem); font-weight:600; letter-spacing:-.04em; line-height:.95; white-space:nowrap; }
.example-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 28px; }
.example-item { min-width:0; }
.example-card-link { display:block; text-decoration:none; color:inherit; }
.example-browser { display:block; background:#d7d7d1; border:2px solid transparent; box-shadow:0 18px 42px rgba(23,34,56,.12); transition:border-color .15s ease, transform .1s ease; }
.example-card-link:hover .example-browser,
.example-card-link:focus-visible .example-browser { border-color:var(--blue); animation:card-bounce .5s ease; }
.example-bar { display:flex; align-items:center; gap:5px; height:26px; padding:0 11px; background:#d7d7d1; }
.example-bar i { width:6px; height:6px; border-radius:50%; background:#8e918e; }
.example-frame { container-type:inline-size; aspect-ratio:1440/900; overflow:hidden; background:#fff; }
.example-frame iframe { display:block; width:1440px; height:900px; border:0; transform-origin:top left; transform:scale(calc(100cqw / 1440px)); pointer-events:none; }
.example-meta { display:flex; align-items:center; gap:10px; margin-top:16px; }
.example-name { font-size:17px; font-weight:600; letter-spacing:-.025em; color:var(--ink); }
.example-arrow { display:flex; align-items:center; justify-content:center; flex:none; width:30px; height:30px; border:1.5px solid var(--blue); border-radius:50%; color:var(--blue); font-size:14px; transition:background-color .15s ease, color .15s ease; }
.example-card-link:hover .example-arrow { background:var(--blue); color:var(--white); }
@keyframes card-bounce {
  0%,100% { transform:translateY(0); }
  30% { transform:translateY(-10px); }
  55% { transform:translateY(0); }
  75% { transform:translateY(-4px); }
}
.home-next { display:grid; grid-template-columns:.9fr 1.25fr; gap:48px; align-items:start; padding:62px 53px 57px; background:var(--blue); color:white; }
.home-next-heading { display:flex; flex-direction:column; align-items:start; }
.home-next h2 { max-width:520px; margin:0 0 14px; font-size:clamp(2.3rem,3.5vw,4rem); font-weight:600; letter-spacing:-.04em; line-height:.95; }
.home-next p { margin:0; color:#eef1ff; font-size:12px; }
.home-next-heading .secondary-action { margin-top:28px; }
.home-process-list { display:grid; grid-template-columns:repeat(2,1fr); gap:25px 30px; margin:1px 0 0; padding:0; list-style:none; }
.home-process-list li { display:grid; grid-template-columns:25px 1fr; gap:10px; }
.home-process-list li > span { display:flex; align-items:center; justify-content:center; width:25px; height:25px; border:1px solid rgba(255,255,255,.55); border-radius:50%; font-size:11px; font-weight:700; }
.home-process-list strong { display:block; margin:2px 0 5px; font-size:13px; }
.home-process-list li p { min-height:2.9em; }
.pricing-start { margin-top:22px; }

.about-why { padding:8px 0 44px; }
.about-why h2 { margin:0 0 26px; font-size:32px; font-weight:600; letter-spacing:-.03em; }
.why-list { border-top:1px solid #d7d9d2; }
.why-row { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:24px 4px; border-bottom:1px solid #d7d9d2; }
.why-lead { margin:0; font-size:17px; font-weight:700; letter-spacing:-.02em; }
.why-row p:not(.why-lead) { margin:0; color:var(--muted); font-size:15px; line-height:1.6; }
.why-row a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

.about-statement { max-width:640px; margin:0 auto; padding:54px 0 58px; text-align:center; }
.about-statement p { margin:0 0 22px; font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.35; }

.about-faq { padding:46px 0 30px; }
.about-faq h2 { margin:0 0 26px; font-size:32px; font-weight:600; letter-spacing:-.03em; }
.faq { display:flex; flex-direction:column; gap:14px; max-width:760px; }
.faq-item { padding:26px 30px; border:1px solid #d7d9d2; border-radius:8px; }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; gap:20px; list-style:none; font-size:17px; font-weight:700; letter-spacing:-.01em; cursor:pointer; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; flex:none; display:flex; align-items:center; justify-content:center; width:22px; height:22px; font-size:22px; font-weight:400; line-height:1; color:var(--blue); transition:transform .2s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item[open] summary { margin-bottom:14px; }
.faq-item p { margin:0; color:var(--muted); font-size:15px; line-height:1.65; }
.faq-item p a { color:var(--blue); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

#intake-form { max-width:1180px; margin:0 auto; }
.contact-intro p { max-width:610px; margin:21px 0 0; color:#5b6676; font-size:16px; }
.contact-redirect { padding-top:18px; font-size:14px; }
.contact-redirect a { color:var(--blue); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.intake-form { padding-bottom:85px; }
.intake-section { margin-bottom:18px; padding:32px; background:var(--white); }
.intake-section legend { float:left; width:100%; margin:0 0 22px; font-size:24px; font-weight:600; letter-spacing:-.035em; }
.field-grid { clear:both; display:grid; gap:20px; }
.two-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
.full-width { grid-column:1 / -1; }
.form-field span { display:block; margin-bottom:7px; font-size:12px; font-weight:600; }
.form-field small { color:#747d89; font-size:10px; font-weight:500; }
.form-field input:not([type="checkbox"]):not([type="radio"]),.form-field select,.form-field textarea { width:100%; min-height:46px; padding:12px 13px; border:0; border-radius:4px; background:#e9eae6; outline:0; }
.form-field input[type="checkbox"],.form-field input[type="radio"] { width:16px; height:16px; }
.form-field textarea { resize:vertical; min-height:112px; overflow-x:hidden; word-break:break-word; }
.form-field select { appearance:auto; }
.form-field input:focus,.form-field select:focus,.form-field textarea:focus { box-shadow:0 0 0 3px rgba(52,84,244,.26); }
.form-field input::placeholder,.form-field textarea::placeholder { color:#777f7a; opacity:1; }
.form-field input[type="file"] { padding:10px 13px; font-size:13px; }
.photo-previews { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.photo-thumb { width:72px; height:72px; border-radius:4px; background-position:center; background-size:cover; background-color:#e9eae6; }
.hours-grid { display:grid; gap:8px; margin-top:8px; }
.hours-row { display:grid; grid-template-columns:100px 1fr auto 1fr 90px; align-items:center; gap:10px; padding:8px 12px; background:#e9eae6; border-radius:4px; }
#hours-grid input[type="time"] { min-height:38px; padding:8px 10px; border:1px solid #d3d5cd; border-radius:4px; background:var(--white); outline:0; font-size:13px; text-align:center; }
#hours-grid input[type="time"]:hover { border-color:var(--blue); }
#hours-grid input[type="time"]:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(52,84,244,.26); }
#hours-grid input[type="time"]::-webkit-calendar-picker-indicator { cursor:pointer; opacity:.55; }
#hours-grid input[type="time"]:hover::-webkit-calendar-picker-indicator { opacity:.9; }
.hours-day { font-size:13px; font-weight:600; }
.hours-to { color:#5c6675; font-size:12px; text-align:center; }
.hours-closed { display:flex; align-items:center; gap:6px; color:#566172; font-size:12px; font-weight:600; white-space:nowrap; }
.hours-row:has(.hours-closed input:checked) input[type="time"] { opacity:.4; pointer-events:none; }
.social-fields { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px; }
.checkbox-field { clear:both; display:flex; align-items:start; gap:10px; min-height:0; }
.checkbox-field input { margin-top:3px; }
.checkbox-field span { font-size:13px; font-weight:500; }
.color-picker { display:grid; grid-template-columns:repeat(8,1fr); gap:14px 10px; margin-top:8px; }
.color-option { position:relative; min-width:0; }
.color-option input[type="radio"] { position:absolute; width:1px; height:1px; opacity:0; }
.color-option .swatch { display:block; width:100%; height:36px; border-radius:3px; font-style:normal; transition:transform .16s ease; }
.color-option:hover .swatch { transform:translateY(-2px); }
.color-option input:checked + .swatch { outline:2px solid var(--ink); outline-offset:2px; }
.color-option input:focus-visible + .swatch { outline:2px solid var(--blue); outline-offset:2px; }
.color-option span { display:block; margin:6px 0 0; overflow:hidden; font-size:11px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.custom-swatch { position:relative; background:conic-gradient(from 180deg,#2546d8,#c8ff3d,#ed754d,#2546d8); }
.custom-swatch::after { content:"+"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.4); }
#custom-color-fields[hidden] { display:none; }
.website-fields { margin-top:24px; }
.form-helper-btn { display:inline-block; margin-top:17px; padding:10px 18px; border:1.5px solid var(--blue); border-radius:2px; color:var(--blue); font-size:12px; font-weight:700; text-decoration:none; }
.form-helper-btn:hover { background:var(--blue); color:#fff; }
.form-note { margin:17px 0 0; color:#59616c; font-size:12px; }
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:15px; padding:7px 0 0; }
.form-actions p { flex-basis:100%; margin:0; color:#5c6675; font-size:11px; }
.submit-button,.clear-button { min-height:47px; padding:0 18px; border:0; border-radius:0; font-size:13px; font-weight:700; }
.submit-button { background:var(--blue); color:white; }
.submit-button:hover { background:#223fd0; }
.clear-button { background:transparent; color:#5c6675; text-decoration:underline; text-underline-offset:4px; }
.form-success { margin-top:21px; padding:20px 22px; background:#dfe4ff; }
.form-success strong { display:block; font-size:15px; }
:focus-visible { outline:3px solid var(--coral); outline-offset:3px; }
@media (max-width:1080px) { .control-bar { grid-template-columns:1fr 1fr; } .name-control { grid-column:1 / -1; grid-row:1; } .structure-control { grid-column:1; grid-row:2; } .type-control { grid-column:2; grid-row:2; } .palette-control { grid-column:1 / -1; grid-row:3; } .palette-grid { grid-template-columns:repeat(8,1fr); } .type-options { max-width:none; } .care { grid-template-columns:1fr; } .care-note { grid-column:auto; } .home-next { grid-template-columns:1fr 1.4fr; } }
@media (max-width:760px) { .example-grid { grid-template-columns:1fr; gap:42px; } }
@media (max-width:680px) { .site-header,main { padding-left:18px; padding-right:18px; } .site-header { padding-top:17px; padding-bottom:17px; } .nav-toggle { display:flex; } .site-header nav { position:absolute; top:calc(100% + 8px); right:18px; left:auto; z-index:20; min-width:210px; width:max-content; max-width:calc(100vw - 36px); flex-direction:column; align-items:stretch; gap:0; padding:6px 16px 14px; background:var(--white); border-radius:6px; box-shadow:0 16px 32px rgba(23,34,56,.16); display:none; } .site-header nav.nav-open { display:flex; } .site-header nav a { padding:13px 2px; border-bottom:1px solid #e7e7e2; font-size:14px; } .site-header nav a.nav-button { margin-top:10px; padding:12px 15px; text-align:center; border-bottom:0; } .page-intro,.contact-intro { padding:32px 0 25px; } h1 { font-size:3.3rem; } .showroom { margin-left:-18px; margin-right:-18px; padding:24px 18px 25px; } .control-bar { display:block; } .control-group { margin-bottom:26px; } .control-group:last-child { margin-bottom:0; } .layout-tabs { grid-template-columns:1fr; } .layout-tab { min-height:0; } .palette-grid { grid-template-columns:repeat(4,1fr); gap:14px 10px; } .swatch { height:36px; } .custom-palette { grid-template-columns:1fr 1fr; } .custom-palette-copy { grid-column:1 / -1; } .custom-palette label { grid-template-columns:1fr 46px; } .custom-palette input[type="color"] { width:46px; } .custom-palette output { grid-column:1 / -1; } .type-options { max-width:none; } .preview-pages { overflow-x:auto; justify-content:stretch; } .preview-page { flex:1 0 auto; } .toolbar-actions { justify-content:space-between; } iframe { height:570px; } .pricing { padding:69px 0 65px; } .tier-cards { grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; } .tier-card { padding:18px 15px; border-radius:8px; } .tier-card h3 { font-size:15px; margin-bottom:4px; } .tier-desc { min-height:0; margin-bottom:14px; font-size:12px; } .tier-price { margin-bottom:14px; font-size:20px; } .tier-cta { min-height:36px; font-size:12px; } .compare-table { min-width:640px; } .care { margin-left:-18px; margin-right:-18px; padding:27px 18px 23px; } .care-table th,.care-table td { padding:11px 8px; } .care-table tbody td { font-size:16px; } .site-footer { margin-top:14px; padding:30px 18px 22px; } .footer-inner { margin:0; } .footer-top { display:block; padding-bottom:0; } .footer-brand { max-width:none; } .footer-links { gap:34px; margin-top:26px; } .footer-bottom { display:block; margin-top:22px; } .footer-bottom span { display:block; margin-top:5px; } .home-hero { padding:32px 0 28px; } .home-actions { margin-top:25px; } .home-details { padding:36px 18px 24px; } .home-details-inner { padding:0; gap:24px; } .home-details h2 { max-width:none; margin:0; font-size:2.6rem; white-space:normal; } .detail-cards { grid-template-columns:1fr; gap:26px; } .home-examples { padding:26px 0 50px; } .examples-heading { margin-bottom:18px; } .examples-heading h2 { font-size:2.6rem; } .home-next { display:block; margin-left:-18px; margin-right:-18px; padding:40px 25px; } .home-process-list { grid-template-columns:1fr; margin:30px 0; } .home-next .secondary-action { display:inline-flex; } .price-banner { padding:28px 22px; } .intake-section { margin-left:-18px; margin-right:-18px; padding:25px 18px; } .two-columns,.package-choices { grid-template-columns:1fr; } .full-width { grid-column:auto; } .package-choice > span { min-height:0; } .form-actions { padding-top:3px; } .submit-button { flex:1 1 180px; } .hours-row { display:grid; grid-template-columns:auto 1fr; grid-template-areas:"day closed" "open open" "to close"; align-items:center; gap:8px 10px; } .hours-day { grid-area:day; } .hours-closed { grid-area:closed; margin-left:0; justify-self:end; } .hours-row input[type="time"]:first-of-type { grid-area:open; width:100%; min-width:0; } .hours-to { grid-area:to; text-align:left; } .hours-row input[type="time"]:last-of-type { grid-area:close; width:100%; min-width:0; } .social-fields { grid-template-columns:1fr 1fr; } .color-picker { grid-template-columns:repeat(4,1fr); } .about-faq { padding:28px 0 16px; } .about-faq h2 { font-size:24px; margin-bottom:16px; } .faq-item { padding:18px 18px; } .faq-item summary { font-size:14.5px; gap:14px; } .about-why { padding:0 0 24px; } .about-why h2 { font-size:24px; margin-bottom:16px; } .why-row { grid-template-columns:1fr; gap:8px; padding:20px 2px; } .about-statement { padding:34px 0 40px; } .about-statement p { font-size:18px; } }
@media (max-width:680px) { .examples-heading h2 { white-space:normal; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .swatch,.layout-tab { transition:none; } }