/* ===================================================================
   ELJA Studios — shared stylesheet
   =================================================================== */

:root{
  --sage:#a8c9b3;
  --sage-deep:#8ab29a;
  --ink:#0d0d0c;
  --ink-70: rgba(13,13,12,0.72);
  --ink-45: rgba(13,13,12,0.45);
  --paper:#ffffff;
  --line: rgba(13,13,12,0.14);
  --line-on-sage: rgba(13,13,12,0.22);

  --logo-font: 'Anton', 'Archivo', sans-serif;
  --display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --wrap: 1360px;
  --pad: 32px;
}

@media (min-width: 900px){ :root{ --pad: 64px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ height:100%; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
main{ flex:1 0 auto; }
.site-footer{ flex-shrink:0; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; border:none; background:none; cursor:pointer; color:inherit; }
h1,h2,h3,p{ margin:0; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--ink); color:var(--paper);
  padding:12px 20px; z-index:1000; font-size:13px;
}
.skip-link:focus{ left:16px; top:16px; }

:focus-visible{ outline:2px solid var(--sage-deep); outline-offset:3px; }

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
}

.underline-link{
  position:relative;
  display:inline-block;
  padding-bottom:3px;
  border-bottom:1px solid currentColor;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- Header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  padding:28px max(var(--pad), env(safe-area-inset-right)) 28px max(var(--pad), env(safe-area-inset-left));
  color:#fff;
  transition:background .35s ease, color .35s ease, padding .35s ease, box-shadow .35s ease;
}
.site-header.is-solid{
  background:var(--paper);
  color:var(--ink);
  padding-top:18px;
  padding-bottom:18px;
  box-shadow:0 1px 0 var(--line);
}
.logo{
  font-family:var(--logo-font);
  font-weight:400;
  font-size:26px;
  letter-spacing:0.02em;
  color:var(--sage);
  transition:color .35s ease;
}
.site-header.is-solid .logo{ color:var(--sage-deep); }

.nav-links{ display:flex; gap:40px; }
.nav-links a{
  font-family:var(--display);
  font-weight:500;
  font-size:15px;
  position:relative;
  padding-bottom:4px;
}
.nav-links a[aria-current="page"]{ text-decoration:underline; text-underline-offset:5px; }
.nav-links a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:currentColor;
  transition:right .3s ease;
}
.nav-links a:hover::after{ right:0; }

.nav-toggle{ display:none; width:44px; height:44px; position:relative; flex:none; margin:-12px -12px -12px 0; }
.nav-toggle span{
  position:absolute; left:50%; top:50%; width:24px; height:2px; background:currentColor;
  transform:translate(-50%,-50%);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle span:nth-child(1){ transform:translate(-50%,-50%) translateY(-8px); }
.nav-toggle span:nth-child(2){ transform:translate(-50%,-50%); }
.nav-toggle span:nth-child(3){ transform:translate(-50%,-50%) translateY(8px); }
.nav-toggle.is-open span:nth-child(1){ transform:translate(-50%,-50%) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translate(-50%,-50%) rotate(-45deg); }

@media (max-width: 760px){
  .nav-toggle{ display:block; }
  .nav-links{
    position:fixed; inset:0; z-index:150;
    background:var(--ink); color:var(--paper);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px;
    padding:max(28px, env(safe-area-inset-top)) max(40px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(40px, env(safe-area-inset-left));
    transform:translateX(100%); transition:transform .45s ease;
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:26px; }
}

/* ---------- Hero (home only: pure media, no text overlay) ---------- */
.hero{
  position:relative;
  height:100vh;
  height:100dvh;
  min-height:560px;
  overflow:hidden;
}
@media (max-width: 760px){
  .hero{
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
  }
}
.hero-media{
  position:absolute; inset:0;
  background:#e7ece6;
  overflow:hidden;
}
.hero-video{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

/* ---------- Section shell ---------- */
main{ padding-top:0; }
.page-section{ padding-top:150px; padding-bottom:110px; }
.page-section.tight-top{ padding-top:150px; }
@media (max-width: 760px){
  .page-section{ padding-top:120px; padding-bottom:70px; }
  .page-section.tight-top{ padding-top:120px; }
}

.headline{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(34px, 5.6vw, 68px);
  line-height:1.04;
  letter-spacing:-0.01em;
  max-width:900px;
}

.about-link{
  display:inline-block;
  margin-top:26px;
  font-family:var(--display);
  font-weight:500;
  font-size:15px;
}

/* ---------- Home: Curious / Work row ---------- */
.split-row{
  display:grid;
  grid-template-columns:0.9fr 1.4fr;
  gap:60px;
  margin-top:130px;
}
@media (max-width: 900px){
  .split-row{ grid-template-columns:1fr; gap:56px; margin-top:90px; }
}

.curious-block{ display:block; }
.curious-block h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px, 4.4vw, 46px);
  line-height:1.08;
  transition:opacity .25s ease;
}
.curious-block .underline-link{
  display:inline-block; margin-top:6px;
}
.curious-block:hover h2{ opacity:0.7; }

.work-label{
  font-family:var(--display);
  font-weight:600;
  font-size:15px;
  margin-bottom:22px;
  display:block;
}

.work-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
@media (max-width: 900px){
  .work-grid{ grid-template-columns:repeat(2, 1fr); gap:10px; }
}

/* ---------- Placeholder tile ---------- */
.tile{
  position:relative;
  aspect-ratio:4/5;
  background:
    repeating-linear-gradient(135deg, #e2e6e0 0 2px, #d9ded6 2px 3px, transparent 3px 24px),
    #ecefe9;
  border:1px solid var(--line);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.tile .tile-label{
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--ink-45); text-align:center; padding:0 14px;
}
.tile .play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,0.85);
  display:flex; align-items:center; justify-content:center;
}
.tile.is-square{ aspect-ratio:1/1; }
.tile.is-portrait{ aspect-ratio:3/4; }
.tile.is-wide{ aspect-ratio:16/9; }
.tile img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
a.tile{ transition:opacity .25s ease; }
a.tile:hover{ opacity:0.82; }

