/* =====================================================================
   Tamarack Travel Design — site styles
   ---------------------------------------------------------------------
   HOW TO EDIT (for non-developers):
   - Colors live in the ":root" block right below. Change a hex value
     there and it updates everywhere on the site.
   - Copy/wording lives in the .html files, not here.
   - Fonts are Newsreader (serif headings) + Libre Franklin (body).
   ===================================================================== */

:root {
  /* --- Brand colors (edit hex values here) --- */
  --paper:            #FAF7F0; /* page background + input fills          */
  --panel:            #F5F0E6; /* "How I can help" band, footer text     */
  --evergreen-deep:   #1E2D24; /* headings, dark buttons, footer bg      */
  --evergreen-mid:    #2E4034; /* gradient start on dark panels          */
  --evergreen-accent: #50604A; /* italic sub-headings, secondary links   */
  --gold:             #B5832E; /* primary accent: eyebrows, buttons, etc */
  --gold-hover:       #9c6f24; /* darker gold for button/link hover      */
  --gold-seal:        #CDA253; /* logo tree on dark, section numbers     */
  --gold-highlight:   #E7C988; /* seal ring/text on dark panel           */
  --text-dark:        #26251F; /* default text                          */
  --text-primary:     #4f4e46; /* paragraph copy                        */
  --text-secondary:   #6b6a60; /* card / supporting copy                 */
  --muted:            #8C9079; /* small uppercase labels                 */
  --muted-2:          #908A7C;
  --muted-3:          #a09a8c;
  --placeholder:      #b3ad9e; /* input placeholder text                 */
  --sage-dark:        #9aa291; /* footer sub-labels                      */
  --sage-dark-2:      #6f7d6b;
  --earth:            #46401f; /* gradient end on dark panels            */
  --hairline:         #ece3d2; /* card borders, dividers                 */
  --hairline-2:       #e6dfce;
  --hairline-3:       #e0d9c8; /* input borders                          */
  --hairline-4:       #d8d2c4; /* chip borders                           */
  --rule-soft:        #c9c2b2; /* italic text-link underline             */

  /* --- Fonts --- */
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:  'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- Layout --- */
  --container-wide:   1180px; /* nav / home / footer                    */
  --container-narrow: 1080px; /* about / contact                        */
  --page-pad: 40px;           /* horizontal page padding                */

  /* --- Radius / shadow --- */
  --r-btn: 2px;
  --r-card: 3px;
  --r-form: 4px;
  --shadow-card: 0 1px 3px rgba(31,46,37,.05);
  --shadow-form: 0 1px 3px rgba(31,46,37,.06), 0 18px 46px rgba(31,46,37,.07);
  --shadow-portrait: 0 2px 8px rgba(31,46,37,.12), 0 20px 50px rgba(31,46,37,.12);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text-dark);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; }

a { color: inherit; text-decoration: none; }

/* =====================================================================
   Reusable pieces
   ===================================================================== */

.container      { max-width: var(--container-wide);   margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }
.container--narrow { max-width: var(--container-narrow); margin: 0 auto; padding-left: var(--page-pad); padding-right: var(--page-pad); }

.eyebrow {
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* Buttons */
.btn-primary {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  padding: 14px 28px;
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.btn-primary:hover { background: var(--gold-hover); }

.link-serif {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--evergreen-accent);
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 2px;
  transition: color .15s ease, border-color .15s ease;
}
.link-serif:hover { color: var(--evergreen-deep); border-color: var(--evergreen-accent); }

.link-caps {
  display: inline-block;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--evergreen-accent);
  font-weight: 600;
  border-bottom: 1px solid var(--rule-soft);
  padding-bottom: 6px;
  transition: color .15s ease, border-color .15s ease;
}
.link-caps:hover { color: var(--gold); border-color: var(--gold); }

/* =====================================================================
   Navigation (sticky, shared)
   ===================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250,247,240,.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.nav__inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--page-pad);
  gap: 20px;
}
.wordmark { display: flex; align-items: center; gap: 13px; }
.wordmark__icon { width: 24px; height: auto; color: var(--gold); flex: none; }
.wordmark__line1 {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--evergreen-deep);
  line-height: 1;
  padding-left: .2em;
}
.wordmark__line2 {
  font-size: 7.5px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
  margin-top: 4px;
  padding-left: .34em;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav__link {
  color: #3f3e37;
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
  transition: color .15s ease, border-color .15s ease;
}
.nav__link:hover { color: var(--evergreen-deep); }
.nav__link.is-active {
  color: var(--evergreen-deep);
  border-bottom: 2px solid var(--gold);
}
.nav__cta {
  background: var(--evergreen-deep);
  color: var(--panel);
  padding: 10px 20px;
  border-radius: var(--r-btn);
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 600;
  text-transform: none;
  transition: opacity .15s ease;
}
.nav__cta:hover { opacity: .88; }

/* =====================================================================
   Home — hero
   ===================================================================== */

