/* The WorkStation — public site. Design tokens lifted verbatim from the source
   landing bundle: emerald #2c7a24 accent ramp, warm-grey neutrals, Archivo display,
   sharp corners (radius 0), 4/8/12/16/24/32 spacing. */
:root {
  --accent: #2c7a24;
  --accent-100: #eef7ec; --accent-200: #d6ecd2; --accent-300: #b3dbad;
  --accent-400: #7dbf74; --accent-500: #3f9436; --accent-600: #2c7a24;
  --accent-700: #1f5c1a; --accent-800: #174314; --accent-900: #102d0e;

  --bg: #f3f2f2;
  --surface: #eae9e9;
  --card: #ffffff;
  --text: #201e1d;
  --n-100: #f8f4f4; --n-200: #eae7e7; --n-300: #d7d3d3; --n-400: #bab6b6;
  --n-500: #9b9797; --n-600: #7d7979; --n-700: #605d5d; --n-800: #444141; --n-900: #2d2b2b;
  --line: color-mix(in srgb, #201e1d 12%, transparent);

  --font: "Archivo", system-ui, -apple-system, sans-serif;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
  --maxw: 1160px;
  --gutter: 24px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* The UA's `[hidden] { display: none }` loses to any author `display` rule, so
   `.btn { display: inline-flex }` kept hidden buttons on screen as empty boxes. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* height: auto keeps the width/height attributes from fixing the height once CSS narrows
   the width; without it the Visit Us photo was drawn squashed. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--accent-500); outline-offset: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); width: 100%; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-700);
}
.eyebrow svg { width: 15px; height: 15px; }
.muted { color: var(--n-700); }
.small { font-size: 13px; }
.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--accent); color: #fff; padding: 8px 14px; font-weight: 600;
}
.skip:focus { left: 8px; }

/* Buttons — sharp, flat, weighty */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: 14.5px; line-height: 1;
  padding: 13px 22px; border: 2px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .05s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 16px 28px; font-size: 15.5px; }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-700); }
.btn-outline { background: transparent; color: var(--accent-800); border-color: var(--n-600); }
.btn-outline:hover { border-color: var(--accent); background: var(--accent-100); }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--accent-700); }
.link-arrow:hover { gap: 10px; color: var(--accent-800); }
.link-arrow span { transition: transform .15s; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.brand img { height: 50px; width: auto; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 28px; }
.nav-links > a { font-weight: 600; font-size: 15px; color: var(--n-800); }
.nav-links > a:hover { color: var(--accent-700); }
.nav-links .btn { color: #fff; }
.nav-links .btn:hover { color: #fff; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 0; color: var(--text); cursor: pointer; padding: 9px; }
.nav-toggle svg { width: 26px; height: 26px; }

/* Hero */
.hero {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center;
  padding-block: clamp(40px, 7vw, 96px);
}
.hero-copy .eyebrow { margin-bottom: 20px; }
.hero h1 { font-size: clamp(46px, 8vw, 92px); font-weight: 900; letter-spacing: -0.03em; }
.hero-copy > p { font-size: clamp(17px, 2vw, 20px); color: var(--n-700); margin: 22px 0 32px; max-width: 34ch; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-media img { width: 100%; height: auto; box-shadow: var(--shadow-lg); }

/* Stats
   No inline padding, so the rules above and below end where the text does instead of
   overhanging it by the gutter; and no section padding, which stacked on top of each
   stat's own padding and left the row floating in empty space. */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 0; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--maxw) - 2 * var(--gutter));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stat { padding: 32px 8px 32px 24px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-n { display: block; font-size: clamp(34px, 4.5vw, 52px); font-weight: 900; color: var(--accent-600); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat-l { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-700); margin-top: 6px; }

/* Section heads */
.section-head, .space-head { max-width: 640px; margin-bottom: 40px; }
.section-head h2, .space-head h2 { font-size: clamp(32px, 5vw, 46px); margin: 14px 0 0; }
.section-head > p, .space-head > p { color: var(--n-700); margin-top: 16px; font-size: 17px; }
section { padding-block: clamp(48px, 7vw, 88px); }

/* Explore space gallery
   Two columns, not three: the feature image spans both rows on the left and the two
   supporting shots stack on the right. The previous 3x2 grid was authored for FOUR tiles
   and only three exist, so row 2 of columns 2-3 rendered as a large empty block beneath
   the landscape shots.
   An explicit height is what keeps the rows honest — the feature source is 700x1286, and
   with auto rows its natural height drove the whole section, leaving the shorter images
   top-aligned against a tall gap. clamp() keeps it proportional without letting a very
   tall portrait run the section off-screen. */
.gallery {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 16px;
  height: clamp(420px, 52vw, 620px);
}
.gallery figure { overflow: hidden; box-shadow: var(--shadow-md); min-height: 0; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gallery figure:hover img { transform: scale(1.04); }
.g-tall { grid-row: 1 / 3; }

/* Services */
.svc-list { list-style: none; display: flex; flex-direction: column; }
/* Baseline alignment sits the big number on the same line as the heading; top alignment
   dropped it visibly lower. The number is aria-hidden: the <ol> already says the order. */
.svc { display: grid; grid-template-columns: 88px 1fr; gap: 24px; align-items: baseline; padding: 32px 0; border-top: 1px solid var(--line); }
.svc:last-child { border-bottom: 1px solid var(--line); }
.svc-num { font-size: 40px; font-weight: 900; color: var(--accent-300); letter-spacing: -0.03em; }
.svc-body h3 { font-size: 26px; }
.svc-body p { color: var(--n-700); margin: 10px 0 16px; max-width: 62ch; }
/* On a wide screen, stacked title-over-text left the right 40% of every row empty.
   Title on the left, description and link on the right, uses the width and halves the
   section's height. */
@media (min-width: 901px) {
  .svc-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 48px; align-items: baseline; }
  .svc-body p { margin-top: 0; }
  .svc-body .link-arrow { grid-column: 2; justify-self: start; }
}

/* Plans */
/* Membership plans — six visible, the rest behind a button.
   Three columns over two rows is exactly six, so the first screen is a complete block
   rather than a ragged row. Ten plans laid out in full pushed everything below them off
   the page, and the tail of the list is the part nobody was scrolling to anyway.
   Plans past the sixth carry the `hidden` attribute rather than opacity or height: one
   nobody has asked to see should be out of the tab order and unread by a screen reader,
   not merely invisible. */
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* The gap belongs to the button, not the row: once every plan is shown the button is
   `display: none`, so it stops being a flex item and takes its margin with it. */
.plan-more { display: flex; justify-content: center; }
.plan-more button { min-width: 220px; margin-top: 28px; }
/* The empty/error note is a message, not a card — let it span the grid. */
.plan-grid:has(.plan-note) { grid-template-columns: 1fr; }
.plan-card {
  background: var(--card); border: 1px solid var(--n-200); padding: 26px 24px;
  display: flex; flex-direction: column; min-height: 340px; box-shadow: var(--shadow-sm);
  position: relative; transition: box-shadow .18s, border-color .18s, transform .18s;
}
.plan-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: var(--accent-300); }
.plan-card.is-popular { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-200), var(--shadow-md); }
.plan-badge {
  position: absolute; top: -1px; right: -1px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px;
}
.plan-name { font-size: 13px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n-700); }
/* Both lines hold their height when empty (a plan without a subtitle, a custom period), so
   prices and feature lists line up across a row instead of stepping up and down. */
