/* ============================================================
   VELINGA — Direction A · "ATELIER"
   Warm architectural · near-black + bronze · Archivo
   ============================================================ */

:root{
  --bg:#14110D;
  --bg-2:#1A1611;
  --surface:#211C15;
  --surface-2:#272118;
  --ink:#ECE6DC;
  --ink-soft:#C8C0B2;
  --muted:#938A7C;
  --line:rgba(236,230,220,.13);
  --line-strong:rgba(236,230,220,.26);
  --accent:oklch(0.77 0.082 74);          /* warm bronze */
  --accent-soft:oklch(0.77 0.082 74 / .16);
  --slot-bg:#221C15;
  --contrast-bg:#ECE6DC;
  --contrast-surface:#E4DCCE;
  --contrast-ink:#1A1611;
  --contrast-ink-soft:#4A4234;
  --contrast-muted:#6E6557;
  --contrast-line:rgba(26,22,17,.14);
  --contrast-line-strong:rgba(26,22,17,.26);
  --maxw:1280px;
  --pad:clamp(20px,5vw,64px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"SF Mono",Menlo,monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--accent-soft);color:var(--ink);}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);width:100%;}
.section{padding:clamp(72px,11vw,150px) 0;position:relative;}
.section--tight{padding:clamp(56px,8vw,100px) 0;}
.divider{height:1px;background:var(--line);border:0;margin:0;}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0;font-weight:600;line-height:1.04;letter-spacing:-.02em;}
.display{
  font-weight:600;
  font-size:calc(clamp(2.6rem,7.2vw,6.5rem) * var(--tw-display,1));
  letter-spacing:-.035em;
  line-height:.98;
}
.h2{font-size:clamp(1.9rem,4vw,3.4rem);letter-spacing:-.028em;}
.h3{font-size:clamp(1.3rem,2.2vw,1.9rem);letter-spacing:-.02em;font-weight:500;}
.lead{font-size:clamp(1.05rem,1.7vw,1.4rem);line-height:1.55;color:var(--ink-soft);font-weight:400;}
.muted{color:var(--muted);}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

.eyebrow{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-weight:400;
}
.eyebrow::before{
  content:"";
  width:26px;height:1px;background:var(--accent);
  display:inline-block;opacity:.7;
}
.eyebrow--plain::before{display:none;}

.index-num{font-family:var(--mono);color:var(--accent);font-size:.8rem;letter-spacing:.1em;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--mono);
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  padding:1.05em 1.7em;
  border:1px solid var(--line-strong);
  color:var(--ink);
  background:transparent;
  cursor:pointer;
  transition:background .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
  white-space:nowrap;
}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn--accent{border-color:var(--accent);color:var(--accent);}
.btn--accent:hover{background:var(--accent);color:#171206;border-color:var(--accent);}
.btn--solid{background:var(--ink);color:var(--bg);border-color:var(--ink);}
.btn--solid:hover{background:var(--accent);border-color:var(--accent);color:#171206;}
.btn .arrow{transition:transform .4s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}

.textlink{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);display:inline-flex;align-items:center;gap:.6em;
  padding-bottom:.4em;border-bottom:1px solid var(--line-strong);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.textlink:hover{color:var(--accent);border-color:var(--accent);}
.textlink .arrow{transition:transform .35s var(--ease);}
.textlink:hover .arrow{transform:translateX(4px);}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .5s var(--ease),padding .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(18,15,11,.78);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom-color:var(--line);
  padding-top:13px;padding-bottom:13px;
}
.brand{display:flex;align-items:center;gap:.7em;font-weight:600;letter-spacing:.02em;}
.brand__logo{height:52px;width:auto;display:block;transition:height .5s var(--ease);}
.nav.is-solid .brand__logo{height:44px;}
.footer__logo{height:56px;width:auto;display:block;}
.brand__mark{width:14px;height:14px;border:1.5px solid var(--accent);transform:rotate(45deg);flex:none;}
.brand__name{font-size:1.18rem;letter-spacing:.16em;font-weight:600;text-transform:uppercase;}
.brand__name small{font-family:var(--mono);font-size:.5rem;letter-spacing:.3em;display:block;color:var(--muted);margin-top:2px;font-weight:400;}
.nav__menu{display:flex;align-items:center;gap:clamp(18px,2.6vw,40px);}
.nav__link{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);position:relative;padding:4px 0;transition:color .3s var(--ease);
}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;background:var(--accent);transition:right .35s var(--ease);}
.nav__link:hover{color:var(--ink);}
.nav__link:hover::after,.nav__link.is-current::after{right:0;}
.nav__link.is-current{color:var(--accent);}
.nav__cta{margin-left:8px;}
.nav__toggle{display:none;}

