/* Home only: the hero with the service timer and the results plate, the client ribbon, the services tabs and the
   budget estimate. Everything else on Home comes from /shared/ui.css. */

/* hero */
.hero{padding-top:clamp(56px,7vw,96px);padding-bottom:0;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero h1{font-size:var(--t-display);letter-spacing:-.05em;line-height:1.02;max-width:11ch}
.hero .lede{margin-top:22px;color:var(--on-dark-2);font-size:1.125rem;max-width:46ch}
.hero .actions{margin-top:36px}
.hero .assure{margin-top:16px;color:var(--on-dark-3);font-size:var(--t-small)}

/* the service line on a three-second timer (the owner's v1 rotator, kept) */
.rot{position:relative;margin-top:22px;max-width:34rem}
.rot-words{position:relative;display:grid;min-height:3.4em}
.rot-w{grid-area:1/1;display:flex;flex-direction:column;gap:2px}
.rot-w b{font-size:clamp(1.3rem,2vw,1.6rem);font-weight:700;letter-spacing:-.03em;color:var(--amethyst);line-height:1.2}
.rot-w span{color:var(--on-dark-2);font-size:1rem}
.js .rot-w{opacity:0;translate:0 10px;transition:opacity .45s var(--ease),translate .45s var(--ease)}
.js .rot-w.on{opacity:1;translate:0 0}
.js .rot-w.out{opacity:0;translate:0 -10px}
.rot-bar{height:2px;background:var(--onyx-3);margin-top:14px;max-width:16rem;overflow:hidden}
.rot-bar i{display:block;height:100%;background:var(--amethyst);transform-origin:left;transform:scaleX(0)}

/* the evidence plate: real results, one at a time */
.plate{position:relative;margin:0;background:var(--onyx-2);border-radius:var(--radius);padding:18px;min-width:0}
.plate-top{display:flex;justify-content:space-between;gap:16px;align-items:baseline;margin-bottom:14px;font-size:var(--t-small);color:var(--on-dark-3)}
.plate-top b{color:var(--white);font-weight:700}
.plate-shot{position:relative;aspect-ratio:16/8;border-radius:4px;overflow:hidden;background:#fff}
.plate-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transition:opacity .7s var(--ease)}
.plate-shot img.on{opacity:1}
.plate-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:2px}
.plate-figs div{background:var(--onyx-3);padding:16px 16px 14px}
.plate-figs strong{display:block;font-size:clamp(1.25rem,2vw,1.75rem);letter-spacing:-.03em;line-height:1.1;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap}
.plate-figs span{display:block;color:var(--on-dark-3);font-size:.8rem;margin-top:6px;line-height:1.35}
.plate-foot{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:.8rem;color:var(--on-dark-3)}
.plate-foot p{flex:1}
.plate-dots{display:flex;gap:6px}
.plate-dots button{width:28px;height:28px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center}
.plate-dots button::after{content:"";width:18px;height:3px;border-radius:2px;background:var(--onyx-4);transition:background .3s}
.plate-dots button[aria-current=true]::after{background:var(--amethyst)}
.plate-pause{border:0;background:var(--onyx-3);color:var(--on-dark-2);font:600 .78rem Manrope,sans-serif;height:28px;padding:0 10px;border-radius:var(--radius);cursor:pointer}

