/* backup copy of responsive-version/style.css */

/* Created by Copilot backup script */


:root {
  /* Primitive Color Tokens */
  /* Shared offset for side decorations (keeps left/right distances equal responsively) */
  --side-decor-offset: clamp(28px, 3.5vw, 72px);
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08);
  /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08);
  /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08);
  /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08);
  /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08);
  /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08);
  /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08);
  /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08);
  /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  --font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, monospace;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15);
    /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15);
    /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15);
    /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15);
    /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15);
    /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15);
    /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15);
    /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15);
    /* Dark cyan */

    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15);
  /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15);
  /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15);
  /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15);
  /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15);
  /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15);
  /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15);
  /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15);
  /* Dark cyan */

  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}

h2 {
  font-size: var(--font-size-3xl);
}

h3 {
  font-size: var(--font-size-2xl);
}

h4 {
  font-size: var(--font-size-xl);
}

h5 {
  font-size: var(--font-size-lg);
}

h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

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

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(var(--color-success-rgb, 33, 128, 141),
      var(--status-bg-opacity));
  color: var(--color-success);
  border: 1px solid rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(var(--color-error-rgb, 192, 21, 47),
      var(--status-bg-opacity));
  color: var(--color-error);
  border: 1px solid rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(var(--color-warning-rgb, 168, 75, 47),
      var(--status-bg-opacity));
  color: var(--color-warning);
  border: 1px solid rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(var(--color-info-rgb, 98, 108, 113),
      var(--status-bg-opacity));
  color: var(--color-info);
  border: 1px solid rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}

@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}

@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}

@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-4 {
  gap: var(--space-4);
}

.gap-8 {
  gap: var(--space-8);
}

.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}

.mt-8 {
  margin-top: var(--space-8);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}

.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}

.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}

.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}

.hidden {
  display: none;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

@font-face {
  font-family: 'FKGroteskNeue';
  src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
}

/* END PERPLEXITY DESIGN SYSTEM */
/* SARAL PLUS Medical Gloves Website Styles */

/* Color Variables */
:root {
  --orange-primary: #FF5722;
  --green-primary: #4CAF50;
  --blue-primary: #2196F3;
  --hero-bg: #F8F9FA;
  --text-dark: #2E3440;
  --text-light: #6B7280;
  --white: #FFFFFF;
}

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

body {
  font-family: var(--font-family-base);
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--white);
}

/* Header Styles */
/* ================= Header: integrated at top, becomes solid on scroll ================= */

/* Header default: integrated with hero (transparent, overlaying content) */
.header {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100 !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: background 220ms ease, box-shadow 220ms ease, border-bottom-color 220ms ease, transform 220ms ease;
  margin-bottom: 0 !important;
}

/* When scrolled: fixed, solid background, shadow (backup-corrected) */
.header.scrolled {
  position: fixed !important;
  background: #fff !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
}

/* Ensure nav text stays dark whether header is overlaying hero or scrolled */
.header .nav-link,
.header .nav-item,
.header .brand,
.header .brand a,
.header .nav-logo,
.header .cta-contact {
  color: var(--text-dark);
  fill: currentColor;
  /* for inline svgs */
}

/* If you have inverted/white rules for a `header-on-hero` modifier, override them */
.header.header-on-hero .nav-link,
.header.header-on-hero .nav-item,
.header.header-on-hero .brand,
.header.header-on-hero .brand a,
.header.header-on-hero .nav-logo,
.header.header-on-hero .cta-contact {
  color: var(--text-dark) !important;
}

/* Keep scrolled state consistent too */
.header.scrolled .nav-link,
.header.scrolled .nav-item,
.header.scrolled .brand,
.header.scrolled .brand a {
  color: var(--text-dark);
}

/* to prevent page shift when header becomes fixed, body.scrolled will get a top padding */
body.scrolled {
  padding-top: 5rem !important;
}

/* If you want alternate nav link colors when header is on top of hero (light/white background under hero),
   toggle an extra modifier to switch nav-link color for readability */
.header.header-on-hero .nav-link,
.header.header-on-hero .nav-logo {
  /* example: lighter logo or white text — adjust to your assets */
  color: rgba(255, 255, 255, 0.95);
}

/* When header is solid, ensure nav items use default dark colors */
.header.scrolled .nav-link {
  color: var(--text-dark);
}

/* Mobile: ensure header overlay on small screens is still on top */
@media (max-width: 768px) {
  .header {
    height: 72px;
  }

  body.scrolled {
    padding-top: 4.5rem !important;
  }
}


.header-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, calc(var(--container-max) * 0.014), 20px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo .logo-img-header {
  height: clamp(56px, 4.2vw, 80px);
  width: auto;
  object-fit: contain;
  display: block;
}

.nav-menu {
  display: flex;
  gap: var(--space-32);
  align-items: center;
}

.nav-link {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  font-size: var(--font-size-base);
  padding: var(--space-8) var(--space-4);
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--green-primary);
}

.contact-btn {
  background: var(--green-primary);
  color: var(--white);
  border: none;
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-base);
  font-weight: 600;
  font-size: var(--font-size-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  transition: background 0.3s ease;
}

.contact-btn:hover {
  background: #45a049;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: var(--space-4);
}

.bar {
  width: 24px;
  height: 3px;
  background: var(--text-dark);
  border-radius: var(--radius-full);
  transition: all 0.3s ease;
}

/* Hero Section */
.hero {
  background: var(--hero-bg);
  position: relative !important;
  overflow: visible !important;
  /* Container-relative padding so hero scales from 1920px baseline */
  padding-top: clamp(80px, calc(var(--container-max) * 0.08), 180px) !important;
  padding-bottom: clamp(60px, calc(var(--container-max) * 0.045), 100px) !important;
  margin-top: 0 !important;
}

.orange-element {
  position: absolute;
  top: 0;
  left: 0;
  /* Use clamp so the decorative orange element scales visually similar across breakpoints
     - keeps a reasonable minimum and maximum while following viewport changes */
  width: clamp(140px, 9.5vw, 200px);
  height: clamp(100px, 6.5vw, 140px);
  background: var(--orange-primary);
  border-radius: 0 0 60% 0;

}

.hero-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, calc(var(--container-max) * 0.034), 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, calc(var(--container-max) * 0.04), 64px);
  align-items: center;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, calc(var(--container-max) * 0.02), 32px);
}

