/* Homepage-only styles in one file (one fewer request before first paint): the hero footage first,
   then additive polish: even line breaks, swipeable card rows on phones, and calm motion. */
/* Homepage hero: looping Monument Valley footage behind the existing hero copy. Layout, copy and colors are unchanged. */
/* The poster is the video's first frame and sits at the video's object-position, so the fade-in does not show two offset images. */
.hero-video{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#23261f url(/images/hero/monument-valley-poster.webp) 60% 60%/cover}
.hero-video video{width:100%;height:100%;object-fit:cover;object-position:60% 60%;opacity:0;transition:opacity .8s ease}
.hero-video video.is-playing{opacity:1}
.hero-video::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(24,25,20,.88) 0%,rgba(24,25,20,.74) 36%,rgba(24,25,20,.3) 60%,rgba(24,25,20,.05) 82%),
    linear-gradient(0deg,rgba(24,25,20,.55) 0%,rgba(24,25,20,0) 30%)}
/* Phones: the hero fills the first screen. The footage sits in a 4:5 frame at the top, framed on the buttes with only a
   light tint, then fades into the dark area that holds the copy. */
@media (max-width:800px){
  .hero{min-height:100svh;justify-content:flex-end;background:#181914;padding-top:50vw;padding-bottom:6rem}
  /* Safari's see-through toolbar floats over the page: run the dark hero down behind it (large viewport) and keep the
     copy and cue above it by the toolbar's height (large minus small viewport), so no white shows through the bar. */
  @supports (height:100lvh){.hero{min-height:100lvh;padding-bottom:calc(6rem + (100lvh - 100svh))}}
  .hero::before{display:none}
  .hero-video{bottom:auto;height:125vw;max-height:72svh;background-image:url(/images/hero/monument-valley-phone-poster.webp);background-position:50% 50%}
  .hero-video video{object-position:50% 50%}
  .hero-video::after{background:linear-gradient(180deg,rgba(24,25,20,.45) 0%,rgba(24,25,20,0) 20%,rgba(24,25,20,0) 42%,rgba(24,25,20,.8) 80%,#181914 100%)}
}
@media (prefers-reduced-motion:reduce){.hero-video video{display:none}}
.hero .hero-kicker,.hero .hero-sub,.hero .hero-trades,.hero h1{text-shadow:0 1px 14px rgba(0,0,0,.45)}
/* The large logo art gives way to the footage; a small logo mark sits beside the name in the bar. */
.hero .canyon-art{display:none}
.nav.home-nav .nav-brand-logo{height:26px;width:auto}
@media (max-width:800px){.nav.home-nav .nav-brand-logo{height:22px}}
/* See-through bar at the top of the page (class set by site-nav.js); solid again once scrolled. */
.nav.home-nav{transition:background-color .35s ease,border-color .35s ease}
.nav.home-nav.at-top{background-color:transparent;background-image:linear-gradient(180deg,rgba(20,21,17,.7) 0%,rgba(20,21,17,0) 100%);background-repeat:no-repeat;background-origin:border-box;border-bottom-color:transparent}

:root{--ic-ease:cubic-bezier(0.22,1,0.36,1)}

/* Even line breaks: no orphan words in headings, no ragged last lines in paragraphs. */
.hero h1,.section-header h2,h2,h3{text-wrap:balance}
.hero-sub,.section-header p,p{text-wrap:pretty}

/* Hero copy arrives one piece after another over the footage. */
@keyframes ic-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.hero .hero-copy>*{animation:ic-rise .8s var(--ic-ease) both}
.hero .hero-copy>:nth-child(2){animation-delay:.1s}
.hero .hero-copy>:nth-child(3){animation-delay:.2s}
.hero .hero-copy>:nth-child(4){animation-delay:.28s}
.hero .hero-copy>:nth-child(5){animation-delay:.36s}

/* Buttons respond to touch and hover. */
.btn-primary,.btn-secondary,.btn-card{transition:transform .3s var(--ic-ease),background-color .3s var(--ic-ease),border-color .3s var(--ic-ease),color .3s var(--ic-ease)}
.btn-primary:active,.btn-secondary:active,.btn-card:active{transform:scale(.98)}

/* The swipe hint only shows on phones. */
.ic-swipe-hint{display:none}

@media (max-width:800px){
  /* Kicker fits on one line instead of leaving "CONTRACTORS" alone on the second. */
  .hero .hero-kicker{letter-spacing:.06em}
  /* Long section intros read left-aligned on a narrow screen. */
  .section-header,.section-header h2,.section-header p{text-align:left}
  .section-header p{margin-left:0}

  /* Demo sites, What you get and pricing become swipeable rows: each card nearly full width, the next one peeking. */
  .sample-showcase-grid,.pricing-grid{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-inline:20px;padding:6px 20px 18px;margin-inline:-20px;max-width:none;scrollbar-width:none}
  .sample-showcase-grid::-webkit-scrollbar,.pricing-grid::-webkit-scrollbar{display:none}
  .sample-showcase-grid>*,.pricing-grid>*{flex:0 0 86%;scroll-snap-align:start;max-width:none;margin:0}
  .pricing-grid{padding-top:22px}
  .pricing .ic-swipe-hint{color:#B9B2A6}
  .sample-showcase-grid:focus-visible,.pricing-grid:focus-visible{outline:2px solid var(--focus-ring,#1F1F1F);outline-offset:2px}
  .ic-swipe-hint{display:block;margin:.25rem 0 0;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#635E56)}
}

@media (prefers-reduced-motion:reduce){
  .hero .hero-copy>*{animation:none}
  .btn-primary:active,.btn-secondary:active,.btn-card:active{transform:none}
}

/* Trade links now sit inside the hero sentence. */
.hero .hero-sub a{color:inherit;text-decoration:underline;text-decoration-thickness:0.08em;text-underline-offset:0.18em}
.hero .hero-sub a:hover,.hero .hero-sub a:focus-visible{color:#f5f1e7}

/* Hero type cleanup: one step lighter, less squeezed, the payoff right under the headline, brighter body text. */
.hero h1{font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:20px}
.hero h1 .hero-payoff{margin-top:12px;letter-spacing:-.015em}
.hero .hero-sub{color:#E9E2D5;line-height:1.5;max-width:34em;margin-bottom:28px}
.hero-actions>a{font-size:15px;font-weight:600}
@media (max-width:800px){.hero .hero-sub{font-size:17px}}

/* Section headings one step lighter than the hero headline, with the same slight tightening. */
section:not(.hero):not(.app-offer) h2{font-weight:700;letter-spacing:-.02em}

/* What you get as a spec sheet instead of boxes: heading on the left, a numbered list with thin rules on the right. */
#services .deliverables-grid{display:block;max-width:none;padding:0;margin:0}
#services .deliverable-item{background:none;border:0;border-radius:0;padding:22px 0;border-top:1px solid var(--card-border,#D4D0C8);display:grid;grid-template-columns:3.25rem 1fr;column-gap:12px;align-items:baseline}
#services .deliverable-item:last-child{border-bottom:1px solid var(--card-border,#D4D0C8)}
#services .deliverable-item span{grid-row:1/3;margin:0;font-variant-numeric:tabular-nums}
#services .deliverable-item h3{margin:0 0 6px}
#services .deliverable-item p{margin:0;max-width:40em}
@media (max-width:900px){#services .deliverable-item{display:block;padding:20px 0}#services .deliverable-item span{margin-bottom:6px}}
@media (min-width:901px){
  #services{display:grid;grid-template-columns:minmax(260px,5fr) 7fr;column-gap:64px;align-items:start;padding-left:max(2rem,calc((100% - 1180px)/2));padding-right:max(2rem,calc((100% - 1180px)/2))}
  #services .section-header{position:sticky;top:110px;text-align:left;margin:0;max-width:none}
  #services .section-header p{margin-left:0}
}

/* Handoff and Common questions: no one-sided orange bars or tinted boxes (the guide's rule); the same thin-rule
   list style as What you get, with the heading left-aligned over the content. */
.faq{padding-left:max(1.5rem,calc((100% - 1180px)/2));padding-right:max(1.5rem,calc((100% - 1180px)/2))}
.faq .section-header{text-align:left;max-width:none;margin-left:0;margin-right:0}
.faq .section-header p{margin-left:0;max-width:44em}
.faq .faq-grid{max-width:none;margin:0;column-gap:64px;row-gap:0}
.faq .faq-item{background:none;border:0;border-radius:0;border-top:1px solid var(--card-border,#D4D0C8);padding:24px 0 28px}
.faq .faq-item p{max-width:40em}
.faq .section-header p a{color:var(--action-orange-deep,#8F3217);text-underline-offset:.2em}

/* The app offer sits near the end, as a side note, and lines up with the rest of the page content. */
.app-offer{padding-left:max(1.5rem,calc((100% - 1180px)/2));padding-right:max(1.5rem,calc((100% - 1180px)/2))}
.app-offer-inner{max-width:none}

/* Pricing header lines up left with the cards, like the other sections. */
#pricing .section-header{text-align:left;max-width:1180px;margin-left:auto;margin-right:auto}
#pricing .section-header p{margin-left:0;max-width:44em}

/* Desktop: the hero fills the first screen, so the footage reads as an intro instead of a band with the next section peeking under it. */
@media (min-width:801px){.hero{min-height:100svh;padding-top:7rem;padding-bottom:4rem}}

/* Every section shares one left edge: the same 1180 px content width as the hero. */
.sample-showcase-shell{max-width:1180px}
@media (min-width:801px){.pricing-grid{max-width:1180px}}

/* A small scroll cue at the bottom of the full-screen hero. */
.hero-scroll-cue{display:flex;position:absolute;left:50%;bottom:28px;z-index:2;width:44px;height:44px;margin-left:-22px;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(245,241,231,.35);color:#f5f1e7;transition:border-color .3s var(--ic-ease),background-color .3s var(--ic-ease)}
.hero-scroll-cue span{width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.hero-scroll-cue:hover,.hero-scroll-cue:focus-visible{border-color:#f5f1e7;background:rgba(245,241,231,.08)}
.hero-scroll-cue{animation:ic-cue 2.4s var(--ic-ease) 1.2s infinite}
@media (max-width:800px){.hero-scroll-cue{bottom:20px}}
@supports (height:100lvh){@media (max-width:800px){.hero-scroll-cue{bottom:calc(20px + (100lvh - 100svh))}}}
@keyframes ic-cue{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.hero-scroll-cue{animation:none}}

/* One corner size for every homepage button and field; cards keep 8 px, so buttons nest inside them. */
.btn-primary,.btn-secondary,.btn-card,.hero-actions>a,form input,form select,form textarea{border-radius:6px}

/* Safari samples the page background for its status-bar and floating toolbar tint: dark like the hero and nav.
   Every section paints its own background, so this base color only shows in those bars and on overscroll. */
html,body{background-color:#181914}

/* Phones of every size (the 440 pt Pro Max included): hero buttons stack full width, not capped at 320 px from 421 px up. */
@media (max-width:600px){.hero .hero-actions{display:grid;grid-template-columns:1fr}.hero .hero-actions>a{width:100%;max-width:none;margin:0}}

/* Pricing, compact (2026-10-27): each card lists only what sets it apart (five rows); the items every package shares
   sit once under the cards. Tighter spacing so a whole card fits on one phone screen. */
#pricing .pricing-card{padding:1.6rem 1.6rem 1.25rem}
#pricing .card-header{padding-bottom:1rem;margin-bottom:.4rem}
#pricing .card-features{margin-bottom:1.25rem}
#pricing .card-features li{padding:.5rem 0;font-size:.95rem;line-height:1.4;border-bottom-color:rgba(31,31,31,.08)}
#pricing .card-question{min-height:0;margin-top:.6rem}
@media (min-width:768px){
  #pricing .pricing-card{grid-row:span 8}
  #pricing .card-features{grid-row:span 5}
  #pricing .card-features li{min-height:0}
}
@media (max-width:800px){
  #pricing .pricing-card{padding:1.35rem 1.25rem 1.1rem}
  #pricing .card-price{font-size:2.5rem}
}
#pricing .pricing-includes{max-width:1180px;margin:1.75rem auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.75rem}
#pricing .pricing-includes-label{margin:0;color:#f5f1e7;font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
#pricing .pricing-includes ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;margin:0;padding:0}
#pricing .pricing-includes li{display:flex;align-items:center;gap:.5rem;color:#E9E2D5;font-size:.98rem}
#pricing .pricing-includes li::before{content:'\2713';color:#E5966B;font-weight:800}
#pricing .pricing-note{max-width:1180px;text-align:left;margin-top:1rem;font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.6)}
#pricing .pricing-note,#pricing .section-header p{text-wrap:pretty}
/* Fine print keeps a readable line length (about 62em) at every width, on the column's left edge. */
#pricing .pricing-note{max-width:62em;margin-left:max(0px,calc((100% - 1180px) / 2));margin-right:auto}
#pricing .pricing-note a,#pricing .section-header p a{color:rgba(255,255,255,.85);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-skip-ink:auto}
/* Hero label above the headline (2026-10-28, Sean picked option B2): the offer in the inner pages' kicker style. */
.hero .hero-kicker{display:block;color:#e5966b;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:22px}
.hero .hero-copy>:nth-child(6){animation-delay:.42s}