/* Template demo styles. Each demo sets --d-* colour variables on <body>.
   Demos are light-only on purpose: they show what a client site looks like. */
@font-face { font-family: "Lexend"; src: url("/assets/fonts/lexend-var-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/source-sans-3-var-latin.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root { color-scheme: light; }
*, *::before, *::after { box-sizing: border-box; }
body.demo {
  margin: 0; background: var(--d-bg); color: var(--d-ink);
  font: 400 1.0625rem/1.6 "Source Sans 3", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
}
@media (min-width: 768px) { body.demo { font-size: 1.125rem; } }
.demo h1, .demo h2, .demo h3 { font-family: "Lexend", system-ui, sans-serif; font-weight: 650; letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; }
.demo h1 { font-size: clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem); }
.demo h2 { font-size: clamp(1.625rem, 1.3rem + 1.6vw, 2.375rem); }
.demo h3 { font-size: 1.1875rem; }
.demo p { margin: 0 0 1em; }
.demo a { color: inherit; }
.demo :focus-visible { outline: 3px solid #1460d6; outline-offset: 3px; border-radius: 4px; }
.icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -.2em; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 50; background: #13201a; color: #fff; padding: 12px 20px; border-radius: 999px; }
.skip-link:focus { top: 12px; }
.d-wrap { max-width: 1120px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 768px) { .d-wrap { padding-inline: 32px; } }

/* WebKing demo bar */
.demo-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 16px;
  background: #13201a; color: #e6eee9; font-size: .9375rem;
}
.demo-bar ol { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.demo-bar li:not(:last-child)::after { content: "/"; margin-left: 6px; opacity: .5; }
.demo-bar a { color: #e6eee9; }
.demo-bar__note { margin: 0; opacity: .85; flex: 1 1 260px; }
.demo-bar__cta { background: #f5b324; color: #1c1402 !important; font-weight: 700; text-decoration: none; padding: 10px 18px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }

/* Header */
.d-header { background: var(--d-surface); border-bottom: 1px solid color-mix(in srgb, var(--d-ink) 10%, transparent); position: sticky; top: 0; z-index: 10; }
.d-header__inner { display: flex; align-items: center; gap: 16px; min-height: 68px; }
.d-logo { display: inline-flex; align-items: center; gap: 10px; font: 700 1.125rem/1.1 "Lexend", sans-serif; text-decoration: none; margin-right: auto; letter-spacing: -.02em; }
.d-logo__badge { width: 36px; height: 36px; border-radius: 10px; background: var(--d-primary); color: var(--d-primary-ink); display: grid; place-items: center; }
.d-tag { font: 500 .8125rem "Source Sans 3", sans-serif; color: var(--d-muted); }
.d-nav { display: none; gap: 24px; }
.d-nav a { text-decoration: none; font-weight: 600; }
@media (min-width: 860px) { .d-nav { display: flex; } }
@media (max-width: 520px) { .d-header .d-btn--sm { display: none; } }

/* Buttons */
.d-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px;
  background: var(--d-primary); color: var(--d-primary-ink) !important; border: 2px solid var(--d-primary);
  border-radius: 999px; font: 700 1.0625rem "Source Sans 3", sans-serif; text-decoration: none; cursor: pointer;
}
.d-btn:hover { filter: brightness(1.08); }
.d-btn--sm { min-height: 44px; padding: 0 16px; font-size: 1rem; }
.d-btn--ghost { background: transparent; color: var(--d-ink) !important; border-color: color-mix(in srgb, var(--d-ink) 25%, transparent); }
.d-btn--light { background: var(--d-surface); color: var(--d-ink) !important; border-color: var(--d-surface); }
.d-btn--block { width: 100%; }
.d-link { margin-left: 16px; font-weight: 600; }

/* Hero */
.d-hero { background: var(--d-surface); padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); position: relative; overflow: hidden; }
.d-hero::before {
  content: ""; position: absolute; inset: auto -10% -60% 40%; height: 120%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--d-accent) 45%, transparent), transparent);
  pointer-events: none;
}
.d-hero__inner { position: relative; max-width: 1120px; display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .d-hero__inner { grid-template-columns: 1.5fr 1fr; gap: 56px; } }
.d-card { background: var(--d-surface); border-radius: 20px; padding: 24px; box-shadow: 0 2px 4px rgb(0 0 0 / .04), 0 24px 48px -20px color-mix(in srgb, var(--d-primary) 45%, transparent); border: 1px solid color-mix(in srgb, var(--d-ink) 8%, transparent); }
.d-card__title { display: flex; align-items: center; gap: 8px; font: 650 1.125rem "Lexend", sans-serif; color: var(--d-primary); }
.d-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid color-mix(in srgb, var(--d-ink) 10%, transparent); }
.d-card dt { font-weight: 700; }
.d-card dd { margin: 0; color: var(--d-muted); }
.d-card__row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 600; }
.d-card__row .icon { color: var(--d-primary); }
@media (max-width: 899px) { .d-card { display: none; } }
.d-hero h1 { max-width: 17ch; }
.d-hero__kicker { font-weight: 700; color: var(--d-primary); margin-bottom: 12px; }
.d-hero__sub { font-size: clamp(1.125rem, 1rem + .4vw, 1.3rem); color: var(--d-muted); max-width: 44ch; }
.d-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0; }
.d-trust { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; font-weight: 600; font-size: 1rem; }
.d-trust li { display: inline-flex; align-items: center; gap: 8px; }
.d-trust .icon { color: var(--d-primary); }

