*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f6f3ee;--bg-alt:#edebe5;--bg-card:#fff;--ink:#1a1714;--ink-mid:#4b4640;--ink-soft:#9c978f;--ink-xsoft:#ccc8c0;--amber:#b8700a;--amber-d:#8c5200;--amber-l:#f0c060;--amber-p:#fdf3e0;--display:'Outfit', sans-serif;--italic:'Outfit', sans-serif;--body:'Poppins', sans-serif;--ease:cubic-bezier(0.76,0,0.24,1)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);overflow-x:hidden;cursor:none}
.cur{position:fixed;width:8px;height:8px;background:var(--amber);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease)}
.cur-ring{position:fixed;width:34px;height:34px;border:1.5px solid var(--amber);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:left .1s var(--ease),top .1s var(--ease),width .25s,height .25s;opacity:.45}
.cur.big{width:18px;height:18px}.cur-ring.big{width:56px;height:56px;opacity:.2}
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:26px 64px;transition:background .4s,padding .4s,box-shadow .4s}
nav.scrolled{background:rgba(246,243,238,.95);backdrop-filter:blur(18px);padding:16px 64px;box-shadow:0 1px 0 var(--ink-xsoft)}
.nav-logo{font-family:var(--italic);font-size:26px;letter-spacing:.06em;color:var(--ink);text-decoration:none}
.nav-logo b{color: #ff6850;font-weight:400}
.nav-links{display:flex;gap:40px;list-style:none}
.nav-links a{font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mid);text-decoration:none;position:relative;transition:color .3s}
.nav-links a::after{content:'';position:absolute;bottom:-3px;left:0;width:0;height:1.5px;background:var(--amber);transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--amber-d)}.nav-links a:hover::after{width:100%}
.nav-back{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mid);text-decoration:none;display:flex;align-items:center;gap:8px;transition:color .3s}
.nav-back::before{content:'← ';transition:transform .3s}
.nav-back:hover{color:var(--amber-d)}.nav-back:hover::before{transform:translateX(-3px)}
.nav-cta{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:var(--ink);padding:12px 28px;text-decoration:none;cursor:none;transition:background .3s,transform .3s}
.nav-cta:hover{background:var(--amber-d);transform:translateY(-1px)}

/* HERO AREA */
.sp-hero{padding:160px 64px 100px;position:relative;overflow:hidden;min-height:45vh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--bg)}
.sp-hero-bg{position:absolute;inset:0;pointer-events:none}
.sp-ghost{position:absolute;top:-.08em;right:-.04em;font-family:var(--display);font-size:clamp(120px,18vw,280px);font-weight:900;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(26,23,20,.045);user-select:none;animation:gf 16s ease-in-out infinite alternate}
@keyframes gf{from{transform:translateY(0) rotate(-1deg)}to{transform:translateY(18px) rotate(0deg)}}
.sp-orb{position:absolute;right:5%;top:10%;width:clamp(200px,25vw,380px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 38%,#fde5a0 0%,#e8a828 45%,#c47a0a 70%,transparent 100%);opacity:.09;filter:blur(60px);animation:ob 9s ease-in-out infinite alternate}
@keyframes ob{from{transform:scale(1);opacity:.09}to{transform:scale(1.18);opacity:.14}}
.sp-breadcrumb{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:32px;position:relative;z-index:2;opacity:0;animation:ri .8s .2s var(--ease) forwards}
.sp-breadcrumb a{color:var(--amber-d);text-decoration:none;transition:opacity .3s}.sp-breadcrumb a:hover{opacity:.7}
.sp-breadcrumb span{color:var(--ink-xsoft)}
.sp-title{font-family:var(--display);font-size:clamp(52px,8.5vw,100px);font-weight:900;line-height:.92;letter-spacing:-.035em;color:var(--ink);max-width:820px;position:relative;z-index:2;opacity:0;animation:ri 1s .42s var(--ease) forwards}
.sp-title em{font-style:italic;font-weight:400;color:var(--amber)}
.sp-subtitle{margin-top:32px;max-width:560px;font-size:15px;line-height:1.88;color:var(--ink-mid);font-weight:300;position:relative;z-index:2;opacity:0;animation:ri .9s .6s var(--ease) forwards}

/* PORTFOLIO GRID */
.portfolio-section{padding:100px 64px;background:var(--bg-card)}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));gap:32px;opacity:0;animation:ri 1s .8s var(--ease) forwards}
.portfolio-card{background:var(--bg-alt);position:relative;overflow:hidden;border:1px solid rgba(246,243,238,.1);transition:transform .4s var(--ease),box-shadow .4s;text-decoration:none;display:block}
.portfolio-card:hover{transform:translateY(-8px);box-shadow:0 24px 60px rgba(26,23,20,.1)}
.portfolio-card-img{width:100%;aspect-ratio:4/3;background:#dfdbd4;position:relative;overflow:hidden;}
/* Thumbnail placeholder pseudo-element removed */
.portfolio-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.portfolio-card:hover .portfolio-card-img img{transform:scale(1.05)}
.portfolio-info{padding:32px;background:var(--bg-card);border-top:1px solid var(--ink-xsoft);position:relative}
.portfolio-tag{font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--amber-d);margin-bottom:12px;display:inline-block}
.portfolio-title{font-family:var(--display);font-size:24px;font-weight:700;color:var(--ink);line-height:1.2;margin-bottom:10px}
.portfolio-desc{font-size:13px;color:var(--ink-mid);line-height:1.7}
.portfolio-link-icon{position:absolute;bottom:32px;right:32px;width:36px;height:36px;background:var(--amber-p);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--amber-d);transition:background .3s,color .3s}
.portfolio-card:hover .portfolio-link-icon{background:var(--amber-d);color:#fff}
.portfolio-link-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* FOOTER */
footer{background:var(--ink);border-top:1px solid rgba(246,243,238,.07);padding:60px 64px 36px;color:rgba(246,243,238,.45)}
.ft-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:52px;margin-bottom:52px}
.ft-logo{font-family:var(--italic);font-size:24px;color:#f6f3ee;text-decoration:none;letter-spacing:.06em;display:block;margin-bottom:16px}
.ft-logo b{color:var(--amber-l);font-weight:400}
.ft-brand p{font-size:13px;line-height:1.75}
.ft-col h4{font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--amber-l);margin-bottom:18px}
.ft-col ul{list-style:none}.ft-col li{margin-bottom:9px}
.ft-col a{font-size:13px;color:rgba(246,243,238,.4);text-decoration:none;transition:color .3s}
.ft-col a:hover{color:#f6f3ee}
.ft-bot{border-top:1px solid rgba(246,243,238,.07);padding-top:24px;display:flex;justify-content:space-between;align-items:center}
.ft-bot p{font-size:12px;color:rgba(246,243,238,.18)}
.ft-soc{display:flex;gap:18px}
.ft-soc a{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,243,238,.28);text-decoration:none;transition:color .3s}
.ft-soc a:hover{color:var(--amber-l)}

