/* Bulut Auto Mechanic — bulutmechanic.com
   Values transcribed from the approved Site v3.1 reference. */

@font-face{font-family:'Barlow SC';font-style:normal;font-weight:600;font-display:swap;
  src:url(../assets/fonts/barlow-sc-600.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;
  src:url(../assets/fonts/barlow-400.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:500;font-display:swap;
  src:url(../assets/fonts/barlow-500.woff2) format('woff2')}

:root{
  --ground:#FFFFFF;
  --ground-2:#F2F5F8;
  --ground-3:#F7F8FA;
  --dark:#14395C;
  --dark-2:#0D2740;
  --ink:#1A2733;
  --muted:#5A6B7D;
  --on-dark-muted:#A9BDD0;
  --line:#DDE4EA;
  --line-dark:#2E547B;
  --accent:#C7451F;
  --accent-hover:#A83815;
  --display:'Barlow SC','Barlow Semi Condensed',sans-serif;
  --body:'Barlow',system-ui,sans-serif;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

a{color:var(--dark)}
a:hover{color:var(--dark-2)}
::selection{background:var(--dark);color:#FFF}

@keyframes pulseRing{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.9);opacity:0}
}

/* ---------- shared ---------- */

.h2{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(36px,4.2vw,58px);
  line-height:1;
  color:var(--dark);
}
.h2--onDark{color:#FFFFFF}

.btn-call{
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--accent);
  color:#FFF;
  text-decoration:none;
  border-radius:2px;
  font-family:var(--display);
  font-weight:600;
  letter-spacing:.08em;
  transition:background .2s ease;
}
.btn-call:hover{background:var(--accent-hover);color:#FFF}
.btn-call--nav{display:flex;gap:10px;padding:11px 22px;font-size:15px}
.btn-call--hero{padding:17px 34px;font-size:19px}
.btn-call--where{padding:18px 38px;font-size:20px}

.dot{position:relative;display:inline-flex;width:8px;height:8px}
.dot__core,.dot__ring{position:absolute;inset:0;border-radius:50%;background:#FFF}
.dot__ring{animation:pulseRing 1.6s ease-out infinite}

/* ---------- intro overlay ---------- */

.intro{
  position:fixed;
  inset:0;
  background:var(--dark);
  z-index:900;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:18px;
}
.intro__logo{width:min(420px,70vw);height:auto;opacity:0;transform:translateY(14px)}
.intro__line{width:min(420px,70vw);height:1px;background:var(--line-dark);position:relative;overflow:hidden}
.intro__line-fill{position:absolute;inset:0;background:#FFFFFF;transform:scaleX(0);transform-origin:left}

/* ---------- nav ---------- */

.nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:800;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 40px;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--line);
  opacity:0;
}
.nav__logo{height:40px;width:auto;display:block}
.nav__right{display:flex;align-items:center;gap:18px}
.nav__name{
  font-family:var(--body);
  font-weight:500;
  font-size:17px;
  letter-spacing:.02em;
  color:var(--dark);
}

/* ---------- 01 entry ---------- */

.entry{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-rows:auto 1fr;
  padding-top:72px;
}
.entry__inner{
  max-width:1400px;
  margin:0 auto;
  width:100%;
  padding:7vh 40px 5vh;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.entry__title{
  margin:0;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(46px,6.4vw,104px);
  line-height:.95;
  color:var(--dark);
  max-width:14ch;
  text-wrap:balance;
}
.entry__row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.entry__sub{
  margin:0;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.55;
  color:var(--muted);
  max-width:44ch;
}
.entry__cta{display:flex;align-items:center;gap:18px}
.entry__num{font-size:17px;color:var(--muted)}

.heroCols{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
  height:100%;
  min-height:46vh;
}
.hcol{overflow:hidden;position:relative}
.hcol img{
  position:absolute;
  inset:0;
  width:100%;
  height:112%;
  object-fit:cover;
  will-change:transform;
}

/* ---------- 02 what I work on ---------- */

.work{
  padding:130px 40px;
  background:var(--ground-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.work__inner{max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.work__head{display:flex;flex-direction:column;gap:12px}
.work__lede{margin:0;font-size:18px;line-height:1.6;color:var(--muted)}

.svcGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.svcCard{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:#0B0D0F;
  border:1px solid var(--line);
  box-shadow:0 4px 18px rgba(20,39,64,.10);
}
.svcCard img{width:100%;height:auto;display:block}

/* ---------- 03 who does the work ---------- */

.who{padding:150px 40px;background:var(--ground)}
.split{
  max-width:1240px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}
.who__text{display:flex;flex-direction:column;gap:22px}
.who__body{margin:0;font-size:18.5px;line-height:1.7;color:var(--ink);max-width:48ch}
.who__quote{
  display:flex;
  flex-direction:column;
  gap:14px;
  border-left:2px solid var(--accent);
  padding-left:20px;
  max-width:42ch;
}
.who__quote-text{margin:0;font-size:19px;line-height:1.65;color:var(--dark);font-weight:500}
.who__quote-name{
  font-family:var(--display);
  font-weight:600;
  font-size:17px;
  letter-spacing:.14em;
  color:var(--muted);
}
.who__media{position:relative;border-radius:8px;overflow:hidden}
.who__media img{width:100%;height:auto;display:block;transform:scale(1.15)}
.who__curtain{position:absolute;inset:0;background:var(--dark);transform-origin:top}

/* ---------- 04 how it works ---------- */

.how{padding:150px 40px;background:var(--ground-3)}
.how__inner{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:56px}

.steps{position:relative}
.steps__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.steps__track,.steps__prog{position:absolute;left:29px;top:0;bottom:0;width:2px}
.steps__track{background:var(--line)}
.steps__prog{background:var(--accent);transform:scaleY(0);transform-origin:top}

.stepRow{display:flex;gap:34px;align-items:flex-start;padding:30px 0;position:relative}
.stepDot{
  flex:none;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#FFFFFF;
  border:2px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-weight:600;
  font-size:20px;
  color:var(--muted);
  position:relative;
  z-index:1;
}
.stepText{
  margin:12px 0 0;
  font-size:clamp(19px,2.2vw,27px);
  line-height:1.45;
  color:var(--ink);
  max-width:32ch;
}

/* ---------- 05 where I work ---------- */

.where{padding:150px 40px 0;background:var(--dark)}
.where__inner{max-width:1240px;margin:0 auto;display:flex;flex-direction:column;gap:44px}

.regions{display:flex;flex-direction:column;gap:6px}
.regionRow{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(40px,6.4vw,92px);
  line-height:1.08;
  color:rgba(169,189,208,.3);
}

.where__note{margin:0;font-size:17.5px;line-height:1.65;color:var(--on-dark-muted);max-width:46ch}
.where__contact{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.where__num,.where__mail{font-size:17px;color:var(--on-dark-muted)}
.where__mail-link{color:var(--on-dark-muted);text-decoration:none}
.where__mail-link:hover{color:#FFFFFF;text-decoration:underline}

.foot{
  border-top:1px solid var(--line-dark);
  padding:22px 0 26px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.foot__logo{width:190px;height:auto;opacity:.9}
.foot__domain{font-size:17px;color:var(--on-dark-muted)}

/* ---------- mobile ---------- */

@media(max-width:900px){
  .nav{padding:14px 20px}
  .nav__right{gap:8px}
  .secpad{padding:100px 22px}
  .heroCols{grid-template-columns:1fr 1fr;height:auto}
  .heroCols .hcol{height:38vh}
  .heroCols .hc3,.heroCols .hc4{display:none}
  .svcGrid{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}

/* Below 480px the logo, the name and the call button stop fitting on one line.
   The button keeps its full size; the logo and the name give the ground. */
@media(max-width:480px){
  .nav__logo{height:30px}
  .nav__name{font-size:14px}
}
@media(max-width:340px){
  .nav__name{display:none}
}

/* ---------- reduced motion ---------- */

@media(prefers-reduced-motion:reduce){
  .intro{display:none}
  .nav{opacity:1}
  .intro__logo{opacity:1;transform:none}
  .who__media img{transform:none}
  .who__curtain{display:none}
  .steps__prog{transform:scaleY(1)}
  .regionRow{color:#FFFFFF}
  .dot__ring{animation:none;display:none}
  .btn-call{transition:none}
}

/* ---------- headline word masks (built by js/main.js) ---------- */

.wMask{display:inline-block;overflow:hidden;vertical-align:top}
.w{display:inline-block;transform:translateY(115%)}