/* ==========================================================================
   Fresh Bins - stylesheet
   One file, no build step. Plain CSS.

   HOW THIS FILE IS ORGANIZED
   1.  Color and size tokens   (change colors here, not further down)
   2.  Base styles
   3.  Layout helpers
   4.  Buttons
   5.  Header
   6.  Hero
   7.  Pricing
   8.  Booking form
   9.  About
   10. Footer
   11. Larger screens          (the page is built for a phone first)

   Rules this file keeps to:
   - One corner radius for everything (--radius). No mixing.
   - Every color pair below meets WCAG AA contrast.
   - Sizes start at 18px and go up. Nothing small and thin.
   - z-index scale: 20 = sticky header, 30 = skip link.
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Deep teal. Primary color. */
  --teal-900: #07332F;   /* hero and footer background */
  --teal-800: #0B4A45;   /* buttons, strong text */
  --teal-700: #12655D;   /* headings, featured card, borders */
  --teal-100: #D9E7E3;   /* soft teal tint */

  /* Warm gold. The single accent color. */
  --gold:      #D9A429;  /* button fill only, always with dark teal text */
  --gold-deep: #C9901F;  /* button hover */
  --gold-soft: #F2D491;  /* gold text, only on dark teal backgrounds */

  /* Off white and cream. Never pure white. */
  --cream-050: #F8F6EF;  /* cards, panels, inputs */
  --cream-100: #F1EFE4;  /* page background */
  --cream-200: #E6E2D3;  /* alternate section background */

  /* Text */
  --ink:      #1B2422;   /* body text */
  --ink-soft: #3F4A47;   /* secondary text */
  --hero-muted: #D8D6CB; /* body text on dark teal */

  /* Lines */
  --line:        #D5D0BF; /* decorative hairlines */
  --line-strong: #8E856C; /* form borders, needs to be visible */

  /* One radius for every rounded thing on the page. */
  --radius: 12px;

  /* Page width */
  --wrap: 1080px;
}


/* ==========================================================================
   2. BASE
   ========================================================================== */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--cream-100);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.125rem;   /* 18px */
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.75rem, 4.5vw, 2.5rem);
}

h3 {
  font-size: 1.25rem;
}

p {
  margin: 0 0 1rem;
}

a {
  color: var(--teal-800);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Visible focus ring everywhere. Never remove this. */
:focus-visible {
  outline: 3px solid var(--teal-700);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On dark teal the teal ring would disappear, so switch to gold. */
.hero :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--gold-soft);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  padding: 0.75rem 1.25rem;
  background: var(--teal-900);
  color: var(--cream-100);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}

.skip-link:focus {
  left: 0;
}


/* ==========================================================================
   3. LAYOUT HELPERS
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section {
  padding: clamp(3.5rem, 9vw, 6rem) 0;
}

section[id],
#top {
  scroll-margin-top: 8rem;
}

/* Short intro paragraph under a section heading. */
.lede {
  max-width: 58ch;
  margin: 1rem 0 0;
  color: var(--ink-soft);
  font-size: 1.125rem;
}

/* Two short sentences read better than one long one. */
.lede + .lede {
  margin-top: 0.5rem;
}

.group-heading {
  margin: 2.5rem 0 1rem;
  color: var(--teal-700);
  font-size: 1.1875rem;
  font-weight: 700;
}

.section-cta {
  margin: 2.5rem 0 0;
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.btn {
  display: inline-block;
  min-height: 3.5rem;
  padding: 1rem 2rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1.1875rem;   /* 19px, big enough to be "large text" for contrast */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 80ms ease;
}

.btn:active {
  transform: translateY(1px);
}

/* Gold on the dark hero. Dark teal text on gold is 6.1 to 1. */
.btn-gold {
  background: var(--gold);
  color: var(--teal-900);
}

.btn-gold:hover {
  background: var(--gold-deep);
}

/* Teal on cream. Cream text on teal is 5.9 to 1. */
.btn-teal {
  background: var(--teal-800);
  color: var(--cream-100);
}

.btn-teal:hover {
  background: var(--teal-700);
}

.btn-block {
  display: block;
  width: 100%;
}

.btn[disabled] {
  opacity: 0.72;
  cursor: wait;
}


/* ==========================================================================
   5. HEADER
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--cream-100);
  border-bottom: 1px solid var(--line);
}

/* Small screens: name and phone on the top row, links on the row below.
   Nothing hides behind a menu button. */
.header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "brand phone"
    "nav   nav";
  align-items: center;
  gap: 0.25rem 1rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.brand {
  grid-area: brand;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--teal-900);
  text-decoration: none;
  white-space: nowrap;
}

