/* ═══════════════════════════════════════════════════════════
   WHITES وايتس — About Page Stylesheet
   Covers: Hero, Sub-nav Tabs, History/Timeline, Values,
           Mission & Goals, Management, Board
   Used by: about.html
═══════════════════════════════════════════════════════════ */

/* Scroll-reveal animation primitives (.reveal, .reveal-fade, etc.)
   now live in style.css so every page can use them. */

/* ═══════════════════════════════════════════════
   1. PAGE HERO
═══════════════════════════════════════════════ */
.about-hero{
  position:relative;overflow:hidden;
  background:var(--grad-dark);
  padding:calc(var(--nav-h) + 64px) 0 100px;
}
.about-hero__deco{position:absolute;pointer-events:none;z-index:0}
.about-hero__deco--tl{top:-40px;left:-40px;width:220px;height:220px}
.about-hero__deco--br{bottom:-30px;right:-30px;width:180px;height:180px}

.about-hero__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.1fr 0.9fr;
  gap:60px;align-items:center
}
.about-hero__eyebrow{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:4px;
  text-transform:uppercase;color:var(--yellow);margin-bottom:18px
}
.about-hero__title{
  font-family:var(--font-serif);font-size:clamp(32px,4.2vw,54px);
  font-weight:400;line-height:1.15;color:var(--off-white);margin-bottom:22px
}
.about-hero__title em{color:var(--yellow);font-style:normal}
html.lang-ar .about-hero__title{font-family:var(--font-ar);font-weight:700;letter-spacing:0}
.about-hero__sub{
  font-size:16px;line-height:1.8;color:var(--text-dim);max-width:520px;margin-bottom:36px
}
.about-hero__actions{display:flex;gap:14px;flex-wrap:wrap}

.about-hero__visual{position:relative;display:flex;align-items:center;justify-content:center}
.about-hero__stat{
  position:absolute;display:flex;flex-direction:column;gap:2px;
  background:var(--yellow);color:var(--charcoal);
  padding:16px 20px;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  z-index:3;min-width:110px;text-align:center
}
.about-hero__stat--a{top:6%;left:-8%}
.about-hero__stat--b{bottom:8%;right:-10%}
.about-hero__stat-num{font-family:var(--font-serif);font-size:26px;font-weight:800;line-height:1}
.about-hero__stat-lbl{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;opacity:0.75}

@media (max-width:1024px){
  .about-hero__inner{grid-template-columns:1fr;gap:56px;text-align:center}
  .about-hero__sub{margin-left:auto;margin-right:auto}
  .about-hero__actions{justify-content:center}
}
@media (max-width:600px){
  .about-hero{padding-top:calc(var(--nav-h) + 40px);padding-bottom:72px}
  .about-hero__stat{padding:12px 14px;min-width:88px}
  .about-hero__stat--a{left:0}
  .about-hero__stat--b{right:0}
  .about-hero__stat-num{font-size:20px}
  .about-subnav__list{flex-wrap:wrap;overflow-x:visible}
  .about-subnav__link{padding:14px 12px;font-size:11px;letter-spacing:1.5px;flex:1 1 auto}
  .about-subnav::after{display:none}
}

/* ═══════════════════════════════════════════════
   2. SUB-NAV TABS
═══════════════════════════════════════════════ */
.about-subnav{
  position:sticky;top:var(--nav-h);z-index:200;
  background:var(--charcoal);border-bottom:1px solid var(--border)
}
.about-subnav__list{
  display:flex;overflow-x:auto;scrollbar-width:none
}
.about-subnav__list::-webkit-scrollbar{display:none}
.about-subnav::after{
  content:'';position:absolute;top:0;bottom:1px;inset-inline-end:0;width:36px;
  background:linear-gradient(to right,transparent,var(--charcoal));
  pointer-events:none;
}
html.lang-ar .about-subnav::after{transform:scaleX(-1)}
.about-subnav__link{
  display:inline-flex;align-items:center;justify-content:center;padding:18px 30px;
  font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-muted);background:transparent;
  border:1px solid var(--border);border-left:none;
  white-space:nowrap;transition:var(--t)
}
html.lang-ar .about-subnav__link{border-left:1px solid var(--border);border-right:none}
.about-subnav__list li:first-child .about-subnav__link{border-left:1px solid var(--border)}
html.lang-ar .about-subnav__list li:first-child .about-subnav__link{border-left:none;border-right:1px solid var(--border)}
.about-subnav__link:hover{color:var(--text-dim);background:var(--charcoal2)}
.about-subnav__link.active{
  color:var(--charcoal);background:var(--yellow);border-color:var(--yellow)
}

