/* ==========================================================================
   SKYRISE — Luxury Construction Design System
   Red on Black. Blueprint-inspired structure, architectural restraint.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --black:      #0a0a0b;
  --black-2:    #131315;
  --black-3:    #1c1c1f;
  --line:       rgba(238,232,222,0.10);
  --line-red:   rgba(196,20,45,0.45);
  --red:        #9c1224;
  --red-2:      #c4142d;
  --red-glow:   rgba(196,20,45,0.35);
  --ivory:      #eee8de;
  --muted:      #a39a8f;
  --muted-2:    #706a63;

  --display:    'Cormorant Garamond', Georgia, serif;
  --body:       'Jost', Arial, sans-serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--ivory);
  font-family:var(--body);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--red); color:var(--ivory); }

/* focus visibility */
a:focus-visible, button:focus-visible{
  outline:1px solid var(--red-2);
  outline-offset:4px;
}

/* ============ Eyebrow / labels ============ */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--body);
  font-size:12px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{
  content:"";
  width:22px;
  height:1px;
  background:var(--red-2);
  display:inline-block;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:500;
  letter-spacing:.01em;
  margin:0;
  color:var(--ivory);
}

/* ============ corner-bracket "drawing register" motif ============ */
.bracketed{ position:relative; }
.bracketed::before,
.bracketed::after{
  content:"";
  position:absolute;
  width:16px; height:16px;
  border:1px solid var(--red-2);
  opacity:.9;
}
.bracketed::before{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.bracketed::after{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

/* ============ Header / Nav ============ */
header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 40px;
  background:linear-gradient(to bottom, rgba(10,10,11,.85), rgba(10,10,11,0));
  transition:background .35s ease, padding .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.scrolled{
  background:rgba(10,10,11,.92);
  backdrop-filter:blur(10px);
  padding:14px 40px;
  border-bottom:1px solid var(--line);
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}
.brand img{ max-width:120px; }
.brand-word{
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.14em;
  color:var(--ivory);
  text-transform:uppercase;
}

.menu-icon{
  width:30px; height:20px;
  cursor:pointer;
  position:relative;
  z-index:1300;
}
.menu-icon span{
  display:block;
  height:1px;
  background:var(--ivory);
  margin:8px 0;
  transition:.3s;
}
.menu-icon.active span:nth-child(1){ transform:translateY(9px) rotate(45deg); }
.menu-icon.active span:nth-child(2){ opacity:0; }
.menu-icon.active span:nth-child(3){ transform:translateY(-9px) rotate(-45deg); }

.side-menu{
  position:fixed;
  top:0; right:-360px;
  width:320px;
  max-width:82vw;
  height:100%;
  background:#0d0d0e;
  border-left:1px solid var(--line);
  padding:120px 44px 40px;
  transition:right .5s cubic-bezier(.16,1,.3,1);
  z-index:1200;
}
.side-menu.open{ right:0; }
.side-menu a{
  display:block;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  color:var(--ivory);
  text-decoration:none;
  font-size:14px;
  letter-spacing:.24em;
  text-transform:uppercase;
  position:relative;
}
.side-menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:0; height:1px;
  background:var(--red-2);
  transition:width .35s ease;
}
.side-menu a:hover::after{ width:100%; }
.side-menu .menu-foot{
  margin-top:40px;
  color:var(--muted-2);
  font-size:12px;
  letter-spacing:.1em;
  border-bottom:none;
}
.scrim{
  position:fixed; inset:0;
  background:rgba(0,0,0,.5);
  opacity:0; pointer-events:none;
  transition:opacity .4s ease;
  z-index:1100;
}
.scrim.open{ opacity:1; pointer-events:auto; }

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:15px 34px;
  border:1px solid var(--red-2);
  color:var(--ivory);
  text-decoration:none;
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  font-family:var(--body);
  position:relative;
  overflow:hidden;
  transition:color .35s ease, border-color .35s;
}
.btn::before{
  content:"";
  position:absolute; inset:0;
  background:var(--red);
  transform:translateX(-102%);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  z-index:-1;
}
.btn:hover::before{ transform:translateX(0); }
.btn:hover{ border-color:var(--red); }

/* ============ Hero (home) ============ */
.hero{ position:relative; height:100vh; min-height:640px; overflow:hidden; }
#bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; filter:grayscale(35%) brightness(.55); }
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.35) 45%, rgba(10,10,11,.95) 100%);
  z-index:-1;
}
.overlay{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(760px,88vw);
  text-align:center;
  padding:20px;
}
.overlay .eyebrow{ justify-content:center; margin-bottom:22px; }
.overlay h1{
  font-size:clamp(38px,6vw,72px);
  line-height:1.08;
  color:var(--ivory);
  margin-bottom:26px;
}
.overlay h1 em{ font-style:italic; color:var(--red-2); }
.overlay p{
  color:var(--muted);
  font-size:16px;
  margin-bottom:34px;
  letter-spacing:.02em;
}
.scroll-cue{
  position:absolute;
  bottom:34px; left:50%;
  transform:translateX(-50%);
  width:1px; height:60px;
  background:linear-gradient(var(--red-2), transparent);
}

/* ============ Section shell ============ */
section{ padding:110px 40px; position:relative; }
.section-alt{ background:var(--black-2); }
.container{ max-width:1180px; margin:0 auto; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 64px; }
.section-head h2{ font-size:clamp(30px,4vw,46px); margin-top:16px; }
.section-head p{ color:var(--muted); margin-top:16px; font-size:15px; }
.hr{ height:1px; background:var(--line); border:0; margin:0; }
.hr-red{ height:1px; width:60px; background:var(--red-2); margin:22px auto; border:0; }

