/* =========================================================
   בן שאנן · "הפנים שמאחורי" - about / studio page
   Image-led & cinematic, in the home page's language:
   full-bleed renders, white copy over imagery, slow reveals,
   warm ivory editorial sections. Layered on styles.css.
   ========================================================= */

body.about {
  background: var(--white);
  --warm:      #f6f1e8;   /* warm ivory (never cold gray) */
  --warm-line: #e7ddcd;
  --stamp:     #a4906f;   /* warm gold-taupe */
}

/* (header stays default: white over the dark hero, solid once scrolled) */

/* ---------------------------------------------------------
   Spec-sheet index line  (00 - label)
   --------------------------------------------------------- */
.ab-spec {
  display: flex; align-items: baseline; gap: 14px;
  font-size: .8rem; letter-spacing: .04em;
}
.ab-spec::before {
  content: ""; align-self: center; width: 32px; height: 1px;
  background: var(--stamp); opacity: .9; flex: none;
}
.ab-spec .n { font-weight: 600; letter-spacing: .1em; color: var(--stamp); direction: ltr; }
.ab-spec .l { letter-spacing: .26em; text-transform: uppercase; color: var(--ink-2); font-weight: 500; }
.ab-spec--light .n { color: #fff; }
.ab-spec--light .l { color: rgba(255,255,255,.92); }
.ab-spec--light::before { background: rgba(255,255,255,.65); }

.ab-lead {
  font-size: clamp(1.55rem, 3.4vw, 2.7rem);
  font-weight: 200; line-height: 1.28; letter-spacing: -.02em; color: var(--ink);
}
.ab-lead em { font-style: normal; color: var(--stamp); }

/* =========================================================
   HERO - full-bleed villa, statement laid over it
   ========================================================= */
.ab-hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  overflow: hidden; background: var(--ink);
}
.ab-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ab-hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 58%;
  transform: scale(1.05); transform-origin: 60% 50%;
  animation: abKen 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes abKen { from { transform: scale(1.05); } to { transform: scale(1.14); } }
.ab-hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(8,8,8,.78) 0%, rgba(8,8,8,.28) 40%, rgba(8,8,8,0) 68%),
    linear-gradient(to bottom, rgba(8,8,8,.42) 0%, rgba(8,8,8,0) 26%);
}
.ab-hero-inner { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(64px, 13vh, 140px); }
.ab-hero-inner .ab-spec { margin-bottom: clamp(22px, 3vw, 34px); }
.ab-hero-title {
  color: #fff; margin: 0 0 clamp(22px, 3vw, 34px);
  font-size: clamp(3rem, 9.2vw, 8rem); font-weight: 200; line-height: .96; letter-spacing: -.04em;
}
.ab-hero-sub {
  max-width: 46ch; color: rgba(255,255,255,.86);
  font-size: clamp(1.1rem, 1.55vw, 1.45rem); font-weight: 300; line-height: 1.6;
}
.ab-hero-sub em { font-style: normal; color: #fff; }
.ab-hero-scroll {
  position: absolute; z-index: 2; inset-block-end: 30px; inset-inline-start: 50%; transform: translateX(50%);
  width: 1px; height: 54px; overflow: hidden;
}
.ab-hero-scroll span {
  display: block; width: 100%; height: 100%; background: rgba(255,255,255,.7);
  animation: scrollLine 2.4s var(--ease) infinite;
}

/* =========================================================
   STATEMENT - the studio, editorial
   ========================================================= */
.ab-statement { background: var(--white); }
.ab-statement-inner { max-width: 960px; margin-inline: auto; }
.ab-statement .ab-spec { margin-bottom: clamp(22px, 3vw, 36px); }
.ab-statement .ab-lead { max-width: 24ch; margin-bottom: clamp(34px, 4.5vw, 60px); }
.ab-body {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 64px);
  max-width: 880px;
}
.ab-body p { font-size: clamp(1rem, 1.12vw, 1.12rem); font-weight: 300; line-height: 1.85; color: var(--text); }
.ab-body strong { color: var(--ink); font-weight: 500; }
@media (max-width: 760px) { .ab-body { grid-template-columns: 1fr; gap: 18px; } }

/* =========================================================
   BAND - cinematic full-bleed pull quote
   A dark, image-led beat between the white editorial sections,
   in the home page's language: Ken-Burns drift + word reveal.
   ========================================================= */