/* The logo tile. It carries its own teal square, so the same file works on
   cream and on the dark teal sections. */
.brand-mark {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
}

.nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  color: var(--teal-800);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.nav a:hover {
  background: var(--teal-100);
}

.nav-phone {
  grid-area: phone;
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--teal-900);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.nav-phone:hover {
  background: var(--teal-100);
  border-color: var(--teal-700);
}


/* ==========================================================================
   6. HERO
   ========================================================================== */

.hero {
  background: var(--teal-900);
  color: var(--cream-100);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

/* Text first on a phone, then the photo. Side by side on a wide screen. */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
}

.hero-copy {
  max-width: 34rem;
}

.hero-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Business name front and center: the logo tile, then the name with a gold
   rule under it. */
.hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 1.5rem;
  color: var(--gold-soft);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
}

.hero-brand img {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
}

.hero-brand span {
  padding-bottom: 0.65rem;
  border-bottom: 4px solid var(--gold);
}

.hero-title {
  max-width: 22ch;
  margin: 0 0 1.25rem;
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--cream-100);
}

.hero-sub {
  max-width: 34ch;
  margin: 0 0 2.25rem;
  color: var(--hero-muted);
  font-size: 1.1875rem;
  line-height: 1.6;
}


/* ==========================================================================
   7. PRICING
   ========================================================================== */

.section-pricing {
  background: var(--cream-100);
}

.plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.5rem;
  background: var(--cream-050);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

