/* ==========================================================================
   TreeX / Superior Tree Management, Townsville
   Palette sampled directly from the TreeX logo.
   ========================================================================== */

:root{
  --bark:#0C1512;
  --bark-2:#122019;
  --pine:#005229;
  --forest:#0E7A42;
  --lime:#AAC917;
  --lime-dim:#8BA80F;
  --bone:#F4F6F0;
  --paper:#FFFFFF;
  --slate:#3B423E;
  --slate-2:#6B7570;
  --mist:#E2E7DC;

  --shell:1240px;
  --gut:clamp(20px,5vw,48px);

  --f-display:'Big Shoulders Display',"Arial Narrow",sans-serif;
  --f-body:'Manrope',system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,"SFMono-Regular",monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --dock:84px; /* space kept clear for the floating buttons on mobile */
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:96px;
}

body{
  margin:0;
  background:var(--bone);
  color:var(--slate);
  font-family:var(--f-body);
  font-size:clamp(15.5px,.42vw + 14.4px,17px);
  line-height:1.68;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%;}
a{color:inherit;}

:focus-visible{
  outline:3px solid var(--lime);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--lime);color:var(--bark);}

/* ---------- type ---------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:800;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  color:var(--bark);
  margin:0;
  text-wrap:balance;
}

h1{font-size:clamp(3.1rem,8.4vw,6.6rem);font-weight:900;}
h2{font-size:clamp(2.3rem,5.1vw,4rem);}
h3{font-size:clamp(1.45rem,2.1vw,1.85rem);line-height:1;}
h4{font-size:1.12rem;line-height:1.1;}

p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}

strong{font-weight:700;color:var(--bark);}

/* The eyebrow carries the logo's oblique. It is the only skewed element. */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--forest);
  display:inline-flex;
  align-items:center;
  gap:.6em;
  transform:skewX(-9deg);
  margin:0 0 1.15rem;
}
.eyebrow::before{
  content:"";
  width:26px;
  height:3px;
  background:var(--lime);
  flex:none;
}
.eyebrow--light{color:var(--lime);}
.eyebrow--light::before{background:var(--lime);}

.lede{
  font-size:clamp(1.05rem,1.35vw,1.22rem);
  line-height:1.6;
  color:var(--slate);
}

/* ---------- layout -------------------------------------------------------- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gut);
}

section{padding-block:clamp(64px,8vw,116px);}
.band-dark{background:var(--bark);color:#C7CFC8;}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:var(--bone);}
.band-dark strong{color:var(--bone);}
.band-paper{background:var(--paper);}

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

/* ---------- buttons ------------------------------------------------------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6em;
  font-family:var(--f-mono);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  text-decoration:none;
  padding:1.02em 1.6em;
  border:2px solid transparent;
  border-radius:2px;
  cursor:pointer;
  transition:transform .22s var(--ease),background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}

.btn--lime{background:var(--lime);color:var(--bark);}
.btn--lime:hover{background:#BCDB1F;}

.btn--pine{background:var(--pine);color:var(--bone);}
.btn--pine:hover{background:var(--forest);}

.btn--ghost{border-color:rgba(244,246,240,.34);color:var(--bone);}
.btn--ghost:hover{border-color:var(--lime);color:var(--lime);}

.btn--outline{border-color:var(--pine);color:var(--pine);}
.btn--outline:hover{background:var(--pine);color:var(--bone);}

.btn-row{display:flex;flex-wrap:wrap;gap:12px;}

/* ---------- header -------------------------------------------------------- */

.hdr{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--mist);
  box-shadow:0 1px 24px rgba(12,21,18,.06);
  transition:background .3s var(--ease);
}
.hdr__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  height:76px;
}
.hdr__logo{flex:none;display:block;}
.hdr__logo img{height:38px;width:auto;}

.nav{display:flex;align-items:center;gap:4px;}
.nav a{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  text-decoration:none;
  padding:.7em .85em;
  border-radius:2px;
  transition:color .2s var(--ease);
  position:relative;
}
.nav a:hover{color:var(--pine);}
.nav a[aria-current="page"]{color:var(--pine);font-weight:700;}
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:.85em;right:.85em;bottom:.25em;
  height:2px;
  background:var(--lime);
}

