/* Mental tenant theme stylesheet: design-system sliders feed computed CSS variables and UI styles */
/* ===== 0. SLIDERS BLOCK (Admin Design System Input) ===== */
:root{
 /* NEW COLOR SLIDERS - Complete HSL values */
 --slider-primary:hsl(188,100%,55%); /* Main brand color,buttons,links */
 --slider-secondary:hsl(221,14%,38%); /* Supporting brand color */
 --slider-accent:hsl(204,43%,34%); /* Highlight/call-to-action color */
 --slider-contrast:hsl(32,54%,68%); /* Alternative color */
 --slider-neutral:hsl(240,23%,20%); /* Calmer color */
 --slider-background:hsl(240,46%,11%); /* for backgrounds */

 /* EXTRACT HSL COMPONENTS FROM SLIDER COLORS */
 --primary-h:188; --primary-s:100%; --primary-l:55%;
 --secondary-h:221; --secondary-s:14%; --secondary-l:38%;
 --accent-h:204; --accent-s:43%; --accent-l:34%;
 --contrast-h:31; --contrast-s:49%; --contrast-l:67%;
 --neutral-h:240; --neutral-s:23%; --neutral-l:20%;
 --background-h:240; --background-s:46%; --background-l:11%;

 /* FONT SLIDERS */
 --slider-heading-font:"neue-haas-unica",sans-serif;
 --slider-body-font:"neue-haas-unica",sans-serif;
 --slider-pretty-font:"neue-haas-unica",sans-serif;
 --slider-heading-weight:700; /* 300-900,step 100 */
 --slider-body-weight:300; /* 300-900,step 100 */
 --slider-text-base:33; /* Based on 1.2rem base */
 --slider-type-scaler:30; /* Based on font-size ratios */
 --slider-text-line-height-base:35; /* Based on 33 = normal 1.5 x text-base */
 --slider-text-letter-spacing-base:31; /* Based 33 = normal zero adjustment */
 --placeholder-color: rgba(255,255,255,0.6);
 --placeholder-style: italic;

 /* PERSONALITY SLIDERS (0-100) */
 --slider-animation-energy:20; /* Based on your 0.2s-0.5s transitions */
 --slider-parallax-depth:60; /* parallax currently used */
 --slider-liquid-motion:15; /* Based on ease transitions */
 --slider-glitch-factor:0; /* No glitch effects currently */
 --slider-neon-glow:5; /* Subtle text-shadow on h1 */
 --slider-pulse-rhythm:10; /* Based on bounce animation */
 --slider-holographic-shift:0; /* No holographic effects */
 --slider-texture-intensity:0; /* No texture overlays */
 --slider-handcraft-wobble:0; /* No wobble effects */
 --slider-corner-radius:25; /* Based on 0.25rem-1.6rem range */
 --slider-section-padding:60; /* Based on 6rem container padding */
 --slider-vintage-filter:0; /* No vintage effects */
 --slider-light-leak:0; /* No light leak effects */
 --slider-gradient-drama:40; /* Based on existing gradients */
 --slider-shadow-depth:10; /* Based on subtle shadows */
 --slider-brutalist-edge:0; /* No brutalist effects */
 --slider-chromatic-split:0; /* No chromatic effects */
 --slider-stacking-chaos:0; /* No chaos effects */
 --slider-blur-zones:0; /* No blur effects */
 --slider-grid-warping:0; /* No grid warping */
 --slider-asymmetry:0; /* Based on centered layouts with some offset */
 --slider-content-width:60; /* Based on 960px max-width */
 --slider-vertical-spacing:50; /* Based on current spacing scale */
 --slider-3d-tilt:0; /* No 3D effects currently */
 --slider-typewriter-tempo:50; /* Default typing speed */
}
/* ===== END SLIDERS BLOCK ===== */

