:root { color: #082a4a; background: #f7fbfd; font-family: "DM Sans", sans-serif; font-synthesis: none; --ink:#082a4a; --paper:#f7fbfd; --accent:#16b8b4; --pale:#dff8f7; --line:rgba(8,42,74,.2); --error:#9b2318; }
* { box-sizing: border-box; }
body { min-width:320px; margin:0; background:var(--paper); }
body, a { color:var(--ink); }
a { text-decoration:none; }
img { display:block; max-width:100%; }
button, input, select, textarea { font:inherit; }
.skip-link { position:fixed; top:8px; left:8px; z-index:20; padding:10px 14px; color:#fff; background:var(--ink); transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:relative; z-index:10; height:84px; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(20px,4vw,68px); border-bottom:1px solid var(--line); background:var(--paper); }
.wordmark { width:172px; height:54px; display:block; overflow:hidden; }
.wordmark img { width:100%; transform:translateY(-21px); }
.header-actions { position:relative; display:flex; align-items:center; }
.header-link { padding:11px 16px; border:1px solid var(--ink); border-radius:999px; font-weight:700; }
.menu-toggle { width:46px; height:46px; display:none; align-content:center; justify-items:center; gap:5px; padding:0; border:1px solid var(--ink); border-radius:50%; color:var(--ink); background:#fff; cursor:pointer; }
.menu-toggle span { width:19px; height:2px; display:block; border-radius:2px; background:currentColor; transition:transform 180ms ease, opacity 180ms ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-7px) rotate(-45deg); }
.menu-toggle:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.mobile-menu { position:absolute; top:56px; right:0; width:min(280px,calc(100vw - 36px)); display:grid; gap:0; padding:8px; border:1px solid var(--ink); border-radius:10px; background:#fff; box-shadow:8px 8px 0 rgba(8,42,74,.15); }
.mobile-menu[hidden] { display:none; }
.mobile-menu a { min-height:46px; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:6px; font-weight:700; }
.mobile-menu a:hover, .mobile-menu a:focus-visible { background:var(--pale); outline:none; }
.page-shell { width:min(900px,100%); margin:0 auto; padding:clamp(48px,8vw,90px) clamp(18px,4vw,34px) 100px; }
.intro { margin-bottom:46px; }
.eyebrow { margin:0 0 16px; font:700 .74rem/1 "Manrope",sans-serif; letter-spacing:.14em; text-transform:uppercase; }
h1, h2, legend { font-family:"Manrope",sans-serif; }
h1 { margin:0 0 18px; font-size:clamp(2.7rem,7vw,5rem); line-height:.98; letter-spacing:-.055em; }
.intro > p:last-child { max-width:620px; margin:0; font-size:1.15rem; line-height:1.6; }
.estimate-form { display:grid; gap:18px; }
fieldset, .result-card { min-width:0; margin:0; padding:clamp(22px,4vw,34px); border:1px solid var(--ink); background:#fff; }
legend { width:100%; padding:0 0 18px; font-size:clamp(1.2rem,3vw,1.55rem); font-weight:800; letter-spacing:-.025em; }
legend span { width:34px; height:34px; display:inline-grid; place-items:center; margin-right:9px; border-radius:50%; color:#fff; background:var(--ink); font-size:.92rem; vertical-align:middle; }
.choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.choice-grid-wide { grid-template-columns:repeat(3,minmax(0,1fr)); }
.four-up { grid-template-columns:repeat(4,minmax(0,1fr)); }
.choice { position:relative; min-height:58px; display:flex; cursor:pointer; }
.choice input { position:absolute; opacity:0; }
.choice span { width:100%; display:flex; align-items:center; justify-content:center; padding:13px; border:1px solid var(--line); border-radius:8px; font-weight:700; text-align:center; }
.choice input:checked + span { border-color:var(--ink); background:var(--pale); box-shadow:inset 0 0 0 1px var(--ink); }
.choice input:focus-visible + span { outline:3px solid var(--accent); outline-offset:2px; }
.profile-choices .choice span { flex-direction:column; gap:4px; }
.profile-choices .choice small { color:#496479; font-weight:500; }
.advanced-settings-toggle { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:18px; padding:15px 16px; border:1px solid var(--line); border-radius:8px; background:#f7fbfd; cursor:pointer; }
.advanced-settings-toggle > span { display:grid; gap:4px; }
.advanced-settings-toggle small { color:#496479; font-weight:400; line-height:1.4; }
.advanced-settings-toggle input { position:relative; width:50px; height:28px; flex:0 0 auto; margin:0; appearance:none; border:2px solid #6c8293; border-radius:999px; background:#d9e4e9; cursor:pointer; transition:background 150ms ease,border-color 150ms ease; }
.advanced-settings-toggle input::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(8,42,74,.3); transition:transform 150ms ease; }
.advanced-settings-toggle input:checked { border-color:var(--ink); background:var(--accent); }
.advanced-settings-toggle input:checked::after { transform:translateX(22px); }
.advanced-settings-toggle input:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.advanced-settings-panel { margin-top:12px; padding:18px; border:1px solid var(--ink); border-radius:8px; background:#f7fbfd; }
.advanced-settings-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.advanced-settings-fields .field { align-content:start; margin:0; }
.pattern-guidance { display:grid; gap:7px; margin-top:16px; padding:13px 14px; border-left:4px solid var(--accent); background:#fff; color:#496479; font-size:.88rem; line-height:1.45; }
.pattern-guidance p { margin:0; }
.pattern-guidance b { color:var(--ink); }
.service-intent-choices .choice span { min-height:92px; flex-direction:column; align-items:flex-start; gap:5px; text-align:left; }
.service-intent-choices .choice small { color:#496479; font-weight:500; line-height:1.4; }
.upload-mode-choices .choice span { min-height:82px; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; }
.upload-mode-choices .choice small { color:#496479; font-weight:500; line-height:1.35; }
.conditional-panel { margin-top:22px; padding:20px; border:1px solid var(--line); border-radius:8px; background:#f7fbfd; }
.conditional-question { margin:0 0 13px; font:800 1.05rem/1.35 "Manrope",sans-serif; }
.conditional-question > span { margin-left:6px; color:var(--error); font:700 .72rem/1 "DM Sans",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.colour-count-question { margin-top:22px; }
.dimension-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.dimension-fields .field { margin-top:12px; }
.split-confirmation { display:flex; align-items:flex-start; gap:12px; margin-top:18px; padding:14px; border:1px solid var(--ink); border-radius:8px; background:var(--pale); cursor:pointer; }
.split-confirmation input { width:21px; height:21px; flex:0 0 auto; margin:2px 0 0; accent-color:var(--ink); }
.split-confirmation span { display:grid; gap:4px; line-height:1.35; }
.split-confirmation small { color:#496479; font-weight:400; }
.field-error { min-height:1.25em; margin:10px 0 0; color:var(--error); font-size:.9rem; font-weight:700; }
.field { display:grid; gap:8px; margin-top:20px; font-weight:700; }
.field.compact { max-width:210px; }
.field input, .field select, .field textarea { width:100%; min-height:50px; padding:12px 13px; border:1px solid var(--line); border-radius:5px; color:var(--ink); background:#fff; }
.field textarea { resize:vertical; }
.field small, .help { margin:8px 0 0; color:#496479; font-size:.9rem; font-weight:400; line-height:1.5; }
.import-status { color:#0a557b; font-size:.92rem; font-weight:700; }
.model-preview { max-width:100%; min-width:0; margin-top:20px; padding:12px; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#eef8fa; }
#model-viewer { width:100%; height:340px; min-width:0; overflow:hidden; border-radius:5px; background:linear-gradient(145deg,#edf8fa,#d8eff2); touch-action:none; }
#model-viewer canvas { width:100% !important; max-width:100%; height:100% !important; display:block; }
.model-preview p { margin:10px 0 3px; font-weight:700; }
.model-preview small { color:#496479; }
.model-file-summary { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; color:#496479; font-size:.9rem; }
.model-file-summary strong { color:var(--ink); }
.model-file-list { display:grid; gap:8px; margin-top:10px; }
.model-file-row { display:grid; grid-template-columns:minmax(0,1fr) 104px auto; align-items:center; gap:12px; padding:11px 12px; border:1px solid var(--line); border-radius:7px; background:#fff; }
.model-file-name { min-width:0; }
.model-file-name strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.model-file-name small { display:block; margin-top:3px; color:#496479; }
.model-file-quantity { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px; margin:0; font-size:.82rem; }
.model-file-quantity input { width:72px; min-height:40px; padding:7px 8px; border:1px solid var(--line); border-radius:5px; }
.model-file-remove { min-height:40px; padding:7px 10px; border:1px solid var(--ink); border-radius:5px; color:var(--ink); background:#fff; cursor:pointer; font-weight:700; }
.model-file-status { color:#496479; }
.emphasis { padding:10px 12px; border-left:4px solid var(--accent); background:var(--pale); }
.inline-fields { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.choice-stack { display:grid; gap:9px; }
.choice-stack .choice span { justify-content:space-between; }
.help-details { margin-top:18px; }
.help-details summary { cursor:pointer; font-weight:700; }
.design-help { padding:12px 0 0; font-size:.92rem; line-height:1.5; }
.design-selection-warning { margin:18px 0 0; padding:13px 14px; border-left:4px solid #d98218; background:#fff4df; color:#633308; font-size:.92rem; line-height:1.5; }
.design-help p { margin:8px 0; }
.form-actions { padding-top:8px; }
.primary-button, .secondary-button { min-height:54px; display:inline-flex; align-items:center; justify-content:center; padding:15px 22px; border:1px solid var(--ink); cursor:pointer; font-weight:800; }
.primary-button { color:#fff; background:var(--ink); }
.secondary-button { color:var(--ink); background:#fff; }
button:disabled { cursor:wait; opacity:.55; }
#form-message { color:var(--error); font-weight:700; }
.result-card { margin-top:22px; background:var(--pale); }
.result-card h2 { margin:0 0 12px; font-size:clamp(1.9rem,5vw,3rem); }
.price { margin:8px 0; font:800 clamp(2.5rem,8vw,5rem)/1 "Manrope",sans-serif; letter-spacing:-.05em; }
.quote-breakdown { display:grid; gap:0; margin:20px 0; border:1px solid var(--ink); background:#fff; }
.quote-breakdown > div { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 16px; border-bottom:1px solid var(--line); }
.quote-breakdown > div:last-child { border-bottom:0; }
.quote-breakdown dt { font-weight:700; }
.quote-breakdown dd { margin:0; font-weight:800; text-align:right; }
.quote-breakdown .quote-total { color:#fff; background:var(--ink); font-size:1.08rem; }
.shipping-note { margin:16px 0; color:#496479; line-height:1.5; }
.estimate-disclaimer { margin-top:20px; padding:16px 18px; border-left:4px solid var(--accent); background:rgba(255,255,255,.72); color:#496479; font-size:.9rem; line-height:1.5; }
.estimate-disclaimer h3 { margin:0 0 8px; color:var(--ink); font:800 1rem/1.3 "Manrope",sans-serif; }
.estimate-disclaimer p { margin:7px 0 0; }
.estimate-assumptions { margin-top:20px; padding:16px 18px; border-left:4px solid var(--accent); background:rgba(255,255,255,.72); color:#496479; }
.estimate-assumptions h3 { margin:0 0 8px; color:var(--ink); font:800 1rem/1.3 "Manrope",sans-serif; }
.estimate-assumptions p { margin:6px 0 0; }
.result-meta { display:flex; flex-wrap:wrap; gap:10px 28px; margin:20px 0; }
.result-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.quote-code { display:inline-block; margin:6px 0 18px; padding:12px 16px; border:2px dashed var(--ink); background:#fff; font:800 clamp(2rem,7vw,3.5rem)/1 "Manrope",sans-serif; letter-spacing:.08em; }
.etsy-instruction { font-size:clamp(1.25rem,4vw,1.75rem); font-weight:800; }
.notice { padding:12px 14px; border-left:4px solid var(--accent); background:#fff; line-height:1.5; }
.hidden { display:none !important; }
footer { min-height:150px; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:28px clamp(20px,4vw,68px); border-top:1px solid var(--line); }
footer p { margin:0; }
@media (max-width:820px) { .header-link { display:none; } .menu-toggle { display:grid; } }
@media (max-width:700px) { .choice-grid-wide, .profile-choices, .service-intent-choices, .upload-mode-choices, .advanced-settings-fields { grid-template-columns:1fr; } .dimension-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .model-file-row { grid-template-columns:minmax(0,1fr) auto; } .model-file-quantity { grid-row:2; grid-column:1 / -1; justify-content:start; } }
@media (max-width:520px) { .site-header { height:72px; padding-inline:18px; } .wordmark { width:135px; height:44px; } .wordmark img { transform:translateY(-16px); } .mobile-menu { top:52px; } .page-shell { padding-top:46px; } fieldset,.result-card { padding:20px 16px; } .inline-fields { grid-template-columns:1fr; gap:0; } .dimension-fields { grid-template-columns:1fr; } .four-up { grid-template-columns:repeat(2,1fr); } #model-viewer { height:270px; } .quote-breakdown > div { align-items:flex-start; flex-direction:column; gap:5px; } .quote-breakdown dd { text-align:left; } .result-actions,.result-actions > * { width:100%; } footer p { display:none; } }