.ab-band {
  position: relative; min-height: clamp(560px, 82svh, 820px);
  display: flex; align-items: center;
  overflow: hidden; background: var(--ink);
  padding-block: clamp(80px, 12vh, 150px);
}
.ab-band-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ab-band-img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 56%;
  transform: scale(1.06); transform-origin: 50% 50%;
  animation: abKen 30s ease-in-out infinite alternate;
  will-change: transform;
}
.ab-band-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to left, rgba(8,8,8,.76) 0%, rgba(8,8,8,.52) 38%, rgba(8,8,8,.16) 72%, rgba(8,8,8,0) 100%),
    linear-gradient(to bottom, rgba(8,8,8,.26) 0%, rgba(8,8,8,0) 32%, rgba(8,8,8,.46) 100%);
}
.ab-band-inner { position: relative; z-index: 2; width: 100%; }
.ab-band .ab-spec { margin-bottom: clamp(26px, 3.4vw, 42px); }
.ab-band-quote {
  position: relative; margin: 0; max-width: 17ch;
  font-size: clamp(2rem, 4.6vw, 3.9rem);
  font-weight: 200; line-height: 1.26; letter-spacing: -.02em; color: #fff;
}
.ab-band-quote em { font-style: normal; color: var(--stamp); }
.ab-band-quote .w { display: inline-block; }
/* oversized decorative quotation mark, faint behind the words */
.ab-band-quote::before {
  content: "\201D";
  position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: -.46em; inset-inline-start: -.12em;
  font: 700 8.4em/1 Georgia, "Times New Roman", serif;
  color: rgba(255,255,255,.09);
}
.ab-band-attr {
  margin-top: clamp(28px, 3.4vw, 46px);
  font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6);
}
/* this quote reveals per-word (below) — cancel the global single-element
   .word-reveal treatment so it stays a normal, wrapping block container */
body.motion .ab-band-quote.word-reveal { display: block; opacity: 1; transform: none; }
/* staggered word reveal (only with motion; full text shows otherwise) */
body.motion .ab-band-quote.word-reveal .w {
  opacity: 0; transform: translateY(.55em);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 65ms);
}
body.motion .ab-band-quote.word-reveal.in .w { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .ab-band { min-height: clamp(460px, 80svh, 640px); padding-block: clamp(64px, 13vh, 110px); }
  .ab-band-quote { font-size: clamp(1.75rem, 7.6vw, 2.5rem); max-width: 15ch; }
  .ab-band-quote::before { font-size: 6.4em; inset-block-start: -.4em; }
  .ab-band-scrim {
    background:
      linear-gradient(to left, rgba(8,8,8,.72) 0%, rgba(8,8,8,.52) 50%, rgba(8,8,8,.32) 100%),
      linear-gradient(to bottom, rgba(8,8,8,.34) 0%, rgba(8,8,8,.1) 40%, rgba(8,8,8,.5) 100%);
  }
}

/* =========================================================
   PEOPLE - the architects (portrait + bio)
   ========================================================= */
.ab-people { background: var(--white); }
.ab-people-inner {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.ab-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); }
.ab-portrait { position: relative; margin: 0; }
.ab-portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 18%; display: block;
  border: 1px solid var(--warm-line);
}
.ab-portrait figcaption { margin-top: 14px; line-height: 1.5; }
.ab-portrait figcaption b { display: block; color: var(--ink); font-weight: 600; font-size: clamp(.95rem, 1.1vw, 1.05rem); letter-spacing: .01em; }
.ab-portrait figcaption span { display: block; margin-top: 3px; font-size: .8rem; letter-spacing: .05em; color: var(--sketch-mid); }
.ab-people-copy .ab-spec { margin-bottom: clamp(20px, 2.6vw, 30px); }
.ab-h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 200; line-height: 1.08;
  letter-spacing: -.025em; color: var(--ink); margin-bottom: clamp(18px, 2.4vw, 28px);
}
.ab-people-copy > p {
  font-size: clamp(1.02rem, 1.2vw, 1.18rem); font-weight: 300; line-height: 1.8; color: var(--text);
  max-width: 48ch;
}
.ab-stats {
  display: grid; grid-template-columns: repeat(2, auto); gap: clamp(30px, 5vw, 64px);
  margin-top: clamp(34px, 4.5vw, 56px); padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--warm-line); width: fit-content;
}
.ab-stat b { display: block; font-size: clamp(2rem, 3.6vw, 3.1rem); font-weight: 200; letter-spacing: -.02em; color: var(--ink); direction: ltr; }
.ab-stat span { display: block; margin-top: 8px; font-size: .9rem; color: var(--sketch-mid); }
@media (max-width: 860px) {
  .ab-people-inner { grid-template-columns: 1fr; gap: clamp(34px, 8vw, 48px); }
  .ab-portraits { order: 2; }
}

