/* October 2026: viewport-aware hero and individual section atmospheres. */
.hero{isolation:isolate;height:auto;min-height:min(100svh,900px);max-height:none;justify-content:center;padding:112px 0 64px;overflow:hidden}
.hero-content{padding-block:0}
.hero h1{font-size:clamp(48px,min(6.2vw,10svh),96px);line-height:1;max-width:850px}
.hero h1>span{white-space:nowrap}
.hero .eyebrow{font-size:15px;margin-bottom:18px}
.hero-lead{font-size:16px;line-height:1.6;max-width:540px;margin-top:24px}
.hero .actions{margin-top:24px;gap:28px;flex-wrap:wrap}
.hero-bottom{bottom:18px}
.hero-bottom>span{display:none}
.hero-bottom a{margin-left:auto;min-height:32px}
.hero-art{position:absolute;inset:0 0 0 auto;width:min(100%,1672px);height:100%;object-fit:cover;object-position:right center;z-index:-2;pointer-events:none;mix-blend-mode:lighten;mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#0b0b0e 0%,#0b0b0eaa 24%,transparent 65%)}
.manifesto{position:relative;isolation:isolate}
.manifesto::before{content:"";position:absolute;inset:-80px -4vw -40px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 12% 46%,#7232b52b,transparent 43%),radial-gradient(ellipse at 24% 65%,#d5602514,transparent 35%)}
/* No repeated raster backgrounds: each section has its own quiet composition. */
.middle-flow::before,.closing-flow::before{content:none;background:none}
.cases,.solutions,.method,.igaming,.people,.contact{position:relative;isolation:isolate}
.cases{background:radial-gradient(ellipse at 95% 36%,#34234b19,transparent 50%)}
.solutions{background:radial-gradient(ellipse at 12% 63%,#632c771b,transparent 48%)}
.method{background:radial-gradient(ellipse at 0% 55%,#312c4d33,transparent 62%)}
.method-steps{position:relative}
.method-steps::before{content:"";position:absolute;width:1px;inset:24px auto 40px 24px;background:linear-gradient(transparent,#a072cb66 20%,#dd7b3544 80%,transparent);z-index:-1}
.method-steps article>span{background:transparent;padding-block:4px}
.igaming{background:radial-gradient(ellipse at 12% 50%,#a64b241c,transparent 57%)}
.people{background:radial-gradient(ellipse at 70% 50%,#71697d14,transparent 65%)}
.team article:nth-child(2)::before{background:#cf6d4f}
.team article:nth-child(3)::before{background:#bd66a5}
.team article:nth-child(4)::before{background:#876de0}
.contact{background:radial-gradient(ellipse at 80% 76%,#5724f52b,transparent 50%),radial-gradient(ellipse at 18% 96%,#ad512417,transparent 47%)}
.contact form{background:linear-gradient(145deg,#211a2b99,#110e18cc);box-shadow:0 24px 90px #0005}
/* Grid items can shrink; line wrapping must never depend on overflow clipping. */
.wrap{max-width:1280px}
.audience-grid>*,.case-grid>*,.case.featured>*,.solutions-grid>*,.method-grid>*,.igaming-grid>*,.people-heading>*,.team>*,.contact-grid>*{min-width:0}
.button,.text-link,.hero-link{max-width:100%}
.button{white-space:normal;text-align:left}
.solution-visual{margin-inline:0}
input,textarea{min-width:0;max-width:100%}
.contact-number{overflow-wrap:anywhere}
.footer>div{flex-wrap:wrap}
@media(min-width:801px) and (max-height:700px){
  .header{height:76px}.hero{padding-top:94px;padding-bottom:42px}
  .hero h1{font-size:clamp(42px,min(5.8vw,9.5svh),70px)}
  .hero .eyebrow{font-size:13px;margin-bottom:12px}
  .hero-lead{font-size:14px;line-height:1.5;margin-top:18px;max-width:550px}
  .hero .actions{margin-top:18px}.hero-bottom{display:none}
}
@media(min-width:801px) and (max-width:1100px){
  .header nav{gap:18px}.header .nav-cta{margin-left:0;padding:12px;gap:12px}.brand{width:150px}
  .hero h1{font-size:clamp(52px,min(6.5vw,9.5svh),72px)}
  .team{grid-template-columns:repeat(2,minmax(0,1fr));gap:42px}
  .contact-grid{grid-template-columns:1fr 1fr;gap:32px}.contact form{padding:26px}
  .method-grid{grid-template-columns:1fr 1fr;gap:40px}
}
@media(max-width:800px){
  .hero{min-height:min(100svh,850px);padding:110px 0 44px;max-height:none;height:auto}
  .hero h1{font-size:clamp(36px,min(9.8vw,8.6svh),66px)}
  .hero .eyebrow{font-size:13px;margin-bottom:16px}
  .hero-lead{font-size:15px;max-width:470px;margin-top:20px}
  .hero-art{width:100%;object-position:74% center;opacity:.7}
  .hero::after{background:linear-gradient(90deg,#0b0b0ee8,#0b0b0e66 75%)}
  .hero-bottom{display:none}.hero .actions{gap:20px}
  .header nav{max-height:calc(100svh - 76px);overflow-y:auto}
  .header nav a{min-height:44px}
  .manifesto{min-height:480px}.manifesto-copy{width:90%}
  .method-steps::before{left:21px}
  .case-image img,.case.featured .case-image img,.case-grid .case-image img{height:auto;aspect-ratio:4/3}
  .igaming figure img{height:auto;aspect-ratio:4/3}
}
@media(max-width:600px){
  .audience-grid{grid-template-columns:1fr}
  .audience-grid article:first-child{padding:0 0 32px}
  .audience-grid article+article{padding:32px 0 0;border-left:0;border-top:1px solid var(--line)}
  .case-grid{grid-template-columns:1fr}
  .hero .actions{flex-direction:column;align-items:flex-start;gap:10px}
  .hero-link{min-height:44px;padding-block:10px}
}
@media(max-width:540px){
  .hero{padding-top:98px;padding-bottom:30px;min-height:min(100svh,760px)}
  .hero h1{font-size:clamp(32px,min(10vw,7.6svh),52px)}
  .hero .eyebrow{font-size:12px;margin-bottom:14px}
  .hero-lead{font-size:14px;line-height:1.6;margin-top:18px;max-width:360px}
  .hero .actions{margin-top:20px}
  .hero-art{object-position:69% center;opacity:.6}
  .manifesto-copy{width:100%}
  .team{grid-template-columns:1fr;gap:32px}
  .team article{padding-left:18px;border-left:1px solid #a96cd244}
  .team article::before{display:none}.team article>span{min-height:0;font-size:13px}
  .team h3{font-size:27px;margin-top:10px}.team p:last-child{font-size:14px;max-width:360px}
  .contact input,.contact textarea{font-size:16px}
  .method-steps::before{left:18px}
}
@media(max-width:540px) and (max-height:650px){
  .hero{padding-top:92px;padding-bottom:24px}
  .hero h1{font-size:clamp(30px,9.5vw,42px)}
  .hero .eyebrow{margin-bottom:10px}
  .hero-lead{font-size:13px;line-height:1.5;margin-top:14px}
  .hero .actions{margin-top:16px;gap:6px}
}
@media(max-height:500px) and (min-width:541px){
  .hero{min-height:100svh;padding-top:96px;padding-bottom:36px}
  .hero h1{font-size:clamp(34px,5vw,48px)}
  .hero-lead{font-size:14px;max-width:540px}
  .hero .actions{flex-direction:row;align-items:center}
}

/* Content-sized CTAs centered within their own content column. */
/* Keep Lucide arrow images independent from the project-photo sizing rules. */
.case-image .image-arrow .icon{width:22px;height:22px;max-width:22px;object-fit:contain;transform:none}
.case-image:hover .image-arrow .icon{transform:none}
main .button{display:flex;width:fit-content;max-width:100%;margin-inline:auto;justify-content:center;align-self:center;text-align:center;gap:12px;padding-inline:18px}
main .text-link{display:flex;width:fit-content;max-width:100%;margin-inline:auto;justify-content:center;text-align:center;gap:12px}
.hero .actions{max-width:540px;justify-content:center;align-items:center;margin-top:36px}
.hero .actions>.button{margin-inline:0}
.hero-lead{margin-top:36px}
.hero .hero-link{width:fit-content;justify-content:center;text-align:center}
.inner-cta .text-link{margin:24px auto 0}
.header .nav-cta{width:fit-content;max-width:100%;justify-content:center;text-align:center;gap:12px}
@media(max-width:800px){
  .hero .actions{max-width:none}
  .header nav .nav-cta{align-self:center;margin-inline:auto;padding-inline:18px}
}