/* ============================================================
   DONEMA CONSTRUCTION VISION — stylesheet
   ============================================================ */

:root{
  --bg:        #0e0d0b;
  --bg-2:      #141210;
  --surface:   #1a1713;
  --ink:       #f4efe6;
  --ink-soft:  #a59c8d;
  --ink-faint: #6a6256;
  --line:      rgba(244,239,230,0.10);
  --accent:    #d98a3d;   /* warm amber */
  --accent-2:  #e9b878;
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(0.22,1,0.36,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  cursor:none;
}
@media (hover:none){ body{ cursor:auto; } }

img{ display:block; width:100%; height:100%; object-fit:cover; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#1a1208; }

/* ---------- Lenis ---------- */
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed; top:0; left:0; width:10px; height:10px;
  background:var(--accent); border-radius:50%;
  pointer-events:none; z-index:9999; mix-blend-mode:difference;
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease),
             background .35s var(--ease);
}
.cursor.is-hover{ width:54px; height:54px; background:var(--accent-2); }
.cursor.is-view{ width:84px; height:84px; background:#fff; }
.cursor.is-view::after{ content:"View"; color:#111; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  position:absolute; inset:0; display:grid; place-items:center; }
@media (hover:none){ .cursor{ display:none; } }

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  z-index:9998;
}

/* ---------- Preloader ---------- */
.loader{
  position:fixed; inset:0; z-index:10000; background:var(--bg);
  display:grid; place-items:center;
}
.loader__inner{ width:min(420px,72vw); text-align:center; }
.loader__brand{
  font-family:var(--serif); font-size:clamp(2rem,6vw,3.2rem);
  letter-spacing:.18em; color:var(--ink); margin-bottom:1.4rem;
  opacity:.95;
}
.loader__bar{ height:2px; background:var(--line); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2)); }
.loader__count{ margin-top:1rem; font-size:.8rem; letter-spacing:.2em;
  color:var(--ink-soft); }
.loader.is-done{ pointer-events:none; }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; width:100%; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem clamp(1.2rem,4vw,3.5rem);
  transition:padding .5s var(--ease), background .5s var(--ease);
  mix-blend-mode:difference;
}
.nav.is-scrolled{ padding:1rem clamp(1.2rem,4vw,3.5rem); }
.nav__logo{ display:flex; align-items:center; gap:.7rem; }
.nav__logo-mark{
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--ink); border-radius:50%;
  font-family:var(--serif); font-size:1.1rem;
}
.nav__logo-text{ font-family:var(--serif); font-size:1.1rem; line-height:1;
  display:flex; flex-direction:column; }
.nav__logo-text em{ font-style:normal; font-family:var(--sans);
  font-size:.58rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink); opacity:.7; margin-top:3px; }
.nav__links{ display:flex; gap:2.2rem; }
.nav__links a{ font-size:.82rem; letter-spacing:.04em; position:relative;
  padding:.3rem 0; }
.nav__links a::after{ content:""; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:currentColor; transition:width .4s var(--ease); }
.nav__links a:hover::after{ width:100%; }
.nav__cta{ font-size:.8rem; letter-spacing:.04em; padding:.6rem 1.2rem;
  border:1px solid var(--ink); border-radius:40px; }
.nav__burger{ display:none; background:none; border:none; cursor:pointer;
  flex-direction:column; gap:6px; width:30px; }
.nav__burger span{ display:block; height:2px; background:var(--ink);
  transition:.4s var(--ease); }
