/* chalkthis.io homepage. One continuous landscape: night sky, a mauve horizon with an
   out-of-focus clay neighborhood, the cream ground everything stands on, then back to night.
   Colors, type, depth and components come from chalkthis-web.css. */
.home { position: relative; font-family: var(--font-sans); background: var(--ground); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  --hero-fade: linear-gradient(180deg, rgba(238, 232, 226, 0) 0%, rgba(238, 232, 226, 0) 78%, var(--ground) 100%);
  --dusk-fall: linear-gradient(180deg, var(--ground) 0%, #DED1C6 16%, #A77693 44%, #174871 72%, #0F2D4D 100%);
  --ground-shadow: rgba(15, 45, 77, 0.18); }
.home[data-theme="dark"] {
  --hero-fade: linear-gradient(180deg, rgba(15, 45, 77, 0) 0%, rgba(15, 45, 77, 0.2) 45%, var(--ground) 74%);
  --dusk-fall: linear-gradient(180deg, var(--ground) 0%, #174871 55%, #0F2D4D 100%);
  --ground-shadow: rgba(0, 0, 0, 0.4); }
.home *, .home *::before, .home *::after { box-sizing: border-box; }
.home h1, .home h2, .home h3, .home p, .home ul, .home ol, .home figure, .home fieldset { margin: 0; }
.home img { display: block; max-width: 100%; }
.home a:not(.ck-btn) { color: inherit; }
.home-wrap { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--space-12); }

/* Nav: a floating glass pill */
.home-nav { position: absolute; top: var(--space-6); left: 0; right: 0; z-index: 6; }
.home-navbar { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-6); border-radius: var(--radius-pill); }
.home-logo { display: flex; align-items: center; height: 44px; }
.home-logo img { height: 30px; width: auto; }
.home-links { display: flex; gap: var(--space-6); margin-left: auto; list-style: none; padding: 0; }
.home-links a { text-decoration: none; color: var(--ink); padding: var(--space-2) var(--space-1); border-radius: var(--radius-sm); }
.home-links a:hover { text-decoration: underline; text-underline-offset: 6px; }
.home-links a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.home-menu { display: none; margin-left: auto; }
.home .only-dark { display: none; }
[data-theme="dark"] .home-logo .only-light { display: none; }
[data-theme="dark"] .home-logo .only-dark { display: block; }

/* Drifting light, borrowed from chalkthis.ai */
.home-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.home-orb { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; mix-blend-mode: screen; animation: home-drift 26s ease-in-out infinite alternate; }
.home-orb--1 { width: 340px; height: 340px; left: 6%; top: 4%; background: var(--sapphire-stick); }
.home-orb--2 { width: 260px; height: 260px; left: 44%; top: 10%; background: var(--mauve); animation-duration: 31s; animation-delay: -8s; }
.home-orb--3 { width: 220px; height: 220px; right: 8%; top: 2%; background: var(--turquoise); animation-duration: 23s; animation-delay: -14s; }
.home-orb--4 { width: 90px; height: 90px; left: 34%; top: 30%; background: var(--gold); opacity: .35; animation-duration: 19s; animation-delay: -4s; }
@keyframes home-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, 30px) scale(1.08); } 100% { transform: translate(-40px, 50px) scale(.94); } }

/* Hero: the sky, the blurred neighborhood, and your business standing on the ground */
.home-hero { position: relative; min-height: 960px; padding: 156px 0 var(--space-8); isolation: isolate; }
.home-backdrop, .home-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; z-index: 0; max-width: none; }
.home-hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-fade); z-index: 0; pointer-events: none; }
.home-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.home-hero-copy { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-4); }
.home-kicker { color: var(--mist); opacity: .86; }
.home-hero h1 { color: var(--mist); }
.home-ask-card { border-radius: var(--radius-xl); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); color: var(--ink); max-width: 470px; }
.home-ask-card p { color: var(--ink); }
.home-fine { display: flex; align-items: center; gap: var(--space-2); }
.home-fine-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-trim); flex: none; }

