:root{
  --paper:#FDFBF4; --paper2:#F5F2E7; --wash:#EDF2EC;
  --green:#006633; --green-d:#00461f; --green-pale:#C9DDCE;
  --ink:#1B1D29; --grey:#6C7078; --yellow:#FFE700; --line:#DFDCCB;
  --display:"Anton",Impact,sans-serif;
  --body:"Montserrat",ui-sans-serif,system-ui,sans-serif;
  --arch:50% 50% 5px 5px / 34% 34% 5px 5px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 1.5rem;position:relative;z-index:2}
.narrow{max-width:820px}

/* ---------- header: flush with the page, firms up once you move ---------- */
header{position:sticky;top:0;z-index:60;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .32s ease,border-color .32s ease,box-shadow .32s ease}
header.scrolled{background:rgba(253,251,244,.94);backdrop-filter:blur(10px);
  border-bottom-color:var(--line);box-shadow:0 4px 24px rgba(27,29,41,.07)}
.hrow{display:flex;align-items:center;gap:.85rem;min-height:76px;flex-wrap:wrap}
/* No badge here. At this size its interior hairline type is illegible and read
   as a smudge rather than a mark. The wordmark reads at any size. */
.brand{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;order:1}
.wordmark{font:400 1.24rem/1 var(--display);letter-spacing:.055em;
  text-transform:uppercase;color:var(--green);white-space:nowrap;
  transition:color .22s ease}
.brand:hover .wordmark{color:var(--green-d)}
.wordmark small{display:block;font:600 .55rem/1 var(--body);letter-spacing:.26em;
  color:var(--grey);margin-top:.36rem}
nav{margin-left:auto;display:flex;gap:1.75rem;order:2}
nav a{position:relative;font:600 .76rem/1 var(--body);letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;padding:.55rem .1rem .6rem}
nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease)}
nav a:hover:after{transform:scaleX(1)}
nav a[aria-current=page]:after{background:var(--yellow);transform:scaleX(1)}
.callbtn{order:3;font:600 .74rem/1 var(--body);letter-spacing:.11em;
  text-transform:uppercase;background:var(--green);color:var(--paper);
  padding:.8rem 1.2rem;border-radius:2px;text-decoration:none;margin-left:1.5rem}
@media(max-width:900px){
  .hrow{min-height:0;padding-top:.7rem;row-gap:.2rem}
  .callbtn{margin-left:auto}
  nav{order:4;flex:0 0 100%;margin:0;gap:1.4rem;overflow-x:auto;padding:.55rem 0 .7rem}
  nav::-webkit-scrollbar{display:none}
  nav a{white-space:nowrap;font-size:.7rem}
  .wordmark{font-size:1.06rem}
}

/* ---------- their two illustrations, in the side gutters ---------- */
/* Both are whole compositions off their menu band, nothing severed. A rail
   spans the section's full height in the outer margin, and the drawing is
   sticky inside it, so it parks on screen while you scroll that section and
   leaves with it. Costs zero vertical space in the reading column. */
.sideart-rail{position:absolute;top:0;bottom:0;width:272px;z-index:0;
  pointer-events:none;user-select:none}
.sideart-rail.l{left:1.4rem}
.sideart-rail.r{right:1.4rem}
.sideart{position:sticky;top:42vh;width:100%;aspect-ratio:3/1;opacity:.38}
@media(max-width:1499px){.sideart-rail{display:none}}

/* ---------- hero ---------- */
.hero{background:var(--paper);text-align:center;position:relative;overflow:hidden;
  min-height:calc(100vh - 76px);min-height:calc(100svh - 76px);
  display:flex;align-items:center;padding:1.6rem 0}
.hero .wrap{width:100%}
.hero h1{margin:0}
/* Clamped against viewport HEIGHT as well as width so the whole hero always
   fits one screen. It overflowed before and cut the logo off. */
.crest{width:min(300px,31vh,58vw);margin:0 auto;display:block}
@media(max-width:900px){
  .hero{min-height:calc(100svh - 132px)}
  .crest{width:min(250px,27vh,62vw)}
}
h1{font:400 clamp(2.4rem,7vw,4.4rem)/.92 var(--display);letter-spacing:.008em;
  text-transform:uppercase;margin:.2rem 0 0;color:var(--ink)}
.statement{font:400 clamp(1.15rem,2.9vw,1.85rem)/1.15 var(--display);
  letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  margin:1.5rem auto 0;max-width:24ch}