/* ---------- Services page ---------- */
.services-copy{ max-width:640px; margin-top:28px; }
.services-copy p{ font-size:16px; line-height:1.7; color:var(--ink-70); }
.services-copy p + p{ margin-top:22px; }

.accordion{ margin-top:60px; border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-trigger{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:30px 0;
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px, 2.6vw, 25px);
  text-align:left;
}
.acc-trigger .icon{
  position:relative; width:20px; height:20px; flex:none; margin-left:20px;
}
.acc-trigger .icon::before,
.acc-trigger .icon::after{
  content:''; position:absolute; top:50%; left:50%;
  background:var(--ink); transition:transform .25s ease;
}
.acc-trigger .icon::before{ width:16px; height:2px; transform:translate(-50%,-50%); }
.acc-trigger .icon::after{ width:2px; height:16px; transform:translate(-50%,-50%); }
.acc-item.is-open .acc-trigger .icon::after{ transform:translate(-50%,-50%) scaleY(0); }

.acc-panel{
  max-height:0; overflow:hidden;
  transition:max-height .35s ease;
}
.acc-panel-inner{ padding:0 0 30px; max-width:600px; }
.acc-panel-inner p{ font-size:15px; line-height:1.7; color:var(--ink-70); }

.curious-cta{
  display:inline-block; margin-top:70px;
  font-family:var(--display); font-weight:600; font-size:17px;
}

/* ---------- About page ---------- */
.about-intro{ max-width:640px; }
.about-intro p{
  font-family:var(--display); font-weight:600;
  font-size:clamp(20px, 2.6vw, 27px); line-height:1.5;
  color:var(--ink);
}
.about-intro strong{ font-weight:800; }

.team-grid{
  margin-top:90px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
@media (max-width: 760px){
  .team-grid{ grid-template-columns:1fr; gap:56px; }
}
.team-member .tile{ aspect-ratio:3/4; margin-bottom:22px; }
.team-member h3{ font-family:var(--display); font-weight:700; font-size:20px; }
.team-member p{ margin-top:4px; font-size:14px; color:var(--ink-70); }

/* ---------- Contact page ---------- */
.contact-hero{
  display:flex; justify-content:space-between; align-items:flex-start; gap:32px; flex-wrap:wrap;
}
@media (max-width: 700px){
  .contact-hero{ flex-direction:column; align-items:flex-start; gap:18px; }
}
.contact-hero .headline{ margin-bottom:14px; }
.contact-hero .tagline{ font-size:18px; color:var(--ink-70); }
.contact-hero .email{
  font-family:var(--display); font-weight:500; font-size:17px;
  margin-top:6px;
}

/* ---------- Global Footer ---------- */
.site-footer{
  background:var(--sage);
  color:var(--ink);
  padding-top:38px;
  padding-bottom:max(38px, env(safe-area-inset-bottom));
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
}
@media (max-width: 620px){
  .footer-row{ flex-direction:column; align-items:flex-start; gap:18px; }
}
.footer-row .logo{ color:var(--ink); font-size:24px; }
.footer-email{ font-family:var(--display); font-weight:500; font-size:15px; }
.footer-nav{ display:flex; gap:30px; }
.footer-nav a{ font-family:var(--display); font-weight:500; font-size:14px; }
.footer-nav a.underline-link{ border-bottom-color:var(--ink-45); }
.footer-nav a.underline-link:hover{ border-bottom-color:var(--ink); }