/* ==========================================================================
   FORMA SURFACE DESIGN
   Palette sampled directly from Forma's own Oltre sample boards.
   No invented colours — every tone below appears in the real material.
   ========================================================================== */
:root{
  /* Surfaces — warm, pale */
  --sand-pale:#F2ECE2;
  --sand:#E9E1D4;
  --cream:#FBF7F0;
  --ink:#241F19;

  /* Type — all AA on the page background */
  --walnut:#2E2822;
  --body:#4E463C;
  --muted:#7C7266;
  --accent:#6B5738;
  --accent-warm:#C4A375;

  --stone:#DCD3C5;
  --shadow:rgba(36,31,25,0.14);
  --maxw:1200px;

  --f-clouded-1:#F0EAE0; --f-clouded-2:#D9CEBD;
  --f-greige-1:#D6CFC2;  --f-greige-2:#A9A093;
  --f-sand-1:#E2D5C0;    --f-sand-2:#A08D6E;
  --f-leaf-1:#EFE5D5;    --f-leaf-2:#B9A788;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--sand-pale);color:var(--body);
  font-family:'Inter',sans-serif;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Newsreader',serif;font-weight:300;color:var(--walnut);line-height:1.12;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
ul{list-style:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.eyebrow{font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);font-weight:500}
::selection{background:var(--accent);color:var(--cream)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px
}

/* ---------- placeholder marker ---------- */
.tbc{border-bottom:1.5px dotted var(--accent);background:rgba(107,91,68,0.09);padding:0 3px;cursor:help}

/* ---------- microcement texture engine ----------
   Procedurally generated surfaces (multi-octave noise + trowel-skip islands
   + mineral grain), colour-ramped from the real sample-board readings.
   Interim, until project photography replaces them. */
.mc{position:relative;overflow:hidden;background-color:var(--sand);
    background-size:cover;background-position:center;isolation:isolate}
.mc::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:url('../assets/tex/grain.webp');
  background-size:200px 200px;opacity:.16;mix-blend-mode:overlay;
}
.mc>*{position:relative;z-index:2}
.t-clouded{background-image:url('../assets/tex/h-pale.webp')}
.t-greige {background-image:url('../assets/tex/h-stone.webp')}
.t-sand   {background-image:url('../assets/tex/h-sand.webp')}
.t-deep   {background-image:url('../assets/tex/h-deep.webp')}
.t-leaf   {background-image:url('../assets/tex/h-sand.webp')}
/* wide crops for banners so the grain doesn't stretch */
.page-header .ph-tex.t-clouded,.hero-tex.t-clouded{background-image:url('../assets/tex/h-pale-wide.webp')}
.page-header .ph-tex.t-greige, .hero-tex.t-greige {background-image:url('../assets/tex/h-stone-wide.webp')}
.page-header .ph-tex.t-sand,   .hero-tex.t-sand   {background-image:url('../assets/tex/h-sand-wide.webp')}
.page-header .ph-tex.t-deep,   .hero-tex.t-deep   {background-image:url('../assets/tex/h-deep-wide.webp')}

/* photo slot: designed, obviously not final */
.photo-slot{
  position:relative;border:1px dashed rgba(107,91,68,0.45);border-radius:0;overflow:hidden;
  display:flex;align-items:flex-end;
}
.photo-slot .slot-tag{
  position:relative;z-index:3;margin:14px;font-size:9.5px;letter-spacing:0.16em;text-transform:uppercase;
  background:rgba(43,38,33,0.72);color:var(--cream);padding:5px 9px;border-radius:0;
}

