/* Salal & Slate Landscapes
   Style: Keystone, from the stylebook library. Every section is a rounded panel floating on a pale
   lavender ground, type is Outfit at light weights, and the only saturated colour is one gradient.
   One deliberate change from the style: that gradient is light green instead of amber to coral,
   because this is a landscaper. The token names say leaf where Keystone says ember. Nothing else
   about the style is altered: the same contrast targets, radii, motion and bans apply.
   All values live in this block. Use the variables, never loose numbers. */

:root {
  /* Colour */
  --ks-ground: #eeeef4;
  --ks-white: #ffffff;
  --ks-tint: #e3e4ee;
  --ks-slate: #252a38;
  --ks-slate-deep: #1a1e29;
  --ks-ink: #22252f;
  --ks-muted: #5d626f;
  --ks-muted-on-dark: rgba(238, 238, 244, 0.72);
  --ks-line: #dcdde6;
  --ks-line-on-dark: rgba(238, 238, 244, 0.16);

  /* The accent. Ink on the light stop is 9.3 to 1 and on the deep stop 6.7 to 1, so button
     labels are always ink. --ks-leaf-text is 6.4 to 1 on white and is the only accent that
     carries text on a light panel. --ks-leaf-1 carries small marks on slate. */
  --ks-leaf-1: #b7e08a;
  --ks-leaf-2: #6fbf52;
  --ks-leaf-text: #2f6b2f;
  --ks-leaf-gradient: linear-gradient(100deg, var(--ks-leaf-1), var(--ks-leaf-2));
  --ks-leaf-gradient-hover: linear-gradient(60deg, var(--ks-leaf-1), var(--ks-leaf-2));
  --ks-glow-leaf: radial-gradient(60% 55% at 62% 38%, rgba(143, 210, 100, 0.26), rgba(143, 210, 100, 0) 70%);
  --ks-glow-cool: radial-gradient(70% 60% at 18% 12%, rgba(126, 148, 214, 0.22), rgba(126, 148, 214, 0) 72%);

  --ks-slate-gradient: linear-gradient(165deg, var(--ks-slate), var(--ks-slate-deep));
  --ks-nav-fill: rgba(255, 255, 255, 0.92);
  --ks-hover-shade: rgba(34, 37, 47, 0.14);
  --ks-hover-tint: rgba(34, 37, 47, 0.06);
  --ks-hover-light: rgba(238, 238, 244, 0.16);
  --ks-shadow-panel: 0 30px 60px -40px rgba(34, 37, 47, 0.45);
  --ks-shadow-float: 0 16px 34px -18px rgba(34, 37, 47, 0.28);
  --ks-blur-nav: 14px;

  /* Fonts */
  --ks-font: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --ks-weight-display: 300;
  --ks-weight-body: 400;
  --ks-weight-medium: 500;
  --ks-tracking: -0.006em;
  --ks-tracking-display: -0.035em;
  --ks-tracking-title: -0.025em;
  --ks-tracking-label: 0.1em;

  /* Type scale: size / line height / weight */
  --ks-text-h1: clamp(46px, 6.6vw, 104px);        /* 0.94 / 300 */
  --ks-text-statement: clamp(26px, 2.9vw, 44px);  /* 1.22 / 300 */
  --ks-text-h2: clamp(30px, 3.4vw, 54px);         /* 1.02 / 300 */
  --ks-text-stat: clamp(40px, 4.4vw, 68px);       /* 1.0 / 300, tabular */
  --ks-text-h2-small: clamp(22px, 1.9vw, 28px);   /* 1.15 / 400 */
  --ks-text-h3: 20px;                             /* 1.3 / 500 */
  --ks-text-lead: clamp(16px, 1.2vw, 18px);       /* 1.6 / 400 */
  --ks-text-wordmark: 18px;                       /* 1.0 / 500 */
  --ks-text-body-lg: 17px;                        /* 1.65 / 400 */
  --ks-text-body: 16px;                           /* 1.65 / 400 */
  --ks-text-button: 15px;                         /* 1.0 / 500 */
  --ks-text-small: 13px;                          /* 1.5 / 400 */
  --ks-text-label: 12px;                          /* 1.3 / 500 uppercase */

  --ks-leading-display: 0.94;
  --ks-leading-title: 1.02;
  --ks-leading-statement: 1.22;
  --ks-leading-heading: 1.15;
  --ks-leading-h3: 1.3;
  --ks-leading-lead: 1.6;
  --ks-leading-body: 1.65;
  --ks-leading-label: 1.3;

  /* Spacing */
  --ks-gutter: clamp(8px, 0.9vw, 14px);
  --ks-page-margin: clamp(20px, 3.6vw, 52px);
  --ks-panel-pad: clamp(28px, 4.4vw, 72px);
  --ks-section-y: clamp(64px, 7vw, 104px);
  --ks-section-gap: clamp(32px, 3.6vw, 52px);
  --ks-content-max: 1280px;
  --ks-text-max: 560px;
  --ks-nav-height: 60px;
  --ks-card-pad: 28px;
  --ks-gap-xs: 4px;
  --ks-gap-s: 10px;
  --ks-gap-m: 18px;
  --ks-gap-l: 28px;
  --ks-gap-xl: 44px;

  /* Radius */
  --ks-radius-panel: 36px;
  --ks-radius-media: 28px;
  --ks-radius-card: 24px;
  --ks-radius-tile: 20px;
  --ks-radius-chip: 999px;
  --ks-radius-button: 999px;
  --ks-radius-round: 999px;

  /* Borders */
  --ks-border: 1px;

  /* Shapes */
  --ks-button-height: 50px;
  --ks-button-pad-x: 28px;
  --ks-icon: 20px;
  --ks-icon-small: 16px;
  --ks-tile: 56px;
  --ks-avatar: 44px;
  --ks-dot: 8px;
  --ks-thumb: 180px;
  --ks-chip-pad: 8px 16px;
  --ks-focus-ring: 2px;

  /* Motion */
  --ks-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ks-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ks-dur-link: 0.2s;
  --ks-dur-menu: 0.26s;
  --ks-dur-lift: 0.34s;
  --ks-dur-reveal: 0.75s;
  --ks-dur-count: 1.2s;
  --ks-stagger: 0.08s;
  --ks-drift: 26s;
  --ks-lift: -5px;
  --ks-reveal-rise: 22px;
  --ks-reveal-scale: 0.985;
  --ks-menu-rise: 6px;
  --ks-nudge: 4px;
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; letter-spacing: var(--ks-tracking); }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ks-ground);
  color: var(--ks-ink);
  font-family: var(--ks-font);
  font-size: var(--ks-text-body);
  font-weight: var(--ks-weight-body);
  line-height: var(--ks-leading-body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, blockquote, figure, dl, dd, fieldset, legend { margin: 0; font-weight: inherit; }
fieldset { min-width: 0; padding: 0; border: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; flex: none; }
:focus-visible { outline: var(--ks-focus-ring) solid var(--ks-leaf-text); outline-offset: var(--ks-focus-ring); }
.on-dark :focus-visible { outline-color: var(--ks-leaf-1); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: var(--ks-page-margin); top: var(--ks-gutter); z-index: 110; display: inline-flex; align-items: center; height: var(--ks-button-height); padding: 0 var(--ks-button-pad-x); border-radius: var(--ks-radius-button); background: var(--ks-ink); color: var(--ks-ground); font-size: var(--ks-text-button); font-weight: var(--ks-weight-medium); transform: translateY(-200%); }
.skip:focus { transform: none; }
.icon { width: var(--ks-icon-small); height: var(--ks-icon-small); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon--md { width: var(--ks-icon); height: var(--ks-icon); }
.icon * { vector-effect: non-scaling-stroke; }

/* ===== Type helpers. Display tracking is set on the heading AND its children ===== */
.h1, .h1 * { font-size: var(--ks-text-h1); font-weight: var(--ks-weight-display); line-height: var(--ks-leading-display); letter-spacing: var(--ks-tracking-display); }
.h2, .h2 * { font-size: var(--ks-text-h2); font-weight: var(--ks-weight-display); line-height: var(--ks-leading-title); letter-spacing: var(--ks-tracking-title); }
.statement, .statement * { font-size: var(--ks-text-statement); font-weight: var(--ks-weight-display); line-height: var(--ks-leading-statement); letter-spacing: var(--ks-tracking-title); }
.h2-small, .h2-small * { font-size: var(--ks-text-h2-small); font-weight: var(--ks-weight-body); line-height: var(--ks-leading-heading); letter-spacing: var(--ks-tracking-title); }
.h3 { font-size: var(--ks-text-h3); font-weight: var(--ks-weight-medium); line-height: var(--ks-leading-h3); }
.lead { max-width: var(--ks-text-max); font-size: var(--ks-text-lead); line-height: var(--ks-leading-lead); color: var(--ks-muted); }
.on-dark .lead, .on-dark .muted, .card--slate .lead, .card--slate .muted { color: var(--ks-muted-on-dark); }
.muted { color: var(--ks-muted); }
.small { font-size: var(--ks-text-small); line-height: var(--ks-leading-lead); }
.body-lg { font-size: var(--ks-text-body-lg); line-height: var(--ks-leading-body); }
.label, .label * { font-size: var(--ks-text-label); font-weight: var(--ks-weight-medium); line-height: var(--ks-leading-label); text-transform: uppercase; letter-spacing: var(--ks-tracking-label); }
.accent { color: var(--ks-leaf-text); }
.on-dark .accent { color: var(--ks-leaf-1); }
.line { display: block; }
.text-max { max-width: var(--ks-text-max); }

/* ===== Chips ===== */
.chip { display: inline-flex; align-items: center; gap: var(--ks-gap-s); padding: var(--ks-chip-pad); border: var(--ks-border) solid var(--ks-line); border-radius: var(--ks-radius-chip); background: var(--ks-white); color: var(--ks-ink); font-size: var(--ks-text-label); font-weight: var(--ks-weight-medium); line-height: var(--ks-leading-label); text-transform: uppercase; letter-spacing: var(--ks-tracking-label); white-space: nowrap; }
.chip__dot { width: var(--ks-dot); height: var(--ks-dot); flex: none; border-radius: var(--ks-radius-round); background-image: var(--ks-leaf-gradient); }
.chip__sep { width: var(--ks-border); height: var(--ks-icon-small); flex: none; background: var(--ks-line); }
.chip__muted { color: var(--ks-muted); }
.on-dark .chip, .card--slate .chip { background: none; border-color: var(--ks-line-on-dark); color: var(--ks-ground); }
.on-dark .chip__sep { background: var(--ks-line-on-dark); }
.on-dark .chip__muted { color: var(--ks-muted-on-dark); }
.chips { display: flex; flex-wrap: wrap; gap: var(--ks-gap-s); }

/* ===== Buttons. Labels on the gradient are ink: white fails on the light stop ===== */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--ks-gap-s); height: var(--ks-button-height); padding: 0 var(--ks-button-pad-x); border: var(--ks-border) solid transparent; border-radius: var(--ks-radius-button); font-size: var(--ks-text-button); font-weight: var(--ks-weight-medium); line-height: 1; white-space: nowrap; }
.btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; }
.motion .btn::after { transition: opacity var(--ks-dur-link) var(--ks-ease-in-out); }
.btn--primary { background-image: var(--ks-leaf-gradient); color: var(--ks-ink); }
.btn--primary::after { background-image: var(--ks-leaf-gradient-hover); }
.btn--slate { background: var(--ks-slate); color: var(--ks-ground); }
.btn--slate::after { background: var(--ks-hover-light); }
.btn--light { background: var(--ks-white); color: var(--ks-ink); box-shadow: var(--ks-shadow-float); }
.btn--light::after { background: var(--ks-hover-tint); }
.btn--quiet { border-color: var(--ks-line); color: var(--ks-ink); }
.btn--quiet::after { background: var(--ks-hover-tint); }
.on-dark .btn--quiet { border-color: var(--ks-line-on-dark); color: var(--ks-ground); }
.on-dark .btn--quiet::after { background: var(--ks-hover-light); }
.btn--block { width: 100%; }
@media (hover: hover) { .btn:hover::after { opacity: 1; } }
.btn:focus-visible::after { opacity: 1; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--ks-gap-s); }

