/* ==========================================================
   ODERA DEVLABS HOTEL — ABOUT
   Global editorial luxury / cinematic motion
   ========================================================== */

.about-page {
  --about-ink:#11110f;
  --about-paper:#f7f4ec;
  --about-cream:#eeeae1;
  --about-muted:#777168;
  --about-line:rgba(20,19,16,.13);
  background:var(--about-paper);
  color:var(--about-ink);
}

.about-page .active-nav { color:var(--gold) !important; }

.about-loader {
  position:fixed;
  inset:0;
  z-index:10000;
  background:#080808;
  color:#fff;
  display:grid;
  place-items:center;
  align-content:center;
  gap:17px;
  animation:aboutLoaderOut 1.15s cubic-bezier(.77,0,.18,1) 1s forwards;
  pointer-events:none;
}
.about-loader p {
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:8px;
  color:rgba(255,255,255,.48);
}
.loader-orbit {
  width:62px;
  height:62px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  position:relative;
  display:grid;
  place-items:center;
  animation:orbitSpin 3s linear infinite;
}
.loader-orbit:before,
.loader-orbit:after {
  content:"";
  position:absolute;
  border-radius:50%;
}
.loader-orbit:before {
  width:8px;height:8px;
  background:var(--gold);
  top:-4px;left:50%;
  transform:translateX(-50%);
}
.loader-orbit:after {
  inset:7px;
  border:1px solid rgba(216,169,40,.22);
}
.loader-orbit span {
  font:500 28px/1 var(--serif);
  color:var(--gold-bright);
  animation:orbitCounter 3s linear infinite;
}
@keyframes orbitSpin { to { transform:rotate(360deg); } }
@keyframes orbitCounter { to { transform:rotate(-360deg); } }
@keyframes aboutLoaderOut {
  0% { opacity:1; visibility:visible; }
  70% { opacity:1; }
  100% { opacity:0; visibility:hidden; }
}

.about-hero {
  height:min(960px,100vh);
  min-height:740px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:#080808;
}
.about-hero-image,
.about-hero-overlay,
.hero-grain {
  position:absolute;
  inset:0;
}
.about-hero-image {
  background:
    url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=2600&q=92')
    center/cover;
  transform:scale(1.09);
  animation:heroBreath 18s ease-in-out 1s infinite alternate;
}
.about-hero-overlay {
  background:
    linear-gradient(90deg,rgba(0,0,0,.82),rgba(0,0,0,.35) 58%,rgba(0,0,0,.18)),
    linear-gradient(180deg,rgba(0,0,0,.22),transparent 45%,rgba(0,0,0,.72));
  z-index:1;
}
.hero-grain {
  z-index:2;
  opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  pointer-events:none;
}
@keyframes heroBreath {
  from { transform:scale(1.09) translate3d(0,0,0); }
  to { transform:scale(1.16) translate3d(-1.2%,1%,0); }
}

.about-hero-copy {
  position:absolute;
  z-index:3;
  left:max(7vw,70px);
  top:51%;
  transform:translateY(-42%);
  max-width:820px;
}
.about-kicker {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:34px;
  text-transform:uppercase;
  letter-spacing:.25em;
  font-size:9px;
  color:rgba(255,255,255,.63);
}
.about-kicker i { width:45px;height:1px;background:var(--gold); }
.about-hero h1 {
  font:500 clamp(78px,10vw,154px)/.76 var(--serif);
  letter-spacing:-.065em;
  margin:0 0 39px;
}
.about-hero h1 em {
  color:var(--gold-bright);
  font-style:italic;
  font-weight:400;
}
.about-hero-copy > p {
  max-width:520px;
  margin-bottom:38px;
  color:rgba(255,255,255,.69);
  font-size:15px;
  line-height:1.9;
}
.hero-scroll {
  display:inline-flex;
  align-items:center;
  gap:19px;
  text-transform:uppercase;
  letter-spacing:.17em;
  font-size:9px;
}
.hero-scroll b {
  width:43px;height:43px;border:1px solid rgba(255,255,255,.36);
  border-radius:50%;
  display:grid;place-items:center;
  font-size:16px;font-weight:400;
  transition:.5s cubic-bezier(.22,1,.36,1);
}
.hero-scroll:hover b {
  background:var(--gold);border-color:var(--gold);color:#111;transform:translateY(7px);
}
.hero-meta {
  position:absolute;z-index:3;left:max(7vw,70px);right:40px;bottom:38px;
  display:flex;justify-content:space-between;
  text-transform:uppercase;letter-spacing:.17em;font-size:8px;color:rgba(255,255,255,.48);
}
.hero-side-label {
  position:absolute;z-index:3;right:35px;bottom:140px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  text-transform:uppercase;letter-spacing:.19em;font-size:8px;color:rgba(255,255,255,.44);
}

