:root {
  --black: #090a09;
  --black-soft: #111210;
  --black-card: #161714;
  --ink: #181914;
  --muted: #696a63;
  --cream: #f7f2e9;
  --cream-2: #fffdf8;
  --line: #ded7ca;
  --gold: #e4ad46;
  --gold-light: #f5cd78;
  --gold-deep: #a96d16;
  --white: #ffffff;
  --success: #1b8b63;
  --danger: #c9483a;
  --shadow: 0 28px 80px rgba(25, 18, 8, .14);
  --shell: min(1180px, calc(100% - 40px));
  --radius: 24px;
  --ease: cubic-bezier(.2,.75,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; color: var(--ink); background: var(--cream-2); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.55; text-rendering: optimizeLegibility; }
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
svg { stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.svg-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.shell { width: var(--shell); margin-inline: auto; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 10px 14px; color: var(--black); background: var(--gold-light); border-radius: 8px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(9,10,9,.78); backdrop-filter: blur(18px); transition: background .25s ease, box-shadow .25s ease; }
.site-header.scrolled { background: rgba(9,10,9,.94); box-shadow: 0 12px 45px rgba(0,0,0,.25); }
.nav-shell { min-height: 76px; display: flex; align-items: center; gap: 30px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand img { width: 42px; height: 42px; }
.brand span { display: grid; }
.brand strong { font-size: 15px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; }
.brand small { margin-top: 6px; color: var(--gold-light); font-size: 8px; font-weight: 800; line-height: 1; letter-spacing: .32em; text-transform: uppercase; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 30px; }
.site-nav a { color: #d2d2ca; font-size: 13px; font-weight: 700; transition: color .2s ease; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold-light); }
.nav-button { margin-left: 10px; }
.menu-toggle { display: none; width: 44px; height: 44px; margin-left: auto; padding: 10px; border: 0; color: #fff; background: transparent; }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: currentColor; transition: transform .25s ease, opacity .25s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.button { min-height: 50px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 10px; font-size: 13px; font-weight: 850; letter-spacing: -.01em; transition: transform .2s var(--ease), box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .carousel-button:focus-visible, .design-select:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline: 3px solid rgba(228,173,70,.32); outline-offset: 3px; }
.button svg { width: 18px; height: 18px; }
.button-small { min-height: 42px; padding-inline: 16px; font-size: 12px; }
.button-large { min-height: 58px; padding-inline: 26px; font-size: 14px; }
.button-full { width: 100%; }
.button-gold { color: #1e1609; background: linear-gradient(135deg, var(--gold-light), var(--gold)); box-shadow: 0 12px 34px rgba(228,173,70,.20), inset 0 1px rgba(255,255,255,.42); }
.button-gold:hover { box-shadow: 0 16px 42px rgba(228,173,70,.3), inset 0 1px rgba(255,255,255,.42); }
.button-outline { color: #fff; border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.04); }
.button-outline:hover { border-color: rgba(245,205,120,.65); background: rgba(245,205,120,.08); }
.button-dark { color: #fff; background: var(--black); box-shadow: 0 14px 30px rgba(9,10,9,.16); }

.hero { position: relative; overflow: hidden; padding: 135px 0 0; color: #fff; background: radial-gradient(circle at 66% 20%, rgba(228,173,70,.12), transparent 24%), radial-gradient(circle at 2% 72%, rgba(228,173,70,.05), transparent 22%), var(--black); }
.hero-grid-lines { position: absolute; inset: 0; opacity: .16; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, #000, transparent 85%); }
.hero::after { content: ""; position: absolute; left: -8%; right: -8%; bottom: 108px; height: 190px; border-top: 1px solid rgba(228,173,70,.45); border-radius: 50% 50% 0 0; transform: rotate(-4deg); box-shadow: 0 -3px 30px rgba(228,173,70,.04); }
.hero-orbit { position: absolute; border: 1px solid rgba(228,173,70,.22); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { width: 900px; height: 310px; right: -380px; top: 235px; transform: rotate(-24deg); }
.hero-orbit-two { width: 700px; height: 220px; left: -380px; bottom: 140px; transform: rotate(12deg); }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .83fr); gap: 58px; align-items: center; }
.hero-copy { padding: 18px 0 64px; }
.eyebrow { margin: 0 0 18px; color: var(--gold-light); font-size: 10px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.eyebrow span { margin-right: 7px; }
.eyebrow-dark { color: var(--gold-deep); }
.hero h1 { max-width: 690px; margin: 0; font-size: clamp(46px, 5.8vw, 79px); line-height: .99; letter-spacing: -.065em; }
.hero h1 em { display: block; color: var(--gold); font-style: normal; }
.hero-intro { max-width: 630px; margin: 26px 0 0; color: #b9bab4; font-size: 17px; }
.hero-actions { margin-top: 31px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-benefits { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 18px 22px; color: #d1d1cb; font-size: 11px; font-weight: 700; }
.hero-benefits span { display: inline-flex; align-items: center; gap: 7px; }
.hero-benefits svg { width: 17px; height: 17px; color: var(--gold); }
.hero-trust { margin-top: 31px; display: flex; align-items: center; gap: 15px; }
.trust-stars { color: var(--gold); letter-spacing: 3px; }
.hero-trust p { margin: 0; display: grid; }
.hero-trust strong { font-size: 12px; }
.hero-trust span { color: #8e908a; font-size: 10px; }

.lead-card { position: relative; padding: 30px; border: 1px solid rgba(245,205,120,.32); border-radius: 18px; background: linear-gradient(155deg, rgba(255,255,255,.075), rgba(255,255,255,.025)); box-shadow: 0 32px 90px rgba(0,0,0,.38); backdrop-filter: blur(18px); }
.lead-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 100% 0, rgba(228,173,70,.1), transparent 35%); }
.lead-card-top { position: relative; text-align: center; }
.mini-label { margin: 0 0 6px; color: var(--gold-light); font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.lead-card h2 { margin: 0; font-size: clamp(25px, 2.3vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.lead-card-top > p:last-child { max-width: 450px; margin: 10px auto 22px; color: #a9aaa4; font-size: 12px; }
.project-form { position: relative; display: grid; gap: 12px; }
.form-grid { display: grid; gap: 12px; }
.form-grid.two-col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.project-form label { display: grid; gap: 6px; }
.project-form label > span { color: #d5d5cf; font-size: 10px; font-weight: 750; }
.project-form label small { color: #878983; font-weight: 600; }
.project-form input, .project-form textarea, .project-form select { width: 100%; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; color: #f5f4ef; background: rgba(255,255,255,.045); transition: border-color .2s ease, background .2s ease; }
.project-form input, .project-form select { height: 44px; padding: 0 12px; }
.project-form textarea { padding: 11px 12px; resize: vertical; min-height: 100px; }
.project-form input::placeholder, .project-form textarea::placeholder { color: #767872; }
.project-form select { color-scheme: dark; }
.project-form input:hover, .project-form textarea:hover, .project-form select:hover { border-color: rgba(245,205,120,.34); }
.project-form [aria-invalid="true"] { border-color: var(--danger); }
.hidden-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.form-privacy { margin: -1px 0 0; display: flex; justify-content: center; align-items: center; gap: 6px; color: #8e908a; font-size: 9px; }
.form-privacy svg { width: 12px; height: 12px; color: var(--gold); }
.form-status { min-height: 0; margin: 0; text-align: center; font-size: 11px; font-weight: 700; }
.form-status:not(:empty) { min-height: 22px; }

.hero-bottom-strip { position: relative; z-index: 3; margin-top: 45px; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid rgba(255,255,255,.1); border-bottom: 0; border-radius: 18px 18px 0 0; background: rgba(255,255,255,.035); }
.hero-bottom-strip > div { min-height: 86px; padding: 18px 20px; display: flex; align-items: center; gap: 13px; border-right: 1px solid rgba(255,255,255,.08); }
.hero-bottom-strip > div:last-child { border-right: 0; }
.hero-bottom-strip svg { width: 25px; height: 25px; flex: 0 0 auto; color: var(--gold); }
.hero-bottom-strip p { margin: 0; display: grid; }
.hero-bottom-strip strong { font-size: 11px; }
.hero-bottom-strip span { color: #858781; font-size: 9px; }

.designs-section { padding: 96px 0 104px; overflow: hidden; background: linear-gradient(180deg, #fffdf8, #f5efe5); }
.section-heading { margin-bottom: 38px; }
.section-heading h2 { max-width: 820px; margin: 0; font-size: clamp(36px, 4vw, 57px); line-height: 1.05; letter-spacing: -.055em; }
.section-heading > p:last-child, .section-heading > div > p:last-child { max-width: 700px; margin: 17px 0 0; color: var(--muted); font-size: 15px; }
.section-heading.centered { max-width: 810px; margin-inline: auto; text-align: center; }
.section-heading.centered p:last-child { margin-inline: auto; }
.heading-row { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.carousel-controls { display: flex; gap: 9px; flex: 0 0 auto; }
.carousel-button { width: 46px; height: 46px; border: 1px solid #d8d0c3; border-radius: 50%; color: var(--ink); background: #fff; font-size: 28px; line-height: 1; box-shadow: 0 8px 22px rgba(30,20,8,.06); transition: transform .2s ease, background .2s ease; }
.carousel-button:hover { transform: translateY(-2px); background: var(--gold-light); }
.design-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(355px, 39%); gap: 20px; overflow-x: auto; padding: 10px 2px 28px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }
.design-carousel::-webkit-scrollbar { display: none; }
.design-card { scroll-snap-align: start; min-width: 0; overflow: hidden; border: 1px solid #dcd3c4; border-radius: 19px; background: #fff; box-shadow: 0 20px 50px rgba(30,20,8,.09); transition: transform .25s var(--ease), box-shadow .25s ease; }
.design-card:hover { transform: translateY(-6px); box-shadow: 0 28px 65px rgba(30,20,8,.15); }
.mock-browser { margin: 13px 13px 0; overflow: hidden; border: 1px solid rgba(0,0,0,.15); border-radius: 12px 12px 5px 5px; background: #171817; box-shadow: 0 14px 30px rgba(0,0,0,.19); }
.mock-browser-bar { height: 27px; padding: 0 9px; display: flex; align-items: center; gap: 5px; color: #777; background: #efeee9; font-size: 6px; }
.mock-browser-bar i { width: 4px; height: 4px; border-radius: 50%; background: #b6b2aa; }
.mock-browser-bar span { margin-left: 7px; }
.mock-site { --accent: #5c9ef6; --site-bg: #0d1b29; --site-panel: #152b40; --site-text: #fff; min-height: 295px; color: var(--site-text); background: radial-gradient(circle at 80% 30%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 34%), var(--site-bg); }
.mock-nav { height: 45px; padding: 0 17px; display: grid; grid-template-columns: 1fr auto auto; gap: 13px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 6px; }
.mock-nav b { display: grid; font-size: 8px; letter-spacing: .08em; }
.mock-nav b small { color: var(--accent); font-size: 4.5px; letter-spacing: .2em; }
.mock-nav span { opacity: .7; }
.mock-nav em { padding: 5px 7px; border-radius: 3px; color: #111; background: var(--accent); font-style: normal; font-weight: 900; }
.mock-hero { min-height: 200px; padding: 32px 20px 22px 25px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 8px; align-items: center; }
.mock-hero small { color: var(--accent); font-size: 5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.mock-hero h3 { margin: 7px 0 5px; font-size: 26px; line-height: .95; letter-spacing: -.055em; }
.mock-hero p { margin: 0; opacity: .72; font-size: 7px; }
.mock-hero button { margin-top: 12px; padding: 7px 9px; border: 0; border-radius: 3px; color: #111; background: var(--accent); font-size: 6px; font-weight: 900; }
.mock-icon { width: 110px; height: 110px; place-self: center; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 50%; color: var(--accent); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 18%, transparent); }
.mock-icon svg { width: 58px; height: 58px; stroke-width: 1.25; }
.mock-features { height: 50px; padding: 0 20px; display: grid; grid-template-columns: repeat(3,1fr); align-items: center; gap: 8px; background: var(--site-panel); font-size: 6px; font-weight: 800; text-align: center; }
.theme-barber .mock-site { --accent: #d9ab70; --site-bg: #140e0a; --site-panel: #f2e9dd; --site-text: #fff; }
.theme-barber .mock-features { color: #2c1d13; }
.theme-handyman .mock-site { --accent: #ffbd3f; --site-bg: #151718; --site-panel: #232728; }
.theme-plumbing .mock-site { --accent: #4cc4ed; --site-bg: #0c2337; --site-panel: #f3fbff; }
.theme-plumbing .mock-features { color: #153247; }
.theme-electric .mock-site { --accent: #d5f23e; --site-bg: #0b0d0e; --site-panel: #1a1d1e; }
.theme-cleaning .mock-site { --accent: #85ad83; --site-bg: #f5f0e5; --site-panel: #dce7da; --site-text: #243027; }
.theme-cleaning .mock-nav { border-bottom-color: rgba(30,50,35,.12); }
.theme-cleaning .mock-nav em, .theme-cleaning .mock-hero button { color: #fff; }
.theme-landscape .mock-site { --accent: #d8b56a; --site-bg: #183224; --site-panel: #e8dfcb; }
.theme-landscape .mock-features { color: #223629; }
.theme-hvac .mock-site { --accent: #8ddbf2; --site-bg: #0f2432; --site-panel: #dff4fa; }
.theme-hvac .mock-features { color: #183141; }
.design-meta { padding: 18px 18px 19px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.design-meta span { color: var(--gold-deep); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.design-meta h3 { margin: 3px 0 0; font-size: 14px; letter-spacing: -.02em; }
.design-select { flex: 0 0 auto; padding: 8px 10px; border: 1px solid #d9d1c5; border-radius: 7px; color: var(--ink); background: #fbf8f2; font-size: 8px; font-weight: 850; }
.design-select:hover { border-color: var(--gold); background: #fff4dc; }
.carousel-dots { min-height: 12px; display: flex; justify-content: center; gap: 7px; }
.carousel-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #cfc5b5; transition: width .2s ease, background .2s ease; }
.carousel-dots button.active { width: 23px; border-radius: 10px; background: var(--gold); }

.services-section { padding: 105px 0; color: #fff; background: radial-gradient(circle at 50% 0, rgba(228,173,70,.08), transparent 25%), var(--black); }
.service-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
.service-card { min-height: 235px; padding: 26px 20px; border: 1px solid rgba(245,205,120,.2); border-radius: 15px; background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); text-align: center; transition: transform .25s var(--ease), border-color .25s ease; }
.service-card:hover { transform: translateY(-5px); border-color: rgba(245,205,120,.52); }
.service-icon { width: 50px; height: 50px; margin: 0 auto 21px; display: grid; place-items: center; border: 1px solid rgba(245,205,120,.3); border-radius: 13px; color: var(--gold); background: rgba(228,173,70,.06); }
.service-icon svg { width: 26px; height: 26px; }
.service-card h3 { margin: 0 0 9px; font-size: 15px; }
.service-card p { margin: 0; color: #93958e; font-size: 11px; }

.pricing-section { padding: 110px 0; background: linear-gradient(135deg, #fffdf8, #f2eadf); }
.pricing-layout { display: grid; grid-template-columns: .9fr 1fr 1fr; gap: 20px; align-items: stretch; }
.pricing-copy { padding: 40px 34px 35px 0; align-self: center; }
.pricing-copy h2 { margin: 0; font-size: clamp(38px, 4vw, 55px); line-height: 1.03; letter-spacing: -.055em; }
.pricing-copy > p:not(.eyebrow):not(.price-disclaimer) { color: var(--muted); }
.check-list { margin: 27px 0 0; padding: 0; display: grid; gap: 11px; list-style: none; }
.check-list li { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; }
.check-list svg { width: 18px; height: 18px; padding: 3px; color: #fff; border-radius: 50%; background: var(--gold-deep); }
.price-disclaimer { margin-top: 26px; color: #8b8275; font-size: 10px; }
.price-card { padding: 32px; display: flex; flex-direction: column; border: 1px solid #ded4c7; border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.price-card-dark { color: #fff; border-color: rgba(245,205,120,.22); background: linear-gradient(155deg, #171814, #090a09); }
.price-label { margin: 0; color: var(--gold-deep); font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.price-card-dark .price-label { color: var(--gold-light); }
.price-card h3 { margin: 13px 0 8px; font-size: 28px; letter-spacing: -.04em; }
.price-description { min-height: 64px; margin: 0; color: var(--muted); font-size: 12px; }
.price-card-dark .price-description { color: #969790; }
.price { margin: 25px 0 20px; padding: 19px 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; border-block: 1px solid #eee8df; }
.price-card-dark .price { border-color: rgba(255,255,255,.1); }
.price span { flex-basis: 100%; color: #898075; font-size: 9px; }
.price strong { font-size: 48px; line-height: 1; letter-spacing: -.06em; }
.price small { color: #7c756b; font-size: 10px; }
.price-card > ul { margin: 0 0 28px; padding: 0; display: grid; gap: 10px; list-style: none; font-size: 11px; }
.price-card > ul svg { width: 15px; height: 15px; display: inline; margin-right: 7px; color: var(--gold-deep); vertical-align: -3px; }
.price-card-dark > ul svg { color: var(--gold-light); }
.price-card .button { margin-top: auto; }

.process-section { padding: 100px 0 105px; color: #fff; background: #0d0e0c; }
.process-track { position: relative; display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.process-track::before { content: ""; position: absolute; top: 45px; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), var(--gold), transparent); opacity: .5; }
.process-step { position: relative; text-align: center; }
.process-step > span { position: absolute; top: -8px; right: 12px; color: rgba(255,255,255,.06); font-size: 52px; font-weight: 900; }
.process-icon { position: relative; z-index: 2; width: 72px; height: 72px; margin: 0 auto 20px; display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); background: #10110f; box-shadow: 0 0 0 7px #0d0e0c; }
.process-icon svg { width: 30px; height: 30px; }
.process-step h3 { margin: 0 0 8px; font-size: 15px; }
.process-step p { margin: 0; color: #969791; font-size: 11px; }

.founding-section { padding: 80px 0; background: #f4eee4; }
.founding-card { padding: 42px 46px; display: flex; align-items: center; justify-content: space-between; gap: 35px; border: 1px solid #dbc99d; border-radius: 20px; background: radial-gradient(circle at 87% 0, rgba(255,255,255,.75), transparent 35%), linear-gradient(135deg, #f5cf82, #dba345); box-shadow: 0 24px 70px rgba(100,65,11,.16); }
.founding-card h2 { max-width: 760px; margin: 0; font-size: clamp(32px, 4vw, 49px); line-height: 1.05; letter-spacing: -.05em; }
.founding-card p:last-child { max-width: 760px; margin: 13px 0 0; color: #5d431c; font-size: 13px; }
.founding-card .button { flex: 0 0 auto; }

.faq-section { padding: 110px 0; background: #fffdf8; }
.faq-layout { display: grid; grid-template-columns: .78fr 1.22fr; gap: 80px; }
.faq-copy { align-self: start; position: sticky; top: 120px; }
.faq-copy h2 { margin: 0; font-size: clamp(38px, 4vw, 54px); line-height: 1.03; letter-spacing: -.055em; }
.faq-copy > p:not(.eyebrow) { color: var(--muted); }
.text-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; color: var(--gold-deep); font-size: 13px; font-weight: 850; }
.text-link svg { width: 18px; height: 18px; }
.faq-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 20px; cursor: pointer; list-style: none; font-size: 16px; font-weight: 800; }
summary::-webkit-details-marker { display: none; }
summary span { color: var(--gold-deep); font-size: 22px; transition: transform .2s ease; }
details[open] summary span { transform: rotate(45deg); }
details p { margin: -8px 45px 25px 0; color: var(--muted); font-size: 13px; }

.final-cta { position: relative; overflow: hidden; padding: 90px 0; color: #fff; background: var(--black); }
.final-cta::before { content: ""; position: absolute; inset: 0; opacity: .22; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 50px 50px; }
.final-cta-glow { position: absolute; width: 500px; height: 500px; right: -180px; top: -260px; border-radius: 50%; background: rgba(228,173,70,.18); filter: blur(90px); }
.final-cta-layout { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.final-cta h2 { max-width: 760px; margin: 0; font-size: clamp(40px, 5vw, 66px); line-height: 1; letter-spacing: -.06em; }
.final-cta p:last-child { max-width: 650px; color: #a7a8a2; }
.final-cta .button { flex: 0 0 auto; }

.mobile-cta { display: none; }
.site-footer { padding: 56px 0 20px; color: #bbbcb5; background: #080908; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .75fr .85fr 1fr; gap: 55px; }
.footer-brand p { max-width: 330px; color: #858781; font-size: 12px; }
.footer-grid > div:not(.footer-brand) { display: grid; align-content: start; gap: 8px; }
.footer-grid h3 { margin: 2px 0 8px; color: #fff; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
.footer-grid a, .footer-grid span { color: #94968f; font-size: 11px; }
.footer-grid a:hover { color: var(--gold-light); }
.footer-grid a:has(svg) { display: flex; align-items: center; gap: 7px; }
.footer-grid a svg { width: 14px; height: 14px; color: var(--gold); }
.footer-bottom { margin-top: 45px; padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(255,255,255,.09); color: #666861; font-size: 9px; }
.footer-bottom div { display: flex; gap: 22px; }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .72s var(--ease), transform .72s var(--ease); }
.js .reveal.visible { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .08s; }
.delay-2 { transition-delay: .16s; }
.delay-3 { transition-delay: .24s; }

@media (max-width: 1060px) {
  .hero-layout { grid-template-columns: 1fr 440px; gap: 32px; }
  .hero h1 { font-size: clamp(44px, 5.9vw, 66px); }
  .service-grid { grid-template-columns: repeat(3,1fr); }
  .pricing-layout { grid-template-columns: 1fr 1fr; }
  .pricing-copy { grid-column: 1 / -1; max-width: 850px; padding: 0 0 20px; }
  .faq-layout { gap: 45px; }
}

@media (max-width: 860px) {
  :root { --shell: min(100% - 30px, 720px); }
  .site-header { background: rgba(9,10,9,.94); }
  .nav-shell { min-height: 68px; }
  .menu-toggle { display: block; }
  .nav-button { margin-left: 0; margin-right: 7px; order: 2; }
  .menu-toggle { order: 3; }
  .site-nav { position: fixed; inset: 68px 0 auto; max-height: 0; margin: 0; padding: 0 20px; display: grid; gap: 0; overflow: hidden; background: rgba(9,10,9,.98); transition: max-height .3s ease, padding .3s ease; }
  .site-nav.open { max-height: 360px; padding-block: 10px 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .site-nav a { padding: 13px 2px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; }
  .hero { padding-top: 112px; }
  .hero-layout { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { max-width: 720px; font-size: clamp(46px, 9vw, 72px); }
  .lead-card { max-width: 680px; width: 100%; margin-inline: auto; }
  .hero-bottom-strip { grid-template-columns: repeat(2,1fr); }
  .hero-bottom-strip > div:nth-child(2) { border-right: 0; }
  .hero-bottom-strip > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.08); }
  .design-carousel { grid-auto-columns: minmax(340px, 68%); }
  .pricing-layout { grid-template-columns: 1fr 1fr; }
  .process-track { grid-template-columns: repeat(2,1fr); gap: 48px 30px; }
  .process-track::before { display: none; }
  .founding-card { align-items: flex-start; flex-direction: column; }
  .faq-layout { grid-template-columns: 1fr; }
  .faq-copy { position: static; }
  .final-cta-layout { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / -1; }
}

@media (max-width: 620px) {
  :root { --shell: calc(100% - 28px); --radius: 18px; }
  html { scroll-padding-top: 70px; }
  body { padding-bottom: 66px; }
  .brand img { width: 36px; height: 36px; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 6px; }
  .nav-button { display: none; }
  .hero { padding-top: 98px; }
  .hero-copy { text-align: left; }
  .hero h1 { font-size: clamp(40px, 12.2vw, 59px); }
  .hero-intro { font-size: 15px; }
  .hero-actions { display: grid; }
  .hero-actions .button { width: 100%; }
  .hero-benefits { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
  .hero-trust { align-items: flex-start; }
  .lead-card { padding: 21px 17px; border-radius: 15px; }
  .lead-card h2 { font-size: 26px; }
  .form-grid.two-col { grid-template-columns: 1fr; }
  .project-form input, .project-form select { height: 48px; }
  .project-form textarea { min-height: 120px; }
  .hero-bottom-strip { margin-top: 30px; grid-template-columns: 1fr; border-radius: 14px 14px 0 0; }
  .hero-bottom-strip > div { min-height: 70px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .hero-bottom-strip > div:last-child { border-bottom: 0; }
  .designs-section, .services-section, .pricing-section, .process-section, .faq-section { padding-block: 76px; }
  .heading-row { align-items: flex-start; flex-direction: column; }
  .section-heading h2 { font-size: 38px; }
  .carousel-controls { align-self: flex-end; margin-top: -12px; }
  .design-carousel { width: calc(100vw - 14px); grid-auto-columns: calc(100vw - 52px); gap: 14px; }
  .mock-site { min-height: 282px; }
  .mock-hero h3 { font-size: 23px; }
  .mock-icon { width: 90px; height: 90px; }
  .mock-icon svg { width: 48px; height: 48px; }
  .design-meta { align-items: flex-start; flex-direction: column; }
  .design-select { width: 100%; }
  .service-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .service-card { min-height: 210px; padding: 22px 14px; }
  .pricing-layout { grid-template-columns: 1fr; }
  .pricing-copy h2 { font-size: 40px; }
  .price-card { padding: 26px 22px; }
  .process-track { grid-template-columns: 1fr; gap: 38px; }
  .process-step { max-width: 380px; margin-inline: auto; }
  .founding-section { padding: 55px 0; }
  .founding-card { padding: 30px 24px; }
  .founding-card h2 { font-size: 35px; }
  summary { min-height: 70px; font-size: 14px; }
  .final-cta { padding: 72px 0; }
  .final-cta h2 { font-size: 43px; }
  .mobile-cta { position: fixed; z-index: 95; inset: auto 0 0; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); display: block; background: rgba(9,10,9,.92); backdrop-filter: blur(15px); border-top: 1px solid rgba(255,255,255,.1); }
  .mobile-cta a { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; color: #201608; background: linear-gradient(135deg, var(--gold-light), var(--gold)); font-size: 12px; font-weight: 900; }
  .mobile-cta svg { width: 17px; height: 17px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px 25px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 39px; }
  .hero-benefits { grid-template-columns: 1fr; }
  .service-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand, .footer-grid > div:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   CONVERSION REBUILD — ADDITIONS
   Appended rather than edited into the original blocks so you can
   diff or remove this section cleanly.
   Covers: 3-tier pricing grid, care strip, hero text link,
   two-step success page, outline-dark button.
   ============================================================ */

/* --- hero: demoted secondary action --- */
.hero-actions{align-items:center}
.text-link-hero{color:var(--cream);opacity:.72;font-weight:600;font-size:15px}
.text-link-hero:hover{opacity:1;color:var(--gold-light)}

/* --- pricing: three tiers --- */
.tier-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start;margin-top:14px;
}
@media (max-width:1000px){
  .tier-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}
}
.tier-grid .price-card{height:100%;display:flex;flex-direction:column;position:relative}
.tier-grid .price-card ul{flex:1}

.price-card-featured{
  border:2px solid var(--gold);
  box-shadow:0 28px 70px rgba(0,0,0,.20),0 0 0 6px rgba(228,173,70,.08);
  transform:translateY(-12px);
}
@media (max-width:1000px){.price-card-featured{transform:none}}
.price-flag{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#f5cd78,#e4ad46);color:#171107;
  font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 16px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(228,173,70,.35);
}

.button-outline-dark{
  background:transparent;color:var(--ink);border:1.5px solid var(--line);
}
.button-outline-dark:hover{border-color:var(--ink);background:rgba(0,0,0,.04)}

/* --- care plan strip --- */
.care-strip{
  margin-top:46px;background:var(--black);color:var(--cream);
  border-radius:22px;padding:clamp(26px,4vw,40px);
  display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,4vw,44px);align-items:center;
}
@media (max-width:900px){.care-strip{grid-template-columns:1fr;gap:26px}}
.care-intro h3{margin:6px 0 10px;font-size:clamp(24px,3vw,32px);letter-spacing:-.03em}
.care-intro p{color:var(--muted);font-size:15.5px;margin:0}
.care-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.care-options{grid-template-columns:1fr}}
.care-option{
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.11);
  border-radius:16px;padding:22px 20px;
}
.care-option-gold{border-color:rgba(245,205,120,.38);background:rgba(228,173,70,.08)}
.care-option .care-name{
  font-weight:800;font-size:15px;letter-spacing:.02em;margin:2px 0 8px;color:var(--gold-light);
}
.care-option p:last-child{color:var(--muted);font-size:14.5px;margin:0;line-height:1.55}
.price-inline{display:flex;align-items:baseline;gap:4px;margin:0}
.price-inline strong{font-size:34px;letter-spacing:-.04em;line-height:1;color:var(--cream)}
.price-inline small{color:var(--muted);font-size:14px}

/* --- trust row under pricing --- */
.check-list-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;
  margin-top:40px;padding:0;list-style:none;
}
.check-list-row li{font-size:15px}
.centered-text{text-align:center}

/* --- success page (step 2) --- */
.success-main{padding:clamp(90px,12vw,140px) 0 80px;background:var(--cream)}
.success-layout{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,56px);align-items:start;
}
@media (max-width:940px){.success-layout{grid-template-columns:1fr}}
.success-note h1{
  font-size:clamp(32px,5vw,50px);line-height:1.05;letter-spacing:-.045em;margin:10px 0 0;color:var(--ink);
}
.success-lead{margin:18px 0 26px;color:#5c5d55;font-size:17px;max-width:36em}
.success-mark{
  width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  color:#171107;background:linear-gradient(135deg,#f5cd78,#e4ad46);
  font-size:30px;font-weight:900;margin-bottom:20px;
}
.success-contact{
  margin-top:26px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-size:15px;color:#5c5d55;
}
.success-contact svg{width:18px;height:18px;fill:none;stroke:var(--gold-deep);stroke-width:1.8}
.success-contact a{color:var(--ink);font-weight:700}
.success-main .lead-card{position:static}
.detail-form label span small{font-weight:500;opacity:.7}

/* --- step-2 card sits on a CREAM background, so the dark-card form styles
       inherited from the hero rendered near-invisible (light text on light,
       and the two <select>s disappeared entirely because of color-scheme:dark).
       These overrides re-theme the same markup for a light surface and bump
       the 10px/9px micro-type up to a comfortable size. --- */
.success-main .lead-card{
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 24px 60px rgba(30,20,8,.10);
  backdrop-filter:none;
  padding:clamp(24px,3vw,34px);
}
.success-main .lead-card::before{display:none}
.success-main .lead-card h2{color:var(--ink)}
.success-main .lead-card-top > p:last-child{color:#6b6c64;font-size:14px}
.success-main .mini-label{color:var(--gold-deep)}

.success-main .project-form label > span{color:var(--ink);font-size:13px;font-weight:700}
.success-main .project-form label small{color:#7a7b73}
.success-main .project-form input,
.success-main .project-form textarea,
.success-main .project-form select{
  color:var(--ink);
  background:#fdfcfa;
  border:1.5px solid var(--line);
  font-size:16px;                 /* 16px stops iOS Safari zooming on focus */
}
.success-main .project-form select{color-scheme:light}
.success-main .project-form input::placeholder,
.success-main .project-form textarea::placeholder{color:#9a9b93}
.success-main .project-form input:focus,
.success-main .project-form textarea:focus,
.success-main .project-form select:focus{
  border-color:var(--gold-deep);outline:none;
  box-shadow:0 0 0 3px rgba(228,173,70,.20);
}
.success-main .project-form input,
.success-main .project-form select{height:50px}
.success-main .form-privacy{color:#7a7b73;font-size:12px}
.success-main .form-privacy svg{width:14px;height:14px}
.success-main .check-list li{color:#3f4038;font-size:15px}

/* --- contrast fix: var(--muted) #696a63 on the black care strip measured
       3.63:1, below the 4.5:1 WCAG AA minimum for body text. Lifted to a
       lighter grey used elsewhere on dark surfaces (8.6:1). --- */
.care-intro p,
.care-option p:last-child{color:#a9aaa4}