.go { display: inline-flex; align-items: center; gap: var(--ks-gap-s); min-height: var(--ks-button-height); font-size: var(--ks-text-button); font-weight: var(--ks-weight-medium); color: var(--ks-ink); white-space: nowrap; }
.go .icon { color: var(--ks-leaf-text); }
.on-dark .go, .card--slate .go { color: var(--ks-ground); }
.on-dark .go .icon, .card--slate .go .icon { color: var(--ks-leaf-1); }
.motion .go .icon { transition: transform var(--ks-dur-link) var(--ks-ease-out); }
@media (hover: hover) { .motion .go:hover .icon { transform: translateX(var(--ks-nudge)); } }
.motion .go:focus-visible .icon { transform: translateX(var(--ks-nudge)); }

/* ===== The floating nav pill ===== */
.nav { position: fixed; top: var(--ks-gutter); left: var(--ks-gutter); right: var(--ks-gutter); z-index: 80; display: flex; justify-content: center; pointer-events: none; }
.nav__pill { pointer-events: auto; display: flex; align-items: center; gap: var(--ks-gap-m); width: 100%; max-width: var(--ks-content-max); height: var(--ks-nav-height); padding-left: var(--ks-gap-l); padding-right: var(--ks-gap-xs); border-radius: var(--ks-radius-button); background: var(--ks-white); box-shadow: var(--ks-shadow-float); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav__pill { background: var(--ks-nav-fill); -webkit-backdrop-filter: blur(var(--ks-blur-nav)); backdrop-filter: blur(var(--ks-blur-nav)); }
}
.wordmark { display: inline-flex; align-items: center; gap: var(--ks-gap-s); min-height: var(--ks-button-height); font-size: var(--ks-text-wordmark); font-weight: var(--ks-weight-medium); line-height: 1; white-space: nowrap; }
.wordmark__mark { width: var(--ks-icon-small); height: var(--ks-icon-small); flex: none; border-radius: var(--ks-radius-round); background-image: var(--ks-leaf-gradient); }
.nav__links { display: flex; align-items: center; gap: var(--ks-gap-xs); margin-left: auto; }
.nav__link { position: relative; display: inline-flex; align-items: center; height: var(--ks-button-height); padding: 0 var(--ks-gap-m); font-size: var(--ks-text-button); font-weight: var(--ks-weight-body); color: var(--ks-muted); }
.motion .nav__link { transition: color var(--ks-dur-link) var(--ks-ease-in-out); }
.nav__link:hover, .nav__link:focus-visible, .nav__link[aria-current="page"] { color: var(--ks-ink); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: var(--ks-gap-m); right: var(--ks-gap-m); bottom: var(--ks-gap-s); height: calc(var(--ks-border) * 2); border-radius: var(--ks-radius-button); background-image: var(--ks-leaf-gradient); }
.nav__cta { margin-left: auto; }
.nav__links + .nav__cta { margin-left: var(--ks-gap-s); }
.burger { display: none; align-items: center; justify-content: center; width: var(--ks-button-height); height: var(--ks-button-height); flex: none; border-radius: var(--ks-radius-round); color: var(--ks-ink); }

