/* ============================================================
   ACCORD BATHROOMS & KITCHENS
   Greyscale by design — the photography carries all the colour.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;1,6..72,300&display=swap');

:root{
  --paper:   #F2F1EE;
  --paper-2: #E7E5E0;
  --ink:     #17181A;
  --ink-2:   #4B4D50;
  --mute:    #85878B;
  --line:    #D3D1CC;
  --white:   #FFFFFF;
  --deep:    #26383A;      /* interactive states only */

  --sans: 'Archivo', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, serif;

  --gut: clamp(20px, 4vw, 56px);
  --max: 1560px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif); font-size:17px; line-height:1.65;
  font-weight:300; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-family:var(--sans); font-weight:500; letter-spacing:-0.025em; line-height:1.08; }
p{ margin:0; }
button{ font:inherit; }

:focus-visible{ outline:2px solid var(--deep); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

.wrap{ max-width:var(--max); margin:0 auto; padding-inline:var(--gut); }
.narrow{ max-width:760px; }

/* ---------- header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:22px;
  transition:background .35s ease, color .35s ease, border-color .35s ease;
  border-bottom:1px solid transparent;
}
.hdr .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hdr.on-image{ color:var(--white); }
.hdr.solid{ background:var(--paper); color:var(--ink); border-bottom-color:var(--line); }

.mark{ font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.26em; }
.mark span{ display:block; font-size:8.5px; letter-spacing:.3em; font-weight:400; opacity:.62; margin-top:4px; }

.nav ul{ display:flex; gap:34px; }
.nav a{ font-family:var(--sans); font-size:13.5px; letter-spacing:.01em; position:relative; padding-block:4px; }
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.nav a:hover::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }

.hdr-tel{ font-family:var(--sans); font-size:13.5px; white-space:nowrap; }

.burger{ display:none; background:none; border:0; padding:6px; cursor:pointer; width:34px; }
.burger i{ display:block; height:1px; background:currentColor; margin:6px 0; transition:transform .3s, opacity .3s; }
.burger[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- hero ---------- */
.hero{ position:relative; height:100svh; min-height:560px; overflow:hidden; }
.hero img{ width:100%; height:100%; object-fit:cover; }
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,16,18,.40) 0%, rgba(15,16,18,.04) 30%, rgba(15,16,18,.52) 66%, rgba(15,16,18,.80) 100%);
}
.hero-copy{
  position:absolute; left:0; right:0; bottom:clamp(40px,7vh,86px); z-index:2; color:var(--white);
}
.hero-copy h1{
  font-size:clamp(38px,6.4vw,92px); font-weight:400; letter-spacing:-0.035em; max-width:16ch;
}
.hero-copy p{
  margin-top:20px; max-width:44ch; font-size:clamp(16px,1.5vw,19px); color:rgba(255,255,255,.86);
}
.scroll-hint{
  position:absolute; right:var(--gut); bottom:clamp(40px,7vh,86px); z-index:2;
  font-family:var(--sans); font-size:12px; letter-spacing:.14em; color:rgba(255,255,255,.7);
  writing-mode:vertical-rl;
}

/* ---------- generic section ---------- */
.sec{ padding-block:clamp(72px,10vw,150px); }
.sec-tight{ padding-block:clamp(48px,6vw,88px); }
.sec.alt{ background:var(--paper-2); }
.sec.dark{ background:var(--ink); color:var(--paper); }
.sec.dark .lede,.sec.dark .body-copy{ color:rgba(242,241,238,.76); }

.h-lg{ font-size:clamp(29px,4.2vw,58px); font-weight:400; }
.h-md{ font-size:clamp(24px,2.9vw,38px); font-weight:400; }
.h-sm{ font-size:clamp(19px,2vw,24px); font-weight:500; }

.lede{ font-size:clamp(18px,2vw,23px); line-height:1.55; color:var(--ink-2); }
.body-copy{ color:var(--ink-2); }
.body-copy + .body-copy{ margin-top:1.1em; }

.meta{ font-family:var(--sans); font-size:12.5px; letter-spacing:.13em; color:var(--mute); }

/* statement block */
.statement{ max-width:24ch; font-size:clamp(28px,4vw,54px); font-weight:400; letter-spacing:-0.03em; line-height:1.12; }

/* two-column intro */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,110px); align-items:start; }
.split-media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split.reverse .split-media{ order:2; }

