/* ==========================================================================
   Yard By Yard, Tree Specialists, Townsville
   Palette sampled from the Yard By Yard logo. Olive rope green and charcoal,
   lifted with a high visibility amber taken from rigging hardware and PPE.
   ========================================================================== */

:root{
  --char:#14170F;
  --char-2:#1D2116;
  --char-3:#272C1E;
  --moss:#4A6624;
  --moss-lit:#5F8130;
  --moss-deep:#364C19;
  --hivis:#E8AE33;
  --hivis-dim:#C08F22;
  --bone:#F5F3EA;
  --paper:#FFFFFF;
  --stone:#3B4034;
  --stone-2:#6C7365;
  --mist:#E2E3D7;
  --mist-2:#EEEDE3;

  --shell:1220px;
  --gut:clamp(20px,5vw,44px);
  --r:4px;

  --f-display:'Montserrat',"Helvetica Neue",Arial,sans-serif;
  --f-body:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ut:'Montserrat',"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.2,.6,.32,1);
  --dock:82px;
}

*,*::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(--stone);
  font-family:var(--f-body);
  font-size:clamp(15.5px,.4vw + 14.5px,17px);
  line-height:1.7;
  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(--hivis);
  outline-offset:3px;
  border-radius:2px;
}

::selection{background:var(--hivis);color:var(--char);}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--char);color:var(--bone);
  font-family:var(--f-ut);font-size:.74rem;padding:1em 1.4em;
}
.skip:focus{left:12px;top:12px;}

/* ---------- type ---------------------------------------------------------- */
/* Sentence case throughout with tight tracking. Only the utility labels shout. */

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.02;
  letter-spacing:-.028em;
  color:var(--char);
  margin:0;
  text-wrap:balance;
}

h1{font-size:clamp(2.6rem,6.1vw,4.7rem);font-weight:800;letter-spacing:-.036em;line-height:.98;}
h2{font-size:clamp(1.95rem,3.9vw,3.05rem);font-weight:800;letter-spacing:-.032em;}
h3{font-size:clamp(1.3rem,1.9vw,1.6rem);line-height:1.1;}
h4{font-size:1.1rem;line-height:1.2;letter-spacing:-.018em;}

p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}
strong{font-weight:700;color:var(--char);}

/* The whipping mark: three ticks, like the binding on a cut rope end. */
.eyebrow{
  font-family:var(--f-ut);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--moss);
  display:flex;
  align-items:center;
  gap:.85em;
  margin:0 0 1.2rem;
}
.eyebrow::before{
  content:"";
  width:14px;height:10px;
  flex:none;
  background-image:repeating-linear-gradient(90deg,var(--hivis) 0 2px,transparent 2px 6px);
}
.eyebrow--light{color:var(--hivis);}

.lede{
  font-size:clamp(1.04rem,1.25vw,1.2rem);
  line-height:1.65;
  color:var(--stone);
}

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

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

section{padding-block:clamp(60px,7.4vw,108px);}
.band-dark{background:var(--char);color:#B9C0B0;}
.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);}
.band-bone{background:var(--bone);}
.tight-top{padding-top:0;}

/* Rope lay divider: the twist of a three strand rope, flattened to a rule. */
.lay{
  height:6px;border:0;margin:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='26' height='6' viewBox='0 0 26 6'><path d='M-4 7L5 -1M9 7L18 -1M22 7L31 -1' fill='none' stroke='%234A6624' stroke-width='1.4' opacity='.42'/></svg>");
  background-repeat:repeat-x;
}

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

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

.btn--hivis{background:var(--hivis);color:var(--char);box-shadow:0 6px 18px rgba(232,174,51,.24);}
.btn--hivis:hover{background:#F3BB45;}

.btn--moss{background:var(--moss);color:var(--bone);}
.btn--moss:hover{background:var(--moss-lit);}

.btn--ghost{border-color:rgba(245,243,234,.32);color:var(--bone);}
.btn--ghost:hover{border-color:var(--hivis);color:var(--hivis);}

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

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

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

.hdr{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(245,243,234,.93);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid var(--mist);
}
.hdr__in{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  height:78px;
}
.hdr__logo{flex:none;display:block;}
.hdr__logo img{height:44px;width:auto;}

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

.drop{position:relative;}
.drop__btn{
  font-family:var(--f-ut);
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--stone);
  background:none;
  border:0;
  padding:.72em .85em;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.drop__btn:hover,.drop.is-open .drop__btn{color:var(--moss);}
.drop__btn[data-active="1"]{color:var(--moss);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% + 8px);
  left:0;
  min-width:264px;
  background:var(--paper);
  border:1px solid var(--mist);
  border-radius:var(--r);
  padding:7px;
  display:none;
  box-shadow:0 24px 56px rgba(20,23,15,.17);
}
.drop.is-open .drop__menu{display:block;}
.drop__menu a{display:block;padding:.74em .8em;font-size:.71rem;}
.drop__menu a:hover{background:var(--bone);color:var(--moss);}

