/* =========================================================
   Bingol Construction Ltd, styles.css
   Dark industrial theme, mobile-first, no dependencies.
   ========================================================= */

:root{
  --base:#161616;
  --panel:#1F1F1F;
  --panel-2:#252525;
  --line:#2E2E2E;
  --line-soft:#272727;
  --text:#F2F2F2;
  --text-dim:#B9B9B9;
  --text-mute:#8E8E8E;
  --blue:#1F7AE0;
  --blue-soft:#4C99EC;
  --amber:#F5A623;
  --wa:#25D366;
  --radius:4px;
  --radius-lg:6px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --wrap:1180px;
  --head-h:70px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--base);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:1rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,.step__num,.brand__name{
  font-family:"Oswald","Archivo",Impact,"Segoe UI",sans-serif;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.12;
  margin:0;
  text-wrap:balance;
}

h1{font-size:clamp(2.1rem,6.2vw,4rem);text-transform:uppercase}
h2{font-size:clamp(1.7rem,4.2vw,2.75rem);text-transform:uppercase}
h3{font-size:1.125rem;letter-spacing:.02em}

p{margin:0 0 1rem}
p:last-child{margin-bottom:0}
img{max-width:100%;display:block}
[hidden]{display:none !important}   /* keeps failed images out of the way */
address{font-style:normal}

a{color:var(--blue-soft);text-decoration:none}
a:hover{color:#7CB6F3;text-decoration:underline}

:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:3px;
  border-radius:2px;
}

.muted{color:var(--text-mute)}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.wrap--narrow{max-width:820px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--amber);color:#161616;font-weight:600;
  padding:.7rem 1.1rem;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0}

.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-soft);margin:0 0 .6rem;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.35rem;border-radius:var(--radius);
  font-weight:600;font-size:.95rem;line-height:1.2;
  border:1px solid transparent;cursor:pointer;
  transition:transform .15s var(--ease), background-color .2s, box-shadow .2s;
  text-decoration:none;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn .ico{width:20px;height:20px;flex:none}