.home .home-town { position: relative; margin: 88px -96px 0 -24px; }
.home-town-map { position: relative; }
.home-town img { width: 100%; height: auto; filter: drop-shadow(0 34px 34px var(--ground-shadow)); }
/* Hero video (Oct 23, 2026): the same office, animated. The clip is framed 4:3 around the picture, so it sits over the
   picture with these offsets; a soft mask cut from the diorama lets the live backdrop show everywhere else. site.js adds
   .has-video when the browser can play it (and keeps it still for people who prefer reduced motion). */
.home-town-video { display: none; position: absolute; left: -9.28%; top: -10.818%; width: 116.047%; height: 121.633%; object-fit: fill; z-index: 1; pointer-events: none;
  -webkit-mask: url(/scenes/office-loop-mask.png) center / 100% 100% no-repeat; mask: url(/scenes/office-loop-mask.png) center / 100% 100% no-repeat; }
.home-town-map.has-video .home-town-video { display: block; }
.home-town-map.has-video > img { opacity: 0; }
.home-town-map .home-pin, .home-town-map .home-ring { z-index: 2; }
.home .home-pin { color: var(--ink); }
.home-pin { position: absolute; transform: translate(-50%, -100%); display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .04em; }
.home-pin::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sapphire-ink); }
.home-pin:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.home-pin--leak::before { background: var(--status-danger); }
.home-ring { position: absolute; width: 120px; height: 120px; border-radius: 50%; border: 3px solid var(--gold); transform: translate(-50%, -50%); box-shadow: 0 0 0 6px rgba(244, 197, 66, .18); animation: home-pulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes home-pulse { 0% { box-shadow: 0 0 0 0 rgba(244, 197, 66, .45); } 100% { box-shadow: 0 0 0 22px rgba(244, 197, 66, 0); } }
.home-leak { position: absolute; z-index: 3; left: 60%; top: 76%; width: 250px; border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink); }
.home-leak-head { display: flex; align-items: center; gap: var(--space-2); }
.home-leak-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--status-danger); flex: none; }

/* Section rhythm on the ground: space, not boxes */
.home-section { position: relative; padding: var(--space-24) 0; }
.home-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 780px; }
.home-head p { color: var(--ink-muted); }

/* The six buildings, standing on the ground */
.home-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-12); row-gap: var(--space-16); margin-top: var(--space-16); list-style: none; padding: 0; }
.home-service { display: flex; flex-direction: column; gap: var(--space-3); }
.home-services > .home-service:nth-child(3n+2) { transform: translateY(56px); }
.home-stand { position: relative; height: 230px; display: flex; align-items: flex-end; justify-content: flex-start; margin-bottom: var(--space-4); }
.home-stand::after { content: ""; position: absolute; left: 4%; bottom: -10px; width: 62%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, var(--ground-shadow), rgba(15, 45, 77, 0)); z-index: 0; }
.home-stand img { position: relative; z-index: 1; height: 100%; width: auto; max-width: 78%; object-fit: contain; object-position: left bottom; }
.home-service-num { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--sapphire-ink); font-variation-settings: 'opsz' 48; }
.home-service h3 { color: var(--ink); }
.home-service p { color: var(--ink-muted); }
.home-promise { display: flex; align-items: center; gap: var(--space-2); color: var(--ink); }
.home-promise::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-trim); flex: none; }
.home-new { margin-left: var(--space-2); vertical-align: middle; }
.home-service .ck-btn--ghost { align-self: flex-start; margin-left: calc(var(--space-2) * -1); }

/* How it works: a chalk path across the ground */
.home-path { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); margin-top: var(--space-16); list-style: none; padding: 0; }
.home-path svg { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; pointer-events: none; }
.home-path svg path { fill: none; stroke: var(--gold-trim); stroke-width: 3; stroke-dasharray: 2 12; stroke-linecap: round; }
.home-stop { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.home-stop:nth-child(3) { padding-top: 56px; }
.home-stop:nth-child(4) { padding-top: 12px; }
.home-bead { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--sheen), var(--gold); box-shadow: var(--shadow-clay); color: var(--gold-on); font-family: var(--font-display); font-weight: 600; font-size: 24px; font-variation-settings: 'opsz' 48; margin-bottom: var(--space-2); }
.home-stop p { color: var(--ink-muted); max-width: 320px; }
.home-unsure { margin-top: var(--space-16); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); }
.home-unsure p { max-width: 560px; color: var(--ink); }

