:root {
  --ink: #102c3d;
  --ink-soft: #4e6674;
  --navy: #0b2638;
  --navy-light: #12394d;
  --paper: #f7f5ee;
  --white: #ffffff;
  --mint: #55d6b2;
  --mint-dark: #14876e;
  --amber: #f0b45a;
  --line: #d8e0df;
  --shadow: 0 24px 70px rgba(11, 38, 56, 0.12);
  --radius: 18px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Source Sans 3", sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: "Plus Jakarta Sans", sans-serif; line-height: 1.12; letter-spacing: -0.035em; }
h1 { max-width: 720px; margin-bottom: 24px; font-size: clamp(3rem, 6.3vw, 5.75rem); font-weight: 700; }
h1 em { color: var(--mint-dark); font-style: normal; }
h2 { margin-bottom: 22px; font-size: clamp(2.25rem, 4.1vw, 3.8rem); }
h3 { margin-bottom: 12px; font-size: 1.35rem; }
.container { width: min(calc(100% - 44px), var(--container)); margin-inline: auto; }
.section { padding: 120px 0; }
.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; }
.skip-link { position: fixed; z-index: 999; top: 10px; left: 10px; padding: 10px 16px; color: var(--white); background: var(--navy); border-radius: 4px; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }

.site-header { position: fixed; z-index: 100; top: 0; right: 0; left: 0; padding: 18px 0; transition: background .25s, box-shadow .25s, padding .25s; }
.site-header.scrolled { padding: 10px 0; background: rgba(247, 245, 238, .94); box-shadow: 0 1px 0 rgba(16,44,61,.1); backdrop-filter: blur(14px); }
.header-inner, .site-nav, .brand { display: flex; align-items: center; }
.header-inner { justify-content: space-between; }
.brand { gap: 11px; color: var(--ink); text-decoration: none; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.28rem; font-weight: 800; line-height: 1; }
.brand small { display: block; margin-top: 5px; color: var(--ink-soft); font: 600 .58rem/1 "Source Sans 3", sans-serif; letter-spacing: .105em; text-transform: uppercase; }
.brand-mark { width: 37px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.brand > span { min-width: 0; line-height: 1.2; }
@media (min-width: 941px) and (max-width: 1150px) { .site-nav { gap: 16px; } .brand { max-width: 300px; } }
.brand-mark path:first-child { fill: var(--mint); stroke: var(--ink); }
.brand-mark-sync path:first-child { fill: none; stroke: currentColor; }
.site-nav { gap: 34px; }
.site-nav > a { position: relative; color: var(--ink); font-size: .92rem; font-weight: 600; text-decoration: none; }
.site-nav > a:not(.button)::after { position: absolute; right: 0; bottom: -6px; left: 0; height: 2px; background: var(--mint-dark); content: ""; transform: scaleX(0); transform-origin: right; transition: transform .25s; }
.site-nav > a:hover::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.menu-toggle span:not(.sr-only) { display: block; height: 2px; margin: 5px 0; background: var(--ink); transition: transform .2s, opacity .2s; }

.button { display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 24px; padding: 0 24px; border: 1px solid var(--ink); border-radius: 6px; color: var(--white); background: var(--ink); box-shadow: 5px 5px 0 var(--mint); font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { background: var(--navy-light); box-shadow: 2px 2px 0 var(--mint); transform: translate(3px, 3px); }
.button-small { min-height: 42px; padding: 0 17px; color: var(--white) !important; box-shadow: 3px 3px 0 var(--mint); }
.text-link { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); font-weight: 700; text-decoration: none; }
.text-link span { transition: transform .2s; }
.text-link:hover span { transform: translateY(3px); }
.eyebrow { display: flex; gap: 10px; align-items: center; margin-bottom: 19px; color: var(--mint-dark); font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span { width: 26px; height: 2px; background: currentColor; }
.eyebrow.light { color: var(--mint); }

.hero { position: relative; min-height: 820px; padding: 185px 0 48px; overflow: hidden; }
.hero::before { position: absolute; top: 0; right: -12%; width: 53%; height: 100%; background: rgba(85,214,178,.075); clip-path: polygon(20% 0,100% 0,100% 100%,0 100%); content: ""; }
.hero-glow { position: absolute; top: 80px; left: -130px; width: 380px; height: 380px; border: 1px solid rgba(20,135,110,.12); border-radius: 50%; }
.hero-glow::before, .hero-glow::after { position: absolute; border: 1px solid rgba(20,135,110,.1); border-radius: 50%; content: ""; }
.hero-glow::before { inset: 40px; }.hero-glow::after { inset: 90px; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
.hero-lead { max-width: 610px; margin-bottom: 34px; color: var(--ink-soft); font-size: 1.22rem; }
.hero-actions { display: flex; gap: 32px; align-items: center; }
.trust-list { display: flex; gap: 25px; margin: 45px 0 0; padding: 24px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--ink-soft); font-size: .82rem; }
.trust-list span { margin-right: 5px; color: var(--mint-dark); font-weight: 800; }
.system-visual { position: relative; min-height: 535px; }
.visual-label { position: absolute; z-index: 3; top: 10px; right: 4px; padding: 8px 14px; color: var(--ink); background: var(--amber); border-radius: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transform: rotate(3deg); }
.website-card { position: absolute; z-index: 2; top: 60px; left: 0; width: 86%; overflow: hidden; background: var(--white); border: 1px solid rgba(16,44,61,.12); border-radius: 12px; box-shadow: var(--shadow); transform: rotate(-2deg); }
.browser-bar { display: flex; gap: 6px; align-items: center; height: 37px; padding: 0 12px; background: #e8ece9; }
.browser-bar i { width: 7px; height: 7px; background: #aebdb8; border-radius: 50%; }
.browser-bar span { margin-left: 7px; padding: 3px 32px; color: #6c7b77; background: #fff; border-radius: 3px; font-size: .5rem; }
.mini-site { display: grid; grid-template-columns: 1.15fr .85fr; min-height: 250px; padding: 46px 38px; background: #fdfbf5; }
.mini-copy > span { display: block; width: 45px; height: 6px; margin-bottom: 16px; background: var(--mint); }
.mini-copy strong { display: block; width: 88%; height: 16px; margin-bottom: 10px; background: var(--navy); }
.mini-copy strong:nth-child(3) { width: 68%; }
.mini-copy button { margin-top: 23px; padding: 10px 14px; border: 0; color: white; background: var(--navy); border-radius: 3px; font-size: .58rem; }
.mini-art { position: relative; background: var(--mint); border-radius: 3px 3px 50% 3px; }
.mini-art i { position: absolute; background: var(--navy); border-radius: 50%; }
.mini-art i:first-child { width: 32px; height: 32px; top: 25%; left: 28%; }.mini-art i:nth-child(2) { width: 18px; height: 18px; right: 18%; bottom: 24%; background: var(--amber); }.mini-art i:last-child { width: 55px; height: 4px; right: 15%; bottom: 16%; border-radius: 0; transform: rotate(-35deg); }
.automation-card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 12px; width: 285px; padding: 16px; background: var(--white); border: 1px solid rgba(16,44,61,.1); border-radius: 8px; box-shadow: 0 15px 35px rgba(11,38,56,.16); }
.automation-card small, .automation-card strong { display: block; }.automation-card small { color: var(--ink-soft); font-size: .68rem; }.automation-card strong { font-size: .84rem; }
.card-icon { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 5px; }.card-icon svg { width: 21px; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }.mint { background: #d6f5eb; }.amber { background: #fcebcf; }
.lead-card { right: 1px; bottom: 96px; }.invoice-card { bottom: 12px; left: 6px; }.status-dot { margin-left: auto; padding: 4px 8px; color: #08735b; background: #d6f5eb; border-radius: 10px; font-size: .58rem; font-weight: 800; }.clock { display: grid; width: 30px; height: 30px; margin-left: auto; place-items: center; color: #806023; border: 1px solid var(--amber); border-radius: 50%; font-size: .62rem; font-weight: 700; }
.flow-line { position: absolute; z-index: 1; border: 2px dashed rgba(20,135,110,.35); }.flow-line-a { top: 310px; right: 45px; width: 140px; height: 160px; border-bottom: 0; border-left: 0; border-radius: 0 70px 0 0; }.flow-line-b { bottom: 55px; left: 80px; width: 120px; }
.pulse-dot { position: absolute; z-index: 5; width: 11px; height: 11px; background: var(--mint-dark); border: 3px solid #c9f3e6; border-radius: 50%; box-shadow: 0 0 0 8px rgba(85,214,178,.15); }.pulse-one { top: 302px; right: 35px; }.pulse-two { bottom: 50px; left: 70px; }
.cue { position: relative; display: flex; justify-content: center; gap: 14px; align-items: center; margin-top: 70px; color: #75888f; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }.cue i { width: 40px; height: 1px; background: #b9c6c4; }

.section-heading { display: grid; grid-template-columns: 1fr .72fr; gap: 80px; align-items: end; margin-bottom: 55px; }.section-heading h2 { margin-bottom: 0; }.section-heading > p { margin-bottom: 6px; color: var(--ink-soft); }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.service-card { position: relative; min-height: 520px; padding: 34px; overflow: hidden; background: var(--white); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s; }.service-card:hover { box-shadow: var(--shadow); transform: translateY(-7px); }.service-card.featured { color: var(--white); background: var(--navy); border-color: var(--navy); }.service-number { position: absolute; top: 25px; right: 25px; color: #c6d1d1; font-family: "Plus Jakarta Sans"; font-size: .72rem; font-weight: 800; }.featured .service-number { color: #66818f; }.service-icon { display: grid; width: 62px; height: 62px; margin-bottom: 55px; place-items: center; background: #d8f5ec; border-radius: 50%; }.featured .service-icon { background: var(--mint); }.service-icon svg { width: 31px; fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }.service-card > p:not(.offer-price) { min-height: 82px; color: var(--ink-soft); font-size: .95rem; }.featured > p:not(.offer-price) { color: #bdcbd2; }.offer-price { display: flex; min-height: 0; margin: 10px 0 22px; align-items: baseline; gap: 7px; color: var(--ink); font-family: "Plus Jakarta Sans", sans-serif; }.offer-price strong { font-size: clamp(1.75rem, 2.8vw, 2.45rem); letter-spacing: -.05em; line-height: 1; }.offer-price small, .offer-price span { color: var(--ink-soft); font-family: "Source Sans 3", sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.featured .offer-price { color: var(--white); }.featured .offer-price small, .featured .offer-price span { color: #9fb4be; }.service-card ul { margin: 0; padding: 21px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .86rem; }.featured ul { border-color: #315163; }.service-card li { position: relative; margin-top: 7px; padding-left: 19px; }.service-card li::before { position: absolute; left: 0; color: var(--mint-dark); content: "↳"; }.featured li::before { color: var(--mint); }
.care-comparison { margin-top: 20px; background: var(--white); border: 1px solid var(--line); }
.care-comparison > summary { display: flex; min-height: 64px; padding: 18px 24px; align-items: center; justify-content: space-between; cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; font-size: .94rem; font-weight: 800; list-style: none; }
.care-comparison > summary::-webkit-details-marker { display: none; }
.care-comparison > summary span { display: grid; width: 30px; height: 30px; place-items: center; color: var(--mint-dark); border: 1px solid var(--line); border-radius: 50%; font-family: "Source Sans 3", sans-serif; font-size: 1.05rem; transition: transform .2s; }
.care-comparison[open] > summary span { transform: rotate(45deg); }
.care-comparison > summary:focus-visible { outline: 3px solid rgba(20,135,110,.22); outline-offset: 4px; }
.care-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; padding-top: 1px; background: var(--line); border-top: 1px solid var(--line); }
.care-plan-grid article { padding: 26px; background: #f8faf9; }
.care-plan-heading { display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: start; margin-bottom: 22px; }
.care-plan-heading small { display: block; margin-bottom: 7px; color: var(--mint-dark); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.care-plan-heading h3 { margin: 0; font-size: 1.65rem; }
.care-plan-heading h3 span { color: var(--ink-soft); font-family: "Source Sans 3", sans-serif; font-size: .68rem; font-weight: 700; }
.care-plan-heading p { margin: 0; color: var(--ink-soft); font-size: .8rem; }
.care-plan-grid ul { display: grid; gap: 8px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .8rem; }
.care-plan-grid li { position: relative; padding-left: 20px; }
.care-plan-grid li::before { position: absolute; left: 0; color: var(--mint-dark); content: "✓"; font-weight: 800; }
.care-plan-note { margin: 0; padding: 16px 24px; color: var(--ink-soft); background: var(--paper); border-top: 1px solid var(--line); font-size: .74rem; text-align: center; }
.workflow-menu { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; margin-top: 28px; padding: 34px; background: #f7faf8; border: 1px solid var(--line); }
.workflow-menu-heading .eyebrow { margin-bottom: 16px; }
.workflow-menu-heading h3 { margin-bottom: 10px; font-size: 1.45rem; }
.workflow-menu-heading > p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: .86rem; }
.workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.workflow-grid article { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 17px; background: var(--white); border: 1px solid var(--line); }
.workflow-grid article > span { color: var(--mint-dark); font-family: "Plus Jakarta Sans", sans-serif; font-size: .7rem; font-weight: 800; }
.workflow-grid h4 { margin-bottom: 4px; font-family: "Plus Jakarta Sans", sans-serif; font-size: .92rem; }
.workflow-grid p { margin-bottom: 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.5; }
.automation-example { display: grid; grid-template-columns: .7fr 1.3fr; gap: 46px; margin-top: 20px; padding: 28px 32px; align-items: center; color: var(--white); background: var(--navy); }
.automation-example-heading .eyebrow { margin-bottom: 12px; color: var(--mint); }
.automation-example-heading h3 { margin-bottom: 7px; font-size: 1.25rem; }
.automation-example-flow { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 0; margin: 0; padding: 0; list-style: none; }
.automation-example-flow li { position: relative; display: grid; gap: 7px; padding: 14px 20px 14px 28px; border-left: 1px solid #315163; }
.automation-example-flow li::after { position: absolute; top: 50%; right: -7px; z-index: 2; color: var(--mint); content: "→"; font-size: 1rem; transform: translateY(-50%); }
.automation-example-flow li:last-child::after { display: none; }
.automation-example-flow span { color: var(--mint); font-family: "Plus Jakarta Sans", sans-serif; font-size: .62rem; font-weight: 800; }
.automation-example-flow strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .78rem; line-height: 1.35; }

.work { overflow: hidden; background: #eef4f1; }
.verification-strip { margin-bottom: 30px; padding: 22px 24px; border: 1px solid var(--line); background: rgba(255,255,255,.65); scroll-margin-top: 100px; }
.verification-strip h3 { margin: 0 0 17px; color: var(--ink-soft); font-family: "Source Sans 3", sans-serif; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.verification-strip ul { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.verification-strip li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.verification-strip a { display: flex; min-height: 54px; gap: 13px; align-items: start; color: var(--ink); font-size: .83rem; font-weight: 700; line-height: 1.4; text-decoration: none; }
.verification-strip svg { flex: 0 0 24px; width: 24px; height: 24px; fill: none; stroke: var(--mint-dark); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.verification-strip small { display: block; margin-top: 7px; color: #326858; font-size: .69rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.verification-strip a:hover small { color: var(--ink); }
#sample-previews, #process, #faq-ownership { scroll-margin-top: 100px; }
@media (max-width: 760px) {
  .verification-strip { padding: 21px; margin-bottom: 24px; }
  .verification-strip ul { grid-template-columns: 1fr; gap: 16px; }
  .verification-strip li + li { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .verification-strip a { min-height: 44px; }
}
.concept-grid { display: grid; gap: 34px; }
.concept-card { overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: 0 16px 45px rgba(11,38,56,.07); }
.concept-preview { position: relative; min-height: 720px; padding: 48px 72px 62px; overflow: hidden; }
.concept-browser { width: min(94%, 980px); overflow: hidden; background: white; border: 1px solid rgba(9,26,35,.18); border-radius: 12px; box-shadow: 0 28px 65px rgba(9,26,35,.24); transform: rotate(-1deg); }
.concept-browser-bar { display: flex; gap: 6px; align-items: center; height: 34px; padding: 0 12px; background: #e9eceb; }
.concept-browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: #b5bfbb; }
.concept-browser-bar span { margin-left: 8px; color: #687876; font-size: .48rem; }
.concept-page { min-height: 560px; }
.concept-topline { display: flex; min-height: 27px; padding: 0 28px; align-items: center; justify-content: space-between; font-size: .45rem; font-weight: 700; letter-spacing: .04em; }
.concept-nav { display: flex; height: 60px; padding: 0 28px; align-items: center; justify-content: space-between; font-size: .55rem; }
.concept-nav strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .9rem; letter-spacing: -.03em; }
.concept-nav strong b { display: inline-grid; width: 22px; height: 22px; margin-right: 5px; place-items: center; border-radius: 50%; }
.concept-nav > span { opacity: .68; }
.concept-nav em { padding: 7px 11px; border-radius: 2px; font-style: normal; font-weight: 700; }
.concept-hero { display: grid; min-height: 300px; grid-template-columns: 1.08fr .92fr; align-items: stretch; }
.concept-hero > div:first-child { align-self: center; padding: 28px 36px; }
.concept-hero small { display: block; margin-bottom: 12px; font-size: .52rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.concept-hero h3 { margin-bottom: 10px; font-size: clamp(1.45rem, 2.6vw, 2.45rem); line-height: 1.02; }
.concept-hero p { max-width: 350px; margin-bottom: 14px; font-size: .63rem; line-height: 1.48; }
.concept-actions { display: flex; gap: 8px; align-items: center; }
.concept-actions b, .concept-actions a { display: inline-block; padding: 8px 11px; font-size: .52rem; font-weight: 800; text-decoration: none; }
.concept-actions a { border: 1px solid currentColor; }
.concept-microproof { display: flex; gap: 12px; margin-top: 13px; font-size: .43rem; font-weight: 700; opacity: .82; }
.concept-microproof span::before { margin-right: 4px; content: "✓"; }
.concept-photo { min-width: 0; height: 300px; margin: 0; overflow: hidden; background: #c6d1d1; }
.concept-photo img { width: 100%; height: 100%; object-fit: cover; }
.concept-home .concept-photo img { object-position: 58% center; }
.concept-auto .concept-photo img { object-position: 54% center; }
.concept-landscape .concept-photo img { object-position: 58% center; }
.concept-detail-grid { display: grid; min-height: 112px; grid-template-columns: 1.35fr .65fr; color: #233d48; background: rgba(255,255,255,.97); }
.concept-services, .concept-project { padding: 17px 22px; }
.concept-services { border-right: 1px solid #dbe1df; }
.concept-services small, .concept-project small { display: block; margin-bottom: 10px; color: #72817e; font-size: .43rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.concept-services > div { display: flex; gap: 6px; flex-wrap: wrap; }
.concept-services span { display: flex; gap: 5px; padding: 6px 8px; align-items: center; background: #eef2f0; border-radius: 2px; font-size: .47rem; font-weight: 700; }
.concept-services b { display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; font-size: .38rem; }
.concept-project strong, .concept-project span { display: block; }
.concept-project strong { margin-bottom: 7px; font-family: "Plus Jakarta Sans", sans-serif; font-size: .66rem; }
.concept-project span { color: #667672; font-size: .45rem; line-height: 1.45; }
.concept-vehicle strong { padding: 7px 9px; border: 1px solid #d4dcda; color: #4c5c59; font-family: "Source Sans 3", sans-serif; font-size: .48rem; font-weight: 600; }
.concept-gallery > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: -2px 0 7px; }
.concept-gallery i { height: 32px; background: linear-gradient(145deg,#c9dec6 0 50%,#628965 51%); }
.concept-gallery i:nth-child(2) { background: linear-gradient(160deg,#e5d8b8 0 48%,#7f9f6d 49%); }
.concept-gallery i:nth-child(3) { background: linear-gradient(135deg,#b8d2ad 0 45%,#456b4f 46%); }
.concept-proof { display: grid; min-height: 44px; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center; font-size: .48rem; font-weight: 700; }
.concept-proof span + span { border-left: 1px solid currentColor; }
.concept-phone { position: absolute; right: 5%; bottom: 18px; width: 158px; min-height: 322px; padding: 33px 15px 17px; border: 6px solid #14222a; border-radius: 25px; box-shadow: 0 24px 45px rgba(9,26,35,.28); transform: rotate(4deg); }
.phone-speaker { position: absolute; top: 11px; left: 50%; width: 42px; height: 4px; border-radius: 2px; background: rgba(128,145,154,.5); transform: translateX(-50%); }
.concept-phone strong, .concept-phone small { display: block; }
.concept-phone strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: .72rem; }
.concept-phone small { margin-top: 25px; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.02rem; font-weight: 800; line-height: 1.08; }
.phone-choice { display: grid; gap: 5px; margin-top: 18px; }
.phone-choice span { padding: 7px; border: 1px solid currentColor; border-radius: 3px; font-size: .43rem; font-weight: 700; opacity: .82; }
.concept-phone > b { display: block; margin-top: 10px; padding: 8px 7px; text-align: center; font-size: .45rem; }
.concept-phone > em { display: block; margin-top: 9px; font-size: .4rem; font-style: normal; font-weight: 700; text-align: center; text-decoration: underline; }
.concept-copy { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; padding: 34px 42px 38px; align-items: end; }
.concept-copy h3 { margin-bottom: 0; font-size: 1.75rem; }
.concept-summary > p { max-width: 620px; margin: 0; color: var(--ink-soft); font-size: .92rem; }
.concept-details { display: grid; gap: 7px; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; color: var(--ink-soft); font-size: .78rem; }
.concept-details li { padding-left: 0; }.concept-details strong { color: var(--ink); }
.concept-label { margin-bottom: 8px; color: var(--mint-dark); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

.concept-home { background: #dce9ef; }
.concept-home .concept-page { color: #eef8f7; background: #153946; }
.concept-home .concept-topline { color: #153946; background: #f6c84b; }
.concept-home .concept-nav { border-bottom: 1px solid rgba(255,255,255,.14); }
.concept-home .concept-nav strong b, .concept-home .concept-nav em, .concept-home .concept-actions b, .concept-home .concept-phone > b { color: #153946; background: #f6c84b; }
.concept-home .concept-hero { background: linear-gradient(105deg,#153946 0 57%,#2f6571 57%); }
.concept-home .concept-hero small { color: #f6c84b; }.concept-home .concept-hero p { color: #b9d2d6; }.concept-home .concept-proof { color: #183c48; background: #f6c84b; }
.concept-home .concept-services b { color: #153946; background: #f6c84b; }
.concept-home .concept-phone { color: #eef8f7; background: #153946; }

.concept-auto { background: #d9dce0; }
.concept-auto .concept-browser { margin-left: auto; transform: rotate(1.1deg); }
.concept-auto .concept-page { color: white; background: #111920; }.concept-auto .concept-topline { color: #111920; background: #f7c92b; }.concept-auto .concept-nav { border-bottom: 1px solid #34404a; }.concept-auto .concept-nav strong { color: #f7c92b; letter-spacing: .02em; }.concept-auto .concept-nav strong span { color: white; font-size: .54rem; }
.concept-auto .concept-nav em, .concept-auto .concept-actions b, .concept-auto .concept-phone > b { color: #111920; background: #f7c92b; }.concept-auto .concept-hero { background: linear-gradient(110deg,#111920 0 59%,#222d35 59%); }.concept-auto .concept-hero small { color: #f7c92b; }.concept-auto .concept-hero h3 { text-transform: uppercase; }.concept-auto .concept-hero p { color: #aebbc2; }.concept-auto .concept-proof { color: #111920; background: #f7c92b; }
.concept-auto .concept-services b { color: #111920; background: #f7c92b; }.concept-auto .concept-phone { color: white; background: #111920; }

.concept-landscape { background: #d9e5d5; }
.concept-landscape .concept-page { color: #19392e; background: #f6f1e5; }.concept-landscape .concept-topline { color: white; background: #35674c; }.concept-landscape .concept-nav { border-bottom: 1px solid #d9ddcf; }.concept-landscape .concept-nav strong b, .concept-landscape .concept-nav em, .concept-landscape .concept-actions b, .concept-landscape .concept-phone > b { color: #fff; background: #35674c; }.concept-landscape .concept-hero { background: linear-gradient(108deg,#f6f1e5 0 58%,#dce8d6 58%); }.concept-landscape .concept-hero small { color: #477a5c; }.concept-landscape .concept-hero p { color: #637268; }.concept-landscape .concept-proof { color: white; background: #35674c; }
.concept-landscape .concept-services b { color: white; background: #35674c; }.concept-landscape .concept-phone { color: #19392e; background: #f6f1e5; }

/* Three intentionally different portfolio directions */
.concept-preview { min-height: 720px; }
.concept-preview a, .concept-preview button { cursor: default; }

/* Northline: quiet, premium editorial craftsmanship */
.concept-home { padding: 50px 78px 70px; background: #d8d0c3; }
.home-showcase { width: 93%; overflow: hidden; color: #2a2d2b; background: #f6f1e8; box-shadow: 0 30px 70px rgba(45,38,31,.25); transform: rotate(-.55deg); }
.home-header { display: grid; height: 82px; padding: 0 32px; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #d6ccbc; }
.home-header > strong { display: flex; gap: 9px; align-items: center; font-family: Georgia, serif; font-size: .92rem; }
.home-header > strong b { display: grid; width: 31px; height: 31px; place-items: center; color: #f6f1e8; background: #3f4c43; border-radius: 50%; font-size: .72rem; }
.home-header > strong span, .home-header > strong small { display: block; }
.home-header > strong small { margin-top: 2px; color: #7d7467; font-family: "Source Sans 3", sans-serif; font-size: .4rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.home-header nav { color: #71695f; font-size: .5rem; font-weight: 700; }
.home-header > a { justify-self: end; padding: 9px 12px; color: #f6f1e8; background: #3f4c43; font-size: .48rem; font-weight: 800; }
.home-header > a span { margin-left: 8px; }
.home-layout { display: grid; min-height: 440px; grid-template-columns: .96fr 1.04fr; }
.home-intro { align-self: center; padding: 38px 40px 34px; }
.home-kicker { margin-bottom: 18px; color: #9a5d3d; font-size: .48rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.home-intro h3 { margin-bottom: 18px; color: #29312c; font-family: Georgia, serif; font-size: clamp(2rem,3.8vw,3.35rem); font-weight: 400; letter-spacing: -.045em; line-height: .98; }
.home-intro h3 em { color: #9a5d3d; font-weight: 400; }
.home-lead { max-width: 360px; color: #6c675f; font-family: Georgia, serif; font-size: .72rem; line-height: 1.55; }
.home-actions { display: flex; gap: 16px; margin-top: 24px; align-items: center; font-size: .5rem; font-weight: 800; }
.home-actions b { padding: 11px 14px; color: #f6f1e8; background: #3f4c43; }
.home-actions span { padding-bottom: 3px; border-bottom: 1px solid #9a5d3d; color: #9a5d3d; }
.home-principles { display: flex; gap: 18px; margin-top: 34px; padding-top: 17px; border-top: 1px solid #d6ccbc; color: #70695f; font-size: .42rem; }
.home-principles b { display: block; margin-bottom: 3px; color: #9a5d3d; font-family: Georgia, serif; font-size: .66rem; }
.home-project { position: relative; min-width: 0; margin: 0; overflow: hidden; }
.home-project::after { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 50%,rgba(23,27,24,.75)); content: ""; }
.home-project img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }
.home-project figcaption { position: absolute; z-index: 2; right: 24px; bottom: 24px; left: 24px; color: white; }
.home-project figcaption small, .home-project figcaption strong, .home-project figcaption span { display: block; }
.home-project figcaption small { margin-bottom: 6px; color: #e1c5ad; font-size: .4rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.home-project figcaption strong { font-family: Georgia, serif; font-size: 1.02rem; font-weight: 400; }
.home-project figcaption span { margin-top: 7px; font-size: .44rem; font-weight: 700; }
.home-service-line { display: grid; min-height: 56px; padding: 0 30px; grid-template-columns: repeat(3,auto) 1fr; gap: 26px; align-items: center; border-top: 1px solid #d6ccbc; color: #6e675e; font-size: .46rem; font-weight: 700; }
.home-service-line span::before { margin-right: 6px; color: #9a5d3d; content: "◆"; font-size: .34rem; }
.home-service-line strong { justify-self: end; color: #3f4c43; }
.home-inquiry-card { position: absolute; right: 4%; bottom: 15px; display: grid; width: 188px; padding: 21px; color: #f6f1e8; background: #3f4c43; box-shadow: 0 20px 40px rgba(35,39,35,.3); transform: rotate(2.5deg); }
.home-inquiry-card small { color: #d2b79f; font-size: .4rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-inquiry-card strong { margin: 9px 0 15px; font-family: Georgia, serif; font-size: .95rem; font-weight: 400; line-height: 1.15; }
.home-inquiry-card > span { padding: 7px 0; border-top: 1px solid rgba(255,255,255,.16); font-size: .44rem; }
.home-inquiry-card > span::after { float: right; content: "○"; }
.home-inquiry-card > b { margin-top: 12px; padding: 8px; color: #3f4c43; background: #d9b894; font-size: .45rem; text-align: center; }

/* Brightline: bold, action-first automotive service center */
.concept-auto { padding: 38px 48px 58px; background: #969da1; }
.auto-showcase { width: 100%; overflow: hidden; color: white; background: #10151a; box-shadow: 0 32px 75px rgba(8,12,16,.36); }
.auto-header { display: grid; height: 72px; padding: 0 30px; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #323b42; }
.auto-header > strong { color: white; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.05rem; font-weight: 900; letter-spacing: -.05em; }
.auto-header > strong span { color: #f1c40f; }
.auto-header > strong small { display: block; color: #8e9ba3; font-size: .38rem; letter-spacing: .18em; text-transform: uppercase; }
.auto-header nav { color: #a7b0b6; font-size: .48rem; font-weight: 700; }
.auto-header > div { justify-self: end; text-align: right; }
.auto-header > div span, .auto-header > div b { display: block; }
.auto-header > div span { margin-bottom: 3px; color: #8e9ba3; font-size: .4rem; }
.auto-header > div b { color: #f1c40f; font-size: .52rem; }
.auto-visual { position: relative; height: 385px; overflow: hidden; }
.auto-visual::after { position: absolute; inset: 0; background: linear-gradient(90deg,rgba(12,18,23,.96) 0,rgba(12,18,23,.78) 40%,rgba(12,18,23,.14) 76%); content: ""; }
.auto-visual img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 45%; filter: saturate(.7) contrast(1.08); }
.auto-overlay { position: absolute; z-index: 2; top: 50%; left: 7%; max-width: 470px; transform: translateY(-50%); }
.auto-overlay > small { color: #f1c40f; font-size: .47rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.auto-overlay h3 { margin: 10px 0 12px; font-size: clamp(2.2rem,4.2vw,3.8rem); font-weight: 900; letter-spacing: -.06em; line-height: .9; text-transform: uppercase; }
.auto-overlay p { max-width: 370px; color: #c2c9cd; font-size: .65rem; line-height: 1.5; }
.auto-overlay > div { display: flex; gap: 17px; margin-top: 20px; align-items: center; font-size: .48rem; font-weight: 900; text-transform: uppercase; }
.auto-overlay > div b { padding: 11px 14px; color: #11161b; background: #f1c40f; }
.auto-overlay > div span { border-bottom: 1px solid #f1c40f; }
.auto-visual aside { position: absolute; z-index: 3; right: 20px; bottom: 20px; width: 155px; padding: 16px; color: #11161b; background: #f1c40f; clip-path: polygon(10px 0,100% 0,100% 100%,0 100%,0 10px); }
.auto-visual aside strong, .auto-visual aside span { display: block; }
.auto-visual aside strong { font-size: .57rem; text-transform: uppercase; }
.auto-visual aside span { margin: 5px 0 10px; font-size: .42rem; }
.auto-visual aside b { font-size: .46rem; }
.auto-booking { display: grid; min-height: 98px; padding: 18px 24px; grid-template-columns: 1fr 1.05fr 1.05fr .9fr auto; gap: 10px; align-items: stretch; color: #14191e; background: white; }
.auto-booking > div { align-self: center; }
.auto-booking > div small, .auto-booking > div strong { display: block; }
.auto-booking > div small { color: #7c878c; font-size: .4rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.auto-booking > div strong { margin-top: 4px; font-size: .68rem; text-transform: uppercase; }
.auto-booking label { display: grid; padding: 10px; align-content: center; border: 1px solid #d9dddf; }
.auto-booking label span, .auto-booking label b { display: block; }
.auto-booking label span { margin-bottom: 4px; color: #7c878c; font-size: .38rem; font-weight: 800; text-transform: uppercase; }
.auto-booking label b { font-size: .44rem; font-weight: 700; }
.auto-booking button { padding: 0 15px; border: 0; color: #11161b; background: #f1c40f; font-family: inherit; font-size: .46rem; font-weight: 900; text-transform: uppercase; }
.auto-service-row { display: grid; min-height: 54px; padding: 0 28px; grid-template-columns: repeat(4,1fr); align-items: center; color: #bbc3c8; background: #1b2228; font-size: .43rem; font-weight: 700; }
.auto-service-row span + span { border-left: 1px solid #394148; padding-left: 18px; }
.auto-service-row b { margin-right: 5px; color: #f1c40f; }

/* Evergreen: soft, organic, image-led outdoor living */
.concept-landscape { padding: 48px 66px 66px; background: #c9d5bd; }
.landscape-showcase { width: 96%; margin-left: auto; overflow: hidden; color: #294636; background: #f8f4e9; border-radius: 34px 34px 8px 8px; box-shadow: 0 30px 70px rgba(41,68,49,.23); transform: rotate(.55deg); }
.landscape-header { display: grid; height: 78px; padding: 0 32px; grid-template-columns: 1fr auto 1fr; align-items: center; }
.landscape-header > strong { display: flex; align-items: center; font-family: Georgia, serif; font-size: .94rem; font-weight: 500; }
.landscape-header > strong i { width: 23px; height: 30px; margin-right: 8px; background: #648c6a; border-radius: 100% 0 100% 0; transform: rotate(-18deg); }
.landscape-header > strong small { display: block; margin-left: 7px; padding-left: 7px; border-left: 1px solid #b9c4b6; color: #708072; font-family: "Source Sans 3", sans-serif; font-size: .38rem; line-height: 1.15; text-transform: uppercase; }
.landscape-header nav { color: #657366; font-size: .47rem; font-weight: 700; }
.landscape-header > a { justify-self: end; padding: 10px 14px; color: white; background: #335b43; border-radius: 20px; font-size: .46rem; font-weight: 800; }
.landscape-hero { position: relative; display: grid; min-height: 390px; padding: 18px 38px 30px; grid-template-columns: .9fr 1.1fr; gap: 35px; align-items: center; }
.landscape-intro { padding-left: 8px; }
.landscape-intro > small { color: #8b6f46; font-size: .46rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.landscape-intro h3 { margin: 13px 0 17px; color: #294636; font-family: Georgia, serif; font-size: clamp(2rem,3.7vw,3.4rem); font-weight: 400; letter-spacing: -.045em; line-height: .98; }
.landscape-intro h3 em { color: #648c6a; font-weight: 400; }
.landscape-intro p { max-width: 380px; color: #667368; font-family: Georgia, serif; font-size: .7rem; line-height: 1.55; }
.landscape-intro > div { display: flex; gap: 13px; margin-top: 23px; align-items: center; font-size: .46rem; font-weight: 800; }
.landscape-intro > div b { padding: 10px 13px; color: white; background: #335b43; border-radius: 18px; }
.landscape-intro > div span { padding-bottom: 3px; border-bottom: 1px solid #8b6f46; color: #8b6f46; }
.landscape-photo { position: relative; height: 335px; margin: 0; overflow: hidden; border-radius: 46% 46% 8px 8px; }
.landscape-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% center; }
.landscape-photo figcaption { position: absolute; right: 15px; bottom: 15px; left: 15px; padding: 12px 14px; color: #294636; background: rgba(248,244,233,.92); border-radius: 4px; }
.landscape-photo figcaption strong, .landscape-photo figcaption span { display: block; }
.landscape-photo figcaption strong { font-family: Georgia, serif; font-size: .66rem; font-weight: 500; }
.landscape-photo figcaption span { margin-top: 4px; color: #718074; font-size: .4rem; }
.landscape-seal { position: absolute; right: 43%; bottom: 22px; display: grid; width: 78px; height: 78px; place-items: center; align-content: center; color: #f8f4e9; background: #8b6f46; border: 5px solid #f8f4e9; border-radius: 50%; transform: rotate(-9deg); }
.landscape-seal span, .landscape-seal b { display: block; font-size: .37rem; text-transform: uppercase; }
.landscape-seal b { font-family: Georgia, serif; font-size: .75rem; font-weight: 400; text-transform: none; }
.landscape-paths { display: grid; min-height: 145px; padding: 0 30px 28px; grid-template-columns: 1fr 1fr .8fr; gap: 10px; }
.landscape-paths article, .landscape-paths aside { padding: 16px 17px; border: 1px solid #d8d8c9; }
.landscape-paths article small, .landscape-paths article strong, .landscape-paths article span, .landscape-paths aside small, .landscape-paths aside strong, .landscape-paths aside span { display: block; }
.landscape-paths small { color: #8b6f46; font-size: .38rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.landscape-paths article strong, .landscape-paths aside strong { margin-top: 6px; font-family: Georgia, serif; font-size: .72rem; font-weight: 500; }
.landscape-paths article p { margin: 6px 0; color: #738078; font-size: .43rem; line-height: 1.45; }
.landscape-paths article > span { color: #335b43; font-size: .42rem; font-weight: 800; }
.landscape-paths aside { color: white; background: #335b43; border-color: #335b43; }
.landscape-paths aside small { color: #c7d8c9; }
.landscape-paths aside > span { margin-top: 6px; font-size: .42rem; }
.landscape-paths aside > span::before { margin-right: 5px; color: #d9c294; content: "✓"; }
.landscape-paths aside b { display: block; margin-top: 10px; color: #d9c294; font-size: .4rem; }

/* Matching mobile views for each concept */
.concept-preview { min-height: 760px; }
.mobile-preview { position: absolute; z-index: 6; width: 178px; min-height: 356px; overflow: hidden; border: 7px solid #15191b; border-radius: 28px; box-shadow: 0 28px 55px rgba(9,20,25,.34); }
.mobile-notch { position: absolute; z-index: 8; top: 8px; left: 50%; width: 48px; height: 5px; background: rgba(20,24,26,.7); border-radius: 4px; transform: translateX(-50%); }
.mobile-preview header { display: flex; height: 48px; padding: 17px 13px 0; align-items: center; justify-content: space-between; }
.mobile-preview header > strong { font-size: .56rem; }
.mobile-preview header > span, .mobile-preview header > b { font-size: .38rem; font-weight: 800; text-transform: uppercase; }
.mobile-preview figure { margin: 0; overflow: hidden; }
.mobile-preview figure img { width: 100%; height: 100%; object-fit: cover; }
.mobile-preview section > small { display: block; font-size: .37rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mobile-preview section h4 { margin: 7px 0; font-size: 1.05rem; line-height: 1; }
.mobile-preview section p { font-size: .43rem; line-height: 1.4; }

.home-showcase { width: 90%; }
.mobile-home { right: 3.1%; bottom: 14px; min-height: 382px; color: #2a2d2b; background: #f6f1e8; border-color: #303933; transform: rotate(2.2deg); }
.mobile-home header strong { display: flex; align-items: center; font-family: Georgia, serif; }
.mobile-home header strong b { display: inline-grid; width: 20px; height: 20px; margin-right: 5px; place-items: center; color: #f6f1e8; background: #3f4c43; border-radius: 50%; font-size: .42rem; }
.mobile-home header > span { color: #776e62; }
.mobile-home figure { height: 120px; }
.mobile-home figure img { object-position: 58% center; }
.mobile-home section { padding: 17px 15px 14px; }
.mobile-home section > small { color: #9a5d3d; }
.mobile-home section h4 { font-family: Georgia, serif; font-weight: 400; }
.mobile-home section h4 em { color: #9a5d3d; font-weight: 400; }
.mobile-home section p { color: #756d63; }
.mobile-home section > b, .mobile-home section > span { display: block; text-align: center; }
.mobile-home section > b { margin-top: 13px; padding: 8px; color: #f6f1e8; background: #3f4c43; font-size: .41rem; }
.mobile-home section > span { margin-top: 9px; color: #9a5d3d; font-size: .38rem; font-weight: 800; }

.auto-showcase { width: 94%; }
.mobile-auto { right: 1.8%; bottom: 13px; min-height: 395px; color: white; background: #11161b; border-color: #090c0e; transform: rotate(-1.5deg); }
.mobile-auto header { border-bottom: 1px solid #31383e; }
.mobile-auto header strong { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 900; letter-spacing: -.04em; }
.mobile-auto header strong span { color: #f1c40f; }
.mobile-auto header > b { color: #f1c40f; }
.mobile-auto figure { position: relative; height: 105px; }
.mobile-auto figure::after { position: absolute; inset: 0; background: linear-gradient(0deg,rgba(17,22,27,.65),transparent 65%); content: ""; }
.mobile-auto figure img { object-position: 61% center; filter: saturate(.7) contrast(1.07); }
.mobile-auto section { padding: 14px 13px; }
.mobile-auto section > small { color: #f1c40f; }
.mobile-auto section h4 { font-family: "Plus Jakarta Sans", sans-serif; font-size: .88rem; font-weight: 900; letter-spacing: -.04em; text-transform: uppercase; }
.mobile-auto-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; margin: 12px 0 9px; }
.mobile-auto-options span { padding: 6px 2px; border: 1px solid #3f484e; font-size: .32rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.mobile-auto section label { display: block; padding: 7px; color: #929da4; border: 1px solid #3f484e; font-size: .36rem; }
.mobile-auto section > b { display: block; margin-top: 8px; padding: 8px; color: #10151a; background: #f1c40f; font-size: .39rem; text-align: center; text-transform: uppercase; }

.landscape-showcase { width: 92%; }
.mobile-landscape { bottom: 13px; left: 2.3%; min-height: 405px; color: #294636; background: #f8f4e9; border-color: #294636; transform: rotate(-2deg); }
.mobile-landscape header strong { display: flex; align-items: center; font-family: Georgia, serif; font-weight: 500; }
.mobile-landscape header strong i { width: 15px; height: 20px; margin-right: 5px; background: #648c6a; border-radius: 100% 0 100% 0; transform: rotate(-18deg); }
.mobile-landscape header > span { color: #708072; }
.mobile-landscape section { padding: 13px 14px 8px; }
.mobile-landscape section > small { color: #8b6f46; }
.mobile-landscape section h4 { font-family: Georgia, serif; font-size: 1.13rem; font-weight: 400; }
.mobile-landscape section h4 em { color: #648c6a; font-weight: 400; }
.mobile-landscape section p { color: #718074; }
.mobile-landscape figure { height: 92px; margin: 0 12px; border-radius: 44px 44px 5px 5px; }
.mobile-landscape figure img { object-position: 56% center; }
.mobile-landscape-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 9px 12px 0; }
.mobile-landscape-paths span { padding: 7px; border: 1px solid #d5d8ca; color: #718074; font-size: .32rem; }
.mobile-landscape-paths b { display: block; margin-bottom: 2px; color: #335b43; font-family: Georgia, serif; font-size: .45rem; font-weight: 500; }
.mobile-landscape > button { display: block; width: calc(100% - 24px); margin: 8px 12px 12px; padding: 7px; border: 0; color: white; background: #335b43; border-radius: 15px; font-family: inherit; font-size: .38rem; font-weight: 800; }

.process { color: var(--white); background: var(--navy); }.process-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; }.process-intro { position: sticky; top: 130px; align-self: start; }.process-intro > p:not(.eyebrow) { max-width: 430px; color: #b9cbd3; }.light-link { margin-top: 26px; color: var(--white); }.light-link:hover span { transform: translateX(4px); }.process-steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }.process-steps li { display: grid; grid-template-columns: 72px 1fr; gap: 28px; padding: 0 0 42px; border-bottom: 1px solid #294859; margin-bottom: 42px; }.process-steps li:last-child { margin-bottom: 0; }.process-steps li > span { display: grid; width: 52px; height: 52px; place-items: center; color: var(--mint); border: 1px solid #476575; border-radius: 50%; font-family: "Plus Jakarta Sans"; font-size: .76rem; font-weight: 800; }.process-steps h3 { margin-bottom: 8px; font-size: 1.55rem; }.process-steps p { max-width: 550px; margin-bottom: 0; color: #a9bdc6; font-size: .95rem; }

.cost-breakdown { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; overflow: hidden; background: var(--line); border: 1px solid var(--line); }
.cost-breakdown div { padding: 24px; background: var(--paper); }
.cost-breakdown strong, .cost-breakdown span { display: block; }
.cost-breakdown strong { margin-bottom: 7px; font-family: "Plus Jakarta Sans", sans-serif; }
.cost-breakdown span { color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.ownership-note { margin: 22px 0 0; padding: 18px 22px; color: var(--ink-soft); background: #dff5ed; border-left: 4px solid var(--mint-dark); font-size: .84rem; text-align: center; }
.ownership-note strong { color: var(--ink); }
.pricing-note { max-width: 980px; margin: 24px auto 0; color: var(--ink-soft); font-size: .78rem; text-align: center; }

.faq { background: var(--white); }
.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
.faq-intro { position: sticky; top: 120px; }
.faq-intro h2 { max-width: 470px; }
.faq-intro > p:last-child { max-width: 470px; color: var(--ink-soft); }
.faq-list { border-bottom: 1px solid var(--line); }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list summary { position: relative; padding: 22px 48px 22px 0; cursor: pointer; font-family: "Plus Jakarta Sans", sans-serif; font-size: 1rem; font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { position: absolute; top: 18px; right: 4px; display: grid; width: 30px; height: 30px; place-items: center; color: var(--mint-dark); border: 1px solid var(--line); border-radius: 50%; content: "+"; font-family: "Source Sans 3", sans-serif; font-size: 1.1rem; font-weight: 500; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list summary:focus-visible { outline: 3px solid rgba(20,135,110,.22); outline-offset: 4px; }
.faq-list details p { max-width: 720px; margin: -4px 54px 22px 0; color: var(--ink-soft); font-size: .88rem; }

.contact { padding-top: 40px; }
.contact-panel { position: relative; display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: start; padding: 72px; overflow: hidden; color: white; background: var(--mint-dark); }
.contact-panel::after { position: absolute; right: -130px; bottom: -210px; width: 440px; height: 440px; border: 80px solid rgba(255,255,255,.075); border-radius: 50%; content: ""; }
.contact-panel h2 { max-width: 680px; }
.contact-copy > p:not(.eyebrow) { max-width: 660px; color: #d2f3e8; }
.contact-expectations { display: grid; gap: 12px; margin: 32px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(255,255,255,.22); list-style: none; color: #ecfff9; font-size: .84rem; }
.contact-expectations li { position: relative; padding-left: 25px; }
.contact-expectations li::before { position: absolute; left: 0; color: var(--amber); content: "✓"; font-weight: 800; }
.inquiry-form { position: relative; z-index: 2; padding: 38px; color: var(--ink); background: var(--white); border-radius: 8px; box-shadow: 8px 8px 0 var(--amber); }
.form-heading span, .form-heading strong { display: block; }
.form-heading span { margin-bottom: 7px; color: var(--mint-dark); font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.form-heading strong { font-family: "Plus Jakarta Sans", sans-serif; font-size: 1.45rem; line-height: 1.25; }
.form-status { margin: 22px 0 25px; padding: 14px 16px; background: #fff5e3; border-left: 4px solid var(--amber); }
.form-status strong, .form-status span { display: block; }
.form-status strong { font-size: .8rem; }
.form-status span { margin-top: 3px; color: var(--ink-soft); font-size: .73rem; line-height: 1.45; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-field { display: grid; gap: 7px; min-width: 0; }
.form-field > span { font-size: .76rem; font-weight: 700; }
.form-field b { color: #a14f2a; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-width: 0; padding: 12px 13px; color: var(--ink); background: #fbfcfa; border: 1px solid #b9c8c5; border-radius: 5px; font: inherit; font-size: .86rem; line-height: 1.35; transition: border-color .2s, box-shadow .2s; }
.form-field select { min-height: 48px; }
.form-field textarea { min-height: 140px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--mint-dark); box-shadow: 0 0 0 3px rgba(20,135,110,.14); outline: 0; }
.form-field-wide { grid-column: 1 / -1; }
.form-submit { width: 100%; margin-top: 24px; }
.form-submit:disabled { cursor: not-allowed; opacity: .55; box-shadow: 3px 3px 0 #9fb4ae; transform: none; }
.form-note { margin: 16px 0 0; color: var(--ink-soft); font-size: .69rem; text-align: center; }
.form-note span { margin-right: 5px; color: var(--amber); }

.site-footer { padding: 75px 0 25px; color: #b7c7cf; background: #061d2a; }.footer-main { display: grid; grid-template-columns: 1fr 1.1fr .8fr; gap: 70px; align-items: start; padding-bottom: 60px; }.footer-brand { color: white; }.footer-brand small { color: #88a0ab; }.footer-main > p { max-width: 390px; }.footer-main nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 30px; }.footer-main nav a { color: #dce5e9; font-size: .88rem; text-decoration: none; }.footer-main nav a:hover { color: var(--mint); }.footer-bottom { display: flex; justify-content: space-between; padding-top: 23px; border-top: 1px solid #203845; font-size: .72rem; }.footer-bottom p { margin: 0; }.footer-bottom a { text-decoration: none; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }.reveal.in-view { opacity: 1; transform: translateY(0); }.service-card:nth-child(2), .process-steps li:nth-child(2) { transition-delay: .1s; }.service-card:nth-child(3), .process-steps li:nth-child(3) { transition-delay: .2s; }.process-steps li:nth-child(4) { transition-delay: .3s; }

/* HVAC concept: a compact card with an expanded, responsive website preview. */
body.preview-open { overflow: hidden; }
.hvac-card-art { position: relative; min-height: 330px; padding: 28px 100px 0 38px; overflow: hidden; background: #dcebf8; }
.hvac-desktop-shot { max-width: 800px; margin-inline: auto; border: 1px solid #b4cadd; border-radius: 9px 9px 0 0; overflow: hidden; box-shadow: 0 12px 35px #112f4c22; }
.hvac-desktop-shot > span { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px; color: #112f4c; background: #fff; font-size: 13px; font-weight: 800; }
.hvac-desktop-shot small { font-size: 7px; letter-spacing: .1em; }
.hvac-desktop-shot i { margin-left: auto; color: #486178; font-size: 9px; font-weight: 400; font-style: normal; }
.hvac-desktop-shot img { width: 100%; height: 420px; object-fit: cover; object-position: top; }
.hvac-mobile-shot { position: absolute; right: 5%; bottom: -12px; width: 156px; overflow: hidden; border: 6px solid #112f4c; border-radius: 23px; background: #112f4c; box-shadow: 0 12px 30px #112f4c33; }
.hvac-mobile-shot > span { display: block; width: 44px; height: 5px; margin: 4px auto 7px; border-radius: 4px; background: #7797b4; }
.hvac-mobile-shot img { width: 100%; height: auto; }
.auto-concept-card .hvac-card-art { background: #c5cbd3; }
.auto-concept-card .hvac-desktop-shot > span { color: #ffd454; background: #151b23; }
.auto-concept-card .hvac-desktop-shot i { color: #d3dce5; }
.auto-concept-card .hvac-mobile-shot { border-color: #151b23; background: #151b23; }
.landscape-concept-card .hvac-card-art { background: #dbe3ce; }
.landscape-concept-card .hvac-desktop-shot > span { color: #253c30; background: #f6f3e9; }
.landscape-concept-card .hvac-mobile-shot { border-color: #253c30; background: #253c30; }
.hvac-card-copy { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 28px 34px; }
.hvac-card-copy h3 { margin-bottom: 9px; font-size: 1.65rem; }
.hvac-card-copy p:last-child { max-width: 580px; margin-bottom: 0; color: var(--ink-soft); font-size: .87rem; }
.hvac-preview-trigger { flex-shrink: 0; cursor: pointer; font-family: inherit; font-size: .8rem; }
.hvac-no-script { padding: 0 34px 20px; }
.sample-dialog { width: min(1220px, calc(100% - 36px)); max-width: none; max-height: calc(100dvh - 32px); padding: 24px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: var(--paper); overflow: auto; box-shadow: var(--shadow); }
.sample-dialog::backdrop { background: rgba(6,29,42,.76); }
.sample-dialog-heading { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.sample-dialog-heading h3 { margin: 0; font-size: 1.4rem; }
.sample-dialog-heading .concept-label { margin-bottom: 5px; }
.sample-dialog-close { display: inline-flex; min-height: 44px; align-items: center; gap: 12px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: white; cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 700; }
.sample-dialog-close span { font-size: 1.4rem; }
.sample-dialog > p { margin: 12px 0; color: var(--ink-soft); font-size: .8rem; }
.sample-dialog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 15px; }
.sample-dialog-toolbar > div { display: flex; gap: 6px; }
.sample-dialog-toolbar button { min-height: 44px; padding: 10px 17px; border: 1px solid #b8c9d2; border-radius: 5px; color: var(--ink); background: white; cursor: pointer; font: inherit; font-size: .8rem; }
.sample-dialog-toolbar button[aria-pressed="true"] { border-color: var(--ink); color: white; background: var(--ink); }
.sample-dialog-toolbar a { font-size: .76rem; text-underline-offset: 4px; }
.sample-frame-viewport { margin-inline: auto; overflow: hidden; border: 1px solid #b8c9d2; border-radius: 7px; background: white; }
.sample-frame-scale { transform-origin: left top; }
.sample-frame-scale iframe { display: block; max-width: none; border: 0; background: white; }
@media (max-width: 760px) {
  .hvac-card-art { padding: 24px 45px 0 18px; min-height: 265px; }
  .hvac-desktop-shot img { height: 240px; }
  .hvac-mobile-shot { right: 3%; width: 123px; border-width: 5px; border-radius: 19px; }
  .hvac-card-copy { padding: 24px; flex-direction: column; align-items: flex-start; gap: 18px; }
  .hvac-preview-trigger { width: 100%; }
  .sample-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); padding: 15px; }
  .sample-dialog-heading h3 { font-size: 1.1rem; }
  .sample-dialog-heading .concept-label { font-size: .55rem; }
  .sample-dialog-toolbar { flex-wrap: wrap; gap: 10px; }
  .sample-dialog-toolbar button { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .reveal { opacity: 1; transform: none; } }
@media (max-width: 940px) {
  .section { padding: 90px 0; }.menu-toggle { display: block; }.site-nav { position: fixed; inset: 74px 0 auto; display: none; padding: 28px 22px 38px; align-items: stretch; flex-direction: column; gap: 21px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 40px rgba(11,38,56,.12); }.site-nav.open { display: flex; }.site-nav > a { font-size: 1.08rem; }.menu-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:nth-of-type(3) { opacity: 0; }.menu-toggle[aria-expanded="true"] span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }
  .hero { padding-top: 150px; }.hero-grid { grid-template-columns: 1fr; gap: 45px; }.hero-copy { max-width: 760px; }.system-visual { width: min(100%, 620px); margin-inline: auto; }.cue { margin-top: 40px; }
  .section-heading { grid-template-columns: 1fr; gap: 25px; }.section-heading > p { max-width: 650px; }.service-grid { grid-template-columns: 1fr; }.service-card { min-height: auto; }.service-icon { margin-bottom: 40px; }.service-card > p:not(.offer-price) { min-height: auto; }.care-plan-grid, .workflow-menu, .automation-example, .faq-layout { grid-template-columns: 1fr; }.automation-example { gap: 24px; }.faq-layout { gap: 45px; }.faq-intro { position: static; }.cost-breakdown { grid-template-columns: 1fr; }
  .concept-preview { min-height: 690px; padding: 42px 35px 60px; }.concept-browser { width: 97%; }.concept-phone { right: 2%; width: 142px; min-height: 290px; }.concept-copy { grid-template-columns: 1fr; gap: 15px; }
  .concept-home { padding: 38px 42px 62px; }.home-showcase { width: 96%; }.home-header, .auto-header, .landscape-header { grid-template-columns: 1fr auto; }.home-header nav, .auto-header nav, .landscape-header nav { display: none; }.home-layout { grid-template-columns: 1fr 1fr; }.home-intro { padding: 30px; }.home-principles span:last-child { display: none; }.home-inquiry-card { right: 2%; }
  .concept-auto { padding: 34px 28px 50px; }.auto-visual { height: 360px; }.auto-booking { grid-template-columns: repeat(3,1fr) auto; }.auto-booking > div { display: none; }.auto-service-row { padding: 0 20px; }
  .concept-landscape { padding: 40px 38px 58px; }.landscape-showcase { width: 98%; }.landscape-hero { padding-inline: 26px; gap: 24px; }.landscape-seal { right: 41%; }.landscape-paths { padding-inline: 22px; }
  .concept-preview { min-height: 760px; }.home-showcase { width: 90%; }.landscape-showcase { width: 92%; }.mobile-home { right: 1.5%; }.mobile-auto { right: 1%; }.mobile-landscape { left: 1%; }
  .process-grid { grid-template-columns: 1fr; gap: 70px; }.process-intro { position: static; }.contact-panel { grid-template-columns: 1fr; gap: 45px; padding: 60px 45px; }.inquiry-form { max-width: 720px; }.footer-main { grid-template-columns: 1fr 1fr; }.footer-main nav { grid-row: 2; grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }.container { width: min(calc(100% - 32px), var(--container)); }.section { padding: 75px 0; }.site-header { padding: 12px 0; }.brand { font-size: 1.12rem; }.brand-mark { width: 33px; }.site-nav { top: 67px; }
  .hero { min-height: 0; padding: 125px 0 42px; }.hero::before { display: none; }.hero-actions { align-items: stretch; flex-direction: column; gap: 24px; }.hero-actions .text-link { align-self: flex-start; }.trust-list { flex-direction: column; gap: 8px; }.system-visual { min-height: 420px; }.website-card { top: 46px; width: 96%; }.mini-site { min-height: 190px; padding: 30px 24px; }.automation-card { width: 255px; padding: 12px; }.lead-card { bottom: 66px; }.invoice-card { bottom: 0; }.flow-line-a { top: 230px; }.cue { display: none; }
  .concept-preview { min-height: 635px; padding: 24px 16px 42px; }.concept-browser, .concept-auto .concept-browser { width: 120%; margin-left: 0; transform: translateX(-5%) rotate(-1deg); }.concept-auto .concept-browser { transform: translateX(-14%) rotate(1deg); }.concept-topline { padding: 0 16px; }.concept-topline span:last-child { display: none; }.concept-nav { height: 54px; padding: 0 16px; }.concept-nav > span { display: none; }.concept-nav em { font-size: .46rem; }.concept-hero { min-height: 245px; grid-template-columns: 1.07fr .93fr; }.concept-hero > div:first-child { padding: 20px 17px; }.concept-hero h3 { font-size: 1.28rem; }.concept-hero p, .concept-microproof { display: none; }.concept-actions a { display: none; }.concept-photo { height: 245px; }.concept-detail-grid { min-height: 102px; grid-template-columns: 1.45fr .55fr; }.concept-services, .concept-project { padding: 13px 15px; }.concept-services span { padding: 5px 6px; }.concept-services span:nth-child(n+4) { display: none; }.concept-proof { min-height: 40px; font-size: .42rem; }.concept-proof span { padding: 0 4px; }.concept-phone { right: 2%; bottom: 7px; width: 118px; min-height: 245px; padding: 29px 10px 11px; border-width: 5px; }.concept-phone small { margin-top: 18px; font-size: .78rem; }.phone-choice { gap: 4px; margin-top: 12px; }.phone-choice span { padding: 5px; }.concept-phone > b { margin-top: 7px; padding: 6px 4px; }.concept-phone > em { margin-top: 6px; }.concept-copy { padding: 28px 24px 30px; }.concept-copy h3 { font-size: 1.4rem; }.concept-details { font-size: .75rem; }
  .concept-home { min-height: 785px; padding: 18px 12px 38px; }.home-showcase { width: 100%; transform: none; }.home-header { height: 65px; padding: 0 18px; }.home-header > a { font-size: .4rem; }.home-layout { min-height: 0; grid-template-columns: 1fr; }.home-intro { padding: 28px 23px 24px; }.home-intro h3 { font-size: 2.15rem; }.home-lead { font-size: .64rem; }.home-principles { margin-top: 23px; }.home-project { height: 240px; }.home-service-line { display: none; }.home-inquiry-card { right: 4%; bottom: 10px; width: 165px; padding: 16px; transform: rotate(1.5deg); }
  .concept-auto { min-height: 660px; padding: 16px 10px 32px; }.auto-header { height: 64px; padding: 0 17px; }.auto-header > div span { display: none; }.auto-visual { height: 335px; }.auto-overlay { right: 24px; left: 24px; }.auto-overlay h3 { font-size: 2.35rem; }.auto-overlay p { max-width: 270px; }.auto-visual aside { display: none; }.auto-booking { min-height: 158px; padding: 14px; grid-template-columns: 1fr 1fr; }.auto-booking label:nth-of-type(3) { display: none; }.auto-booking button { min-height: 42px; }.auto-service-row { min-height: 56px; padding: 0 14px; grid-template-columns: 1fr 1fr; }.auto-service-row span:nth-child(n+3) { display: none; }
  .concept-landscape { min-height: 800px; padding: 18px 10px 34px; }.landscape-showcase { width: 100%; transform: none; border-radius: 24px 24px 6px 6px; }.landscape-header { height: 66px; padding: 0 18px; }.landscape-header > a { font-size: .4rem; }.landscape-header > strong small { display: none; }.landscape-hero { min-height: 0; padding: 24px 22px; grid-template-columns: 1fr; gap: 24px; }.landscape-intro h3 { font-size: 2.15rem; }.landscape-intro p { font-size: .62rem; }.landscape-photo { height: 230px; border-radius: 90px 90px 8px 8px; }.landscape-seal { right: 18px; bottom: 214px; width: 67px; height: 67px; }.landscape-paths { min-height: 155px; padding: 0 16px 18px; grid-template-columns: 1fr 1fr; }.landscape-paths aside { display: none; }.landscape-paths article { padding: 13px; }
  .mobile-preview { width: 128px; min-height: 285px; border-width: 5px; border-radius: 21px; }.mobile-notch { top: 6px; width: 35px; height: 4px; }.mobile-preview header { height: 40px; padding: 14px 9px 0; }.mobile-preview header > strong { font-size: .43rem; }.mobile-preview header > span, .mobile-preview header > b { font-size: .3rem; }.mobile-preview section { padding: 10px 9px; }.mobile-preview section h4 { font-size: .78rem; }.mobile-preview section p { display: none; }
  .mobile-home { right: 1%; bottom: 8px; }.mobile-home figure { height: 78px; }.mobile-home section > b { margin-top: 8px; padding: 6px; }.mobile-home section > span { margin-top: 6px; }
  .mobile-auto { right: 1%; bottom: 8px; }.mobile-auto figure { height: 72px; }.mobile-auto-options { margin: 7px 0 6px; }.mobile-auto-options span { padding: 4px 1px; font-size: .25rem; }.mobile-auto section label { padding: 5px; }.mobile-auto section > b { margin-top: 6px; padding: 6px; }
  .mobile-landscape { bottom: 8px; left: 1%; }.mobile-landscape figure { height: 65px; margin-inline: 8px; }.mobile-landscape-paths { padding: 6px 8px 0; }.mobile-landscape-paths span { padding: 5px; }.mobile-landscape > button { width: calc(100% - 16px); margin: 6px 8px 8px; padding: 6px; font-size: .3rem; }
  .service-card { padding: 28px; }.care-comparison > summary { padding-inline: 20px; }.care-plan-heading { grid-template-columns: 1fr; gap: 8px; }.care-plan-note { text-align: left; }.workflow-menu { gap: 28px; padding: 26px 20px; }.workflow-grid { grid-template-columns: 1fr; }.automation-example { padding: 26px 20px; }.automation-example-flow { grid-template-columns: 1fr 1fr; }.automation-example-flow li:nth-child(3) { border-top: 1px solid #315163; }.automation-example-flow li::after { display: none; }.ownership-note { text-align: left; }.faq-list summary { padding-right: 42px; font-size: .94rem; }.faq-list details p { margin-right: 0; }.process-steps li { grid-template-columns: 52px 1fr; gap: 18px; }.process-steps li > span { width: 44px; height: 44px; }.contact { padding-top: 15px; }.contact-panel { width: 100%; padding: 50px 20px; }.inquiry-form { padding: 26px 20px; }.form-grid { grid-template-columns: 1fr; }.form-field-wide { grid-column: auto; }.footer-main { grid-template-columns: 1fr; gap: 32px; }.footer-main nav { grid-row: auto; grid-column: auto; }.footer-bottom { gap: 15px; flex-direction: column; }
}

/* Approved typography: Polished & Welcoming with Comfortable reading sizes. */
body, button, input, textarea, select, summary, .site-nav, .brand small, .eyebrow, .concept-label, .form-field, .care-plan-grid, .care-plan-note, .verification-strip, .footer-bottom { font-family: 'Source Sans 3', Arial, sans-serif !important; }
h1, h2, h3, h4, .brand, .offer-price, .care-plan-heading h3, .form-heading strong { font-family: 'Plus Jakarta Sans', Arial, sans-serif !important; font-weight: 700 !important; }
.offer-price small, .offer-price span, .care-plan-heading h3 span { font-family: 'Source Sans 3', Arial, sans-serif !important; }

        body {font-size:18px!important;line-height:1.65!important}
        h1 {font-size:clamp(2.5rem,5vw,4rem)!important;line-height:1.1!important;max-width:740px}
        h2 {font-size:clamp(1.875rem,3.2vw,2.625rem)!important;line-height:1.16!important}
        h3,.service-card h3 {font-size:25px!important;line-height:1.2!important}
        .hero-lead {font-size:20px!important;line-height:1.6!important}
        .section-heading>p,.process-intro>p:not(.eyebrow),.faq-intro>p:last-child,.contact-copy>p:not(.eyebrow),.footer-main>p {font-size:18px!important;line-height:1.65!important}
        .service-card>p:not(.offer-price),.service-card ul,.process-steps p,.faq-list details p {font-size:17px!important;line-height:1.6!important}
        .workflow-grid p,.workflow-menu-heading>p:last-child,.cost-breakdown span,.care-plan-grid ul,.care-plan-heading p,.ownership-note,.contact-expectations,.hvac-card-copy p:last-child {font-size:16px!important;line-height:1.6!important}
        .workflow-grid h4,.form-field>span,.care-comparison>summary,.form-field input,.form-field select,.form-field textarea {font-size:16px!important;line-height:1.5!important}
        .brand small {font-size:11px!important;line-height:1.25!important;letter-spacing:.07em!important}
        .site-nav>a {font-size:15px!important}
        .eyebrow,.concept-label,.form-heading span {font-size:12px!important;letter-spacing:.1em!important}
        .eyebrow {font-size:16px!important;line-height:1.5;letter-spacing:.07em!important}
        .eyebrow > span {flex-shrink:0}
        .trust-list,.verification-strip a,.form-status strong {font-size:15px!important}
        .pricing-note,.care-plan-note,.form-note,.form-status span,.verification-strip small,.footer-bottom {font-size:14px!important;line-height:1.6!important}
        .verification-strip h3 {font-size:12px!important}
        .button {font-size:16px!important}
        .service-card {min-width:0}.service-grid {grid-template-columns:repeat(3,minmax(0,1fr))}.hero-grid>* {min-width:0}
        @media(max-width:940px){.service-grid{grid-template-columns:1fr}}
        @media(max-width:620px){
          body {font-size:17px!important}
          h1 {font-size:40px!important}
          h2 {font-size:30px!important}
          h3,.service-card h3 {font-size:23px!important}
          .hero-lead {font-size:18px!important}
          .section-heading>p,.process-intro>p:not(.eyebrow),.faq-intro>p:last-child,.contact-copy>p:not(.eyebrow),.footer-main>p {font-size:17px!important}
          .service-card>p:not(.offer-price),.service-card ul,.process-steps p,.faq-list details p {font-size:16px!important}
          .brand small {font-size:10px!important}
          .hero-actions .button {max-width:100%}
        }

/* Whole-site review: clearer plan headings and compact cost disclosure. */
.care-comparison > summary { font-size: 20px !important; gap: 18px; }
.care-comparison > summary > span { flex-shrink: 0; }
.pricing-cost-note { margin: 22px 0; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.form-required-note, #phone-contact-note { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.form-field [hidden] { display: none; }
.vendor-cost-details { padding: 0 24px 22px; color: var(--ink-soft); font-size: 16px; line-height: 1.6; }
.vendor-cost-details p:last-child { margin-bottom: 0; }
.automation-example-flow > li { padding: 14px 20px; text-align: center; grid-template-rows: auto 56px 1fr; }
.automation-example-flow > li > span { display: block; text-align: center; }
.automation-example-flow .flow-step-icon { display: block; width: 34px; height: 34px; margin: 8px auto 14px; fill: none; stroke: var(--mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Keep the four-step process concise without shrinking its reading sizes. */
.process.section { padding: 64px 0; }
.process-grid { gap: 64px; }
.process-intro { position: static; }
.process-intro .eyebrow { margin-bottom: 12px; }
.process-intro h2 { margin-bottom: 16px; }
.process-intro > p:last-child { margin-bottom: 0; }
.process-steps li { grid-template-columns: 48px minmax(0, 1fr); gap: 18px; padding-bottom: 20px; margin-bottom: 20px; }
.process-steps li > span { width: 40px; height: 40px; }
.process-steps li:last-child { padding-bottom: 0; border-bottom: 0; }
@media (max-width: 940px) { .process-grid { gap: 30px; } .process-intro { max-width: 700px; } }
@media (max-width: 620px) { .process.section { padding: 44px 0; } .process-grid { gap: 24px; } .process-steps li { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding-bottom: 16px; margin-bottom: 16px; } .process-steps li > span { width: 34px; height: 34px; } }
/* Approved FAQ layout: introduction above two-column question cards. */
.faq-layout { display: block; }
.faq-intro { position: static; max-width: 800px; }
.faq-intro h2, .faq-intro > p:last-child { max-width: 760px; }
.faq-intro > p:last-child { margin-bottom: 0; }
.faq-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-top: 32px; border-bottom: 0; }
.faq-list details { min-width: 0; padding: 0 22px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.faq-list summary { min-height: 64px; padding: 20px 32px 20px 0; }
.faq-list summary::after { right: 0; }
.faq-list details p { margin-right: 0; padding-bottom: 20px; }
@media (max-width: 700px) { .faq-list { grid-template-columns: 1fr; } }
/* Whole-page visual consistency pass; preserve the approved typography kit. */
:root { --section-space: 88px; --panel-space: 32px; }
.services.section, .work.section, .faq.section { padding-block: var(--section-space); }
main > section[id] { scroll-margin-top: 100px; }
.section-heading { gap: 48px; margin-bottom: 40px; }
.section-heading > p { margin-bottom: 0; }
.eyebrow { margin-bottom: 16px; }
.service-card, .care-comparison, .workflow-menu, .verification-strip { border-radius: 8px; }
.service-card { padding: var(--panel-space); min-height: 0; }
.service-icon { margin-bottom: 24px; background: #e2f0f7; }
.offer-price { flex-wrap: wrap; row-gap: 6px; }
.offer-price strong { font-size: clamp(1.65rem, 2.6vw, 2.25rem); line-height: 1.15; }
.offer-price > span { flex-basis: 100%; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 941px) {
    .service-grid { row-gap: 20px; }
    .service-card { display: grid; grid-template-rows: subgrid; grid-row: span 5; }
    .service-card > h3, .service-card > p, .service-icon { margin: 0; }
    .service-card > p:not(.offer-price) { min-height: 0; }
  }
}
.care-plan-grid article { padding: 24px; }
.care-plan-heading { align-items: start; }
.care-comparison > summary, .care-plan-note, .vendor-cost-details { padding-inline: 24px; }
.care-comparison > summary { min-height: 72px; }
.workflow-menu { padding: var(--panel-space); }
.automation-example { padding: var(--panel-space); }
.automation-example-heading > p:last-child { margin-bottom: 0; font-size: 16px; line-height: 1.6; }
.automation-example-flow { align-items: stretch; }
.hvac-card-copy { padding: 28px var(--panel-space); }
.hvac-card-copy > div { min-width: 0; }
.hvac-preview-trigger { flex-shrink: 0; }
.form-grid { align-items: start; }
.form-field { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.form-field > span { flex: none; }
.form-field input, .form-field select { flex: none; height: 50px; min-height: 50px; }
.form-field textarea { flex: none; }
.form-required-note { margin: 0 0 18px; }
#phone-contact-note { margin: 0; font-weight: 400; }
.form-heading span { font-size: 16px !important; letter-spacing: .07em !important; }
.form-heading strong { font-size: 25px; line-height: 1.2; }
.faq-list { align-items: stretch; }
.faq-list details:not([open]) > summary { display: flex; align-items: center; height: 100%; }
.faq-list details p { margin: 0; padding: 0 0 22px; }
.faq-list summary { padding-right: 42px; }
.faq-list summary::after { top: 50%; transform: translateY(-50%); }
.faq-list details[open] summary::after { top: 20px; transform: none; }
.care-comparison > summary:focus-visible, .faq-list summary:focus-visible { outline: 3px solid var(--mint-dark); outline-offset: 4px; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { box-shadow: 0 0 0 3px #24638b26; }
@media (max-width: 1100px) {
  .contact-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 48px; }
  .inquiry-form { width: 100%; max-width: none; }
}
@media (max-width: 940px) { :root { --section-space: 72px; --panel-space: 28px; } .section-heading { gap: 24px; margin-bottom: 32px; } .service-card > p:not(.offer-price) { min-height: 0; } }
@media (max-width: 620px) {
  :root { --section-space: 56px; --panel-space: 24px; }
  .section-heading { margin-bottom: 28px; }
  .care-comparison > summary, .care-plan-note, .vendor-cost-details { padding-inline: 20px; }
  .care-plan-grid article { padding: 20px; }
  .hvac-card-copy { padding: 24px; }
  .contact-panel { padding: 36px 20px; gap: 28px; }
  .inquiry-form { padding: 24px 20px; }
  .form-heading strong { font-size: 23px; }
  .footer-main { padding-bottom: 32px; }
}
/* Approved Slate & Sky palette and component colors. */
:root {--ink:#203647;--ink-soft:#526777;--navy:#1c3040;--navy-light:#304e65;--paper:#f3f7fb;--mint:#addcef;--mint-dark:#24638b;--amber:#e3bb73;--line:#d3dfe8;--shadow:0 24px 70px #2036471f}
        .site-header.scrolled {background:#f3f7fbf5}
        .hero::before {background:#e2f0f7}
        .hero-glow,.hero-glow::before,.hero-glow::after {border-color:#d3dfe8}
        .mini-site {background:#f8fbfd}.browser-bar {background:#d3dfe8}.browser-bar span {color:#526777}
        .mint {background:#e2f0f7}.amber {background:#fff2dd}.status-dot {background:#e2f0f7;color:#24638b}
        .flow-line {border-color:#24638b70}.pulse-dot {background:#24638b;border-color:#e2f0f7;box-shadow:0 0 0 8px #e2f0f788}.clock {color:#203647}
        .service-card.featured {color:white}.service-card.featured>p:not(.offer-price),.featured .offer-price small,.featured .offer-price span {color:#e0e7ee}
        .featured ul,.automation-example-flow li {border-color:#4b6b80}
        .service-number {color:#526777}.featured .service-number {color:#addcef}
        .care-plan-grid article,.workflow-menu {background:#f8fbfd}
        .work {background:#ebf2f7}.verification-strip {background:#ffffffb3}.verification-strip small {color:#24638b}
        .ownership-note {background:#e2f0f7}
        .process-intro>p:not(.eyebrow),.process-steps p {color:#dce4ec}.process-steps li {border-color:#4b6b80}.process-steps li>span {border-color:#addcef}
        .contact-copy>p:not(.eyebrow),.contact-expectations {color:#fff}.contact-expectations {border-color:#ffffff60}
        .form-status {background:#fff2dd}.form-field input,.form-field select,.form-field textarea {background:#f8fbfd;border-color:#52677799}.form-field b {color:#24638b}
        .form-submit:disabled {box-shadow:3px 3px 0 #526777}
        .site-footer {background:#142431;color:#d4dce3}.footer-brand small {color:#c1ced5}.footer-main nav a {color:#e2e9ee}.footer-bottom {border-color:#4b6b80}
        .cue {color:#526777}.cue i {background:#d3dfe8}