/* ==========================================================================
   WEBLAB shared stylesheet
   Structure: foundations, shell, primitives, homepage, inner pages, enquiry,
   commercial packages, responsive, reduced motion.
   Font families come only from tokens.css variables.
   ========================================================================== */

/* Foundations ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 116px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--wl-ink);
  background: var(--wl-white);
  font-family: var(--font-body);
  font-size: var(--wl-text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a, button { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, ul, ol, dl { margin: 0; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--wl-weight-heading);
  letter-spacing: var(--wl-tracking-heading);
  line-height: 1;
  text-wrap: balance;
}
h1 { font-size: var(--wl-text-h1); line-height: .96; }
h2 { font-size: var(--wl-text-h2); line-height: 1.02; }
h3 { font-size: var(--wl-text-h3); font-weight: var(--wl-weight-subheading); letter-spacing: -0.02em; line-height: 1.15; }
p { color: var(--wl-text); }
strong { font-weight: 600; }
::selection { background: var(--wl-ink); color: var(--wl-white); }
:focus-visible { outline: 3px solid var(--wl-accent); outline-offset: 4px; }
[hidden] { display: none !important; }

.wl-wrap { width: min(var(--wl-width), calc(100% - var(--wl-gutter) * 2)); margin-inline: auto; }
.wl-section { padding-block: var(--wl-section); }
.wl-section--tight { padding-block: var(--wl-section-tight); }

/* Mono microcopy: labels, indices, metadata. Sparingly. */
.wl-mono, .wl-kicker, .wl-breadcrumb, .wl-lifecycle-index, .wl-lifecycle-meta, .wl-service-index,
.wl-service-meta, .wl-process-index, .wl-work-meta, .wl-placeholder-label,
.wl-package-setup, .wl-price-from, .wl-footer-meta, .wl-agency-list span {
  font-family: var(--font-mono);
  font-size: var(--wl-text-mono);
  letter-spacing: .04em;
  line-height: 1.5;
}

/* Shell: header ---------------------------------------------------------- */
.wl-skip { position: absolute; z-index: 20; left: 20px; top: -120px; padding: 12px 18px; background: var(--wl-ink); color: var(--wl-white); font-weight: 600; text-decoration: none; }
.wl-skip:focus { top: 14px; }

.wl-header-band { position: sticky; top: 0; z-index: 15; background: var(--wl-white); border-bottom: 1px solid transparent; }
.wl-header-band[data-wl-stuck] { border-bottom-color: var(--wl-line-soft); }
.wl-sticky-sentinel { display: block; height: 1px; margin-bottom: -1px; }
.wl-header {
  min-height: 92px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.wl-brand { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.wl-logo { width: 148px; }
.wl-nav { display: flex; align-items: center; gap: 4px; }
.wl-nav > a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: var(--wl-text-small); font-weight: 500; text-decoration: none; }
.wl-nav > a:not(.wl-button)::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px;
  background: var(--wl-accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--wl-fast) var(--wl-ease);
}
.wl-nav > a:not(.wl-button):hover::after, .wl-nav > a[aria-current=page]::after { transform: scaleX(1); }
.wl-nav > .wl-button { margin-left: 18px; }
.wl-menu-toggle { display: none; min-height: 44px; padding: 8px 14px; border: 1px solid var(--wl-ink); background: var(--wl-white); font-size: var(--wl-text-small); font-weight: 600; border-radius: var(--wl-radius); }

/* Primitives ------------------------------------------------------------- */
.wl-button {
  display: inline-flex; justify-content: center; align-items: center; gap: 14px;
  min-height: 52px; padding: 14px 24px;
  background: var(--wl-accent); border: 1px solid var(--wl-accent); border-radius: var(--wl-radius);
  color: var(--wl-white); font-size: var(--wl-text-small); font-weight: 600; text-decoration: none; line-height: 1.3;
  transition: background var(--wl-fast) var(--wl-ease), border-color var(--wl-fast) var(--wl-ease), color var(--wl-fast) var(--wl-ease);
}
.wl-button:hover { background: var(--wl-accent-hover); border-color: var(--wl-accent-hover); }
.wl-button--outline { background: transparent; border-color: var(--wl-ink); color: var(--wl-ink); }
.wl-button--outline:hover { background: var(--wl-ink); color: var(--wl-white); }
.wl-button--dark { background: var(--wl-ink); border-color: var(--wl-ink); }
.wl-button--dark:hover { background: var(--wl-ink-hover); border-color: var(--wl-ink-hover); }
.wl-button--light { background: var(--wl-white); border-color: var(--wl-white); color: var(--wl-ink); }
.wl-button--light:hover { background: var(--wl-line); border-color: var(--wl-line); }

.wl-arrow { display: inline-block; font-weight: 400; line-height: 1; transition: transform var(--wl-fast) var(--wl-ease); }
.wl-button:hover .wl-arrow, .wl-text-link:hover .wl-arrow { transform: translateX(4px); }

