/* === RESET & TOKENS === */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#F8F7F4;--bg2:#EFEDE8;--ink:#1A1916;--ink2:#6B6860;--ink3:#A8A59E;
  --accent:#C8A96A;--white:#fff;
  --f-serif:'Cormorant Garamond',Georgia,serif;
  --f-sans:'DM Sans',system-ui,sans-serif;
  --r:2px;--gap:3rem;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f-sans);background:var(--bg);color:var(--ink);overflow-x:hidden;line-height:1.55;font-size:16.8px}

/* === NAV === */
nav{position:fixed;inset:0 0 auto;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:.9rem 3rem;background:rgba(248,247,244,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(26,25,22,.07)}
.logo{font-family:var(--f-serif);font-size:1.15rem;font-weight:300;letter-spacing:.04em;color:var(--ink);text-decoration:none}
.logo b{color:var(--accent);font-weight:300}
.nav-r{display:flex;align-items:center;gap:2rem}
.nav-links{display:flex;gap:1.75rem;list-style:none}
.nav-links a{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.langs{display:flex;gap:2px}
.l-btn{background:none;border:none;font-family:var(--f-sans);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);cursor:pointer;padding:3px 7px;border-radius:3px;transition:all .2s}
.l-btn.on{background:var(--ink);color:var(--bg)}

/* === BUTTONS === */
.btn{display:inline-block;padding:13px 28px;font-family:var(--f-sans);font-size:.82rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;border-radius:var(--r);transition:all .25s}
.btn-p{background:var(--ink);color:var(--bg)}
.btn-p:hover{background:var(--accent);color:var(--ink)}
.btn-g{background:transparent;color:var(--ink2);border:1px solid rgba(26,25,22,.2)}
.btn-g:hover{border-color:var(--ink);color:var(--ink)}

/* === HERO === */
.hero{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;padding-top:62px}
.hero-l{display:flex;flex-direction:column;justify-content:center;padding:4rem var(--gap);position:relative}
.tag{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:1.5rem;display:flex;align-items:center;gap:8px}
.tag::before{content:'';width:24px;height:1px;background:var(--accent)}
h1{font-family:var(--f-serif);font-size:clamp(2.4rem,3.5vw,3.8rem);font-weight:300;line-height:1.1;margin-bottom:1.25rem}
h1 em{font-style:italic;color:var(--ink2)}
.hero-desc{font-size:1.02rem;line-height:1.85;color:var(--ink2);max-width:380px;margin-bottom:2rem;font-weight:300}
.hero-cta{display:flex;gap:.75rem;flex-wrap:wrap}
.hero-stats{position:absolute;bottom:2.5rem;left:var(--gap);display:flex;gap:2rem}
.stat-n{font-family:var(--f-serif);font-size:1.9rem;font-weight:300;line-height:1}
.stat-l{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);margin-top:3px}
.hero-r{position:relative;overflow:hidden;background:var(--bg2)}
.hero-r img{width:100%;height:100%;object-fit:cover;transition:transform 8s ease}
.hero-r:hover img{transform:scale(1.04)}
.hero-badge{position:absolute;bottom:1.75rem;right:1.75rem;background:rgba(248,247,244,.92);backdrop-filter:blur(8px);padding:.75rem 1rem;border-radius:var(--r)}
.hero-badge strong{display:block;font-weight:500;font-size:.78rem;margin-bottom:2px}
.hero-badge span{font-size:.65rem;color:var(--ink2);letter-spacing:.05em}

/* === SECTION COMMONS === */
section{padding:5rem var(--gap)}
.s-tag{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:500;margin-bottom:.5rem;display:flex;align-items:center;gap:7px}
.s-tag::before{content:'';width:18px;height:1px;background:var(--accent)}
.s-title{font-family:var(--f-serif);font-size:clamp(1.95rem,2.8vw,2.9rem);font-weight:300;line-height:1.15}
.s-title em{font-style:italic;color:var(--ink2)}
.s-head{margin-bottom:2.5rem}