.btn--sm{padding:.6rem 1rem;font-size:.85rem}
.btn--wa{background:var(--wa);color:#0B2E18}
.btn--wa:hover{background:#31E074;color:#0B2E18}
.btn--amber{background:var(--amber);color:#211502}
.btn--amber:hover{background:#FFB53C;color:#211502}
.btn--ghost{border-color:var(--line);color:var(--text);background:transparent}
.btn--ghost:hover{border-color:var(--blue);color:#fff}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(22,22,22,.82);
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s, background-color .25s;
}
.site-header.is-stuck{box-shadow:0 10px 30px rgba(0,0,0,.45);background:rgba(18,18,18,.94)}

.header__inner{
  min-height:var(--head-h);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}

.brand{display:flex;align-items:center;gap:.7rem;color:var(--text)}
.brand:hover{text-decoration:none;color:#fff}
.brand__mark{width:38px;height:41px;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.1}
.brand__name{
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;
}
.brand__sub{font-size:.66rem;color:var(--text-mute);letter-spacing:.09em;text-transform:uppercase}

.nav-toggle{
  width:44px;height:44px;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius);
  color:var(--text);cursor:pointer;
}
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after{
  content:"";display:block;width:20px;height:2px;background:currentColor;
  transition:transform .22s var(--ease), opacity .18s;
}
.nav-toggle__bars::before{transform:translateY(-6px)}
.nav-toggle__bars::after{transform:translateY(4px)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{transform:rotate(-45deg) translateY(1px)}

.nav{
  position:absolute;left:0;right:0;top:100%;
  background:#141414;border-bottom:1px solid var(--line);
  padding:0 20px;
  display:grid;gap:0;
  max-height:0;overflow:hidden;visibility:hidden;
  transition:max-height .3s var(--ease), padding .3s var(--ease), visibility .3s;
}
.nav.is-open{max-height:26rem;visibility:visible;padding:.75rem 20px 1.25rem}
.nav__list{list-style:none;margin:0 0 .75rem;padding:0;display:grid}
.nav__list a{
  display:block;padding:.75rem .25rem;color:var(--text);
  font-weight:500;border-bottom:1px solid var(--line-soft);
}
.nav__list a:hover{color:var(--blue-soft);text-decoration:none}
.header__cta{width:100%}

/* ---------- Hero ---------- */
.hero{
  position:relative;isolation:isolate;
  padding:clamp(3.5rem,11vw,7.5rem) 0 clamp(2.5rem,7vw,4.5rem);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero__media{
  position:absolute;inset:0;z-index:-1;
  background-color:#111;
  background-image:url("images/hero.jpg");
  background-size:cover;
  background-position:60% 55%;
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to right, rgba(14,14,14,.93) 0%, rgba(16,16,16,.78) 42%, rgba(18,18,18,.30) 100%),
    linear-gradient(to bottom, rgba(22,22,22,.45), rgba(22,22,22,.72));
}
.hero__inner{position:relative;max-width:var(--wrap)}
.hero__title{margin-bottom:1.1rem;max-width:16ch}
.hero__title::after{
  content:"";display:block;width:74px;height:4px;background:var(--amber);
  margin-top:1.15rem;border-radius:2px;
}
.hero__lead{max-width:60ch;color:#DCDCDC;font-size:clamp(1rem,1.9vw,1.115rem)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.9rem 0 1.6rem}

.trust-strip{
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;
  margin:0;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-dim);
  font-weight:500;
}
.trust-strip span{display:inline-flex;align-items:center;gap:.55rem}
.trust-strip span::before{
  content:"";width:7px;height:7px;background:var(--amber);
  transform:rotate(45deg);flex:none;
}

/* ---------- Section shell ---------- */
.section{padding:clamp(3rem,8vw,5.5rem) 0;border-bottom:1px solid var(--line-soft)}
.section--panel{background:var(--panel)}
.section__head{max-width:62ch;margin-bottom:clamp(1.8rem,4vw,2.75rem)}
.section__head h2{margin-bottom:.9rem}
.section__lead{color:var(--text-dim)}

/* ---------- Image placeholders (shown if a photo is missing) ---------- */
.ph{
  position:relative;margin:0;overflow:hidden;
  background-color:#1B1B1B;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.035) 25%, transparent 25%, transparent 50%,
                    rgba(255,255,255,.035) 50%, rgba(255,255,255,.035) 75%, transparent 75%);
  background-size:14px 14px;
  border:1px solid var(--line);
}
.ph::before{
  content:"";position:absolute;left:var(--ph-x,50%);top:50%;
  width:46px;height:46px;transform:translate(-50%,-140%);
  opacity:.55;
  background:no-repeat center/contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F7AE0' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='8.5' cy='10' r='1.8'/%3E%3Cpath d='m4 17 5-4.5 3.5 3 3-2.5L20 17'/%3E%3C/svg%3E");
}
.ph::after{
  content:attr(data-label);
  position:absolute;left:var(--ph-x,50%);top:50%;
  transform:translate(-50%,.5rem);
  width:max-content;max-width:90%;text-align:center;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);
}
.ph > img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;
}
.ph--alt{background-color:#202020}

/* ---------- Before / after slider ---------- */
.ba{max-width:980px}
.ba__stage{
  position:relative;
  aspect-ratio:16/10;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow);
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  background:#1B1B1B;
  cursor:ew-resize;
}
.ba__pane{position:absolute;inset:0;border:0;border-radius:0;--ph-x:25%}
.ba__pane.ph--alt{--ph-x:75%}
.ba__clip{
  position:absolute;inset:0;
  /* clip-path makes this a stacking context, so it must outrank the
     z-index:1 on the before pane's <img> or it never becomes visible. */
  z-index:2;
  clip-path:inset(0 0 0 var(--pos,50%));
  will-change:clip-path;
}
.ba__tag{
  position:absolute;bottom:14px;z-index:3;
  padding:.35rem .7rem;border-radius:2px;
  background:rgba(12,12,12,.78);border:1px solid rgba(255,255,255,.16);
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text);
}
.ba__tag--before{left:14px}
.ba__tag--after{right:14px}

.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);
  width:2px;margin-left:-1px;z-index:4;
  background:#fff;
  cursor:ew-resize;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}