body.menu-open .nav__burger span:nth-child(1){ transform:translateY(4px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2){ transform:translateY(-4px) rotate(-45deg); }

/* mobile menu */
.menu{
  position:fixed; inset:0; z-index:800; background:var(--bg-2);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.4rem; transform:translateY(-100%); transition:transform .7s var(--ease);
}
.menu a{ font-family:var(--serif); font-size:2rem; }
.menu__call{ color:var(--accent-2) !important; }
body.menu-open .menu{ transform:translateY(0); }

/* ============================================================
   BUTTONS / SHARED
   ============================================================ */
.btn{ display:inline-flex; align-items:center; gap:.6rem;
  font-size:.86rem; letter-spacing:.03em; padding:1rem 1.7rem;
  border-radius:48px; transition:.4s var(--ease); }
.btn svg{ width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.6; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.btn--solid{ background:var(--accent); color:#1a1208; }
.btn--solid:hover{ background:var(--accent-2); }
.btn--ghost{ border:1px solid var(--line); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }

.section-tag{ font-size:.75rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-soft); display:flex; align-items:center; gap:.8rem; }
.section-tag span{ color:var(--accent); font-family:var(--serif);
  font-style:italic; letter-spacing:0; }

.link-underline{ position:relative; font-size:.9rem; letter-spacing:.02em;
  color:var(--accent-2); }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px;
  width:100%; height:1px; background:currentColor; transform:scaleX(.35);
  transform-origin:left; transition:transform .5s var(--ease); }
.link-underline:hover::after{ transform:scaleX(1); }

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; height:100vh; min-height:640px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(1.4rem,5vw,5rem); }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__layer{ position:absolute; inset:-8% -4%; width:108%; height:116%; }
.hero__layer--sky{ background:
  radial-gradient(120% 90% at 70% 10%, #2a2117 0%, var(--bg) 60%); }
.hero__img{ object-fit:cover; opacity:.55; }
.hero__veil{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(14,13,11,.55) 0%, rgba(14,13,11,.25) 40%, rgba(14,13,11,.92) 100%); }
.hero__grain{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.hero__content{ position:relative; z-index:2; max-width:1100px; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:.6rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:1.6rem; }
.hero__eyebrow .dot{ width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 0 rgba(217,138,61,.6);
  animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(217,138,61,.5);}
  70%{box-shadow:0 0 0 14px rgba(217,138,61,0);} 100%{box-shadow:0 0 0 0 rgba(217,138,61,0);} }

.hero__title{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.8rem,9vw,8.2rem); line-height:.96; letter-spacing:-.02em; }
.hero__title em{ font-style:italic; color:var(--accent-2); }
.hero__title .line{ display:block; overflow:hidden; }
.hero__title .line > span{ display:block; }

.hero__sub{ max-width:520px; margin:2rem 0 2.4rem; font-size:1.05rem;
  color:var(--ink-soft); }
.hero__actions{ display:flex; gap:1rem; flex-wrap:wrap; }

.hero__scroll{ position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:.7rem;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-soft); }
.hero__scroll-line{ width:1px; height:48px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll-line::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%;
  background:var(--accent); animation:scrolldown 2s infinite; }
@keyframes scrolldown{ 0%{top:-50%;} 100%{top:100%;} }

.hero__badges{ position:absolute; bottom:2.2rem; right:clamp(1.4rem,5vw,5rem);
  z-index:3; display:flex; gap:1.6rem; }
.badge{ font-size:.78rem; letter-spacing:.06em; display:flex; flex-direction:column;
  color:var(--ink); }
.badge em{ font-style:normal; font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:2.2rem 0; overflow:hidden; white-space:nowrap; background:var(--bg-2); }
.marquee__track{ display:inline-flex; align-items:center; gap:2.5rem;
  will-change:transform; }
.marquee__track span{ font-family:var(--serif); font-size:clamp(1.8rem,4.4vw,3.4rem);
  font-style:italic; color:var(--ink); }
.marquee__track .sep{ color:var(--accent); font-style:normal; font-size:1.2rem; }

/* ============================================================
   INTRO / STATS
   ============================================================ */
section{ padding:clamp(5rem,11vw,11rem) clamp(1.4rem,5vw,5rem); }
.intro__grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,6vw,6rem);
  align-items:start; }
.intro__head{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.8rem,3.6vw,3.2rem); line-height:1.12; letter-spacing:-.01em;
  margin-top:1.6rem; }
.intro__body{ display:flex; flex-direction:column; gap:1.2rem; padding-top:.6rem; }
.intro__body p{ color:var(--ink-soft); font-size:1.02rem; }
.intro__body a{ margin-top:.4rem; }

.stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  margin-top:clamp(3rem,7vw,6rem); border-top:1px solid var(--line); padding-top:3rem; }
.stat__num{ font-family:var(--serif); font-size:clamp(2.6rem,5vw,4.4rem);
  line-height:1; color:var(--ink); }