/* === SERVICES === */
.services{background:var(--white)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(26,25,22,.1);border-radius:var(--r);overflow:hidden}
.svc{padding:2rem 1.5rem;border-right:1px solid rgba(26,25,22,.1);transition:background .3s;position:relative}
.svc:last-child{border-right:none}
.svc:hover{background:var(--bg)}
.svc-n{font-family:var(--f-serif);font-size:2.2rem;font-weight:300;color:rgba(26,25,22,.07);line-height:1;margin-bottom:1rem}
.svc-t{font-size:.88rem;font-weight:500;margin-bottom:.5rem}
.svc-d{font-size:.78rem;line-height:1.8;color:var(--ink2);font-weight:300}
.svc-a{position:absolute;bottom:1.5rem;right:1.5rem;color:var(--ink3);font-size:.9rem;transition:all .3s}
.svc:hover .svc-a{color:var(--accent);transform:translate(3px,-3px)}

/* === PORTFOLIO === */
.portfolio{background:var(--bg)}
.port-top{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:2.5rem;flex-wrap:wrap;gap:1rem}
.filters{display:flex;gap:5px;flex-wrap:wrap}
.f-btn{background:none;border:1px solid rgba(26,25,22,.15);font-family:var(--f-sans);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);padding:5px 13px;cursor:pointer;border-radius:var(--r);transition:all .2s}
.f-btn.on,.f-btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.projects{display:flex;flex-direction:column;gap:4.5rem}
.proj{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start}
.proj.rev{grid-template-columns:320px 1fr}
.proj.rev .viewer{order:2}
.proj.rev .info{order:1}

