:root{
    --walnut:#2B2018;
    --walnut-soft:#3E2F22;
    --paper:#F3EAD9;
    --paper-dark:#E8DCC3;
    --rust:#9A4B2E;
    --rust-dark:#7A3A22;
    --moss:#4F5D3A;
    --forest:#3B5D40;
    --forest-dark:#26402B;
    --brass:#B08D4F;
    --line: rgba(43,32,24,0.18);
  }

  *{ box-sizing: border-box; }

  html{ scroll-behavior: smooth; }

  body{
    margin:0;
    background: var(--paper);
    color: var(--walnut);
    font-family: 'Vollkorn', Georgia, serif;
    line-height: 1.6;
  }

  h1,h2,h3, .brandmark{
    font-family: 'Rye', 'Vollkorn', Georgia, serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    margin: 0;
  }

  a{ color: inherit; }

  img{ max-width:100%; display:block; }

  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 32px;
  }

  /* subtle paper grain via layered gradients, no images required */
  body{
    background-image:
      radial-gradient(circle at 20% 10%, rgba(43,32,24,0.03), transparent 40%),
      radial-gradient(circle at 80% 60%, rgba(43,32,24,0.025), transparent 45%),
      repeating-linear-gradient(115deg, rgba(43,32,24,0.015) 0px, rgba(43,32,24,0.015) 1px, transparent 1px, transparent 3px);
  }

  /* ---------- header ---------- */
  header{
    padding: 22px 0;
    border-bottom: 3px solid var(--walnut);
    background: var(--paper);
    position: sticky;
    top:0;
    z-index: 20;
  }
  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 20px;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .brand svg{ width:44px; height:44px; flex-shrink:0; }
  .brandmark{
    font-size: 19px;
    line-height: 1.15;
    color: var(--walnut);
  }
  .brand-phone{
    display: block;
    font-family: 'Rye', 'Vollkorn', Georgia, serif;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: var(--walnut);
    text-decoration: none;
    margin-top: 3px;
  }
  .brand-phone:hover{ color: var(--forest-dark); }
  .ticket-phone{
    display: block;
    text-align: center;
    font-family: 'Rye', 'Vollkorn', Georgia, serif;
    font-size: 22px;
    color: var(--walnut);
    text-decoration: none;
    margin-top: 18px;
  }
  .ticket-phone:hover{ color: var(--forest-dark); }
  .brand-sub{
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--forest-dark);
    margin-top: 2px;
  }
  nav{ display:flex; gap: 28px; }
  nav a{
    text-decoration:none;
    font-size: 15px;
    color: var(--walnut-soft);
    border-bottom: 1px solid transparent;
    padding-bottom: 3px;
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  nav a:hover{ border-color: var(--forest); color: var(--forest-dark); }

  /* ---------- hero ---------- */
  .hero{
    padding: 88px 0 76px;
    text-align:center;
    position:relative;
  }
  .hero-emblem{
    width: 128px;
    height: 128px;
    margin: 0 auto 28px;
  }
  .hero-photo{
    max-width: 460px;
    margin: 0 auto 32px;
  }
  .hero-photo .photo-title{
    font-family: 'Rye', 'Vollkorn', Georgia, serif;
    font-size: clamp(19px, 2.6vw, 25px);
    color: var(--walnut);
    margin: 0 0 16px;
    line-height: 1.3;
  }
  .hero-photo img{ width: 100%; height: auto; display:block; }
  .hero-photo .caption{
    margin-top: 10px;
    font-size: 13px;
    font-style: italic;
    color: var(--walnut-soft);
    letter-spacing: 0.01em;
  }
  .hero h1{
    font-size: clamp(40px, 6vw, 68px);
    color: var(--walnut);
    max-width: 820px;
    margin: 0 auto;
    line-height: 1.08;
  }
  .hero .tagline{
    margin: 22px auto 0;
    max-width: 560px;
    font-size: 19px;
    color: var(--walnut-soft);
    font-style: italic;
  }
  .hero .yard-note{
    margin: 14px auto 0;
    max-width: 520px;
    font-size: 16px;
    color: var(--walnut-soft);
  }
  .hero .location{
    margin-top: 14px;
    font-size: 14px;
    letter-spacing: 0.05em;
    color: var(--forest-dark);
  }
  .hero-actions{
    margin-top: 38px;
    display:flex;
    gap: 18px;
    justify-content:center;
    flex-wrap: wrap;
  }
  .btn{
    display:inline-block;
    padding: 14px 30px;
    font-family: 'Vollkorn', Georgia, serif;
    font-size: 16px;
    text-decoration:none;
    border: 2px solid var(--walnut);
    background: transparent;
    color: var(--walnut);
    transition: background 0.15s ease, color 0.15s ease;
    cursor:pointer;
  }
  .btn-primary{
    background: var(--forest);
    border-color: var(--forest);
    color: var(--paper);
  }
  .btn-primary:hover{ background: var(--forest-dark); border-color: var(--forest-dark); }
  .btn:not(.btn-primary):hover{ background: var(--walnut); color: var(--paper); }

  .divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 16px;
    margin: 0 auto;
    max-width: 300px;
    color: var(--brass);
  }
  .divider .line{ flex:1; height:1px; background: var(--line); }
  .divider svg{ width: 20px; height:20px; }

  /* ---------- services ---------- */
  .services{ padding: 78px 0; }
  .section-head{
    text-align:center;
    margin-bottom: 52px;
  }
  .section-head h2{
    font-size: 34px;
    color: var(--walnut);
  }
  .section-head p{
    margin-top: 12px;
    color: var(--walnut-soft);
    max-width: 520px;
    margin-left:auto; margin-right:auto;
  }
  .service-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .plank{
    background: var(--paper-dark);
    border: 1px solid var(--line);
    padding: 40px 34px;
    position: relative;
  }
  .plank::before{
    content:"";
    position:absolute;
    top:10px; left:10px; right:10px; bottom:10px;
    border: 1px solid rgba(43,32,24,0.12);
    pointer-events:none;
  }
  .plank .num{
    font-family:'Rye';
    font-size: 15px;
    color: var(--brass);
    letter-spacing: 0.08em;
  }
  .plank h3{
    font-size: 26px;
    margin: 10px 0 14px;
    color: var(--walnut);
  }
  .plank p{ color: var(--walnut-soft); margin: 0 0 16px; }
  .plank-cta{
    display: inline-block;
    padding: 10px 24px;
    font-size: 15px;
    margin: 0 0 22px;
  }
  .plank ul{
    margin:0; padding: 0 0 0 20px;
    color: var(--walnut-soft);
    font-size: 15px;
  }
  .plank li{ margin-bottom: 6px; }
  .plank-photo{
    margin-top: 22px;
  }
  @media (min-width: 761px){
    .service-grid{ grid-template-rows: auto auto; }
    .plank{
      display:grid;
      grid-template-rows: subgrid;
      grid-row: 1 / 3;
      row-gap: 0;
    }
  }
  .plank-photo img{
    width: 100%;
    height: auto;
    display: block;
  }
  .plank-photo .caption{
    margin-top: 8px;
    font-size: 13px;
    font-style: italic;
    color: var(--walnut-soft);
    text-align: center;
  }

  /* ---------- how it works ---------- */
  .process{
    padding: 78px 0;
    background: var(--forest-dark);
    color: var(--paper);
  }
  .process .section-head h2{ color: var(--paper); }
  .process .section-head p{ color: rgba(243,234,217,0.75); }
  .track-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .track-card{
    background: rgba(243,234,217,0.06);
    border: 1px solid rgba(243,234,217,0.18);
    padding: 32px 30px;
  }
  .track-label{
    display:inline-block;
    font-family: 'Rye', 'Vollkorn', Georgia, serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--brass);
    border: 1px solid var(--brass);
    padding: 5px 12px;
    margin-bottom: 16px;
  }
  .track-card h3{
    font-size: 22px;
    color: var(--paper);
    margin: 0 0 20px;
  }
  .track-list{
    margin: 0;
    padding: 0 0 0 22px;
    color: rgba(243,234,217,0.78);
    font-size: 15px;
  }
  .track-list li{ margin-bottom: 14px; }
  .track-list li:last-child{ margin-bottom: 0; }
  .track-list strong{ color: var(--paper); }
  .track-note{
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid rgba(243,234,217,0.18);
    font-size: 14px;
    font-style: italic;
    color: rgba(243,234,217,0.75);
  }
  .process-footer{
    margin: 40px auto 0;
    max-width: 640px;
    text-align: center;
    font-size: 15px;
    color: rgba(243,234,217,0.75);
  }
  .process-footer a{
    color: var(--brass);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  .process-footer a:hover{ color: var(--paper); }

  /* ---------- about / owners ---------- */
  .about{ padding: 78px 0; }
  .about-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items:center;
  }
  .about-text h2{ font-size: 32px; margin-bottom: 18px; }
  .about-text p{ color: var(--walnut-soft); margin-bottom: 16px; }
  .owners{
    display:flex;
    gap: 24px;
    margin-top: 26px;
  }
  .owner{
    flex:1;
    border-top: 3px solid var(--forest);
    padding-top: 12px;
  }
  .owner .role{
    font-size: 12px;
    letter-spacing: 0.08em;
    color: var(--forest-dark);
    margin-bottom: 4px;
  }
  .owner .name{
    font-family:'Rye';
    font-size: 19px;
    color: var(--walnut);
  }
  .about-figure{
    background: var(--paper-dark);
    border: 1px solid var(--line);
    padding: 18px;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
  }
  .about-figure img{ width: 100%; height: auto; display:block; }
  .about-figure .caption{
    margin-top: 10px;
    font-size: 13px;
    font-style: italic;
    color: var(--walnut-soft);
    text-align: center;
  }

  /* ---------- contact ---------- */
  .contact{
    padding: 78px 0 96px;
  }
  .ticket{
    max-width: 620px;
    margin: 0 auto;
    background: var(--paper-dark);
    border: 1px solid var(--walnut);
    padding: 44px 44px 38px;
    position:relative;
  }
  .ticket::before, .ticket::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    width: 14px;
    background-image: radial-gradient(circle, var(--paper) 4px, transparent 4.5px);
    background-size: 14px 22px;
    background-position: center;
  }
  .ticket::before{ left: -7px; }
  .ticket::after{ right: -7px; }
  .ticket-head{
    text-align:center;
    margin-bottom: 30px;
  }
  .ticket-head h2{
    font-size: 28px;
    color: var(--walnut);
  }
  .ticket-head p{
    margin-top: 8px;
    color: var(--walnut-soft);
    font-size: 14px;
  }
  .field{ margin-bottom: 20px; }
  .field label{
    display:block;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--forest-dark);
    margin-bottom: 6px;
  }
  .field input, .field select, .field textarea{
    width: 100%;
    font-family: 'Vollkorn', Georgia, serif;
    font-size: 15px;
    padding: 11px 12px;
    background: var(--paper);
    border: 1px solid var(--line);
    color: var(--walnut);
  }
  .field textarea{ resize: vertical; min-height: 100px; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline: 2px solid var(--forest);
    outline-offset: 1px;
  }
  .field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .ticket .btn-primary{ width:100%; margin-top: 6px; }
  .ticket-note{
    text-align:center;
    font-size: 12px;
    color: var(--walnut-soft);
    margin-top: 16px;
  }

  /* ---------- footer ---------- */
  footer{
    padding: 40px 0;
    border-top: 3px solid var(--walnut);
    text-align:center;
  }
  footer .brandmark{ font-size: 18px; }
  footer p{
    font-size: 13px;
    color: var(--walnut-soft);
    margin-top: 8px;
  }

  @media (max-width: 760px){
    nav{ display:none; }
    .service-grid, .about-grid{ grid-template-columns: 1fr; }
    .track-grid{ grid-template-columns: 1fr; }
    .field-row{ grid-template-columns: 1fr; }
    .ticket{ padding: 34px 24px; }
  }