.drop{position:relative;}
.drop__btn{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
  background:none;
  border:0;
  padding:.7em .85em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-feature-settings:inherit;
}
.drop__btn:hover,.drop.is-open .drop__btn{color:var(--pine);}
.drop__btn[aria-current="page"]{color:var(--pine);font-weight:700;}
.drop__btn svg{transition:transform .24s var(--ease);}
.drop.is-open .drop__btn svg{transform:rotate(180deg);}
.drop__menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:238px;
  background:var(--paper);
  border:1px solid var(--mist);
  border-radius:3px;
  padding:8px;
  display:none;
  box-shadow:0 26px 60px rgba(12,21,18,.16);
}
.drop.is-open .drop__menu{display:block;}
.drop__menu a{display:block;padding:.72em .8em;font-size:.72rem;}
.drop__menu a:hover{background:var(--bone);color:var(--pine);}

.hdr__cta{display:flex;align-items:center;gap:14px;flex:none;}
.hdr__tel{
  font-family:var(--f-mono);
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--bark);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.hdr__tel:hover{color:var(--pine);}
.hdr__tel svg{stroke:var(--pine);}

.burger{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--mist);
  border-radius:2px;
  background:none;
  cursor:pointer;
  padding:0;
  place-items:center;
}
.burger span{
  display:block;
  width:19px;height:2px;
  background:var(--bark);
  position:relative;
  transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;
  width:19px;height:2px;background:var(--bark);
  transition:transform .28s var(--ease);
}
.burger span::before{top:-6px;}
.burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

.mnav{
  display:none;
  background:var(--paper);
  border-top:1px solid var(--mist);
  padding:8px var(--gut) calc(20px + env(safe-area-inset-bottom));
  max-height:calc(100dvh - 76px);
  overflow-y:auto;
}
.mnav.is-open{display:block;}
.mnav a{
  display:block;
  font-family:var(--f-display);
  font-size:1.5rem;
  font-weight:800;
  text-transform:uppercase;
  color:var(--bark);
  text-decoration:none;
  padding:.52em 0;
  border-bottom:1px solid var(--mist);
  letter-spacing:.01em;
}
.mnav a[aria-current="page"]{color:var(--pine);}
.mnav__sub{padding-left:16px;border-left:2px solid var(--pine);margin:6px 0 6px;}
.mnav__sub a{font-size:1.06rem;font-weight:700;color:var(--slate);border:0;padding:.42em 0;}
.mnav__lbl{
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--forest);padding-top:16px;
  transform:skewX(-9deg);
}
.mnav .btn{width:100%;margin-top:18px;}

/* ---------- hero ---------------------------------------------------------- */

.hero{
  position:relative;
  min-height:clamp(560px,92svh,880px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--bark);
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media video{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(1.05) contrast(1.04);
}
/* Painted canopy that sits under the video and carries the hero on its own
   if the mp4 has not been dropped in yet. */
.hero__fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(170,201,23,.34) 0%, rgba(170,201,23,0) 46%),
    radial-gradient(90% 70% at 12% 88%, rgba(14,122,66,.5) 0%, rgba(14,122,66,0) 60%),
    linear-gradient(168deg,#0F3A24 0%,#0A2418 52%,#0C1512 100%);
}
.hero__fallback::after{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='560' height='560' viewBox='0 0 560 560'><g fill='none' stroke='%23AAC917' stroke-width='1.1' opacity='.36'><path d='M60 560V300l-34-52 34 14V200l-30-46 30 12V96'/><path d='M60 300l40-58-40 16'/><path d='M60 214l34-50-34 14'/><path d='M186 560V236l-30-46 30 12V104l-26-40 26 10V0'/><path d='M186 248l38-56-38 15'/><path d='M186 152l30-44-30 12'/><path d='M318 560V332l-26-40 26 10V184l-30-46 30 12V72'/><path d='M318 342l34-52-34 14'/><path d='M318 206l28-42-28 11'/><path d='M452 560V276l-34-52 34 14V132l-26-40 26 10V16'/><path d='M452 290l38-58-38 15'/><path d='M452 156l30-46-30 12'/></g></svg>");
  background-size:auto 100%;
  background-repeat:repeat-x;
  opacity:.28;
  mix-blend-mode:screen;
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(12,21,18,.96) 0%,rgba(12,21,18,.72) 34%,rgba(12,21,18,.24) 70%,rgba(12,21,18,.58) 100%),
    linear-gradient(to right,rgba(12,21,18,.72) 0%,rgba(12,21,18,0) 62%);
}
.hero__in{position:relative;z-index:2;width:100%;
  padding-block:clamp(48px,7vw,88px) clamp(40px,4.5vw,56px);}
