/* ============================================================
   We Are One Studio · wer1.studio
   Brand system v1.1 (BRAND/02-visual-identity.md)
   Fonts load from fonts.css (Aboreto + Inter, self-hosted).
   ============================================================ */

:root{
  --limestone:#EAE4DB;
  --limestone-2:#F1ECE4;
  --limestone-3:#E0D8CC;
  --greige:#C0B3A6;            /* hairlines and surfaces only, never small text */
  --espresso:#4D3D33;
  --ink:#171009;
  --ink-2:#231913;
  --honey:#B18B6B;             /* accent on dark grounds */
  --bronze:#8A664A;            /* accent on light grounds */
  --ink-soft:rgba(77,61,51,.78);
  --terracotta:#7B482E;        /* once per viewport: the CTA */
  --line-dark:rgba(77,61,51,.18);
  --line-light:rgba(234,228,219,.20);
  --f-display:'Aboreto','Optima',serif;
  --f-body:'Inter',system-ui,sans-serif;
  --maxw:1180px;
  --pad:clamp(1.4rem,5vw,6rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
body{
  margin:0; background:var(--limestone); color:var(--espresso);
  font-family:var(--f-body); font-weight:300; line-height:1.65; letter-spacing:.005em;
}
img{max-width:100%; display:block;}
::selection{background:var(--honey); color:var(--ink);}
main{display:block;}

/* ---------- Type ---------- */
h1,h2,h3{margin:0; font-weight:400;}
p{margin:0 0 1em; max-width:62ch;}
.title{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.2em;
  font-size:clamp(1.4rem,3.2vw,2.3rem); line-height:1.15; color:var(--ink);
  margin-bottom:1.4rem; text-wrap:balance;
}
.band--dark .title{color:var(--limestone);}
.eyebrow{
  font-weight:500; text-transform:uppercase; letter-spacing:.32em;
  font-size:.68rem; color:var(--bronze);
}
.band--dark .eyebrow{color:var(--honey);}
.lead-xl{
  font-size:clamp(1.25rem,2.2vw,1.7rem); line-height:1.6; font-weight:300;
  color:var(--ink); max-width:34ch; text-wrap:balance; margin-bottom:1.2rem;
}

/* ---------- Lockup ---------- */
.lockup{display:flex; flex-direction:column; gap:.4em;}
.lockup__lead{
  font-style:italic; font-weight:300; letter-spacing:.02em; color:var(--honey);
  font-size:clamp(.9rem,1.6vw,1.2rem); padding-left:.24em;
}
.lockup__main{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.22em;
  line-height:.98; color:var(--limestone); white-space:nowrap; padding-left:.22em;
}

/* ---------- Header ---------- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem clamp(1.1rem,3vw,2.2rem);
  mix-blend-mode:difference;
}
.brand{display:flex; flex-direction:column; gap:.15rem; text-decoration:none;}
.brand img{height:44px; width:auto; display:block;}
.brand__lead{font-style:italic; font-weight:300; font-size:.66rem; color:#C9A986;}
.brand__main{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.22em;
  font-size:.78rem; color:var(--limestone);
}
.site-head nav{display:flex; gap:clamp(.9rem,2.4vw,1.8rem);}
.site-head nav a{
  color:var(--limestone); text-decoration:none; text-transform:uppercase;
  letter-spacing:.22em; font-size:.62rem; font-weight:500;
}
.site-head nav a:hover{color:#C9A986;}
.site-head nav a:focus-visible{outline:2px solid #C9A986; outline-offset:4px;}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; overflow:hidden; color:var(--limestone);
}
.hero__bg{position:absolute; inset:0;}
.hero__slide, .hero__slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.hero__slide{opacity:0; transition:opacity 1.1s ease;}
.hero__slide.is-on{opacity:1;}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(15,10,6,.30) 0%, rgba(15,10,6,.05) 30%, rgba(15,10,6,.12) 55%, rgba(15,10,6,.72) 100%);
}
.hero__inner{
  position:relative; z-index:1; width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 var(--pad) clamp(5rem,12vh,8rem);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.4rem;
  text-shadow:0 1px 26px rgba(15,10,6,.45);
}
.lockup--hero{align-items:center;}
.lockup--hero .lockup__main{font-size:clamp(2rem,7.5vw,5.6rem);}
.lockup--hero img{width:min(680px,80vw); height:auto; filter:drop-shadow(0 1px 26px rgba(15,10,6,.45));}
.hero__line{color:var(--limestone); font-size:clamp(.95rem,1.7vw,1.2rem); margin:0;}
.scrollcue{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%); z-index:2;
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:rgba(234,228,219,.75);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.scrollcue span{width:1px; height:32px; background:linear-gradient(var(--honey),transparent); animation:cue 2.4s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.3; transform:scaleY(.6);}50%{opacity:1; transform:scaleY(1);}}

/* ---------- Bands ---------- */
.band{padding:clamp(4rem,10vh,7.5rem) var(--pad); border-bottom:1px solid var(--line-dark);}
.band--light{background:var(--limestone);}
.band--stone2{background:var(--limestone-2);}
.band--dark{background:var(--ink); color:var(--limestone); border-bottom-color:var(--line-light);}
.band--dark p{color:rgba(234,228,219,.82);}
.inner{max-width:var(--maxw); margin:0 auto;}
.inner.narrow{max-width:820px;}
.kicker{display:flex; align-items:center; gap:1rem; margin-bottom:1.6rem;}
.kicker .num{font-family:var(--f-display); font-size:.8rem; letter-spacing:.2em; color:var(--bronze);}
.band--dark .kicker .num{color:var(--honey);}
.kicker .line{flex:1; height:1px; background:var(--line-dark);}
.band--dark .kicker .line{background:var(--line-light);}

/* ---------- The studio ---------- */
.duo-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(1.8rem,4vw,4rem); align-items:start;}
.duo-grid > *{min-width:0;}
.bio h3{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.18em;
  font-size:.9rem; color:var(--bronze); margin-bottom:.7rem;
}
.bio{margin-bottom:1.6rem;}
.together{font-size:1.05rem;}
.name-note{
  border-top:1px solid var(--line-dark); padding-top:1.2rem; margin-top:1.6rem;
  font-size:.92rem; color:var(--ink-soft);
}
.name-note em{color:var(--bronze);}
.duo-img{margin:0;}
.duo-img img{width:100%; height:auto;}

/* ---------- Services ---------- */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light);}
.tier{background:var(--ink); padding:clamp(1.5rem,3vw,2.4rem); display:flex; flex-direction:column; gap:1rem; min-height:250px;}
.tier .tn{font-family:var(--f-display); letter-spacing:.2em; font-size:.72rem; color:var(--honey);}
.tier h3{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.12em;
  font-size:clamp(1rem,1.9vw,1.25rem); color:var(--limestone); line-height:1.25;
}
.tier p{font-size:.88rem; margin:0;}
.whofor{font-size:.8rem; color:rgba(234,228,219,.6); margin:1.4rem 0 0;}
.whofor b{color:var(--honey); font-weight:500; text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; margin-right:.4rem;}

