/*DISCLAIMER IF YOU DO NOT HAVE KNOWLEDGE OR KNOW HOW TO CODE. Please ask and AI to assist you in wiring to your store.
  There is no refunds for broken html files. if you accidentally delete, edit/break this file please contact for a replace js file.
  please include your order number and the file that is broken and or corrupted.*/

:root{
  /* ---- THEME: edit these to rebrand the whole site ---- */
  --bg:#0b0a08;          /* page background        */
  --bg-2:#14110c;        /* raised surfaces        */
  --ink:#f3ece0;         /* main text              */
  --ink-dim:#b3a892;     /* secondary text         */
  --muted:#7c7261;       /* faint text             */
  --accent:#e7b56a;      /* the gold — your accent */
  --accent-2:#d98a4e;    /* secondary accent       */

  /* ---- system (usually leave alone) ---- */
  --line:rgba(243,236,224,.12);
  --line-soft:rgba(243,236,224,.07);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Hanken Grotesk",sans-serif;
  font-weight:300;
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

/* film grain overlay */
body::after{
  content:"";
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--accent);color:#1a1206}

/* ---------- ambient light ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.glow.a{width:60vw;height:60vw;background:radial-gradient(circle,rgba(231,181,106,.22),transparent 70%);top:-20vw;right:-15vw;animation:drift1 22s ease-in-out infinite}
.glow.b{width:50vw;height:50vw;background:radial-gradient(circle,rgba(217,138,78,.16),transparent 70%);bottom:-15vw;left:-10vw;animation:drift2 28s ease-in-out infinite}
@keyframes drift1{50%{transform:translate(-6vw,8vw) scale(1.1)}}
@keyframes drift2{50%{transform:translate(8vw,-6vw) scale(1.15)}}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:28px clamp(20px,5vw,64px);
  transition:padding .5s var(--ease),background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
nav.scrolled{padding:16px clamp(20px,5vw,64px);background:rgba(11,10,8,.6);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft)}
.brand{font-family:"Fraunces",serif;font-weight:500;font-size:22px;letter-spacing:.02em;display:flex;align-items:center;gap:10px}
.brand .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:pulse 3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(.8)}}
.nav-links{display:flex;gap:40px;align-items:center}
.nav-links a{color:var(--ink-dim);text-decoration:none;font-size:14px;letter-spacing:.02em;position:relative;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--accent);transition:width .4s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.nav-cta{padding:11px 22px;border:1px solid var(--line);border-radius:100px;color:var(--ink)!important;overflow:hidden}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--ink);color:var(--bg)!important;border-color:var(--ink)}
@media(max-width:780px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- hero ---------- */
.hero{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(20px,5vw,64px)}
.eyebrow{display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:34px}
.eyebrow .rule{width:48px;height:1px;background:var(--accent);opacity:.5}
h1{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(48px,9vw,148px);line-height:.96;letter-spacing:-.02em;max-width:14ch}
h1 em{font-style:italic;font-weight:400;color:var(--accent)}
.hero-sub{margin-top:38px;font-size:clamp(16px,1.6vw,20px);color:var(--ink-dim);max-width:46ch;line-height:1.6}
.hero-actions{margin-top:46px;display:flex;gap:18px;flex-wrap:wrap;align-items:center}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:100px;font-size:15px;letter-spacing:.01em;text-decoration:none;cursor:pointer;border:none;overflow:hidden;transition:transform .4s var(--ease)}
.btn-primary{background:var(--accent);color:#1a1206;font-weight:500}
.btn-primary .shine{position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg)}
.btn-primary:hover{transform:translateY(-3px)}
.btn-primary:hover .shine{animation:shine .9s var(--ease)}
@keyframes shine{to{left:130%}}
.btn-ghost{color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink);transform:translateY(-3px)}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translate(4px,-4px)}