.hero {
  max-width: var(--container-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  min-height: 588px;
}
.hero__text {
  padding: 96px 56px 96px var(--page-pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 6vw, 58px);
  line-height: 1.04;
  color: var(--evergreen-deep);
  margin: 22px 0 0;
}
.hero__heading em {
  font-style: italic;
  font-weight: 300;
  color: var(--evergreen-accent);
}
.hero__sub {
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-primary);
  margin-top: 24px;
  max-width: 452px;
}
.hero__cta-row {
  display: flex;
  gap: 20px;
  margin-top: 34px;
  align-items: center;
  flex-wrap: wrap;
}
.hero__trust {
  margin-top: 52px;
  border-top: 1px solid var(--hairline-2);
  padding-top: 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero__trust-label {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--placeholder);
  font-weight: 600;
  white-space: nowrap;
}
.hero__trust-list {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--evergreen-accent);
}

/* media panel with brand seal */
.hero__media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--evergreen-mid) 0%, var(--evergreen-deep) 58%, var(--earth) 112%);
  min-height: 360px;
}
.seal-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.seal-ring {
  position: absolute;
  border-radius: 50%;
}
.seal-ring--outer { width: 480px; height: 480px; border: 1px solid rgba(205,162,83,.09); }
.seal-ring--inner { width: 380px; height: 380px; border: 1px solid rgba(205,162,83,.16); }
.seal-svg { width: 240px; height: auto; color: var(--gold-highlight); position: relative; }

/* =====================================================================
   Home — "How I can help"
   ===================================================================== */

.help {
  background: var(--panel);
  border-top: 1px solid var(--hairline);
}
.help__inner { max-width: var(--container-wide); margin: 0 auto; padding: 78px var(--page-pad) 84px; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-head__title {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.2;
  color: var(--evergreen-deep);
  margin-top: 14px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}
.card--specialty { border-top: 3px solid var(--gold); }
.card__spec-head { display: flex; align-items: center; gap: 9px; }
.card__spec-icon { width: 17px; height: auto; color: var(--gold); flex: none; }
.card__label {
  font-size: 8.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
}
.card__label--gold { color: var(--gold); }
.card__label--muted { color: var(--muted); }
.card__title {
  font-family: var(--serif);
  font-size: 21px;
  color: var(--evergreen-deep);
  margin-top: 16px;
  line-height: 1.25;
}
.card__body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-top: 10px;
}
.help__foot { text-align: center; margin-top: 44px; }

/* =====================================================================
   Home — "The way I work"
   ===================================================================== */

.work { max-width: var(--container-wide); margin: 0 auto; padding: 82px var(--page-pad) 90px; }
.work__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.work__item { text-align: center; }
.work__num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  color: var(--gold-seal);
}
.work__title {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--evergreen-deep);
  margin-top: 12px;
}
.work__body {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 10px auto 0;
  max-width: 300px;
}

/* =====================================================================
   About
   ===================================================================== */

.about {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 80px var(--page-pad) 40px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 64px;
  align-items: start;
}
.about__aside { position: sticky; top: 110px; }
.portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-card);
  overflow: hidden;
  background: linear-gradient(160deg, var(--evergreen-mid) 0%, var(--evergreen-deep) 62%, var(--earth) 116%);
  position: relative;
  box-shadow: var(--shadow-portrait);
}
.portrait__texture {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(126deg, transparent, transparent 20px, rgba(245,240,230,.05) 20px, rgba(245,240,230,.05) 21px);
}
.portrait__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: auto;
  color: rgba(205,162,83,.14);
}
.portrait__caption {
  position: absolute;
  bottom: 22px;
  left: 24px;
  right: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: rgba(245,240,230,.66);
}
.about__namecard { margin-top: 20px; }
.about__name { font-family: var(--serif); font-size: 20px; color: var(--evergreen-deep); }
.about__role {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  margin-top: 5px;
}
.about__loc { font-size: 12.5px; color: var(--muted-2); margin-top: 8px; }

.about__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 4.5vw, 40px);
  line-height: 1.14;
  color: var(--evergreen-deep);
  margin: 16px 0 0;
}
.about__lead {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
  color: #2b2a23;
  margin-top: 30px;
}
.about__lead .dropcap {
  float: left;
  font-size: 58px;
  line-height: .72;
  padding: 8px 12px 0 0;
  color: var(--gold);
  font-weight: 500;
}
.about__para {
  font-size: 15px;
  line-height: 1.78;
  color: var(--text-primary);
  margin-top: 18px;
}
.about__para--first { margin-top: 22px; }
.about__signoff {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--evergreen-accent);
  margin-top: 34px;
}
.about__signature { font-family: var(--serif); font-size: 16px; color: var(--evergreen-deep); margin-top: 10px; }
.about__cta { margin-top: 40px; }

