/* GraphikaWeb page: extras on top of the shared Graphika stylesheet */
.gw-page h1 em,.gw-page h2 em{font-style:normal;color:var(--red)}
.gw-page .display--light em,.gw-page .pkg--dark h3 em{color:#ff6b78}

/* hero: mockups on a clean white background, copy on the left */
.gw-hero{position:relative;background:#fff url('../assets/hero.webp') right center/cover no-repeat;padding:clamp(96px,8.5vw,124px) 0 clamp(36px,4.5vw,64px);overflow:hidden}
.gw-hero__copy{max-width:440px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.gw-hero h1{font-size:clamp(2.2rem,4.6vw,3.7rem);font-weight:800;line-height:1.02;letter-spacing:-.03em;color:var(--ink)}
.gw-hero__sub{font-size:1.05rem;font-weight:600;color:var(--ink)}
.gw-hero__lede{color:var(--slate);max-width:400px}
.gw-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.gw-hero__note{font-size:.85rem;color:var(--slate)}
.gw-hero__stats{display:flex;gap:32px;margin-top:4px}
.gw-hero__stats dt{font-size:1.35rem;font-weight:800;color:var(--ink);line-height:1}
.gw-hero__stats dd{font-size:.78rem;color:var(--slate);margin-top:4px}

/* industries strip */
.gw-trust{background:#fff;border-bottom:1px solid #eef1f2;padding:36px 0;text-align:center}
.gw-trust__label{font-size:.78rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-bottom:18px}
.gw-trust ul{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;font-weight:600;color:var(--ink)}
.gw-trust li::before{content:"•";color:var(--red);margin-right:10px}

.gw-lead{max-width:760px;margin:-20px 0 40px}
.gw-teaser{margin-top:28px}
.gw-center{display:flex;justify-content:center;margin-top:40px}
.steps small{display:block;margin-top:14px;font-size:.75rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}

/* portfolio tiles: concept sheet crops and real screenshots */
.work-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2vw,28px)}
.work-tile{flex:0 0 calc((100% - 2 * clamp(14px,2vw,28px)) / 3);margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 24px 50px -28px rgba(28,28,30,.35),0 0 0 1px rgba(28,28,30,.06);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.work-tile:hover{transform:translateY(-8px)}
.work-img{--x:0;--y:0;--w:1;--h:1;display:block;width:100%;aspect-ratio:calc(var(--w) / var(--h));background-image:url("../assets/portfolio.webp");background-repeat:no-repeat;background-size:calc(1536 / var(--w) * 100%) auto;background-position:calc(var(--x) / (1536 - var(--w)) * 100%) calc(var(--y) / (1024 - var(--h)) * 100%);transition:transform 1s var(--ease)}
.work-tile:hover .work-img{transform:scale(1.04)}
.work-tile-shot{display:flex;flex-direction:column;aspect-ratio:491 / 492;background:#000}
.work-bar{display:flex;align-items:center;gap:5px;flex:none;height:22px;padding:0 10px;background:#E9E7E6}
.work-bar i{width:7px;height:7px;border-radius:50%;background:#CFCBC8}
.work-bar i:nth-child(1){background:#E5594E}.work-bar i:nth-child(2){background:#EBB53E}.work-bar i:nth-child(3){background:#4BB05A}
.work-tile-shot img{flex:1;min-height:0;width:100%;object-fit:cover;object-position:top;transition:transform 1s var(--ease)}
.work-tile-shot:hover img{transform:scale(1.04)}
@media (max-width:1000px){.work-tile{flex-basis:calc((100% - clamp(14px,2vw,28px)) / 2)}}
@media (max-width:560px){.work-tile{flex-basis:100%}}

/* pricing */
.pkgs--3{grid-template-columns:repeat(3,1fr);align-items:stretch}
.pkgs--3 .pkg{display:flex;flex-direction:column;gap:14px;padding:36px 30px}
.pkgs--3 .pkg .btn{margin-top:auto;align-self:flex-start}
.gw-price{font-size:2rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.gw-price small{display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:4px}
.gw-price span{font-size:.85rem;font-weight:600;color:var(--slate)}
.pkg--dark .gw-price,.pkg--dark .gw-price small,.pkg--dark .gw-price span{color:#fff}
.pkg--dark .gw-price small,.pkg--dark .gw-price span{opacity:.7}
.gw-badge{position:absolute;top:-12px;right:24px;background:var(--red);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.gw-note{margin-top:32px;text-align:center;color:var(--slate)}
.gw-note a{color:var(--red);font-weight:600}
@media (max-width:1000px){.pkgs--3{grid-template-columns:1fr}}
@media (max-width:820px){
  .gw-hero{background-size:auto 46%;background-position:right bottom;padding-bottom:clamp(260px,62vw,420px)}
  .gw-hero__actions .btn{width:100%}
}
.gw-hero h1 .nw{white-space:nowrap}
@media (min-width:821px){.gw-hero__actions{flex-wrap:nowrap;gap:10px;width:max-content}.gw-hero__actions .btn{white-space:nowrap}}
/* trusted-by marquee */
.gw-trust{padding:32px 0 28px}
.marquee{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)}
.marquee-track{display:flex;width:max-content;animation:gwmarquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{display:inline-flex;align-items:center;white-space:nowrap;padding:0 22px;font-size:clamp(.95rem,1.4vw,1.15rem);font-weight:700;color:var(--ink)}
.marquee-track span::after{content:"✦";font-size:.6rem;color:var(--red);margin-left:44px}
@keyframes gwmarquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* problem section: text beside a computer mockup */
.gw-split{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.gw-split .section__head{margin-bottom:24px;max-width:none}
.gw-split__img img{width:100%;height:auto;mix-blend-mode:multiply}
@media (max-width:820px){.gw-split{grid-template-columns:1fr}}
.gw-page .section--tint .pkg:not(.pkg--dark){background:#fff;box-shadow:0 10px 30px -18px rgba(42,53,63,.25)}
/* phones and tablets: mockups sit below the copy, never behind it */
@media (max-width:820px){
  .gw-hero{background-size:max(100%,560px) auto;background-position:right bottom;padding-bottom:calc(max(100vw,560px) * .47 + 28px)}
}
@media (min-width:700px){#services .section__head{max-width:none}#services .section__head .display{white-space:nowrap}}
#services .section__head{max-width:none}
#services .section__head .display{white-space:nowrap;font-size:min(3.4rem,calc((100vw - 48px) / 15.5))}