/* ===== 1. VARIABLES BLOCK (Calculated from Sliders) ===== */
:root{
 /* PRIMARY COLOR SYSTEM */
 --color-primary:var(--slider-primary);
 --color-primary-lighter:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5));
 --color-primary-greyer:hsl(var(--primary-h),calc(var(--primary-s) * 0.5),var(--primary-l));
 --color-primary-darker:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l) * 0.5));
 --color-primary-tint-75:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l)) * 0.75));
 --color-primary-tint-50:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l)) * 0.5));
 --color-primary-tint-25:hsl(var(--primary-h),var(--primary-s),calc(var(--primary-l) + (100% - var(--primary-l)) * 0.25));

 /* SECONDARY COLOR SYSTEM */
 --color-secondary:var(--slider-secondary);
 --color-secondary-lighter:hsl(var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5));
 --color-secondary-greyer:hsl(var(--secondary-h),calc(var(--secondary-s) * 0.5),var(--secondary-l));
 --color-secondary-darker:hsl(var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) * 0.5));
 --color-secondary-tint-75:hsl(var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.75));
 --color-secondary-tint-50:hsl(var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.5));
 --color-secondary-tint-25:hsl(var(--secondary-h),var(--secondary-s),calc(var(--secondary-l) + (100% - var(--secondary-l)) * 0.25));

 /* ACCENT COLOR SYSTEM */
 --color-accent:var(--slider-accent);
 --color-accent-lighter:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5));
 --color-accent-greyer:hsl(var(--accent-h),calc(var(--accent-s) * 0.5),var(--accent-l));
 --color-accent-darker:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) * 0.5));
 --color-accent-tint-75:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) + (100% - var(--accent-l)) * 0.75));
 --color-accent-tint-50:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) + (100% - var(--accent-l)) * 0.5));
 --color-accent-tint-25:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) + (100% - var(--accent-l)) * 0.25));

 /* CONTRAST COLOR SYSTEM */
 --color-contrast:var(--slider-contrast);
 --color-contrast-lighter:hsl(var(--contrast-h),var(--contrast-s),calc(var(--contrast-l) + (100% - var(--contrast-l)) * 0.5));
 --color-contrast-greyer:hsl(var(--contrast-h),calc(var(--contrast-s) * 0.5),var(--contrast-l));
 --color-contrast-darker:hsl(var(--contrast-h),var(--contrast-s),calc(var(--contrast-l) * 0.5));
 --color-contrast-tint-75:hsl(var(--contrast-h),var(--contrast-s),calc(var(--contrast-l) + (100% - var(--contrast-l)) * 0.75));
 --color-contrast-tint-50:hsl(var(--contrast-h),var(--contrast-s),calc(var(--contrast-l) + (100% - var(--contrast-l)) * 0.5));
 --color-contrast-tint-25:hsl(var(--contrast-h),var(--contrast-s),calc(var(--contrast-l) + (100% - var(--contrast-l)) * 0.25));

 /* NEUTRAL COLOR SYSTEM */
 --color-neutral:var(--slider-neutral);
 --color-neutral-lighter:hsl(var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l)) * 0.5));
 --color-neutral-greyer:hsl(var(--neutral-h),calc(var(--neutral-s) * 0.5),var(--neutral-l));
 --color-neutral-darker:hsl(var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) * 0.5));
 --color-neutral-tint-75:hsl(var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l)) * 0.75));
 --color-neutral-tint-50:hsl(var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l)) * 0.5));
 --color-neutral-tint-25:hsl(var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l)) * 0.25));
 --color-neutral-tint-hint:hsl(var(--neutral-h),var(--neutral-s),calc(var(--neutral-l) + (100% - var(--neutral-l)) * 0.03));

 /* BACKGROUND COLOR SYSTEM */
 --color-background:var(--slider-background);
 --color-background-lighter:hsl(var(--background-h),var(--background-s),calc(var(--background-l) + (100% - var(--background-l)) * 0.2));
 --color-background-greyer:hsl(var(--background-h),calc(var(--background-s) * 0.5),var(--background-l));
 --color-background-darker:hsl(var(--background-h),var(--background-s),calc(var(--background-l) * 0.5));
 --color-background-tint-75:hsl(var(--background-h),var(--background-s),calc(var(--background-l) + (100% - var(--background-l)) * 0.75));
 --color-background-tint-50:hsl(var(--background-h),var(--background-s),calc(var(--background-l) + (100% - var(--background-l)) * 0.5));
 --color-background-tint-25:hsl(var(--background-h),var(--background-s),calc(var(--background-l) + (100% - var(--background-l)) * 0.25));

 /* MONOCHROME SYSTEM */
 --color-white-100:hsl(0,0%,100%);
 --color-white-90:hsl(0,0%,90%);
 --color-white-80:hsl(0,0%,80%);
 --color-black-50:hsl(0,0%,50%);
 --color-black-20:hsl(0,0%,20%);
 --color-black-0:hsl(0,0%,0%);

 /* SEMANTIC COLOR MAPPINGS - Updated to use new system */
 --color-primary-light:var(--color-primary-lighter);
 --color-primary-dark:var(--color-primary-darker);
 --color-success:var(--color-accent);
 --color-warning:var(--color-contrast);
 --color-highlight:var(--color-accent-lighter);
 --color-special:var(--color-secondary);

 /* BACKGROUND MAPPINGS */
 --color-bg:var(--color-background);
 --color-bg-light:var(--color-background-lighter);
 --color-bg-white:var(--color-white-100);
 --color-bg-service:var(--color-background-tint-25);
 --color-bg-alt:var(--color-background-greyer);
 --color-bg-footer:var(--color-neutral-darker);
 --color-bg-footer-light:var(--color-neutral);
 --color-bg-dark:var(--color-black-0);
 --color-bg-form:var(--color-white-90);

 /* TEXT COLOR MAPPINGS */
 --color-text:var(--color-white-80);
 --color-text-secondary:var(--color-contrast);
 --color-text-dark:var(--color-black-20);
 --color-text-black:var(--color-black-0);
 --color-text-white:var(--color-white-100);
 --color-text-light:var(--color-white-80);
 --color-text-muted:var(--color-neutral-greyer);
 --color-text-link:var(--color-primary);

 /* BORDER COLOR MAPPINGS */
 --color-border:var(--color-neutral-tint-50);
 --color-border-light:var(--color-neutral-tint-75);
 --color-border-dark:var(--color-black-20);
 --color-border-form:var(--color-neutral-greyer);

 /* TYPOGRAPHY - From font sliders */
 --font-primary:var(--slider-body-font);
 --font-decorative:var(--slider-pretty-font);
 --font-heading:var(--slider-heading-font);

 /* Calculated font sizes based on text scale */
 --font-base-scale:calc(1 + (var(--slider-text-base) / 100));
 --scale-contrast:calc(1 + (var(--slider-type-scaler) / 100));

 --font-size-base:calc(1.2rem * var(--font-base-scale));
 --font-size-h1:calc(var(--font-size-base) * var(--scale-contrast) * var(--scale-contrast) * var(--scale-contrast) * var(--scale-contrast));
 --font-size-h2:calc(var(--font-size-base) * var(--scale-contrast) * var(--scale-contrast) * var(--scale-contrast) );
 --font-size-h3:calc(var(--font-size-base) * var(--scale-contrast)  * var(--scale-contrast) );
 --font-size-h4:calc(var(--font-size-base) * var(--scale-contrast)  );
 --font-size-h5:calc(var(--font-size-base) * ( 1 + ( var(--scale-contrast) - 1) / 2 )  );
 --font-size-h6:calc(var(--font-size-base) );
 --font-size-small:calc(calc(var(--font-size-base) * 0.67));

 --font-weight-light:200;
 --font-weight-normal:var(--slider-body-weight);
 --font-weight-bold:var(--slider-heading-weight);

 --line-height-core:calc(1.5 *  var(--font-size-base) * (1 + ( var(--slider-text-line-height-base) - 40) / 100) ); /*33 gives 1.5 x font-base */
 --line-height-0-75:calc( var(--line-height-core) * 0.75);
 --line-height-1-5: calc( var(--line-height-core) * 1.5);
 --line-height-2:   calc( var(--line-height-core) * 2);
 --line-height-2-5: calc( var(--line-height-core) * 2.5);
 --line-height-3:   calc( var(--line-height-core) * 3);
 --line-height-3-5: calc( var(--line-height-core) * 3.5);


 /*--slider-text-letter-spacing-base:31; !* Based 33 = normal zero adjustment *!*/
 --letter-space-xs:-0.05em;
 --letter-space-sm:-0.03em;
 --letter-space-core:0;
 --letter-space-lg:0.04em;
 --letter-space-vl:0.08em;

 /* SPACING - Calculated from vertical spacing slider */
 --spacing-multiplier:calc(0.5 + (var(--slider-vertical-spacing) / 100));
 --space-xs:calc(0.25rem * var(--spacing-multiplier));
 --space-sm:calc(0.5rem * var(--spacing-multiplier));
 --space-md:calc(1rem * var(--spacing-multiplier));
 --space-lg:calc(1.5rem * var(--spacing-multiplier));
 --space-xl:calc(2rem * var(--spacing-multiplier));
 --space-2xl:calc(2.4rem * var(--spacing-multiplier));
 --space-3xl:calc(3rem * var(--spacing-multiplier));
 --space-4xl:calc(4rem * var(--spacing-multiplier));
 --space-5xl:calc(5rem * var(--spacing-multiplier));
 --space-6xl:calc(6rem * var(--spacing-multiplier));
 --space-8xl:calc(8rem * var(--spacing-multiplier));
 --space-10xl:calc(10rem * var(--spacing-multiplier));
 --space-16xl:calc(16rem * var(--spacing-multiplier));

 /* Container and layout */
 --container-padding:3rem;
 --container-padding-top:calc(var(--space-6xl) * calc(var(--slider-section-padding) / 60));
 --container-max:calc(960px * (0.5 + (var(--slider-content-width) / 100)));

 /* BORDERS & EFFECTS - Calculated from sliders */
 --radius-multiplier:calc(var(--slider-corner-radius) / 25);
 --radius-sm:calc(0.25rem * var(--radius-multiplier));
 --radius-md:calc(0.5rem * var(--radius-multiplier));
 --radius-lg:calc(1rem * var(--radius-multiplier));
 --radius-xl:calc(1.1rem * var(--radius-multiplier));
 --radius-2xl:calc(1.6rem * var(--radius-multiplier));
 --radius-btn:calc(5px * var(--radius-multiplier));

 --border-thin:1px;
 --border-thick:4px;

 /* Shadows calculated from depth */
 --shadow-intensity:calc(var(--slider-shadow-depth) / 100);
 --shadow-light:0 1px 3px rgba(0,0,0,calc(0.1 * var(--shadow-intensity)));
 --shadow-text:0 0 calc(50rem * var(--shadow-intensity)) var(--color-black-0);

 /* Transitions calculated from animation energy */
 --speed-multiplier:calc(1 - (var(--slider-animation-energy) / 150));
 --transition-fast:calc(0.2s * var(--speed-multiplier));
 --transition-normal:calc(0.3s * var(--speed-multiplier));
 --transition-slow:calc(0.5s * var(--speed-multiplier));

 --opacity-low:0.1;
 --opacity-medium:0.4;
 --opacity-high:0.7;
 --opacity-very-high:0.8;

 /* Z-index */
 --z-overlay:100;
 --z-menu-bg:99;
 --z-menu:999;
 --z-brand:9999;

 /* GRADIENTS - Updated to use new color system */
 --gradient-intensity:calc(var(--slider-gradient-drama) / 100);
 --grad-primary:linear-gradient(to bottom,var(--color-accent-tint-25) 0%,var(--color-primary) 50%,var(--color-secondary-tint-25) 100%);
 --grad-primary-hover:linear-gradient(to bottom,var(--color-secondary-tint-25) 0%,var(--color-primary) 50%,var(--color-accent-tint-25) 100%);
 --grad-secondary:linear-gradient(135deg,var(--color-secondary-tint-25) 0%,var(--color-neutral) 50%,var(--color-background-tint-25) 100%);
 --grad-accent:linear-gradient(to right,var(--color-accent-darker) 0%,var(--color-accent) 50%,var(--color-accent-lighter) 100%);
 --grad-contrast:linear-gradient(45deg,var(--color-contrast-tint-25) 0%,var(--color-contrast) 35%,var(--color-primary-tint-50) 65%,var(--color-secondary-tint-25) 100%);
 --grad-neutral:linear-gradient(to bottom right,var(--color-neutral-tint-75) 0%,var(--color-background) 50%,var(--color-neutral-tint-50) 100%);
 --grad-rainbow:linear-gradient(45deg,#ff0000,#ff7300,#fffb00,#48ff00,#00ffd5,#002bff,#7a00ff,#ff00c8,#ff0000);
 --grad-bg-service:radial-gradient(circle at top left,var(--color-bg),var(--color-bg-light),var(--color-bg-white));
 --grad-bg-alt:radial-gradient(circle at top left,var(--color-background-tint-25),var(--color-bg),var(--color-bg-light));
 --grad-bg-footer:radial-gradient(circle at top left,var(--color-bg-footer-light),var(--color-bg-footer),var(--color-bg));

 /* Form */
 --form-height:38px;
 --form-padding:6px 10px;
 --textarea-min-height:65px;

 /* Grid */
 --grid-gap:0.8rem;
 --col-margin:4%;

 /* Breakpoint reference values */
 --bp-tablet:30rem;
 --bp-desktop:48rem;
 --bp-large:80rem;
 --bp-xl:120rem;

 /* ASYMMETRY - Calculated from asymmetry slider */
 --asymmetry-factor:calc(var(--slider-asymmetry) / 100);
 --asymmetry-offset:calc(var(--asymmetry-factor) * 3rem);
 --asymmetry-rotation:calc(var(--asymmetry-factor) * 2deg);
 --asymmetry-scale:calc(1 + (var(--asymmetry-factor) * 0.1));
 --asymmetry-skew:calc(var(--asymmetry-factor) * 1deg);

 /* PERSONALITY EFFECTS - Pass slider values to CSS */
 --design-animation-energy:var(--slider-animation-energy);
 --design-parallax-depth:var(--slider-parallax-depth);
 --design-liquid-motion:var(--slider-liquid-motion);
 --design-glitch-factor:var(--slider-glitch-factor);
 --design-neon-glow:var(--slider-neon-glow);
 --design-pulse-rhythm:var(--slider-pulse-rhythm);
 --design-holographic-shift:var(--slider-holographic-shift);
 --design-texture-intensity:var(--slider-texture-intensity);
 --design-handcraft-wobble:var(--slider-handcraft-wobble);
 --design-vintage-filter:var(--slider-vintage-filter);
 --design-light-leak:var(--slider-light-leak);
 --design-brutalist-edge:var(--slider-brutalist-edge);
 --design-chromatic-split:var(--slider-chromatic-split);
 --design-stacking-chaos:var(--slider-stacking-chaos);
 --design-blur-zones:var(--slider-blur-zones);
 --design-grid-warping:var(--slider-grid-warping);
 --design-3d-tilt:var(--slider-3d-tilt);
 --design-typewriter-tempo:calc(var(--slider-typewriter-tempo) / 100 * 2s);
}
/* ===== END VARIABLES BLOCK ===== */

/* ===== 2. DESIGNER BLOCK (Variable-Driven Design) ===== */

/* Reset & Normalize */
*,*::before,*::after{box-sizing:border-box;}
html{line-height:1.15; -webkit-text-size-adjust:100%; font-family:sans-serif; scroll-behavior:smooth;}
body{margin:0; padding:0; width:100%; overflow-x:hidden;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;}
audio,canvas,progress,video{display:inline-block; vertical-align:baseline;}
audio:not([controls]){display:none; height:0;}
[hidden],template,.hidden{display:none;}
h1,h2,h3,h4,h5,h6,p,ul,ol,dl,blockquote,figure{margin:0;}
ul,ol{list-style:none; padding:0;}
img,picture,video,canvas,svg{display:block; max-width:100%;}
input,button,textarea,select{font:inherit;}
button{border:none; background:none; cursor:pointer; overflow:visible;}
a{background-color:transparent; text-decoration:none; color:inherit;}
a:active,a:hover{outline:0;}
table{border-collapse:collapse; border-spacing:0;}
td,th{padding:0;}

/* ===== BASE STYLES - MOBILE FIRST (0 to 30rem) ===== */
html{font-size:calc(62.5% * 0.9);}
body{width:100%; padding:0; font-size:var(--font-size-base); overflow-x:hidden; line-height:var(--line-height-core); font-weight:var(--font-weight-normal); font-family:var(--font-primary); color:var(--color-text); background:var(--color-bg); letter-spacing:var(--letter-space-core);}

