@font-face{font-family:"DM Sans";src:url(dm-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{--navy:#0a1928;--deep:#07131f;--ivory:#f6efe2;--white:#fffcf6;--gold:#e1b960;--border:#dcd0bb;--muted:#4c5359}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--navy);font:400 1.125rem/1.55 "DM Sans",sans-serif}
h1,h2,h3,p{margin:0 0 .75em}
h1,h2,h3{line-height:1.08}
h1{font-size:clamp(2.8rem,6.3vw,6rem);letter-spacing:-.045em}
h2{font-size:clamp(2rem,3.2vw,3.25rem);letter-spacing:-.04em}
h3{font-size:1.5rem;letter-spacing:-.02em}
a{color:inherit}
img{display:block;max-width:100%;object-fit:cover}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid #b78932;outline-offset:4px}
.wrap{width:min(90%,1240px);margin-inline:auto}
.skip{position:absolute;left:1rem;top:1rem;z-index:5;background:white;padding:.5rem;transform:translateY(-200%)}
.skip:focus{transform:none}
header{background:#fbf6eb;color:#38271d;border-bottom:1px solid #e0d2ba}
footer{color:#f6efe2;background:#39271d}
.head{min-height:90px;display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem)}
.brand{display:flex;align-items:center;gap:.75rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;text-decoration:none;margin-right:auto}
.brand img{width:77px;height:56px;object-fit:contain}
nav{display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem)}
nav a{text-decoration:none;font-size:1rem;white-space:nowrap}
nav a:hover,nav a[aria-current]{color:#84512b;text-decoration:underline;text-underline-offset:5px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;padding:.72em 1.1em;border-radius:7px;border:1px solid #6d4429;background:#6d4429;color:#fff9ee;text-decoration:none;font-weight:700;line-height:1.25}
.button:hover{background:#4f321f}
.quote{white-space:nowrap;font-size:1rem}
.menu{display:none;background:transparent;color:inherit;border:1px solid #9b795d;border-radius:5px;padding:.45em .8em}
.hero{width:min(90%,1240px);margin:clamp(1.2rem,3vw,3rem) auto 0;display:grid;grid-template-columns:1.03fr 1fr;overflow:hidden;border-radius:16px;background:#efe1c9;color:#38271d}
.hero picture{grid-column:2;grid-row:1;min-height:100%;position:relative}
.hero picture img{position:absolute;width:100%;height:100%;object-position:74% 50%}
.hero-copy{grid-column:1;grid-row:1;padding:clamp(1.8rem,5vw,5rem) clamp(1.6rem,4vw,4rem)}
.hero h1{font-size:clamp(2.6rem,4.25vw,4.65rem);margin:.25em 0 .35em}
.hero .intro{max-width:32ch;font-size:1.14rem;margin:0 0 1.45rem}
.origin{font-weight:700;color:#704b32;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.8rem 1.15rem;font-size:1rem}
.rule{display:block;background:#b88d40;width:52px;height:3px;margin-bottom:1rem}
.samples{display:grid;grid-template-columns:minmax(210px,.72fr) 1.8fr;gap:clamp(1.5rem,4vw,4.5rem);padding-block:3.75rem;scroll-margin-top:1rem}
.samples h2{margin-bottom:.4em}
.sample-controls{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.55rem}
.sample-controls button{background:transparent;border:1px solid #bfb29b;border-radius:5px;padding:.5em .82em .4em;color:var(--navy);font-weight:600}
.sample-controls button[aria-pressed="true"]{background:#6d4429;color:var(--white);border-color:#6d4429}
.sample{display:grid;grid-template-columns:1fr 1.7fr;gap:1.15rem;background:var(--white);border:1px solid var(--border);border-radius:9px;padding:1rem;margin-bottom:.65rem}
.sample img{width:100%;height:100%;min-height:160px;border-radius:5px}
.varieties{padding-left:1.12em;margin:0 0 .8rem}
.arrow{font-weight:700;text-underline-offset:4px}
.section{padding-block:clamp(2.5rem,6vw,5.5rem)}
.white{background:var(--white)}
.reading{max-width:76ch;margin-bottom:2.5rem}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.tile,.feature{background:var(--white);border:1px solid var(--border);border-radius:9px;padding:clamp(1rem,3vw,2rem)}
.tile img{width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:5px;margin-bottom:1rem}
.tile p:last-child{margin-bottom:0}
.banner{background:#efe1c9;color:#38271d;padding-block:3.75rem}
.banner h1{font-size:clamp(2.75rem,5vw,5rem);margin:0}
.stack{display:grid;gap:1.25rem}
.feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:clamp(1rem,4vw,3rem)}
.feature img{width:100%;border-radius:5px}
.spaced{margin-top:2rem}
.contact{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:start}
address{font-style:normal;margin-bottom:1.25rem}
dl{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1rem}
dd{margin:0;overflow-wrap:anywhere}
form{display:grid;gap:.85rem}
form label{display:grid;gap:.15rem;font-weight:600}
input,select,textarea{width:100%;padding:.65rem;border:1px solid #b9ad96;border-radius:4px;background:#fff;color:var(--navy)}
form button{justify-self:start}
.foot{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:1.25rem;padding-block:2.5rem}
@media(max-width:960px){
.head{flex-wrap:wrap;gap:.7rem;min-height:0;padding-block:.75rem}
.menu:not([hidden]){display:inline-block}
nav{order:4;width:100%;flex-wrap:wrap;gap:.7rem 1.2rem;padding:.5rem 0}
.menu:not([hidden])~nav:not(.open){display:none}
}
@media(max-width:700px){
.wrap{width:90%}
.brand{font-size:.85rem;gap:.4rem}
.brand img{width:45px;height:38px}
.quote{font-size:.82rem}
.menu{font-size:.85rem}
.hero{grid-template-columns:1fr}
.hero picture{grid-column:1;grid-row:2;min-height:0;aspect-ratio:1.9}
.hero-copy{grid-column:1;grid-row:1}
.hero h1{font-size:clamp(2.4rem,8vw,4rem)}
.hero .intro{margin-bottom:1rem}
.samples,.feature,.contact{grid-template-columns:1fr}
.samples{gap:.7rem;padding-block:2.5rem}
.tiles,.foot{grid-template-columns:1fr}
.sample{grid-template-columns:1fr}
.sample img{height:auto;aspect-ratio:2/1}
.feature img{max-height:260px}
}
@media(max-width:375px){.head .quote{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(min-width:1050px){
.sample-controls:has([data-compare][aria-pressed="true"])~.sample{grid-template-columns:1fr}
.sample-controls:has([data-compare][aria-pressed="true"])~.sample img{height:auto;aspect-ratio:2/1}
}

.sample-quote{display:block;margin-top:.4rem;color:#704b32;text-underline-offset:4px}

/* WordPress image blocks */
.wp-block-image{margin:0}
.wp-block-image img{display:block}
.hero-photo{grid-column:2;grid-row:1;position:relative;overflow:hidden}
.hero-photo img{position:absolute;width:100%;height:100%;object-position:74% 50%}
.hero-mobile{display:none}
@media(max-width:700px){
  .hero-photo{grid-column:1;grid-row:2;aspect-ratio:1.9}
  .hero-desktop{display:none}
  .hero-mobile{display:block}
}
.contact-address{margin-bottom:1.25rem}
.contact-lines p{margin-bottom:.45rem}
.sample>.wp-block-image{min-width:0;min-height:160px}
.sample>.wp-block-image img{height:100%}
@media(max-width:700px){
  .sample>.wp-block-image{min-height:0}
  .sample>.wp-block-image img{height:auto}
}

/* WordPress renders a flow wrapper inside Group blocks. Make it transparent
   to the theme's grid and flex layouts while preserving the saved blocks. */
:is(.hero,.hero-actions,.samples,.sample,.tiles,.feature,.contact,.stack).wp-block-group
  > .wp-block-group__inner-container {
  display: contents;
}
.sample > .wp-block-group__inner-container > .wp-block-image {
  min-width: 0;
  min-height: 160px;
}
.sample > .wp-block-group__inner-container > .wp-block-image img {
  height: 100%;
}
@media (min-width: 1050px) {
  .samples :is(.wp-block-group, .wp-block-group__inner-container):has(> .sample-controls [data-compare][aria-pressed="true"]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
    align-items: stretch;
  }
  .samples :is(.wp-block-group, .wp-block-group__inner-container) > .sample-controls:has([data-compare][aria-pressed="true"]) {
    grid-column: 1 / -1;
    margin: 0;
  }
  .sample-controls:has([data-compare][aria-pressed="true"]) ~ .sample
    > .wp-block-group__inner-container > .wp-block-image img {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 700px) {
  .sample > .wp-block-group__inner-container > .wp-block-image {
    min-height: 0;
  }
  .sample > .wp-block-group__inner-container > .wp-block-image img {
    height: auto;
  }
}

.harmain-footer {
  padding: 1.5rem 5%;
  text-align: center;
}
.harmain-footer a {
  font-weight: 700;
  text-underline-offset: .25em;
}
.harmain-map {
  padding-bottom: clamp(2.5rem, 6vw, 5.5rem);
}
.harmain-map iframe {
  display: block;
  width: 100%;
  height: clamp(280px, 45vw, 420px);
  border: 1px solid var(--border);
  border-radius: 9px;
}