/* ==========================================================================
   Simply Intreeging Brisbane — design system
   Deep-green ground, leaf-green hairlines, Cormorant display / Jost UI.
   ========================================================================== */

:root{
  /* ground: the badge sits on #12260F, so the page sits a shade beneath it */
  --ink:      #070E06;
  --ink-1:    #0A150A;
  --ink-2:    #0E1D0C;
  --ink-3:    #12260F;   /* brand ground, straight off the logo */
  --ink-line: #1E3A19;

  /* accent: the disc's own highlight green, with a light and a deep step */
  --leaf:     #7CC85C;
  --leaf-lt:  #C4E8AE;
  --leaf-dp:  #3E7A34;
  --leaf-6:   rgba(124,200,92,.06);
  --leaf-12:  rgba(124,200,92,.12);
  --leaf-18:  rgba(124,200,92,.18);
  --leaf-30:  rgba(124,200,92,.30);

  --paper:    #EDF3E7;
  --dim:      #A2AF98;
  --dimmer:   #77856E;

  --ff-d: "Cormorant Garamond", "Times New Roman", serif;
  --ff-u: "Jost", "Helvetica Neue", Arial, sans-serif;

  --wrap: 1360px;
  --gut: clamp(20px, 5vw, 64px);
  --hdr: 88px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .9s var(--ease);
}

*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }

html{ background:var(--ink); -webkit-text-size-adjust:100% ; scroll-behavior:smooth }
html.is-locked{ overflow:hidden }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ff-u);
  font-weight:300;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; height:auto; display:block }
figure{ margin:0 }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; margin:0; cursor:pointer }
h1,h2,h3,h4{ margin:0; font-weight:300; letter-spacing:-.01em }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }

::selection{ background:var(--leaf); color:#0B1A0A }
:focus-visible{ outline:1px solid var(--leaf); outline-offset:3px }

/* ---------------------------------------------------------------- structure */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut) }
.sec{ padding-block:clamp(72px,10vw,150px); position:relative }
.sec--tight{ padding-block:clamp(52px,7vw,96px) }
.ground-2{ background:var(--ink-1) }
.ground-3{ background:var(--ink-2) }

.rule{ height:1px; background:var(--leaf-12); border:0; margin:0 }

/* ------------------------------------------------------------------ typography */
.kick{
  font-size:11px; font-weight:400; letter-spacing:.34em; text-transform:uppercase;
  color:var(--leaf); margin:0 0 22px;
  display:flex; align-items:center; gap:14px;
}
.kick::before{ content:""; width:34px; height:1px; background:var(--leaf-30); flex:none }
.kick--plain::before{ display:none }
.kick--c{ justify-content:center }

.d1{ font-family:var(--ff-d); font-size:clamp(46px,8.2vw,104px); line-height:.99; letter-spacing:-.022em }
.d2{ font-family:var(--ff-d); font-size:clamp(36px,5.2vw,68px); line-height:1.05; letter-spacing:-.018em }
.d3{ font-family:var(--ff-d); font-size:clamp(27px,3.1vw,40px); line-height:1.14; letter-spacing:-.012em }
.d4{ font-family:var(--ff-d); font-size:clamp(22px,2.2vw,28px); line-height:1.24 }
.ital{ font-style:italic; color:var(--leaf-lt) }

.lede{ font-size:clamp(16.5px,1.32vw,19.5px); line-height:1.8; color:var(--dim); max-width:60ch }
.lede + .lede{ margin-top:1.15em }
.small{ font-size:14.5px; line-height:1.7; color:var(--dimmer) }
.label{ font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--leaf); font-weight:400 }
.num{ font-family:var(--ff-d); font-size:14px; letter-spacing:.16em; color:var(--leaf-dp) }

