/* ==========================================================================
   Elewally — shared design system
   Used by every page: elewally.html (home), about.html, portfolio.html,
   project-detail.html, before-after.html, upload-your-space.html, contact.html
   ========================================================================== */

:root{
  --plaster:#FFFFFF;
  --plaster-deep:#F3F1EC;
  --plaster-deeper:#C9B98E;
  --ink:#241F19;
  --ink-soft:#4a4237;
  --rust:#BC1D4A;
  --rust-deep:#8D1020;
  --ochre:#B98A2E;
  --sage:#5F6B4E;
  --line: rgba(36,31,25,0.14);
  --paper: #F1ECDF;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--plaster);
  background-image:
    radial-gradient(circle at 12% -10%, rgba(255,255,255,0.5), transparent 42%),
    radial-gradient(circle at 100% 18%, rgba(255,255,255,0.28), transparent 38%),
    radial-gradient(circle at 90% 96%, rgba(36,31,25,0.06), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment:fixed;
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  font-size:16px;
  line-height:1.6;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
.duotone{
  filter: sepia(0.35) saturate(1.15) hue-rotate(-8deg) brightness(0.92) contrast(1.02);
}
.wall-texture{
  filter: saturate(1.12) contrast(1.1) brightness(0.97);
}
h1,h2,h3,h4{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-0.02em;
  color:var(--ink);
}
h3,h4{font-weight:700;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1320px; margin:0 auto; padding:0 32px;}
/* The action rail is fixed to the right edge, so on screens narrower than
   ~1420px the container yields just enough to keep controls at the content's
   right edge (e.g. the FAQ toggles) out from under it. 1320px is unaffected
   wherever it fits. */
@media (min-width:1000px){ .wrap{max-width:min(1320px, calc(100% - 100px));} }
@media (max-width:640px){ .wrap{padding:0 20px;} }

/* ---------- NAV ---------- */
header.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 0;
  transition: background 0.35s ease, padding 0.35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
header.nav.solid{
  background:rgba(231,223,207,0.94);
  backdrop-filter: blur(6px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between;}
.logo{display:block; line-height:0;}
.logo img{height:26px; width:auto; display:block;}
.logo .logo-dark{display:none;}
header.nav.solid .logo .logo-light{display:none;}
header.nav.solid .logo .logo-dark{display:block;}
nav.links{display:flex; gap:34px;}
nav.links a{
  font-size:14.5px; color:rgba(241,236,223,0.82); position:relative; padding:4px 0;
  transition:color .25s ease;
}
nav.links a:hover, nav.links a.current{color:var(--paper);}
nav.links a.current{border-bottom:1px solid var(--rust);}
header.nav.solid nav.links a{color:var(--ink-soft);}
header.nav.solid nav.links a:hover, header.nav.solid nav.links a.current{color:var(--ink);}
.nav-cta{
  background:var(--ink); color:var(--paper); font-size:14px; font-weight:500;
  padding:10px 20px; border-radius:2px; transition:background .25s ease;
  border:1px solid rgba(241,236,223,0.3);
}
.nav-cta:hover{background:var(--rust); border-color:var(--rust);}
header.nav.solid .nav-cta{border-color:var(--ink);}
.nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.nav-toggle span{width:22px; height:2px; background:var(--paper); display:block; transition:background .25s ease;}
header.nav.solid .nav-toggle span{background:var(--ink);}
@media (max-width:860px){
  nav.links{display:none;}
  .nav-toggle{display:flex;}
}

/* ---------- HERO (homepage banner) ---------- */
.hero{
  position:relative;
  min-height:80vh;
  display:flex; align-items:flex-end;
  padding-top:120px;
  overflow:hidden;
  background:var(--ink);
}
@media (max-width:900px){
  .hero{min-height:auto; padding-top:110px;}
}
.hero-media{position:absolute; inset:0; overflow:hidden;}
.hero-media img{width:100%; height:118%; object-fit:cover; opacity:0.62; will-change:transform;}
/* The home banner carries a photograph rather than a flat backdrop, so it runs
   at full strength and is held back by the scrim instead of by opacity. */
.hero .hero-media img.hero-photo{opacity:1; object-position:50% 55%;}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  /* Weighted to the left, where the copy sits, and clearing to the right so the
     finish itself stays visible beside the form. */
  background:
    linear-gradient(100deg,
      rgba(30,22,16,0.88) 0%,
      rgba(30,22,16,0.66) 30%,
      rgba(30,22,16,0.22) 58%,
      rgba(30,22,16,0.10) 100%),
    linear-gradient(180deg,
      rgba(30,22,16,0.62) 0%,
      rgba(30,22,16,0.22) 18%,
      rgba(30,22,16,0.00) 34%,
      rgba(30,22,16,0.55) 100%);
}
.hero-content{
  position:relative; z-index:2; width:100%;
  padding-bottom:104px;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:64px; align-items:end;
}

/* eyebrow: a short rust rule, then the line */
.hero-eyebrow{
  display:flex; align-items:center; gap:14px;
  color:rgba(241,236,223,0.78);
  font-size:12.5px;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:24px;
}
.hero-eyebrow::before{
  content:""; width:28px; height:2px; background:var(--rust); flex-shrink:0;
}

h1.hero-headline{
  color:var(--paper);
  font-size:clamp(36px, 4.6vw, 60px);
  max-width:800px;
  font-weight:500;
  line-height:1.06;
  letter-spacing:-0.03em;
}
/* Typographic contrast inside the headline: a light opening, one outlined
   word, and a heavy close with a hand-drawn rust stroke beneath it. */
.hero-headline .line{
  display:block;
  opacity:0; transform:translateY(18px);
  animation:line-in .8s cubic-bezier(.16,.8,.2,1) forwards;
}
.hero-headline .line:nth-child(1){animation-delay:.1s;}
.hero-headline .line:nth-child(2){animation-delay:.22s;}
.hero-headline .line:nth-child(3){animation-delay:.34s;}
@keyframes line-in{to{opacity:1; transform:none;}}
.hero-headline .outline{
  font-weight:700;
  color:transparent;
  -webkit-text-stroke:1.8px rgba(241,236,223,0.95);
  letter-spacing:-0.01em;
}
@supports not (-webkit-text-stroke:1px #000){
  .hero-headline .outline{color:var(--paper);}
}
.hero-headline .mark{
  position:relative; display:inline-block;
  font-weight:800; letter-spacing:-0.035em;
}
@media (prefers-reduced-motion: reduce){
  .hero-headline .line{animation:none; opacity:1; transform:none;}
}
.hero-sub{
  color:rgba(241,236,223,0.78);
  max-width:500px;
  margin-top:24px;
  font-size:16.5px;
  line-height:1.65;
}
.hero-actions{display:flex; gap:14px; margin-top:34px; flex-wrap:wrap;}

/* trust stats */
.hero-stats{
  display:flex; gap:0; margin-top:44px; flex-wrap:wrap;
  border-top:1px solid rgba(241,236,223,0.18);
  padding-top:22px;
}
.hero-stat{
  padding:0 28px 0 0; margin-right:28px;
  border-right:1px solid rgba(241,236,223,0.18);
}
.hero-stat:last-child{border-right:none; margin-right:0;}
.hero-stat strong{
  display:block; font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:700;
  font-size:22px; color:var(--paper); margin-bottom:3px; letter-spacing:-0.01em;
}
.hero-stat span{font-size:12px; color:rgba(241,236,223,0.6); letter-spacing:0.02em;}
@media (max-width:640px){
  .hero-eyebrow{font-size:11.5px; letter-spacing:0.08em;}
  .hero-eyebrow::before{width:20px;}
  .hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:30px;}
  .hero-stat{padding-right:10px; margin-right:10px;}
  .hero-stat strong{font-size:18px;}
  .hero-stat span{font-size:11px;}
}

/* hero lead-capture card */
.hero-form-card{
  background:var(--paper); color:var(--ink);
  border-radius:6px; padding:34px 32px 30px;
  box-shadow:0 40px 80px -24px rgba(0,0,0,0.55);
  position:relative;
}
.hero-form-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--rust); border-radius:6px 6px 0 0;
}
.hero-form-card h3{font-size:21px; margin-bottom:6px; font-weight:600;}
.hero-form-card > p{color:var(--ink-soft); font-size:13.5px; margin-bottom:22px; line-height:1.55;}
.hero-form-card .field{margin-bottom:14px;}
.hero-form-card .field label{display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--ink-soft); margin-bottom:6px; font-weight:600;}
.hero-form-card .field input, .hero-form-card .field select{
  width:100%; border:1px solid var(--line); border-radius:4px;
  padding:11px 12px; font-family:'Inter', system-ui, sans-serif; font-size:14px; color:var(--ink);
  background:#fff; outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.hero-form-card .field input:focus, .hero-form-card .field select:focus{border-color:var(--rust); box-shadow:0 0 0 3px rgba(188,29,74,0.12);}
.hero-form-card .btn{width:100%; text-align:center; margin-top:8px;}
.hero-form-note{display:block; text-align:center; font-size:11.5px; color:var(--ink-soft); margin-top:14px;}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:36px;}
  .hero-form-card{max-width:460px;}
  .hero-content{padding-bottom:92px;}
}