.statement em{font-style:normal;color:var(--green);display:block}
.rule-sub{display:flex;align-items:center;justify-content:center;gap:1rem;
  margin:1.05rem auto 0;max-width:520px}
.rule-sub:before,.rule-sub:after{content:"";height:1.5px;flex:1;
  background:var(--green);opacity:.5}
.rule-sub span{font:600 .74rem/1 var(--body);letter-spacing:.3em;
  text-transform:uppercase;color:var(--green);white-space:nowrap}
.stars{margin:1.15rem 0 0;font:600 .86rem var(--body);color:var(--grey)}
.stars b{color:var(--green)}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center;margin:1.7rem 0 0}
.cta a{font:600 .78rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  padding:.98rem 1.6rem;text-decoration:none;border-radius:2px}
.cta .p{background:var(--green);color:var(--paper)}
.cta .s{border:1.5px solid var(--green);color:var(--green);background:transparent}
.cta .s:hover{background:var(--wash)}

.cta a,.callbtn,button.send,.dirs a{
  transition:transform .22s var(--ease),box-shadow .22s ease,
             background .22s ease,color .22s ease}
.cta a:hover,.callbtn:hover,button.send:hover,.dirs a:hover{
  transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,70,31,.20)}
.cta .p:hover,.callbtn:hover,button.send:hover{background:var(--green-d)}

/* ---------- inner page banner ---------- */
/* Compact. With three photographs inside it the menu banner was taller than
   the viewport, so the menu itself started off screen. */
.pbanner{background:var(--wash);padding:5.2rem 0 2.6rem;text-align:center;
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pbanner h1{font-size:clamp(2.1rem,6vw,3.6rem)}
.pbanner p{max-width:56ch;margin:1rem auto 0;color:#4A4E57}

/* ---------- arch frames, from their windows ---------- */
.arch{border-radius:var(--arch);overflow:hidden;background:var(--paper2)}
.arch img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .65s var(--ease)}
.arch:hover img{transform:scale(1.055)}
.archrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1.5rem;align-items:end}
.archrow .arch{aspect-ratio:3/4.1}
.archrow .arch:nth-child(2){aspect-ratio:3/4.7}

/* ---------- sections ---------- */
/* clip, not hidden: overflow:hidden makes a scroll container and would stop
   the sticky side art from sticking. clip still clips but does not. */
section{padding:4.6rem 0;position:relative;overflow:hidden;overflow:clip}
section.alt{background:var(--paper2)}
.sechead{display:flex;align-items:center;gap:1.25rem;margin:0 0 1.5rem}
.sechead h2{font:400 clamp(1.5rem,3.6vw,2.2rem)/1 var(--display);
  letter-spacing:.025em;text-transform:uppercase;color:var(--green);
  margin:0;white-space:nowrap}
.sechead:after{content:"";height:2px;flex:1;background:var(--green);opacity:.85}
.lead{max-width:62ch;color:#4A4E57;margin:0 0 2.1rem}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:1.7rem}
.fact{background:var(--paper);border:1px solid var(--line);
  border-top:4px solid var(--yellow);padding:1.3rem 1.35rem 1.45rem}
.fact h3{font:400 1.16rem/1.12 var(--display);letter-spacing:.035em;
  text-transform:uppercase;margin:0 0 .5rem}
.fact p{margin:0;color:var(--grey);font-size:.93rem}
.fact,.card,.loccard{transition:transform .3s var(--ease),box-shadow .3s ease}
.fact:hover,.card:hover,.loccard:hover{transform:translateY(-6px);
  box-shadow:0 16px 34px rgba(27,29,41,.11)}

.feat{display:grid;grid-template-columns:1fr 1.15fr;gap:2.8rem;align-items:center;
  margin-bottom:3.6rem}
.feat:nth-child(even) .fimg{order:2}
.feat .arch{aspect-ratio:4/4.6}
.feat h3{font:400 1.62rem/1.05 var(--display);letter-spacing:.03em;
  text-transform:uppercase;color:var(--green);margin:0 0 .8rem}
.feat p{margin:0 0 .8rem;color:#4A4E57}
@media(max-width:800px){.feat{grid-template-columns:1fr;gap:1.5rem}
  .feat:nth-child(even) .fimg{order:0}}

/* ---------- menu ---------- */
.mtools{position:sticky;top:76px;z-index:40;background:var(--paper);
  padding:1.15rem 0 1rem;border-bottom:1px solid var(--line)}
@media(max-width:900px){.mtools{position:static}}

/* One row, search left, filters right, both stretched to the same height.
   min-width:0 on both matters: without it a flex item refuses to shrink below
   its content width, and .filters stayed 470px wide inside a 375px phone,
   which is what pushed the whole page sideways. */
.toolrow{display:flex;align-items:stretch;justify-content:space-between;
  gap:.9rem;flex-wrap:wrap}
.search{display:flex;align-items:center;gap:.55rem;border:1.5px solid var(--line);
  background:var(--paper);padding:0 .95rem;flex:1 1 280px;max-width:440px;
  min-width:0;margin:0;
  transition:border-color .22s ease,box-shadow .22s ease}
.search:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,102,51,.10)}
/* The field inherited padding from the generic input rule, which made it 71px
   tall against 46px tabs. That dead space read as a second nested box. */
