/* ===================== FONTS ===================== */
  @font-face{font-family:"TBC Contractica";src:url("../fonts/TBCContracticaCAPS-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap;}
  @font-face{font-family:"TBC Contractica";src:url("../fonts/TBCContracticaCAPS-Book.ttf") format("truetype");font-weight:350;font-style:normal;font-display:swap;}
  @font-face{font-family:"TBC Contractica";src:url("../fonts/TBCContracticaCAPS-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
  @font-face{font-family:"TBC Contractica";src:url("../fonts/TBCContracticaCAPS-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap;}
  @font-face{font-family:"TBC Contractica";src:url("../fonts/TBCContracticaCAPS-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
  @font-face{font-family:"TBC Contractica";src:url("../fonts/TBCContracticaCAPS-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap;}

  /* ===================== TOKENS ===================== */
  :root{
    --yellow:#F5B21B;
    --yellow-hi:#FFC130;
    --red:#E73F3F;
    --ink:#141922;
    --card:#F4F6F8;
    --radius:22px;
    --gutter:clamp(20px,3.8vw,58px);
    --hero-ar:1482/824;          /* source artboard 1482 x 824 */
    --ease:cubic-bezier(.22,1,.36,1);
    /* Spread the motion evenly (26% / 62% / 90% at quarter / half / three-quarter
       time). Ease-in-out stalls at the start; a hard ease-out is ~72% open by
       quarter-time — both read as the white blinking out rather than opening. */
    --ease-mask:cubic-bezier(.35,.25,.6,1);
  }
  *,*::before,*::after{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:"TBC Contractica",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{text-decoration:none;color:inherit;}
  img{display:block;max-width:100%;}

  /* Lenis */
  html.lenis,html.lenis body{height:auto;}
  .lenis.lenis-smooth{scroll-behavior:auto !important;}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
  .lenis.lenis-stopped{overflow:hidden;}

  .shell{
    max-width:1680px;
    margin:0 auto;
    padding:clamp(10px,1.2vw,18px);
    display:flex;
    flex-direction:column;
    gap:clamp(10px,1.2vw,18px);
  }

  /* ===================== INTRO MASK ===================== */
  /* The page starts white and the hero opens out of it in its OWN shape —
     the same rounded rect — scaling from the centre. The white area around
     the hero IS the mask, so there is no overlay element at all.
     Equal % insets keep the aspect ratio, so the growing window is always
     the hero's shape rather than a square. */
  /* The white page opens in the hero's own shape.
     Deliberately NOT clip-path on .hero: the hero carries three large image
     layers that are mid-transform during the intro, and an animating clip-path
     on that parent interpolates without repainting per frame — the values move
     but the screen doesn't. So instead this is a plain white overlay with a
     rounded-rect HOLE punched by a box-shadow spread, and the hole's width and
     height are animated. That's an ordinary paint, which cannot skip frames,
     and it leaves the hero itself completely untouched. */
  .reveal{display:none;}
  .js .reveal{
    display:block;
    position:fixed;
    inset:0;
    z-index:90;
    pointer-events:none;
    overflow:hidden;
  }
  .reveal__hole{
    position:absolute;
    width:0;
    height:0;
    transform:translate(-50%,-50%);
    border-radius:var(--radius);   /* constant — same corners as the hero */
    box-shadow:0 0 0 100vmax #fff;
  }

  /* everything below stays white until the hero window has opened */
  .js .partners{
    opacity:0;
    transform:translateY(22px);
    transition:opacity .9s var(--ease) .55s,transform .9s var(--ease) .55s;
  }
  .js.is-revealed .partners{opacity:1;transform:none;}

  /* ===================== REVEAL SYSTEM ===================== */
  .js [data-reveal]{
    opacity:0;
    transform:translateY(26px);
    transition:opacity .95s var(--ease),transform .95s var(--ease);
    transition-delay:var(--d,0ms);
  }
  .js [data-reveal].is-in{opacity:1;transform:none;}

  /* line-by-line mask reveal for titles */
  .js .reveal-lines .line > span{
    display:block;
    transform:translateY(115%);
    transition:transform 1.05s var(--ease);
    transition-delay:var(--d,0ms);
  }
  .js .reveal-lines.is-in .line > span{transform:none;}
  .reveal-lines .line:nth-child(1) > span{--d:0ms;}
  .reveal-lines .line:nth-child(2) > span{--d:90ms;}
  .reveal-lines .line:nth-child(3) > span{--d:180ms;}

  /* flex column so the .line negative margins below can't collapse into each other */
  .reveal-lines{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .reveal-lines .line{
    display:block;
    overflow:hidden;                 /* the mask */
    padding:.16em 0 .22em;           /* room so Georgian ascenders/descenders */
    margin:-.16em 0 -.22em;          /* aren't clipped; layout stays identical */
  }

  /* ===================== HERO ===================== */
  .hero{
    position:relative;
    /* no isolation here: it would trap the fixed header's z-index inside the
       hero's stacking context and let later sections paint over it */
    overflow:hidden;
    border-radius:var(--radius);
    aspect-ratio:var(--hero-ar);
    min-height:560px;
    max-height:920px;
    display:flex;
    flex-direction:column;
    background:#37699C;
  }

  /* layer stack, bottom -> top: sky, scrim, red line, crane */
  .hero__layer{
    position:absolute;
    bottom:0;
    height:100%;
    width:auto;
    max-width:none;
    pointer-events:none;
    user-select:none;
  }
  .hero__sky{left:0;width:100%;height:100%;object-fit:cover;z-index:0;}
  .hero__line{right:0;z-index:1;}
  .hero__crane{right:0;z-index:2;}

  /* The art layers' transform is owned entirely by JS (intro settle + mouse
     parallax + scroll parallax composed into one matrix), so there is no CSS
     transform here to fight with — only the origins each layer scales about. */
  .hero__sky{transform-origin:50% 50%;}
  .hero__line,.hero__crane{transform-origin:100% 100%;}

  .hero__scrim{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      linear-gradient(98deg, rgba(12,40,70,.34) 0%, rgba(12,40,70,.15) 30%, rgba(12,40,70,0) 56%),
      linear-gradient(to top, rgba(10,34,60,.24), rgba(10,34,60,0) 40%);
  }

  /* ---------- nav ---------- */
  .nav{
    position:relative;
    z-index:4;
    display:flex;
    align-items:center;
    gap:clamp(16px,2.4vw,42px);
    padding:clamp(18px,3.2vw,46px) var(--gutter) 0;
  }
  .nav__logo{flex:none;}
  .nav__logo img{height:clamp(34px,3vw,46px);width:auto;}
  /* two lockup variants — white+red over dark, ink+red over light */
  .nav__logo .logo-dark{display:none;}
  .nav.is-light .logo-light{display:none;}
  .nav.is-light .logo-dark{display:block;}

  .nav__menu{
    display:flex;
    align-items:center;
    gap:clamp(13px,1.85vw,32px);
    margin-right:auto;
  }
  .nav__menu a{
    position:relative;
    display:inline-flex;
    align-items:center;
    color:var(--nav-fg);
    font-size:clamp(13px,.95vw,15px);
    font-weight:600;
    letter-spacing:.01em;
    white-space:nowrap;
    padding:6px 0;
    opacity:.95;
    transition:color .2s ease,opacity .2s ease;
  }
  .nav__menu a:hover{opacity:1;color:var(--yellow);}
  .nav__menu a.is-current::before{
    content:"";
    display:inline-block;
    width:.44em;height:.74em;
    margin-right:.5em;
    background:var(--red);
    clip-path:polygon(0 0,100% 50%,0 100%);
  }

  .nav__actions{display:flex;align-items:center;gap:12px;flex:none;}

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:clamp(42px,3.2vw,50px);
    padding:0 clamp(20px,2vw,32px);
    border:1.6px solid transparent;
    border-radius:8px;
    font:inherit;
    font-size:clamp(13px,.95vw,15px);
    font-weight:700;
    letter-spacing:.01em;
    white-space:nowrap;
    cursor:pointer;
    transition:background-color .2s ease,box-shadow .2s ease,transform .12s ease;
  }
  .btn:active{transform:translateY(1px);}
  .btn--ghost{color:#fff;border-color:rgba(255,255,255,.85);background:transparent;}
  .btn--ghost:hover{background:rgba(255,255,255,.14);}
  .btn--yellow{background:var(--yellow);color:#1B1200;}
  .btn--yellow:hover{background:var(--yellow-hi);box-shadow:0 10px 26px rgba(245,178,27,.34);}

  /* ---------- language selector ---------- */
  .langsel{position:relative;flex:none;}
  .langsel__btn{
    display:inline-flex;align-items:center;gap:8px;
    height:clamp(42px,3.2vw,50px);padding:0 12px;
    border:1.6px solid transparent;border-radius:8px;
    background:transparent;color:var(--nav-fg);cursor:pointer;
    font:inherit;font-size:clamp(13px,.95vw,15px);font-weight:700;letter-spacing:.02em;
    transition:background-color .2s ease;
  }
  .langsel__btn:hover{background:rgba(255,255,255,.14);}
  .langsel__globe{width:18px;height:18px;flex:none;}
  .langsel__cur{line-height:1;}
  .langsel__chev{width:13px;height:13px;flex:none;transition:transform .25s var(--ease);}
  .langsel.is-open .langsel__chev{transform:rotate(180deg);}
  .langsel__menu{
    position:absolute;top:calc(100% + 8px);right:0;z-index:20;
    min-width:158px;margin:0;padding:6px;list-style:none;
    background:#fff;border-radius:12px;
    border:1px solid rgba(20,25,34,.08);
    box-shadow:0 20px 46px -14px rgba(12,20,30,.4);
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  }
  .langsel.is-open .langsel__menu{opacity:1;visibility:visible;transform:none;}
  .langsel__opt{
    display:flex;align-items:center;gap:8px;
    padding:9px 12px;border-radius:8px;cursor:pointer;
    color:var(--ink);font-size:14px;font-weight:600;
    transition:background-color .18s ease;
  }
  .langsel__opt:hover{background:var(--card);}
  .langsel__opt.is-active{background:var(--card);}
  .langsel__opt.is-active::after{content:"";margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--yellow);}

  /* ---------- content-width SMART glassy floating panel on scroll ---------- */
  /* theme tokens — JS flips .is-light depending on the section behind the panel */
  .nav{--nav-fg:#fff;--nav-glass:rgba(16,22,31,.55);--nav-border:rgba(255,255,255,.12);
    transition:background-color .35s var(--ease),box-shadow .35s var(--ease),color .3s var(--ease);}
  .nav.is-light{--nav-fg:#141922;--nav-glass:rgba(255,255,255,.66);--nav-border:rgba(20,25,34,.10);}

  .nav.is-float{
    position:fixed;
    top:clamp(8px,1vw,16px);
    left:clamp(10px,1.2vw,18px);
    right:clamp(10px,1.2vw,18px);
    margin-inline:auto;
    max-width:calc(1680px - 2*clamp(10px,1.2vw,18px));  /* = hero / footer width */
    z-index:1000;                         /* sits above everything */
    padding:clamp(9px,.9vw,13px) clamp(14px,1.4vw,20px);
    border-radius:16px;
    background:var(--nav-glass);
    -webkit-backdrop-filter:blur(18px) saturate(150%);
    backdrop-filter:blur(18px) saturate(150%);
    border:1px solid var(--nav-border);
    box-shadow:0 18px 50px -18px rgba(0,0,0,.5);
    animation:navFloat .42s var(--ease);
  }
  .nav.is-float.is-light{box-shadow:0 20px 50px -20px rgba(20,30,45,.28);}
  @keyframes navFloat{from{transform:translateY(-130%);opacity:0;}to{transform:translateY(0);opacity:1;}}

  /* the single CTA turns yellow once the header is floating (+ the yellow hover) */
  .nav.is-float .btn--ghost{background:var(--yellow);color:#1B1200;border-color:transparent;}
  .nav.is-float .btn--ghost:hover{background:var(--yellow-hi);box-shadow:0 10px 26px rgba(245,178,27,.34);}

  /* dark-on-light adaptation (over light sections) */
  .nav.is-light .langsel__btn:hover{background:rgba(20,25,34,.06);}
  .nav.is-light:not(.is-float) .btn--ghost{color:#141922;border-color:rgba(20,25,34,.35);}
  .nav.is-light:not(.is-float) .btn--ghost:hover{background:rgba(20,25,34,.06);}
  .nav.is-light .nav__burger{border-color:rgba(20,25,34,.45);}
  @media (prefers-reduced-motion:reduce){.nav.is-float{animation:none;}}

  .nav__burger{
    display:none;
    width:46px;height:46px;
    padding:0;
    border:1.6px solid rgba(255,255,255,.7);
    border-radius:8px;
    background:transparent;
    cursor:pointer;
    place-items:center;
  }
  .nav__burger span{display:block;width:20px;height:2px;background:var(--nav-fg);box-shadow:0 -6px 0 var(--nav-fg),0 6px 0 var(--nav-fg);}

  /* ---------- copy ---------- */
  .hero__content{
    position:relative;
    z-index:4;
    margin-top:auto;
    padding:0 var(--gutter) clamp(46px,5.2vw,86px);
    max-width:min(820px,62%);
  }
  .hero__title{
    margin:0;
    color:#fff;
    font-size:clamp(27px,3.2vw,54px);
    line-height:1.06;
    font-weight:700;
    letter-spacing:-.005em;
  }
  .hero__title .thin{font-weight:300;}
  .tri{
    display:inline-block;
    width:.36em;height:.63em;
    margin-right:.34em;
    background:var(--red);
    clip-path:polygon(0 0,100% 50%,0 100%);
    vertical-align:.02em;
  }
  .hero__lead{
    margin:clamp(18px,2.1vw,32px) 0 0;
    color:rgba(255,255,255,.92);
    font-size:clamp(13px,.95vw,16px);
    line-height:1.6;
    font-weight:400;
  }
  .hero__cta{margin-top:clamp(20px,2.2vw,32px);}
  .hero__cta .btn{min-width:clamp(180px,14vw,226px);height:clamp(44px,3.4vw,52px);}

  /* ===================== PARTNERS ===================== */
  .partners{
    background:var(--card);
    border-radius:var(--radius);
    padding:clamp(24px,2.9vw,44px) 0 clamp(26px,3vw,48px);
    overflow:hidden;
  }
  .partners__label{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 clamp(20px,2.4vw,36px);
    padding:0 var(--gutter);
    font-size:clamp(14px,1.02vw,17px);
    font-weight:700;
    letter-spacing:.01em;
  }
  .partners__label .tri{width:.34em;height:.6em;margin-right:.42em;}

  .marquee{
    --logo-gap:clamp(40px,3.6vw,64px);
    display:flex;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  }
  .marquee__track{
    display:flex;
    align-items:center;
    flex:none;
    gap:var(--logo-gap);
    padding-right:var(--logo-gap);
    animation:marquee var(--dur,30s) linear infinite;
    will-change:transform;
  }
  .marquee:hover .marquee__track{animation-play-state:paused;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-100%);}}

  /* per-logo optical sizing (source PNGs differ in aspect + built-in padding) */
  .marquee img{
    flex:none;
    height:calc(clamp(20px,1.75vw,29px) * var(--k,1));
    width:auto;
    object-fit:contain;
    opacity:.92;
    transition:opacity .2s ease;
  }
  .marquee:hover img{opacity:.5;}
  .marquee img:hover{opacity:1;}
  .k-homer{--k:1.17;}
  .k-metropol{--k:.83;}
  .k-deka{--k:1.03;}
  .k-biograpi{--k:.86;}
  .k-anagi{--k:1.59;}
  .k-kvadrati{--k:1.32;}
  .k-blox{--k:1.45;}
  .k-artex{--k:1.12;}
  .k-bk{--k:1.55;}      /* square-ish frame mark needs the height */
  .k-element{--k:1.05;}
  .k-gardens{--k:1.25;}
  .k-petra{--k:1.3;}
  .k-zigma{--k:1.15;}
  .k-luji{--k:1.3;}
  .k-console{--k:1.15;}

  /* ===================== ABOUT ===================== */
  .about{
    /* horizontal padding 0 so the frame lines up edge-for-edge with the hero
       and footer (which are inset only by the shell padding + same radius) */
    padding:clamp(64px,8vw,140px) 0 clamp(28px,3.4vw,56px);
  }
  /* ---------- scroll-fill statement ---------- */
  /* medium centred line before the photo card; each word starts faint and
     fills to full ink as the scroll passes through it (JS drives opacity) */
  .manifesto{
    margin:0 auto clamp(56px,7vw,116px);
    max-width:min(880px,94%);
    text-align:center;
    font-size:clamp(19px,2vw,32px);
    line-height:1.5;
    font-weight:700;
    letter-spacing:.01em;
    color:var(--ink);
  }
  .manifesto__w{display:inline-block;}

  .about__intro{
    margin:0;
    max-width:44ch;
    font-size:clamp(14px,1.06vw,18px);
    line-height:1.7;
    color:rgba(20,25,34,.74);
  }

  /* ---------- head inside the photo frame ---------- */
  .about__frame-head{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(28px,4vw,80px);
    align-items:start;
    padding:clamp(22px,2.6vw,46px) clamp(20px,3vw,52px) 0;
  }
  .about__frame-head .eyebrow{color:#fff;}
  .about__frame-head .about__title{color:#fff;}
  .about__frame-head .about__intro{color:rgba(255,255,255,.82);}

  /* ---------- layered stage ---------- */
  .about__stage{position:relative;}
  .about__frame{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius);
    /* 16/9 rather than 16/8: closer to the photo's own 3:2 so less is cropped,
       and it leaves height for the figures to sit in without crowding */
    aspect-ratio:16/9;
    background:#1F3350;
    display:flex;
    flex-direction:column;
    justify-content:space-between;   /* head rides the top, stats the foot */
  }
  /* oversized on purpose: the parallax travel has to happen inside the frame,
     never drag an edge into it */
  .about__photo{
    position:absolute;
    top:-25%;
    left:0;
    width:100%;
    height:150%;     /* extra overflow room so the stronger parallax never reveals an edge */
    object-fit:cover;
    will-change:transform;
  }
  .about__veil{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    /* two scrims: the top one carries the in-frame head, the bottom the stats */
    background:
      linear-gradient(to bottom,
        rgba(8,16,26,.74) 0%,
        rgba(8,16,26,.38) 16%,
        rgba(8,16,26,0)   34%),
      linear-gradient(to top,
        rgba(8,16,26,.86) 0%,
        rgba(8,16,26,.58) 22%,
        rgba(8,16,26,.10) 44%,
        rgba(8,16,26,0)   60%);
  }
  .eyebrow{
    display:flex;
    align-items:center;
    margin:0 0 clamp(14px,1.6vw,22px);
    font-size:clamp(13px,.98vw,16px);
    font-weight:700;
    letter-spacing:.02em;
  }
  .about__title{
    margin:0;
    /* same scale as brands/projects/geo — this heading lives among them now */
    font-size:clamp(24px,2.6vw,42px);
    line-height:1.12;
    font-weight:700;
    letter-spacing:-.005em;
  }
  .about__cta{margin-top:clamp(20px,2.2vw,32px);}
  .btn--dark{
    background:var(--ink);
    color:#fff;
  }
  .btn--dark:hover{background:#28303d;}

  /* ---------- numbers ---------- */
  /* Three wide columns rather than six narrow ones: at six, each cell was
     ~215px, which is far too tight to let the figures carry any weight. */
  /* the figures now live inside the photo frame, laid across its foot */
  .stats{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:clamp(10px,1.1vw,16px);
    padding:clamp(20px,2.4vw,40px) clamp(20px,3vw,52px) clamp(22px,2.6vw,44px);
  }
  /* the block itself only fades — all the movement is per cell below, and
     running both would read as one motion smeared over another */
  .js .stats{transform:none;}

  /* glassy stat cards — number top-left, label bottom-left */
  .stat{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    min-height:clamp(116px,10vw,152px);
    padding:clamp(14px,1.3vw,20px);
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.20);
    border-radius:14px;
    -webkit-backdrop-filter:blur(10px) saturate(140%);
    backdrop-filter:blur(10px) saturate(140%);
  }
  .stat__rule{
    display:none;
    width:100%;
    height:1px;
    background:rgba(255,255,255,.34);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform 1.1s var(--ease);
    transition-delay:calc(var(--i,0) * 90ms);
  }
  .stats.is-in .stat__rule{transform:scaleX(1);}

  .stat__num{
    display:block;
    overflow:hidden;                    /* mask the digits rise up out of */
    margin-top:0;
    color:#fff;
    font-size:clamp(26px,2.9vw,50px);
    line-height:1.08;                   /* not 1 — at 1 the glyph tops clip */
    font-weight:700;
    letter-spacing:-.025em;
    font-variant-numeric:tabular-nums;  /* stops width jitter while counting */
  }
  .stat__num > span{
    display:block;
    transform:translateY(110%);
    transition:transform 1.05s var(--ease);
    transition-delay:calc(var(--i,0) * 90ms + 140ms);
  }
  .stats.is-in .stat__num > span{transform:none;}

  .stat__label{
    margin-top:0;
    min-height:0;
    font-size:clamp(10px,.78vw,13px);
    line-height:1.4;
    color:rgba(255,255,255,.72);
  }

  /* ===================== BRANDS / RANGE ===================== */
  .brands{padding:clamp(28px,3.2vw,52px) var(--gutter) clamp(18px,1.8vw,32px);}
  .brands__head{margin-bottom:clamp(28px,3.4vw,56px);}
  .brands__title{
    margin:0;
    font-size:clamp(24px,2.6vw,42px);
    line-height:1.12;
    font-weight:700;
    letter-spacing:-.005em;
  }

  .brands__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:clamp(12px,1.2vw,20px);
  }

  .brand-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border-radius:var(--radius);
    background:var(--card);
    aspect-ratio:4/5;
    display:flex;
    flex-direction:column;
    transition:background-color .4s ease,transform .5s var(--ease);
  }
  .brand-card:hover{background:#EEF1F5;transform:translateY(-4px);}
  .brand-card__go{position:absolute;inset:0;z-index:3;}

  .brand-card__top{
    position:relative;
    z-index:2;
    padding:clamp(20px,1.9vw,30px) clamp(20px,1.9vw,30px) 0;
  }
  .brand-card__name{
    margin:0;
    /* one line for every category — smaller so the longest ("მობილური ავტოამწეები")
       fits without wrapping, which also keeps the four descs/logos level */
    white-space:nowrap;
    font-size:clamp(13px,1.02vw,18px);
    line-height:1.2;
    font-weight:700;
    letter-spacing:-.006em;
  }
  .brand-card__desc{
    margin:clamp(8px,.8vw,12px) 0 clamp(14px,1.4vw,22px);
    font-size:clamp(11px,.8vw,13px);
    line-height:1.5;
    color:rgba(20,25,34,.58);
  }
  /* the logo is now a credential under the category, not the headline —
     small, and each mark gets its own factor because they're different shapes */
  .brand-card__logo{
    height:calc(clamp(22px,1.7vw,29px) * var(--lk,1));
    width:auto;
    max-width:min(88%,210px);
    object-fit:contain;
    object-position:left center;
    opacity:.9;
  }
  .brand-card__logo--atabey{--lk:1.55;}   /* three-line lockup */
  .brand-card__logo--mks{--lk:1.05;}      /* very wide, mark + wordmark */

  /* the cutout fills the lower two-thirds and is cropped by the card edge —
     the crop is the point, it's what stops these reading as clip-art */
  .brand-card__art{
    position:absolute;
    z-index:1;
    inset:auto 0 0 0;
    height:72%;
    overflow:hidden;
  }
  .brand-card__art img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center bottom;
    transform-origin:center bottom;
    /* --k evens out how much empty margin each cutout carries in its own canvas */
    transform:scale(var(--k,1));
    transition:transform .65s var(--ease);
  }
  .brand-card:hover .brand-card__art img{transform:scale(calc(var(--k,1) * 1.05));}
  .brand-card--mks .brand-card__art img{--k:1.14;}

  /* ===================== PROJECTS ===================== */
  /* no side padding on the section itself — the track bleeds to the shell
     edges so the next card peeks in, and the head/foot are padded instead */
  .projects{padding:clamp(30px,3.8vw,60px) 0 clamp(40px,4.6vw,72px);background:var(--card);border-radius:var(--radius);overflow:hidden;}
  .projects__head{padding:0 var(--gutter) clamp(28px,3.2vw,52px);}
  .projects__title{
    margin:0;
    font-size:clamp(24px,2.6vw,42px);
    line-height:1.12;
    font-weight:700;
    letter-spacing:-.005em;
  }

  .pcarousel__track{
    display:flex;
    gap:clamp(12px,1.2vw,20px);
    /* break out of the shell padding so the track bleeds to the true viewport edges */
    width:100vw;
    margin-inline:calc(50% - 50vw);
    /* first card still lines up with the title/head (shell padding + gutter); right side bleeds off */
    padding:0 0 0 calc(clamp(10px,1.2vw,18px) + var(--gutter));
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:calc(clamp(10px,1.2vw,18px) + var(--gutter));
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
  }
  .pcarousel__track::-webkit-scrollbar{display:none;}
  .pcarousel__track:focus-visible{outline:2px solid var(--yellow);outline-offset:4px;}

  .pcard{
    position:relative;
    isolation:isolate;
    flex:0 0 clamp(280px,72%,1040px);
    aspect-ratio:16/10;
    border-radius:var(--radius);
    overflow:hidden;
    background:#16202b;
    scroll-snap-align:start;
  }
  .pcard__bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
    /* --px = horizontal parallax offset (JS, from slide position);
       --sc = resting zoom that gives the parallax room to travel */
    transform:translate3d(var(--px,0px),0,0) scale(var(--sc,1.24));
    transition:transform .55s cubic-bezier(.16,1,.3,1);
    will-change:transform;
    backface-visibility:hidden;
  }
  .pcard:hover .pcard__bg{--sc:1.29;}
  @media (prefers-reduced-motion:reduce){
    .pcard__bg{transform:none;transition:none;}
    .pcard:hover .pcard__bg{--sc:1;}
  }
  /* top and bottom scrim: the logo sits on sky, the title/button on whatever
     the photo happens to be, so both ends need their own protection */
  .pcard::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
      /* every element on the card is left-aligned, so protect that column
         first and leave the right of the photo clean */
      linear-gradient(100deg, rgba(9,18,29,.66) 0%, rgba(9,18,29,.30) 36%, rgba(9,18,29,0) 66%),
      linear-gradient(180deg, rgba(9,18,29,.48) 0%, rgba(9,18,29,0) 32%, rgba(9,18,29,.70) 100%);
  }
  .pcard__body{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    align-items:flex-start;
    padding:clamp(20px,2.4vw,40px);
  }

  /* the client marks are all black artwork — knock them out to pure white so
     they read on the photo without needing per-brand light versions */
  .pcard__logo{
    height:clamp(20px,1.9vw,32px);
    width:auto;
    max-width:min(50%,200px);
    object-fit:contain;
    object-position:left center;
    filter:brightness(0) invert(1);
    opacity:.95;
  }
  .pcard__wordmark{
    color:#fff;
    font-size:clamp(15px,1.4vw,22px);
    font-weight:800;
    letter-spacing:.18em;
    line-height:1;
    opacity:.95;
  }

  .pcard__mid{display:flex;flex-direction:column;align-items:flex-start;}
  .chip{
    background:rgba(255,255,255,.94);
    color:var(--ink);
    padding:.55em .9em;
    border-radius:7px;
    font-size:clamp(10px,.76vw,12px);
    font-weight:700;
    letter-spacing:.06em;
  }
  .pcard__name{
    margin:clamp(12px,1.2vw,20px) 0 0;
    color:#fff;
    font-size:clamp(22px,2.5vw,40px);
    line-height:1.14;
    font-weight:700;
    letter-spacing:-.005em;
    max-width:24ch;
  }
  .pcard__name .thin{font-weight:300;}
  .btn--light{background:#fff;color:var(--ink);}
  .btn--light:hover{background:rgba(255,255,255,.86);}

  /* ---------- carousel controls ---------- */
  .pcarousel__foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:clamp(20px,2.4vw,34px) var(--gutter) 0;
  }
  .pdots{
    display:flex;
    align-items:center;
    gap:8px;
    padding:11px 15px;
    background:var(--card);
    border-radius:999px;
  }
  .pdot{
    width:8px;
    height:8px;
    padding:0;
    border:0;
    border-radius:999px;
    background:rgba(20,25,34,.24);
    cursor:pointer;
    transition:width .35s var(--ease),background-color .3s ease;
  }
  .pdot.is-active{width:28px;background:var(--ink);}

  .pnav{display:flex;gap:10px;}
  .pnav__btn{
    width:clamp(42px,3.4vw,52px);
    aspect-ratio:1;
    display:grid;
    place-items:center;
    padding:0;
    border:1.5px solid rgba(20,25,34,.16);
    border-radius:999px;
    background:#fff;
    color:var(--ink);
    cursor:pointer;
    transition:background-color .2s ease,color .2s ease,border-color .2s ease,opacity .2s ease;
  }
  .pnav__btn svg{width:21px;height:21px;}
  .pnav__btn:not(:disabled):hover{background:var(--ink);color:#fff;border-color:var(--ink);}
  .pnav__btn:disabled{opacity:.3;cursor:default;}

  /* ===================== RESPONSIVE ===================== */
  @media (max-width:1180px){
    .nav__menu{gap:13px;}
    /* the single CTA stays; trim the language selector to the globe + code */
    .langsel__chev{display:none;}
    /* four across gets too narrow for the model line to stay on two rows */
    .brands__grid{grid-template-columns:repeat(2,1fr);}
    .brand-card{aspect-ratio:16/11;}
  }
  @media (max-width:960px){
    .nav__menu{display:none;}
    .nav__burger{display:grid;}
    .nav__actions{margin-left:auto;}
    .brk{display:none;}

    /* stack it: art fills the upper half, copy sits on a darkened lower half */
    .hero{aspect-ratio:auto;height:min(88vh,780px);max-height:none;}
    .hero__content{max-width:100%;}
    .hero__crane{top:9%;bottom:auto;height:46%;right:-12%;}
    .hero__line{top:0;bottom:auto;height:62%;right:-4%;}
    .pcard{flex-basis:86%;aspect-ratio:4/3;}

    .about__frame-head{grid-template-columns:1fr;gap:clamp(14px,2.6vw,22px);}
    /* stacked head + stats consume the whole card — hold some open photo
       between them so the image still reads */
    .about__frame{gap:clamp(90px,24vw,150px);}
    .stats{grid-template-columns:repeat(3,1fr);}
    .brands__grid{grid-template-columns:repeat(2,1fr);}
    .brand-card{aspect-ratio:4/3;}
    /* Drop the fixed ratio: at three rows of figures a 16/9 box would clip
       them. Let the frame take its height from the stats instead, with a floor
       so there's always photo showing above. The photo is inset-0 so it fills
       whatever height results. */
    .about__frame{
      aspect-ratio:auto;
      min-height:clamp(400px,74vw,560px);
    }

    .hero__scrim{
      z-index:3;                    /* above the art on mobile, so copy stays readable */
      background:linear-gradient(180deg,
        rgba(12,40,70,.26) 0%,
        rgba(12,40,70,.06) 24%,
        rgba(10,34,60,.72) 54%,
        rgba(9,30,54,.94) 100%);
    }
  }
  @media (max-width:560px){
    /* phone: keep the language globe, let the burger carry the CTA */
    .nav__actions .btn--ghost{display:none;}
    .langsel__cur{display:none;}
    .langsel__btn{padding:0 10px;}
    .hero{height:auto;min-height:620px;}
    .hero__crane{height:38%;right:-16%;}
    .hero__line{height:52%;}
    .hero__cta .btn{width:100%;}
    .pcard{flex-basis:88%;aspect-ratio:3/4;}
    .pcard__name{max-width:none;}
    .brands__grid{grid-template-columns:1fr;}
    .brand-card{aspect-ratio:5/4;}   /* wide again once it has the full width */
    .stats{grid-template-columns:repeat(2,1fr);row-gap:clamp(14px,4vw,22px);}
    .stat__label{min-height:3.2em;}   /* labels wrap more once the column narrows */
    /* three rows of figures eat ~310px here, so the floor has to clear that
       plus enough photo for the image to still read */
    .about__frame{min-height:clamp(540px,145vw,660px);}
  }

  /* ===================== CAROUSEL FOOT LINK ===================== */
  .pall{
    font-size:clamp(12px,.92vw,14px);
    font-weight:700;
    letter-spacing:.01em;
    color:var(--ink);
    transition:opacity .2s ease;
  }
  .pall:hover{opacity:.6;}


  /* ===================== GEOGRAPHY ===================== */
  /* Navy blueprint panel on the footer's ground, echoing the FB map artwork:
     bright country silhouette, faint region hairlines, red ▸ city marks.
     Yellow is reserved for the live (hovered) city/region — one accent. */
  .geo{
    position:relative;
    overflow:hidden;
    min-width:0;               /* flex child of .shell — may shrink below content */
    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(34px,4vw,62px);
  }
  .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__lead{
    margin:0;
    max-width:42ch;
    font-size:clamp(13px,.95vw,16px);
    line-height:1.7;
    color:rgba(242,244,247,.7);
  }

  .geo__grid{
    display:grid;
    grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);
    gap:clamp(30px,4.5vw,96px);
    align-items:center;
  }
  /* grid/flex items must never propagate their min-content width upward —
     the wrapped title and the wide map both live inside these */
  .geo__head > *,.geo__grid > *{min-width:0;}
  .geo__title .line{max-width:100%;}

  /* ---------- city list ---------- */
  .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;}

  /* ---------- map ---------- */
  .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 (max-width:960px){
    /* minmax(0,…): grid items must be allowed to shrink below the title's
       max-content width, or the whole panel overflows the viewport */
    .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:560px){
    .gm-city__dot{r:6.5px;}
    .gm-city__halo{r:10px;}
    .gm-city__lab text{font-size:30px;stroke-width:5px;}
  }
  @media (prefers-reduced-motion:reduce){
    .gm-city__halo{animation:none;opacity:.45;}
  }

  /* ===================== REDUCED MOTION ===================== */
  @media (prefers-reduced-motion:reduce){
    .js [data-reveal],
    .js .reveal-lines .line > span,
    .js .stat__rule,
    .js .stat__num > span,
    .js .partners,
    .js .hero__layer{opacity:1 !important;transform:none !important;transition:none !important;}
    .js .reveal{display:none !important;}
    .marquee{overflow-x:auto;}
    .marquee__track{animation:none;}
  }

  /* ===================== HOME · LATEST NEWS (press teaser) ===================== */
  /* press register on the home page: text-first cards, photo on the floor,
     top hairline fills red on hover — same grammar as news.html */
  .hnews{padding:clamp(56px,7vw,110px) var(--gutter) 0;}
  .hnews__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(28px,3.4vw,52px);}
  .hnews__title{margin:0;font-size:clamp(24px,2.6vw,42px);line-height:1.12;font-weight:300;letter-spacing:-.005em;}
  .hnews__title b{font-weight:700;}
  .hnews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.4vw,48px) clamp(20px,2.4vw,40px);}
  .hncard{position:relative;display:flex;flex-direction:column;border-top:1px solid rgba(20,25,34,.12);padding-top:clamp(14px,1.6vw,20px);}
  .hncard::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease);}
  .hncard:hover::before,.hncard:focus-visible::before{transform:scaleX(1);}
  .hncard__meta{margin:0;font-size:clamp(11px,.85vw,13.5px);color:rgba(20,25,34,.62);}
  .hncard__t{margin:clamp(8px,1vw,14px) 0 0;font-size:clamp(16px,1.35vw,21px);line-height:1.3;font-weight:700;letter-spacing:-.004em;transition:color .25s ease;}
  .hncard:hover .hncard__t{color:rgba(20,25,34,.62);}
  .hncard__ex{margin:clamp(8px,.9vw,12px) 0 clamp(16px,1.9vw,26px);font-size:clamp(12px,.92vw,14.5px);line-height:1.6;color:rgba(20,25,34,.62);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
  .hncard__ph{display:block;position:relative;margin-top:auto;overflow:hidden;border-radius:14px;aspect-ratio:16/10;background:var(--card);}
  .hncard__ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.001);transition:transform .7s var(--ease);}
  .hncard:hover .hncard__ph img{transform:scale(1.045);}

  /* ===================== HOME · CTA (colored wrapper) ===================== */
  .hcta{padding:clamp(10px,1.2vw,18px) 0 0;}   /* full width; top gap = shell gap = bottom gap to footer */
  .hcta + .site-footer{margin-top:0;}         /* pair tight to the footer — only the shell gap between */
  .hcta__card{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;background:var(--yellow);color:#1B1200;border-radius:var(--radius);padding:clamp(26px,3.4vw,52px) clamp(24px,3vw,52px);}
  .hcta__title{margin:0;font-size:clamp(20px,2.4vw,38px);line-height:1.12;font-weight:300;letter-spacing:-.005em;}
  .hcta__title b{font-weight:700;}
  .hcta__sub{margin:8px 0 0;font-size:clamp(12px,.9vw,14px);color:rgba(27,18,0,.72);}

  @media (max-width:860px){
    .hnews__grid{grid-template-columns:1fr;gap:clamp(26px,5vw,36px);}
  }
  @media (max-width:560px){
    .hcta__card{padding:clamp(22px,6vw,32px);}
    .hcta .btn{width:100%;}
  }
  @media (prefers-reduced-motion:reduce){
    .hncard__ph img,.hncard::before{transition:none !important;}
  }