:root{
  --ink:#17212b;
  --muted:#5f6b73;
  --paper:#f4f1eb;
  --cream:#fffdfa;
  --clay:#b14f3e;
  --clay-dark:#8e3d31;
  --gold:#c99a4a;
  --sage:#63796f;
  --navy:#172b3a;
  --line:#d9d4ca;
  --soft:#ebe6dd;
  --serif:Georgia,"Times New Roman",serif;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,Helvetica,sans-serif;
  --space:24px;
  --radius:3px;
  --shadow:0 18px 40px rgba(23,33,43,.08)
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased
}

img{
  display:block;
  width:100%;
  height:auto
}

a{
  color:var(--clay);
  text-underline-offset:4px;
  transition:color .2s ease
}

a:hover{color:var(--clay-dark)}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px
}

.site-header{
  position:relative;
  z-index:5;
  min-height:72px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:28px;
  padding:10px 5%;
  background:rgba(255,253,250,.96);
  color:var(--ink)
}

.logo{
  display:flex;
  align-items:center;
  gap:11px;
  color:var(--ink);
  font-weight:800;
  text-decoration:none;
  letter-spacing:-.035em;
  white-space:nowrap;
  font-size:1.02rem
}

.logo-mark{
  width:32px;
  height:32px
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  flex:1
}

.site-nav a{
  position:relative;
  color:var(--ink);
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none
}

.site-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:2px;
  background:var(--clay);
  transition:right .2s ease
}

.site-nav a:hover::after{right:0}

.header-cta,
.button{
  display:inline-block;
  background:var(--clay);
  color:var(--cream);
  border:2px solid var(--clay);
  border-radius:var(--radius);
  padding:10px 17px;
  text-decoration:none;
  font-weight:700;
  font-size:.84rem;
  line-height:1.25;
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease
}

.header-cta:hover,
.button:hover{
  background:var(--clay-dark);
  border-color:var(--clay-dark);
  color:var(--cream);
  transform:translateY(-2px);
  box-shadow:0 8px 16px rgba(142,61,49,.18)
}

.menu-button{
  display:none;
  background:var(--navy);
  color:var(--cream);
  border:0;
  border-radius:var(--radius);
  padding:9px 12px;
  font-weight:700;
  cursor:pointer
}

.container{
  max-width:1200px;
  margin:auto;
  padding-left:28px;
  padding-right:28px
}

.hero{
  padding-top:104px;
  padding-bottom:92px;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:76px;
  align-items:center
}

.eyebrow{
  margin:0 0 16px;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.7rem;
  color:var(--clay);
  font-weight:800
}

h1,
h2,
h3{
  line-height:1.1;
  margin:0 0 24px
}

h1,
h2{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.045em
}

h1{
  font-size:clamp(2.8rem,6.8vw,6.4rem);
  max-width:900px
}

h2{font-size:clamp(2rem,4vw,3.35rem)}

h3{
  font-size:1.25rem;
  letter-spacing:-.02em
}

p{margin-top:0}

.lede{
  max-width:650px;
  color:var(--muted);
  font-size:1.12rem;
  line-height:1.75
}

.hero-art{
  border:1px solid var(--ink);
  box-shadow:18px 18px 0 var(--gold);
  background:var(--sage);
  padding:14px;
  transform:rotate(1deg)
}

.hero-art img{
  aspect-ratio:4/3;
  object-fit:cover;
  filter:saturate(.9) contrast(1.03)
}

.section{padding-top:76px;padding-bottom:76px}

.section-heading{
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:end;
  border-bottom:1px solid var(--line);
  padding-bottom:26px;
  margin-bottom:42px
}

.section-heading>p{
  max-width:360px;
  color:var(--muted);
  margin-bottom:6px
}

.guide-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:34px
}

.guide-card{
  background:var(--cream);
  border:1px solid var(--line);
  padding:16px;
  box-shadow:10px 10px 0 var(--soft);
  transition:transform .25s ease,box-shadow .25s ease
}

.guide-card:hover{
  transform:translate(-4px,-5px);
  box-shadow:14px 14px 0 var(--gold)
}

.guide-card img{
  aspect-ratio:16/9;
  object-fit:cover;
  margin-bottom:25px;
  filter:saturate(.88)
}

.guide-card p{margin-bottom:22px}

.card-meta{
  margin-bottom:10px!important;
  font-size:.69rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--sage);
  font-weight:800
}

.guide-card h3{margin-bottom:12px}

.guide-card>a{
  font-weight:700;
  text-decoration-thickness:1px
}

.support{
  background:var(--navy);
  color:var(--cream);
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  box-shadow:12px 12px 0 var(--gold)
}

.support h2{margin-bottom:0}

.support p{
  color:#dbe1df;
  margin-bottom:0
}

