:root{
  --forest:#17392F;
  --forest-deep:#284640;
  --forest-warm:#1F4438;
  --cream:#F8F2E7;
  --cream-deep:#EFE4CE;
  --ink:#211D16;
  --ink-soft:#5B5546;
  --on-forest:#F4EBDD;
  --on-forest-soft:#CFC3A6;
  --gold:#B08A4A;
  --gold-text:#7E6335;
  --gold-soft:#C9A97A;
  --focus:#B08A4A;
  --max:1240px;
  --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
h1,h2,h3{
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:500;
  color:var(--ink);
  margin:0 0 0.4em;
  text-wrap:balance;
  letter-spacing:0.001em;
}
h1{font-weight:500;}
p{margin:0 0 1.2em; max-width:58ch;}
a{color:inherit;}
img{max-width:100%; display:block;}
svg{display:block;}
figure{margin:0;}

.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:var(--forest); color:var(--on-forest);
  padding:10px 16px; border-radius:3px; z-index:400;
}
.skip-link:focus{left:16px; top:16px;}
a:focus-visible, button:focus-visible{
  outline:2.5px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

.wrap{max-width:var(--max); margin:0 auto; width:100%; padding:0 var(--gutter);}
.bleed{width:100%;}

.eyebrow{
  font-family:"DM Sans", sans-serif;
  font-size:0.74rem;
  font-weight:600;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold-text);
  margin:0 0 1.1em;
}
.eyebrow.on-forest{color:var(--on-forest-soft);}

.rule{
  border:none; border-top:1px solid rgba(176,138,74,0.4);
  margin:28px 0; width:100%;
}
.rule.short{width:56px; margin-left:0; margin-top:0; margin-bottom:26px; border-top-width:1.5px; border-color:rgba(176,138,74,0.55);}
.about-copy .rule.short{width:44px; border-top-width:1.5px; border-color:var(--gold); opacity:0.85;}

/* Header */
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px);
  z-index:100;
  background:rgba(248,242,231,0.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(176,138,74,0.35);
}
.header-inner{
  max-width:var(--max); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px var(--gutter);
  gap:16px;
}
.logo-link{display:flex; align-items:center; line-height:0; text-decoration:none;}
.site-header .logo-horizontal{
  height:56px; width:auto;
  filter:brightness(0.82) saturate(1.08);
}
.site-nav{
  display:flex; align-items:center; gap:clamp(20px,3vw,40px);
}
.site-nav a{
  text-decoration:none;
  font-size:0.78rem;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--forest);
  padding:8px 2px;
  border-bottom:1px solid transparent;
  white-space:nowrap;
}
.site-nav a:hover{border-bottom-color:var(--gold);}

.nav-toggle{
  display:none;
  flex-direction:column;
  background:none; border:1px solid rgba(23,57,47,0.35); border-radius:4px;
  width:42px; height:38px;
  align-items:center; justify-content:center;
  cursor:pointer;
  padding:0;
  gap:5px;
  position:relative;
  z-index:210;
}
.nav-toggle .bar{
  display:block; width:19px; height:1.5px; background:var(--forest);
  transition:transform .25s ease, opacity .2s ease;
}
.nav-toggle.is-open .bar-1{transform:translateY(6.5px) rotate(45deg);}
.nav-toggle.is-open .bar-2{opacity:0;}
.nav-toggle.is-open .bar-3{transform:translateY(-6.5px) rotate(-45deg);}

@media (max-width:1024px){
  .site-header .logo-horizontal{height:46px;}
}

@media (max-width:760px){
  .header-inner{padding:14px var(--gutter);}
  .site-header .logo-horizontal{height:40px;}
  .nav-toggle{display:flex;}
  .site-nav{
    position:fixed; left:0; right:0;
    top:64px;
    height:calc(100vh - 64px);
    height:calc(100dvh - 64px);
    overflow-y:auto;
    background:var(--cream);
    flex-direction:column; align-items:flex-start;
    padding:36px var(--gutter) 32px;
    gap:22px;
    transform:translateY(-8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .22s ease, opacity .22s ease, visibility .22s;
    z-index:200;
  }
  .site-nav.open{transform:translateY(0); opacity:1; visibility:visible; pointer-events:auto;}
  .site-nav a{font-size:0.95rem;}
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 32px;
  border-radius:999px;
  font-family:"DM Sans", sans-serif;
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--forest); color:var(--on-forest);}
.btn-primary:hover{background:var(--forest-warm);}
.btn-ghost{background:transparent; color:var(--forest); border-color:var(--forest);}
.btn-ghost:hover{background:var(--forest); color:var(--on-forest);}
.btn-on-dark{background:var(--cream); color:var(--forest-deep);}
.btn-on-dark:hover{background:#fff;}
.btn-ghost-dark{background:transparent; color:var(--on-forest); border-color:rgba(244,235,221,0.6);}
.btn-ghost-dark:hover{background:rgba(244,235,221,0.12); border-color:var(--on-forest);}

/* Hero — full bleed cinematic */
.hero{
  position:relative;
  min-height:min(94vh, 860px);
  display:flex; align-items:center;
  background-size:cover;
  background-position:80% center;
  overflow:hidden;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(15,34,27,0.88) 0%, rgba(15,34,27,0.66) 30%, rgba(15,34,27,0.28) 55%, rgba(15,34,27,0.02) 74%);
}
.hero-content{
  position:relative; z-index:1;
  max-width:700px;
  padding:0 var(--gutter);
  color:var(--on-forest);
}
.hero-content .eyebrow{color:var(--on-forest-soft);}
.hero-content h1{
  color:#FBF7EE;
  font-size:clamp(2.3rem, 3.1vw + 1.5rem, 3.75rem);
  line-height:1.12;
  font-weight:500;
  margin-bottom:0.5em;
}
.hero-content .lede{
  color:#EDE4D2;
  font-size:1.1rem;
  max-width:42ch;
  line-height:1.65;
  margin-bottom:1.7em;
}
.hero-detail{
  margin-top:30px;
}
.pillars-inline{
  font-size:0.74rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--on-forest-soft); font-weight:600;
}