/* ---------- NAV ---------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(237,231,223,0.93);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(58,50,41,0.09);
}
nav.wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand img{height:31px;width:auto}
.brand-text{font-family:'Newsreader',serif;font-size:16.5px;color:var(--walnut);white-space:nowrap}
.brand-text span{display:block;font-family:'Inter',sans-serif;font-size:8px;letter-spacing:0.2em;color:var(--accent);font-weight:500;margin-top:1px}
.nav-links{display:flex;align-items:center;gap:21px}
.nav-links a{font-size:12.5px;color:var(--body);position:relative;padding:4px 0;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .25s}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
.nav-links a.active{color:var(--walnut);font-weight:500}
.nav-cta{padding:10px 2px;background:none;color:var(--walnut)!important;border-radius:0;font-size:11.5px;letter-spacing:0.07em;text-transform:uppercase;border-bottom:1.5px solid var(--accent);transition:color .25s,border-color .25s}
.nav-cta:hover{color:var(--accent)!important;border-color:var(--walnut)}
.nav-cta::after{display:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{width:24px;height:1.5px;background:var(--walnut);display:block}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:94vh;display:flex;align-items:center;padding:76px 0 40px;overflow:hidden}
.hero-tex{position:absolute;inset:0;z-index:0}
.hero-tex::before{opacity:.55}
.hero-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(237,231,223,0.96) 0%, rgba(237,231,223,0.88) 42%, rgba(237,231,223,0.42) 72%, rgba(237,231,223,0.22) 100%)}
.hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center;width:100%}
.hero h1{font-size:clamp(38px,5.4vw,68px);margin:20px 0 22px}
.hero h1 em{font-style:italic;color:var(--accent)}
.hero p.lead{font-size:17px;max-width:470px;color:var(--body);margin-bottom:32px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.hero-plaque{background:var(--cream);border-radius:0;padding:38px 28px;box-shadow:0 30px 60px -22px var(--shadow);text-align:center}
.hero-plaque img{width:100%;max-width:310px;margin:0 auto}
.hero-stats{display:flex;justify-content:center;gap:28px;margin-top:26px;padding-top:22px;border-top:1px solid var(--stone)}
.hero-stats strong{display:block;font-family:'Newsreader',serif;font-size:23px;color:var(--walnut)}
.hero-stats span{font-size:10px;letter-spacing:0.05em;color:var(--muted);text-transform:uppercase}

/* ---------- PAGE HEADER ---------- */
.page-header{position:relative;padding:142px 0 66px;overflow:hidden}
.page-header .ph-tex{position:absolute;inset:0;z-index:0}
.page-header .ph-tex::before{opacity:.5}
.page-header .ph-veil{position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg, rgba(237,231,223,0.95) 0%, rgba(237,231,223,0.82) 55%, rgba(237,231,223,0.4) 100%)}
.page-header .wrap{position:relative;z-index:2}
.page-header h1{font-size:clamp(32px,4.4vw,54px);max-width:760px;margin-top:14px}
.page-header p.lead{font-size:16px;color:var(--body);max-width:560px;margin-top:16px}

