:root {
  --primary-color: #1e3a8a;
  --secondary-color: #3b82f6;
  --text-color: #333;
  --dark-text: #111827;
  --light-color: #fff;
  --gray-color: #f1f5f9;

  /* GRAYS */
  --color-gray-50: oklch(98.46% 0.0017 247.84);
  --color-gray-100: oklch(96.7% 0.0029 264.54);
  --color-gray-200: oklch(92.76% 0.0058 264.53);
  --color-gray-300: oklch(87.17% 0.0093 258.34);
  --color-gray-400: oklch(71.37% 0.0192 261.32);
  --color-gray-500: oklch(55.1% 0.0234 264.36);
  --color-gray-600: oklch(55.1% 0.0234 264.36);
  --color-gray-700: oklch(37.29% 0.0306 259.73);
  --color-gray-800: oklch(27.81% 0.0296 256.85);
  --color-gray-900: oklch(21.01% 0.0318 264.66);
  --color-gray-950: oklch(12.96% 0.0274 261.69);

  /* BROWN */
  --color-primary-50: #a1a1a1;
  --color-primary-100: #9c9a96;
  --color-primary-200: #978c7d;
  --color-primary-300: #927e63;
  --color-primary-400: #876d4f;
  --color-primary-500: #7a5c3e;
  --color-primary-600: #6e4d30;
  --color-primary-700: #5c3c24;
  --color-primary-800: #482c19;
  --color-primary-900: #331c10;
  --color-primary-950: #28140a;

  /* GLARE */
  --color-glare-50: #fcfcfc;
  --color-glare-100: #fcfcfc;
  --color-glare-200: #fafafa;
  --color-glare-300: #f7f7f7;
  --color-glare-400: #f5f5f5;
  --color-glare-500: #f2f2f2;
  --color-glare-600: #f0f0f0;
  --color-glare-700: #ededed;
  --color-glare-800: #e9eceb;
  --color-glare-900: #e5ece9;
  --color-glare-950: #e2eee9;

  /* SLATE */
  --color-slate-50: #f0f0f0;
  --color-slate-100: #e8e8e8;
  --color-slate-200: #d9d9d9;
  --color-slate-300: #c9c9c9;
  --color-slate-400: #bababa;
  --color-slate-500: #ababab;
  --color-slate-600: #9c9c9c;
  --color-slate-700: #8c8c8c;
  --color-slate-800: #808080;
  --color-slate-900: #707070;
  --color-slate-950: #706b5f;

  /* SECONDARY */
  --color-secondary-50: #ecf8f7;
  --color-secondary-100: #daf1ef;
  --color-secondary-200: #b4e4df;
  --color-secondary-300: #8fd6cf;
  --color-secondary-400: #6ac8bf;
  --color-secondary-500: #44b9ad;
  --color-secondary-600: #37958c;
  --color-secondary-700: #297069;
  --color-secondary-800: #1b4b46;
  --color-secondary-900: #0e2523;
  --color-secondary-950: #071311;

  /* YELLOW */
  --color-yellow-50: oklch(98.12% 0.024 94.06);
  --color-yellow-100: oklch(97.4% 0.035 96.29);
  --color-yellow-200: oklch(96.09% 0.054 97.01);
  --color-yellow-300: oklch(94.24% 0.077 97.15);
  --color-yellow-400: oklch(93.02% 0.095 97.45);
  --color-yellow-500: oklch(91.35% 0.115 96.85);
  --color-yellow-600: oklch(90.2% 0.131 97.04);
  --color-yellow-700: oklch(88.56% 0.146 96.73);
  --color-yellow-800: oklch(87.5% 0.157 96.43);
  --color-yellow-900: oklch(86.06% 0.165 95.19);
  --color-yellow-950: oklch(85.53% 0.168 95.04);

  /* Hero Gradient */
  --hero-gradient: linear-gradient(to right,
      var(--color-primary-950),
      var(--color-primary-800));

  /* Border Radius */
  --border-radius-small: 0.25rem;
  /* 4px */
  --border-radius-medium: 0.5rem;
  /* 8px */
  --border-radius-large: 1rem;
  /* 16px */
  --border-radius-full: 9999px;
  /* For circles/pills */

  /* Shadows */
  --shadow-small: 0 1px 2px 0 var(--color-primary-200);
  --shadow-medium: 0 4px 8px 0 var(--color-primary-200);
  --shadow-large: 0 10px 15px -3px var(--color-primary-200), 0 4px 6px -4px var(--color-primary-200);
  --shadow-inner: inset 0 2px 4px 0 var(--color-primary-200);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: var(--text-color);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* === LAYOUT & CONTAINER === */
.container {
  width: 100%;
  max-width: 1200px;
  /* Adjust max-width as needed */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* === TYPOGRAPHY === */
.heading-1 {
  font-size: 3rem;
  /* Example size */
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--dark-text);
}

.heading-2 {
  font-size: 2.25rem;
  /* Example size */
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--dark-text);
}