.hero__ttl{color:var(--bone);max-width:15ch;}
.hero__ttl em{
  font-style:normal;
  color:var(--lime);
  display:block;
}
.hero__sub{
  color:#C7CFC8;
  max-width:46ch;
  margin:1.5rem 0 2rem;
  font-size:clamp(1.02rem,1.3vw,1.18rem);
}
.hero .btn-row{margin-bottom:clamp(28px,4vw,44px);}

.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border-top:1px solid rgba(244,246,240,.16);
  padding-top:22px;
}
.hero__meta div{
  padding-right:clamp(24px,4vw,52px);
  margin-right:clamp(24px,4vw,52px);
  border-right:1px solid rgba(244,246,240,.16);
}
.hero__meta div:last-child{border-right:0;margin-right:0;padding-right:0;}
.hero__meta dt{
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:.4em;
}
.hero__meta dd{
  margin:0;
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.6rem;
  text-transform:uppercase;
  color:var(--bone);
  line-height:1;
}

/* ---------- storm strip --------------------------------------------------- */

.strip{
  background:var(--lime);
  color:var(--bark);
  padding-block:16px;
  overflow:hidden;
}
.strip__in{
  display:flex;
  align-items:center;
  gap:clamp(16px,3vw,36px);
  flex-wrap:wrap;
  justify-content:space-between;
}
.strip__msg{
  font-family:var(--f-mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.8em;
  margin:0;
}
.strip__dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--bark);
  flex:none;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.28;transform:scale(.7);}
}
.strip__link{
  font-family:var(--f-mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  text-decoration:none;
  border-bottom:2px solid var(--bark);
  padding-bottom:2px;
}
.strip__link:hover{color:var(--pine);border-color:var(--pine);}

/* ---------- section head -------------------------------------------------- */

.head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:clamp(20px,4vw,64px);
  align-items:end;
  margin-bottom:clamp(38px,4.5vw,60px);
}
.head p{margin:0;}
.head--solo{grid-template-columns:1fr;max-width:62ch;}

/* ---------- services grid ------------------------------------------------- */