/* Typography - Variable-Driven with Asymmetry */
h1,h2,h3,h4,h5,h6{margin-top:0; margin-bottom:var(--space-xl); font-weight:var(--font-weight-bold); color:var(--color-text); font-family:var(--font-heading); letter-spacing:0; text-align:left; padding-left:calc(var(--asymmetry-offset) * 0.5);}
h1{font-size:var(--font-size-h1); line-height:var(--line-height-2-5); color:var(--color-text-white); text-shadow:var(--shadow-text); z-index:var(--z-overlay); padding-left:0;letter-spacing:var(--letter-space-xs);}
h2{font-size:var(--font-size-h2); line-height:var(--line-height-2); color:var(--color-white-100); letter-spacing:var(--letter-space-xs);}
#invitation-to-act h2{color:var(--color-bg-light);}
h3{font-size:var(--font-size-h3); line-height:var(--line-height-2); margin-bottom:var(--line-height-core); letter-spacing:var(--letter-space-sm);color: var(--color-text-secondary)}
h4,#thanks{font-size:var(--font-size-h4); line-height:var(--line-height-1-5); text-transform:uppercase; margin-bottom:0; font-family:var(--font-heading); font-weight:var(--font-weight-normal); letter-spacing:var(--letter-space-core); text-align:center; padding-left:0;}
h5{font-size:var(--font-size-h5); line-height:var(--line-height-1-5); letter-spacing:var(--letter-space-core);font-weight:var(--font-weight-bold); }
h6{font-size:var(--font-size-h6); line-height:var(--line-height-core); margin-bottom:0; letter-spacing:var(--letter-space-lg); text-transform: uppercase; font-weight:var(--font-weight-bold);}

/* Paragraph and Text Elements */
p{margin-top:0; margin-bottom:var(--space-2xl);}
p.opener{color:var(--color-bg-light); font-size:125%; padding:0 0 var(--space-8xl) 0; margin:0 auto; max-width:80rem; text-align:center;}
ol.differences{margin:var(--space-xl) 0; color:var(--color-text-white);}
p.more-besides{display:block; text-align:right; text-transform:uppercase; color:rgba(255,255,255,0.2); margin:var(--space-md) 0; font-weight:var(--font-weight-bold);}
blockquote{border-left:var(--space-md) solid var(--color-primary); margin-left:0; color:var(--color-white-80); padding-left:var(--space-md);}
p:nth-of-type(3n){margin-left:var(--asymmetry-offset);}

/* Content Blocks */
article{margin-bottom:var(--space-2xl);}
aside{background:rgba(255,255,255,0.05); border:var(--border-thin) solid rgba(255,255,255,0.1); padding:var(--space-lg); margin:var(--space-xl) 0; border-radius:var(--radius-md);}
figure{margin:var(--space-xl) 0; text-align:center;}
figcaption{margin-top:var(--space-md); font-size:var(--font-size-small); color:var(--color-text-secondary); font-style:italic; line-height:1.25;}
pre{background:var(--color-bg-dark); color:var(--color-text-light); padding:var(--space-lg); margin:var(--space-xl) 0; border-radius:var(--radius-md); overflow-x:auto; font-family:'Courier New',monospace; font-size:90%; line-height:var(--line-height-0-75);}
address{font-style:italic; margin:var(--space-xl) 0; padding:var(--space-lg); border-left:var(--space-sm) solid var(--color-primary); background:rgba(255,255,255,0.03);}

/* Text Formatting */
strong,b{font-weight:var(--font-weight-bold);}
em,i{font-style:italic;}
mark{background-color:var(--color-accent); color:var(--color-text-black); padding:var(--space-xs) var(--space-sm); border-radius:var(--radius-sm);}
s,del{text-decoration:line-through; opacity:var(--opacity-high);}
small{font-size:var(--font-size-small); color:var(--color-text-secondary);}
sup{font-size:80%; line-height:var(--line-height-1-5); vertical-align:super;}
cite{font-style:italic; color:var(--color-text-secondary);}
q{quotes:'"' '"' "'" "'";}
q::before{content:open-quote;}
q::after{content:close-quote;}

/* Grid System with Asymmetry */
*{position:relative;}
section{position:relative; overflow: hidden;}
.container{position:relative; width:100%; max-width:var(--container-max); margin:0 auto; padding:var(--container-padding-top) var(--container-padding); counter-reset:card-counter;}
.grid{display:grid; gap:var(--grid-gap);}
.grid-2-asymmetric{display:grid; gap:var(--grid-gap); grid-template-columns:calc(1fr + var(--asymmetry-factor) * 0.4fr) calc(1fr - var(--asymmetry-factor) * 0.4fr);}
.grid-asymmetric{display:grid; gap:var(--grid-gap); grid-template-columns:calc(1fr + var(--asymmetry-factor) * 0.5fr) calc(1fr - var(--asymmetry-factor) * 0.3fr) calc(1fr + var(--asymmetry-factor) * 0.2fr);}
.column,.cols{width:100%; float:left;}

/* Asymmetric Container Alternation - Subtle Section Variation */
section:nth-child(odd) .container{transform:translateX(calc(var(--asymmetry-offset) * 0.1));}

/* Layout Sections */
.dark{background:var(--color-bg-dark); position:relative; z-index:0;}
.light{background:var(--color-bg-service); background:var(--grad-bg-service) no-repeat; background-size:130% 130%;}
.flat{background-color:var(--color-bg-alt); background:var(--grad-bg-alt) no-repeat; background-size:130% 130%;}
footer{padding:var(--space-5xl) 20px; margin:0; background:var(--color-bg-footer); background:var(--grad-bg-footer) no-repeat; background-size:120% 120%;}

/* Cards & Components with Asymmetry */
.card,.cta,.process-step{position:relative; overflow:hidden; background:radial-gradient(circle at top left,var(--color-primary-tint-75),var(--color-background-tint-75),var(--color-background-tint-50)) no-repeat; background-size:130% 130%; border:var(--border-thin) solid var(--color-border-light); padding:var(--space-lg); box-shadow:var(--shadow-light); border-radius:var(--radius-xl); transform:rotate(calc(var(--asymmetry-rotation) * var(--card-index,0))); margin-top:calc(var(--space-lg) + (var(--asymmetry-offset) * var(--card-index,0) * 0.5));}
.card:nth-child(even){transform:rotate(calc(var(--asymmetry-rotation) * -1)); margin-left:var(--asymmetry-offset);}
.card:nth-child(odd){margin-right:var(--asymmetry-offset);}
.process-step{margin-bottom:30px; background:radial-gradient(circle at top left,var(--color-secondary-tint-75),var(--color-neutral-tint-75),var(--color-background-tint-25)) no-repeat; overflow:visible; margin-left:calc(var(--asymmetry-offset) * var(--step-direction,1));}
.process-step:nth-child(even){--step-direction:-1; margin-right:var(--asymmetry-offset);}
.process-step::after{content:''; height:30px; width:30px; display:block; position:absolute; top:calc(100% + 1px); left:calc(7rem + var(--asymmetry-offset) * 0.5); background-image:url('/theme/process-arrow.svg'); background-size:contain; background-repeat:no-repeat; transform:rotate(calc(var(--asymmetry-rotation) * 0.3));}
.process-step:last-of-type::after{background:none;}
.cta{padding:var(--space-5xl) var(--space-xl) var(--space-3xl) var(--space-xl); background:radial-gradient(circle at top left,var(--color-primary-darker),var(--color-secondary-darker),var(--color-neutral-darker)) no-repeat; background-size:130% 130%; text-align:center; border-radius:var(--radius-xl);}

/* Navigation - Mobile First (MOBILE MENU DEFAULT) with Asymmetry */
#brand-logo{position:absolute; top:0; left:0; z-index:var(--z-brand); padding:var(--space-sm) var(--space-md);}
#brand-logo img{width:4.2rem; height:auto;}
a#brand-logo{padding-left:var(--space-lg); text-decoration:none; border-top:var(--space-sm) solid transparent;}
a#brand-logo:hover{padding-bottom:0; background:var(--color-accent-tint-75);}

/* Mobile Menu (Default) */
#hamburger{display:block; right:0; top:calc(-1 * var(--space-sm)); position:absolute; font-size:230%; text-decoration:none; z-index:var(--z-menu); padding:var(--space-sm) var(--space-md) 0 var(--space-md);}
#menu-background{display:block; position:absolute; top:0; left:0; width:100%; height:9rem; padding:6.5rem 0; background-image:repeating-linear-gradient(rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%); z-index:var(--z-menu-bg);}
#head-menu{left:unset; right:0; padding:5.6rem 0 var(--space-5xl) 0; display:none; text-align:right; width:25rem; background:none; font-size:96%; z-index:var(--z-menu); position:absolute; top:0; margin:0;}

nav ul{list-style:none; margin:0; padding:0; background:var(--color-border-dark);}
nav li{color:var(--color-text-light); display:block; float:none; padding:0; margin-bottom:var(--border-thin); position:relative; text-decoration:none; transition-duration:var(--transition-slow); margin-right:calc(var(--space-md) + (var(--asymmetry-offset) * 0.3));}
nav li:nth-child(even){margin-right:calc(var(--space-md) - (var(--asymmetry-offset) * 0.2)); margin-top:calc(var(--asymmetry-offset) * 0.1);}
nav li a{color:var(--color-text-white); background:var(--color-neutral-darker); padding:var(--space-md) var(--space-lg) var(--space-sm) var(--space-md); text-decoration:none; font-weight:var(--font-weight-bold); width:100%; display:inline-block;}
nav li a:hover{background:none; color:var(--color-text-white);}
nav li:hover,nav li:focus-within{background:var(--color-border-dark); cursor:pointer;}
nav li:focus-within a{outline:none;}

/* Mobile Dropdown Behavior */
nav ul li ul{position:relative !important; margin:calc(-1 * var(--space-md)) 0 var(--space-xl) 0 !important; left:unset !important; width:100% !important; visibility:visible !important; display:block !important; opacity:1 !important; background:none !important; z-index:auto !important;}
nav ul li ul a{background:var(--color-border-dark);}
nav ul li ul li{clear:both; width:100%; margin:0; padding:0; border:none; float:none;}

