:root{
  --bg:#efe7db;
  --panel:rgba(255,252,247,.9);
  --panel-2:rgba(255,255,255,.72);
  --text:#1f1a17;
  --muted:#6f6760;
  --border:rgba(31,26,23,.1);
  --shadow:0 10px 30px rgba(31,26,23,.06);
  --radius:20px;
  --container:1080px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
          linear-gradient(rgba(239,231,219,.94),rgba(239,231,219,.94)),
          url('../assets/drydesign-main.jpg') center/cover fixed;
  line-height:1.55;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{font:inherit}

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  background:rgba(239,231,219,.82);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(8px);
}

.topbar-inner{
  max-width:var(--container);
  margin:0 auto;
  padding:12px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand img{
  width:96px;
  height:96px;
  object-fit:contain;
  flex-shrink:0;
  filter:none;
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:rgba(255,255,255,.7);
  border-radius:10px;
  padding:9px 11px;
  cursor:pointer;
}

.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  margin:4px 0;
}

nav ul{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:22px;
  align-items:center;
}

nav a{
  font-size:.9rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  transition:color .2s ease;
}

nav a:hover,
nav a.active{color:var(--text)}

.section{
  max-width:var(--container);
  margin:0 auto;
  min-height:calc(100vh - 140px);
  padding:36px 18px 24px;
  display:flex;
  align-items:center;
}

.panel{
  width:100%;
  background:var(--panel);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  overflow:hidden;
}

.hero-grid,
.content-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
}

.visual{
  min-height:460px;
  background:
          linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),
          url('../assets/drydesign-main.jpg') center/cover no-repeat;
}

.content,
.side-card{
  padding:38px;
}

.logo-mark{
  width:96px;
  margin-bottom:16px;
  filter:none;
}

.eyebrow{
  margin:0 0 10px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.75rem;
}

h1,h2,h3{
  margin:0 0 16px;
  line-height:1.08;
}

h1{font-size:clamp(2rem,4.2vw,3.7rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.8rem)}
h3{font-size:clamp(1rem,1.5vw,1.2rem)}

.lead{
  font-size:clamp(1rem,1.3vw,1.1rem);
  max-width:50ch;
}

.copy{
  font-size:1rem;
  max-width:60ch;
}

.copy p{margin:0 0 14px}

.contact-block{
  display:grid;
  gap:16px;
}

.contact-block strong,
.signature{
  display:block;
  font-size:1rem;
}

.services-list{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.services-list li{
  padding:8px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.5);
  border:1px solid var(--border);
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:20px;
}

.project-link{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:16px;
  aspect-ratio:4/5;
  border:1px solid var(--border);
  box-shadow:0 6px 18px rgba(31,26,23,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}

.project-link:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(31,26,23,.1);
}

.project-link img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.project-overlay{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  background:rgba(255,255,255,.88);
  border-radius:12px;
  padding:12px 14px;
}

.project-overlay h3{
  margin:0 0 4px;
  font-size:1rem;
}

.project-overlay p{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
  color:var(--muted);
  font-size:.92rem;
}

.meta-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 20px;
}

.meta-pills span{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--border);
  font-size:.86rem;
}

.detail-intro{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.68fr);
  gap:18px;
  margin-bottom:22px;
}

.info-card{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
}

.mosaic-gallery{
  position:relative;
}

.mosaic-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}

.mosaic-item{
  position:relative;
  padding:0;
  border:none;
  margin:0;
  background:transparent;
  cursor:pointer;
  border-radius:16px;
  overflow:hidden;
  min-height:140px;
  box-shadow:0 6px 18px rgba(31,26,23,.06);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease;
}

.mosaic-item:hover{
  transform:translateY(-2px);
  filter:brightness(1.02);
  box-shadow:0 10px 22px rgba(31,26,23,.1);
}

.mosaic-item img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/*.mosaic-item::after{
  content:"Open";
  position:absolute;
  left:10px;
  bottom:10px;
  background:rgba(255,255,255,.9);
  color:var(--text);
  padding:7px 10px;
  border-radius:999px;
  font-size:.8rem;
}*/