/* ===== Menu panel under the pill ===== */
.menu { position: fixed; top: calc(var(--ks-gutter) + var(--ks-nav-height) + var(--ks-gap-s)); left: var(--ks-gutter); right: var(--ks-gutter); z-index: 79; display: flex; justify-content: center; pointer-events: none; }
.menu__panel { pointer-events: auto; width: 100%; max-width: var(--ks-content-max); max-height: calc(100vh - var(--ks-nav-height) - var(--ks-gutter) * 4); overflow-y: auto; padding: var(--ks-gap-s) var(--ks-gap-l) var(--ks-gap-l); border-radius: var(--ks-radius-card); background: var(--ks-white); box-shadow: var(--ks-shadow-float); }
.menu[hidden] { display: none; }
.motion .menu__panel { transform: translateY(calc(var(--ks-menu-rise) * -1)); opacity: 0; transition: opacity var(--ks-dur-menu) var(--ks-ease-in-out), transform var(--ks-dur-menu) var(--ks-ease-out); }
.motion .menu.is-open .menu__panel { transform: none; opacity: 1; }
.menu__item { display: grid; grid-template-columns: var(--ks-tile) minmax(0, 1fr); align-items: center; gap: var(--ks-gap-m); min-height: var(--ks-button-height); padding: var(--ks-gap-m) 0; border-bottom: var(--ks-border) solid var(--ks-line); }
.menu__num { color: var(--ks-muted); font-size: var(--ks-text-small); font-variant-numeric: tabular-nums; }
.menu__label { font-size: var(--ks-text-h3); font-weight: var(--ks-weight-medium); line-height: var(--ks-leading-h3); }
.menu__actions { margin-top: var(--ks-gap-l); }
.menu__actions .btn { flex: 1; }

