:root{
  --bg:#0a0b0d; --bg2:#111317; --panel:#14171b; --text:#f3f2ef;
  --muted:#aaa7a0; --gold:#e9b75f; --gold2:#f7cd86; --line:rgba(255,255,255,.1);
  --max:1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,Arial,sans-serif;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(92%,var(--max));margin:auto}
.site-header{position:absolute;z-index:20;width:100%;top:0;left:0;padding:18px 0}
.nav{display:flex;align-items:center;gap:28px}
.brand{width:148px;flex:0 0 auto}
.brand img{width:100%;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.navlinks{display:flex;gap:28px;margin-left:auto;font-size:12px;letter-spacing:.08em;text-transform:uppercase;transform:translateY(-45px)}
.navlinks a{opacity:.92}
.navlinks a:hover{color:var(--gold)}
.cta{margin-left:10px;border-radius:999px;padding:14px 26px;background:linear-gradient(180deg,var(--gold2),var(--gold));color:#17120b;font-weight:700;font-size:12px;text-transform:uppercase;transform:translateY(-45px)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;color:white;font-size:25px}
.hero{min-height:700px;position:relative;display:flex;align-items:center;overflow:hidden;background-color:#07080a;background-image:
linear-gradient(
  90deg,
  rgba(5,6,8,.55) 0%,
  rgba(5,6,8,.42) 30%,
  rgba(6,7,9,.22) 48%,
  rgba(6,7,9,.06) 68%,
  transparent 85%
),
url("../images/hero-cevich-series.png");background-repeat:no-repeat;background-position:left top,right center;background-size:100% 100%,auto 100%}

.hero-inner{position:relative;z-index:2;padding-top:150px;padding-bottom:70px;width:min(92%,var(--max));margin:auto}
.hero-copy{max-width:700px}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:#d9d4ca}
h1{font-weight:300;line-height:.94;margin:0 0 20px;font-size:clamp(54px,5.4vw,82px);letter-spacing:-.035em;max-width:700px}
h1 strong{display:block;color:var(--gold2);font-weight:800}
.hero-sub{font-size:13px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:15px}
.hero-p{max-width:520px;color:#d5d1c9;font-size:16px}
.actions{display:flex;gap:18px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:14px;border:1px solid var(--gold);border-radius:999px;padding:14px 26px;font-weight:700;font-size:12px;text-transform:uppercase}
.btn.gold{background:linear-gradient(180deg,var(--gold2),var(--gold));color:#14100a;border:0}
.section{padding:38px 0}
.section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-title{font-size:14px;letter-spacing:.24em;text-transform:uppercase;font-weight:500}
.view-all{font-size:12px;color:var(--gold2);text-transform:uppercase;letter-spacing:.08em}
.series-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;aspect-ratio:1.55/1;overflow:hidden;background:#181a1d;border:1px solid rgba(255,255,255,.05)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover img{transform:scale(1.03)}
.card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.65))}
.card-copy{position:absolute;z-index:2;left:18px;bottom:16px}
.card-copy b{font-family:Georgia,serif;font-style:italic;font-size:26px;font-weight:500}
.card-copy span{display:block;font-size:9px;letter-spacing:.25em;text-transform:uppercase;margin-top:2px}
.story{padding:0;background:linear-gradient(90deg,#0c0e10,#111317)}
.story-grid{display:grid;grid-template-columns:1fr 1fr;min-height:400px}
.story-img{background:url("../images/studio-coast.jpg") center/cover no-repeat;min-height:400px}
.story-copy{padding:58px 64px;display:grid;grid-template-columns:1fr 250px;gap:44px;align-items:center}
.story h2{font-size:48px;line-height:.98;margin:8px 0 22px;font-weight:300}
.story h2 strong{display:block;color:var(--gold2);font-weight:800}
.story p{color:#c7c2b8;max-width:600px}
.values{display:grid;gap:22px}
.value{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;font-size:12px;text-transform:uppercase}
.iconwrap{width:44px;height:44px;border:1px solid rgba(255,255,255,.15);border-radius:50%;display:grid;place-items:center;color:white}
.iconwrap img{width:23px;height:23px}
.footer{
  padding:8px 0 7px;
  border-top:1px solid var(--line);
  background:#090a0c;
}
.footer-top{
  display:grid;
  grid-template-columns:120px 1fr 170px;
  align-items:center;
  gap:18px;
  min-height:74px;
}
.footer-logo{
  width:96px;
  justify-self:start;
}
.footer-tag{
  text-align:center;
  letter-spacing:.30em;
  font-size:10px;
  line-height:1;
  text-transform:uppercase;
  align-self:start;
  padding-top:14px;
}
.socials{
  position:relative;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  gap:14px;
  padding-top:32px;
}
.socials a{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
}
.socials img{
  width:18px;
  height:18px;
}
.footer-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
  margin-top:-34px;
  font-size:9px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:#bbb;
}
.copyright{
  text-align:center;
  color:#777;
  font-size:8px;
  line-height:1;
  margin-top:8px;
}
@media(max-width:1050px){
  .navlinks{display:none;transform:none}.menu-btn{display:block}.cta{display:none;transform:none}
  .hero{min-height:700px;background-position:left top,72% center;background-size:100% 100%,auto 100%}
  .series-grid{grid-template-columns:repeat(2,1fr)}
  .story-grid{grid-template-columns:1fr}
  .story-copy{grid-template-columns:1fr 240px}
}
@media(max-width:700px){
  .brand{width:110px}.hero{min-height:720px;background-position:left top,78% center;background-size:100% 100%,auto 100%}
  .hero:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2)}
  h1{font-size:50px;max-width:520px}.hero-inner{padding-top:125px}.hero-copy{max-width:520px}
  .actions{flex-direction:column;align-items:flex-start}
  .series-grid{grid-template-columns:1fr}
  .story-copy{padding:38px 24px;grid-template-columns:1fr}.story h2{font-size:40px}
  .footer-top{grid-template-columns:1fr;text-align:center}.footer-logo{margin:auto}.socials{justify-content:center}
}


.footer-nav a{
  padding:0 14px;
  position:relative;
}

.footer-nav a:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:1px;
  height:11px;
  background:rgba(233,183,95,.55);
  transform:translateY(-50%);
}

.socials::before{
  content:"Cevich Series";
  position:absolute;
  right:2px;
  top:0;
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:22px;
  font-weight:400;
  line-height:1;
  color:#f1eee8;
  transform:rotate(-4deg);
  white-space:nowrap;
  opacity:.95;
}