/* ============================================================
   ALMARA DESIGN — Home Page (v5 — Scroll Storytelling)
   ============================================================ */

/* ── Section Header ─────────────────────────── */
.section-header { text-align:center; margin-bottom:var(--space-16); }
.section-title {
  font-family:var(--font-display); font-size:var(--text-3xl);
  font-weight:400; line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); color:var(--color-text-primary);
  margin-top:var(--space-3);
}
.section-title em { font-style:italic; color:var(--color-accent); }

/* ══════════════════════════════════════════════
   PAGE LOADER
══════════════════════════════════════════════ */
.loader {
  position:fixed; inset:0; z-index:9999;
  background:#0A0906;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  transition:opacity .7s ease, visibility .7s ease;
}
.loader.done { opacity:0; visibility:hidden; pointer-events:none; }
.loader__bar {
  position:absolute; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--color-accent-light),var(--color-accent));
  transition:width .05s linear;
}
.loader__brand { display:flex; align-items:center; justify-content:center; }
.loader__logo  { height:76px; width:auto; opacity:0; animation:loaderChar .6s .2s forwards; }
@keyframes loaderChar { to { opacity:1; } }

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero {
  position:relative; width:100%; height:100svh; min-height:680px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:#0A0906;
}

/* Parallax photo layers */
.hero__parallax { position:absolute; inset:-15%; z-index:0; }
.hero__layer { position:absolute; inset:0; will-change:transform; }

.hero__layer--photo { overflow:hidden; }
.hero__photo {
  width:100%; height:100%; object-fit:cover; object-position:center 35%;
  transform:scale(1.1); transition:transform 1.2s cubic-bezier(.25,.46,.45,.94);
  filter:brightness(.55) saturate(.8);
}
.hero__photo.loaded { transform:scale(1); }

.hero__layer--grain {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.04'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(1) infinite; opacity:.6; pointer-events:none;
}
@keyframes grainShift {
  0%{background-position:0 0} 20%{background-position:-5% -10%}
  40%{background-position:10% 5%} 60%{background-position:-8% 15%}
  80%{background-position:5% -5%} 100%{background-position:0 0}
}

/* Overlays */
.hero__overlay { position:absolute; inset:0; pointer-events:none; }
.hero__overlay--bottom {
  z-index:4;
  background:linear-gradient(to bottom,
    rgba(8,7,6,.2) 0%, transparent 30%,
    transparent 50%, rgba(6,5,4,.95) 100%);
}
.hero__overlay--vignette {
  z-index:3;
  background:radial-gradient(ellipse 110% 100% at 50% 50%,
    transparent 30%, rgba(5,4,3,.6) 100%);
}

.hero__mesh { position:absolute; inset:0; z-index:3; width:100%; height:100%; opacity:.5; pointer-events:none; }

/* Content */
.hero__content {
  position:relative; z-index:10; text-align:center;
  padding-inline:var(--container-pad); max-width:1000px;
}

.hero__eyebrow {
  display:flex; align-items:center; justify-content:center; gap:var(--space-4);
  margin-bottom:var(--space-8); opacity:0; transform:translateY(16px);
  animation:heroFadeUp .8s .9s forwards;
}
.hero__eyebrow-line { display:block; width:32px; height:1px; background:var(--color-accent); }
.hero__eyebrow-text {
  font-size:var(--text-xs); font-weight:400; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:rgba(184,149,106,.75);
}

.hero__title {
  font-family:var(--font-display); font-size:var(--text-hero);
  font-weight:300; line-height:1.0; letter-spacing:-.04em;
  color:#F0EDE7; margin-bottom:var(--space-8);
}
.hero__word {
  display:inline-block; opacity:0;
  transform:translateY(70px) skewY(4deg);
  animation:wordUp 1s cubic-bezier(.16,1,.3,1) forwards; margin-right:.18em;
}
.hero__word--italic { font-style:italic; color:var(--color-accent-light); }
.hero__word:nth-child(1){animation-delay:1.05s}
.hero__word:nth-child(2){animation-delay:1.17s}
.hero__word:nth-child(4){animation-delay:1.29s}
.hero__word:nth-child(5){animation-delay:1.41s}
@keyframes wordUp { to { opacity:1; transform:translateY(0) skewY(0deg); } }