/* capabilities strip along the bottom edge of the banner */
.hero-strip{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  border-top:1px solid rgba(241,236,223,0.14);
  background:rgba(30,22,16,0.55);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.hero-strip ul{
  list-style:none; margin:0; padding:0;
  display:flex; justify-content:space-between; gap:8px 24px; flex-wrap:wrap;
}
.hero-strip li{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:600;
  font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(241,236,223,0.7); white-space:nowrap;
  padding:16px 0;
}
@media (max-width:900px){
  .hero-strip ul{justify-content:flex-start; gap:0 22px;}
  .hero-strip li{padding:12px 0; font-size:11px;}
}
@media (max-width:640px){
  .hero{flex-wrap:wrap;}
  .hero-strip{position:relative; width:100%;}
  .hero-strip ul{gap:0 18px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .hero-strip ul::-webkit-scrollbar{display:none;}
  .hero-content{padding-bottom:48px;}
}

.btn{
  display:inline-block;
  padding:14px 26px;
  font-size:14.5px;
  font-weight:500;
  border-radius:2px;
  transition: all .25s ease;
  border:1px solid transparent;
  cursor:pointer;
}
.btn{position:relative; overflow:hidden;}
.btn::before{
  content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn:hover::before{left:130%;}
.btn-primary{background:var(--rust); color:var(--paper); box-shadow:0 10px 24px -10px rgba(188,29,74,0.55);}
.btn-primary:hover{background:var(--rust-deep); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(188,29,74,0.65);}
.btn-ghost{border:1px solid rgba(241,236,223,0.5); color:var(--paper);}
.btn-ghost:hover{background:rgba(241,236,223,0.12); border-color:rgba(241,236,223,0.9); transform:translateY(-2px);}
.btn-dark{background:var(--ink); color:var(--paper); box-shadow:0 10px 24px -12px rgba(36,31,25,0.6);}
.btn-dark:hover{background:var(--rust); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(188,29,74,0.5);}

/* signature diagonal trowel-edge divider */
.trowel-edge{
  position:relative;
  height:90px;
  background:var(--plaster);
  clip-path: polygon(0 100%, 100% 100%, 100% 30%, 82% 55%, 63% 18%, 44% 62%, 27% 22%, 9% 48%, 0 20%);
  margin-top:-1px;
}

/* ---------- PAGE HERO (inner pages, shorter banner) ---------- */
.page-hero{
  position:relative;
  min-height:56vh;
  display:flex; align-items:flex-end;
  padding-top:120px;
  overflow:hidden;
  background:var(--ink);
}
.page-hero .hero-media img{opacity:0.5;}
.page-hero .hero-content{padding-bottom:64px;}
.breadcrumb{
  display:flex; align-items:center; gap:8px; margin-bottom:18px;
  font-size:13.5px; color:rgba(241,236,223,0.6);
}
.breadcrumb a{color:rgba(241,236,223,0.85);}
.breadcrumb a:hover{color:var(--paper);}
h1.page-headline{
  color:var(--paper);
  font-size:clamp(34px, 5vw, 60px);
  max-width:760px;
  font-weight:600;
}
.page-sub{
  color:rgba(241,236,223,0.78);
  max-width:520px;
  margin-top:18px;
  font-size:16px;
}

/* ---------- USP / STAT STRIP ---------- */
.usp{
  background:var(--plaster);
  padding:12px 0 64px;
}
.usp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line);
}
.usp-item{
  padding:30px;
  border-right:1px solid var(--line);
  transition: transform .35s ease;
}
.usp-item:hover{transform:translateY(-4px);}
.usp-item:last-child{border-right:none;}
.usp-item .num{font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:600; color:var(--rust); font-size:22px; display:block; margin-bottom:12px; transition:color .3s ease;}
.usp-item:hover .num{color:var(--rust-deep);}
.usp-item p{font-size:14.5px; line-height:1.65; color:var(--ink-soft);}
@media (max-width:860px){
  .usp-grid{grid-template-columns:repeat(2,1fr); row-gap:24px;}
  .usp-item:nth-child(2){border-right:none;}
}
/* Two columns on a phone left ~140px of measure per cell, wrapping every line
   four or five deep. One column reads properly; rules separate the stats. */
@media (max-width:560px){
  .usp-grid{grid-template-columns:1fr; row-gap:0;}
  .usp-item{
    border-right:none; border-bottom:1px solid var(--line);
    padding:24px 0 24px 0;
  }
  .usp-item:last-child{border-bottom:none; padding-bottom:0;}
  .usp-item .num{margin-bottom:8px;}
}

/* ---------- SECTION HEADS ---------- */
.section{padding:80px 0;}
.section.tight{padding:58px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:40px; margin-bottom:56px; flex-wrap:wrap;
}
.section-head h2{font-size:clamp(30px,3.6vw,44px); max-width:720px;}
.section-head .lede{max-width:340px; color:var(--ink-soft); font-size:15.5px; padding-bottom:6px;}
.on-deep{
  background-color:var(--plaster-deep);
  background-image: radial-gradient(circle at 88% 6%, rgba(255,255,255,0.3), transparent 40%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), inset 0 24px 40px -36px rgba(36,31,25,0.35);
}
.on-ink{
  background-color:var(--ink);
  background-image:
    radial-gradient(circle at 85% 0%, rgba(188,29,74,0.16), transparent 45%),
    radial-gradient(circle at 5% 100%, rgba(255,255,255,0.05), transparent 40%);
  color:var(--paper);
}
.on-ink h2, .on-ink h3, .on-ink h4{color:var(--paper);}

/* ---------- SERVICES ---------- */
/* Four equal cards rather than alternating full-width rows, so the section
   reads at a glance and sits on the same grid as the rest of the page. */
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:34px 26px;
}
.service-card{display:flex; flex-direction:column;}
.service-media{
  border-radius:12px; overflow:hidden; aspect-ratio:4/3;
  margin-bottom:20px;
  box-shadow: 0 18px 40px -26px rgba(36,31,25,0.45);
  transition: box-shadow .4s ease, transform .4s ease;
}
.service-card:hover .service-media{
  box-shadow: 0 26px 52px -22px rgba(36,31,25,0.55);
  transform:translateY(-4px);
}
.service-media img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.service-card:hover .service-media img{transform:scale(1.06);}
.service-index{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:600; color:var(--rust);
  font-size:13px; display:block; margin-bottom:8px;
}
.service-text{display:flex; flex-direction:column; flex:1;}
.service-text h3{font-size:20px; line-height:1.32; margin-bottom:10px;}
.service-text p{color:var(--ink-soft); font-size:14.5px; line-height:1.62; margin-bottom:18px; flex:1;}
.service-link{font-size:14px; font-weight:500; border-bottom:1px solid var(--ink); padding-bottom:2px;}
.service-link:hover{border-color:var(--rust); color:var(--rust);}
.service-card .service-link{align-self:flex-start; font-size:13.5px;}
@media (max-width:1080px){
  .services-grid{grid-template-columns:repeat(2,1fr); gap:40px 26px;}
}
@media (max-width:620px){
  .services-grid{grid-template-columns:1fr; gap:36px;}
}