.wl-text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: var(--wl-text-small); font-weight: 600; text-decoration: none; }
.wl-text-link:hover { text-decoration: underline; text-decoration-color: var(--wl-accent); text-decoration-thickness: 2px; }
.wl-text-link:hover .wl-arrow { color: var(--wl-accent); }

.wl-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; color: var(--wl-body); text-transform: uppercase; letter-spacing: .12em; }
.wl-kicker::before { content: ''; width: 6px; height: 6px; background: var(--wl-accent); flex-shrink: 0; }
.wl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }
.wl-lead { font-size: var(--wl-text-lead); line-height: 1.55; }

.wl-section-head { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 48px 96px; margin-bottom: 64px; }
.wl-section-head h2 { max-width: 620px; }
.wl-section-head p { max-width: 440px; }
.wl-section-head .wl-text-link { margin-top: 18px; }

/* Homepage: hero ----------------------------------------------------------- */
.wl-hero-band { background: var(--wl-hero-bg); }
.wl-hero-band--page { border-bottom: 1px solid var(--wl-line); }
.wl-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; padding-block: clamp(56px, 8vw, 128px) clamp(56px, 7vw, 104px); }
.wl-hero-copy > p { max-width: 540px; margin-top: 32px; }
.wl-hero h1 { max-width: none; }
.wl-hero h1 em { font-style: normal; color: var(--wl-accent); }

/* Lifecycle: build, maintain, improve, support. Typographic, not a dashboard. */
.wl-lifecycle { --wl-marker: 0; border-top: 1px solid var(--wl-ink); }
.wl-lifecycle-steps { list-style: none; padding: 0; margin: 0; }
.wl-lifecycle-step { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: baseline; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--wl-line); text-decoration: none; position: relative; }
.wl-lifecycle-step::before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: var(--wl-accent); transform: scaleX(0); transform-origin: left; }
.wl-lifecycle-index { color: var(--wl-body); }
.wl-lifecycle-name { font-family: var(--font-heading); font-weight: var(--wl-weight-heading); font-size: clamp(28px, 2.6vw, 38px); letter-spacing: -0.03em; line-height: 1; }
.wl-lifecycle-meta { color: var(--wl-body); text-align: right; }
.wl-lifecycle-step:hover .wl-lifecycle-name { color: var(--wl-accent); }
.wl-lifecycle-note { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; font-size: var(--wl-text-micro); }
.wl-lifecycle-note span:last-child { color: var(--wl-accent); white-space: nowrap; flex-shrink: 0; }
@media (prefers-reduced-motion: no-preference) {
  .wl-lifecycle-step::before { animation: wl-marker 9.6s var(--wl-ease) infinite; }
  .wl-lifecycle-step:nth-child(2)::before { animation-delay: 2.4s; }
  .wl-lifecycle-step:nth-child(3)::before { animation-delay: 4.8s; }
  .wl-lifecycle-step:nth-child(4)::before { animation-delay: 7.2s; }
  @keyframes wl-marker {
    0% { transform: scaleX(0); transform-origin: left; }
    8% { transform: scaleX(1); transform-origin: left; }
    25% { transform: scaleX(1); transform-origin: right; }
    32%, 100% { transform: scaleX(0); transform-origin: right; }
  }
}
@media (prefers-reduced-motion: reduce) { .wl-lifecycle-step:first-child::before { transform: scaleX(1); } }

/* Homepage: positioning strip. Full-bleed band, uppercase values, vertical dividers. */
.wl-trust-band { background: var(--wl-soft); }
.wl-trust { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; align-items: center; }
.wl-trust-item { position: relative; display: flex; align-items: center; gap: 16px; padding: 26px 24px 26px 32px; min-width: 0; }
.wl-trust-item:first-child { padding-left: 0; }
.wl-trust-item:last-child { padding-right: 0; }
.wl-trust-item + .wl-trust-item::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 40px; transform: translateY(-50%); background: var(--wl-line-strong); }
.wl-trust-value { font-family: var(--font-heading); font-weight: var(--wl-weight-heading); font-size: clamp(18px, 1.55vw, 22px); letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.wl-trust-label { font-family: var(--font-body); font-size: 10.5px; font-weight: 500; color: var(--wl-body); text-transform: uppercase; letter-spacing: .12em; line-height: 1.35; white-space: nowrap; }

/* Service rows ------------------------------------------------------------- */
.wl-service-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 32px; align-items: center; gap: 24px 40px; padding-block: 26px; border-top: 1px solid var(--wl-line); text-decoration: none; }
.wl-service-row--numbered, .wl-service-row--icon { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.3fr) 32px; }
.wl-service-rows > .wl-service-row:last-child, .wl-service-row:last-of-type { border-bottom: 1px solid var(--wl-line); }
.wl-service-index { color: var(--wl-body); }
.wl-service-icon { display: flex; align-items: center; color: var(--wl-ink); }
.wl-service-icon svg { width: 24px; height: 24px; }
.wl-service-row:hover .wl-service-icon, .wl-service-row:focus-visible .wl-service-icon { color: var(--wl-accent); }
.wl-service-row h3 { font-size: clamp(22px, 1.9vw, 26px); transition: color var(--wl-fast) var(--wl-ease); }
.wl-service-row p { font-size: var(--wl-text-small); max-width: 640px; }
.wl-service-meta { display: block; margin-top: 10px; color: var(--wl-ink); }
.wl-service-row .wl-arrow { justify-self: end; font-size: 24px; color: var(--wl-body); }
.wl-service-row:hover h3 { color: var(--wl-accent); }
.wl-service-row:hover .wl-arrow { transform: translateX(6px); color: var(--wl-accent); }