.hdr__cta{display:flex;align-items:center;gap:14px;flex:none;}
.hdr__tel{
  font-family:var(--f-ut);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.03em;
  color:var(--char);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.5em;
}
.hdr__tel:hover{color:var(--moss);}
.hdr__tel svg{stroke:var(--moss);}

.burger{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--mist);
  border-radius:var(--r);
  background:var(--paper);
  cursor:pointer;
  padding:0;
  place-items:center;
}
.burger span{
  display:block;
  width:19px;height:2px;
  background:var(--char);
  position:relative;
  transition:background .2s var(--ease);
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;
  width:19px;height:2px;background:var(--char);
  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:10px var(--gut) calc(22px + env(safe-area-inset-bottom));
  max-height:calc(100dvh - 78px);
  overflow-y:auto;
}
.mnav.is-open{display:block;}
.mnav a{
  display:block;
  font-family:var(--f-display);
  font-size:1.42rem;
  font-weight:700;
  letter-spacing:-.028em;
  color:var(--char);
  text-decoration:none;
  padding:.54em 0;
  border-bottom:1px solid var(--mist);
}
.mnav a[aria-current="page"]{color:var(--moss);}
.mnav__sub{padding-left:16px;border-left:2px solid var(--moss);margin:6px 0;}
.mnav__sub a{font-size:1.02rem;font-weight:600;color:var(--stone);border:0;padding:.42em 0;}
.mnav__lbl{
  font-family:var(--f-ut);font-size:.63rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--moss);padding-top:16px;margin:0 0 .2em;
}
.mnav .btn{width:100%;margin-top:18px;}

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

.hero{
  position:relative;
  padding-block:0;
  min-height:clamp(540px,86svh,830px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--char);
  isolation:isolate;
}
.hero__media{position:absolute;inset:0;z-index:0;}
.hero__media video,.hero__media img{
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.05);
}
.hero__fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(110% 80% at 82% 12%, rgba(232,174,51,.24) 0%, rgba(232,174,51,0) 52%),
    radial-gradient(95% 75% at 8% 92%, rgba(74,102,36,.62) 0%, rgba(74,102,36,0) 62%),
    linear-gradient(165deg,#25341A 0%,#18200F 54%,#14170F 100%);
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right,rgba(20,23,15,.93) 0%,rgba(20,23,15,.74) 38%,rgba(20,23,15,.14) 78%),
    linear-gradient(to top,rgba(20,23,15,.72) 0%,rgba(20,23,15,0) 44%);
}
.hero__in{
  position:relative;z-index:2;width:100%;
  padding-block:clamp(64px,8vw,96px) clamp(84px,9vw,124px);
}
.hero__ttl{color:var(--bone);max-width:17ch;}
.hero__ttl em{font-style:normal;color:var(--hivis);}
.hero__sub{
  color:#BFC6B7;
  max-width:47ch;
  margin:1.5rem 0 2.1rem;
  font-size:clamp(1.02rem,1.25vw,1.16rem);
}
.hero__note{
  display:flex;align-items:center;gap:.7em;
  font-family:var(--f-ut);font-size:.66rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:#96A088;
  margin:1.8rem 0 0;
}
.hero__note b{color:var(--hivis);font-weight:600;}

/* The credential slab: hard amber block that laps over the hero edge. */
.slab-wrap{position:relative;z-index:5;padding-bottom:clamp(38px,5vw,62px);}
.slab{
  margin:clamp(-88px,-7vw,-58px) 0 0;
  background:var(--hivis);
  border-radius:var(--r);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  box-shadow:0 22px 48px rgba(20,23,15,.22);
  overflow:hidden;
}
.slab div{
  padding:clamp(20px,2.4vw,28px) clamp(18px,2vw,26px);
  border-right:1px solid rgba(20,23,15,.16);
}
.slab div:last-child{border-right:0;}
.slab dt{
  font-family:var(--f-ut);
  font-size:.6rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(20,23,15,.62);
  margin-bottom:.62em;
}
.slab dd{
  margin:0;
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(1.24rem,1.9vw,1.62rem);
  letter-spacing:-.03em;
  line-height:1.05;
  color:var(--char);
}
.slab dd small{
  display:block;font-family:var(--f-body);font-size:.78rem;font-weight:500;
  letter-spacing:0;color:rgba(20,23,15,.66);margin-top:.4em;line-height:1.4;
}