.svcs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--mist);
  border:1px solid var(--mist);
}
.svc{
  background:var(--paper);
  padding:clamp(26px,3vw,38px);
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  min-height:290px;
  position:relative;
  transition:background .3s var(--ease);
}
.svc::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  height:4px;width:0;
  background:var(--lime);
  transition:width .42s var(--ease);
}
.svc:hover{background:var(--bone);}
.svc:hover::after{width:100%;}
.svc__ico{margin-bottom:auto;}
.svc__ico svg{
  width:52px;height:52px;
  stroke:var(--pine);
  fill:none;
  stroke-width:1.6;
  stroke-linecap:square;
  stroke-linejoin:miter;
  transition:stroke .3s var(--ease);
}
.svc:hover .svc__ico svg{stroke:var(--forest);}
.svc__ico .accent{stroke:var(--lime);stroke-width:2.4;}
.svcs .svc h3{color:var(--bark);margin:32px 0 10px;}
.svc p{
  font-size:.94rem;
  color:var(--slate-2);
  margin:0 0 18px;
  line-height:1.55;
}
.svc__go{
  font-family:var(--f-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pine);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.svc__go svg{transition:transform .3s var(--ease);}
.svc:hover .svc__go svg{transform:translateX(5px);}

.svc--fill{
  background:var(--pine);
  color:var(--bone);
  justify-content:flex-end;
}
.svcs .svc--fill h3{color:var(--bone);}
.svc--fill p{color:rgba(244,246,240,.74);}
.svc--fill:hover{background:var(--forest);}

/* ---------- growth rings (signature) -------------------------------------- */

.rings{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(32px,5vw,80px);
  align-items:center;
}
.rings__art{position:relative;}
.rings__art svg{width:100%;height:auto;overflow:visible;}

.ring-path{
  fill:none;
  stroke:rgba(170,201,23,.34);
  stroke-width:1.15;
}
.ring-gen{
  fill:none;
  stroke:var(--lime);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-dasharray:1000;
  stroke-dashoffset:1000;
}
.is-drawn .ring-gen{
  animation:draw 1.5s var(--ease) forwards;
  animation-delay:var(--d,0s);
}
@keyframes draw{to{stroke-dashoffset:0;}}
.ring-core{fill:var(--lime);}
.ring-lbl{
  font-family:var(--f-mono);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  fill:#8FA396;
}
.ring-lbl.on{fill:var(--lime);}
.ring-tick{stroke:var(--lime);stroke-width:1.4;}
.ring-plate{fill:var(--bark);}

.gens{list-style:none;margin:0;padding:0;}
.gens li{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:20px;
  padding:20px 0;
  border-top:1px solid rgba(244,246,240,.14);
}
.gens li:last-child{border-bottom:1px solid rgba(244,246,240,.14);}
.gens__n{
  font-family:var(--f-mono);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--lime);
  padding-top:.42em;
  white-space:nowrap;
}
.gens h4{color:var(--bone);margin-bottom:.42em;}
.gens p{font-size:.92rem;color:#9AA69F;margin:0;line-height:1.55;}

/* ---------- credentials --------------------------------------------------- */

.creds{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--mist);
  border-block:1px solid var(--mist);
}
.cred{background:var(--bone);padding:clamp(24px,3vw,34px);}
.cred dt{
  font-family:var(--f-display);
  font-size:clamp(2.6rem,4vw,3.5rem);
  font-weight:900;
  line-height:.86;
  color:var(--pine);
  text-transform:uppercase;
  margin-bottom:.28em;
}
.cred dd{
  margin:0;
  font-family:var(--f-mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--slate-2);
  line-height:1.6;
}

/* ---------- process ------------------------------------------------------- */

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,3vw,40px);
  counter-reset:s;
}
.step{
  padding-top:26px;
  border-top:3px solid var(--pine);
  position:relative;
  counter-increment:s;
}
.step::before{
  content:"0" counter(s);
  font-family:var(--f-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--lime-dim);
  display:block;
  margin-bottom:.9em;
}
.step h4{margin-bottom:.5em;font-size:1.28rem;}
.step p{font-size:.94rem;color:var(--slate-2);margin:0;}

/* ---------- content pages ------------------------------------------------- */

.phero{
  background:var(--bark);
  position:relative;
  overflow:hidden;
  padding-block:clamp(76px,10vw,132px) clamp(52px,6vw,76px);
}
.phero::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(78% 130% at 88% 0%, rgba(14,122,66,.5) 0%, rgba(14,122,66,0) 62%),
    linear-gradient(180deg,#0A2418 0%,#0C1512 100%);
}
.phero::after{
  content:"";
  position:absolute;
  right:-4%;top:-12%;
  width:min(560px,54vw);
  aspect-ratio:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%23AAC917' stroke-width='1' opacity='.5'><circle cx='200' cy='200' r='26'/><circle cx='200' cy='200' r='52'/><circle cx='200' cy='200' r='84'/><circle cx='200' cy='200' r='112'/><circle cx='200' cy='200' r='146'/><circle cx='200' cy='200' r='178'/></g></svg>");
  background-size:contain;
  background-repeat:no-repeat;
  opacity:.4;
}
.phero__in{position:relative;z-index:1;}
.phero h1{color:var(--bone);max-width:18ch;font-size:clamp(2.7rem,6.6vw,5.2rem);}
.phero .lede{color:#B6C0B8;max-width:56ch;margin-top:1.4rem;}

.crumb{
  font-family:var(--f-mono);
  font-size:.64rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#7E8A83;
  margin-bottom:1.5rem;
}
.crumb a{color:var(--lime);text-decoration:none;}
.crumb a:hover{text-decoration:underline;}
.crumb span{margin-inline:.6em;opacity:.5;}

.wrap{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:clamp(36px,5vw,76px);
  align-items:start;
}

.prose h2{margin:2.4em 0 .7em;font-size:clamp(1.9rem,3.4vw,2.6rem);}
.prose h2:first-child{margin-top:0;}
.prose h3{margin:2em 0 .6em;font-size:1.35rem;}
.prose ul{margin:0 0 1.4em;padding:0;list-style:none;}
.prose ul li{
  position:relative;
  padding-left:26px;
  margin-bottom:.72em;
}
.prose ul li::before{
  content:"";
  position:absolute;
  left:0;top:.66em;
  width:11px;height:2px;
  background:var(--lime);
}
.prose blockquote{
  margin:2em 0;
  padding:24px 0 24px 28px;
  border-left:3px solid var(--lime);
  font-family:var(--f-display);
  font-size:clamp(1.4rem,2.4vw,1.9rem);
  font-weight:700;
  text-transform:uppercase;
  line-height:1.02;
  color:var(--bark);
}
.prose blockquote cite{
  display:block;
  margin-top:.9em;
  font-family:var(--f-mono);
  font-size:.66rem;
  font-weight:500;
  font-style:normal;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-2);
}