/* =====================================================================
   Contact
   ===================================================================== */

.contact {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 80px var(--page-pad) 60px;
  display: grid;
  grid-template-columns: .86fr 1.14fr;
  gap: 60px;
  align-items: start;
}
.contact__intro { padding-top: 6px; }
.contact__heading {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 5vw, 42px);
  line-height: 1.12;
  color: var(--evergreen-deep);
  margin: 16px 0 0;
}
.contact__heading em { font-style: italic; font-weight: 300; color: var(--evergreen-accent); }
.contact__body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-primary);
  margin-top: 22px;
  max-width: 340px;
}
.contact__details {
  margin-top: 38px;
  border-top: 1px solid var(--hairline-2);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact__detail-label {
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-3);
  font-weight: 600;
}
.contact__detail-value { font-family: var(--serif); font-size: 16px; color: var(--evergreen-deep); margin-top: 4px; }

/* form card */
.form-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-form);
  box-shadow: var(--shadow-form);
  padding: 40px 40px 44px;
}
.field { margin-top: 22px; }
.field:first-child { margin-top: 0; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field-row + .field-row,
.field-row ~ .field { margin-top: 22px; }
.label {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 600;
}
.input, .textarea {
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-dark);
  background: var(--paper);
  border: 1px solid var(--hairline-3);
  border-radius: var(--r-btn);
}
.textarea { padding: 14px; line-height: 1.6; resize: vertical; }
.input:focus, .textarea:focus { outline: none; border-color: var(--gold); }
::placeholder { color: var(--placeholder); opacity: 1; }

/* trip-type chips (radio buttons styled as chips — no JS needed) */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.chips__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chip {
  display: inline-block;
  cursor: pointer;
  padding: 11px 18px;
  border-radius: var(--r-btn);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .01em;
  border: 1px solid var(--hairline-4);
  background: #fff;
  color: #3f3e37;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--gold); }
.chips__input:checked + .chip {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
}
.chips__input:focus-visible + .chip {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.form-foot {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.form-foot .btn-primary { padding: 14px 34px; }
.form-foot__note { font-size: 12.5px; color: var(--muted-2); }

/* honeypot field (spam trap) — hidden from humans */
.hp-field { position: absolute; left: -9999px; }

/* confirmation state (thank-you page) */
.confirm {
  min-height: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.confirm__seal { width: 74px; height: auto; color: var(--gold); }
.confirm__title { font-family: var(--serif); font-size: 28px; color: var(--evergreen-deep); margin-top: 24px; }
.confirm__body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin-top: 12px;
  max-width: 340px;
}
.confirm__back { margin-top: 30px; }

/* =====================================================================
   Footer (shared)
   ===================================================================== */

.footer { background: var(--evergreen-deep); color: var(--panel); }
.footer__top {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 56px var(--page-pad) 44px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
}
.footer__brand { display: flex; align-items: center; gap: 14px; }
.footer__icon { width: 34px; height: auto; color: var(--gold-seal); flex: none; }
.footer__wordmark1 {
  font-family: var(--serif);
  font-size: 19px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--panel);
  padding-left: .2em;
}
.footer__wordmark2 {
  font-size: 8px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--sage-dark);
  font-weight: 600;
  margin-top: 5px;
  padding-left: .34em;
}
.footer__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: rgba(245,240,230,.7);
  margin-top: 16px;
  max-width: 280px;
}
.footer__cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer__col { display: flex; flex-direction: column; gap: 11px; font-size: 12.5px; letter-spacing: .06em; }
.footer__col-label {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-dark-2);
  font-weight: 600;
  margin-bottom: 3px;
}
.footer__col a, .footer__col span:not(.footer__col-label) { color: rgba(245,240,230,.85); }
.footer__col a { transition: color .15s ease; }
.footer__col a:hover { color: #fff; }
.footer__bottom { border-top: 1px solid rgba(245,240,230,.12); }
.footer__bottom-inner {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 18px var(--page-pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(245,240,230,.5);
  gap: 16px;
  flex-wrap: wrap;
}

/* =====================================================================
   Responsive
   ===================================================================== */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__text { padding: 64px var(--page-pad) 56px; }
  .hero__media { min-height: 420px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .work__grid { grid-template-columns: 1fr; gap: 44px; max-width: 340px; margin: 0 auto; }
  .about { grid-template-columns: 1fr; gap: 40px; }
  .about__aside { position: static; max-width: 360px; }
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .contact__body, .about__aside { max-width: none; }
}

@media (max-width: 620px) {
  :root { --page-pad: 22px; }
  .nav__inner { flex-wrap: wrap; gap: 14px; }
  .nav__links { gap: 20px; font-size: 11.5px; }
  .card-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; gap: 22px; }
  .form-card { padding: 28px 22px 32px; }
  .footer__top { flex-direction: column; gap: 32px; }
  .footer__cols { gap: 40px; }
}