/* Generated by Frontend Wireframe Engine — Phase 4
   Client: Springfield Do It Center
   DNA Hash: 314b550b7d84
   Do not edit — regenerate via the engine */

:root {
  /* Typography — humanist-warm-readable */
  --font-heading: "Fraunces", "Recoleta", Georgia, serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --scale-ratio: 1.333;
  --heading-weight: 700;
  --heading-case: none;
  --heading-letterspacing: -0.02em;
  --heading-line-height: 1.05;
  --body-size: 18px;
  --body-weight: 400;
  --body-line-height: 1.6;
  --body-letterspacing: 0;
  --max-line-length: 68ch;

  /* Components — soft-approachable */
  --radius-card: 14px;
  --radius-button: 10px;
  --radius-input: 8px;
  --radius-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(27, 43, 74, 0.04), 0 4px 12px rgba(27, 43, 74, 0.06);
  --shadow-lift: 0 2px 4px rgba(27, 43, 74, 0.05), 0 12px 32px rgba(27, 43, 74, 0.10);
  --shadow-focus: 0 0 0 4px rgba(242, 193, 78, 0.35);
  --border-hairline: 1px solid var(--color-border);

  /* Color — warm-neutral-editorial + unexpected-accent */
  --color-bg-base: #FBF6EE;        /* warm cream */
  --color-bg-surface: #FFFFFF;     /* white card surface */
  --color-bg-elevated: #FDFAF3;    /* slightly warmer surface */
  --color-bg-muted: #F4EDDF;       /* muted warm section */
  --color-text-primary: #1B2030;   /* near-black, warm undertone */
  --color-text-secondary: #5C6071; /* secondary grey */
  --color-text-muted: #8A8F9F;
  --color-border: #E8DFCF;         /* warm beige border */
  --color-border-strong: #D4C5A6;

  --color-accent-primary: #F2C14E; /* butter yellow — signal CTA (unexpected-accent mutation) */
  --color-accent-primary-hover: #E3AF32;
  --color-accent-red: #D4351A;     /* hardware red — secondary trust accent */
  --color-accent-red-hover: #B8290F;
  --color-accent-navy: #1B2B4A;    /* soft deep navy */
  --color-accent-rust: #B85C38;    /* rust — illustrations only */

  /* U-Haul co-brand — used ONLY for U-Haul touch-points */
  --color-uhaul-orange: #FF6900;
  --color-uhaul-orange-hover: #E05A00;
  --color-uhaul-orange-dark: #C14B00;
  --color-uhaul-orange-soft: rgba(255, 105, 0, 0.12);

  --color-success: #3D8B6E;
  --color-warning: #D4351A;

  /* Spacing — balanced */
  --spacing-base: 8px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 40px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
  --spacing-section-desktop: 96px;
  --spacing-section-mobile: 56px;
  --spacing-content-desktop: 32px;
  --spacing-content-mobile: 20px;
  --spacing-paragraph: 1.2em;

  /* Animation — subtle-elegant */
  --transition-speed-fast: 150ms;
  --transition-speed: 250ms;
  --transition-speed-slow: 400ms;
  --transition-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --entrance-duration: 500ms;
  --entrance-easing: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout — modular-tiles */
  --layout-max-width: 1280px;
  --layout-gutter-desktop: 32px;
  --layout-gutter-mobile: 20px;

  /* Texture — subtle-grain */
  --texture-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.4  0 0 0 0 0.2  0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Hero archetype — split-screen-equal */
  --hero-min-height: 620px;
  --hero-min-height-mobile: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   Base styles
═══════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  color: var(--color-text-primary);
  background: var(--color-bg-base);
  background-image: var(--texture-grain);
  background-repeat: repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: 72px; /* room for mobile sticky CTA bar */
}

@media (min-width: 768px) {
  body {
    padding-bottom: 0;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-letterspacing);
  line-height: var(--heading-line-height);
  color: var(--color-text-primary);
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.75rem, 6vw, 5rem);
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 144;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-variation-settings: "SOFT" 50, "WONK" 0, "opsz" 72;
}

h3 {
  font-size: clamp(1.375rem, 2vw, 1.75rem);
}

p {
  margin: 0 0 var(--spacing-paragraph);
  max-width: var(--max-line-length);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-speed) var(--transition-easing);
}

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

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════════
   Layout primitives