/* VIEWER */
.viewer{}
.main-wrap{position:relative;overflow:hidden;border-radius:var(--r);background:var(--bg2);aspect-ratio:4/3}
.main-wrap img{width:100%;height:100%;object-fit:cover;transition:opacity .3s}
.thumbs{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin-top:5px}
.thumb{aspect-ratio:1;overflow:hidden;border-radius:var(--r);cursor:pointer;border:2px solid transparent;transition:border-color .2s;background:var(--bg2)}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.thumb:hover img{transform:scale(1.08)}
.thumb.on{border-color:var(--accent)}
.thumb.sk{border-style:dashed;border-color:rgba(200,169,106,.4)}
.thumb.sk.on{border-style:solid}
.group-btns{display:flex;gap:5px;margin-top:5px;flex-wrap:wrap}
.g-btn{font-family:var(--f-sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(26,25,22,.2);background:transparent;color:var(--ink2);padding:4px 10px;border-radius:var(--r);cursor:pointer;transition:all .2s}
.g-btn.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.viewer-note{margin-top:5px;padding:5px 10px;background:var(--bg2);border-radius:var(--r);font-size:.62rem;letter-spacing:.07em;color:var(--ink3);text-transform:uppercase}
.viewer-note.live{color:var(--accent)}

/* INFO */
.info{}
.proj-cat{font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.4rem}
.proj-name{font-family:var(--f-serif);font-size:1.75rem;font-weight:300;line-height:1.2;margin-bottom:.75rem}
.proj-name em{font-style:italic;color:var(--ink2)}
.proj-desc{font-size:.82rem;line-height:1.85;color:var(--ink2);font-weight:300;margin-bottom:1.25rem}
.specs{border-top:1px solid rgba(26,25,22,.07);margin-bottom:1.25rem}
.spec{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid rgba(26,25,22,.07);font-size:.75rem}
.spec-l{color:var(--ink3)}
.shots{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:1.25rem}
.shot{font-size:.63rem;letter-spacing:.07em;background:var(--bg2);color:var(--ink2);padding:3px 9px;border-radius:var(--r)}
.proj-btns{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}

/* === SKETCH === */
.sketch-sec{background:var(--ink);color:var(--bg2)}
.sketch-sec .s-tag{color:var(--accent)}
.sketch-sec .s-tag::before{background:var(--accent)}
.sketch-sec .s-title{color:var(--bg)}
.sketch-grid{display:grid;grid-template-columns:1fr 50px 1fr;align-items:center;margin-top:2rem}
.sk-card{border-radius:var(--r);overflow:hidden;position:relative}
.sk-card img{width:100%;display:block;max-height:360px;object-fit:cover}
.sk-ph{background:#242220;border-radius:var(--r);min-height:240px;display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,.08)}
.sk-ph p{font-family:var(--f-serif);font-size:1rem;font-style:italic;color:rgba(239,237,232,.25);text-align:center;line-height:1.7}
.sk-badge{position:absolute;top:.75rem;left:.75rem;background:rgba(255,255,255,.1);backdrop-filter:blur(6px);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(239,237,232,.8);padding:4px 10px;border-radius:var(--r)}
.sk-arr{text-align:center;color:var(--accent);font-size:1.6rem;opacity:.6}
.sketch-body{margin-top:2.5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem}
.sketch-text{font-size:.85rem;line-height:1.95;color:rgba(239,237,232,.55);font-weight:300}
.sk-steps{display:flex;flex-direction:column;gap:.9rem}
.sk-step{display:flex;gap:.9rem}
.sk-n{font-family:var(--f-serif);font-size:1.3rem;font-weight:300;color:var(--accent);opacity:.55;min-width:22px}
.sk-t{font-size:.8rem;font-weight:500;color:rgba(239,237,232,.8);display:block;margin-bottom:2px}
.sk-d{font-size:.75rem;color:rgba(239,237,232,.35)}

/* === PROCESS === */
.process{background:var(--bg2)}
.proc-row{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;margin-top:2rem}
.p-step{padding-top:.9rem;position:relative}
.p-line{height:1px;background:rgba(26,25,22,.1);position:absolute;top:0;left:0;right:0}
.p-line::before{content:'';position:absolute;left:0;top:-2.5px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.p-n{font-family:var(--f-serif);font-size:2rem;font-weight:300;color:rgba(26,25,22,.1);line-height:1;margin:.5rem 0}
.p-t{font-size:.85rem;font-weight:500;margin-bottom:.35rem}
.p-d{font-size:.78rem;line-height:1.8;color:var(--ink2);font-weight:300}

/* === CONTACT === */
.contact{background:var(--white)}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:5rem}
.c-quote{font-family:var(--f-serif);font-size:1.25rem;font-style:italic;font-weight:300;line-height:1.5;margin:1rem 0 1.5rem}
.c-detail{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--ink2);margin-bottom:.6rem;font-weight:300}
.c-detail a{color:var(--ink2);text-decoration:none}
.mkts{display:flex;gap:5px;margin-top:1.5rem;flex-wrap:wrap}
.mkt{font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(26,25,22,.12);color:var(--ink2);padding:5px 11px;border-radius:var(--r)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.fg{margin-bottom:.85rem}
.fg label{display:block;font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
.fg input,.fg select,.fg textarea{width:100%;padding:9px 12px;border:1px solid rgba(26,25,22,.15);border-radius:var(--r);background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:.83rem;font-weight:300;outline:none;-webkit-appearance:none;transition:border-color .2s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--ink)}
.fg textarea{height:80px;resize:none}

/* === FOOTER === */
footer{background:var(--ink);color:var(--bg2);padding:1.5rem var(--gap);display:flex;justify-content:space-between;align-items:center}
.f-logo{font-family:var(--f-serif);font-size:.95rem;font-weight:300;letter-spacing:.04em}
.f-logo b{color:var(--accent);font-weight:300}
.f-copy{font-size:.65rem;letter-spacing:.06em;color:rgba(239,237,232,.35)}
.f-links{display:flex;gap:1.25rem}
.f-links a{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(239,237,232,.4);text-decoration:none;transition:color .2s}
.f-links a:hover{color:var(--accent)}

/* === ANIMATIONS === */
.fade{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.fade.in{opacity:1;transform:none}

/* === RESPONSIVE === */
@media(max-width:960px){
  nav{padding:.9rem 1.5rem}
  .nav-links{display:none}
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero-r{height:55vw;min-height:260px}
  .hero-l{padding:3rem 1.5rem 6rem}
  .hero-stats{left:1.5rem;bottom:1.5rem}
  section{padding:3.5rem 1.5rem}
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc:nth-child(2){border-right:none}
  .svc:nth-child(3){border-top:1px solid rgba(26,25,22,.1)}
  .proj,.proj.rev{grid-template-columns:1fr}
  .proj.rev .viewer,.proj.rev .info{order:unset}
  .thumbs{grid-template-columns:repeat(4,1fr)}
  .proc-row{grid-template-columns:1fr 1fr}
  .contact-grid{grid-template-columns:1fr;gap:2rem}
  .sketch-grid{grid-template-columns:1fr}
  .sk-arr{display:none}
  .sketch-body{grid-template-columns:1fr;gap:2rem}
  footer{flex-direction:column;gap:.75rem;text-align:center}
  --gap:1.5rem
}
@media(max-width:600px){
  .svc-grid{grid-template-columns:1fr}
  .svc{border-right:none;border-bottom:1px solid rgba(26,25,22,.1)}
  .form-row{grid-template-columns:1fr}
}


/* === READABILITY IMPROVEMENTS === */
p{
  line-height:1.75;
}

@media (max-width: 768px){

  body{
    font-size:17px;
  }

  .hero-desc,
  .proj-copy p{
    font-size:1rem;
    line-height:1.8;
  }

  .nav-links a{
    font-size:.9rem;
  }

  .btn{
    font-size:.9rem;
  }
}


/* ===== READABILITY FINAL FIX ===== */

html{
  font-size:18px;
}

body{
  font-size:18px !important;
  line-height:1.7 !important;
}

p,
.proj-copy p,
.hero-desc,
.footer p{
  font-size:1.05rem !important;
  line-height:1.85 !important;
}

.nav-links a{
  font-size:0.92rem !important;
}

.btn{
  font-size:0.95rem !important;
  padding:14px 30px !important;
}

.s-title{
  font-size:clamp(2.2rem,3vw,3.2rem) !important;
}

/* ===== BACK TO TOP BUTTON ===== */

#backToTop{
  position:fixed;
  right:24px;
  bottom:24px;
  width:52px;
  height:52px;
  border:none;
  border-radius:50%;
  background:#1A1916;
  color:white;
  font-size:24px;
  cursor:pointer;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .25s ease;
  box-shadow:0 10px 25px rgba(0,0,0,.18);
}

#backToTop.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

#backToTop:hover{
  transform:translateY(-3px);
}

@media (max-width:768px){

  html{
    font-size:19px;
  }

  #backToTop{
    width:48px;
    height:48px;
    right:18px;
    bottom:18px;
  }
}