/* ---------- BEFORE / AFTER ---------- */
.ba-wrap{width:100%; margin:0 auto;}
.ba-wrap + .ba-wrap{margin-top:64px;}
.ba-slider{
  position:relative; width:100%; aspect-ratio:16/10;
  overflow:hidden; cursor:ew-resize; user-select:none;
  background:#000;
  border-radius:12px;
  box-shadow: 0 20px 48px -24px rgba(36,31,25,0.45);
}
.ba-slider img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;}
.ba-after{z-index:1;}
.ba-before{z-index:2; clip-path: inset(0 50% 0 0);}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; background:var(--paper);
  z-index:3; transform:translateX(-1px);
  pointer-events:none;
}
.ba-handle::after{
  content:"";
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%;
  background:var(--paper);
  background-image: linear-gradient(90deg, transparent 47%, var(--ink) 47%, var(--ink) 53%, transparent 53%);
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
}
.ba-label{
  position:absolute; top:18px; z-index:4;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:500; font-size:13px;
  color:var(--paper); background:rgba(36,31,25,0.55);
  padding:6px 14px; border-radius:20px; letter-spacing:0.02em;
}
.ba-label.before{left:18px;}
.ba-label.after{right:18px;}
.ba-caption{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 0 0;
  flex-wrap:wrap; gap:6px 28px;
}
.ba-caption h4{font-size:19px; font-weight:600;}
.ba-caption span{color:var(--ink-soft); font-size:14px;}