.heading-3 {
  font-size: 1.75rem;
  /* Example size */
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--dark-text);
}

.paragraph {
  font-size: 1rem;
  /* Base paragraph size */
  line-height: 1.6;
  color: var(--color-gray-600);
  /* Default text color */
  margin-bottom: 1rem;
}

/* === TEXT COLOR UTILITIES === */
.text-primary {
  color: var(--color-flush-orange-500);
}

.text-secondary {
  color: var(--color-yellow-orange-500);
  /* Or another secondary color */
}

.text-dark {
  color: var(--dark-text);
}

.text-light {
  color: var(--light-color);
}

.text-gray-600 {
  color: var(--color-gray-600);
}

.text-gray-700 {
  color: var(--color-gray-700);
}

/* === OTHER UTILITIES === */
.text-center {
  text-align: center;
}

/* === BUTTONS === */
.btn {
  /* Configuration */
  --button-padding: 0.7em 1.2em;
  --button-gap: 0.5em;
  --button-bg: var(--color-yellow-950);
  --button-color: #ffffff;
  --button-hover-bg: var(--color-yellow-800);
  --button-hover-color: #ffffff;
  --button-border-width: 3px;
  --button-border-style: solid;
  --button-border-color: var(--color-yellow-950);
  --button-radius: 0.5em;

  /* Focus Styles */
  --button-outline-width: 2px;
  --button-outline-style: dashed;
  --button-outline-color: var(--color-secondary-500);
  --button-outline-offset: 3px;

  /* Layout and spacing */
  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  padding: var(--button-padding);

  /* Colours */
  background: var(--button-bg);
  color: var(--button-color);

  /* Stroke and radius */
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-radius);

  /* Typography */
  text-decoration: none;
  font-weight: var(--button-font-weight, 700);
  font-size: var(--button-font-size, 1em);
  letter-spacing: 0.05ch;
  font-family: sans-serif;
  line-height: 1.1;

  /* Interactive */
  cursor: pointer;
}

.btn svg {
  height: var(--button-icon-size, 1.2cap);
  width: auto;
  flex: none;
}

.btn:hover {
  background: var(--button-hover-bg);
  --button-color: var(--color-primary-400);
}

.btn:focus {
  outline-width: var(--button-outline-width, var(--button-border-width));
  outline-style: var(--button-outline-style, var(--button-border-style));
  outline-color: var(--button-outline-color, var(--button-border-color));
  outline-offset: var(--button-outline-offset,
      calc(var(--button-border-width) * 2));
}

.btn:active {
  transform: scale(99%);
}

/* VARIANTS */
.btn[data-btn-variant="primary"] {
  --button-color: var(--color-primary-800);
}

.btn[data-btn-variant="primary"]:hover {
  filter: brightness(0.9);
}

.btn[data-btn-variant="secondary"] {
  --button-bg: var(--color-secondary-500);
  --button-border-color: var(--color-secondary-500);
  --button-hover-bg: var(--color-secondary-500);
  --button-color: var(--color-primary-900);
}

.btn[data-btn-variant="secondary"]:hover {
  filter: brightness(0.9);
}

.btn[data-ghost-button] {
  --button-bg: transparent;
  --button-border-color: var(--color-primary-800);
  --button-color: var(--color-primary-800);
  --button-hover-color: var(--button-border-color);
}

.btn[data-button-radius="hard"] {
  --button-radius: 0;
}

/* === FORMS === */
:is(input, textarea, summary, select) {
  --outline-size: max(2px, 0.1em);
  --outline-style: dashed;
  --outline-color: var(--color-blue-violet-500);
  --outline-offset: 4px;
}

:is(input, textarea, summary, select):focus {
  outline: var(--outline-size) var(--outline-style) var(--outline-color);
  outline-offset: var(--outline-offset);
}

.form-group {
  margin-bottom: 1rem;
  /* Space between form groups */
}

.form-group label {
  display: block;
  /* Space between label and input */
  font-weight: 500;
  color: var(--dark-text);
}

.form-textarea {
  resize: vertical;
}

/* === SERVICE PAGE SECTIONS === */
.signs-section {
  padding-block: 3rem;
  /* Vertical padding */
}

.signs-section ul {
  list-style: disc;
  /* Use standard bullets */
  padding-inline-start: 2rem;
  /* Indentation for the list */
  margin-top: 1rem;
  /* Space below the heading */
}

.signs-section li {
  margin-bottom: 0.5rem;
  /* Space between list items */
  color: var(--color-gray-700);
  /* Match paragraph color */
}

/* Any global styles not covered in the hero component */

/* === FLOW UTILITY (Andy Bell style) === */
.flow>*+* {
  margin-top: var(--flow-space, 1.5rem);
}