.hero__subtitle {
  font-size:var(--text-md); font-weight:300; line-height:1.75;
  color:rgba(240,237,231,.5); max-width:54ch; margin-inline:auto;
  margin-bottom:var(--space-10); opacity:0; transform:translateY(20px);
  animation:heroFadeUp .8s 1.6s forwards;
}
.hero__actions {
  display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap;
  opacity:0; transform:translateY(20px); animation:heroFadeUp .8s 1.8s forwards;
}
@keyframes heroFadeUp { to { opacity:1; transform:translateY(0); } }

.btn--glass {
  background:rgba(248,246,242,.07); color:rgba(240,237,231,.8);
  border:1.5px solid rgba(240,237,231,.2); backdrop-filter:blur(12px);
}
.btn--glass:hover {
  background:rgba(248,246,242,.14); border-color:rgba(240,237,231,.45);
  color:#F0EDE7; transform:translateY(-2px);
}

/* Scroll cue */
.hero__scroll-cue {
  position:absolute; bottom:var(--space-8); left:50%; transform:translateX(-50%);
  z-index:10; display:flex; flex-direction:column; align-items:center; gap:var(--space-3);
  color:rgba(240,237,231,.28); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; animation:heroFadeUp .6s 2.3s forwards;
}
.hero__scroll-track { width:1px; height:50px; background:rgba(240,237,231,.12); position:relative; overflow:hidden; }
.hero__scroll-thumb {
  position:absolute; top:-100%; left:0; width:100%; height:50%;
  background:var(--color-accent); animation:scrollThumb 2.5s ease-in-out infinite;
}
@keyframes scrollThumb { 0%{top:-100%} 100%{top:200%} }

/* Stats */
.hero__stats {
  position:absolute; bottom:var(--space-8); right:var(--container-pad);
  z-index:10; display:flex; align-items:center; gap:var(--space-6);
  opacity:0; animation:heroFadeUp .6s 2.1s forwards;
}
.hero__stat { display:flex; flex-direction:column; align-items:center; gap:2px; }
.hero__stat-num { font-family:var(--font-display); font-size:var(--text-2xl); font-weight:300; color:#F0EDE7; line-height:1; }
.hero__stat-label { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(240,237,231,.32); }
.hero__stat-sep { width:1px; height:28px; background:rgba(240,237,231,.1); }

/* ══════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════ */
.marquee-wrap {
  overflow:hidden; background:var(--color-surface-alt);
  border-block:1px solid var(--color-border); padding-block:var(--space-4);
  white-space:nowrap;
}
.marquee-track { display:inline-block; animation:marquee 30s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.marquee-track span {
  font-size:var(--text-xs); font-weight:500; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:var(--color-text-muted); padding-inline:var(--space-6);
}
.marquee-track span.dot { color:var(--color-accent); opacity:.6; padding-inline:0; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ══════════════════════════════════════════════
   SCROLL PIN SECTIONS  (sticky-scroll storytelling)
══════════════════════════════════════════════ */

/* Philosophy — sticky left, content slides right */
.philosophy { background:var(--color-bg); }
.philosophy__grid {
  display:grid; grid-template-columns:1fr 1.6fr;
  gap:var(--space-16); align-items:start;
}
.philosophy__left {
  position:sticky; top:calc(var(--nav-height) + var(--space-8));
}
.philosophy__title {
  font-family:var(--font-display); font-size:var(--text-3xl);
  font-weight:400; line-height:var(--leading-tight); color:var(--color-text-primary);
  margin-block:var(--space-4);
}
.philosophy__title em { font-style:italic; color:var(--color-accent); }
.philosophy__accent-line { width:48px; height:2px; background:var(--color-accent); margin-top:var(--space-4); }
.philosophy__lead {
  font-family:var(--font-display); font-size:var(--text-lg); font-weight:300;
  line-height:var(--leading-loose); color:var(--color-text-primary); margin-bottom:var(--space-6);
}
.philosophy__body {
  font-size:var(--text-base); line-height:var(--leading-loose);
  color:var(--color-text-secondary); margin-bottom:var(--space-8);
}

/* ══════════════════════════════════════════════
   IMAGE BREAK — Two-panel split
══════════════════════════════════════════════ */
.image-break { display:grid; grid-template-columns:1fr 1fr; height:500px; overflow:hidden; }
.image-break__panel { position:relative; overflow:hidden; cursor:pointer; }
.image-break__panel img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.25,.46,.45,.94), filter .6s ease;
  filter:brightness(.75) saturate(.85);
}
.image-break__panel:hover img { transform:scale(1.05); filter:brightness(.85) saturate(1); }
.image-break__label {
  position:absolute; bottom:var(--space-6); left:var(--space-6);
  font-size:var(--text-xs); font-weight:500; letter-spacing:var(--tracking-wider);
  text-transform:uppercase; color:rgba(240,237,231,.85);
  background:rgba(10,9,6,.45); backdrop-filter:blur(8px);
  padding:.4rem 1rem; border-radius:var(--radius-full);
  border:1px solid rgba(240,237,231,.14); transition:all .3s;
}
.image-break__panel:hover .image-break__label { color:#F0EDE7; border-color:rgba(184,149,106,.4); }
.image-break__panel:first-child { border-right:2px solid var(--color-bg); }

/* ══════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════ */
.services { background:var(--color-surface-alt); }
.services__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6); }
.service-card {
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-8); position:relative; overflow:hidden;
  transition:transform .55s cubic-bezier(.25,.46,.45,.94), box-shadow .55s ease, border-color .3s;
}
.service-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--color-accent),transparent);
  opacity:0; transition:opacity .3s;
}
.service-card:hover { transform:translateY(-10px); box-shadow:var(--shadow-lg); border-color:rgba(184,149,106,.35); }
.service-card:hover::before { opacity:1; }
.service-card__number {
  font-family:var(--font-display); font-size:4rem; font-weight:300;
  color:var(--color-border); line-height:1; margin-bottom:var(--space-4);
  transition:color .35s;
}
.service-card:hover .service-card__number { color:rgba(184,149,106,.2); }
.service-card__icon { width:48px; height:48px; margin-bottom:var(--space-4); }
.service-card__icon svg { width:100%; height:100%; stroke:var(--color-accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.service-card__title { font-family:var(--font-display); font-size:var(--text-xl); font-weight:400; color:var(--color-text-primary); margin-bottom:var(--space-3); }
.service-card__desc { font-size:var(--text-sm); line-height:var(--leading-loose); color:var(--color-text-secondary); margin-bottom:var(--space-6); }
.service-card__link {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--text-xs); font-weight:600; letter-spacing:var(--tracking-wide);
  text-transform:uppercase; color:var(--color-accent); transition:gap .3s;
}
.service-card__link:hover { gap:var(--space-3); }
.service-card__link svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }

