/* ==========================================================================
   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:'Manrope', sans-serif;
  font-size:16px;
  line-height:1.6;
  -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:'Playfair Display', serif;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-0.01em;
  color:var(--ink);
}
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:78vh;
  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:16% 78%;}
.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.86) 0%,
      rgba(30,22,16,0.66) 32%,
      rgba(30,22,16,0.26) 60%,
      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:80px;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr;
  gap:56px; align-items:end;
}
.hero-eyebrow{
  color:var(--plaster-deep);
  font-size:15px;
  font-style:italic;
  font-family:'Playfair Display', serif;
  margin-bottom:18px;
  max-width:420px;
}
h1.hero-headline{
  color:var(--paper);
  font-size:clamp(36px, 5vw, 64px);
  max-width:640px;
  font-weight:500;
}
.hero-sub{
  color:rgba(241,236,223,0.8);
  max-width:480px;
  margin-top:22px;
  font-size:16.5px;
}
.hero-actions{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}

/* trust stat badges */
.hero-stats{
  display:flex; gap:0; margin-top:44px; flex-wrap:wrap;
  border-top:1px solid rgba(241,236,223,0.2);
  padding-top:20px;
}
.hero-stat{
  padding:0 26px 0 0; margin-right:26px;
  border-right:1px solid rgba(241,236,223,0.2);
}
.hero-stat:last-child{border-right:none; margin-right:0;}
.hero-stat strong{
  display:block; font-family:'Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:22px; color:var(--paper); margin-bottom:2px;
}
.hero-stat span{font-size:12px; color:rgba(241,236,223,0.6); letter-spacing:0.02em;}
@media (max-width:640px){
  .hero-stats{gap:16px 0;}
  .hero-stat{padding-right:16px; margin-right:16px;}
}

/* hero lead-capture card */
.hero-form-card{
  background:var(--paper); color:var(--ink);
  border-radius:4px; padding:32px 30px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
  position:relative;
}
.hero-form-card::before{
  content:""; position:absolute; top:-3px; left:24px; right:24px; height:3px;
  background:linear-gradient(90deg, var(--rust-deep), var(--rust));
  border-radius:2px;
}
.hero-form-card h3{font-size:20px; margin-bottom:6px; font-weight:500;}
.hero-form-card > p{color:var(--ink-soft); font-size:13.5px; margin-bottom:20px;}
.hero-form-card .field{margin-bottom:14px;}
.hero-form-card .field label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:5px;}
.hero-form-card .field input, .hero-form-card .field select{
  width:100%; border:1px solid var(--line); border-radius:2px;
  padding:10px 12px; font-family:'Manrope',sans-serif; font-size:14px; color:var(--ink);
  background:#fff; outline:none; transition:border-color .2s ease;
}
.hero-form-card .field input:focus, .hero-form-card .field select:focus{border-color:var(--rust);}
.hero-form-card .btn{width:100%; text-align:center; margin-top:6px;}
.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:32px;}
  .hero-form-card{max-width:420px;}
}
.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:500;
}
.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:'Playfair Display',serif; font-style:italic; 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,4vw,46px); max-width:600px;}
.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:'Playfair Display',serif; font-style:italic; 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:'Playfair Display',serif; font-style:italic; font-size:14px;
  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:400;}
.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:'Manrope',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:'Manrope',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:'Manrope',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:'Playfair Display',serif; font-size:17px; font-style:italic;
  line-height:1.25;
}
.p-item .p-loc{
  color:rgba(241,236,223,0.72); font-size:12.5px; line-height:1.35;
}
.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);}
.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) ---------- */
.process{position:relative;}
.process-line{
  position:absolute; top:34px; left:0; right:0; height:2px;
  background:rgba(241,236,223,0.16); z-index:0;
  overflow:hidden;
}
.process-line::after{
  content:""; position:absolute; inset:0; left:0; width:0%;
  background:linear-gradient(90deg, var(--rust-deep), var(--rust), var(--ochre));
  transition: width 1.6s cubic-bezier(.16,.8,.2,1);
}
.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 20px 0 0; position:relative;}
.step:last-child{padding-right:0;}
.step-node{
  width:68px; height:68px; 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:26px; position:relative;
  transition: border-color .5s ease, transform .5s ease, box-shadow .5s ease;
  transition-delay: calc(var(--step-i, 0) * 120ms);
}
.step-node svg{width:25px; height:25px; color:rgba(241,236,223,0.65); transition:color .5s ease .1s;}
.step-node .step-num{
  position:absolute; top:-6px; right:-6px;
  width:22px; height:22px; border-radius:50%;
  background:var(--ink); border:2px solid rgba(241,236,223,0.22);
  color:var(--paper); font-family:'Playfair Display',serif; font-style:italic; font-size:11px;
  display:flex; align-items:center; justify-content:center;
  transition: background .5s ease, border-color .5s ease;
}
.process.in-view .step-node{
  border-color:var(--rust); transform:translateY(-4px);
  box-shadow:0 12px 28px -10px rgba(188,29,74,0.5);
}
.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:400;}
.step p{font-size:14px; color:rgba(241,236,223,0.65); max-width:210px;}
.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:860px){
  .process-line{display:none;}
  .steps{grid-template-columns:1fr; gap:34px;}
  .step{display:flex; gap:20px; align-items:flex-start; padding-right:0;}
  .step-node{margin-bottom:0; flex-shrink:0;}
}

/* ---------- INSPIRATION ---------- */
.insp-tags{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:40px;}
.insp-tag{
  font-family:'Playfair Display',serif; font-style:italic; font-size:15px;
  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:'Playfair Display',serif; font-size:19px; font-weight:400; line-height:1.4; 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:'Manrope',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:400;}
.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:'Playfair Display',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:'Playfair Display',serif; font-style:italic; font-size:26px; 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:'Manrope',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){
  .float-rail{right:12px; gap:10px;}
  .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{
  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:400; margin-bottom:4px;}
.lightbox-caption span{color:rgba(241,236,223,0.55); font-size:13px;}
.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);}
@media (max-width:760px){
  .lightbox-overlay{padding:20px;}
  .lightbox-figure .lb-frame{height:52vh;}
  .lightbox-nav{width:38px; height:38px;}
  .lightbox-prev{left:10px;}
  .lightbox-next{right:10px;}
  .lightbox-close{top:14px; right:14px; width:38px; height:38px;}
}

/* ---------- 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:'Playfair Display',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, brochure download on the right */
.portfolio-bar{display:flex; gap:24px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; margin-bottom:44px;}
.portfolio-bar .filters{margin-bottom:0; flex:1 1 auto;}
.brochure-btn{display:inline-flex; align-items:center; gap:8px; flex:0 0 auto; margin-left:auto; white-space:nowrap;}
.brochure-btn[disabled]{opacity:.6; cursor:progress; transform:none;}
.brochure-btn[disabled]:hover{transform:none;}
@media(max-width:700px){
  .portfolio-bar{gap:18px;}
  .brochure-btn{width:100%; justify-content:center;}
}