/* ================================================================
   WEBBUILDERS.CA — MASTER STYLESHEET
   Brand colors are variables below. Change these first if rebranding.
================================================================ */
:root {
  --navy: #06152f;
  --navy-2: #0a2249;
  --blue: #0b4a91;
  --blue-2: #155fac;
  --blue-soft: #eaf2fb;
  --ink: #101828;
  --muted: #667085;
  --line: #e4e7ec;
  --surface: #f6f8fb;
  --white: #ffffff;
  --radius: 22px;
  --shadow: 0 24px 70px rgba(5, 23, 50, .12);
  --container: 1180px;
}

/* ---------- RESET / BASE ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; display: block; }
.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section-pad { padding: 110px 0; }
.skip-link { position: fixed; top: -60px; left: 16px; z-index: 1000; background: #fff; padding: 10px 14px; border-radius: 8px; box-shadow: var(--shadow); }
.skip-link:focus { top: 16px; }

/* ---------- TYPOGRAPHY ---------- */
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { line-height: 1.06; letter-spacing: -.035em; }
h1 { font-size: clamp(3.3rem, 6.3vw, 6.2rem); margin-bottom: 26px; }
h2 { font-size: clamp(2.4rem, 4.5vw, 4.5rem); margin-bottom: 24px; }
h3 { font-size: 1.35rem; }
h1 em, h2 em { color: var(--blue); font-style: normal; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--blue); font-size: .78rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 24px; }
.eyebrow span { width: 28px; height: 2px; background: currentColor; }
.eyebrow.light { color: #83b7ec; }
.section-heading { max-width: 760px; margin-bottom: 58px; }
.section-heading > p { max-width: 650px; color: var(--muted); font-size: 1.08rem; }
.section-heading.centered { text-align: center; margin-inline: auto; }
.section-heading.centered .eyebrow { justify-content: center; }

/* ---------- BRAND / HEADER ---------- */
.site-header { height: 78px; display: flex; align-items: center; position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.88); border-bottom: 1px solid rgba(228,231,236,.8); backdrop-filter: blur(16px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 1.5rem; font-weight: 800; letter-spacing: -.06em; white-space: nowrap; }
.brand-web, .brand-ca { color: var(--navy); }
.brand-builders { color: var(--blue); }
.main-nav { display: flex; align-items: center; gap: 30px; font-size: .92rem; font-weight: 650; }
.main-nav > a:not(.nav-cta) { color: #344054; }
.main-nav > a:hover { color: var(--blue); }
.nav-cta { background: var(--navy); color: white; padding: 12px 18px; border-radius: 999px; }
.nav-cta:hover { background: var(--blue); color: white; }
.menu-toggle { display: none; background: none; border: 0; padding: 6px; }
.menu-toggle span { display: block; width: 25px; height: 2px; margin: 5px 0; background: var(--navy); }

/* ---------- BUTTONS ---------- */
.btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 14px; padding: 0 22px; border-radius: 12px; border: 1px solid transparent; font-weight: 750; transition: .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--blue); color: white; box-shadow: 0 10px 25px rgba(11,74,145,.2); }
.btn-primary:hover { background: var(--navy-2); }
.btn-secondary { border-color: #cfd6df; background: white; color: var(--navy); }
.btn-light { background: white; color: var(--navy); }
.btn.full { width: 100%; }
.text-link { color: var(--blue); font-weight: 800; }

/* ---------- HERO ---------- */
.hero { min-height: calc(100vh - 78px); display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(180deg,#fff 0%,#f7faff 100%); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 72px; align-items: center; position: relative; z-index: 2; }
.hero-lead { color: var(--muted); max-width: 680px; font-size: 1.16rem; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin: 34px 0 26px; }
.trust-row { display: flex; gap: 22px; flex-wrap: wrap; color: #475467; font-size: .86rem; font-weight: 650; }
.trust-row span::first-letter { color: var(--blue); }
.hero-glow { position: absolute; border-radius: 50%; filter: blur(4px); pointer-events: none; }
.hero-glow-one { width: 520px; height: 520px; right: -170px; top: -160px; background: radial-gradient(circle,rgba(28,102,181,.13),transparent 70%); }
.hero-glow-two { width: 350px; height: 350px; left: 35%; bottom: -250px; background: radial-gradient(circle,rgba(28,102,181,.09),transparent 70%); }
.hero-visual { position: relative; padding: 38px 10px; }
.browser-card { background: white; border: 1px solid #dce4ee; border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; transform: rotate(1deg); }
.browser-top { height: 44px; background: #f4f6f9; border-bottom: 1px solid #e4e7ec; display: flex; align-items: center; gap: 7px; padding: 0 14px; }
.browser-top i { width: 8px; height: 8px; background: #c6ced8; border-radius: 50%; }
.browser-top span { margin-left: 10px; color: #98a2b3; font-size: .7rem; }
.browser-body { padding: 26px; min-height: 480px; background: linear-gradient(135deg,#071a3d,#0d3970); color: white; position: relative; overflow: hidden; }
.browser-body::after { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(255,255,255,.12); border-radius:50%; right:-80px; bottom:-100px; box-shadow: 0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018); }
.mock-nav { display: flex; justify-content: space-between; font-size: .62rem; letter-spacing: .06em; color: #dbe9f8; }
.mock-content { margin-top: 100px; max-width: 360px; position: relative; z-index: 2; }
.mock-content small { color: #77b8fa; font-size: .62rem; letter-spacing: .15em; font-weight: 800; }
.mock-content h2 { font-size: 2.65rem; margin: 12px 0; }
.mock-content p { color: #c6d5e7; font-size: .88rem; }
.mock-button { display: inline-block; margin-top: 10px; padding: 10px 16px; border-radius: 8px; background: white; color: var(--navy); font-size: .72rem; font-weight: 800; }
.mock-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; position: absolute; bottom: 26px; left: 26px; right: 26px; z-index: 2; }
.mock-stats div { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); }
.mock-stats strong,.mock-stats span { display: block; }
.mock-stats strong { font-size: .78rem; }.mock-stats span { font-size: .58rem; color:#9eb3ca; }
.floating-card { position: absolute; background: white; border: 1px solid #e2e8f0; border-radius: 13px; box-shadow: 0 18px 40px rgba(5,23,50,.14); padding: 12px 15px; min-width: 155px; }
.floating-card span { float:left; width:34px; height:34px; display:grid; place-items:center; background:var(--blue-soft); color:var(--blue); border-radius:9px; margin-right:10px; }
.floating-card b,.floating-card small { display:block; }.floating-card b { font-size:.72rem; }.floating-card small { color:var(--muted); font-size:.61rem; }
.float-one { left: -30px; bottom: 90px; }.float-two { right: -24px; top: 75px; }

/* ---------- VALUE STRIP ---------- */
.value-strip { border-block: 1px solid var(--line); background: #fff; }
.value-grid { display: grid; grid-template-columns: repeat(3,1fr); }
.value-grid > div { display: flex; gap: 18px; padding: 28px 35px; border-right: 1px solid var(--line); }
.value-grid > div:last-child { border-right: 0; }
.value-grid b { color: var(--blue); font-size: .72rem; }
.value-grid span,.value-grid strong,.value-grid small { display: block; }.value-grid strong { font-size:.9rem; }.value-grid small { color:var(--muted); margin-top:3px; }

/* ---------- SERVICES ---------- */
.service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.service-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; background: white; transition: .25s ease; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(5,23,50,.08); border-color:#c8d6e7; }
.service-card.featured { background: var(--navy); color: white; border-color: var(--navy); }
.service-card.featured p,.service-card.featured li { color:#b8c7d9; }
.service-icon { width: 48px; height: 48px; display:grid; place-items:center; border-radius:12px; background:var(--blue-soft); color:var(--blue); font-size:1.4rem; margin-bottom:50px; }
.featured .service-icon { background:rgba(255,255,255,.1); color:white; }
.service-number { position:absolute; right:28px; top:32px; color:#98a2b3; font-size:.75rem; font-weight:800; }
.service-card p { color:var(--muted); min-height:92px; }
.service-card ul,.price-card ul { padding:0; margin:25px 0 30px; list-style:none; }
.service-card li,.price-card li { padding:8px 0; color:#475467; font-size:.9rem; }
.service-card li::before,.price-card li::before { content:"✓"; color:var(--blue); font-weight:900; margin-right:9px; }
.service-card a { color:var(--blue); font-weight:800; font-size:.88rem; }.featured a { color:white; }

/* ---------- DESIGNS ---------- */
.designs-section { background: var(--navy); color: white; }
.split-heading { max-width:none; display:grid; grid-template-columns:1fr .7fr; gap:80px; align-items:end; }
.split-heading p { color:#aebed1; }
.design-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.design-card { position:relative; }
.concept-label { position:absolute; top:14px; left:14px; z-index:3; font-size:.58rem; letter-spacing:.12em; background:rgba(255,255,255,.9); color:var(--navy); padding:6px 8px; border-radius:5px; font-weight:900; }
/* Each starting design is a small website mockup: a real photo with the site's header and headline on top. */
.design-grid .design-card { transition:opacity .6s ease, transform .45s cubic-bezier(.2,.7,.2,1); }
.design-grid .design-card:hover { transform:scale(1.04); z-index:2; }
.design-preview { height:360px; border-radius:14px; overflow:hidden; position:relative; color:#f4f1ec; background:#141414; box-shadow:0 20px 50px rgba(0,0,0,.3); transition:box-shadow .45s ease; }
.design-card:hover .design-preview { box-shadow:0 30px 70px rgba(0,0,0,.45); }
.dp-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s ease; }
.design-card:hover .dp-photo { transform:scale(1.05); }
.design-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.25) 35%,rgba(10,10,10,.8) 100%); }
.dp-nav, .dp-copy, .dp-foot { position:relative; z-index:2; }
.dp-nav { display:flex; justify-content:space-between; align-items:center; padding:52px 24px 0; }
.dp-nav .mini-logo { font-size:.7rem; font-weight:600; letter-spacing:.32em; }
.dp-nav nav { display:flex; gap:14px; }
.dp-nav b { white-space:nowrap; font-size:.52rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.dp-copy { position:absolute; left:0; right:0; bottom:64px; padding:0 24px; }
.dp-copy small { display:block; font-size:.52rem; letter-spacing:.24em; text-transform:uppercase; margin-bottom:12px; opacity:.85; }
.dp-copy h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:1.7rem; line-height:1.12; margin:0 0 16px; text-shadow:0 2px 18px rgba(0,0,0,.35); }
.dp-copy h3 em { font-style:italic; }
.dp-copy button { border:1px solid rgba(255,255,255,.85); border-radius:0; padding:9px 16px; font-size:.56rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; cursor:default; background:transparent; color:#fff; }
.dp-foot { position:absolute; left:24px; right:24px; bottom:20px; display:flex; justify-content:space-between; padding-top:11px; font-size:.5rem; letter-spacing:.2em; text-transform:uppercase; opacity:.75; border-top:1px solid rgba(255,255,255,.4); }
.restaurant-preview .mini-logo { font-family:Georgia,"Times New Roman",serif; }
.restaurant-preview .dp-copy h3 em, .restaurant-preview .dp-copy small { color:#d9c095; }
.restaurant-preview button { border-color:#d9c095; color:#d9c095; }
.auto-preview .mini-logo { letter-spacing:.5em; }
.auto-preview .dp-copy h3 em { color:#c9ccd1; }
.design-meta { display:flex; justify-content:space-between; align-items:center; padding:18px 4px; border-bottom:1px solid rgba(255,255,255,.14); }
.design-meta small { color:#8297ad; text-transform:uppercase; letter-spacing:.12em; }.design-meta h3 { margin:4px 0 0; font-size:1rem; }.design-meta > span { font-size:1.5rem; color:#79afe5; }
.design-cta { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:50px; padding-top:30px; border-top:1px solid rgba(255,255,255,.14); }.design-cta p{margin:0;color:#b6c5d6;}

/* ---------- PROCESS ---------- */
.process-wrap { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; }
.timeline { border-top:1px solid var(--line); }
.process-step { display:grid; grid-template-columns:70px 1fr; gap:25px; padding:30px 0; border-bottom:1px solid var(--line); }
.process-step > b { color:var(--blue); font-size:.8rem; }.process-step h3{margin-bottom:10px;}.process-step p{color:var(--muted);max-width:620px;margin:0;}

/* ---------- WHY / UX SEO ---------- */
.why-section { background:var(--surface); }
.why-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:80px; align-items:center; }
.why-copy > p { color:var(--muted); font-size:1.05rem; max-width:520px; }
.why-cards { display:grid; gap:12px; }
.why-card { display:grid; grid-template-columns:72px 1fr; gap:20px; padding:24px; background:white; border:1px solid var(--line); border-radius:16px; }
.why-card > span { width:54px;height:54px;display:grid;place-items:center;border-radius:12px;background:var(--blue-soft);color:var(--blue);font-weight:900; }
.why-card h3 { margin:2px 0 7px;font-size:1.05rem; }.why-card p{color:var(--muted);margin:0;font-size:.9rem;}

/* ---------- PRICING ---------- */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; }
.price-card { position:relative; padding:36px; border:1px solid var(--line); border-radius:var(--radius); background:white; }
.price-card.popular { border:2px solid var(--blue); box-shadow:0 25px 60px rgba(11,74,145,.11); }
.popular-tag { position:absolute; right:18px; top:18px; font-size:.58rem; font-weight:900; letter-spacing:.1em; background:var(--blue-soft);color:var(--blue);padding:7px 9px;border-radius:999px; }
.price-card > small { color:var(--blue);font-weight:900;letter-spacing:.12em; }.price-card h3{font-size:1.6rem;margin:10px 0;}.price-card > p:not(.price){color:var(--muted);min-height:75px;}
.price { font-size:3.3rem;font-weight:850;letter-spacing:-.06em;margin:20px 0; }.price sup{font-size:1rem;vertical-align:top;margin-right:3px;}.price span{font-size:.7rem;color:var(--muted);font-weight:600;letter-spacing:0;}.word-price{font-size:2.4rem;}
/* ---------- PAYMENT THANK-YOU PAGE (thank-you.html) ---------- */
.thanks-page { background:var(--surface); }
.thanks { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:30px; padding:40px 16px; }
.thanks-card { width:min(560px,100%); background:white; border-radius:var(--radius); box-shadow:var(--shadow); padding:44px 36px; text-align:center; }
.thanks-card h1 { font-size:clamp(1.7rem,4vw,2.3rem); letter-spacing:-.03em; margin:14px 0 10px; }
.thanks-card p { color:var(--muted); margin:0 0 26px; }
.thanks-icon { width:58px; height:58px; margin:auto; border-radius:50%; display:grid; place-items:center; background:#e7f6ee; color:#147a48; font-size:1.6rem; font-weight:900; }
.thanks-icon.warn { background:#fff3dc; color:#b7791f; }
.thanks-card .back-btn { margin-top:6px; }
.order-summary { text-align:left; margin:6px 0 26px; }
.order-summary h2 { font-size:1.05rem; letter-spacing:-.01em; margin:26px 0 12px; }
.delivery-box { text-align:center; padding:18px; border-radius:16px; background:var(--blue-soft); }
.delivery-box span { display:block; font-size:.66rem; font-weight:900; letter-spacing:.14em; color:var(--blue); }
.delivery-box strong { display:block; font-size:1.15rem; margin:4px 0; }
.delivery-box small { color:var(--muted); }
.order-meta { margin:0; display:grid; gap:6px; }
.order-meta div { display:flex; justify-content:space-between; gap:16px; font-size:.86rem; border-bottom:1px solid var(--line); padding:6px 0; }
.order-meta dt { color:var(--muted); }.order-meta dd { margin:0; font-weight:700; text-align:right; word-break:break-word; }
.order-item { margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:14px; }
.order-item-head { display:flex; justify-content:space-between; gap:12px; }
.order-item-head span { font-weight:800; white-space:nowrap; }
.order-item ul { margin:10px 0 0; padding-left:18px; color:#475467; font-size:.84rem; }
.order-summary .order-note { margin:14px 0 0; font-size:.8rem; }
.next-steps { margin:0 0 22px; padding-left:20px; color:#475467; font-size:.88rem; }
.next-steps li { padding:3px 0; }
@media print { .thanks-page { background:white; } .thanks-card { box-shadow:none; padding:0; } .thanks-card .btn { display:none; } }

/* ---------- CARE PLAN PICKER ---------- */
.plan-dialog { width:min(1040px,calc(100% - 28px)); max-height:calc(100% - 28px); padding:44px 40px 34px; border:0; border-radius:var(--radius); background:white; color:var(--ink); box-shadow:0 40px 120px rgba(5,23,50,.35); overflow:auto; }
.plan-dialog::backdrop { background:rgba(6,21,47,.6); backdrop-filter:blur(3px); }
.plan-dialog h2 { font-size:clamp(1.6rem,3vw,2.2rem); margin:10px 0 8px; letter-spacing:-.03em; }
.plan-step { text-align:center; }
.plan-step .eyebrow { justify-content:center; }
.plan-intro { color:var(--muted); max-width:620px; margin:0 auto 28px; }
.plan-intro b { color:var(--ink); }
.plan-close { position:absolute; top:14px; right:16px; width:38px; height:38px; border:0; border-radius:50%; background:var(--surface); font-size:1.4rem; line-height:1; cursor:pointer; color:var(--ink); }
.plan-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; text-align:left; }
.plan-card { position:relative; display:flex; flex-direction:column; padding:26px; border:1px solid var(--line); border-radius:18px; }
.plan-card.popular { border:2px solid var(--blue); box-shadow:0 20px 50px rgba(11,74,145,.12); }
.plan-card > small { color:var(--blue); font-weight:900; letter-spacing:.12em; font-size:.68rem; }
.plan-card h3 { font-size:1.4rem; margin:6px 0 4px; }
.plan-price { font-size:2rem; font-weight:850; letter-spacing:-.04em; margin:0; }.plan-price span{font-size:.75rem;color:var(--muted);font-weight:600;letter-spacing:0;}
.plan-card ul { list-style:none; padding:0; margin:16px 0 18px; flex:1; }
.plan-card li { padding:5px 0; color:#475467; font-size:.84rem; }
.plan-card li::before { content:"✓"; color:var(--blue); font-weight:900; margin-right:8px; }
.plan-card li b { color:var(--ink); }
.plan-fee { margin:0 0 16px; padding:9px 11px; border-radius:10px; background:var(--surface); font-size:.74rem; font-weight:600; color:#475467; }
.plan-card.popular .plan-fee { background:var(--blue-soft); color:var(--blue); }
.plan-skip { margin-top:22px; border:0; background:none; color:var(--muted); font-weight:700; font-size:.85rem; text-decoration:underline; cursor:pointer; }
.plan-warning-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.fee-icon { flex:none; width:28px; height:28px; border-radius:50%; background:#e7a320; color:white; font-weight:900; display:grid; place-items:center; font-size:.9rem; }
.fee-icon.big { width:52px; height:52px; font-size:1.5rem; margin:0 auto 6px; }
@media (max-width: 860px) { .plan-grid { grid-template-columns:1fr; } .plan-dialog { padding:40px 18px 26px; } }
.form-alert { margin:-6px 0 16px; padding:10px 12px; border-radius:10px; background:#fff8eb; border:1px solid #f5d08a; color:#5c4513; font-size:.76rem; }
.form-alert a { color:var(--blue); font-weight:800; }
.care-bar { margin-top:20px;padding:28px 34px;border-radius:18px;background:var(--navy);color:white;display:flex;justify-content:space-between;align-items:center;gap:30px; }.care-bar span{font-size:.65rem;color:#79afe5;font-weight:900;letter-spacing:.12em;}.care-bar h3{margin:6px 0;font-size:1.3rem;}.care-bar p{margin:0;color:#aebed1;}.care-bar a{color:white;font-weight:800;white-space:nowrap;}

/* ---------- FAQ ---------- */
.faq-section { background:var(--surface); }.faq-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:90px;}.faq-list details{border-bottom:1px solid #d9dee6;padding:22px 0;}.faq-list summary{cursor:pointer;font-weight:800;list-style:none;padding-right:35px;position:relative;}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:"+";position:absolute;right:4px;color:var(--blue);font-size:1.35rem;font-weight:400;}.faq-list details[open] summary::after{content:"–";}.faq-list p{color:var(--muted);max-width:700px;margin:14px 0 0;}

/* ---------- QUOTE FORM ---------- */
.quote-section { background:linear-gradient(135deg,#06152f,#0a2e5c);color:white; }
.quote-grid { display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start; }.quote-copy > p{color:#b3c3d6;max-width:480px;}.contact-points{margin-top:50px;}.contact-points > div{display:flex;gap:18px;padding:18px 0;border-top:1px solid rgba(255,255,255,.12);}.contact-points > div > span{color:#79afe5;font-size:.7rem;font-weight:900;}.contact-points p,.contact-points b,.contact-points small{display:block;margin:0;}.contact-points small{color:#9fb0c4;margin-top:3px;}
.quote-form { background:white;color:var(--ink);border-radius:22px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.2); }.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}label{display:block;font-size:.78rem;font-weight:800;color:#344054;margin-bottom:16px;}label > span{color:#98a2b3;font-weight:500;}input,select,textarea{width:100%;margin-top:7px;border:1px solid #d0d5dd;border-radius:10px;padding:13px 14px;color:var(--ink);background:#fff;outline:none;transition:.2s;}input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(11,74,145,.1);}textarea{resize:vertical;}.consent{display:flex;gap:8px;align-items:flex-start;font-weight:500;color:var(--muted);}.consent input{width:auto;margin:3px 0 0;}.form-note{text-align:center;color:var(--muted);font-size:.72rem;margin:12px 0 0;}.form-note.success{color:#147a48;font-weight:700;}

/* ---------- FOOTER ---------- */
.site-footer { background:#030d1d;color:white;padding:70px 0 25px; }.footer-top{display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-bottom:55px;}.brand.inverse .brand-web,.brand.inverse .brand-ca{color:white}.footer-brand p{color:#7f91a8;margin-top:10px;}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}.footer-links div{display:flex;flex-direction:column;gap:10px;}.footer-links b{font-size:.72rem;color:#8396ad;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px;}.footer-links a{font-size:.87rem;color:#d0d9e5;}.footer-links a:hover{color:white}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:#6f829a;font-size:.72rem;}.mobile-cta{display:none;}

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s ease; }.reveal.visible{opacity:1;transform:none;}

/* ================================================================
   RESPONSIVE / MOBILE UX
================================================================ */
@media (max-width: 960px) {
  .section-pad{padding:80px 0}.hero{min-height:auto}.hero-grid,.why-grid,.quote-grid,.process-wrap,.faq-grid{grid-template-columns:1fr;gap:55px}.hero-grid{gap:35px}.hero-visual{max-width:650px;margin:auto;width:100%}.service-grid,.pricing-grid{grid-template-columns:1fr 1fr}.service-grid article:last-child,.pricing-grid article:last-child{grid-column:1/-1}.design-grid{grid-template-columns:1fr 1fr}.design-grid article:last-child{grid-column:1/-1;max-width:50%}.split-heading{grid-template-columns:1fr;gap:10px}.main-nav{position:absolute;left:20px;right:20px;top:68px;display:none;flex-direction:column;align-items:stretch;background:white;border:1px solid var(--line);border-radius:14px;padding:16px;box-shadow:var(--shadow)}.main-nav.open{display:flex}.menu-toggle{display:block}.nav-cta{text-align:center}.value-grid{grid-template-columns:1fr}.value-grid > div{border-right:0;border-bottom:1px solid var(--line);padding-inline:0}.value-grid > div:last-child{border-bottom:0}.footer-top{grid-template-columns:1fr;gap:40px}
}
@media (max-width: 640px) {
  .container{width:min(calc(100% - 28px),var(--container))}.section-pad{padding:68px 0}.site-header{height:68px}.brand{font-size:1.25rem}h1{font-size:clamp(2.7rem,14vw,4rem)}h2{font-size:clamp(2.2rem,11vw,3.2rem)}.hero-actions{flex-direction:column}.hero-actions .btn{width:100%}.trust-row{gap:10px 16px;font-size:.76rem}.browser-body{min-height:410px;padding:20px}.mock-content{margin-top:75px}.mock-content h2{font-size:2rem}.mock-nav span{display:none}.mock-stats{left:20px;right:20px;bottom:20px}.floating-card{display:none}.service-grid,.pricing-grid,.design-grid{grid-template-columns:1fr}.service-grid article:last-child,.pricing-grid article:last-child,.design-grid article:last-child{grid-column:auto;max-width:none}.service-card,.price-card{padding:28px}.service-card p,.price-card > p:not(.price){min-height:auto}.design-preview{height:330px}.design-cta,.care-bar{align-items:flex-start;flex-direction:column}.process-step{grid-template-columns:45px 1fr;gap:12px}.why-card{grid-template-columns:55px 1fr;padding:18px}.why-card > span{width:44px;height:44px}.form-row{grid-template-columns:1fr}.quote-form{padding:22px}.footer-links{grid-template-columns:1fr 1fr}.footer-bottom{flex-direction:column}.mobile-cta{display:flex;position:fixed;z-index:90;bottom:12px;left:14px;right:14px;height:52px;align-items:center;justify-content:center;gap:12px;background:var(--blue);color:white;border-radius:12px;font-weight:800;box-shadow:0 12px 30px rgba(5,23,50,.3)}body{padding-bottom:70px}
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.btn{transition:none} }