/* ---------- project index (the signature element) ---------- */
.index{ display:grid; grid-template-columns:minmax(280px,0.85fr) 1.15fr; gap:clamp(28px,5vw,80px); align-items:start; }
.index-list li + li{ border-top:1px solid var(--line); }
.index-list button{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:22px 0; display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  color:var(--mute); transition:color .3s ease;
}
.index-list button:hover,.index-list button[aria-selected="true"]{ color:var(--ink); }
.index-list .t{ font-family:var(--sans); font-size:clamp(20px,2.4vw,30px); font-weight:500; letter-spacing:-0.025em; }
.index-list .r{ font-family:var(--sans); font-size:12.5px; letter-spacing:.1em; }
.index-stage{ position:relative; aspect-ratio:4/5; background:var(--paper-2); overflow:hidden; }
.index-stage img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .5s ease;
}
.index-stage img.live{ opacity:1; }

/* ---------- gallery ---------- */
.filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:clamp(24px,4vw,48px); }
.filters button{
  background:none; border:1px solid var(--line); cursor:pointer; color:var(--ink-2);
  font-family:var(--sans); font-size:13px; padding:9px 20px; transition:.25s ease;
}
.filters button:hover{ border-color:var(--ink); color:var(--ink); }
.filters button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

.grid{ columns:3; column-gap:clamp(10px,1.4vw,20px); }
.grid figure{ break-inside:avoid; margin:0 0 clamp(10px,1.4vw,20px); position:relative; }
.grid img{ width:100%; height:auto; }
.grid figcaption{
  font-family:var(--sans); font-size:12px; letter-spacing:.08em; color:var(--mute);
  padding-top:9px;
}
.grid figure.hide{ display:none; }

.lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(15,16,18,.94);
  display:none; align-items:center; justify-content:center; padding:clamp(16px,4vw,60px);
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; object-fit:contain; }
.lightbox button{
  position:absolute; top:22px; right:26px; background:none; border:0; cursor:pointer;
  color:#fff; font-family:var(--sans); font-size:13px; letter-spacing:.1em; padding:8px;
}

/* ---------- team ---------- */
.team{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); }
.team.two-up{ grid-template-columns:repeat(2,1fr); max-width:860px; }
.team img{ width:100%; aspect-ratio:3/4; object-fit:cover; background:var(--paper-2); }
.team .ph{
  width:100%; aspect-ratio:3/4; background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; color:var(--mute);
  font-family:var(--sans); font-size:12px; letter-spacing:.1em;
}
.team h3{ margin-top:18px; font-size:19px; font-weight:500; }
.team .role{ font-family:var(--sans); font-size:12.5px; letter-spacing:.09em; color:var(--mute); margin-top:5px; }
.team p.bio{ margin-top:12px; font-size:15.5px; color:var(--ink-2); }

/* ---------- testimonials ---------- */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3vw,52px); }
.quote blockquote{
  margin:0; font-family:var(--serif); font-size:clamp(18px,1.7vw,21px);
  line-height:1.55; font-style:italic; font-weight:300;
}
.quote .by{ font-family:var(--sans); font-size:12.5px; letter-spacing:.09em; color:var(--mute); margin-top:20px; font-style:normal; }
.sec.dark .quote .by{ color:rgba(242,241,238,.6); }

/* ---------- steps (real sequence, so numbered) ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(22px,3vw,44px); }
.step{ border-top:1px solid var(--line); padding-top:20px; }
.sec.dark .step{ border-top-color:rgba(242,241,238,.22); }
.step .n{ font-family:var(--sans); font-size:12.5px; letter-spacing:.1em; color:var(--mute); }
.step h3{ margin-top:12px; font-size:19px; font-weight:500; }
.step p{ margin-top:9px; font-size:15.5px; color:var(--ink-2); }
.sec.dark .step p{ color:rgba(242,241,238,.72); }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--sans); font-size:13.5px; letter-spacing:.02em;
  padding:15px 32px; border:1px solid currentColor; cursor:pointer; background:none;
  transition:background .28s ease, color .28s ease;
}
.btn-ink{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-ink:hover{ background:transparent; color:var(--ink); }
.btn-line{ color:var(--ink); }
.btn-line:hover{ background:var(--ink); color:var(--paper); }
.btn-light{ color:var(--paper); border-color:var(--paper); }
.btn-light:hover{ background:var(--paper); color:var(--ink); }

/* ---------- full-bleed image band ---------- */
.band{ height:clamp(320px,58vh,660px); overflow:hidden; }
.band img{ width:100%; height:100%; object-fit:cover; }

