:root{
  --ink:#efe6db;
  --muted:#bbaa99;
  --copper:#b66d43;
  --line:#8e6046;
  --stage-max:1440px;
  --curtain:#211b17;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#171311;color:var(--ink);font-family:Georgia,'Times New Roman',serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}

.hero-scroll{height:100vh;background:#171311;position:relative;z-index:1}
.hero-sticky{height:100vh;position:sticky;top:0;overflow:hidden;display:grid;place-items:center;background:#171311}
.hero-stage{
  position:relative;
  width:min(100vw,var(--stage-max),calc(100vh * 16 / 9));
  aspect-ratio:16/9;
  overflow:hidden;
  isolation:isolate;
  background:#241914;
}
.hero-bg{position:absolute;inset:0;z-index:0;background:url("assets/hero-bg.jpg") center/100% 100% no-repeat}
.hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,7,.20) 0%,rgba(10,8,7,.04) 42%,rgba(10,8,7,0) 72%),linear-gradient(180deg,rgba(5,4,3,.05),transparent 30%,rgba(5,4,3,.08));pointer-events:none}
.site-header{position:absolute;z-index:8;left:4.8%;right:4.8%;top:2.8%;height:8.8%;display:grid;grid-template-columns:1fr 27% 1fr;align-items:start;gap:2%}
.nav{display:flex;gap:clamp(22px,2.6vw,48px);padding-top:1.1%;font-size:clamp(11px,.85vw,14px)}
.nav a{opacity:.93;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.brand{display:flex;justify-content:center;align-items:flex-start}.brand img{width:100%;max-width:300px;height:auto;display:block;filter:drop-shadow(0 3px 12px rgba(0,0,0,.28))}
.header-right{display:flex;align-items:center;justify-content:flex-end;gap:18px;padding-top:.6%;font:clamp(8px,.68vw,11px)/1.35 Arial,sans-serif;letter-spacing:.17em;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.header-right i{width:38px;height:1px;background:#b18a70}.lang{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid #b78a6b;background:rgba(25,18,14,.2);color:#fff;font:11px Arial}
.menu-btn{display:none;background:transparent;border:0;color:#fff}.menu-btn span{display:block;width:24px;height:1px;background:#fff;margin:6px}
.hero-copy{position:absolute;z-index:6;left:5.2%;top:20.2%;width:29.2%}
.eyebrow{font:clamp(8px,.68vw,11px) Arial,sans-serif;letter-spacing:.27em;color:#eaded2}
.hero-copy h1{font-size:clamp(44px,3.65vw,59px);font-weight:400;line-height:.98;margin:16px 0 20px;text-shadow:0 2px 22px rgba(0,0,0,.32)}
.hero-sub{margin:0;font:clamp(12px,.95vw,16px)/1.34 Arial,sans-serif;color:#e0d3c6}
.cta{margin-top:24px;border:1px solid #a57556;width:min(100%,310px);height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:rgba(31,22,17,.12);backdrop-filter:blur(2px);font:clamp(9px,.68vw,11px) Arial,sans-serif;letter-spacing:.22em}
.cta b{font-size:24px;font-weight:300}.hero-copy blockquote{margin:37px 0 0;color:#d2bdab;font-size:clamp(12px,.92vw,15px);line-height:1.45;font-style:italic}.hero-copy blockquote small{display:block;margin-top:9px;font-style:normal}

/* floating video panel: deliberately not tied to the architecture */
.hero-video-card{position:absolute;z-index:7;left:38.7%;top:17.5%;width:24.6%;height:64%;overflow:hidden;border-radius:24px;background:#0d0b0a;border:1px solid rgba(235,215,194,.68);box-shadow:0 28px 65px rgba(0,0,0,.42),0 8px 24px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.06)}
.hero-video-card video{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:saturate(.94) contrast(1.03) brightness(.88)}
.hero-video-card:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(18,12,9,.10),transparent 24%,transparent 74%,rgba(8,6,5,.14))}
.video-glass{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 28px rgba(255,235,214,.04)}

/* projects physically slide over the hero */
.projects{position:relative;z-index:20;margin-top:-10vh;border-radius:34px 34px 0 0;box-shadow:0 -28px 58px rgba(0,0,0,.28);background:linear-gradient(110deg,#222 0%,#514941 100%);padding:120px 0 160px;overflow:hidden}

.section-shell{width:min(calc(100% - 48px),1240px);margin:auto}
.projects-head{margin-bottom:110px}
.projects-head p,.copper{font:11px Arial,sans-serif;letter-spacing:.24em;color:#c48258}
.projects-head h2,.about h2,footer h2{font-weight:400;font-size:52px;margin:14px 0}
.project{min-height:620px;display:grid;grid-template-columns:36% 64%;align-items:center;gap:70px;position:relative}
.project-b{grid-template-columns:64% 36%}
.project:after{content:'';position:absolute;width:460px;height:460px;border:1px solid rgba(182,109,67,.24);border-radius:50%;z-index:0}
.project-a:after{right:-260px;bottom:-120px}
.project-b:after{left:-280px;top:-60px}
.project-copy,.project-visual{position:relative;z-index:2}
.project-copy h3{font-size:36px;font-weight:400;margin:28px 0 10px}
.project-copy p{font:16px/1.5 Arial,sans-serif;color:#d0c4b9;max-width:440px}
.project-copy .meta{color:#b9aa9d;font-size:14px}
.project-copy a{display:inline-flex;gap:40px;margin-top:26px;padding-bottom:8px;border-bottom:1px solid #a86643;font:11px Arial,sans-serif;letter-spacing:.2em}
.project-num{font:52px Georgia;color:#b8754e}.project-num span{font:13px Arial;color:#c7b9ad}
.project-visual{height:420px;border-radius:20px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.24);display:flex;align-items:flex-end;padding:28px;background-size:cover;background-position:center}
.project-visual span{font:11px Arial,sans-serif;letter-spacing:.2em;color:rgba(255,255,255,.72)}
.visual-one{background:linear-gradient(135deg,rgba(20,20,20,.35),rgba(20,20,20,.05)),radial-gradient(circle at 65% 36%,#d8d3cb 0 8%,transparent 8%),linear-gradient(135deg,#b9b6b0 0 25%,#6f6f6c 25% 55%,#2b2d30 55%)}
.visual-two{background:linear-gradient(135deg,rgba(26,18,12,.1),rgba(0,0,0,.25)),linear-gradient(115deg,#b7a28c,#725a48 38%,#342d28 38% 58%,#c4b9aa 58%)}
.visual-three{background:linear-gradient(135deg,rgba(33,18,12,.22),rgba(0,0,0,.15)),linear-gradient(110deg,#4e281c 0 28%,#1f1b19 28% 50%,#9e6d4a 50% 70%,#2e2420 70%)}
.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

.about{background:linear-gradient(110deg,#252525,#645b53);padding:150px 0}
.about-grid{display:grid;grid-template-columns:42% 58%;align-items:center;gap:80px}
.portrait-arch{height:650px;border:2px solid #b69a78;border-radius:240px 240px 0 0;overflow:hidden;background:linear-gradient(145deg,#eeeae1 0 55%,#cfc8bd 55%)}
.portrait-placeholder{height:100%;display:flex;align-items:center;justify-content:center;font-size:46px;color:#56483e;letter-spacing:.12em}
.about-lead{font-size:31px;font-style:italic;line-height:1.4}
.about-copy>p:not(.eyebrow):not(.about-lead){font:17px/1.5 Arial,sans-serif;color:#d0c4b9}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px}
.facts div{padding:0 20px;border-right:1px solid #d7c9bb}
.facts div:first-child{padding-left:0}.facts div:last-child{border-right:0}
.facts b{display:block;font-size:34px;font-weight:400}
.facts span{display:block;margin-top:14px;font:14px/1.35 Arial,sans-serif;color:#c7b9ad}

footer{background:linear-gradient(110deg,#202020,#5b534c);padding:130px 0 150px}
.contact-grid{display:grid;grid-template-columns:40% 60%;gap:80px}
.contact-grid>div:first-child p{font:17px Arial,sans-serif;color:#c7b9ad}
.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:24px 50px}
.contact-links a{padding:18px 0;border-bottom:1px solid #a86643;font:14px/1.5 Arial,sans-serif;color:#bcae9f}
.contact-links b{font-weight:400;color:#eee0d2;font-size:19px}

/* tablet: no attempt to force the exact desktop scene.
   It becomes a clean, stable composition rather than drifting coordinates. */
@media(max-width:900px){
  .hero-scroll{height:auto}
  .hero-sticky{height:auto;min-height:100svh;position:relative;display:block}
  .hero-stage{
    width:100%;
    min-height:100svh;
    aspect-ratio:auto;
    overflow:hidden;
    background:#211712;
  }
  .hero-bg{
    background-image:
      linear-gradient(180deg,rgba(20,13,10,.05),rgba(20,13,10,.28)),
      url("assets/hero-bg.jpg");
    background-size:auto 100%;
    background-position:63% center;
  }
  .site-header{
    position:relative;left:auto;right:auto;top:auto;
    width:min(calc(100% - 30px),760px);
    height:90px;margin:auto;
    grid-template-columns:52px 1fr 52px;
    align-items:center;
  }
  .nav,.header-right{display:none}
  .menu-btn{display:block}
  .brand img{width:220px;max-width:100%}
  .hero-copy{
    position:relative;left:auto;top:auto;
    width:min(calc(100% - 36px),700px);
    margin:0 auto;
    padding:48vh 0 65px;
  }
  .hero-copy h1{font-size:clamp(46px,8vw,66px)}
  .hero-copy blockquote{display:none}
  .hero-video-card{
    left:50%;top:105px;
    transform:translateX(-50%);
    width:min(43vw,330px);
    height:min(57vh,500px);
    border-radius:48% 48% 8px 8px / 20% 20% 8px 8px;
  }
  .projects{padding-top:90px}
  .project,.project-b{grid-template-columns:1fr;min-height:0;margin:0 0 110px;gap:35px}
  .project-b .project-visual{order:2}.project-b .project-copy{order:1}
  .project-visual{height:360px}
  .projects-head{margin-bottom:70px}
  .projects-head h2,.about h2,footer h2{font-size:42px}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .portrait-arch{height:520px;max-width:380px}
  .facts{grid-template-columns:1fr;gap:25px}
  .facts div{border-right:0;border-bottom:1px solid rgba(255,255,255,.2);padding:0 0 20px}
  .contact-links{grid-template-columns:1fr 1fr}
}

@media(max-width:560px){
  .site-header{height:76px}
  .brand img{width:188px}
  .hero-video-card{
    top:86px;width:62vw;max-width:250px;height:43vh;max-height:390px;
  }
  .hero-copy{padding-top:52vh;padding-bottom:54px}
  .hero-copy h1{font-size:44px;line-height:.98;margin:16px 0}
  .hero-sub{font-size:14px}
  .cta{height:52px;width:100%;margin-top:22px}
  .projects{padding:74px 0 100px}
  .section-shell{width:min(calc(100% - 30px),1240px)}
  .projects-head h2,.about h2,footer h2{font-size:36px}
  .project-copy h3{font-size:31px}.project-num{font-size:42px}.project-visual{height:280px}
  .about{padding:100px 0}.portrait-arch{height:460px}.about-lead{font-size:25px}
  .contact-links{grid-template-columns:1fr}
}