/* Homepage: selected work --------------------------------------------------- */
.wl-work-section { background: var(--wl-soft); }
.wl-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px 48px; }
.wl-work-item { display: block; text-decoration: none; }
.wl-work-frame { position: relative; aspect-ratio: 16 / 10; width: 100%; max-width: 100%; background: var(--wl-white); border: 1px solid var(--wl-line); display: grid; place-items: center; overflow: hidden; }
.wl-work-frame img { width: 100%; height: 100%; object-fit: cover; }
.wl-placeholder-label { color: var(--wl-body); text-align: center; padding: 24px; }
.wl-placeholder-label--start { text-align: left; padding: 0; }
.wl-work-item h3 { margin-top: 28px; font-size: clamp(24px, 2.2vw, 30px); }
.wl-work-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 12px; color: var(--wl-body); }
.wl-work-item p:not(.wl-work-meta) { margin-top: 14px; font-size: var(--wl-text-small); max-width: 520px; }
.wl-work-item:hover h3 { color: var(--wl-accent); }
.wl-work-item--wide { grid-column: 1 / -1; }
.wl-work-item--wide .wl-work-frame { aspect-ratio: 21 / 9; }

/* Homepage: dark agency section ------------------------------------------- */
.wl-agency { background: var(--wl-dark); color: var(--wl-dark-text); }
.wl-agency p { color: var(--wl-dark-muted); }
.wl-agency .wl-kicker { color: var(--wl-dark-muted); }
.wl-agency-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px 96px; align-items: end; }
.wl-agency-actions { grid-column: 1 / -1; margin-top: 0; }
.wl-agency-actions--right { grid-column: 2; }
.wl-section-more { display: flex; justify-content: flex-end; margin-top: 24px; }
.wl-agency h2 { max-width: 14ch; }
.wl-agency-grid > div > p { font-size: var(--wl-text-lead); max-width: 480px; }
.wl-agency .wl-actions { margin-top: 0; }
.wl-agency .wl-text-link { color: var(--wl-dark-text); }
.wl-agency-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; grid-column: 1 / -1; }
.wl-agency-list li { display: grid; grid-template-columns: 6px 1fr; gap: 16px; align-items: start; padding: 20px 0; border-top: 1px solid var(--wl-dark-line); font-size: var(--wl-text-small); }
.wl-agency-marker { width: 6px; height: 6px; margin-top: 0.6em; background: var(--wl-accent); }
.wl-agency :focus-visible { outline-color: var(--wl-white); }

/* Process ------------------------------------------------------------------ */
.wl-process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px 40px; }
.wl-process--three { grid-template-columns: repeat(3, 1fr); }
.wl-process li { border-top: 1px solid var(--wl-ink); padding-top: 20px; }
.wl-process li > span { font-family: var(--font-mono); font-size: var(--wl-text-mono); letter-spacing: .04em; color: var(--wl-body); }
.wl-process h3 { margin-block: 40px 16px; font-size: 22px; }
.wl-process li > h3:first-child { margin-top: 0; }
.wl-process p { font-size: var(--wl-text-small); }

/* Testimonial placeholder ---------------------------------------------------- */
.wl-quote { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto; gap: 0 96px; align-items: start; padding-block: var(--wl-section-tight); border-top: 1px solid var(--wl-line); }
.wl-quote-label { grid-row: 1 / 3; }
.wl-quote blockquote { grid-column: 2; margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -0.025em; line-height: 1.25; color: var(--wl-ink); }
.wl-quote figcaption { grid-column: 2; margin-top: 28px; font-size: var(--wl-text-small); color: var(--wl-body); }

/* Clients and partners strip: monochrome marks at one height, no links -------- */
.wl-clients { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px 64px; margin-top: clamp(56px, 6vw, 88px); padding-top: 32px; border-top: 1px solid var(--wl-line); }
.wl-clients .wl-kicker { margin-bottom: 0; }
.wl-clients-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 24px 56px; }
.wl-clients-list img { height: auto; width: auto; max-height: 36px; max-width: 150px; filter: grayscale(1); opacity: .62; }

