/* ============================================================
   GTC CRANEX — about page layer
   Hero reuses the inner-page passport grammar (phero) minus the
   passport card; the numbers section is the one boxed moment on
   the site — a dark mission card + six quiet stat cells. Accent
   stays inside the dark card (stars + tagline), cells are mute.
   ============================================================ */

/* ---------- hero: photo carries itself, text sits low ---------- */
.phero--about .phero__bg{object-position:50% 55%;}
.phero__lead{
  flex:none;
  max-width:clamp(280px,30vw,430px);
  margin:0;
  padding-bottom:6px;
  font-size:clamp(12.5px,.98vw,16px);
  line-height:1.7;
  color:rgba(255,255,255,.85);
}

/* ---------- numbers: full-width card panel, like geo/footer ---------- */
.abnum{
  border-radius:var(--radius);
  background:var(--card);
  padding:clamp(40px,5vw,84px) var(--gutter) clamp(44px,5vw,88px);
}
.abnum + .geo{margin-top:clamp(10px,1.2vw,18px);}
.abnum__head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  align-items:end;
  gap:clamp(20px,3vw,60px);
  margin-bottom:clamp(24px,3vw,44px);
}
.abnum__title{
  margin:0;
  font-size:clamp(26px,3vw,48px);
  line-height:1.1;
  font-weight:300;
  letter-spacing:-.005em;
}
.abnum__title b{font-weight:700;}
.abnum__lead{
  margin:0;
  justify-self:end;
  max-width:38ch;
  padding-bottom:.35em;
  font-size:clamp(12px,.92vw,15px);
  line-height:1.65;
  color:var(--soft);
}

/* ---------- numbers: grid — mission card + 3×2 cells ---------- */
.abnum__grid{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,2.2fr);
  gap:3px;
  align-items:stretch;
}
.abnum__cells{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:3px;
}

/* mission card — the dark moment; dots fade out before the text ends */
.mcard{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:#fff;
  border-radius:18px;
  padding:clamp(22px,2.4vw,36px);
}
.mcard::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.20) 1px,transparent 1.4px);
  background-size:15px 15px;
  -webkit-mask-image:linear-gradient(200deg,rgba(0,0,0,.9) 0%,transparent 46%);
  mask-image:linear-gradient(200deg,rgba(0,0,0,.9) 0%,transparent 46%);
}
.mcard h3{
  position:relative;z-index:1;
  margin:0 0 clamp(10px,1.1vw,16px);
  font-size:clamp(13px,1vw,16px);
  font-weight:700;
  letter-spacing:.02em;
}
.mcard__text{
  position:relative;z-index:1;
  margin:0;
  max-width:34ch;
  font-size:clamp(12.5px,.95vw,15px);
  line-height:1.7;
  color:rgba(255,255,255,.78);
}
.mcard__foot{position:relative;z-index:1;margin-top:auto;padding-top:clamp(24px,3vw,44px);}
.mcard__logos{display:flex;}
.mcard__logos span{
  flex:none;
  width:clamp(40px,3.2vw,50px);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  border:2.5px solid var(--ink);
  background:#fff;
}
.mcard__logos span + span{margin-left:-11px;}
.mcard__logos img{width:100%;height:100%;object-fit:cover;}
.mcard__stars{
  display:flex;gap:3px;
  margin-top:clamp(12px,1.3vw,18px);
  color:var(--yellow);
}
.mcard__stars svg{width:13px;height:13px;}
.mcard__trust{
  margin:clamp(8px,.9vw,12px) 0 0;
  font-size:clamp(12.5px,.98vw,15px);
  font-weight:700;
}
.mcard__cap{
  margin:clamp(4px,.5vw,8px) 0 0;
  font-size:clamp(10px,.78vw,12px);
  letter-spacing:.07em;
  color:rgba(255,255,255,.55);
}
.mcard__cap .y{color:var(--yellow);}

