/* Bashkuch 2026 refined layout. Real full-bleed artwork; never a foreground art card. */
:root { --purple: #8051a7; --purple-bright: #aa7ed1; --purple-rgb:128,81,167; }
body[data-theme="light"] { --purple:#7146a0; --purple-bright:#754aa3; --purple-rgb:113,70,160; }
html { overflow-x:clip; }
body { min-width:320px; }
.container { width:min(100% - clamp(32px,7vw,120px),1320px); }
.site-header { z-index:100; }
.site-header:not(.is-scrolled) { background:transparent; }
.header-inner { height:88px; }
.brand-mark { width:41px;height:41px; }
.brand-text { font-size:18px;letter-spacing:-.75px; }
.main-nav { gap:clamp(13px,2vw,29px); }
.header-actions { gap:10px; }
.nav-link { font-size:12px; }
.header-cta { box-shadow:0 6px 28px rgba(0,0,0,.08); }

/* Hero: the actual .hero element holds the full-width source artwork. */
.hero,
html[lang="en"] .hero {
  min-height:100svh;
  min-height:100dvh;
  width:100%;
  margin:0;
  padding:90px 0 0;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  border:0;
  border-radius:0;
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
}
body[data-theme="dark"] .hero, html[lang="en"] body[data-theme="dark"] .hero { background-image:url("hero-home-dark.png"); background-position:center center; }
body[data-theme="light"] .hero, html[lang="en"] body[data-theme="light"] .hero { background-image:url("hero-home-light.png"); background-position:center center; }
.hero::after { content:none;display:none; }
.hero::before,
body[data-theme="light"] .hero::before,
html[lang="en"] .hero::before,
html[lang="en"] body[data-theme="light"] .hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  opacity:1;
  transform:none;
  pointer-events:none;
}
.hero::before,html[lang="en"] .hero::before {
  background:linear-gradient(to left, rgba(7,7,13,.28) 0%, rgba(7,7,13,.12) 25%, transparent 55%);
}
body[data-theme="light"] .hero::before,html[lang="en"] body[data-theme="light"] .hero::before {
  background:linear-gradient(to left,rgba(252,250,246,.24) 0%,rgba(252,250,246,.12) 29%,transparent 55%);
}
.hero-ambient {
  position:absolute;
  z-index:0;
  inset:-6%;
  pointer-events:none;
  background:radial-gradient(ellipse 36% 25% at 75% 54%,rgba(128,81,167,.075),transparent 90%);
  animation:ambientIdle 10s ease-in-out infinite alternate;
}
body[data-theme="light"] .hero-ambient { opacity:.36; }
@keyframes ambientIdle { from{opacity:.32;transform:translate3d(0,0,0) scale(.98)}to{opacity:.8;transform:translate3d(-1.2%,.4%,0) scale(1.05)} }
.hero-grid,html[lang="en"] .hero-grid {
  width:min(100% - clamp(32px,7vw,120px),1320px);
  flex:1;
  min-height:0;
  position:relative;
  z-index:2;
  direction:rtl;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0;
}
.hero-copy,
html[lang="en"] .hero-copy,
html[lang="ar"] .hero-copy {
  width:min(42%,565px);
  max-width:565px;
  padding:36px 0 28px;
  margin:0;
  position:relative;
  z-index:3;
  text-align:start;
  direction:rtl;
}
html[lang="en"] .hero-copy { direction:ltr; text-align:left; }
.hero-eyebrow { color:var(--text);font-size:12px;letter-spacing:.02em; }
.hero-title { font-size:clamp(76px,8.2vw,126px);line-height:1.12;letter-spacing:-5px;margin:17px 0 7px;font-weight:900; }
html[lang="en"] .hero-title { font-size:clamp(55px,6.3vw,98px);letter-spacing:-4px; }
.title-asterisk { color:var(--purple-bright);font-size:27px;margin:24px 0 0 4px; }
.hero-subhead,html[lang="en"] .hero-subhead {
  font-size:clamp(19px,1.78vw,27px);
  font-weight:800;
  line-height:1.7;
  display:flex;
  align-items:flex-start;
  gap:13px;
  max-width:100%;
}
.purple-line { flex:0 0 24px;margin-top:24px; }
.hero-description { max-width:500px;font-size:clamp(12px,.97vw,14px);line-height:2.15;margin:18px 0 26px;color:var(--text);opacity:.87; }
.hero-ctas { gap:10px; }
.hero-ctas .btn { min-height:51px;border-radius:999px;font-size:12px; }
.hero-proof { margin-top:26px;font-size:11px;line-height:1.85;max-width:490px;color:var(--text);opacity:.68; }
.hero-floor { width:min(100% - clamp(32px,7vw,120px),1320px);padding:0 0 23px; }
.hero-floor-right { color:var(--text);opacity:.64; }
.scroll-down { color:var(--text);opacity:.70; }
.hero-visual,.griffin-picture,.hero-art-caption,.floating-chip { display:none!important; }

/* A more consistent grid and editorial rhythm under the hero. */
.ticker { border-top:1px solid var(--line); }
.services-section,.work-section,.process-section,.about-section { padding-block:clamp(86px,8vw,140px); }
.section-heading { gap:28px;align-items:end;margin-bottom:48px; }
.service-grid { gap:18px; }
.service-card { border-radius:24px;transition:border-color .3s,background .3s,box-shadow .3s; }
.service-card:hover { box-shadow:0 18px 70px rgba(53,28,75,.09);border-color:rgba(var(--purple-rgb),.32); }
.project-grid { gap:48px 24px; }
.project-visual { border-radius:22px;overflow:hidden; }
.project-card:hover .project-visual { box-shadow:0 20px 48px rgba(36,20,56,.12); }
.numbers-section { border-block:1px solid var(--line); }
.process-display { border-radius:25px; }
.about-visual { border-radius:25px; }
.about-emblem .force-light-logo { filter:none!important; }
.contact-panel { border-radius:26px; }
.contact-scene { pointer-events:none; }
.footer { border-top:1px solid var(--line); }

@media(max-width:1220px){
 .header-inner { gap:18px; }
 .hero-copy,html[lang="en"] .hero-copy { width:min(44%,510px); }
 .hero-title { font-size:clamp(70px,8vw,113px); }
 .hero-description { font-size:12.5px; }
 .hero-subhead { font-size:21px; }
}
@media(max-width:980px){
 .header-inner{height:76px}
 .hero,.hero[lang],html[lang="en"] .hero{padding-top:76px}
 .hero-grid,html[lang="en"] .hero-grid{align-items:center}
 .hero-copy,html[lang="en"] .hero-copy{width:min(49%,470px)}
 .hero-title {font-size:clamp(65px,8vw,88px)}
 .hero-proof {display:none}
 .hero-floor {padding-bottom:17px}
}
/* Tailored mobile version of the same approved background art, never a card. */
@media(max-width:700px){
  .container {width:calc(100% - 36px)}
  .header-inner {height:70px}
  .main-nav {top:70px}
  .site-header .brand-mark {width:34px;height:34px}
  .brand-text {font-size:15px}
  .header-actions{gap:7px}
  .lang-btn {min-width:54px}
  .hero,html[lang="en"] .hero {
    min-height:max(100svh,935px);
    padding-top:70px;
    background-size:cover;
    background-position:center center;
  }
  body[data-theme="dark"] .hero,html[lang="en"] body[data-theme="dark"] .hero { background-image:url("hero-mobile-dark.webp");background-position:center center; }
  body[data-theme="light"] .hero,html[lang="en"] body[data-theme="light"] .hero { background-image:url("hero-mobile-light.webp");background-position:center center; }
  .hero::before,html[lang="en"] .hero::before {
    background:linear-gradient(to bottom,rgba(8,8,14,.16) 0%, rgba(8,8,14,.12) 35%,transparent 65%);
  }
  body[data-theme="light"] .hero::before,html[lang="en"] body[data-theme="light"] .hero::before {
    background:linear-gradient(to bottom,rgba(250,248,246,.14) 0%,rgba(250,248,246,.09) 37%,transparent 65%);
  }
  .hero-grid,html[lang="en"] .hero-grid {
    width:calc(100% - 36px);
    min-height:0;
    flex:1;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    padding-top:clamp(12px,3vh,28px);
  }
  .hero-copy,html[lang="en"] .hero-copy,html[lang="ar"] .hero-copy {
    width:100%;max-width:100%;padding:16px 0 0;text-align:start;
  }
  .hero-title,html[lang="en"] .hero-title {
    font-size:clamp(66px,16vw,94px);letter-spacing:-4px;margin:11px 0 6px;
  }
  html[lang="en"] .hero-title {font-size:clamp(47px,12vw,76px);letter-spacing:-2.5px}
  .hero-subhead,html[lang="en"] .hero-subhead {font-size:clamp(18px,4.7vw,22px);line-height:1.55;max-width:96%;}
  .purple-line { flex-basis:17px;margin-top:15px; }
  .hero-description {max-width:100%;font-size:12px;line-height:2;margin:12px 0 21px;opacity:.9}
  .hero-ctas {gap:9px}
  .hero-ctas .btn {min-height:43px;font-size:11px;padding:7px 11px;gap:10px;}
  .btn-icon {width:27px;height:27px}
  .hero-proof {display:none}
  .hero-floor{width:calc(100% - 36px);padding-bottom:16px}
  .hero-floor-right {display:none}
  .scroll-down {opacity:.65}
  .services-section,.work-section,.process-section,.about-section{padding-block:78px}
  .section-heading {margin-bottom:30px}
  .service-grid{gap:14px}
  .project-grid{gap:30px}
  .contact-panel{border-radius:20px}
}
@media(max-width:370px){
 .hero-title{font-size:65px}
 .hero-ctas .btn{font-size:10px;padding-inline:9px}
 .hero-subhead{font-size:18px}
 .hero-description{font-size:11.5px}
 .header-actions{gap:5px}
}
@media(prefers-reduced-motion:reduce){.hero-ambient{animation:none}}

/* Tablets in portrait: same artwork recomposed for a tall viewport. */
@media (min-width:701px) and (max-width:980px) and (orientation:portrait){
 .hero,html[lang="en"] .hero{min-height:max(100svh,1040px);background-position:center 20%;padding-top:76px}
 body[data-theme="dark"] .hero,html[lang="en"] body[data-theme="dark"] .hero{background-image:url("hero-mobile-dark.webp");background-position:center 20%}
 body[data-theme="light"] .hero,html[lang="en"] body[data-theme="light"] .hero{background-image:url("hero-mobile-light.webp");background-position:center 20%}
 .hero-grid,html[lang="en"] .hero-grid{display:flex;flex-direction:row;justify-content:flex-start;align-items:flex-start;min-height:0;padding-top:34px}
 .hero-copy,html[lang="en"] .hero-copy,html[lang="ar"] .hero-copy{max-width:620px;width:min(100%,620px);padding:24px 0;text-align:start}
 .hero-title{font-size:clamp(78px,10vw,105px)}
 html[lang="en"] .hero-title{font-size:clamp(65px,8vw,90px)}
 .hero-subhead{font-size:24px}
 .hero-proof{display:flex}
 .hero-description{max-width:560px;font-size:14px}
 .hero-floor{padding-bottom:24px}
 .hero::before,html[lang="en"] .hero::before{background:linear-gradient(to bottom,rgba(7,7,13,.18),transparent 62%)}
 body[data-theme="light"] .hero::before,html[lang="en"] body[data-theme="light"] .hero::before{background:linear-gradient(to bottom,rgba(248,247,245,.18),transparent 62%)}
}