/* ---------- Gallery ---------- */
.gal{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.8rem,1.6vw,1.4rem);}
.gal figure{margin:0; overflow:hidden; background:var(--limestone-3);}
.gal img{width:100%; height:100%; object-fit:cover; aspect-ratio:3/2; transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
.gal figure:hover img{transform:scale(1.04);}

/* ---------- Atmosphere ---------- */
.atmosphere{
  position:relative; min-height:78svh; display:flex; align-items:flex-end;
  overflow:hidden; color:var(--limestone); padding:clamp(4rem,10vh,7rem) var(--pad);
}
.atmosphere__bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.atmosphere::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(15,10,6,.18) 0%, rgba(15,10,6,.62) 100%);
}
.atmosphere .inner{position:relative; z-index:1; text-shadow:0 1px 24px rgba(15,10,6,.6);}
.atmosphere__line{
  font-size:clamp(1.3rem,2.6vw,1.9rem); line-height:1.5; font-weight:300;
  color:var(--limestone); max-width:34ch; text-wrap:balance; margin-bottom:1rem;
}
.atmosphere__cap{font-style:italic; color:var(--honey); font-size:1rem; margin:0;}

/* ---------- Process ---------- */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.5vw,3rem); counter-reset:step;}
.steps li{border-top:1px solid var(--line-dark); padding-top:1.2rem;}
.steps h3{
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.16em;
  font-size:1rem; color:var(--ink); margin-bottom:.6rem;
}
.steps h3::before{
  counter-increment:step; content:counter(step, decimal-leading-zero);
  display:block; font-size:.72rem; letter-spacing:.2em; color:var(--bronze); margin-bottom:.8rem;
}
.steps p{font-size:.92rem; margin:0;}