/* ===== Panels ===== */
.shell { display: flex; flex-direction: column; gap: var(--ks-gutter); padding: var(--ks-gutter); }
.stack { display: flex; flex-direction: column; gap: var(--ks-gutter); }
.panel { position: relative; overflow: hidden; padding: var(--ks-section-y) var(--ks-panel-pad); border-radius: var(--ks-radius-panel); background: var(--ks-white); box-shadow: var(--ks-shadow-panel); scroll-margin-top: calc(var(--ks-nav-height) + var(--ks-gutter) * 2); }
.panel--tint { background: var(--ks-tint); }
.panel--slate { background-image: var(--ks-slate-gradient); color: var(--ks-ground); }
.panel__inner { position: relative; width: 100%; max-width: var(--ks-content-max); margin: 0 auto; }
.glow { position: absolute; inset: 0; pointer-events: none; will-change: transform; }
.glow--leaf { background-image: var(--ks-glow-leaf); }
.glow--cool { background-image: var(--ks-glow-cool); }

/* ===== Centred section head ===== */
.shead { display: grid; justify-items: center; gap: var(--ks-gap-m); margin-bottom: var(--ks-section-gap); text-align: center; }
.shead__title { max-width: 16em; }
.shead--statement .shead__title { max-width: 20em; }
.shead__sub { max-width: var(--ks-text-max); }

/* ===== Cards, tiles, media ===== */
.card { position: relative; padding: var(--ks-card-pad); border-radius: var(--ks-radius-card); background: var(--ks-white); box-shadow: var(--ks-shadow-float); }
.card--flush { padding: 0; overflow: hidden; }
.card--slate { background-image: var(--ks-slate-gradient); color: var(--ks-ground); }
.lift::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--ks-shadow-panel); opacity: 0; pointer-events: none; }
.motion .lift::after { transition: opacity var(--ks-dur-lift) var(--ks-ease-out); }
@media (hover: hover) {
  .motion .lift { transition: transform var(--ks-dur-lift) var(--ks-ease-out); }
  .motion .lift:hover { transform: translateY(var(--ks-lift)); }
  .lift:hover::after { opacity: 1; }
}
.lift:focus-within::after { opacity: 1; }
.tile { display: grid; place-items: center; width: var(--ks-tile); height: var(--ks-tile); flex: none; border-radius: var(--ks-radius-tile); background: var(--ks-ink); color: var(--ks-ground); font-size: var(--ks-text-h3); font-weight: var(--ks-weight-medium); line-height: 1; font-variant-numeric: tabular-nums; }
.on-dark .tile, .card--slate .tile { background: var(--ks-white); color: var(--ks-ink); }
.media { display: block; width: 100%; object-fit: cover; border-radius: var(--ks-radius-media); background: var(--ks-tint); }
.thumb { width: var(--ks-thumb); flex: none; border-radius: var(--ks-radius-tile); object-fit: cover; background: var(--ks-tint); }

/* ===== Reveal contract ===== */
.motion [data-reveal] { transition: opacity var(--ks-dur-reveal) var(--ks-ease-out), transform var(--ks-dur-reveal) var(--ks-ease-out); transition-delay: var(--d, 0s); }
.motion.js-reveal [data-reveal] { opacity: 0; transform: translateY(var(--ks-reveal-rise)) scale(var(--ks-reveal-scale)); }
.motion.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@keyframes ks-rise { from { opacity: 0; transform: translateY(var(--ks-reveal-rise)) scale(var(--ks-reveal-scale)); } to { opacity: 1; transform: none; } }
@keyframes ks-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ===== Hero ===== */
.hero { min-height: 80vh; min-height: 80svh; padding-top: calc(var(--ks-nav-height) + var(--ks-gutter) + var(--ks-panel-pad)); display: flex; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--ks-gap-xl) var(--ks-section-gap); align-items: stretch; }
.hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ks-gap-l); }
.hero__title { margin-top: auto; padding-top: var(--ks-gap-xl); }
.hero__art { position: relative; display: flex; }
.hero__art .media { width: 100%; height: 100%; min-height: calc(var(--ks-thumb) * 2); }
.mark { position: relative; display: inline-block; }
.mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--ks-border) * -2); height: calc(var(--ks-border) * 3); border-radius: var(--ks-radius-button); background-image: var(--ks-leaf-gradient); }
.motion .mark::after { animation: ks-wipe var(--ks-dur-reveal) var(--ks-ease-out) var(--ks-dur-reveal) both; }
.motion .hero [data-load], .motion .phead [data-load] { animation: ks-rise var(--ks-dur-reveal) var(--ks-ease-out) both; animation-delay: calc(var(--i, 0) * var(--ks-stagger)); }