.hero-brand {
  color: var(--green-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hero-title {
  font-size: clamp(32px, calc(var(--container-max) * 0.034), 56px);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin: 0;
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}

.hero-badges {
  display: flex;
  gap: clamp(8px, calc(var(--container-max) * 0.01), 16px);
  flex-wrap: wrap;
}

.badge {
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.badge-orange {
  background: var(--orange-primary);
  color: var(--white);
}

.badge-green {
  background: var(--green-primary);
  color: var(--white);
}

.quote-btn {
  background: var(--blue-primary);
  color: var(--white);
  border: none;
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-base);
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: fit-content;
  transition: background 0.3s ease;
}

.quote-btn:hover {
  background: #1976D2;
}

.hero-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gloves-heart-placeholder {
  width: 400px;
  height: 300px;
  background: var(--color-bg-2);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;

  align-items: center;
  justify-content: center;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  text-align: center;
}

.gloves-text {
  padding: var(--space-16);
}

.contact-border {
  border: 2px solid var(--color-border);
  padding: var(--space-16) var(--space-24);
  border: white solid 3px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
}

.hero-card {
  position: relative;
  box-sizing: border-box;
}

/* Base .decor-plus element (empty span — visual drawn in CSS) */
.hero-card .decor-plus {
  position: absolute;
  /* place it slightly outside the top-left corner of the image frame */
  top: -36px;
  left: -36px;

  /* size of the container that will hold the two bars */
  width: 56px;
  height: 56px;

  display: block;
  pointer-events: none;
  /* non-interactive */
  z-index: 20;
  /* sits above the image/frame but below header if header z-index is higher */

  /* hide any textual content; we render the plus with pseudo elements */
  color: transparent;
  font-size: 0;
  line-height: 0;
}

/* Two bars create the plus sign: vertical and horizontal */
.hero-card .decor-plus::before,
.hero-card .decor-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--orange-primary);
  border-radius: 6px;
  display: block;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  /* subtle lift */
}

/* Vertical bar (taller, thinner) */
.hero-card .decor-plus::before {
  /* keep bar length proportional but keep thickness fixed */
  width: var(--decor-bar-thickness, 12px);
  height: 72%;
}

/* Horizontal bar (wider, thinner) */
.hero-card .decor-plus::after {
  height: var(--decor-bar-thickness, 12px);
  width: 72%;
}

/* Optional: subtle inner highlight / white outline to keep contrast on mixed backgrounds
   Uncomment if you want a faint white halo around the plus:
*/
/*
.hero-card .decor-plus::before,
.hero-card .decor-plus::after {
  box-shadow:
    0 8px 20px rgba(0,0,0,0.12),
    0 0 0 4px rgba(255,255,255,0.85); 
}
*/

/* Responsive scaling: use clamp for smooth resizing on different viewports */
@media (min-width: 1200px) {
  .hero-card .decor-plus {
    top: -36px;
    left: -80px;
    width: 160px;
    height: 160px;
  }

  .hero-card .decor-plus::before {
    width: 12%;
    height: 72%;
  }

  .hero-card .decor-plus::after {
    width: 72%;
    height: 12%;
  }
}

@media (max-width: 980px) {
  .hero-card .decor-plus {
    top: -30px;
    left: -30px;
    width: 48px;
    height: 48px;
  }

  .hero-card .decor-plus::before {
    width: 12%;
    height: 68%;
    border-radius: 5px;
  }

  .hero-card .decor-plus::after {
    width: 68%;
    height: 12%;
    border-radius: 5px;
  }
}

/* Hide on very small screens to avoid overlap with content */
@media (max-width: 560px) {
  .hero-card .decor-plus {
    display: none;
  }
}

/* Why Choose Section: fluid, grid-based and consistent across breakpoints
   - Uses clamp() for typography and repeat(auto-fit,minmax()) for consistent card sizing
   - Avoid absolute positioning so layout scales smoothly with zoom/width changes
*/
.why-choose {
  background: #EA5E20;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(0.5rem, 1.5vw, 1rem) 0;
  overflow: hidden;
}

.why-choose-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, calc(var(--container-max) * 0.034), 56px);
  box-sizing: border-box;
}

.why-choose-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  line-height: 1.15;
  color: #ffffff;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem) 0;
  text-align: left;
}

.features-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  align-items: start;
}

.feature-card {
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: transparent;
  box-sizing: border-box;
}

.feature-card-bordered {
  border: 2px solid rgba(255,255,255,0.15);
}

.feature-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 18px 18px 0 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-caption {
  padding: clamp(0.75rem, 1.6vw, 1rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.25rem);
  line-height: 1.2;
  color: #fff;
  text-align: left;
}

.feature-caption-square {
  display: inline-block;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 2px;
  margin-right: 8px;
}

.why-choose-corner {
  display: none; /* decorative corner hidden to avoid layout shifts across sizes */
}

@media (max-width: 600px) {
  .why-choose { padding: 2rem 0; }
  .why-choose-title { font-size: clamp(0.95rem, 3.5vw, 1.1rem); }
  .features-row { gap: 12px; }
}



/* Manufactured Section */
.manufactured-section {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  background: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  /* responsive vertical spacing tuned to match provided visual:
     larger breathing room above and below content so decorations sit comfortably */
  padding-top: clamp(96px, 10vw, 160px);
  /* add extra safe gap so side decorations (plus/leaf) don't overlap content at smaller sizes */
  /* increased bottom padding to provide extra breathing room */
  /* increased again by 50%: extra gap 240px -> 360px */
  padding-bottom: calc(clamp(96px, 10vw, 160px) + (var(--qc-size) / 2) + 360px) !important;
  min-height: clamp(420px, 44vh, 820px);
  box-sizing: border-box;
  overflow: visible;
}

.quarter-circle {
  position: absolute;
  /* simple responsive size: stays within a sensible range but scales with viewport */
    /* Increase base size by ~25% and make border scale proportionally
      while clamping to reasonable visual limits. */
    --qc-size: clamp(312.5px, 21.875vw, 500px);
    --qc-border: clamp(10px, calc(var(--qc-size) * 0.03), 18px);
  width: var(--qc-size);
  height: var(--qc-size);
  border: var(--qc-border) solid;
  border-radius: 100%;
  box-sizing: border-box;
  background: transparent;
  z-index: 0;
}

/* Top-left quarter circle */
.quarter-circle.top-left {
  top: calc(-1 * (var(--qc-size) / 2));
  left: calc(-1 * (var(--qc-size) / 2));
  border-color: #EA5E20 transparent transparent white;
  transform: rotate(135deg);
}

