/*
Theme Name:  SAA – Stela Ajazi Arkitekturë
Theme URI:   https://saarkitekture.com
Author:      Stela Ajazi Arkitekturë
Author URI:  https://saarkitekture.com
Description: Minimal architecture studio theme with bilingual support (Albanian / English), fullscreen hero slider, masonry portfolio grid, and mobile-first responsive layout.
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: saa
Tags:        one-page, minimal, architecture, portfolio, bilingual
*/

/* ── Swiss721 approximation: Inter 300 = Light, Inter 400 = Roman */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --w:#ffffff;
  --off:#f6f5f3;
  --ink:#0d0d0d;
  --mid:#888888;
  --faint:#bbbbbb;
  --line:rgba(13,13,13,.09);
  --nav:60px;
  --e:cubic-bezier(.76,0,.24,1);
}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--w);
  overflow-x:hidden;
  cursor:none;
}
@media(max-width:768px){body{cursor:auto}}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--w)}

/* ─────────────────────────────────────────────
   CURSOR  (desktop only)
───────────────────────────────────────────── */
#saa-dot,#saa-ring{
  position:fixed;border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
}
#saa-dot{width:4px;height:4px;background:var(--ink);transition:width .15s,height .15s}
#saa-ring{width:26px;height:26px;border:1px solid rgba(13,13,13,.2);transition:width .24s,height .24s,opacity .24s}
body.h #saa-dot{width:8px;height:8px}
body.h #saa-ring{width:42px;height:42px;opacity:.28}
@media(max-width:768px){#saa-dot,#saa-ring{display:none}}

/* ─────────────────────────────────────────────
   NAV
───────────────────────────────────────────── */
.saa-nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;z-index:300;
  border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s;
}
.saa-nav.scrolled{background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-color:var(--line)}
.saa-nav__logo img{height:26px;display:block}
.saa-nav__right{display:flex;align-items:center;gap:36px}
.saa-nav__links{display:flex;gap:32px;list-style:none}
.saa-nav__links a{
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mid);position:relative;transition:color .2s;
}
.saa-nav__links a::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:1px;background:var(--ink);
  transition:width .3s var(--e);
}
.saa-nav__links a:hover{color:var(--ink)}
.saa-nav__links a:hover::after{width:100%}
.saa-nav__lang{
  display:flex;gap:0;border:1px solid var(--line);overflow:hidden;
}
.saa-nav__lang button{
  background:none;border:none;padding:5px 9px;
  font-family:'Inter',sans-serif;font-size:.52rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mid);cursor:pointer;
  transition:background .2s,color .2s;
}
.saa-nav__lang button.active{background:var(--ink);color:var(--w)}
.saa-nav__cta{
  font-size:.56rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);padding:7px 16px;border:1px solid var(--ink);
  transition:background .25s,color .25s;
}
.saa-nav__cta:hover{background:var(--ink);color:var(--w)}

/* Hamburger */
.saa-nav__burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:4px;
}
.saa-nav__burger span{
  display:block;width:22px;height:1px;background:var(--ink);
  transition:transform .3s,opacity .3s;
}
.saa-nav__burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.saa-nav__burger.open span:nth-child(2){opacity:0}
.saa-nav__burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Mobile menu overlay */
.saa-nav__mobile{
  position:fixed;inset:0;top:var(--nav);
  background:rgba(255,255,255,.98);backdrop-filter:blur(12px);
  z-index:299;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:32px;
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.saa-nav__mobile.open{opacity:1;pointer-events:all}
.saa-nav__mobile a{
  font-size:1.4rem;font-weight:300;letter-spacing:.04em;
  color:var(--ink);transition:opacity .2s;
}
.saa-nav__mobile a:hover{opacity:.5}
.saa-nav__mobile .saa-nav__lang{margin-top:12px}

/* ─────────────────────────────────────────────
   HERO SLIDER
───────────────────────────────────────────── */
.saa-hero{position:relative;width:100vw;height:100vh;overflow:hidden;background:#111}
.saa-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s var(--e);z-index:1}
.saa-slide.on{opacity:1;z-index:2}
.saa-slide__bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.055);transition:transform 8s ease;
}
.saa-slide.on .saa-slide__bg{transform:scale(1)}
.saa-slide::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.04) 40%,rgba(0,0,0,.55) 100%);
}
.saa-slide__body{
  position:absolute;bottom:0;left:0;right:0;z-index:3;
  padding:0 52px 52px;
  display:flex;align-items:flex-end;justify-content:space-between;
}
.saa-slide__cat{
  font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(255,255,255,.45);margin-bottom:14px;
  opacity:0;transform:translateY(10px);
  transition:opacity .55s ease .1s,transform .55s ease .1s;
}
.saa-slide.on .saa-slide__cat{opacity:1;transform:none}

