/* =========================================================
   OSTRA v8 — MOBILE-FIRST CREATIVE SYSTEM
   ========================================================= */

/* Interaction affordances */
[data-service-card],
[data-service-link],
.project-card-clickable,
.project-portal-card[data-open-projects] { cursor:pointer; }

.service-card::after {
  content:"↗";
  position:absolute;
  right:20px;
  bottom:18px;
  font-size:18px;
  opacity:.22;
  transform:translate(-4px,4px);
  transition:opacity .25s ease,transform .3s cubic-bezier(.2,.75,.2,1);
}
.service-card:hover::after,
.service-card:active::after { opacity:.85; transform:none; }

.card-morph-ghost {
  box-shadow:0 40px 120px rgba(0,0,0,.24)!important;
  transform:none!important;
  opacity:1!important;
  transition:none!important;
  background:color-mix(in srgb,var(--bg) 94%,#fff 6%)!important;
}
.project-morph-ghost,
.project-card-morph-ghost { background:#f7f5f0!important;color:#111!important; }

/* Header + mobile navigation */
.mobile-menu-toggle {
  display:flex;
  width:38px;height:38px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  border:1px solid var(--line);
  border-radius:50%;
  background:color-mix(in srgb,var(--bg) 72%,transparent);
  color:inherit;
}
.mobile-menu-toggle span { width:14px;height:1px;background:currentColor;transition:transform .25s ease,opacity .2s ease; }
.mobile-menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(3px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-3px) rotate(-45deg); }

.mobile-menu {
  position:fixed;
  inset:0;
  z-index:49;
  background:rgba(5,5,5,.92);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
  color:#f6f2ea;
}
.mobile-menu.open { opacity:1;visibility:visible;pointer-events:auto; }
.mobile-menu nav {
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:0;
  padding:100px 20px 40px;
}
.mobile-menu a {
  display:flex;
  align-items:center;
  min-height:72px;
  border-top:1px solid rgba(246,242,234,.16);
  font-size:clamp(32px,11vw,54px);
  line-height:1;
  letter-spacing:-.055em;
}
.mobile-menu a:last-child { border-bottom:1px solid rgba(246,242,234,.16); }
body.mobile-menu-open { overflow:hidden; }

.site-header.on-dark-experience { color:#f6f2ea!important; }
.site-header.on-dark-experience .language-switch,
.site-header.on-dark-experience .header-cta,
.site-header.on-dark-experience .mobile-menu-toggle { border-color:rgba(246,242,234,.22);background:rgba(4,12,18,.48); }
.site-header.on-light-experience { color:#111!important; }
.site-header.on-light-experience .language-switch,
.site-header.on-light-experience .header-cta,
.site-header.on-light-experience .mobile-menu-toggle { border-color:rgba(17,17,17,.18);background:rgba(255,255,255,.44); }

/* HERO — immediate OSTRA-owned interaction */
.hero-v8 {
  overflow:hidden;
  isolation:isolate;
  min-height:100svh;
  padding-top:104px;
  padding-bottom:34px;
}
.hero-v8::before {
  content:"";
  position:absolute;inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 72% 38%,rgba(99,197,255,.11),transparent 25%),
    radial-gradient(circle at 64% 47%,rgba(255,154,210,.08),transparent 30%);
}
.hero-v8 > .eyebrow,
.hero-v8 > h1,
.hero-v8 > .hero-subtitle,
.hero-v8 > .hero-bottom { position:relative;z-index:4; }

.hero-live {
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}





.hero-live.three-ready 
.hero-live-label b { color:#63c5ff;font-weight:700; }
.hero-v8 .hero-subtitle {
  color:#f6f2ea;
  max-width:8.5ch;
  font-size:clamp(34px,10vw,58px);
  line-height:.94;
  letter-spacing:-.055em;
  margin-top:18px;
  text-shadow:0 4px 28px rgba(0,0,0,.22);
}
.hero-v8 .hero-bottom {
  margin-top:auto;
  padding-top:44vh;
}
.hero-v8 .hero-bottom p { font-size:14px;max-width:29ch;color:rgba(246,242,234,.64); }
.hero-v8 .arrow-link { color:#f6f2ea;border-color:rgba(246,242,234,.22); }
.hero-v8 .hero-orbit { display:none!important; }

/* Make the "normal" part of the page lighter sooner */
.statement-gallery,
.services,
.project-portal,
.satisfaction,
.visual-break { transition:background .3s ease; }

/* Underwater mobile composition */
@media (max-width:820px){
  .immersive-demo { height:250vh;min-height:1720px; }
  .immersive-demo-sticky { min-height:100svh; }
  .experience-canvas { inset:0;width:100%;height:100%;transform:none; }
  .experience-top-shade {
    height:132px;
    background:linear-gradient(180deg,rgba(2,7,10,.96),rgba(2,7,10,.55) 52%,rgba(2,7,10,0));
  }
  .experience-meta { top:76px; }
  .experience-progress { top:108px; }
  .experience-copy {
    bottom:52px!important;
    padding-right:18px;
  }
  .experience-copy h2 { font-size:clamp(39px,10.5vw,58px);max-width:9.5ch; }
  .experience-copy p { max-width:31ch;line-height:1.46;color:rgba(246,242,234,.76); }
  .experience-scroll-cue { display:none; }
}

/* Whole-page mobile pass */
@media (max-width:720px) {
  :root { --pad:20px;--radius:22px; }
  .section { padding:78px 20px; }
  .section.compact { padding-top:64px;padding-bottom:76px; }

  .site-header {
    grid-template-columns:1fr auto;
    padding:12px 14px;
    gap:8px;
  }
  .site-header nav { display:none!important; }
  .brand img { width:31px;height:31px; }
  .brand span { display:none; }
  .header-actions { gap:6px; }
  .header-cta { padding:8px 10px;font-size:10px; }
  .language-switch { font-size:8px;padding:3px 4px; }
  .language-switch button { font-size:8px; }

  .hero-v8 h1 { font-size:clamp(68px,22vw,112px);line-height:.82; }
  .hero-v8 .eyebrow { margin-bottom:18px;font-size:9px; }
  .hero-v8 .hero-bottom { grid-template-columns:1fr;gap:18px; }
  .hero-v8 .arrow-link { justify-self:start; }

  .statement,.section-heading { grid-template-columns:1fr;gap:16px; }
  .statement-copy { grid-column:1; }
  .statement h2,.section-heading h2,.chart-copy h2,.contact h2 { font-size:clamp(44px,13vw,70px); }
  .statement-globe { margin-top:26px;min-height:390px; }

  .services-title-shift { margin-left:0;white-space:normal; }
  .services-grid { grid-template-columns:1fr;gap:12px; }
  .service-card,.service-card.wide,.service-card.featured,.service-scan {
    grid-column:1!important;
    min-height:280px;
    padding:22px;
  }
  .service-card h3 { max-width:10ch;font-size:clamp(31px,9vw,48px); }
  .service-card > p { max-width:80%;font-size:13px; }
  .service-more,.service-scan-link { margin-top:auto; }
  .service-visual { opacity:.72;transform:scale(.9);transform-origin:100% 50%; }
  .scan-service-badge,.experience-service-badge { top:18px!important;right:18px!important;left:auto!important;transform:none!important; }

  .service-detail {
    min-height:100svh;
    padding:84px 20px 48px;
    grid-template-columns:1fr!important;
  }
  .service-detail-copy h2 { font-size:clamp(44px,13vw,72px)!important; }
  .service-detail-visual { min-height:250px; }

  .project-portal { padding:56px 20px; }
  .project-portal-card { min-height:500px;padding:24px;border-radius:24px;grid-template-columns:1fr;gap:24px; }
  .project-portal-copy h2 { font-size:clamp(44px,13vw,68px); }
  .project-portal-stack { min-height:210px; }
  .portal-tile { width:70%; }

  .projects-hub-layer .projects { padding:86px 20px 60px; }
  .projects-title { margin-bottom:48px; }
  .project-list { gap:56px; }
  .project-card,.project-card:nth-child(even) { grid-template-columns:1fr;gap:20px; }
  .project-card:nth-child(even) .project-media,.project-card:nth-child(even) .project-info { order:initial; }
  .project-media { min-height:360px;border-radius:22px; }
  .project-info { gap:26px; }
  .project-info h3 { font-size:clamp(34px,10vw,52px); }

  .project-detail { padding:84px 20px 52px; }
  .project-detail-head { grid-template-columns:1fr; }
  .project-detail-grid { grid-template-columns:1fr; }
  .project-detail-grid article { min-height:0; }

  .satisfaction-wrap { grid-template-columns:1fr;gap:48px; }
  .donut-shell { width:min(88vw,430px);justify-self:center; }

  .reviews { grid-template-columns:1fr; }
  .review-social { border-radius:22px; }
  .review-media { min-height:230px; }

  .visual-break { min-height:68svh;overflow:hidden; }
  .visual-word { font-size:25vw; }
  .visual-break img { width:min(72vw,360px); }

  .contact-actions { margin-top:48px; }
  .big-contact { grid-template-columns:1fr;gap:8px;padding:22px 0; }
  .big-contact strong { font-size:clamp(18px,6vw,26px);overflow-wrap:anywhere; }
  .site-footer { grid-template-columns:1fr auto;padding:28px 20px 34px;font-size:9px; }
  .site-footer p { display:none; }

  .ai-assistant { right:10px;bottom:10px; }
}

/* Desktop/tablet composition */
@media (min-width:721px) {
  .mobile-menu-toggle,.mobile-menu { display:none!important; }

  .hero-v8 { padding-top:142px; }
  .hero-v8 .hero-subtitle {
    max-width:11.5ch;
    font-size:clamp(32px,4.4vw,68px);
    margin-top:24px;
  }
  .hero-v8 .hero-bottom { padding-top:13vh; }
  

  .ski-video-main {
    width:min(47vw,660px);
    height:90svh;
    object-fit:cover;
    border-radius:32px;
    box-shadow:0 30px 100px rgba(68,30,53,.14);
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0%,black 8%,black 92%,transparent 100%);
  }
  .ski-meta { top:92px;left:var(--pad);right:var(--pad);font-size:8px; }
  .ski-copy { left:var(--pad);right:auto;bottom:9vh;width:min(560px,42vw); }
  .ski-copy-b { left:auto;right:var(--pad);text-align:right; }
  .ski-copy-b h2,.ski-copy-b p { margin-left:auto; }
  .ski-copy-c { bottom:auto;top:24vh; }
  .ski-copy h2 { font-size:clamp(52px,5.6vw,88px); }
  .ski-copy p { max-width:440px;font-size:13px; }
  .ski-scroll-hint {
    position:absolute;right:var(--pad);bottom:30px;
    display:flex;align-items:center;gap:10px;
    font-size:7px;letter-spacing:.16em;color:rgba(23,19,26,.48);
  }
  .ski-scroll-hint i { width:30px;height:1px;background:rgba(23,19,26,.26); }
  .ski-end-mark strong { font-size:clamp(100px,15vw,220px); }
}

@media (prefers-reduced-motion:reduce) {}


/* =========================================================
   OSTRA HERO — MOTHER-OF-PEARL MOTION
   Abstract, fluid and deliberately different from the globe.
   ========================================================= */
.hero-v8{
  overflow:hidden;isolation:isolate;min-height:100svh;
  padding-top:104px;padding-bottom:34px;
  background:#07090b;
}
.hero-v8::before{
  content:"";position:absolute;inset:0;z-index:-3;
  background:linear-gradient(180deg,#07090b 0%,#0a0d10 62%,#111519 100%);
}
.hero-v8>.eyebrow,.hero-v8>h1,.hero-v8>.hero-subtitle,.hero-v8>.hero-bottom{position:relative;z-index:5}

@media(min-width:721px){
  .hero-v8{padding-top:142px}
  .hero-v8 .hero-subtitle{max-width:11.5ch;font-size:clamp(32px,4.4vw,68px);margin-top:24px}
  .hero-v8 .hero-bottom{padding-top:13vh}
}

/* Underwater still resolves directly into the light site. */

/* =========================================================
   CLEAN STATIC HERO
   ========================================================= */
.hero-v8{
  position:relative;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  padding-top:104px;
  padding-bottom:34px;
  background:
    radial-gradient(circle at 74% 28%,rgba(99,197,255,.055),transparent 28%),
    linear-gradient(180deg,#07090b 0%,#0a0d10 68%,#111519 100%);
}
.hero-v8::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.32),transparent 78%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.32),transparent 78%);
}
.hero-v8 > .eyebrow,
.hero-v8 > h1,
.hero-v8 > .hero-subtitle,
.hero-v8 > .hero-bottom{
  position:relative;
  z-index:2;
}
.hero-v8 .hero-subtitle{
  color:#f6f2ea;
  max-width:8.5ch;
  font-size:clamp(34px,10vw,58px);
  line-height:.94;
  letter-spacing:-.055em;
  margin-top:18px;
}
.hero-v8 .hero-bottom{
  margin-top:auto;
  padding-top:44vh;
}
.hero-v8 .hero-bottom p{
  font-size:14px;
  max-width:29ch;
  color:rgba(246,242,234,.64);
}
.hero-v8 .arrow-link{
  color:#f6f2ea;
  border-color:rgba(246,242,234,.22);
}
.hero-v8 .hero-orbit{display:none!important}

@media (min-width:721px){
  .hero-v8{padding-top:142px}
  .hero-v8 .hero-subtitle{
    max-width:11.5ch;
    font-size:clamp(32px,4.4vw,68px);
    margin-top:24px;
  }
  .hero-v8 .hero-bottom{padding-top:13vh}
}