/* ============ Stats / counters ============ */
.counters{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:70px;
  background:var(--black-2);
  padding:70px 40px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.counter{ text-align:center; }
.counter span{
  display:block;
  font-family:var(--display);
  font-size:52px;
  color:var(--red-2);
  margin-bottom:8px;
}
.counter label{
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============ Projects grid (home) ============ */
.projects{ background:var(--black); }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); }
.card{ position:relative; overflow:hidden; background:var(--black); aspect-ratio:4/3; }
.card img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1), filter .5s; filter:grayscale(55%) brightness(.75); }
.card:hover img{ transform:scale(1.07); filter:grayscale(0%) brightness(.9); }
.card a{ display:block; height:100%; text-decoration:none; }
.card .tag{
  position:absolute; top:16px; left:16px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-red); padding:5px 10px;
  background:rgba(10,10,11,.55);
}
.info{
  position:absolute; left:0; right:0; bottom:0;
  padding:20px 22px;
  background:linear-gradient(0deg, rgba(10,10,11,.92), transparent);
}
.info .loc{ display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--red-2); margin-bottom:6px; }
.info .name{ font-family:var(--display); font-size:20px; color:var(--ivory); }

/* ============ Services ============ */
.services-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.service-card{
  background:var(--black);
  padding:40px 34px;
  transition:background .35s ease;
}
.service-card:hover{ background:var(--black-2); }
.service-card .num{ color:var(--red-2); font-family:var(--display); font-size:14px; letter-spacing:.1em; }
.service-card img{ width:100%; height:190px; object-fit:cover; margin:20px 0 22px; filter:grayscale(50%) brightness(.8); }
.service-card h3{ font-size:23px; margin-bottom:12px; }
.service-card p{ color:var(--muted); font-size:15px; }

/* ============ About ============ */
.about-block{ max-width:820px; margin:0 auto; }
.about-block h2{ font-size:30px; color:var(--ivory); margin:46px 0 14px; }
.about-block h2:first-child{ margin-top:0; }
.about-block p{ color:var(--muted); font-size:17px; }
.about-block ul{ list-style:none; margin:0; padding:0; }
.about-block ul li{
  display:flex; gap:14px; align-items:flex-start;
  padding:16px 0; border-bottom:1px solid var(--line);
  color:var(--ivory); font-size:16px;
}
.about-block ul li::before{ content:"—"; color:var(--red-2); }
.pull{
  border-left:1px solid var(--red-2);
  padding:6px 0 6px 26px;
  font-family:var(--display);
  font-style:italic;
  font-size:22px;
  color:var(--ivory);
  margin:44px 0;
}

/* ============ Contact ============ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.info-box{ padding:26px 0; border-bottom:1px solid var(--line); }
.info-box .k{ display:block; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--red-2); margin-bottom:8px; }
.info-box p{ color:var(--ivory); font-size:17px; margin:0; }
.info-box a{ text-decoration:none; }
.map-frame{ border:1px solid var(--line); aspect-ratio:4/3; overflow:hidden; }
.map-frame iframe{ width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) contrast(.9); }

/* ============ Gallery pages ============ */
.gallery-head{ padding:150px 40px 40px; }
.gallery-head .back{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--muted); text-decoration:none; font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:30px;
}
.gallery-head .back:hover{ color:var(--red-2); }
.gallery-head .sheet{ color:var(--red-2); font-size:12px; letter-spacing:.3em; text-transform:uppercase; margin-bottom:14px; display:block; }
.gallery-head h1{ font-size:clamp(30px,4vw,46px); }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2px; background:var(--line); border:1px solid var(--line); padding:0 40px 100px; max-width:1180px; margin:0 auto; }
.gallery a{ display:block; overflow:hidden; background:var(--black); aspect-ratio:4/3; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease, filter .4s; filter:grayscale(45%) brightness(.8); }
.gallery a:hover img{ transform:scale(1.06); filter:grayscale(0%) brightness(.95); }

/* ============ CTA strip ============ */
.cta-strip{
  text-align:center;
  background:var(--black-2);
  border-top:1px solid var(--line);
}
.cta-strip h2{ font-size:clamp(26px,4vw,40px); margin-bottom:26px; }
.cta-strip p{ color:var(--muted); margin-bottom:34px; }

/* ============ Footer ============ */
.footer{
  background:var(--black);
  border-top:1px solid var(--line);
  padding:50px 40px 26px;
}
.footer-inner{
  max-width:1180px; margin:0 auto;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px;
  padding-bottom:28px; border-bottom:1px solid var(--line);
}
.footer-brand{ font-family:var(--display); font-size:20px; letter-spacing:.12em; text-transform:uppercase; }
.footer-links{ display:flex; gap:28px; flex-wrap:wrap; }
.footer-links a{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.footer-links a:hover{ color:var(--red-2); }
.footer-bottom{
  max-width:1180px; margin:22px auto 0;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; color:var(--muted-2); letter-spacing:.05em;
}

/* ============ Responsive ============ */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr; }
}
@media (max-width:768px){
  header{ padding:18px 22px; }
  section{ padding:80px 22px; }
  .gallery-head{ padding:120px 22px 30px; }
  .gallery{ padding:0 22px 70px; }
  .counters{ gap:40px; padding:50px 22px; }
  .counter span{ font-size:40px; }
}