/* =========================================================
   Junoarcadequartr — Premium Scandinavian Interior Design
   Color System:
   Background: #f5f5f4 (primary), #e7e5e4 (secondary)
   Text: #1c1917 (primary), #57534e (secondary)
   Accents: Wood #b08968, Green #6b8f71
   Card: #ffffff, Shadow: rgba(0,0,0,0.08)
   ========================================================= */

/* Root variables */
:root{
  --bg: #f5f5f4;
  --bg-weak: #e7e5e4;
  --card: #ffffff;
  --text: #1c1917;
  --text-weak: #57534e;
  --wood: #b08968;
  --green: #6b8f71;
  --shadow: 0 10px 30px rgba(0,0,0,0.08);
  --line: rgba(0,0,0,0.08);
  --radius: 10px;
  --header-w: 90px; /* FIXED right sidebar width */
  --header-shadow: 0 0 1px rgba(0,0,0,0.06), 0 6px 24px rgba(0,0,0,0.06);
  --container-pad: clamp(18px, 2vw, 28px);
  --section-pad: clamp(44px, 7vw, 90px);
  --maxw: 1200px;
}

/* Global reset/typography */
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, Manrope, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p{color:var(--text-weak)}
h1,h2,h3{line-height:1.2;color:var(--text);margin:0 0 10px}
h1{font-size:clamp(34px, 5vw, 56px);letter-spacing:-0.02em}
h2{font-size:clamp(26px, 3.2vw, 36px)}
h3{font-size:clamp(18px, 2.2vw, 22px);font-weight:600}
.section{padding:var(--section-pad) var(--container-pad)}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 auto var(--container-pad);max-width:var(--maxw)}
.link-more{color:var(--text-weak);border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .2s ease}
.link-more:hover{color:var(--text)}