.stat__label{ margin-top:.6rem; font-size:.84rem; color:var(--ink-soft);
  letter-spacing:.02em; }

/* ============================================================
   SERVICES
   ============================================================ */
.services{ position:relative; }
.services__head{ display:flex; flex-direction:column; gap:1.2rem; margin-bottom:3rem; }
.services__title{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,5vw,4rem); line-height:1.05; max-width:14ch; }
.services__list{ border-top:1px solid var(--line); }
.srv{ position:relative; display:grid;
  grid-template-columns:auto 1fr auto auto; align-items:center;
  gap:2rem; padding:2.2rem 0; border-bottom:1px solid var(--line);
  cursor:none; transition:padding .5s var(--ease); }
.srv__no{ font-family:var(--serif); font-style:italic; color:var(--ink-faint);
  font-size:1rem; transition:color .4s var(--ease); }
.srv__name{ font-family:var(--serif); font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.6rem); transition:transform .5s var(--ease),color .4s; }
.srv__desc{ max-width:42ch; color:var(--ink-soft); font-size:.92rem;
  opacity:.0; transform:translateX(-10px); transition:.5s var(--ease);
  grid-column:2; grid-row:2; margin-top:.4rem; height:0; overflow:hidden; }
.srv__arrow{ font-size:1.6rem; color:var(--ink-faint); opacity:0;
  transform:translateX(-12px); transition:.5s var(--ease); }
.srv:hover{ padding-left:1.4rem; }
.srv:hover .srv__no{ color:var(--accent); }
.srv:hover .srv__name{ color:var(--accent-2); transform:translateX(6px); }
.srv:hover .srv__desc{ opacity:1; transform:translateX(0); height:auto; }
.srv:hover .srv__arrow{ opacity:1; transform:translateX(0); color:var(--accent); }

.services__hover{ position:fixed; top:0; left:0; width:300px; height:380px;
  pointer-events:none; z-index:500; overflow:hidden; border-radius:6px;
  opacity:0; transform:translate(-50%,-50%) scale(.85); transition:opacity .4s var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.5); }
.services__hover img{ transition:transform .6s var(--ease); }
.services__hover.is-active{ opacity:1; }
@media (hover:none){ .services__hover{ display:none; } }

/* ============================================================
   WORK
   ============================================================ */
.work__head{ display:flex; flex-direction:column; gap:1.2rem; margin-bottom:3.2rem; }
.work__title{ font-family:var(--serif); font-weight:400; font-size:clamp(2rem,5vw,4rem);
  line-height:1.05; }
.work__grid{ display:grid; grid-template-columns:repeat(3,1fr);
  grid-auto-rows:300px; gap:1.2rem; }
.card{ position:relative; overflow:hidden; border-radius:4px; cursor:none; }
.card--tall{ grid-row:span 2; }
.card--wide{ grid-column:span 2; }
.card img{ transition:transform 1.1s var(--ease); filter:grayscale(.25) brightness(.85); }
.card:hover img{ transform:scale(1.07); filter:grayscale(0) brightness(1); }
.card figcaption{ position:absolute; left:1.2rem; bottom:1.2rem; z-index:2;
  display:flex; flex-direction:column; transform:translateY(8px); opacity:.85;
  transition:.5s var(--ease); }
.card figcaption span{ font-family:var(--serif); font-size:1.3rem; }
.card figcaption em{ font-style:normal; font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-2); margin-top:3px; }
.card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 40%, rgba(10,9,7,.85)); z-index:1; }
.card:hover figcaption{ transform:translateY(0); opacity:1; }

/* ============================================================
   PROCESS
   ============================================================ */
.process{ background:var(--bg-2); }
.process__head{ margin-bottom:3.4rem; display:flex; flex-direction:column; gap:1.2rem; }
.process__title{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,5vw,4rem); line-height:1.05; max-width:16ch; }
.process__steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; }
.step{ padding:2rem 1.6rem; border:1px solid var(--line); border-radius:6px;
  background:rgba(244,239,230,.015); transition:.5s var(--ease); }
.step:hover{ background:rgba(217,138,61,.06); border-color:rgba(217,138,61,.3);
  transform:translateY(-6px); }
.step__no{ font-family:var(--serif); font-style:italic; color:var(--accent);
  font-size:1.8rem; margin-bottom:1.2rem; }