/* ---------- Image slots ---------- */
image-slot.slot{
  display:block;color:var(--ink-soft);
  font-family:var(--mono);
}
image-slot.slot::part(frame){background:var(--slot-bg);}
image-slot.slot::part(ring){border-color:var(--line-strong);}

.shot{position:relative;overflow:hidden;margin:0;background:var(--slot-bg);}
.shot__cap{
  position:absolute;left:16px;bottom:14px;z-index:3;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);background:rgba(15,12,8,.55);backdrop-filter:blur(4px);
  padding:6px 10px;border:1px solid var(--line);pointer-events:none;
  transition:opacity .3s;
}
image-slot[data-filled] ~ .shot__cap,
image-slot[data-filled] + .shot__cap{opacity:0;}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;}
.hero__media{position:absolute;inset:0;overflow:hidden;}
.hero__media image-slot{position:absolute;inset:0;width:100%;height:100%;}
.hero__scrim{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(12,10,7,.55) 0%,rgba(12,10,7,.12) 30%,rgba(12,10,7,.30) 62%,rgba(12,10,7,.92) 100%),
    radial-gradient(120% 80% at 80% 0%,rgba(12,10,7,0) 40%,rgba(12,10,7,.5) 100%);
}
.hero__inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(48px,7vw,96px);padding-top:120px;}

/* ---- Tweakable refinement layer (light-steel build) ---- */
:root{--tw-scrim:.34;--tw-display:1;--tw-text-shadow:0 2px 30px rgba(0,0,0,.5);}
.hero__scrim::after{content:"";position:absolute;inset:0;background:#0a0c0e;opacity:0;pointer-events:none;}
.cta-band > .hero__scrim::after{opacity:var(--tw-scrim,0);}
.hero > .hero__scrim::after{opacity:calc(var(--tw-scrim,0) * .5);}
.hero .hero__inner,.cta-band .container{text-shadow:var(--tw-text-shadow,none);}
.hero .hero__inner .btn,.cta-band .container .btn{text-shadow:none;}
.hero__top{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.hero h1{max-width:16ch;}
.hero__meta{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;color:var(--ink-soft);
  text-transform:uppercase;text-align:right;line-height:1.9;
}
.hero__sub{margin-top:28px;max-width:46ch;}
.hero__cta{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;align-items:center;}
.scroll-cue{
  position:absolute;left:var(--pad);bottom:26px;z-index:3;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:10px;
}
.scroll-cue::before{content:"";width:1px;height:34px;background:linear-gradient(var(--accent),transparent);}

/* ---------- Intro / statement ---------- */
.statement{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,72px);align-items:start;}
@media(min-width:860px){.statement{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);}}
.statement__big{font-size:clamp(1.55rem,2.9vw,2.5rem);line-height:1.22;letter-spacing:-.02em;font-weight:400;color:var(--ink);}
.statement__big b{font-weight:600;}
.stat-row{display:flex;gap:clamp(28px,5vw,64px);flex-wrap:wrap;margin-top:48px;}
.stat__num{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:600;letter-spacing:-.03em;line-height:1;}
.stat__label{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:10px;}

/* ---------- Featured projects ---------- */
.featured{display:grid;gap:6px;}
.feat{position:relative;display:grid;grid-template-columns:1fr;}
.feat .shot{aspect-ratio:16/10;}
@media(min-width:900px){
  .feat{grid-template-columns:1fr 1fr;align-items:stretch;}
  .feat .shot{aspect-ratio:auto;min-height:520px;}
  .feat--rev .feat__body{order:-1;}
}
.feat__body{
  background:var(--surface);padding:clamp(28px,4vw,56px);
  display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.feat__title{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:600;letter-spacing:-.025em;}
.feat__specs{display:flex;gap:28px;flex-wrap:wrap;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:6px;}
.feat__specs b{display:block;color:var(--ink);font-size:.95rem;margin-top:5px;letter-spacing:.04em;}

/* ---------- Process ---------- */
.process{display:grid;gap:0;border-top:1px solid var(--line);}
.step{
  display:grid;grid-template-columns:1fr;gap:14px;
  padding:clamp(28px,4vw,52px) 0;border-bottom:1px solid var(--line);
  align-items:start;
}
@media(min-width:820px){.step{grid-template-columns:90px minmax(0,.4fr) minmax(0,.6fr);gap:clamp(24px,4vw,56px);align-items:baseline;}}
.step__num{font-family:var(--mono);font-size:.82rem;color:var(--accent);letter-spacing:.1em;}
.step__title{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:600;letter-spacing:-.02em;}
.step__body{color:var(--ink-soft);max-width:54ch;}
.step__tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:6px 11px;}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;}
.cta-band .container{position:relative;z-index:3;text-align:center;display:flex;flex-direction:column;align-items:center;gap:30px;}
.cta-band h2{max-width:18ch;}