/* Final enquiry ------------------------------------------------------------ */
.wl-enquiry-band { border-top: 1px solid var(--wl-line); }
.wl-enquiry-band--flush { border-top: 0; }
.wl-enquiry { padding-block: clamp(80px, 9vw, 144px); display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px 64px; align-items: end; }
.wl-enquiry h2 { max-width: 16ch; }
.wl-enquiry p { margin-top: 24px; max-width: 480px; font-size: var(--wl-text-lead); }
.wl-enquiry .wl-actions { margin-top: 0; justify-content: flex-end; }
.wl-enquiry--stacked .wl-actions { margin-top: 40px; justify-content: flex-start; }
.wl-enquiry-paths { align-self: end; display: flex; flex-direction: column; }
.wl-enquiry-paths .wl-kicker { margin-bottom: 8px; }
.wl-enquiry-path { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding-block: 12px; border-top: 1px solid var(--wl-line); font-weight: 600; font-size: var(--wl-text-small); text-decoration: none; }
.wl-enquiry-path:last-child { border-bottom: 1px solid var(--wl-line); }
.wl-enquiry-path .wl-arrow { color: var(--wl-body); }
.wl-enquiry-path:hover { color: var(--wl-accent); }
.wl-enquiry-path:hover .wl-arrow { color: var(--wl-accent); transform: translateX(4px); }

/* Footer (dark, uses the supplied inverted logo) ---------------------------- */
.wl-footer { background: var(--wl-ink); color: var(--wl-dark-text); padding-block: 64px 32px; }
.wl-footer p { color: var(--wl-dark-muted); }
.wl-footer-top { display: grid; grid-template-columns: 1fr auto; gap: 40px 64px; align-items: end; }
.wl-footer-top .wl-logo { width: 132px; }
.wl-footer-brand { display: grid; gap: 20px; justify-items: start; }
.wl-footer-email { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--wl-text-small); font-weight: 500; color: var(--wl-dark-text); text-decoration: none; }
.wl-footer-email:hover { text-decoration: underline; text-decoration-color: var(--wl-accent); text-decoration-thickness: 2px; }
.wl-footer-legal { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.wl-footer-legal a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: var(--wl-text-mono); letter-spacing: .04em; color: var(--wl-dark-muted); text-decoration: none; }
.wl-footer-legal a:hover { color: var(--wl-dark-text); text-decoration: underline; }
.wl-footer-nav { display: flex; flex-wrap: wrap; gap: 0 8px; }
.wl-footer-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; font-size: var(--wl-text-small); text-decoration: none; }
.wl-footer-nav a:hover, .wl-footer-nav a[aria-current=page] { text-decoration: underline; text-decoration-color: var(--wl-accent); text-decoration-thickness: 2px; }
.wl-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--wl-dark-line); }
.wl-footer-meta { color: var(--wl-dark-muted); }
.wl-footer :focus-visible { outline-color: var(--wl-white); }

/* Back to top ---------------------------------------------------------------- */
.wl-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 14; display: grid; place-items: center; width: 48px; height: 48px; background: var(--wl-ink); color: var(--wl-white); border: 1px solid var(--wl-dark-line); border-radius: var(--wl-radius); font-size: 20px; line-height: 1; text-decoration: none; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--wl-fast) var(--wl-ease), transform var(--wl-fast) var(--wl-ease), visibility 0s linear var(--wl-fast), background var(--wl-fast) var(--wl-ease); }
.wl-to-top[data-wl-visible] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.wl-to-top:hover { background: var(--wl-accent); border-color: var(--wl-accent); }
.wl-footer { padding-bottom: 88px; }

/* Inner pages -------------------------------------------------------------- */
.wl-page-hero { padding-block: clamp(40px, 5vw, 72px) clamp(56px, 7vw, 104px); }
.wl-breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; color: var(--wl-body); margin-bottom: clamp(40px, 5vw, 72px); text-transform: uppercase; letter-spacing: .1em; }
.wl-breadcrumb a { text-decoration: none; }
.wl-breadcrumb a:hover { text-decoration: underline; }
.wl-page-hero h1 { max-width: 14ch; font-size: clamp(44px, 6.4vw, 92px); }
.wl-page-hero--mark { position: relative; }
.wl-page-hero-mark { position: absolute; right: 0; bottom: clamp(56px, 7vw, 104px); width: clamp(140px, 17vw, 240px); color: var(--wl-line); pointer-events: none; }
.wl-page-hero-mark svg { width: 100%; height: auto; }
.wl-page-hero .wl-lead { max-width: 680px; margin-top: 32px; }
.wl-page-hero-mark--wide { width: clamp(260px, 30vw, 440px); }
.wl-page-hero--wide-mark .wl-lead { max-width: min(680px, calc(100% - clamp(260px, 30vw, 440px) - 48px)); }
.wl-detail-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 96px; }
.wl-detail-grid h2 { max-width: 12ch; }
.wl-prose > * + * { margin-top: 24px; }
.wl-prose p { max-width: 640px; }
.wl-prose h3 { margin-top: 48px; }
.wl-list { list-style: none; padding: 0; margin: 24px 0 0; }
.wl-list li { padding: 16px 0 16px 32px; border-top: 1px solid var(--wl-line); position: relative; }
.wl-list li:last-child { border-bottom: 1px solid var(--wl-line); }
.wl-list li::before { content: ''; position: absolute; left: 0; top: 26px; width: 6px; height: 6px; background: var(--wl-accent); }
.wl-note { padding: 28px 32px; margin-top: 32px; background: var(--wl-soft); border-left: 2px solid var(--wl-ink); font-size: var(--wl-text-small); }
.wl-note strong { display: block; margin-bottom: 8px; color: var(--wl-ink); }
.wl-related { padding-top: 0; }
.wl-related h2 { margin-bottom: 48px; }
.wl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.wl-two-col h2 { font-size: clamp(30px, 3vw, 44px); }
.wl-two-col h3 { margin-bottom: 20px; }
.wl-two-col p + p { margin-top: 20px; }