/* Page header panel on the inner pages: the hero shape, shorter */
.phead { min-height: 0; padding-top: calc(var(--ks-nav-height) + var(--ks-gutter) + var(--ks-panel-pad)); }
.phead__inner { display: grid; justify-items: start; gap: var(--ks-gap-l); }
.phead .h1 { max-width: 14em; }

/* ===== Intro statement ===== */
.intro { text-align: center; }
.intro__chips { justify-content: center; margin-top: var(--ks-section-gap); }
.intro__stats { margin-top: var(--ks-section-gap); text-align: left; }

/* ===== Service rows ===== */
.cases { display: grid; }
.case { display: grid; grid-template-columns: var(--ks-tile) minmax(0, 1fr) var(--ks-thumb) auto; align-items: center; gap: var(--ks-gap-m) var(--ks-gap-l); padding: var(--ks-gap-l); }
.case + .case { border-top: var(--ks-border) solid var(--ks-line); }
.case__line { margin-top: var(--ks-gap-xs); }
.case .thumb { aspect-ratio: 16 / 10; }

/* ===== Stats ===== */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.stat { display: flex; flex-direction: column; gap: var(--ks-gap-m); padding: var(--ks-card-pad); }
.stat + .stat { border-left: var(--ks-border) solid var(--ks-line); }
.stat__num { font-size: var(--ks-text-stat); font-weight: var(--ks-weight-display); line-height: var(--ks-leading-title); letter-spacing: var(--ks-tracking-title); font-variant-numeric: tabular-nums; }

/* ===== Split: media beside copy ===== */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ks-gap-xl) var(--ks-section-gap); align-items: center; }
.split--flip .split__media { order: 2; }
.split__media { aspect-ratio: 4 / 3; height: 100%; }
.split__copy { display: grid; justify-items: start; gap: var(--ks-gap-l); }
.points { display: grid; gap: var(--ks-gap-l); }
.points li { display: grid; grid-template-columns: var(--ks-tile) minmax(0, 1fr); gap: var(--ks-gap-m); align-items: start; }
.points p { margin-top: var(--ks-gap-xs); max-width: var(--ks-text-max); }
.checks { display: grid; gap: var(--ks-gap-s); }
.checks li { display: flex; align-items: flex-start; gap: var(--ks-gap-s); }
.checks .icon { margin-top: var(--ks-gap-xs); color: var(--ks-leaf-text); }
.on-dark .checks .icon, .card--slate .checks .icon { color: var(--ks-leaf-1); }

/* ===== Process steps ===== */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-gap-m); }
.step { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ks-gap-m); }
.step p { color: var(--ks-muted); }
.card--slate .step p, .on-dark .step p { color: var(--ks-muted-on-dark); }

/* ===== Reviews ===== */
.stories { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ks-gap-m); }
.story { height: 100%; display: flex; flex-direction: column; gap: var(--ks-gap-l); }
.story__quote { flex: 1; }
.person { display: flex; align-items: center; gap: var(--ks-gap-s); }
.avatar { display: grid; place-items: center; width: var(--ks-avatar); height: var(--ks-avatar); flex: none; border-radius: var(--ks-radius-round); background: var(--ks-tint); color: var(--ks-ink); font-size: var(--ks-text-h3); font-weight: var(--ks-weight-medium); line-height: 1; }
.person__role { margin-top: var(--ks-gap-xs); }
.rating { display: inline-flex; align-items: center; gap: var(--ks-gap-s); }
.rating .icon { fill: currentColor; color: var(--ks-leaf-text); }
.on-dark .rating .icon { color: var(--ks-leaf-1); }

/* ===== Service area ===== */
.areas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--ks-gap-xl) var(--ks-section-gap); align-items: start; }
.areas__copy { display: grid; justify-items: start; gap: var(--ks-gap-l); }
.areas__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-gap-m); }
.area { display: grid; gap: var(--ks-gap-xs); }
.area-check { display: grid; gap: var(--ks-gap-s); width: 100%; max-width: var(--ks-text-max); }
.area-check__row { display: flex; gap: var(--ks-gap-s); }
.area-check__row .field-input { flex: 1; }
.area-result { display: flex; align-items: flex-start; gap: var(--ks-gap-s); font-size: var(--ks-text-small); line-height: var(--ks-leading-lead); color: var(--ks-muted); }
.area-result .icon { margin-top: var(--ks-gap-xs); flex: none; }
.area-in { color: var(--ks-leaf-text); }
.area-out, .area-invalid { color: var(--ks-ink); }

/* ===== Closing panel ===== */
.closing { text-align: center; }
.closing .h2 { margin: 0 auto; max-width: 14em; }
.closing__actions { justify-content: center; margin-top: var(--ks-section-gap); }