/* Industries: objects rising out of their panels */
.home-industry { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); align-items: center; margin-top: var(--space-16); }
.home-industry--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.home-industry--flip .home-industry-art { order: -1; }
.home-industry-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.home-industry-copy .ck-wordmark { font-size: 40px; }
.home-industry-copy p { color: var(--ink-muted); }
.home-industry-copy .home-dataline { color: var(--ink); }
.home-industry-copy .home-storm { color: var(--ink); }
.home-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.home-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.home-legal-links { margin: calc(var(--space-2) * -1) 0 0; color: var(--ink-muted); }
.home-industry-art { position: relative; height: 420px; }
.home-panel { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; border-radius: 48px 48px 48px 120px; box-shadow: var(--shadow-clay-float); }
.home-industry--flip .home-panel { border-radius: 48px 48px 120px 48px; }
.home-panel--board { background: var(--sheen), var(--turquoise-wash); }
.home-panel--talk { background: var(--sheen), var(--mauve-wash); }
.home-panel--box { background: var(--sheen), var(--clay-wash); }
.home-panel--up { background: var(--sheen), var(--sage-wash); }
.home-panel--mark { background: var(--sheen), var(--graphite-wash); }
.home-industry-art img { position: absolute; left: 50%; bottom: 28px; height: 400px; width: auto; transform: translateX(-50%); filter: drop-shadow(0 22px 20px var(--ground-shadow)); }
.home-next { margin-top: var(--space-16); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); color: var(--ink); }

/* Custom one-on-one */
.home-custom { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-16); align-items: center; }
.home-custom-art { position: relative; }
.home-custom-art .home-stand { height: 440px; justify-content: center; }
.home-custom-art .home-stand::after { left: 18%; width: 64%; }
.home-custom-art .home-stand img { max-width: 100%; object-position: center bottom; }
.home-scatter { position: absolute; width: 300px; right: -40px; top: -30px; transform: rotate(-8deg); filter: drop-shadow(0 12px 10px var(--ground-shadow)); }
.home-custom-copy { display: flex; flex-direction: column; gap: var(--space-6); }
.home-custom-copy .eyebrow { color: var(--sapphire-ink); }
.home-custom-copy > p { color: var(--ink-muted); }
.home-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.home-list li { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink); }
.home-list img { width: 26px; height: auto; flex: none; margin-top: 2px; }

/* Why chalkthis. */
.home-why { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-16); align-items: start; padding-top: var(--space-12); border-top: 1px solid var(--line); }
.home-quote { display: flex; flex-direction: column; gap: var(--space-6); }
.home-quote blockquote { margin: 0; color: var(--ink); }
.home-quote figcaption { color: var(--ink-muted); }
.home-why .home-list li { flex-direction: column; gap: var(--space-1); padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.home-why .home-list li:last-child { border-bottom: 0; }
.home-why .home-list p { color: var(--ink-muted); }

/* The ask: the ground fades back to night */
.home-dusk { position: relative; background: var(--dusk-fall); padding: var(--space-24) 0 var(--space-16); isolation: isolate; }
.home-dusk .home-orbs { top: 30%; }
.home-form { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; border-radius: var(--radius-xl); padding: var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); color: var(--ink); }
.home-form p { color: var(--ink); }
.home-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.home-fields .ck-field--wide { grid-column: 1 / -1; }
.home-form fieldset { border: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.home-form legend { padding: 0; margin-bottom: var(--space-3); color: var(--ink); }
.home-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.home-chip { position: relative; display: inline-flex; }
.home-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.home-chip span { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); background: var(--ground-sunken); box-shadow: var(--shadow-clay-well); border: 1px solid var(--line-strong); color: var(--ink); cursor: pointer; }
.home-chip input:checked + span { background: var(--sheen), var(--sapphire-ink); color: var(--ground); border-color: transparent; box-shadow: var(--shadow-clay); }
.home-chip input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.home-textarea { border-radius: 24px; min-height: 104px; resize: vertical; }
.home-consent { display: flex; gap: var(--space-3); align-items: flex-start; color: var(--ink); }
.home-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sapphire-ink); flex: none; }
.home-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
/* Best time for a call back (Oct 23, 2026): two clay dropdowns, Eastern Time. Days are filled in by site.js. */
.home-callback { padding: var(--space-4) var(--space-6) var(--space-4) !important; border-radius: 28px; background: rgba(255, 255, 255, 0.38); box-shadow: var(--shadow-clay-well); }
.home-callback legend { float: left; width: 100%; margin: 0 0 var(--space-2); }
.home-callback > .home-fields { clear: both; }
.home-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23465A6F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 20px center; background-size: 16px 16px; }
.home-select:disabled { opacity: .55; cursor: not-allowed; }
.home-callback-note { color: var(--ink-muted); min-height: 20px; }
.home-callback-note.is-needed { color: var(--status-danger); }
[data-phone-hint].is-needed { color: var(--sapphire-ink); font-weight: 600; }