/* ---------- alert strip --------------------------------------------------- */

.strip{background:var(--char-2);color:var(--bone);padding-block:15px;}
.strip__in{
  display:flex;align-items:center;
  gap:clamp(14px,3vw,32px);
  flex-wrap:wrap;justify-content:space-between;
}
.strip__msg{
  font-family:var(--f-ut);font-size:.72rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  display:flex;align-items:center;gap:.8em;margin:0;color:#C3CAB6;
}
.strip__dot{
  width:8px;height:8px;border-radius:50%;background:var(--hivis);flex:none;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.3;transform:scale(.66);}}
.strip__link{
  font-family:var(--f-ut);font-size:.72rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;text-decoration:none;
  color:var(--hivis);border-bottom:2px solid rgba(232,174,51,.4);padding-bottom:2px;
}
.strip__link:hover{border-color:var(--hivis);}

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

.head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(18px,4vw,60px);
  align-items:end;
  margin-bottom:clamp(34px,4.2vw,56px);
}
.head p{margin:0;}
.head--solo{grid-template-columns:1fr;max-width:60ch;}

/* ---------- service index (signature layout) ------------------------------ */
/* Seven services read badly as cards. A numbered manifest reads like a job
   sheet, which is how the crew actually works. */

.index{list-style:none;margin:0;padding:0;border-top:1px solid var(--mist);}
.band-dark .index{border-top-color:rgba(245,243,234,.14);}
.idx{border-bottom:1px solid var(--mist);}
.band-dark .idx{border-bottom-color:rgba(245,243,234,.14);}

.idx > a{
  display:grid;
  grid-template-columns:42px 152px minmax(0,.78fr) minmax(0,1.22fr) 34px;
  align-items:center;
  gap:clamp(12px,1.8vw,26px);
  padding:clamp(14px,1.6vw,19px) clamp(8px,1.2vw,16px);
  text-decoration:none;
  color:inherit;
  position:relative;
  isolation:isolate;
  transition:color .3s var(--ease);
}
.idx > a::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--moss);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .46s var(--ease);
}
.idx > a:hover::before,.idx > a:focus-visible::before{transform:scaleX(1);}
.idx > a:hover,.idx > a:focus-visible{color:var(--bone);}

.idx__n{
  font-family:var(--f-ut);
  font-size:.72rem;font-weight:600;letter-spacing:.1em;
  color:var(--stone-2);
  transition:color .3s var(--ease);
}
.idx > a:hover .idx__n{color:var(--hivis);}

.idx__ttl{
  font-family:var(--f-display);
  min-width:0;
  font-size:clamp(1.16rem,1.75vw,1.5rem);
  font-weight:700;letter-spacing:-.03em;line-height:1.05;
  color:var(--char);
  display:block;
  transition:color .3s var(--ease);
}
.band-dark .idx__ttl{color:var(--bone);}
.idx > a:hover .idx__ttl{color:var(--bone);}

.idx__txt{
  font-size:.93rem;line-height:1.55;color:var(--stone-2);margin:0;
  transition:color .3s var(--ease);
}
.band-dark .idx__txt{color:#98A18B;}
.idx > a:hover .idx__txt{color:rgba(245,243,234,.84);}

.idx__kit{
  font-family:var(--f-ut);font-size:.6rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--moss);display:block;margin-top:.85em;
  transition:color .3s var(--ease);
}
.idx > a:hover .idx__kit{color:var(--hivis);}

.idx__go{
  justify-self:end;
  width:34px;height:34px;
  border:1px solid var(--mist);
  border-radius:50%;
  display:grid;place-items:center;
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
.band-dark .idx__go{border-color:rgba(245,243,234,.2);}
.idx__go svg{stroke:currentColor;}
.idx > a:hover .idx__go{background:var(--hivis);border-color:var(--hivis);color:var(--char);transform:translateX(3px);}

/* ---------- service row thumbnail ---------------------------------------- */
/* The image is absolutely positioned so in-flow content cannot override the
   aspect ratio and blow the row height out. */

.idx__pic{
  display:block;position:relative;
  width:100%;min-width:0;
  aspect-ratio:3/2;
  border-radius:3px;overflow:hidden;
  background:var(--mist);
}
.idx__pic img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  filter:saturate(.92);
  transition:transform .6s var(--ease),filter .4s var(--ease);
}
.idx > a:hover .idx__pic img{transform:scale(1.06);filter:saturate(1.05);}

/* ---------- photo gallery ------------------------------------------------ */
/* Two up on desktop, caption sits under the frame rather than over the photo. */