/* Bottom-right quarter circle */
.quarter-circle.bottom-right {
  bottom: calc(-1 * (var(--qc-size) / 2));
  right: calc(-1 * (var(--qc-size) / 2));
  border-color: transparent white #70B641 transparent;
  transform: rotate(135deg);
}

/* Fix for high zoom levels (150% and above): prevent why-choose section overflow */
@media (min-resolution: 1.5dppx) {
  .why-choose {
    /* Reduce top padding to separate text from semicircle, increase bottom padding for white part */
    padding: clamp(0.25rem, 0.5vw, 0.5rem) 0 clamp(3.5rem, 4.5vw, 4rem) 0 !important;
  }
}



/* Side decorations */
.side-decor {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center; /* center the stack vertically around the content center */
  height: auto; /* allow the stack to size naturally */
  gap: clamp(20px, 3.5vw, 48px);
  z-index: 1;
}

.side-decor.left {
  /* push left decorations slightly further out at larger screens while keeping a minimum offset */
  left: clamp(24px, 3.5vw, 72px);
  /* use shared offset so left and right stacks stay equally distant from their edges */
  bottom: var(--side-decor-offset);
  top: auto;
  align-items: flex-start;
}

.side-decor.right {
  /* mirror left: keep right decorations similarly offset */
  right: clamp(24px, 3.5vw, 72px);
  /* use shared offset so left and right stacks stay equally distant from their edges */
  top: var(--side-decor-offset);
  bottom: auto;
  align-items: flex-end;
}

.icon-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 21.75px;
}

.plus-svg,
.leaf-svg {
  display: block;
  /* fixed icon size so plus/leaf visuals remain constant across breakpoints */
  width: var(--decor-icon-size) !important;
  height: var(--decor-icon-size) !important;
  /* prevent stroke thickness from scaling with SVG size (if the SVG uses strokes) */
  vector-effect: non-scaling-stroke;
  stroke-width: 4px; /* fixed stroke thickness to match visual */
}

/* Manufactured container */
.manufactured-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.5rem, 3vw, 3rem); /* larger gap between title and description */
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  z-index: 2;
  box-sizing: border-box;
  padding-inline: clamp(16px, calc(var(--container-max) * 0.034), 56px);
}

.manufactured-title {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(1.6rem, 3.8vw, 3.5rem);
  line-height: 1.05;
  color: #404040;
  margin: 0;
  max-width: 100%;
  letter-spacing: 0.2px;
}

.manufactured-description {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(0.95rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  color: #404040;
  margin: 0;
  max-width: 720px;
  letter-spacing: 0.2px;
}




/* Our Gloves Section */
.our-gloves {
  background: var(--green-primary);
  /* bottom padding removed per request; keep a small top padding for separation */
  padding-top: clamp(5px, 1vw, 11px);
  padding-bottom: 0;
  box-sizing: border-box;
}

.our-gloves-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: clamp(16px, calc(var(--container-max) * 0.034), 56px);
  box-sizing: border-box;
}

.our-gloves-title {
  color: var(--white);
  font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(16px, 2.4vw, 32px);
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(12px, calc(var(--container-max) * 0.016), 24px);
  align-items: start;
}

.product-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.product-image {
  width: 100%;
  aspect-ratio: 4/3;
  display: block;
  background: var(--color-bg-1);
  border-radius: var(--radius-base) var(--radius-base) 0 0;
  overflow: hidden;
  border-bottom: 2px dashed rgba(0,0,0,0.06);
  /* inner padding so the image doesn't sit flush against the card border */
  padding: clamp(8px, calc(var(--container-max) * 0.01), 16px) clamp(8px, calc(var(--container-max) * 0.01), 16px) 0;
  box-sizing: border-box;
}

.product-image img.product-image-tweak,
.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* slight inner radius so the image appears inset from the outer card radius */
  border-radius: 6px;
}

.product-image-tweak {
  overflow: hidden;
}

.nitrile-image {
  background: var(--color-bg-1);
}

.latex-image {
  background: var(--color-bg-2);
}

.product-content {
  padding: clamp(12px, calc(var(--container-max) * 0.014), 20px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, calc(var(--container-max) * 0.01), 12px);
  flex: 1 1 auto;
}

.product-title {
  /* fixed size for visual parity across viewports */
  font-size: 18px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--space-8);
}

/* Card body text: keep consistent, don't scale with viewport */
.product-content p,
.product-sizes {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light);
}

.product-sizes {
  font-size: var(--font-size-base);
  color: var(--text-light);
  margin-bottom: var(--space-16);
}

.product-colors {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.color-label {
  font-size: var(--font-size-base);
  color: var(--text-light);
}

.color-dots {
  display: flex;
  gap: var(--space-8);
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #E5E7EB;
}

.color-dot.blue {
  background: var(--blue-primary);
}

.color-dot.purple {
  background: #9C27B0;
}

.color-dot.black {
  background: #000000;
}

.color-dot.white {
  background: var(--white);
  border-color: #D1D5DB;
}

.product-features {
  display: flex;
  gap: var(--space-8);
  margin-bottom: var(--space-16);
  flex-wrap: wrap;
}

.feature-tag {
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.feature-tag.orange {
  background: var(--orange-primary);
  color: var(--white);
}

.feature-tag.green {
  background: var(--green-primary);
  color: var(--white);
}

.feature-tag.blue {
  background: var(--blue-primary);
  color: var(--white);
}

.comfort-tag {
  background: #F3F4F6;
  color: var(--text-light);
  padding: var(--space-8) var(--space-12);
  border-radius: var(--radius-base);
  font-size: 13px;
  margin-bottom: var(--space-20);
  display: inline-block;
}

.product-quote-btn {
  background: var(--blue-primary);
  color: var(--white);
  border: none;
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-base);
  font-weight: 600;
  font-size: var(--font-size-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  justify-content: center;
  transition: background 0.3s ease;
}

.product-quote-btn:hover {
  background: #1976D2;
}

.gloves-pattern{
  justify-content: center;
  align-items: center;
}

.pattern-row {
  display: flex;
  margin-top: 4.5%;
  margin-bottom: 2%;
  gap: 0.75%;
  justify-content: center;
  align-items: center;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .nav-menu {
    position: fixed;
    left: -100%;
    top: 80px;
    flex-direction: column;
    background: var(--white);
    width: 100%;
    text-align: center;
    transition: 0.3s;
    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.05);
    padding: var(--space-16) 0;
    gap: var(--space-16);
  }

  .nav-menu.active {
    left: 0;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-toggle.active .bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .contact-btn {
    display: none;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-24);
    text-align: center;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .gloves-heart-placeholder {
    width: 300px;
    height: 250px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-16);
  }

  .why-choose-title {
    font-size: 2rem;
  }

  .manufactured-title {
    font-size: 1.8rem;
  }

  .cross-left,
  .cross-right {
    display: none;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: var(--space-24);
  }

  .our-gloves-title {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .hero-badges {
    justify-content: center;
  }

  .gloves-heart-placeholder {
    width: 250px;
    height: 200px;
  }

  .feature-card {
    padding: var(--space-16);
  }

  .why-choose-title {
    font-size: 1.6rem;
  }

  .manufactured-title {
    font-size: 1.5rem;
  }

  .our-gloves-title {
    font-size: 1.6rem;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Button focus styles */
button:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--blue-primary);
  outline-offset: 2px;
}

/* Remove tap highlights */
* {
  -webkit-tap-highlight-color: transparent;
}

/* =========================
   HERO: green-right background + white rounded image frame
   Responsive, minimal fixed values; paste at end of style.css
   ========================= */

:root {
  /* responsive vars: tweak if you want the green area wider/narrower */
  --hero-green-width: clamp(260px, 36vw, 500px);
  --hero-header-overlap: 120px;
  /* how far green extends above hero (covers header area) */
  --hero-image-height: clamp(260px, 34vw, 520px);
  --hero-image-radius-large: clamp(36px, 7vw, 80px);
  /* top-left rounding */
  --hero-image-radius-small: clamp(12px, 2.2vw, 20px);
  /* other corners */
  --hero-image-stroke: 4px;
  /* dashed stroke width around white frame */
}

/* Make sure hero is positioned relative (should already be) */
.hero {
  position: relative;
}

/* 1) right-side green background (pseudo-element)
   - extends up under header (top negative) so header's CTA sits on green
   - width is responsive via --hero-green-width
*/
.hero::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--hero-header-overlap));
  right: 0;
  width: var(--hero-green-width);
  bottom: 0;
  background: var(--green-primary);
  z-index: 1;
  /* behind hero content (which should be above it) */
  pointer-events: none;
}

