/* =========================================================
   M2A GROUP — ABOUT UNIFIED DESIGN SYSTEM V1
   Scope: About pages only. Homepage rhythm is the reference.
   ========================================================= */

body.m2a-master-template.about-page{
  /* 8px spacing scale */
  --about-s1:8px;
  --about-s2:16px;
  --about-s3:24px;
  --about-s4:32px;
  --about-s5:40px;
  --about-s6:48px;
  --about-s7:56px;
  --about-s8:64px;
  --about-section-y:105px;

  /* Homepage-aligned type scale */
  --about-h1:clamp(34px,3.6vw,56px);
  --about-h2:clamp(30px,3.7vw,50px);
  --about-h3:22px;
  --about-body:17px;
  --about-card-body:15px;

  /* Unified glass */
  --about-glass-top:rgba(30,41,59,.82);
  --about-glass-bottom:rgba(22,31,45,.68);
  --about-glass-line:rgba(226,232,240,.13);
  --about-glass-line-hover:rgba(226,232,240,.24);
  --about-card-shadow:0 24px 72px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.045);
  --about-card-shadow-hover:0 34px 92px rgba(0,0,0,.34);

  /* Sector palette — single source for About */
  --sector-real-estate:#D4AF37;
  --sector-development:#0284C7;
  --sector-contracting:#F59E0B;
  --sector-supplies:#00F2FE;
  --sector-trade:#2563EB;
  --sector-agriculture:#059669;
  --sector-commercial:#CBD5E1;
  --sector-incubators:#8B5CF6;
  --sector-irrigation:#38BDF8;
}

/* ---------- Vertical rhythm: homepage is the reference ---------- */
body.m2a-master-template.about-page .about-section{
  padding:var(--about-section-y) 0;
}

body.m2a-master-template.about-page .about-section-head{
  max-width:830px;
  margin:0 auto var(--about-s6);
}

body.m2a-master-template.about-page :is(
  .about-section-head h2,
  .about-copy h2,
  .about-os-copy h2,
  .about-governance-copy h2,
  .about-cta h2
){
  font-size:var(--about-h2);
  line-height:1.22;
  font-weight:900;
  letter-spacing:-.012em;
}

html[dir="rtl"] body.m2a-master-template.about-page :is(
  .about-section-head h2,
  .about-copy h2,
  .about-os-copy h2,
  .about-governance-copy h2,
  .about-cta h2
){letter-spacing:0}

body.m2a-master-template.about-page :is(
  .about-section-head p,
  .about-copy p,
  .about-os-copy p,
  .about-governance-copy p,
  .about-cta p
){
  font-size:var(--about-body);
  line-height:1.85;
}

body.m2a-master-template.about-page .about-section-head p{
  margin-top:var(--about-s2);
}

/* ---------- Hero: same visual scale as homepage ---------- */
body.m2a-master-template.about-page .about-hero{
  min-height:100vh;
  padding-top:110px;
  padding-bottom:80px;
}

body.m2a-master-template.about-page .about-hero-grid{
  grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);
  gap:var(--about-s7);
  align-items:center;
}

body.m2a-master-template.about-page .about-title{
  max-width:680px;
  font-size:var(--about-h1);
  line-height:1.16;
  letter-spacing:-.01em;
}

html[dir="rtl"] body.m2a-master-template.about-page .about-title{letter-spacing:0}

body.m2a-master-template.about-page .about-lead{
  max-width:650px;
  margin-top:22px;
  font-size:18px;
  line-height:1.9;
}

body.m2a-master-template.about-page .about-hero-actions{
  gap:14px;
  margin-top:var(--about-s4);
}

body.m2a-master-template.about-page .about-hero-facts{
  gap:14px;
  margin-top:34px;
}

body.m2a-master-template.about-page .about-fact{
  padding:17px;
  border-radius:22px;
}

body.m2a-master-template.about-page .about-hero-frame{
  aspect-ratio:3/2;
  border-radius:34px;
}

/* ---------- Unified luminous glass cards ---------- */
body.m2a-master-template.about-page :is(
  .about-fact,
  .about-glass,
  .about-sector-card,
  .about-tech-item,
  .about-os-screen,
  .about-governance-card,
  .about-operating-step
){
  border-color:var(--about-glass-line) !important;
  background:linear-gradient(145deg,var(--about-glass-top),var(--about-glass-bottom)) !important;
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  box-shadow:var(--about-card-shadow) !important;
}

body.m2a-master-template.about-page .m2a-about-interactive{
  --spot-x:50%;
  --spot-y:50%;
  --tilt-x:0deg;
  --tilt-y:0deg;
  --interactive-color:var(--m2a-sky);
  transform-style:preserve-3d;
  will-change:transform;
  background:
    radial-gradient(340px circle at var(--spot-x) var(--spot-y),color-mix(in srgb,var(--interactive-color) 13%,transparent),transparent 58%),
    linear-gradient(145deg,var(--about-glass-top),var(--about-glass-bottom)) !important;
  transition:
    transform 280ms var(--m2a-ease),
    border-color 180ms var(--m2a-ease),
    box-shadow 280ms var(--m2a-ease),
    background 180ms var(--m2a-ease) !important;
}

