/* =====================================================================
   style.css — /web-design-surrey/ landing page
   References tokens.css. Mobile-first.
   ===================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

ul, ol { padding-left: 1.25rem; }
ul.area-list, ul.work-grid, ul.tier ul, ol.steps, .nav-links ul, .footer nav ul {
  list-style: none; padding-left: 0; margin: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--color-bg-inverse); color: var(--color-text-inverse);
  padding: var(--sm) var(--md);
}
.skip:focus { left: var(--md); top: var(--md); z-index: var(--z-toast); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--lg);
}

/* ----- Typography classes ----- */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-mono);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  margin: 0 0 var(--md);
}

.display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(2.25rem, 7vw, 4.75rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin: 0 0 var(--lg);
  font-variation-settings: "opsz" 144, "SOFT" 25, "WONK" 0;
  text-wrap: balance;
}

.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(1.875rem, 4vw, 2.625rem);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-text);
  margin: 0 0 var(--md);
  font-variation-settings: "opsz" 96, "SOFT" 25, "WONK" 0;
  text-wrap: balance;
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  margin: 0 0 var(--sm);
}

.ital-emph {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
  color: var(--color-accent-ink);
}

.lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin: 0 0 var(--xl);
}

.section-sub {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin: 0 0 var(--2xl);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sm);
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  text-decoration: none;
  min-height: 44px;            /* WCAG 2.5.8 target size */
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--color-accent); color: var(--grey-50); }
.btn-primary:hover { background: var(--color-accent-ink); }

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border-strong);
}
.btn-outline:hover { background: var(--color-text); color: var(--grey-50); border-color: var(--color-text); }

.btn-ghost {
  background: transparent;
  color: var(--color-text);
  padding-inline: var(--sm);
}
.btn-ghost:hover { color: var(--color-accent-ink); }

.btn-large { padding: 18px 28px; font-size: 1.0625rem; }

/* ----- NAV ----- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--color-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav.scrolled {
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom-color: var(--color-border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg);
  padding-block: var(--md);
}
.nav-logo {
  display: inline-flex; align-items: center; gap: var(--sm);
  color: var(--color-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.logo-mark {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;            /* ≥38px rule */
  background: var(--color-accent);
  color: var(--grey-50);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  letter-spacing: 0.04em;
  border-radius: var(--radius-md);
}
.logo-word {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: var(--fw-medium);
}
.nav-links {
  display: none;
  gap: var(--lg);
}
.nav-links a {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding-block: var(--sm);
  text-decoration: none;
}
.nav-links a:hover { color: var(--color-text); }
.nav-cta { padding: 10px 18px; min-height: 40px; }

@media (min-width: 720px) {
  .nav-links { display: inline-flex; }
}

/* ----- HERO ----- */
.hero {
  padding-block: clamp(var(--3xl), 10vw, var(--6xl)) clamp(var(--2xl), 6vw, var(--5xl));
  border-bottom: 1px solid var(--color-border);
}
.hero-inner {
  max-width: var(--container-narrow);
  text-align: left;
}
.cta-row {
  display: flex; flex-wrap: wrap;
  gap: var(--md);
  margin-bottom: var(--xl);
}
.hero-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sm);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-text-subtle);
  margin: 0;
  letter-spacing: var(--ls-wide);
}
.hero-meta .dot { color: var(--color-text-muted); }

/* ----- VALUE PROP ----- */
.value { padding-block: var(--4xl); border-bottom: 1px solid var(--color-border); }
.value-inner {
  display: grid;
  gap: var(--3xl);
  grid-template-columns: 1fr;
}
.value-text p {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--color-text);
  max-width: var(--measure);
  margin: 0 0 var(--lg);
}
.value-facts dl {
  margin: 0;
  display: grid;
  gap: var(--lg);
  padding: var(--xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.value-facts dl > div { display: grid; gap: 2px; }
.value-facts dt {
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--color-text-subtle);
  font-weight: var(--fw-medium);
}
.value-facts dd {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--color-text);
  font-weight: var(--fw-medium);
}
@media (min-width: 880px) {
  .value-inner { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); align-items: start; }
}

/* ----- PROCESS ----- */
.process { padding-block: var(--4xl); border-bottom: 1px solid var(--color-border); }
.steps {
  display: grid;
  gap: var(--lg);
  grid-template-columns: 1fr;
  list-style: none; padding: 0; margin: 0;
  counter-reset: step;
}
.step {
  border: 1px solid var(--color-border);
  padding: var(--xl);
  border-radius: var(--radius-md);
  background: var(--color-bg-alt);
}
.step-num {
  font-family: var(--font-body);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  color: var(--color-accent-ink);
  display: block;
  margin-bottom: var(--md);
}
.step-h { margin: 0 0 var(--sm); font-size: var(--fs-xl); }
.step p { color: var(--color-text-muted); margin: 0; line-height: 1.55; }
@media (min-width: 880px) {
  .steps { grid-template-columns: repeat(4, 1fr); }
}