/* Footer, at night */
.home-footer { background: var(--midnight); color: var(--mist); padding: var(--space-12) 0 var(--space-8); }
.home-footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.home-footer img { height: 34px; width: auto; align-self: flex-start; }
.home-footer p, .home-footer li { color: var(--mist-muted); }
.home-footer h3 { color: var(--mist); }
.home-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.home-footer a { text-decoration: none; }
.home-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.home-footer a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: var(--radius-sm); }
.home-footer .ck-wordmark { font-size: 20px; }
.home-legal { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(242, 243, 244, 0.14); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); }

/* Lead form feedback, written by site.js */
.home-field-error { color: var(--status-danger); }
.home-form-status { color: var(--ink); }
.home-form-status:empty { display: none; }
.home-form-status.is-error { color: var(--status-danger); }
.home-form-done { display: flex; flex-direction: column; gap: var(--space-4); outline: none; }

/* Tablet */
@media (max-width: 1080px) {
  .home-wrap { padding-inline: var(--space-8); }
  .home-hero { min-height: 0; padding-bottom: var(--space-8); }
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .home .home-town { margin: var(--space-8) auto 0; max-width: 760px; }
  .home-services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-services > .home-service:nth-child(3n+2) { transform: none; }
  .home-services > .home-service:nth-child(even) { transform: translateY(48px); }
  .home-industry, .home-industry--flip, .home-custom, .home-why { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .home-industry--flip .home-industry-art { order: 0; }
  .home-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone */
@media (max-width: 720px) {
  .home-callback { padding: var(--space-4) !important; border-radius: 24px; }
  .home-wrap { padding-inline: var(--space-4); }
  .home-links, .home-navbar > a.ck-btn { display: none; }
  .home-menu { display: inline-flex; }
  .home-navbar { position: relative; }
  .home-navbar.is-open .home-links { display: flex; flex-direction: column; gap: var(--space-1); position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; margin: 0; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--ground-raised); border: 1px solid var(--line); box-shadow: var(--shadow-clay-float); }
  .home-navbar.is-open .home-links a { display: block; padding: var(--space-3) var(--space-4); }
  .home-navbar { padding-left: var(--space-4); }
  .home-logo img { height: 26px; }
  .home-hero { padding-top: 116px; }
  .home-hero h1.display-xl { font-size: 46px; }
  .home-ask-card { padding: var(--space-6) var(--space-4); }
  .home .home-town { margin: var(--space-8) -8px 0; }
  .home-pin { font-size: 10px; padding: 3px 7px; }
  .home-ring { width: 64px; height: 64px; }
  .home-leak { position: relative; left: auto; top: auto; width: auto; margin: var(--space-4) var(--space-2) 0; }
  .home-section { padding: var(--space-16) 0; }
  .home h2.display-l { font-size: 36px; }
  .home-services { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12); }
  .home-services > .home-service:nth-child(n) { transform: none; }
  .home-stand { height: 180px; }
  .home-path { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .home-path svg { display: none; }
  .home-stop:nth-child(n) { padding-top: 0; }
  .home-industry-art { height: 320px; }
  .home-panel { height: 220px; }
  .home-industry-art img { height: 300px; }
  .home-industry-copy .ck-wordmark { font-size: 32px; }
  .home-custom-art .home-stand { height: 300px; }
  .home-scatter { width: 180px; right: -10px; top: -20px; }
  .home-form { padding: var(--space-8) var(--space-4); }
  .home-fields { grid-template-columns: minmax(0, 1fr); }
  .home-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .home-orb, .home-ring { animation: none; }
  .home .ck-btn, .home a.ck-card { transition: none; transform: none !important; }
}