/* Forms - Variable-Driven with Asymmetry */
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{height:var(--form-height); padding:var(--form-padding); background-color:var(--color-bg-white); color:var(--color-text-dark); border:var(--border-thin) solid var(--color-border); border-radius:var(--border-thick); box-shadow:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; transform:rotate(calc(var(--asymmetry-rotation) * 0.1));}
textarea{min-height:var(--textarea-min-height); padding-top:6px; padding-bottom:6px;}
input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus{border:var(--border-thin) solid var(--color-primary-light); outline:0;}
label,legend{display:block; margin-bottom:0; font-weight:var(--font-weight-bold); line-height:var(--line-height-0-75); margin-left:calc(var(--asymmetry-offset) * 0.2);}
fieldset{padding:0; border-width:0; margin-bottom:var(--space-lg);}
input[type="checkbox"],input[type="radio"]{display:inline;}
.form-asymmetric{display:grid; gap:var(--space-md); grid-template-columns:calc(2fr + var(--asymmetry-factor) * 0.5fr) calc(1fr - var(--asymmetry-factor) * 0.3fr);}

/* Buttons - Variable-Driven with Asymmetry */
.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block; max-width:100%; padding:0.7rem var(--space-3xl); color:var(--color-text-dark); text-align:center; font-weight:var(--font-weight-bold); line-height:38px; letter-spacing:var(--letter-space-core); text-transform:uppercase; text-decoration:none; white-space:nowrap; background-color:var(--color-primary); border-radius:calc(var(--radius-btn) + var(--asymmetry-offset) * 0.1) var(--radius-btn) calc(var(--radius-btn) + var(--asymmetry-offset) * 0.2) var(--radius-btn); border:var(--border-thin) solid transparent; cursor:pointer; margin-bottom:var(--space-md); transform:skew(calc(var(--asymmetry-skew) * 0.5)) rotate(calc(var(--asymmetry-rotation) * 0.3));}
.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus{color:var(--color-primary); border:var(--border-thin) solid var(--color-primary); outline:0; background:var(--color-text-black); transform:skew(calc(var(--asymmetry-skew) * -0.3)) rotate(calc(var(--asymmetry-rotation) * -0.2)) scale(var(--asymmetry-scale));}
.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary{color:var(--color-text-white); background-color:var(--color-primary); border-color:var(--color-primary-light);}
.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus{color:var(--color-text-white); background-color:var(--color-primary); border-color:var(--color-primary-dark);}
.confirm-btn{background:var(--color-success);}
.cancel-btn{background:var(--color-warning); color:var(--color-text); border:none;}
.button.big{font-size:120%; padding:var(--space-xl); width:100%; margin:0 auto var(--space-3xl) auto; background:var(--grad-primary); white-space:pre-wrap; line-height:var(--line-height-1-5);}
.button.big:hover{background:var(--grad-primary-hover) !important; color:var(--color-text-black); border:var(--border-thin) solid var(--color-primary);}
.button.big span{display:block; text-transform:lowercase; font-size:70%;}

/* Lists - Variable-Driven */
ul{list-style:disc; padding-left:1.6rem; margin-top:0; margin-bottom:var(--space-2xl);}
ol{list-style:decimal; padding-left:1.6rem; margin-top:0; margin-bottom:var(--space-2xl);}
ul ul,ul ol,ol ol,ol ul{margin:var(--space-lg) 0 var(--space-lg) var(--space-3xl);}
li{margin-bottom:var(--space-xs);}
.feature-list{list-style:none; padding-left:0;}
.feature-list li{display:flex; align-items:center; margin-bottom:var(--space-md); background:var(--color-primary-tint-75); border-radius:var(--radius-md); border:var(--border-thin) solid var(--color-border-light); padding:var(--space-md); box-shadow:var(--shadow-light);}
.feature-list li::before{content:url("/theme/checkbox4.svg"); margin-right:0.75rem; font-weight:var(--font-weight-bold); font-size:125%; display:block;}

/* Tables - Variable-Driven */
table{width:100%; margin:0 auto; border-collapse:collapse; margin-bottom:var(--space-2xl);}
tr{border-bottom:var(--border-thin) solid var(--color-border-dark);}
th,td{padding:0.75rem var(--space-sm); text-align:left; background:var(--color-bg-dark); line-height:var(--line-height-0-75); font-size:85%; vertical-align:top; word-wrap:break-word;}
th{background:var(--color-neutral-darker);}
td::before{content:attr(data-label); font-weight:var(--font-weight-bold); display:block; margin-bottom:var(--space-sm);}

/* Images - Variable-Driven with Asymmetry */
img{width:100%;}
#brand-logo img{width:4.2rem; height:auto;}
#menu #brand-logo img{width:var(--space-8xl); height:auto;}
#logo-footer img{width:24rem; height:auto;}
.bg-image{position:absolute; top:0; right:0; bottom:0; left:0; overflow: hidden;}
.bg-image::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.7) 100%); pointer-events:none;}
.bg-image img{width:100%; height:100%; object-fit:cover; object-position: center center;}
#invitation-to-act .bg-image img{opacity:var(--opacity-medium);}
.fg-image{position:relative;}
.fg-image img{width:100%; height:auto; border-radius:var(--radius-xl); margin-bottom:var(--space-2xl); margin-left:calc(var(--asymmetry-offset) * 0.5); transform:rotate(calc(var(--asymmetry-rotation) * 0.5));}
.fg-image:nth-of-type(even) img{margin-left:0; margin-right:calc(var(--asymmetry-offset) * 0.5); transform:rotate(calc(var(--asymmetry-rotation) * -0.5));}
img.learning{display:block; width:150px; height:auto; margin-bottom:1.6rem;}

/* Links - Variable-Driven */
a{color:var(--color-text-link);}
a:hover{color:var(--color-text-black); background:var(--color-primary); text-decoration:none;}

/* ===== SMARTPHONE STYLES:30rem+ ===== */
@media (min-width:30rem){html{font-size:calc(62.5% * 0.95);}
 :root{--asymmetry-offset:calc(var(--asymmetry-factor) * 4rem); --asymmetry-rotation:calc(var(--asymmetry-factor) * 3deg);}
 .container{width:85%; padding:var(--space-10xl) var(--container-padding);}
 section:nth-child(3)::before,section:nth-child(4)::before,section:nth-child(5)::before,section:nth-child(6)::before,section:nth-child(7)::before,section#invitation-to-act::before{transform:translateX(-50%) scale(1);}
 #proposition span,#invitation-to-act span,#subscribe span,#contact span,#testimonials span{padding:var(--space-4xl) 0 var(--space-md) 0; margin:var(--space-xl) 0 0 0;}
 #proposition p,#proposition h2{font-size:100%;}
 #proposition span{margin:var(--space-16xl) 0; padding:0;}
}

/* ===== TABLET STYLES:48rem+ ===== */
@media (min-width:48rem){html{font-size:calc(62.5% * 1);}
 :root{--asymmetry-offset:calc(var(--asymmetry-factor) * 4rem); --asymmetry-rotation:calc(var(--asymmetry-factor) * 3deg);}
 .container{width:80%;}
 .grid-2{grid-template-columns:repeat(2,1fr);}
 .grid-3{grid-template-columns:repeat(3,1fr);}
 .card,.process-step{padding:2.5rem;}
 .cols{margin-left:var(--col-margin);}
 .cols:first-child{margin-left:0;}
 .one.cols{width:4.66666666667%;}
 .two.cols{width:13.3333333333%;}
 .three.cols{width:22%;}
 .four.cols{width:30.6666666667%;}
 .five.cols{width:39.3333333333%;}
 .six.cols{width:48%;}
 .seven.cols{width:56.6666666667%;}
 .eight.cols{width:65.3333333333%;}
 .nine.cols{width:74.0%;}
 .ten.cols{width:82.6666666667%;}
 .eleven.cols{width:91.3333333333%;}
 .twelve.cols{width:100%; margin-left:0;}
 .one-third.cols{width:30.6666666667%;}
 .two-thirds.cols{width:65.3333333333%;}
 .one-half.cols{width:48%;}
 table,tbody,tr,th,td{display:table;}
 thead{display:table-header-group;}
 td::before{display:none;}
 th,td{padding:0.75rem var(--space-md);}
 section:nth-child(3)::before,section:nth-child(4)::before,section:nth-child(5)::before,section:nth-child(6)::before,section:nth-child(7)::before,section#invitation-to-act::before{transform:translateX(-50%) scale(1.2); top:-20px;}
 #proposition span{margin:var(--space-4xl) 0 0 0;}

 /* NAVIGATION (Override mobile menu) with Asymmetry */
 #hamburger{display:none;}
 #menu-background{display:none;}
 #head-menu{position:absolute; top:0; left:0; width:100%; margin:0; padding:0 0 var(--space-5xl) 6.5rem; background:linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(255,0,0,0));vertical-align:top; display:block; text-align:left; font-size:100%; right:unset; z-index:initial;}

 nav ul{background:none;}
 nav li{float:left; padding:var(--space-md) 0; margin-bottom:0;}
 nav li a{background:none; padding:1.1rem var(--space-lg) 0 var(--space-lg);}
 nav li:hover,nav li:focus-within{background:rgba(0,0,0,0.7);}

 /* Desktop Dropdown Behavior */
 nav ul li ul{background:rgba(0,0,0,0.7) !important; visibility:hidden !important; width:25rem !important; opacity:0 !important; position:absolute !important; margin:var(--space-md) 0 0 0 !important; left:0 !important; display:none !important; transition:all var(--transition-slow) ease !important; z-index:var(--z-menu) !important;}
 nav ul li:hover > ul,nav ul li:focus-within > ul,nav ul li ul:hover,nav ul li ul:focus{visibility:visible; opacity:1; display:block;}
 nav ul li ul a{padding:0.4rem var(--space-lg); text-transform:none; background:none;}
 nav ul li ul a:hover{background:var(--color-accent-tint-75);}
 nav ul li ul li{clear:both; width:100%; margin:0; padding:0; border:none; float:none;}
 nav ul li ul li:first-of-type{margin-top:0rem;}
 nav#head-menu li:hover > ul.dropdown,
 nav#head-menu li:focus-within > ul.dropdown {visibility: visible !important;opacity: 1 !important;display: block !important;}
 nav#foot-menu ul li ul{
  display:block !important;
  padding:0;
  position:relative;
  margin:calc(-1 * var(--space-md)) 0 var(--space-xl) 0 !important;
  left:unset;
  width:100%;
  visibility:visible !important;
  opacity:1 !important;
  background:none;
 }
}