/* ----- WORK ----- */
.work { padding-block: var(--4xl); border-bottom: 1px solid var(--color-border); }
.work-grid {
  display: grid;
  gap: var(--lg);
  grid-template-columns: 1fr;
  list-style: none; padding: 0; margin: 0;
}
.work-card {
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  padding: var(--xl);
  border-radius: var(--radius-md);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.work-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.work-card h3 { margin: 0 0 var(--sm); font-size: var(--fs-xl); }
.work-card p { color: var(--color-text-muted); margin: 0 0 var(--md); }
.work-card a {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  color: var(--color-accent-ink);
}
@media (min-width: 720px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .work-grid { grid-template-columns: repeat(4, 1fr); } }

/* ----- PRICING ----- */
.pricing { padding-block: var(--4xl); border-bottom: 1px solid var(--color-border); }
.tier-grid {
  display: grid; gap: var(--lg);
  grid-template-columns: 1fr;
}
.tier {
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--2xl) var(--xl);
  display: grid;
  gap: var(--lg);
  align-content: start;
}
.tier-featured {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
  position: relative;
}
.tier h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-2xl);
  margin: 0 0 var(--xs);
}
.tier-flag {
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
  color: var(--color-accent-ink);
  margin: 0 0 var(--sm);
}
.tier-price {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-medium);
  line-height: 1;
  margin: 0 0 var(--xs);
}
.tier-price span { font-size: var(--fs-2xl); vertical-align: 0.4em; color: var(--color-text-muted); margin-right: 2px; }
.tier-sub { color: var(--color-text-muted); font-size: var(--fs-sm); margin: 0; }
.tier ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tier ul li {
  padding-left: 1.5em;
  position: relative;
  color: var(--color-text-muted);
}
.tier ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 12px; height: 1.5px;
  background: var(--color-accent);
}
.pricing-fine {
  max-width: var(--measure);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin: var(--2xl) 0 0;
}
@media (min-width: 880px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }

/* ----- LOCAL TRUST ----- */
.local { padding-block: var(--4xl); border-bottom: 1px solid var(--color-border); }
.local-inner {
  display: grid;
  gap: var(--3xl);
  grid-template-columns: 1fr;
}
.nap {
  font-style: normal;
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: 0;
}
.nap strong { display: block; font-size: var(--fs-lg); margin-bottom: var(--xs); }
.area-list {
  display: grid;
  gap: var(--xs) var(--md);
  grid-template-columns: repeat(2, 1fr);
  margin: 0; padding: 0; list-style: none;
}
.area-list li {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  padding-block: 4px;
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 720px) {
  .local-inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .area-list { grid-template-columns: repeat(3, 1fr); }
}

/* ----- FAQ ----- */
.faq { padding-block: var(--4xl); border-bottom: 1px solid var(--color-border); }
.faq-inner { max-width: var(--container-narrow); margin-inline: auto; }
.faq-list { display: grid; gap: 0; border-top: 1px solid var(--color-border); }
.faq-list details {
  border-bottom: 1px solid var(--color-border);
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: var(--lg) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xl);
  color: var(--color-text);
  min-height: 56px;            /* target size */
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary > span:first-child { flex: 1; }
.faq-list .ico {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-grid; place-items: center;
}
.faq-list details[open] .ico { transform: rotate(45deg); color: var(--color-accent-ink); }
.faq-body {
  padding: 0 0 var(--lg);
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: 1.65;
  max-width: var(--measure);
}
.faq-body p { margin: 0; }

/* ----- CONTACT ----- */
.contact {
  padding-block: var(--4xl);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.contact .h2, .contact .lede, .contact .eyebrow { color: var(--color-text-inverse); }
.contact .eyebrow { color: var(--grey-300); }
.contact .lede { color: var(--grey-300); }
.contact-inner {
  display: grid;
  gap: var(--3xl);
  grid-template-columns: 1fr;
}
.contact-left .ital-emph { color: var(--accent-300); }
.contact-direct {
  display: grid; gap: var(--md);
  margin-top: var(--xl);
}
.big-link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  color: var(--grey-50);
  text-decoration: none;
  border-bottom: 1px solid var(--grey-700);
  padding-block: 6px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.big-link:hover { color: var(--accent-300); border-bottom-color: var(--accent-300); text-decoration: none; }

.contact-form {
  display: grid;
  gap: var(--md);
  background: var(--grey-800);
  padding: var(--xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--grey-700);
}
.field { display: grid; gap: 6px; }
.field label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--grey-300);
}
.field input, .field select, .field textarea {
  background: var(--grey-900);
  color: var(--grey-50);
  border: 1px solid var(--grey-700);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font: inherit;
  width: 100%;
  min-height: 44px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--accent-400);
  outline: 2px solid var(--accent-400);
  outline-offset: 0;
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-fine {
  color: var(--grey-400);
  font-size: var(--fs-sm);
  margin: 0;
}
@media (min-width: 880px) {
  .contact-inner { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* ----- FOOTER ----- */
.footer {
  background: var(--grey-900);
  color: var(--grey-300);
  padding-block: var(--3xl) var(--xl);
}
.footer-inner {
  display: grid;
  gap: var(--xl);
  grid-template-columns: 1fr;
}
.footer-brand strong { color: var(--grey-50); font-family: var(--font-display); font-size: var(--fs-xl); }
.footer-brand p { margin: var(--xs) 0 0; color: var(--grey-400); font-size: var(--fs-sm); max-width: 40ch; }
.footer nav ul { display: grid; gap: var(--sm); list-style: none; padding: 0; margin: 0; }
.footer nav a { color: var(--grey-300); font-size: var(--fs-sm); }
.footer nav a:hover { color: var(--grey-50); }
.footer-nap { font-size: var(--fs-sm); line-height: 1.7; color: var(--grey-400); }
.footer-nap a { color: var(--grey-300); }
.footer-base {
  border-top: 1px solid var(--grey-800);
  margin-top: var(--xl);
  padding-top: var(--lg);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--md);
  font-size: var(--fs-sm);
  color: var(--grey-300);    /* 9.4:1 on grey-900 — WCAG AA body */
}
@media (min-width: 720px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; }
}

/* ----- REVEAL motion (premium tier — fade-up only) ----- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}