.plan-sub { font-size: 12.5px; color: var(--n-700); margin-top: 4px; min-height: 1lh; }
.plan-price { font-size: 40px; font-weight: 900; color: var(--text); letter-spacing: -0.03em; margin: 16px 0 2px; font-variant-numeric: tabular-nums; }
.plan-period { font-size: 13px; color: var(--n-700); font-weight: 600; min-height: 1lh; }
.plan-feats { list-style: none; margin: 18px 0; display: flex; flex-direction: column; gap: 9px; }
.plan-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.plan-feats li { display: flex; gap: 9px; font-size: 14px; color: var(--n-800); }
.plan-feats svg { width: 17px; height: 17px; color: var(--accent-600); flex: none; margin-top: 1px; }
.plan-card .btn { margin-top: auto; }
.plan-actions .btn { margin-top: 0; }
.plan-note { grid-column: 1 / -1; color: var(--n-700); font-size: 15px; background: var(--card); border: 1px solid var(--n-200); padding: 20px 24px; }

/* Skeletons */
.sk { background: var(--n-200); animation: pulse 1.3s ease-in-out infinite; }
.is-skeleton { pointer-events: none; }
.sk-1 { height: 14px; width: 55%; margin-bottom: 18px; }
.sk-2 { height: 40px; width: 70%; margin-bottom: 24px; }
.sk-3 { height: 42px; width: 100%; margin-top: auto; }
@keyframes pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .sk { animation: none; } }

