:root{
  --haze:#eaf0e2;
  --haze-2:#d9e2cf;
  --stock:#fdfdf8;
  --loam:#231a12;
  --loam-2:#4f4234;
  --green:#1f5a2a;
  --green-deep:#163f1e;
  --green-ink:#d3e6c8;
  --sprout:#8fbf45;
  --straw:#e2b545;
  --straw-2:#f3d98a;
  --brass:#a87b22;
  --lentil:#6b4f9a;
  --barn:#8a2c1f;
  --slab:"Alfa Slab One", Rockwell, "Roboto Slab", serif;
  --text:"Public Sans", "Segoe UI", system-ui, sans-serif;
  --type:"Courier Prime", "Courier New", monospace;
  --gutter:clamp(16px, 4vw, 56px);
  --max:1240px;
  --cut:14px;
  --pad:clamp(48px, 6vw, 88px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--green) var(--haze-2)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--haze);color:var(--loam);font:400 1.0625rem/1.6 var(--text);-webkit-font-smoothing:antialiased;caret-color:var(--green)}
::selection{background:var(--straw);color:var(--loam)}
img,svg{display:block;max-width:100%}
a{color:var(--green);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--loam);outline-offset:3px}
.dark :focus-visible{outline-color:var(--straw-2)}
[id]{scroll-margin-top:1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--slab);font-weight:400;line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
h2{font-size:clamp(2rem,4.2vw,3.3rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
p{margin:0 0 1em;max-width:66ch}
.lede{font-size:1.15rem;color:var(--loam-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* the tag: chamfered corners, punched eyelet with a brass ring */
.tag{background:var(--stock);color:var(--loam);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%,0 var(--cut))}
.hang{filter:drop-shadow(0 14px 16px rgba(35,26,18,.18)) drop-shadow(0 2px 2px rgba(35,26,18,.12))}
.eyelet{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--eyelet-hole,var(--haze));box-shadow:0 0 0 4px var(--brass),inset 0 1px 2px rgba(0,0,0,.35)}
.eyelet.sm{width:16px;height:16px;box-shadow:0 0 0 3px var(--brass),inset 0 1px 2px rgba(0,0,0,.35)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:700 1.05rem/1 var(--text);padding:1em 1.4em;min-height:48px;border:2px solid transparent;border-radius:4px;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,transform .15s,box-shadow .2s}
.btn:active{transform:translateY(1px)}
.btn-go{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 10px 18px -12px rgba(22,63,30,.9)}
.btn-go:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn-line{background:transparent;border-color:var(--loam);color:var(--loam)}
.btn-line:hover{background:var(--loam);color:var(--stock)}
.btn-straw{background:var(--straw);border-color:var(--straw);color:var(--loam)}
.btn-straw:hover{background:var(--straw-2);border-color:var(--straw-2)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.link{display:inline-flex;align-items:center;min-height:44px;font:600 1rem/1 var(--text);color:var(--loam)}

/* header, in the flow above the painted view */
.top{position:relative;z-index:6;background:var(--stock);border-bottom:1.5px solid rgba(35,26,18,.12)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:.5rem 1rem;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:.7rem;min-height:44px;text-decoration:none;color:var(--loam)}
.brand img{width:40px;height:40px}
.brand b{font:400 1.3rem/1 var(--slab);letter-spacing:-.005em}
.nav{display:flex;align-items:center;gap:.6rem}
.links{display:flex;align-items:center;gap:.1rem}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 .7rem;border-radius:4px;font:600 .98rem/1 var(--text);color:var(--loam);text-decoration:none;white-space:nowrap}
.links a:hover{color:var(--green);background:var(--haze)}
.nav .btn{padding:.7em 1.1em;font-size:.95rem;min-height:44px}

/* hero: the painted Palouse, a hanging tag and the bag */
.hero{position:relative;min-height:min(calc(100svh - 66px),780px);display:grid;align-items:center;overflow:hidden;background:var(--k2)}
.view{position:absolute;inset:0;z-index:0}
.view svg{width:100%;height:100%}
.fld{transition:fill .9s cubic-bezier(.16,1,.3,1)}
.sky-a,.sky-b{transition:stop-color .9s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.fld,.sky-a,.sky-b{transition:none}}
.hero-copy{position:relative;z-index:2;padding:clamp(72px,7vw,92px) 0 clamp(40px,5vw,64px)}
.hero-copy .wrap{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.hero-hang{position:relative}
.hero-hang::before{content:"";position:absolute;left:50%;bottom:calc(100% - 26px);width:2px;height:96px;background:linear-gradient(#b99a6b,#8b6f45);transform:rotate(-4deg);transform-origin:bottom}
.hero-tag{position:relative;padding:2.8rem clamp(22px,3vw,40px) 1.7rem}
.hero-tag .eyelet{top:14px;left:50%;margin-left:-11px;--eyelet-hole:#c6d9e6}
.hero h1{font-size:clamp(2.05rem,3.3vw,3.1rem);line-height:1}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .lede{margin:1rem 0 1.1rem;color:var(--loam);font-size:clamp(1rem,1.2vw,1.1rem);max-width:46ch}
.offer{margin:0 0 1.2rem;padding:.75rem .95rem;background:var(--straw-2);border-radius:3px;font:700 1.08rem/1.4 var(--text);max-width:none}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1.4rem}
.hero-bag{position:relative;z-index:2;justify-self:center;width:min(100%,400px);filter:drop-shadow(0 18px 18px rgba(35,26,18,.22))}
.hero-bag .t-big{font:400 32px var(--slab);fill:var(--loam)}
.hero-bag .t-type{font:700 12.5px var(--type);fill:var(--loam-2)}

/* how it works: three tags on a line, then the price and the promises */
.how{padding:var(--pad) 0}
.how-head{max-width:62ch;margin-bottom:1.4rem}
.how-head p{margin:.8rem 0 0}
.steps{list-style:none;margin:0;padding:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px 22px;position:relative}
.steps::before{content:"";position:absolute;left:-10px;right:-10px;top:0;height:2px;background:#8b6f45}
.step{position:relative;display:flex;filter:drop-shadow(0 10px 12px rgba(35,26,18,.14))}
.step::before{content:"";position:absolute;left:50%;top:-26px;width:2px;height:34px;background:#b99a6b;z-index:1}
.step .tag{position:relative;display:flex;flex-direction:column;gap:.5rem;width:100%;padding:2.2rem 1.3rem 1.3rem}
.step .eyelet{top:10px;left:50%;margin-left:-8px}
.step h3{font-size:1.45rem}
.step p{margin:0;font-size:1rem;color:var(--loam-2)}
.price{margin-top:clamp(2rem,4vw,3rem);background:var(--straw);border-radius:4px;padding:clamp(1.5rem,3vw,2.4rem) clamp(1.3rem,3vw,2.4rem);display:grid;grid-template-columns:1fr 1.4fr;gap:1.4rem 3rem;align-items:center;position:relative;overflow:hidden}
.price::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(172deg,transparent 0 22px,rgba(35,26,18,.05) 22px 24px);pointer-events:none}
.price>*{position:relative;z-index:1}
.price h3{font-size:clamp(1.9rem,3.2vw,2.6rem)}
.price p{margin:.7rem 0 0;font-size:1.05rem}
.promises{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.promises li{display:grid;grid-template-columns:22px 1fr;gap:.6rem;align-items:start;padding:.8rem .9rem;background:rgba(253,253,248,.72);border-radius:3px}
.promises .ic{color:var(--green);margin-top:.1rem}
.promises b{font:700 1rem/1.3 var(--text)}
.promises span{display:block;font:400 .95rem/1.4 var(--type);color:var(--loam-2);margin-top:.15rem}

/* roasters on the fence */
.fence-sec{padding:0 0 var(--pad);overflow:hidden}
.fence-head{display:grid;grid-template-columns:1fr 1fr;gap:1rem 4rem;align-items:end;margin-bottom:1.2rem}
.fence-head .lede{margin:0}
.wire{position:relative;padding:34px 0 18px;overflow-x:auto;scrollbar-width:none}
.wire::-webkit-scrollbar{display:none}
.wire::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:repeating-linear-gradient(90deg,var(--loam-2) 0 22px,transparent 22px 24px,var(--loam-2) 24px 26px,transparent 26px 28px)}
.fence{display:flex;gap:24px;width:max-content;list-style:none;margin:0;padding:0 0 0 24px}
.lt{flex:none;position:relative;filter:drop-shadow(0 10px 10px rgba(35,26,18,.16))}
.lt::before{content:"";position:absolute;left:50%;top:-16px;width:2px;height:24px;background:#b99a6b}
.lt a{display:grid;grid-template-rows:56px 2.4em auto;gap:.35rem;width:200px;padding:22px 16px 14px;background:var(--stock);text-decoration:none;color:var(--loam);clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%,0 var(--cut));transition:transform .3s cubic-bezier(.16,1,.3,1)}
.lt a:hover,.lt a:focus-visible{transform:rotate(-2deg) translateY(2px)}
.lt a:focus-visible{outline:none;background:var(--straw-2)}
.lt img{width:100%;height:56px;object-fit:contain}
.lt[data-tone=white] img{filter:invert(1) grayscale(1)}
.lt[data-tone=light] img{filter:grayscale(1) brightness(.45) contrast(1.6)}
.lt b{font:700 1rem/1.2 var(--text)}
.lt small{font:400 .88rem/1.2 var(--type);color:var(--loam-2)}
.fence-note{font-size:1rem;color:var(--loam-2);margin-top:.6rem}
@media (prefers-reduced-motion:no-preference){
  .fence{animation:drift 90s linear infinite}
  .wire:hover .fence,.wire:focus-within .fence,.wire.held .fence{animation-play-state:paused}
  @keyframes drift{to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .fence .dupe{display:none}
}

/* the plan tag */
.plans{background:var(--green);color:#fff;padding:var(--pad) 0}
.plans h2{margin-bottom:.6rem}
.plans .lede{color:var(--green-ink)}
.plan-tag{margin-top:2rem;display:grid;grid-template-columns:1.35fr 1fr;position:relative;--cut:22px;filter:drop-shadow(0 30px 34px rgba(0,0,0,.35))}
.plan-main{background:var(--stock);color:var(--loam);clip-path:polygon(var(--cut) 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));padding:0 0 clamp(22px,3vw,36px);display:grid;gap:1.2rem;position:relative}
.plan-main .eyelet{left:26px;top:50%;margin-top:-11px;--eyelet-hole:var(--green)}
.plan-bar{display:flex;justify-content:space-between;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;padding:1rem clamp(22px,3vw,36px) .9rem clamp(64px,6vw,80px);border-bottom:2px solid var(--loam)}
.plan-bar b{font:400 1.25rem/1 var(--slab)}
.plan-bar span{font:700 .95rem/1 var(--type)}
.plan-main>*:not(.plan-bar):not(.eyelet){padding:0 clamp(22px,3vw,36px) 0 clamp(64px,6vw,80px)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{font:700 .78rem/1 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--loam-2);margin-bottom:.7rem;padding:0}
.opts{display:grid;gap:.5rem}
.opts.row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.roasts{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.chips-row{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
.opt{position:relative;display:flex}
.opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opt label{display:flex;align-items:center;gap:.75rem;width:100%;min-height:52px;padding:.65rem .85rem;border:2px solid var(--loam);border-radius:3px;background:var(--stock);cursor:pointer;transition:background .15s,color .15s}
.opt label b{display:block;font:700 1rem/1.2 var(--text)}
.opt label small{display:block;font:400 .88rem/1.3 var(--type);color:var(--loam-2)}
.opt label .price-tag{margin-left:auto;font:700 1.05rem/1 var(--type);white-space:nowrap}
.opt input:hover+label{background:#f1f4e9}
.opt input:checked+label{background:var(--loam);color:var(--stock)}
.opt input:checked+label small{color:#d9d0c2}
.opt input:focus-visible+label{outline:3px solid var(--straw);outline-offset:3px;box-shadow:0 0 0 6px var(--loam)}
.bean{width:22px;height:22px;flex:none;border-radius:50%;background:var(--bean);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25);position:relative}
.bean::after{content:"";position:absolute;left:50%;top:3px;bottom:3px;width:2px;margin-left:-1px;border-radius:2px;background:rgba(255,255,255,.35);transform:rotate(18deg)}
.opt input:checked+label .bean{box-shadow:0 0 0 2px var(--stock)}
.bag2{display:grid;gap:1.3rem}
.bag2[hidden]{display:none}
.hint{margin:.7rem 0 0;font:400 1rem/1.45 var(--type);color:var(--loam-2)}
.quiz{border:2px dashed var(--loam-2);border-radius:3px;padding:0 1rem;margin-left:clamp(64px,6vw,80px)!important;margin-right:clamp(22px,3vw,36px)!important;padding-left:1rem!important;padding-right:1rem!important}
.quiz summary{font:700 1.05rem/1.3 var(--text);padding:.9rem 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.quiz summary::-webkit-details-marker{display:none}
.quiz summary::after{content:"";width:10px;height:10px;flex:none;border-right:2px solid var(--loam);border-bottom:2px solid var(--loam);transform:rotate(45deg);transition:transform .2s}
.quiz[open] summary::after{transform:rotate(225deg)}
.quiz-body{display:grid;gap:1.1rem;padding-bottom:1rem}
.quiz-ok{color:var(--green)!important;font-weight:700}
.stub{background:var(--straw-2);color:var(--loam);padding:clamp(22px,3vw,36px);display:flex;flex-direction:column;gap:1rem;border-left:2px dashed var(--loam)}
.stub h3{font-size:1.5rem}
.total{font:400 clamp(3.2rem,6vw,4.6rem)/.95 var(--slab);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.total-sub{font:400 1rem/1.3 var(--type);color:var(--loam-2)}
.first-box{margin:.6rem 0 0;font:700 1.05rem/1.35 var(--text);color:var(--green-deep)}
.summary{list-style:none;margin:0;padding:0;display:grid;gap:0}
.summary li{display:flex;justify-content:space-between;gap:1rem;padding:.45rem 0;border-bottom:1.5px solid rgba(35,26,18,.35);font-size:1rem}
.summary li span:first-child{font:700 .76rem/1.8 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--loam-2)}
.summary li span:last-child{font:400 1rem/1.4 var(--type);text-align:right}
.reserve{display:grid;gap:.6rem}
.reserve label{font:600 1rem/1.3 var(--text)}
.field{display:flex;gap:.5rem}
input[type=email]{flex:1;min-width:0;font:400 1.05rem var(--type);padding:.8rem .9rem;min-height:48px;border:2px solid var(--loam);border-radius:3px;background:var(--stock);color:var(--loam)}
input[type=email]::placeholder{color:#6b5d4d}
input[type=email][aria-invalid=true]{border-color:var(--barn);box-shadow:0 0 0 2px var(--barn)}
.form-msg{font-size:1rem;min-height:1.4em;margin:0}
.form-msg.err{color:var(--barn);font-weight:600}
.form-msg.ok{color:var(--green-deep);font-weight:600}
.fine{font-size:1rem;line-height:1.5;color:var(--loam-2);margin:0}
.terms-line{margin:0;font:400 1rem/1.45 var(--type);color:var(--loam)}
.reserve .btn{width:100%}
@media (min-width:761px){.field .btn{width:auto;flex:none}}

/* gifts: three tags on a line */
.gifts{padding:var(--pad) 0}
.gift-head{display:grid;grid-template-columns:1fr 1fr;gap:1rem 4rem;align-items:end;margin-bottom:1.6rem}
.gift-head .lede{margin:0}
.gift-rows{list-style:none;margin:0;padding:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px 22px;position:relative}
.gift-rows::before{content:"";position:absolute;left:-10px;right:-10px;top:0;height:2px;background:#8b6f45}
.gift-rows .hang{position:relative;display:flex}
.gift-rows .hang::before{content:"";position:absolute;left:50%;top:-26px;width:2px;height:34px;background:#b99a6b;z-index:1}
.gift-row{font:inherit;border:0;width:100%;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:.35rem;padding:2.2rem 1.3rem 1.3rem;color:var(--loam);transition:background .2s,transform .3s cubic-bezier(.16,1,.3,1)}
.gift-row .eyelet{top:10px;left:50%;margin-left:-8px}
.gift-row:hover{background:var(--straw-2);transform:translateY(2px) rotate(-.6deg)}
.gift-row:focus-visible{outline:none;background:var(--straw-2)}
.gift-rows .hang:has(.gift-row:focus-visible){filter:drop-shadow(0 0 0 var(--loam)) drop-shadow(0 0 2px var(--loam)) drop-shadow(0 0 1px var(--loam))}
.gift-row .n{font:400 2.6rem/.9 var(--slab)}
.gift-row .gt{font:700 1.1rem/1.25 var(--text)}
.gift-row small{font:400 .95rem/1.4 var(--type);color:var(--loam-2)}
.gift-row em{margin-top:auto;padding-top:.9rem;border-top:1.5px solid rgba(35,26,18,.3);font:700 1.35rem/1 var(--type);font-style:normal;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.gift-row em small{font-size:.88rem}
.gift-row .go{display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:.8rem;padding:.7em 1em;border:2px solid var(--loam);border-radius:4px;font:700 1rem/1 var(--text)}
.gift-row:hover .go{background:var(--loam);color:var(--stock)}
.gifts .fine{margin-top:1.2rem}

/* year one: the band repaints as you turn the year */
.year{padding:var(--pad) 0;background:var(--haze-2)}
.year .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.year h2{margin-bottom:.8rem}
.year .lede{margin:0}
.turn{margin-top:1.4rem;padding:1rem 1.2rem .8rem;background:var(--stock);border-radius:4px}
.turn label{display:block;font:700 1rem/1.3 var(--text);margin-bottom:.4rem}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(90deg,#7a5a3c,#6d7f45 20%,#e9edee 32%,#e9edee 40%,#6f9a3e 55%,#3c8a2e 70%,#d9ad3f 88%,#e3c276)}
input[type=range]::-moz-range-track{height:8px;border-radius:4px;background:linear-gradient(90deg,#7a5a3c,#6d7f45 20%,#e9edee 32%,#e9edee 40%,#6f9a3e 55%,#3c8a2e 70%,#d9ad3f 88%,#e3c276)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border-radius:50%;background:var(--stock);border:6px solid var(--brass);box-shadow:0 3px 6px rgba(0,0,0,.3)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--stock);border:6px solid var(--brass);box-shadow:0 3px 6px rgba(0,0,0,.3)}
.months{display:grid;grid-template-columns:repeat(12,1fr);margin:0;padding:0 2px;list-style:none;font:700 .72rem/1 var(--type);color:var(--loam-2);text-align:center}
.band{position:relative;height:clamp(220px,26vw,360px);border-radius:4px;overflow:hidden;background:var(--k2)}
.band svg{width:100%;height:100%}
.band-cap{position:absolute;left:14px;bottom:14px;right:14px;max-width:560px;margin:0;padding:.7rem .9rem;background:rgba(253,253,248,.94);border-radius:4px;font:400 1rem/1.45 var(--type);color:var(--loam)}
.band-cap b{font:400 1.1rem/1.2 var(--slab);display:block;margin-bottom:.15rem}

/* offices and roasters */
.for{background:var(--loam);color:#fff;padding:var(--pad) 0}
.for .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem)}
.for-col{display:flex;flex-direction:column;gap:1rem;padding-top:1.3rem;border-top:3px solid var(--straw)}
.for h3{font-size:clamp(1.8rem,3.2vw,2.5rem)}
.for p{color:#dcd2c3;margin:0}
.for ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;color:#dcd2c3;font-size:1rem}
.for ul b{color:var(--straw-2)}
.for .btn{margin-top:auto;align-self:flex-start}

/* faq */
.faq{padding:var(--pad) 0}
.faq .wrap{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(2rem,6vw,5rem)}
details.q{border-bottom:1.5px solid rgba(35,26,18,.3)}
details.q:first-of-type{border-top:3px solid var(--loam)}
details.q summary{list-style:none;cursor:pointer;padding:.9rem 0;display:flex;justify-content:space-between;gap:1rem;align-items:center;font:700 1.12rem/1.3 var(--text)}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";width:10px;height:10px;flex:none;border-right:2px solid var(--loam);border-bottom:2px solid var(--loam);transform:rotate(45deg);transition:transform .2s}
details.q[open] summary::after{transform:rotate(225deg)}
details.q summary:hover{color:var(--green)}
details.q p{color:var(--loam-2);padding-bottom:.6rem}

/* footer */
.foot{background:var(--green-deep);color:#fff;padding:clamp(48px,6vw,80px) 0 2rem}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:2rem 4rem;align-items:end}
.foot h2{font-size:clamp(1.8rem,3.6vw,2.8rem);margin-bottom:.6rem}
.foot p{color:var(--green-ink)}
.foot input[type=email]{border-color:var(--stock)}
.foot .form-msg.ok{color:#fff}
.foot .form-msg.err{color:var(--straw-2)}
.foot-base{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.25);display:grid;gap:.6rem;font-size:.85rem;line-height:1.5;color:var(--green-ink)}
.foot-base a{color:#fff}
.foot-brand{display:flex;align-items:center;gap:.6rem;color:#fff;font:400 1.1rem/1 var(--slab)}
.foot-brand img{width:32px;height:32px}

/* responsive */
@media (max-width:1080px){
  .hero-copy .wrap{grid-template-columns:minmax(0,1fr) minmax(0,.7fr)}
  .fence-head,.gift-head,.faq .wrap,.year .wrap{grid-template-columns:1fr}
  .price{grid-template-columns:1fr}
  .plan-tag{grid-template-columns:1fr}
  .plan-main{clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%,0 var(--cut))}
  .plan-main .eyelet{top:14px;left:50%;margin:0 0 0 -11px}
  .plan-bar{padding-top:3rem}
  .plan-bar,.plan-main>*:not(.plan-bar):not(.eyelet){padding-left:clamp(18px,4vw,36px)!important}
  .quiz{margin-left:clamp(18px,4vw,36px)!important;margin-right:clamp(18px,4vw,36px)!important}
  .stub{border-left:0;border-top:2px dashed var(--loam)}
}
@media (max-width:860px){
  .steps,.gift-rows{grid-template-columns:1fr}
  .steps{gap:30px}
  .for .wrap{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--pad:40px}
  .top .wrap{padding-top:6px;padding-bottom:0}
  .brand img{width:34px;height:34px}
  .brand b{font-size:1rem}
  .nav{display:contents}
  .nav .btn{order:2;padding:.6em .8em;font-size:.9rem}
  .steps{gap:24px}
  .step .tag{padding:2rem 1.1rem 1.1rem}
  .price{padding:1.2rem 1.1rem}
  .gift-rows{gap:24px}
  .gift-row{padding:2rem 1.1rem 1.1rem}
  .gift-row .n{font-size:2.2rem}
  .links{order:3;flex-basis:100%;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gutter));padding:0 calc(var(--gutter) - .7rem)}
  .links::-webkit-scrollbar{display:none}
  .hero{min-height:0}
  .hero-copy{padding:20px 0 36px}
  .hero-copy .wrap{grid-template-columns:1fr;gap:0}
  .hero-bag{order:-1;justify-self:end;width:min(52vw,230px);margin-bottom:-.6rem;margin-right:.5rem}
  .hero-hang::before{display:none}
  .hero-tag{padding:2.5rem 18px 1.3rem}
  .hero h1{font-size:clamp(1.9rem,8.2vw,2.5rem)}
  .hero .lede{font-size:1rem;margin:.8rem 0 1rem;line-height:1.5}
  .offer{font-size:1rem}
  .actions .btn{padding:.85em 1.1em;font-size:1rem}
  .promises{grid-template-columns:1fr}
  .band{height:auto}
  .band svg{height:180px}
  .band-cap{position:relative;left:auto;right:auto;bottom:auto;margin:0;border-radius:0 0 4px 4px;max-width:none}
  .foot-grid{grid-template-columns:1fr}
  .field{flex-direction:column}
  .opts.bags{grid-template-columns:1fr}
}
@media (max-width:400px){
  .brand{gap:.5rem}
  .brand b{font-size:.9rem}
  .nav .btn{padding:.6em .7em;font-size:.88rem}
}
/* small phones: all five nav links fit without scrolling */
@media (max-width:440px){.links{justify-content:space-between;padding:0 calc(var(--gutter) - .35rem)}.links a{padding:0 .3rem;font-size:.88rem}}
.facts{max-width:72ch;margin:.8rem 0 0}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:1.8rem 0 0;font-size:.95rem}
.foot-links a{color:inherit}