/* ---------- UPLOAD YOUR SPACE ---------- */
.upload-section{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0; align-items:stretch;
}
.upload-media{position:relative; min-height:520px;}
.upload-media img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.upload-form-panel{
  background:var(--ink); color:var(--paper);
  padding:72px 60px;
  display:flex; flex-direction:column; justify-content:center;
}
.upload-form-panel h2{color:var(--paper); font-size:clamp(28px,3.4vw,40px); margin-bottom:14px; max-width:420px;}
.upload-form-panel p{color:rgba(241,236,223,0.72); max-width:420px; margin-bottom:34px; font-size:15px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:460px;}
.form-grid .full{grid-column:1/-1;}
.field label{display:block; font-size:12.5px; color:rgba(241,236,223,0.6); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(241,236,223,0.35);
  color:var(--paper); font-family:'Inter', system-ui, sans-serif; font-size:14.5px; padding:8px 2px;
  outline:none; transition:border-color .2s ease;
}
.field input::placeholder, .field textarea::placeholder{color:rgba(241,236,223,0.35);}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--ochre);}
.field select option{color:#000;}

/* ---------- FILE INPUTS ---------- */
/* The native control ships an unstyled OS button that clashes with these
   underline fields, so the selector button gets the same pill language as the
   filter chips, in both the dark and light form panels. */
.field input[type="file"],
.contact-form input[type="file"]{
  cursor:pointer;
  padding:7px 2px;
  font-size:13px;
  line-height:1.9;
  /* The filename sits next to the button as secondary text, so the pill stays
     the focus of the control. */
  color:rgba(241,236,223,0.55);
}
.field input[type="file"]::file-selector-button,
.contact-form input[type="file"]::file-selector-button{
  font-family:'Inter', system-ui, sans-serif;
  font-size:12.5px;
  font-weight:500;
  padding:8px 18px;
  margin:0 14px 0 0;
  border-radius:20px;
  border:1px solid rgba(241,236,223,0.4);
  background:transparent;
  color:var(--paper);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.field input[type="file"]::file-selector-button:hover{
  background:var(--paper); border-color:var(--paper); color:var(--ink);
}
.field input[type="file"]:focus{border-color:var(--ochre);}

/* Light panels: same shape, inverted palette. */
.form-panel-light .field input[type="file"],
.contact-form input[type="file"]{color:var(--ink-soft);}
.form-panel-light .field input[type="file"]::file-selector-button,
.contact-form input[type="file"]::file-selector-button{
  border-color:var(--line); color:var(--ink);
}
.form-panel-light .field input[type="file"]::file-selector-button:hover,
.contact-form input[type="file"]::file-selector-button:hover{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.upload-form-panel .btn{margin-top:30px; width:fit-content;}
@media (max-width:900px){
  .upload-section{grid-template-columns:1fr;}
  .upload-media{min-height:320px;}
  .upload-form-panel{padding:56px 28px;}
}

/* light variant of the form panel, for use on a plaster background */
.form-panel-light{
  background:var(--paper); color:var(--ink); border:1px solid var(--line);
  padding:56px 48px; border-radius:2px;
}
.form-panel-light h2, .form-panel-light h3{color:var(--ink);}
.form-panel-light p{color:var(--ink-soft);}
.form-panel-light .field label{color:var(--ink-soft);}
.form-panel-light .field input, .form-panel-light .field select, .form-panel-light .field textarea{
  border-bottom:1px solid var(--line); color:var(--ink);
}
.form-panel-light .field input::placeholder, .form-panel-light .field textarea::placeholder{color:rgba(74,66,55,0.4);}
.form-panel-light .field input:focus, .form-panel-light .field select:focus, .form-panel-light .field textarea:focus{border-color:var(--rust);}
.form-panel-light .field select option{color:#000;}

/* ---------- PORTFOLIO MASONRY ---------- */
.filters{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:44px;}
.filter-chip{
  font-size:13.5px; padding:8px 16px; border:1px solid var(--line);
  border-radius:20px; color:var(--ink-soft); cursor:pointer; background:transparent;
  font-family:'Inter', system-ui, sans-serif; transition:all .2s ease;
}
.filter-chip:hover{border-color:var(--ink); color:var(--ink);}
.filter-chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.portfolio-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px;
}
.p-item{
  position:relative; border-radius:12px; overflow:hidden; background:var(--ink); display:block;
  cursor:zoom-in;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease;
  transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
  box-shadow: 0 1px 3px rgba(36,31,25,0.15);
}
.p-item:hover{
  transform: perspective(900px) rotateX(1.5deg) translateY(-8px) scale(1.01);
  box-shadow: 0 34px 60px -20px rgba(36,31,25,0.5);
  z-index:5;
}
.p-item img{width:100%; height:100%; object-fit:cover; transition:transform .6s ease;}
.p-item:hover img{transform:scale(1.08);}
/* One flow block anchored to the bottom edge, so a title or location that wraps
   pushes the caption upward instead of the two lines overlapping each other. */
.p-item .p-cap{
  position:absolute; left:20px; right:20px; bottom:18px; z-index:2;
  display:flex; flex-direction:column; gap:3px;
}
.p-item .p-tag{
  color:var(--paper); font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:500; font-size:16px;
  line-height:1.25;
}
.p-item .p-loc{
  color:rgba(241,236,223,0.72); font-size:12.5px; line-height:1.35;
}
/* Admin-written description, clamped so a long note never swallows a small
   tile — the lightbox shows it in full. */
.p-item .p-desc{
  color:rgba(241,236,223,0.6); font-size:12px; line-height:1.45; margin-top:3px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.p-item::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 38%, rgba(36,31,25,0.8) 100%);
  z-index:1;
}
/* Inline arrow icon, sized to its label and aligned on the text centre. */
.ico-arrow{width:0.95em; height:0.95em; flex-shrink:0; display:block;}

.p-item .p-view{
  position:absolute; top:18px; right:18px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  font-size:12px; font-weight:500; color:var(--paper);
  background:rgba(36,31,25,0.5); backdrop-filter:blur(4px);
  padding:7px 13px; border-radius:20px;
  opacity:0; transform:translateY(-6px);
  transition: opacity .3s ease, transform .3s ease, background .2s ease;
}
.p-item:hover .p-view{opacity:1; transform:translateY(0);}
.p-item .p-view:hover{background:var(--rust);}
.p-item .p-view .ico-arrow{transition:transform .25s ease;}
.p-item .p-view:hover .ico-arrow{transform:translateX(3px);}
/* "5 photos" on a project with more than its cover; always visible so the
   extra photos are discoverable before the tile is opened. */
.p-item .p-count{
  position:absolute; top:18px; left:18px; z-index:3;
  display:inline-flex; align-items:center;
  font-size:11.5px; font-weight:500; color:var(--paper);
  background:rgba(36,31,25,0.55); backdrop-filter:blur(4px);
  padding:5px 11px; border-radius:20px;
}
.p-item .p-zoom-hint{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .3s ease;
}
.p-item:hover .p-zoom-hint{opacity:1;}
.p-item .p-zoom-hint svg{
  width:40px; height:40px; color:var(--paper);
  filter:drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}
.p-item.p1{grid-column:span 3; grid-row:span 2; aspect-ratio:1/1.05;}
.p-item.p2{grid-column:span 3; aspect-ratio:16/10;}
.p-item.p3{grid-column:span 3; aspect-ratio:16/10;}
.p-item.p4{grid-column:span 2; aspect-ratio:4/5;}
.p-item.p5{grid-column:span 2; aspect-ratio:4/5;}
.p-item.p6{grid-column:span 2; aspect-ratio:4/5;}
.p-item.p7{grid-column:span 3; aspect-ratio:16/10;}
.p-item.p8{grid-column:span 3; aspect-ratio:16/10;}
.p-item.p9{grid-column:span 2; aspect-ratio:4/5;}
@media (max-width:860px){
  .portfolio-grid{grid-template-columns:repeat(2,1fr);}
  .p-item, .p-item.p1, .p-item.p2, .p-item.p3, .p-item.p4, .p-item.p5, .p-item.p6, .p-item.p7, .p-item.p8, .p-item.p9{grid-column:span 1; grid-row:auto; aspect-ratio:4/5;}
}

/* ---------- HOW IT WORKS (connected process path) ---------- */
/* Five equal columns with each node centred, so the connector can run from
   the centre of node 1 (10%) to the centre of node 5 (90%) and never
   overshoot the last step. */
.process{position:relative; padding-top:8px;}
.process-line{
  position:absolute; top:calc(8px + 36px); left:10%; right:10%; height:2px;
  background:rgba(241,236,223,0.14); z-index:0; overflow:hidden;
  transform:translateY(-50%);
}
.process-line::after{
  content:""; position:absolute; inset:0; width:0%;
  background:linear-gradient(90deg, var(--rust-deep), var(--rust) 55%, var(--ochre));
  transition: width 1.8s cubic-bezier(.16,.8,.2,1) .15s;
}
.process.in-view .process-line::after{width:100%;}
.steps{
  display:grid; grid-template-columns:repeat(5,1fr); gap:0;
  position:relative; z-index:1;
}
.step{
  padding:0 12px; position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.step-node{
  width:72px; height:72px; border-radius:50%;
  background:var(--ink); border:2px solid rgba(241,236,223,0.22);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:28px; position:relative;
  transition: border-color .5s ease, box-shadow .5s ease, background-color .5s ease;
  transition-delay: calc(var(--step-i, 0) * 160ms);
}
.step-node svg{
  width:26px; height:26px; color:rgba(241,236,223,0.6);
  transition:color .5s ease; transition-delay: calc(var(--step-i, 0) * 160ms + 80ms);
}
.step-node .step-num{
  position:absolute; top:-7px; right:-7px;
  width:26px; height:26px; border-radius:50%;
  background:var(--ink); border:2px solid rgba(241,236,223,0.22);
  color:var(--paper); font-family:'Inter', system-ui, sans-serif; font-weight:700;
  font-size:11.5px; line-height:1; letter-spacing:.02em;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .5s ease, border-color .5s ease;
  transition-delay: calc(var(--step-i, 0) * 160ms);
}
.process.in-view .step-node{
  border-color:var(--rust);
  box-shadow:0 0 0 6px rgba(188,29,74,0.12), 0 14px 30px -12px rgba(188,29,74,0.55);
}
.process.in-view .step-node svg{color:var(--paper);}
.process.in-view .step-node .step-num{background:var(--rust); border-color:var(--rust);}
.step h4{font-size:18px; margin-bottom:10px; font-weight:600; line-height:1.25;}
.step p{font-size:14.5px; line-height:1.55; color:rgba(241,236,223,0.65); max-width:220px;}
.step:nth-child(1){--step-i:0;} .step:nth-child(2){--step-i:1;} .step:nth-child(3){--step-i:2;}
.step:nth-child(4){--step-i:3;} .step:nth-child(5){--step-i:4;}
@media (max-width:1100px){
  .step{padding:0 8px;}
  .step h4{font-size:17px;}
  .step p{font-size:13.5px;}
}
@media (max-width:860px){
  /* Vertical timeline: each step draws its own segment from the bottom of
     its node to the top of the next, so the path ends at the last node. */
  .process{padding-top:0;}
  .process-line{display:none;}
  .steps{grid-template-columns:1fr; gap:36px;}
  /* Node in the left column spanning both rows; heading and copy stack
     beside it (they are direct children, so grid rather than a wrapper). */
  .step{
    display:grid; grid-template-columns:72px 1fr; grid-template-rows:auto auto;
    column-gap:22px; align-items:start; text-align:left; padding:0;
  }
  .step-node{grid-row:1 / span 2;}
  .step:not(:last-child)::before{
    content:""; position:absolute; left:35px; top:72px; bottom:-36px; width:2px;
    background:rgba(241,236,223,0.14);
  }
  .step:not(:last-child)::after{
    content:""; position:absolute; left:35px; top:72px; bottom:-36px; width:2px;
    background:linear-gradient(180deg, var(--rust), var(--ochre));
    transform:scaleY(0); transform-origin:top;
    transition: transform .6s cubic-bezier(.16,.8,.2,1);
    transition-delay: calc(var(--step-i, 0) * 160ms + 200ms);
  }
  .process.in-view .step:not(:last-child)::after{transform:scaleY(1);}
  .step-node{margin-bottom:0;}
  .step h4{font-size:18px; margin-top:6px; margin-bottom:6px;}
  .step p{max-width:none;}
}
@media (prefers-reduced-motion: reduce){
  .process-line::after, .step-node, .step-node svg, .step-node .step-num,
  .step:not(:last-child)::after{transition:none;}
}

/* ---------- INSPIRATION ---------- */
.insp-tags{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px;}
.insp-tag{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:500; font-size:14px;
  padding:8px 4px; border-bottom:1px solid transparent; color:var(--ink-soft);
  cursor:pointer; user-select:none;
  transition:color .2s ease, border-color .2s ease;
}
.insp-tag:hover{color:var(--ink); border-color:var(--line);}
.insp-tag:focus-visible{outline:2px solid var(--rust); outline-offset:3px; border-radius:2px;}
.insp-tag.on{color:var(--rust); border-color:var(--rust);}
/* Filtered-out figures fade rather than vanish, so the strip settles gently. */
.insp-strip .insp-figure{opacity:1; transition:transform .4s ease, box-shadow .4s ease, opacity .3s ease;}
.insp-strip .insp-figure[hidden]{display:none;}
.insp-strip{
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
.insp-strip .insp-figure{display:block; border-radius:3px; overflow:hidden; box-shadow:0 20px 40px -22px rgba(36,31,25,0.4); transition:transform .4s ease, box-shadow .4s ease;}
.insp-strip .insp-figure:hover{transform:translateY(-6px); box-shadow:0 28px 50px -20px rgba(36,31,25,0.5);}
.insp-strip img{aspect-ratio:3/4; object-fit:cover; border-radius:3px; transition:transform .6s ease;}
.insp-strip .insp-figure:hover img{transform:scale(1.07);}
@media (max-width:860px){ .insp-strip{grid-template-columns:repeat(2,1fr);} }

/* ---------- TESTIMONIALS ---------- */
.testi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.testi{
  background:var(--paper); border:1px solid var(--line); border-radius:3px;
  padding:30px 26px;
  box-shadow:0 20px 40px -28px rgba(36,31,25,0.3);
  transition: transform .35s ease, box-shadow .35s ease;
}
.testi:hover{transform:translateY(-6px); box-shadow:0 28px 50px -24px rgba(36,31,25,0.4);}
.testi img{width:52px; height:52px; border-radius:50%; object-fit:cover; margin-bottom:18px; box-shadow:0 6px 16px rgba(36,31,25,0.25);}
.testi p.quote{font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:17px; font-weight:500; line-height:1.5; margin-bottom:18px; color:var(--ink);}
.testi .who{font-size:13.5px; color:var(--ink-soft);}
@media (max-width:860px){ .testi-grid{grid-template-columns:1fr; gap:40px;} }

/* ---------- CONTACT ---------- */
.contact-section{
  display:grid; grid-template-columns:1fr 1fr; gap:70px;
  align-items:start;
}
.contact-info h2{font-size:clamp(28px,3.6vw,44px); margin-bottom:20px; max-width:420px;}
.contact-info p{color:var(--ink-soft); max-width:400px; margin-bottom:30px; font-size:15.5px;}
.contact-meta{margin-top:36px; display:flex; flex-direction:column; gap:10px;}
.contact-meta a{font-size:15px; color:var(--ink);}
.contact-meta a:hover{color:var(--rust);}
.contact-form .field{margin-bottom:20px;}
.contact-form .field label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:6px;}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; background:transparent; border:none; border-bottom:1px solid var(--line);
  padding:9px 2px; font-family:'Inter', system-ui, sans-serif; font-size:15px; color:var(--ink);
  outline:none;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{border-color:var(--rust);}
.contact-form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.contact-btns{display:flex; gap:12px; margin-top:8px; flex-wrap:wrap;}
@media (max-width:860px){
  .contact-section{grid-template-columns:1fr; gap:44px;}
}

/* dark closing-band variant, used when the contact section sits inside .on-ink */
.on-ink .contact-info p{color:rgba(241,236,223,0.72);}
.on-ink .contact-meta{margin-top:38px; gap:2px;}
.on-ink .contact-meta a{
  display:flex; align-items:center; gap:12px;
  color:var(--paper); font-size:15px;
  padding:12px 4px; border-bottom:1px solid rgba(241,236,223,0.14);
  transition: color .25s ease, gap .25s ease;
}
.on-ink .contact-meta a svg{width:17px; height:17px; flex-shrink:0; color:var(--rust);}
.on-ink .contact-meta a:hover{color:var(--rust); gap:16px;}
.on-ink .contact-form{
  background:var(--paper); color:var(--ink);
  border-radius:4px; padding:38px 34px 34px;
  box-shadow:0 44px 90px -24px rgba(0,0,0,0.55);
  position:relative;
}
.on-ink .contact-form::before{
  content:""; position:absolute; top:-3px; left:28px; right:28px; height:3px;
  background:linear-gradient(90deg, var(--rust-deep), var(--rust));
  border-radius:2px;
}
.on-ink .contact-form .field label{color:var(--ink-soft);}
.on-ink .contact-form input, .on-ink .contact-form select, .on-ink .contact-form textarea{
  border:1px solid var(--line); border-radius:2px; padding:10px 12px;
  background:#fff; color:var(--ink);
}
.on-ink .contact-form input:focus, .on-ink .contact-form select:focus, .on-ink .contact-form textarea:focus{border-color:var(--rust);}

/* ---------- ABOUT PAGE EXTRAS ---------- */
.about-lead{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;}
.about-lead .lead-text p{color:var(--ink-soft); font-size:16.5px; margin-bottom:18px; max-width:440px;}
.about-lead .lead-figure{border-radius:2px; overflow:hidden; aspect-ratio:4/5;}
.about-lead .lead-figure img{width:100%; height:100%; object-fit:cover;}
@media (max-width:860px){ .about-lead{grid-template-columns:1fr; gap:32px;} }

.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.value-item{
  background:rgba(241,236,223,0.05); border:1px solid rgba(241,236,223,0.14);
  border-radius:3px; padding:34px 28px;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}
.value-item:hover{transform:translateY(-6px); background:rgba(241,236,223,0.09); border-color:rgba(241,236,223,0.28);}
.value-item .val-icon{width:34px; height:34px; margin-bottom:20px; color:var(--rust);}
.value-item h4{font-size:18px; margin-bottom:10px; font-weight:600;}
.value-item p{color:rgba(241,236,223,0.65); font-size:14.5px;}
@media (max-width:760px){ .value-grid{grid-template-columns:1fr;} }

/* ---------- PROJECT DETAIL EXTRAS ---------- */
.project-meta{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  margin-bottom:64px;
}
.project-meta .pm-item{padding:22px 20px 22px 0; border-right:1px solid var(--line);}
.project-meta .pm-item:last-child{border-right:none;}
.project-meta .pm-label{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:8px; display:block;}
.project-meta .pm-value{font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:18px;}
@media (max-width:760px){
  .project-meta{grid-template-columns:repeat(2,1fr); row-gap:20px;}
  .project-meta .pm-item:nth-child(2n){border-right:none;}
}
.project-about{display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-bottom:80px;}
.project-about p{color:var(--ink-soft); font-size:16px; max-width:460px;}
@media (max-width:860px){ .project-about{grid-template-columns:1fr; gap:24px;} }
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.gallery-grid .gallery-item{
  position:relative; border-radius:3px; overflow:hidden; cursor:zoom-in;
  box-shadow:0 1px 3px rgba(36,31,25,0.15);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.gallery-grid .gallery-item:hover{transform:translateY(-6px); box-shadow:0 30px 50px -22px rgba(36,31,25,0.45); z-index:2;}
.gallery-grid img{aspect-ratio:4/5; object-fit:cover; border-radius:3px; transition:transform .6s ease; width:100%; height:100%;}
.gallery-grid .gallery-item:hover img{transform:scale(1.07);}
.gallery-grid .wide{grid-column:span 2; aspect-ratio:16/9;}
.gallery-grid .wide img{aspect-ratio:16/9;}
@media (max-width:760px){ .gallery-grid{grid-template-columns:1fr 1fr;} .gallery-grid .wide{grid-column:span 2;} }
.next-project{
  display:flex; justify-content:space-between; align-items:center;
  padding:44px 0; border-top:1px solid var(--line); margin-top:80px; flex-wrap:wrap; gap:16px;
}
.next-project .np-label{font-size:13px; color:var(--ink-soft); margin-bottom:6px;}
.next-project h3{font-size:clamp(22px,3vw,30px);}
.next-project .np-arrow{
  font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-weight:600; font-size:24px; color:var(--rust);
  display:inline-flex; align-items:center; gap:12px;
}
.next-project .np-arrow .ico-arrow{width:0.72em; height:0.72em; transition:transform .25s ease;}
.next-project .np-arrow:hover .ico-arrow{transform:translateX(4px);}

/* ---------- FOOTER ---------- */
footer{background:var(--ink); color:rgba(241,236,223,0.65); padding:60px 0 30px;}
.footer-top{display:flex; justify-content:space-between; flex-wrap:wrap; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(241,236,223,0.15);}
.footer-logo{margin-bottom:16px; line-height:0;}
.footer-logo img{height:28px; width:auto; display:block;}
.footer-cols{display:flex; gap:70px; flex-wrap:wrap;}
.footer-col h5{color:var(--paper); font-weight:500; font-size:13.5px; margin-bottom:16px; font-family:'Inter', system-ui, sans-serif;}
.footer-col a{display:block; font-size:14px; margin-bottom:10px; color:rgba(241,236,223,0.65);}
.footer-col a:hover{color:var(--ochre);}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; font-size:13px; flex-wrap:wrap; gap:12px;}

.fade-in{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease;}
.fade-in.show{opacity:1; transform:translateY(0);}

/* staggered reveal for grid children — pair with .fade-in.stagger */
.fade-in.stagger:nth-child(1){transition-delay:0ms;}
.fade-in.stagger:nth-child(2){transition-delay:70ms;}
.fade-in.stagger:nth-child(3){transition-delay:140ms;}
.fade-in.stagger:nth-child(4){transition-delay:210ms;}
.fade-in.stagger:nth-child(5){transition-delay:280ms;}
.fade-in.stagger:nth-child(6){transition-delay:350ms;}
.fade-in.stagger:nth-child(7){transition-delay:420ms;}
.fade-in.stagger:nth-child(8){transition-delay:490ms;}
.fade-in.stagger:nth-child(9){transition-delay:560ms;}

/* ---------- FLOATING RAIL (whatsapp / instagram / brochure) ---------- */
.float-rail{
  position:fixed; right:22px; top:50%; transform:translateY(-50%);
  z-index:90;
  display:flex; flex-direction:column; gap:12px;
}
.float-btn{
  width:48px; height:48px; border-radius:50%;
  background:var(--paper); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px rgba(36,31,25,0.35);
  border:1px solid var(--line);
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.float-btn svg{width:21px; height:21px;}
.float-btn:hover{background:var(--rust); color:var(--paper); border-color:var(--rust); transform:translateX(-2px);}
.float-btn.whatsapp:hover{background:#25D366; border-color:#25D366; color:#fff;}
@media (max-width:640px){
  /* On phones a mid-screen rail sits on top of the content — it covered the
     portfolio category chips and their scroll arrow, swallowing those taps.
     Dock it to the bottom corner, stacked above the back-to-top button. */
  .float-rail{right:12px; gap:10px; top:auto; bottom:68px; transform:none;}
  .float-btn{width:42px; height:42px;}
  .float-btn svg{width:18px; height:18px;}
}

/* ---------- BACK TO TOP ---------- */
.back-to-top{
  position:fixed; right:22px; bottom:26px;
  width:46px; height:46px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  border:none; cursor:pointer;
  box-shadow:0 8px 20px -6px rgba(36,31,25,0.45);
  z-index:90;
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, background .25s ease;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--rust);}
.back-to-top svg{width:19px; height:19px;}
@media (max-width:640px){
  .back-to-top{right:12px; bottom:16px; width:42px; height:42px;}
}

/* ---------- LIGHTBOX (portfolio image zoom) ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:300;
  background:rgba(15,12,9,0.94);
  display:flex; align-items:center; justify-content:center;
  padding:70px 90px;
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility .35s ease;
}
.lightbox-overlay.open{opacity:1; visibility:visible;}
.lightbox-figure{
  position:relative; max-width:1100px; width:100%; max-height:100%;
  border-radius:3px; overflow:hidden;
  box-shadow:0 50px 120px -20px rgba(0,0,0,0.7);
  background:#000;
  opacity:0; transform:translateY(18px) scale(0.98);
  transition:opacity .4s ease, transform .4s ease;
}
.lightbox-overlay.open .lightbox-figure{opacity:1; transform:translateY(0) scale(1);}
.lightbox-figure .lb-frame{
  position:relative;
  width:100%; height:74vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:var(--ink);
}
.lightbox-figure img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; cursor:zoom-in;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.lightbox-figure img.zoomed{cursor:zoom-out; transform:scale(1.9);}
.lightbox-caption{
  padding:18px 26px;
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:var(--ink);
}
.lightbox-caption h4{color:var(--paper); font-size:17px; font-weight:600; margin-bottom:4px;}
.lightbox-caption span{color:rgba(241,236,223,0.55); font-size:13px;}
.lightbox-caption .lb-desc{
  color:rgba(241,236,223,0.72); font-size:13.5px; line-height:1.55; margin:8px 0 0; max-width:64ch;
}
.lightbox-caption .lb-desc:empty{display:none;}
.lightbox-caption .lb-count:not(:empty)::before{content:"·"; margin:0 8px;}
.lightbox-hint{color:rgba(241,236,223,0.4); font-size:12px;}
.lightbox-close, .lightbox-nav{
  position:fixed; z-index:301;
  width:46px; height:46px; border-radius:50%;
  background:rgba(241,236,223,0.1); color:var(--paper);
  border:1px solid rgba(241,236,223,0.25);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; backdrop-filter:blur(6px);
  transition:background .2s ease, transform .2s ease;
}
.lightbox-close:hover, .lightbox-nav:hover{background:var(--rust); border-color:var(--rust); transform:translateY(-1px);}
.lightbox-close{top:26px; right:26px;}
.lightbox-close svg{width:18px; height:18px;}
.lightbox-nav svg{width:20px; height:20px;}
.lightbox-prev{left:26px; top:50%; transform:translateY(-50%);}
.lightbox-next{right:26px; top:50%; transform:translateY(-50%);}
.lightbox-prev:hover, .lightbox-next:hover{transform:translateY(-50%) translateY(-1px);}
/* Inner arrows live inside the frame; the script parks them beside the photo.
   Outer arrows stay at the screen edges and move between projects. */
.lightbox-nav{position:absolute; z-index:2;}
.lightbox-nav.lightbox-outer{position:fixed; z-index:301;}
.lightbox-nav[hidden]{display:none;}
.lightbox-figure:has(.lb-strip:not(:empty)) .lb-frame{height:62vh;}
/* Thumbnail row: the open project's photos. */
.lb-row{display:flex; padding:0 26px 14px; background:var(--ink);}
.lb-row:has(.lb-strip:empty){display:none;}
.lb-strip{
  flex:1; min-width:0; display:flex; gap:8px; overflow-x:auto; padding:2px 0 4px;
  scrollbar-width:thin; scrollbar-color:rgba(241,236,223,0.25) transparent;
}
.lb-thumb{
  flex:0 0 auto; width:68px; height:50px; padding:0; border-radius:3px; overflow:hidden;
  border:2px solid transparent; background:#000; cursor:pointer;
  opacity:0.5; transition:opacity .2s ease, border-color .2s ease;
}
.lb-thumb:hover{opacity:0.85;}
.lb-thumb.active{opacity:1; border-color:var(--rust);}
.lb-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
@media (max-width:760px){
  .lightbox-overlay{padding:20px;}
  .lightbox-figure .lb-frame{height:52vh;}
  .lightbox-figure:has(.lb-strip:not(:empty)) .lb-frame{height:44vh;}
  .lb-row{padding:0 16px 12px;}
  .lb-thumb{width:56px; height:42px;}
  .lightbox-nav{width:38px; height:38px;}
  .lightbox-prev{left:10px;}
  .lightbox-next{right:10px;}
  .lightbox-close{top:14px; right:14px; width:38px; height:38px;}
  /* On a phone the outer (project) arrows pair up top-left, clear of the
     inner photo arrows on the image's edges. */
  .lightbox-nav.lightbox-outer, .lightbox-nav.lightbox-outer:hover{top:14px; transform:none;}
  .lightbox-outer.lightbox-prev{left:14px;}
  .lightbox-outer.lightbox-next{left:60px; right:auto;}
}

/* ---------- FAQ ACCORDION ---------- */
.faq-list{max-width:none;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-question{
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:24px 4px; background:none; border:none; cursor:pointer; text-align:left;
  font-family:'Plus Jakarta Sans', system-ui, sans-serif; font-size:18px; color:var(--ink);
}
.faq-question .faq-plus{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; position:relative;
  transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.faq-question .faq-plus::before, .faq-question .faq-plus::after{
  content:""; position:absolute; background:var(--ink); transition:transform .3s ease, opacity .3s ease;
}
.faq-question .faq-plus::before{width:10px; height:1.5px;}
.faq-question .faq-plus::after{width:1.5px; height:10px;}
.faq-item.open .faq-question .faq-plus{background:var(--rust); border-color:var(--rust);}
.faq-item.open .faq-question .faq-plus::before, .faq-item.open .faq-question .faq-plus::after{background:var(--paper);}
.faq-item.open .faq-question .faq-plus::after{transform:scaleY(0);}
.faq-answer{max-height:0; overflow:hidden; transition:max-height .4s ease;}
.faq-answer p{color:var(--ink-soft); font-size:15px; padding:0 4px 24px; max-width:64ch;}
.faq-item.open .faq-answer{max-height:220px;}

/* Portfolio toolbar — filter chips on the left (single-line horizontal slider),
   brochure download aligned on the same line to the right. */
.portfolio-bar{display:flex; flex-direction:column; align-items:stretch; gap:14px; margin-bottom:44px;}
/* Preview + Download brochure sit on their own row, pushed right and nudged up
   slightly, so the categories rail below can extend the full width. */
.portfolio-actions{display:flex; align-items:center; justify-content:flex-end; gap:12px; margin-top:-6px; margin-bottom:-4px;}
.preview-btn,.brochure-btn{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; padding:11px 22px;}
.preview-btn{background:transparent; color:var(--ink); border:1px solid var(--ink);}
.preview-btn:hover{background:var(--rust); color:var(--paper); border-color:var(--rust); transform:translateY(-2px); box-shadow:0 14px 28px -10px rgba(188,29,74,0.5);}
/* Slider = left arrow + full-width scrolling chip row + right arrow. */
.filters-slider{display:flex; align-items:center; gap:8px; width:100%; min-width:0;}
.portfolio-bar .filters{
  margin-bottom:0;
  flex:1 1 auto;
  min-width:0;                     /* let the row shrink so overflow can scroll */
  flex-wrap:nowrap;                /* keep chips on one line */
  overflow-x:auto;                 /* scroll horizontally */
  overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  /* Native swipes in both directions: the row scrolls sideways, and a vertical
     swipe that starts on a chip still scrolls the page. */
  touch-action:pan-x pan-y;
  /* Hidden scrollbar — the side arrows drive the scrolling instead. */
  scrollbar-width:none;            /* Firefox */
  -ms-overflow-style:none;         /* legacy Edge */
}
.portfolio-bar .filters::-webkit-scrollbar{display:none; width:0; height:0;}
.portfolio-bar .filters.dragging{cursor:grabbing; user-select:none; scroll-behavior:auto;}
.portfolio-bar .filters.dragging .filter-chip{cursor:grabbing;}
.portfolio-bar .filter-chip{flex:0 0 auto; white-space:nowrap;}

/* Round side-scroll arrows — shown only when there's more to scroll. */
.slider-arrow{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; padding:0;
  border:1px solid var(--line); border-radius:50%;
  background:var(--paper); color:var(--ink);
  cursor:pointer; transition:background .2s ease, border-color .2s ease, opacity .2s ease;
}
.slider-arrow:hover{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.slider-arrow[hidden]{display:none;}

/* Shown in place of the grid when the chosen category has nothing published. */
.portfolio-empty{margin:8px 0 0; padding:48px 16px; text-align:center; color:var(--ink-soft); font-size:15px; border:1px dashed var(--line); border-radius:12px;}
.portfolio-empty[hidden]{display:none;}
.portfolio-empty-reset{margin-left:6px; padding:0; border:0; background:none; color:var(--rust); font:inherit; text-decoration:underline; cursor:pointer;}
.brochure-btn[disabled]{opacity:.6; cursor:progress; transform:none;}
.brochure-btn[disabled]:hover{transform:none;}
@media(max-width:700px){
  .portfolio-bar{gap:14px;}
  .portfolio-actions{margin-top:0;}
}