.span-3{grid-column:span 3}
.span-4{grid-column:span 4}
.span-5{grid-column:span 5}
.span-6{grid-column:span 6}
.span-7{grid-column:span 7}

.row-1{min-height:160px}
.row-2{min-height:220px}
.row-3{min-height:280px}

.gallery-fullscreen{
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(15,12,10,.94);
  visibility:hidden;
  opacity:0;
  transition:opacity .28s ease, visibility .28s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.gallery-fullscreen.active{
  visibility:visible;
  opacity:1;
}

.gallery-fullscreen img{
  max-width:min(980px,90vw);
  max-height:76vh;
  border-radius:14px;
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}

.gallery-controls{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.gallery-btn{
  pointer-events:auto;
  position:absolute;
  border:none;
  background:rgba(255,255,255,.14);
  color:#fff;
  width:46px;
  height:46px;
  border-radius:999px;
  cursor:pointer;
  display:grid;
  place-items:center;
  backdrop-filter:blur(8px);
}

.gallery-btn:hover{background:rgba(255,255,255,.22)}
.gallery-close{top:16px;right:16px}
.gallery-prev{left:16px;top:50%;transform:translateY(-50%)}
.gallery-next{right:16px;top:50%;transform:translateY(-50%)}

.gallery-caption{
  position:absolute;
  left:20px;
  right:20px;
  bottom:16px;
  margin:auto;
  max-width:820px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  border-radius:14px;
  padding:12px 14px;
  text-align:left;
  backdrop-filter:blur(10px);
}

.detail-extra{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:14px;
}

.footer{
  max-width:var(--container);
  margin:0 auto;
  width:100%;
  padding:0 18px 24px;
  color:var(--muted);
  font-size:.95rem;
}

.footer-inner{
  border-top:1px solid var(--border);
  padding:18px 0 0;
  display:grid;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:16px;
  align-items:start;
}

.footer-brand,
.footer-contact,
.footer-copy{
  display:grid;
  gap:6px;
}

.footer-brand strong{
  color:var(--text);
  font-size:1rem;
}

.footer-contact a{
  color:var(--muted);
  transition:color .2s ease;
}

.footer-contact a:hover{
  color:var(--text);
}

.footer-copy{
  text-align:right;
}

@media (max-width:960px){
  .hero-grid,
  .content-grid,
  .detail-intro,
  .detail-extra{
    grid-template-columns:1fr;
  }

  .visual{min-height:280px}
  .content,
  .side-card{padding:28px 22px}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .mosaic-grid{grid-template-columns:repeat(2,1fr)}
  .span-3,.span-4,.span-5,.span-6,.span-7{grid-column:span 1}
  .row-1,.row-2,.row-3{min-height:210px}
}

@media (max-width:760px){
  .topbar-inner{flex-wrap:wrap;padding:10px 16px}
  .brand img{width:80px;height:80px}
  .nav-toggle{display:block}
  nav{width:100%;display:none}
  nav.open{display:block}
  nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:10px 0 2px;
  }

  .section{
    min-height:auto;
    padding:24px 16px 20px;
  }

  .gallery-grid,
  .mosaic-grid,
  .detail-extra{
    grid-template-columns:1fr;
  }

  .gallery-btn{width:42px;height:42px}
  .gallery-caption{left:14px;right:14px;bottom:14px}

  .footer{
    padding:0 16px 24px;
  }

  .footer-inner{
    grid-template-columns:1fr;
    gap:14px;
    padding-top:16px;
  }

  .footer-copy{
    text-align:left;
  }
}

@media (max-width:480px){
  .brand img{width:72px;height:72px}
  .content,
  .side-card{padding:22px 16px}
  .logo-mark{width:78px}
  .project-overlay,
  .gallery-caption{padding:10px 12px}
  .section{padding:20px 14px 16px}

  .footer{
    padding:0 14px 20px;
  }
}