/* ============================================================================
   Boundless LP Design System — COMPONENTS
   ----------------------------------------------------------------------------
   The base layer under lp-wp.css: reset, type patterns, buttons, the form
   shell, the pull quote and reveal-on-scroll. Consumes tokens.css exclusively
   — no raw color/size values here.

   Weight discipline: ONLY var(--w-light|--w-med|--w-bold) → 300/500/700.
   The Typekit kit has no other faces.
   ========================================================================== */
/* ===== Reset & base ===== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);font-weight:var(--w-light);
  font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--red);text-decoration:none}
a:hover{text-decoration:underline}
strong,b{font-weight:var(--w-bold)}
:focus-visible{outline:3px solid var(--charcoal);outline-offset:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--charcoal);color:var(--ink-invert);padding:var(--sp-sm) var(--sp-md)}
.skip-link:focus{left:0}
/* ===== Type patterns =====
   The kicker is the spaced-caps eyebrow, a core brand device on the site and in emails. */
.sec-kicker{display:block;font-size:var(--fs-micro);font-weight:var(--w-bold);letter-spacing:var(--ls-kicker);text-transform:uppercase;color:var(--red);margin-bottom:var(--sp-sm)}
.sec-title{
  font-size:var(--fs-h2);font-weight:var(--w-bold);line-height:var(--lh-head);
  letter-spacing:var(--ls-head);text-transform:uppercase;color:var(--ink-strong);
  margin-bottom:var(--sp-sm);
}
.sec-sub{font-size:var(--fs-lead);color:var(--ink-soft);max-width:660px;margin-bottom:var(--sp-xl)}
h3{font-size:var(--fs-h3);font-weight:var(--w-bold);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase;color:var(--ink-strong)}
h4{font-size:var(--fs-h4);font-weight:var(--w-med);line-height:var(--lh-head);letter-spacing:var(--ls-head);text-transform:uppercase;color:var(--ink-strong)}
/* ===== Buttons =====
   Square (radius 0 = brand), ≥ tap-target height, chevron glyph drawn in CSS
   (theirs is a PNG background-image — dies off-domain and can't recolor).
   Red = conversion action on LPs (the site's own forms submit charcoal;
   LPs promote the action color). */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:var(--control-h);padding:0 var(--control-pad-x);
  background:var(--red);color:var(--ink-invert);
  font-family:var(--font);font-weight:var(--w-med);font-size:15px;
  letter-spacing:var(--ls-button);text-transform:uppercase;line-height:1.2;
  border:0;border-radius:var(--radius);cursor:pointer;text-align:center;
  transition:background var(--dur-fast) ease-in-out,color var(--dur-fast) ease-in-out,border-color var(--dur-fast) ease-in-out;
}
.btn:hover{background:var(--red-deep);text-decoration:none}
.btn::after{ /* chevron, currentColor, mirrors the theme's arrow glyph */
  content:"";width:7px;height:7px;flex:none;
  border-top:2px solid currentColor;border-right:2px solid currentColor;
  transform:rotate(45deg);
}
.btn--outline{background:var(--white);border:1px solid var(--line-input);color:var(--ink-strong)}
.btn--outline:hover{background:var(--white);color:var(--red);border-color:var(--red)}
.btn--sm{min-height:var(--control-h-sm);padding:0 18px;font-size:13px}
.btn--block{display:flex;width:100%}
.btn:disabled{opacity:.6;cursor:default}
/* ===== Form shell (the conversion surface) =====
   Inputs: 17px text in 52px controls (the theme's: 15px in 40px). */
.form-shell{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lift);padding:34px;
}
@media (max-width:560px){.form-shell{padding:22px 18px}}
.field{margin-bottom:16px}
.field label{
  display:block;font-size:13px;font-weight:var(--w-med);letter-spacing:.14em;
  text-transform:uppercase;color:var(--charcoal);margin-bottom:6px;text-align:left;
}
.field input[type=text],.field input[type=email],.field input[type=tel],.field select,.field textarea{
  width:100%;min-height:var(--control-h);padding:var(--input-pad);
  border:1px solid var(--line-input);border-radius:var(--radius);
  font-family:var(--font);font-weight:var(--w-light);font-size:var(--input-fs);
  color:var(--ink);background:var(--white);transition:border-color var(--dur-fast);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--charcoal);box-shadow:0 0 0 3px rgba(46,48,56,.12)}
.form-status{display:none;background:var(--error-bg);border:1px solid var(--red-tint);color:var(--error);font-size:var(--fs-small);text-align:left;padding:10px 14px;margin-bottom:14px}
.privacy-line{font-size:var(--fs-micro);color:var(--ink-soft);margin-top:14px;text-align:center}
/* Pull-quote — traveler quote in Brandon 300 italic (the kit's real italic
   face), attribution in the catalogs' "// " voice. Print used a serif here;
   not adopted — site type is canon. */
.pullquote{max-width:640px;position:relative;padding:6px 0 0 46px}
.pullquote::before{content:"\201C";position:absolute;left:0;top:-2px;font-family:var(--font);font-size:64px;line-height:1;color:var(--gold);font-weight:var(--w-bold)}
.pullquote p{font-family:var(--font-quote);font-weight:var(--w-light);font-style:italic;font-size:clamp(19px,1.9vw,23px);line-height:1.5;color:var(--russet);margin-bottom:10px}
.pullquote cite{display:block;font-style:normal;font-family:var(--font);font-size:13px;font-weight:var(--w-med);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.pullquote cite b{color:var(--gold-text);font-weight:var(--w-med)}
/* ===== Reveal on scroll (JS-gated; no-JS users see everything) ===== */
.js-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity var(--dur-reveal) ease,transform var(--dur-reveal) ease}
.js-ready .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-ready .reveal{opacity:1;transform:none;transition:none}}