/* Strickland's — Plus Jakarta Sans + Manrope. Still-left dock, inset lot notes. */
:root{
  --ink:#243018;
  --paper:#F3F0E6;
  --brass:#D8B460;
  --brass-deep:#8F6F28;
  --mute:#5A5748;

  --r:10px;
  --well:8px;
  --wrap:1180px;
  --gut:clamp(1.15rem,4vw,2.3rem);
  --band:clamp(3.5rem,8vw,6.25rem);
  --hdr-h:148px;
  --dock-h:0px;
  --seam:clamp(2.4rem,5.2vw,4rem);

  --ease:cubic-bezier(.2,0,0,1);
  --quick:180ms;
  --standard:420ms;
  --slow:620ms;
  --lift:0 1px 2px rgba(36,48,24,.06), 0 18px 40px rgba(36,48,24,.12);
  --grain:url("./assets/grain.png");
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;overflow-x:clip;
  font-family:"Manrope",system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.65;
  color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
p,figure,h1,h2,h3,form{margin:0}
button,input,select,textarea{font:inherit}
::selection{background:var(--brass);color:var(--ink)}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
.hdr :focus-visible,.cta :focus-visible,.hero :focus-visible,.services :focus-visible,.how :focus-visible,.ft :focus-visible{outline-color:var(--paper)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
section{scroll-margin-top:calc(var(--hdr-h) + 12px)}
.nw{white-space:nowrap}
.skip{position:absolute;left:1rem;top:-4rem;z-index:200;background:var(--ink);color:var(--paper);padding:.7rem 1.1rem;font-weight:700;border-radius:var(--r)}
.skip:focus{top:1rem}

h1,h2{
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;
  letter-spacing:-.03em;line-height:.94;text-wrap:balance;
}
h1{font-size:clamp(2.35rem,5.2vw,5.15rem);max-width:12ch;letter-spacing:-.04em}
h1 span{display:block;color:var(--brass);margin-top:.12em}
h2{font-size:clamp(1.75rem,3.2vw,2.75rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em}
.eyebrow{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .8rem;
}
.about .eyebrow,.faq .eyebrow,.contact .eyebrow{color:var(--brass-deep)}
.sec-head{max-width:46rem;margin-bottom:clamp(2rem,4vw,3.2rem)}
.sec-head p{margin-top:.85rem}
.sec-head--ink p{color:rgba(243,240,230,.78)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:.9rem 1.55rem;border-radius:var(--r);
  font-weight:700;border:2px solid transparent;cursor:pointer;
  transition:background var(--quick) var(--ease),transform var(--quick) var(--ease),color var(--quick) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn--lg{min-height:56px;padding:1rem 1.8rem}
.more{
  display:inline-flex;align-items:center;gap:.45rem;
  min-height:44px;margin-top:.85rem;font-weight:800;
}
.more span{transition:transform var(--quick) var(--ease)}
.more:hover span{transform:translateX(5px)}
.btn--brass{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.btn--brass:hover{background:var(--brass-deep);border-color:var(--brass-deep);color:var(--paper)}
.btn--paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--paper:hover{background:#E4E0D2}

.hdr{
  position:fixed;inset:0 0 auto 0;z-index:80;
  color:var(--paper);background:var(--ink);
  padding-top:env(safe-area-inset-top,0px);
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .hdr{
      background:transparent;
      animation:hdrFill linear both;
      animation-timeline:scroll();
      animation-range:0 32vh;
    }
  }
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--hdr-h);padding-block:.55rem}
.brand{display:flex;align-items:center;gap:.85rem;min-width:0;font-weight:700}
.brand img{
  height:clamp(6.75rem,10.4vw,8.85rem);width:auto;
  background:transparent;border-radius:0;box-shadow:none;
}
@media (prefers-reduced-motion:no-preference){
  .brand img{animation:softFloat var(--slow) var(--ease) 120ms both}
}
.brand span{line-height:1.15;max-width:min(48vw,20rem);white-space:normal;font-size:1.15rem}
.nav{display:flex;align-items:center;gap:1.3rem}
.nav ul{display:flex;gap:1.15rem}
.nav ul a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;border-bottom:2px solid transparent}
.nav ul a:hover{border-bottom-color:var(--brass)}
.m-nav{display:none;position:relative}
.m-nav summary{
  list-style:none;width:48px;height:48px;display:grid;place-content:center;cursor:pointer;
  border:2px solid rgba(243,240,230,.4);border-radius:var(--r);
}
.m-nav summary::-webkit-details-marker{display:none}
.m-nav summary span{display:block;width:18px;height:2px;background:var(--paper);margin:3px auto}
.m-nav__panel{
  position:absolute;right:0;top:calc(100% + 10px);z-index:101;
  width:min(300px,84vw);display:flex;flex-direction:column;gap:2px;
  background:var(--paper);color:var(--ink);border-radius:var(--r);box-shadow:var(--lift);padding:12px;
}
.m-nav__panel a{display:flex;align-items:center;min-height:48px;padding:10px 14px;font-weight:700;border-radius:var(--r)}
.m-nav__panel a:hover{background:#E8E4D6}
.m-nav__panel .btn{margin-top:8px}

.hero{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(22rem,.9fr);
  min-height:100svh;
  background:var(--ink);color:var(--paper);
}
.hero__still{position:relative;overflow:hidden;min-width:0;min-height:100%}
.hero__still::after{
  content:"";position:absolute;inset:0 0 auto 0;height:8.5rem;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(36,48,24,.62),transparent);
}
.hero__still img{
  width:100%;height:100%;min-height:100svh;
  object-fit:cover;object-position:28% 82%;max-width:none;
}
.hero__copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,4.2vw,3.6rem) clamp(1.4rem,3.4vw,2.8rem);
  padding-top:max(clamp(2rem,4.2vw,3.6rem), calc(var(--hdr-h) + 4px));
  background:var(--ink) var(--grain);
  background-blend-mode:multiply;
}
.lede{margin:.85rem 0 1.15rem;color:rgba(243,240,230,.82);font-size:1.08rem;max-width:38rem}
.lede a{font-weight:700;border-bottom:2px solid var(--brass);color:var(--paper)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.7rem}

.about,.faq,.contact,.how,.cta,.ft{position:relative;z-index:1}
.about::before,.faq::before,.contact::before,
.how::before,.cta::before,.ft::before{
  content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none;
  top:calc(var(--seam) * -1 + 1px);height:var(--seam);
  -webkit-mask:url("./assets/berm.svg") center / 100% 100% no-repeat;
  mask:url("./assets/berm.svg") center / 100% 100% no-repeat;
}
.about::before,.faq::before,.contact::before{background:var(--paper)}
.how::before,.cta::before,.ft::before{
  background:var(--ink) var(--grain);
  background-blend-mode:multiply;
}

.hero__facts{
  display:flex;flex-wrap:nowrap;align-items:flex-start;
  gap:0;margin:1.15rem 0 0;padding:0;max-width:36rem;
}
.hero__facts li{
  flex:1 1 0;min-width:0;
  padding:0 .75rem;
  border-left:1px solid rgba(243,240,230,.12);
}
.hero__facts li:first-child{padding-left:0;border-left:0}
.hero__facts li:last-child{padding-right:0}
.hero__facts span{
  display:block;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin:0 0 .28rem;
}
.hero__facts b{
  display:block;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  font-weight:800;letter-spacing:-.02em;line-height:1.2;
  color:var(--paper);font-size:clamp(.82rem,1.05vw,.95rem);
}

.services{
  background:var(--ink) var(--grain);
  background-blend-mode:multiply;
  color:var(--paper);
  padding:var(--band) 0;
}
.note{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(11rem,17rem);
  gap:1.4rem;align-items:center;
  background:var(--paper);color:var(--ink);
  border-radius:var(--r);padding:1.35rem;
  box-shadow:var(--lift);
  transition:transform var(--quick) var(--ease),box-shadow var(--quick) var(--ease);
}
.note:hover{transform:translateY(-4px);box-shadow:0 2px 6px rgba(36,48,24,.08),0 22px 48px rgba(36,48,24,.16)}
.note--lead{grid-template-columns:minmax(0,1.2fr) minmax(14rem,22rem);padding:1.55rem 1.5rem}
.note-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.15rem;margin-top:1.15rem}
.note-pair .note{grid-template-columns:1fr;align-items:start}
.note-pair .note__well{order:-1;aspect-ratio:16/10;align-self:auto}
.note__copy p + p{margin-top:.75rem;color:var(--mute)}
.note__copy h3{margin:.15rem 0 .7rem}
.note__well{
  position:relative;overflow:hidden;border-radius:var(--well);
  aspect-ratio:1;min-height:0;align-self:stretch;
}
.note__well img{width:100%;height:100%;object-fit:cover;max-width:none}

