/* ============================================================
   Iron Slide Lodge — Business Retreats
   Shared stylesheet · Rustic Mountain Lodge theme
   ============================================================ */

:root {
  /* Palette */
  --bark:        #2b2018;  /* deepest brown / near-black wood */
  --timber:      #4a3526;  /* dark wood */
  --saddle:      #6b4a31;  /* mid brown */
  --pine:        #2f4a3c;  /* deep forest green */
  --pine-soft:   #3c5b4a;
  --amber:       #c8842b;  /* warm amber accent */
  --amber-deep:  #a86717;
  --ember:       #b5552e;  /* firelight orange */
  --cream:       #f5efe4;  /* warm paper */
  --parchment:   #efe6d6;
  --sand:        #e3d6bf;
  --stone:       #8a7c69;  /* muted text */
  --ink:         #211912;
  --line:        #d8c9ad;
  --logo-green:  #28512f;  /* official logo forest green */
  --logo-gray:   #6c7883;  /* official logo slate gray */

  --shadow-sm: 0 2px 8px rgba(43,32,24,.10);
  --shadow-md: 0 10px 30px rgba(43,32,24,.16);
  --radius: 10px;
  --maxw: 1140px;

  --serif: "Frank Ruhl Libre", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

h1, h2, h3, h4 { font-family: var(--serif); color: var(--timber); line-height: 1.18; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); margin: 0 0 .4em; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 0 0 .5em; }
h3 { font-size: 1.25rem; margin: 0 0 .4em; }
p  { margin: 0 0 1.1em; }
a  { color: var(--amber-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 820px; margin: 0 auto; padding: 0 24px; }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--amber-deep);
  margin: 0 0 .8em;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .98rem;
  padding: 14px 26px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, color .2s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-primary { background: var(--amber); color: #fff; border-color: var(--amber); }
.btn-primary:hover { background: var(--amber-deep); border-color: var(--amber-deep); color:#fff; }
.btn-ghost { background: transparent; color: var(--cream); border-color: rgba(245,239,228,.6); }
.btn-ghost:hover { background: rgba(245,239,228,.12); color:#fff; }
.btn-dark { background: var(--pine); color:#fff; border-color: var(--pine); }
.btn-dark:hover { background: var(--pine-soft); border-color: var(--pine-soft); color:#fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(40,81,47,.16);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  max-width: 1400px; margin: 0 auto; padding: 15px 30px;
}
.brand { display:flex; align-items:center; gap:12px; }
.brand a { color: var(--logo-green); text-decoration: none; display:flex; align-items:center; gap:12px; }
.brand .mark { height: 55px; display:flex; align-items:center; }
.brand .mark img { height: 55px; width:auto; display:block; }
.brand .brand-logo { height: 80px; width:auto; display:block; }
@media (max-width: 520px){ .brand .brand-logo { height: 65px; } }
.brand .name { font-family: var(--serif); font-size: 1.18rem; color: var(--logo-green); line-height:1.05; }
.brand .name small { display:block; font-family: var(--sans); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color: var(--amber); }

.nav-links { display:flex; align-items:center; gap: 4px; list-style:none; margin:0; padding:0; }
.nav-links a {
  color: var(--logo-green); font-size: 1.12rem; font-weight: 500;
  padding: 11px 10px; border-radius: 5px; white-space: nowrap;
}
.nav-links a:hover { background: rgba(40,81,47,.08); color: var(--logo-green); text-decoration:none; }
.nav-links a.active { color: var(--logo-green); font-weight: 700; }
.nav-cta { margin-left: 10px; }
.nav-cta .btn { font-size: 1.2rem; padding: 17px 30px; background: var(--logo-green); border-color: var(--logo-green); color:#fff; }
.nav-cta .btn:hover { background: #1e3d24; border-color: #1e3d24; }

.nav-toggle { display:none; background:none; border:0; color: var(--logo-green); font-size:1.6rem; cursor:pointer; }

@media (min-width: 1356px) {
  .nav { justify-content: center; gap: 36px; }
}

@media (max-width: 1355px) {
  .nav-toggle { display:block; }
  .nav-links {
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction: column; align-items: stretch; gap:0;
    background: #ffffff; padding: 10px 16px 18px;
    border-bottom: 1px solid rgba(40,81,47,.16);
    box-shadow: 0 12px 24px rgba(30,40,32,.10);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding: 12px 8px; border-bottom:1px solid rgba(40,81,47,.10); }
  .nav-cta { margin: 12px 0 0; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  color: var(--cream);
  padding: clamp(70px, 12vw, 140px) 0;
  background:
    linear-gradient(rgba(28,21,15,.74), rgba(28,21,15,.80)),
    repeating-linear-gradient(115deg, #3a2a1c 0 22px, #34251a 22px 44px);
  text-align: center;
}
.hero h1 { color: var(--cream); max-width: 16ch; margin-left:auto; margin-right:auto; }
.hero .sub { font-family: var(--serif); font-size: clamp(1.1rem,2.2vw,1.5rem); color: var(--amber); margin-bottom:.6em; }
.hero p.lede { max-width: 60ch; margin: 0 auto 1.8em; color: var(--parchment); font-size:1.08rem; }
.hero .btn-row { justify-content:center; }
.photo-loc { position:absolute; right:14px; bottom:9px; z-index:2; font-size:.6rem; letter-spacing:.04em; color: rgba(245,239,228,.55); text-transform:uppercase; }
.page-hero { padding: clamp(56px, 9vw, 96px) 0; }
.page-hero h1 { max-width: 22ch; }
.page-hero p.lede { max-width: 64ch; }

/* ---------- Sections ---------- */
section { padding: clamp(48px, 8vw, 88px) 0; }
section.alt { background: var(--parchment); }
section.pine { background: var(--pine); color: var(--parchment); }
section.pine h2, section.pine h3 { color: var(--cream); }
section.pine .eyebrow { color: var(--amber); }
.section-head { text-align:center; max-width: 760px; margin: 0 auto 48px; }
.section-head p { color: var(--stone); font-size: 1.08rem; }
section.pine .section-head p { color: var(--sand); }

/* ---------- Cards / grids ---------- */
.grid { display:grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px){ .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card h3 { color: var(--saddle); }
.card .ic {
  width: 46px; height:46px; border-radius: 10px; margin-bottom:14px;
  background: var(--pine); color: var(--amber);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
section.pine .card { background: rgba(255,255,255,.06); border-color: rgba(245,239,228,.18); color: var(--parchment); }
section.pine .card h3 { color:#fff; }

/* ---------- Image placeholders ---------- */
.ph {
  position: relative;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(0,0,0,.05) 0 14px, rgba(0,0,0,.02) 14px 28px),
    linear-gradient(150deg, var(--saddle), var(--timber) 60%, var(--pine));
  color: var(--cream);
  display:flex; align-items:center; justify-content:center; text-align:center;
  min-height: 260px; overflow:hidden; box-shadow: var(--shadow-sm);
}
.ph::after {
  content: "▣ photo"; position:absolute; top:10px; right:12px;
  font-family: var(--sans); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(245,239,228,.55);
}
.ph .ph-label {
  font-family: var(--serif); font-size: 1.15rem; padding: 0 18px;
  text-shadow: 0 1px 3px rgba(0,0,0,.4);
}
.ph.tall { min-height: 380px; }
.ph.short { min-height: 190px; }

/* ---------- Split (text + image) ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.split.rev .split-text { order: 2; }
@media (max-width: 820px){ .split, .split.rev { grid-template-columns: 1fr; }
  .split.rev .split-text { order: 0; } }

/* ---------- Feature list ---------- */
.flist { list-style:none; margin:0; padding:0; }
.flist li { position:relative; padding: 0 0 14px 30px; }
.flist li::before { content:"✦"; position:absolute; left:0; top:1px; color: var(--amber); }
.flist li strong { color: var(--timber); }
section.pine .flist li strong { color:#fff; }

/* ---------- Steps ---------- */
.steps { counter-reset: step; display:grid; gap:24px; grid-template-columns: repeat(3,1fr); }
@media (max-width:760px){ .steps { grid-template-columns:1fr; } }
.step { background: var(--cream); border:1px solid var(--line); border-radius: var(--radius); padding: 28px 24px 24px; position:relative; }
.step::before {
  counter-increment: step; content: counter(step);
  display:flex; align-items:center; justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background: var(--amber); color:#fff; font-family:var(--serif); font-weight:700; font-size:1.2rem;
  margin-bottom:14px;
}
.step h3 { color: var(--timber); margin-bottom:8px; }
.step p { color: var(--ink); }
section.pine .step h3 { color: var(--timber); }
section.pine .step p { color: var(--ink); }

/* ---------- Pricing ---------- */
.price-grid { display:grid; grid-template-columns: repeat(2,1fr); gap:30px; align-items:start; }
@media (max-width:760px){ .price-grid{ grid-template-columns:1fr; } }
.price-card { background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:34px; box-shadow:var(--shadow-md); position:relative; }
.price-card.feature { border:2px solid var(--amber); }
.price-card .tag { position:absolute; top:-14px; left:34px; background:var(--amber); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:20px; }
.price-card h3 { font-size:1.5rem; color:var(--saddle); }
.price-card .meta { color:var(--stone); font-weight:600; margin-bottom:18px; }

.table-clean { width:100%; border-collapse:collapse; }
.table-clean th, .table-clean td { text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); }
.table-clean th { font-family:var(--sans); text-transform:uppercase; letter-spacing:.08em; font-size:.74rem; color:var(--stone); }
.table-clean td.amt { text-align:right; font-weight:600; white-space:nowrap; }

/* ---------- Callout / CTA band ---------- */
.cta-band { background: linear-gradient(135deg, var(--timber), var(--bark)); color:var(--cream); text-align:center; }
.cta-band h2 { color:#fff; }
.cta-band p { color:var(--parchment); max-width:60ch; margin:0 auto 1.6em; }
.cta-band .btn-row { justify-content:center; }

.callout { background: var(--sand); border-left:5px solid var(--amber); border-radius:8px; padding:22px 26px; }
.callout strong { color: var(--timber); }

/* ---------- Forms ---------- */
.form-card { background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:34px; box-shadow:var(--shadow-md); }
.field { margin-bottom:18px; }
.field label { display:block; font-weight:600; font-size:.92rem; margin-bottom:6px; color:var(--timber); }
.field label .req { color: var(--ember); }
.field input, .field select, .field textarea {
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:7px;
  font-family:var(--sans); font-size:1rem; background:#fff; color:var(--ink);
}
.field textarea { min-height:120px; resize:vertical; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .field-row{ grid-template-columns:1fr; } }
.check-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:600px){ .check-grid{ grid-template-columns:1fr; } }
.check { display:flex; gap:10px; align-items:flex-start; background:#fff; border:1px solid var(--line); border-radius:7px; padding:11px 13px; font-size:.92rem; }
.check input { width:auto; margin-top:3px; }
fieldset { border:0; padding:0; margin:0 0 22px; }
fieldset legend { font-family:var(--serif); font-size:1.15rem; color:var(--saddle); margin-bottom:12px; padding:0; }

/* ---------- Blog ---------- */
.post-card { background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.post-card .ph { border-radius:0; min-height:170px; }
.post-card .body { padding:22px 24px 26px; }
.post-card .cat { font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--amber-deep); font-weight:700; }
.post-card h3 { margin:.4em 0 .5em; font-size:1.18rem; color:var(--saddle); }
.post-card p { color:var(--stone); font-size:.96rem; }

/* ---------- Legal pages ---------- */
.legal h2 { font-size:1.4rem; margin-top:1.6em; }
.legal { color:#3a2f25; }
.legal p, .legal li { color:#3a2f25; }

/* ---------- Footer ---------- */
.site-footer { background: #ffffff; color: #33413a; padding: 56px 0 28px; border-top: 4px solid var(--logo-green); }
.footer-grid { display:grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap:36px; }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.site-footer h4 { color: var(--logo-green); font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.78rem; margin-bottom:14px; }
.site-footer a { color: #33413a; display:block; padding:4px 0; font-size:.94rem; }
.site-footer a:hover { color: var(--logo-green); }
.site-footer .f-brand .name { font-family:var(--serif); font-size:1.3rem; color:var(--logo-green); }
.site-footer .f-brand p { color:var(--logo-gray); font-size:.92rem; max-width:34ch; }
.footer-bottom { border-top:1px solid #e4e8e4; margin-top:40px; padding-top:20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:.82rem; color:var(--logo-gray); }
.footer-bottom a { display:inline; color:var(--logo-gray); }
.networks { font-size:.9rem; color:var(--stone); }
.networks a { display:inline; color:var(--amber); }

.center { text-align:center; }
.mt-0 { margin-top:0; }
.lead { font-size:1.12rem; color:var(--stone); }
section.pine .lead { color:var(--sand); }

/* Subtle back link for article pages */
.back-link { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:600; letter-spacing:.01em; color:var(--stone); text-decoration:none; transition:color .15s; }
.back-link:hover { color:var(--saddle); }
.back-link .arw { font-size:1.02rem; line-height:1; }

/* ---------- Mobile fix: background-attachment:fixed is broken on iOS/mobile ----------
   Parallax backgrounds render blank on most phones. Keep the effect on desktop,
   fall back to normal scrolling backgrounds on smaller screens. */
@media (max-width: 1024px) {
  [style*="background-attachment"] { background-attachment: scroll !important; }
}

/* Footer social icons */
.social-row{display:flex;gap:13px;justify-content:center;align-items:center;padding:4px 0 14px}
.social-row a{display:inline-flex;width:36px;height:36px;align-items:center;justify-content:center;border-radius:50%;border:none;background:var(--logo-green);color:#fff;transition:background .2s,transform .2s}
.social-row a:hover{transform:translateY(-2px)}
.social-row a[aria-label*="Facebook"]:hover{background:#1877F2}
.social-row a[aria-label*="LinkedIn"]:hover{background:#0A66C2}
.social-row a[aria-label*="Instagram"]:hover{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.social-row a[aria-label*="Pinterest"]:hover{background:#E60023}
.social-row svg{width:17px;height:17px;fill:currentColor;display:block}