/* ===== Before and after slider ===== */
.ba { position: relative; overflow: hidden; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--ks-radius-media); background: var(--ks-tint); touch-action: pan-y; --pos: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: calc(var(--ks-border) * 3); transform: translateX(-50%); background: var(--ks-white); pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: var(--pos); display: grid; place-items: center; width: var(--ks-avatar); height: var(--ks-avatar); transform: translate(-50%, -50%); border-radius: var(--ks-radius-round); background-image: var(--ks-leaf-gradient); color: var(--ks-ink); box-shadow: var(--ks-shadow-float); pointer-events: none; }
.ba__tag { position: absolute; top: var(--ks-gap-m); padding: var(--ks-chip-pad); border-radius: var(--ks-radius-chip); background: var(--ks-nav-fill); color: var(--ks-ink); font-size: var(--ks-text-label); font-weight: var(--ks-weight-medium); line-height: var(--ks-leading-label); text-transform: uppercase; letter-spacing: var(--ks-tracking-label); pointer-events: none; }
.ba__tag--before { left: var(--ks-gap-m); }
.ba__tag--after { right: var(--ks-gap-m); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.ba:has(input:focus-visible) { outline: var(--ks-focus-ring) solid var(--ks-leaf-text); outline-offset: var(--ks-focus-ring); }

/* ===== Featured project ===== */
.feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--ks-gap-xl) var(--ks-section-gap); align-items: center; }
.feature__copy { display: grid; justify-items: start; gap: var(--ks-gap-m); }
.feature__copy .btn, .feature__copy .go { margin-top: var(--ks-gap-s); }
.facts { display: flex; flex-wrap: wrap; gap: var(--ks-gap-xl); margin-top: var(--ks-gap-s); }
.facts dt { font-size: var(--ks-text-label); font-weight: var(--ks-weight-medium); text-transform: uppercase; letter-spacing: var(--ks-tracking-label); color: var(--ks-muted); }
.facts dd { margin: var(--ks-gap-xs) 0 0; font-size: var(--ks-text-h3); font-weight: var(--ks-weight-medium); }
.place { display: inline-flex; align-items: center; gap: var(--ks-gap-s); color: var(--ks-muted); }

/* ===== Services page ===== */
.jump { justify-content: flex-start; }
.motion .jump .chip { transition: border-color var(--ks-dur-link) var(--ks-ease-in-out); }
.jump .chip:hover { border-color: var(--ks-muted); }
.svc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ks-gap-xl) var(--ks-section-gap); align-items: center; }
.svc--flip .svc__media { order: 2; }
.svc__media { aspect-ratio: 4 / 3; height: 100%; }
.svc__copy { display: grid; justify-items: start; gap: var(--ks-gap-m); }
.svc__copy .checks { margin-top: var(--ks-gap-s); }
.svc__note { display: flex; align-items: flex-start; gap: var(--ks-gap-s); max-width: var(--ks-text-max); color: var(--ks-muted); font-size: var(--ks-text-small); line-height: var(--ks-leading-lead); }
.svc__note .icon { margin-top: var(--ks-gap-xs); flex: none; color: var(--ks-leaf-text); }
.svc__from { font-size: var(--ks-text-h3); font-weight: var(--ks-weight-medium); }
.svc__from span { color: var(--ks-muted); font-size: var(--ks-text-small); font-weight: var(--ks-weight-body); }

/* ===== Questions ===== */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--ks-section-gap); align-items: start; }
.faq__item { border-bottom: var(--ks-border) solid var(--ks-line); }
.faq__item:first-child { border-top: var(--ks-border) solid var(--ks-line); }
.faq__item h3 { font: inherit; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--ks-gap-m); padding: var(--ks-gap-l) 0; text-align: left; font-size: var(--ks-text-h3); font-weight: var(--ks-weight-medium); line-height: var(--ks-leading-h3); }
.faq__plus { display: grid; place-items: center; width: var(--ks-avatar); height: var(--ks-avatar); flex: none; border: var(--ks-border) solid var(--ks-leaf-text); border-radius: var(--ks-radius-round); color: var(--ks-leaf-text); }
.motion .faq__plus { transition: transform var(--ks-dur-menu) var(--ks-ease-in-out); }
.faq__q[aria-expanded="true"] .faq__plus { transform: rotate(45deg); }
.faq__a { padding-bottom: var(--ks-gap-l); }
.faq__a p { max-width: var(--ks-text-max); }
.faq-note { display: grid; justify-items: start; gap: var(--ks-gap-s); }
.faq-note .btn { margin-top: var(--ks-gap-s); }

/* ===== Projects page ===== */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ks-gap-m); margin-bottom: var(--ks-section-gap); }
.filter { cursor: pointer; }
.motion .filter { transition: background-color var(--ks-dur-link) var(--ks-ease-in-out), color var(--ks-dur-link) var(--ks-ease-in-out), border-color var(--ks-dur-link) var(--ks-ease-in-out); }
.filter[aria-pressed="true"] { background: var(--ks-slate); border-color: var(--ks-slate); color: var(--ks-ground); }
.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-gap-m); }
.project { height: 100%; display: flex; flex-direction: column; gap: var(--ks-gap-m); }
.project .ba { aspect-ratio: 16 / 11; border-radius: var(--ks-radius-tile); }
.project__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ks-gap-m); }
.project__text { color: var(--ks-muted); }
.project__foot { margin-top: auto; padding-top: var(--ks-gap-s); }