@media (max-width:760px){
  .hero{min-height:min(88vh, 720px); background-position:66% center; align-items:flex-end;}
  .hero-overlay{background:linear-gradient(0deg, rgba(15,34,27,0.92) 0%, rgba(15,34,27,0.72) 42%, rgba(15,34,27,0.22) 78%);}
  .hero-content{max-width:none; padding:0 var(--gutter) 56px;}
  .hero-content h1{max-width:none; font-size:clamp(2.1rem, 7vw, 2.7rem);}
  .hero-content h1 br.lb{display:none;}
  .hero-content .lede{max-width:none;}
}

/* Split sections (The Work / About) */
.split{
  padding:clamp(64px,10vw,120px) 0;
}
.split-grid{
  display:grid; grid-template-columns:1fr; gap:clamp(36px,6vw,30px);
  align-items:center;
}
.split-grid > *{min-width:0;}
.split-media{position:relative; overflow:hidden; width:100%;}
.split-media img{width:100%; height:100%; object-fit:cover; display:block;}
.split-media.work-media{aspect-ratio:5/6; object-position:center 30%;}
.split-media.about-media{aspect-ratio:4/5; max-width:380px; border-radius:12px;}

.split-copy h2{font-size:clamp(2.1rem, 4vw, 3.1rem); line-height:1.1; margin-bottom:0.5em;}
.split-copy p{font-size:1.03rem;}

@media (min-width:860px){
  .split-grid.work-grid{grid-template-columns:42fr 58fr; align-items:center; column-gap:clamp(40px,6vw,64px);}
  .split-grid.about-grid{grid-template-columns:37fr 63fr; align-items:center; column-gap:clamp(40px,5.5vw,64px);}
  .about-portrait-col{
    max-width:420px;
    display:block;
  }
  .split-media.about-media{aspect-ratio:4/5;}
  .split-copy{padding-right:clamp(0px,3vw,28px);}
  .about-grid .split-copy{padding-left:0;}
  .about-copy p{max-width:60ch;}
}

.work-section{padding:clamp(48px,7vw,84px) 0;}
.work-section .wrap{max-width:1180px;}

/* Pillars — compact row beneath The Work copy */
.pillars{
  list-style:none; margin:30px 0 0; padding:22px 0 0;
  border-top:1px solid rgba(176,138,74,0.4);
  display:grid; grid-template-columns:1fr; gap:20px;
}
.pillars li{display:flex; align-items:flex-start; gap:12px;}
.pillar-icon{width:28px; height:28px; flex:none; color:var(--forest); margin-top:2px;}
.pillar-icon svg{width:100%; height:100%; stroke-width:1.4;}
.pillar-body{display:flex; flex-direction:column; gap:3px;}
.pillar-word{
  font-family:"DM Sans", sans-serif; font-weight:700; font-size:0.76rem;
  letter-spacing:0.15em; text-transform:uppercase; color:var(--forest);
}
.pillar-desc{font-size:0.9rem; color:var(--ink-soft);}

@media (min-width:480px){
  .pillars{grid-template-columns:repeat(3,1fr); gap:16px;}
}

/* Handwritten annotation, embedded into the banksia photograph */
.annotation-overlay{
  position:absolute; z-index:2;
  font-family:"Caveat", cursive;
  font-weight:500;
  font-size:clamp(1.15rem, 0.85vw + 0.95rem, 1.5rem);
  line-height:1.34;
  color:rgba(251,247,238,0.72);
  text-shadow:0 1px 3px rgba(10,18,12,0.32);
}
.work-annotation{
  top:12%; left:9%; right:auto; bottom:auto;
  max-width:40%;
  transform:rotate(-4deg);
}

