/* Approved design values. CSS breakpoints stay literal: 767 / 960 / 1024px. */
:root {
  --bg: #0c0c0c;
  --line: rgba(255, 255, 255, .09);
  --text: #d3d3d3;
  --muted: #929292;
  --pink: #fc0bf1;
  --blue: #0720c3;
  --frame-max: 990px;
  --frame-gutter: 16px;
  --grid-point-size: 10px;
  --font-display: "Bebas Neue", "Kllakar Display Fallback", "Kllakar Display System Fallback", Impact, sans-serif;
  --font-body: Inter, "Kllakar Body Fallback", Arial, sans-serif;
  --card-image-ratio: 5 / 3;
  --card-image-radius: 16px;
  --card-title-size: 18px;
  --section-title-size: clamp(38px, 10vw, 45px);

  /* Structural design-system tokens extracted from the existing UI. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-20: 80px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-card: 16px;
  --control-min-size: 44px;
  --reading-width: 70ch;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --heading-gap: 44px;
  --section-title-mobile: var(--section-title-size);
  --motion-fast: 150ms;
  --motion-normal: 250ms;
  --focus-ring: 2px solid var(--pink);
}

/* ==========================================================================
   Layout system (single source of truth for horizontal + vertical rhythm).
   --frame-gutter : page edge -> frame line
   --frame-pad    : frame line -> content (the one content inset used by every section)
   --section-pad  : top/bottom padding of a standard section
   --intro-pad-*  : top/bottom padding of an inner-page intro block
   --row-pad-y    : top/bottom padding of list rows (services/blog lists)
   Layout breakpoints (content-driven): 960 / 760 / 359px.
   ========================================================================== */
:root {
  --frame-pad: 59px;
  --section-pad: 72px;
  --intro-pad-top: 96px;
  --intro-pad-bottom: 80px;
  --row-pad-y: 48px;
}
@media (max-width: 960px) {
  :root { --frame-pad: 48px; --section-pad: 64px; --intro-pad-top: 80px; --intro-pad-bottom: 64px; --row-pad-y: 40px; }
}
@media (max-width: 760px) {
  :root { --frame-gutter: 12px; --frame-pad: 20px; --section-pad: 56px; --intro-pad-top: 64px; --intro-pad-bottom: 56px; --row-pad-y: 32px; }
}
@media (max-width: 359px) {
  :root { --frame-pad: 16px; }
}
/* Dark page background: override legacy hard-coded black surfaces. */
html:not([data-kll-theme="light"]) :is(body,.project-page,.adopt-ai-page,.ai-hero,.forest-showcase){background-color:var(--bg)!important;}
/* Shared black surfaces. Keep transparency and accent/foreground colors. */
html:not([data-kll-theme="light"]){--component-surface:#0c0c0c;}
html:not([data-kll-theme="light"]) .site-header{background-color:rgba(12,12,12,.82)!important;}
html:not([data-kll-theme="light"]) .menu-shell{background-color:rgba(12,12,12,.98)!important;}
html:not([data-kll-theme="light"]) :is(#kll-site-preloader,.site-footer,.footer,.t-card,.faq-item,.article-card,.kll-reader,.kll-booking-dialog,.kll-booking-dialog-header,.booking-panel,.booking-summary,.booking-layout,.booking-card,.contact-card,.form-card,.form-success-panel,.blog-article-body pre,.blog-article-body blockquote){background-color:var(--bg)!important;}
html:not([data-kll-theme="light"]) :is(input:not([type=submit]):not([type=checkbox]):not([type=radio]),textarea,select){background-color:var(--bg)!important;}
/* Booking popup: one calendar column after removing the summary. */
.kll-booking-dialog{width:min(560px,calc(100vw - 24px))!important;max-width:560px!important;}
.kll-booking-dialog .booking-layout{grid-template-columns:minmax(0,1fr)!important;}
.kll-booking-dialog .booking-panel{grid-column:1!important;grid-row:auto!important;width:100%!important;min-width:0!important;box-sizing:border-box;}
html:not([data-kll-theme="light"]) .kll-booking-dialog .kll-popup-heading{background-color:var(--bg)!important;}
.kll-booking-dialog .booking-calendar-day{aspect-ratio:auto!important;height:44px!important;min-height:44px!important;}
.kll-booking-dialog .booking-calendar-grid{grid-auto-rows:44px!important;}