/* ---------- Sector grid: 9 approved Studio images ---------- */
body.m2a-master-template.about-page .about-sector-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--about-s3);
}

body.m2a-master-template.about-page .about-sector-card{
  --sector-color:var(--m2a-gold);
  --interactive-color:var(--sector-color);
  min-height:0;
  padding:0;
  overflow:hidden;
  border-radius:28px;
  isolation:isolate;
}

body.m2a-master-template.about-page .about-sector-card:nth-child(1){--sector-color:var(--sector-real-estate);--sector-image:url('/assets/images/sectors/sector-real-estate-investment.webp')}
body.m2a-master-template.about-page .about-sector-card:nth-child(2){--sector-color:var(--sector-development);--sector-image:url('/assets/images/sectors/sector-property-development.webp')}
body.m2a-master-template.about-page .about-sector-card:nth-child(3){--sector-color:var(--sector-contracting);--sector-image:url('/assets/images/sectors/sector-general-contracting.webp')}
body.m2a-master-template.about-page .about-sector-card:nth-child(4){--sector-color:var(--sector-supplies);--sector-image:url('/assets/images/sectors/sector-general-supplies.webp')}
body.m2a-master-template.about-page .about-sector-card:nth-child(5){--sector-color:var(--sector-trade);--sector-image:url('/assets/images/sectors/sector-import-export.webp')}
body.m2a-master-template.about-page .about-sector-card:nth-child(6){--sector-color:var(--sector-agriculture);--sector-image:url('/assets/images/sectors/sector-agricultural-export.webp')}
body.m2a-master-template.about-page .about-sector-card:nth-child(7){--sector-color:var(--sector-commercial);--sector-image:url('/assets/images/sectors/sector-commercial-centers.webp')}
body.m2a-master-template.about-page .about-sector-card:nth-child(8){--sector-color:var(--sector-incubators);--sector-image:url('/assets/images/sectors/sector-business-incubators.webp')}
body.m2a-master-template.about-page .about-sector-card:nth-child(9){--sector-color:var(--sector-irrigation);--sector-image:url('/assets/images/sectors/sector-land-reclamation.webp')}

body.m2a-master-template.about-page .about-sector-card::before{
  content:"";
  position:relative;
  z-index:0;
  display:block;
  width:100%;
  aspect-ratio:3/2;
  background:
    linear-gradient(180deg,rgba(10,16,24,.02) 42%,rgba(10,16,24,.22) 72%,rgba(10,16,24,.76) 100%),
    var(--sector-image) center/cover no-repeat;
  border-bottom:1px solid color-mix(in srgb,var(--sector-color) 30%,transparent);
  transform:scale(1.001);
  transition:transform 600ms var(--m2a-ease),filter 280ms var(--m2a-ease);
}

body.m2a-master-template.about-page .about-sector-card::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.52;
  background:
    radial-gradient(300px circle at var(--spot-x,50%) var(--spot-y,50%),color-mix(in srgb,var(--sector-color) 22%,transparent),transparent 62%),
    linear-gradient(180deg,transparent 58%,color-mix(in srgb,var(--sector-color) 7%,transparent));
  transition:opacity 220ms var(--m2a-ease);
}

body.m2a-master-template.about-page .about-sector-card > *{
  position:relative;
  z-index:2;
}

body.m2a-master-template.about-page .about-sector-icon{
  position:relative;
  display:grid;
  width:56px;
  height:56px;
  place-items:center;
  margin:-28px var(--about-s3) var(--about-s2);
  border:1px solid color-mix(in srgb,var(--sector-color) 68%,rgba(255,255,255,.18));
  border-radius:18px;
  color:var(--sector-color);
  background:rgba(15,23,42,.86);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  backdrop-filter:blur(16px) saturate(140%);
  box-shadow:
    0 0 0 5px color-mix(in srgb,var(--sector-color) 7%,transparent),
    0 0 26px color-mix(in srgb,var(--sector-color) 28%,transparent),
    0 16px 34px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.08);
}

body.m2a-master-template.about-page .about-sector-icon::after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid color-mix(in srgb,var(--sector-color) 24%,transparent);
  border-radius:12px;
  opacity:.7;
}

body.m2a-master-template.about-page .about-sector-icon svg{
  width:27px;
  height:27px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 7px color-mix(in srgb,var(--sector-color) 60%,transparent));
  transition:transform 280ms var(--m2a-ease),filter 280ms var(--m2a-ease);
}

body.m2a-master-template.about-page .about-sector-card small,
body.m2a-master-template.about-page .about-sector-card h3,
body.m2a-master-template.about-page .about-sector-card p{
  margin-inline:var(--about-s3);
}

body.m2a-master-template.about-page .about-sector-card small{
  display:block;
  margin-bottom:var(--about-s1);
  color:var(--sector-color);
}

body.m2a-master-template.about-page .about-sector-card h3{
  margin-bottom:var(--about-s1);
  font-size:var(--about-h3);
  line-height:1.35;
}

