/* Main site (Door 1): color-block layout. Loaded after site.css on index.html only,
   so the audit pages keep their own look. Color lives in 3 big moments (top, What we fix,
   Get in touch); the sections between stay calm cream. Phones get the high-level version. */
.home{--edge:max(56px,calc((100vw - 1280px)/2 + 56px));font-size:18px}
.home .wrap{max-width:1280px;padding:0 56px}
.home section{padding:0}
.home .inl{padding-left:var(--edge)}
.home .inr{padding-right:var(--edge)}
.home h2{font-size:64px;letter-spacing:-.035em;line-height:1.02}
.home .eyebrow{font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.home .phone{display:none}

/* header */
.home header{background:var(--forest);border-bottom-color:var(--deep-pine)}
.home .nav{height:64px}
.home .nav .logo img{width:146px}
.home .nav ul{font-size:16px;gap:34px;color:var(--cream)}
.home .nav ul a:hover,.home .nav ul a.on{color:#f0a37f}
.home .nav .btn{background:var(--cream);color:var(--forest)}
.home .nav .btn:hover{background:#fff}

/* top */
.h-hero{display:grid;grid-template-columns:1.1fr 1fr;min-height:620px}
.h-hero .l{background:var(--forest);color:var(--cream);padding-top:80px;padding-bottom:88px;padding-right:64px;display:flex;flex-direction:column;justify-content:center}
.home .h-hero h1{color:var(--cream);font-size:80px;letter-spacing:-.04em;line-height:.98}
.h-hero .lead{color:var(--sage);font-size:21px;margin-top:28px;max-width:500px}
.h-hero .actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.h-hero .note{font-size:15px;margin-top:22px;color:var(--sage)}
.h-hero .r{background:var(--clay);display:flex;align-items:center;justify-content:center;padding-top:56px;padding-bottom:56px;padding-left:56px}
.home .live{width:100%;max-width:440px;border:0;border-radius:6px;padding:10px 28px 24px;box-shadow:0 30px 60px rgba(30,36,32,.25)}
.home .live .lrow{font-size:17px;padding:14px 0}
.home .live .badge{font-size:13px}
.home .live .lfoot{font-size:17px;font-weight:600;border-radius:4px;padding:16px 18px;margin-top:16px}

/* why strip */
.h-why{border-bottom:1px solid var(--sand)}
.h-why .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.h-why .wrap>div{padding:28px;border-left:1px solid var(--sand)}
.h-why .wrap>div:first-child{border-left:0;padding-left:0}
.h-why h3{font-size:19px}
.h-why p{font-size:16px;color:var(--moss-gray);margin-top:2px}

/* section heads */
.h-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px}
.h-head p{color:var(--moss-gray);font-size:19px;max-width:420px}

/* what we fix */
.h-fix{padding-top:112px!important}
.band{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.band .col{min-height:460px;padding:40px 32px 36px;display:flex;flex-direction:column;color:var(--cream)}
.band .col:nth-child(1){background:var(--forest)}
.band .col:nth-child(2){background:var(--deep-pine)}
.band .col:nth-child(3){background:var(--clay)}
.band .col:nth-child(4){background:var(--sand);color:var(--ink)}
.band .col:nth-child(5){background:var(--paper);color:var(--ink)}
.band .n{font-size:15px;opacity:.75}
.home .band h3{color:inherit;font-size:32px;letter-spacing:-.02em;line-height:1.05;margin-top:16px}
.band p{margin-top:14px;opacity:.85;font-size:17px}
.band .p{margin-top:auto;font-size:40px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.band .p small{display:block;font-size:14px;font-weight:500;letter-spacing:0;opacity:.75}

/* how it works */
.h-how{padding-top:112px!important;padding-bottom:40px!important}
.home .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1.5px solid var(--forest)}
.home .step{padding:36px 40px 56px 0}
.home .step+.step{padding-left:40px;border-left:1px solid var(--sand)}
.home .step:before{display:none}
.step .big{display:block;font-size:180px;font-weight:600;line-height:.8;letter-spacing:-.06em;color:var(--clay);margin-bottom:28px}
.home .step h3{font-size:28px;letter-spacing:-.02em}
.home .step p{color:var(--moss-gray);margin-top:10px;font-size:18px}

/* sample audit */
.h-sample{background:var(--forest);color:var(--cream);padding:104px 0!important;margin-top:72px}
.sgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:88px;align-items:center}
.home .h-sample h2{color:var(--cream)}
.h-sample .lead{color:var(--sage);font-size:19px;margin-top:14px;max-width:400px}
.h-sample .btn{margin-top:32px}
.home .ba{margin:0;background:none;border:0;border-top:1.5px solid var(--sage);border-radius:0;padding:0}
.ba .eyebrow{margin-top:16px;color:var(--sage)}
.ba .row{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;padding:22px 0;border-bottom:1px solid var(--deep-pine)}
.ba .row span{font-size:18px;color:var(--sage)}
.ba .row b{font-size:48px;font-weight:600;letter-spacing:-.03em;color:var(--cream);text-align:right;white-space:nowrap}
.ba .row s{font-size:18px;color:#f0a37f;margin-right:16px;font-weight:500;letter-spacing:0}

/* about */
.h-about{padding-top:112px!important}
.home .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;border-top:1.5px solid var(--forest);padding-bottom:72px}
.home .stats div{border:0;padding:32px 32px 0 0}
.home .stats b{color:var(--clay);font-size:112px;font-weight:600;letter-spacing:-.05em;line-height:1}
.home .stats span{font-size:18px;color:var(--moss-gray)}
.home .proof{border-top:1px solid var(--sand);border-bottom:1px solid var(--sand)}
.home .proof .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.home .proof .wrap>div{padding:40px 28px 48px;border-left:1px solid var(--sand)}
.home .proof .wrap>div:first-child{border-left:0;padding-left:0}
.home .proof h3{font-size:22px}
.home .proof p{color:var(--moss-gray);margin-top:10px;font-size:16px}

/* questions */
.h-faq{display:grid;grid-template-columns:1fr 1.6fr}
.h-faq .side{background:var(--sand);padding-top:112px;padding-bottom:112px;padding-right:56px}
.h-faq .stick{position:sticky;top:112px}
.h-faq .side p{color:var(--moss-gray);margin-top:14px;font-size:18px;max-width:320px}
.h-faq .side a:not(.btn){color:var(--forest);font-weight:600}
.h-faq .side .btn{margin-top:28px}
.h-faq .list{padding-top:112px;padding-bottom:112px;padding-left:72px}
.h-faq details{border-bottom:1px solid rgba(36,56,44,.2)}
.h-faq details:first-child{border-top:1.5px solid var(--forest)}
.h-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:21px;font-weight:600;color:var(--forest);padding:22px 0}
.h-faq summary::-webkit-details-marker{display:none}
.h-faq summary::after{content:"+";color:var(--clay);font-size:28px;font-weight:400;line-height:1;transition:transform .2s}
.h-faq details[open] summary::after{transform:rotate(45deg)}
.h-faq details p{color:var(--moss-gray);padding:0 0 22px;max-width:620px}

/* get in touch */
.h-contact{display:grid;grid-template-columns:1fr 1fr}
.h-contact .l{background:var(--clay);color:var(--cream);padding-top:96px;padding-bottom:96px;padding-right:64px;display:flex;flex-direction:column;justify-content:center}
.home .h-contact h2{color:var(--cream);font-size:88px;line-height:.95}
.h-contact .l p{font-size:20px;margin-top:24px;max-width:420px}
.h-contact .l a{color:var(--cream);font-weight:600}
.h-contact .r{background:var(--forest);padding-top:88px;padding-bottom:88px;padding-left:64px}
.h-form{display:flex;flex-direction:column;gap:20px}
.h-form .two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.h-form label{color:var(--cream);font-weight:500}
.h-form label span{color:var(--sage)}
.h-form input:not([type=checkbox]),.h-form textarea{width:100%;height:50px;border:0;border-bottom:1.5px solid var(--sage);border-radius:0;background:transparent;color:var(--cream);font:18px var(--font-brand);padding:0 2px}
.h-form textarea{height:88px;padding-top:12px;resize:vertical}
.h-form input:focus,.h-form textarea:focus{outline:none;border-bottom-color:#f0a37f}
.h-form .bad input{border-bottom-color:#f0a37f}
.h-form .err{color:#f0a37f}
.h-form .check-row{background:none;padding:4px 0;color:var(--cream)}
.h-form .check-row input{accent-color:var(--clay)}
.h-form .check-row small{color:var(--sage)}
.h-form .btn{width:100%;margin-top:4px}
.h-form .done h3{color:var(--cream)}
.h-form .done p{color:var(--sage)}

/* footer */
.home footer{border-top:1px solid var(--deep-pine);padding:36px 0}
.home footer nav{gap:24px}

/* phones: the high-level version */
@media (max-width:860px){
  .home{--edge:20px;font-size:17px}
  .home .wrap{padding:0 20px}
  .home .lap{display:none!important}
  .home .phone{display:inline-flex}
  .home h2{font-size:40px}
  .h-hero,.h-faq,.h-contact{grid-template-columns:1fr}
  .h-hero{min-height:0}
  .h-hero .l{padding:40px 20px 48px}
  .home .h-hero h1{font-size:46px}
  .h-hero .lead{font-size:18px;margin-top:20px}
  .h-hero .actions{margin-top:28px}
  .h-hero .actions .btn{flex:0 0 auto}
  .h-hero .r{padding:36px 20px}
  .home .live{padding:6px 20px 20px}
  .home .live .lrow{font-size:16px;padding:12px 0}
  .h-head{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px}
  .h-head p{font-size:17px}
  .h-fix,.h-how,.h-about{padding-top:64px!important}
  .band{grid-template-columns:1fr}
  .band .col{min-height:0;padding:20px;display:grid;grid-template-columns:1fr auto;column-gap:16px;align-items:center}
  .band .n{grid-column:1}
  .home .band h3{font-size:24px;margin-top:4px;grid-column:1}
  .band p{display:none}
  .band .p{grid-column:2;grid-row:1/3;margin:0;font-size:30px;text-align:right}
  .h-how{padding-bottom:0!important}
  .home .steps{grid-template-columns:1fr}
  .home .step,.home .step+.step{padding:18px 0;border-left:0;border-bottom:1px solid var(--sand);display:flex;align-items:center;gap:18px}
  .step .big{font-size:44px;margin:0;width:32px;flex:none}
  .home .step h3{font-size:20px}
  .home .step p{display:none}
  .h-sample{padding:56px 0!important;margin-top:56px}
  .sgrid{grid-template-columns:1fr;gap:24px}
  .ba .row{padding:16px 0}
  .ba .row b{font-size:28px}
  .ba .row span{font-size:15px}
  .ba .row s{font-size:15px;margin-right:10px}
  .h-sample .ba .btn{margin-top:28px}
  .home .stats{padding-bottom:56px}
  .home .stats div{padding:20px 10px 0 0}
  .home .stats b{font-size:38px}
  .home .stats span{font-size:14px;display:block;line-height:1.3}
  .h-faq .side{padding:56px 20px 32px}
  .h-faq .list{padding:0 20px 48px}
  .h-faq summary{font-size:18px;padding:18px 0}
  .h-contact .l{padding:56px 20px 40px}
  .home .h-contact h2{font-size:56px}
  .h-contact .l p{font-size:18px}
  .h-contact .r{padding:36px 20px 48px}
  .h-form .two{grid-template-columns:1fr;gap:20px}
  .home footer .wrap{flex-direction:column;align-items:flex-start;gap:14px}
}
@media (max-width:860px){
  body.home.has-tabs{padding-bottom:0}
  .home footer{padding-bottom:calc(36px + 76px + env(safe-area-inset-bottom))}
}

/* small laptops and tablets: same layout, scaled down; services go 3 + 2 */
@media (min-width:861px) and (max-width:1200px){
  .home{--edge:40px}
  .home .wrap{padding:0 40px}
  .home .nav ul{gap:20px;font-size:15px}
  .home .nav .logo img{width:128px}
  .home h2{font-size:52px}
  .home .h-hero h1{font-size:60px}
  .h-hero .l{padding-right:40px}
  .h-hero .r{padding-left:40px}
  .band{grid-template-columns:repeat(6,minmax(0,1fr))}
  .band .col{grid-column:span 2;min-height:330px}
  .band .col:nth-child(n+4){grid-column:span 3}
  .step .big{font-size:120px}
  .home .step h3{font-size:24px}
  .sgrid{gap:48px}
  .ba .row b{font-size:36px}
  .home .stats b{font-size:80px}
  .home .proof .wrap>div{padding:32px 20px 40px}
  .home .proof .wrap>div:first-child{padding-left:0}
  .h-faq .list{padding-left:48px}
  .home .h-contact h2{font-size:64px}
  .h-contact .r{padding-left:40px}
  .h-form .two{grid-template-columns:1fr;gap:20px}
}
@media (min-width:861px) and (max-width:960px){
  .home .nav ul{gap:16px;font-size:14px}
  .home .nav .btn{padding:0 14px}
  .h-hero{grid-template-columns:1fr}
  .h-hero .r{padding:48px 40px}
  .h-why .wrap{grid-template-columns:1fr 1fr}
  .h-why .wrap>div:nth-child(3){border-left:0;padding-left:0}
  .home .steps{grid-template-columns:1fr}
  .home .step,.home .step+.step{padding:28px 0;border-left:0;border-bottom:1px solid var(--sand)}
  .sgrid{grid-template-columns:1fr}
  .home .proof .wrap{grid-template-columns:1fr 1fr}
  .home .proof .wrap>div:nth-child(3){border-left:0;padding-left:0}
}
.h-faq .side a:not(.btn){display:inline-block}
.h-form [hidden]{display:none!important}

/* Floating cards (round 10): every color block, the top included, is a rounded card 16px from the screen edge */
.home header{background:var(--cream);border-bottom-color:transparent}
.home .nav ul{color:var(--forest)}
.home .nav ul a:hover,.home .nav ul a.on{color:var(--clay)}
.home .nav .btn{background:var(--clay);color:#fff}
.home{--card:calc(100% - 32px)}
.home .h-hero,.home .band,.home .h-sample,.home .h-contact,.home .h-faq{width:var(--card);margin-left:auto;margin-right:auto;border-radius:24px;overflow:hidden}
.home .h-hero{margin-top:4px}
.home .h-sample{margin-top:56px}
.home .h-faq{margin-top:16px;background:var(--paper);border:1px solid var(--sand)}
.home .h-faq .stick{top:96px}
.home .h-contact{margin-top:16px;margin-bottom:16px}
.home .h-form input:not([type=checkbox]),.home .h-form textarea{background:rgba(244,238,228,.07);border:1.5px solid rgba(169,184,160,.45);border-radius:10px;padding:0 14px}
.home .h-form textarea{padding-top:12px}
.home footer{width:var(--card);margin:0 auto 16px;border-radius:24px;border:0}
@media (min-width:1201px){.home .h-hero h1{font-size:72px}}
/* service titles: always two lines on laptop so all five cards line up */
.home .band h3{white-space:nowrap}
@media (max-width:860px){
  .home .band .lb{display:none}
  .home .band h3{white-space:normal}
  .home{--card:calc(100% - 20px)}
  .home .h-hero,.home .band,.home .h-sample,.home .h-contact,.home .h-faq,.home footer{border-radius:18px}
  .home footer{margin-bottom:calc(10px + 76px + env(safe-area-inset-bottom));padding-bottom:28px}
  .home .h-hero{margin-top:2px}
  .home .h-sample{margin-top:40px}
  .home .h-faq{margin-top:10px}
  .home .h-contact{margin-top:10px;margin-bottom:10px}
}

/* Round 11: cards stop growing on wide screens, shorter service cards, tighter spacing, service detail panel */

/* wide screens: cards max out 16px wider than the text column, and their text lines up with it */
@media (min-width:1201px){
  .home{--card:min(1312px,calc(100% - 32px))}
  .home .h-hero,.home .h-faq,.home .h-contact{--edge:calc(max(56px,(100vw - 1280px)/2 + 56px) - max(16px,(100vw - 1312px)/2))}
  .home .band .col{padding-left:40px;padding-right:28px}
}

/* tighter spacing, so the page is quicker to get through */
.home .h-fix,.home .h-how,.home .h-about{padding-top:88px!important}
.home .h-sample{padding:80px 0!important;margin-top:48px}
.home .h-hero{min-height:560px}
@media (min-width:1201px){
  .step .big{font-size:128px;margin-bottom:20px}
  .home .step{padding-bottom:40px}
  .home .stats b{font-size:88px}
}
.home .stats{padding-bottom:56px}
.h-faq .side,.h-faq .list{padding-top:88px;padding-bottom:88px}
.h-contact .l{padding-top:80px;padding-bottom:80px}
.h-contact .r{padding-top:72px;padding-bottom:72px}

/* service cards: shorter, and each one opens its details */
.home button.col{font:inherit;text-align:left;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:filter .15s,transform .15s}
.home .band .col{min-height:0;padding-top:32px;padding-bottom:28px}
.home .band .p{margin-top:auto;padding-top:28px}
.band .more{display:block;margin-top:10px;font-size:15px;font-weight:600;opacity:.8}
.home button.col:hover{filter:brightness(1.06)}
.home button.col:hover .more{opacity:1;text-decoration:underline}
.home .band .col:nth-child(5):hover{filter:brightness(.98)}

/* the detail panel */
dialog.svcp{border:0;padding:0;border-radius:24px;width:min(560px,calc(100% - 32px));max-height:calc(100% - 48px);background:var(--paper);color:var(--ink);box-shadow:0 40px 80px rgba(30,36,32,.35)}
dialog.svcp::backdrop{background:rgba(30,36,32,.55)}
dialog.svcp:focus{outline:none}
dialog.svcp[open]{animation:svc-in .2s ease-out}
@keyframes svc-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.svc-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:50%;background:rgba(244,238,228,.18);color:inherit;font-size:24px;line-height:1;cursor:pointer;z-index:1}
.svc-top{padding:36px 64px 28px 32px;background:var(--forest);color:var(--cream)}
dialog.svcp[data-svc=google] .svc-top{background:var(--deep-pine)}
dialog.svcp[data-svc=responder] .svc-top{background:var(--clay)}
dialog.svcp[data-svc=ads] .svc-top{background:var(--sand);color:var(--ink)}
dialog.svcp[data-svc=website] .svc-top{background:var(--cream);color:var(--ink)}
dialog.svcp[data-svc=ads] .svc-x,dialog.svcp[data-svc=website] .svc-x{background:rgba(36,56,44,.1);color:var(--forest)}
.svc-top h3{color:inherit;font-size:32px;letter-spacing:-.02em}
.svc-top p{margin-top:10px;font-size:18px;opacity:.9}
.svc-body{padding:24px 32px 28px}
.svc-body .eyebrow{color:var(--moss-gray)}
.svc-body ul{list-style:none;margin:10px 0 0;padding:0}
.svc-body li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--sand);font-size:17px}
.svc-body li:before{content:"✓";color:var(--clay);font-weight:600}
.svc-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;flex-wrap:wrap}
.svc-foot b{color:var(--forest);font-size:18px}

@media (max-width:860px){
  .band .more{display:none}
  .home .band .p{margin:0}
  .home .band .col{padding:20px}
  .home .band .col .p:after{content:"›";margin-left:10px;font-weight:400;opacity:.6}
  .home .h-fix,.home .h-how,.home .h-about{padding-top:56px!important}
  .home .h-sample{padding:56px 0!important;margin-top:40px}
  .home .stats b{font-size:38px}
  .h-faq .side{padding:48px 20px 28px}
  .h-faq .list{padding:0 20px 40px}
  .h-contact .l{padding:48px 20px 36px}
  .h-contact .r{padding:32px 20px 44px}
  dialog.svcp{width:100%;max-width:none;margin:auto 0 0;border-radius:20px 20px 0 0;max-height:85%}
  .svc-top{padding:28px 60px 22px 20px}
  .svc-top h3{font-size:26px}
  .svc-body{padding:18px 20px calc(24px + env(safe-area-inset-bottom))}
  .svc-foot .btn{width:100%}
}