/* ===== LAPTOPS:80rem+ ===== */
@media (min-width:80rem){html{font-size:calc(62.5% * 1.1);}
 :root{--asymmetry-offset:calc(var(--asymmetry-factor) * 6rem); --asymmetry-rotation:calc(var(--asymmetry-factor) * 4deg);}
 .card,.process-step{padding:2.5rem 3.5rem;}
 #proposition span{margin:var(--space-6xl) calc(-1 * var(--space-10xl)) 0 calc(-1 * var(--space-10xl));}
}

/* ===== DESKTOPS:120rem+ ===== */
@media (min-width:120rem){html{font-size:calc(62.5% * 1.2);}
 .card,.process-step{padding:2.5rem 4rem 2.5rem 4.5rem;}
 #proposition span{margin:var(--space-8xl) -20rem 0 -20rem;}
}

/* Video Responsive */
.video{position:relative; width:100%; margin:var(--space-xl) 0; display:block; padding:56.25% 0 0 0;}
.video iframe{position:absolute; top:0; left:0; width:100%; height:100%; aspect-ratio:16/9; border:0; border-radius:var(--radius-xl);}
.video.original-width{display:inline-block;}
.video.paragraph-width{}
.video.container-width{width:calc(100% + var(--space-4xl)); margin:0 calc(-1 * var(--space-xl));}
.video.page-width{width:100vw; margin-left:calc(-50vw + 50%); margin-right:calc(-50vw + 50%);}
.video.height-natural iframe{aspect-ratio:1/1 !important;}
.video.tv{padding:56.25% 0 0 0;}
.video.cinematic{padding:42.85% 0 0 0;}

/* ===== PERSONALITY EFFECTS - DYNAMIC ===== */

/* Performance optimization classes */
.will-change-transform{will-change:transform;}
.will-change-transform3d{will-change:transform; transform-style:preserve-3d;}
.small-element-only{max-width:200px; max-height:200px; overflow:hidden;}

/* Parallax Effect */
.parallax-container{perspective:calc(1000px - (var(--design-parallax-depth,0) / 100) * 500px); overflow:hidden;}
.parallax-element{transform-style:preserve-3d; transform:translateZ(calc((var(--design-parallax-depth,0) / 100) * -100px)); will-change:transform;}

/* Liquid Motion */
.liquid-motion{transition-timing-function:cubic-bezier( calc(0.4 + (var(--design-liquid-motion,0) / 100) * 0.2),0,calc(0.2 + (var(--design-liquid-motion,0) / 100) * 0.4),1 ); will-change:transform;}