/* Enquiry form (local only; fields have no form owner) ----------------------- */
.wl-contact-layout { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px 96px; }
.wl-contact-aside h2 { font-size: clamp(26px, 2.4vw, 32px); margin-bottom: 24px; }
.wl-contact-aside p + p { margin-top: 20px; }
.wl-contact-aside .wl-note + p { margin-top: 24px; }
.wl-contact-company { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--wl-line); }
.wl-contact-company .wl-kicker { margin-bottom: 20px; }
.wl-contact-address { font-style: normal; line-height: 1.7; color: var(--wl-text); }
.wl-contact-address strong { color: var(--wl-ink); }
.wl-contact-address a { text-decoration-color: var(--wl-line-strong); }
.wl-contact-ids { display: grid; gap: 12px; margin-top: 24px; }
.wl-contact-ids dt { font-family: var(--font-mono); font-size: var(--wl-text-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wl-body); }
.wl-contact-ids dd { margin: 2px 0 0; font-size: var(--wl-text-small); color: var(--wl-ink); }
.wl-form-heading { font-size: clamp(26px, 2.4vw, 32px); margin-bottom: 36px; }
.wl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.wl-field { display: flex; flex-direction: column; gap: 8px; }
.wl-field label, .wl-field legend { font-size: var(--wl-text-small); font-weight: 600; }
.wl-field--full { grid-column: 1 / -1; }
.wl-field input, .wl-field select, .wl-field textarea { width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px; border: 1px solid var(--wl-input-border); border-radius: var(--wl-radius); background: var(--wl-white); color: var(--wl-ink); }
.wl-field input:focus-visible, .wl-field select:focus-visible, .wl-field textarea:focus-visible { outline-offset: 2px; border-color: var(--wl-ink); }
.wl-field textarea { min-height: 160px; resize: vertical; }
.wl-field small { font-size: var(--wl-text-micro); color: var(--wl-body); }
.wl-field [aria-invalid=true] { border: 2px solid var(--wl-accent); }
.wl-field .wl-error { color: var(--wl-error); font-size: var(--wl-text-micro); }
.wl-optional { font-weight: 400; color: var(--wl-body); }
.wl-form-status { margin-block: 28px; font-size: var(--wl-text-small); }
.wl-text-button { background: none; border: 0; padding: 14px; min-height: 44px; margin-left: 8px; color: var(--wl-ink); text-decoration: underline; text-underline-offset: 4px; }
.wl-review { margin-top: 40px; padding: 32px; border: 1px solid var(--wl-ink); overflow-wrap: anywhere; }
.wl-review h2 { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 16px; }
.wl-review dl { margin: 28px 0; }
.wl-review dt { font-family: var(--font-mono); font-size: var(--wl-text-mono); letter-spacing: .04em; color: var(--wl-body); margin-top: 18px; }
.wl-review dd { margin: 4px 0 0; white-space: pre-wrap; }
.wl-selected-offer { padding: 24px 28px; background: var(--wl-soft); border-left: 2px solid var(--wl-accent); }
.wl-selected-offer .wl-selected-label { font-family: var(--font-mono); font-size: var(--wl-text-mono); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.wl-selected-offer h3 { margin-bottom: 12px; }
.wl-selected-offer [data-wl-offer-price] { font-size: 20px; color: var(--wl-ink); margin-bottom: 12px; }
.wl-selected-offer [data-wl-offer-scope] { font-size: var(--wl-text-small); }

/* Commercial packages: flat columns, hairline separators, no floating cards --- */
.wl-packages-section { border-bottom: 1px solid var(--wl-line); }
.wl-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--wl-ink); }
.wl-packages--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-package { display: flex; flex-direction: column; min-width: 0; padding: 32px 32px 40px 0; margin-right: 32px; border-right: 1px solid var(--wl-line); position: relative; }
.wl-package:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.wl-package--featured::before { content: ''; position: absolute; top: -1px; left: 0; right: 32px; height: 3px; background: var(--wl-accent); }
.wl-package:last-child.wl-package--featured::before { right: 0; }
.wl-package-top { min-height: 120px; }
.wl-package-fit { font-size: var(--wl-text-small); margin-bottom: 20px; }
.wl-package h3 { font-size: clamp(24px, 2.2vw, 30px); }
.wl-package-price { color: var(--wl-ink); margin-top: 28px; line-height: 1.1; }
.wl-package-price strong { font-family: var(--font-heading); font-weight: var(--wl-weight-heading); font-size: clamp(40px, 3.8vw, 56px); letter-spacing: -0.045em; }
.wl-package-price > span { font-size: var(--wl-text-small); color: var(--wl-body); white-space: nowrap; }
.wl-package-price > .wl-price-from { display: block; margin-bottom: 8px; color: var(--wl-body); }
.wl-package-setup { margin-top: 12px; color: var(--wl-body); }
.wl-package-list { list-style: none; padding: 0; margin: 28px 0; }
.wl-package-list li { padding: 12px 0 12px 24px; border-top: 1px solid var(--wl-line); position: relative; font-size: var(--wl-text-small); line-height: 1.5; }
.wl-package-list li::before { content: ''; position: absolute; left: 0; top: 20px; width: 6px; height: 6px; background: var(--wl-ink); }
.wl-package-scope { font-size: var(--wl-text-micro); line-height: 1.6; margin-top: auto; margin-bottom: 28px; }
.wl-package .wl-button { width: 100%; justify-content: space-between; }
.wl-pricing-note { font-size: var(--wl-text-micro); line-height: 1.6; margin-top: 32px; max-width: 880px; }
.wl-service-price { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: var(--wl-text-mono); letter-spacing: .04em; color: var(--wl-ink); }
.wl-diagnostic { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: start; gap: 48px 96px; }
.wl-diagnostic h2 + p { margin-top: 28px; max-width: 480px; font-size: var(--wl-text-lead); }
.wl-diagnostic .wl-text-link { margin-top: 20px; }
.wl-diagnostic .wl-package { padding: 0 0 0 40px; margin: 0; border-right: 0; border-left: 1px solid var(--wl-ink); }
.wl-diagnostic .wl-package .wl-button { width: fit-content; min-width: 260px; }
.wl-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 96px; }
.wl-faq details { border-top: 1px solid var(--wl-line); }
.wl-faq details:last-child { border-bottom: 1px solid var(--wl-line); }
.wl-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 24px; padding-block: 24px; font-weight: 600; }
.wl-faq summary::-webkit-details-marker { display: none; }
.wl-faq summary::after { content: '+'; font-family: var(--font-mono); color: var(--wl-body); }
.wl-faq details[open] summary::after { content: '\2212'; }
.wl-faq details p { font-size: var(--wl-text-small); padding: 0 32px 28px 0; max-width: 600px; }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .wl-nav > a { padding: 0 10px; }
  .wl-nav > .wl-button { margin-left: 10px; padding-inline: 18px; }
  .wl-logo { width: 136px; }
  .wl-hero { gap: 40px; }
  .wl-agency-grid, .wl-detail-grid, .wl-contact-layout, .wl-quote, .wl-faq, .wl-diagnostic { gap: 40px 56px; }
  .wl-process { gap: 40px 28px; }
  .wl-package { padding: 28px 24px 32px 0; margin-right: 24px; }
}