/* ---------------------------------------------------------------- buttons */
.btn{
  --bg:transparent; --bd:var(--leaf-30); --fg:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:11px;
  min-height:56px; padding:0 30px;
  background-color:var(--bg);
  border:1px solid var(--bd); color:var(--fg);
  font-family:var(--ff-u); font-size:11.5px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; text-align:center;
  transition:background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
  position:relative;
}
.btn svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.4 }
.btn--leaf{ --bg:var(--leaf); --bd:var(--leaf); --fg:#0B1A0A; font-weight:500 }
.btn--leaf:hover{ --bg:var(--leaf-lt); --bd:var(--leaf-lt) }
.btn--ghost:hover{ --bd:var(--leaf); --fg:var(--leaf-lt) }
.btn--wide{ width:100% }
.btn[disabled]{ opacity:.4; cursor:not-allowed }

.tlink{
  display:inline-flex; align-items:center; gap:11px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--leaf);
  padding-bottom:6px; border-bottom:1px solid var(--leaf-18);
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.tlink svg{ width:15px; height:9px; stroke:currentColor; fill:none; stroke-width:1.3;
  transition:transform .45s var(--ease) }
.tlink:hover{ border-bottom-color:var(--leaf); color:var(--leaf-lt) }
.tlink:hover svg{ transform:translateX(6px) }

/* ------------------------------------------------------------------ header */
.hdr{
  position:fixed; inset:0 0 auto; z-index:60;
  height:var(--hdr);
  display:flex; align-items:center;
  transition:background-color .55s var(--ease), height .55s var(--ease), border-color .55s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(to bottom, rgba(6,8,6,.82), rgba(6,8,6,0));
  transition:opacity .55s var(--ease);
}
/* safe: the drawer is a sibling of the header, so nothing fixed lives inside it
   and backdrop-filter cannot trap a fixed child in a new containing block */
.hdr.is-stuck{
  height:70px; background-color:rgba(9,11,9,.96); border-bottom-color:var(--leaf-12);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
}
.hdr.is-stuck::after{ opacity:0 }
.hdr .wrap{ display:flex; align-items:center; gap:clamp(18px,3vw,48px) }

.brand{ display:flex; align-items:center; gap:14px; flex:none }
.brand__mark{ width:auto; height:60px; transition:height .55s var(--ease) }
.brand__word{ width:auto; height:17px; opacity:.95; transition:height .55s var(--ease) }
.hdr.is-stuck .brand__mark{ height:48px }
.hdr.is-stuck .brand__word{ height:14px }

.nav{ display:flex; align-items:center; gap:clamp(16px,2.1vw,34px); margin-left:auto }
.nav a{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  padding:8px 0; position:relative; transition:color .4s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px;
  background-color:var(--leaf); transition:right .5s var(--ease);
}
.nav a:hover{ color:var(--paper) }
.nav a:hover::after,.nav a.on::after{ right:0 }
.nav a.on{ color:var(--leaf) }

.hdr__call{
  display:inline-flex; align-items:center; gap:10px; flex:none;
  border:1px solid var(--leaf-30); min-height:44px; padding:0 20px;
  font-size:11.5px; letter-spacing:.14em; color:var(--paper);
  transition:background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease);
}
.hdr__call svg{ width:14px; height:14px; stroke:var(--leaf); fill:none; stroke-width:1.5 }
.hdr__call:hover{ background-color:var(--leaf); border-color:var(--leaf); color:#0B1A0A }
.hdr__call:hover svg{ stroke:#0B1A0A }

.burger{ display:none; width:46px; height:46px; position:relative; flex:none; margin-left:auto }
.burger span,.burger::before,.burger::after{
  content:""; position:absolute; left:11px; right:11px; height:1px;
  background-color:var(--paper); transition:transform .45s var(--ease), opacity .3s
}
.burger::before{ top:16px } .burger span{ top:23px } .burger::after{ top:30px }

/* ------------------------------------------------------------------ drawer */
.drawer{
  position:fixed; inset:0; z-index:80;
  background-color:var(--ink);
  display:grid; grid-template-rows:auto 1fr auto;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
  overflow-y:auto; overscroll-behavior:contain;
}
.drawer.is-open{ opacity:1; visibility:visible }
.drawer__top{ display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut); border-bottom:1px solid var(--leaf-12) }
.drawer__top img{ height:40px; width:auto }
.drawer__x{ width:44px; height:44px; position:relative }
.drawer__x::before,.drawer__x::after{
  content:""; position:absolute; left:10px; right:10px; top:21px; height:1px; background-color:var(--paper) }
.drawer__x::before{ transform:rotate(45deg) } .drawer__x::after{ transform:rotate(-45deg) }
.drawer__nav{ padding:clamp(20px,5vw,44px) var(--gut); display:grid; align-content:safe center; gap:4px }
.drawer__nav a{
  font-family:var(--ff-d); font-size:clamp(30px,8vw,44px); line-height:1.28; color:var(--paper);
  display:flex; align-items:baseline; gap:16px;
}
.drawer__nav a span{ font-family:var(--ff-u); font-size:10px; letter-spacing:.2em; color:var(--leaf-dp) }
.drawer__nav a.on{ color:var(--leaf) }
.drawer__foot{ padding:26px var(--gut) 34px; border-top:1px solid var(--leaf-12); display:grid; gap:12px }

/* -------------------------------------------------------------------- hero */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:center; padding-top:calc(var(--hdr) + 28px); overflow:hidden;
  background-color:var(--ink);
}
.hero__bg{ position:absolute; inset:0; z-index:0; background-color:var(--ink) }
.hero__bg img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform:scale(1.04);
  transition:opacity 2.1s var(--ease);
}
/* the outgoing frame stays put underneath, so the crossfade never dips to black */
.hero__bg img.on{ opacity:1; animation:kb 16s linear forwards }
@keyframes kb{ from{ transform:scale(1.03) } to{ transform:scale(1.14) } }
.hero__scrim{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  /* centred composition: a soft pool of dark under the middle of the frame,
     with the edges left clean so the photograph still reads */
  background-image:
    radial-gradient(ellipse 84% 78% at 50% 54%, rgba(5,7,5,.82) 0%, rgba(5,7,5,.60) 38%, rgba(5,7,5,.24) 72%, rgba(5,7,5,0) 100%),
    linear-gradient(to bottom, rgba(5,7,5,.58) 0%, rgba(5,7,5,.14) 24%, rgba(5,7,5,.18) 56%, rgba(5,7,5,.56) 88%, var(--ink) 100%);
}
.hero__in{
  position:relative; z-index:4;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-bottom:clamp(28px,4vw,52px);
}
.hero__in .kick{ justify-content:center }
.hero h1{ max-width:22ch; margin-inline:auto }
/* scale the headline against whichever axis is tighter, so the CTA stays on screen */
.hero h1{ font-size:clamp(40px, min(7.6vw, 11.4vh), 96px) }
.hero h1 .ital{ font-size:.47em }
.hero .lede{ margin-inline:auto; text-align:center }
.hero__cta{ justify-content:center }
.hero .lede{ margin-top:clamp(20px,2.4vw,30px); max-width:52ch; color:#D3DCCB }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(28px,3.4vw,42px) }

.hero__mark{
  width:auto; height:clamp(132px, min(17vw, 25vh), 248px);
  margin-bottom:clamp(20px,2.6vh,34px); opacity:1;
  filter:drop-shadow(0 6px 26px rgba(0,0,0,.65));
}

/* the discipline line sat too close to the leaf hairlines and vanished into the
   photograph — lift it to a pale leaf tint and give it a shadow to sit on */
.kick--hero{
  color:#DCEFCE; font-size:12px; letter-spacing:.30em; font-weight:400;
  text-shadow:0 1px 14px rgba(0,0,0,.85);
}
.kick--hero::before,.kick--hero::after{
  content:""; width:clamp(20px,4vw,48px); height:1px; flex:none;
  background-image:linear-gradient(to right, rgba(220,239,206,0), rgba(220,239,206,.7));
}
.kick--hero::after{ background-image:linear-gradient(to left, rgba(220,239,206,0), rgba(220,239,206,.7)) }

.hero__proof{
  position:relative; z-index:4;
  border-top:1px solid var(--leaf-12);
  background-color:rgba(9,11,9,.5);
}
.hero__proof ul{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px 0;
}
.hero__proof li{ padding:20px 0 22px; display:grid; gap:5px }
.hero__proof li + li{ border-left:1px solid var(--leaf-12); padding-left:clamp(14px,2.4vw,34px) }
.hero__proof b{ font-family:var(--ff-d); font-size:clamp(20px,2.3vw,30px); font-weight:400; color:var(--leaf-lt); line-height:1 }
.hero__proof span{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer) }

