:root{
  --oak:#6b4c2e; --oak-dark:#3f2c1b; --cream:#f6f1e7; --paper:#fbf8f2;
  --ink:#231c15; --muted:#6a5f4f; --line:#e3d9c6; --gold:#9c7b3f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Jost',sans-serif; font-weight:300;
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif; font-weight:600; letter-spacing:.01em;}
a{color:inherit; text-decoration:none}
img{display:block; max-width:100%; height:auto}
.wrap{max-width:1180px; margin:0 auto; padding:0 28px}
.eyebrow{text-transform:uppercase; letter-spacing:.28em; font-size:.72rem; color:var(--gold); font-weight:500;}

header{position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(251,248,242,0.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:84px}
.brand{font-family:'Cormorant Garamond',serif; font-size:1.5rem; font-weight:600; letter-spacing:.04em; color:var(--oak-dark)}
.brand span{color:var(--gold)}
.navlinks{display:flex; gap:22px; font-size:.78rem; letter-spacing:.02em; text-transform:uppercase}
.navlinks a{position:relative; padding:4px 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:1px;background:var(--gold);transition:width .3s}
.navlinks a:hover::after,.navlinks a.active::after{width:100%}
.navlinks a.active{color:var(--oak)}
.navcta{border:1px solid var(--oak-dark); padding:10px 22px; font-size:.78rem; letter-spacing:.08em; text-transform:uppercase}
.menubtn{display:none; background:none; border:0; font-size:1.6rem; cursor:pointer; color:var(--oak-dark)}

.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:linear-gradient(180deg,rgba(35,28,21,.15),rgba(25,19,13,.8)), url('img/Great-Hall-Cothay-Manor.jpg') center 35%/cover no-repeat;}
.hero-inner{color:#f3ead9; padding:0 0 90px; max-width:820px}
.hero .eyebrow{color:#e4c98a}
.hero h1{font-size:clamp(2.6rem,6vw,4.4rem); line-height:1.05; margin:18px 0 22px; color:#fff}
.hero p{font-size:1.1rem; color:#e9e1d1; max-width:540px; margin-bottom:34px}
.hero-ctas{display:flex; gap:18px; flex-wrap:wrap}
.btn{display:inline-block; padding:15px 32px; font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; border:1px solid currentColor; transition:.25s; cursor:pointer; background:none; color:inherit}
.btn-light{color:#fff}
.btn-light:hover{background:#fff; color:var(--oak-dark)}
.btn-solid{background:var(--gold); color:#fff; border-color:var(--gold)}
.btn-solid:hover{background:#b48f4d}
.btn-dark{background:var(--oak-dark); color:#fff; border-color:var(--oak-dark)}
.btn-dark:hover{background:var(--oak)}
.scrolldown{position:absolute; right:28px; bottom:26px; color:#e9e1d1; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; writing-mode:vertical-rl; display:flex; align-items:center; gap:10px;}
.scrolldown::after{content:"";width:1px;height:50px;background:#e9e1d1;opacity:.6}

/* page hero banner (inner pages) — Drummonds-style full bleed editorial banner */
.page-hero{
  position:relative; height:56vh; min-height:360px; margin-top:0;
  display:flex; align-items:flex-end; background-size:cover; background-position:center;
}
.page-hero::before{content:"";position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,19,13,.25),rgba(20,15,10,.75));}
.page-hero .wrap{position:relative; color:#fff; padding-bottom:56px}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.4rem); color:#fff; margin-top:12px; max-width:760px}
.page-hero .eyebrow{color:#e4c98a}

section{padding:110px 0}
.section-head{max-width:640px; margin-bottom:56px}
.section-head h2{font-size:clamp(2rem,4vw,2.8rem); margin:14px 0 18px}
.section-head p{color:var(--muted); font-size:1.02rem}
.center{text-align:center; margin-left:auto; margin-right:auto}
.section-intro{max-width:720px; margin:0 auto 54px; text-align:center; color:var(--muted); font-size:1.05rem}

.clients-strip{background:var(--oak-dark); padding:40px 0}
.clients-strip .wrap{display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; justify-content:center}
.clients-strip span{color:#d8c6a0; font-family:'Cormorant Garamond',serif; font-size:1.05rem; letter-spacing:.03em; opacity:.9;}

.about{background:var(--cream)}
.about-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:center}
.about-grid img{border:1px solid var(--line)}
.about-copy .lede{font-family:'Cormorant Garamond',serif; font-size:1.5rem; color:var(--oak-dark); margin-bottom:22px}
.about-copy p{margin-bottom:16px; color:#4b4234}
.pull-quote{margin-top:28px; padding-left:22px; border-left:3px solid var(--gold); font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.25rem; color:var(--oak-dark);}
.pull-quote span{display:block; margin-top:10px; font-style:normal; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.stat-row{display:flex; gap:48px; margin-top:38px; flex-wrap:wrap}
.stat-row div strong{display:block; font-family:'Cormorant Garamond',serif; font-size:2.1rem; color:var(--oak)}
.stat-row div span{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}

/* prose pages (about, project detail) — Cartier 365-style article layout */
.prose-section{background:var(--paper); padding-top:90px}
.prose-grid{display:grid; grid-template-columns:1.6fr 1fr; gap:70px; align-items:start}
.prose{max-width:640px}
.prose .lede{font-family:'Cormorant Garamond',serif; font-size:1.45rem; color:var(--oak-dark); margin-bottom:20px}
.prose p{margin-bottom:18px; color:#4b4234; font-size:1.02rem}
.prose h3{color:var(--oak-dark); font-size:1.5rem; margin:34px 0 14px}
.prose-aside{position:sticky; top:120px}
.prose-aside img{border:1px solid var(--line); margin-bottom:24px}
.aside-stats{border:1px solid var(--line); background:var(--cream); padding:24px}
.aside-stats div{padding:12px 0; border-bottom:1px solid var(--line)}
.aside-stats div:last-child{border-bottom:0}
.aside-stats strong{display:block; font-family:'Cormorant Garamond',serif; color:var(--oak-dark); font-size:1.2rem}
.aside-stats span{font-size:.74rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}

.makers{background:var(--paper)}
.makers-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.makers-grid-lg{grid-template-columns:repeat(2,1fr); max-width:900px; margin:0 auto}
.maker-card{border:1px solid var(--line); padding:30px 26px; background:var(--cream)}
.maker-card.lg{padding:40px}
.maker-card h3{font-size:1.3rem; color:var(--oak-dark); margin-bottom:6px}
.maker-card.lg h3{font-size:1.6rem}
.maker-card .role{font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); margin-bottom:14px; display:block}
.maker-card p{font-size:.92rem; color:var(--muted)}
.maker-card.lg p{font-size:1rem}

.services-teaser{background:var(--oak-dark); color:#eee2c9}
.services-teaser .section-head p{color:#c9bb9a}
.svc-grid-sm{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14)}
.svc-sm{background:var(--oak-dark); padding:26px 24px; transition:.2s}
.svc-sm:hover{background:#4d3620}
.svc-sm h3{color:#fff; font-size:1.1rem}

.svc-detail-list{background:var(--paper)}
.svc-detail{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:70px 0; border-bottom:1px solid var(--line)}
.svc-detail:first-child{padding-top:0}
.svc-detail.rev{direction:rtl}
.svc-detail.rev > *{direction:ltr}
.svc-detail img{border:1px solid var(--line); aspect-ratio:4/3; object-fit:cover; width:100%}
.svc-detail-copy h2{font-size:2rem; margin:10px 0 16px; color:var(--oak-dark)}
.svc-detail-copy p{color:var(--muted); margin-bottom:26px; font-size:1.02rem}

.projects{background:var(--cream)}
.proj-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.proj.wide{grid-column:span 2}
.proj{position:relative; overflow:hidden; aspect-ratio:4/3; display:block}
.proj img{width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.proj:hover img{transform:scale(1.07)}
.proj-cap{position:absolute; left:0; right:0; bottom:0; padding:22px 24px; background:linear-gradient(0deg,rgba(20,15,10,.85),transparent 80%); color:#fff;}
.proj-cap .eyebrow{color:#e4c98a; margin-bottom:4px; display:block}
.proj-cap h3{font-size:1.2rem; color:#fff}
.projects-more{text-align:center; margin-top:48px}

.proj-hero{position:relative; height:62vh; min-height:400px; display:flex; align-items:flex-end; background-size:cover; background-position:center;}
.proj-hero::before{content:"";position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,19,13,.2),rgba(18,13,9,.82));}
.proj-hero .wrap{position:relative; color:#fff; padding-bottom:52px}
.proj-hero h1{color:#fff; font-size:clamp(2.1rem,4.6vw,3.2rem); margin:12px 0 10px; max-width:780px}
.proj-hero .place{font-size:.84rem; text-transform:uppercase; letter-spacing:.1em; color:#dcccaa}
.proj-detail{background:var(--paper); padding-top:90px}
.proj-nav{background:var(--cream); padding:36px 0; border-top:1px solid var(--line)}
.proj-nav-row{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:.92rem}
.proj-nav-row a:not(.btn){color:var(--oak-dark); font-family:'Cormorant Garamond',serif; font-size:1.1rem}
.proj-nav-row a:not(.btn):hover{color:var(--gold)}

.press{background:var(--oak); color:#fff; text-align:center}
.press blockquote{font-family:'Cormorant Garamond',serif; font-size:clamp(1.6rem,3.6vw,2.6rem); font-style:italic; max-width:780px; margin:0 auto 20px; line-height:1.4;}
.press cite{font-style:normal; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:#e9dcb8}
.press-list{background:var(--paper)}
.press-item{max-width:760px; margin:0 auto 54px; padding-bottom:40px; border-bottom:1px solid var(--line)}
.press-item:last-child{border-bottom:0}
.press-item h2{font-size:1.8rem; color:var(--oak-dark); margin:10px 0 14px}
.press-item p{color:var(--muted); font-size:1.02rem}
.press-item a{color:var(--gold); text-decoration:underline}

.cta-band{background:var(--cream); text-align:center; padding:90px 0}
.cta-band h2{font-size:clamp(1.8rem,3.6vw,2.4rem); margin-bottom:28px; color:var(--oak-dark); max-width:640px; margin-left:auto; margin-right:auto}

.enquire{background:var(--paper)}
.enquire-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px}
.enquire-copy h2{font-size:clamp(2rem,4vw,2.6rem); margin:14px 0 18px}
.enquire-copy p{color:var(--muted); margin-bottom:28px}
.detail-row{display:flex; gap:14px; margin-bottom:18px; align-items:flex-start}
.detail-row .dot{width:7px;height:7px;border-radius:50%;background:var(--gold); margin-top:9px; flex:none}
.detail-row strong{display:block; color:var(--oak-dark); font-family:'Cormorant Garamond',serif; font-size:1.15rem}
.detail-row span{color:var(--muted); font-size:.92rem}
form{background:var(--cream); border:1px solid var(--line); padding:40px}
form label{display:block; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px}
form .field{margin-bottom:20px}
form input, form select, form textarea{width:100%; border:1px solid var(--line); background:#fff; padding:13px 14px; font-family:'Jost',sans-serif; font-size:.95rem; color:var(--ink);}
form textarea{min-height:110px; resize:vertical}
form button{width:100%; background:var(--oak-dark); color:#fff; border:0; padding:16px; text-transform:uppercase; letter-spacing:.1em; font-size:.82rem; cursor:pointer; transition:.25s;}
form button:hover{background:var(--oak)}

footer{background:var(--oak-dark); color:#bfae8a; padding:60px 0 30px}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; margin-bottom:40px}
.foot-grid h4{color:#fff; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px}
.foot-grid .brand{color:#fff; margin-bottom:14px; display:block}
.foot-grid p{font-size:.9rem; line-height:1.8}
.foot-grid a{display:block; font-size:.9rem; margin-bottom:8px; opacity:.85}
.foot-grid a:hover{opacity:1}
.foot-bottom{border-top:1px solid rgba(255,255,255,.12); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.78rem; opacity:.7;}

.noindex-flag{position:fixed; bottom:16px; left:16px; z-index:60; background:#1b140d; color:#e4c98a; font-size:.68rem; letter-spacing:.06em; padding:8px 14px; border:1px solid #4a3a26; text-transform:uppercase;}

@media (max-width:1180px){
  .navlinks{display:none; position:absolute; top:84px; left:0; right:0; background:var(--paper); flex-direction:column; padding:20px 28px; border-bottom:1px solid var(--line)}
  .navlinks.open{display:flex}
  .menubtn{display:block}
  .about-grid, .enquire-grid, .prose-grid, .svc-detail{grid-template-columns:1fr; gap:36px}
  .svc-detail.rev{direction:ltr}
  .makers-grid, .makers-grid-lg{grid-template-columns:repeat(2,1fr)}
  .svc-grid-sm{grid-template-columns:repeat(2,1fr)}
  .proj-grid{grid-template-columns:repeat(2,1fr)}
  .proj.wide{grid-column:span 2}
  .foot-grid{grid-template-columns:1fr}
  .prose-aside{position:static}
}
@media (max-width:560px){
  .makers-grid, .makers-grid-lg{grid-template-columns:1fr}
  .svc-grid-sm{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .proj.wide{grid-column:span 1}
  section{padding:70px 0}
  .stat-row{gap:30px}
  .page-hero{height:46vh}
}