body.m2a-master-template.about-page .about-sector-card p{
  margin-bottom:var(--about-s3);
  color:var(--m2a-muted)!important;
  font-size:var(--about-card-body);
  line-height:1.75;
}

/* ---------- Remaining card rhythm ---------- */
body.m2a-master-template.about-page .about-identity-grid,
body.m2a-master-template.about-page .about-governance-grid{
  gap:var(--about-s4);
}

body.m2a-master-template.about-page .about-principles{
  gap:var(--about-s2);
}

body.m2a-master-template.about-page .about-principle{
  min-height:192px;
  padding:var(--about-s3);
  border-radius:24px;
}

body.m2a-master-template.about-page .about-principle:nth-child(1){--interactive-color:var(--sector-real-estate)}
body.m2a-master-template.about-page .about-principle:nth-child(2){--interactive-color:var(--sector-development)}
body.m2a-master-template.about-page .about-principle:nth-child(3){--interactive-color:var(--sector-supplies)}
body.m2a-master-template.about-page .about-principle:nth-child(4){--interactive-color:var(--sector-agriculture)}

body.m2a-master-template.about-page .about-tech-list{gap:var(--about-s2);margin-top:var(--about-s4)}
body.m2a-master-template.about-page .about-tech-item{padding:var(--about-s2);border-radius:20px;--interactive-color:var(--m2a-sky)}
body.m2a-master-template.about-page .about-governance-cards{gap:var(--about-s2)}
body.m2a-master-template.about-page .about-governance-card{min-height:208px;padding:var(--about-s3);border-radius:24px;--interactive-color:var(--m2a-gold)}
body.m2a-master-template.about-page .about-governance-card h3{font-size:19px}
body.m2a-master-template.about-page .about-operating-line{gap:var(--about-s2);margin-top:var(--about-s6)}
body.m2a-master-template.about-page .about-operating-step{padding:var(--about-s3) var(--about-s2);border-radius:24px;--interactive-color:var(--m2a-sky)}
body.m2a-master-template.about-page .about-os-grid{gap:var(--about-s7)}

/* ---------- Fine-pointer micro interaction ---------- */
@media (hover:hover) and (pointer:fine){
  body.m2a-master-template.about-page .m2a-about-interactive:hover{
    transform:
      perspective(1000px)
      translate3d(0,-6px,0)
      rotateX(var(--tilt-x))
      rotateY(var(--tilt-y));
    border-color:color-mix(in srgb,var(--interactive-color) 54%,rgba(255,255,255,.18)) !important;
    box-shadow:
      var(--about-card-shadow-hover),
      0 0 30px color-mix(in srgb,var(--interactive-color) 12%,transparent) !important;
  }

  body.m2a-master-template.about-page .about-sector-card:hover::before{
    transform:scale(1.035);
    filter:saturate(1.08) brightness(1.04);
  }

  body.m2a-master-template.about-page .about-sector-card:hover::after{opacity:.9}

  body.m2a-master-template.about-page .about-sector-card:hover .about-sector-icon svg{
    transform:translate3d(0,-2px,0) scale(1.06);
    filter:drop-shadow(0 0 11px color-mix(in srgb,var(--sector-color) 78%,transparent));
  }
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  body.m2a-master-template.about-page .about-hero-grid{grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);gap:var(--about-s5)}
  body.m2a-master-template.about-page .about-sector-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.m2a-master-template.about-page .about-os-grid{grid-template-columns:1fr;gap:var(--about-s5)}
}

@media(max-width:900px){
  body.m2a-master-template.about-page .about-hero{min-height:auto;padding-top:132px;padding-bottom:var(--about-s8)}
  body.m2a-master-template.about-page :is(.about-hero-grid,.about-identity-grid,.about-governance-grid){grid-template-columns:1fr}
  body.m2a-master-template.about-page .about-hero-visual{max-width:720px;width:100%;margin-inline:auto}
  body.m2a-master-template.about-page .about-governance-copy{position:relative;top:auto}
}

@media(max-width:700px){
  body.m2a-master-template.about-page .about-section{padding:var(--about-s8) 0}
  body.m2a-master-template.about-page .about-hero{padding-top:116px}
  body.m2a-master-template.about-page .about-title{font-size:clamp(34px,10vw,48px)}
  body.m2a-master-template.about-page .about-sector-grid{grid-template-columns:1fr;gap:var(--about-s3)}
  body.m2a-master-template.about-page .about-sector-card{border-radius:24px}
  body.m2a-master-template.about-page .about-sector-icon{margin-inline:var(--about-s3)}
}

@media(max-width:430px){
  body.m2a-master-template.about-page .about-section{padding:var(--about-s7) 0}
  body.m2a-master-template.about-page .about-hero{padding-top:106px}
}

@media(prefers-reduced-motion:reduce){
  body.m2a-master-template.about-page .m2a-about-interactive,
  body.m2a-master-template.about-page .about-sector-card::before,
  body.m2a-master-template.about-page .about-sector-icon svg{
    transition:none!important;
    transform:none!important;
    animation:none!important;
  }
}