/* ---------- BUTTONS ---------- */
.btn-primary,.btn-secondary,.btn-dark{
  display:inline-flex;align-items:center;gap:10px;padding:15px 30px;
  font-size:12.5px;letter-spacing:0.07em;text-transform:uppercase;border-radius:0;
  transition:all .25s;font-weight:500;border:1px solid transparent;cursor:pointer;font-family:'Inter',sans-serif;
}
.btn-primary{background:var(--walnut);color:var(--cream);border-color:var(--walnut)}
.btn-primary:hover{background:transparent;color:var(--walnut)}
.btn-secondary{background:transparent;color:var(--walnut);border-color:var(--stone)}
.btn-secondary:hover{border-color:var(--walnut)}
.btn-dark{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.btn-dark:hover{background:transparent;color:var(--cream)}

/* ---------- SECTIONS ---------- */
section{padding:104px 0}
.section-alt{background:var(--sand)}
.section-head{max-width:640px;margin-bottom:52px}
.section-head .eyebrow{margin-bottom:14px;display:block}
.section-head h2{font-size:clamp(27px,3.3vw,42px)}
.section-head p{color:var(--body);font-size:15.5px;margin-top:15px;max-width:520px}
.divider{height:56px;overflow:hidden}
.divider svg{width:100%;height:100%;display:block}

/* ---------- TRUST ---------- */
.trust-band{background:var(--ink);color:var(--cream);padding:60px 0}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.trust-item{display:flex;gap:15px;align-items:flex-start}
.trust-ico{width:42px;height:42px;flex-shrink:0;border-radius:50%;border:1px solid rgba(247,243,237,.32);display:flex;align-items:center;justify-content:center;color:var(--accent-warm)}
.trust-ico svg{width:19px;height:19px}
.trust-item h3{color:var(--cream);font-size:16px;margin-bottom:5px}
.trust-item p{font-size:13.5px;color:#C9BDB0}

.trust-feature{background:var(--ink);color:var(--cream);padding:104px 0}
.trust-feature h2,.trust-feature h3{color:var(--cream)}
.trust-feature .eyebrow{color:var(--accent-warm)}
.trust-feature .section-head p{color:#C9BDB0}
.trust-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.trust-card{background:rgba(247,243,237,.055);border:1px solid rgba(247,243,237,.14);border-radius:0;padding:30px 26px}
.trust-card svg{width:34px;height:34px;margin-bottom:16px;color:var(--accent-warm)}
.trust-card h3{font-size:17px;margin-bottom:9px}
.trust-card p{color:#C9BDB0;font-size:13.5px}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:center}
.about-visual{aspect-ratio:4/5;border-radius:0;box-shadow:0 24px 50px -22px var(--shadow)}
.about-copy p{font-size:15.5px;margin-bottom:17px;max-width:540px}
.about-list{margin-top:24px;display:grid;gap:12px}
.about-list li{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;color:var(--walnut)}
.about-list li::before{content:'';width:6px;height:6px;margin-top:8px;flex-shrink:0;background:var(--accent);border-radius:50%}

/* ---------- SERVICES ---------- */
.tabs{display:flex;gap:10px;margin-bottom:40px}
.tab-btn{font-family:'Inter',sans-serif;font-size:13px;padding:12px 26px;background:transparent;border:1px solid var(--stone);border-radius:20px;cursor:pointer;color:var(--walnut);transition:all .2s}
.tab-btn.active{background:var(--walnut);color:var(--cream);border-color:var(--walnut)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--stone);border-radius:0;overflow:hidden}
.service-card{background:var(--cream);padding:36px 28px;transition:background .3s}
.service-card:hover{background:#fff}
.service-num{font-family:'Newsreader',serif;font-size:12.5px;color:var(--accent);margin-bottom:18px;display:block}
.service-card h3{font-size:19.5px;margin-bottom:10px}
.service-card p{font-size:14px}
.service-tag{display:inline-block;margin-top:15px;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--walnut);border:1px solid var(--stone);padding:5px 12px;border-radius:20px}

.process-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:56px}
.process-step::before{content:attr(data-n);font-family:'Newsreader',serif;font-size:32px;color:var(--stone);display:block;margin-bottom:9px}
.process-step h4{font-size:15.5px;margin-bottom:7px}
.process-step p{font-size:13px}

/* ---------- FINISHES ---------- */
.finish-explainer{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-bottom:64px}
.finish-explainer .card{background:var(--cream);border:1px solid var(--stone);border-radius:0;padding:30px 28px}
.finish-explainer .card h3{font-size:19px;margin-bottom:9px}
.finish-explainer .card p{font-size:14px}
.step-index{font-family:'Newsreader',serif;color:var(--accent);font-size:12px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:9px;display:block}

.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.swatch{border-radius:0;overflow:hidden;box-shadow:0 12px 26px -18px var(--shadow);background:var(--cream)}
.swatch .face{aspect-ratio:1/1}
.swatch .cap{padding:15px 16px 17px}
.swatch .cap h4{font-size:14.5px;margin-bottom:3px}
.swatch .cap span{font-size:11.5px;color:var(--muted)}

.sheen-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.sheen-card{background:var(--cream);border:1px solid var(--stone);border-radius:0;padding:26px;text-align:center}
.sheen-dot{width:54px;height:54px;border-radius:50%;margin:0 auto 15px;background:linear-gradient(135deg,var(--f-sand-1),var(--f-sand-2))}
.sheen-card h4{font-size:15.5px;margin-bottom:5px}
.sheen-card p{font-size:12.5px}

/* ---------- GALLERY ---------- */
.gallery-filter{display:flex;gap:10px;margin-bottom:36px;flex-wrap:wrap}
.gallery-filter button{font-family:'Inter',sans-serif;font-size:12.5px;padding:9px 20px;background:transparent;border:1px solid var(--stone);border-radius:20px;cursor:pointer;color:var(--walnut);transition:all .2s}
.gallery-filter button.active,.gallery-filter button:hover{background:var(--walnut);color:var(--cream);border-color:var(--walnut)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.gallery-grid .photo-slot{aspect-ratio:1/1.06}
.empty-note{margin-top:30px;padding:22px 24px;background:var(--cream);border-left:3px solid var(--accent);border-radius:0 3px 3px 0;font-size:14px;max-width:620px}

/* ---------- AREAS ---------- */
.areas-layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.coverage-graphic{max-width:400px;margin:0 auto}
.area-list{display:grid;margin-top:24px}
.area-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--stone)}
.area-row h4{font-size:17.5px}
.area-row span{font-size:12.5px;color:var(--muted);text-align:right}
.area-towns{font-size:12.5px;color:var(--muted);margin:-8px 0 0;padding:0 0 15px;border-bottom:1px solid var(--stone)}
.showroom-note{margin-top:28px;padding:20px 22px;background:var(--cream);border-left:3px solid var(--accent);border-radius:0 3px 3px 0;font-size:13.5px}

/* ---------- COSTS ---------- */
.cost-table{width:100%;border-collapse:collapse;margin-top:8px;background:var(--cream);border-radius:0;overflow:hidden}
.cost-table th,.cost-table td{text-align:left;padding:15px 18px;border-bottom:1px solid var(--stone);font-size:14px}
.cost-table th{font-family:'Inter',sans-serif;font-size:10.5px;letter-spacing:0.09em;text-transform:uppercase;color:var(--walnut);font-weight:500}
.cost-table tr:last-child td{border-bottom:none}
.cost-note{font-size:12.5px;color:var(--muted);margin-top:15px;font-style:italic}
.factor-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:18px}
.factor-card{background:var(--cream);border:1px solid var(--stone);border-radius:0;padding:24px}
.factor-card h4{font-size:15px;margin-bottom:7px}
.factor-card p{font-size:13.5px}
.checklist{display:grid;gap:13px;margin-top:8px}
.checklist li{display:flex;gap:13px;font-size:14.5px;color:var(--walnut);align-items:flex-start}
.checklist li::before{content:'✓';color:var(--accent);font-weight:600;flex-shrink:0}

