:root{--ink:#222;--muted:#646464;--line:#e5e5e5;--paper:#fefefa;--green:#365f49;--red:#b8483b;--gold:#d0a03c;--blue:#3f6f8e;--page-pad:6vw;--header-h:58px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--green);outline-offset:3px}

header{height:var(--header-h);margin:auto;padding:9px var(--page-pad);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.brand{display:block;line-height:1}
.brand:hover{text-decoration:none}
.brand-wordmark{display:block;width:140px;height:22px}
nav{display:flex;gap:17px;color:#444;font-size:13px}
nav a[aria-current=page]{color:var(--green);font-weight:600}

main{margin:auto;padding:0 var(--page-pad)}
.hero{position:relative;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));padding:36px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
h1{max-width:1120px;margin:0;font-size:clamp(52px,14vw,84px);font-weight:500;letter-spacing:-.075em;word-spacing:.08em;line-height:1}
.intro{max-width:650px;margin:24px 0 0;color:var(--muted);font-size:18px;line-height:1.55}
.hero-mark{position:relative;width:148px;margin:24px auto 0;align-self:center;text-align:center}
.hero-emblem{display:block;width:112px;height:108px;margin:auto}
.hero-logo-type{display:block;width:140px;height:35px;margin:7px auto 0}

.section{padding:34px 0;border-bottom:1px solid var(--line)}
.section h2{margin:0;font-size:22px;font-weight:500;letter-spacing:-.04em}
.section p{max-width:510px;margin:16px 0 0;color:var(--muted);font-size:16px;line-height:1.65}
.section .email{display:block;color:var(--green);font-size:18px}

/* Inner pages */
.page-head{padding:62px 0 40px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(44px,12vw,72px);letter-spacing:-.065em;line-height:1.02}
.page-head .intro{margin-top:24px}
.meta{margin-top:20px;color:#666;font-size:14px}
.block{padding:36px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:18px}
.block h2{margin:0;font-size:22px;font-weight:500;letter-spacing:-.04em}
.block .body{max-width:680px}
.block p,.block li{color:#4a4a4a;font-size:16px;line-height:1.7}
.block p{margin:0 0 16px}
.block p:last-child{margin-bottom:0}
.block ul{margin:0 0 16px;padding-left:20px}
.block li{margin-bottom:6px}
.block a{color:var(--green);text-decoration:underline;text-underline-offset:3px}

.contact-grid{padding:40px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr;gap:42px}
.contact-grid h2{margin:0 0 14px;font-size:22px;font-weight:500;letter-spacing:-.04em}
.contact-grid p{margin:0 0 26px;color:var(--muted);font-size:16px;line-height:1.65}
form{display:grid;gap:18px}
label{display:grid;gap:8px;color:#444;font-size:14px;font-weight:500}
input,textarea,select{width:100%;min-width:0;padding:13px 14px;border:1px solid #cfcfcf;border-radius:6px;background:#fff;color:var(--ink);font:inherit;font-size:16px}
textarea{min-height:160px;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:var(--green)}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#8b2020}
form button{min-height:48px;padding:14px 24px;border:0;border-radius:6px;background:var(--green);color:#fff;cursor:pointer;font:inherit;font-size:15px;font-weight:600;justify-self:start}
form button:hover{background:#2b4c3a}
.optional{color:#666;font-weight:400}
.form-note{margin:0;color:#666;font-size:13px;line-height:1.55}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

footer{margin:auto;padding:26px var(--page-pad) 40px;color:#666;font-size:13px;display:flex;flex-direction:column;gap:16px}
footer nav{gap:20px;color:#666;font-size:13px;flex-wrap:wrap}

@media(min-width:641px){
  :root{--page-pad:5vw;--header-h:65px}
  header{max-width:1380px;padding-top:10px;padding-bottom:10px}
  nav{gap:26px;font-size:14px}
  main{max-width:1380px}
  .hero{padding:48px 0}
  h1{font-size:clamp(62px,9.5vw,152px);letter-spacing:-.09em;line-height:.99}
  .intro{margin-top:34px;font-size:clamp(18px,2vw,25px);line-height:1.6}
  .section{padding:48px 0;display:flex;align-items:baseline;justify-content:space-between;gap:30px}
  .section h2{font-size:23px}
  .section p{margin:0;font-size:17px;line-height:1.7}
  .section .email{display:inline;font-size:19px}
  .page-head{padding:86px 0 52px}
  .page-head h1{font-size:clamp(48px,7vw,104px);letter-spacing:-.07em;line-height:1}
  .page-head .intro{margin-top:28px}
  .block h2,.contact-grid h2{font-size:23px}
  .block p,.block li,.contact-grid p{font-size:17px}
  footer{max-width:1380px;padding-top:30px;padding-bottom:50px}
}

@media(min-width:900px){
  footer{flex-direction:row;justify-content:space-between;align-items:center;gap:20px}
}

@media(min-width:801px){
  .block{padding:48px 0;grid-template-columns:minmax(180px,1fr) 2fr;gap:30px}
  .contact-grid{padding:56px 0;grid-template-columns:1fr 1.4fr;gap:60px}
}

@media(min-width:1000px){
  .hero{display:grid;grid-template-columns:auto minmax(290px,1fr);column-gap:48px;grid-template-rows:auto auto;align-content:center;align-items:normal}
  .hero>h1{grid-column:1;align-self:end}
  .hero>.intro{grid-column:1;max-width:650px}
  .hero-mark{grid-column:2;grid-row:1/3;align-self:center;justify-self:center;width:290px;margin:0}
  .hero-emblem{width:215px;height:207px}
  .hero-logo-type{width:270px;height:67px;margin-top:12px}
}

@media(max-height:620px) and (orientation:landscape){
  .hero{padding:28px 0}
  .hero h1{font-size:clamp(48px,9vw,82px)}
  .hero .intro{margin-top:20px;font-size:17px}
  .hero-mark{right:5%;width:170px}
  .hero-emblem{width:112px;height:108px}
  .hero-logo-type{width:140px;height:35px;margin-top:7px}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Header dog */
header{position:relative}
.dog-track{position:absolute;left:0;right:0;bottom:-1px;height:44px;overflow:hidden;pointer-events:none}
.dog{position:absolute;left:0;bottom:0;width:68px;height:42px;background:url(dog-run.webp) 0 0/2176px 42px no-repeat;will-change:transform}

/* Links inside running text need more than colour to stand out */
.section p a:not(.email),.intro a,.body p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.credit a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.heart{color:var(--red)}
.captcha{display:grid;gap:8px;color:#444;font-size:14px;font-weight:500}
.captcha-row{display:flex;align-items:center;gap:14px}
.captcha-row img{width:150px;height:50px;border:1px solid #cfcfcf;border-radius:6px;background:#fff}
form .captcha-reload{min-height:0;padding:0;border:0;background:none;color:var(--green);cursor:pointer;font:inherit;font-size:14px;text-decoration:underline;text-underline-offset:3px}
input[name=enterdigest]{max-width:220px}