/* Sections */
.d-section { padding: clamp(48px, 7vw, 88px) 0; }
.d-section--alt { background: color-mix(in srgb, var(--d-primary) 6%, var(--d-bg)); }
.d-services { display: grid; gap: 16px; }
@media (min-width: 720px) { .d-services { grid-template-columns: 1fr 1fr; gap: 20px; } }
.d-service { background: var(--d-surface); border-radius: 16px; padding: 24px; border-left: 4px solid var(--d-primary); }
.d-service p { margin: 0; color: var(--d-muted); }
.d-prices { list-style: none; padding: 0; margin: 0; max-width: 720px; display: grid; gap: 14px; }
.d-prices li { display: flex; align-items: baseline; gap: 12px; font-size: 1.125rem; }
.d-prices__dots { flex: 1; border-bottom: 2px dotted color-mix(in srgb, var(--d-ink) 25%, transparent); transform: translateY(-4px); }
.d-prices strong { font-family: "Lexend", sans-serif; color: var(--d-primary); }
.d-products { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .d-products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.d-product { background: var(--d-surface); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; }
.d-product__img { aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--d-accent) 55%, var(--d-surface)), color-mix(in srgb, var(--d-primary) 22%, var(--d-surface))); color: var(--d-primary); }
.d-product__img .icon { width: 44%; height: 44%; stroke-width: 1.25; }
.d-product h3 { font-size: 1rem; margin-bottom: 4px; }
.d-product__price { font-weight: 700; margin-top: auto; margin-bottom: 12px; }
.d-about { display: grid; gap: 32px; }
@media (min-width: 860px) { .d-about { grid-template-columns: 1.5fr 1fr; gap: 56px; } }
.d-areas { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.d-areas li { background: var(--d-surface); padding: 6px 14px; border-radius: 999px; font-weight: 600; font-size: 1rem; }
.d-hours { background: var(--d-surface); border-radius: 16px; padding: 24px; }
.d-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 20px; margin: 0; }
.d-hours dt { font-weight: 700; }
.d-hours dd { margin: 0; color: var(--d-muted); }
.d-cta { background: var(--d-primary); color: var(--d-primary-ink); }
.d-cta p { opacity: .9; }
.d-footer { background: var(--d-surface); padding: 24px 0; font-size: .9375rem; color: var(--d-muted); }
.d-footer p { margin: 0; }
.d-about-tpl { background: #13201a; color: #e6eee9; padding: 48px 0 64px; }
.d-about-tpl ul { padding-left: 1.2em; }
.d-about-tpl .d-btn { background: #f5b324; border-color: #f5b324; color: #1c1402 !important; }
.d-about-tpl .d-link { color: #e6eee9; }