/* ============================================================
   ZETHU EVENTS — design tokens
   Palette sampled from the brand mark: deep teal-black ground,
   antique gold, festival magenta, workshop teal.
   ============================================================ */
:root{
  --night: #0a1a1c;
  --night-2: #0f2427;
  --ink: #16211f;
  --cream: #faf3e6;
  --cream-2: #f2e8d5;
  --paper: #fffdf8;
  --gold: #c6952f;
  --gold-bright: #e8b958;
  --magenta: #a8318f;
  --teal: #2f8f86;
  --line: rgba(198,149,47,0.28);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --script: "Caveat", cursive;

  --max: 1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:inherit;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}

@media (max-width:640px){
  .wrap{padding:0 20px;}
}

/* -------------------- type -------------------- */
h1,h2,h3{
  font-family:var(--display);
  font-weight:900;
  letter-spacing:-0.01em;
  margin:0;
  line-height:1.05;
}
h2{font-size:clamp(2rem, 4.2vw, 3.1rem);}
.eyebrow{
  font-family:var(--script);
  font-size:1.7rem;
  color:var(--gold);
  display:block;
  margin-bottom:-6px;
  transform:rotate(-2deg);
  transform-origin:left center;
}
.section-head{margin-bottom:44px;}
.section-head p{
  max-width:56ch;
  color:#4b5a57;
  font-size:1.05rem;
  margin-top:14px;
}
.dark .section-head p{color:#c9d6d3;}
.label{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.72rem;
  font-weight:700;
  color:var(--gold);
}

/* -------------------- ornament -------------------- */
.ornament{display:block; opacity:.9;}
.ornament path,.ornament circle,.ornament line{
  stroke:var(--gold);
  fill:none;
}
.divider{
  display:flex; align-items:center; justify-content:center;
  padding:6px 0 40px;
}

/* -------------------- nav -------------------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,26,28,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(198,149,47,0.22);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 32px;
  max-width:var(--max); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
.brand img{width:44px; height:44px; border-radius:50%;}
.brand-name{
  font-family:var(--display); font-weight:900;
  color:var(--cream); font-size:1.15rem; letter-spacing:.01em;
}
.brand-name span{color:var(--gold-bright); display:block; font-size:.62rem; font-family:var(--body); letter-spacing:.22em; font-weight:600; margin-top:1px;}
nav.links{display:flex; gap:30px; align-items:center;}
nav.links a{
  color:#e9e2d3; text-decoration:none; font-size:.92rem; font-weight:500;
  position:relative; padding:4px 0;
}
nav.links a:hover{color:var(--gold-bright);}
.nav-cta{
  background:var(--gold); color:var(--night) !important; font-weight:700 !important;
  padding:9px 20px !important; border-radius:30px; font-size:.85rem !important;
}
.nav-cta:hover{background:var(--gold-bright); color:var(--night) !important;}
.menu-btn{display:none; background:none; border:0; color:var(--cream); font-size:1.6rem; cursor:pointer;}

@media (max-width:860px){
  nav.links{
    position:fixed; top:64px; right:0; left:0; height:100vh; background:var(--night);
    flex-direction:column; padding:36px 32px; gap:22px;
    transform:translateY(-110%); transition:transform .35s ease;
    pointer-events:none;
  }
  nav.links.open{transform:translateY(0); pointer-events:auto;}
  nav.links a{font-size:1.15rem;}
  .menu-btn{display:block;}
}

/* -------------------- hero -------------------- */
.hero{
  position:relative;
  background:linear-gradient(180deg, rgba(8,20,22,.55), rgba(8,20,22,.86) 65%, var(--night) 100%),
             url('assets/hero.jpg') center/cover no-repeat;
  color:var(--cream);
  min-height:92vh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(circle at 82% 12%, rgba(198,149,47,.22), transparent 42%),
             radial-gradient(circle at 8% 90%, rgba(168,49,143,.18), transparent 45%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2; padding:120px 32px 90px; max-width:var(--max); margin:0 auto; width:100%;}
.hero .label{color:var(--gold-bright);}
.hero h1{
  font-size:clamp(2.6rem, 6.6vw, 5.1rem);
  margin-top:16px;
  max-width:15ch;
}
.hero h1 em{
  font-style:italic; color:var(--gold-bright); font-weight:600;
}
.hero p.lede{
  margin-top:22px; font-size:1.18rem; max-width:46ch; color:#dbe4e0;
}
.hero-actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 26px; border-radius:32px;
  font-weight:700; font-size:.95rem; text-decoration:none;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--gold); color:var(--night);}
.btn-primary:hover{background:var(--gold-bright);}
.btn-ghost{border-color:rgba(250,243,230,.4); color:var(--cream);}
.btn-ghost:hover{border-color:var(--gold-bright); color:var(--gold-bright);}