/* stat cells — quiet, number-first; label anchors the bottom */
.ncard{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:clamp(20px,2.6vw,40px);
  min-height:clamp(148px,13vw,208px);
  background:#fff;
  border-radius:18px;
  padding:clamp(18px,1.9vw,28px);
}
.ncard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.ncard__num{
  display:block;overflow:hidden;
  font-size:clamp(30px,2.9vw,50px);
  line-height:1.08;
  font-weight:600;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.ncard__num > span{
  display:block;
  transition:transform 1.05s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + 140ms);
}
.js .ncard__num > span{transform:translateY(110%);}
.ncard.is-in .ncard__num > span{transform:none;}
.ncard__bars{flex:none;width:clamp(15px,1.2vw,19px);height:auto;margin-top:.4em;color:var(--faint);}
.ncard__label{
  font-size:clamp(11px,.85vw,13.5px);
  line-height:1.45;
  color:var(--soft);
}

/* ============================================================
   STORY — brand story-teller. Card grid (not one panel):
   text card + video card on top, three official-partner
   cards below. Follows the site card grammar.
   ============================================================ */
.story{
  display:grid;
  gap:clamp(10px,1.1vw,16px);
  /* separate the brand row from the dark band by the same shell-gap rhythm
     that spaces every other stacked block/section (not a big empty band) */
  margin-bottom:clamp(10px,1.2vw,18px);
}
.story__top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(10px,1.1vw,16px);
  align-items:stretch;
}

/* left — the story itself: heading up top, body + CTA anchored low */
.story__intro{
  display:flex;
  flex-direction:column;
  background:var(--card);
  border-radius:var(--radius);
  padding:clamp(28px,3.2vw,56px);
}
.story__title{
  margin:clamp(6px,.9vw,14px) 0 0;
  font-size:clamp(27px,3vw,50px);
  line-height:1.1;
  font-weight:300;
  letter-spacing:-.008em;
}
.story__title b{font-weight:700;}
.story__bottom{margin-top:auto;padding-top:clamp(44px,7vw,120px);}
.story__text{
  margin:0;
  max-width:46ch;
  font-size:clamp(13.5px,1.02vw,16.5px);
  line-height:1.75;
  color:rgba(20,25,34,.74);
}
.story__text p{margin:0 0 1em;}
.story__text p:last-child{margin:0;}
.story__cta{margin-top:clamp(22px,2.6vw,34px);}

/* right — video placeholder with a floating frosted play card */
.svideo{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  min-height:clamp(360px,42vw,560px);
  background:#16202b;
  display:flex;
  align-items:flex-end;
  padding:clamp(18px,2vw,30px);
}
/* overscan so the scroll parallax (data-parallax, driven by site.js) never
   reveals an edge — the JS owns this element's transform, same as the hero bg */
.svideo__bg{
  position:absolute;top:-8%;left:0;z-index:0;
  width:100%;height:116%;
  object-fit:cover;
}
.svideo__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(9,18,29,.28) 0%,rgba(9,18,29,0) 34%,rgba(9,18,29,.14) 66%,rgba(9,18,29,.58) 100%);
}
.svideo__eyebrow{
  position:absolute;top:clamp(18px,2vw,30px);left:clamp(18px,2vw,30px);z-index:2;
  display:flex;align-items:center;gap:8px;
  margin:0;
  font-size:clamp(11px,.82vw,13px);
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
}
.svideo__eyebrow .dot-y{width:8px;height:8px;}
/* floating frosted card — glassy blur, fits content, sits bottom-left */
.svideo__glass{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:clamp(14px,1.5vw,20px);
  max-width:min(100%,420px);
  padding:clamp(12px,1.3vw,16px) clamp(18px,1.8vw,26px) clamp(12px,1.3vw,16px) clamp(12px,1.3vw,16px);
  border-radius:18px;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:0 24px 60px -28px rgba(6,12,20,.6);
  -webkit-backdrop-filter:blur(18px) saturate(155%);
  backdrop-filter:blur(18px) saturate(155%);
  color:#fff;
  transition:background-color .25s ease,transform .2s ease;
}
a.svideo__glass:hover{background:rgba(255,255,255,.24);transform:translateY(-2px);}
.svideo__play{
  flex:none;
  width:clamp(48px,4vw,62px);aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:999px;
  background:#fff;color:var(--ink);
  box-shadow:0 8px 20px -6px rgba(0,0,0,.4);
  transition:background-color .2s ease,transform .25s var(--ease);
}
.svideo__play svg{width:clamp(17px,1.5vw,21px);height:auto;margin-left:2px;}
.svideo__glass:hover .svideo__play{background:var(--yellow);transform:scale(1.06);}
.svideo__meta{min-width:0;}
.svideo__meta b{display:block;font-size:clamp(15px,1.2vw,19px);font-weight:700;line-height:1.2;}
.svideo__meta span{display:block;margin-top:3px;font-size:clamp(10.5px,.8vw,12.5px);color:rgba(255,255,255,.82);}