/* clip reveal */
.cr{overflow:hidden;line-height:1}
.cr span{
  display:block;opacity:0;transform:translateY(105%);
  transition:opacity .8s var(--e),transform .8s var(--e);
}
.saa-slide.on .cr span{opacity:1;transform:none}
.saa-slide.on .cr:nth-child(2) span{transition-delay:.13s}

.saa-slide__title{
  font-size:clamp(2.4rem,5vw,5.8rem);font-weight:300;
  line-height:.94;letter-spacing:-.02em;color:#fff;
}
.saa-slide__title i{font-style:italic}
.saa-slide__sub{overflow:hidden;margin-top:22px}
.saa-slide__sub span{
  display:block;font-size:.54rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.5);
  opacity:0;transform:translateY(100%);
  transition:opacity .6s ease .4s,transform .6s ease .4s;
}
.saa-slide.on .saa-slide__sub span{opacity:1;transform:none}

.saa-slide__num{text-align:right;flex-shrink:0}
.saa-slide__cur{font-size:1.4rem;font-weight:300;color:#fff;line-height:1}
.saa-slide__tot{font-size:.46rem;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-top:3px}

/* controls */
.saa-hero__ctrl{
  position:absolute;right:52px;top:50%;transform:translateY(-50%);
  z-index:5;display:flex;flex-direction:column;gap:5px;
}
.saa-cbtn{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);display:flex;align-items:center;
  justify-content:center;cursor:pointer;
  transition:border-color .22s,background .22s;
}
.saa-cbtn:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.1)}
.saa-cbtn svg{width:10px;stroke:#fff;fill:none;stroke-width:1.5}

/* dots */
.saa-hero__dots{
  position:absolute;left:52px;bottom:44px;z-index:5;
  display:flex;gap:6px;align-items:center;
}
.saa-dot-btn{
  width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.28);
  cursor:pointer;border:none;padding:0;
  transition:background .25s,transform .25s;
}
.saa-dot-btn.on{background:#fff;transform:scale(1.6)}

/* progress */
.saa-hero__prog{
  position:absolute;bottom:0;left:0;height:1px;
  background:rgba(255,255,255,.32);width:0;z-index:6;
  transition:width linear;
}

/* ─────────────────────────────────────────────
   META BAR
───────────────────────────────────────────── */
.saa-meta{
  background:var(--ink);height:44px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 52px;gap:16px;overflow:hidden;
}
.saa-meta__item{
  font-size:.44rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.35);white-space:nowrap;flex-shrink:0;
}
.saa-meta__item strong{color:rgba(255,255,255,.65);font-weight:400}
.saa-meta__div{width:1px;height:16px;background:rgba(255,255,255,.1);flex-shrink:0}

/* ─────────────────────────────────────────────
   SECTION BASE
───────────────────────────────────────────── */
.saa-section{padding:88px 52px}
.saa-lbl{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.saa-sh{font-size:clamp(1.5rem,2.4vw,2.5rem);font-weight:300;line-height:1.06;letter-spacing:-.01em}
.saa-sh i{font-style:italic}
.saa-divider{height:1px;background:var(--line);margin:0 52px}

/* ─────────────────────────────────────────────
   ABOUT
───────────────────────────────────────────── */
.saa-about{
  background:var(--off);
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;align-items:stretch;
}
.saa-about__img-wrap{overflow:hidden;position:relative}
.saa-about__img{
  width:100%;height:100%;object-fit:cover;
  min-height:520px;filter:brightness(.93);
  transform:scale(1.04);transition:transform 8s ease;
}
.saa-about__img-wrap:hover .saa-about__img{transform:scale(1)}
.saa-about__body{padding:72px 56px;display:flex;flex-direction:column;justify-content:center}
.saa-about__body .saa-sh{margin-bottom:20px}
.saa-bp{font-size:.74rem;line-height:1.94;color:var(--mid);margin-bottom:10px}
.saa-stats{display:flex;gap:36px;margin-top:32px;padding-top:26px;border-top:1px solid var(--line)}
.saa-stat__n{font-size:1.8rem;font-weight:300;line-height:1}
.saa-stat__l{font-size:.46rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:4px}
.saa-info{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px}
.saa-info__l{font-size:.46rem;letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
.saa-info__v{font-size:.7rem;font-weight:300}
.saa-info__v a{border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .2s}
.saa-info__v a:hover{border-color:var(--ink)}

/* ─────────────────────────────────────────────
   WORK / PORTFOLIO GRID
───────────────────────────────────────────── */
.saa-work{background:var(--w);padding-top:68px}
.saa-work__head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:44px}
.saa-work__all{
  font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mid);display:flex;align-items:center;gap:8px;
  transition:color .2s,gap .25s;
}
.saa-work__all:hover{color:var(--ink);gap:14px}
.saa-work__all::after{content:'→'}