/* Location */
.location { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.loc-copy h2 { font-size: clamp(30px, 4vw, 42px); margin: 14px 0 20px; }
.loc-copy address { font-style: normal; display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; font-size: 16px; color: var(--n-800); }
.loc-copy address a:hover { color: var(--accent-700); text-decoration: underline; }
.loc-copy .rating { color: var(--accent-700); font-weight: 700; }
.loc-copy .rating span { color: var(--n-700); font-weight: 400; }
.loc-hours { background: var(--accent-900); color: var(--accent-200); padding: clamp(28px, 4vw, 44px); box-shadow: var(--shadow-md); }
.loc-hours-big { font-size: clamp(64px, 9vw, 104px); font-weight: 900; line-height: .9; letter-spacing: -0.04em; color: var(--accent-400); }
.loc-hours-lead { font-size: 18px; color: #fff; margin: 14px 0 32px; }
.loc-hours h3 { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-300); margin-bottom: 8px; }
/* dt/dd sit directly in the <dl> (no wrapper divs, which some screen readers mis-read);
   the two-column grid pairs them into rows. */
.loc-hours dl { display: grid; grid-template-columns: 1fr auto; font-variant-numeric: tabular-nums; }
.loc-hours dt, .loc-hours dd { padding: 12px 0; border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); }
.loc-hours dt { font-weight: 700; color: #fff; }
.loc-hours dd { padding-left: 16px; text-align: right; }

/* Contact */
/* The band runs edge to edge; the grid lives on the inner wrap. With the background on
   the wrap itself it stopped short of both edges and sat on the footer as a stray box. */
.contact { background: var(--surface); }
.contact-inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; align-items: start; }
.contact-copy h2 { font-size: clamp(28px, 4vw, 40px); margin: 14px 0 16px; }
.contact-copy p { color: var(--n-700); }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Grid, not a flex column: in a column every child is its own row, so "(optional)" fell
   onto a line of its own under "Phone". Here the label text and .opt share the first row
   and the field (plus any hint) takes the full width beneath. */
.contact-form label { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 6px 5px; font-weight: 600; font-size: 14px; color: var(--n-800); }
.contact-form label > :not(.opt) { grid-column: 1 / -1; }
.contact-form .opt { color: var(--n-700); font-weight: 400; }
.contact-form input, .contact-form textarea {
  font-family: var(--font); font-size: 16px; color: var(--text);
  background: var(--card); border: 1px solid var(--n-600); padding: 12px 14px; width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus { outline: 3px solid var(--accent-500); outline-offset: 0; border-color: var(--accent); }
.contact-form textarea { resize: vertical; }
.form-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.form-status { font-size: 14px; font-weight: 600; }
.form-status.ok { color: var(--accent-700); }
.form-status.err { color: #b3261e; }
.btn[aria-disabled="true"], .btn:disabled { opacity: .6; cursor: progress; }

/* Footer */
.footer { background: var(--n-900); color: var(--n-300); padding-block: 56px 0; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 40px; }
.footer-brand img { height: 48px; width: auto; margin-bottom: 16px; filter: brightness(0) invert(1); }
.footer-brand p { color: var(--n-400); max-width: 34ch; font-size: 15px; }
.footer-col h4 { font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col a { display: block; color: var(--n-400); padding: 5px 0; font-size: 15px; }
.footer-col a:hover { color: #fff; }
.footer-col .hours { font-size: 14px; color: var(--n-400); }
.footer-col .hours span { color: var(--n-200); font-weight: 700; display: inline-block; min-width: 84px; }
.footer .muted { color: var(--n-500); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 20px; font-size: 13px; color: var(--n-500); position: relative; }
/* Drawn inside the gutters so it ends where the columns above do; a border on the padded
   wrap ran past them. Only after the columns: the blog and receipt pages have none. */
.footer-inner + .footer-legal::before { content: ""; position: absolute; top: 0; inset-inline: var(--gutter); border-top: 1px solid var(--n-800); }
.footer-legal a:hover { color: var(--n-300); }

/* Responsive */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; }
  .hero-media { order: -1; }
  /* A little wider than the photo, cropped from the bottom so the sign stays: at full
     height it pushed the headline and buttons to the bottom of a tablet screen. */
  .hero-media img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
  .location, .contact-inner { grid-template-columns: 1fr; gap: 28px; }
  /* Below this width the split layout crowds; the feature image becomes a full-width
     banner and the two supporting shots sit beneath it. Letting the grid fall back to a
     plain 2-col flow would strand the third image alone in row 2 — the same gap, moved. */
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  /* Rows go back to auto: the desktop's two equal 1fr rows made the thumbnail row as tall
     as the banner, leaving an empty block under the thumbnails. The banner selector needs
     .gallery's weight, or `.gallery figure` wins and it renders 4:3. */
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  .gallery figure { aspect-ratio: 4 / 3; }
  .gallery .g-tall { grid-row: auto; grid-column: 1 / -1; aspect-ratio: 16 / 9; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 16px; margin: 0;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-links .btn { margin-top: 8px; }
  .hero-cta .btn { flex: 1 1 100%; }
  /* One column: two cards on a phone leaves each too narrow to read the price and the
     feature list without squinting. Six still load first, they just stack. */
  .plan-grid { grid-template-columns: 1fr; }
  /* One card per row: nothing to line up with, so the reserved lines would only be gaps. */
  .plan-sub:empty, .plan-period:empty { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { border-left: 0; padding: 22px 0; }
  .stat:nth-child(even) { border-left: 1px solid var(--line); padding-left: 20px; }
  .stat:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .svc { grid-template-columns: 1fr; gap: 8px; }
  .contact-form .row2 { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
}