.scrollcue{
  position:absolute; left:50%; bottom:calc(100% + 16px); transform:translateX(-50%);
  width:1px; height:52px; background-image:linear-gradient(to bottom,transparent,var(--leaf-30));
  overflow:hidden;
}
.scrollcue::after{
  content:""; position:absolute; left:0; top:0; width:1px; height:16px; background-color:var(--leaf);
  animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-18px) } 60%,100%{ transform:translateY(56px) } }

/* --------------------------------------------------------------- watermark */
.wm{
  position:absolute; pointer-events:none; user-select:none;
  opacity:.045; filter:grayscale(.2);
}
.wm--r{ right:calc(-1 * clamp(40px,6vw,120px)); top:50%; transform:translateY(-50%); height:min(78%,560px) }

/* ------------------------------------------------------------------- split */
.split{ display:grid; gap:clamp(34px,5vw,80px); align-items:center }
@media (min-width:900px){
  .split{ grid-template-columns:1.02fr .98fr }
  .split--wide{ grid-template-columns:1fr 1.24fr }
  .split--rev > :first-child{ order:2 }
}

/* frame: fixed-ratio image box (wrapper owns the ratio, never the <img>) */
.frame{ position:relative; overflow:hidden; background-color:var(--ink-2) }
.frame > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.4s var(--ease) }
.frame--43{ aspect-ratio:4/3 } .frame--11{ aspect-ratio:1/1 }
.frame--34{ aspect-ratio:3/4 } .frame--169{ aspect-ratio:16/9 }
.frame--23{ aspect-ratio:2/3 } .frame--54{ aspect-ratio:5/4 }
.frame--edge{ border:1px solid var(--leaf-12) }
a.frame:hover > img,.frame--zoom:hover > img{ transform:scale(1.045) }

.frame__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(16px,2vw,26px);
  background-image:linear-gradient(to top, rgba(6,8,6,.88), rgba(6,8,6,0));
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--leaf-lt);
}

/* stacked / offset image pair */
.stack{ position:relative }
.stack__b{ position:absolute; right:-6%; bottom:-11%; width:44%; border:1px solid var(--ink-line);
  box-shadow:0 30px 70px rgba(0,0,0,.6) }
/* On a phone the pair simply stacks. The old rule pulled the second frame up by
   -18%, and percentage margins resolve against WIDTH, so that was an ~83px
   overlap on a 460px column — fine for the small inset it was written for,
   broken now that the second frame is a full landscape photograph. */
@media (max-width:700px){
  .stack__b{ position:static; width:100%; margin:12px 0 0; right:auto; bottom:auto;
    box-shadow:none }
}

/* ------------------------------------------------------------ signature grid */
.sig{ display:grid; gap:clamp(12px,1.4vw,20px) }
@media (min-width:820px){
  .sig{ grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(0,auto) }
  .sig__a{ grid-column:span 4 } .sig__b{ grid-column:span 2 }
  .sig__c{ grid-column:span 2 } .sig__d{ grid-column:span 2 } .sig__e{ grid-column:span 2 }
  .sig__f{ grid-column:span 3 } .sig__g{ grid-column:span 3 }
}

/* --------------------------------------------------------------- disciplines */
.disc{ border-top:1px solid var(--leaf-12) }
.disc__row{
  display:grid; gap:6px clamp(18px,3vw,44px); align-items:baseline;
  padding:clamp(24px,3vw,38px) 0; border-bottom:1px solid var(--leaf-12);
  transition:background-color .5s var(--ease), padding-left .5s var(--ease);
}
@media (min-width:860px){
  .disc__row{ grid-template-columns:56px 1fr 1.15fr auto; align-items:center }
}
.disc__row:hover{ background-color:var(--leaf-6) }
@media (min-width:860px){ .disc__row:hover{ padding-left:14px } }
.disc__row h3{ font-family:var(--ff-d); font-size:clamp(23px,2.5vw,32px); line-height:1.16 }
.disc__row p{ color:var(--dim); font-size:15.5px; line-height:1.7 }
.disc__go{ display:flex; align-items:center; gap:10px; font-size:10.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--leaf-dp); transition:color .4s var(--ease) }
.disc__go svg{ width:16px; height:9px; stroke:currentColor; fill:none; stroke-width:1.3;
  transition:transform .45s var(--ease) }