@media (max-width: 1200px) {
  .wl-trust { grid-template-columns: 1fr 1fr; }
  .wl-trust-item { padding: 20px 16px 20px 32px; }
  .wl-trust-item:nth-child(odd) { padding-left: 0; }
  .wl-trust-item:nth-child(odd)::before { display: none; }
  .wl-trust-item:nth-child(n+3) { border-top: 1px solid var(--wl-line); }
}

@media (max-width: 900px) {
  .wl-page-hero-mark { display: none; }
  .wl-header { flex-wrap: wrap; min-height: 80px; padding-block: 16px; }
  .wl-header-band { max-height: 100dvh; overflow-y: auto; }
  [data-wl-header][data-wl-enhanced] .wl-menu-toggle { display: inline-flex; align-items: center; }
  [data-wl-header][data-wl-enhanced] .wl-nav { display: none; }
  .wl-nav { width: 100%; flex-wrap: wrap; gap: 0 8px; }
  [data-wl-header][data-wl-enhanced] .wl-nav[data-wl-open] { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 0 8px; border-top: 1px solid var(--wl-line); }
  .wl-nav[data-wl-open] > a:not(.wl-button) { min-height: 52px; padding: 0; font-size: 18px; border-bottom: 1px solid var(--wl-line); }
  .wl-nav[data-wl-open] > a:not(.wl-button)::after { display: none; }
  .wl-nav[data-wl-open] > a[aria-current=page] { color: var(--wl-accent); }
  .wl-nav[data-wl-open] > .wl-button { margin: 20px 0 8px; }
  .wl-hero { grid-template-columns: 1fr; gap: 56px; align-items: start; }
  .wl-hero h1 { max-width: none; }
  .wl-section-head, .wl-work-grid, .wl-agency-grid, .wl-detail-grid, .wl-contact-layout, .wl-quote, .wl-faq, .wl-diagnostic, .wl-two-col { grid-template-columns: 1fr; }
  .wl-quote { grid-template-rows: auto; gap: 28px; } .wl-quote-label { grid-row: auto; } .wl-quote blockquote, .wl-quote figcaption { grid-column: 1; } .wl-quote figcaption { margin-top: 0; }
  .wl-section-head { gap: 28px; margin-bottom: 48px; }
  .wl-service-row { grid-template-columns: minmax(0, 1fr) 32px; gap: 12px 24px; padding-block: 28px; }
  .wl-service-row--numbered, .wl-service-row--icon { grid-template-columns: 44px minmax(0, 1fr) 32px; }
  .wl-service-row p { grid-column: 1 / -2; }
  .wl-service-row--numbered p, .wl-service-row--icon p { grid-column: 2 / -2; }
  .wl-service-row .wl-arrow { grid-column: -2; grid-row: 1 / span 2; align-self: center; }
  .wl-service-row--numbered .wl-service-index { grid-row: 1; }
  .wl-agency-list { grid-template-columns: 1fr; margin-top: 40px; }
  .wl-agency-actions--right { grid-column: 1; }
  .wl-process, .wl-process--three { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .wl-enquiry { grid-template-columns: 1fr; }
  .wl-enquiry .wl-actions { justify-content: flex-start; }
  .wl-footer-top { grid-template-columns: 1fr; }
  .wl-packages, .wl-packages--two { grid-template-columns: 1fr; border-top: 0; }
  .wl-package { padding: 32px 0 40px; margin-right: 0; border-right: 0; border-top: 1px solid var(--wl-ink); }
  .wl-package:last-child { padding-right: 0; }
  .wl-package--featured::before { right: 0; }
  .wl-package-top { min-height: 0; }
  .wl-package .wl-button { width: fit-content; min-width: 260px; }
  .wl-diagnostic .wl-package { padding: 32px 0 0; border-left: 0; }
  .wl-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .wl-hero { padding-block: 40px 56px; gap: 48px; }
  .wl-hero-copy > p { margin-top: 24px; }
  .wl-actions { margin-top: 32px; gap: 12px 24px; }
  .wl-actions .wl-button { width: 100%; }
  .wl-lifecycle-step { grid-template-columns: 32px minmax(0, 1fr); padding: 18px 0; gap: 8px 16px; }
  .wl-lifecycle-name { font-size: 26px; }
  .wl-lifecycle-meta { grid-column: 2; text-align: left; }
  .wl-lifecycle-note { flex-direction: column; gap: 4px; }
  .wl-trust { grid-template-columns: 1fr; }
  .wl-trust-item { padding: 16px 0; }
  .wl-trust-item::before { display: none !important; }
  .wl-trust-item + .wl-trust-item { border-top: 1px solid var(--wl-line); }
  .wl-trust-value, .wl-trust-label { white-space: normal; }
  .wl-trust-item + .wl-trust-item { border-top: 1px solid var(--wl-line); }
  .wl-service-row h3 { font-size: 24px; }
  .wl-work-grid { gap: 48px; }
  .wl-work-item--wide .wl-work-frame { aspect-ratio: 16 / 10; }
  .wl-process, .wl-process--three { grid-template-columns: 1fr; gap: 32px; }
  .wl-process h3 { margin-block: 20px 12px; }
  .wl-enquiry { padding-block: 64px; }
  .wl-clients { grid-template-columns: 1fr; gap: 20px; }
  .wl-clients-list { justify-content: flex-start; gap: 20px 32px; }
  .wl-clients-list img { max-height: 28px; max-width: 120px; }
  .wl-enquiry .wl-actions .wl-button { width: 100%; }
  .wl-footer { padding-block: 48px 24px; }
  .wl-footer-nav { flex-direction: column; align-items: flex-start; }
  .wl-footer-nav a { padding: 0; }
  .wl-footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 40px; }
  .wl-page-hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .wl-breadcrumb { margin-bottom: 32px; }
  .wl-note { padding: 22px 24px; }
  .wl-review { padding: 24px; }
  .wl-text-button { margin: 8px 0 0; padding-inline: 0; }
  .wl-package .wl-button, .wl-diagnostic .wl-package .wl-button { width: 100%; min-width: 0; }
  .wl-package-price strong { font-size: 44px; }
  .wl-package-scope { margin-top: 0; }
  .wl-selected-offer { padding: 20px; }
  .wl-faq details p { padding-right: 0; }
}