/* bottom — three official-partner cards */
.pbrands{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.1vw,16px);
}
.pbrand{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.6vw,22px);
  background:var(--card);
  border-radius:var(--radius);
  padding:clamp(18px,1.9vw,28px);
}
.pbrand__logo{
  flex:none;
  width:clamp(96px,9vw,132px);
  height:clamp(56px,5.2vw,74px);
  /* logo sits directly on the card — no white wrapper, no padding */
  display:grid;place-items:center start;
}
.pbrand__logo img{
  width:auto;max-width:100%;
  max-height:calc(clamp(24px,2.1vw,32px) * var(--lk,1));
  object-fit:contain;
}
.pbrand__logo--sany{--lk:1.02;}
.pbrand__logo--atabey{--lk:1.35;}   /* three-line lockup needs height */
.pbrand__logo--mks{--lk:.82;}       /* very wide */
.pbrand__body{display:block;min-width:0;}
.pbrand__role{
  display:block;
  font-size:clamp(13px,1.05vw,16px);
  font-weight:700;
  line-height:1.25;
  letter-spacing:.005em;
}
.pbrand__desc{
  display:block;
  margin-top:clamp(3px,.4vw,6px);
  font-size:clamp(11px,.82vw,13px);
  line-height:1.5;
  color:var(--soft);
}

/* ============================================================
   WHY US — ink-dark panel, big ghost numerals, one accent.
   ============================================================ */
.whyus{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--ink);
  color:#fff;
  padding:clamp(40px,5vw,84px) var(--gutter) clamp(44px,5.4vw,92px);
}
.whyus::after{
  content:"";
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(120% 120% at 88% 8%,rgba(0,0,0,.7) 0%,transparent 52%);
  mask-image:radial-gradient(120% 120% at 88% 8%,rgba(0,0,0,.7) 0%,transparent 52%);
}
.whyus__head{position:relative;z-index:1;margin-bottom:clamp(30px,4vw,60px);}
.whyus .eyebrow{color:#fff;}
.whyus__title{
  margin:0;
  font-size:clamp(28px,3.4vw,56px);
  line-height:1.06;
  font-weight:300;
  letter-spacing:-.01em;
}
.whyus__title b{font-weight:700;}
.whyus__grid{
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:clamp(22px,2.4vw,40px);
}
.wcell{display:block;text-align:center;}
.wcell__n{
  display:block;
  font-size:clamp(66px,6.4vw,116px);
  line-height:.86;
  font-weight:800;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:rgba(255,255,255,.11);
  transition:color .35s ease;
}
.wcell--on .wcell__n{color:var(--yellow);}
.wcell__t{
  margin:clamp(16px,1.9vw,28px) auto 0;
  font-size:clamp(14px,1.2vw,19px);
  font-weight:700;
  letter-spacing:.005em;
}
.wcell__d{
  margin:clamp(8px,.9vw,12px) auto 0;
  max-width:24ch;
  font-size:clamp(11.5px,.85vw,13.5px);
  line-height:1.6;
  color:rgba(255,255,255,.58);
}

/* ============================================================
   CLIENTS — a balanced logo wall. Full-width gray card (same
   grammar as numbers/footer), white cells on a 3px hairline
   grid, every mark optically normalized so none dominates.
   ============================================================ */
.clients{
  border-radius:var(--radius);
  background:var(--card);
  padding:clamp(40px,5vw,84px) var(--gutter) clamp(44px,5vw,88px);
}
.clients__head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  align-items:end;
  gap:clamp(20px,3vw,60px);
  margin-bottom:clamp(24px,3vw,44px);
}
.clients__head > *{min-width:0;}
.clients__title{
  margin:0;
  font-size:clamp(26px,3vw,48px);
  line-height:1.1;
  font-weight:300;
  letter-spacing:-.005em;
}
.clients__title b{font-weight:700;}
.clients__lead{
  margin:0;
  justify-self:end;
  max-width:38ch;
  padding-bottom:.35em;
  font-size:clamp(12px,.92vw,15px);
  line-height:1.65;
  color:var(--soft);
}

