:root{
  --blue:#3f6096;        /* Archiforma logo ink */
  --blue-deep:#24385c;
  --blue-soft:#9db4d4;
  --ink:#1c242e;
  --paper:#ffffff;
  --mist:#f3f1ed;        /* warm neutral from the letterhead */
  --line:#e4e2db;
  --muted:#6b7079;
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* back-compat aliases used by legal pages */
  --brand:#3f6096; --brand-dark:#24385c; --bg-alt:#f3f1ed; --bg:#ffffff;
  --text-primary:#1c242e;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Jost','Century Gothic',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);background:var(--paper);line-height:1.75;font-weight:400;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.serif{font-family:'Jost','Century Gothic',sans-serif;font-weight:300;line-height:1.14}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 34px}
.rule-accent{display:block;width:46px;height:1px;background:var(--blue);margin-bottom:24px}

/* motion vocabulary — single fade-up reveal */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
[data-reveal].in{opacity:1;transform:none}

/* intro — real logo, architectural reveal */
#intro{position:fixed;inset:0;z-index:200;background:var(--paper);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;animation:introOut 1s var(--ease) 1.55s forwards}
#intro .mono{width:84px;height:84px;opacity:0;transform:scale(.86) translateY(6px);
  animation:logoIn 1s var(--ease) .2s forwards}
#intro .word{font-size:30px;font-weight:300;letter-spacing:.46em;color:var(--blue);padding-left:.46em;
  opacity:0;animation:wordIn 1.1s var(--ease) .55s forwards}
#intro .rule{width:0;height:1px;background:var(--blue);opacity:.5;animation:ruleIn 1.1s var(--ease) .85s forwards}
@keyframes logoIn{to{opacity:1;transform:none}}
@keyframes wordIn{to{opacity:1}}
@keyframes ruleIn{to{width:130px}}
@keyframes introOut{to{opacity:0;visibility:hidden;transform:translateY(-22px)}}
body.intro-done #intro{display:none}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s var(--ease),border-color .4s,box-shadow .4s;border-bottom:1px solid transparent}
header .bar{display:flex;align-items:center;justify-content:space-between;height:86px;transition:height .4s var(--ease)}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:36px;height:36px;background:#fff;padding:3px;transition:.4s}
.brand .name{font-size:21px;font-weight:400;letter-spacing:.36em;color:#fff;padding-left:.36em;transition:color .4s}
nav ul{display:flex;gap:40px;list-style:none}
nav a{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.82);transition:color .3s;position:relative;padding:4px 0}
nav a:hover{color:#fff}
nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .3s var(--ease)}
nav a:hover::after{width:100%}
header.scrolled{background:rgba(255,255,255,.95);border-color:var(--line);backdrop-filter:saturate(160%) blur(10px)}
header.scrolled .bar{height:66px}
header.scrolled .name{color:var(--ink)}
header.scrolled nav a{color:var(--muted)}
header.scrolled nav a:hover{color:var(--blue)}
header.scrolled .brand img{box-shadow:0 0 0 1px var(--line)}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:url('assets/hero.jpg') center/cover no-repeat;
  transform:scale(1.1);animation:kenburns 24s var(--ease) forwards}
@keyframes kenburns{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;
  background:
   linear-gradient(95deg,rgba(16,24,38,.72) 0%,rgba(16,24,38,.42) 42%,rgba(16,24,38,.08) 72%),
   linear-gradient(180deg,rgba(16,24,38,.32) 0%,rgba(16,24,38,.16) 45%,rgba(16,24,38,.64) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:90px}
.hero .rule-accent{background:rgba(255,255,255,.8);width:54px;margin-bottom:28px}
.hero h1{font-size:clamp(29px,3.9vw,52px);font-weight:300;letter-spacing:.012em;line-height:1.18;max-width:880px;
  margin:0 0 16px;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.hero .lede{font-size:15px;font-weight:400;letter-spacing:.06em;color:rgba(255,255,255,.92);text-shadow:0 1px 18px rgba(0,0,0,.5)}
.hero .cta{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 38px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid;transition:.35s var(--ease)}
.btn-primary{background:#fff;border-color:#fff;color:var(--ink)}
.btn-primary:hover{background:transparent;color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost:hover{background:#fff;border-color:#fff;color:var(--ink)}
.scrolldown{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);z-index:2;color:rgba(255,255,255,.75);font-size:22px;animation:bob 2.2s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* sections */
section{padding:124px 0}
.section-head{margin-bottom:56px}
.section-head h2{font-size:clamp(32px,4vw,46px);font-weight:300;letter-spacing:.02em}

/* projects — uniform architectural grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{position:relative;overflow:hidden;cursor:pointer;aspect-ratio:4/3;background:var(--mist)}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.card:hover img{transform:scale(1.05)}
.card::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.7);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.card:hover::after{opacity:1}
.card .plus{position:absolute;bottom:16px;right:18px;color:#fff;font-size:22px;font-weight:300;opacity:0;transform:translateY(6px);transition:.45s var(--ease);text-shadow:0 1px 6px rgba(0,0,0,.4)}
.card:hover .plus{opacity:1;transform:none}
.card:nth-child(2){transition-delay:.07s}
.card:nth-child(3){transition-delay:.14s}
.card:nth-child(4){transition-delay:.07s}
.card:nth-child(5){transition-delay:.14s}
.card:nth-child(6){transition-delay:.21s}

/* contact */
.contact{background:var(--blue-deep);color:#fff}
.contact h2{color:#fff}
.contact .rule-accent{background:var(--blue-soft)}
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.cinfo .row{display:flex;gap:24px;padding:22px 2px;border-top:1px solid rgba(255,255,255,.15);color:#fff}
.cinfo .row:last-child{border-bottom:1px solid rgba(255,255,255,.15)}
.cinfo .lbl{flex:0 0 104px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--blue-soft);padding-top:4px}
.cinfo .val{font-size:16px;font-weight:300;line-height:1.6}
.cinfo a.row .val{transition:color .3s}
.cinfo a.row:hover .val{color:#d7e4f4}

/* footer */
footer{background:#161d24;color:rgba(255,255,255,.5);padding:44px 0;font-size:12px;letter-spacing:.05em}
footer .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px}
footer a{color:rgba(255,255,255,.72);transition:color .3s}
footer a:hover{color:#fff}
footer .links{display:flex;gap:26px}

/* lightbox */
.lb{position:fixed;inset:0;background:rgba(12,16,22,.94);z-index:100;display:flex;align-items:center;justify-content:center;padding:40px;opacity:0;pointer-events:none;transition:opacity .4s var(--ease)}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:90vw;max-height:85vh;transform:scale(.97);transition:transform .4s var(--ease)}
.lb.open img{transform:scale(1)}
.lb .close{position:absolute;top:24px;right:32px;color:#fff;font-size:30px;font-weight:300;cursor:pointer;line-height:1}

@media(prefers-reduced-motion:reduce){
  #intro{display:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .hero::before{animation:none;transform:scale(1)}
}
@media(max-width:900px){
  nav{display:none}
  .contact-grid{grid-template-columns:1fr;gap:36px}
  .grid{grid-template-columns:repeat(2,1fr)}
  section{padding:80px 0}
}
@media(max-width:560px){
  .grid{grid-template-columns:1fr}
  .hero .cta{flex-direction:column}
  .btn{text-align:center}
}