.search input{border:0;outline:0;background:transparent;border-radius:0;padding:0;
  font:400 .92rem var(--body);color:var(--ink);width:100%;
  appearance:none;-webkit-appearance:none}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
/* The generic input:focus rule further down adds its own ring. Combined with
   .search:focus-within on the wrapper that drew TWO nested boxes whenever the
   field had focus, which is the state it gets screenshotted in. */
.search input:focus,.search input:focus-visible{box-shadow:none;border:0;outline:0}
.filters{flex:0 1 auto;min-width:0;align-items:stretch}
.search svg{flex:0 0 auto;stroke:var(--green)}
.filters{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:flex-end}
/* The notch is a clip-path, and clip-path cuts the border away with it, so the
   chevron had no outline and no hover response. Two stacked notched layers
   instead: outer is the outline colour, inner is inset by 1.5px. */
.tab{--notch:9px;border:0;padding:0;cursor:pointer;background:var(--line);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - var(--notch)),0 100%);
  transition:background .22s ease,transform .22s var(--ease)}
.tab span{display:block;background:var(--paper);color:var(--ink);
  font:400 .8rem/1 var(--display);letter-spacing:.07em;text-transform:uppercase;
  padding:.82rem 1.22rem 1.18rem;margin:1.5px 1.5px 0;
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - var(--notch)),0 100%);
  transition:background .22s ease,color .22s ease}
.tab:hover{background:var(--green);transform:translateY(-2px)}
.tab:hover span{background:var(--wash)}
.tab[aria-pressed=true]{background:var(--green-d)}
.tab[aria-pressed=true] span{background:var(--green);color:var(--paper)}
.tab:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.count{font:600 .8rem var(--body);color:var(--grey);margin:1.5rem 0 2rem}
.msec{margin-bottom:3rem}
.msec h3{font:400 1.24rem/1 var(--display);letter-spacing:.05em;
  text-transform:uppercase;color:var(--green);margin:0 0 .35rem;
  display:flex;align-items:center;gap:1rem}
.msec h3:after{content:"";height:1.5px;flex:1;background:var(--green);opacity:.5}
.item{display:grid;grid-template-columns:1fr auto;gap:.3rem 1.5rem;
  padding:1rem .9rem;margin:0 -.9rem;border-bottom:1px solid var(--line);
  transition:background .2s ease}
.item:hover{background:rgba(0,102,51,.05)}
.item[hidden],.msec[hidden]{display:none}
.iname{font:700 .98rem/1.35 var(--body);margin:0}
.leaf{display:inline-block;font:700 .6rem/1 var(--body);letter-spacing:.09em;
  color:var(--green);border:1px solid var(--green-pale);background:var(--wash);
  padding:.24rem .36rem;margin-left:.5rem;vertical-align:.08em}
.leaf.j{color:#8a6d00;border-color:#E4D89A;background:#FBF6DF}
.idesc{grid-column:1;font:italic 400 .875rem/1.55 var(--body);color:var(--grey);
  margin:.25rem 0 0;max-width:64ch}
.iprice{font:700 .98rem/1.35 var(--body);text-align:right;
  font-variant-numeric:tabular-nums}
.iprice:before{content:"\20B9"}
.empty{color:var(--grey);font-style:italic;padding:2.5rem 0}
.mdiv{text-align:center;margin:1.2rem 0 2.6rem}
.mdiv .lbl{display:flex;align-items:center;gap:1.2rem;
  font:400 1.05rem/1 var(--display);letter-spacing:.11em;text-transform:uppercase;
  color:var(--green)}
.mdiv .lbl:before,.mdiv .lbl:after{content:"";height:1.5px;flex:1;
  background:var(--green);opacity:.4}

/* ---------- rail ---------- */
.rail{display:flex;gap:1rem;overflow-x:auto;padding:.2rem 0 1.1rem;
  scroll-snap-type:x mandatory}
.rail .arch{flex:0 0 auto;width:250px;aspect-ratio:3/4;scroll-snap-align:start}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--green-pale);border-radius:3px}