/* ---------- FAQ ---------- */
.faq-list{max-width:780px}
.faq-cat{margin-top:46px}
.faq-cat:first-child{margin-top:0}
.faq-cat>h3{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
.faq-item{border-bottom:1px solid var(--stone)}
.faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:23px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:'Newsreader',serif;font-size:17.5px;color:var(--walnut)}
.faq-q .plus{font-size:20px;color:var(--accent);transition:transform .3s;flex-shrink:0}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s}
.faq-a p{padding-bottom:23px;font-size:14.5px;max-width:640px}
.faq-a a{color:var(--accent);border-bottom:1px solid var(--stone)}

/* ---------- ENQUIRY ---------- */
.enquiry-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:64px}
.enquiry-info p.lead{font-size:15px;margin-bottom:28px;max-width:400px}
.contact-line{display:flex;align-items:center;gap:14px;margin-bottom:15px;font-size:14.5px}
.contact-line .ico{width:36px;height:36px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}
.contact-line .ico svg{width:16px;height:16px}
.social-row{display:flex;gap:12px;margin-top:24px}
.social-row a{padding:10px 18px;border:1px solid var(--stone);border-radius:20px;font-size:12.5px;color:var(--walnut);transition:all .2s}
.social-row a:hover{background:var(--walnut);color:var(--cream);border-color:var(--walnut)}
form{display:grid;gap:19px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:19px}
label{font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--walnut);margin-bottom:8px;display:block}
input,textarea,select{width:100%;padding:14px 16px;background:var(--cream);border:1px solid var(--stone);border-radius:0;font-family:'Inter',sans-serif;font-size:14.5px;color:var(--body)}
textarea{resize:vertical;min-height:110px}
.radio-group{display:flex;gap:10px}
.radio-group label{flex:1;text-align:center;padding:13px 10px;border:1px solid var(--stone);border-radius:0;cursor:pointer;text-transform:none;letter-spacing:0;font-size:13.5px;color:var(--body);margin:0;transition:all .2s}
.radio-group input{position:absolute;opacity:0;width:0;height:0}
.radio-group input:checked + label{background:var(--walnut);color:var(--cream);border-color:var(--walnut)}
.radio-group input:focus-visible + label{outline:2px solid var(--accent);outline-offset:3px}
.submit-btn{justify-self:start;margin-top:5px;padding:16px 36px;background:var(--walnut);color:var(--cream);border:none;border-radius:0;font-size:13px;letter-spacing:0.08em;text-transform:uppercase;cursor:pointer;font-family:'Inter',sans-serif;transition:background .25s}
.submit-btn:hover{background:var(--accent)}
.form-success{display:none;background:var(--cream);border:1px solid var(--stone);border-radius:0;padding:30px;text-align:center}
.form-success h3{margin-bottom:9px}
.form-note{font-size:12px;color:var(--muted);margin-top:13px;font-style:italic}