/* ---------- Portfolio closer ---------- */
.pf-close{display:flex;align-items:flex-end;justify-content:space-between;gap:36px 56px;flex-wrap:wrap;}
.pf-close h2{max-width:15ch;margin-top:22px;}
.pf-close .btn{margin-bottom:8px;}

/* ---------- Section heading ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:clamp(36px,5vw,64px);}
.sec-head__title{max-width:18ch;}
.sec-head__lead{max-width:42ch;}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);background:var(--bg-2);}
.footer__top{display:grid;grid-template-columns:1fr;gap:44px;padding-top:clamp(56px,8vw,96px);padding-bottom:56px;}
@media(min-width:820px){.footer__top{grid-template-columns:1.4fr 1fr 1fr;}}
.footer h4{font-size:1rem;letter-spacing:.02em;margin-bottom:18px;}
.footer__big{font-size:clamp(1.8rem,4vw,3rem);font-weight:600;letter-spacing:-.03em;line-height:1;max-width:14ch;}
.footer__list{display:flex;flex-direction:column;gap:12px;}
.footer__list a,.footer__list span{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--ink-soft);transition:color .3s var(--ease);}
.footer__list a:hover{color:var(--accent);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:24px;padding-bottom:30px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
[data-reveal].is-visible{opacity:1;transform:none;}
[data-reveal-x]{opacity:0;transform:translateX(-26px);transition:opacity 1s var(--ease),transform 1s var(--ease);}
[data-reveal-x].is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important;}
  [data-reveal],[data-reveal-x]{opacity:1!important;transform:none!important;transition:none!important;}
}

/* ---------- Mobile nav ---------- */
@media(max-width:780px){
  .nav,.nav.is-solid{backdrop-filter:none;}
  .scroll-cue{display:none;}
  .nav__menu{
    position:fixed;inset:0 0 0 auto;width:min(82vw,360px);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    background:rgba(16,13,9,.97);backdrop-filter:blur(20px);
    padding:40px var(--pad);transform:translateX(100%);transition:transform .5s var(--ease);
    border-left:1px solid var(--line);
  }
  .nav__menu.is-open{transform:none;}
  .nav__link{font-size:1rem;}
  .nav__cta{margin-left:0;}
  .nav__toggle{
    display:flex;flex-direction:column;gap:5px;width:34px;height:34px;
    align-items:center;justify-content:center;background:none;border:0;cursor:pointer;z-index:70;position:relative;
  }
  .nav__toggle span{width:24px;height:1.5px;background:var(--ink);transition:transform .4s var(--ease),opacity .3s var(--ease);}
  .nav__toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
  .nav__toggle.is-open span:nth-child(2){opacity:0;}
  .nav__toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
  .hero__meta{text-align:left;}
}

/* ============================================================
   PAGE-SPECIFIC — page header, portfolio, about, contact
   ============================================================ */

/* ---- Page header (sub-pages) ---- */
.page-head{padding:clamp(130px,18vh,210px) 0 clamp(40px,6vw,72px);position:relative;}
.page-head__row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;}
.page-head h1{font-size:clamp(2.6rem,7vw,6rem);letter-spacing:-.035em;line-height:.95;}
.page-head__count{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:right;line-height:1.9;}

/* ---- Portfolio showcases (full-bleed, stacked) ---- */
.showcase{position:relative;min-height:92svh;display:flex;align-items:flex-end;overflow:hidden;border-top:1px solid var(--line);}
.showcase__media{position:absolute;inset:0;overflow:hidden;}
.showcase__media image-slot{position:absolute;inset:0;width:100%;height:100%;}
.showcase__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,10,7,.42) 0%,rgba(12,10,7,.08) 34%,rgba(12,10,7,.34) 64%,rgba(12,10,7,.93) 100%);}
.showcase__inner{position:relative;z-index:3;width:100%;padding-top:120px;padding-bottom:clamp(40px,6vw,76px);}
.showcase__index{font-family:var(--mono);font-size:clamp(3rem,8vw,6.5rem);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--accent);opacity:.85;letter-spacing:-.02em;}
.showcase__title{font-size:clamp(2rem,5vw,4rem);font-weight:600;letter-spacing:-.03em;line-height:.98;margin-top:18px;max-width:18ch;}
.showcase__desc{margin-top:22px;max-width:48ch;}
.showcase__specs{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid var(--line-strong);}
.showcase__specs div{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);}
.showcase__specs b{display:block;color:var(--ink);font-size:1rem;margin-top:6px;letter-spacing:.02em;font-family:var(--sans);font-weight:500;text-transform:none;}
.showcase--right .showcase__inner{text-align:right;}
.showcase--right .showcase__specs{justify-content:flex-end;}
.showcase--right .showcase__title,.showcase--right .showcase__desc{margin-left:auto;}

