@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700;800&family=Roboto:wght@400;500;700&display=swap');

:root { --orange:#f7931e; --ink:#30302f; --soft:#f8f5ef; --sand:#e8e0d3; --muted:#7c786f; --line:#d9d1c4; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--soft); color:var(--ink); font-family:Roboto, Arial, sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.shell { width:min(1180px, calc(100% - 48px)); margin:0 auto; }
.concept-banner { background:var(--ink); color:#f7eadb; text-align:center; font:600 11px/1.2 Heebo,sans-serif; letter-spacing:.12em; padding:11px 20px; text-transform:uppercase; }
.site-header { height:91px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.brand { display:flex; align-items:center; gap:11px; font:700 18px Heebo,sans-serif; }
.brand img { width:46px; height:46px; object-fit:contain; }
nav { display:flex; gap:32px; color:#57544e; font:500 14px Heebo,sans-serif; }
nav a:hover { color:var(--orange); }
.header-cta { border-bottom:2px solid var(--orange); padding:8px 0 6px; font:700 13px Heebo,sans-serif; }
.header-cta span { color:var(--orange); margin-left:8px; }
.hero { min-height:670px; display:grid; grid-template-columns:1.02fr .98fr; align-items:center; gap:68px; padding:42px 0 84px; }
.eyebrow,.tiny-brand { margin:0; color:#c97518; font:800 11px/1.2 Heebo,sans-serif; letter-spacing:.14em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { font-family:Heebo,Arial,sans-serif; }
h1 { max-width:640px; margin:14px 0 24px; font-size:clamp(44px,5vw,72px); line-height:.98; letter-spacing:-.045em; }
.hero-lede { max-width:560px; color:#615e58; font-size:18px; line-height:1.64; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }
.button { min-height:49px; display:inline-flex; align-items:center; justify-content:center; gap:17px; border-radius:99px; padding:0 22px; border:1px solid transparent; cursor:pointer; font:700 14px Heebo,sans-serif; transition:transform .2s ease, background .2s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:var(--white); background:var(--orange); }
.button-primary span { font-size:19px; line-height:1; }
.button-quiet { border-color:#bbb2a5; color:var(--ink); }
.button-light { color:var(--ink); background:var(--white); }
.hero-notes { display:flex; flex-wrap:wrap; gap:17px; margin-top:39px; color:#5c5954; font-size:12px; }
.hero-notes b { color:var(--orange); font-family:Heebo,sans-serif; margin-right:5px; }
.hero-image-wrap { position:relative; min-height:507px; }
.hero-image-wrap:before { content:""; position:absolute; width:84%; height:86%; right:-32px; bottom:-22px; background:var(--orange); border-radius:170px 0 0 0; }
.hero-image { position:relative; display:block; width:100%; height:507px; object-fit:cover; border-radius:150px 0 0 0; box-shadow:0 25px 55px #5d463128; }
.hero-card { position:absolute; left:-28px; bottom:25px; display:flex; align-items:flex-start; gap:13px; max-width:245px; padding:17px; background:#fffdf9; box-shadow:0 18px 42px #58412324; }
.hero-card-icon { flex:0 0 29px; width:29px; height:29px; border-radius:50%; display:grid; place-items:center; color:var(--white); background:var(--orange); }
.hero-card p { margin:2px 0 0; font:600 13px/1.42 Heebo,sans-serif; }
.experience { padding:108px 0; }
.section-heading { max-width:760px; }
.section-heading h2,.team-copy h2,.handoff h2,.closing h2 { margin:13px 0 18px; font-size:clamp(34px,4vw,54px); line-height:1.02; letter-spacing:-.04em; }
.section-heading > p:last-child { max-width:610px; color:#655f57; font-size:16px; line-height:1.65; }
.product-grid { margin-top:54px; display:grid; grid-template-columns:460px 1fr; align-items:center; gap:120px; }
.phone { width:360px; min-height:727px; padding:13px 13px 16px; border:8px solid #242424; border-radius:44px; color:var(--white); background:var(--ink); box-shadow:0 24px 48px #3e2e1d30; }
.phone-status { display:flex; justify-content:space-between; padding:0 11px 12px; font:600 11px Heebo,sans-serif; }
.phone-topbar { display:flex; align-items:center; gap:9px; padding:0 8px; font:700 15px Heebo,sans-serif; }
.phone-topbar img { width:31px; height:31px; object-fit:contain; }
.ai-pill { margin-left:auto; min-width:45px; padding:5px 9px; border-radius:99px; color:var(--white); background:var(--orange); text-align:center; font-size:10px; }
.phone-body { padding:27px 6px 4px; }
.phone-body h3 { margin:11px 0 29px; font-size:29px; letter-spacing:-.035em; line-height:1.03; }
.agent-message { display:flex; gap:10px; padding:15px; border-radius:18px; color:var(--ink); background:var(--soft); }
.agent-avatar { flex:0 0 25px; height:25px; display:grid; place-items:center; border-radius:50%; color:var(--white); background:var(--orange); font:800 9px Heebo,sans-serif; }
.agent-message b { font:700 12px Heebo,sans-serif; }
.agent-message p { margin:3px 0 0; font-size:11px; line-height:1.38; }
.phone-question { margin:23px 0 10px; font:700 13px Heebo,sans-serif; }
.quick-replies { display:flex; gap:7px; }
.quick-reply { flex:1; min-height:33px; padding:0 6px; border:1px solid var(--orange); border-radius:99px; color:var(--white); background:transparent; cursor:pointer; font:600 10px Heebo,sans-serif; }
.quick-reply.is-active { background:var(--orange); }
.request-card { margin-top:26px; padding:17px 18px 0; border-radius:18px; color:var(--ink); background:var(--white); }
.request-card > b { font:700 16px Heebo,sans-serif; }
.request-card > p { margin:4px 0 11px; color:#5f5c57; font-size:10px; line-height:1.45; }
.request-row { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--sand); padding:10px 0; }
.request-row b,.request-row small { display:block; }
.request-row b { font:700 11px Heebo,sans-serif; }
.request-row small { margin-top:2px; color:#857f76; font-size:9px; }
.request-row > span:last-child { color:var(--orange); font-size:17px; }
.phone-cta { width:100%; height:48px; margin-top:20px; border:0; border-radius:99px; color:var(--white); background:var(--orange); cursor:pointer; font:700 14px Heebo,sans-serif; }
.phone-cta span { margin-left:22px; font-size:17px; }
.staff-note { margin:14px 0 0; color:#eee9df; text-align:center; font-size:10px; }
.flow-copy { max-width:510px; }
.steps { margin:26px 0 28px; padding:0; list-style:none; }
.steps li { position:relative; display:flex; gap:19px; padding-bottom:25px; }
.steps li:not(:last-child):after { content:""; position:absolute; left:15px; top:35px; width:1px; height:37px; background:#d4cabd; }
.steps span { flex:0 0 31px; height:31px; display:grid; place-items:center; border-radius:50%; color:var(--white); background:var(--orange); font:700 13px Heebo,sans-serif; }
.steps h3 { margin:2px 0 5px; font-size:20px; letter-spacing:-.02em; }
.steps p { max-width:390px; margin:0; color:#665f57; font-size:14px; line-height:1.55; }
.mini-proof { display:flex; gap:13px; padding:20px; border-left:3px solid var(--orange); background:#f0ebe2; }
.mini-proof span { width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:50%; color:var(--white); background:var(--orange); }
.mini-proof p { margin:0; color:#5f5a52; font-size:13px; line-height:1.52; }
.team-section { padding:103px 0; background:var(--ink); color:var(--white); }
.team { display:grid; grid-template-columns:.93fr 1.07fr; align-items:center; gap:90px; }
.team-image { position:relative; }
.team-image:after { content:""; position:absolute; width:85%; height:90%; right:-16px; bottom:-18px; z-index:0; border:1px solid #f5a44c; }
.team-image img { position:relative; z-index:1; display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.team-copy .eyebrow { color:#ffac4c; }
.team-copy h2 { max-width:590px; }
.team-points { margin-top:29px; }
.team-points div { display:flex; gap:14px; padding:14px 0; border-top:1px solid #56534f; }
.team-points span { color:#ffac4c; font:800 11px Heebo,sans-serif; letter-spacing:.1em; }
.team-points p { margin:0; color:#e6e0d7; font-size:14px; line-height:1.55; }
.team-points b { color:var(--white); }
.handoff { padding:105px 0; }
.handoff h2 { max-width:690px; }
.handoff-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:37px; }
.handoff-grid article { min-height:224px; padding:25px; border:1px solid var(--line); background:var(--white); }
.card-number { color:var(--orange); font:800 12px Heebo,sans-serif; letter-spacing:.1em; }
.handoff-grid h3 { margin:34px 0 7px; font-size:21px; letter-spacing:-.03em; }
.handoff-grid p { color:#686259; font-size:13px; line-height:1.56; }
.closing { padding:100px 0; color:var(--white); background:var(--orange); }
.closing-inner { max-width:800px; text-align:center; }
.closing .eyebrow { color:#552e02; }
.closing h2 { margin-left:auto; margin-right:auto; max-width:740px; }
.closing p:not(.eyebrow) { max-width:610px; margin:0 auto 28px; color:#542f05; font-size:15px; line-height:1.6; }
.site-footer { display:flex; justify-content:space-between; gap:16px; padding:24px 0; color:#736c63; font-size:11px; }
dialog { width:min(480px, calc(100% - 40px)); padding:35px; border:0; box-shadow:0 30px 100px #1d171050; }
dialog::backdrop { background:#24211ccc; }
dialog h2 { margin:14px 0 12px; font-size:31px; line-height:1.04; letter-spacing:-.04em; }
dialog p:not(.eyebrow) { color:#605a53; line-height:1.6; }
.dialog-close { position:absolute; top:10px; right:14px; border:0; background:transparent; cursor:pointer; font-size:28px; }
@media (max-width:850px) { .site-header nav { display:none; } .hero,.product-grid,.team { grid-template-columns:1fr; gap:46px; } .hero { padding-top:25px; } .hero-image-wrap { max-width:590px; width:calc(100% - 20px); justify-self:end; } .product-grid { justify-items:center; } .flow-copy { max-width:600px; } .team-image { max-width:530px; } .handoff-grid { grid-template-columns:1fr; } }
@media (max-width:540px) { .shell { width:min(100% - 32px, 1180px); } .site-header { height:75px; } .brand img { width:37px; height:37px; } .brand { font-size:15px; } .header-cta { font-size:11px; } h1 { font-size:46px; } .hero { min-height:auto; padding-bottom:68px; } .hero-lede { font-size:16px; } .hero-image-wrap { min-height:390px; width:100%; } .hero-image { height:390px; border-radius:92px 0 0 0; } .hero-card { left:-4px; bottom:16px; } .experience,.handoff,.team-section,.closing { padding:72px 0; } .product-grid { margin-top:35px; gap:52px; } .phone { width:min(360px, 100%); } .team { gap:54px; } .site-footer { display:block; line-height:1.7; } .site-footer span { display:block; } }