.about{padding:var(--band) 0;background:var(--paper)}
.about__in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.about__fig{position:relative;overflow:hidden;border-radius:var(--r);min-width:0}
.about__fig img{width:100%;height:100%;min-height:22rem;object-fit:cover;max-width:none}
.about__copy p + p{margin-top:1rem;color:var(--mute)}
.about__copy h2{margin-bottom:1rem}

.how{
  background:var(--ink) var(--grain);
  background-blend-mode:multiply;
  color:var(--paper);
  padding:var(--band) 0;
}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.steps li{
  background:rgba(243,240,230,.06);
  border-radius:var(--r);padding:1.35rem 1.3rem 1.5rem;
}
.steps b{display:block;color:var(--brass);font-size:.72rem;letter-spacing:.15em;margin-bottom:.7rem}
.steps h3{margin-bottom:.55rem;color:var(--paper)}
.steps p{color:rgba(243,240,230,.78)}

.faq{padding:var(--band) 0;background:var(--paper)}
.faq__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.faq__list details{border-bottom:1px solid rgba(36,48,24,.12)}
.faq__list summary{
  list-style:none;cursor:pointer;min-height:56px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:700;letter-spacing:-.02em;padding:1rem 0;
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"+";color:var(--brass-deep);font-size:1.3rem;flex:none}
.faq__list details[open] summary::after{content:"–"}
.faq__list details div{padding:0 0 1.1rem;color:var(--mute)}