/* CTA BAND */
.sp-cta{background:var(--ink);padding:100px 64px;text-align:center;position:relative;overflow:hidden}
.sp-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(184,112,10,.1) 0%,transparent 65%)}
.sp-cta .lbl{justify-content:center;color:var(--amber-l);display:flex;align-items:center;gap:14px;margin-bottom:18px;font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.sp-cta .lbl::before{content:'';width:32px;height:1.5px;background:var(--amber-l);display:block}
.sp-cta h2{font-family:var(--display);font-size:clamp(36px,6vw,76px);font-weight:900;line-height:.95;color:#f6f3ee;max-width:640px;margin:0 auto 20px;letter-spacing:-.03em}
.sp-cta h2 em{font-style:italic;font-weight:400;color:var(--amber-l)}
.sp-cta p{font-size:14px;color:rgba(246,243,238,.5);max-width:400px;margin:0 auto 44px;line-height:1.85}
.sp-cta-b{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}
.btn-fill-inv{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);background:var(--amber-l);padding:18px 48px;text-decoration:none;display:inline-block;transition:background .3s,transform .3s var(--ease)}
.btn-fill-inv:hover{background:var(--amber);transform:translateY(-2px)}
.btn-line-inv{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:rgba(246,243,238,.6);text-decoration:none;display:flex;align-items:center;gap:10px;border-bottom:1.5px solid rgba(246,243,238,.2);padding-bottom:3px;transition:color .3s,border-color .3s}
.btn-line-inv:hover{color:var(--amber-l);border-color:var(--amber-l)}

/* ANIMATIONS */
@keyframes ri{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

@media(max-width:1100px){
  nav{padding:20px 32px}nav.scrolled{padding:14px 32px}
  .sp-hero{padding:130px 32px 80px}
  .portfolio-section{padding:80px 32px}
  .portfolio-grid{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr))}
  .ft-top{grid-template-columns:1fr 1fr}
  footer{padding:60px 32px 32px}
}
@media(max-width:768px){
  .nav-links{display:none}
  .ft-top{grid-template-columns:1fr;gap:32px}
  .portfolio-grid{grid-template-columns:1fr}
}
.nav-toggle { display:none; background:none; border:none; color:var(--ink); cursor:none; z-index:201; }
@media(max-width:768px){
  .nav-cta { display:none !important; }
  .nav-toggle { display:block; order:2; margin-left:auto; }
  .nav-logo { order:1; z-index:202; }
  nav .nav-links {
    position:fixed; top:0; left:0; right:0; bottom:0; padding:0;
    min-width: 100vw; min-height: 100vh;
    background:rgba(246,243,238,0.98); backdrop-filter:blur(10px);
    flex-direction:column; justify-content:center; align-items:center;
    opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
    z-index:200; gap:36px; display:flex; margin:0;
  }
  nav .nav-links.active { opacity:1; pointer-events:auto; }
  nav .nav-links a { font-size:18px; }
}
@media(max-width:480px){
  html, body { overflow-x: hidden; width: 100%; position: relative; }
  .sp-title { font-size: 40px !important; line-height: 1.1; }
  .sp-ghost { font-size: 110px !important; }
  .sp-hero { padding-left: 20px !important; padding-right: 20px !important; }
  nav, nav.scrolled { padding-left: 20px !important; padding-right: 20px !important; }
}

.scroll-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 44px;
  height: 44px;
  background: var(--ink);
  color: var(--amber-l);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
  opacity: 0;
  pointer-events: none;
  z-index: 199;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background 0.3s;
  box-shadow: 0 8px 24px rgba(26,23,20,0.15);
  border: 1px solid rgba(246, 243, 238, 0.1);
  transform: translateY(20px);
}
.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.scroll-top:hover {
  background: var(--amber-d);
  color: #fff;
  transform: translateY(-3px);
}
.scroll-top svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 768px) {
  .scroll-top {
    bottom: 20px;
    right: 20px;
  }
}