.saa-grid{
  display:grid;grid-template-columns:repeat(12,1fr);
  grid-auto-rows:58px;gap:2px;
}
.saa-wi{position:relative;overflow:hidden;background:var(--off);cursor:pointer}
.saa-wi:nth-child(1){grid-column:1/7;grid-row:1/8}
.saa-wi:nth-child(2){grid-column:7/10;grid-row:1/5}
.saa-wi:nth-child(3){grid-column:10/13;grid-row:1/6}
.saa-wi:nth-child(4){grid-column:7/10;grid-row:5/9}
.saa-wi:nth-child(5){grid-column:10/13;grid-row:6/9}
.saa-wi:nth-child(6){grid-column:1/5;grid-row:8/12}
.saa-wi:nth-child(7){grid-column:5/9;grid-row:8/12}
.saa-wi:nth-child(8){grid-column:9/13;grid-row:9/12}
.saa-wi img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.05);transition:transform .85s var(--e);filter:brightness(.92);
}
.saa-wi:hover img{transform:scale(1);filter:brightness(.68)}
.saa-wi__ov{
  position:absolute;inset:0;opacity:0;transition:opacity .3s;
  background:linear-gradient(to top,rgba(0,0,0,.72) 0%,transparent 52%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px 14px;
}
.saa-wi:hover .saa-wi__ov{opacity:1}
.saa-wi__cat{font-size:.46rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:4px}
.saa-wi__name{font-size:.82rem;font-weight:300;color:#fff;line-height:1.18}

/* ─────────────────────────────────────────────
   SERVICES
───────────────────────────────────────────── */
.saa-services{background:var(--off)}
.saa-svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1px;background:var(--line);margin-top:42px;
}
.saa-svc{
  background:var(--off);padding:36px 30px;
  position:relative;overflow:hidden;transition:background .28s;
}
.saa-svc:hover{background:var(--w)}
.saa-svc__n{font-size:2rem;font-weight:300;color:rgba(13,13,13,.07);line-height:1;margin-bottom:14px}
.saa-svc__t{font-size:.84rem;font-weight:400;margin-bottom:9px}
.saa-svc__d{font-size:.68rem;line-height:1.9;color:var(--mid)}
.saa-svc__bar{position:absolute;bottom:0;left:0;width:0;height:1px;background:var(--ink);transition:width .4s var(--e)}
.saa-svc:hover .saa-svc__bar{width:100%}

/* ─────────────────────────────────────────────
   PROCESS
───────────────────────────────────────────── */
.saa-process{background:var(--w)}
.saa-proc-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line);margin-top:42px;
}
.saa-proc{background:var(--w);padding:34px 26px;transition:background .28s}
.saa-proc:hover{background:var(--off)}
.saa-proc__n{font-size:2rem;font-weight:300;color:rgba(13,13,13,.06);line-height:1;margin-bottom:12px}
.saa-proc__t{font-size:.78rem;font-weight:400;margin-bottom:7px}
.saa-proc__d{font-size:.65rem;line-height:1.9;color:var(--mid)}

/* ─────────────────────────────────────────────
   CONTACT
───────────────────────────────────────────── */
.saa-contact{background:var(--off)}
.saa-contact__wrap{
  display:grid;grid-template-columns:1fr 1fr;
  gap:64px;margin-top:42px;align-items:start;
}
.saa-ct__i{margin-bottom:22px}
.saa-ct__l{font-size:.46rem;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.saa-ct__v{font-size:.78rem;font-weight:300}
.saa-ct__v a{border-bottom:1px solid var(--line);padding-bottom:1px;transition:border-color .2s}
.saa-ct__v a:hover{border-color:var(--ink)}

/* Social icons */
.saa-socr{display:flex;gap:8px;margin-top:26px;align-items:center;flex-wrap:wrap}
.saa-soc{
  width:36px;height:36px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--mid);transition:border-color .22s,color .22s;flex-shrink:0;
}
.saa-soc:hover{border-color:var(--ink);color:var(--ink)}
.saa-soc svg{width:15px;height:15px;fill:currentColor}
.saa-soc--google{width:auto;padding:0 12px;gap:7px;font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;font-family:'Inter',sans-serif;font-weight:300}