.hero-stats{
  display:flex; gap:44px; margin-top:64px; flex-wrap:wrap;
}
.hero-stats div strong{
  display:block; font-family:var(--display); font-size:2rem; color:var(--gold-bright);
}
.hero-stats div span{font-size:.8rem; color:#c9d6d3; text-transform:uppercase; letter-spacing:.08em;}

/* -------------------- sections -------------------- */
section{padding:104px 0;}
@media (max-width:640px){section{padding:72px 0;}}
.dark{background:var(--night); color:var(--cream);}
.dark h2{color:var(--cream);}

.split{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
@media (max-width:860px){
  .split{grid-template-columns:1fr; gap:40px;}
  .split.reverse .split-media{order:-1;}
}
.split-media{position:relative;}
.split-media img{
  border-radius:6px; box-shadow:0 30px 60px -25px rgba(10,26,28,.45);
}
.split-media .frame-tag{
  position:absolute; left:18px; bottom:18px;
  background:rgba(10,26,28,.82); color:var(--cream);
  padding:12px 18px; border-radius:4px;
  border-left:3px solid var(--gold);
  font-size:.9rem;
}
.split-media .frame-tag strong{display:block; font-family:var(--display); font-size:1.05rem; color:var(--gold-bright);}
.split-copy p{color:#4b5a57; font-size:1.05rem;}
.dark .split-copy p{color:#c9d6d3;}

/* -------------------- vision / stat -------------------- */
.vision-stat{
  display:flex; align-items:baseline; gap:18px; margin:8px 0 26px;
}
.vision-stat .num{
  font-family:var(--display); font-weight:900; font-size:clamp(4rem,10vw,7rem);
  color:var(--gold-bright); line-height:.8;
}
.vision-stat .num-label{
  font-size:.95rem; color:#c9d6d3; max-width:14ch; line-height:1.35;
  border-left:2px solid var(--gold); padding-left:16px;
}

/* -------------------- team -------------------- */
.team-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:480px){.team-grid{grid-template-columns:1fr;}}
.team-card{
  background:var(--paper); border-radius:8px; overflow:hidden;
  box-shadow:0 18px 40px -28px rgba(20,30,28,.35);
  border:1px solid rgba(198,149,47,.18);
  transition:transform .25s ease;
}
.team-card:hover{transform:translateY(-6px);}
.team-photo{aspect-ratio:4/5; overflow:hidden;}
.team-photo img{width:100%; height:100%; object-fit:cover;}
.team-card .info{padding:18px 18px 22px;}
.team-card .info .role-label{
  font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink); margin-bottom:6px;
}
.team-card .info p{font-size:.88rem; color:#5c6b68; margin:0;}

/* -------------------- portfolio cards -------------------- */
.portfolio-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:28px;
}
@media (max-width:860px){.portfolio-grid{grid-template-columns:1fr;}}
.pf-card{
  background:var(--paper); border-radius:10px; overflow:hidden;
  border:1px solid rgba(198,149,47,.2);
  box-shadow:0 24px 50px -32px rgba(20,30,28,.4);
}
.pf-media{aspect-ratio:16/10; overflow:hidden; position:relative;}
.pf-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.pf-card:hover .pf-media img{transform:scale(1.05);}
.pf-tag{
  position:absolute; top:14px; left:14px;
  background:var(--gold); color:var(--night); font-weight:700;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border-radius:20px;
}
.pf-body{padding:26px 28px 30px;}
.pf-body h3{font-size:1.5rem; margin-bottom:12px; color:var(--night);}
.pf-body ul{margin:0; padding-left:0; list-style:none;}
.pf-body li{
  position:relative; padding-left:20px; margin-bottom:9px;
  font-size:.94rem; color:#4b5a57;
}
.pf-body li::before{
  content:""; position:absolute; left:0; top:9px;
  width:7px; height:7px; border-radius:50%; background:var(--magenta);
}
.pf-card:nth-child(2) li::before{background:var(--teal);}
.pf-card:nth-child(3) li::before{background:var(--gold);}
.pf-card:nth-child(4) li::before{background:var(--magenta);}

.pf-media-duo{display:grid; grid-template-columns:1fr 1fr; gap:2px;}
.pf-media-duo img{aspect-ratio:auto; height:100%;}

/* -------------------- lead form -------------------- */
.lead-form{
  max-width:640px; margin:44px auto 0; text-align:left;
  display:flex; flex-direction:column; gap:18px;
}
.lead-form .form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:640px){.lead-form .form-row{grid-template-columns:1fr;}}
.lead-form label{
  display:flex; flex-direction:column; gap:8px;
  font-size:.85rem; font-weight:600; color:#c9d6d3;
}
.lead-form input, .lead-form select, .lead-form textarea{
  font-family:var(--body); font-size:.98rem;
  background:rgba(250,243,230,.05); border:1px solid rgba(198,149,47,.35);
  border-radius:8px; padding:12px 14px; color:var(--cream);
  outline:none; transition:border-color .18s ease, background .18s ease;
}
.lead-form input::placeholder, .lead-form textarea::placeholder{color:#7c8d89;}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{
  border-color:var(--gold-bright); background:rgba(250,243,230,.09);
}
.lead-form select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e8b958'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px;}
.lead-form textarea{resize:vertical; min-height:100px;}
.lead-form .btn{align-self:flex-start; border:0;}
.form-note{font-size:.9rem; color:var(--gold-bright); min-height:1.2em; margin:0;}

/* -------------------- contact / footer -------------------- */
.contact{
  position:relative; text-align:center; overflow:hidden;
}
.contact .wrap{position:relative; z-index:2;}
.contact h2{color:var(--cream);}
.contact p.lede{color:#c9d6d3; max-width:48ch; margin:16px auto 0; font-size:1.08rem;}
.contact-links{
  display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:40px;
}
.contact-links a{
  display:flex; align-items:center; gap:10px;
  background:rgba(250,243,230,.06); border:1px solid rgba(198,149,47,.35);
  padding:16px 26px; border-radius:10px; text-decoration:none; color:var(--cream);
  font-weight:600; transition:border-color .2s ease, background .2s ease;
}
.contact-links a:hover{border-color:var(--gold-bright); background:rgba(198,149,47,.12);}
.contact-links .ico{color:var(--gold-bright); font-size:1.1rem;}

footer{
  background:var(--night); color:#8fa19d; padding:34px 0;
  border-top:1px solid rgba(198,149,47,.18);
}
.foot-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  font-size:.82rem;
}
.foot-brand{display:flex; align-items:center; gap:10px;}
.foot-brand img{width:26px; height:26px; border-radius:50%;}

/* -------------------- reveal animation -------------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .pf-card:hover .pf-media img{transform:none;}
}