/* Tiny Hoppers Calgary — exported static site CSS. */
html { scroll-behavior: smooth; }
body { margin: 0; background: #FAF7F2; }
img { max-width: 100%; }

.th-page * {
  box-sizing:border-box;
  margin:0;
  padding:0;
}

.th-page {
  --g1:#1A3410;
  --g2:#2D5A20;
  --g3:#4A7C35;
  --g5:#C4DFB0;
  --g6:#EBF5E3;
  --cream:#FAF7F2;
  --white:#fff;
  --text:#1A2010;
  --orange:#D97020;

  font-family:Georgia,serif;
  background:var(--cream);
  color:var(--text);
}


/* NAV */

.th-nav {
background:white;
border-bottom:1px solid #ddd;
padding:20px;
text-align:center;
}

.th-nav img {
height:75px;
}


/* HERO */

.th-hero {
background:var(--orange);
padding:60px 30px;
color:white;
}

.th-hero-inner {
max-width:800px;
margin:auto;
}

.th-hero h1 {
font-size:42px;
line-height:1.2;
margin-bottom:15px;
}

.th-hero p {
font-size:17px;
line-height:1.7;
}


/* FORM SECTION */

.th-form-section {
padding:60px 25px;
}

.th-container {
max-width:700px;
margin:auto;
}


.th-container h2 {
color:var(--g1);
font-size:30px;
margin-bottom:10px;
}


.th-container p {
margin-bottom:30px;
color:#555;
}

/* RADIO BUTTON FIX */

.th-form input[type="radio"] {
    width:auto;
    padding:0;
    margin:0;
    accent-color:var(--orange);
}

.th-radio-option {
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    font-weight:normal !important;
    color:#555 !important;
}
  
.th-form {
background:white;
border:1px solid #ddd;
border-radius:14px;
padding:35px;
}


.th-form label {
display:block;
font-size:14px;
font-weight:bold;
margin-bottom:6px;
color:var(--g1);
}


.th-form input,
.th-form select,
.th-form textarea {

width:100%;
padding:13px;
margin-bottom:18px;
border:1px solid #ccc;
border-radius:6px;
font-family:Georgia,serif;

}


.th-form textarea {
height:120px;
}


.th-btn {

background:var(--orange);
color:white;
border:none;
padding:15px 35px;
border-radius:6px;
font-weight:bold;
font-size:16px;
cursor:pointer;
}


.th-btn:hover {
background:#c45f18;
}


/* BENEFITS */

.th-benefits {

background:var(--g6);
padding:50px 25px;

}


.th-benefits-grid {

max-width:800px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}


.card {

background:white;
padding:25px;
border-radius:12px;
border:1px solid #ddd;

}


.card h3 {

color:var(--g1);
font-size:17px;
margin-bottom:10px;

}


.card p {

font-size:14px;
line-height:1.6;

}


/* FOOTER */

.th-footer {

background:var(--g1);
color:white;
padding:35px;
text-align:center;

}


.th-footer a {

color:white;

}


/* MOBILE */

@media(max-width:700px){

.th-hero h1 {
font-size:30px;
}


.th-benefits-grid {

grid-template-columns:1fr;

}


.th-form {

padding:20px;

}

}


/* Only shown on non-production preview hosts; hidden at either approved Tiny Hoppers hostname. */
.th-turnstile-preview-note { display: none; margin: 0 auto 20px; max-width: 610px; padding: 10px 12px; color: #56624F; background: #FFF8E9; border: 1px solid #E7C87A; border-radius: 8px; font-size: 12px; line-height: 1.55; text-align: center; }
.th-turnstile-preview-note.is-visible { display: block; }
a:focus-visible, button:focus-visible { outline: 3px solid #7DB05E; outline-offset: 3px; }