/* Reduced motion: keep every state reachable, remove decorative movement. ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .wl-button:hover .wl-arrow, .wl-text-link:hover .wl-arrow, .wl-service-row:hover .wl-arrow { transform: none; }
}

/* Inner-page final CTA keeps a bare button as its second grid child. */
.wl-enquiry > .wl-button { justify-self: end; }
@media (max-width: 900px) { .wl-enquiry > .wl-button { justify-self: start; } }
@media (max-width: 600px) { .wl-enquiry > .wl-button { width: 100%; } }

/* Space between a section heading and the list that follows it directly. */
h2 + .wl-process, h2 + .wl-list, h2 + .wl-service-row { margin-top: 48px; }

/* Published project gallery and progressive image preview ----------------- */
.wl-gallery-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.wl-project-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 32px; }
.wl-project-grid--all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-project .wl-work-frame { aspect-ratio: 1170 / 800; }
.wl-project .wl-work-frame img { object-fit: contain; }
.wl-project h3 { margin-top: 22px; font-size: clamp(23px, 2vw, 28px); }
.wl-project .wl-work-meta { font-size: 12px; gap: 6px 14px; }
.wl-project-expand { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; background: var(--wl-white); color: var(--wl-ink); border: 1px solid var(--wl-line); }
.wl-project-expand svg { width: 20px; height: 20px; }
.wl-project:hover .wl-project-expand, .wl-project:focus-visible .wl-project-expand { color: var(--wl-accent); }
.wl-project:focus-visible h3 { color: var(--wl-accent); }
.wl-project-preview-open { overflow: hidden; }
.wl-project-dialog { width: min(1220px, calc(100% - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; background: var(--wl-white); color: var(--wl-ink); }
.wl-project-dialog::backdrop { background: rgb(20 20 20 / 85%); }
.wl-project-dialog-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; }
.wl-project-dialog-title { margin: 0; font-family: var(--font-heading); font-weight: var(--wl-weight-subheading); font-size: clamp(19px, 2vw, 26px); letter-spacing: -0.02em; color: var(--wl-ink); }
.wl-project-close { flex-shrink: 0; display: flex; gap: 14px; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid var(--wl-line-strong); background: var(--wl-white); color: var(--wl-ink); font: inherit; cursor: pointer; }
.wl-project-close span { font-size: 24px; line-height: 1; }
.wl-project-dialog-media img { display: block; width: 100%; height: auto; max-height: calc(100dvh - 132px); object-fit: contain; }
@media (max-width: 1100px) {
  .wl-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .wl-project-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-gallery-heading { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 32px; }
  .wl-project-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); }
  .wl-project-dialog-bar { padding: 12px; }
  .wl-project-dialog-media img { max-height: calc(100dvh - 148px); }
}
.wl-project-description { margin-top: 16px; font-size: var(--wl-text-small); }
.wl-project-card { display: flex; flex-direction: column; min-width: 0; }
.wl-project-card .wl-project-description { margin-bottom: 16px; }
.wl-project-action { align-self: flex-start; margin-top: auto; min-height: 44px; }