/* Ensure hero container and content are above the green bg */
.hero .hero-container {
  position: relative;
  z-index: 3;
}

/* place the right column content to the far right */
.hero .hero-image {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 3;
  /* rail positioning variables: adjust these to move rails/dots together */
  --rail-left: 60px; /* left offset of bottom horizontal rail */
  --rail-width: 63%;  /* length of bottom horizontal rail */
  --rail-end-gap: 40px; /* fallback end gap used in older calc expressions */
  --v-rail-top: 40%; /* vertical centre anchor for vertical rail */
}

/* Transform the existing placeholder into the white image frame:
   - white background, dashed orange stroke, large top-left rounding for the *image* look
*/
.hero .gloves-heart-placeholder {
  /* size flexible but constrained by the green width */
  width: min(92%, calc(var(--hero-green-width) - 32px));
  max-width: calc(var(--hero-green-width) - 32px);
  height: var(--hero-image-height);

  /* the white frame for the image */
  background: #ffffff;
  box-sizing: border-box;
  padding: 0;
  border: #EA5E20 solid 3px;
  border-radius: var(--hero-image-radius-large) var(--hero-image-radius-small) var(--hero-image-radius-small) var(--hero-image-radius-small);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 4;
  /* above the green bg and near other content */

  /* dashed orange stroke around the white frame */
  /* the stroke uses outline via a pseudo element below to preserve rounded corners */
  background-clip: padding-box;
}

/* create the dashed rounded stroke as an inset pseudo, so the white box and image keep their radii clean */
.hero .gloves-heart-placeholder::before {
  content: "";
  position: absolute;
  inset: calc(var(--hero-image-stroke) / 2);
  border-radius: calc(var(--hero-image-radius-large) - var(--hero-image-stroke)) calc(var(--hero-image-radius-small) - var(--hero-image-stroke)) calc(var(--hero-image-radius-small) - var(--hero-image-stroke)) calc(var(--hero-image-radius-small) - var(--hero-image-stroke));
  border: var(--hero-image-stroke) dashed var(--orange-primary);
  pointer-events: none;
  z-index: 2;
}

/* If you prefer a green dashed stroke instead, replace var(--orange-primary) above with var(--green-primary) */

/* Image inside the placeholder (you will paste the path later)
   - should cover fully and inherit rounded clipping
*/
.hero .gloves-heart-placeholder img.hero-img,
.hero .gloves-heart-placeholder img {
  position: relative;
  z-index: 3;
  /* above the dashed stroke pseudo */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* clip image to the same radii so top-left looks rounded */
  border-radius: inherit;
}

/* vertical dashed accent on left of the white frame */
.hero .gloves-heart-placeholder::after { display: none; }

/* Vertical dashed rail on the hero card so both rails and dots share the same
   coordinate space — keeps the dots in place while moving the rails to align */
.hero .hero-card::before {
  content: "";
  position: absolute;
  /* align horizontally with left corner dot center */
    /* start exactly at the bottom edge of the vertical dot (dot bottom = 41%)
      so the rail appears to originate from beneath the dot */
    top: 59%;
  bottom: -18px; /* meet the horizontal rail */
  /* center the thin rail under the vertical dot (slight left nudge keeps it visually centered) */
  left: calc(-1 * (var(--hero-image-stroke) + 18px) - 1px);
  /* make vertical rail same thickness as bottom rail */
  width: var(--hero-image-stroke);
  background: repeating-linear-gradient(180deg,
      var(--green-primary) 0px 12px,
      var(--hero-bg) 12px 24px);
  background-size: 100% 24px;
  z-index: 6;
  pointer-events: none;
}

/* small dotted rail / control under the white frame (centered under the white box) */
/* placed using a pseudo on the parent hero so it aligns with the right area */
.hero .hero-image {
  position: relative;
}

/* Dashed vertical border on the left */
.hero .hero-image::before {
  /* remove duplicated/legacy vertical rail — kept for fallback but hidden */
  display: none !important;
}

/* Dashed horizontal border on the bottom */
.hero .hero-image::after { display: none !important; }

/* Horizontal dashed rail positioned relative to the hero card so it shares the
   same coordinate space as the decorative dots (which are children of .hero-card) */