/* ---------- CTA + FOOTER ---------- */
.cta-banner{background:var(--walnut);color:var(--cream);padding:76px 0;text-align:center}
.cta-banner h2{color:var(--cream);font-size:clamp(25px,3.1vw,36px);margin-bottom:15px}
.cta-banner p{color:#D3C8BA;max-width:480px;margin:0 auto 28px;font-size:15px}
footer{background:var(--walnut);color:var(--sand-pale);padding:66px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(247,243,237,.16)}
.footer-brand img{height:31px;margin-bottom:15px;filter:brightness(0) invert(1) opacity(.92)}
.footer-brand p{font-size:13.5px;color:#C9BDB0;max-width:260px;line-height:1.7}
footer h4{font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:0.1em;text-transform:uppercase;color:#C9BDB0;margin-bottom:16px;font-weight:500;display:inline-block;padding-bottom:6px;border-bottom:1px solid #C9BDB0}
footer ul{display:grid;gap:10px}
footer a{font-size:14px;color:#E7E0D6;opacity:.85;transition:opacity .2s}
footer a:hover{opacity:1}
.footer-bottom{padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:#A79C8D;flex-wrap:wrap;gap:12px}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

@media (max-width:1080px){.nav-links{gap:15px}.nav-links a{font-size:11.5px}}
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr}
  .hero-plaque{order:-1;max-width:330px;margin:0 auto}
  .hero-veil{background:linear-gradient(180deg,rgba(237,231,223,.9),rgba(237,231,223,.96))}
  .about-grid,.enquiry-grid,.areas-layout,.finish-explainer{grid-template-columns:1fr;gap:34px}
  .services-grid,.trust-grid,.trust-cards{grid-template-columns:1fr 1fr}
  .gallery-grid,.swatch-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .process-strip,.sheen-row{grid-template-columns:1fr 1fr}
  .factor-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .nav-links{position:fixed;top:76px;left:0;right:0;bottom:0;background:var(--sand-pale);flex-direction:column;justify-content:flex-start;padding:34px 32px;gap:22px;transform:translateX(100%);transition:transform .3s;overflow-y:auto}
  .nav-links.open{transform:none}
  .burger{display:flex}
  section{padding:72px 0}
  .page-header{padding:120px 0 48px}
  .services-grid,.trust-grid,.trust-cards,.process-strip,.sheen-row{grid-template-columns:1fr}
  .gallery-grid,.swatch-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .cost-table th,.cost-table td{padding:12px 11px;font-size:13px}
  .tabs{flex-wrap:wrap}
  .area-row{flex-direction:column;gap:3px}
  .area-row span{text-align:left}
}

/* ==========================================================================
   ADDITIONS — dropdown nav, header phone, reviews, legal prose, colours
   ========================================================================== */

/* header phone */
.nav-phone{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--walnut);white-space:nowrap}
.nav-phone svg{width:14px;height:14px;color:var(--accent)}
.nav-phone::after{display:none}

/* dropdown */
.has-drop{position:relative}
.has-drop>button{
  font-family:'Inter',sans-serif;font-size:12.5px;color:var(--body);background:none;border:none;
  cursor:pointer;padding:4px 0;display:flex;align-items:center;gap:5px;position:relative;
}
.has-drop>button::after{content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);transition:width .25s}
.has-drop:hover>button::after,.has-drop.open>button::after{width:100%}
.has-drop>button .caret{width:8px;height:8px;border-right:1.3px solid var(--accent);border-bottom:1.3px solid var(--accent);transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.has-drop.open>button .caret{transform:rotate(-135deg) translateY(-2px)}
.drop{
  position:absolute;top:calc(100% + 14px);left:-18px;min-width:236px;
  background:var(--cream);border:1px solid var(--stone);border-radius:0;
  box-shadow:0 20px 40px -18px var(--shadow);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s;z-index:120;
}
.has-drop:hover .drop,.has-drop.open .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:9px 12px;font-size:13px;border-radius:0;color:var(--body)}
.drop a::after{display:none}
.drop a:hover{background:var(--sand);color:var(--walnut)}
.drop a small{display:block;font-size:11px;color:var(--muted);margin-top:1px}

/* reviews */
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.review-card{background:var(--cream);border:1px solid var(--stone);border-radius:0;padding:28px 26px}
.stars{display:flex;gap:3px;margin-bottom:13px}
.stars svg{width:15px;height:15px;color:var(--accent)}
.review-card p{font-size:14.5px;margin-bottom:18px}
.review-who strong{display:block;font-size:13.5px;color:var(--walnut)}
.review-who span{font-size:12px;color:var(--muted)}
.review-empty{border-style:dashed;background:transparent;display:flex;align-items:center;justify-content:center;text-align:center;min-height:190px}
.review-empty p{font-size:13px;color:var(--muted);font-style:italic;margin:0}

/* colours */
.colour-family{margin-bottom:52px}
.colour-family h3{font-size:20px;margin-bottom:6px}
.colour-family>p{font-size:14px;color:var(--muted);margin-bottom:18px;max-width:560px}
.colour-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.colour-chip{border-radius:0;overflow:hidden;background:var(--cream);border:1px solid var(--stone)}
.colour-chip .swab{aspect-ratio:1/1}
.colour-chip .lbl{padding:9px 10px;font-size:10.5px;color:var(--muted);text-align:center;letter-spacing:0.04em}

/* legal / prose pages */
.prose{max-width:760px}
.prose h2{font-size:22px;margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16.5px;margin:24px 0 8px}
.prose p{font-size:14.5px;margin-bottom:14px}
.prose ul{margin:0 0 16px 0;display:grid;gap:9px}
.prose ul li{display:flex;gap:12px;font-size:14.5px;align-items:flex-start}
.prose ul li::before{content:'';width:5px;height:5px;margin-top:9px;flex-shrink:0;background:var(--accent);border-radius:50%}
.prose a{color:var(--accent);border-bottom:1px solid var(--stone)}
.legal-meta{font-size:12.5px;color:var(--muted);margin-bottom:32px;padding-bottom:20px;border-bottom:1px solid var(--stone)}

/* application page hero split */
.app-split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.app-split .photo-slot{aspect-ratio:4/3}
.trade-photo-duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;height:100%}
.trade-photo-duo .photo-slot{aspect-ratio:auto;height:100%}
@media (max-width:640px){.trade-photo-duo{grid-template-columns:1fr;height:auto}.trade-photo-duo .photo-slot{aspect-ratio:4/3.2}}
.spec-list{display:grid;gap:0;margin-top:26px;background:var(--cream);border:1px solid var(--stone);border-radius:0;overflow:hidden}
.spec-row{display:flex;justify-content:space-between;gap:18px;padding:14px 18px;border-bottom:1px solid var(--stone);font-size:13.5px}
.spec-row:last-child{border-bottom:none}
.spec-row span:first-child{color:var(--muted)}
.spec-row span:last-child{color:var(--walnut);text-align:right;font-weight:500}