/* ---------- page head ---------- */
.page-head{ padding-top:clamp(120px,16vh,190px); padding-bottom:clamp(36px,5vw,68px); }
.page-head h1{ font-size:clamp(34px,5.2vw,72px); font-weight:400; }
.page-head p{ margin-top:20px; max-width:56ch; }

/* ---------- form ---------- */
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,26px); }
.field{ display:flex; flex-direction:column; gap:9px; }
.field.full{ grid-column:1/-1; }
.field label{ font-family:var(--sans); font-size:12.5px; letter-spacing:.08em; color:var(--ink-2); }
.field input,.field select,.field textarea{
  font-family:var(--serif); font-size:16px; font-weight:300; color:var(--ink);
  background:var(--white); border:1px solid var(--line); padding:14px 15px; width:100%;
  border-radius:0; transition:border-color .2s ease;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--ink); outline:none; }
.form-note{ font-size:14px; color:var(--mute); margin-top:18px; }
.form-msg{ display:none; margin-top:22px; padding:18px 20px; background:var(--paper-2); border-left:2px solid var(--ink); font-size:15.5px; }
.form-msg.show{ display:block; }
.form-msg.err{ border-left-color:#9A3B22; }

.contact-list li{ padding:19px 0; border-bottom:1px solid var(--line); }
.contact-list li:first-child{ border-top:1px solid var(--line); }
.contact-list .k{ font-family:var(--sans); font-size:12.5px; letter-spacing:.09em; color:var(--mute); }
.contact-list .v{ display:block; margin-top:6px; font-size:18px; }

/* ---------- footer ---------- */
.ftr{ background:var(--ink); color:rgba(242,241,238,.72); padding-block:clamp(52px,7vw,86px) 30px; }
.ftr-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,4vw,60px); padding-bottom:44px; border-bottom:1px solid rgba(242,241,238,.16); }
.ftr .mark{ color:var(--paper); }
.ftr p{ margin-top:16px; max-width:36ch; font-size:15.5px; }
.ftr h4{ font-family:var(--sans); font-size:12.5px; letter-spacing:.11em; color:var(--paper); font-weight:400; margin-bottom:15px; }
.ftr li{ padding:6px 0; font-size:15.5px; }
.ftr a:hover{ color:var(--paper); }
.ftr-btm{ display:flex; justify-content:space-between; gap:18px; padding-top:24px; font-family:var(--sans); font-size:12.5px; color:rgba(242,241,238,.5); }

/* ---------- archive image (early company document) ---------- */
.archive{ margin:0; }
.archive img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--line);
}
.archive figcaption{
  font-family:var(--sans); font-size:12.5px; letter-spacing:.06em;
  color:var(--mute); padding-top:12px; max-width:34ch;
}

/* ---------- reveal ----------
   Only hidden when JS is running, so content is never lost if it fails. */
.js .rv{ opacity:0; transform:translateY(14px); transition:opacity .8s ease, transform .8s ease; }
.js .rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .rv{ opacity:1; transform:none; }
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .grid{ columns:2; }
  .team,.quotes{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .ftr-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:820px){
  .nav{
    position:fixed; inset:0; background:var(--paper); color:var(--ink);
    display:none; flex-direction:column; justify-content:center; padding:0 var(--gut);
  }
  .nav.open{ display:flex; }
  .nav ul{ flex-direction:column; gap:6px; }
  .nav a{ font-size:26px; font-family:var(--sans); letter-spacing:-0.02em; padding-block:14px; display:block; border-bottom:1px solid var(--line); }
  .nav a::after{ display:none; }
  .burger{ display:block; position:relative; z-index:110; }
  .hdr-tel{ display:none; }
  .index{ grid-template-columns:1fr; }
  .index-stage{ order:-1; aspect-ratio:4/3; }
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .form-grid{ grid-template-columns:1fr; }
  .scroll-hint{ display:none; }
}
@media (max-width:620px){
  .grid{ columns:1; }
  .team,.quotes,.steps{ grid-template-columns:1fr; }
  .ftr-top{ grid-template-columns:1fr; }
  .ftr-btm{ flex-direction:column; }
}