.hero .hero-card::after {
  content: "";
  position: absolute;
  bottom: -18px;
  /* start the horizontal rail aligned with the vertical rail anchor so they meet */
  left: calc(-1 * (var(--hero-image-stroke) + 18px) - 1px);
  /* extend the horizontal rail so it reaches the original visual end */
  width: calc(var(--rail-width) + var(--rail-left) + 8px);
  height: var(--hero-image-stroke);
  background: repeating-linear-gradient(90deg,
      var(--hero-bg) 0px 12px,
      var(--green-primary) 12px 24px);
  background-size: 24px 100%;
  opacity: 1;
  z-index: 6; /* bring horizontal rail above green background */
  pointer-events: none;
  border-radius: 8px;
}

/* Position the left corner dot to sit exactly where vertical and horizontal rails meet */
/* left corner dot: restore original placement so we don't move user-set dots */
.hero .circle-horizontal-start {
  bottom: -23px;
  left: -6px;
  background-color: var(--green-primary);
}

/* ===== Circles at ends of lines ===== */

/* Common circle style */
.hero .hero-image span[class^="circle-"] {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  z-index: 7; /* ensure dots sit above rails */
}

/* Top of the vertical dashed line */
.hero .circle-vertical-start {
  background-color: var(--green-primary);
  bottom: 41%;
  left: -30px;
}

/* Left end of bottom dashed line - handled above to align with rails */

/* Right end of bottom dashed line */
.hero .circle-horizontal-end {
  bottom: -23px;
  background-color: var(--hero-bg);
  /* place at the right end of the bottom rail (subtract half the dot width) */
  left: calc(var(--rail-left) + var(--rail-width) - 7px);
}


/* large orange plus near the curved top-left of the image frame */
.hero::after {
  content: "+";
  position: absolute;
  top: calc((var(--hero-image-height) * 0.08) - var(--hero-header-overlap));
  /* roughly near the top of frame */
  right: calc(var(--hero-green-width) - (var(--hero-image-stroke) + 36px) - (min(92%, calc(var(--hero-green-width) - 32px)) / 2));
  /* above calculation aims to position the + near the curved edge; will adapt with --hero-green-width */
  font-size: clamp(28px, 5vw, 52px);
  color: var(--orange-primary);
  font-weight: 900;
  z-index: 5;
  pointer-events: none;
}

/* ensure left content sits above everything (avoid accidental overlap) */
.hero .hero-content {
  position: relative;
  z-index: 6;
}

/* Responsive breakpoints — ensure layout stacks nicely */
@media (max-width: 980px) {
  :root {
    --hero-green-width: clamp(220px, 40vw, 480px);
  }

  .hero .gloves-heart-placeholder {
    height: clamp(220px, 36vw, 420px);
    max-width: calc(var(--hero-green-width) - 28px);
  }

  .hero::after {
    font-size: clamp(20px, 6vw, 40px);
  }

  .hero .hero-image::after {
    right: calc((100% - var(--hero-green-width)) + 20px);
    width: calc(min(var(--hero-green-width), 420px) - 48px);
  }
}