/* Tab panels — only the active one renders */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ═══════════════════════════════════════════════
   3. HISTORY / STORY + TIMELINE
═══════════════════════════════════════════════ */
.about-history{
  padding:90px 0;color:var(--text-dark);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpolygon points='12,2 22,12 12,22 2,12' fill='none' stroke='%23C8A800' stroke-opacity='0.22' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size:24px 24px;
  background-color:var(--white);
}
.about-history__inner{
  display:grid;grid-template-columns:1.1fr 0.9fr;gap:72px;align-items:center;margin-bottom:80px
}
.story-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:4px;text-transform:uppercase;
  color:var(--yellow);margin-bottom:14px
}
.story-heading{
  font-family:var(--font-serif);font-size:clamp(26px,3.2vw,38px);font-weight:400;
  line-height:1.25;color:var(--charcoal);margin-bottom:36px
}
.story-heading em{color:var(--yellow);font-style:normal}
html.lang-ar .story-heading{font-family:var(--font-ar);font-weight:700;letter-spacing:0}

.story-bullets{display:flex;flex-direction:column}
.story-bullet{display:flex;gap:20px}
.story-bullet__marker{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.story-bullet__line{width:2px;flex:1;min-height:24px;background:rgba(255,212,0,0.25);margin-top:6px}
.story-bullet__text{font-size:15px;line-height:1.8;color:var(--text-sec);padding-bottom:24px}
.story-bullet--last .story-bullet__text{padding-bottom:0}

.story-stats{display:flex;gap:0;margin-top:36px;padding-top:32px;border-top:1px solid var(--border-lt)}
.story-stat{flex:1;position:relative;padding:12px 20px;border-radius:var(--r-lg);transition:background 0.3s ease}
.story-stat:hover{background:rgba(255,212,0,0.06)}
.story-stat:first-child{padding-left:20px}
.story-stat::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;width:1px;background:var(--border-lt)
}
.story-stat:first-child::before{display:none}
.story-stat__val{
  display:block;font-family:var(--font-serif);font-size:36px;font-weight:800;
  color:var(--yellow-dk,#C8A800);line-height:1;
  transition:text-shadow 0.3s ease
}
.story-stat:hover .story-stat__val{text-shadow:0 0 30px rgba(200,168,0,0.35)}
.story-stat__label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-sec);margin-top:8px
}

.story-img-col{position:relative;display:flex;justify-content:center}
.story-diamond{width:100%;max-width:580px}
.story-img-badge{
  position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);
  background:var(--charcoal);color:var(--off-white);text-align:center;
  padding:16px 24px;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  border:1px solid rgba(255,212,0,0.25);min-width:150px
}
.story-img-badge__val{
  display:block;font-family:var(--font-serif);font-size:24px;font-weight:800;color:var(--yellow);line-height:1
}
.story-img-badge__label{
  display:block;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--text-muted);margin-top:4px
}

/* ── Timeline ── */
.timeline{
  position:relative;padding:48px 0 20px;
}
.timeline__line{
  position:absolute;top:0;bottom:0;left:50%;width:2px;z-index:1;
  background:linear-gradient(to bottom,rgba(255,212,0,0.05),rgba(255,212,0,0.4) 15%,rgba(255,212,0,0.4) 85%,rgba(255,212,0,0.05));
  transform:translateX(-50%)
}
.timeline__item{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:start;
  gap:0;margin-bottom:44px;
  opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease
}
.timeline__item:last-child{margin-bottom:0}
.timeline__item.animated{opacity:1;transform:translateY(0)}
.timeline__diamond{
  grid-column:2;display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;position:relative;z-index:2;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,0.35))
}
.timeline__card{
  grid-column:1;justify-self:end;max-width:520px;width:100%;
  background:var(--charcoal);border-bottom:3px solid var(--yellow);border-radius:var(--r-lg);
  padding:32px 36px;text-align:start;box-shadow:var(--shadow)
}
.timeline__item--right .timeline__card{grid-column:3;justify-self:start;text-align:start}
.timeline__card--dark{background:var(--charcoal2)}
.timeline__year{
  display:inline-block;font-family:var(--font-serif);font-size:13px;font-weight:800;
  letter-spacing:2px;color:var(--yellow);margin-bottom:8px
}
.timeline__title{font-size:19px;font-weight:700;color:var(--off-white);margin-bottom:8px}
.timeline__desc{font-size:14px;line-height:1.75;color:var(--text-dim)}