.side{position:sticky;top:100px;display:grid;gap:20px;}
.card{
  background:var(--paper);
  border:1px solid var(--mist);
  padding:26px;
}
.card--pine{background:var(--pine);border-color:var(--pine);color:rgba(244,246,240,.8);}
.card--pine h4{color:var(--bone);}
.card h4{margin-bottom:.85em;font-size:1.18rem;}
.card p{font-size:.9rem;line-height:1.6;}
.card .btn{width:100%;margin-top:6px;}

.sidelist{list-style:none;margin:0;padding:0;}
.sidelist li{border-bottom:1px solid var(--mist);}
.sidelist li:last-child{border-bottom:0;}
.sidelist a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:.86em 0;
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--slate);
  transition:color .2s var(--ease);
}
.sidelist a:hover{color:var(--pine);}
.sidelist a[aria-current="page"]{color:var(--pine);font-weight:700;}
.sidelist svg{stroke:var(--lime);flex:none;}

/* ---------- checklist / feature grid -------------------------------------- */

.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,36px);}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);}

.tile{
  background:var(--paper);
  border:1px solid var(--mist);
  padding:clamp(22px,2.6vw,32px);
}
.band-dark .tile{background:var(--bark-2);border-color:rgba(244,246,240,.12);}
.tile h4{margin-bottom:.6em;}
.tile p{font-size:.93rem;color:var(--slate-2);margin:0;}
.band-dark .tile p{color:#9AA69F;}
.tile__k{
  font-family:var(--f-mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--lime-dim);
  display:block;
  margin-bottom:1.1em;
}
.band-dark .tile__k{color:var(--lime);}

/* ---------- faq ----------------------------------------------------------- */

.faq{border-top:1px solid var(--mist);}
.faq details{border-bottom:1px solid var(--mist);}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:1.25em 44px 1.25em 0;
  font-family:var(--f-display);
  font-size:clamp(1.15rem,1.8vw,1.4rem);
  font-weight:700;
  text-transform:uppercase;
  color:var(--bark);
  position:relative;
  line-height:1.06;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";
  position:absolute;
  right:6px;top:50%;
  width:13px;height:13px;
  margin-top:-7px;
  border-right:2px solid var(--lime);
  border-bottom:2px solid var(--lime);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq summary:hover{color:var(--pine);}
.faq__a{padding:0 8% 1.6em 0;color:var(--slate-2);font-size:.96rem;}
.faq__a p:last-child{margin-bottom:0;}

/* ---------- blog ---------------------------------------------------------- */

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,32px);}
.post{
  background:var(--paper);
  border:1px solid var(--mist);
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  transition:transform .3s var(--ease),border-color .3s var(--ease);
}
.post:hover{transform:translateY(-5px);border-color:var(--pine);}
.post__top{
  height:132px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(150deg,#0F3A24,#0C1512);
}
.post__top::after{
  content:"";
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 140'><g fill='none' stroke='%23AAC917' stroke-width='1' opacity='.55'><circle cx='250' cy='24' r='18'/><circle cx='250' cy='24' r='36'/><circle cx='250' cy='24' r='58'/><circle cx='250' cy='24' r='82'/><circle cx='250' cy='24' r='108'/></g></svg>");
  background-size:cover;
  opacity:.5;
}
.post__kind{
  position:absolute;
  left:20px;bottom:18px;
  z-index:1;
  font-family:var(--f-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--bark);
  background:var(--lime);
  padding:.42em .7em;
}
.post__body{padding:24px;display:flex;flex-direction:column;flex:1;}
.post__date{
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:.9em;
}
.posts .post h3{color:var(--bark);font-size:1.28rem;margin-bottom:.6em;}
.post p{font-size:.9rem;color:var(--slate-2);margin:0 0 18px;line-height:1.55;}
.post__go{
  margin-top:auto;
  font-family:var(--f-mono);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--pine);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.post:hover .post__go svg{transform:translateX(5px);}
.post__go svg{transition:transform .3s var(--ease);}

/* ---------- cta band ------------------------------------------------------ */

.cta{
  background:var(--pine);
  position:relative;
  overflow:hidden;
}
.cta::after{
  content:"";
  position:absolute;
  left:-6%;bottom:-52%;
  width:min(520px,58vw);
  aspect-ratio:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='none' stroke='%23AAC917' stroke-width='1.2' opacity='.55'><circle cx='200' cy='200' r='30'/><circle cx='200' cy='200' r='62'/><circle cx='200' cy='200' r='96'/><circle cx='200' cy='200' r='134'/><circle cx='200' cy='200' r='172'/></g></svg>");
  background-size:contain;
  background-repeat:no-repeat;
  opacity:.32;
}
.cta__in{position:relative;z-index:1;text-align:center;}
.cta h2{color:var(--bone);max-width:20ch;margin-inline:auto;}
.cta p{
  color:rgba(244,246,240,.82);
  max-width:52ch;
  margin:1.3rem auto 2rem;
}
.cta .btn-row{justify-content:center;}

/* ---------- contact ------------------------------------------------------- */

.cgrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(36px,5vw,72px);
  align-items:start;
}

