/* Home only: the hero with the service timer and the showreel, 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 showreel loop (the poster shows until it plays, and for reduced motion) */
.reel{margin:0;min-width:0}
.reel-frame{position:relative;background:var(--onyx);border:1px solid var(--line-dark);border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9}
.reel-video{display:block;width:100%;height:100%;object-fit:cover}
.reel-dialog{width:min(1200px,94vw);max-width:none;padding:0;border:0;border-radius:var(--radius);background:var(--black);overflow:visible}
.reel-dialog::backdrop{background:rgba(8,7,10,.86)}
.reel-dialog video{display:block;width:100%;height:auto;border-radius:var(--radius)}
.reel-close{position:absolute;right:0;top:-48px;border:0;background:var(--onyx-3);color:var(--white);font:700 .9rem Manrope,sans-serif;height:38px;padding:0 16px;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}.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}
  .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}
}

/* the play button on the card opens the full showreel (with sound); a quiet corner button stops the loop (WCAG 2.2.2) */
.reel-play{position:absolute;left:50%;top:50%;width:clamp(72px,8vw,104px);height:clamp(72px,8vw,104px);margin:0;translate:-50% -50%;padding:0;border:0;border-radius:50%;background:none;color:var(--white);display:grid;place-items:center;cursor:pointer;opacity:.94;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.reel-play svg{width:62%;height:62%;fill:currentColor;margin-left:8%;filter:drop-shadow(0 2px 3px rgba(8,7,10,.75)) drop-shadow(0 4px 14px rgba(8,7,10,.55))}
.reel-play:hover,.reel-play:focus-visible{transform:scale(1.08);opacity:1}
.reel-play:focus{outline:none}.reel-play:focus-visible{outline:3px solid var(--amethyst);outline-offset:4px}
.reel-ctrl{position:absolute;right:12px;bottom:12px;display:flex;gap:6px}
.reel-ctrl button{width:36px;height:36px;border:0;border-radius:50%;background:rgba(13,12,16,.72);color:var(--white);display:grid;place-items:center;cursor:pointer;opacity:.82;transition:opacity .2s}
.reel-ctrl button:hover,.reel-ctrl button:focus-visible{opacity:1}
.reel-ctrl svg{width:17px;height:17px;fill:currentColor}
/* a light ring: the video runs dark and light frames under the buttons, and a dark button vanishes on the dark ones */
.reel-ctrl button,.sound-on{box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.reel-pause .i-play,.reel-pause[aria-pressed=true] .i-pause{display:none}
.reel-pause[aria-pressed=true] .i-play{display:block}
.reel-mute .i-on,.reel-mute[aria-pressed=true] .i-off{display:none;line-height:0}
.reel-mute[aria-pressed=false] .i-on,.reel-mute[aria-pressed=true] .i-off{display:block}
/* the browser blocked sound: a clear "Sound on" button, on the card and on the intro layer */
.sound-on{display:none;position:absolute;top:12px;right:12px;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 12px;border:0;border-radius:var(--radius);background:rgba(13,12,16,.82);color:var(--white);font:700 .9rem/1 Manrope,sans-serif;cursor:pointer;z-index:2}
.sound-on svg{width:20px;height:20px;fill:currentColor}
.sound-on:hover,.sound-on:focus-visible{background:var(--violet)}
.sound-blocked .sound-on{display:inline-flex}
.intro-sound{position:fixed;top:20px;right:20px;min-height:48px;padding:0 18px 0 14px;font-size:1rem;z-index:201}

/* first-visit intro: a fixed layer over everything; the page underneath is complete and painted */
.intro-layer{display:none}
.intro .intro-layer{display:block;position:fixed;inset:0;z-index:200;background:var(--onyx);overflow:hidden;cursor:pointer}
.intro-frame{position:absolute;transform-origin:0 0;overflow:hidden;background:var(--onyx);width:min(100vw,177.78vh);height:min(56.25vw,100vh);left:calc((100vw - min(100vw,177.78vh)) / 2);top:calc((100vh - min(56.25vw,100vh)) / 2)}
.intro-video{display:block;width:100%;height:100%;object-fit:cover}
.intro .hero-copy>*,.intro-played .hero-copy>*{opacity:1;translate:none;transition:none}
.intro .hero-copy>*{transform:translateX(-48px)}
.intro .reel,.intro-played .reel{opacity:1;translate:none;transition:none}
@media (prefers-reduced-motion:reduce){.intro .intro-layer{display:none}.intro .hero-copy>*{transform:none}}