/* Form */
.saa-form{display:flex;flex-direction:column}
.saa-ff{padding:14px 0;border-bottom:1px solid var(--line);position:relative}
.saa-ff label{
  display:block;font-size:.46rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px;
}
.saa-ff input,.saa-ff textarea{
  width:100%;background:none;border:none;outline:none;
  font-family:'Inter',sans-serif;font-weight:300;
  font-size:.76rem;color:var(--ink);resize:none;
}
.saa-ff input::placeholder,.saa-ff textarea::placeholder{color:rgba(13,13,13,.18)}
.saa-ff textarea{min-height:80px}
.saa-ff__ln{
  position:absolute;bottom:-1px;left:0;width:0;height:1px;
  background:var(--ink);transition:width .34s var(--e);
}
.saa-ff:focus-within .saa-ff__ln{width:100%}
.saa-fsub{
  margin-top:22px;padding:10px 26px;border:1px solid var(--ink);background:none;
  font-family:'Inter',sans-serif;font-size:.54rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink);cursor:pointer;
  position:relative;overflow:hidden;transition:color .3s;align-self:flex-start;
}
.saa-fsub::before{
  content:'';position:absolute;inset:0;background:var(--ink);
  transform:translateX(-101%);transition:transform .3s var(--e);z-index:0;
}
.saa-fsub:hover::before{transform:none}
.saa-fsub:hover{color:var(--w)}
.saa-fsub span{position:relative;z-index:1}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.saa-footer{
  background:var(--ink);padding:0 52px;height:48px;
  display:grid;grid-template-columns:auto 1fr auto auto;
  align-items:center;
}
.saa-footer__logo img{height:22px;filter:invert(1);opacity:.5}
.saa-footer__div{width:1px;height:18px;background:rgba(255,255,255,.12);margin:0 24px}
.saa-footer__links{display:flex;gap:22px;list-style:none}
.saa-footer__links a{
  font-size:.44rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.3);transition:color .2s;
}
.saa-footer__links a:hover{color:rgba(255,255,255,.7)}
.saa-footer__copy{font-size:.44rem;letter-spacing:.08em;color:rgba(255,255,255,.22)}

/* ─────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(16px);transition:opacity .75s ease,transform .75s ease}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}

/* ─────────────────────────────────────────────
   RESPONSIVE — TABLET 768–1024
───────────────────────────────────────────── */
@media(max-width:1024px){
  .saa-nav{padding:0 28px}
  .saa-section{padding:72px 28px}
  .saa-divider{margin:0 28px}
  .saa-meta{padding:0 28px}
  .saa-hero__ctrl{right:16px}
  .saa-hero__dots{left:28px}
  .saa-slide__body{padding:0 28px 44px}
  .saa-proc-grid{grid-template-columns:1fr 1fr}
  .saa-footer{padding:0 28px;grid-template-columns:auto auto;height:auto;padding-top:14px;padding-bottom:14px}
  .saa-footer__div,.saa-footer__links{display:none}
}

/* ─────────────────────────────────────────────
   RESPONSIVE — MOBILE ≤ 768
───────────────────────────────────────────── */
@media(max-width:768px){
  :root{--nav:56px}

  /* Nav mobile */
  .saa-nav{padding:0 20px}
  .saa-nav__links,.saa-nav__lang,.saa-nav__cta{display:none}
  .saa-nav__burger{display:flex}

  /* Hero */
  .saa-hero__ctrl{display:none}
  .saa-hero__dots{left:20px;bottom:36px}
  .saa-slide__body{padding:0 20px 40px;flex-direction:column;align-items:flex-start;gap:8px}
  .saa-slide__num{display:none}
  .saa-slide__title{font-size:clamp(2rem,8vw,3rem)}

  /* Meta bar */
  .saa-meta{
    height:auto;padding:10px 20px;
    flex-wrap:wrap;gap:8px;justify-content:flex-start;
  }
  .saa-meta__div{display:none}
  .saa-meta__item{font-size:.42rem}

  /* Sections */
  .saa-section{padding:56px 20px}
  .saa-divider{margin:0 20px}

  /* About */
  .saa-about{grid-template-columns:1fr}
  .saa-about__img{min-height:260px;transform:scale(1)}
  .saa-about__body{padding:40px 24px}
  .saa-info{grid-template-columns:1fr}

  /* Work grid → 2 cols */
  .saa-grid{
    grid-template-columns:1fr 1fr;
    grid-auto-rows:160px;
  }
  .saa-wi{grid-column:auto!important;grid-row:auto!important}
  .saa-work__head{flex-direction:column;align-items:flex-start;gap:14px}

  /* Services */
  .saa-svc-grid{grid-template-columns:1fr}

  /* Process */
  .saa-proc-grid{grid-template-columns:1fr}

  /* Contact */
  .saa-contact__wrap{grid-template-columns:1fr;gap:40px}

  /* Footer */
  .saa-footer{
    grid-template-columns:1fr;height:auto;
    padding:14px 20px;text-align:center;
    justify-items:center;gap:10px;
  }
  .saa-footer__div,.saa-footer__links{display:none}
}

/* ─────────────────────────────────────────────
   RESPONSIVE — SMALL MOBILE ≤ 480
───────────────────────────────────────────── */
@media(max-width:480px){
  .saa-grid{grid-template-columns:1fr;grid-auto-rows:240px}
  .saa-stats{gap:24px}
  .saa-socr{gap:6px}
}