/* ---- Portfolio gallery (project-agnostic) ---- */
.gallery{display:flex;flex-direction:column;gap:6px;}
.gal-full{position:relative;width:100%;height:clamp(420px,82vh,920px);overflow:hidden;background:var(--slot-bg);}
.gal-row{display:grid;gap:6px;}
.gal-row--2{grid-template-columns:1fr 1fr;}
.gal-row--3{grid-template-columns:1fr 1fr 1fr;}
.gal-cell{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--slot-bg);}
@media(max-width:760px){.gal-row--2,.gal-row--3{grid-template-columns:1fr;}}

/* ---- About ---- */
.about-lede{font-size:clamp(1.6rem,3.2vw,2.7rem);line-height:1.22;letter-spacing:-.02em;font-weight:400;max-width:24ch;}
.about-lede b{font-weight:600;}
.about-split{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,72px);align-items:start;}
@media(min-width:860px){.about-split{grid-template-columns:minmax(0,.5fr) minmax(0,.5fr);}}
.about-portrait{aspect-ratio:4/5;}
.area-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:8px;}
@media(min-width:620px){.area-grid{grid-template-columns:repeat(3,1fr);}}
.area-cell{background:var(--bg);padding:26px 24px 30px;display:flex;flex-direction:column;gap:8px;min-height:140px;justify-content:flex-end;transition:background .35s var(--ease);}
.area-cell:hover{background:var(--surface);}
.area-cell .area-num{font-family:var(--mono);font-size:.68rem;color:var(--accent);letter-spacing:.12em;}
.area-cell h4{font-size:1.2rem;letter-spacing:-.01em;}
.area-cell p{font-size:.84rem;color:var(--muted);}
.cred-row{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
@media(min-width:680px){.cred-row{grid-template-columns:repeat(3,1fr);}}
.cred-cell{background:var(--bg);padding:34px 28px;display:flex;flex-direction:column;gap:10px;}
.cred-cell .stat__num{font-size:clamp(2.4rem,4.4vw,3.4rem);}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr;gap:clamp(36px,5vw,80px);align-items:start;}
@media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);}}
.contact-info{display:flex;flex-direction:column;gap:34px;}
.contact-block .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
.contact-block .val{font-size:1.3rem;letter-spacing:-.01em;}
.contact-block a.val{transition:color .3s var(--ease);}
.contact-block a.val:hover{color:var(--accent);}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);}
.field{background:var(--bg);display:flex;flex-direction:column;}
.field--full{grid-column:1/-1;}
.field label{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:18px 22px 0;}
.field input,.field textarea,.field select{
  background:transparent;border:0;color:var(--ink);font-family:var(--sans);font-size:1.05rem;
  padding:10px 22px 20px;width:100%;outline:none;resize:none;
}
.field textarea{min-height:140px;padding-top:12px;}
.field select{appearance:none;cursor:pointer;padding-bottom:20px;}
.field option{background:var(--surface);color:var(--ink);}
.field input::placeholder,.field textarea::placeholder{color:#5d564b;}
.field:focus-within{background:var(--surface);}
.field:focus-within label{color:var(--accent);}
.form__actions{grid-column:1/-1;background:var(--bg);padding:24px 22px;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;}
.form__note{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--muted);max-width:40ch;}
.form__success{
  grid-column:1/-1;background:var(--surface);padding:40px 28px;display:none;text-align:center;flex-direction:column;align-items:center;gap:14px;
}
.form__success.show{display:flex;}
.form__success .chk{width:40px;height:40px;border:1px solid var(--accent);transform:rotate(45deg);display:flex;align-items:center;justify-content:center;}
.form__success .chk::after{content:"";width:16px;height:8px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-90deg) translate(2px,-2px);}
@media(max-width:620px){.form{grid-template-columns:1fr;}}