/* the client ribbon: logos drift left to right; hover holds it */
.ribbon{margin-top:clamp(40px,5vw,56px);padding-block:26px 34px;border-top:1px solid var(--line-dark)}
.ribbon h2{font-size:var(--t-small);font-weight:600;letter-spacing:0;color:var(--on-dark-3);margin-bottom:18px}
.ribbon-view{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ribbon-track{display:flex;align-items:center;gap:64px;width:max-content;list-style:none;margin:0;padding:0 32px}
.ribbon-track li{flex:none;display:flex;align-items:center;height:48px}
.ribbon-track img{height:40px;width:auto;opacity:.8;transition:opacity .2s}
.ribbon-track img.mono{filter:brightness(0) invert(1);height:36px}
.ribbon-track img.soft{filter:grayscale(1) brightness(1.5);height:30px}
.ribbon-track .word{font-weight:700;font-size:1.2rem;letter-spacing:-.03em;color:var(--white);opacity:.78;white-space:nowrap}
.ribbon-track li:hover img,.ribbon-track li:hover .word{opacity:1}
.ribbon.run .ribbon-track{animation:ribbon var(--ribbon-s,46s) linear infinite}
.ribbon.run:hover .ribbon-track{animation-play-state:paused}
@keyframes ribbon{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* services: the list on the left, the working panel on the right; a timer on the active tab */
.svc{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(32px,5vw,72px);align-items:start}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-list button{all:unset;box-sizing:border-box;position:relative;display:flex;width:100%;align-items:baseline;justify-content:space-between;gap:16px;padding:20px 4px;border-bottom:1px solid var(--line);cursor:pointer;font-size:clamp(1.25rem,1.9vw,1.6rem);font-weight:700;letter-spacing:-.03em;color:var(--ink-3);transition:color .2s var(--ease)}
.svc-list button small{font-size:var(--t-small);font-weight:600;letter-spacing:0;color:var(--ink-3)}
.svc-list button:hover,.svc-list button[aria-selected=true]{color:var(--ink)}
.svc-list button[aria-selected=true]{box-shadow:inset 4px 0 0 var(--violet);padding-left:18px}
.svc-list button:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.svc-timer{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--violet);transform-origin:left;transform:scaleX(0)}
.svc-more{margin-top:20px;color:var(--ink-2);font-size:.95rem}
.svc-more a{color:var(--violet);font-weight:700}
.svc-help{margin-top:28px;background:var(--white);border-radius:var(--radius);padding:24px}
.svc-help h3{font-size:1.15rem;letter-spacing:-.02em}
.svc-help p{color:var(--ink-2);font-size:.95rem;margin:6px 0 16px}
.svc-panels{position:sticky;top:104px}
.svc-panel{background:var(--onyx);color:var(--on-dark);border-radius:var(--radius);overflow:hidden}
.svc-panel[hidden]{display:none}
.svc-art{background:var(--onyx-2);display:grid;place-items:center;padding:clamp(28px,3.4vw,44px) 16px clamp(20px,3vw,32px);overflow:hidden}
.svc-art .service-art{width:380px;max-width:none;height:210px;margin:0;zoom:1.8}
.svc-body{padding:30px 32px 34px}
.svc-body h3{font-size:clamp(1.6rem,2.4vw,2.1rem)}
.svc-body>p{margin-top:12px;color:var(--on-dark-2);max-width:56ch}
.svc-body ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:22px 0 26px;padding:0}
.svc-body li{background:var(--onyx-3);color:var(--on-dark-2);font-size:var(--t-small);padding:7px 12px;border-radius:var(--radius)}
.svc-body .proof{border-left:3px solid var(--amethyst);padding-left:14px;color:var(--on-dark-2);font-size:.95rem;margin-bottom:26px}
.svc-body .proof b{color:var(--white)}
.svc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}

/* plan: the live estimate and the resources */
.plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:start}
.est{background:var(--white);border-radius:var(--radius);padding:clamp(24px,3vw,36px)}
.est h3{font-size:var(--t-h3)}
.est>p{color:var(--ink-2);margin-top:8px;font-size:.98rem}
.est-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.est-out{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:2px solid var(--ink)}
.est-out strong{font-size:clamp(2.2rem,3.4vw,3rem);letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.est-out span{color:var(--ink-2)}
.est small{display:block;color:var(--ink-3);margin-top:12px;line-height:1.5}
.est-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:22px}
.res h3{font-size:var(--t-h3);margin-bottom:6px}
.res ul{margin-bottom:34px}
.res>p{display:flex;flex-wrap:wrap;gap:16px 28px}

.faq-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px)}

@media (prefers-reduced-motion:reduce){.js .rot-w{transition:none}.plate-shot img{transition:none}.ribbon-track{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center;gap:24px 48px}}
@media (max-width:1080px){
  .hero-grid,.svc,.plan,.faq-grid{grid-template-columns:minmax(0,1fr)}
  .svc-panels{position:static}
  .svc-help{display:none}
  .svc-art .service-art{zoom:1.6}
}
@media (min-width:901px) and (max-width:1080px){.hero-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
@media (max-width:760px){.svc-art .service-art{zoom:1.3}}
@media (max-width:640px){
  .hero h1{max-width:none}
  .plate{padding:12px}
  .plate-foot{flex-wrap:wrap}.plate-foot p{flex-basis:100%}
  .plate-figs{grid-template-columns:minmax(0,1fr)}
  .plate-figs div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 14px}
  .plate-figs span{margin-top:0;text-align:right}
  .ribbon-track{gap:44px}.ribbon-track img{height:28px}.ribbon-track img.mono{height:30px}.ribbon-track .word{font-size:1.05rem}
  .svc-list button small{display:none}
  .svc-body{padding:24px 20px 28px}
  .svc-art .service-art{zoom:.86}
  .est-fields{grid-template-columns:minmax(0,1fr)}
  .svc-cta,.est-cta{flex-direction:column;align-items:stretch}
  .svc-cta .btn,.est-cta .btn{justify-content:center}
  .svc-cta .link,.est-cta .link{align-self:flex-start}
}