/* ===== Plans page ===== */
.toggle { display: inline-flex; padding: var(--ks-gap-xs); border: var(--ks-border) solid var(--ks-line); border-radius: var(--ks-radius-button); background: var(--ks-white); }
.toggle button { display: inline-flex; align-items: center; height: var(--ks-button-height); padding: 0 var(--ks-button-pad-x); border-radius: var(--ks-radius-button); font-size: var(--ks-text-button); font-weight: var(--ks-weight-medium); color: var(--ks-muted); white-space: nowrap; }
.motion .toggle button { transition: color var(--ks-dur-link) var(--ks-ease-in-out); }
.toggle button[aria-pressed="true"] { background: var(--ks-slate); color: var(--ks-ground); }
.toggle-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ks-gap-m); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ks-gap-m); margin-top: var(--ks-section-gap); }
.plan { height: 100%; display: flex; flex-direction: column; }
.plan__head { display: grid; justify-items: start; gap: var(--ks-gap-s); }
.plan__price { margin-top: var(--ks-gap-l); font-size: var(--ks-text-stat); font-weight: var(--ks-weight-display); line-height: var(--ks-leading-title); letter-spacing: var(--ks-tracking-title); font-variant-numeric: tabular-nums; }
.plan__per { margin-top: var(--ks-gap-s); }
.plan__rule { display: block; height: calc(var(--ks-border) * 3); margin: var(--ks-gap-l) 0; border-radius: var(--ks-radius-button); background: var(--ks-line); }
.plan--featured .plan__rule { background-image: var(--ks-leaf-gradient); }
.card--slate .plan__rule { background-color: var(--ks-line-on-dark); }
.plan__visits { display: flex; align-items: flex-start; gap: var(--ks-gap-s); margin-bottom: var(--ks-gap-l); }
.plan__visits .icon { margin-top: var(--ks-gap-xs); flex: none; }
.plan__list { flex: 1; display: grid; align-content: start; gap: var(--ks-gap-s); margin-bottom: var(--ks-gap-l); }
.plans__note { max-width: 40em; margin: var(--ks-section-gap) auto 0; text-align: center; }
.seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-gap-m); }
.season { height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ks-gap-s); }
.season ul { display: grid; gap: var(--ks-gap-xs); margin-top: var(--ks-gap-s); color: var(--ks-muted); }