.gal{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(16px,2.4vw,30px);
}
.gal figure{margin:0;min-width:0;}
.gal__frame{
  display:block;position:relative;
  aspect-ratio:3/2;
  border-radius:var(--r);overflow:hidden;
  background:var(--mist);
}
.gal__frame img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .7s var(--ease);
}
.gal figure:hover .gal__frame img{transform:scale(1.04);}
.gal figcaption{
  padding-top:.95em;
  font-family:var(--f-ut);font-size:.63rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--stone-2);line-height:1.65;
}
.band-dark .gal figcaption{color:#98A18B;}
@media (max-width:640px){
  .gal{grid-template-columns:1fr;gap:20px;}
}

/* ---------- compliance documents ----------------------------------------- */

.docs-band{padding-block:clamp(34px,4vw,52px) clamp(34px,4vw,52px);}
.docs-head{max-width:62ch;margin-bottom:clamp(20px,2.4vw,28px);}
.docs-head .lede{font-size:clamp(.98rem,1.1vw,1.08rem);}

.docs{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  background:var(--mist);
  border:1px solid var(--mist);
  border-radius:var(--r);
  overflow:hidden;
}
.doc{
  background:var(--paper);
  padding:clamp(17px,2vw,23px);
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:.62em;
  min-width:0;
  transition:background .28s var(--ease);
}
.doc:hover{background:var(--bone);}
.doc__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:.3em;}
.doc__ico{
  width:32px;height:32px;flex:none;
  border:1px solid var(--mist);border-radius:3px;
  display:grid;place-items:center;
  transition:background .28s var(--ease),border-color .28s var(--ease);
}
.doc__ico svg{
  width:15px;height:15px;fill:none;
  stroke:var(--moss);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .28s var(--ease);
}
.doc:hover .doc__ico{background:var(--hivis);border-color:var(--hivis);}
.doc:hover .doc__ico svg{stroke:var(--char);}
.doc__ext{
  font-family:var(--f-ut);font-size:.57rem;font-weight:700;
  letter-spacing:.15em;color:var(--stone-2);
}
.doc__name{
  font-family:var(--f-display);font-weight:700;
  font-size:1rem;letter-spacing:-.02em;line-height:1.2;
  color:var(--char);
}
.doc:hover .doc__name{color:var(--moss);}
.doc__meta{font-size:.82rem;line-height:1.5;color:var(--stone-2);}

@media (max-width:1040px){.docs{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.docs{grid-template-columns:1fr;}}

/* ---------- crew portrait ------------------------------------------------ */

.mate__pic{
  display:block;position:relative;
  aspect-ratio:16/10;
  border-radius:3px;overflow:hidden;
  margin:0 0 22px;background:var(--mist);
}
.mate__pic img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s var(--ease);
}
.mate:hover .mate__pic img{transform:scale(1.04);}

/* the photo carries the row on a phone, the number moves onto the picture */
@media (max-width:900px){
  .idx > a{
    grid-template-columns:104px minmax(0,1fr) 28px;
    align-items:start;gap:8px 14px;padding-inline:6px;
  }
  .idx__pic{grid-area:1 / 1 / 3 / 2;aspect-ratio:1;}
  .idx__n{
    grid-area:1 / 1 / 2 / 2;z-index:2;align-self:start;justify-self:start;
    margin:8px 0 0 8px;background:var(--hivis);color:var(--char);
    padding:.28em .5em;border-radius:2px;font-size:.62rem;
  }
  .idx > a:hover .idx__n{color:var(--char);}
  .idx__ttl{grid-area:1 / 2 / 2 / 3;font-size:1.2rem;}
  .idx__go{grid-area:1 / 3 / 2 / 4;align-self:start;}
  .idx__txt-wrap{grid-area:2 / 2 / 3 / 4;min-width:0;}
  .idx__txt{font-size:.88rem;}
  .idx__kit{margin-top:.55em;}
}
@media (max-width:460px){
  .idx > a{grid-template-columns:76px minmax(0,1fr) 26px;}
  .idx__ttl{font-size:1.06rem;}
}

/* ---------- the rigging line (signature element) -------------------------- */
/* The logo is a rope splice closed with a carabiner. The process runs down a
   working line, one knot per stage, and it ties off at the bottom. */

.rig{list-style:none;margin:0;padding:0;counter-reset:stage;}

.stage{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
  counter-increment:stage;
}

