/* Photographic cover and layered editorial panels. */
:root { --header-height: 100px; }
body { background: #1e1e1e; }
.header { background: rgba(255,255,255,.95); backdrop-filter: blur(18px); }
main { position: relative; isolation: isolate; }
main > section:not(.hero) { position: relative; z-index: 2; max-width: none; background: white; }
main > section.solutions-wrap, main > section.team-wrap { background: #f5f5f5; }
main > section.difference-wrap { background: #1e1e1e; }
main > section.contact-wrap { background: #e8521a; }
.footer { position: relative; z-index: 3; background: #fff; }
.hero { display: block; position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); min-height: 620px; max-height: 1100px; max-width: none; overflow: hidden; color: white; background: #272725; isolation: isolate; z-index: 0; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 48%; z-index: -2; will-change: transform; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,rgba(10,12,12,.8),rgba(10,12,12,.48) 43%,rgba(10,12,12,.08) 80%),linear-gradient(0deg,rgba(10,12,12,.6),transparent 28%); }
.hero-copy { position: relative; height: 100%; width: 100%; padding: clamp(45px,7vh,95px) 6% 125px; justify-content: center; }
.hero .eyebrow { margin-bottom: 26px; font-size: .875rem; letter-spacing: .17em; color: #fff; }
.hero h1 { font-size: clamp(4rem,8.25vw,9rem); line-height: .94; letter-spacing: -.055em; }
.hero .moment { color: #ff8859; }
.hero-description { color: #eee; font-size: clamp(1.2rem,1.65vw,1.5rem); max-width: 520px; margin-top: 27px; }
.hero .hero-cta { background: #e8521a; color: #fff; border: 1px solid transparent; margin-top: 28px; border-radius: 2px; }
.hero .hero-cta:hover { background: #c84414; }
.hero-bottom { position: absolute; bottom: 0; left: 6%; width: 88%; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid #ffffff40; margin: 0; color: #fff; font-size: .75rem; letter-spacing: .1em; }
.hero-bottom a { display: flex; width: auto; height: 44px; gap: 18px; border: 0; color: white; border-radius: 0; font-size: .875rem; letter-spacing: 0; }
.scroll-arrow { display: grid; place-items: center; border: 1px solid #ffffff66; width: 42px; height: 42px; border-radius: 50%; font-size: 1.4rem; }
.hero-bottom > span { align-self: center; }
.intro { box-shadow: 0 -30px 70px #0003; }
.hero-copy > * { animation: hero-enter 900ms cubic-bezier(.2,.7,.2,1) both; }
.hero-copy h1 { animation-delay: 100ms; }
.hero-copy .hero-description { animation-delay: 220ms; }
.hero-copy .button { animation-delay: 340ms; }
@keyframes hero-enter { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.method-stack { position: relative; padding-bottom: 40px; }
.method-panel { position: sticky; top: var(--pin-top,calc(var(--header-height) + 18px)); display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; height: min(670px,calc(100svh - var(--header-height) - 54px)); margin-bottom: 80px; border-radius: 16px; overflow: hidden; transform-origin: center top; box-shadow: 0 -12px 55px #00000016; will-change: transform; }
.method-panel:last-child { margin-bottom: 0; }
.panel-cuali { background: #f0eeeb; z-index: 1; }
.panel-cuanti { background: #1e1e1e; color: white; z-index: 2; }
.panel-mixed { background: #e8521a; color: #1e1e1e; z-index: 3; }
.method-panel-copy { padding: clamp(28px,4vw,60px); display: flex; flex-direction: column; align-items: flex-start; }
.method-panel .method-index { border: 0; padding: 0; margin: 0 0 24px; font-size: .8125rem; color: #555; }
.method-panel h3 { font-size: clamp(2.5rem,4.2vw,4.7rem); line-height: 1.04; letter-spacing: -.045em; font-weight: 500; }
.method-panel h3 em { font-style: normal; color: #c84414; }
.method-panel p { margin: 24px 0; max-width: 490px; font-size: 1.0625rem; color: #555; line-height: 1.6; }
.panel-foot { margin-top: auto; font-size: .75rem; letter-spacing: .12em; padding-top: 20px; }
.method-photo { overflow: hidden; position: relative; }
.method-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; transition: transform 1s cubic-bezier(.2,.6,.2,1); }
@media (hover:hover) { .method-panel:hover .method-photo img { transform: scale(1.045); } }
.panel-cuanti .method-index, .panel-cuanti p { color: #ccc; }
.panel-cuanti h3 em { color: #ff8859; }
.panel-mixed .method-index, .panel-mixed p { color: #222; }
.panel-mixed h3 em { color: #fff; }
.method-brand { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 50px; border-left: 1px solid #1e1e1e22; }
.method-brand img { width: 90%; max-width: 340px; }
.method-brand span { font-size: 1.3rem; line-height: 1.35; margin-top: 32px; color: #fff; align-self: flex-start; }
.process-heading { margin-top: 60px; }
.portrait { overflow: hidden; }
.portrait img { transition: transform 900ms ease; }
@media (hover:hover) { .portrait:hover img { transform: scale(1.025); } }
.motion-ready [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 700ms ease,transform 800ms cubic-bezier(.2,.7,.2,1); }
.motion-ready [data-reveal].is-visible { opacity: 1; transform: none; }
@media (min-width:1600px) { .hero-copy { padding-left: 8%; } }
@media (max-width:1000px) { :root { --header-height: 84px; } .hero { min-height: 640px; } .method-panel { min-height: 550px; grid-template-columns: 1.1fr .9fr; } .method-panel-copy { padding: 32px; } .method-panel h3 { font-size: 3rem; } .method-brand { padding: 25px; } }
@media (max-width:700px) {
  :root { --header-height: 78px; }
  .hero { min-height: 650px; height: calc(100svh - 78px); max-height: 900px; }
  .hero-photo { object-position: 62% center; }
  .hero-shade { background: linear-gradient(90deg,#101212ce,#10121255),linear-gradient(0deg,#101212b0,transparent 40%); }
  .hero-copy { padding: 45px 6% 130px; justify-content: center; }
  .hero h1 { font-size: clamp(3.5rem,13.4vw,5.7rem); }
  .hero .eyebrow { font-size: .75rem; letter-spacing: .075em; line-height: 1.5; max-width: 300px; }
  .hero-description { font-size: 1.2rem; max-width: 350px; }
  .hero-bottom { padding: 18px 0; }
  .hero-bottom > span { display: none; }
  .hero-bottom a { justify-content: space-between; width: 100%; }
  .hero .button { max-width: 100%; font-size: .9375rem; padding: 17px 20px; gap: 18px; }
  .method-panel { position: sticky; top: var(--pin-top,90px); display: flex; flex-direction: column; height: auto; min-height: 0; margin-bottom: 28px; border-radius: 12px; }
  .method-panel-copy { padding: 30px 25px; }
  .method-panel h3 { font-size: clamp(2.4rem,9.5vw,3.3rem); }
  .method-panel p { font-size: 1rem; }
  .method-photo { height: 300px; }
  .method-brand { padding: 25px 40px 35px; border-left: 0; border-top: 1px solid #1e1e1e22; }
  .method-brand img { width: 190px; }
  .method-brand span { align-self: center; font-size: 1.15rem; margin-top: 20px; text-align: center; }
  .method-stack { padding-bottom: 0; }
  .process-heading { margin-top: 45px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero { position: relative; top: auto; }
  .hero-photo,.hero-copy,.method-panel { transform: none!important; filter: none!important; opacity: 1!important; }
  .method-panel { position: relative; top: auto; }
  .motion-ready [data-reveal] { opacity: 1; transform: none; }
}