/* ============================================================
   ULTI STRATEGIES — one page
   Palette + type are taken from the brand sheet, nothing else.
   Sizes follow ulti-web-2.pdf (drawn at 1920px wide):
     display 154 · heading 60 · text 40 · eyebrow 30
     left inset 200 · right inset 100 · rule at 100
   ============================================================ */

@font-face{
  font-family:"Granse";
  src:url("../fonts/Granse-Regular.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Granse";
  src:url("../fonts/Granse-Bold.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --red:#E32527;
  --maroon:#47171A;
  --grey:#D9D2D3;
  --cream:#ECE7E8;
  --ink:#282828;
  --line-dark:rgba(236,231,232,.55);   /* thin lines on ink ground */

  --gut:max(64px,10.42vw);    /* left content inset (200 @1920) */
  --gut-r:max(76px,5.21vw);   /* right inset (100 @1920) — the rail lives here */
  --rail:max(30px,5.21vw);    /* vertical rule position (100 @1920) */
  --pad:clamp(64px,6vw,140px);

  --fs-xl:clamp(40px,8vw,168px);        /* 154 */
  --fs-h:clamp(22px,3.125vw,66px);      /* 60  */
  --fs-p:clamp(16px,2.083vw,44px);      /* 40  */
  --fs-eb:clamp(11px,1.5625vw,33px);    /* 30  */

  --cur:url("../img/cursor-fill.png") 7 1, auto;
  --cur-hi:url("../img/cursor-outline.png") 7 1, pointer;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:"Granse",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  background:var(--cream);
  color:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left}
h1,h2,h3,p,ol,ul{margin:0}
ul,ol{list-style:none;padding:0}
address{font-style:normal}

.u-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- custom cursor (pointer devices only) ---------- */
@media (hover:hover) and (pointer:fine){
  body{cursor:var(--cur)}
  a,button,.concern,.bar{cursor:var(--cur-hi)}
  /* the outline mark is maroon — keep the solid mark on dark ground */
  .sec--dark a,.sec--dark button,.sec--dark .bar{cursor:var(--cur)}
}

/* ---------- left rule + scroll progress ---------- */
.rule{
  position:fixed;top:0;left:var(--rail);
  width:1px;height:100vh;
  background:rgba(137,131,132,.55);   /* mid grey: reads on cream and on ink */
  z-index:40;pointer-events:none;
}
.rule__thumb{
  position:absolute;left:-1px;width:3px;height:clamp(64px,16.5vh,200px);
  background:var(--red);
  top:0;
  will-change:transform;
}

/* ---------- section rail (right) ---------- */
.rail{
  position:fixed;right:0;top:50%;
  transform:translateY(-50%);
  z-index:45;
  transition:opacity .45s ease;
}
.rail ol a,.soc__line{
  /* a generous hit box — the whole strip reacts, not only the hairline */
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  min-width:104px;
  padding:9px 12px 9px 36px;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:#8a8384;
  transition:color .35s ease;
}
.rail ol a::before{content:attr(data-n)}
.rail ol a::after,.soc__line::after{
  content:"";width:15px;height:1px;background:currentColor;
  transition:width .35s ease;
}
/* the section name stays an accessible label only — the sheet numbers the
   sections, and a visible label here would run under the page content */
.rail ol a span{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.rail ol a:hover,.rail ol a.is-on{color:var(--red)}
.rail ol a:hover::after,.rail ol a.is-on::after{width:28px}
/* step aside once the last section is reached (the logo lives there) */
.rail.is-end{opacity:0;pointer-events:none}

/* social lines under the section lines: the icon slides out beside its line */
.rail__social{margin-top:22px}
.soc{position:relative}
.soc__line{width:100%;min-height:31px}
.soc__icon{
  position:absolute;top:50%;right:52px;
  display:grid;place-items:center;
  width:30px;height:30px;
  background:var(--red);color:#fff;
  opacity:0;pointer-events:none;
  transform:translate(10px,-50%);
  transition:opacity .3s ease,transform .35s cubic-bezier(.2,.7,.2,1),background .25s ease;
}
.soc__icon svg{width:58%;height:58%}
.soc.is-open .soc__line,.soc:focus-within .soc__line{color:var(--red)}
.soc.is-open .soc__line::after{width:28px}
.soc.is-open .soc__icon{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.soc__icon:hover{background:var(--maroon)}
@media (hover:hover) and (pointer:fine){
  .soc:hover .soc__line{color:var(--red)}
  .soc:hover .soc__line::after{width:28px}
  .soc:hover .soc__icon{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
}

/* ---------- language ---------- */
.lang{
  position:fixed;top:clamp(12px,1.4vw,26px);right:12px;
  z-index:50;
  display:flex;align-items:center;gap:6px;
  font-size:clamp(15px,1.05vw,21px);font-weight:700;letter-spacing:.1em;
  color:#8a8384;
}
.lang button{
  padding:6px 4px;
  color:inherit;
  transition:color .3s ease;
}
.lang button[aria-pressed="true"]{color:var(--red)}
.lang button:hover{color:var(--red)}

html[data-lang="en"] .i18n[data-l="tr"],
html[data-lang="tr"] .i18n[data-l="en"]{display:none}

/* ---------- sections ---------- */
.sec{position:relative;padding:var(--pad) 0}
.sec--light{background:var(--cream);color:var(--ink)}
.sec--dark{background:var(--ink);color:var(--cream)}
.sec__in{
  padding-left:var(--gut);
  padding-right:var(--gut-r);
  max-width:2100px;
}
#welcome{padding-top:clamp(56px,12.4vw,260px)}

.sec__head{
  position:relative;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  margin-bottom:clamp(36px,6.6vw,138px);
}

.eyebrow{
  display:flex;align-items:center;gap:clamp(12px,1.56vw,33px);
  font-size:var(--fs-eb);
  text-transform:uppercase;
  line-height:1;
}
.eyebrow b{font-weight:400}
.eyebrow__rule{
  display:block;width:clamp(30px,5.73vw,120px);height:1px;
  background:currentColor;opacity:.55;
}

.brand{display:block;flex:0 0 auto}
.brand picture{display:block}
/* phones: the animation is drawn on a canvas laid over the still logo */
.brand__anim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.brand.has-anim picture{visibility:hidden}
.brand img{width:clamp(108px,14.75vw,310px)}
/* on wide screens the logo hangs beside the headline instead of pushing it down */
@media (min-width:901px){
  .brand{position:absolute;top:0;right:0}
}

/* ---------- display type ---------- */
.hero,.display{
  font-weight:700;
  font-size:var(--fs-xl);
  line-height:1.03;
}
.display--red{color:var(--red)}
.hero em,.display em{font-style:normal;color:var(--red)}
.ln{display:block}

/* ---------- 01 welcome ---------- */
.lede{margin-top:clamp(40px,5.7vw,120px)}
.lede__h{
  font-weight:700;
  font-size:var(--fs-h);
  line-height:1.15;
  margin-bottom:clamp(10px,1.9vw,40px);
}
.lede p{
  font-size:var(--fs-p);
  line-height:1.2;
  max-width:31em;
}

/* ---------- horizontal scrollers (02 cards, 04 team) ---------- */
.hscroll{
  margin-right:calc(var(--gut-r) * -1);
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* fade the row out before it reaches the section rail */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 104px),transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 104px),transparent 100%);
}
.hscroll::-webkit-scrollbar{display:none}
.hscroll__track{
  display:flex;
  padding-right:var(--gut-r);
  width:max-content;
}
.hscroll.is-drag{user-select:none;-webkit-user-select:none}
.hscroll.is-drag *{pointer-events:none}
/* fingers get snapping; mouse and wheel scroll freely */
@media (hover:none){
  .hscroll{scroll-snap-type:x proximity}
  .hscroll__track > li{scroll-snap-align:start}
}

/* ---------- red-line scroll bar ---------- */
.bar{
  position:relative;
  height:24px;                 /* hit area; the line itself is centred in it */
  touch-action:none;
  outline-offset:2px;
}
.bar::before{
  content:"";position:absolute;left:0;right:0;top:50%;
  height:1px;background:var(--line-dark);
}
.bar__thumb{
  position:absolute;left:0;top:50%;
  width:0;height:3px;margin-top:-1px;
  background:var(--red);
  transition:height .2s ease,margin .2s ease;
}
.bar:hover .bar__thumb,.bar.is-drag .bar__thumb{height:5px;margin-top:-2px}
.bar.is-idle{pointer-events:none}
.bar.is-idle .bar__thumb{opacity:0}

/* ---------- 02 concerns ---------- */
.concerns{margin-top:clamp(40px,7vw,148px)}
.concerns .hscroll__track{gap:clamp(12px,2.19vw,46px)}
/* the copy sits as a block in the middle of the card, lines left-aligned;
   main.js trims each block to its longest line so it can centre */
.concern{
  display:flex;align-items:center;justify-content:center;
  width:clamp(200px,18.07vw,380px);
  height:100%;
  min-height:clamp(120px,10.57vw,222px);
  padding:clamp(14px,1.4vw,30px) clamp(12px,1.25vw,26px);
  border:1px solid var(--line-dark);
  color:var(--cream);
  font-size:var(--fs-p);
  line-height:1.2;
  transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s ease;
}
.concern:hover{border-color:var(--cream);transform:translateY(-4px)}
.concern.is-on{background:var(--red);border-color:var(--red);color:#fff}

#your-side .bar{margin-top:calc(clamp(30px,5.2vw,110px) - 12px)}

/* ---------- 02 leads strip ---------- */
.leads{
  margin-top:calc(clamp(30px,5.2vw,110px) - 12px);
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,2.7vw,56px);
}
.leads__label{
  display:flex;align-items:center;gap:clamp(10px,.9vw,19px);
  font-weight:700;
  font-size:var(--fs-h);
  line-height:1.15;
}
.arrow{
  display:block;flex:0 0 auto;
  width:clamp(30px,3.49vw,74px);height:auto;aspect-ratio:67/32;
  overflow:visible;
  fill:none;stroke:var(--red);stroke-width:5;stroke-linejoin:miter;stroke-miterlimit:8;
}
.leads__tags{display:flex;flex-wrap:wrap;gap:clamp(4px,.3vw,8px)}
.tag{
  position:relative;display:block;
  padding:clamp(6px,.94vw,20px) clamp(10px,1.5vw,32px);
  font-size:var(--fs-p);
  line-height:1.2;
  border:1px solid transparent;
  transition:border-color .3s ease,color .3s ease;
}
.tag.is-lit,.leads__tags li:hover .tag{border-color:var(--red);color:#fff}

/* ---------- 03 services (accordion) ---------- */
.acc{
  margin-top:clamp(28px,4.4vw,92px);
  display:flex;flex-direction:column;
  gap:clamp(8px,1.72vw,36px);
}
.acc h3{font-weight:700;font-size:var(--fs-h);line-height:1.15}
.acc__btn{
  display:inline-block;
  transition:color .3s ease,transform .3s ease;
}
.acc__btn:hover{color:var(--red);transform:translateX(10px)}
.acc__item.is-on .acc__btn{color:var(--red)}
.acc__item.is-on .acc__btn:hover{transform:none}

.acc__panel{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1);
}
.acc__panel > div{overflow:hidden;min-height:0}
.acc__item.is-on .acc__panel{grid-template-rows:1fr}
.acc__panel p{
  font-size:var(--fs-p);
  line-height:1.2;
  max-width:28em;
  padding:clamp(8px,2vw,42px) 0 clamp(0px,.26vw,6px);
  opacity:0;
  transition:opacity .3s ease;
}
.acc__item.is-on .acc__panel p{opacity:1;transition-delay:.12s}

/* ---------- 04 team ---------- */
.team-wrap{margin-top:clamp(36px,8.8vw,184px)}
.team .hscroll__track{gap:clamp(16px,2.6vw,56px)}
.team li{width:clamp(240px,24vw,500px)}
.team figure{margin:0}
.team figcaption{
  display:flex;flex-direction:column;gap:clamp(4px,.5vw,10px);
  padding-top:clamp(12px,1.6vw,34px);
}
.team b{
  font-weight:700;line-height:1.1;
  font-size:var(--fs-h);
}
.team figcaption span{
  color:var(--red);
  font-size:var(--fs-p);
  line-height:1.2;
}
#team .bar{margin-top:calc(clamp(30px,4.2vw,90px) - 12px)}

/* portraits arrive as square cut-outs (b/w person + red block on a clear
   ground), so they sit straight on the ink — no frame */
.team picture{display:block}
.shot{
  display:block;width:100%;height:auto;
  aspect-ratio:1;
  object-fit:contain;
}

/* ---------- 05 contact ---------- */
.socials{display:flex;gap:clamp(10px,1.72vw,36px)}
.sq{
  display:grid;place-items:center;
  width:clamp(44px,4.06vw,86px);
  aspect-ratio:1;
  background:var(--ink);color:var(--cream);
  transition:background .3s ease,transform .3s ease;
}
.sq svg{width:58%;height:58%}
.sq:hover{background:var(--red);transform:translateY(-3px)}

.contact__h{
  margin-top:clamp(20px,2.4vw,50px);
  font-weight:700;
  font-size:var(--fs-h);
  line-height:1.15;
}
.contact{
  margin-top:clamp(12px,1.9vw,40px);
  display:flex;flex-direction:column;
  font-size:var(--fs-p);
  line-height:1.2;
}
.contact a{position:relative;align-self:flex-start;transition:color .28s ease}
.contact a::after{
  content:"";position:absolute;left:0;bottom:.04em;
  width:100%;height:1px;background:var(--red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.7,.2,1);
}
.contact a:hover{color:var(--red)}
.contact a:hover::after{transform:scaleX(1)}

/* ---------- reveal ---------- */
/* hidden only when scripting is on — otherwise the page never reveals itself */
html.js [data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);
}
html.js [data-reveal].is-in{opacity:1;transform:none}
html.js .hero .ln{
  opacity:0;transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);
}
html.js .hero.is-in .ln{opacity:1;transform:none}
html.js .hero.is-in .ln:nth-child(2){transition-delay:.11s}
html.js .hero.is-in .ln:nth-child(3){transition-delay:.22s}