/* ---------- Contact ---------- */
.contact-form{display:flex; flex-direction:column; gap:1.1rem; margin-top:1.6rem;}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;}
.contact-form label{
  display:flex; flex-direction:column; gap:.45rem;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.22em; color:rgba(234,228,219,.65);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  background:var(--ink-2); border:1px solid var(--line-light); border-radius:2px;
  padding:.85rem 1rem; color:var(--limestone); font-family:var(--f-body);
  font-size:.95rem; font-weight:300; letter-spacing:.01em;
}
.contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--honey);}
.contact-form textarea{resize:vertical; min-height:120px;}
.contact-form .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.contact-form button{
  align-self:flex-start; background:var(--terracotta); color:var(--limestone);
  border:0; border-radius:2px; cursor:pointer;
  font-family:var(--f-body); font-weight:500; text-transform:uppercase; letter-spacing:.26em; font-size:.72rem;
  padding:1rem 2.6rem; transition:background .3s ease;
}
.contact-form button:hover{background:#8F5636;}
.contact-form button:focus-visible{outline:2px solid var(--honey); outline-offset:3px;}

/* ---------- Footer ---------- */
.site-foot{
  background:var(--ink); color:rgba(234,228,219,.72); text-align:center;
  padding:clamp(3.4rem,8vh,5.5rem) var(--pad) 2.6rem;
  display:flex; flex-direction:column; align-items:center; gap:1.1rem;
}
.lockup--foot{align-items:center;}
.lockup--foot .lockup__main{font-size:clamp(1.3rem,3vw,1.9rem);}
.lockup--foot img{width:min(280px,64vw); height:auto; opacity:.92;}
.site-foot p{margin:0; font-size:.88rem;}
.foot-meta{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(234,228,219,.45); line-height:2;}
.foot-url{color:var(--honey);}

/* ---------- Reveal motion ---------- */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .9s ease, transform .9s ease;}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.12s;} .reveal.d2{transition-delay:.24s;} .reveal.d3{transition-delay:.36s;}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .duo-grid, .tiers, .steps, .gal, .contact-form .row{grid-template-columns:1fr;}
  .duo-img{order:-1;}
  .lockup--hero .lockup__main{font-size:8vw; letter-spacing:.14em;}
  .brand__lead{display:none;}
  .brand img{height:34px;}
  .site-head{align-items:baseline; flex-wrap:wrap; gap:.5rem .8rem;}
  .site-head nav{gap:.8rem;}
  .site-head nav a{font-size:.55rem; letter-spacing:.16em;}
}
@media (max-height:500px){
  .scrollcue{display:none;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important;}
  .reveal{opacity:1; transform:none;}
  html{scroll-behavior:auto;}
  .gal figure:hover img{transform:none;}
}