.cta{
  background:var(--ink) var(--grain);
  background-blend-mode:multiply;
  color:var(--paper);
  padding:var(--band) 0;
}
.cta__in{max-width:40rem}
.cta p{margin:1rem 0 1.4rem;color:rgba(243,240,230,.78)}
.cta__tel{
  display:inline-block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;
  font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:-.03em;line-height:.95;
  color:var(--brass);border-bottom:3px solid var(--brass);
}

.contact{padding:var(--band) 0;background:var(--paper)}
.contact__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
.contact__lede{margin:1rem 0 1.1rem;color:var(--mute)}
.contact__tel{
  display:inline-block;font-family:"Plus Jakarta Sans",system-ui,sans-serif;font-weight:800;
  font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.03em;margin-bottom:1.4rem;
  border-bottom:2px solid var(--ink);
}
.nap{display:grid;gap:1rem}
.nap li{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.8rem;align-items:start}
.nap span{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--brass-deep);padding-top:.25rem}
.form{
  background:var(--paper);border-radius:var(--r);box-shadow:var(--lift);
  padding:1.5rem 1.4rem 1.6rem;display:grid;gap:.45rem;
}
.form h3{margin-bottom:.5rem}
.form label{font-size:.78rem;font-weight:700;margin-top:.45rem}
.form input,.form select,.form textarea{
  width:100%;min-height:48px;border:0;border-radius:var(--well);
  background:#E8E4D6;color:var(--ink);padding:.7rem .85rem;font-size:16px;
}
.form textarea{min-height:110px;resize:vertical}
.form .btn{margin-top:.7rem}
.form__note{color:var(--mute);font-size:.88rem}

.ft{
  background:var(--ink) var(--grain);
  background-blend-mode:multiply;
  color:var(--paper);
  padding:3.2rem 0 1.4rem;
}
.ft__in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:1.6rem}
.ft__brand{display:flex;align-items:center;gap:.7rem;font-weight:700;margin-bottom:.7rem}
.ft__brand img{height:52px;width:auto;background:transparent;border-radius:0}
.ft h3{color:var(--brass);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:.7rem;font-family:"Manrope",system-ui,sans-serif}
.ft a{border-bottom:1px solid transparent}
.ft a:hover{border-bottom-color:var(--brass)}
.ft p,.ft li{color:rgba(243,240,230,.78)}
.ft li + li{margin-top:.4rem}
.ft__base{margin-top:2.2rem;padding-top:1.2rem;border-top:1px solid rgba(243,240,230,.12);display:grid;gap:.4rem}
.ft__fine{font-size:.85rem}