/* trade */
.trade-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:8px}
.trade-card{background:var(--cream);border:1px solid var(--stone);border-radius:0;padding:26px}
.trade-card h4{font-size:16px;margin-bottom:8px}
.trade-card p{font-size:13.5px}
.dl-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:15px 18px;background:var(--cream);border:1px solid var(--stone);border-radius:0;margin-bottom:10px;font-size:14px}
.dl-row a{color:var(--accent);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase}

@media (max-width:980px){
  .reviews-grid{grid-template-columns:1fr}
  .colour-grid{grid-template-columns:repeat(4,1fr)}
  .app-split,.trade-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  .nav-phone{order:-1;font-size:13.5px;padding:8px 0}
  .has-drop{width:100%}
  .has-drop>button{font-size:12.5px;width:100%;justify-content:space-between}
  .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
        background:transparent;padding:6px 0 0 12px;min-width:0;border-left:1px solid var(--stone)}
  .drop a{padding:7px 0;font-size:13px}
  .colour-grid{grid-template-columns:repeat(3,1fr)}
  .spec-row{flex-direction:column;gap:2px}
  .spec-row span:last-child{text-align:left}
  .dl-row{flex-direction:column;align-items:flex-start;gap:8px}
}

/* ==========================================================================
   REFINEMENT LAYER — restraint, air, and material presence
   Loaded last so it wins. Aim: fewer, larger, quieter elements.
   ========================================================================== */

/* Whole-page grain so flat areas are never dead flat */
body::before{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;
  background-image:url('../assets/tex/grain.webp');
  background-size:180px 180px;opacity:.05;mix-blend-mode:multiply;
}

/* --- Type: more contrast between display and body --- */
h1,h2{letter-spacing:-0.022em;font-weight:400}
h3,h4{letter-spacing:-0.012em}
.hero h1{font-size:clamp(42px,6.1vw,82px);line-height:1.02;margin:24px 0 26px}
.page-header h1{font-size:clamp(34px,5vw,62px);line-height:1.04}
.section-head h2{font-size:clamp(29px,3.7vw,50px);line-height:1.06}
.eyebrow{font-size:10.5px;letter-spacing:0.3em}
body{font-size:15.5px;line-height:1.72}
.hero p.lead{font-size:17.5px;line-height:1.68;max-width:460px}
.page-header p.lead{font-size:16.5px;line-height:1.68}

/* --- Air --- */
section{padding:132px 0}
.wrap{padding:0 40px}
.section-head{margin-bottom:64px}
.hero{min-height:100vh}
.page-header{padding:176px 0 92px}

/* --- Hairlines, not borders --- */
.service-card,.factor-card,.trade-card,.sheen-card,.finish-explainer .card,
.review-card,.colour-chip,.spec-list,.cost-table,.dl-row{
  border-color:rgba(58,50,41,0.11);
}
.faq-item,.area-row,.cost-table td,.cost-table th,.spec-row{
  border-bottom-color:rgba(58,50,41,0.10);
}
.services-grid{gap:1px;background:rgba(58,50,41,0.11)}

/* --- Depth: softer, further-thrown shadows --- */
.hero-plaque{box-shadow:0 48px 90px -40px rgba(43,38,33,.28);padding:46px 34px;border-radius:0}
.swatch{box-shadow:0 20px 44px -28px rgba(43,38,33,.34)}
.review-card,.trade-card,.factor-card{box-shadow:0 14px 34px -26px rgba(43,38,33,.26)}
.drop{box-shadow:0 28px 56px -26px rgba(43,38,33,.32)}

/* --- Slower, quieter motion --- */
.reveal{transform:translateY(28px);transition:opacity 1.05s cubic-bezier(.16,.68,.3,1),transform 1.05s cubic-bezier(.16,.68,.3,1)}
.btn-primary,.btn-secondary,.btn-dark,.nav-cta,.tab-btn,.gallery-filter button{transition:all .45s cubic-bezier(.16,.68,.3,1)}
.gallery-item .tex,.photo-slot{transition:transform .9s cubic-bezier(.16,.68,.3,1)}
.service-card{transition:background .5s ease}

/* --- Buttons: thinner, wider, more considered --- */
.btn-primary,.btn-secondary,.btn-dark{padding:17px 38px;font-size:11.5px;letter-spacing:0.14em;font-weight:400}
.nav-cta{padding:11px 22px;letter-spacing:0.12em;font-size:10.5px}
.submit-btn{padding:18px 44px;letter-spacing:0.14em;font-size:11.5px;font-weight:400}

/* --- Nav: lighter --- */
header{background:rgba(237,231,223,0.82);backdrop-filter:blur(16px) saturate(1.1);border-bottom-color:rgba(58,50,41,0.07)}
nav.wrap{height:88px}
.nav-links a,.has-drop>button{font-size:12px;letter-spacing:0.04em}