/* Glitch Effect */
.glitch-effect{position:relative; will-change:transform;}
.glitch-effect::before,.glitch-effect::after{content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; opacity:calc(var(--design-glitch-factor,0) / 100); pointer-events:none;}
.glitch-effect::before{transform:translateX(calc(var(--design-glitch-factor,0) / 20 * 1px)); color:#f0f; z-index:-1;}
.glitch-effect::after{transform:translateX(calc(var(--design-glitch-factor,0) / 20 * -1px)); color:#0ff; z-index:-2;}

/* Neon Glow */
.neon-glow{text-shadow:0 0 calc(var(--design-neon-glow,0) / 2 * 1px) currentColor;}

/* Pulse Rhythm */
.pulse-rhythm{animation:pulse calc(2s - (var(--design-pulse-rhythm,0) / 100) * 1s) infinite alternate;}
@keyframes pulse{from{transform:scale(1);}to{transform:scale(calc(1 + (var(--design-pulse-rhythm,0) / 100) * 0.2));}}

/* Holographic Effect */
.holographic-effect{background:linear-gradient( 135deg,rgba(255,0,0,calc(var(--design-holographic-shift,0) / 100)),rgba(0,255,0,calc(var(--design-holographic-shift,0) / 100)),rgba(0,0,255,calc(var(--design-holographic-shift,0) / 100)) ); background-size:200% 200%; animation:holographic calc(10s - (var(--design-holographic-shift,0) / 100) * 5s) linear infinite; max-width:200px; max-height:200px; overflow:hidden;}
@keyframes holographic{0%{background-position:0% 0%;}50%{background-position:100% 100%;}100%{background-position:0 0;}}

/* Texture Effect */
.texture-effect{position:relative;}
.texture-effect::after{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-image:url('/theme/textures/noise.png'); opacity:calc(var(--design-texture-intensity,0) / 100); pointer-events:none; mix-blend-mode:overlay;}

/* Handcraft Wobble */
.handcraft-wobble{filter:url('#handcraft-filter'); will-change:transform;}

/* Vintage Filter */
.vintage-filter{filter:sepia(calc(var(--design-vintage-filter,0) / 100)) contrast(calc(1 + (var(--design-vintage-filter,0) / 100) * 0.2)) saturate(calc(0.8 - (var(--design-vintage-filter,0) / 100) * 0.3)); max-width:200px; max-height:200px; overflow:hidden;}

/* Light Leak Effect */
.light-leak{position:relative; overflow:hidden;}
.light-leak::after{content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:linear-gradient( 135deg,rgba(255,255,255,0),rgba(255,255,255,calc((var(--design-light-leak,0) / 100) * 0.7)),rgba(255,255,255,0) ); transform:rotate(calc(var(--design-light-leak,0) / 100 * 45deg)); pointer-events:none; mix-blend-mode:screen; opacity:calc(var(--design-light-leak,0) / 100);}

/* Brutalist Edge */
.brutalist-edge{box-shadow:calc(var(--design-brutalist-edge,0) / 10 * 1px) calc(var(--design-brutalist-edge,0) / 10 * 1px) 0 0 rgba(0,0,0,0.8); border:calc(var(--design-brutalist-edge,0) / 20 * 1px) solid currentColor; clip-path:polygon( 0 0,100% 0,calc(100% - (var(--design-brutalist-edge,0) / 100 * 5px)) 100%,calc(var(--design-brutalist-edge,0) / 100 * 5px) 100% );}

/* Chromatic Split */
.chromatic-split{position:relative; color:transparent; max-width:200px; max-height:200px; overflow:hidden;}
.chromatic-split::before,.chromatic-split::after{content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%;}
.chromatic-split::before{color:cyan; transform:translateX(calc(var(--design-chromatic-split,0) / 5 * -1px));}
.chromatic-split::after{color:red; transform:translateX(calc(var(--design-chromatic-split,0) / 5 * 1px));}

/* Stacking Chaos */
.stacking-chaos > *{transform:translateX(calc(var(--design-stacking-chaos,0) / 100 * var(--chaos-offset,0) * 1px)) translateY(calc(var(--design-stacking-chaos,0) / 100 * var(--chaos-offset,0) * 1px)) rotate(calc(var(--design-stacking-chaos,0) / 100 * var(--chaos-rotate,0) * 1deg)); will-change:transform;}

/* Blur Zones */
.blur-zone{filter:blur(calc(var(--design-blur-zones,0) / 4 * 1px)); max-width:200px; max-height:200px; overflow:hidden;}

/* Grid Warping */
.grid-warp{display:grid; transform-style:preserve-3d; perspective:1000px; will-change:transform;}
.grid-warp > *{transform:rotateX(calc(var(--design-grid-warping,0) / 100 * var(--warp-x,0) * 1deg)) rotateY(calc(var(--design-grid-warping,0) / 100 * var(--warp-y,0) * 1deg));}

/* 3D Tilt */
.tilt-3d{transform-style:preserve-3d; transform:perspective(1000px) rotateX(calc(var(--design-3d-tilt,0) / 100 * 15deg)) rotateY(calc(var(--design-3d-tilt,0) / 100 * 15deg)); will-change:transform;}

/* Typewriter Effect */
.typewriter{overflow:hidden; white-space:nowrap; border-right:2px solid currentColor; width:0; animation:typing var(--design-typewriter-tempo) steps(40,end) forwards,blink 0.75s step-end infinite;}
@keyframes typing{from{width:0;}to{width:100%;}}
@keyframes blink{from,to{border-color:transparent;}50%{border-color:currentColor;}}

/* Glow on Hover Effect */
.glow-on-hover{border:var(--border-thin) solid var(--color-text-black); outline:none; cursor:pointer; position:relative; z-index:0; background:var(--grad-rainbow); animation:glowing 140s linear infinite; opacity:1; transition:opacity var(--transition-normal) ease-in-out;}
.glow-on-hover:before{content:''; background:linear-gradient(45deg,#ff0000,#ff7300,#fffb00,var(--color-primary),#cf3,var(--color-primary),#3fc,#ff00c8,#ff0000); position:absolute; top:0; left:0; background-size:400%; z-index:-1; filter:blur(5px); width:calc(100% + 0px); height:calc(100% + 0px); animation:glowing 20s linear infinite; opacity:1; transition:opacity var(--transition-normal) ease-in-out;}
.glow-on-hover:active{color:var(--color-text-black);}
.glow-on-hover:active:after{background:transparent;}
.glow-on-hover:after{z-index:-1; content:''; position:absolute; width:100%; height:100%; left:0; top:0;}
@keyframes glowing{0%{background-position:0 0;}50%{background-position:200% 0;}100%{background-position:0 0;}}

/* Asymmetry Utility Classes */
.asymmetric-left{margin-left:var(--asymmetry-offset); transform:rotate(calc(var(--asymmetry-rotation) * 0.5));}
.asymmetric-right{margin-right:var(--asymmetry-offset); transform:rotate(calc(var(--asymmetry-rotation) * -0.5));}
.asymmetric-skew{transform:skew(var(--asymmetry-skew));}
.asymmetric-organic{border-radius:calc(var(--radius-md) + var(--asymmetry-offset) * 0.1) var(--radius-md) calc(var(--radius-md) + var(--asymmetry-offset) * 0.15) calc(var(--radius-md) + var(--asymmetry-offset) * 0.05);}
.dynamic-asymmetric{--local-asymmetry:var(--dynamic-asymmetry-value,var(--asymmetry-factor)); transform:translateX(calc(var(--local-asymmetry) * 2rem)) rotate(calc(var(--local-asymmetry) * 2deg));}
/* ===== END DESIGNER BLOCK ===== */

/* ===== 3. CONCH BLOCK (Hard-coded Utilities Only) ===== */

/* Utilities - Structural Only */
.u-full-width{width:100%;}
.u-max-full-width{max-width:100%;}
.u-pull-right{float:right;}
.u-pull-left{float:left;}
.cleared,.container:after,.row:after,.u-cf,#foot-menu:after{content:""; display:table; clear:both;}
.alignLeft{text-align:left;}
.alignCentre{text-align:center;}
.alignRight{text-align:right;}
.alignJustify{text-align:justify;}

/* Structural Layout Classes */
.img-placeholder{width:100%; height:var(--space-16xl); background:#E5E7EB; border-radius:var(--radius-md);}
.big-icon,.icon{width:4.2rem; height:auto; border-radius:var(--radius-sm); margin-top:var(--space-md); vertical-align:-5px;}
.big-icon{width:var(--space-6xl);}
.lazypic{opacity:0; transition:opacity var(--transition-slow) ease-in-out;}
.lazypic.loaded{opacity:1;}

/* Section Ornaments - Structural Positioning with Asymmetry */
section:nth-child(3)::before,section:nth-child(4)::before,section:nth-child(5)::before,section:nth-child(6)::before,section:nth-child(7)::before,section#invitation-to-act::before{content:url('/theme/ornament-floral.svg'); opacity:1; filter:grayscale(0%); position:absolute; left:50%; top:-22px; transform:translateX(-50%) scale(0.8); z-index:var(--z-menu);}
section:nth-child(3)::before{content:url('/theme/ornament-heart.svg'); left:calc(50% + var(--asymmetry-offset)); transform:translateX(-50%) scale(0.8) rotate(calc(var(--asymmetry-rotation) * 0.5));}
section:nth-child(4)::before{left:calc(50% - var(--asymmetry-offset)); transform:translateX(-50%) scale(0.8) rotate(calc(var(--asymmetry-rotation) * -0.5));}
section:nth-child(5)::before{content:url('/theme/ornament-leafy.svg');}
section:nth-child(6)::before{content:url('/theme/ornament-branch.svg');}
section:nth-child(7)::before{content:url('/theme/ornament-twigs.svg');}
section#invitation-to-act::before{content:url('/theme/ornament-heart.svg');}

/* Pricing Tables - Structural Only */
table.pricing th,table.pricing td{text-align:center;}
table.pricing td:nth-child(1){text-align:left;}
.plan-name{font-size:1.6rem; font-weight:var(--font-weight-bold); margin-bottom:var(--space-sm);}
.plan-price{font-size:var(--space-3xl); margin:var(--space-md) 0; font-weight:var(--font-weight-light);}

/* Special Components - Structural Layout */
.clients{display:flex; align-items:flex-start; margin-bottom:var(--space-md); padding:var(--space-xl) var(--space-xl) var(--space-md) var(--space-xl);}
.service-link{display:flex; justify-content:space-between; align-items:center; text-decoration:none; padding:var(--space-md) var(--space-3xl) var(--space-sm) 80px; transition:all var(--transition-normal) ease;}
.encourage-scroll-line{width:var(--border-thick); height:48px; margin:0 auto; border-radius:var(--border-thick); animation:bounce 2s infinite;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(16px);}}

/* Assessment Components - Structural */
.question{background:radial-gradient(ellipse at left top,#1a1a1a66 0%,#2a2a2a66 100%);}
.slider-container{border-radius:var(--radius-lg);}
.dial-container{width:100%; height:auto; border-radius:var(--space-md); display:flex; justify-content:center; align-items:center; padding:20px;}

/* Footer Specific - Structural Layout with Asymmetry */
#legal{margin:var(--space-3xl) 5%; padding-top:var(--space-3xl); border-top:var(--border-thin) solid #333;}
#legal p{font-size:var(--font-size-small); margin:1.3rem 0;}
#legal p.nudged-up{margin:0 0 var(--space-5xl) 0;}
footer li{list-style:none;}

#foot-menu{margin:var(--space-3xl) 5% var(--space-6xl) 5%;}
nav#foot-menu ul{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)) !important; gap:var(--space-xl) !important; list-style:none !important; margin:0 !important; padding:0 !important; background:none !important;}
nav#foot-menu ul li{display:block !important; margin:0 !important; padding:0 0 var(--space-xs) 0 !important; width:100% !important; box-sizing:border-box !important; float:none !important; position:static !important; margin-right:0 !important; margin-bottom:0 !important; transition:none !important; color:var(--color-white-80) !important;font-weight: var(--font-weight-bold) !important;}
nav#foot-menu ul li:hover{background:none !important;cursor:default !important;}
nav#foot-menu ul li a:hover{background:none !important;cursor:default !important; color:#fff !important;}
nav#foot-menu ul li ul{visibility:visible !important; opacity:1 !important; display:block !important; margin:var(--space-sm) 0 0 0 !important; padding:0 !important; width:100% !important; list-style:none !important; background:none !important; position:static !important; left:auto !important; z-index:auto !important;}
nav#foot-menu ul li ul li{margin:0 !important; padding:0 !important; width:100% !important; float:none !important; position:static !important; margin-right:0 !important; margin-bottom:0 !important; clear:none !important; border:none !important;}
nav#foot-menu ul li a{display:block !important; padding:0.4rem var(--space-md) 0.2rem 0 !important; margin:0 !important; text-decoration:none !important; background:none !important; color:var(--color-primary) !important; width:auto !important; font-weight:var(--font-weight-bold) !important;}
nav#foot-menu ul li ul li a{font-weight: var(--font-weight-normal) !important;}
nav#foot-menu ul li ul a{font-weight:var(--font-weight-light) !important; text-transform:none !important;}
@media (max-width: 47.9375rem){nav#foot-menu ul{grid-template-columns:1fr !important; gap:var(--space-lg) !important;}}


a#logo-footer:hover{background:none;}

/* Section Layout - Structural */
section:first-child .container,section#invitation-to-act .container,section#subscribe .container,section#contact .container,section#testimonials .container{padding-bottom:0;}
#proposition .container{padding-top:var(--space-8xl); padding-bottom:0;}
#proposition p,#proposition h2{text-align:center; line-height:1.2;}
#proposition span,#invitation-to-act span,#subscribe span,#contact span,#testimonials span{display:block; position:relative; bottom:0; margin:0; padding:var(--space-3xl) 0 var(--space-md) 0; border-radius:var(--radius-lg) var(--radius-lg) 0 0;}
#proposition span{text-align:center; font-size:105%; margin:var(--space-6xl) 0 var(--space-3xl) 0; background:transparent;}

/*Magnet step indicators*/
.magnet-navigation{margin:20px 0;text-align:center;}
.step-progress{display:flex;align-items:center;justify-content:center;margin-bottom:15px;flex-wrap:wrap; border-top:1px solid var(--color-neutral);display:none;}
.step-indicator{padding:8px 12px;margin:0 5px;font-size:var(--font-size-base);font-weight:bold;}
.step-indicator.completed{background:none;color:var(--color-white-90);}
.step-indicator.current{background:none;color:var(--color-white-90);}
.step-indicator.locked{background:var(--color-neutral-tint-75);color:var(--color-neutral-greyer);}
.step-separator{margin:0 5px;color:var(--color-neutral-greyer);}
.nav-buttons{display:flex;gap:10px;justify-content:left;}
.nav-prev,.nav-next{border:0 solid var(--color-border);border-radius:0;cursor:pointer;}
.nav-prev:hover,.nav-next:hover{}
div.magnet-progress{display:none;}
div.magnet-content *{color:#fff;}
div.magnet-content h1{font-size:var(--font-size-h3);text-align:left;line-height:var(--line-height-1-5); color:var(--color-text-secondary); letter-spacing:var(--letter-space-sm);text-shadow:none;}
div.magnet-navigation button{padding:var(--space-xs) var(--space-xl);}

.magnet-container{}
.magnet-container .code-display{display:inline-block;padding:1rem; background:#000;}
.magnet-container .code-display strong{display: block; margin-bottom:1rem;background: var(--color-secondary-darker); padding: 0 0 0 1rem;}
.magnet-container .code-display *{vertical-align:middle;}
.magnet-container .code-display p{margin:0;padding:0.5rem 0 0 0;}
.magnet-container .ref-copy, .ref-whatsapp, .ref-email, .ref-sms{padding:1rem; height:4rem; width:4rem; margin:0 0 0 0.1rem;background:var(--slider-accent);border-radius:var(--radius-xs);}
.ref-copy{display:inline-block; margin:0 0 0 1rem;padding:0; text-align:right;}
.ref-whatsapp{background:#063;}
.ref-email{background:#630;}
.ref-sms{background:#036;}
.magnet-image img{width:auto;height:auto;}

/* Miscellaneous Hard-coded Styles */
hr{margin-top:var(--space-3xl); margin-bottom:3.5rem; border-width:0; border-top:var(--border-thin) solid var(--color-border-light);}
code{padding:var(--space-xs) var(--space-sm); margin:0 var(--space-xs); font-size:90%; white-space:nowrap; background:var(--color-bg-form); border:var(--border-thin) solid var(--color-border-light); border-radius:var(--border-thick);}
sub{font-size:80%; line-height:var(--line-height-1-5);}

/* SVG Filters for Effects */
.svg-filters{position:absolute; width:0; height:0; overflow:hidden;}
.magnet-debug{display:none;}
#magnet-debug-panel{display:none;}

/* Debug mode (uncomment to see layout) */
/* *{outline:1px solid red;}*/

/* ========================== MENTAL */
/* mobile first */
:root {
 --slider-primary:hsl(188,100%,55%); /* Main brand color,buttons,links */
 --slider-secondary:hsl(221,14%,38%); /* Supporting brand color */
 --slider-accent:hsl(204,43%,34%); /* Highlight/call-to-action color */
 --slider-contrast:hsl(32,54%,68%); /* Alternative color */
 --slider-neutral:hsl(240,23%,20%); /* Calmer color */
 --slider-background:hsl(240,46%,11%); /* for backgrounds */

 --grad-primary: linear-gradient(to bottom right, var(--color-background-lighter) 0%, var(--color-background) 50%, var(--color-background-darker) 100%);
 --grad-primary-inverse: linear-gradient(to top left, var(--color-background-lighter) 0%, var(--color-background) 50%, var(--color-background-darker) 100%);
 --grad-primary-alternative: linear-gradient(to bottom, var(--color-background-lighter) 0%, var(--color-background) 50%, var(--color-background-darker) 100%);
 --grad-clickable:linear-gradient(to bottom,var(--color-primary-light) 0%,var(--color-primary) 50%,var(--color-primary-dark) 100%);
 --grad-clickable-hover: linear-gradient(to top, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
 --grad-secondary: linear-gradient(to right, var(--color-secondary-greyer) 0%, var(--color-secondary) 50%, var(--color-secondary-darker) 100%);
 --grad-accent: linear-gradient(to right, var(--color-accent-darker) 0%, var(--color-accent) 50%, var(--color-accent-lighter) 100%);
 --grad-overview: linear-gradient(to right, #313044 0%, #325F7E 100%);
 --grad-contrast: linear-gradient(to bottom, hsl(var(--contrast-h),var(--contrast-s),calc(var(--contrast-l) * 1.05)) 0%, var(--color-contrast) 45%, hsl(var(--contrast-h),var(--contrast-s),calc(var(--contrast-l) * 0.95)) 100%);
 --grad-neutral: linear-gradient(to right, var(--color-neutral-tint-75) 0%, var(--color-background) 50%, var(--color-neutral-tint-50) 100%);
 --grad-bg-service: radial-gradient(circle at top left, var(--color-bg), var(--color-bg-light), var(--color-bg-white));
 --grad-bg-alt: radial-gradient(circle at top left, var(--color-background-tint-25), var(--color-bg), var(--color-bg-light));
 --grad-bg-footer: radial-gradient(circle at top left, var(--color-bg-footer-light), var(--color-bg-footer), var(--color-bg));
 --grad-photo:linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.1) 100%);
}
h1,h2{letter-spacing:var(--letter-space-xs);}
h1{text-shadow: none;}
.dark::after{background: none;}
.dark{background:var(--grad-primary);}
.dark.tight .container{padding-bottom:0;padding-top:0;}
section div.container{padding-top:var(--space-16xl); padding-bottom:var(--space-16xl);}
section#proposition .container{padding-top:var(--space-16xl);}
section.photocover{position: relative;}
section.photocover::before {content: '';position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: var(--grad-photo);z-index: 1;}
section.photocover div.container{z-index: 2;}
.light{background:var(--grad-secondary);}
.flat{background:var(--grad-primary-alternative); z-index:-1;}

.shout, div.flash {background: var(--grad-contrast);padding: var(--space-lg);letter-spacing: var(--letter-space-sm);text-shadow: 0.1rem 0.1rem 0.2rem var(--color-white-90);position: relative;overflow: hidden;}
/*
.shout::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;
 background: linear-gradient(90deg, transparent 0%, transparent 33%, rgba(255,255,255,0.3) 35%, transparent 37%, transparent 42%, rgba(255,255,255,0.2) 43%, transparent 44%, rgba(255,255,255,0.4) 45%, transparent 46%, transparent 100%);
 background-size: 400% 100%;animation: flashPulse 15s linear infinite;pointer-events: none;z-index: 1;}
*/
.shout .container {padding: var(--space-md);color: var(--color-bg);text-align: center;font-weight: var(--font-weight-bold);line-height: var(--line-height-core);font-size: var(--font-size-h4);font-style: italic;position: relative;z-index: 2;}
@keyframes flashPulse { 0% {background-position: 200% 0;} 100% {background-position: -200% 0;} }

h1{line-height:var(--line-height-2);text-shadow:0 0 3rem #024;}
h2,h3{line-height:var(--line-height-1-5);}
h4,h5,h6{line-height:var(--line-height-core); text-align: left;}
h5{text-shadow:0 0 2rem #024;}
h4{text-transform: none;font-weight:var(--font-weight-bold); color:var(--color-white-100);}
ul {list-style: none; padding-left: 0; margin:0 0 0 -0.3rem;}
li, blockquote{position:relative; padding-left: 40px; margin-bottom: var(--line-height-0-75);}
ul li::before, blockquote::before {content: '';position: absolute;left: 0;top:-0.1em;width: 29px;height: 29px;background-image: url('/theme/bullet.svg');background-size: contain;background-repeat: no-repeat;}
ol li{padding-left: 1em;}
nav li:before{content:none;}
#proposition span{text-align:left;}
#proposition h1, #proposition h5{color:var(--color-white-100);}
blockquote{border-left:none; padding-left:2.5em; margin-bottom:var(--space-xl); color:var(--color-white-80); font-style: italic;}
blockquote p{margin-bottom:0;}
cite{font-style: italic; font-weight: bold; color:var(--color-contrast); font-style: normal; display:block;}
em{font-style: normal; color:var(--color-contrast); font-weight:bold;}
.magnet-image{margin: 0 0 -12rem -8.5rem; width:6.5rem; position:relative; text-align:right;}
.magnet-image img{display:inline-block;}
@media (max-width: 47.9375rem) {.magnet-image, .magnet-image img{display:none;}}
figcaption{text-align:left; color: var(--color-contrast); font-style:normal; padding:0; margin:0; text-align:right;}
#head-menu{background:none;}
section#proposition::before{content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background:linear-gradient(to bottom right,rgba(0,19,38,0.5) 0%,rgba(0,19,38,0.4) 10%, rgba(0,19,38,0.1) 40%, rgba(0,19,38,0) 100%);z-index:-1;}
section#proposition picture {z-index:-2;}
.tinted{background: rgba(0,19,38,0.7); padding:3rem 4rem;}
section.just-photo .container{padding:0; margin:0;}
section.just-photo .container{padding:0; margin:0;}

#head-menu{padding:0 0 0 12rem;}
nav#head-menu li{margin: 1rem;text-shadow:0 0 2rem #024; }
nav#head-menu li:hover{background:none;}
nav#head-menu ul li:hover > a{border-bottom:2px solid #fff;}
nav#head-menu ul li ul li:hover > a{border-bottom:none; color:var(--color-primary);}
nav#head-menu li a{padding:0; margin:0; background:none; border:none;}
nav ul li ul {background: rgba(0, 0, 0, 0.4) !important;}
#hamburger{right:1rem; top:1rem;}
a#brand-logo{padding:1.87rem 3rem 0 2.8rem;}
a#brand-logo:hover img{border-bottom:2px solid #fff; padding-bottom:0.3rem;}
img{width:auto;}
@media (max-width: 47.9375rem) {
 .bg-image{position:relative;}
 .bg-image::after{content:none;}
 section#proposition{background:var(--grad-primary-inverse);}
 section#proposition picture {z-index:0;}
 section.photocover::before{content:none;}
 section div.container{padding-top:var(--space-8xl); padding-bottom:var(--space-4xl);}
 section#proposition .container, section#proposition .container span{padding-top:0;}
 section#proposition::before{content:none;}
 section#proposition .bg-image{margin-top:6rem;}
 #menu-background{display:none;}
 .tinted{padding: 2rem;}
 section > div.container > ul.signpost li > p {text-shadow:0 0 1.25rem #024; color:#fff;}
 .bg-left,.bg-right {opacity:0.6; width:100% !important;object-position: center center; position: absolute;left: 0;top: 0;max-width:100% !important;}
}
@media (min-width: 48rem) {a#brand-logo{padding:1.7rem 3rem 0 2.8rem;} nav#head-menu li.top-active > a {border-bottom: 2px solid var(--color-primary);} }
@media (min-width: 80rem) {a#brand-logo{padding:1.8rem 3rem 0 2.8rem;}}
@media (min-width: 120rem) {a#brand-logo{padding:1.87rem 3rem 0 2.8rem;}}
#brand-logo img{width:8rem;}
#logo-footer img{width:12rem; height:auto;}
a#brand-logo:hover{background:none;}

/*.magnet-form{padding:3rem; background:rgba(0,0,0,0.15);border:1px solid #333;}*/
.magnet-form button{margin-top:var(--space-xl);}
input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select,select option{height:var(--form-height); padding:var(--form-padding);
 background-color:rgba(255,255,255,0.1) !important; color:#fff !important; border:1px solid #666; width:100%; max-width: 40rem;
 border-radius:0; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; transform:rotate(calc(var(--asymmetry-rotation) * 0.1)); margin-bottom:0;}
textarea{height:8rem;}
div.form-group{margin-top:0.75rem;}
.magnet-form select option {background-color: #444 !important;color: #fff !important;}
.data-security{position:absolute;top:20rem; left: -12rem; width: 10rem;color:var(--color-contrast);text-align: right;}
.data-security img{margin:0; padding:0;width:5rem;height:auto;text-align: right;display:inline-block;}
.bg-left,.bg-right {width: auto;height: 100%;object-fit: cover;object-position: left center; position: absolute;left: 0;top: 0;max-width: 50%;}
.bg-right {object-position: right center; right: 0; left:unset;}
.dark.skew-left, .dark.skew-right, .dark.hard-left,.dark.hard-right{padding-left:0; padding-right:0;}
.dark.sole-photo{padding:0; margin:0;}
.dark.sole-photo .container{display:none;}
@media (min-width: 30rem) {
 /*
 .dark.skew-left {padding-left:0; padding-right:10%;}
 .dark.skew-right{padding-left:10%; padding-right:0;}
 */
}
@media (min-width: 48rem) {
 .dark.skew-left {padding-left:0; padding-right:25%;}
 .dark.skew-right{padding-left:25%; padding-right:0;}
 .dark.sole-photo{height:30rem;}
 .dark.hard-left {padding-left:20%; padding-right:10%;}
 .dark.hard-right{padding-left:0; padding-right:0;}
 .dark.hard-right .container{width:75%;max-width:75%;margin-right:0; padding-right:0}
 .dark.twin-column ul.plain{/*-webkit-column-count: 2; -moz-column-count: 2; column-count:2; -webkit-column-gap: 2rem; -moz-column-gap:2rem; column-gap:4rem;*/}
 .bg-image::after{background:none; /*linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.1) 40%,rgba(0,0,0,0.3) 100%);*/}
}
@media (min-width: 80rem) {
 .dark.skew-left {padding-left:0; padding-right:25%;}
 .dark.skew-right{padding-left:25%; padding-right:0;}
 .dark.sole-photo{height:40rem;}
 .dark.hard-left {padding-left:20%; padding-right:10%;}
 .dark.hard-right{padding-left:0; padding-right:0;}
 .dark.hard-right .container{width:50%;max-width:50%;margin-right:0; padding-right:0}
}
@media (min-width: 120rem) {
 .dark.skew-left {padding-left:0; padding-right:25%;}
 .dark.skew-right{padding-left:25%; padding-right:0;}
 .dark.sole-photo{height:60rem;}
 .dark.hard-left {padding-left:20%; padding-right:10%;}
}
@media (min-width: 48rem) {.bg-left, .bg-right{max-width: 25%;width:25%;}}
input::placeholder, textarea::placeholder, select::placeholder{color: var(--placeholder-color);opacity: 1;font-style: var(--placeholder-style);}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, select::-webkit-input-placeholder {color: var(--placeholder-color);font-style: var(--placeholder-style);}
input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {color: var(--placeholder-color);opacity: 1;font-style: var(--placeholder-style);}
input:-ms-input-placeholder, textarea:-ms-input-placeholder, select:-ms-input-placeholder {color: var(--placeholder-color);font-style: var(--placeholder-style);}
button, .button, .magnet-button {position: relative;padding: 0 24px; /* Give it proper horizontal padding */background: var(--grad-clickable);color: #000;text-decoration: none;font-size: 92%;border: none;border-radius: 0;cursor: pointer;transition: all 0.3s ease;height: 50px;text-align: center;line-height: 1.4;z-index: 0; /* Vertically center the text */display: inline-flex;align-items: center;justify-content: center;width:auto;}
button::before, .button::before, .magnet-button::before {content: '';position: absolute;right: -36.5px;top: 0;bottom:0;width: 39.5px;height: 50px; /* Make it 2px taller (50px + 2px) */background-image: url('/theme/arrow.svg');background-size: 100% 100%; /* Force it to fill exactly */background-repeat: no-repeat;z-index: -1;transition: all 0.3s ease;}
button#close-popup{position: absolute;top:1rem;right:1rem;background:#d9b081 !important;font-size:2rem;cursor: pointer;color: #345 !important;padding:1rem 1.5rem 1.2rem 1.5rem;border-radius: 0.3rem;display:flex;align-items: center;justify-content: center;transition: all 0.2s ease;}
button#close-popup:hover,button#close-popup:visited,button#close-popup:active,button#close-popup:focus,button#close-popup:focus-visible,button#close-popup:focus-within{background:var(--color-primary) !important;color:#fff !important;}
button#close-popup::before{content:none;}
button:hover, .button:hover, .magnet-button:hover {background: var(--grad-clickable);transform: translateX(3px);color: #fff;border: none;}
.magnet-container .code-display .button::before, .magnet-container .code-display button::before  {content:none;}
#welcome-popup .popup-content{background-color: #345;color:#fff;padding: 6rem;border-radius: 0.3rem;border: 1px solid #fff;max-width: 500px;width: 90%;max-height: 80vh;overflow-y: auto;position: relative;box-shadow: 0 20px 50px rgba(0,0,0,0.2);text-align: center;transform: translateY(30px) scale(0.95);transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);text-align:left;}
ul.overview li, ol.steps li{background:var(--grad-overview); border-radius: 9rem; padding:1rem 1rem 1rem 5.5rem; color:#fff; margin-bottom:0.5rem;}
ul.overview li::before, ol.steps li::before{left:0.5rem;width:37px; height: 37px; top: 50%; transform: translateY(-50%);}
ol.steps {list-style: none;counter-reset: item; padding:0; margin:0;}
ol.steps li{list-style-position: inside; padding-left:5rem; counter-increment: item;margin-bottom: 5px;}
ol.steps li:before {content: counter(item);position:absolute;left:0.4rem; top:50%; transform: translateY( calc(-50% + 0.5rem)); color: orange;font-size:var(--font-size-h2);width: 1.2em;text-align: center;display: inline-block;}
ul.plain, ol.plain{all: initial;display: block;list-style-position: outside;margin: 1em 1rem 1em 0;padding-left: 2rem;background: none;border-radius: 0;color: inherit;position: static;font: inherit;text-align: left;}
ul.plain li, ol.plain li {all: initial;display: list-item;background: none;border: none;border-radius: 0;padding: 0;margin: 0.5em 0;position: static;width: auto;color: inherit;font: inherit;}
ul.plain {list-style-type: disc;}
ol.plain {list-style-type: decimal;}
ul.plain li::before, ul.plain li::after, ol.plain li::before, ol.plain li::after {content: none !important;display: none !important;}

.flash::after, .flash-left:after{content:'MENtal®\AOn-Call 24-7';white-space: pre; display: block; text-align:center; line-height: 1.2; font-size:var(--font-size-small); position:absolute; top:1.5rem;right:-6rem; background:var(--color-contrast); color:var(--color-background); font-weight:bold; padding:1rem 6rem; transform: rotate(45deg);}
.flash-left::after{top:1.5rem;left:-5.5rem; transform: rotate(-45deg); right:unset;}

#legal p.social-media{font-size:var(--font-size-base); margin-bottom: var(--line-height-2); box-sizing: border-box;}
#legal p.social-media *{vertical-align: middle;}
p.social-media img{display:inline-block; padding:0 0 0.3rem 0.5rem;}

ul.points {display: flex;flex-wrap: wrap;list-style: none;padding: 0; margin: 0 0 1rem 0; color: #fff; width:100%}
ul.points li {position: relative; padding: 3rem; border-left: rgba(0,19,28,0.3) solid 1rem; width: 100%; margin: 0 1rem 1rem 0; box-sizing:border-box;
 background: linear-gradient(90deg, rgba(0,19,38,0.6), rgba(0,0,0,0.6), rgba(0,38,76,0.6), rgba(0,0,0,0.4), rgba(19,38,76,0.5), rgba(0,19,38,0.6));background-size: 400% 400%;animation: 12s linear infinite;}
ul.points li::before {content: none;}
ul.points li:nth-child(2n) {margin-right: 0;}
ul.points li:nth-child(1) { animation-name: gradient1; }
ul.points li:nth-child(2) { animation-name: gradient2; }
ul.points li:nth-child(3) { animation-name: gradient3; }
ul.points li:nth-child(4) { animation-name: gradient4; }
ul.points li:nth-child(5) { animation-name: gradient5; }
ul.points li:nth-child(6) { animation-name: gradient6; }
ul.points li:nth-child(7) { animation-name: gradient7; }
ul.points li:nth-child(8) { animation-name: gradient8; }
@keyframes gradient1 { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }
@keyframes gradient2 { 0% { background-position: 50% 50%; } 100% { background-position: 450% 50%; } }
@keyframes gradient3 { 0% { background-position: 100% 50%; } 100% { background-position: 500% 50%; } }
@keyframes gradient4 { 0% { background-position: 150% 50%; } 100% { background-position: 550% 50%; } }
@keyframes gradient5 { 0% { background-position: 200% 50%; } 100% { background-position: 600% 50%; } }
@keyframes gradient6 { 0% { background-position: 250% 50%; } 100% { background-position: 650% 50%; } }
@keyframes gradient7 { 0% { background-position: 300% 50%; } 100% { background-position: 700% 50%; } }
@keyframes gradient8 { 0% { background-position: 350% 50%; } 100% { background-position: 750% 50%; } }
@media (min-width: 30rem) {ul.points {justify-content: left;} ul.points li {width: 100%;}}
@media (min-width: 48rem) {
 ul.points li {width: calc(50% - 1rem);margin-right: 1rem;}
}
@media (min-width: 80rem) {ul.points li:nth-child(2n){}}
@media (min-width: 120rem) {}

section > div.container > ul.signpost {display: flex;flex-wrap: wrap;width: 100vw; list-style: none;padding: 0;overflow: hidden; margin:0 calc(50% - 50vw) 0 calc(50% - 50vw); max-width:none;}
section > div.container > ul.signpost li {width: 100%; box-sizing: border-box;margin: 0;padding: 8rem 1rem 3rem 3rem; position: relative; overflow: hidden;display: flex; flex-direction:column; justify-content: center;}
section > div.container > ul.signpost li::before {content: none;}
section > div.container > ul.signpost li > * {width: 60%;position: relative;z-index: 1;}
section > div.container > ul.signpost li > p {text-shadow:0 0 1rem #000;}
section > div.container > ul.signpost li button, section > div.container > ul.signpost li .button, section > div.container > ul.signpost li .magnet-button {display: inline-flex;}
section > div.container > ul.signpost li .bg-image {position: absolute;top:0; bottom:0;left: 0;right: 0;min-width: 100%;min-height: 100%;object-fit: cover;object-position: center center;z-index: -2;transform: translateX(0) !important;}
section > div.container > ul.signpost li .bg-image img {position: absolute;left: unset !important;right: 0 !important;width: auto;height: 100%;min-width: 100%;min-height: 100%;object-fit: cover;object-position: right center !important;z-index: -2;object-position: center center;}

section > div.container > ul.signpost li::after {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
 background: linear-gradient(to right, rgba(0, 19, 38, 0.5) 0%, rgba(0, 19, 38, 0.2) 50%, rgba(0, 19, 38, 0) 100%);z-index: -1;}
section > div.container > ul.signpost li:nth-child(2n) {margin-right: 0;}
section > div.container > ul.signpost::after {content: "";display: table;clear: both;}
@media (min-width: 30rem) {section > div.container > ul.signpost{} }
@media (min-width: 48rem) {
 section > div.container > ul.signpost {align-items: stretch;}
 section > div.container > ul.signpost li {width: 50%;height: auto; flex: 1 0 auto; padding: 25rem 1rem 3rem 3rem; }
 section > div.container > ul.signpost::after {content: "";flex: auto;width: 50%;}
}
section > div.container > ul.signpost li button,
section > div.container > ul.signpost li .button,
section > div.container > ul.signpost li a.button,
section > div.container > ul.signpost li .magnet-button {width: auto;align-self: flex-start;flex-grow: 0;flex-shrink: 0;}

.cookie-banner p{margin:0 0 1rem 0;}
.cookie-consent {position: fixed;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.85);color: #fff;padding: 2rem;z-index: 9999;box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);}
.cookie-buttons {margin-top: 10px;display: flex;gap: 10px;}
.cookie-buttons button::before{content:none;}
.cookie-buttons .cookie-decline{background:#666;}