.plan-when {
  margin: 0;
  color: var(--teal-700);
  font-size: 1.0625rem;
  font-weight: 700;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  margin: 0.25rem 0 0;
  color: var(--teal-900);
  font-size: clamp(2.5rem, 9vw, 2.75rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.plan-cur {
  font-size: 0.7em;
}

.plan-what {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
  font-weight: 600;
}

/* The 2 bin monthly plan. Same shape, stronger color. */
.plan-featured {
  background: var(--teal-700);
  border-color: var(--teal-700);
}

.plan-featured .plan-when {
  color: var(--teal-100);
}

.plan-featured .plan-price,
.plan-featured .plan-what {
  color: var(--cream-100);
}

.plan-tag {
  margin: 0 0 0.25rem;
  color: var(--gold-soft);
  font-size: 1.0625rem;
  font-weight: 700;
}

.extras {
  background: var(--cream-050);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

.extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem 1.5rem;
}

/* One divider between the two rows. Not a border on every row. */
.extra + .extra {
  border-top: 2px solid var(--line);
}

.extra-name {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--teal-900);
}

.extra-note {
  margin: 0.15rem 0 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.extra-price {
  margin: 0;
  flex-shrink: 0;
  color: var(--teal-700);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   8. BOOKING
   ========================================================================== */

.section-booking {
  background: var(--cream-200);
}

.booking-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  counter-increment: step;
  padding-left: 2.75rem;
  margin-bottom: 1.25rem;
  color: var(--ink);
  font-size: 1.125rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--teal-800);
  color: var(--cream-100);
  font-size: 1rem;
  font-weight: 700;
}

.form-panel {
  padding: clamp(1.5rem, 4vw, 2rem);
  background: var(--cream-050);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(11, 74, 69, 0.05), 0 18px 36px -24px rgba(11, 74, 69, 0.35);
}

.field {
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

/* Direct children only, so this does not reach the plan rows below. */
.field > label,
.field > legend {
  display: block;
  margin-bottom: 0.5rem;
  padding: 0;
  color: var(--teal-900);
  font-size: 1.0625rem;
  font-weight: 700;
}

input[type="text"],
input[type="tel"] {
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1rem;
  background: #FDFCF7;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.125rem;
}

input[type="text"]:focus,
input[type="tel"]:focus {
  border-color: var(--teal-700);
}

input[type="text"]:user-invalid,
input[type="tel"]:user-invalid {
  border-color: #9A2C1B;
}

.hint {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

/* Plan choices. Big rows, easy to tap. */
.options {
  display: grid;
  gap: 0.5rem;
}

.option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.875rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  background: #FDFCF7;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.option:hover {
  border-color: var(--teal-700);
}

.option input[type="radio"] {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  accent-color: var(--teal-800);
  flex-shrink: 0;
}

.option-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
}

.option:has(input:checked) {
  background: var(--teal-100);
  border-color: var(--teal-700);
}

.option:has(input:focus-visible) {
  outline: 3px solid var(--teal-700);
  outline-offset: 3px;
}

/* Spam trap. Hidden from people, visible to bots. */
.honeypot {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

.form-status {
  margin: 1.25rem 0 0;
  padding: 1rem 1.25rem;
  background: var(--teal-100);
  border-left: 6px solid var(--teal-800);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

.form-status.is-error {
  background: #F7E3DE;
  border-left-color: #9A2C1B;
}

/* After a successful booking the form is hidden, so drop the top gap. */
.form-panel form[hidden] + .form-status {
  margin-top: 0;
}

.form-status a {
  color: var(--teal-800);
}


/* ==========================================================================
   9. ABOUT
   ========================================================================== */

.section-about {
  background: var(--cream-100);
}

.about-copy {
  max-width: 62ch;
  margin-top: 1rem;
  color: var(--ink);
  font-size: 1.125rem;
}

.gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: 2.5rem 0 1rem;
}

.shot {
  margin: 0;
}

.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--cream-200);
  border-radius: var(--radius);
}

.shot-tag {
  margin-top: 0.75rem;
  color: var(--teal-800);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.about-note {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.0625rem;
}


/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
  background: var(--teal-900);
  color: var(--cream-100);
  padding: clamp(2.5rem, 6vw, 4rem) 0 1.5rem;
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
}

/* The whole logo, words and all. The footer is the only place with room
   for the full lockup. */
.footer-logo {
  width: 11rem;
  height: 11rem;
  margin: 0 0 1rem;
  border-radius: var(--radius);
}

.footer-phone {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--cream-100);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.footer-phone:hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.footer-label {
  margin: 0 0 0.5rem;
  color: var(--gold-soft);
  font-size: 1.0625rem;
  font-weight: 700;
}

.footer-link {
  display: inline-block;
  padding: 0.25rem 0;
  color: var(--cream-100);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 2px;
}

.footer-small {
  max-width: 40ch;
  margin: 0;
  color: var(--hero-muted);
  font-size: 1.0625rem;
}

.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(216, 214, 203, 0.28);
}

.footer-bottom p {
  margin: 0;
  color: var(--hero-muted);
  font-size: 1rem;
}


/* ==========================================================================
   11. LARGER SCREENS
   ========================================================================== */

/* Two columns of price cards, and the form beside its intro text. */
@media (min-width: 640px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .extra {
    padding: 1.5rem 2rem;
  }
}

/* Hero goes side by side only when both halves have room to breathe. */
@media (min-width: 880px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 1.1875rem;   /* 19px */
  }

  section[id],
  #top {
    scroll-margin-top: 6rem;
  }

  /* Header back to a single line under 80px tall. */
  .header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.875rem;
    padding-bottom: 0.875rem;
  }

  .nav {
    flex-wrap: nowrap;
    margin-left: auto;
  }

  .booking-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }

  .footer-inner {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 2.5rem;
  }
}

@media (min-width: 960px) {
  .plans {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .booking-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 4rem;
  }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}