/* --- Texture panels get a little more presence --- */
.hero-veil{background:linear-gradient(102deg,rgba(237,231,223,.965) 0%,rgba(237,231,223,.90) 38%,rgba(237,231,223,.44) 70%,rgba(237,231,223,.14) 100%)}
.page-header .ph-veil{background:linear-gradient(102deg,rgba(237,231,223,.96) 0%,rgba(237,231,223,.86) 48%,rgba(237,231,223,.40) 100%)}

/* --- Dark sections carry the material too --- */
.trust-band,.trust-feature,.cta-banner{position:relative;overflow:hidden;isolation:isolate}
.trust-band::before,.trust-feature::before,.cta-banner::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:url('../assets/tex/h-deep-wide.webp');
  background-size:cover;background-position:center;opacity:.5;
}
.cta-banner::before{opacity:.34}
.trust-band>*,.trust-feature>*,.cta-banner>*{position:relative;z-index:1}
.cta-banner{background:var(--ink)}
.cta-banner p{color:#C4B9AA}

/* --- Swatches read as material samples, not colour blocks --- */
.swatch .face{aspect-ratio:4/5}
.swatch .cap{padding:18px 18px 20px}
.swatch .cap h4{font-size:15px}
.colour-chip .swab{aspect-ratio:4/5}

/* --- Photo slots: quieter, less "broken" --- */
.photo-slot{border:none;box-shadow:inset 0 0 0 1px rgba(58,50,41,.13)}
.photo-slot .slot-tag{background:rgba(43,38,33,.62);letter-spacing:0.2em;font-size:9px;backdrop-filter:blur(4px)}

/* --- Footer --- */
footer{padding:88px 0 34px;position:relative;overflow:hidden;isolation:isolate}
footer::before{content:'';position:absolute;inset:0;z-index:0;
  background-image:url('../assets/tex/h-deep-wide.webp');background-size:cover;opacity:.42}
footer>*{position:relative;z-index:1}

@media (max-width:980px){
  section{padding:96px 0}
  .page-header{padding:140px 0 66px}
}
@media (max-width:720px){
  .wrap{padding:0 24px}
  section{padding:78px 0}
  .page-header{padding:124px 0 54px}
  .hero h1{font-size:clamp(36px,10vw,52px)}
  body::before{opacity:.04}
}


/* ==========================================================================
   HERO MARK — logo sits directly on the surface, no card, no chrome
   ========================================================================== */
.hero-mark{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
/* barely-there lift so the walnut mark keeps contrast over the darker
   passages of the texture without reading as a panel */
.hero-mark::before{
  content:'';position:absolute;inset:-8%;
  background:radial-gradient(ellipse 62% 58% at 50% 50%,
             rgba(240,235,227,.72) 0%, rgba(240,235,227,.44) 42%,
             rgba(240,235,227,.16) 68%, transparent 82%);
  filter:blur(18px);
}
.hero-mark img{
  position:relative;z-index:1;
  width:100%;max-width:430px;height:auto;
  opacity:.94;
}
@media (max-width:980px){
  .hero-mark{order:-1;padding:0 0 12px}
  .hero-mark img{max-width:300px}
  .hero-mark::before{inset:-14%}
}
@media (max-width:720px){
  .hero-mark img{max-width:240px}
}


/* social pills with icons */
.social-row a{display:inline-flex;align-items:center;gap:8px}
.social-row a svg{width:15px;height:15px;flex-shrink:0}

/* ==========================================================================
   LAUNCH MODE
   The .tbc markers are a working aid — dotted underline + highlight so you
   can see what still needs filling in. They are VISIBLE TO VISITORS.
   Before you publish, uncomment the block below. Anything still unfilled
   then reads as ordinary text instead of looking broken.
   ========================================================================== */
/* LAUNCH MODE IS ON. To see remaining placeholders again, wrap the line
   below in slash-star and star-slash. */
.tbc{border-bottom:none !important;background:transparent !important;padding:0 !important;cursor:auto !important;}

/* ==========================================================================
   MOBILE NAVIGATION — final override, loaded last so it wins.

   The header bar is removed entirely below 900px so nothing overlaps the hero
   logo. Only a floating burger remains. backdrop-filter is explicitly dropped
   because it creates a containing block, which was trapping the fixed menu
   panel inside the 89px header and hiding everything but the phone number.
   ========================================================================== */
.mob-only{display:none}

@media (max-width:900px){
  header{background:transparent!important;backdrop-filter:none!important;
         border-bottom:none!important;position:absolute!important;pointer-events:none}
  header .wrap{padding:0}
  nav.wrap{height:auto!important;justify-content:flex-end;padding:0;gap:0}
  .brand{display:none}

  .burger{display:flex!important;pointer-events:auto;position:fixed;top:14px;right:14px;
          z-index:130;width:48px;height:48px;align-items:center;justify-content:center;
          gap:5px;background:rgba(242,236,226,.88);backdrop-filter:blur(10px);
          box-shadow:0 2px 16px -6px rgba(36,31,25,.4)}
  .burger span{width:19px;height:1.5px}

  .nav-links{position:fixed!important;inset:0!important;top:0!important;z-index:125;
             /* header is pointer-events:none so it doesn't block the hero;
                the panel must explicitly re-enable them or it is inert */
             pointer-events:auto!important;
             background:var(--sand-pale);display:flex;flex-direction:column;
             justify-content:flex-start;align-items:stretch;
             padding:80px 30px 56px!important;gap:0!important;
             height:100dvh;max-height:100dvh;
             overflow-y:auto!important;-webkit-overflow-scrolling:touch;
             overscroll-behavior:contain;touch-action:pan-y;
             transform:translateX(100%);transition:transform .42s cubic-bezier(.16,.68,.3,1)}
  /* children must not compress instead of overflowing */
  .nav-links>*{flex-shrink:0}
  .nav-links.open{transform:none}

  .nav-links>a,.mob-only>a{display:block;font-size:17px;padding:15px 0;
             border-bottom:1px solid var(--line);color:var(--walnut)}
  .nav-links>a::after{display:none}

  .has-drop{width:100%}
  .has-drop>button{width:100%;justify-content:space-between;font-size:17px;padding:15px 0;
             border-bottom:1px solid var(--line);color:var(--walnut);
             font-family:'Newsreader',serif;font-weight:300}
  .has-drop>button::after,.has-drop>button .caret{display:none}
  .drop{position:static!important;opacity:1!important;visibility:visible!important;
        transform:none!important;box-shadow:none;border:none;background:transparent;
        padding:2px 0 8px 16px!important;min-width:0}
  .drop a{padding:11px 0;font-size:14.5px;color:var(--body);border-bottom:none}
  .drop a small{font-size:11.5px;margin-top:1px}
  .drop a:hover{background:transparent}

  .mob-only{display:block;width:100%}
  .mob-head{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
            color:var(--accent);padding:28px 0 4px;font-weight:500}
  .mob-only>a{font-size:15.5px;padding:12px 0}

  .nav-phone{order:0;font-size:16px;padding:24px 0 0!important;color:var(--walnut);
             justify-content:flex-start}
  .nav-phone svg{width:16px;height:16px}
  .nav-cta{margin-top:20px;text-align:center;justify-content:center;
           padding:17px!important;font-size:11px}

  /* hero and page headers no longer sit under a fixed bar */
  .hero{padding-top:0!important;min-height:100svh}
  .hero-mark img{max-width:260px}
  .page-header{padding:104px 0 58px!important}
}

/* partner reference — Gorringe */
.partner-link{color:inherit;border-bottom:1px solid var(--accent);
              transition:color .4s,border-color .4s}
.partner-link:hover{color:var(--accent)}
.partner-meta{display:block;margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.6}
.partner-meta a{color:var(--accent)}
.cta-banner .partner-link{color:var(--on-dark);border-bottom-color:var(--accent-warm)}
.cta-banner .partner-link:hover{color:var(--accent-warm)}

/* ---------- Project photography filmstrip (homepage) ---------- */
.filmstrip-wrap{position:relative}
.project-filmstrip{
  display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 14px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
}
.project-filmstrip .photo-slot{
  flex:0 0 auto;width:230px;aspect-ratio:1/1.06;scroll-snap-align:start;cursor:zoom-in;
}
.project-filmstrip .photo-slot img{transition:transform .5s}
.project-filmstrip .photo-slot:hover img{transform:scale(1.04)}
.project-filmstrip::-webkit-scrollbar{height:7px}
.project-filmstrip::-webkit-scrollbar-thumb{background:var(--stone)}
.project-filmstrip::-webkit-scrollbar-track{background:transparent}
.filmstrip-hint{margin-top:4px;font-size:12px;color:var(--muted);letter-spacing:.04em}
@media (max-width:640px){.project-filmstrip .photo-slot{width:200px}}

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed;inset:0;background:rgba(36,31,25,.94);display:none;
  align-items:center;justify-content:center;z-index:999;padding:48px 20px;
}
.lightbox.open{display:flex}
.lightbox-img{max-width:100%;max-height:85vh;display:block;box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.lightbox-close{
  position:absolute;top:18px;right:22px;background:none;border:none;color:var(--cream);
  font-size:34px;line-height:1;cursor:pointer;padding:8px 12px;
}
.lightbox-close:hover{color:var(--accent-warm)}
.lightbox-caption{
  position:absolute;bottom:26px;left:0;right:0;text-align:center;color:var(--cream);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
}

.gallery-grid .photo-slot.has-photo{cursor:zoom-in}
.gallery-grid .photo-slot.has-photo > img{position:absolute;inset:0}
.gallery-grid .photo-slot.has-photo .slot-tag{position:absolute;left:0;bottom:0;z-index:3}