.stage__line{position:relative;min-height:56px;}
/* the working line itself, three strand lay drawn in CSS */
.stage__line::before{
  content:"";
  position:absolute;left:50%;top:0;
  width:20px;height:100%;
  margin-left:-10px;
  border-radius:2px;
  background:
    repeating-linear-gradient(-56deg,
      rgba(46,65,22,0) 0 4px,
      rgba(120,158,66,.88) 4px 5.6px,
      rgba(46,65,22,0) 5.6px 9px),
    linear-gradient(90deg,#26380F 0,#4A6624 24%,#5F8130 50%,#4A6624 76%,#26380F 100%);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .72s var(--ease);
  transition-delay:var(--d,0s);
}
.rig.is-rigged .stage__line::before{transform:scaleY(1);}
.stage--end .stage__line::before{height:58px;}

/* the knot is the step marker, so the number carries real sequence */
.stage__knot{
  position:absolute;left:50%;top:0;
  width:52px;height:52px;
  margin-left:-26px;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--hivis);
  border:3px solid var(--char);
  box-shadow:0 0 0 4px rgba(232,174,51,.16);
  font-family:var(--f-ut);
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  color:var(--char);
  opacity:0;transform:scale(.35);
  transition:opacity .46s var(--ease),transform .46s var(--ease);
  transition-delay:calc(var(--d,0s) + .34s);
}
.stage__knot::before{content:"0" counter(stage);}
.rig.is-rigged .stage__knot{opacity:1;transform:scale(1);}

.stage__body{padding:2px 0 clamp(30px,4vw,46px);}
.stage--end .stage__body{padding-bottom:0;}
.stage__k{
  font-family:var(--f-ut);font-size:.62rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--hivis);
  margin:0 0 .65em;
}
.stage h3{color:var(--bone);margin-bottom:.45em;}
.stage p{font-size:.94rem;color:#99A28C;margin:0;line-height:1.62;}

/* tie off: the carabiner from the logo closes the line */
.rig__off{
  display:grid;grid-template-columns:86px minmax(0,1fr);
  gap:clamp(16px,3vw,40px);
}
.rig__off > div:first-child{display:grid;place-items:center;}
.rig__biner{
  width:38px;height:auto;
  opacity:0;transform:translateY(-8px);
  transition:opacity .5s var(--ease) 1.5s,transform .5s var(--ease) 1.5s;
}
.rig.is-rigged .rig__biner{opacity:1;transform:none;}
.rig__biner path,.rig__biner rect{fill:none;stroke:var(--hivis);stroke-width:3.2;stroke-linecap:round;}

@media (max-width:720px){
  .stage,.rig__off{grid-template-columns:58px minmax(0,1fr);gap:14px;}
  .stage__knot{width:44px;height:44px;margin-left:-22px;font-size:.72rem;}
  .stage__line::before{width:16px;margin-left:-8px;}
}

/* ---------- crew ---------------------------------------------------------- */

.crew{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.6vw,30px);}
.mate{
  background:var(--paper);
  border:1px solid var(--mist);
  border-radius:var(--r);
  padding:clamp(24px,3vw,34px);
  border-top:3px solid var(--moss);
}
.mate__role{
  font-family:var(--f-ut);font-size:.61rem;font-weight:700;
  letter-spacing:.17em;text-transform:uppercase;color:var(--moss);
  margin:0 0 1em;
}
.mate h3{margin-bottom:.5em;}
.mate p{font-size:.94rem;color:var(--stone-2);margin:0 0 1.3em;}
.mate ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;}
.mate li{
  font-family:var(--f-ut);font-size:.6rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;
  background:var(--bone);border:1px solid var(--mist);border-radius:2px;
  padding:.44em .68em;color:var(--stone);
}

/* ---------- proof numbers ------------------------------------------------- */

.figs{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--mist);
  border:1px solid var(--mist);border-radius:var(--r);overflow:hidden;
}
.fig-c{background:var(--paper);padding:clamp(22px,2.8vw,32px);}
.fig-c dt{
  font-family:var(--f-display);
  font-size:clamp(2.1rem,3.6vw,3rem);
  font-weight:800;line-height:.92;letter-spacing:-.04em;
  color:var(--moss);margin-bottom:.3em;
}
.fig-c dd{
  margin:0;font-family:var(--f-ut);font-size:.63rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--stone-2);line-height:1.65;
}

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