/* ══════════════════════════════════════════════
   FEATURED — HOVER EXPAND STRIP
══════════════════════════════════════════════ */
.featured { background:var(--color-bg); }
.expand-strip {
  display:flex; gap:6px; height:560px;
  border-radius:var(--radius-lg); overflow:hidden;
  margin-bottom:var(--space-12);
}
.expand-item {
  position:relative; flex:0 0 72px; cursor:pointer;
  border-radius:var(--radius-md); overflow:hidden;
  transition:flex .55s cubic-bezier(.4,0,.2,1); outline:none;
}
.expand-item--active { flex:0 0 460px; }

.expand-item__photo {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .75s cubic-bezier(.25,.46,.45,.94), filter .5s;
  filter:brightness(.5) saturate(.75);
}
.expand-item--active .expand-item__photo { transform:scale(1.04); filter:brightness(.62) saturate(.9); }

.expand-item__overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to top,rgba(6,5,4,.95) 0%,rgba(6,5,4,.3) 45%,transparent 100%);
}
.expand-item__info {
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  padding:var(--space-6) var(--space-6);
  opacity:0; transform:translateY(14px);
  transition:opacity .4s .1s, transform .4s .1s;
}
.expand-item--active .expand-item__info { opacity:1; transform:translateY(0); }
.expand-item__cat {
  display:block; font-size:10px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent-light); margin-bottom:var(--space-2);
}
.expand-item__title {
  font-family:var(--font-display); font-size:var(--text-xl); font-weight:300;
  line-height:1.15; color:#F0EDE7; margin-bottom:var(--space-2);
}
.expand-item__meta { font-size:11px; letter-spacing:.07em; color:rgba(240,237,231,.38); margin-bottom:var(--space-4); }
.expand-item__cta {
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-accent-light); transition:gap .25s;
}
.expand-item__cta svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.expand-item__cta:hover { gap:var(--space-3); }
.expand-item__num {
  position:absolute; bottom:var(--space-4); left:50%; transform:translateX(-50%);
  z-index:3; font-family:var(--font-display); font-size:var(--text-sm); font-weight:300;
  color:rgba(240,237,231,.28); writing-mode:vertical-rl; letter-spacing:.1em;
  transition:opacity .3s;
}
.expand-item--active .expand-item__num { opacity:0; }
.featured__cta { text-align:center; }