.clients__grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:3px;
  border-radius:16px;
  overflow:hidden;         /* the 3px gutter reads as hairlines between white cells */
}
.clogo{
  display:grid;
  place-items:center;
  min-width:0;             /* let wide wordmarks shrink inside the track, no overflow */
  min-height:clamp(90px,8.6vw,126px);
  padding:clamp(14px,1.8vw,26px) clamp(12px,1.6vw,22px);
  background:#fff;
}
/* two caps keep the wall even: wide wordmarks hit the width cap,
   compact marks hit the height cap — the --k only trims the tall ones */
.clogo img{
  width:auto;
  max-width:78%;
  max-height:calc(clamp(24px,2.2vw,36px) * var(--k,1));
  object-fit:contain;
  opacity:.9;
  transition:opacity .25s ease;
}
.clogo:hover img{opacity:1;}
.cl-homer{--k:1;}
.cl-metropol{--k:1;}
.cl-deka{--k:1.05;}
.cl-artex{--k:1;}
.cl-biograpi{--k:1;}
.cl-bk{--k:1.2;}
.cl-anagi{--k:1.02;}
.cl-element{--k:.96;}
.cl-kvadrati{--k:1;}
.cl-petra{--k:.94;}
.cl-gardens{--k:1.05;}
.cl-zigma{--k:1;}
.cl-blox{--k:1;}
.cl-luji{--k:1.05;}
.cl-console{--k:1;}

/* ============================================================
   GEOGRAPHY — index's navy blueprint panel, re-laid for about:
   head on top, the six cities as one hairline line, the map
   centered and grown to the panel's full breathing room.
   ============================================================ */
