/* Erick Lopes — black & grey realism. Dark, editorial, image-forward.
   Plain CSS, no framework, no build step. Mobile-first. */
:root{
  --ink:#0b0b0c; --ink-2:#121214; --line:#26262a;
  --fg:#ecebe8; --fg-dim:#9b9a96; --fg-faint:#6a6a66;
  --accent:#c9c3b6;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(20px,5vw,72px);
  --band:clamp(64px,10vw,140px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:12px;z-index:99;background:var(--fg);color:var(--ink);padding:10px 16px}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--serif); font-weight:400; letter-spacing:.01em; margin:0}
h1{font-size:clamp(2.6rem,7.5vw,5rem); line-height:1.02}
h2{font-size:clamp(1.9rem,4.2vw,3rem); line-height:1.1; margin-bottom:.5em}
h3{font-size:1.3rem; line-height:1.25; margin-bottom:.4em}
p{margin:0 0 1.1em}
.eyebrow{font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:1.6em}
.lede{font-size:clamp(1.05rem,1.9vw,1.25rem); color:var(--fg-dim); max-width:46ch}
.section-note{color:var(--fg-dim); max-width:56ch; margin-bottom:2.4em}
.muted{color:var(--fg-faint); font-size:.92rem}

/* ---------- chrome ---------- */
header.site{
  display:flex; align-items:center; justify-content:space-between; gap:clamp(10px,3vw,24px);
  padding:18px var(--gutter); border-bottom:1px solid var(--line);
  position:sticky; top:0; background:rgba(11,11,12,.86);
  backdrop-filter:blur(10px); z-index:20;
}
.mark{font-family:var(--serif); font-size:clamp(1rem,3.6vw,1.2rem);
  letter-spacing:.06em; white-space:nowrap; flex:0 0 auto}
header.site nav{display:flex; gap:clamp(11px,3vw,34px); flex:0 1 auto}
header.site nav a{
  font-size:clamp(.62rem,2.1vw,.74rem); letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-dim); text-decoration:none; transition:color .2s; white-space:nowrap;
}
header.site nav a:hover{color:var(--fg)}

footer.site{
  border-top:1px solid var(--line); padding:44px var(--gutter);
  display:flex; flex-wrap:wrap; gap:10px 32px; justify-content:space-between;
  color:var(--fg-faint); font-size:.86rem;
}
footer.site a{color:var(--fg-dim); text-decoration:none}
footer.site a:hover{color:var(--fg)}

/* ---------- buttons ---------- */
.cta-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:2em}
.btn{
  display:inline-block; padding:15px 30px; text-decoration:none;
  font-size:.76rem; letter-spacing:.17em; text-transform:uppercase;
  background:var(--fg); color:var(--ink); border:1px solid var(--fg);
  transition:background .2s,color .2s;
}
.btn:hover{background:transparent; color:var(--fg)}
.btn.ghost{background:transparent; color:var(--fg-dim); border-color:var(--line)}
.btn.ghost:hover{color:var(--fg); border-color:var(--fg-dim)}

/* ---------- hero ---------- */
.hero{display:grid; gap:clamp(32px,6vw,72px); padding:var(--band) var(--gutter) calc(var(--band) * .8)}
.hero-copy{align-self:center; max-width:60ch}
@media(min-width:900px){
  .hero{grid-template-columns:1fr 1.05fr; align-items:center; padding-top:clamp(70px,8vw,110px)}
  .hero-media{order:2}
}

/* ---------- bands ---------- */
.band{padding:var(--band) var(--gutter); border-top:1px solid var(--line)}
.band.alt{background:var(--ink-2)}

.grid{display:grid; gap:clamp(12px,2vw,22px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols{display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cols p{color:var(--fg-dim); margin:0}

.about-copy{max-width:62ch; margin:0 auto}
.about-copy p{color:var(--fg-dim)}
.about-copy p:last-child{margin-bottom:0}

.steps{list-style:none; counter-reset:s; margin:0; padding:0; display:grid;
  gap:clamp(22px,3vw,34px); grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.steps li{counter-increment:s; border-top:1px solid var(--line); padding-top:22px}
.steps li::before{
  content:counter(s,decimal-leading-zero); display:block; margin-bottom:14px;
  font-family:var(--sans); font-size:.72rem; letter-spacing:.2em; color:var(--accent);
}
.steps p{color:var(--fg-dim); margin:0}

.contact-card{margin-top:clamp(40px,6vw,72px); padding:clamp(28px,4vw,48px);
  border:1px solid var(--line); background:var(--ink)}
.contact-lead{font-family:var(--serif); font-size:1.5rem; margin:0}
.contact-card .cta-row{margin-top:1.6em}

.location p{max-width:58ch}
.location strong{color:var(--fg); font-weight:400}

.proof{text-align:center}
.rating{font-family:var(--serif); font-size:clamp(1.4rem,3vw,2rem); margin-bottom:.3em}
.rating strong{font-weight:500}
.stars{color:var(--accent); letter-spacing:.14em; margin-right:.5em}

.final{text-align:center}
.final p{color:var(--fg-dim)}
.final .cta-row{justify-content:center}

@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- real portfolio images ---------- */
.shot{margin:0; overflow:hidden; background:var(--ink-2); border:1px solid var(--line)}
.shot img{width:100%; height:100%; object-fit:cover; display:block}
.shot-hero{aspect-ratio:4/5}
.grid .shot{aspect-ratio:4/5}
.grid .shot img{transition:transform .6s cubic-bezier(.2,.6,.2,1)}
@media(hover:hover){.grid .shot:hover img{transform:scale(1.03)}}