.scrollcue{position:absolute;bottom:34px;left:clamp(20px,5vw,64px);display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.scrollcue .bar{width:1px;height:42px;background:linear-gradient(var(--accent),transparent);position:relative;overflow:hidden}
.scrollcue .bar::after{content:"";position:absolute;top:0;left:0;width:100%;height:40%;background:var(--accent);animation:slide 2.2s ease-in-out infinite}
@keyframes slide{0%{transform:translateY(-100%)}100%{transform:translateY(250%)}}

/* ---------- entrance animations ---------- */
.reveal-line{display:block;overflow:hidden}
.reveal-line>span{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
.loaded .reveal-line>span{transform:translateY(0)}
.fade-up{opacity:0;transform:translateY(30px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.loaded .fade-up{opacity:1;transform:none}

/* ---------- marquee ---------- */
.marquee-wrap{position:relative;z-index:1;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);padding:26px 0;overflow:hidden;background:rgba(20,17,12,.4)}
.marquee{display:flex;gap:60px;white-space:nowrap;width:max-content;animation:marq 32s linear infinite}
.marquee:hover{animation-play-state:paused}
.marquee span{font-family:"Fraunces",serif;font-style:italic;font-size:26px;color:var(--ink-dim);display:flex;align-items:center;gap:60px}
.marquee span::after{content:"✦";color:var(--accent);font-style:normal;font-size:14px}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{position:relative;z-index:1;padding:clamp(80px,12vh,160px) clamp(20px,5vw,64px)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:64px;flex-wrap:wrap}
.sec-label{font-size:13px;letter-spacing:.25em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.sec-title{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.01em;max-width:18ch}
.sec-title em{font-style:italic;color:var(--accent)}

/* work grid */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line-soft);min-height:420px;padding:36px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;transition:transform .6s var(--ease),border-color .6s var(--ease)}
.card:hover{transform:translateY(-8px);border-color:var(--line)}
.card .surface{position:absolute;inset:0;z-index:-1;transition:transform 1s var(--ease),filter .6s var(--ease)}
.card:hover .surface{transform:scale(1.06)}
.c1 .surface{background:radial-gradient(120% 100% at 70% 10%,#2a2114,transparent),linear-gradient(150deg,#1c1810,#0d0b08)}
.c2 .surface{background:radial-gradient(120% 100% at 30% 20%,#1f2620,transparent),linear-gradient(150deg,#161a16,#0a0c0a)}
.c3 .surface{background:radial-gradient(120% 100% at 60% 80%,#2b1c1c,transparent),linear-gradient(150deg,#1e1513,#0c0908)}
.c4 .surface{background:radial-gradient(120% 100% at 20% 30%,#191f2a,transparent),linear-gradient(150deg,#13161c,#08090c)}
.card .surface::before{content:"";position:absolute;inset:0;opacity:.5;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:22px 22px;mask-image:radial-gradient(70% 70% at 50% 40%,#000,transparent)}
.card .tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.card h3{font-family:"Fraunces",serif;font-weight:400;font-size:30px;line-height:1.1;margin-bottom:10px}
.card p{color:var(--ink-dim);font-size:15px;max-width:34ch}
.card .num{position:absolute;top:30px;right:34px;font-family:"Fraunces",serif;font-size:15px;color:var(--muted)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;border-top:1px solid var(--line-soft);padding-top:64px}
@media(max-width:780px){.stats{grid-template-columns:repeat(2,1fr);gap:48px 24px}}
.stat .figure{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(44px,6vw,76px);line-height:1;letter-spacing:-.02em}
.stat .figure .suf{color:var(--accent)}
.stat .lbl{margin-top:12px;color:var(--ink-dim);font-size:14px;letter-spacing:.02em}

/* manifesto */
.manifesto{text-align:center;display:flex;flex-direction:column;align-items:center}
.manifesto blockquote{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(28px,4.4vw,58px);line-height:1.18;letter-spacing:-.01em;max-width:20ch}
.manifesto blockquote em{font-style:italic;color:var(--accent)}
.manifesto .who{margin-top:40px;color:var(--ink-dim);font-size:14px;letter-spacing:.06em}

/* contact / cta */
.cta{text-align:center;border-radius:28px;border:1px solid var(--line-soft);padding:clamp(56px,9vw,120px) 30px;background:linear-gradient(180deg,rgba(20,17,12,.6),transparent);position:relative;overflow:hidden}
.cta h2{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(40px,7vw,96px);line-height:1;letter-spacing:-.02em;margin-bottom:34px}
.cta h2 em{font-style:italic;color:var(--accent)}
.subscribe{display:flex;gap:10px;max-width:460px;margin:0 auto;width:100%}
.subscribe input{flex:1;background:rgba(243,236,224,.05);border:1px solid var(--line);border-radius:100px;padding:15px 22px;color:var(--ink);font-family:inherit;font-size:15px;outline:none;transition:border-color .3s}
.subscribe input:focus{border-color:var(--accent)}
.subscribe input::placeholder{color:var(--muted)}
.form-note{margin-top:16px;font-size:13px;color:var(--muted)}
@media(max-width:520px){.subscribe{flex-direction:column}.subscribe .btn{justify-content:center}}

/* footer */
footer{position:relative;z-index:1;border-top:1px solid var(--line-soft);padding:60px clamp(20px,5vw,64px) 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;color:var(--muted)}
footer .brand{color:var(--ink)}
.foot-links{display:flex;gap:36px}
.foot-links a{color:var(--ink-dim);text-decoration:none;font-size:14px;transition:color .3s}
.foot-links a:hover{color:var(--accent)}

/* respect users who prefer no motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  .reveal-line>span,.fade-up{transform:none!important;opacity:1!important}
}