.detail{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  padding:22px 0;
  border-bottom:1px solid var(--mist);
  align-items:start;
}
.detail:first-of-type{border-top:1px solid var(--mist);}
.detail__ico{
  width:38px;height:38px;
  border:1px solid var(--mist);
  display:grid;place-items:center;
  flex:none;
}
.detail__ico svg{stroke:var(--pine);width:17px;height:17px;fill:none;stroke-width:1.7;}
.detail dt{
  font-family:var(--f-mono);
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--slate-2);
  margin-bottom:.45em;
}
.detail dd{
  margin:0;
  font-family:var(--f-display);
  font-size:1.42rem;
  font-weight:800;
  text-transform:uppercase;
  line-height:1.02;
  color:var(--bark);
}
.detail dd a{text-decoration:none;}
.detail dd a[href^="mailto"]{text-transform:lowercase;}
.detail dd a:hover{color:var(--pine);}
.detail dd small{
  display:block;
  font-family:var(--f-body);
  font-size:.85rem;
  font-weight:400;
  text-transform:none;
  color:var(--slate-2);
  margin-top:.5em;
  line-height:1.5;
}

.form{
  background:var(--paper);
  border:1px solid var(--mist);
  padding:clamp(26px,3.4vw,42px);
}
.field{margin-bottom:20px;}
.field label{
  display:block;
  font-family:var(--f-mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:.6em;
}
.field label span{color:var(--lime-dim);}
.field input,.field select,.field textarea{
  width:100%;
  font-family:var(--f-body);
  font-size:.98rem;
  color:var(--bark);
  background:var(--bone);
  border:1px solid var(--mist);
  border-radius:2px;
  padding:.86em .95em;
  transition:border-color .2s var(--ease),background .2s var(--ease);
  appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23AAC917' stroke-width='2'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:38px;
  cursor:pointer;
}
.field textarea{min-height:132px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--forest);
  background:var(--paper);
  outline:none;
}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:1px;
}
.form .btn{width:100%;}
.form__note{
  font-family:var(--f-mono);
  font-size:.6rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--slate-2);
  text-align:center;
  margin:16px 0 0;
  line-height:1.7;
}
.form__ok{
  display:none;
  background:rgba(170,201,23,.14);
  border:1px solid var(--lime);
  padding:16px;
  margin-bottom:20px;
  font-size:.92rem;
  color:var(--bark);
}
.form__ok.on{display:block;}