/* Who It's For — full bleed flush split */
.who{
  background:var(--forest-deep);
  color:var(--on-forest);
}
.who-grid{
  display:grid; grid-template-columns:1fr;
}
.who-grid > *{min-width:0;}
.who-copy{
  padding:clamp(40px,6vw,64px) var(--gutter);
  max-width:620px;
}
.who h2{color:#FBF7EE; font-size:clamp(1.9rem,3vw,2.5rem); line-height:1.16; margin-bottom:0.55em; max-width:420px;}
.who p{color:#E4DAC2;}
.who-media{position:relative; aspect-ratio:4/5; min-height:280px; overflow:hidden;}
.who-media img{width:100%; height:100%; object-fit:cover; object-position:center 42%;}
.who-media::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(10,22,18,0.42) 0%, rgba(10,22,18,0.14) 30%, rgba(10,22,18,0) 52%);
  pointer-events:none;
}
.who-annotation{
  position:absolute; z-index:2;
  top:11%; left:auto; right:13%; bottom:auto;
  max-width:min(58%, 210px);
  text-align:left;
  transform:rotate(-3.5deg);
}

.who-lead{font-weight:700; color:#fff; font-size:0.95rem; letter-spacing:0.02em; margin-bottom:0.9em;}
.traits{
  list-style:none; margin:0 0 26px; padding:0;
  display:flex; flex-direction:column; gap:11px;
}
.traits li{
  position:relative; padding-left:24px; max-width:50ch; font-size:0.98rem;
}
.traits li::before{
  content:""; position:absolute; left:0; top:0.62em;
  width:6px; height:6px;
  background:var(--gold);
  transform:rotate(45deg);
}
.who-close{
  color:#C4B896; font-family:"DM Sans", sans-serif; font-size:0.95rem;
  font-weight:400; margin-top:6px; max-width:46ch;
}

@media (min-width:860px){
  .who-grid{grid-template-columns:59fr 41fr; align-items:stretch;}
  .who-media{aspect-ratio:auto; min-height:0; height:100%;}
}

/* About — portrait column */
.about-portrait-col{
  display:block;
}

/* Enquire — cinematic closing band, centred like the mock-up */
.enquire{
  position:relative;
  min-height:min(58vh, 460px);
  display:flex; align-items:center; justify-content:center;
  background-size:cover;
  background-position:center;
  overflow:hidden;
  text-align:center;
}
.enquire-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,28,20,0.5) 0%, rgba(15,28,20,0.38) 45%, rgba(15,28,20,0.52) 100%);
}
.enquire-content{
  position:relative; z-index:1;
  max-width:780px;
  margin:0 auto;
  padding:0 var(--gutter);
  color:var(--on-forest);
  text-shadow:0 1px 10px rgba(10,18,12,0.35);
}
.enquire-content .eyebrow{color:var(--on-forest-soft); text-shadow:none;}
.enquire-content h2{color:#FBF7EE; font-size:clamp(2rem, 2.4vw + 1rem, 2.5rem); line-height:1.12; margin-bottom:0.32em; white-space:normal;}
.enquire-content .enquire-lede{color:#EDE4D2; font-size:1.05rem; margin:0 auto 1.7em; max-width:44ch;}
.enquire-content .btn{margin-top:2px;}

@media (max-width:760px){
  .enquire{min-height:min(52vh,440px);}
}

/* Footer — light, refined conclusion */
.site-footer{
  background:var(--cream);
  color:var(--ink);
  border-top:1px solid rgba(176,138,74,0.4);
  padding:clamp(32px,5vw,44px) 0 clamp(20px,3vw,26px);
}
.footer-inner{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.footer-logo{height:38px; width:auto;}
.footer-links{
  display:flex; align-items:center; gap:clamp(18px,3vw,32px);
}
.footer-links a{
  text-decoration:none; font-weight:600; font-size:0.78rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--forest); border-bottom:1px solid transparent;
  padding-bottom:3px; white-space:nowrap;
}
.footer-links a:hover{border-bottom-color:var(--gold);}
.footer-bottom{
  max-width:var(--max); margin:0 auto; padding:0 var(--gutter);
  margin-top:clamp(20px,3vw,28px);
  border-top:1px solid rgba(176,138,74,0.22);
  padding-top:16px;
}
.footer-copy{
  font-size:0.76rem; color:var(--ink-soft); margin:0;
  letter-spacing:0.02em;
}

/* Resources page */
.resources-main{
  max-width:680px; margin:0 auto;
  padding:clamp(90px,15vw,150px) var(--gutter) clamp(70px,10vw,110px);
  text-align:left;
}
.resources-main h1{font-size:clamp(2.1rem,5vw,3.1rem); line-height:1.12; margin-bottom:0.5em;}
.resources-main .lede{font-size:1.1rem; color:var(--ink-soft); max-width:54ch;}
.resources-main .btn{margin-top:20px;}