.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;grid-template-columns:1fr 1fr;padding-bottom:env(safe-area-inset-bottom,0px)}
.dock a{display:flex;align-items:center;justify-content:center;min-height:58px;font-weight:700}
.dock__call{background:var(--brass);color:var(--ink)}
.dock__quote{background:var(--ink);color:var(--paper)}

@keyframes hdrFill{
  from{background:transparent;box-shadow:none}
  to{background:var(--ink);box-shadow:0 10px 28px rgba(36,48,24,.2)}
}
@keyframes riseIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}
@keyframes softFloat{
  0%{transform:translateY(6px)}
  55%{transform:translateY(-5px)}
  100%{transform:translateY(0)}
}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .rv,.hero__facts li,.note,.about__copy,.about__fig,.steps li,.faq__list details,.contact__in>div,.form{
      animation:riseIn var(--standard) var(--ease) both;
      animation-timeline:view();
      animation-range:entry 8% entry 60%;
    }
    .rv--2{animation-delay:40ms}
    .rv--3{animation-delay:80ms}
    .rv--4{animation-delay:120ms}
    .rv--5{animation-delay:160ms}
    .note,.about__copy,.about__fig,.form{
      animation-range:cover 0% cover 16%;
    }
    .hero__facts li:nth-child(2),.steps li:nth-child(2){animation-range:entry 15% entry 70%}
    .hero__facts li:nth-child(3),.steps li:nth-child(3){animation-range:entry 20% entry 75%}
    .hero__facts li:nth-child(4){animation-range:entry 25% entry 80%}
  }
}

@media (max-width:980px){
  .nav{display:none}
  .m-nav{display:block}
  .hero{
    grid-template-columns:1fr;
    min-height:0;
  }
  .hero__still{order:-1}
  .hero__copy{order:1;padding:clamp(1.4rem,4vw,2rem) var(--gut) 1.25rem}
  .hero__still img{min-height:clamp(16rem,44vh,24rem)}
  .hero__facts{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    flex-wrap:unset;margin-top:1rem;
  }
  .hero__facts li{padding:.15rem 0 .15rem .85rem}
  .hero__facts li:nth-child(odd){padding-left:0;border-left:0}
  .hero__facts li:nth-child(even){padding-right:0}
  .hero__facts li:nth-child(n+3){padding-top:.75rem;margin-top:.65rem;border-top:1px solid rgba(243,240,230,.12)}
  .note,.note--lead{grid-template-columns:minmax(0,1fr);padding:1.1rem}
  .note-pair{grid-template-columns:1fr}
  .note__well{order:-1;aspect-ratio:16/10;min-height:11rem}
  .about__in,.faq__in,.contact__in{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .ft__in{grid-template-columns:1fr 1fr}
  .about__fig img{min-height:16rem}
  .faq__list summary{align-items:flex-start;padding:.95rem 0}
  .cta__tel,.contact__tel{overflow-wrap:anywhere}
}

@media (max-width:640px){
  :root{--dock-h:58px;--hdr-h:96px;--band:3.1rem;--gut:1.15rem}
  body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom,0px))}
  .dock{display:grid}
  .brand{gap:.6rem}
  .brand img{height:5.5rem}
  .brand span{max-width:calc(100vw - 8.2rem);font-size:1rem}
  .nw{white-space:normal}
  h1{font-size:clamp(1.85rem,8.6vw,2.25rem);line-height:1.02;max-width:none}
  h2{font-size:clamp(1.45rem,6.6vw,1.85rem);line-height:1.08}
  .lede{font-size:1rem;margin:.7rem 0 1rem;max-width:none}
  .lede__more{display:none}
  .hero__cta .btn--paper{display:none}
  .hero__cta .btn{flex:1 1 auto}
  .hero__still img{min-height:clamp(11.5rem,32vh,15.5rem)}
  .note__copy p + p{margin-top:.55rem}
  .hero__facts{margin-top:.9rem}
  .hero__facts b{font-size:.92rem}
  .ft{padding:2.4rem 0 calc(1.6rem + var(--dock-h) + env(safe-area-inset-bottom,0px))}
  .ft__in{grid-template-columns:1fr}
  .nap li{grid-template-columns:1fr;gap:.2rem}
  .form{padding:1.2rem 1.1rem 1.3rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
}