.map{
  border:1px solid var(--mist);
  height:clamp(280px,38vw,420px);
  filter:grayscale(1) contrast(1.06);
  transition:filter .4s var(--ease);
  width:100%;
}
.map:hover{filter:grayscale(0);}

/* ---------- footer -------------------------------------------------------- */

.ftr{background:var(--bark);color:#8B958E;padding-block:clamp(56px,6vw,80px) 0;}
.ftr__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(28px,4vw,56px);
  padding-bottom:52px;
}
.ftr__logo img{height:44px;width:auto;margin-bottom:22px;}
.ftr p{font-size:.9rem;line-height:1.65;max-width:34ch;}
.ftr h4{
  font-family:var(--f-mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--lime);
  margin-bottom:1.4em;
  transform:skewX(-9deg);
  transform-origin:left;
}
.ftr ul{list-style:none;margin:0;padding:0;}
.ftr li{margin-bottom:.72em;}
.ftr ul a{
  font-size:.9rem;
  text-decoration:none;
  color:#8B958E;
  transition:color .2s var(--ease);
}
.ftr ul a:hover{color:var(--lime);}
.ftr__c{font-style:normal;font-size:.9rem;line-height:1.85;}
.ftr__c a{color:var(--bone);text-decoration:none;font-weight:600;}
.ftr__c a:hover{color:var(--lime);}
.ftr__hrs{
  font-family:var(--f-mono);
  font-size:.66rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--lime);
  margin-top:1.1em;
  display:block;
}
.ftr__base{
  border-top:1px solid rgba(244,246,240,.1);
  padding-block:26px calc(26px + var(--dock));
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:14px 32px;
  align-items:center;
  font-family:var(--f-mono);
  font-size:.62rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#5F6A63;
}
.ftr__base a{color:#5F6A63;text-decoration:none;}
.ftr__base a:hover{color:var(--lime);}
.ftr__base > p:nth-child(2){text-align:center;max-width:46ch;justify-self:center;}
.ftr__by{justify-self:end;white-space:nowrap;}
.ftr__by a{
  color:var(--bone);
  font-weight:700;
  border-bottom:1px solid var(--lime);
  padding-bottom:2px;
  transition:color .2s var(--ease);
}
.ftr__by a:hover{color:var(--lime);}
@media (max-width:900px){
  .ftr__base{grid-template-columns:1fr;text-align:left;}
  .ftr__base > p:nth-child(2){text-align:left;justify-self:start;}
  .ftr__by{justify-self:start;}
}

/* ---------- floating dock ------------------------------------------------- */

.dock{
  position:fixed;
  right:20px;
  bottom:calc(20px + env(safe-area-inset-bottom));
  z-index:70;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dock__btn{
  width:58px;height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(12,21,18,.34);
  transition:transform .26s var(--ease),width .3s var(--ease);
  position:relative;
}
.dock__btn svg{stroke-width:1.9;fill:none;width:22px;height:22px;}
.dock__btn:hover{transform:scale(1.09);}
.dock__call{background:var(--lime);}
.dock__call svg{stroke:var(--bark);}
.dock__mail{background:var(--pine);}
.dock__mail svg{stroke:var(--bone);}
.dock__call::before{
  content:"";
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid var(--lime);
  animation:halo 2.6s var(--ease) infinite;
}
@keyframes halo{
  0%{transform:scale(1);opacity:.9;}
  70%,100%{transform:scale(1.85);opacity:0;}
}
.dock__lbl{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--bark);
  color:var(--bone);
  font-family:var(--f-mono);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:.6em .8em;
  border-radius:2px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .24s var(--ease),transform .24s var(--ease);
}
.dock__btn:hover .dock__lbl{opacity:1;transform:translateY(-50%) translateX(0);}

/* ---------- reveal -------------------------------------------------------- */

.rv{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .74s var(--ease),transform .74s var(--ease);
}
.rv.in{opacity:1;transform:none;}

/* ---------- responsive ---------------------------------------------------- */

@media (max-width:1080px){
  .nav,.hdr__cta .btn{display:none;}
  .burger{display:grid;}
  .hdr__cta{gap:10px;}
  .wrap{grid-template-columns:1fr;}
  .side{position:static;grid-template-columns:repeat(2,1fr);}
  .svcs{grid-template-columns:repeat(2,1fr);}
  .creds{grid-template-columns:repeat(2,1fr);}
  .posts{grid-template-columns:repeat(2,1fr);}
  .ftr__grid{grid-template-columns:repeat(2,1fr);}
  .rings{grid-template-columns:1fr;}
  .rings__art{max-width:460px;margin-inline:auto;}
}

@media (max-width:820px){
  .head{grid-template-columns:1fr;align-items:start;}
  .cgrid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;gap:24px;}
  .grid3{grid-template-columns:1fr;}
  .hero__meta div{
    border-right:0;
    margin-right:0;
    padding-right:0;
    flex:0 0 50%;
    padding-block:10px;
  }
  .hero__meta{gap:0 0;}
}