/* ===== GLOBAL ROBOTO TYPOGRAPHY ===== */

:root{
  --f-sans:'Roboto', sans-serif !important;
  --f-serif:'Roboto', sans-serif !important;
}

*{
  font-family:'Roboto', sans-serif !important;
}

body{
  font-family:'Roboto', sans-serif !important;
  font-size:18px !important;
  line-height:1.72 !important;
  font-weight:400 !important;
}

/* Typography hierarchy */

h1,h2,h3,h4,h5,h6,
.hero-title,
.s-title{
  font-family:'Roboto', sans-serif !important;
  font-weight:700 !important;
  letter-spacing:-0.02em;
}

.hero-title{
  font-size:clamp(2.8rem,6vw,5rem) !important;
}

.s-title{
  font-size:clamp(2rem,3vw,3rem) !important;
}

p,
.hero-desc,
.proj-copy p,
.footer p{
  font-size:1.05rem !important;
  line-height:1.9 !important;
  font-weight:400 !important;
}

.nav-links a{
  font-size:.95rem !important;
  font-weight:500 !important;
}

.btn{
  font-size:.96rem !important;
  font-weight:600 !important;
  letter-spacing:.02em;
}

/* Better visual hierarchy through weight/color */

.kicker,
.stat-l,
.proj-meta{
  font-weight:500 !important;
  opacity:.8;
}

/* Back to top button */

#backToTop{
  position:fixed;
  right:24px;
  bottom:24px;
  width:54px;
  height:54px;
  border:none;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:24px;
  font-weight:700;
  z-index:99999;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:all .25s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

#backToTop.show{
  opacity:1;
  visibility:visible;
}

#backToTop:hover{
  transform:translateY(-3px);
}

@media (max-width:768px){

  body{
    font-size:19px !important;
  }

  .hero-title{
    font-size:2.7rem !important;
  }

  .s-title{
    font-size:2rem !important;
  }

  p,
  .hero-desc,
  .proj-copy p{
    font-size:1.08rem !important;
  }
}