/* ══════════════════════════════════════════════
   PROCESS — alternating slide cards
══════════════════════════════════════════════ */
.process { background:var(--color-surface-alt); }
.process__track { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.process__step {
  display:flex; align-items:flex-start; gap:var(--space-5);
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); padding:var(--space-8);
  transition:border-color .3s, box-shadow .3s;
}
.process__step:hover { border-color:rgba(184,149,106,.35); box-shadow:var(--shadow-md); }
.process__step-num {
  font-family:var(--font-display); font-size:3.5rem; font-weight:300;
  line-height:1; color:var(--color-border); flex-shrink:0; min-width:2.8rem;
  transition:color .5s;
}
.process__step:hover .process__step-num { color:rgba(184,149,106,.25); }
.process__step-title { font-family:var(--font-display); font-size:var(--text-lg); font-weight:400; color:var(--color-text-primary); margin-bottom:var(--space-2); }
.process__step-desc { font-size:var(--text-sm); line-height:var(--leading-loose); color:var(--color-text-secondary); }

/* ══════════════════════════════════════════════
   CTA BANNER
══════════════════════════════════════════════ */
.cta-banner { position:relative; padding-block:var(--space-24); text-align:center; overflow:hidden; background:#0A0906; }
.cta-banner__photo { position:absolute; inset:0; z-index:0; }
.cta-banner__photo img { width:100%; height:100%; object-fit:cover; object-position:center 35%; filter:brightness(.3) saturate(.65); }
.cta-banner__overlay { position:absolute; inset:0; z-index:1; background:linear-gradient(135deg,rgba(6,5,4,.75) 0%,rgba(35,26,14,.55) 100%); }
.cta-banner__canvas { position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:.55; pointer-events:none; }
.cta-banner__content { position:relative; z-index:3; }
.cta-banner__label { color:var(--color-accent-light); opacity:.7; }
.cta-banner__title {
  font-family:var(--font-display); font-size:var(--text-3xl); font-weight:300;
  color:#F0EDE7; margin-block:var(--space-4) var(--space-10); line-height:var(--leading-tight);
}
.cta-banner__title em { font-style:italic; color:var(--color-accent-light); }

/* ══════════════════════════════════════════════
   SCROLL ANIMATION CLASSES
══════════════════════════════════════════════ */

/* Basic fade+rise */
.scrub-fade {
  opacity:0; transform:translateY(40px);
  transition:opacity .8s ease, transform .8s ease;
}
.scrub-fade.in-view { opacity:1; transform:translateY(0); }

/* Slide from sides */
.scrub-slide[data-dir="left"]  { opacity:0; transform:translateX(-60px); transition:opacity .75s ease,transform .75s ease; }
.scrub-slide[data-dir="right"] { opacity:0; transform:translateX(60px);  transition:opacity .75s ease,transform .75s ease; }
.scrub-slide.in-view { opacity:1; transform:translateX(0); }

/* Scale in */
.scrub-scale { opacity:0; transform:scale(.92); transition:opacity .8s ease,transform .8s ease; }
.scrub-scale.in-view { opacity:1; transform:scale(1); }

/* Text character split */
.scrub-chars .char {
  display:inline-block; opacity:0;
  transform:translateY(80%) skewY(5deg);
  transition:opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.scrub-chars.in-view .char { opacity:1; transform:translateY(0) skewY(0deg); }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:1024px) { .process__track { grid-template-columns:1fr; } }
@media (max-width:900px) {
  .philosophy__grid { grid-template-columns:1fr; gap:var(--space-8); }
  .philosophy__left { position:static; }
  .services__grid   { grid-template-columns:1fr; gap:var(--space-4); }
  .expand-strip     { height:440px; }
  .hero__stats      { display:none; }
}
@media (max-width:700px) {
  .expand-strip { flex-direction:column; height:auto; }
  .expand-item  { flex:none !important; height:300px; }
  .expand-item--active { flex:none !important; height:300px; }
  .expand-item__info { opacity:1; transform:translateY(0); }
  .expand-item__num  { display:none; }
  .image-break { grid-template-columns:1fr; height:auto; }
  .image-break__panel { height:240px; }
  .image-break__panel:first-child { border-right:none; border-bottom:2px solid var(--color-bg); }
}
@media (max-width:600px) {
  .section-title { font-size:var(--text-2xl); }
  .hero__subtitle { font-size:var(--text-base); }
  .hero__actions  { flex-direction:column; align-items:center; }
  .cta-banner__title { font-size:var(--text-2xl); }
  .philosophy__title { font-size:var(--text-2xl); }
}