.phero{
  background:var(--char);
  position:relative;overflow:hidden;
  padding-block:clamp(66px,8.6vw,116px) clamp(48px,5.6vw,72px);
}
.phero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(72% 120% at 90% 4%, rgba(74,102,36,.56) 0%, rgba(74,102,36,0) 64%),
    linear-gradient(180deg,#1C2513 0%,#14170F 100%);
}
/* rope coil, the same splice the logo turns on */
.phero::after{
  content:"";position:absolute;
  right:-5%;top:-16%;
  width:min(520px,52vw);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='%23E8AE33' stroke-width='2.4' opacity='.5'><circle cx='200' cy='200' r='150'/><circle cx='200' cy='200' r='118'/><circle cx='200' cy='200' r='86'/><path d='M200 50c-40 0-40 40 0 40s40 40 0 40' stroke-width='2'/></g><g fill='none' stroke='%234A6624' stroke-width='9' opacity='.45'><circle cx='200' cy='200' r='134'/><circle cx='200' cy='200' r='102'/></g></svg>");
  background-size:contain;background-repeat:no-repeat;opacity:.55;
}
.phero__in{position:relative;z-index:1;}
.phero h1{color:var(--bone);max-width:19ch;font-size:clamp(2.35rem,5.4vw,4.1rem);}
.phero .lede{color:#B0B8A5;max-width:56ch;margin-top:1.3rem;}

.crumb{
  font-family:var(--f-ut);font-size:.63rem;letter-spacing:.14em;
  text-transform:uppercase;color:#7C8570;margin-bottom:1.5rem;
}
.crumb a{color:var(--hivis);text-decoration:none;}
.crumb a:hover{text-decoration:underline;}
.crumb span{margin-inline:.55em;opacity:.5;}

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

.prose h2{margin:2.3em 0 .7em;font-size:clamp(1.7rem,3vw,2.35rem);}
.prose h2:first-child{margin-top:0;}
.prose h3{margin:2em 0 .55em;font-size:1.28rem;}
.prose ul{margin:0 0 1.4em;padding:0;list-style:none;}
.prose ul li{position:relative;padding-left:26px;margin-bottom:.7em;}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:12px;height:2px;background:var(--hivis);
}
.prose blockquote{
  margin:2.1em 0;padding:22px 0 22px 26px;
  border-left:3px solid var(--hivis);
  font-family:var(--f-display);
  font-size:clamp(1.24rem,2.1vw,1.62rem);
  font-weight:700;letter-spacing:-.028em;line-height:1.2;
  color:var(--char);
}
.prose blockquote cite{
  display:block;margin-top:.85em;
  font-family:var(--f-ut);font-size:.64rem;font-weight:500;font-style:normal;
  letter-spacing:.13em;text-transform:uppercase;color:var(--stone-2);
}

.side{position:sticky;top:100px;display:grid;gap:18px;}
.card{
  background:var(--paper);border:1px solid var(--mist);
  border-radius:var(--r);padding:25px;
}
.card--moss{background:var(--moss);border-color:var(--moss);color:rgba(245,243,234,.84);}
.card--moss h4{color:var(--bone);}
.card h4{margin-bottom:.85em;font-size:1.14rem;}
.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:.82em 0;
  font-family:var(--f-ut);font-size:.7rem;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;text-decoration:none;
  color:var(--stone);transition:color .2s var(--ease);
}
.sidelist a:hover{color:var(--moss);}
.sidelist a[aria-current="page"]{color:var(--moss);font-weight:600;}
.sidelist svg{stroke:var(--hivis);flex:none;}

/* ---------- tiles --------------------------------------------------------- */

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

.tile{
  background:var(--paper);border:1px solid var(--mist);
  border-radius:var(--r);padding:clamp(21px,2.5vw,30px);
}
.band-dark .tile{background:var(--char-2);border-color:rgba(245,243,234,.12);}
.tile h4{margin-bottom:.6em;}
.tile p{font-size:.93rem;color:var(--stone-2);margin:0;}
.band-dark .tile p{color:#98A18B;}
.tile__k{
  font-family:var(--f-ut);font-size:.61rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--moss);display:block;margin-bottom:1.1em;
}
.band-dark .tile__k{color:var(--hivis);}