@media (max-width:620px){
  :root{--dock:76px;}
  .svcs,.posts,.creds,.grid2,.ftr__grid,.side{grid-template-columns:1fr;}
  .svc{min-height:0;}
  .hero{min-height:0;padding-top:56px;}
  .hero__in{padding-block:0 44px;}
  .hero .btn-row .btn{flex:1 1 100%;}
  .strip__in{justify-content:flex-start;gap:12px;}
  .dock{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));flex-direction:row;}
  .dock__btn{width:54px;height:54px;}
  .dock__lbl{display:none;}
  .detail dd{font-size:1.2rem;}
  .prose blockquote{padding-left:20px;}
  .faq__a{padding-right:0;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rv{opacity:1;transform:none;}
  .ring-gen{stroke-dashoffset:0;}
}

@media print{
  .hdr,.dock,.mnav,.cta{display:none;}
  body{background:#fff;}
}

/* ---------- photography --------------------------------------------------- */

picture{display:block;}

.fig{margin:0 0 2.4em;}
.fig img{
  width:100%;
  height:auto;
  border:1px solid var(--mist);
  background:var(--mist);
}
.fig figcaption{
  font-family:var(--f-mono);
  font-size:.64rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--slate-2);
  line-height:1.65;
  padding-top:.9em;
  border-bottom:1px solid var(--mist);
  padding-bottom:.9em;
}
.prose .fig{margin-top:0;}

/* only the about portrait floats, and only once there is room for it */
@media (min-width:900px){
  .fig--side{
    float:right;
    width:min(46%,320px);
    margin:.3em 0 1.4em 2.2em;
  }
}
/* headings always get the full measure, never squeezed against a float */
.prose h2{clear:both;}
.prose > .fig:first-child{margin-top:0;}

/* full bleed photo band */
.band-img{
  position:relative;
  isolation:isolate;
  min-height:clamp(340px,46vw,520px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--bark);
  padding-block:clamp(40px,5vw,68px);
}
.band-img__pic{position:absolute;inset:0;z-index:0;}
.band-img__pic img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
.band-img__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to top,rgba(12,21,18,.94) 6%,rgba(12,21,18,.5) 46%,rgba(12,21,18,.2) 100%),
    linear-gradient(to right,rgba(12,21,18,.8) 0%,rgba(12,21,18,0) 66%);
}
.band-img__in{position:relative;z-index:2;}
.band-img__in h2{color:var(--bone);max-width:16ch;}
.band-img__in p{color:#C7CFC8;max-width:50ch;margin-top:1.1rem;}

/* blog card photo replaces the drawn ring motif */
.post__pic{position:absolute;inset:0;z-index:0;}
.post__pic img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.post:hover .post__pic img{transform:scale(1.05);}
.posts .post__top::after{
  content:"";
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(12,21,18,.62),rgba(12,21,18,0) 62%);
  background-image:none;
  opacity:1;
}
.post__kind{z-index:2;}