/* Client-approved testimonials ------------------------------------------- */
.wl-testimonials { background: var(--wl-soft); }
.wl-testimonial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-testimonial { position: relative; display: flex; flex-direction: column; margin: 0; padding: 12px 56px 0 0; }
.wl-testimonial + .wl-testimonial { padding: 12px 0 0 56px; border-left: 1px solid var(--wl-line); }
.wl-testimonial::before { content: "\201C"; display: block; font-family: var(--font-heading); font-weight: var(--wl-weight-heading); font-size: 72px; line-height: .6; height: 36px; color: var(--wl-accent); }
.wl-testimonial blockquote { margin: 0 0 36px; }
.wl-testimonial blockquote p { font-family: var(--font-heading); font-weight: 600; font-size: clamp(19px, 1.6vw, 23px); letter-spacing: -0.015em; line-height: 1.5; color: var(--wl-ink); text-wrap: pretty; }
.wl-testimonial figcaption { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.wl-testimonial-avatar { display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--wl-white); border: 1px solid var(--wl-line); object-fit: cover; font-family: var(--font-mono); font-size: var(--wl-text-mono); letter-spacing: .06em; color: var(--wl-body); }
.wl-testimonial-name, .wl-testimonial-role { display: block; }
.wl-testimonial-name { font-weight: 600; color: var(--wl-ink); }
.wl-testimonial-role { margin-top: 2px; font-size: var(--wl-text-small); line-height: 1.5; color: var(--wl-body); }
@media (max-width: 900px) {
  .wl-testimonial-grid { grid-template-columns: minmax(0, 1fr); }
  .wl-testimonial, .wl-testimonial + .wl-testimonial { padding: 0; border-left: 0; }
  .wl-testimonial + .wl-testimonial { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--wl-line); }
}
}