/* Campbell Hill Group — site styles */
:root{
  --cream:#f4efe8;
  --cream-2:#ece3d5;
  --navy:#1b2436;
  --navy-deep:#141a23;
  --ink:#232833;
  --body:#4c525e;
  --bronze:#b0894f;
  --bronze-ink:#8a6a38;
  --muted:#7d7568;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --pad:clamp(1.5rem,5vw,6rem);
  --max:1440px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;font-weight:400;line-height:1.6;overflow-x:hidden}
img{max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:1.1}
a{color:var(--bronze-ink)}
a:hover{color:#6f5527}
::selection{background:var(--bronze);color:#fff}
:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
button,input,select,textarea{font-family:inherit;font-size:inherit}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--navy);color:#fff;padding:.9rem 1.4rem;text-decoration:none;font-size:.85rem;letter-spacing:.1em}
.skip:focus{left:0;color:#fff}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
  padding:1.15rem var(--pad);background:transparent;border-bottom:1px solid transparent;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .4s ease,border-color .4s ease}
.nav__logo{display:flex;align-items:center;flex-shrink:0}
.nav__logo img{height:34px;width:auto;display:block}
.nav__logo .logo--dark{display:none}
.nav__links{display:flex;align-items:center;gap:clamp(1.1rem,2.2vw,2.2rem)}
.nav a.navlink,.nav a.navphone{color:#f4efe8;text-decoration:none;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:color .2s}
.nav a.navphone{letter-spacing:.08em;text-transform:none;font-weight:400}
.nav .navcta{border:1px solid var(--bronze);color:#f4efe8;text-decoration:none;padding:.68rem 1.5rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap;transition:background .25s,color .25s}
.nav .navcta:hover{background:var(--bronze);color:var(--navy)}
.nav a.navlink:hover,.nav a.navphone:hover{color:var(--bronze)}
.nav--solid,body[data-scrolled="1"] .nav{background:rgba(244,239,232,.95);border-bottom-color:rgba(27,36,54,.12)}
.nav--solid a.navlink,.nav--solid a.navphone,.nav--solid .navcta,
body[data-scrolled="1"] .nav a.navlink,body[data-scrolled="1"] .nav a.navphone,body[data-scrolled="1"] .nav .navcta{color:var(--ink)}
.nav--solid a.navlink:hover,body[data-scrolled="1"] .nav a.navlink:hover{color:var(--bronze-ink)}
.nav--solid .logo--light,body[data-scrolled="1"] .nav .logo--light{display:none}
.nav--solid .logo--dark,body[data-scrolled="1"] .nav .logo--dark{display:block}
.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer;padding:8px}
.burger span{display:block;width:26px;height:1.5px;background:#f4efe8}
.nav--solid .burger span,body[data-scrolled="1"] .burger span{background:var(--ink)}

.menu{position:fixed;inset:0;z-index:200;background:var(--navy);display:none;flex-direction:column;align-items:center;justify-content:center;gap:1.7rem}
.menu[data-open="1"]{display:flex}
.menu a{color:#f4efe8;text-decoration:none;font-family:var(--serif);font-size:2rem}
.menu a.menu__cta{color:var(--bronze);font-family:var(--sans);font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;margin-top:.6rem}
.menu a.menu__phone{color:rgba(255,255,255,.6);font-family:var(--sans);font-size:1rem;letter-spacing:.08em}
.menu__close{position:absolute;top:1.4rem;right:1.6rem;background:none;border:none;color:var(--bronze);font-size:2.4rem;line-height:1;cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
.hero::after,.hero::before{content:"";position:absolute;inset:0}
.hero::before{background:linear-gradient(100deg,rgba(18,24,35,.78) 0%,rgba(18,24,35,.42) 46%,rgba(18,24,35,.08) 78%)}
.hero::after{background:linear-gradient(to top,rgba(18,24,35,.7) 0%,rgba(18,24,35,0) 42%)}
.hero__inner{position:relative;z-index:2;padding:0 var(--pad) clamp(4.5rem,9vh,7.5rem);max-width:1040px;animation:fadeUp 1s ease .1s both}
.hero h1{font-size:clamp(2.6rem,6.6vw,5.6rem);line-height:1.04;color:#fff;letter-spacing:-.01em;margin-bottom:1.6rem;text-wrap:balance}
.hero p.lede{font-size:clamp(1.05rem,1.25vw,1.15rem);color:rgba(255,255,255,.84);line-height:1.75;max-width:520px;margin-bottom:2.8rem}
.hero .eyebrow{color:#d9c7a8}
.btnrow{display:flex;flex-wrap:wrap;gap:1rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}

.btn{display:inline-block;text-decoration:none;padding:1.1rem 2.6rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;white-space:nowrap;border:1px solid transparent;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.btn--light{background:var(--cream);color:var(--navy)}
.btn--light:hover{background:#fff;color:var(--navy)}
.btn--ghost{border-color:rgba(255,255,255,.5);color:#fff}
.btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.btn--bronze{background:var(--bronze);color:var(--navy);font-weight:600}
.btn--bronze:hover{background:#c39a5c;color:var(--navy)}

/* ---------- layout ---------- */
.section{padding:clamp(5rem,10vw,9rem) var(--pad)}
.section--tight{padding:clamp(3.5rem,7vw,6rem) var(--pad)}
.wrap{max-width:var(--max);margin:0 auto}
.wrap--narrow{max-width:1200px;margin:0 auto}
.eyebrow{font-size:.75rem;letter-spacing:.28em;text-transform:uppercase;color:var(--bronze-ink);font-weight:500;margin-bottom:1.2rem}
.section--dark{background:var(--navy)}
.section--dark .eyebrow{color:var(--bronze)}
.section--cream{background:var(--cream-2)}
h2.title{font-size:clamp(2.1rem,4vw,3.3rem);color:var(--navy)}
.section--dark h2.title{color:#fff}
p.body{font-size:1.05rem;line-height:1.9;color:var(--body)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center}

/* ---------- work cards ---------- */
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2.5rem;flex-wrap:wrap;margin-bottom:clamp(2.5rem,5vw,4rem)}
.link-more{font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-ink);text-decoration:none;border-bottom:1px solid rgba(138,106,56,.4);padding-bottom:.35rem;white-space:nowrap}
.card{display:block;text-decoration:none;color:inherit}
.card__media{overflow:hidden;background:#e4dbcd}
.card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s ease}
.card:hover .card__media img{transform:scale(1.035)}
.card:hover .card__title{color:var(--bronze-ink)}
.ratio-21-9{aspect-ratio:21/9}
.ratio-4-3{aspect-ratio:4/3}
.card__kicker{font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze-ink);margin:1.5rem 0 .6rem}
.card__title{font-size:clamp(1.7rem,2.6vw,2.5rem);color:var(--navy);transition:color .25s}
.card__title--sm{font-size:clamp(1.6rem,2.2vw,2.1rem)}
.card p{font-size:1rem;line-height:1.8;color:var(--body);margin-top:.9rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.feature{margin-bottom:clamp(3rem,6vw,5rem)}
.feature__text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,3rem);margin-top:1.8rem}
.grid-portfolio{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4rem) clamp(1.5rem,4vw,3.5rem)}
.grid-portfolio .span-2{grid-column:span 2}

/* ---------- studio / founder ---------- */
.studio__meta{font-size:.9rem;line-height:2;color:#6a6558;letter-spacing:.04em;margin-top:2.2rem}
.founder{border-top:1px solid rgba(27,36,54,.14);padding-top:clamp(2.5rem,5vw,4rem);margin-top:clamp(3.5rem,7vw,6rem);display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem)}
.founder h3{font-size:clamp(1.8rem,2.8vw,2.4rem);color:var(--navy)}
.founder__role{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronze-ink);margin-top:.7rem}
.founder__lic{font-size:.85rem;letter-spacing:.1em;color:var(--muted);margin-top:.6rem}
.quote{font-family:var(--serif);font-size:clamp(1.25rem,1.9vw,1.5rem);font-style:italic;font-weight:300;color:var(--navy);line-height:1.55;border-left:1px solid var(--bronze);padding-left:1.5rem}

/* ---------- expertise ---------- */
.exp{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.12);border-top:1px solid rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.12)}
.exp>div{background:var(--navy);padding:clamp(2rem,3.5vw,3.2rem)}
.exp .num{font-family:var(--serif);font-size:1.2rem;color:var(--bronze);margin-bottom:1rem}
.exp h3{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:400;color:#fff;margin-bottom:.9rem}
.exp p{font-size:1rem;line-height:1.8;color:rgba(255,255,255,.62)}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.8rem,3.5vw,3rem)}
.steps>div{border-top:1px solid rgba(27,36,54,.18);padding-top:1.6rem}
.steps .num{font-family:var(--serif);font-size:1.1rem;color:var(--bronze-ink);margin-bottom:.9rem}
.steps h3{font-size:1.45rem;font-weight:400;color:var(--navy);margin-bottom:.7rem}
.steps p{font-size:1rem;line-height:1.8;color:var(--body)}

/* ---------- enquiry ---------- */
.enquiry{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,6vw,5rem)}
.enquiry h2{font-size:clamp(2.1rem,3.6vw,3rem);color:#fff;line-height:1.12;margin-bottom:1.4rem}
.enquiry p.intro{font-size:1.02rem;line-height:1.85;color:rgba(255,255,255,.65);margin-bottom:2.4rem}
.contact-list{display:flex;flex-direction:column;gap:.9rem}
.contact-list a{color:rgba(255,255,255,.8);text-decoration:none;font-size:1rem;letter-spacing:.04em}
.contact-list a:hover{color:var(--bronze)}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field--full{grid-column:span 2}
.field label{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.field input,.field select,.field textarea{background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.3);padding:.75rem 0;font-size:1rem;color:#fff;outline:none;border-radius:0;transition:border-color .2s}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--bronze)}
.field option{background:var(--navy);color:#fff}
.field .error{font-size:.8rem;color:#e0a97a;display:none}
.field.is-invalid .error{display:block}
.field.is-invalid input,.field.is-invalid textarea{border-bottom-color:#e0a97a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:.85rem;color:rgba(255,255,255,.45);grid-column:span 2;line-height:1.7}
.formmsg{grid-column:span 2;border:1px solid rgba(176,137,79,.5);padding:1.4rem 1.6rem;color:rgba(255,255,255,.75);font-size:1rem;line-height:1.7;display:none}
.formmsg[data-show="1"]{display:block}
.formmsg a{color:var(--bronze)}

/* ---------- case study ---------- */
.case-hero{position:relative;height:min(78vh,760px);background:var(--navy);overflow:hidden;display:flex;align-items:flex-end}
.case-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,24,35,.78) 0%,rgba(18,24,35,.1) 55%)}
.case-hero__inner{position:relative;z-index:2;padding:0 var(--pad) clamp(3rem,6vw,5rem);max-width:1100px}
.case-hero .eyebrow{color:#d9c7a8}
.case-hero h1{font-size:clamp(2.3rem,5.5vw,4.6rem);color:#fff;line-height:1.05;text-wrap:balance}
.case-intro{max-width:1200px;margin:0 auto;padding:clamp(3.5rem,7vw,6rem) var(--pad);display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(2.5rem,6vw,5rem)}
.facts{display:grid;grid-template-columns:1fr;gap:1.8rem;align-content:start}
.facts dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze-ink);margin-bottom:.5rem}
.facts dd{font-size:1.02rem;color:var(--ink);margin:0 0 .4rem}
.lead{font-family:var(--serif);font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:300;line-height:1.5;color:var(--navy);margin-bottom:1.8rem}
.gallery{padding:0 var(--pad) clamp(4rem,8vw,7rem);max-width:1400px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem)}
.gallery figure{margin:0}
.gallery img{width:100%;display:block;background:#e4dbcd}
.gallery figcaption{font-size:.9rem;color:var(--muted);letter-spacing:.04em;margin-top:.9rem}
.nextbar{max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.nextbar a.next{font-family:var(--serif);font-size:clamp(1.9rem,3.4vw,2.9rem);font-weight:300;color:#fff;text-decoration:none;line-height:1.1}
.nextbar a.next:hover{color:var(--bronze)}

/* ---------- footer ---------- */
.footer{background:var(--navy-deep);padding:clamp(3.5rem,7vw,5rem) var(--pad) 2.2rem}
.footer__top{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:3.5rem;flex-wrap:wrap;padding-bottom:3rem}
.footer img.mark{height:44px;width:auto;display:block;margin-bottom:1.4rem}
.footer p{font-size:.95rem;line-height:1.8;color:rgba(255,255,255,.5)}
.footer h2{font-family:var(--sans);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bronze);margin-bottom:1.2rem;font-weight:500}
.footer .col{display:flex;flex-direction:column;gap:.7rem}
.footer .col a{font-size:.95rem;color:rgba(255,255,255,.6);text-decoration:none}
.footer .col a:hover{color:var(--bronze)}
.social{display:flex;gap:.8rem}
.social a{width:42px;height:42px;border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);transition:border-color .25s,color .25s}
.social a:hover{border-color:var(--bronze);color:var(--bronze)}
.footer__base{max-width:var(--max);margin:0 auto;border-top:1px solid rgba(255,255,255,.1);padding-top:1.6rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer__base p{font-size:.8rem;color:rgba(255,255,255,.35)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  html{scroll-padding-top:70px}
  .nav a.navlink,.nav a.navphone,.nav .navcta{display:none}
  .burger{display:flex}
  .grid-2,.pair,.exp,.enquiry,.founder,.feature__text,.case-intro{grid-template-columns:1fr}
  .grid-portfolio{grid-template-columns:1fr}
  .grid-portfolio .span-2{grid-column:span 1}
  .steps{grid-template-columns:1fr 1fr}
  .form{grid-template-columns:1fr}
  .field--full,.formnote,.formmsg{grid-column:span 1}
  .footer__top{flex-direction:column;gap:2.4rem}
  .facts{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  body{font-size:16px}
  .steps{grid-template-columns:1fr}
  .btn{padding:1rem 1.9rem}
  .hero__inner{padding-bottom:3.5rem}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}