/* ---------- visit ---------- */
.locgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2rem}
.loccard{background:var(--paper);border:1px solid var(--line)}
.loccard .arch{aspect-ratio:4/3;border-radius:5px}
.loccard .body{padding:1.25rem 1.35rem 1.5rem}
.loccard h3{font:400 1.24rem/1 var(--display);letter-spacing:.045em;
  text-transform:uppercase;color:var(--green);margin:0 0 .6rem}
.loccard p{margin:0 0 .7rem;color:var(--grey);font-size:.93rem}
.loccard a.tel{font:700 .95rem var(--body);color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--yellow);transition:color .2s ease}
.loccard a.tel:hover{color:var(--green)}
.mapwrap{border:1px solid var(--line);overflow:hidden;background:var(--paper2)}
.mapwrap iframe{display:block;width:100%;height:390px;border:0;filter:saturate(.9)}
/* The keyless maps embed is an undocumented endpoint and can silently fail, so
   directions never depend on it. These links always work. */
.dirs{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem}
.dirs a{font:600 .74rem/1 var(--body);letter-spacing:.11em;text-transform:uppercase;
  border:1.5px solid var(--green);color:var(--green);padding:.85rem 1.2rem;
  text-decoration:none;border-radius:2px}
.dirs a:hover{background:var(--green);color:var(--paper)}
form{display:grid;gap:1rem;max-width:620px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:620px){.f2{grid-template-columns:1fr}}
label{font:600 .7rem/1 var(--body);letter-spacing:.13em;text-transform:uppercase;
  color:var(--green);display:block;margin-bottom:.42rem}
input,textarea,select{font:400 .95rem var(--body);color:var(--ink);width:100%;
  background:var(--paper);border:1.5px solid var(--line);padding:.8rem .9rem;
  border-radius:2px;transition:border-color .2s ease,box-shadow .2s ease}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,102,51,.10)}
textarea{min-height:132px;resize:vertical}
button.send{font:600 .78rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;
  background:var(--green);color:var(--paper);border:0;padding:1rem 1.7rem;
  cursor:pointer;border-radius:2px;justify-self:start}
.fnote{font-size:.82rem;color:var(--grey);margin:0}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#D8DBD4;padding:3.2rem 0 2.4rem;
  position:relative;overflow:hidden}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.2rem}
@media(max-width:760px){.fgrid{grid-template-columns:1fr;gap:1.7rem}}
footer h4{font:400 1.06rem/1 var(--display);letter-spacing:.05em;
  text-transform:uppercase;color:var(--yellow);margin:0 0 .8rem}
footer a{color:#EDEFE9;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .2s ease,color .2s ease}
footer a:hover{border-bottom-color:var(--yellow);color:#fff}
footer p{margin:0 0 .5rem;font-size:.9rem}
.fmark{font:400 1.55rem/1 var(--display);letter-spacing:.05em;
  text-transform:uppercase;color:var(--paper);margin:0 0 .95rem}
.fmark small{display:block;font:600 .58rem/1 var(--body);letter-spacing:.26em;
  color:var(--yellow);margin-top:.55rem}
.disclaim{border-top:1px solid rgba(255,255,255,.16);margin-top:2.4rem;
  padding-top:1.3rem;font-size:.8rem;color:#9AA096;max-width:74ch}
.todo{display:inline-block;font:600 .66rem/1 var(--body);letter-spacing:.1em;
  text-transform:uppercase;background:rgba(255,231,0,.13);color:var(--yellow);
  border:1px dashed rgba(255,231,0,.45);padding:.36rem .55rem}

/* These must live at the END of the sheet. Placed earlier they sat above the
   .search base rule and lost to it, and flex-basis 280px then became a 280px
   TALL box once the row turned into a column. */
@media(max-width:860px){
  .toolrow{flex-direction:column;align-items:stretch;gap:.85rem}
  .search{flex:0 0 auto;height:46px;max-width:none}
  .filters{justify-content:flex-start}
}
@media(max-width:430px){
  .tab span{padding:.72rem .8rem 1.05rem;font-size:.73rem;letter-spacing:.04em}
}

@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .arch:hover img{transform:none}
}