@media (max-width: 760px) {

  /* single column: green area will sit under content; keep visual intact */
  .hero .hero-container {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .hero::before {
    width: 100%;
    left: 0;
    right: 0;
    border-radius: 0;
    /* full-width green under image */
    top: calc(-1 * var(--hero-header-overlap));
  }

  .hero .gloves-heart-placeholder {
    width: 100%;
    max-width: 100%;
    height: clamp(240px, 48vw, 360px);
    border-radius: 20px;
  }

  .hero .gloves-heart-placeholder::before {
    border-radius: 16px;
    inset: calc(var(--hero-image-stroke) / 2);
  }

  .hero .gloves-heart-placeholder::after {
    display: none;
  }

  /* hide vertical accent on small */
  .hero::after {
    display: none;
  }

  /* hide large plus on small screens */
  .hero .hero-image::after {
    display: none;
  }

  /* hide rail on small */
}

/* End of hero patch */


html,
body {
  overflow-x: hidden;
}

/* Also ensure hero doesn't create horizontal overflow */
.hero,
.why-choose,
.our-gloves {
  max-width: 100%;
  overflow-x: hidden;
}




:root {
  --orange: #e95b20;
  --text: #333;
  --muted: #666;
  --border: rgba(233, 91, 32, 0.95);
  --max-width: 1150px;
}

.faq-section {
  padding: clamp(40px, calc(var(--container-max) * 0.04), 56px) clamp(16px, calc(var(--container-max) * 0.034), 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
}

.faq-title {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  color: var(--text);
  margin: 0 0 2.25rem;
  letter-spacing: 1px;
}

.faq-container {
  width: 100%;
  max-width: var(--container-max);
  display: grid;
  gap: clamp(12px, calc(var(--container-max) * 0.012), 16px);
}

.faq-item {
  border: 2px solid var(--border);
  padding: 0;
  /* question contains padding */
  box-sizing: border-box;
  background: transparent;
  overflow: hidden;
  border-radius: 2px;
}

/* Strong override: ensure no bottom padding is applied from other files
   (prevents extra space appearing after open/close toggles). */
.faq-item {
  padding-bottom: 0 !important;
  margin-bottom: 1rem; /* keep spacing between items */
}

/* Force the outer bottom border so it can't be removed by other cascade rules. */
.faq-item {
  border-bottom: 2px solid var(--border) !important;
}

.faq-question {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  border: none;
  background: transparent;
  padding: clamp(12px, calc(var(--container-max) * 0.012), 20px) clamp(40px, calc(var(--container-max) * 0.04), 56px) clamp(12px, calc(var(--container-max) * 0.012), 20px) clamp(28px, calc(var(--container-max) * 0.026), 36px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(12px, calc(var(--container-max) * 0.012), 16px);
  text-align: left;
  cursor: pointer;
}

.faq-index {
  font-weight: 800;
  font-size: clamp(1.05rem, 1.8vw, 1.4rem);
  color: var(--text);
  min-width: 2.5ch;
}

.faq-text {
  font-weight: 800;
      /* Keep question text on a single line on large devices.
        Use a larger responsive clamp so the text is visually strong
        and matches the attached design. Slight negative letter-spacing
        tightens the type like the reference. */
      font-size: clamp(1.25rem, 2.2vw, 2.2rem);
      letter-spacing: -0.02em;
      /* restore previous line-height */
      line-height: 1.2;
  color: var(--text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* plus/minus icon using pseudo-elements on the question button
   Consolidated single definition to avoid duplicated/contradictory rules.
   The icon uses two bars: ::after = horizontal, ::before = vertical. */
/* Strong, specific icon rules to ensure the plus renders consistently
   across all override stylesheets. Using the `.faq-section` parent to
   increase specificity and `!important` to defeat other preview rules. */
.faq-section .faq-question::before,
.faq-section .faq-question::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--orange) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* horizontal bar */
.faq-section .faq-question::after {
  width: 22px !important;
  height: 3px !important;
  right: clamp(1.25rem, 3vw, 2.25rem) !important;
}

/* vertical bar */
.faq-section .faq-question::before {
  width: 3px !important;
  height: 22px !important;
  /* center vertical bar over horizontal bar */
  right: calc(clamp(1.25rem, 3vw, 2.25rem) + 9.5px) !important;
}

/* animate to minus on open */
.faq-item.is-open .faq-question::before {
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
}

.faq-section .faq-question::after {
  transition: background 0.18s ease, transform 0.18s ease;
}

/* Final override: use a single SVG-based ::after icon to ensure a clean '+'
   regardless of other pseudo-element rules. Hide ::before to avoid double-bars. */
/* Icon bars: explicit horizontal and vertical bars to form a '+' */
.faq-section .faq-question::before,
.faq-section .faq-question::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: var(--orange) !important;
  border-radius: 2px !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

.faq-section .faq-question::after {
  /* horizontal bar */
  width: 22px !important;
  height: 4px !important;
  right: clamp(1.25rem, 3vw, 2.25rem) !important;
}

.faq-section .faq-question::before {
  /* vertical bar */
  width: 4px !important;
  height: 22px !important;
  right: calc(clamp(1.25rem, 3vw, 2.25rem) + 9px) !important;
}

/* When open: hide vertical bar to form a minus */
.faq-item.is-open .faq-question::before {
  opacity: 0 !important;
  transition: opacity 0.18s ease !important;
}

/* When expanded: rotate/scale to make it look like minus (we'll fade the vertical) */
.faq-item.is-open .faq-question::before {
  opacity: 0;
  /* hide vertical bar to become minus */
  transition: opacity 0.18s ease;
}

.faq-question::after {
  transition: background 0.18s ease, transform 0.18s ease;
}

/* Answer area */
.faq-answer {
  background: var(--orange);
  color: #fff;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.6;
  box-sizing: border-box;

  /* collapsed state */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0;
  /* ✅ no padding when closed */
  transition: max-height 0.36s cubic-bezier(.2, .8, .2, 1),
    opacity 0.28s ease,
    padding 0.28s ease;
  text-align: left;
  /* hide answer border when closed to avoid inner double-lines */
  border-top: none;
  margin: 0 !important;
  position: relative;
  z-index: 0;
}

/* open state: reveal padding and add top divider to visually separate question/answer */
.faq-item.is-open .faq-answer {
  max-height: 900px;
  /* large enough for a long answer; increase if needed */
  opacity: 1;
  padding: 3.5rem 3.5rem;
  /* keep same roomy padding when open */
  border-top: 2px solid var(--border);
}

/* optional: improve readability on small screens */
@media (max-width:720px) {
  .faq-answer {
    padding: 2rem 1.25rem;
    font-size: clamp(0.98rem, 2.6vw, 1.05rem);
  }
}

/* smaller screens adjustments */
@media (max-width: 720px) {
  .faq-question {
    padding-left: 1rem;
    padding-right: 3.25rem;
  }

  .faq-text {
    /* allow wrapping on small screens */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(1rem, 3.8vw, 1.4rem);
  }

/* Larger-device tuning: slightly bigger question text but keep single-line
   and free a little horizontal space by reducing the right padding. */
@media (min-width: 1024px) {
  /* Larger desktop: scale up the question text to match design */
  .faq-text {
    font-size: 2.6rem;
    letter-spacing: -0.02em;
    line-height: 1.02;
  }

  /* Give the question more horizontal room so it stays on one line */
  .faq-question {
    padding-right: 1.2rem;
  }
}

@media (min-width: 1400px) {
  /* Extra-large desktop: match the big headline-like sizing in the mock */
  .faq-text {
    font-size: 3.2rem;
    letter-spacing: -0.02em;
  }
}

  .faq-title {
    margin-bottom: 1.5rem;
  }
}

.faq-question:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(233, 91, 32, 0.12);
}

/* ensure the plus/minus remains positioned when using relative positioning */
.faq-item {
  position: relative;
}

.faq-question {
  position: relative;
}

.certifications-section {
  position: relative;
  background: var(--orange);
  color: #fff;
  padding: 4rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* User-requested: keep certifications section hidden until needed.
   This keeps the markup present but ensures it remains non-visible. */
.certifications-section {
  display: none !important;
}

.certifications-content {
  width: 100%;
  max-width: var(--container-max);
  text-align: left;
  z-index: 2;
}

.certifications-title {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 2rem;
}

.certifications-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}

.cert-logo {
  height: 100px;
  width: auto;
  object-fit: contain;
  background: #fff;
  border-radius: 50%;
  padding: 1rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* white curved accent on bottom-right */
.certifications-accent {
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border: 8px solid #fff;
  border-radius: 50%;
  z-index: 1;
}

/* responsive tweaks */
@media (max-width: 768px) {
  .certifications-content {
    text-align: center;
  }

  .certifications-logos {
    justify-content: center;
  }

  .cert-logo {
    height: 70px;
    padding: 0.75rem;
  }
}

/* Responsive, no-fixed-px CSS for site strip */
/* Paste this into your stylesheet (replace previous .site-strip rules) */

/* REPLACEMENT: compact, responsive gutters and better large-screen behavior */

:root{
  --orange: #e95b20;
  --muted-text: #444;

  /* Fixed size for decorative icons (plus / leaf) to keep visual thickness constant */
  --decor-icon-size: 48px;
  /* container width and responsive gutter */
  /* fluid container: grows with viewport but clamps to reasonable extremes */
  --container-max: clamp(1000px, 80vw, 1400px);
  --gutter-inline: clamp(12px, 1.6vw, 48px); /* left/right padding scales but is capped */

  /* sizing tuned for balanced spacing */
  /* Footer spacing tokens (authoritative single source) */
    /* horizontal gap between columns: calculate from container so at
      the 1920px baseline (container ≈1400px) this computes to ~40px */
    --footer-gap: clamp(20px, calc(var(--container-max) * 0.0285), 56px);
  --footer-row-gap: clamp(8px, 1vw, 16px);   /* vertical gap between rows */
  --strip-right-min: clamp(160px, 14vw, 320px);
  --accent-gap: clamp(0.9rem, 2.2vw, 1.75rem);
  --logo-size: clamp(5.5rem, 8.5vw, 9.5rem);
  --logo-padding: clamp(.45rem, 1.0vw, .9rem);
  --nav-font: clamp(.98rem, 1.6vw, 1.25rem);
  /* Accent line thickness: keep a stable visual thickness across devices */
  --accent-height: 3px;
  --pill-size: clamp(2rem, 2.4vw, 2.4rem);
  /* Footer-specific responsive paddings derived from container width so
     they compute to the 1920px baseline while remaining responsive. */
  --footer-padding-inline: clamp(20px, calc(var(--container-max) * 0.034), 56px);
  --footer-padding-block: clamp(18px, calc(var(--container-max) * 0.02), 32px);
  --footer-nav-gap: clamp(10px, calc(var(--container-max) * 0.008), 20px);
}

/* outer section */
.site-strip {
  background: #fff;
  padding-block: var(--footer-padding-block); /* reasonable vertical spacing */
  box-sizing: border-box;
}

/* Footer color theme: only inside `.site-strip` */
.site-strip {
  background: var(--orange);
  color: #fff;
}

.site-strip .strip-nav a,
.site-strip .strip-nav {
  color: #fff;
}

/* Accent (orange rule) should be white on the orange footer */
.site-strip .accent-line {
  background: #fff !important;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* Make the back-to-top icon visible on orange background: invert to white bg */
.site-strip .back-icon {
  background: #fff !important;
  color: var(--orange) !important;
}

/* Ensure the Back to top label is white on the orange footer */
.site-strip .back-to-top,
.site-strip .back-to-top .back-text {
  color: #fff !important;
}

/* centered container with smaller gutters on wide screens */
.site-strip-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--footer-padding-inline); /* use container-relative footer padding */
  box-sizing: border-box;
  position: relative;
}

/* top row: back-to-top aligned right on large screens */
.strip-toprow {
  display: flex;
  justify-content: flex-end;
  margin-bottom: calc(var(--accent-gap) / 3);
}

/* back pill */
.back-to-top{
  display:inline-flex;
  align-items:center;
  gap: .6rem;
  padding-inline: .5rem;
  border-radius:999px;
  color:var(--muted-text);
  font-weight:600;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
}
.back-icon{
  width: var(--pill-size);
  height: var(--pill-size);
  display:inline-grid;
  place-items:center;
  background:var(--orange);
  color:#fff;
  border-radius:50%;
  font-size: .9rem;
  line-height:1;
}

/* accent line: full width within gutters, smaller gap below */
.accent-line{
  width:100%;
  height: var(--accent-height);
  background: var(--orange);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(233,91,32,0.09);
  margin-bottom: var(--accent-gap);
  box-sizing: border-box;
}

/* main content row */
.strip-row{
  display:flex;
  align-items:center;
  /* use the centralized footer gap tokens so spacing is controlled in one place */
  column-gap: var(--footer-gap);
  row-gap: var(--footer-row-gap);
  gap: 0; /* rely on column-gap/row-gap for clarity */
}

/* Defensive: ensure footer column/row gaps are not zeroed by later rules
   (some preview CSS may override gap shorthand). These are high-specificity,
   footer-scoped `!important` rules to preserve visual parity. */
.site-strip .strip-row {
  column-gap: var(--footer-gap) !important;
  row-gap: var(--footer-row-gap) !important;
}

/* logo box (smaller on huge screens) */
.logo-img-footer {
  height: clamp(168px, calc(var(--container-max) * 0.15), 240px);
  width: auto;
  object-fit: contain;
  display: block;
}

/* center spacer */
.strip-center { flex: 1 1 1px; min-width: 0; }

/* right column: smaller min-width so it doesn't push the gutters */
.strip-right{
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: clamp(8px, 1.2vw, 16px);
  /* use a px/vw clamp for min-width so the right column scales but doesn't
     become too narrow on mid-sized screens */
  min-width: clamp(160px, 14vw, 320px);
}

/* nav styles */
.strip-nav{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap: var(--footer-nav-gap);
  font-size: var(--nav-font);
  color:var(--muted-text);
}
.strip-nav a{
  color:inherit;
  text-decoration:none;
  transition: transform .12s ease, color .12s ease;
}
.strip-nav a:hover { transform: translateX(-6px); color:#222; }

/* Keep footer nav links on a single line to avoid awkward wrapping
   (Terms and Conditions should not break). Scoped to footer only. */
.site-strip .strip-nav a {
  display: inline-block;
  white-space: nowrap;
}

/* ----------------- tuning for very large screens ----------------- */
/* reduce left/right gutter visually on very large viewports */
@media (min-width: 1400px) {
  :root {
    /* allow the root clamp() value to control container width across large screens */
    --gutter-inline: clamp(1rem, 1.8vw, 3rem); /* tighter gutters on very large screens */
    --logo-size: clamp(6rem, 7.5vw, 9rem);
  }
}

/* small screens: stack and center, keep gutters small */
@media (max-width: 48rem) { /* ~768px */
  :root {
    --gutter-inline: clamp(.75rem, 4vw, 1.5rem);
    --logo-size: clamp(4.6rem, 12vw, 6.2rem);
  }

  .strip-toprow { justify-content: center; }
  .accent-line { margin-bottom: calc(var(--accent-gap) / 1.3); }
  .strip-row { flex-direction: column; align-items:center; gap: 1rem; text-align:center; }
  .strip-right { align-items:center; min-width:0; }
  .strip-nav { flex-direction:row; gap: var(--footer-nav-gap); flex-wrap:wrap; justify-content:center; font-size: clamp(.9rem, 2.6vw, 1rem); }
  .back-text { display:none; } /* optional */

  /* On small screens we reduce footer font-size to keep layout compact */
  .site-strip { font-size: 14px; }
}

/* FAQ styles consolidated: original FAQ rules from project base (kept above) */

/* Footer: small, scoped responsive tweaks to keep visual parity across sizes.
   These rules are limited to `.site-strip` and its children and avoid touching
   other sections. They keep the same visual structure on large screens and
   stack cleanly on small screens. */
@media (min-width: 1024px) {
  .site-strip {
    padding-block: clamp(18px, 2.4vw, 32px);
  }

  .site-strip .site-strip-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    /* use px/vw clamp for padding so it doesn't grow in rem units affected
       by preview `html` scaling; keeps interior usable width predictable */
    /* footer-only: slightly reduce max padding to preserve interior width */
    padding-inline: var(--footer-padding-inline);
    box-sizing: border-box;
  }

  .site-strip .strip-row {
    display: flex;
    align-items: center;
    column-gap: var(--footer-gap);
    row-gap: var(--footer-row-gap);
  }

  .site-strip .strip-left { flex: 0 0 auto; }
  .site-strip .strip-center { flex: 1 1 auto; }
  /* Keep right column a vertical column on desktop */
  .site-strip .strip-right { flex: 0 0 auto; display:flex; flex-direction:column; align-items:flex-end; }

  .site-strip .strip-nav {
    display: flex; flex-direction: column; gap: var(--footer-nav-gap);
    align-items: flex-end;
  }
}

/* Medium screens: slightly reduced spacing but same layout */
@media (min-width: 769px) and (max-width: 1023px) {
  .site-strip .site-strip-inner { padding-inline: var(--footer-padding-inline); }
  .site-strip .strip-row { column-gap: var(--footer-gap); row-gap: var(--footer-row-gap); }
  /* Keep right column stacked on medium screens as well */
  .site-strip .strip-right { display:flex; flex-direction:column; align-items:flex-end; }
  .site-strip .strip-nav { gap: var(--footer-nav-gap); flex-direction: column; align-items: flex-end; }
}

/* Small screens: stack and center footer content */
@media (max-width: 768px) {
  .site-strip .strip-row { display:flex; flex-direction:column; align-items:center; gap: 1rem; text-align:center; }
  .site-strip .strip-right { justify-content: center; }
  .site-strip .strip-nav { flex-direction: row; gap: var(--footer-nav-gap); flex-wrap: wrap; justify-content: center; }
  .site-strip .back-text { display: none; }
}

/* Ensure a stable, minimum vertical spacing between footer rows so the
   footer doesn't visually "shrink" at intermediate widths. These are
   small, scoped overrides targeting only footer spacing. */
.site-strip .strip-toprow { margin-bottom: calc(var(--accent-gap) / 3) !important; }
.site-strip .accent-line { margin-bottom: var(--accent-gap) !important; }

/* Consolidated footer spacing rules (single authoritative source).
   We set scoped CSS variables on `.site-strip` for the gap and right-column
   min-width so the spacing is easy to tune and no longer relies on
   multiple competing rules or `!important`. */
@media (min-width: 769px) {
  .site-strip {
   /* footer-scoped adjustments: use percentage-based clamps so spacing
     scales with the container width and remains stable under browser zoom */
  /* Keep footer gap container-relative so it matches baseline visually */
  --footer-gap: clamp(20px, calc(var(--container-max) * 0.0285), 56px);
   --footer-row-gap: clamp(8px, 1%, 16px);
   --strip-right-min: clamp(140px, 12%, 320px);

   /* Force footer-internal tokens to stable values (px/%) so zoom does
     not change perceived spacing. These are strictly scoped to .site-strip. */
  --accent-gap: 20px;
  --accent-height: 3px;
  --logo-size: 80px;
  --logo-padding: 12px;
  }

  /* Pin left/right to edges and let center absorb space so the visual
     separation stays proportional across desktop widths. */
  .site-strip .strip-row { justify-content: space-between; }

  .site-strip .strip-left,
  .site-strip .strip-right { flex: 0 0 auto; }

  .site-strip .strip-center { flex: 1 1 auto; min-width: 0; }

/* Desktop: use responsive clamp/% tokens (no fixed px container) so the
   footer behaves like other sections while keeping stable proportions.
   These values mirror the project's responsive approach and avoid
   fixed px font sizes that the user asked to avoid. */
@media (min-width: 1024px) {
  .site-strip {
    padding-block: clamp(18px, 2.4vw, 32px);
  }

  .site-strip .site-strip-inner {
    max-width: var(--container-max);
    margin-inline: auto;
    /* responsive padding that matches other sections' style */
    padding-inline: clamp(24px, 2.2vw, 48px);
    box-sizing: border-box;
  }

  /* responsive gap that scales with the container */
  .site-strip .strip-row { column-gap: clamp(20px, 3%, 48px); }

  /* left column: scale with percentage but keep a sensible min */
  .site-strip .strip-left { flex: 0 0 clamp(120px, 10%, 16%); }

  /* center grows; right column uses responsive clamp for min/max */
  .site-strip .strip-center { flex: 1 1 auto; }
  .site-strip .strip-right {
    flex: 0 0 clamp(160px, 14%, 28%);
    min-width: clamp(140px, 12%, 28%);
    display:flex;
    flex-direction:column;
    align-items:flex-end;
  }

  .site-strip .strip-nav { gap: var(--footer-nav-gap); font-size: var(--nav-font); }
  .site-strip .accent-line { height: var(--accent-height); min-height: 3px; background: var(--orange); display: block; margin-bottom: var(--accent-gap); }
}

  .site-strip .strip-right {
    min-width: var(--strip-right-min);
    flex-direction: column;
    align-items: flex-end;
  }

  .site-strip .strip-nav {
    flex-direction: column;
    align-items: flex-end;
  }

  /* Desktop: pin left/right columns as container-relative percentages so
     zooming (browser scaling) preserves the visual proportions. Center
     column absorbs remaining space. These are footer-only and scoped. */
  .site-strip .site-strip-inner {
    padding-inline: clamp(16px, 3%, 32px);
  }

  .site-strip .strip-left {
    flex: 0 0 16%;
    max-width: 16%;
  }

  .site-strip .strip-right {
    flex: 0 0 20%;
    max-width: 20%;
    min-width: var(--strip-right-min);
  }

  .site-strip .strip-center {
    flex: 1 1 auto;
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .site-strip {
    /* Tokens tuned for 1920px baseline (container ≈1400px). Use clamp() so
       values remain responsive but compute to the baseline at 1920px. */
    --footer-gap: clamp(20px, calc(var(--container-max) * 0.0285), 56px); /* ~40px at baseline */
    --strip-right-min: clamp(160px, 20%, 420px); /* 20% of container ≈ 280px */

    --accent-gap: clamp(18px, 1.6%, 28px); /* ~22px at baseline */
    --accent-height: 3px;
    --logo-size: clamp(64px, 6.3%, 128px); /* ~88px at baseline */
    --logo-padding: clamp(10px, 1%, 18px); /* ~14px at baseline */
  }

  /* Slightly adjust left/right proportions on larger screens */
  .site-strip .site-strip-inner {
    padding-inline: var(--footer-padding-inline);
  }

  .site-strip .strip-left { flex: 0 0 14%; max-width: 14%; }
  .site-strip .strip-right { flex: 0 0 clamp(16%, 18%, 22%); max-width: 22%; min-width: var(--strip-right-min); }
  .site-strip .strip-center { flex: 1 1 auto; min-width: 0; }
}