.ba__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--blue);color:#fff;
  border:2px solid #fff;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
}
.ba__grip svg{width:26px;height:26px}
.ba__handle:focus-visible{outline:none}
.ba__handle:focus-visible .ba__grip{
  outline:3px solid var(--amber);outline-offset:3px;
}

.ba__note{
  margin:.85rem 0 0;font-size:.8rem;color:var(--text-mute);
  letter-spacing:.02em;
}
.ba__tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.ba__thumb{
  width:84px;height:58px;padding:0;overflow:hidden;
  border:1px solid var(--line);border-radius:3px;background:#1B1B1B;
  cursor:pointer;opacity:.6;transition:opacity .2s, border-color .2s;
}
.ba__thumb img{width:100%;height:100%;object-fit:cover}
.ba__thumb:hover{opacity:.9}
.ba__thumb[aria-pressed="true"]{opacity:1;border-color:var(--blue)}

/* ---------- Service cards ---------- */
.cards{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1rem;
  grid-template-columns:1fr;
}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem 1.4rem;
  transition:border-color .22s, transform .22s var(--ease), background-color .22s;
}
.section--panel .card{background:#242424}
.card:hover{border-color:#3C6FA8;transform:translateY(-3px)}
.card__icon{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:1rem;
  color:var(--blue-soft);
  background:rgba(31,122,224,.1);
  border:1px solid rgba(31,122,224,.28);
  border-radius:3px;
}
.card__icon svg{width:30px;height:30px}
.card h3{margin-bottom:.55rem}
.card p{color:var(--text-dim);font-size:.94rem;margin:0}

/* ---------- Gallery ---------- */
.gallery{
  list-style:none;margin:0;padding:0;
  display:grid;gap:1rem;grid-template-columns:1fr;
}
.shot{
  aspect-ratio:4/3;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
}
.shot > img{
  transition:transform .5s var(--ease), filter .4s;
  filter:saturate(.94);
}
.shot:hover > img{transform:scale(1.06);filter:saturate(1.05)}

/* ---------- About ---------- */
.about{display:grid;gap:2.4rem}
.about__text h2{margin-bottom:1.1rem}
.about__text p{color:var(--text-dim)}
.whys{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.whys li{
  display:flex;gap:1rem;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.2rem;
}
.whys__icon{
  flex:none;width:40px;height:40px;display:grid;place-items:center;
  color:var(--amber);background:rgba(245,166,35,.09);
  border:1px solid rgba(245,166,35,.26);border-radius:3px;
}
.whys__icon svg{width:23px;height:23px}
.whys h3{font-size:1rem;margin-bottom:.3rem}
.whys p{font-size:.9rem;color:var(--text-dim);margin:0}

/* ---------- Steps ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1rem;counter-reset:step}
.step{
  position:relative;
  background:#242424;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.4rem 1.5rem;
}
.step__num{
  display:block;font-size:2rem;line-height:1;color:var(--blue);
  font-family:"Oswald",sans-serif;font-weight:700;margin-bottom:.6rem;
}
.step h3{margin-bottom:.45rem}
.step p{color:var(--text-dim);font-size:.94rem;margin:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;
  padding:1.1rem 2.5rem 1.1rem 0;position:relative;
  font-weight:600;font-size:1.02rem;color:var(--text);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";position:absolute;right:.35rem;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:2px solid var(--blue-soft);border-bottom:2px solid var(--blue-soft);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(-135deg);margin-top:-3px}
.faq__item summary:hover{color:var(--blue-soft)}
.faq__item p{padding:0 0 1.2rem;color:var(--text-dim);max-width:70ch;margin:0}

/* ---------- Contact ---------- */
.contact{display:grid;gap:1.6rem}
.contact__details{
  background:#242424;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem 1.4rem;
}
.contact__name{margin-bottom:1.2rem;font-size:1.25rem;text-transform:uppercase}
.contact__list{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.05rem}
.contact__list li{display:flex;gap:.95rem;align-items:flex-start}
.contact__ico{
  flex:none;width:36px;height:36px;display:grid;place-items:center;
  color:var(--blue-soft);background:rgba(31,122,224,.1);
  border:1px solid rgba(31,122,224,.26);border-radius:3px;
}
.contact__ico svg{width:21px;height:21px}
.contact__label{
  display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:.15rem;
}
.contact__hours{margin:0;font-size:.95rem}
.contact__wa{width:100%}
.contact__map{
  border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;min-height:320px;background:#1B1B1B;
}
.contact__map iframe{width:100%;height:100%;min-height:320px;border:0;display:block;filter:grayscale(.3) contrast(1.05)}

/* ---------- Footer ---------- */
.site-footer{background:#111;border-top:1px solid var(--line);padding-top:2.6rem}
.footer__inner{display:grid;gap:1.8rem;padding-bottom:2rem}
.footer__brand{display:flex;gap:1rem;align-items:flex-start}
.footer__logo{width:46px;height:50px;flex:none}
.footer__name{
  font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.05em;
  font-size:1rem;margin:0 0 .3rem;
}
.footer__address{color:var(--text-dim);font-size:.92rem;margin-bottom:.35rem}
.footer__contact{font-size:.92rem;margin:0;color:var(--text-mute)}
.footer__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.footer__nav a{color:var(--text-dim);font-size:.92rem}
.footer__nav a:hover{color:var(--blue-soft)}
.footer__credit{
  border-top:1px solid var(--line);padding-top:1.2rem;padding-bottom:1.4rem;
  font-size:.85rem;color:var(--text-mute);
}
.footer__credit p{margin:0}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed;right:16px;bottom:16px;z-index:90;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--wa);color:#0B2E18;
  box-shadow:0 6px 20px rgba(0,0,0,.5);
  transition:transform .18s var(--ease), background-color .2s;
}
.wa-float:hover{background:#31E074;transform:scale(1.06)}
.wa-float svg{width:30px;height:30px}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

/* =========================================================
   Breakpoints
   ========================================================= */
@media (min-width:600px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .whys{grid-template-columns:repeat(2,1fr)}
  .contact__wa{width:auto}
  .footer__inner{grid-template-columns:1fr auto;align-items:start}
}

@media (min-width:900px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .about{grid-template-columns:1.05fr .95fr;gap:3rem;align-items:start}
  .whys{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr 1fr;align-items:stretch}
  .contact__map{min-height:100%}
}

@media (min-width:1024px){
  .nav-toggle{display:none}
  .nav{
    position:static;display:flex;align-items:center;gap:1.75rem;
    max-height:none;visibility:visible;overflow:visible;
    background:transparent;border:0;padding:0;
  }
  .nav__list{display:flex;gap:1.6rem;margin:0}
  .nav__list a{border:0;padding:.35rem 0;font-size:.95rem;position:relative}
  .nav__list a::after{
    content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
    background:var(--blue);transition:right .25s var(--ease);
  }
  .nav__list a:hover::after{right:0}
  .header__cta{width:auto}
  .cards{grid-template-columns:repeat(4,1fr)}
  .wa-float{right:24px;bottom:24px}
}

@media (min-width:1280px){
  .cards{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.wa-float,.ba__handle,.contact__map{display:none !important}
  body{background:#fff;color:#000}
}