.disc__row:hover .disc__go{ color:var(--leaf) }
.disc__row:hover .disc__go svg{ transform:translateX(6px) }

/* ------------------------------------------------------------------ process */
.steps{ display:grid; gap:clamp(26px,3vw,10px); counter-reset:s }
@media (min-width:900px){ .steps{ grid-template-columns:repeat(5,1fr); gap:0 } }
.step{ padding-top:26px; border-top:1px solid var(--leaf-18); position:relative }
@media (min-width:900px){ .step{ padding-right:clamp(16px,2vw,30px) } }
.step::before{
  content:""; position:absolute; left:0; top:-3px; width:5px; height:5px;
  background-color:var(--leaf); transform:rotate(45deg);
}
.step h3{ font-family:var(--ff-d); font-size:22px; margin:12px 0 9px }
.step p{ font-size:14.5px; line-height:1.7; color:var(--dim) }

/* ------------------------------------------------------------------ quotes */
.quotes{ display:grid; gap:clamp(26px,3vw,44px) }
@media (min-width:880px){ .quotes{ grid-template-columns:repeat(3,1fr) } }
.quote{ border-top:1px solid var(--leaf-18); padding-top:26px; display:grid; gap:16px; align-content:start }
.stars{ display:flex; gap:5px }
.stars svg{ width:13px; height:13px; fill:var(--leaf); stroke:none }
.quote blockquote{ margin:0; font-family:var(--ff-d); font-size:clamp(19px,1.7vw,22px);
  line-height:1.44; color:#DEE6D6 }
.quote cite{ font-style:normal; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--leaf) }
.quote cite span{ display:block; letter-spacing:.06em; text-transform:none; color:var(--dimmer);
  font-size:12.5px; margin-top:5px }
.quote__reply{ font-size:14px; color:var(--dimmer); border-left:1px solid var(--leaf-18); padding-left:16px }

/* -------------------------------------------------------------- credentials */
.creds{ display:grid; gap:1px; background-color:var(--leaf-12) }
@media (min-width:760px){ .creds{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1080px){ .creds{ grid-template-columns:repeat(4,1fr) } }
@media (min-width:760px){ .creds--3{ grid-template-columns:repeat(3,1fr) } }
.cred{ background-color:var(--ink); padding:clamp(24px,2.6vw,34px); display:grid; gap:9px; align-content:start }
.cred svg{ width:26px; height:26px; stroke:var(--leaf); fill:none; stroke-width:1.15 }
.cred h3{ font-family:var(--ff-u); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--paper); font-weight:400; margin-top:6px }
.cred p{ font-size:14px; line-height:1.66; color:var(--dimmer) }

/* ------------------------------------------------------------------- areas */
.areas{ display:flex; flex-wrap:wrap; gap:10px }
.areas li{
  border:1px solid var(--leaf-12); padding:11px 19px;
  font-size:12.5px; letter-spacing:.08em; color:var(--dim);
}
.areas li b{ color:var(--leaf-lt); font-weight:400 }

/* --------------------------------------------------------------------- FAQ */
.faq{ border-top:1px solid var(--leaf-12) }
.faq__i{ border-bottom:1px solid var(--leaf-12) }
.faq__q{
  width:100%; text-align:left; display:flex; align-items:flex-start; gap:20px;
  padding:clamp(20px,2.3vw,28px) 0;
  font-family:var(--ff-d); font-size:clamp(19px,1.8vw,24px); line-height:1.3; color:var(--paper);
  transition:color .4s var(--ease);
}
.faq__q:hover{ color:var(--leaf-lt) }
.faq__q i{ flex:none; width:13px; height:13px; margin-top:9px; position:relative }
.faq__q i::before,.faq__q i::after{
  content:""; position:absolute; inset:6px 0 auto; height:1px; background-color:var(--leaf);
  transition:transform .45s var(--ease) }
.faq__q i::after{ transform:rotate(90deg) }
.faq__i.is-open .faq__q i::after{ transform:rotate(0deg) }
.faq__a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease) }
.faq__i.is-open .faq__a{ grid-template-rows:1fr }
.faq__a > div{ overflow:hidden }
.faq__a p{ padding:0 0 clamp(22px,2.4vw,30px); max-width:78ch; color:var(--dim); font-size:15.5px }

/* -------------------------------------------------------- gallery: the hub */
.galgrid{ display:grid; gap:clamp(16px,2vw,28px) }
@media (min-width:640px){ .galgrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1080px){ .galgrid{ grid-template-columns:repeat(3,1fr) } }

.galcard{ display:flex; flex-direction:column; border:1px solid var(--leaf-12);
  background-color:var(--ink-1);
  transition:border-color .5s var(--ease), background-color .5s var(--ease),
             transform .6s var(--ease) }