.geo{
  position:relative;
  overflow:hidden;
  min-width:0;
  border-radius:var(--radius);
  background:radial-gradient(115% 135% at 70% 30%, #1D3352 0%, #16273F 58%, #132238 100%);
  color:#F2F4F7;
  padding:clamp(40px,5vw,84px) var(--gutter) clamp(40px,4.8vw,80px);
}
.geo .eyebrow{color:#fff;}
.geo__head{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,80px);
  align-items:end;
  margin-bottom:clamp(30px,3.6vw,54px);
}
.geo__head > *{min-width:0;}
.geo__title{
  margin:0;
  color:#fff;
  font-size:clamp(24px,2.6vw,42px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.005em;
}
.geo__title .thin{font-weight:300;}
.geo__title .line{max-width:100%;}
.geo__lead{
  margin:0;
  max-width:42ch;
  font-size:clamp(13px,.95vw,16px);
  line-height:1.7;
  color:rgba(242,244,247,.7);
}

/* ---------- grid: list left, map right (home layout) ---------- */
.geo__grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
  gap:clamp(30px,4.5vw,96px);
  align-items:center;
}
.geo__grid > *{min-width:0;}

.geo__list{list-style:none;margin:0;padding:0;}
.geo-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:18px;
  padding:clamp(13px,1.35vw,20px) 2px;
  border-top:1px solid rgba(255,255,255,.14);
  outline:none;
  cursor:default;
}
.geo__list .geo-row:last-child{border-bottom:1px solid rgba(255,255,255,.14);}
.geo-row:focus-visible{outline:2px solid var(--yellow);outline-offset:-2px;border-radius:6px;}
.geo-row__city{
  display:flex;
  align-items:center;
  font-size:clamp(16px,1.3vw,21px);
  font-weight:700;
  letter-spacing:.01em;
  color:rgba(255,255,255,.88);
  transition:color .3s ease;
}
/* the marker slides in on the live row — the map's ▸, but in the accent */
.geo-row__city::before{
  content:"";
  width:.34em;
  height:.6em;
  margin-right:.5em;
  background:var(--yellow);
  clip-path:polygon(0 0,100% 50%,0 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .35s var(--ease);
}
.geo-row.is-hot .geo-row__city{color:#fff;}
.geo-row.is-hot .geo-row__city::before{transform:scaleX(1);}
.geo-row__meta{
  font-size:clamp(11px,.82vw,13px);
  font-weight:400;
  letter-spacing:.02em;
  white-space:nowrap;
  color:rgba(242,244,247,.5);
}
.geo__all{
  display:inline-block;
  margin-top:clamp(18px,2vw,28px);
  font-size:clamp(12px,.92vw,14px);
  font-weight:700;
  letter-spacing:.01em;
  color:#fff;
  opacity:.85;
  transition:opacity .2s ease;
}
.geo__all:hover{opacity:.55;}
.geo__map{display:block;width:100%;height:auto;}
.gm-r{
  fill:rgba(255,255,255,.03);
  stroke:rgba(255,255,255,.20);
  stroke-width:1;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
  pointer-events:none;
  transition:fill .35s ease;
}
.gm-r.has{fill:rgba(255,255,255,.075);pointer-events:auto;cursor:pointer;}
.gm-r.is-hot{fill:rgba(245,178,27,.26);}
.gm-outline{
  fill:none;
  stroke:rgba(255,255,255,.82);
  stroke-width:1.6;
  vector-effect:non-scaling-stroke;
  stroke-linejoin:round;
  stroke-linecap:round;
  pointer-events:none;
}
.gm-city{cursor:pointer;}
.gm-city__halo{
  fill:rgba(255,255,255,.16);
  transform-box:fill-box;
  transform-origin:center;
  animation:gmPulse 3.4s var(--ease) infinite;
  animation-delay:var(--pd,0s);
}
@keyframes gmPulse{
  0%{transform:scale(.55);opacity:0;}
  28%{opacity:.9;}
  75%,100%{transform:scale(2.1);opacity:0;}
}
.gm-city__dot{
  fill:#fff;
  transition:fill .3s ease;
}
.gm-city.is-hot .gm-city__dot{fill:var(--yellow);}
.gm-city.is-hot .gm-city__halo{fill:rgba(245,178,27,.34);}
.gm-city__tri{fill:var(--red);}
.gm-city__lab text{
  fill:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.03em;
  paint-order:stroke;
  stroke:#15263D;
  stroke-width:3.4px;
  stroke-linejoin:round;
}
@media (prefers-reduced-motion:reduce){
  .gm-city__halo{animation:none;opacity:.45;}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .abnum__grid{grid-template-columns:1fr;}
  .mcard{min-height:0;}
  .mcard__foot{padding-top:clamp(28px,5vw,44px);}
  .clients__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .whyus__grid{grid-template-columns:repeat(3,1fr);row-gap:clamp(28px,4vw,40px);}
}
@media (max-width:900px){
  .story__top{grid-template-columns:1fr;}
  .svideo{min-height:clamp(300px,58vw,440px);}
}
@media (max-width:760px){
  .pbrands{grid-template-columns:1fr;}
  .whyus__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:960px){
  /* minmax(0,…): grid items must shrink below the title's max-content width */
  .geo__head{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(16px,3vw,26px);}
  .geo__grid{grid-template-columns:minmax(0,1fr);gap:clamp(24px,5vw,40px);}
  .geo__stage{order:-1;}          /* map leads on small screens */
  .gm-city__dot{r:5.2px;}
  .gm-city__halo{r:8.5px;}
  .gm-city__lab text{font-size:23px;stroke-width:4.2px;}
}
@media (max-width:900px){
  .abnum__head,.clients__head{grid-template-columns:1fr;align-items:start;}
  .abnum__lead,.clients__lead{justify-self:start;padding-bottom:0;}
}
@media (max-width:860px){
  .abnum__cells{grid-template-columns:repeat(2,1fr);}
  .ncard{min-height:clamp(128px,30vw,170px);}
}
@media (max-width:560px){
  .gm-city__dot{r:6.5px;}
  .gm-city__halo{r:10px;}
  .gm-city__lab text{font-size:30px;stroke-width:5px;}
}