.step h3{ font-family:var(--serif); font-weight:400; font-size:1.35rem; margin-bottom:.7rem; }
.step p{ color:var(--ink-soft); font-size:.9rem; }

/* ============================================================
   QUOTE
   ============================================================ */
.quote{ text-align:center; }
.quote__inner{ max-width:900px; margin:0 auto; }
.quote__mark{ font-family:var(--serif); font-size:6rem; color:var(--accent);
  line-height:.4; opacity:.6; }
.quote blockquote{ font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,3.8vw,3rem); line-height:1.25; letter-spacing:-.01em;
  margin:1.5rem 0; }
.quote cite{ font-style:normal; font-size:.85rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ position:relative; overflow:hidden; text-align:center; }
.contact__bg{ position:absolute; inset:-10%; z-index:0;
  background:radial-gradient(80% 70% at 50% 0%, rgba(217,138,61,.18), transparent 60%); }
.contact__inner{ position:relative; z-index:1; max-width:1000px; margin:0 auto; }
.contact__inner .section-tag{ justify-content:center; }
.contact__title{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem,8vw,7rem); line-height:1; letter-spacing:-.02em;
  margin:1.6rem 0; }
.contact__title em{ font-style:italic; color:var(--accent-2); }
.contact__title .line{ display:block; overflow:hidden; }
.contact__title .line > span{ display:block; }
.contact__sub{ max-width:540px; margin:0 auto 3rem; color:var(--ink-soft);
  font-size:1.05rem; }
.contact__methods{ display:flex; justify-content:center; flex-wrap:wrap; gap:3rem;
  border-top:1px solid var(--line); padding-top:3rem; }
.contact__method{ display:flex; flex-direction:column; gap:.5rem; align-items:center; }
.contact__label{ font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft); }
.contact__value{ font-family:var(--serif); font-size:clamp(1.1rem,2vw,1.5rem);
  transition:color .4s var(--ease); }
.contact__method:hover .contact__value{ color:var(--accent-2); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ padding:clamp(3rem,6vw,5rem) clamp(1.4rem,5vw,5rem) 2rem;
  border-top:1px solid var(--line); background:var(--bg); }
.footer__top{ margin-bottom:3rem; }
.footer__brand{ font-family:var(--serif); font-size:1.8rem; display:flex;
  flex-direction:column; }
.footer__brand em{ font-style:normal; font-family:var(--sans); font-size:.62rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink-faint); margin-top:4px; }
.footer__tag{ color:var(--ink-soft); margin-top:1rem; max-width:40ch; }
.footer__cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem;
  border-top:1px solid var(--line); padding-top:2.5rem; }
.footer__cols h4{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:1.1rem; font-weight:500; }
.footer__cols a{ display:block; color:var(--ink-soft); font-size:.92rem;
  padding:.3rem 0; transition:color .3s; }
.footer__cols a:hover{ color:var(--accent-2); }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line);
  font-size:.78rem; color:var(--ink-faint); letter-spacing:.04em; }

/* ============================================================
   REVEAL STATES
   ============================================================ */
.reveal-up{ opacity:0; transform:translateY(28px); }
.reveal-words .word{ display:inline-block; opacity:0; transform:translateY(18px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .nav__links, .nav__cta{ display:none; }
  .nav__burger{ display:flex; }
  .intro__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); gap:2rem; }
  .work__grid{ grid-template-columns:repeat(2,1fr); }
  .card--wide{ grid-column:span 2; }
  .process__steps{ grid-template-columns:repeat(2,1fr); }
  .srv{ grid-template-columns:auto 1fr auto; }
  .hero__badges{ display:none; }
}
@media (max-width:560px){
  .stats{ grid-template-columns:1fr 1fr; }
  .work__grid{ grid-template-columns:1fr; grid-auto-rows:260px; }
  .card--wide,.card--tall{ grid-column:auto; grid-row:auto; }
  .process__steps{ grid-template-columns:1fr; }
  .contact__methods{ gap:2rem; }
  .srv__desc{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
  .reveal-up,.reveal-words .word,.hero__title .line>span,.contact__title .line>span{
    opacity:1 !important; transform:none !important; }
}