.galcard:hover{ border-color:var(--leaf-30); background-color:var(--ink-2); transform:translateY(-4px) }
.galcard .frame{ border-bottom:1px solid var(--leaf-12) }
.galcard:hover .frame > img{ transform:scale(1.05) }
.galcard__body{ padding:clamp(20px,2.2vw,28px); display:grid; gap:11px; align-content:start; flex:1 }
.galcard__body p{ font-size:14.5px; line-height:1.66; color:var(--dim) }
.galcard__go{ display:flex; align-items:center; gap:10px; margin-top:6px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--leaf-dp);
  transition:color .4s var(--ease) }
.galcard__go svg{ width:16px; height:9px; stroke:currentColor; fill:none; stroke-width:1.3;
  transition:transform .45s var(--ease) }
.galcard:hover .galcard__go{ color:var(--leaf) }
.galcard:hover .galcard__go svg{ transform:translateX(6px) }

/* sibling-gallery navigation at the foot of each subpage */
/* flex, not grid: seven siblings in a four-column grid leaves a dead cell */
.galnav__grid{ display:flex; flex-wrap:wrap; gap:1px; background-color:var(--leaf-12) }
.galnav{ flex:1 1 250px; background-color:var(--ink); padding:22px clamp(18px,2vw,26px);
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  transition:background-color .45s var(--ease) }
.galnav:hover{ background-color:var(--leaf-6) }
.galnav span{ font-family:var(--ff-d); font-size:19px; line-height:1.3; color:var(--paper) }
.galnav b{ font-size:11px; letter-spacing:.16em; color:var(--leaf-dp); font-weight:400; flex:none }
.galnav:hover span{ color:var(--leaf-lt) }

.svc__links{ display:flex; flex-wrap:wrap; gap:14px 30px; align-items:center }

/* ------------------------------------------- gallery: neat, labelled grid */
.pbanner + .sec--tight{ padding-top:clamp(30px,4vw,54px) }