/* ---------- 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.2em 44px 1.2em 0;
  font-family:var(--f-display);
  font-size:clamp(1.08rem,1.6vw,1.28rem);
  font-weight:700;letter-spacing:-.026em;
  color:var(--char);position:relative;line-height:1.28;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:12px;height:12px;margin-top:-7px;
  border-right:2px solid var(--hivis);border-bottom:2px solid var(--hivis);
  transform:rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);}
.faq summary:hover{color:var(--moss);}
.faq__a{padding:0 8% 1.5em 0;color:var(--stone-2);font-size:.95rem;}
.faq__a p:last-child{margin-bottom:0;}

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

.cta{background:var(--moss);position:relative;overflow:hidden;}
.cta::after{
  content:"";position:absolute;left:-7%;bottom:-56%;
  width:min(500px,56vw);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='%23E8AE33' stroke-width='10' opacity='.34'><circle cx='200' cy='200' r='150'/><circle cx='200' cy='200' r='112'/><circle cx='200' cy='200' r='74'/></g></svg>");
  background-size:contain;background-repeat:no-repeat;opacity:.6;
}
.cta__in{position:relative;z-index:1;text-align:center;}
.cta .eyebrow{justify-content:center;}
.cta h2{color:var(--bone);max-width:20ch;margin-inline:auto;}
.cta p{color:rgba(245,243,234,.85);max-width:52ch;margin:1.25rem auto 2rem;}
.cta .btn-row{justify-content:center;}

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

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

.detail{
  display:grid;grid-template-columns:auto 1fr;gap:18px;
  padding:21px 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);border-radius:var(--r);
  display:grid;place-items:center;flex:none;background:var(--paper);
}
.detail__ico svg{stroke:var(--moss);width:17px;height:17px;fill:none;stroke-width:1.7;}
.detail dt{
  font-family:var(--f-ut);font-size:.6rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--stone-2);margin-bottom:.45em;
}
.detail dd{
  margin:0;overflow-wrap:anywhere;font-family:var(--f-display);font-size:1.16rem;font-weight:700;
  letter-spacing:-.03em;line-height:1.18;color:var(--char);
}
.detail dd a{text-decoration:none;}
.detail dd a:hover{color:var(--moss);}
.detail dd small{
  display:block;font-family:var(--f-body);font-size:.85rem;font-weight:400;
  letter-spacing:0;color:var(--stone-2);margin-top:.5em;line-height:1.55;
}

.hours{width:100%;border-collapse:collapse;margin-top:.5em;}
.hours th,.hours td{
  text-align:left;padding:.5em 0;border-bottom:1px solid var(--mist);
  font-family:var(--f-ut);font-size:.72rem;font-weight:500;letter-spacing:.04em;
  color:var(--stone);
}
.hours th{color:var(--stone-2);text-transform:uppercase;font-size:.63rem;letter-spacing:.14em;}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0;}

.form{
  background:var(--paper);border:1px solid var(--mist);
  border-radius:var(--r);padding:clamp(24px,3.2vw,38px);
}
.field{margin-bottom:19px;}
.field label{
  display:block;font-family:var(--f-ut);font-size:.62rem;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--stone);margin-bottom:.6em;
}
.field label span{color:var(--hivis-dim);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:.97rem;color:var(--char);
  background:var(--bone);border:1px solid var(--mist);border-radius:var(--r);
  padding:.85em .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='%234A6624' stroke-width='2'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;
  padding-right:38px;cursor:pointer;
}
.field textarea{min-height:128px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--moss);background:var(--paper);outline:none;
}
.form .btn{width:100%;}
.form__note{
  font-family:var(--f-ut);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stone-2);text-align:center;
  margin:15px 0 0;line-height:1.75;
}
.form__ok,.form__err{display:none;border-radius:var(--r);padding:15px;margin-bottom:19px;font-size:.92rem;}
.form__ok{background:rgba(74,102,36,.1);border:1px solid var(--moss);color:var(--char);}
.form__err{background:rgba(232,174,51,.14);border:1px solid var(--hivis-dim);color:var(--char);}
.form__ok.on,.form__err.on{display:block;}

.map{
  border:1px solid var(--mist);border-radius:var(--r);
  height:clamp(270px,36vw,400px);
  filter:grayscale(1) contrast(1.05);
  transition:filter .4s var(--ease);width:100%;
}
.map:hover{filter:grayscale(0);}

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

picture{display:block;}
.pic{margin:0 0 2.3em;}
.pic img{
  width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--mist);background:var(--mist);
}
.pic figcaption{
  font-family:var(--f-ut);font-size:.63rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--stone-2);line-height:1.7;
  padding-top:.85em;
}
.prose .pic{margin-top:0;}
@media (min-width:900px){
  .pic--side{float:right;width:min(46%,315px);margin:.3em 0 1.4em 2.2em;}
}
.prose h2{clear:both;}
.prose > .pic:first-child{margin-top:0;}

.band-img{
  position:relative;isolation:isolate;
  min-height:clamp(320px,42vw,480px);
  display:flex;align-items:flex-end;overflow:hidden;
  background:var(--char);padding-block:clamp(38px,5vw,64px);
}
.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(20,23,15,.94) 6%,rgba(20,23,15,.48) 48%,rgba(20,23,15,.18) 100%),
    linear-gradient(to right,rgba(20,23,15,.82) 0%,rgba(20,23,15,0) 66%);
}
.band-img__in{position:relative;z-index:2;}
.band-img__in h2{color:var(--bone);max-width:17ch;}
.band-img__in p{color:#BFC6B7;max-width:50ch;margin-top:1.05rem;}

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

.ftr{background:var(--char);color:#89907C;padding-block:clamp(52px,6vw,76px) 0;}
.ftr__grid{
  display:grid;
  grid-template-columns:1.55fr .92fr .78fr 1.1fr 1.05fr;
  gap:clamp(22px,2.8vw,40px);padding-bottom:48px;
}
.ftr__logo img{height:56px;width:auto;margin-bottom:20px;}
.ftr p{font-size:.9rem;line-height:1.68;max-width:34ch;}
.ftr h4{
  font-family:var(--f-ut);font-size:.61rem;font-weight:600;
  letter-spacing:.19em;text-transform:uppercase;color:var(--hivis);margin-bottom:1.3em;
}
.ftr ul{list-style:none;margin:0;padding:0;}
.ftr li{margin-bottom:.68em;}
.ftr ul a{font-size:.9rem;text-decoration:none;color:#89907C;transition:color .2s var(--ease);}
.ftr ul a:hover{color:var(--hivis);}
.ftr__c{font-style:normal;font-size:.9rem;line-height:1.9;}
.ftr__c a{color:var(--bone);text-decoration:none;font-weight:600;}
.ftr__c a:hover{color:var(--hivis);}
.ftr__hrs{
  font-family:var(--f-ut);font-size:.65rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hivis);margin-top:1em;display:block;line-height:1.7;
}
.ftr__base{
  border-top:1px solid rgba(245,243,234,.1);
  padding-block:24px calc(24px + var(--dock));
  display:grid;grid-template-columns:auto 1fr auto;gap:13px 30px;align-items:center;
  font-family:var(--f-ut);font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:#5D6455;
}
.ftr__base a{color:#5D6455;text-decoration:none;}
.ftr__base a:hover{color:var(--hivis);}
.ftr__base > p:nth-child(2){text-align:center;max-width:48ch;justify-self:center;}
.ftr__by{justify-self:end;white-space:nowrap;}
.ftr__by a{
  color:var(--bone);font-weight:600;
  border-bottom:1px solid var(--hivis);padding-bottom:2px;
  transition:color .2s var(--ease);
}
.ftr__by a:hover{color:var(--hivis);}

/* ---------- 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:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  box-shadow:0 12px 28px rgba(20,23,15,.34);
  transition:transform .26s 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(--hivis);}
.dock__call svg{stroke:var(--char);}
.dock__mail{background:var(--moss);}
.dock__mail svg{stroke:var(--bone);}
.dock__call::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid var(--hivis);animation:halo 2.6s var(--ease) infinite;
}
@keyframes halo{0%{transform:scale(1);opacity:.85;}70%,100%{transform:scale(1.8);opacity:0;}}
.dock__lbl{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--char);color:var(--bone);
  font-family:var(--f-ut);font-size:.61rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.6em .8em;border-radius:var(--r);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(20px);transition:opacity .7s var(--ease),transform .7s 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);}
  .figs{grid-template-columns:repeat(2,1fr);}
  .ftr__grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .slab{grid-template-columns:repeat(2,1fr);}
  .slab div:nth-child(2){border-right:0;}
  .slab div:nth-child(-n+2){border-bottom:1px solid rgba(20,23,15,.16);}
}

@media (max-width:820px){
  .ftr__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 24px;}
  .head{grid-template-columns:1fr;align-items:start;}
  .cgrid,.crew,.grid3{grid-template-columns:1fr;}
  .hdr__logo img{height:38px;}
}

@media (max-width:620px){
  :root{--dock:74px;}
  .grid2,.ftr__grid,.side,.figs{grid-template-columns:1fr;}
  .slab{grid-template-columns:1fr;margin-top:-46px;}
  .slab div{border-right:0;border-bottom:1px solid rgba(20,23,15,.16);}
  .slab div:last-child{border-bottom:0;}
  .hero{min-height:0;padding-top:44px;}
  .hero .btn-row .btn{flex:1 1 100%;}
  .strip__in{justify-content:flex-start;gap:10px;}
  .dock{right:14px;bottom:calc(14px + env(safe-area-inset-bottom));flex-direction:row;}
  .dock__btn{width:52px;height:52px;}
  .dock__lbl{display:none;}
  .detail dd{font-size:1.14rem;}
  .prose blockquote{padding-left:18px;}
  .faq__a{padding-right:0;}
  .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;}
}

@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;}
  .rope-spine{stroke-dashoffset:0;}
  .rope-lay,.rope-edge,.biner{opacity:1;}
  .knot{opacity:1;transform:none;}
}

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