═══════════════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding-left: var(--layout-gutter-mobile);
  padding-right: var(--layout-gutter-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--layout-gutter-desktop);
    padding-right: var(--layout-gutter-desktop);
  }
}

.section {
  padding-top: var(--spacing-section-mobile);
  padding-bottom: var(--spacing-section-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--spacing-section-desktop);
    padding-bottom: var(--spacing-section-desktop);
  }
}

.section-tight {
  padding-top: calc(var(--spacing-section-mobile) * 0.6);
  padding-bottom: calc(var(--spacing-section-mobile) * 0.6);
}

@media (min-width: 768px) {
  .section-tight {
    padding-top: calc(var(--spacing-section-desktop) * 0.6);
    padding-bottom: calc(var(--spacing-section-desktop) * 0.6);
  }
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent-red);
  margin-bottom: var(--spacing-md);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.eyebrow::before {
  content: "";
  width: 1.75em;
  height: 2px;
  background: currentColor;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 58ch;
}

/* ═══════════════════════════════════════════════════════════════════════
   Buttons — soft-rounded-fill
═══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  min-height: 48px;
  padding: 0 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--radius-button);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-speed) var(--transition-easing);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-primary {
  background: var(--color-accent-primary);
  color: var(--color-accent-navy);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 16px rgba(242, 193, 78, 0.30);
}

.btn-primary:hover {
  background: var(--color-accent-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04), 0 10px 24px rgba(242, 193, 78, 0.40);
}

.btn-secondary {
  background: var(--color-accent-red);
  color: #FFFFFF;
}

.btn-secondary:hover {
  background: var(--color-accent-red-hover);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}

.btn-ghost:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-text-primary);
}

/* U-Haul CTA variant — used site-wide for anything U-Haul related */
.btn-uhaul {
  background: var(--color-uhaul-orange);
  color: #FFFFFF;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 6px 16px rgba(255, 105, 0, 0.30);
}

.btn-uhaul:hover {
  background: var(--color-uhaul-orange-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08), 0 10px 24px rgba(255, 105, 0, 0.40);
  color: #FFFFFF;
}

.btn-uhaul-ghost {
  background: transparent;
  color: var(--color-uhaul-orange-dark);
  border-color: var(--color-uhaul-orange);
}

.btn-uhaul-ghost:hover {
  background: var(--color-uhaul-orange-soft);
  border-color: var(--color-uhaul-orange-dark);
}

.btn-lg {
  min-height: 56px;
  padding: 0 2rem;
  font-size: 1.0625rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   Cards
═══════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-speed) var(--transition-easing),
              box-shadow var(--transition-speed) var(--transition-easing);
}

.card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

/* ═══════════════════════════════════════════════════════════════════════
   Photo wrapper — real imagery
═══════════════════════════════════════════════════════════════════════ */

.photo {
  position: relative;
  background: var(--color-bg-muted);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin: 0;
  box-shadow: var(--shadow-soft);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms var(--transition-easing);
}

.photo--hover:hover img {
  transform: scale(1.03);
}

.photo__caption {
  position: absolute;
  left: var(--spacing-md);
  bottom: var(--spacing-md);
  background: rgba(27, 32, 48, 0.72);
  color: #FBF6EE;
  padding: 0.4em 0.7em;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   Image placeholders (fallback — when real photography is missing)
═══════════════════════════════════════════════════════════════════════ */

.img-ph {
  position: relative;
  background: var(--color-bg-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: flex;
  align-items: flex-end;
  padding: var(--spacing-md);
}

.img-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 45%, rgba(184, 92, 56, 0.08) 50%, transparent 55%),
    radial-gradient(circle at 30% 30%, rgba(242, 193, 78, 0.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(27, 43, 74, 0.10), transparent 60%);
}

.img-ph-label {
  position: relative;
  z-index: 1;
  background: rgba(27, 32, 48, 0.72);
  color: #FBF6EE;
  padding: 0.5em 0.75em;
  border-radius: 6px;
  backdrop-filter: blur(2px);
}

/* ═══════════════════════════════════════════════════════════════════════
   Utility
═══════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--entrance-duration) var(--entrance-easing),
              transform var(--entrance-duration) var(--entrance-easing);
}

.scroll-reveal.is-in-view {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .scroll-reveal {
    opacity: 1;
    transform: none;
  }
}