@media (max-width:900px){
  .about-history__inner{grid-template-columns:1fr;gap:56px}
  .story-img-col{order:-1}
  .timeline__line{left:24px}
  html.lang-ar .timeline__line{left:auto;right:24px}
  .timeline__item{grid-template-columns:48px 1fr;gap:20px}
  .timeline__diamond{grid-column:1}
  .timeline__card,
  .timeline__item--right .timeline__card{
    grid-column:2;justify-self:start;text-align:left;max-width:none
  }
}
@media (max-width:480px){
  .story-stat{padding:12px 8px}
  .story-stat:first-child{padding-left:8px}
  .story-stat__val{font-size:28px}
  .story-stat__label{font-size:9px;letter-spacing:1px}
}

/* ═══════════════════════════════════════════════
   4. CORE VALUES
═══════════════════════════════════════════════ */
.about-values{position:relative;padding:90px 0;background:linear-gradient(135deg,#2A3540 0%,#232B34 60%,#1D252D 100%);overflow:hidden}
.about-values__deco{position:absolute;top:-40px;right:-40px;width:200px;height:200px;pointer-events:none;z-index:0}
.about-values .container{position:relative;z-index:1}

.values-pillars{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:40px 0 56px}
.values-pillar{
  background:var(--charcoal2);border:1px solid var(--border);border-left:3px solid var(--yellow);
  border-radius:var(--r-lg);padding:28px 30px
}
html.lang-ar .values-pillar{border-left:1px solid var(--border);border-right:3px solid var(--yellow)}
.values-pillar--accent{background:rgba(255,212,0,0.06)}
.values-pillar__tag{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:var(--yellow);margin-bottom:12px
}
.values-pillar__text{font-size:17px;line-height:1.6;color:var(--off-white)}

.values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.value-card{
  background:var(--charcoal2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:32px 28px;transition:var(--t)
}
.value-card:hover{transform:translateY(-5px);border-color:rgba(255,212,0,0.3);box-shadow:var(--shadow)}
.value-card__diamond{position:relative;width:60px;height:60px;margin-bottom:20px}
.value-card__diamond svg:first-child{position:absolute;inset:0;width:100%;height:100%}
.value-card__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.value-card__title{font-size:17px;font-weight:700;color:var(--off-white);margin-bottom:10px}
.value-card__quote{font-size:12.5px;font-style:italic;line-height:1.6;color:var(--yellow-dk,#C8A800);margin-bottom:10px;display:block}
.value-card__desc{font-size:14px;line-height:1.75;color:var(--text-dim)}

@media (max-width:1024px){.values-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:768px){
  .values-pillars{grid-template-columns:1fr}
}
@media (max-width:600px){.values-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════
   5. MISSION / VISION / GOALS
═══════════════════════════════════════════════ */
.about-mission{padding:90px 0;background:var(--white);color:var(--text-dark)}
.mission-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:40px}
.mission-card-wrap{position:relative;padding:20px}
.mission-outline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.mission-card{position:relative;z-index:1;border-radius:var(--r-lg);padding:56px 40px;min-height:280px;
  display:flex;align-items:center;justify-content:center;text-align:center}
.mission-card--dark{background:var(--charcoal)}
.mission-card--yellow{background:var(--yellow)}
.mission-card__inner{display:flex;flex-direction:column;align-items:center;gap:18px}
.mission-card__tag{
  font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--yellow)
}
.mission-card--yellow .mission-card__tag{color:rgba(29,37,45,0.55)}
.mission-card__title{
  font-family:var(--font-serif);font-size:clamp(18px,2vw,22px);font-weight:500;
  line-height:1.5;color:var(--off-white)
}
.mission-card__title--dark{color:var(--charcoal)}
html.lang-ar .mission-card__title{font-family:var(--font-ar);font-weight:700;letter-spacing:0}

.purpose-position-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
.purpose-position-card{
  background:var(--charcoal2);border-inline-start:3px solid var(--yellow);
  border-radius:var(--r);padding:26px 28px
}
.purpose-position-card__label{
  display:block;font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
  color:var(--yellow);margin-bottom:12px
}
.purpose-position-card__text{font-size:17px;font-weight:600;color:var(--off-white);line-height:1.5}
html.lang-ar .purpose-position-card__text{font-family:var(--font-ar);font-weight:700}

.mission-goals-strip{
  margin-top:64px;padding:36px 32px;
  border-top:3px solid var(--yellow);background:var(--off-white);border-radius:var(--r-lg)
}
.mission-goals-strip__label{
  display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;
  letter-spacing:3px;text-transform:uppercase;color:var(--charcoal);margin-bottom:24px
}
.mission-goals-strip__label svg{width:20px;height:20px}
.mission-goals-strip__items{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.mission-goal{display:flex;align-items:center;gap:16px}
.mission-goal__num{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:56px;height:56px;border-radius:50%;
  background:var(--yellow);font-family:var(--font-serif);line-height:1
}
.mission-goal__digit{font-size:22px;font-weight:900;color:var(--charcoal)}
.mission-goal__zero{font-size:22px;font-weight:900;color:var(--charcoal)}
.mission-goal__text{font-size:13.5px;font-weight:700;color:var(--charcoal);line-height:1.35}

@media (max-width:900px){
  .mission-grid{grid-template-columns:1fr}
  .purpose-position-grid{grid-template-columns:1fr}
  .mission-goals-strip__items{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media (max-width:600px){
  .mission-card{padding:40px 24px;min-height:220px}
  .mission-goals-strip{padding:28px 20px;margin-top:44px}
  .mission-goals-strip__items{grid-template-columns:1fr;gap:20px}
  .mission-goal__num{width:48px;height:48px}
  .mission-goal__digit,.mission-goal__zero{font-size:19px}
}

/* ═══════════════════════════════════════════════
   6. MANAGEMENT TEAM
═══════════════════════════════════════════════ */
.about-team{padding:90px 0;background:var(--off-white);color:var(--text-dark)}
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;margin-top:40px}
.team-card{
  display:flex;gap:28px;align-items:flex-start;
  background:var(--white);border:1px solid var(--border-lt);border-radius:var(--r-lg);
  padding:28px;transition:var(--t)
}
.team-card:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.team-card__img-wrap{flex-shrink:0;width:180px}
.team-card__img-diamond{position:relative;width:100%;aspect-ratio:1/1}
.team-card__diamond-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.team-card__img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  clip-path:url(#diamond-lr-inset)
}
.team-card__name{font-size:20px;font-weight:700;color:var(--charcoal);margin-bottom:4px}
.team-card__role{
  display:block;font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--yellow-dk,#C8A800);margin-bottom:16px
}
.team-card__quote{
  font-size:14px;line-height:1.8;color:var(--text-sec);font-style:italic;
  border-left:2px solid var(--yellow);padding-left:16px
}
html.lang-ar .team-card__quote{border-left:none;border-right:2px solid var(--yellow);padding-left:0;padding-right:16px}

@media (max-width:900px){
  .team-grid{grid-template-columns:1fr;gap:24px}
  .team-card{flex-direction:column;align-items:center;text-align:center}
  .team-card__img-wrap{width:170px}
  .team-card__quote{border:none;padding:0}
  html.lang-ar .team-card__quote{border:none;padding:0}
}

/* ═══════════════════════════════════════════════
   7. BOARD OF DIRECTORS
═══════════════════════════════════════════════ */
.about-board{padding:90px 0;background:var(--white);color:var(--text-dark)}
.board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.board-card{
  text-align:center;padding:32px 20px;background:var(--light);border:1px solid var(--border-lt);border-radius:var(--r-lg);
  transition:var(--t)
}
.board-card:hover{box-shadow:var(--shadow);transform:translateY(-4px)}
.board-card__diamond{width:64px;height:64px;margin:0 auto 18px}
.board-card__name{font-size:17px;font-weight:700;color:var(--charcoal);margin-bottom:6px}
.board-card__role{font-size:12px;color:var(--yellow)}

@media (max-width:900px){.board-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.board-grid{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════
   8. STORES PAGE — "About Destinations" light section
   Used by: stores.html (#about tab-panel)
═══════════════════════════════════════════════ */
#about.inner-content{
  background-color:var(--off-white);
  background-image:
    linear-gradient(to right, rgba(248,248,246,0) 0%, var(--off-white) 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpolygon points='13,1.5 24.5,13 13,24.5 1.5,13' fill='none' stroke='%23C8A800' stroke-width='0.4' stroke-opacity='0.3'/%3E%3C/svg%3E");
  background-size:cover, 26px 26px
}
#about .section-title{color:var(--charcoal)}
#about .intro-block p{color:var(--text-sec)}
#distribution .intro-block p{color:var(--text-sec)}
#about .about-bio__stat-label{color:var(--text-sec)}