.reveal-up {
  opacity:0;
  transform:translateY(35px);
  animation:revealUp .9s cubic-bezier(.22,1,.36,1) forwards;
}
.reveal-up.delay-1 { animation-delay:.12s; }
.reveal-up.delay-2 { animation-delay:.24s; }
.reveal-up.delay-3 { animation-delay:.38s; }
@keyframes revealUp { to { opacity:1;transform:none; } }

.about-container {
  width:min(1280px,86vw);
  margin:0 auto;
}
.section-index {
  display:flex;align-items:center;gap:13px;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:9px;color:#8a847a;
}
.section-index i { width:50px;height:1px;background:var(--gold); }
.section-index.light { color:rgba(255,255,255,.48); }

.about-manifesto {
  padding:155px 0 170px;
  background:var(--about-paper);
}
.manifesto-grid {
  display:grid;
  grid-template-columns:1.02fr .72fr;
  gap:16%;
  align-items:end;
  margin-top:62px;
}
.eyebrow {
  text-transform:uppercase;letter-spacing:.2em;font-size:9px;
}
.manifesto-title h2,
.values-heading h2,
.about-human-copy h2 {
  margin-top:25px;
  font:500 clamp(66px,7.8vw,112px)/.8 var(--serif);
  letter-spacing:-.06em;
}
.manifesto-title h2 em,
.values-heading h2 em,
.about-human-copy h2 em { color:var(--gold);font-style:italic;font-weight:400; }
.manifesto-copy { max-width:500px; }
.manifesto-copy p { color:var(--about-muted);font-size:14px;line-height:1.95;margin-bottom:22px; }
.manifesto-copy .large-copy {
  color:#2a2824;font:400 28px/1.2 var(--serif);margin-bottom:28px;
}
.signature {
  border-top:1px solid var(--about-line);
  margin-top:44px;padding-top:17px;
  display:flex;flex-direction:column;gap:2px;
}
.signature span { text-transform:uppercase;letter-spacing:.17em;font-size:8px;color:#918a80; }
.signature strong { font:500 29px/1.1 var(--serif);font-style:italic; }

.about-split {
  min-height:900px;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  background:#11110f;color:#fff;
}
.split-image {
  position:relative;
  min-height:900px;
  background:
    linear-gradient(180deg,transparent 45%,rgba(0,0,0,.55)),
    url('https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?auto=format&fit=crop&w=2100&q=92') center/cover;
  transition:transform 1.6s cubic-bezier(.22,1,.36,1);
}
.about-split:hover .split-image { transform:scale(1.018); }
.image-label,.image-caption {
  position:absolute;text-transform:uppercase;letter-spacing:.17em;font-size:8px;
}
.image-label { top:32px;left:34px;color:rgba(255,255,255,.62); }
.image-caption { bottom:34px;right:34px;color:rgba(255,255,255,.45); }
.split-copy {
  padding:120px max(7vw,65px);
  display:flex;flex-direction:column;justify-content:center;
}
.split-copy h2 {
  margin:58px 0 30px;
  font:500 clamp(66px,7.5vw,106px)/.79 var(--serif);
  letter-spacing:-.06em;
}
.split-copy h2 em { color:var(--gold-bright);font-style:italic; }
.split-copy > p {
  max-width:480px;color:rgba(255,255,255,.57);font-size:14px;line-height:1.95;
}
.principles { max-width:520px;margin-top:50px;border-top:1px solid rgba(255,255,255,.14); }
.principles > div {
  display:grid;grid-template-columns:55px 1fr;
  padding:18px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.principles span { color:var(--gold);font-size:9px;letter-spacing:.15em; }
.principles strong { font:500 21px/1 var(--serif); }
.principles small { grid-column:2;color:rgba(255,255,255,.42);font-size:10px;margin-top:7px; }

.about-values {
  background:#eeeae1;
  padding:0 0 150px;
  overflow:hidden;
}
.marquee {
  overflow:hidden;border-top:1px solid rgba(20,20,18,.1);border-bottom:1px solid rgba(20,20,18,.1);
  padding:17px 0;margin-bottom:120px;
}
.marquee-track {
  display:flex;align-items:center;gap:34px;width:max-content;
  animation:marquee 24s linear infinite;
  text-transform:uppercase;letter-spacing:.2em;font-size:9px;color:#777168;
}
.marquee-track i { color:var(--gold);font-style:normal; }
@keyframes marquee { to { transform:translateX(-50%); } }

.values-heading {
  display:grid;grid-template-columns:1fr .58fr;gap:15%;align-items:end;
  margin:55px 0 78px;
}
.values-heading p { max-width:410px;color:#777168;font-size:14px;line-height:1.9; }
.value-grid {
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--about-line);
}
.value-card {
  min-height:310px;padding:25px 25px 20px 0;
  border-right:1px solid var(--about-line);
  margin-right:25px;
}
.value-card:last-child { border-right:0; }
.value-card span { color:#999288;font-size:9px;letter-spacing:.15em; }
.value-card h3 { margin:75px 0 18px;font:500 34px/1 var(--serif); }
.value-card p { max-width:210px;color:#777168;font-size:12px;line-height:1.8; }

.about-statement {
  min-height:880px;position:relative;overflow:hidden;color:#fff;display:grid;place-items:center;text-align:center;
}
.statement-image,.statement-shade { position:absolute;inset:-4%; }
.statement-image {
  background:url('https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=2500&q=92') center/cover;
  transform:scale(1.08);
  transition:transform 2s cubic-bezier(.22,1,.36,1);
}
.about-statement:hover .statement-image { transform:scale(1); }
.statement-shade { inset:0;background:linear-gradient(180deg,rgba(0,0,0,.37),rgba(0,0,0,.62)); }
.statement-content { position:relative;z-index:2;max-width:850px;padding:80px 25px; }
.statement-content h2 {
  margin:32px 0;
  font:500 clamp(74px,9vw,138px)/.77 var(--serif);
  letter-spacing:-.065em;
}
.statement-content h2 em { color:var(--gold-bright);font-style:italic; }
.statement-rule { width:70px;height:1px;background:var(--gold);margin:0 auto 28px; }
.statement-content p { max-width:480px;margin:auto;color:rgba(255,255,255,.63);font-size:14px;line-height:1.9; }
.statement-vertical {
  position:absolute;right:35px;bottom:40px;z-index:2;
  writing-mode:vertical-rl;text-transform:uppercase;letter-spacing:.18em;
  font-size:8px;color:rgba(255,255,255,.43);
}

.about-human {
  display:grid;grid-template-columns:1.02fr .98fr;min-height:900px;background:#faf8f2;
}
.about-human-visual { position:relative;overflow:hidden;min-height:900px; }
.human-image {
  position:absolute;inset:-2%;
  background:
    linear-gradient(180deg,transparent 45%,rgba(0,0,0,.42)),
    url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=2100&q=92') center/cover;
  transition:transform 1.5s cubic-bezier(.22,1,.36,1);
}
.about-human-visual:hover .human-image { transform:scale(1.04); }
.floating-note {
  position:absolute;bottom:38px;left:38px;color:#fff;
  text-transform:uppercase;letter-spacing:.17em;font-size:8px;
}
.about-human-copy {
  padding:120px max(7vw,70px);
  display:flex;flex-direction:column;justify-content:center;
}
.about-human-copy h2 { margin:55px 0 34px; }
.about-human-copy > p { max-width:480px;color:#777168;font-size:14px;line-height:1.95;margin-bottom:18px; }
.outline-button {
  display:inline-flex;align-items:center;gap:18px;width:max-content;
  margin-top:25px;padding:15px 18px;border:1px solid rgba(20,20,18,.28);
  text-transform:uppercase;letter-spacing:.15em;font-size:9px;
  transition:.45s cubic-bezier(.22,1,.36,1);
}
.outline-button span { font-size:16px;transition:.35s; }
.outline-button:hover { background:#111;color:#fff;border-color:#111; }
.outline-button:hover span { transform:translateX(6px); }

.about-final {
  min-height:760px;position:relative;overflow:hidden;color:#fff;display:grid;place-items:center;text-align:center;
}
.final-image,.final-overlay { position:absolute;inset:0; }
.final-image {
  background:url('https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?auto=format&fit=crop&w=2500&q=92') center/cover;
  transform:scale(1.08);
  transition:transform 2s cubic-bezier(.22,1,.36,1);
}
.about-final:hover .final-image { transform:scale(1); }
.final-overlay { background:rgba(0,0,0,.57); }
.final-content { position:relative;z-index:2;max-width:900px;padding:80px 25px; }
.final-content h2 {
  margin:25px 0;
  font:500 clamp(70px,8.5vw,128px)/.77 var(--serif);
  letter-spacing:-.06em;
}
.final-content h2 em { color:var(--gold-bright);font-style:italic; }
.final-content > p:not(.eyebrow) { max-width:490px;margin:auto;color:rgba(255,255,255,.62);font-size:14px;line-height:1.9; }
.final-actions { display:flex;justify-content:center;align-items:center;gap:28px;margin-top:38px; }
.text-button { text-transform:uppercase;letter-spacing:.15em;font-size:9px;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:8px; }
.text-button span { margin-left:12px;color:var(--gold);font-size:15px; }

.about-page .reveal {
  opacity:0;
  transform:translateY(38px);
  transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1);
}
.about-page .reveal.visible { opacity:1;transform:none; }
.about-page .reveal:nth-child(2) { transition-delay:.08s; }
.about-page .reveal:nth-child(3) { transition-delay:.15s; }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

@media(max-width:1000px) {
  .manifesto-grid,.about-split,.about-human { grid-template-columns:1fr; }
  .manifesto-grid { gap:55px; }
  .split-image,.about-human-visual { min-height:650px; }
  .split-copy,.about-human-copy { padding:90px max(7vw,50px); }
  .values-heading { grid-template-columns:1fr;gap:30px; }
  .value-grid { grid-template-columns:1fr 1fr; }
  .value-card:nth-child(2) { border-right:0; }
  .value-card { margin-bottom:15px; }
}

@media(max-width:700px) {
  .about-container { width:calc(100% - 48px); }
  .about-hero { min-height:780px; }
  .about-hero-copy { left:25px;right:25px;top:37%;transform:none; }
  .about-hero h1 { font-size:62px; }
  .about-hero-copy > p { font-size:13px; }
  .hero-meta { left:25px;right:25px;bottom:28px; }
  .hero-side-label { display:none; }

  .about-manifesto { padding:90px 0 105px; }
  .manifesto-grid { margin-top:40px; }
  .manifesto-copy .large-copy { font-size:24px; }

  .split-image,.about-human-visual { min-height:520px; }
  .split-copy,.about-human-copy { padding:78px 25px; }
  .split-copy h2,.about-human-copy h2 { font-size:62px; }

  .marquee { margin-bottom:80px; }
  .about-values { padding-bottom:90px; }
  .values-heading { margin:40px 0 55px; }
  .value-grid { grid-template-columns:1fr; }
  .value-card { min-height:auto;padding:25px 0 35px;border-right:0;border-bottom:1px solid var(--about-line);margin:0; }
  .value-card h3 { margin:45px 0 15px; }

  .about-statement { min-height:680px; }
  .statement-content h2 { font-size:66px; }

  .about-human-copy h2 { margin:42px 0 28px; }
  .about-final { min-height:680px; }
  .final-content h2 { font-size:64px; }
  .final-actions { flex-direction:column;gap:22px; }
}