.ggrid{
  display:grid; gap:clamp(14px,1.7vw,26px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.gcard{
  display:flex; flex-direction:column;
  border:1px solid var(--leaf-12); background-color:var(--ink-1);
  transition:border-color .5s var(--ease), background-color .5s var(--ease),
             transform .55s var(--ease);
}
.gcard:hover{ border-color:var(--leaf-30); background-color:var(--ink-2); transform:translateY(-3px) }
/* it is a <span> inside an <a>, so it must be told to be a block before
   aspect-ratio will give it any height at all */
.gcard__img{ display:block; position:relative; aspect-ratio:4/3; overflow:hidden;
  background-color:var(--ink-2) }
.gcard__img img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--ease);
}
.gcard:hover .gcard__img img{ transform:scale(1.05) }
.gcard__zoom{
  position:absolute; right:12px; bottom:12px; z-index:2;
  width:34px; height:34px; display:grid; place-items:center;
  border:1px solid rgba(220,239,206,.34); background-color:rgba(5,7,5,.55);
  opacity:0; transform:translateY(6px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), background-color .45s var(--ease);
}
.gcard__zoom svg{ width:14px; height:14px; stroke:#DCEFCE; fill:none; stroke-width:1.4 }
.gcard:hover .gcard__zoom{ opacity:1; transform:none }
.gcard:hover .gcard__zoom{ background-color:rgba(124,200,92,.9) }
.gcard:hover .gcard__zoom svg{ stroke:#0B1A0A }
.gcard__cap{
  border-top:1px solid var(--leaf-12);
  padding:15px clamp(14px,1.4vw,18px);
  display:flex; align-items:flex-start; gap:12px; flex:1;
}
.gcard__no{ font-family:var(--ff-d); font-size:12px; letter-spacing:.14em; color:var(--leaf-dp); flex:none; padding-top:2px }
.gcard__cap span{
  font-size:11.5px; letter-spacing:.13em; line-height:1.6; text-transform:uppercase;
  color:var(--leaf-lt);
}
@media (hover:none){ .gcard__zoom{ opacity:1; transform:none } }

/* ------------------------------------------------- plant palette reference */
.sec--rule{ border-top:1px solid var(--leaf-12) }
.ggrid--palette{
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap:clamp(10px,1.2vw,18px);
}
.ggrid--palette .gcard__img{ aspect-ratio:1/1 }
.gcard--palette .gcard__cap{ display:block; padding:12px clamp(12px,1.2vw,16px) }
.gcard--palette .gcard__bot{
  display:block; font-family:var(--ff-d); font-style:italic;
  font-size:13.5px; letter-spacing:.02em; line-height:1.35;
  text-transform:none; color:var(--leaf-lt);
}
.gcard--palette .gcard__com{
  display:block; margin-top:5px;
  font-size:10.5px; letter-spacing:.13em; line-height:1.5;
  text-transform:uppercase; color:var(--leaf-dp);
}

/* --------------------------------------------- flowers gallery: named cards */
.gcard--bloom .gcard__names{ display:block; flex:1 }
.gcard--bloom .gcard__bot{
  display:block; font-family:var(--ff-d); font-style:italic;
  font-size:14px; letter-spacing:.02em; line-height:1.35;
  text-transform:none; color:var(--leaf-lt);
}
.gcard--bloom .gcard__com{
  display:block; margin-top:5px;
  font-size:10.5px; letter-spacing:.13em; line-height:1.5;
  text-transform:uppercase; color:var(--leaf-dp);
}



/* ------------------------------------------------- section background plate */
.sec--bg{ position:relative; overflow:hidden; isolation:isolate }
.sec__bg{ position:absolute; inset:0; z-index:-1 }
.sec__bg img{ width:100%; height:100%; object-fit:cover }
.sec__bg::after{
  content:""; position:absolute; inset:0;
  background-image:
    /* Duncan's own shots are bright midday photographs, unlike the dusk ones
       they replaced — the scrim has to carry more or the headings wash out */
    linear-gradient(to bottom, var(--ink) 0%, rgba(7,14,6,.86) 16%, rgba(7,14,6,.80) 84%, var(--ink) 100%);
}
.sec--bg .wrap{ position:relative; z-index:1 }

/* the third frame sits below the stack, clear of the inset's overhang */
.stack__after{ margin-top:clamp(58px,9vw,104px) }
@media (max-width:700px){ .stack__after{ margin-top:clamp(22px,5vw,40px) } }

/* ------------------------------------------------------------------ gallery */
.gfilter{ display:flex; flex-wrap:wrap; gap:9px }
.gfilter button{
  border:1px solid var(--leaf-12); background-color:transparent; padding:11px 20px;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim);
  transition:border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.gfilter button:hover{ border-color:var(--leaf-30); color:var(--paper) }
.gfilter button.on{ background-color:var(--leaf); border-color:var(--leaf); color:#0B1A0A }

.gmasonry{ columns:1; column-gap:clamp(10px,1.2vw,16px) }
@media (min-width:640px){ .gmasonry{ columns:2 } }
@media (min-width:1000px){ .gmasonry{ columns:3 } }
@media (min-width:1440px){ .gmasonry{ columns:4 } }
.gitem{ break-inside:avoid; margin-bottom:clamp(10px,1.2vw,16px); position:relative; display:block;
  background-color:var(--ink-2); overflow:hidden }
.gitem img{ width:100%; transition:transform 1.3s var(--ease), opacity .8s var(--ease) }
.gitem:hover img{ transform:scale(1.04) }
.gitem__cap{
  position:absolute; inset:auto 0 0; padding:16px;
  background-image:linear-gradient(to top, rgba(6,8,6,.9), rgba(6,8,6,0));
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--leaf-lt);
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.gitem:hover .gitem__cap{ opacity:1; transform:none }
@media (hover:none){ .gitem__cap{ opacity:1; transform:none } }

/* ---------------------------------------------------------------- lightbox */
.lb{
  position:fixed; inset:0; z-index:90; background-color:rgba(5,7,5,.97);
  display:grid; grid-template-rows:auto 1fr auto; gap:10px; padding:16px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;
}
.lb.is-open{ opacity:1; visibility:visible }
.lb__bar{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.lb__stage{ display:grid; place-items:center; min-height:0 }
.lb__stage img{ max-height:100%; max-width:100%; width:auto; object-fit:contain }
.lb__cap{ text-align:center; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--leaf-lt) }
.lb__count{ font-size:11px; letter-spacing:.2em; color:var(--dimmer) }
.lb__btn{ width:48px; height:48px; border:1px solid var(--leaf-18); display:grid; place-items:center;
  transition:border-color .4s var(--ease), background-color .4s var(--ease) }
.lb__btn:hover{ border-color:var(--leaf); background-color:var(--leaf-6) }
.lb__btn svg{ width:15px; height:15px; stroke:var(--paper); fill:none; stroke-width:1.4 }
.lb__nav{ display:flex; gap:9px }

/* ------------------------------------------------------------------ enquiry */
.enq{
  border:1px solid var(--leaf-18); background-color:var(--ink-1);
  padding:clamp(24px,3.4vw,52px);
}
.enq__head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:14px; margin-bottom:clamp(22px,2.6vw,34px) }
.enq__bar{ display:flex; gap:6px; margin-top:14px }
.enq__bar i{ width:36px; height:2px; background-color:var(--ink-line); transition:background-color .5s var(--ease) }
.enq__bar i.on{ background-color:var(--leaf) }

.fstep{ display:none }
.fstep.on{ display:block; animation:fin .55s var(--ease) both }
@keyframes fin{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
.fstep > h3{ font-family:var(--ff-d); font-size:clamp(25px,2.7vw,34px); line-height:1.16; margin-bottom:8px }
.fstep__hint{ font-size:14px; color:var(--dimmer); margin-bottom:26px }

.chips{ display:grid; gap:9px }
@media (min-width:620px){ .chips--2{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:860px){ .chips--3{ grid-template-columns:repeat(3,1fr) } }
.chip{ position:relative }
.chip input{ position:absolute; opacity:0; width:1px; height:1px }
.chip span{
  display:flex; align-items:center; gap:13px; min-height:60px; padding:12px 20px;
  border:1px solid var(--leaf-12); background-color:var(--ink-2); cursor:pointer;
  font-size:14.5px; line-height:1.4; color:var(--dim);
  transition:border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease);
}
.chip span::before{
  content:""; flex:none; width:9px; height:9px; border:1px solid var(--leaf-30);
  transform:rotate(45deg); transition:background-color .4s var(--ease), border-color .4s var(--ease);
}
.chip span:hover{ border-color:var(--leaf-30); color:var(--paper) }
.chip input:checked + span{ border-color:var(--leaf); color:var(--paper); background-color:var(--leaf-6) }
.chip input:checked + span::before{ background-color:var(--leaf); border-color:var(--leaf) }
.chip input:focus-visible + span{ outline:1px solid var(--leaf); outline-offset:3px }

.fgrid{ display:grid; gap:16px }
@media (min-width:620px){ .fgrid--2{ grid-template-columns:repeat(2,1fr) } }
.field{ display:grid; gap:8px }
.field > span{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--leaf-dp) }
.field input,.field textarea,.field select{
  width:100%; background-color:var(--ink-2); border:1px solid var(--leaf-12);
  color:var(--paper); font-family:var(--ff-u); font-size:16px; font-weight:300;
  padding:15px 17px; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .4s var(--ease), background-color .4s var(--ease);
}
.field textarea{ min-height:118px; resize:vertical }
.field input:focus,.field textarea:focus{ outline:0; border-color:var(--leaf); background-color:var(--ink-3) }
.field input::placeholder,.field textarea::placeholder{ color:#5E6B57 }
.field.is-bad input,.field.is-bad textarea{ border-color:#B2553F }
.field__err{ font-size:12.5px; color:#D5836C }

.fnav{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:clamp(24px,2.8vw,34px) }
.fnav__back{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dimmer);
  display:inline-flex; align-items:center; gap:9px; transition:color .4s var(--ease) }
.fnav__back svg{ width:15px; height:9px; stroke:currentColor; fill:none; stroke-width:1.3 }
.fnav__back:hover{ color:var(--leaf) }
.fnav__sp{ margin-left:auto }

.review{ display:grid; gap:1px; background-color:var(--leaf-12); margin-bottom:26px }
.review div{ background-color:var(--ink-2); padding:15px 18px; display:grid; gap:4px }
.review dt{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--leaf-dp) }
.review dd{ margin:0; font-size:15px; color:var(--paper) }

.fdone{ text-align:center; padding:clamp(20px,4vw,50px) 0 }
.fdone svg{ width:46px; height:46px; stroke:var(--leaf); fill:none; stroke-width:1; margin:0 auto 22px }
.fnote{ font-size:13px; color:var(--dimmer); margin-top:18px }
.fnote a{ color:var(--leaf); border-bottom:1px solid var(--leaf-18) }

/* --------------------------------------------------------------- call panel */
.callp{ display:grid; gap:1px; background-color:var(--leaf-12) }
@media (min-width:760px){ .callp{ grid-template-columns:repeat(3,1fr) } }
.callp > div{ background-color:var(--ink); padding:clamp(24px,2.6vw,34px); display:grid; gap:8px; align-content:start }
.callp a{ font-family:var(--ff-d); font-size:clamp(20px,1.75vw,25px); color:var(--leaf-lt);
  transition:color .4s var(--ease) }
.callp a[href^="tel:"]{ white-space:nowrap }
.callp a[href^="mailto:"]{ font-size:clamp(15px,1.2vw,17.5px); word-break:break-word }
.callp a:hover{ color:var(--paper) }

/* ------------------------------------------------------------------- footer */
.ftr{ background-color:var(--ink-3); border-top:1px solid var(--leaf-12); padding-top:clamp(56px,6vw,88px) }
.ftr__top{ display:grid; gap:clamp(34px,4vw,60px) }
@media (min-width:940px){ .ftr__top{ grid-template-columns:1.4fr 1fr 1fr 1.1fr } }
.ftr__lock{ width:min(260px,72%); height:auto; margin-bottom:22px }
.ftr h4{ font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--leaf);
  margin-bottom:18px; font-weight:400 }
.ftr li + li{ margin-top:11px }
.ftr a{ color:var(--dim); font-size:14.5px; transition:color .4s var(--ease) }
.ftr a:hover{ color:var(--leaf-lt) }
.ftr__meta{ font-size:13.5px; color:var(--dimmer); line-height:1.8 }
.ftr__soc{ display:flex; gap:10px; margin-top:18px }
.ftr__soc a{ width:42px; height:42px; border:1px solid var(--leaf-12); display:grid; place-items:center;
  transition:border-color .4s var(--ease), background-color .4s var(--ease) }
.ftr__soc a:hover{ border-color:var(--leaf); background-color:var(--leaf-6) }
.ftr__soc svg{ width:15px; height:15px; fill:var(--dim); stroke:none; transition:fill .4s var(--ease) }
.ftr__soc a:hover svg{ fill:var(--leaf) }
.ftr__base{ margin-top:clamp(44px,5vw,68px); border-top:1px solid var(--leaf-12);
  padding:24px 0 30px; display:flex; flex-wrap:wrap; gap:10px 26px; justify-content:space-between }
.ftr__base p{ font-size:12.5px; color:var(--dimmer) }

/* ------------------------------------------------------------- page banner */
.pbanner{ position:relative; padding-top:calc(var(--hdr) + clamp(56px,8vw,110px));
  padding-bottom:clamp(40px,5vw,72px); overflow:hidden }
.pbanner__bg{ position:absolute; inset:0; z-index:0 }
.pbanner__bg img{ width:100%; height:100%; object-fit:cover; opacity:.34 }
.pbanner__bg::after{ content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(ellipse 80% 90% at 0% 70%, rgba(6,8,6,.80) 0%, rgba(6,8,6,.40) 50%, rgba(6,8,6,0) 85%),
    linear-gradient(to bottom, rgba(6,8,6,.88), rgba(6,8,6,.60) 42%, var(--ink) 100%) }
.pbanner .wrap{ position:relative; z-index:1 }
.crumb{ display:flex; flex-wrap:wrap; gap:10px; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--dimmer); margin-bottom:22px }
.crumb a{ color:var(--leaf-dp) } .crumb a:hover{ color:var(--leaf) }

/* --------------------------------------------------------- service article */
.svc{ display:grid; gap:clamp(30px,4vw,64px); padding-block:clamp(48px,6vw,90px);
  border-top:1px solid var(--leaf-12) }
@media (min-width:960px){
  .svc{ grid-template-columns:.92fr 1.08fr; align-items:start }
  .svc--rev > :first-child{ order:2 }
}
.svc__no{ font-family:var(--ff-d); font-size:13px; letter-spacing:.2em; color:var(--leaf-dp); margin-bottom:14px }
.svc h2{ margin-bottom:20px }
.svc .lede + ul{ margin-top:26px }
.ticks{ display:grid; gap:12px; margin-bottom:28px }
.ticks li{ display:flex; gap:14px; font-size:15px; color:var(--dim); align-items:flex-start }
.ticks li::before{ content:""; flex:none; width:7px; height:7px; margin-top:9px;
  background-color:var(--leaf); transform:rotate(45deg) }

/* ---------------------------------------------------------------- utilities */
.mt-s{ margin-top:18px } .mt-m{ margin-top:clamp(26px,3vw,42px) } .mt-l{ margin-top:clamp(40px,5vw,72px) }
.mb-m{ margin-bottom:clamp(26px,3vw,42px) } .mb-l{ margin-bottom:clamp(40px,5vw,72px) }
.center{ text-align:center } .center .kick{ justify-content:center } .center .lede{ margin-inline:auto }
.maxw{ max-width:62ch } .maxw-s{ max-width:46ch }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* reveal on scroll */
.rv{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease) }
.rv.in{ opacity:1; transform:none }
.rv-d1{ transition-delay:.1s } .rv-d2{ transition-delay:.2s } .rv-d3{ transition-delay:.3s }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important }
  .rv{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* ------------------------------------------------------------- breakpoints */
@media (max-width:1060px){
  .nav{ display:none }
  .burger{ display:block }
  .hdr__call{ display:none }
}
@media (max-width:720px){
  :root{ --hdr:74px }
  body{ font-size:16.5px }
  .hero__proof ul{ grid-template-columns:repeat(2,1fr) }
  .hero__proof li:nth-child(odd) + li{ border-left:1px solid var(--leaf-12) }
  .hero__proof li:nth-child(3),.hero__proof li:nth-child(4){ border-top:1px solid var(--leaf-12) }
  .hero__proof li:nth-child(3){ border-left:0; padding-left:0 }
  .brand__mark{ height:50px } .brand__word{ height:14px }
  .frame--23,.frame--34{ aspect-ratio:4/5 }
}

/* ----------------------------------------- keyword H1 + the old line beneath */
.hero__sub{ margin-top:clamp(12px,1.6vw,20px); font-family:var(--ff-d);
  font-size:clamp(20px,2.3vw,30px); line-height:1.25; color:#DCEFCE;
  text-shadow:0 1px 14px rgba(0,0,0,.8) }
.hero__sub .ital{ color:var(--leaf-lt) }
.pbanner__sub{ margin-top:clamp(12px,1.4vw,18px); max-width:32ch; color:var(--paper) }

/* the keyword H1 runs two full lines where the old one was a line and a tagline */
.hero h1{ font-size:clamp(38px, min(6.4vw, 9.2vh), 84px) }
@media (max-height:820px) and (min-width:700px){ .hero__mark{ height:clamp(110px,18vh,200px) } }

/* ----------------------------------------------- ideas pages: card captions */
.gcard__txt{ display:flex; flex-direction:column; gap:8px }
.gcard__cap .gcard__d{ display:block; font-size:14px; letter-spacing:0; line-height:1.6;
  text-transform:none; color:var(--dim) }
.gcard__names .gcard__d, .gcard--palette .gcard__d{ margin-top:9px; font-size:13.5px }

/* ------------------------------------- mobile: call + enquire always on screen */
.mbar{ display:none }
@media (max-width:1060px){
  .mbar{ position:fixed; left:0; right:0; bottom:0; z-index:55; display:grid; grid-template-columns:1fr 1fr;
    background-color:var(--ink); border-top:1px solid var(--leaf-30); padding-bottom:env(safe-area-inset-bottom) }
  .mbar a{ display:flex; align-items:center; justify-content:center; gap:9px; min-height:54px;
    font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--paper) }
  .mbar svg{ width:15px; height:15px; flex:none; stroke:currentColor; fill:none; stroke-width:1.5 }
  .mbar__call{ background-color:var(--leaf); color:#0B1A0A !important }
  body{ padding-bottom:calc(54px + env(safe-area-inset-bottom)) }
  .is-locked .mbar{ display:none }
}
/* ----------------------------------------------- homepage explore hub */
.hub{ display:grid; gap:clamp(28px,4vw,56px); grid-template-columns:1fr }
@media (min-width:760px){ .hub{ grid-template-columns:repeat(3,1fr) } }
.hub h3{ margin-bottom:14px; color:var(--leaf) }
.hub ul{ list-style:none; margin:0; padding:0; border-top:1px solid var(--leaf-12) }
.hub li{ border-bottom:1px solid var(--leaf-12) }
.hub a{ display:block; padding:12px 0; color:var(--paper); transition:color .4s var(--ease), padding-left .4s var(--ease) }
.hub a:hover{ color:var(--leaf); padding-left:6px }