.support a{color:#f2c86d}

.page-hero{
  padding-top:78px;
  padding-bottom:48px;
  border-bottom:1px solid var(--line)
}

.page-hero h1{max-width:900px;font-size:clamp(2.8rem,6vw,5.6rem)}

.article{
  max-width:850px;
  padding-top:68px;
  padding-bottom:76px
}

.article>img{
  margin-bottom:42px;
  border:1px solid var(--line);
  box-shadow:12px 12px 0 var(--soft);
  max-height:520px;
  object-fit:cover
}

.article p{color:#33404a}

.article h2{
  font-size:2.05rem;
  margin-top:52px;
  margin-bottom:18px;
  color:var(--ink)
}

.article h3{margin-top:34px}

.article strong{color:var(--ink)}

.article ul{padding-left:24px}

.fact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:44px 0 48px
}

.fact{
  border-top:4px solid var(--clay);
  padding:18px;
  background:var(--cream);
  box-shadow:0 5px 0 var(--soft)
}

.fact strong{
  display:block;
  font-family:var(--serif);
  font-size:1.75rem;
  line-height:1.15;
  margin-bottom:10px
}

.notice{
  border-left:5px solid var(--gold);
  padding:18px 24px;
  background:#ebe5da;
  color:var(--ink);
  margin:34px 0
}

table{
  width:100%;
  border-collapse:collapse;
  background:var(--cream);
  font-size:.92rem;
  margin:28px 0
}

caption{
  text-align:left;
  padding-bottom:12px
}

th,
td{
  border:1px solid var(--line);
  padding:13px 14px;
  text-align:left;
  vertical-align:top
}

th{
  background:var(--navy);
  color:var(--cream);
  font-weight:700
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:72px;
  padding-top:72px;
  padding-bottom:80px
}

.contact-grid h2{font-size:2.25rem}

form{display:grid;gap:18px}

label{
  display:block;
  margin-bottom:6px;
  font-weight:700;
  font-size:.9rem
}

input,
textarea,
select{
  font:inherit;
  padding:12px 13px;
  border:1px solid #b9b5ac;
  border-radius:var(--radius);
  background:var(--cream);
  color:var(--ink);
  width:100%;
  transition:border-color .2s ease,box-shadow .2s ease
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--clay);
  box-shadow:0 0 0 3px rgba(177,79,62,.13);
  outline:0
}

textarea{
  min-height:150px;
  resize:vertical
}

.map{
  min-height:280px;
  background:
    linear-gradient(135deg,#d7e0d8 0 25%,#a5b598 25% 28%,#e4c59b 28% 58%,#789078 58% 61%,#d7e0d8 61%);
  border:1px solid var(--ink);
  display:grid;
  place-items:center;
  color:var(--ink);
  font-weight:700;
  text-align:center;
  box-shadow:10px 10px 0 var(--soft);
  margin:28px 0
}

.form-message{
  padding:14px 16px;
  background:#dcebd7;
  color:var(--ink);
  border-left:4px solid var(--sage)
}

.form-message[hidden]{display:none}

.site-footer{
  background:var(--navy);
  color:var(--cream);
  padding-top:56px;
  padding-bottom:26px
}

.site-footer p{color:#d4ddda}

.site-footer a{color:#f2c86d}

.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:48px
}

.footer-grid h3{
  font-family:var(--sans);
  font-size:.95rem;
  letter-spacing:.02em;
  color:var(--cream)
}

.footer-bottom{
  border-top:1px solid #52636b;
  margin-top:44px;
  padding-top:20px;
  color:#b9c5c2;
  font-size:.82rem
}

.cookie-banner{
  position:fixed;
  z-index:10;
  bottom:18px;
  left:18px;
  right:18px;
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--ink);
  box-shadow:8px 8px 0 var(--clay);
  padding:20px 22px;
  display:flex;
  gap:28px;
  align-items:center;
  justify-content:space-between
}

.cookie-banner[hidden]{display:none}

.cookie-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap
}

.cookie-actions button{
  font:inherit;
  font-size:.86rem;
  padding:9px 12px;
  border:1px solid var(--ink);
  border-radius:var(--radius);
  background:var(--cream);
  color:var(--ink);
  cursor:pointer
}

.cookie-actions button:first-child{
  background:var(--clay);
  color:#fff;
  border-color:var(--clay)
}

.skip-link{
  position:absolute;
  left:-9999px
}

.skip-link:focus{
  left:12px;
  top:12px;
  background:var(--cream);
  color:var(--ink);
  padding:8px;
  z-index:20
}

@media(max-width:1000px){
  .site-nav{gap:14px}
  .site-nav a{font-size:.76rem}
  .hero{gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
}

@media(max-width:767px){
  .site-header{
    min-height:58px;
    padding:7px 16px
  }

  .site-nav{
    display:none;
    position:absolute;
    z-index:8;
    top:58px;
    left:0;
    right:0;
    background:var(--cream);
    border-bottom:1px solid var(--ink);
    padding:22px 20px;
    flex-direction:column;
    align-items:flex-start;
    gap:16px
  }

  .site-nav.is-visible{display:flex}

  .site-nav a{
    font-size:.9rem
  }

  .menu-button{
    display:block;
    margin-left:auto
  }

  .header-cta{display:none}

  .container{
    padding-left:20px;
    padding-right:20px
  }

  .hero{
    grid-template-columns:1fr;
    padding-top:68px;
    padding-bottom:68px;
    gap:48px
  }

  .hero-art{
    max-width:600px
  }

  .guide-grid,
  .contact-grid,
  .support{
    grid-template-columns:1fr
  }

  .section-heading{
    display:block
  }

  .section-heading>p{
    margin-top:16px
  }

  .fact-grid{
    grid-template-columns:1fr
  }

  .contact-grid{
    gap:48px
  }

  .cookie-banner{
    display:block
  }

  .cookie-actions{margin-top:16px}

  .footer-grid{
    grid-template-columns:1fr
  }

  .footer-grid>div:first-child{grid-column:auto}
}

@media(max-width:520px){
  .page-hero{padding-top:58px;padding-bottom:38px}
  .article{padding-top:52px}
  .article>img{margin-bottom:34px}
  .support{padding:30px 24px}
  .cookie-banner{
    left:9px;
    right:9px;
    bottom:9px;
    padding:16px
  }
}

@media(max-width:399px){
  .container{
    padding-left:16px;
    padding-right:16px
  }

  .hero{
    padding-top:48px;
    padding-bottom:48px
  }

  .logo{font-size:.92rem}
}

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

  *,
  *::before,
  *::after{
    transition:none!important;
    animation:none!important
  }
}