*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --black:#0a0a0a;
  --rich:#111008;
  --surface:#141209;
  --card:#1a1710;
  --gold:#c9a84c;
  --gold2:#e8c97a;
  --gold3:#f5dfa0;
  --gold-dim:rgba(201,168,76,0.15);
  --gold-border:rgba(201,168,76,0.2);
  --cream:#f5f0e8;
  --cream-dim:rgba(245,240,232,0.55);
  --muted:rgba(245,240,232,0.35);
}

html{scroll-behavior:smooth}

body{
  background:var(--black);
  color:var(--cream);
  font-family:'Montserrat',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  line-height:1.6;
}

body::after{
  content:'';
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:0.028;
}

::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--black)}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px}

/* ========== NAV ========== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 60px;
  background:transparent;
  transition:background 0.6s cubic-bezier(0.4,0,0.2,1),
             padding 0.5s cubic-bezier(0.4,0,0.2,1),
             border-color 0.5s ease,
             box-shadow 0.5s ease;
}
nav.scrolled{
  background:rgba(10,10,10,0.94);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  padding:14px 60px;
  border-bottom:1px solid var(--gold-border);
  box-shadow:0 8px 40px rgba(0,0,0,0.4);
}
.nav-logo-wrap{
  display:flex;flex-direction:column;gap:0;
  position:relative;
  text-decoration:none;
  border-bottom:none;
}
.nav-logo{
  font-family:'Playfair Display',serif;font-size:20px;font-weight:500;
  letter-spacing:0.12em;color:var(--gold);
  text-decoration:none;
  display:inline-block;
}
.nav-tagline{
  font-size:6px;font-weight:300;letter-spacing:0.45em;
  text-transform:uppercase;color:var(--muted);
  position:relative;
  display:inline-block;
  text-decoration:none;
  border-bottom:none;
}
.nav-tagline::after{
  content:'';
  position:absolute;bottom:-5px;left:0;right:0;
  height:1px;
  background:linear-gradient(to right,var(--gold),transparent);
  opacity:0.6;
}
.nav-links{
  display:flex;align-items:center;gap:36px;
  list-style:none;
}
.nav-links a{
  font-size:9px;font-weight:400;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--cream-dim);
  text-decoration:none;
  position:relative;
  padding:8px 0;
}
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;width:0;height:1px;
  background:var(--gold);transition:width 0.3s ease;
}
.nav-links a:hover{color:var(--gold)}
.nav-links a:hover::after{width:100%}
.nav-btn{
  font-size:9px;font-weight:400;letter-spacing:0.25em;
  text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold);padding:10px 20px;
  text-decoration:none;
  transition:all 0.3s ease;
}
.nav-btn:hover{background:var(--gold);color:var(--black)}

.nav-ham{
  display:none;flex-direction:column;gap:5px;
  background:none;border:none;cursor:pointer;padding:8px;
}
.nav-ham span{
  display:block;width:22px;height:1.5px;background:var(--cream);
  transition:all 0.3s ease;
}
.nav-ham.open span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-ham.open span:nth-child(2){opacity:0}
.nav-ham.open span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mobile-drawer{
  display:none;position:fixed;inset:0;z-index:790;
  background:rgba(10,10,10,0.98);backdrop-filter:blur(20px);
  flex-direction:column;align-items:center;justify-content:center;gap:32px;
}
.mobile-drawer.open{display:flex}
.mobile-drawer a{
  font-family:'Playfair Display',serif;font-size:24px;
  color:var(--cream);text-decoration:none;
  transition:color 0.3s;
}
.mobile-drawer a:hover{color:var(--gold)}

/* ========== HERO ========== */
.hero{
  min-height:100vh;
  display:grid;grid-template-columns:1fr 1fr;
}
.hero-left{
  display:flex;flex-direction:column;justify-content:center;
  padding:160px 60px 100px;
}
.hero-eyebrow{
  display:flex;align-items:center;gap:16px;
  font-size:9px;font-weight:400;letter-spacing:0.5em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:36px;
}
.hero-eyebrow::before{content:'';width:40px;height:1px;background:var(--gold)}
.hero-h1{
  font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(38px,5vw,72px);line-height:1.1;
  margin-bottom:32px;
  letter-spacing:-0.02em;
  width: 100%;
  max-width: 100%;
}
.hero-h1 em{font-style:italic;color:var(--gold2)}
.h1-line{display:block}
.hero-desc{
  font-size:14px;line-height:1.7;color:var(--cream-dim);
  max-width:520px;margin-bottom:40px;
  font-weight:300;
}
.hero-ctas{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cta-primary{
  background:var(--gold);color:var(--black);
  font-size:10px;font-weight:500;letter-spacing:0.3em;
  text-transform:uppercase;padding:16px 36px;
  text-decoration:none;display:inline-block;
  transition:all 0.3s ease;
}
.cta-primary:hover{background:var(--gold2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(201,168,76,0.3)}
.cta-secondary{
  font-size:10px;font-weight:300;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--cream-dim);
  text-decoration:none;
  transition:color 0.3s;
}
.cta-secondary:hover{color:var(--gold)}

.hero-right{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,#1a1510,#0f0d08);
  display:flex;align-items:center;justify-content:center;
}
.hero-mosaic{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr 1fr;
  gap:2px;
  padding:2px;
}
.mosaic-cell{position:relative;overflow:hidden;background:var(--surface)}
.mosaic-cell:nth-child(1){grid-row:span 2}
.mosaic-cell:nth-child(4){grid-column:span 2}
.hero-brand{
  position:relative;z-index:2;text-align:center;
}
.hero-brand-name{
  font-family:'Playfair Display',serif;font-size:clamp(32px,4vw,72px);
  color:var(--gold);letter-spacing:0.15em;margin-bottom:12px;
  background:linear-gradient(90deg,var(--gold),var(--gold2),var(--gold));
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.hero-brand-tag{
  font-size:clamp(8px,1vw,12px);letter-spacing:0.6em;text-transform:uppercase;
  color:var(--muted);
}

.hero-scroll{
  position:absolute;bottom:40px;left:80px;
  display:flex;align-items:center;gap:12px;
  font-size:8px;letter-spacing:0.35em;text-transform:uppercase;color:var(--muted);
}
.scroll-bar{width:0;height:1px;background:var(--gold);transition:width 1s}
.hero:hover .scroll-bar{width:40px}

/* ========== TICKER ========== */
.ticker{
  overflow:hidden;background:var(--gold);padding:12px 0;
}
.ticker-track{display:flex;width:fit-content;animation:ticker 25s linear infinite}
.ticker-item{
  font-size:9px;font-weight:500;letter-spacing:0.3em;
  text-transform:uppercase;color:var(--black);
  white-space:nowrap;padding:0 40px;
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ========== SECTION COMMON ========== */
.section-tag{
  display:inline-flex;align-items:center;gap:14px;
  font-size:9px;font-weight:400;letter-spacing:0.5em;
  text-transform:uppercase;color:var(--gold);
  margin-bottom:20px;
}
.section-tag::before{content:'';width:28px;height:1px;background:var(--gold)}

/* ========== ABOUT ========== */
.about{
  padding:130px 60px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:100px;align-items:center;
  position:relative;
}
.about::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--gold-border),transparent);
}
.about-visual{
  position:relative;aspect-ratio:3/4;
  background:linear-gradient(145deg,var(--surface),var(--card));
  border:1px solid var(--gold-border);
}
.about-vis-inner{
  position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;flex-direction:column;gap:10px;
}
.about-icon-c{
  width:100px;height:100px;
  border:1px solid var(--gold-border);
  display:flex;align-items:center;justify-content:center;
}
.about-icon-c::before{
  content:'QC';font-family:'Playfair Display',serif;font-size:36px;
  color:var(--gold);
}
.about-year{
  font-family:'Cormorant',serif;font-size:12px;font-style:italic;
  color:var(--muted);
}
.about-corner{position:absolute;width:16px;height:16px}
.about-corner.tl{top:12px;left:12px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.about-corner.tr{top:12px;right:12px;border-top:1px solid var(--gold);border-right:1px solid var(--gold)}
.about-corner.bl{bottom:12px;left:12px;border-bottom:1px solid var(--gold);border-left:1px solid var(--gold)}
.about-corner.br{bottom:12px;right:12px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}

.about-h2{
  font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(28px,3vw,44px);line-height:1.2;
  margin-bottom:24px;
}
.about-h2 em{font-style:italic;color:var(--gold2)}
.about-p{
  font-size:13px;line-height:1.9;color:var(--cream-dim);
  margin-bottom:16px;
}
.about-divider{width:40px;height:1px;background:var(--gold);margin:28px 0}
.stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.stat{border-top:1px solid var(--gold-border);padding-top:16px}
.stat-n{font-family:'Playfair Display',serif;font-size:28px;color:var(--gold)}
.stat-l{font-size:9px;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ========== COLLECTION ========== */
.collection{background:var(--rich);padding:120px 0}
.collection-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 60px 48px;
}
.col-title{font-family:'Playfair Display',serif;font-weight:400;font-size:clamp(32px,4vw,56px);line-height:1.1}
.col-title em{font-style:italic;color:var(--gold2)}
.col-note{max-width:200px;text-align:right;font-size:11px;line-height:1.7;color:var(--muted);font-style:italic;font-family:'Cormorant',serif}

.works-grid{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:3px;padding:0 60px;
}
.work-card{position:relative;aspect-ratio:1/1.2;overflow:hidden;cursor:pointer}
.work-card:first-child{grid-row:span 2}
.work-bg{position:absolute;inset:0;transition:transform 0.6s ease}
.work-card:hover .work-bg{transform:scale(1.03)}

.w1 .work-bg{background:linear-gradient(165deg,#1e1a0c,#2e2616)}
.w2 .work-bg{background:linear-gradient(165deg,#0e1018,#181c28)}
.w3 .work-bg{background:linear-gradient(165deg,#141a14,#1e2a1e)}
.w4 .work-bg{background:linear-gradient(165deg,#18100c,#281810)}
.w5 .work-bg{background:linear-gradient(165deg,#16141a,#241e2e)}

.work-info{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(10,10,10,0.9) 0%,transparent 60%);
  display:flex;flex-direction:column;justify-content:flex-end;padding:16px;
}
.work-num{font-size:9px;letter-spacing:0.3em;color:var(--gold);font-family:'Cormorant',serif}
.work-name{font-family:'Playfair Display',serif;font-size:14px;margin:4px 0}
.work-type{font-size:7px;letter-spacing:0.2em;text-transform:uppercase;color:var(--muted)}
.work-cta{
  margin-top:10px;padding-top:8px;border-top:1px solid var(--gold-border);
  font-size:8px;letter-spacing:0.25em;text-transform:uppercase;color:var(--gold);
  display:flex;justify-content:space-between;
  opacity:0;transform:translateY(8px);transition:all 0.3s;
}
.work-card:hover .work-cta{opacity:1;transform:translateY(0)}

/* ========== PROCESS ========== */
.process{padding:120px 60px}
.process-h2{
  font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(28px,3.5vw,48px);line-height:1.2;margin-top:8px;
}
.process-h2 em{font-style:italic;color:var(--gold2)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-top:48px}
.step{
  padding:28px 24px;
  border:1px solid var(--gold-border);
  transition:all 0.3s;
}
.step:hover{border-color:var(--gold);background:rgba(201,168,76,0.03)}
.step::before{
  content:attr(data-n);position:absolute;right:16px;bottom:12px;
  font-family:'Playfair Display',serif;font-size:48px;color:rgba(201,168,76,0.08);
  line-height:1;
}
.step{position:relative}
.step-icon{font-size:20px;margin-bottom:20px;opacity:0.6}
.step-t{font-family:'Playfair Display',serif;font-size:16px;margin-bottom:10px}
.step-d{font-size:11.5px;line-height:1.7;color:var(--cream-dim)}

/* ========== QUOTE ========== */
.quote-section{
  background:var(--rich);padding:120px 60px;
  display:grid;grid-template-columns:auto 1fr;gap:60px;align-items:center;
}
.quote-mark{font-family:'Playfair Display',serif;font-size:120px;color:var(--gold);opacity:0.15;line-height:1}
.quote-text{
  font-family:'Cormorant',serif;font-weight:300;font-style:italic;
  font-size:clamp(18px,2.5vw,30px);line-height:1.5;color:var(--cream);
  margin-bottom:28px;
}
.quote-author{display:flex;align-items:center;gap:16px}
.q-line{width:28px;height:1px;background:var(--gold)}
.q-name{font-size:11px;letter-spacing:0.15em;text-transform:uppercase}
.q-role{font-size:9px;color:var(--muted);margin-top:2px}

/* ========== WHY ========== */
.why{padding:120px 60px}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:48px}
.why-h2{
  font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(28px,3vw,44px);line-height:1.2;margin-bottom:20px;
}
.why-h2 em{font-style:italic;color:var(--gold2)}
.why-p{font-size:13px;line-height:1.8;color:var(--cream-dim);margin-bottom:14px}
.why-cta-wrap{margin-top:32px}

.feature-list{display:flex;flex-direction:column}
.feature{
  padding:20px 0;border-bottom:1px solid var(--gold-border);
  display:flex;gap:16px;align-items:flex-start;
}
.feature:first-child{border-top:1px solid var(--gold-border)}
.f-icon{
  width:36px;height:36px;flex-shrink:0;
  border:1px solid var(--gold-border);display:flex;
  align-items:center;justify-content:center;font-size:16px;
}
.f-title{font-family:'Playfair Display',serif;font-size:15px;margin-bottom:4px}
.f-desc{font-size:11.5px;line-height:1.6;color:var(--cream-dim)}

/* ========== CONTACT ========== */
.contact{background:var(--rich);padding:120px 60px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;margin-top:48px}
.contact-info-h{
  font-family:'Playfair Display',serif;font-weight:400;
  font-size:clamp(26px,3vw,40px);line-height:1.2;
}
.contact-info-h em{font-style:italic;color:var(--gold2)}

.ci-detail{
  display:flex;gap:14px;margin-bottom:20px;padding-bottom:20px;
  border-bottom:1px solid var(--gold-border);
}
.ci-bullet{color:var(--gold);font-size:16px;flex-shrink:0}
.ci-label{font-size:8px;letter-spacing:0.35em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ci-val{font-family:'Cormorant',serif;font-size:14px;line-height:1.6;color:var(--cream)}

.form{display:flex;flex-direction:column;gap:18px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f-group{display:flex;flex-direction:column;gap:6px}
.f-group label{font-size:8px;letter-spacing:0.35em;text-transform:uppercase;color:var(--muted)}
.f-group input,.f-group textarea{
  background:transparent;border:none;border-bottom:1px solid var(--gold-border);
  color:var(--cream);font-family:'Montserrat',sans-serif;font-size:12px;
  padding:10px 0;outline:none;transition:border-color 0.3s;
}
.f-group input:focus,.f-group textarea:focus{border-color:var(--gold)}
.f-group textarea{resize:none;height:70px}

.custom-select{position:relative}
.custom-select select{display:none}
.cs-trigger{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--gold-border);
  cursor:pointer;color:var(--muted);font-size:12px;
}
.cs-trigger.open{border-color:var(--gold);color:var(--cream)}
.cs-arrow{width:12px;height:12px;position:relative}
.cs-arrow::before,.cs-arrow::after{
  content:'';position:absolute;width:6px;height:1px;background:var(--gold);top:50%;
}
.cs-arrow::before{right:0;transform:rotate(-40deg)}
.cs-arrow::after{left:0;transform:rotate(40deg)}
.cs-trigger.open .cs-arrow::before{transform:rotate(40deg)}
.cs-trigger.open .cs-arrow::after{transform:rotate(-40deg)}

.cs-dropdown{
  position:absolute;top:100%;left:0;right:0;
  background:rgba(14,12,8,0.98);backdrop-filter:blur(20px);
  border:1px solid var(--gold-border);z-index:100;
  max-height:0;opacity:0;overflow:hidden;transition:all 0.3s;
}
.cs-dropdown.open{max-height:200px;opacity:1}
.cs-option{
  padding:12px 16px;font-size:11px;color:var(--cream-dim);
  cursor:pointer;border-bottom:1px solid rgba(201,168,76,0.1);
  transition:all 0.2s;
}
.cs-option:hover{color:var(--gold);padding-left:20px;background:var(--gold-dim)}
.cs-option.selected{color:var(--gold)}

.f-submit{
  background:transparent;border:1px solid var(--gold);color:var(--gold);
  font-size:9px;letter-spacing:0.3em;text-transform:uppercase;
  padding:14px 32px;cursor:pointer;margin-top:8px;
  transition:all 0.3s;
}
.f-submit:hover{background:var(--gold);color:var(--black)}

/* ========== FOOTER ========== */
footer{background:var(--rich);padding:48px 60px 28px;border-top:1px solid var(--gold-border)}
.footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-brand .f-logo{
  font-family:'Playfair Display',serif;font-size:18px;
  letter-spacing:0.12em;color:var(--gold);display:block;margin-bottom:4px;
}
.footer-brand .f-sub{font-size:7px;letter-spacing:0.4em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:14px}
.footer-brand p{font-size:11px;line-height:1.7;color:var(--muted);max-width:260px}
.f-col h5{font-size:8px;letter-spacing:0.35em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.f-col ul{list-style:none}
.f-col li{font-size:11px;color:rgba(245,240,232,0.5);margin-bottom:8px;cursor:pointer;transition:color 0.2s}
.f-col li:hover{color:var(--cream)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:20px;border-top:1px solid var(--gold-border)}
.footer-copy{font-size:10px;color:var(--muted)}
.footer-social{display:flex;gap:16px}
.soc{font-size:8px;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color 0.2s}
.soc:hover{color:var(--gold)}

/* ========== BADGE ========== */
.badge{
  position:fixed;bottom:30px;right:30px;z-index:600;
  width:70px;height:70px;border-radius:50%;background:var(--gold);
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;animation:spin 15s linear infinite;
}
.badge:hover{animation-play-state:paused;transform:scale(1.05)}
.badge svg{position:absolute;inset:0;width:100%;height:100%}
.badge-center{font-family:'Playfair Display',serif;font-size:10px;color:var(--black);z-index:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== ANIMATIONS ========== */
@keyframes riseUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.reveal{opacity:0;transform:translateY(30px);transition:all 0.8s ease}
.reveal.vis{opacity:1;transform:none}
.rd1{transition-delay:0.1s}.rd2{transition-delay:0.2s}.rd3{transition-delay:0.3s}

/* ========== RESPONSIVE — WIDESCREEN ≥1800px ========== */
@media(min-width:1800px){
  nav{padding:26px 100px}
  nav.scrolled{padding:18px 100px}

  .hero-left{padding:180px 100px 120px}
  .hero-scroll{left:100px}

  .about{padding:160px 100px;gap:140px}
  .about-h2{font-size:58px}

  .collection-head{padding:0 100px;margin-bottom:80px}
  .works-grid{padding:0 100px;gap:6px}

  .process{padding:160px 100px}
  .steps{grid-template-columns:repeat(4,1fr)}
  .step{padding:56px 44px}

  .quote-section{padding:140px 100px;gap:100px}

  .why{padding:160px 100px}
  .why-grid{gap:140px}

  .contact{padding:160px 100px}
  .contact-grid{gap:130px}

  footer{padding:80px 100px 44px}
  .footer-top{gap:80px}

  .badge{width:92px;height:92px;bottom:44px;right:44px}
}

/* ========== RESPONSIVE — LARGE DESKTOP 1440–1799px ========== */
@media(min-width:1440px) and (max-width:1799px){
  nav{padding:24px 80px}
  nav.scrolled{padding:16px 80px}

  .hero-left{padding:170px 80px 110px}
  .hero-scroll{left:80px}

  .about{padding:150px 80px;gap:120px}

  .collection-head{padding:0 80px}
  .works-grid{padding:0 80px}

  .process{padding:150px 80px}

  .quote-section{padding:130px 80px;gap:100px}

  .why{padding:150px 80px}
  .why-grid{gap:130px}

  .contact{padding:150px 80px}
  .contact-grid{gap:120px}

  footer{padding:72px 80px 40px}
}

/* ========== RESPONSIVE — SMALL DESKTOP 1100–1279px ========== */
@media(min-width:1100px) and (max-width:1279px){
  nav{padding:20px 50px}
  nav.scrolled{padding:13px 50px}

  .hero-left{padding:150px 50px 90px}
  .hero-scroll{left:50px}

  .about{padding:110px 50px;gap:72px}

  .collection-head{padding:0 50px}
  .works-grid{padding:0 50px}

  .process{padding:110px 50px}
  .steps{grid-template-columns:repeat(4,1fr)}

  .quote-section{padding:100px 50px;gap:60px}

  .why{padding:110px 50px}
  .why-grid{gap:80px}

  .contact{padding:110px 50px}
  .contact-grid{gap:72px}

  footer{padding:60px 50px 32px}
}

/* ========== RESPONSIVE — TABLET LANDSCAPE 900–1099px ========== */
@media(min-width:900px) and (max-width:1099px){
  .nav-links{display:flex;gap:24px}
  .nav-ham{display:none}
  .nav-btn{display:inline-block;font-size:9px;padding:9px 18px}
  .nav-links a{font-size:9px;letter-spacing:0.2em}
  nav{padding:18px 36px}
  nav.scrolled{padding:13px 36px}

  .hero-left{padding:140px 36px 90px}
  .hero-scroll{left:36px}

  .about{padding:100px 36px;gap:60px}
  .about-h2{font-size:clamp(30px,3.2vw,44px)}

  .collection-head{padding:0 36px}
  .works-grid{
    padding:0 36px;
    grid-template-columns:1.5fr 1fr 1fr;
    gap:4px;
  }

  .process{padding:100px 36px}
  .steps{grid-template-columns:repeat(2,1fr)}

  .quote-section{padding:90px 36px;gap:50px}
  .quote-mark{font-size:130px}

  .why{padding:100px 36px}
  .why-grid{gap:60px}

  .contact{padding:100px 36px}
  .contact-grid{gap:60px}

  footer{padding:56px 36px 32px}
  .footer-top{grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}

  .badge{width:68px;height:68px;bottom:28px;right:28px}
}

/* ========== RESPONSIVE — TABLET PORTRAIT ≤900px ========== */
@media(max-width:900px){
  nav{padding:18px 28px}
  nav.scrolled{padding:14px 28px}
  .nav-links,.nav-btn{display:none}
  .nav-ham{display:flex}

  .hero{min-height:100svh;display:flex;align-items:center}
  .hero-left{
    padding:24px 28px 60px;
    justify-content:center;
    width:100%;
  }
  .hero-right{display:none}
  .hero-scroll{left:28px;bottom:24px}

  .about{padding:80px 28px;grid-template-columns:1fr;gap:0}
  .about-visual{display:none}

  .collection{padding:80px 0}
  .collection-head{padding:0 28px;flex-direction:column;align-items:flex-start;gap:14px}
  .col-note{text-align:left;max-width:100%}
  .works-grid{
    padding:0 28px;
    grid-template-columns:1fr 1fr;
    grid-template-rows:unset;
    gap:6px;
  }
  .work-card:nth-child(1){grid-row:auto;aspect-ratio:2/3}
  .work-card:nth-child(2){margin-top:0}
  .work-card:nth-child(5){margin-top:0}

  .process{padding:80px 28px}
  .steps{grid-template-columns:1fr 1fr}

  .quote-section{padding:80px 28px;grid-template-columns:1fr;gap:20px}
  .quote-mark{display:none}

  .why{padding:80px 28px}
  .why-grid{grid-template-columns:1fr;gap:56px}

  .contact{padding:80px 28px}
  .contact-grid{grid-template-columns:1fr;gap:56px}

  footer{padding:48px 28px 28px}
  .footer-top{grid-template-columns:1fr 1fr;gap:40px}

  .badge{width:64px;height:64px;bottom:24px;right:24px}
}

/* ========== RESPONSIVE — LARGE MOBILE 600–767px ========== */
@media(min-width:600px) and (max-width:767px){
  nav{padding:16px 24px}
  nav.scrolled{padding:12px 24px}

  .hero-left{
    padding:24px 24px 52px;
    justify-content:center;
    width:100%;
  }
  .hero-h1{font-size:clamp(36px,8vw,54px)}
  .hero-scroll{left:24px;bottom:24px}

  .about{padding:70px 24px}
  .stats-row{grid-template-columns:repeat(3,1fr);gap:16px}
  .stat-n{font-size:26px}

  .collection{padding:70px 0}
  .collection-head{padding:0 24px}
  .works-grid{padding:0 24px;grid-template-columns:1fr 1fr;gap:6px}
  .work-card:nth-child(1){grid-row:auto;aspect-ratio:2/3}
  .work-card:nth-child(2){margin-top:0}
  .work-card:nth-child(5){margin-top:0}

  .process{padding:70px 24px}
  .steps{grid-template-columns:1fr 1fr}

  .quote-section{padding:70px 24px}

  .why{padding:70px 24px}

  .contact{padding:70px 24px}
  .f-row{grid-template-columns:1fr 1fr}

  footer{padding:44px 24px 28px}
  .footer-top{grid-template-columns:1fr 1fr;gap:36px}
}

/* ========== RESPONSIVE — MOBILE ≤600px ========== */
@media(max-width:600px){
  nav{padding:14px 18px}
  nav.scrolled{padding:11px 18px}

  .hero-left{
    padding:20px 18px 52px;
    justify-content:center;
    width:100%;
  }
  .hero-h1{
    font-size:clamp(34px,9.5vw,48px);
    margin-bottom:20px;
  }
  .hero-eyebrow{margin-bottom:20px;font-size:8px;letter-spacing:0.35em}
  .hero-desc{font-size:13px;max-width:100%;margin-bottom:28px}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:14px}
  .cta-primary{width:100%;text-align:center;padding:16px 20px}
  .cta-secondary{text-align:center}
  .hero-scroll{left:18px;bottom:20px}

  .about{padding:56px 18px}
  .about-visual{display:none}
  .stats-row{grid-template-columns:1fr 1fr;gap:16px}
  .stat-n{font-size:24px}

  .collection{padding:56px 0}
  .collection-head{padding:0 18px}
  .works-grid{padding:0 18px;grid-template-columns:1fr;gap:8px}
  .work-card{aspect-ratio:4/3}
  .work-card:nth-child(1){aspect-ratio:4/3;grid-row:auto}
  .work-cta{opacity:1;transform:none}

  .process{padding:56px 18px}
  .steps{grid-template-columns:1fr}
  .step{padding:28px 20px}

  .quote-section{padding:56px 18px}
  .quote-text{font-size:clamp(17px,5vw,24px)}

  .why{padding:56px 18px}
  .why-grid{gap:40px;margin-top:32px}

  .contact{padding:56px 18px}
  .contact-grid{margin-top:32px}
  .f-row{grid-template-columns:1fr}
  .f-submit{width:100%;text-align:center}

  footer{padding:40px 18px 24px}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;gap:12px;text-align:center}
  .footer-social{justify-content:center}

  .badge{display:none}
}

/* ========== RESPONSIVE — SMALL MOBILE ≤400px ========== */
@media(max-width:400px){
  nav{padding:12px 14px}
  nav.scrolled{padding:10px 14px}
  .nav-logo{font-size:17px}

  .hero-left{padding:16px 14px 44px;width:100%}
  .hero-h1{font-size:clamp(30px,9vw,42px);margin-bottom:16px}
  .hero-eyebrow{font-size:7.5px;letter-spacing:0.3em;margin-bottom:16px}
  .hero-desc{font-size:12px;margin-bottom:24px}
  .cta-primary{font-size:9px;padding:14px 16px}

  .about{padding:48px 14px}
  .about-h2{font-size:clamp(24px,7.5vw,34px)}
  .about-visual{max-width:260px}
  .stats-row{gap:12px}
  .stat-n{font-size:22px}

  .collection-head{padding:0 14px}
  .works-grid{padding:0 14px;gap:6px}

  .process{padding:48px 14px}
  .step{padding:24px 16px}
  .step-t{font-size:15px}

  .quote-section{padding:48px 14px}

  .why{padding:48px 14px}

  .contact{padding:48px 14px}
  .contact-info-h{font-size:clamp(24px,7.5vw,34px)}

  footer{padding:32px 14px 20px}
  .footer-bottom{gap:10px}
}