/* Conversion-focused GF Web layer. Loaded after the existing redesign/motion styles. */

/* Hero: show real work immediately instead of an abstract studio-only motion graphic. */
.hero-portfolio {
  min-height: clamp(560px,72vh,820px);
  background:
    radial-gradient(circle at 15% 12%,rgba(216,255,63,.16),transparent 28%),
    linear-gradient(145deg,#10110f 0%,#171916 42%,#090a09 100%) !important;
  overflow:hidden;
}
.hero-portfolio::before {
  opacity:.08 !important;
  background-size:20% 20% !important;
}
.hero-portfolio::after {
  background:linear-gradient(180deg,rgba(0,0,0,.08),transparent 45%,rgba(0,0,0,.55)) !important;
}
.hero-browser-stack {
  position:absolute;
  inset:66px 26px 72px;
  z-index:1;
}
.hero-browser {
  position:absolute;
  display:block;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:#f3f2ed;
  color:#111;
  text-decoration:none;
  box-shadow:0 28px 70px rgba(0,0,0,.42);
  transform-origin:center;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.hero-browser:hover {
  z-index:8;
  transform:translateY(-8px) scale(1.015) !important;
  box-shadow:0 38px 90px rgba(0,0,0,.52);
  border-color:rgba(216,255,63,.72);
}
.hero-browser-primary {
  left:0;
  top:7%;
  width:72%;
  aspect-ratio:16/10;
  z-index:4;
  transform:rotate(-2.2deg);
}
.hero-browser-secondary {
  right:-2%;
  top:1%;
  width:54%;
  aspect-ratio:16/10;
  z-index:3;
  transform:rotate(3.5deg);
}
.hero-browser-tertiary {
  right:4%;
  bottom:-2%;
  width:58%;
  aspect-ratio:16/10;
  z-index:5;
  transform:rotate(1.6deg);
}
.hero-browser-chrome {
  height:34px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  padding:0 12px;
  background:#fbfaf7;
  border-bottom:1px solid rgba(0,0,0,.1);
  color:#77736c;
  font:600 9px/1 Arial,sans-serif;
  letter-spacing:.04em;
}
.hero-browser-dots { display:flex; gap:4px; }
.hero-browser-dots i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#c6c2b9;
}
.hero-browser-image {
  position:absolute;
  left:0;
  right:0;
  top:34px;
  bottom:0;
  overflow:hidden;
  background:#111;
}
.hero-browser-image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:top center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.hero-browser:hover .hero-browser-image img { transform:scale(1.025); }
.hero-browser-name {
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(7,7,7,.76);
  color:#fff;
  backdrop-filter:blur(10px);
  font:700 8px/1 Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.hero-portfolio-caption {
  position:absolute;
  left:24px;
  bottom:24px;
  z-index:8;
  max-width:250px;
  margin:0;
  color:var(--moss);
  font-size:9px;
  line-height:1.35;
  font-weight:750;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.hero-portfolio-link {
  position:absolute;
  right:24px;
  bottom:20px;
  z-index:8;
  color:#fff;
  font-size:11px;
  font-weight:700;
  text-decoration:none;
  letter-spacing:.03em;
}
.hero-portfolio-link:hover { color:var(--moss); }

/* Fast proof directly after the hero. */
.trust-strip {
  max-width:none;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid rgba(11,11,11,.12);
  border-bottom:1px solid rgba(11,11,11,.12);
  background:#fff;
}
.trust-strip > div {
  min-width:0;
  padding:28px clamp(20px,2.5vw,42px) 30px;
  border-right:1px solid rgba(11,11,11,.12);
}
.trust-strip > div:last-child { border-right:0; }
.trust-strip span {
  display:block;
  margin-bottom:22px;
  color:#8c8982;
  font-size:9px;
  font-weight:750;
  letter-spacing:.15em;
}
.trust-strip strong {
  display:block;
  margin-bottom:8px;
  font-size:clamp(18px,1.5vw,25px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.trust-strip small {
  display:block;
  max-width:260px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

/* Services: bridge feature lists back to business outcomes. */
.service-outcomes {
  max-width:none;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(50px,8vw,130px);
  padding:clamp(90px,10vw,150px) var(--pad);
  background:#111;
  color:#fff;
}
.service-outcomes > div { max-width:680px; }
.service-outcomes .eyebrow { color:var(--moss); }
.service-outcomes h2 {
  margin:26px 0 0;
  font-size:clamp(48px,6vw,92px);
  line-height:.92;
  letter-spacing:-.06em;
  font-weight:600;
}
.service-outcomes ul {
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.18);
}
.service-outcomes li {
  display:grid;
  grid-template-columns:48px minmax(120px,.55fr) minmax(0,1fr);
  gap:20px;
  align-items:start;
  padding:24px 0 26px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.service-outcomes li span {
  color:var(--moss);
  font-size:9px;
  font-weight:750;
  letter-spacing:.16em;
}
.service-outcomes li strong {
  font-size:18px;
  line-height:1.15;
  letter-spacing:-.025em;
}
.service-outcomes li small {
  color:rgba(255,255,255,.66);
  font-size:14px;
  line-height:1.55;
}

/* About: replace defensive credibility copy with concrete reasons to trust the studio. */
.studio-trust {
  max-width:none;
  padding:clamp(90px,10vw,150px) var(--pad);
  background:var(--cream);
  color:var(--ink);
}
.studio-trust-intro {
  display:grid;
  grid-template-columns:minmax(120px,.42fr) minmax(0,1.58fr);
  gap:clamp(30px,8vw,130px);
  align-items:start;
  max-width:var(--max);
  margin:0 auto clamp(54px,7vw,94px);
}
.studio-trust-intro .eyebrow { margin:8px 0 0; }
.studio-trust-intro h2 {
  grid-column:2;
  margin:0;
  max-width:850px;
  font-size:clamp(50px,6.2vw,96px);
  line-height:.93;
  letter-spacing:-.06em;
  font-weight:600;
}
.studio-trust-intro > p:not(.eyebrow) {
  grid-column:2;
  max-width:650px;
  margin:24px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.6;
}
.studio-trust-grid {
  max-width:var(--max);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(11,11,11,.16);
}
.studio-trust-grid article {
  padding:28px clamp(20px,2.6vw,42px) 10px 0;
  border-right:1px solid rgba(11,11,11,.13);
}
.studio-trust-grid article + article { padding-left:clamp(20px,2.6vw,42px); }
.studio-trust-grid article:last-child { border-right:0; }
.studio-trust-grid span {
  display:block;
  margin-bottom:42px;
  color:#8c8982;
  font-size:9px;
  font-weight:750;
  letter-spacing:.16em;
}
.studio-trust-grid h3 {
  margin:0 0 14px;
  font-size:clamp(25px,2.2vw,36px);
  line-height:1;
  letter-spacing:-.045em;
}
.studio-trust-grid p {
  max-width:360px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}

/* Friendlier quote form framing. */
body:has([data-production-form]) .page-hero h1 { max-width:900px; }
body:has([data-production-form]) .page-hero > p:not(.eyebrow) { max-width:720px; }
body:has([data-production-form]) form {
  border-top:1px solid rgba(11,11,11,.14);
  padding-top:clamp(34px,4vw,58px);
}

@media(max-width:1050px) {
  .hero-browser-stack { inset:62px 24px 72px; }
  .trust-strip { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .trust-strip > div:nth-child(2) { border-right:0; }
  .trust-strip > div:nth-child(-n+2) { border-bottom:1px solid rgba(11,11,11,.12); }
  .service-outcomes { grid-template-columns:1fr; }
  .service-outcomes > div { max-width:820px; }
  .studio-trust-intro { grid-template-columns:1fr; gap:20px; }
  .studio-trust-intro h2,.studio-trust-intro > p:not(.eyebrow) { grid-column:1; }
}

@media(max-width:700px) {
  .hero-portfolio { min-height:112vw !important; }
  .hero-browser-stack { inset:60px 14px 68px; }
  .hero-browser-primary { width:82%; top:7%; left:-4%; }
  .hero-browser-secondary { width:62%; top:2%; right:-7%; }
  .hero-browser-tertiary { width:67%; right:0; bottom:0; }
  .hero-browser-chrome { height:26px; padding:0 8px; font-size:7px; }
  .hero-browser-image { top:26px; }
  .hero-browser-name { left:8px; bottom:8px; font-size:7px; padding:6px 7px; }
  .hero-portfolio-caption { left:18px; bottom:18px; max-width:180px; font-size:7px; }
  .hero-portfolio-link { right:18px; bottom:16px; font-size:9px; }
  .trust-strip { grid-template-columns:1fr; }
  .trust-strip > div { border-right:0; border-bottom:1px solid rgba(11,11,11,.12); padding:24px 20px; }
  .trust-strip > div:last-child { border-bottom:0; }
  .trust-strip span { margin-bottom:14px; }
  .service-outcomes { padding:78px 20px; gap:48px; }
  .service-outcomes h2 { font-size:48px; }
  .service-outcomes li { grid-template-columns:36px 1fr; gap:8px 14px; }
  .service-outcomes li small { grid-column:2; }
  .studio-trust { padding:78px 20px; }
  .studio-trust-intro { margin-bottom:48px; }
  .studio-trust-intro h2 { font-size:50px; }
  .studio-trust-grid { grid-template-columns:1fr; }
  .studio-trust-grid article,.studio-trust-grid article + article { padding:26px 0 30px; border-right:0; border-bottom:1px solid rgba(11,11,11,.13); }
  .studio-trust-grid article:last-child { border-bottom:0; }
  .studio-trust-grid span { margin-bottom:24px; }
}

@media(prefers-reduced-motion:reduce) {
  .hero-browser,.hero-browser-image img { transition:none !important; }
  .hero-browser:hover { transform:none !important; }
}

/* Layer the existing signature motion behind the live-work hero proof. */
.hero-portfolio-video {
  position:absolute;
  inset:0;
  z-index:0 !important;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  opacity:.58;
  filter:brightness(.58) contrast(1.08) saturate(.9);
  transform:scale(1.045);
  pointer-events:none;
}
.hero-portfolio .hero-browser-stack { z-index:2; }

@media(max-width:1050px) {
  .hero-portfolio-video { opacity:.72; filter:brightness(.56) contrast(1.08) saturate(.92); }
  .hero-portfolio .hero-browser-stack { opacity:.5; filter:brightness(.82) saturate(.82); }
}

@media(max-width:700px) {
  .hero-portfolio { min-height:100% !important; background:#090a09 !important; }
  .hero-portfolio-video { opacity:.9; filter:brightness(.52) contrast(1.1) saturate(.9); }
  .hero-portfolio .hero-browser-stack { opacity:.24; transform:scale(1.06); transform-origin:center; }
  .hero-portfolio-caption,.hero-portfolio-link { display:none; }
}

@media(prefers-reduced-motion:reduce) {
  .hero-portfolio-video { display:none !important; }
}

/* Mobile hero cleanup: one motion layer only, no portfolio cards behind the headline. */
@media(max-width:1050px) {
  .hero-portfolio .hero-browser-stack,
  .hero-portfolio .hero-portfolio-caption,
  .hero-portfolio .hero-portfolio-link,
  .hero-portfolio .hero-motion-label,
  .hero-portfolio .hero-motion-index,
  .hero-portfolio .hero-motion-scan {
    display:none !important;
  }
  .hero-portfolio .hero-portfolio-video {
    opacity:.34 !important;
    filter:brightness(.56) saturate(.62) contrast(.92);
    transform:scale(1.08) !important;
  }
  .hero-portfolio::before { opacity:.04 !important; }
  .hero-portfolio::after {
    background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.78) 48%,rgba(0,0,0,.64) 100%) !important;
  }
}