/* ===== Forms ===== */
.form-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--ks-section-gap); align-items: start; }
.group + .group { margin-top: var(--ks-section-gap); }
.group__title { margin-bottom: var(--ks-gap-l); }
.field { display: grid; gap: var(--ks-gap-s); }
.field + .field, .field + .row-2, .row-2 + .field, .row-2 + .row-2 { margin-top: var(--ks-gap-l); }
.field__label, .field legend { font-size: var(--ks-text-label); font-weight: var(--ks-weight-medium); text-transform: uppercase; letter-spacing: var(--ks-tracking-label); color: var(--ks-muted); }
.field label { font-size: var(--ks-text-label); font-weight: var(--ks-weight-medium); text-transform: uppercase; letter-spacing: var(--ks-tracking-label); color: var(--ks-muted); }
.field legend { margin-bottom: var(--ks-gap-s); }
.field legend span { display: block; margin-top: var(--ks-gap-xs); text-transform: none; letter-spacing: var(--ks-tracking); font-size: var(--ks-text-small); font-weight: var(--ks-weight-body); }
.row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-gap-l); }
.field-input {
  width: 100%; min-height: var(--ks-button-height); padding: var(--ks-gap-s) var(--ks-gap-m);
  border: var(--ks-border) solid var(--ks-line); border-radius: var(--ks-radius-tile);
  background: var(--ks-white); color: var(--ks-ink);
  font-family: var(--ks-font); font-size: var(--ks-text-body); line-height: var(--ks-leading-lead);
}
.motion .field-input { transition: border-color var(--ks-dur-link) var(--ks-ease-in-out); }
.field-input::placeholder { color: var(--ks-muted); }
.field-input:hover { border-color: var(--ks-muted); }
textarea.field-input { min-height: calc(var(--ks-thumb) - var(--ks-gap-xl)); resize: vertical; }
select.field-input { appearance: none; padding-right: var(--ks-gap-xl); background-image: linear-gradient(45deg, transparent 50%, var(--ks-ink) 50%), linear-gradient(135deg, var(--ks-ink) 50%, transparent 50%); background-position: calc(100% - var(--ks-gap-m) - 5px) 50%, calc(100% - var(--ks-gap-m)) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field__hint { font-size: var(--ks-text-small); line-height: var(--ks-leading-lead); color: var(--ks-muted); }
.field__error { font-size: var(--ks-text-small); line-height: var(--ks-leading-lead); font-weight: var(--ks-weight-medium); color: var(--ks-ink); }
.field__error:empty { display: none; }
.has-error .field-input { border-color: var(--ks-ink); }

/* Selectable chips. The choice is the gradient, the only place it fills a shape here. */
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pick span { display: inline-flex; align-items: center; gap: var(--ks-gap-s); padding: var(--ks-chip-pad); border: var(--ks-border) solid var(--ks-line); border-radius: var(--ks-radius-chip); background: var(--ks-white); font-size: var(--ks-text-label); font-weight: var(--ks-weight-medium); line-height: var(--ks-leading-label); text-transform: uppercase; letter-spacing: var(--ks-tracking-label); }
.motion .pick span { transition: border-color var(--ks-dur-link) var(--ks-ease-in-out); }
.pick .icon { color: var(--ks-muted); }
.pick input:checked + span { border-color: transparent; background-image: var(--ks-leaf-gradient); color: var(--ks-ink); }
.pick input:checked + span .icon { color: var(--ks-ink); }
.pick input:focus-visible + span { outline: var(--ks-focus-ring) solid var(--ks-leaf-text); outline-offset: var(--ks-focus-ring); }

.upload { position: relative; display: flex; align-items: center; gap: var(--ks-gap-m); padding: var(--ks-gap-l); border: var(--ks-border) dashed var(--ks-line); border-radius: var(--ks-radius-tile); cursor: pointer; }
.motion .upload { transition: border-color var(--ks-dur-link) var(--ks-ease-in-out); }
.upload:hover { border-color: var(--ks-muted); }
.upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__title { display: block; font-weight: var(--ks-weight-medium); }
.upload__hint { display: block; font-size: var(--ks-text-small); line-height: var(--ks-leading-lead); color: var(--ks-muted); }
.upload:focus-within { outline: var(--ks-focus-ring) solid var(--ks-leaf-text); outline-offset: var(--ks-focus-ring); }
.file-list { display: grid; gap: var(--ks-gap-xs); font-size: var(--ks-text-small); color: var(--ks-muted); }
.file-list li { display: flex; align-items: center; gap: var(--ks-gap-s); }
.form__submit { display: grid; justify-items: start; gap: var(--ks-gap-s); margin-top: var(--ks-section-gap); padding-top: var(--ks-gap-l); border-top: var(--ks-border) solid var(--ks-line); }
.success { display: grid; justify-items: start; gap: var(--ks-gap-m); }
.success__mark { display: grid; place-items: center; width: var(--ks-tile); height: var(--ks-tile); border-radius: var(--ks-radius-round); background-image: var(--ks-leaf-gradient); color: var(--ks-ink); }
.success .btn { margin-top: var(--ks-gap-s); }
.next { display: grid; gap: var(--ks-gap-l); }
.next li { display: grid; grid-template-columns: var(--ks-tile) minmax(0, 1fr); gap: var(--ks-gap-m); align-items: start; }
.next p { margin-top: var(--ks-gap-xs); color: var(--ks-muted); }
.aside { position: sticky; top: calc(var(--ks-nav-height) + var(--ks-gutter) * 2); display: grid; gap: var(--ks-gap-l); }
.aside__call { display: grid; justify-items: start; gap: var(--ks-gap-xs); }
.aside__call .call-link { display: inline-flex; align-items: center; gap: var(--ks-gap-s); font-size: var(--ks-text-h2-small); line-height: var(--ks-leading-heading); }

/* ===== Footer ===== */
.site-foot { padding-top: var(--ks-panel-pad); padding-bottom: var(--ks-panel-pad); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: var(--ks-gap-xl) var(--ks-section-gap); padding-bottom: var(--ks-section-gap); border-bottom: var(--ks-border) solid var(--ks-line); }
.footer__about { display: grid; justify-items: start; gap: var(--ks-gap-m); }
.footer__about p { max-width: 34ch; color: var(--ks-muted); }
.footer__col { display: grid; align-content: start; gap: var(--ks-gap-s); }
.footer__col ul { display: grid; gap: var(--ks-gap-s); }
.footer__col a, .footer__col li { color: var(--ks-muted); font-size: var(--ks-text-small); }
.motion .footer__col a { transition: color var(--ks-dur-link) var(--ks-ease-in-out); }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--ks-ink); }
.footer__contact li { display: flex; align-items: center; gap: var(--ks-gap-s); }
.footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ks-gap-s) var(--ks-gap-l); padding-top: var(--ks-gap-l); color: var(--ks-muted); font-size: var(--ks-text-small); }
.footer__base a { color: var(--ks-ink); }

/* ===== Smaller screens ===== */
@media (max-width: 1099px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); }
  .case { grid-template-columns: var(--ks-tile) minmax(0, 1fr) var(--ks-thumb); }
  .case .go { grid-column: 2 / -1; justify-self: start; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(odd) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: var(--ks-border) solid var(--ks-line); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .areas { grid-template-columns: minmax(0, 1fr); }
  .faq-wrap { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .aside { position: static; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .nav__links { display: none; }
  .burger { display: inline-flex; }
  .nav__pill { padding-left: var(--ks-gap-m); }
  .nav__cta { margin-left: auto; }
  .split, .svc, .feature, .stories, .plans, .projects { grid-template-columns: minmax(0, 1fr); }
  .split--flip .split__media, .svc--flip .svc__media { order: 0; }
  .split__media, .svc__media { aspect-ratio: 16 / 10; }
  .areas__list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .case { grid-template-columns: var(--ks-tile) minmax(0, 1fr); padding: var(--ks-gap-l) var(--ks-gap-m); }
  .case .thumb, .case .go { grid-column: 2 / -1; }
  .case .thumb { width: 100%; }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { border-left: 0; border-top: var(--ks-border) solid var(--ks-line); }
  .steps, .seasons, .row-2 { grid-template-columns: minmax(0, 1fr); }
  .toggle, .toggle button { width: 100%; }
  .toggle { flex-direction: column; gap: var(--ks-gap-xs); }
  .toggle button { justify-content: center; padding: 0 var(--ks-gap-m); }
  .nav__cta .btn { padding: 0 var(--ks-gap-m); }
  .facts { gap: var(--ks-gap-l); }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
}