/* =========================================================
   METHOD - four anchors of the studio's planning
   ========================================================= */
.ab-method { background: var(--warm); border-top: 1px solid var(--warm-line); }
.ab-method-head { margin-bottom: clamp(40px, 5vw, 76px); }
.ab-method-head .ab-spec { margin-bottom: clamp(18px, 2.4vw, 28px); }
.ab-method-head .ab-lead { max-width: 22ch; }
.ab-method-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--warm-line); }
.ab-pillar {
  position: relative; padding: clamp(34px, 3.4vw, 56px) clamp(26px, 2.8vw, 54px);
  border-inline-start: 1px solid var(--warm-line); border-bottom: 1px solid var(--warm-line);
}
.ab-pillar:nth-child(odd) { border-inline-start: none; padding-inline-start: 0; }
.ab-pillar::after {
  content: ""; position: absolute; inset-block-start: -1px; inset-inline-start: 0;
  width: 100%; height: 2px; background: var(--stamp);
  transform: scaleX(0); transform-origin: right center; transition: transform .6s var(--ease);
}
@media (hover: hover) { .ab-pillar:hover::after { transform: scaleX(1); } }
.ab-pillar-num {
  display: block; font-size: clamp(2rem, 3.4vw, 3.1rem); font-weight: 200; line-height: 1;
  color: var(--warm-line); direction: ltr; margin-bottom: clamp(16px, 1.8vw, 24px); transition: color .5s var(--ease);
}
.ab-pillar:hover .ab-pillar-num { color: var(--stamp); }
.ab-pillar h3 { font-size: clamp(1.4rem, 2vw, 1.85rem); font-weight: 400; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); margin-bottom: 16px; }
.ab-pillar p { font-size: clamp(.96rem, 1.05vw, 1.06rem); font-weight: 300; line-height: 1.75; color: var(--text); max-width: 46ch; }
@media (max-width: 760px) {
  .ab-method-grid { grid-template-columns: 1fr; }
  .ab-pillar { border-inline-start: none; padding-inline: 0; }
  .ab-pillar:nth-child(odd) { padding-inline: 0; }
  .ab-pillar p { max-width: none; }
}

/* =========================================================
   CLOSING - full-bleed interior + commitment + CTA
   ========================================================= */
.ab-close {
  position: relative; min-height: 86svh; display: flex; align-items: center;
  overflow: hidden; background: var(--ink); text-align: center;
}
.ab-close-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ab-close-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 55%;
  transform: scale(1.04); animation: abKen 28s ease-in-out infinite alternate;
}
.ab-close-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(8,8,8,.55), rgba(8,8,8,.4) 45%, rgba(8,8,8,.62));
}
.ab-close-inner { position: relative; z-index: 2; width: 100%; }
.ab-close blockquote {
  font-size: clamp(1.55rem, 3.4vw, 2.7rem); font-weight: 200; line-height: 1.42; color: #fff;
  max-width: 24ch; margin: 0 auto;
}
.ab-close-brand {
  margin-top: clamp(34px, 4.5vw, 56px);
  font-size: clamp(1rem, 1.4vw, 1.2rem); font-weight: 500; letter-spacing: .02em; color: #fff;
}
.ab-close-tag { margin-top: 12px; font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.ab-close-cta { margin-top: clamp(34px, 4vw, 50px); color: #fff; border-bottom-color: rgba(255,255,255,.65); justify-content: center; }

/* mobile: tighten the people section so it fills the view
   (the band now handles its own full-bleed spacing above). */
@media (max-width: 860px) {
  .ab-people.section { padding-block: clamp(56px, 11vw, 96px); }
  .ab-people-inner { gap: clamp(26px, 6vw, 38px); }
}