/* ---------- focus ---------- */
:focus-visible{outline:2px solid var(--red);outline-offset:4px}

/* ---------- narrow ---------- */
@media (max-width:900px){
  :root{
    --gut:22px;--gut-r:22px;--rail:9px;--pad:clamp(64px,13vw,96px);
    --fs-xl:clamp(34px,10.4vw,62px);
    --fs-h:clamp(20px,6vw,30px);
    --fs-p:clamp(15px,4.4vw,20px);
    --fs-eb:11px;
  }
  #welcome{padding-top:clamp(56px,16vw,96px)}
  .rail{display:none}
  .brand{position:relative}
  .sec__head{align-items:center}
  .eyebrow__rule{width:30px}
  .lede p,.acc__panel p{max-width:none}
  .hscroll{
    -webkit-mask-image:none;mask-image:none;
  }
  .concern{width:clamp(200px,62vw,280px);min-height:130px;padding:18px 20px}
  .leads{flex-direction:column;align-items:flex-start}

  /* team turns into a plain vertical list — no scroll bar on phones */
  .team{overflow:visible;margin-right:0}
  .team .hscroll__track{flex-direction:column;width:auto;padding-right:0;gap:40px}
  .team li{width:auto}
  #team .bar{display:none}
}

@media (max-width:420px){
  .lang{right:8px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition-duration:.01ms!important}
  [data-reveal],.hero .ln{opacity:1;transform:none}
}