/* Accessibility */
.skip-link{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link:focus{
  left:10px;top:10px;width:auto;height:auto;background:#fff;color:#000;padding:8px 12px;border-radius:6px;z-index:9999;box-shadow:var(--shadow)
}

/* Layout Fix: Main container margin-right to avoid header overlap on desktop */
.main-container{
  margin-right: calc(var(--header-w) + 10px); /* 100px as required */
}

/* Header — Fixed Right Sidebar (Desktop) */
.site-header{
  position:fixed; inset:0 0 0 auto; width:var(--header-w); height:100vh;
  background:#fff; border-left:1px solid var(--line); box-shadow:var(--header-shadow);
  z-index:1000; /* above content */
  display:flex; align-items:stretch; justify-content:flex-start;
}
.site-header .header-inner{
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  height:100%; width:100%;
}

/* Header Top */
.logo-vertical{
  display:flex;align-items:center;justify-content:center;width:100%;height:72px;
  font-weight:700;letter-spacing:0.08em;text-transform:uppercase;font-size:11px;color:var(--text);
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.hamburger{
  display:none; /* visible on tablet/mobile */
  position:absolute; right:18px; top:18px; width:36px; height:36px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
}
.hamburger-line{display:block;height:2px;background:var(--text);margin:6px 8px}

/* Nav */
.primary-nav{flex:1; display:flex; align-items:center}
.primary-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;width:100%}
.primary-nav a{
  position:relative; display:flex; align-items:center; justify-content:center;
  gap:10px; padding:12px 10px; color:var(--text-weak);
  transition:color .2s ease, background .2s ease;
}
.primary-nav a:hover{color:var(--text)}
.primary-nav .nav-ico{display:inline-flex;align-items:center;justify-content:center}
.primary-nav .nav-text{display:none} /* hidden in sidebar; visible on tablet+mobile top nav */

/* Hover slide-in tooltip labels (outside header, left side) */
.primary-nav a .nav-label{
  position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%) translateX(6px);
  background:#1c1917; color:#fff; padding:6px 10px; border-radius:8px; font-size:12px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.primary-nav a:hover .nav-label{opacity:1; transform:translateY(-50%) translateX(0)}
.primary-nav a[aria-current="page"]{
  color:var(--text);
}
.primary-nav li a[aria-current="page"]::before{
  content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; background:var(--wood); border-radius:2px;
}

/* Header bottom CTA */
.header-bottom{padding:14px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 18px; border-radius:var(--radius); border:1px solid transparent;
  font-weight:600; transition:transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease;
  text-decoration:none; cursor:pointer;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn:active{transform:translateY(0)}
.btn-dark{background:#1c1917;color:#fff}
.btn-dark:hover{background:#26221f}
.btn-outline{background:transparent;border-color:var(--text);color:var(--text)}
.btn-outline:hover{background:#1c1917;color:#fff}
.btn-accent{background:var(--wood);color:#fff}
.btn-accent:hover{background:#a27d5c}

/* Hero */
.hero .hero-grid{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(18px, 2.8vw, 38px); align-items:center;
}
.hero-content p{font-size:clamp(16px,1.6vw,18px)}
.hero-ctas{display:flex;gap:12px;margin-top:18px}
.hero-media img{border-radius:16px; box-shadow:var(--shadow)}

/* Projects grid */
.projects .projects-grid,
.page-hero .projects-grid{
  max-width:var(--maxw); margin:0 auto; display:grid;
  grid-template-columns:repeat(3, 1fr); gap:18px;
}
.project-card{
  background:var(--card); border-radius:14px; overflow:hidden;
  box-shadow:var(--shadow); transition:transform .2s ease;
}
.project-card:hover{transform:translateY(-2px)}
.project-figure{position:relative;overflow:hidden;aspect-ratio: 4 / 3}
.project-figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.project-card:hover .project-figure img{transform:scale(1.06)}
.project-overlay{
  position:absolute;inset:auto 0 0 0;padding:14px 16px;
  background:linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
  color:#fff; opacity:0; transition:opacity .3s ease;
}
.project-card:hover .project-overlay{opacity:1}
.project-meta{padding:14px 16px}
.project-location{color:var(--green);font-weight:600}
.project-desc{margin-top:6px}

/* Services */
.services .services-grid{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.service-card{
  background:var(--card); border-radius:14px; padding:20px; box-shadow:var(--shadow); height:100%;
}
.service-ico{color:var(--green); margin-bottom:8px}
.service-list{margin:10px 0 0 18px; color:var(--text-weak)}
.service-list li{margin:6px 0}

/* About */
.about .about-grid{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:center;
}
.about-media img{border-radius:16px; box-shadow:var(--shadow)}
.about-content p{margin-bottom:12px}

/* Testimonials */
.testimonials .testimonials-grid{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.testimonial-card{
  background:var(--card); border-radius:14px; padding:22px; box-shadow:var(--shadow)
}
.testimonial-quote{font-size:18px;color:var(--text)}
.testimonial-author{margin-top:10px;color:var(--text-weak)}

/* Contact */
.contact .contact-grid{
  max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1fr 1.1fr; gap:28px; align-items:start;
}
.contact-details p{margin:6px 0}
.contact-form{
  background:var(--card); border-radius:14px; padding:20px; box-shadow:var(--shadow)
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row .full{grid-column:1/-1}
.form-field{display:flex;flex-direction:column;gap:8px}
label{font-weight:600}
input,select,textarea{
  width:100%; padding:12px 12px; border-radius:10px; border:1px solid var(--bg-weak);
  background:#fff; color:var(--text);
  transition:border-color .2s ease, box-shadow .2s ease;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(107,143,113,0.15)}
.form-note{margin-top:10px;font-size:14px}

/* Project Detail */
.project-detail .project-hero{padding-bottom:20px}
.project-hero-media img{border-radius:16px; box-shadow:var(--shadow); max-height:70vh; object-fit:cover; width:100%}
.project-hero-content{max-width:var(--maxw); margin:16px auto 0; padding:0 var(--container-pad)}
.project-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 16px;padding:0;margin:8px 0 0 0;list-style:none}
.project-body{max-width:var(--maxw);margin:0 auto;padding:0 var(--container-pad) var(--section-pad)}
.project-copy{max-width:820px}
.project-gallery{margin:26px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-item img{border-radius:14px; box-shadow:var(--shadow)}
.project-cta{display:flex;gap:12px;margin-top:6px}

/* Contact CTA */
.contact-cta .cta-inner{
  max-width:var(--maxw); margin:0 auto; background:#fff; border-radius:16px; padding:26px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; align-items:flex-start
}

/* Footer */
.site-footer{padding:28px var(--container-pad) 18px;border-top:1px solid var(--line);background:#fff;margin-top:40px}
.footer-grid{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;align-items:start}
.footer-logo{font-weight:800;letter-spacing:.04em}
.footer-links, .footer-legal{display:flex;flex-direction:column;gap:8px}
.footer-bottom{max-width:var(--maxw);margin:16px auto 0;padding-top:12px;border-top:1px solid var(--line);color:var(--text-weak);font-size:14px}

/* Overlay Menu */
.mobile-menu-overlay{
  position:fixed; inset:0; background:rgba(28,25,23,0.9); color:#fff; display:none;
  z-index:1200;
}
.mobile-menu-overlay.open{display:block; animation:fadeIn .2s ease}
.overlay-inner{position:relative; padding:26px}
.overlay-logo{font-weight:800; font-size:18px}
.overlay-close{position:absolute; right:16px; top:16px; width:40px; height:40px; background:transparent; border:none}
.overlay-close span{position:absolute; left:10px; right:10px; top:19px; height:2px; background:#fff}
.overlay-close span:first-child{transform:rotate(45deg)}
.overlay-close span:last-child{transform:rotate(-45deg)}
.overlay-nav{list-style:none;margin:38px 0 16px;padding:0;display:flex;flex-direction:column;gap:14px}
.overlay-nav a{font-size:24px}
.overlay-nav .cta-link{color:#fff; background:var(--wood); padding:10px 14px; border-radius:10px; display:inline-block}
.overlay-meta{opacity:.85}

/* Reveal animations */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .6s ease}
.reveal.in-view{opacity:1; transform:translateY(0)}

/* Keyframes */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Responsive Rules */

/* Tablet: switch to top header; remove right margin and add top padding to main */
@media (max-width: 1024px){
  .main-container{margin-right:0; padding-top:78px} /* avoid header overlap */
  .site-header{
    position:fixed; inset:0 0 auto 0; width:100%; height:auto; border-left:none; border-bottom:1px solid var(--line);
    display:block;
  }
  .site-header .header-inner{height:auto; flex-direction:row; align-items:center; justify-content:space-between}
  .logo-vertical{
    writing-mode:initial; transform:none; height:auto; width:auto; padding:14px 16px; font-size:14px;
  }
  .hamburger{display:inline-block}
  .primary-nav{display:none} /* hidden in top header; we will rely on overlay for tablet/mobile */
  .header-bottom{display:none}
  .hero .hero-grid{grid-template-columns:1fr 1fr}
  .projects .projects-grid, .page-hero .projects-grid{grid-template-columns:repeat(2,1fr)}
  .services .services-grid{grid-template-columns:repeat(2,1fr)}
  .about .about-grid{grid-template-columns:1fr;gap:18px}
  .testimonials .testimonials-grid{grid-template-columns:repeat(2,1fr)}
  .contact .contact-grid{grid-template-columns:1fr}
  .project-facts{grid-template-columns:1fr}
  .project-gallery{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* Mobile */
@media (max-width: 640px){
  .hero .hero-grid{grid-template-columns:1fr;gap:16px}
  .projects .projects-grid, .page-hero .projects-grid{grid-template-columns:1fr}
  .services .services-grid{grid-template-columns:1fr}
  .testimonials .testimonials-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .project-gallery{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* Prevent overflow images on small screens */
img{max-width:100%;height:auto}

/* END style.css */
/* Background images used (descriptive names noted):
   - hero-scandinavian-living-room (Unsplash ID: photo-1524758631624-e2822e304c36)
   - kitchen-oak-stone (Unsplash ID: photo-1505692794403-34d4982f88aa)
   - livingroom-modular-sofa (Unsplash ID: photo-1493666438817-866a91353ca9)
*/