/* ============================================================
   IDEASETS DESIGN SYSTEM
   Unified CSS Architecture — Object-Oriented, Token-Driven
   ============================================================ */

/* ==========================================================
   1. RESET & BASE
   ========================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
body { line-height: 1.5; font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-body); color: var(--ideasets-text-primary); background-color: var(--ideasets-bg-primary); overflow-x: hidden; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; }

/* ==========================================================
   2. DESIGN TOKENS — Custom Properties
   ========================================================== */
:root {
  /* --- Colors --- */
  --ideasets-black: #0e1011;
  --ideasets-black-deep: #000;
  --ideasets-dark: #111;
  --ideasets-dark-soft: #181b1c;
  --ideasets-dark-charcoal: #151515;
  --ideasets-dark-olive: #242422;
  --ideasets-dark-card: #262829;
  --ideasets-gray-800: #3a3c3d;
  --ideasets-gray-700: #777;
  --ideasets-gray-600: #606060;
  --ideasets-gray-550: #585552;
  --ideasets-gray-500: #bcc2c2;
  --ideasets-gray-450: #a6a3a0;
  --ideasets-gray-400: #ddd9d6;
  --ideasets-gray-300: #e8eded;
  --ideasets-gray-200: #f0f0f0;
  --ideasets-gray-150: #f0ede8;
  --ideasets-gray-100: #f8f8f8;
  --ideasets-white: #fff;
  --ideasets-border-light: rgb(230, 232, 234);
  --ideasets-border-dark: rgba(255, 255, 255, 0.25);
  --ideasets-border-warm: #ddd9d6;
  --ideasets-border-warm-light: #f5f2ee;

  /* --- Alpha Variants --- */
  --ideasets-white-60: rgba(255, 255, 255, 0.6);
  --ideasets-white-40: rgba(255, 255, 255, 0.4);
  --ideasets-white-30: rgba(255, 255, 255, 0.3);
  --ideasets-white-15: rgba(255, 255, 255, 0.15);
  --ideasets-white-06: rgba(255, 255, 255, 0.06);
  --ideasets-black-80: rgba(34, 34, 34, 0.8);
  --ideasets-black-65: rgba(0, 0, 0, 0.65);
  --ideasets-black-60: rgba(14, 16, 17, 0.6);
  --ideasets-black-40: rgba(14, 16, 17, 0.4);
  --ideasets-white-70: rgba(255, 255, 255, 0.7);
  --ideasets-white-50: rgba(255, 255, 255, 0.5);
  --ideasets-white-20: rgba(255, 255, 255, 0.2);
  --ideasets-white-14: rgba(255, 255, 255, 0.14);
  --ideasets-white-10: rgba(255, 255, 255, 0.1);
  --ideasets-black-90: rgba(0, 0, 0, 0.9);
  --ideasets-black-70: rgba(0, 0, 0, 0.7);
  --ideasets-black-30: rgba(0, 0, 0, 0.3);
  --ideasets-black-25: rgba(0, 0, 0, 0.25);
  --ideasets-black-10: rgba(0, 0, 0, 0.1);
  --ideasets-overlay: rgba(0, 0, 0, 0.45);
  --ideasets-overlay-heavy: rgba(0, 0, 0, 0.65);
  --ideasets-overlay-dark: rgba(34, 34, 34, 0.8);
  --ideasets-navy-14: rgba(12, 23, 49, 0.14);

  /* --- Accent Colors --- */
  --ideasets-accent-gold: #e4a853;
  --ideasets-accent-gold-deep: #976e2b;
  --ideasets-accent-gold-muted: #c19a5b;
  --ideasets-accent-blue: #78afcf;
  --ideasets-accent-teal: #365a69;
  --ideasets-accent-teal-light: #6595a8;
  --ideasets-accent-green: #bedd25;
  --ideasets-accent-green-dark: #274839;
  --ideasets-accent-orange: #ff7b00;
  --ideasets-accent-tan: #dac5a7;
  --ideasets-accent-lavender: #efedfd;
  --ideasets-accent-red: #ff2244;
  --ideasets-accent-red-light: rgba(255, 34, 68, 0.15);
  --ideasets-accent-terra: #ad614d;
  --ideasets-accent-navy: #0c1731;

  /* --- Extended Colors (Lithos / Buildaxa / Multi-template) --- */
  --ideasets-near-black-1a: #1a1a1a;
  --ideasets-near-black-1a-90: rgba(26, 26, 26, 0.9);
  --ideasets-near-black-1a-60: rgba(26, 26, 26, 0.6);
  --ideasets-near-black-1a-10: rgba(26, 26, 26, 0.1);
  --ideasets-near-black-1a-95: rgba(26, 26, 26, 0.95);
  --ideasets-gray-767: #767676;
  --ideasets-accent-crimson: #b80404;
  --ideasets-accent-crimson-10: rgba(184, 4, 4, 0.1);
  --ideasets-accent-bright-blue: #0099ff;
  --ideasets-gray-dedede: #dedede;
  --ideasets-gray-dedede-80: rgba(222, 222, 222, 0.8);
  --ideasets-dark-121: #121212;
  --ideasets-dark-202: #202020;
  --ideasets-dark-2e2: #2e2e2e;
  --ideasets-brown-deep: #412714;
  --ideasets-gray-666: #666;
  --ideasets-gray-adadad: #adadad;
  --ideasets-peach-light: #fde2c9;
  --ideasets-cream-light: #fdfcf5;
  --ideasets-accent-orange-vivid: #fe791a;
  --ideasets-dark-191: #191919;
  --ideasets-gray-e8e1e1: #e8e1e1;
  --ideasets-white-09: rgba(255, 255, 255, 0.09);
  --ideasets-black-08: rgba(0, 0, 0, 0.08);
  --ideasets-black-06: rgba(0, 0, 0, 0.06);
  --ideasets-black-04: rgba(0, 0, 0, 0.04);
  --ideasets-black-09: rgba(0, 0, 0, 0.09);
  --ideasets-black-11: rgba(0, 0, 0, 0.11);
  --ideasets-black-15: rgba(0, 0, 0, 0.15);
  --ideasets-black-20: rgba(0, 0, 0, 0.2);
  --ideasets-black-40: rgba(0, 0, 0, 0.4);
  --ideasets-black-50: rgba(0, 0, 0, 0.5);
  --ideasets-black-55: rgba(0, 0, 0, 0.55);
  --ideasets-black-pure-80: rgba(0, 0, 0, 0.8);
  --ideasets-white-75: rgba(255, 255, 255, 0.75);
  --ideasets-white-16: rgba(255, 255, 255, 0.16);
  --ideasets-white-03: rgba(255, 255, 255, 0.03);
  --ideasets-white-07: rgba(255, 255, 255, 0.07);
  --ideasets-gray-414: #414142;
  --ideasets-gray-3d3: #3d3d47;
  --ideasets-gray-c2c: #c2c2c2;
  --ideasets-gray-d0d: #d0d1db;
  --ideasets-gray-e6e: #e6e6e6;
  --ideasets-gray-e9e: #e9ecf2;
  --ideasets-gray-222: #222;
  --ideasets-gray-b8b: #b8b8b8;
  --ideasets-gray-ede: #ededed;
  --ideasets-gray-919: #919191;
  --ideasets-gray-a1a: #a1a1a1;
  --ideasets-gray-453: #453f3f;
  --ideasets-gray-aee: #aeaeae;
  --ideasets-gray-b3b: #b3b3b3;
  --ideasets-dark-131: #131313;
  --ideasets-dark-111112: #111112;
  --ideasets-dark-231: #231f20;
  --ideasets-dark-292: rgb(41, 42, 43);
  --ideasets-gray-f9f9: #f9f9f9;
  --ideasets-accent-orange-arch: #ff6d10;
  --ideasets-accent-teal-amb: #66999b;
  --ideasets-accent-gold-amb: #dda15e;
  --ideasets-accent-green-bright: rgb(0, 194, 3);
  --ideasets-accent-green-vivid: #009637;
  --ideasets-accent-red-pink: rgb(255, 8, 61);
  --ideasets-accent-red-warm: #dc463d;
  --ideasets-accent-purple: #7e36f4;

  /* --- Ayano Hex-Alpha Variants --- */
  --ideasets-black-hex-00: #0e101100;
  --ideasets-black-hex-99: #0e101199;
  --ideasets-gray-f9-1a: #f9f9f91a;
  --ideasets-gray-f9-26: #f9f9f926;
  --ideasets-white-hex-08: #ffffff08;
  --ideasets-white-hex-12: #ffffff12;
  --ideasets-white-hex-99: #fff9;

  /* --- Intorida Hex-Alpha Variants --- */
  --ideasets-black-hex-a6: #000000a6;
  --ideasets-black-hex-06: #0006;
  --ideasets-red-hex-26: #ff224426;
  --ideasets-dark-1f-1a: #1f1f1f1a;

  /* --- Refit Hex-Alpha Variants --- */
  --ideasets-dark-101-4d: #1010144d;
  --ideasets-gray-abab-00: #ababab00;
  --ideasets-gray-d0d-1a: #d0d1db1a;
  --ideasets-gray-dbd: #dbdad9;

  /* --- Ambience Hex-Alpha Variants --- */
  --ideasets-black-hex-8c: #0000008c;
  --ideasets-black-hex-0c: #000c;

  /* --- Eastalio Hex-Alpha Variants --- */
  --ideasets-black-hex-0d: #0000000d;
  --ideasets-white-hex-00: #fff0;
  --ideasets-white-hex-29: #ffffff29;

  /* --- Lorunse Hex-Alpha Variants --- */
  --ideasets-navy-hex-24: #0c173124;
  --ideasets-warm-f5f2ef: #f5f2ef;
  --ideasets-white-hex-b3: #ffffffb3;
  --ideasets-white-hex-24: #ffffff24;

  /* --- Warm / Earth Palette --- */
  --ideasets-warm-offwhite: #fdfbf6;
  --ideasets-warm-lightest: #fdf9f3;
  --ideasets-warm-light: #f6f4f0;
  --ideasets-warm-white: #f5f2ee;
  --ideasets-warm-cream: #f2f1e7;
  --ideasets-warm-beige: #f1efd9;
  --ideasets-warm-medium: #efebe6;
  --ideasets-warm-sand: #d9d3c7;
  --ideasets-warm-brown: #976e2b;
  --ideasets-warm-gray-dark: #1f1f1f;
  --ideasets-warm-near-black: #1b1b1b;

  /* --- Extended Neutrals (Batch 2) --- */
  --ideasets-dark-navy: #0c1731;
  --ideasets-dark-rich: #1c1c1c;
  --ideasets-near-black-alt: #1b1b1c;
  --ideasets-dark-blue-black: #101014;
  --ideasets-dark-charcoal-alt: #28282c;
  --ideasets-gray-blue: #616366;
  --ideasets-gray-cool-bg: #f3f4f7;
  --ideasets-gray-off-white: #f2f2f2;
  --ideasets-gray-warm-divider: #b5b0b0;
  --ideasets-gray-mid: #999;
  --ideasets-gray-medium: #555;
  --ideasets-gray-light-border: #d9d9d9;
  --ideasets-gray-alt-212: #212121;
  --ideasets-gray-alt-636: #636363;
  --ideasets-gray-fafafa: #fafafa;
  --ideasets-gray-f5f5f5: #f5f5f5;
  --ideasets-gray-f7f7f7: #f7f7f7;
  --ideasets-gray-cccccc: #ccc;

  /* --- Typography Families --- */
  --ideasets-ff-primary: 'Albert Sans', 'DM Sans', sans-serif;
  --ideasets-ff-secondary: 'Satoshi', 'Inter', sans-serif;
  --ideasets-ff-display: 'Anton SC', 'Albert Sans', sans-serif;
  --ideasets-ff-serif: 'Playfair Display', 'Georgia', serif;
  --ideasets-ff-serif-alt: 'Italiana', 'Georgia', serif;
  --ideasets-ff-display-alt: 'Inter Display', 'Inter', sans-serif;
  --ideasets-ff-grotesk: 'Host Grotesk', 'Manrope', sans-serif;
  --ideasets-ff-jakarta: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --ideasets-ff-raleway: 'Raleway', 'Montserrat', sans-serif;
  --ideasets-ff-montserrat: 'Montserrat', 'Raleway', sans-serif;
  --ideasets-ff-switzer: 'Switzer', 'Inter', sans-serif;
  --ideasets-ff-manrope: 'Manrope', 'Inter', sans-serif;
  --ideasets-ff-marcellus: 'Marcellus', 'Georgia', serif;
  --ideasets-ff-script: 'Mrs Saint Delafield', cursive;
  --ideasets-ff-arimo: 'Arimo', 'Arial', sans-serif;
  --ideasets-ff-jost: 'Jost', 'Montserrat', sans-serif;
  --ideasets-ff-forum: 'Forum', 'Georgia', serif;
  --ideasets-ff-mona: 'Mona Sans', 'Inter', sans-serif;
  --ideasets-ff-mono: 'Fragment Mono', monospace;
  --ideasets-ff-geist: 'Geist', 'Inter', sans-serif;
  --ideasets-ff-inter: 'Inter', 'Inter-Regular', system-ui, Arial, sans-serif;
  --ideasets-ff-momo-display: 'Momo Trust Display', 'Georgia', serif;
  --ideasets-ff-momo-sans: 'Momo Trust Sans', 'Inter', sans-serif;

  /* --- Typography Scale --- */
  --ideasets-fs-xs: 0.75rem;
  --ideasets-fs-caption: 0.8125rem;
  --ideasets-fs-sm: 0.875rem;
  --ideasets-fs-15: 0.9375rem;
  --ideasets-fs-body: 1rem;
  --ideasets-fs-md: 1.125rem;
  --ideasets-fs-lg: 1.25rem;
  --ideasets-fs-22: 1.375rem;
  --ideasets-fs-23: 1.4375rem;
  --ideasets-fs-xl: 1.5rem;
  --ideasets-fs-26: 1.625rem;
  --ideasets-fs-28: 1.75rem;
  --ideasets-fs-30: 1.875rem;
  --ideasets-fs-2xl: 2rem;
  --ideasets-fs-34: 2.125rem;
  --ideasets-fs-35: 2.1875rem;
  --ideasets-fs-36: 2.25rem;
  --ideasets-fs-38: 2.375rem;
  --ideasets-fs-3xl: 2.5rem;
  --ideasets-fs-41: 2.5625rem;
  --ideasets-fs-42: 2.625rem;
  --ideasets-fs-44: 2.75rem;
  --ideasets-fs-45: 2.8125rem;
  --ideasets-fs-46: 2.875rem;
  --ideasets-fs-4xl: 3rem;
  --ideasets-fs-50: 3.125rem;
  --ideasets-fs-51: 3.1875rem;
  --ideasets-fs-54: 3.375rem;
  --ideasets-fs-56: 3.5rem;
  --ideasets-fs-5xl: 3.5rem;
  --ideasets-fs-58: 3.625rem;
  --ideasets-fs-60: 3.75rem;
  --ideasets-fs-62: 3.875rem;
  --ideasets-fs-64: 4rem;
  --ideasets-fs-68: 4.25rem;
  --ideasets-fs-6xl: 4.5rem;
  --ideasets-fs-78: 4.875rem;
  --ideasets-fs-80: 5rem;
  --ideasets-fs-84: 5.25rem;
  --ideasets-fs-90: 5.625rem;
  --ideasets-fs-7xl: 6rem;
  --ideasets-fs-100: 6.25rem;
  --ideasets-fs-108: 6.75rem;
  --ideasets-fs-120: 7.5rem;
  --ideasets-fs-150: 9.375rem;
  --ideasets-fs-180: 11.25rem;
  --ideasets-fs-190: 11.875rem;
  --ideasets-fs-220: 13.75rem;
  --ideasets-fs-300: 18.75rem;
  --ideasets-fs-13: 0.8125rem;
  --ideasets-fs-17: 1.0625rem;
  --ideasets-fs-27: 1.6875rem;
  --ideasets-fs-224: 14rem;
  --ideasets-fs-291: 18.1875rem;
  --ideasets-fs-500: 31.25rem;
  --ideasets-fs-mega: clamp(6rem, 20vw, 31.25rem);
  --ideasets-fs-hero: clamp(3rem, 8vw, 8rem);

  /* --- Font Weights --- */
  --ideasets-fw-light: 300;
  --ideasets-fw-regular: 400;
  --ideasets-fw-medium: 500;
  --ideasets-fw-semibold: 600;
  --ideasets-fw-bold: 700;
  --ideasets-fw-black: 900;

  /* --- Line Heights --- */
  --ideasets-lh-crush: 0.9;
  --ideasets-lh-none: 1;
  --ideasets-lh-tight: 1.05;
  --ideasets-lh-heading: 1.1;
  --ideasets-lh-snug: 1.2;
  --ideasets-lh-compact: 1.25;
  --ideasets-lh-card: 1.3;
  --ideasets-lh-sub: 1.4;
  --ideasets-lh-normal: 1.5;
  --ideasets-lh-body: 1.6;
  --ideasets-lh-relaxed: 1.7;
  --ideasets-lh-loose: 1.75;
  --ideasets-lh-between-heading: 1.15;
  --ideasets-lh-between-card: 1.35;
  --ideasets-lh-near-none: 0.95;
  --ideasets-lh-mid-sub: 1.41;
  --ideasets-lh-mid-body: 1.56;

  /* --- Letter Spacing --- */
  --ideasets-ls-extreme: -0.06em;
  --ideasets-ls-ultra-tight: -0.05em;
  --ideasets-ls-tightest: -0.04em;
  --ideasets-ls-tight: -0.03em;
  --ideasets-ls-snug: -0.02em;
  --ideasets-ls-semi: -0.015em;
  --ideasets-ls-normal: 0;
  --ideasets-ls-wide: 0.05em;
  --ideasets-ls-wider: 0.1em;
  --ideasets-ls-widest: 0.2em;
  --ideasets-ls-ultra: 0.27em;
  --ideasets-ls-micro: -0.01em;
  --ideasets-ls-slight: 0.02em;
  --ideasets-ls-text: 0.04em;
  --ideasets-ls-spread: 1px;
  --ideasets-ls-tight-alt: -0.051em;

  /* --- Spacing Scale --- */
  --ideasets-space-xs: 8px;
  --ideasets-space-sm: 16px;
  --ideasets-space-md: 24px;
  --ideasets-space-lg: 32px;
  --ideasets-space-xl: 48px;
  --ideasets-space-2xl: 64px;
  --ideasets-space-3xl: 96px;
  --ideasets-space-4xl: 128px;
  --ideasets-space-5xl: 192px;
  --ideasets-space-6xl: 256px;

  /* --- Layout --- */
  --ideasets-container-ultra: 1800px;
  --ideasets-container-full-hd: 1600px;
  --ideasets-container-xlarge: 1440px;
  --ideasets-container-wide: 1320px;
  --ideasets-container-1300: 1300px;
  --ideasets-container-mid: 1280px;
  --ideasets-container-1260: 1260px;
  --ideasets-container-max: 1200px;
  --ideasets-container-narrow: 940px;
  --ideasets-container-text: 800px;
  --ideasets-container-mega: 2550px;
  --ideasets-container-small: 740px;
  --ideasets-container-padding: 64px;
  --ideasets-col-padding: 32px;
  --ideasets-section-padding: 192px;
  --ideasets-nav-inset: 64px;
  --ideasets-corner-inset: 64px;
  --ideasets-corner-size: 12px;

  /* --- Border Radius --- */
  --ideasets-radius-none: 0;
  --ideasets-radius-sm: 4px;
  --ideasets-radius-md: 8px;
  --ideasets-radius-10: 10px;
  --ideasets-radius-lg: 12px;
  --ideasets-radius-15: 15px;
  --ideasets-radius-xl: 16px;
  --ideasets-radius-2xl: 24px;
  --ideasets-radius-3xl: 32px;
  --ideasets-radius-4xl: 48px;
  --ideasets-radius-pill: 100px;
  --ideasets-radius-full: 9999px;
  --ideasets-radius-20: 20px;
  --ideasets-radius-21: 21px;
  --ideasets-radius-26: 26px;
  --ideasets-radius-40: 40px;
  --ideasets-radius-50: 50px;
  --ideasets-radius-xs: 2px;
  --ideasets-radius-3: 3px;
  --ideasets-radius-5: 5px;
  --ideasets-radius-6: 6px;
  --ideasets-radius-11: 11px;
  --ideasets-radius-14: 14px;
  --ideasets-radius-39: 39px;
  --ideasets-radius-90: 90px;
  --ideasets-radius-999: 999px;
  --ideasets-radius-494: 494px;
  --ideasets-radius-round: 1000px;

  /* --- Shadows --- */
  --ideasets-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.02);
  --ideasets-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ideasets-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --ideasets-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);
  --ideasets-shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.2);
  --ideasets-shadow-layered: rgba(0,0,0,0.17) 0px 0.6px 1.6px -1.5px, rgba(0,0,0,0.14) 0px 2.3px 6px -3px, rgba(0,0,0,0.02) 0px 10px 26px -4.5px;
  --ideasets-shadow-soft: rgba(0,0,0,0.1) 0px 2px 4px, rgba(0,0,0,0.05) 0px 1px 0px, rgba(255,255,255,0.15) 0px 0px 0px 1px;
  --ideasets-shadow-inset-border: inset 0px 0px 0px 1px currentColor;
  --ideasets-shadow-card: rgba(0,0,0,0.26) 0px 0.64px 1.15px -1.125px, rgba(0,0,0,0.24) 0px 1.93px 3.48px -2.25px, rgba(0,0,0,0.192) 0px 5.1px 9.2px -3.375px, rgba(0,0,0,0.03) 0px 16px 28.8px -4.5px;
  --ideasets-shadow-glass-inset: inset 0 0 0 1px rgba(255,255,255,0.1);
  --ideasets-shadow-inset-black: inset 0px 0px 0px 1px rgb(0, 0, 0);
  --ideasets-shadow-soft-26: rgba(0,0,0,0.1) 0px 10px 26px;
  --ideasets-shadow-subtle: 0 10px 20px rgba(0,0,0,0.05);
  --ideasets-shadow-tight: rgba(0,0,0,0.15) 0px 2px 2px 1px;
  --ideasets-shadow-glow: rgba(0,0,0,0.3) 0px 0px 20px 5px;
  --ideasets-shadow-drop-sm: rgba(0,0,0,0.25) 0px 1px 2px 0px;
  --ideasets-shadow-card-alt: rgba(0,0,0,0.11) 0px 0.6px 1.31px -0.94px, rgba(0,0,0,0.1) 0px 1.81px 3.98px -1.88px, rgba(0,0,0,0.09) 0px 4.79px 10.53px -2.81px, rgba(0,0,0,0.04) 0px 15px 33px -3.75px;
  --ideasets-shadow-medium: rgba(0,0,0,0.15) 0px 4px 10px;

  /* --- Transitions --- */
  --ideasets-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ideasets-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ideasets-ease-in-out-alt: cubic-bezier(0.44, 0, 0.56, 1);
  --ideasets-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ideasets-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ideasets-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ideasets-ease-linear: cubic-bezier(0, 0, 1, 1);
  --ideasets-ease-buildaxa: cubic-bezier(0.2, 0, 0, 1);
  --ideasets-ease-hover-color: cubic-bezier(0.44, 0, 0.56, 1);
  --ideasets-ease-native-out: cubic-bezier(0, 0, 0.58, 1);
  --ideasets-duration-fastest: 0.15s;
  --ideasets-duration-fast: 0.2s;
  --ideasets-duration-quick: 0.3s;
  --ideasets-duration-normal: 0.4s;
  --ideasets-duration-slow: 0.6s;
  --ideasets-duration-slower: 0.8s;
  --ideasets-duration-slowest: 1.2s;

  /* --- Z-Index Scale --- */
  --ideasets-z-base: 0;
  --ideasets-z-above: 1;
  --ideasets-z-dropdown: 100;
  --ideasets-z-sticky: 200;
  --ideasets-z-overlay: 300;
  --ideasets-z-modal: 400;
  --ideasets-z-nav: 500;
  --ideasets-z-cursor: 9999;
  --ideasets-z-preloader: 10000;
}

/* ==========================================================
   3. THEME SYSTEM — Light (default) & Dark
   ========================================================== */
:root,
[data-theme="light"] {
  --ideasets-bg-primary: var(--ideasets-white);
  --ideasets-bg-secondary: var(--ideasets-gray-100);
  --ideasets-bg-tertiary: var(--ideasets-gray-200);
  --ideasets-bg-inverse: var(--ideasets-black);
  --ideasets-text-primary: var(--ideasets-black);
  --ideasets-text-secondary: var(--ideasets-gray-700);
  --ideasets-text-tertiary: var(--ideasets-gray-500);
  --ideasets-text-inverse: var(--ideasets-white);
  --ideasets-border-color: var(--ideasets-border-light);
  --ideasets-divider: var(--ideasets-black);
  --ideasets-selection-bg: #333;
  --ideasets-selection-color: #fff;
}

[data-theme="dark"] {
  --ideasets-bg-primary: var(--ideasets-black);
  --ideasets-bg-secondary: var(--ideasets-dark-soft);
  --ideasets-bg-tertiary: var(--ideasets-dark-card);
  --ideasets-bg-inverse: var(--ideasets-white);
  --ideasets-text-primary: var(--ideasets-white);
  --ideasets-text-secondary: var(--ideasets-gray-500);
  --ideasets-text-tertiary: var(--ideasets-gray-700);
  --ideasets-text-inverse: var(--ideasets-black);
  --ideasets-border-color: var(--ideasets-border-dark);
  --ideasets-divider: var(--ideasets-white);
  --ideasets-selection-bg: #fff;
  --ideasets-selection-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ideasets-bg-primary: var(--ideasets-black);
    --ideasets-bg-secondary: var(--ideasets-dark-soft);
    --ideasets-bg-tertiary: var(--ideasets-dark-card);
    --ideasets-bg-inverse: var(--ideasets-white);
    --ideasets-text-primary: var(--ideasets-white);
    --ideasets-text-secondary: var(--ideasets-gray-500);
    --ideasets-text-tertiary: var(--ideasets-gray-700);
    --ideasets-text-inverse: var(--ideasets-black);
    --ideasets-border-color: var(--ideasets-border-dark);
    --ideasets-divider: var(--ideasets-white);
    --ideasets-selection-bg: #fff;
    --ideasets-selection-color: #000;
  }
}

::selection {
  background-color: var(--ideasets-selection-bg);
  color: var(--ideasets-selection-color);
}

/* --- Warm Theme --- */
[data-theme="warm"] {
  --ideasets-bg-primary: var(--ideasets-warm-white);
  --ideasets-bg-secondary: var(--ideasets-warm-cream);
  --ideasets-bg-tertiary: var(--ideasets-warm-beige);
  --ideasets-bg-inverse: var(--ideasets-warm-near-black);
  --ideasets-text-primary: var(--ideasets-warm-near-black);
  --ideasets-text-secondary: #6b6358;
  --ideasets-text-tertiary: #a09888;
  --ideasets-text-inverse: var(--ideasets-warm-white);
  --ideasets-border-color: rgba(27, 27, 27, 0.12);
  --ideasets-divider: var(--ideasets-warm-near-black);
  --ideasets-selection-bg: var(--ideasets-accent-gold);
  --ideasets-selection-color: #fff;
}

/* --- Nature Theme --- */
[data-theme="nature"] {
  --ideasets-bg-primary: var(--ideasets-warm-cream);
  --ideasets-bg-secondary: var(--ideasets-warm-beige);
  --ideasets-bg-tertiary: #e5e3d4;
  --ideasets-bg-inverse: var(--ideasets-accent-green-dark);
  --ideasets-text-primary: var(--ideasets-accent-green-dark);
  --ideasets-text-secondary: #4a6252;
  --ideasets-text-tertiary: #8a9e8e;
  --ideasets-text-inverse: var(--ideasets-warm-cream);
  --ideasets-border-color: rgba(39, 72, 57, 0.15);
  --ideasets-divider: var(--ideasets-accent-green-dark);
  --ideasets-selection-bg: var(--ideasets-accent-green);
  --ideasets-selection-color: var(--ideasets-accent-green-dark);
}

/* ==========================================================
   4. TYPOGRAPHY CLASSES
   ========================================================== */
.ideasets-display-xl {
  font-family: var(--ideasets-ff-display);
  font-size: var(--ideasets-fs-hero);
  font-weight: var(--ideasets-fw-black);
  line-height: var(--ideasets-lh-tight);
  letter-spacing: var(--ideasets-ls-tight);
  text-transform: uppercase;
}
.ideasets-display-lg {
  font-family: var(--ideasets-ff-primary);
  font-size: var(--ideasets-fs-7xl);
  font-weight: var(--ideasets-fw-bold);
  line-height: var(--ideasets-lh-tight);
  letter-spacing: var(--ideasets-ls-tight);
}
.ideasets-display-md {
  font-family: var(--ideasets-ff-primary);
  font-size: var(--ideasets-fs-5xl);
  font-weight: var(--ideasets-fw-bold);
  line-height: var(--ideasets-lh-snug);
  letter-spacing: var(--ideasets-ls-tight);
}
.ideasets-heading-xl {
  font-family: var(--ideasets-ff-primary);
  font-size: var(--ideasets-fs-4xl);
  font-weight: var(--ideasets-fw-bold);
  line-height: var(--ideasets-lh-snug);
}
.ideasets-heading-lg {
  font-family: var(--ideasets-ff-primary);
  font-size: var(--ideasets-fs-3xl);
  font-weight: var(--ideasets-fw-semibold);
  line-height: var(--ideasets-lh-snug);
}
.ideasets-heading-md {
  font-family: var(--ideasets-ff-primary);
  font-size: var(--ideasets-fs-2xl);
  font-weight: var(--ideasets-fw-semibold);
  line-height: var(--ideasets-lh-snug);
}
.ideasets-heading-sm {
  font-family: var(--ideasets-ff-primary);
  font-size: var(--ideasets-fs-xl);
  font-weight: var(--ideasets-fw-semibold);
  line-height: var(--ideasets-lh-snug);
}
.ideasets-body-lg {
  font-family: var(--ideasets-ff-secondary);
  font-size: var(--ideasets-fs-lg);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-normal);
}
.ideasets-body {
  font-family: var(--ideasets-ff-secondary);
  font-size: var(--ideasets-fs-body);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-normal);
}
.ideasets-body-sm {
  font-family: var(--ideasets-ff-secondary);
  font-size: var(--ideasets-fs-sm);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-normal);
}
.ideasets-caption {
  font-family: var(--ideasets-ff-secondary);
  font-size: var(--ideasets-fs-xs);
  font-weight: var(--ideasets-fw-medium);
  line-height: var(--ideasets-lh-normal);
  letter-spacing: var(--ideasets-ls-wide);
  text-transform: uppercase;
}
.ideasets-label {
  font-family: var(--ideasets-ff-mono);
  font-size: var(--ideasets-fs-sm);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-normal);
  letter-spacing: var(--ideasets-ls-wide);
  text-transform: uppercase;
}
.ideasets-mono {
  font-family: var(--ideasets-ff-mono);
  font-size: var(--ideasets-fs-sm);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-normal);
}

/* Serif Typography */
.ideasets-serif-display {
  font-family: var(--ideasets-ff-serif);
  font-size: var(--ideasets-fs-6xl);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-tight);
  font-style: italic;
}
.ideasets-serif-heading {
  font-family: var(--ideasets-ff-serif);
  font-size: var(--ideasets-fs-4xl);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-snug);
}
.ideasets-serif-body {
  font-family: var(--ideasets-ff-serif);
  font-size: var(--ideasets-fs-lg);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-relaxed);
  font-style: italic;
}

/* Display Alt Typography */
.ideasets-display-alt {
  font-family: var(--ideasets-ff-display-alt);
  font-size: var(--ideasets-fs-5xl);
  font-weight: var(--ideasets-fw-semibold);
  line-height: var(--ideasets-lh-tight);
  letter-spacing: var(--ideasets-ls-tight);
}

/* Light-Weight Typography (Ayano / Scandinavian style) */
.ideasets-display-light {
  font-family: var(--ideasets-ff-secondary);
  font-size: var(--ideasets-fs-7xl);
  font-weight: var(--ideasets-fw-light);
  line-height: var(--ideasets-lh-heading);
  letter-spacing: var(--ideasets-ls-normal);
}
.ideasets-heading-light-xl {
  font-family: var(--ideasets-ff-secondary);
  font-size: var(--ideasets-fs-4xl);
  font-weight: var(--ideasets-fw-light);
  line-height: var(--ideasets-lh-heading);
}
.ideasets-heading-light-lg {
  font-family: var(--ideasets-ff-secondary);
  font-size: var(--ideasets-fs-28);
  font-weight: var(--ideasets-fw-light);
  line-height: var(--ideasets-lh-snug);
}
.ideasets-body-xl {
  font-family: var(--ideasets-ff-secondary);
  font-size: var(--ideasets-fs-xl);
  font-weight: var(--ideasets-fw-light);
  line-height: var(--ideasets-lh-normal);
}

/* CTA Display (Intorida) */
.ideasets-cta-display {
  font-family: var(--ideasets-ff-serif);
  font-size: var(--ideasets-fs-120);
  font-weight: var(--ideasets-fw-semibold);
  line-height: var(--ideasets-lh-none);
  font-style: italic;
}

/* Tag / Wide Label (Intorida) */
.ideasets-tag {
  font-family: var(--ideasets-ff-primary);
  font-size: var(--ideasets-fs-sm);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-body);
  letter-spacing: var(--ideasets-ls-ultra);
  text-transform: uppercase;
}

/* Font weight utilities */
.ideasets-fw-light { font-weight: var(--ideasets-fw-light); }
.ideasets-fw-regular { font-weight: var(--ideasets-fw-regular); }
.ideasets-fw-medium { font-weight: var(--ideasets-fw-medium); }
.ideasets-fw-semibold { font-weight: var(--ideasets-fw-semibold); }
.ideasets-fw-bold { font-weight: var(--ideasets-fw-bold); }

.ideasets-italic { font-style: italic; }
.ideasets-uppercase { text-transform: uppercase; }
.ideasets-text-center { text-align: center; }
.ideasets-text-right { text-align: right; }
.ideasets-text-balance { text-wrap: balance; }

/* ==========================================================
   5. CUSTOM CURSOR SYSTEM
   ========================================================== */
.ideasets-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: var(--ideasets-z-cursor); mix-blend-mode: difference; }
.ideasets-cursor-dot { width: 8px; height: 8px; background: var(--ideasets-white); border-radius: 50%; transform: translate(-50%, -50%); transition: width var(--ideasets-duration-fast) var(--ideasets-ease-out), height var(--ideasets-duration-fast) var(--ideasets-ease-out); }
.ideasets-cursor-ring { width: 40px; height: 40px; border: 1px solid var(--ideasets-white); border-radius: 50%; transform: translate(-50%, -50%); transition: width var(--ideasets-duration-normal) var(--ideasets-ease-out), height var(--ideasets-duration-normal) var(--ideasets-ease-out), border-color var(--ideasets-duration-normal) var(--ideasets-ease-out), opacity var(--ideasets-duration-normal); }
.ideasets-cursor-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); color: var(--ideasets-white); white-space: nowrap; opacity: 0; transition: opacity var(--ideasets-duration-fast); pointer-events: none; }
.ideasets-cursor.is-hovering .ideasets-cursor-dot { width: 0; height: 0; }
.ideasets-cursor.is-hovering .ideasets-cursor-ring { width: 80px; height: 80px; }
.ideasets-cursor.is-hovering .ideasets-cursor-label { opacity: 1; }
.ideasets-cursor.is-clicking .ideasets-cursor-ring { width: 32px; height: 32px; }
.ideasets-cursor.is-hidden .ideasets-cursor-dot,
.ideasets-cursor.is-hidden .ideasets-cursor-ring { opacity: 0; }

@media (pointer: coarse) {
  .ideasets-cursor { display: none; }
}

/* ==========================================================
   6. SCROLL PROGRESS BAR
   ========================================================== */
.ideasets-scroll-progress { position: fixed; top: 0; left: 0; width: 0%; height: 3px; background: var(--ideasets-text-primary); z-index: var(--ideasets-z-nav); transition: none; }

/* ==========================================================
   7. PRELOADER
   ========================================================== */
.ideasets-preloader { position: fixed; inset: 0; z-index: var(--ideasets-z-preloader); background: var(--ideasets-bg-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.5s var(--ideasets-ease-out), visibility 0.5s; }
.ideasets-preloader.is-loaded { opacity: 0; visibility: hidden; pointer-events: none; }
.ideasets-preloader-counter { font-family: var(--ideasets-ff-display); font-size: var(--ideasets-fs-7xl); color: var(--ideasets-text-inverse); font-weight: var(--ideasets-fw-black); line-height: 1; }
.ideasets-preloader-bar { width: 200px; height: 2px; background: rgba(255,255,255,0.2); margin-top: var(--ideasets-space-lg); border-radius: 1px; overflow: hidden; }
.ideasets-preloader-bar-fill { width: 0%; height: 100%; background: var(--ideasets-text-inverse); transition: width 0.1s linear; }

/* ==========================================================
   8. PAGE TRANSITIONS
   ========================================================== */
.ideasets-page-transition { position: fixed; inset: 0; z-index: var(--ideasets-z-modal); background: var(--ideasets-bg-inverse); transform-origin: bottom; transform: scaleY(0); pointer-events: none; }
.ideasets-page-transition.is-entering { animation: ideasets-transition-enter var(--ideasets-duration-slow) var(--ideasets-ease-in-out) forwards; }
.ideasets-page-transition.is-leaving { animation: ideasets-transition-leave var(--ideasets-duration-slow) var(--ideasets-ease-in-out) forwards; }

/* ==========================================================
   9. SCROLL REVEAL SYSTEM
   ========================================================== */
[data-reveal] { opacity: 0; transition-property: opacity, transform, clip-path; transition-duration: var(--ideasets-duration-slower); transition-timing-function: var(--ideasets-ease-out); }
[data-reveal].is-visible { opacity: 1; }
[data-reveal="fade"] { opacity: 0; }
[data-reveal="fade"].is-visible { opacity: 1; }
[data-reveal="up"] { transform: translateY(60px); }
[data-reveal="up"].is-visible { transform: translateY(0); }
[data-reveal="down"] { transform: translateY(-60px); }
[data-reveal="down"].is-visible { transform: translateY(0); }
[data-reveal="left"] { transform: translateX(-60px); }
[data-reveal="left"].is-visible { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="right"].is-visible { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(0.9); }
[data-reveal="scale"].is-visible { transform: scale(1); }
[data-reveal="scale-up"] { transform: scale(0.9) translateY(40px); }
[data-reveal="scale-up"].is-visible { transform: scale(1) translateY(0); }
[data-reveal="clip-up"] { clip-path: inset(100% 0 0 0); }
[data-reveal="clip-up"].is-visible { clip-path: inset(0 0 0 0); }
[data-reveal="clip-down"] { clip-path: inset(0 0 100% 0); }
[data-reveal="clip-down"].is-visible { clip-path: inset(0 0 0 0); }
[data-reveal="clip-left"] { clip-path: inset(0 100% 0 0); }
[data-reveal="clip-left"].is-visible { clip-path: inset(0 0 0 0); }
[data-reveal="clip-right"] { clip-path: inset(0 0 0 100%); }
[data-reveal="clip-right"].is-visible { clip-path: inset(0 0 0 0); }
[data-reveal="clip-circle"] { clip-path: circle(0% at 50% 50%); }
[data-reveal="clip-circle"].is-visible { clip-path: circle(75% at 50% 50%); }
[data-reveal="rotate-up"] { transform: translateY(60px) rotate(3deg); transform-origin: bottom left; }
[data-reveal="rotate-up"].is-visible { transform: translateY(0) rotate(0deg); }

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }
[data-reveal-delay="6"] { transition-delay: 0.6s; }
[data-reveal-delay="7"] { transition-delay: 0.7s; }
[data-reveal-delay="8"] { transition-delay: 0.8s; }

/* ==========================================================
   10. TEXT SPLIT ANIMATIONS
   ========================================================== */
.ideasets-split-chars { overflow: hidden; display: inline-block; }
.ideasets-split-chars .ideasets-char { display: inline-block; opacity: 0; transform: translateY(100%); transition: opacity var(--ideasets-duration-normal) var(--ideasets-ease-out), transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-split-chars.is-visible .ideasets-char { opacity: 1; transform: translateY(0); }
.ideasets-split-lines { overflow: hidden; }
.ideasets-split-lines .ideasets-line { display: block; overflow: hidden; }
.ideasets-split-lines .ideasets-line-inner { display: block; transform: translateY(105%); transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-split-lines.is-visible .ideasets-line-inner { transform: translateY(0); }

/* ==========================================================
   11. PARALLAX SYSTEM
   ========================================================== */
[data-parallax] { will-change: transform; transition: transform 0.1s linear; }

/* ==========================================================
   12. LAYOUT — Container, Grid, Flex
   ========================================================== */
.ideasets-container { width: 100%; max-width: var(--ideasets-container-max); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-mid { width: 100%; max-width: var(--ideasets-container-mid); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-wide { width: 100%; max-width: var(--ideasets-container-wide); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-ultra { width: 100%; max-width: var(--ideasets-container-ultra); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-fluid { width: 100%; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-full { width: 100%; padding: 0; }
.ideasets-container-tight { width: 100%; max-width: var(--ideasets-container-max); margin: 0 auto; padding: 0 30px; }

.ideasets-row { display: flex; flex-wrap: wrap; width: 100%; }
.ideasets-row-nowrap { display: flex; width: 100%; }
.ideasets-col { flex: 1 0 0; padding: 0 var(--ideasets-col-padding); }
.ideasets-col-2 { flex: 2 0 0; padding: 0 var(--ideasets-col-padding); }
.ideasets-col-auto { flex: 0 0 auto; padding: 0 var(--ideasets-col-padding); }

.ideasets-grid { display: grid; gap: var(--ideasets-space-lg); }
.ideasets-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ideasets-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ideasets-grid-4 { grid-template-columns: repeat(4, 1fr); }

.ideasets-flex { display: flex; }
.ideasets-flex-col { display: flex; flex-direction: column; }
.ideasets-flex-center { display: flex; align-items: center; justify-content: center; }
.ideasets-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ideasets-flex-start { display: flex; align-items: flex-start; }
.ideasets-flex-end { display: flex; align-items: flex-end; justify-content: flex-end; }
.ideasets-flex-wrap { flex-wrap: wrap; }
.ideasets-items-center { align-items: center; }
.ideasets-items-stretch { align-items: stretch; }
.ideasets-justify-center { justify-content: center; }

.ideasets-gap-xs { gap: var(--ideasets-space-xs); }
.ideasets-gap-sm { gap: var(--ideasets-space-sm); }
.ideasets-gap-md { gap: var(--ideasets-space-md); }
.ideasets-gap-lg { gap: var(--ideasets-space-lg); }
.ideasets-gap-xl { gap: var(--ideasets-space-xl); }
.ideasets-gap-2xl { gap: var(--ideasets-space-2xl); }
.ideasets-gap-3xl { gap: var(--ideasets-space-3xl); }

/* ==========================================================
   13. POSITIONING & DISPLAY UTILITIES
   ========================================================== */
.ideasets-relative { position: relative; }
.ideasets-absolute { position: absolute; }
.ideasets-fixed { position: fixed; }
.ideasets-sticky { position: sticky; top: 0; }
.ideasets-inset { inset: 0; }
.ideasets-block { display: block; }
.ideasets-inline-block { display: inline-block; }
.ideasets-hidden { display: none; }
.ideasets-overflow-hidden { overflow: hidden; }
.ideasets-overflow-visible { overflow: visible; }
.ideasets-w-full { width: 100%; }
.ideasets-h-full { height: 100%; }
.ideasets-h-screen { height: 100vh; }
.ideasets-h-half { height: 50vh; }
.ideasets-h-80 { height: 80vh; }
.ideasets-min-h-screen { min-height: 100vh; }
.ideasets-object-cover { object-fit: cover; width: 100%; height: 100%; }
.ideasets-pointer-none { pointer-events: none; }

/* ==========================================================
   14. SPACING UTILITIES
   ========================================================== */
.ideasets-section { padding: var(--ideasets-section-padding) 0; }
.ideasets-section-sm { padding: var(--ideasets-space-3xl) 0; }
.ideasets-section-lg { padding: var(--ideasets-space-6xl) 0; }

.ideasets-mt-xs { margin-top: var(--ideasets-space-xs); }
.ideasets-mt-sm { margin-top: var(--ideasets-space-sm); }
.ideasets-mt-md { margin-top: var(--ideasets-space-md); }
.ideasets-mt-lg { margin-top: var(--ideasets-space-lg); }
.ideasets-mt-xl { margin-top: var(--ideasets-space-xl); }
.ideasets-mt-2xl { margin-top: var(--ideasets-space-2xl); }
.ideasets-mt-3xl { margin-top: var(--ideasets-space-3xl); }
.ideasets-mt-4xl { margin-top: var(--ideasets-space-4xl); }
.ideasets-mb-xs { margin-bottom: var(--ideasets-space-xs); }
.ideasets-mb-sm { margin-bottom: var(--ideasets-space-sm); }
.ideasets-mb-md { margin-bottom: var(--ideasets-space-md); }
.ideasets-mb-lg { margin-bottom: var(--ideasets-space-lg); }
.ideasets-mb-xl { margin-bottom: var(--ideasets-space-xl); }
.ideasets-mb-2xl { margin-bottom: var(--ideasets-space-2xl); }
.ideasets-mb-3xl { margin-bottom: var(--ideasets-space-3xl); }
.ideasets-mb-4xl { margin-bottom: var(--ideasets-space-4xl); }

.ideasets-pt-sm { padding-top: var(--ideasets-space-sm); }
.ideasets-pt-lg { padding-top: var(--ideasets-space-lg); }
.ideasets-pt-xl { padding-top: var(--ideasets-space-xl); }
.ideasets-pt-2xl { padding-top: var(--ideasets-space-2xl); }
.ideasets-pb-sm { padding-bottom: var(--ideasets-space-sm); }
.ideasets-pb-lg { padding-bottom: var(--ideasets-space-lg); }
.ideasets-pb-xl { padding-bottom: var(--ideasets-space-xl); }
.ideasets-pb-2xl { padding-bottom: var(--ideasets-space-2xl); }
.ideasets-px-sm { padding-left: var(--ideasets-space-sm); padding-right: var(--ideasets-space-sm); }
.ideasets-px-md { padding-left: var(--ideasets-space-md); padding-right: var(--ideasets-space-md); }
.ideasets-px-lg { padding-left: var(--ideasets-space-lg); padding-right: var(--ideasets-space-lg); }
.ideasets-px-xl { padding-left: var(--ideasets-space-xl); padding-right: var(--ideasets-space-xl); }

/* ==========================================================
   15. NAVIGATION COMPONENT
   ========================================================== */
.ideasets-nav { position: fixed; top: 0; left: 0; right: 0; z-index: var(--ideasets-z-nav); padding: var(--ideasets-space-md) var(--ideasets-nav-inset); display: flex; align-items: center; justify-content: space-between; mix-blend-mode: difference; color: var(--ideasets-white); transition: padding var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-nav-scrolled { padding: var(--ideasets-space-sm) var(--ideasets-nav-inset); }
.ideasets-nav-logo { display: flex; align-items: center; cursor: pointer; }
.ideasets-nav-logo img,
.ideasets-nav-logo svg { height: 43px; width: auto; }
.ideasets-nav-links { display: flex; align-items: center; gap: var(--ideasets-space-xl); }
.ideasets-nav-actions { display: flex; align-items: center; gap: var(--ideasets-space-lg); }

/* Nav with solid background (alternative) */
.ideasets-nav-solid { position: fixed; top: 0; left: 0; right: 0; z-index: var(--ideasets-z-nav); background: var(--ideasets-bg-primary); padding: var(--ideasets-space-md) var(--ideasets-container-padding); display: flex; align-items: center; justify-content: space-between; transition: background var(--ideasets-duration-normal), box-shadow var(--ideasets-duration-normal); }
.ideasets-nav-solid.ideasets-nav-scrolled { box-shadow: var(--ideasets-shadow-sm); }
.ideasets-nav-inner { max-width: var(--ideasets-container-max); width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }

/* Nav Link — Slide-Up Hover Effect */
.ideasets-nav-link { position: relative; font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); overflow: hidden; display: flex; flex-direction: column; height: 1.4em; }
.ideasets-nav-link span { display: block; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-nav-link span:last-child { position: absolute; top: 100%; }
.ideasets-nav-link:hover span { transform: translateY(-100%); }

/* Nav Link Simple */
.ideasets-nav-link-simple { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); opacity: 0.7; transition: opacity var(--ideasets-duration-fast); }
.ideasets-nav-link-simple:hover { opacity: 1; }

/* Hamburger / Menu Toggle */
.ideasets-menu-toggle { width: 32px; height: 20px; position: relative; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.ideasets-menu-toggle span { display: block; width: 100%; height: 2px; background: currentColor; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out), opacity var(--ideasets-duration-fast); }
.ideasets-menu-toggle.is-open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.ideasets-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.ideasets-menu-toggle.is-open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Dropdown Menu */
.ideasets-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 284px; background: var(--ideasets-bg-primary); border: 1px solid var(--ideasets-border-color); border-radius: var(--ideasets-radius-lg); padding: var(--ideasets-space-sm); box-shadow: var(--ideasets-shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--ideasets-duration-normal) var(--ideasets-ease-out), visibility var(--ideasets-duration-normal), transform var(--ideasets-duration-normal) var(--ideasets-ease-out); z-index: var(--ideasets-z-dropdown); }
.ideasets-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ideasets-dropdown-item { display: flex; align-items: center; gap: var(--ideasets-space-sm); padding: var(--ideasets-space-sm) var(--ideasets-space-md); border-radius: var(--ideasets-radius-md); transition: background var(--ideasets-duration-fast); }
.ideasets-dropdown-item:hover { background: var(--ideasets-bg-secondary); }

/* ==========================================================
   16. HERO COMPONENT
   ========================================================== */
.ideasets-hero { position: relative; width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ideasets-hero-media { position: absolute; inset: 0; z-index: 0; }
.ideasets-hero-media img,
.ideasets-hero-media video { width: 100%; height: 100%; object-fit: cover; }
.ideasets-hero-overlay { position: absolute; inset: 0; z-index: 1; background: var(--ideasets-overlay); }
.ideasets-hero-overlay-gradient { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 40%, transparent 60%, rgba(0,0,0,0.8) 100%); }
.ideasets-hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--ideasets-container-max); padding: 0 var(--ideasets-container-padding); color: var(--ideasets-white); }
.ideasets-hero-title { font-family: var(--ideasets-ff-display); font-size: var(--ideasets-fs-hero); font-weight: var(--ideasets-fw-black); line-height: var(--ideasets-lh-tight); letter-spacing: var(--ideasets-ls-tight); text-transform: uppercase; }
.ideasets-hero-subtitle { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-light); line-height: var(--ideasets-lh-normal); max-width: 640px; margin-top: var(--ideasets-space-lg); opacity: 0.8; }
.ideasets-hero-scroll-hint { position: absolute; bottom: var(--ideasets-space-xl); left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--ideasets-space-xs); color: var(--ideasets-white); animation: ideasets-bounce 2s infinite; }

/* ==========================================================
   17. BUTTON COMPONENTS
   ========================================================== */
.ideasets-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ideasets-space-sm); font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-semibold); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; padding: 16px 32px; border-radius: var(--ideasets-radius-full); transition: all var(--ideasets-duration-normal) var(--ideasets-ease-out); position: relative; overflow: hidden; }
.ideasets-btn-primary { background: var(--ideasets-text-primary); color: var(--ideasets-text-inverse); }
.ideasets-btn-primary:hover { transform: scale(1.03); box-shadow: var(--ideasets-shadow-md); }
.ideasets-btn-secondary { background: transparent; color: var(--ideasets-text-primary); border: 1px solid var(--ideasets-divider); }
.ideasets-btn-secondary:hover { background: var(--ideasets-text-primary); color: var(--ideasets-text-inverse); }
.ideasets-btn-ghost { background: transparent; color: var(--ideasets-text-primary); }
.ideasets-btn-ghost:hover { background: var(--ideasets-bg-secondary); }
.ideasets-btn-white { background: var(--ideasets-white); color: var(--ideasets-black); }
.ideasets-btn-white:hover { background: var(--ideasets-gray-100); transform: scale(1.03); }

.ideasets-btn-icon { width: 52px; height: 52px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.ideasets-btn-sm { padding: 10px 20px; font-size: var(--ideasets-fs-xs); }
.ideasets-btn-lg { padding: 20px 44px; font-size: var(--ideasets-fs-body); }

/* Magnetic Button Effect */
.ideasets-btn-magnetic { transition: transform var(--ideasets-duration-fast) var(--ideasets-ease-out); }

/* Button Arrow */
.ideasets-btn-arrow { display: inline-flex; align-items: center; gap: var(--ideasets-space-sm); }
.ideasets-btn-arrow svg,
.ideasets-btn-arrow .ideasets-arrow { transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-btn-arrow:hover svg,
.ideasets-btn-arrow:hover .ideasets-arrow { transform: translateX(4px); }

/* ==========================================================
   18. LINK COMPONENTS
   ========================================================== */
.ideasets-link { display: inline-flex; align-items: center; gap: var(--ideasets-space-sm); font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); border-bottom: 1px solid currentColor; padding-bottom: 2px; transition: opacity var(--ideasets-duration-fast); }
.ideasets-link:hover { opacity: 0.7; }

.ideasets-link-underline { position: relative; display: inline-block; }
.ideasets-link-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: currentColor; transition: width var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-link-underline:hover::after { width: 100%; }

.ideasets-link-arrow { display: inline-flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--ideasets-divider); padding-bottom: 4px; }
.ideasets-link-arrow svg { width: 16px; height: 16px; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-link-arrow:hover svg { transform: translateX(4px); }

/* ==========================================================
   19. CARD COMPONENTS
   ========================================================== */
.ideasets-card { background: var(--ideasets-bg-secondary); border-radius: var(--ideasets-radius-lg); overflow: hidden; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out), box-shadow var(--ideasets-duration-normal); }
.ideasets-card:hover { transform: translateY(-4px); box-shadow: var(--ideasets-shadow-lg); }
.ideasets-card-media { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.ideasets-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-card:hover .ideasets-card-media img { transform: scale(1.05); }
.ideasets-card-body { padding: var(--ideasets-space-md); }
.ideasets-card-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-snug); }
.ideasets-card-text { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); margin-top: var(--ideasets-space-xs); }

/* Card Dark */
.ideasets-card-dark { background: var(--ideasets-dark-card); color: var(--ideasets-white); }

/* Card Minimal */
.ideasets-card-minimal { background: transparent; border-radius: 0; }
.ideasets-card-minimal:hover { transform: none; box-shadow: none; }

/* ==========================================================
   20. PROJECT CARD COMPONENTS
   ========================================================== */
.ideasets-project-card { position: relative; display: flex; flex-direction: column; text-decoration: none; overflow: visible; cursor: pointer; }
.ideasets-project-card-media { position: relative; width: 100%; height: 50vh; overflow: hidden; mask: linear-gradient(90deg, transparent 0%, #000 0%); -webkit-mask: linear-gradient(90deg, transparent 0%, #000 0%); }
.ideasets-project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-slowest) var(--ideasets-ease-out); }
.ideasets-project-card:hover .ideasets-project-card-media img { transform: scale(1.08); }
.ideasets-project-card-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ideasets-project-card-info { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ideasets-space-lg); width: 100%; padding: var(--ideasets-space-lg) 0; }
.ideasets-project-card-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-semibold); transition: opacity var(--ideasets-duration-normal); }
.ideasets-project-card:hover .ideasets-project-card-title { opacity: 0.7; }
.ideasets-project-card-meta { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); color: var(--ideasets-text-secondary); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; }

/* Project List Layout */
.ideasets-project-list { display: flex; flex-direction: column; gap: var(--ideasets-space-2xl); }

/* ==========================================================
   21. ACCORDION COMPONENT
   ========================================================== */
.ideasets-accordion { width: 100%; }
.ideasets-accordion-item { border-bottom: 1px solid var(--ideasets-border-color); }
.ideasets-accordion-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--ideasets-space-md) 0; cursor: pointer; font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-medium); transition: opacity var(--ideasets-duration-fast); }
.ideasets-accordion-header:hover { opacity: 0.7; }
.ideasets-accordion-icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.ideasets-accordion-icon::before,
.ideasets-accordion-icon::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-accordion-icon::before { width: 16px; height: 2px; transform: translate(-50%, -50%); }
.ideasets-accordion-icon::after { width: 2px; height: 16px; transform: translate(-50%, -50%); }
.ideasets-accordion-item.is-open .ideasets-accordion-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.ideasets-accordion-body { max-height: 0; overflow: hidden; transition: max-height var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-accordion-body-inner { padding: 0 0 var(--ideasets-space-lg) 0; }
.ideasets-accordion-body-inner p { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-body); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-relaxed); max-width: 640px; }

/* ==========================================================
   22. STATS COMPONENT
   ========================================================== */
.ideasets-stats { display: flex; width: 100%; gap: var(--ideasets-space-2xl); }
.ideasets-stat { flex: 1; display: flex; flex-direction: column; gap: var(--ideasets-space-lg); height: 220px; position: relative; }
.ideasets-stat-divider { width: 100%; height: 1px; background: var(--ideasets-divider); }
.ideasets-stat-number { font-family: var(--ideasets-ff-display); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-black); line-height: 1; }
.ideasets-stat-number[data-counter] { font-variant-numeric: tabular-nums; }
.ideasets-stat-label { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }

/* ==========================================================
   23. MEDIA BLOCK COMPONENT
   ========================================================== */
.ideasets-media-block { position: relative; width: 100%; height: 80vh; overflow: hidden; }
.ideasets-media-block img,
.ideasets-media-block video { width: 100%; height: 100%; object-fit: cover; }
.ideasets-media-block-padded { padding: 0 var(--ideasets-container-padding); }
.ideasets-media-block-full { padding: 0; }

/* ==========================================================
   24. STICKY STACKED SECTIONS
   ========================================================== */
.ideasets-sticky-stack { position: relative; width: 100%; }
.ideasets-sticky-panel { position: sticky; top: 0; width: 100%; height: 100vh; overflow: hidden; }
.ideasets-sticky-panel-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ideasets-sticky-panel img,
.ideasets-sticky-panel video { width: 100%; height: 100%; object-fit: cover; }
.ideasets-sticky-panel-overlay { position: absolute; inset: 0; z-index: 1; }
.ideasets-sticky-panel-text { position: absolute; z-index: 2; padding: var(--ideasets-container-padding); }

/* Progress indicators for sticky sections */
.ideasets-sticky-progress { position: absolute; top: calc(50% - 25vh); left: 0; width: 10px; height: 50vh; z-index: 3; overflow: hidden; }

/* ==========================================================
   25. HORIZONTAL SCROLL SECTION
   ========================================================== */
.ideasets-horizontal-scroll { overflow: hidden; }
.ideasets-horizontal-scroll-track { display: flex; width: max-content; gap: var(--ideasets-space-lg); padding: var(--ideasets-space-lg) 0; }
.ideasets-horizontal-scroll-item { flex-shrink: 0; }

/* ==========================================================
   26. MARQUEE / SCROLLING TEXT
   ========================================================== */
.ideasets-marquee { width: 100%; overflow: hidden; white-space: nowrap; position: relative; }
.ideasets-marquee-track { display: inline-flex; animation: ideasets-marquee 20s linear infinite; }
.ideasets-marquee:hover .ideasets-marquee-track { animation-play-state: paused; }
.ideasets-marquee-item { display: inline-flex; align-items: center; gap: var(--ideasets-space-xl); padding: 0 var(--ideasets-space-xl); white-space: nowrap; }
.ideasets-marquee-text { font-family: var(--ideasets-ff-display); font-size: var(--ideasets-fs-7xl); font-weight: var(--ideasets-fw-black); text-transform: uppercase; line-height: 1; }
.ideasets-marquee-separator { width: 16px; height: 16px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.ideasets-marquee-reverse .ideasets-marquee-track { animation-direction: reverse; }
.ideasets-marquee-slow .ideasets-marquee-track { animation-duration: 40s; }
.ideasets-marquee-fast .ideasets-marquee-track { animation-duration: 10s; }

/* Outline text variant */
.ideasets-marquee-outline .ideasets-marquee-text { -webkit-text-stroke: 2px currentColor; -webkit-text-fill-color: transparent; }

/* ==========================================================
   27. LOGO GRID
   ========================================================== */
.ideasets-logo-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ideasets-space-2xl); width: 100%; }
.ideasets-logo-grid-item { flex: 1 1 calc(25% - var(--ideasets-space-2xl)); display: flex; align-items: center; justify-content: center; height: 147px; opacity: 0.5; filter: grayscale(100%); transition: opacity var(--ideasets-duration-normal), filter var(--ideasets-duration-normal); }
.ideasets-logo-grid-item:hover { opacity: 1; filter: grayscale(0%); }
.ideasets-logo-grid-item img,
.ideasets-logo-grid-item svg { max-height: 48px; max-width: 140px; object-fit: contain; }

/* ==========================================================
   28. FORM COMPONENTS
   ========================================================== */
.ideasets-form { display: flex; flex-direction: column; gap: var(--ideasets-space-md); width: 100%; }
.ideasets-form-group { display: flex; flex-direction: column; gap: var(--ideasets-space-xs); }
.ideasets-form-label { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); color: var(--ideasets-text-secondary); }
.ideasets-form-input { width: 100%; padding: 14px 16px; font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-body); background: transparent; border: 1px solid var(--ideasets-border-color); border-radius: var(--ideasets-radius-md); transition: border-color var(--ideasets-duration-fast), box-shadow var(--ideasets-duration-fast); outline: none; color: var(--ideasets-text-primary); }
.ideasets-form-input:focus { border-color: var(--ideasets-text-primary); box-shadow: 0 0 0 2px rgba(14, 16, 17, 0.1); }
.ideasets-form-input::placeholder { color: var(--ideasets-text-tertiary); }
.ideasets-form-textarea { min-height: 120px; resize: vertical; }
.ideasets-form-inline { display: flex; gap: var(--ideasets-space-sm); }
.ideasets-form-inline .ideasets-form-input { flex: 1; }

/* Input with bottom border only */
.ideasets-form-input-underline { border: none; border-bottom: 1px solid var(--ideasets-border-color); border-radius: 0; padding: 14px 0; }
.ideasets-form-input-underline:focus { border-bottom-color: var(--ideasets-text-primary); box-shadow: none; }

/* ==========================================================
   29. FOOTER COMPONENT
   ========================================================== */
.ideasets-footer { background: var(--ideasets-bg-inverse); color: var(--ideasets-text-inverse); padding: var(--ideasets-space-5xl) 0 var(--ideasets-space-xl); }
.ideasets-footer-top { display: flex; justify-content: space-between; gap: var(--ideasets-space-2xl); padding-bottom: var(--ideasets-space-3xl); }
.ideasets-footer-col { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); }
.ideasets-footer-col-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-semibold); text-transform: uppercase; letter-spacing: var(--ideasets-ls-wide); margin-bottom: var(--ideasets-space-sm); opacity: 0.5; }
.ideasets-footer-link { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); opacity: 0.7; transition: opacity var(--ideasets-duration-fast); }
.ideasets-footer-link:hover { opacity: 1; }
.ideasets-footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--ideasets-space-lg); border-top: 1px solid rgba(255, 255, 255, 0.15); }
.ideasets-footer-copyright { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-xs); opacity: 0.4; }
.ideasets-footer-social { display: flex; gap: var(--ideasets-space-md); }
.ideasets-footer-social a { opacity: 0.5; transition: opacity var(--ideasets-duration-fast); }
.ideasets-footer-social a:hover { opacity: 1; }

/* Footer CTA */
.ideasets-footer-cta { padding: var(--ideasets-space-5xl) 0; text-align: center; }
.ideasets-footer-cta-title { font-family: var(--ideasets-ff-display); font-size: var(--ideasets-fs-6xl); font-weight: var(--ideasets-fw-black); text-transform: uppercase; }

/* ==========================================================
   30. DIVIDERS & DECORATIVE ELEMENTS
   ========================================================== */
.ideasets-divider { width: 100%; height: 1px; background: var(--ideasets-divider); }
.ideasets-divider-thick { height: 2px; }
.ideasets-divider-fade { background: linear-gradient(to right, transparent, var(--ideasets-divider), transparent); }
.ideasets-divider-vertical { width: 1px; height: 100%; background: var(--ideasets-divider); }
.ideasets-divider-dashed { border: none; border-top: 1px dashed var(--ideasets-border-color); height: 0; }

/* ==========================================================
   31. CORNER DOTS
   ========================================================== */
.ideasets-corner-dot { position: absolute; width: var(--ideasets-corner-size); height: var(--ideasets-corner-size); border-radius: 50%; background: currentColor; z-index: 2; }
.ideasets-corner-dot-tl { top: var(--ideasets-corner-inset); left: var(--ideasets-corner-inset); }
.ideasets-corner-dot-tr { top: var(--ideasets-corner-inset); right: var(--ideasets-corner-inset); }
.ideasets-corner-dot-bl { bottom: var(--ideasets-corner-inset); left: var(--ideasets-corner-inset); }
.ideasets-corner-dot-br { bottom: var(--ideasets-corner-inset); right: var(--ideasets-corner-inset); }

/* All 4 corners shortcut */
.ideasets-corner-dots { position: relative; }
.ideasets-corner-dots::before,
.ideasets-corner-dots::after { content: ''; position: absolute; width: var(--ideasets-corner-size); height: var(--ideasets-corner-size); border-radius: 50%; background: currentColor; z-index: 2; }
.ideasets-corner-dots::before { top: var(--ideasets-corner-inset); left: var(--ideasets-corner-inset); }
.ideasets-corner-dots::after { top: var(--ideasets-corner-inset); right: var(--ideasets-corner-inset); }

/* ==========================================================
   32. LINE ACCENTS
   ========================================================== */
.ideasets-line-accent { position: absolute; background: currentColor; }
.ideasets-line-accent-left { top: 0; left: 0; width: 1px; height: 100%; }
.ideasets-line-accent-top { top: 0; left: 0; width: 100%; height: 1px; }
.ideasets-line-accent-animated { transform: scaleY(0); transform-origin: top; transition: transform var(--ideasets-duration-slowest) var(--ideasets-ease-out); }
.ideasets-line-accent-animated.is-visible { transform: scaleY(1); }
.ideasets-gradient-top { position: absolute; top: 0; left: 0; right: 0; height: 200px; pointer-events: none; }

/* ==========================================================
   33. IMAGE HOVER EFFECTS
   ========================================================== */
/* Zoom */
.ideasets-img-zoom { overflow: hidden; }
.ideasets-img-zoom img { transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-img-zoom:hover img { transform: scale(1.08); }

/* Shine Sweep */
.ideasets-img-shine { position: relative; overflow: hidden; }
.ideasets-img-shine::after { content: ''; position: absolute; top: -50%; left: -60%; width: 30%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent); transform: skewX(-20deg); transition: none; pointer-events: none; opacity: 0; }
.ideasets-img-shine:hover::after { opacity: 1; animation: ideasets-shine-sweep 0.6s ease forwards; }

/* Clip Reveal */
.ideasets-img-clip-reveal { overflow: hidden; }
.ideasets-img-clip-reveal img { clip-path: inset(0 100% 0 0); transition: clip-path var(--ideasets-duration-slowest) var(--ideasets-ease-out); }
.ideasets-img-clip-reveal.is-visible img,
.ideasets-img-clip-reveal:hover img { clip-path: inset(0 0 0 0); }

/* Tilt on hover */
.ideasets-img-tilt { transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-img-tilt:hover { transform: perspective(600px) rotateY(5deg) rotateX(3deg); }

/* Grayscale to color */
.ideasets-img-grayscale { filter: grayscale(100%); transition: filter var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-img-grayscale:hover { filter: grayscale(0%); }

/* Brightness on hover */
.ideasets-img-brighten img { transition: filter var(--ideasets-duration-normal); }
.ideasets-img-brighten:hover img { filter: brightness(1.15); }

/* Blur-to-clear reveal */
.ideasets-img-blur-reveal img { filter: blur(12px); opacity: 0.7; transition: filter var(--ideasets-duration-slowest) var(--ideasets-ease-out), opacity var(--ideasets-duration-slowest); }
.ideasets-img-blur-reveal.is-visible img { filter: blur(0); opacity: 1; }

/* ==========================================================
   34. TEXTURE OVERLAYS
   ========================================================== */
.ideasets-texture-noise { position: relative; }
.ideasets-texture-noise::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 200px 200px; }

.ideasets-texture-grain { position: relative; }
.ideasets-texture-grain::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.06; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='4' type='fractalNoise'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); animation: ideasets-grain 0.5s steps(6) infinite; }

.ideasets-texture-vignette { position: relative; }
.ideasets-texture-vignette::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%); }

/* ==========================================================
   35. TESTIMONIAL / QUOTE COMPONENT
   ========================================================== */
.ideasets-testimonial { display: flex; flex-direction: column; gap: var(--ideasets-space-lg); padding: var(--ideasets-space-xl); }
.ideasets-testimonial-text { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-light); font-style: italic; line-height: var(--ideasets-lh-relaxed); }
.ideasets-testimonial-author { display: flex; align-items: center; gap: var(--ideasets-space-sm); }
.ideasets-testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ideasets-testimonial-name { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-semibold); }
.ideasets-testimonial-role { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-xs); color: var(--ideasets-text-secondary); }

/* ==========================================================
   36. FEATURE / SERVICE CARD
   ========================================================== */
.ideasets-feature { display: flex; flex-direction: column; gap: var(--ideasets-space-md); padding: var(--ideasets-space-xl); }
.ideasets-feature-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--ideasets-radius-md); background: var(--ideasets-bg-secondary); }
.ideasets-feature-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-semibold); }
.ideasets-feature-text { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-relaxed); }

/* ==========================================================
   37. TABS COMPONENT
   ========================================================== */
.ideasets-tabs { display: flex; gap: var(--ideasets-space-xs); border-bottom: 1px solid var(--ideasets-border-color); }
.ideasets-tab { padding: var(--ideasets-space-sm) var(--ideasets-space-md); font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); color: var(--ideasets-text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ideasets-duration-fast), border-color var(--ideasets-duration-fast); cursor: pointer; }
.ideasets-tab:hover { color: var(--ideasets-text-primary); }
.ideasets-tab.is-active { color: var(--ideasets-text-primary); border-bottom-color: var(--ideasets-text-primary); }
.ideasets-tab-content { display: none; padding: var(--ideasets-space-lg) 0; }
.ideasets-tab-content.is-active { display: block; }

/* ==========================================================
   38. BADGE / TAG
   ========================================================== */
.ideasets-badge { display: inline-flex; align-items: center; padding: 4px 12px; font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; border-radius: var(--ideasets-radius-full); background: var(--ideasets-bg-secondary); color: var(--ideasets-text-primary); }
.ideasets-badge-outline { background: transparent; border: 1px solid var(--ideasets-border-color); }
.ideasets-badge-dark { background: var(--ideasets-bg-inverse); color: var(--ideasets-text-inverse); }

/* ==========================================================
   39. TOOLTIP
   ========================================================== */
.ideasets-tooltip { position: relative; }
.ideasets-tooltip::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); padding: 6px 12px; font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-xs); background: var(--ideasets-bg-inverse); color: var(--ideasets-text-inverse); border-radius: var(--ideasets-radius-sm); white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity var(--ideasets-duration-fast), transform var(--ideasets-duration-fast) var(--ideasets-ease-out), visibility var(--ideasets-duration-fast); pointer-events: none; z-index: var(--ideasets-z-dropdown); }
.ideasets-tooltip:hover::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* ==========================================================
   40. SKELETON / LOADING STATES
   ========================================================== */
.ideasets-skeleton { background: linear-gradient(90deg, var(--ideasets-bg-secondary) 25%, var(--ideasets-bg-tertiary) 50%, var(--ideasets-bg-secondary) 75%); background-size: 200% 100%; animation: ideasets-skeleton-loading 1.5s infinite; border-radius: var(--ideasets-radius-sm); }

/* ==========================================================
   41. OVERLAY / MODAL
   ========================================================== */
.ideasets-overlay { position: fixed; inset: 0; z-index: var(--ideasets-z-overlay); background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--ideasets-duration-normal), visibility var(--ideasets-duration-normal); }
.ideasets-overlay.is-open { opacity: 1; visibility: visible; }
.ideasets-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); z-index: var(--ideasets-z-modal); background: var(--ideasets-bg-primary); border-radius: var(--ideasets-radius-xl); padding: var(--ideasets-space-xl); max-width: 640px; width: calc(100% - var(--ideasets-space-xl)); max-height: calc(100vh - var(--ideasets-space-xl)); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity var(--ideasets-duration-normal) var(--ideasets-ease-out), transform var(--ideasets-duration-normal) var(--ideasets-ease-out), visibility var(--ideasets-duration-normal); }
.ideasets-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1); }

/* ==========================================================
   42. IMAGE GALLERY / LIGHTBOX TRIGGER
   ========================================================== */
.ideasets-gallery { display: grid; gap: var(--ideasets-space-sm); }
.ideasets-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.ideasets-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.ideasets-gallery-masonry { columns: 3; gap: var(--ideasets-space-sm); }
.ideasets-gallery-masonry .ideasets-gallery-item { break-inside: avoid; margin-bottom: var(--ideasets-space-sm); }
.ideasets-gallery-item { position: relative; overflow: hidden; border-radius: var(--ideasets-radius-md); cursor: pointer; }
.ideasets-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-gallery-item:hover img { transform: scale(1.06); }

/* ==========================================================
   43. COUNTER / NUMBER ANIMATION
   ========================================================== */
.ideasets-counter { font-variant-numeric: tabular-nums; }

/* ==========================================================
   44. SLIDESHOW / CAROUSEL
   ========================================================== */
.ideasets-slideshow { position: relative; width: 100%; overflow: hidden; }
.ideasets-slideshow-track { display: flex; transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-slideshow-slide { flex: 0 0 100%; width: 100%; position: relative; }
.ideasets-slideshow-slide img { width: 100%; height: 100%; object-fit: cover; }
.ideasets-slideshow-nav { position: absolute; bottom: var(--ideasets-space-lg); left: 50%; transform: translateX(-50%); display: flex; gap: var(--ideasets-space-sm); z-index: 2; }
.ideasets-slideshow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ideasets-white-40); border: none; cursor: pointer; transition: background var(--ideasets-duration-fast), transform var(--ideasets-duration-fast); }
.ideasets-slideshow-dot.is-active { background: var(--ideasets-white); transform: scale(1.2); }
.ideasets-slideshow-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.25); color: var(--ideasets-white); cursor: pointer; transition: background var(--ideasets-duration-fast), transform var(--ideasets-duration-fast); }
.ideasets-slideshow-arrow:hover { background: rgba(255,255,255,0.3); transform: translateY(-50%) scale(1.05); }
.ideasets-slideshow-arrow-prev { left: var(--ideasets-space-lg); }
.ideasets-slideshow-arrow-next { right: var(--ideasets-space-lg); }
.ideasets-slideshow-counter { position: absolute; top: var(--ideasets-space-lg); right: var(--ideasets-space-lg); z-index: 2; font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-sm); color: var(--ideasets-white); background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); padding: 6px 14px; border-radius: var(--ideasets-radius-full); }

/* ==========================================================
   44b. SERVICE CARD WITH BORDER (Intorida Pattern)
   ========================================================== */
.ideasets-service-card { display: flex; flex-direction: column; gap: var(--ideasets-space-md); padding: var(--ideasets-space-xl); border: 1px solid var(--ideasets-border-color); border-radius: var(--ideasets-radius-lg); transition: border-color var(--ideasets-duration-normal), background var(--ideasets-duration-normal), transform var(--ideasets-duration-normal); }
.ideasets-service-card:hover { border-color: var(--ideasets-text-primary); background: var(--ideasets-bg-secondary); transform: translateY(-4px); }
.ideasets-service-card-number { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); color: var(--ideasets-text-tertiary); letter-spacing: var(--ideasets-ls-wide); }
.ideasets-service-card-title { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-regular); }
.ideasets-service-card-text { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-relaxed); }

/* ==========================================================
   44c. ACCENT COLOR UTILITIES
   ========================================================== */
.ideasets-text-accent-gold { color: var(--ideasets-accent-gold); }
.ideasets-text-accent-blue { color: var(--ideasets-accent-blue); }
.ideasets-text-accent-green { color: var(--ideasets-accent-green); }
.ideasets-text-accent-orange { color: var(--ideasets-accent-orange); }
.ideasets-bg-accent-gold { background-color: var(--ideasets-accent-gold); }
.ideasets-bg-accent-blue { background-color: var(--ideasets-accent-blue); }
.ideasets-bg-accent-green { background-color: var(--ideasets-accent-green); }
.ideasets-bg-accent-orange { background-color: var(--ideasets-accent-orange); }
.ideasets-bg-warm { background-color: var(--ideasets-warm-white); }
.ideasets-bg-cream { background-color: var(--ideasets-warm-cream); }
.ideasets-bg-beige { background-color: var(--ideasets-warm-beige); }

/* ==========================================================
   44d. HORIZONTAL SCROLL SNAP
   ========================================================== */
.ideasets-snap-scroll { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ideasets-snap-scroll::-webkit-scrollbar { display: none; }
.ideasets-snap-item { scroll-snap-align: start; flex-shrink: 0; }

/* ==========================================================
   44e. SPLIT LAYOUT (Full-Width Image + Text Side-by-Side)
   ========================================================== */
.ideasets-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.ideasets-split-media { position: relative; overflow: hidden; }
.ideasets-split-media img { width: 100%; height: 100%; object-fit: cover; }
.ideasets-split-content { display: flex; flex-direction: column; justify-content: center; padding: var(--ideasets-space-3xl); }
.ideasets-split-reverse { direction: rtl; }
.ideasets-split-reverse > * { direction: ltr; }

/* ==========================================================
   44f. SCROLL-LINKED CLIP REVEAL (for large titles)
   ========================================================== */
.ideasets-clip-title { position: relative; overflow: hidden; }
.ideasets-clip-title-top { position: absolute; top: 0; left: 0; right: 0; opacity: 0; }
.ideasets-clip-title-bottom { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }

/* ==========================================================
   45. PARTIAL-UNDERLINE LINK (Ayano Pattern)
   ========================================================== */
.ideasets-link-partial { position: relative; display: inline-flex; flex-direction: column; gap: 2px; cursor: pointer; }
.ideasets-link-partial::after { content: ''; width: 33%; height: 1px; background: currentColor; transition: width var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-link-partial:hover::after { width: 100%; }

/* ==========================================================
   45b. SCROLL-DOWN INDICATOR (Ayano Pattern)
   ========================================================== */
.ideasets-scroll-indicator { display: flex; flex-direction: column; align-items: center; gap: var(--ideasets-space-xs); }
.ideasets-scroll-indicator-label { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; opacity: 0.6; }
.ideasets-scroll-indicator-bar { width: 30px; height: 9px; border-radius: var(--ideasets-radius-md); box-shadow: var(--ideasets-shadow-inset-border); overflow: hidden; }
.ideasets-scroll-indicator-fill { height: 100%; border-radius: var(--ideasets-radius-pill); background: currentColor; transition: width 0.3s linear; }

/* ==========================================================
   45c. PROCESS / STEPS COMPONENT (Greenly Pattern)
   ========================================================== */
.ideasets-process { display: flex; flex-direction: column; gap: var(--ideasets-space-2xl); counter-reset: ideasets-step; }
.ideasets-process-item { display: flex; gap: var(--ideasets-space-xl); align-items: flex-start; counter-increment: ideasets-step; }
.ideasets-process-number { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); font-weight: var(--ideasets-fw-medium); color: var(--ideasets-text-tertiary); letter-spacing: var(--ideasets-ls-wide); flex-shrink: 0; min-width: 48px; }
.ideasets-process-number::before { content: "(" counter(ideasets-step, decimal-leading-zero) ")"; }
.ideasets-process-content { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); }
.ideasets-process-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-semibold); }
.ideasets-process-text { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-body); }

/* Alternating layout */
.ideasets-process-alt { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ideasets-space-3xl); }
.ideasets-process-alt .ideasets-process-item:nth-child(even) { flex-direction: row-reverse; }

/* ==========================================================
   45d. STAR RATING (Greenly Pattern)
   ========================================================== */
.ideasets-rating { display: inline-flex; gap: 2px; }
.ideasets-rating-star { width: 16px; height: 16px; color: var(--ideasets-accent-gold); }
.ideasets-rating-star svg { width: 100%; height: 100%; fill: currentColor; }
.ideasets-rating-star-empty { opacity: 0.25; }
.ideasets-rating-lg .ideasets-rating-star { width: 20px; height: 20px; }

/* ==========================================================
   45e. BLOG CARD (Ayano + Greenly Pattern)
   ========================================================== */
.ideasets-blog-card { display: flex; flex-direction: column; gap: var(--ideasets-space-lg); text-decoration: none; cursor: pointer; }
.ideasets-blog-card-media { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: var(--ideasets-radius-15); }
.ideasets-blog-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-blog-card:hover .ideasets-blog-card-media img { transform: scale(1.05); }
.ideasets-blog-card-meta { display: flex; align-items: center; gap: var(--ideasets-space-sm); }
.ideasets-blog-card-tag { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; color: var(--ideasets-text-tertiary); }
.ideasets-blog-card-date { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-xs); color: var(--ideasets-text-tertiary); }
.ideasets-blog-card-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-snug); transition: opacity var(--ideasets-duration-fast); }
.ideasets-blog-card:hover .ideasets-blog-card-title { opacity: 0.7; }
.ideasets-blog-card-excerpt { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-body); }

/* Blog card landscape variant */
.ideasets-blog-card-landscape { flex-direction: row; }
.ideasets-blog-card-landscape .ideasets-blog-card-media { aspect-ratio: 16/10; flex: 0 0 45%; }

/* ==========================================================
   45f. VIDEO PLAY BUTTON (Greenly Pattern)
   ========================================================== */
.ideasets-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; width: 80px; height: 80px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid var(--ideasets-white-30); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out), background var(--ideasets-duration-normal); }
.ideasets-video-play:hover { transform: translate(-50%, -50%) scale(1.1); background: rgba(255, 255, 255, 0.25); }
.ideasets-video-play svg { width: 24px; height: 24px; color: var(--ideasets-white); margin-left: 3px; }
.ideasets-video-play-lg { width: 100px; height: 100px; }
.ideasets-video-play-lg svg { width: 32px; height: 32px; }

/* ==========================================================
   45g. CHECKLIST (Greenly Pattern)
   ========================================================== */
.ideasets-checklist { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); }
.ideasets-checklist-item { display: flex; align-items: center; gap: var(--ideasets-space-sm); font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-body); }
.ideasets-checklist-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ideasets-accent-green); }
.ideasets-checklist-icon svg { width: 100%; height: 100%; }

/* ==========================================================
   45h. FROSTED GLASS NAVBAR (Greenly Pattern)
   ========================================================== */
.ideasets-nav-frosted { position: fixed; top: 0; left: 0; right: 0; z-index: var(--ideasets-z-nav); background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--ideasets-white-15); padding: var(--ideasets-space-md) var(--ideasets-container-padding); display: flex; align-items: center; justify-content: space-between; transition: background var(--ideasets-duration-normal); }
[data-theme="dark"] .ideasets-nav-frosted { background: rgba(0, 0, 0, 0.3); }

/* ==========================================================
   45i. ROUNDED HERO (Ayano Pattern)
   ========================================================== */
.ideasets-hero-rounded { position: relative; width: 100%; min-height: 90vh; overflow: hidden; border-radius: var(--ideasets-radius-4xl); margin: var(--ideasets-space-sm); width: calc(100% - var(--ideasets-space-md) * 2); }
.ideasets-hero-rounded .ideasets-hero-media { position: absolute; inset: 0; }
.ideasets-hero-rounded .ideasets-hero-overlay-gradient { background: linear-gradient(192deg, rgba(0,0,0,0) -5%, rgba(0,0,0,0.8) 100%); }

/* ==========================================================
   45j. BACKDROP-FILTER UTILITIES
   ========================================================== */
.ideasets-blur-sm { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ideasets-blur-md { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ideasets-blur-lg { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ideasets-blur-xl { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* ==========================================================
   45k. CURSOR UTILITIES
   ========================================================== */
.ideasets-cursor-pointer { cursor: pointer; }
.ideasets-cursor-grab { cursor: grab; }
.ideasets-cursor-grab:active { cursor: grabbing; }
.ideasets-cursor-zoom { cursor: zoom-in; }
.ideasets-cursor-none { cursor: none; }

/* ==========================================================
   45l. ASPECT RATIO UTILITIES
   ========================================================== */
.ideasets-aspect-square { aspect-ratio: 1; }
.ideasets-aspect-video { aspect-ratio: 16 / 9; }
.ideasets-aspect-photo { aspect-ratio: 4 / 3; }
.ideasets-aspect-wide { aspect-ratio: 16 / 10; }
.ideasets-aspect-portrait { aspect-ratio: 3 / 4; }
.ideasets-aspect-tall { aspect-ratio: 2 / 3; }
.ideasets-aspect-ultrawide { aspect-ratio: 21 / 9; }

/* ==========================================================
   45m. PERSPECTIVE & 3D TRANSFORMS
   ========================================================== */
.ideasets-perspective { perspective: 1200px; }
.ideasets-perspective-sm { perspective: 600px; }
.ideasets-preserve-3d { transform-style: preserve-3d; }
.ideasets-backface-hidden { backface-visibility: hidden; }

/* ==========================================================
   45n. SUBTLE SCROLL REVEAL (Intorida — small offset)
   ========================================================== */
[data-reveal="subtle-up"] { transform: translateY(24px); }
[data-reveal="subtle-up"].is-visible { transform: translateY(0); }
[data-reveal="subtle-down"] { transform: translateY(-24px); }
[data-reveal="subtle-down"].is-visible { transform: translateY(0); }

/* ==========================================================
   45o. ERROR/VALIDATION STATES
   ========================================================== */
.ideasets-form-error .ideasets-form-input { border-color: var(--ideasets-accent-red); }
.ideasets-form-error-message { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-xs); color: var(--ideasets-accent-red); margin-top: var(--ideasets-space-xs); }
.ideasets-form-success .ideasets-form-input { border-color: var(--ideasets-accent-green-dark); }

/* ==========================================================
   46. RESPONSIVE BREAKPOINTS
   ========================================================== */

/* XL Desktop (Ayano 1600px+) */
@media (min-width: 1600px) {
  .ideasets-display-light { font-size: var(--ideasets-fs-7xl); }
  .ideasets-heading-light-xl { font-size: var(--ideasets-fs-4xl); }
  .ideasets-cta-display { font-size: var(--ideasets-fs-120); }
  .ideasets-display-editorial { font-size: var(--ideasets-fs-220); }
  .ideasets-display-mega { font-size: var(--ideasets-fs-300); }
}

/* Extra-Large Desktop (Refit 1528px) */
@media (max-width: 1527.98px) {
  .ideasets-display-editorial { font-size: var(--ideasets-fs-150); }
}

/* Large Desktop (1200-1599px) */
@media (max-width: 1599.98px) {
  .ideasets-display-light { font-size: var(--ideasets-fs-56); }
  .ideasets-cta-display { font-size: var(--ideasets-fs-108); }
}

/* Large Desktop Alt (Refit/Ambience 1440px) */
@media (max-width: 1439.98px) {
  .ideasets-display-editorial { font-size: var(--ideasets-fs-120); }
  .ideasets-display-mega { font-size: clamp(4rem, 12vw, 9.375rem); }
  .ideasets-display-forum { font-size: var(--ideasets-fs-5xl); }
}

/* Tablet (max 1199px) */
@media (max-width: 1199.98px) {
  :root {
    --ideasets-container-padding: 48px;
    --ideasets-section-padding: 128px;
    --ideasets-nav-inset: 48px;
    --ideasets-corner-inset: 48px;
  }
  .ideasets-display-lg { font-size: var(--ideasets-fs-5xl); }
  .ideasets-display-md { font-size: var(--ideasets-fs-4xl); }
  .ideasets-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ideasets-stats { flex-wrap: wrap; }
  .ideasets-stat { flex: 1 1 calc(50% - var(--ideasets-space-2xl)); }
  .ideasets-footer-top { flex-wrap: wrap; }
}

@media (max-width: 809.98px) {
  :root {
    --ideasets-container-padding: 24px;
    --ideasets-section-padding: 96px;
    --ideasets-nav-inset: 24px;
    --ideasets-corner-inset: 24px;
    --ideasets-col-padding: 16px;
  }
  .ideasets-display-xl { font-size: var(--ideasets-fs-4xl); }
  .ideasets-display-lg { font-size: var(--ideasets-fs-3xl); }
  .ideasets-display-md { font-size: var(--ideasets-fs-2xl); }
  .ideasets-heading-xl { font-size: var(--ideasets-fs-2xl); }
  .ideasets-heading-lg { font-size: var(--ideasets-fs-xl); }
  .ideasets-heading-md { font-size: var(--ideasets-fs-lg); }
  .ideasets-hero-title { font-size: var(--ideasets-fs-4xl); }
  .ideasets-marquee-text { font-size: var(--ideasets-fs-4xl); }
  .ideasets-grid-2,
  .ideasets-grid-3,
  .ideasets-grid-4 { grid-template-columns: 1fr; }
  .ideasets-row { flex-direction: column; }
  .ideasets-col,
  .ideasets-col-2,
  .ideasets-col-auto { flex: none; width: 100%; padding: 0; }
  .ideasets-stats { flex-direction: column; }
  .ideasets-stat { flex: none; width: 100%; height: auto; }
  .ideasets-media-block { height: 50vh; }
  .ideasets-media-block-padded { padding: 0 var(--ideasets-container-padding); }
  .ideasets-nav-links { display: none; }
  .ideasets-footer-top { flex-direction: column; }
  .ideasets-footer-bottom { flex-direction: column; gap: var(--ideasets-space-sm); text-align: center; }
  .ideasets-footer-cta-title { font-size: var(--ideasets-fs-3xl); }
  .ideasets-logo-grid-item { flex: 1 1 calc(50% - var(--ideasets-space-lg)); }
  .ideasets-gallery-masonry { columns: 2; }
  .ideasets-gallery-3 { grid-template-columns: repeat(2, 1fr); }
  .ideasets-split { grid-template-columns: 1fr; min-height: auto; }
  .ideasets-split-content { padding: var(--ideasets-space-xl) var(--ideasets-container-padding); }
  .ideasets-split-media { height: 50vh; }
  .ideasets-serif-display { font-size: var(--ideasets-fs-3xl); }
  .ideasets-serif-heading { font-size: var(--ideasets-fs-2xl); }
  .ideasets-display-alt { font-size: var(--ideasets-fs-3xl); }
  .ideasets-service-card { padding: var(--ideasets-space-lg); }
  .ideasets-display-light { font-size: var(--ideasets-fs-3xl); }
  .ideasets-heading-light-xl { font-size: var(--ideasets-fs-xl); }
  .ideasets-heading-light-lg { font-size: var(--ideasets-fs-lg); }
  .ideasets-cta-display { font-size: var(--ideasets-fs-4xl); }
  .ideasets-process-alt { grid-template-columns: 1fr; }
  .ideasets-blog-card-landscape { flex-direction: column; }
  .ideasets-blog-card-landscape .ideasets-blog-card-media { flex: none; }
  .ideasets-hero-rounded { border-radius: var(--ideasets-radius-2xl); margin: var(--ideasets-space-xs); width: calc(100% - var(--ideasets-space-xs) * 2); min-height: 70vh; }
  .ideasets-video-play { width: 64px; height: 64px; }
  .ideasets-video-play svg { width: 20px; height: 20px; }
  .ideasets-display-editorial { font-size: var(--ideasets-fs-5xl); }
  .ideasets-display-mega { font-size: clamp(3rem, 10vw, 6rem); }
  .ideasets-display-forum { font-size: var(--ideasets-fs-3xl); }
  .ideasets-display-script { font-size: var(--ideasets-fs-3xl); }
  .ideasets-display-jost { font-size: var(--ideasets-fs-2xl); }
  .ideasets-stepper::before { left: 16px; }
  .ideasets-stepper-dot { width: 32px; height: 32px; }
  .ideasets-horizontal-gallery { padding: var(--ideasets-space-md) var(--ideasets-container-padding); }
  .ideasets-stat-card { padding: var(--ideasets-space-lg); }
  .ideasets-stat-card-number { font-size: var(--ideasets-fs-3xl); }
}

/* Mid Tablet (Ambience/Refit 1054px) */
@media (max-width: 1053.98px) {
  .ideasets-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .ideasets-property-card-body { padding: var(--ideasets-space-md); }
  .ideasets-stepper { gap: 0; }
}

/* Tablet Alt (Greenly/Intorida 768px) */
@media (max-width: 767.98px) {
  .ideasets-container-tight { padding: 0 20px; }
  .ideasets-newsletter { flex-direction: column; }
  .ideasets-reservation-form { grid-template-columns: 1fr; }
  .ideasets-ticker-item { font-size: var(--ideasets-fs-body); }
  .ideasets-image-selector-thumb { flex: 0 0 60px; height: 45px; }
}

/* Small Mobile (Ambience/Refit 639px) */
@media (max-width: 639.98px) {
  .ideasets-display-forum { font-size: var(--ideasets-fs-2xl); }
  .ideasets-display-jost { font-size: var(--ideasets-fs-xl); }
  .ideasets-display-script { font-size: var(--ideasets-fs-2xl); }
  .ideasets-room-card-body { padding: var(--ideasets-space-md); }
  .ideasets-search-bar { flex-direction: column; border-radius: var(--ideasets-radius-xl); }
  .ideasets-menu-overlay-link { font-size: var(--ideasets-fs-2xl); }
}

@media (max-width: 479.98px) {
  :root {
    --ideasets-container-padding: 16px;
    --ideasets-section-padding: 64px;
    --ideasets-nav-inset: 16px;
    --ideasets-corner-inset: 16px;
  }
  .ideasets-hero-title { font-size: var(--ideasets-fs-3xl); }
  .ideasets-marquee-text { font-size: var(--ideasets-fs-3xl); }
  .ideasets-btn-lg { padding: 16px 32px; }
  .ideasets-gallery-2,
  .ideasets-gallery-3 { grid-template-columns: 1fr; }
  .ideasets-gallery-masonry { columns: 1; }
  .ideasets-logo-grid-item { flex: 1 1 100%; }
  .ideasets-display-editorial { font-size: var(--ideasets-fs-3xl); }
  .ideasets-display-mega { font-size: var(--ideasets-fs-4xl); }
}

/* ==========================================================
   46. KEYFRAME ANIMATIONS
   ========================================================== */
@keyframes ideasets-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes ideasets-transition-enter {
  0% { transform: scaleY(0); transform-origin: bottom; }
  100% { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes ideasets-transition-leave {
  0% { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: top; }
}

@keyframes ideasets-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

@keyframes ideasets-shine-sweep {
  0% { left: -60%; opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

@keyframes ideasets-grain {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2%, -2%); }
  20% { transform: translate(2%, 2%); }
  30% { transform: translate(-1%, 1%); }
  40% { transform: translate(1%, -1%); }
  50% { transform: translate(-2%, 2%); }
  60% { transform: translate(2%, -2%); }
  70% { transform: translate(-1%, -1%); }
  80% { transform: translate(1%, 1%); }
  90% { transform: translate(-2%, -1%); }
}

@keyframes ideasets-skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes ideasets-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ideasets-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes ideasets-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes ideasets-fade-in-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes ideasets-fade-in-down {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes ideasets-scale-in {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes ideasets-slide-in-left {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(0); }
}

@keyframes ideasets-slide-in-right {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes ideasets-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ==========================================================
   47. UTILITY ANIMATIONS
   ========================================================== */
.ideasets-animate-fade-in { animation: ideasets-fade-in var(--ideasets-duration-slow) var(--ideasets-ease-out) both; }
.ideasets-animate-fade-in-up { animation: ideasets-fade-in-up var(--ideasets-duration-slow) var(--ideasets-ease-out) both; }
.ideasets-animate-fade-in-down { animation: ideasets-fade-in-down var(--ideasets-duration-slow) var(--ideasets-ease-out) both; }
.ideasets-animate-scale-in { animation: ideasets-scale-in var(--ideasets-duration-slow) var(--ideasets-ease-out) both; }
.ideasets-animate-spin { animation: ideasets-spin 1s linear infinite; }

/* ==========================================================
   48. LENIS SMOOTH SCROLL (Kokoro Pattern)
   ========================================================== */
.lenis-scrolling iframe { pointer-events: none; }

/* ==========================================================
   49. NAVY THEME (Lorunse Pattern)
   ========================================================== */
[data-theme="navy"] {
  --ideasets-bg-primary: var(--ideasets-dark-navy);
  --ideasets-bg-secondary: #0f1d38;
  --ideasets-bg-tertiary: #142544;
  --ideasets-bg-inverse: var(--ideasets-warm-white);
  --ideasets-text-primary: var(--ideasets-warm-white);
  --ideasets-text-secondary: var(--ideasets-white-70);
  --ideasets-text-tertiary: var(--ideasets-white-50);
  --ideasets-text-inverse: var(--ideasets-dark-navy);
  --ideasets-border-color: var(--ideasets-white-14);
  --ideasets-divider: var(--ideasets-white-14);
  --ideasets-selection-bg: var(--ideasets-accent-terra);
  --ideasets-selection-color: #fff;
}

/* Teal Theme (Ambience Pattern) */
[data-theme="teal"] {
  --ideasets-bg-primary: #f5f5f5;
  --ideasets-bg-secondary: #eee;
  --ideasets-bg-tertiary: #e0e0e0;
  --ideasets-bg-inverse: var(--ideasets-accent-teal);
  --ideasets-text-primary: #212121;
  --ideasets-text-secondary: #636363;
  --ideasets-text-tertiary: #999;
  --ideasets-text-inverse: #fff;
  --ideasets-border-color: rgba(33, 33, 33, 0.12);
  --ideasets-divider: #212121;
  --ideasets-selection-bg: var(--ideasets-accent-teal);
  --ideasets-selection-color: #fff;
}

/* ==========================================================
   50. MEGA DISPLAY TYPOGRAPHY (Kokoro/Lorunse Pattern)
   ========================================================== */
.ideasets-display-mega {
  font-size: var(--ideasets-fs-mega);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-crush);
  letter-spacing: var(--ideasets-ls-extreme);
}
.ideasets-display-editorial {
  font-family: var(--ideasets-ff-marcellus);
  font-size: var(--ideasets-fs-190);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-crush);
  letter-spacing: var(--ideasets-ls-extreme);
}
.ideasets-display-script {
  font-family: var(--ideasets-ff-script);
  font-size: var(--ideasets-fs-6xl);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-snug);
}
.ideasets-display-forum {
  font-family: var(--ideasets-ff-forum);
  font-size: var(--ideasets-fs-6xl);
  font-weight: var(--ideasets-fw-regular);
  line-height: var(--ideasets-lh-tight);
}
.ideasets-display-jost {
  font-family: var(--ideasets-ff-jost);
  font-size: var(--ideasets-fs-5xl);
  font-weight: var(--ideasets-fw-medium);
  line-height: var(--ideasets-lh-snug);
}

/* ==========================================================
   51. FROSTED GLASS BUTTON (Refit Pattern)
   ========================================================== */
.ideasets-btn-glass { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--ideasets-white-14); color: var(--ideasets-white); transition: all var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-btn-glass:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.03); }

/* ==========================================================
   52. FULL-SCREEN MENU OVERLAY (Refit/Archform Pattern)
   ========================================================== */
.ideasets-menu-overlay { position: fixed; inset: 0; z-index: var(--ideasets-z-overlay); background: var(--ideasets-bg-inverse); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--ideasets-space-lg); opacity: 0; visibility: hidden; transform: translateY(-100%); transition: opacity var(--ideasets-duration-slow) var(--ideasets-ease-out), visibility var(--ideasets-duration-slow), transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-menu-overlay.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ideasets-menu-overlay-link { font-family: var(--ideasets-ff-display); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-bold); color: var(--ideasets-text-inverse); text-transform: uppercase; transition: opacity var(--ideasets-duration-fast); }
.ideasets-menu-overlay-link:hover { opacity: 0.5; }

/* ==========================================================
   53. PROPERTY CARD (Eastalio Pattern)
   ========================================================== */
.ideasets-property-card { display: flex; flex-direction: column; border-radius: var(--ideasets-radius-xl); overflow: hidden; background: var(--ideasets-bg-secondary); transition: transform var(--ideasets-duration-normal), box-shadow var(--ideasets-duration-normal); }
.ideasets-property-card:hover { transform: translateY(-6px); box-shadow: var(--ideasets-shadow-card); }
.ideasets-property-card-media { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.ideasets-property-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-property-card:hover .ideasets-property-card-media img { transform: scale(1.05); }
.ideasets-property-card-body { padding: var(--ideasets-space-lg); display: flex; flex-direction: column; gap: var(--ideasets-space-sm); }
.ideasets-property-card-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-semibold); }
.ideasets-property-card-meta { display: flex; gap: var(--ideasets-space-md); font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }
.ideasets-property-card-price { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-bold); }
.ideasets-property-card-badge { position: absolute; top: var(--ideasets-space-sm); left: var(--ideasets-space-sm); z-index: 1; }

/* ==========================================================
   54. SEARCH BAR (Eastalio Pattern)
   ========================================================== */
.ideasets-search-bar { display: flex; align-items: center; gap: var(--ideasets-space-sm); background: var(--ideasets-bg-primary); border: 1px solid var(--ideasets-border-color); border-radius: var(--ideasets-radius-full); padding: var(--ideasets-space-sm) var(--ideasets-space-lg); box-shadow: var(--ideasets-shadow-sm); transition: box-shadow var(--ideasets-duration-fast); }
.ideasets-search-bar:focus-within { box-shadow: var(--ideasets-shadow-md); }
.ideasets-search-bar input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-body); color: var(--ideasets-text-primary); }
.ideasets-search-bar input::placeholder { color: var(--ideasets-text-tertiary); }
.ideasets-search-bar-icon { width: 20px; height: 20px; color: var(--ideasets-text-tertiary); flex-shrink: 0; }

/* ==========================================================
   55. HOW-IT-WORKS STEPPER (Eastalio Pattern)
   ========================================================== */
.ideasets-stepper { display: flex; flex-direction: column; gap: 0; position: relative; }
.ideasets-stepper::before { content: ''; position: absolute; left: 20px; top: 0; bottom: 0; width: 2px; background: var(--ideasets-border-color); }
.ideasets-stepper-item { display: flex; gap: var(--ideasets-space-lg); align-items: flex-start; padding: var(--ideasets-space-lg) 0; position: relative; }
.ideasets-stepper-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--ideasets-bg-primary); border: 2px solid var(--ideasets-text-primary); display: flex; align-items: center; justify-content: center; font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-bold); flex-shrink: 0; z-index: 1; }
.ideasets-stepper-content { display: flex; flex-direction: column; gap: var(--ideasets-space-xs); }
.ideasets-stepper-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-semibold); }
.ideasets-stepper-text { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   56. TESTIMONIAL CAROUSEL WITH ARROWS (Refit/Royal Pattern)
   ========================================================== */
.ideasets-testimonial-carousel { position: relative; overflow: hidden; }
.ideasets-testimonial-track { display: flex; transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-testimonial-slide { flex: 0 0 100%; padding: 0 var(--ideasets-space-xl); }
.ideasets-testimonial-carousel .ideasets-slideshow-arrow { top: 40%; }

/* ==========================================================
   57. NEWSLETTER FORM (Refit/Royal Pattern)
   ========================================================== */
.ideasets-newsletter { display: flex; gap: var(--ideasets-space-sm); max-width: 500px; }
.ideasets-newsletter input { flex: 1; padding: 14px 20px; border: 1px solid var(--ideasets-border-color); border-radius: var(--ideasets-radius-full); background: transparent; font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-body); color: var(--ideasets-text-primary); outline: none; transition: border-color var(--ideasets-duration-fast); }
.ideasets-newsletter input:focus { border-color: var(--ideasets-text-primary); }
.ideasets-newsletter input::placeholder { color: var(--ideasets-text-tertiary); }
.ideasets-newsletter button { flex-shrink: 0; }

/* ==========================================================
   58. VIDEO AUTOPLAY SECTION (Eastalio Pattern)
   ========================================================== */
.ideasets-video-section { position: relative; width: 100%; overflow: hidden; }
.ideasets-video-section video { width: 100%; height: 100%; object-fit: cover; }
.ideasets-video-section-overlay { position: absolute; inset: 0; background: var(--ideasets-overlay); display: flex; align-items: center; justify-content: center; }

/* ==========================================================
   59. 3D ACCORDION (Archform Pattern)
   ========================================================== */
.ideasets-accordion-3d .ideasets-accordion-item { perspective: 1000px; }
.ideasets-accordion-3d .ideasets-accordion-body-inner { transform-origin: top; transform: rotateX(-10deg); opacity: 0; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out), opacity var(--ideasets-duration-normal); }
.ideasets-accordion-3d .ideasets-accordion-item.is-open .ideasets-accordion-body-inner { transform: rotateX(0); opacity: 1; }

/* ==========================================================
   60. GRADIENT TEXT (Archform Pattern)
   ========================================================== */
.ideasets-gradient-text { background: linear-gradient(135deg, var(--ideasets-text-primary), var(--ideasets-accent-teal)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ideasets-gradient-text-gold { background: linear-gradient(135deg, var(--ideasets-accent-gold), var(--ideasets-accent-gold-deep)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ideasets-gradient-text-warm { background: linear-gradient(135deg, var(--ideasets-accent-terra), var(--ideasets-accent-gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ==========================================================
   61. PER-ELEMENT SELECTION COLORS (Archform Pattern)
   ========================================================== */
.ideasets-selection-gold ::selection { background: var(--ideasets-accent-gold); color: #fff; }
.ideasets-selection-teal ::selection { background: var(--ideasets-accent-teal); color: #fff; }
.ideasets-selection-navy ::selection { background: var(--ideasets-dark-navy); color: #fff; }

/* ==========================================================
   62. MASK GRADIENT (Horizontal/Vertical Fade)
   ========================================================== */
.ideasets-mask-fade-right { mask-image: linear-gradient(to right, #000 80%, transparent 100%); -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%); }
.ideasets-mask-fade-left { mask-image: linear-gradient(to left, #000 80%, transparent 100%); -webkit-mask-image: linear-gradient(to left, #000 80%, transparent 100%); }
.ideasets-mask-fade-bottom { mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.ideasets-mask-fade-both { mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }

/* ==========================================================
   63. IMAGE FILTER EFFECTS (Refit/Kokoro/Mirel)
   ========================================================== */
.ideasets-img-darken { filter: brightness(0.6); transition: filter var(--ideasets-duration-normal); }
.ideasets-img-darken-heavy { filter: brightness(0.4); transition: filter var(--ideasets-duration-normal); }
.ideasets-img-darken:hover, .ideasets-img-darken-heavy:hover { filter: brightness(0.8); }
.ideasets-img-hue-rotate { transition: filter var(--ideasets-duration-slow); }
.ideasets-img-hue-rotate:hover { filter: hue-rotate(60deg); }

/* ==========================================================
   64. DASHED BORDER FORM (Mirel Pattern)
   ========================================================== */
.ideasets-form-input-dashed { border: 1px dashed var(--ideasets-border-color); border-radius: var(--ideasets-radius-pill); padding: 22px 20px; font-weight: var(--ideasets-fw-light); transition: all 0.3s var(--ideasets-ease-in-out-alt); }
.ideasets-form-input-dashed:focus { border-style: solid; border-width: 2px; border-color: var(--ideasets-text-primary); }
.ideasets-form-input-dashed::placeholder { color: var(--ideasets-white-50); }

/* ==========================================================
   65. STATS CARD WITH BORDER (Mirel Pattern)
   ========================================================== */
.ideasets-stat-card { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); padding: var(--ideasets-space-xl); border: 1px solid var(--ideasets-border-color); border-radius: var(--ideasets-radius-lg); text-align: center; }
.ideasets-stat-card-number { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-bold); line-height: var(--ideasets-lh-none); }
.ideasets-stat-card-label { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }

/* ==========================================================
   66. TICKER / BRAND STRIP (Lorunse Pattern)
   ========================================================== */
.ideasets-ticker { width: 100%; overflow: hidden; white-space: nowrap; padding: var(--ideasets-space-md) 0; border-top: 1px solid var(--ideasets-border-color); border-bottom: 1px solid var(--ideasets-border-color); }
.ideasets-ticker-track { display: inline-flex; animation: ideasets-marquee 30s linear infinite; }
.ideasets-ticker-item { display: inline-flex; align-items: center; gap: var(--ideasets-space-xl); padding: 0 var(--ideasets-space-xl); font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-medium); text-transform: uppercase; letter-spacing: var(--ideasets-ls-wide); }
.ideasets-ticker-separator { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.3; flex-shrink: 0; }

/* ==========================================================
   67. ROOM / PRICING CARD (Lorunse Pattern)
   ========================================================== */
.ideasets-room-card { display: flex; flex-direction: column; border-radius: var(--ideasets-radius-xl); overflow: hidden; background: var(--ideasets-bg-secondary); }
.ideasets-room-card-media { position: relative; overflow: hidden; aspect-ratio: 4/3; }
.ideasets-room-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-room-card:hover .ideasets-room-card-media img { transform: scale(1.05); }
.ideasets-room-card-body { padding: var(--ideasets-space-lg); display: flex; flex-direction: column; gap: var(--ideasets-space-md); }
.ideasets-room-card-title { font-family: var(--ideasets-ff-forum); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-regular); }
.ideasets-room-card-facilities { display: flex; gap: var(--ideasets-space-md); font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }
.ideasets-room-card-price { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-bold); }
.ideasets-room-card-price span { font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-regular); color: var(--ideasets-text-secondary); }

/* ==========================================================
   68. RESERVATION / BOOKING FORM (Lorunse Pattern)
   ========================================================== */
.ideasets-reservation-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ideasets-space-md); max-width: 620px; }
.ideasets-reservation-form .ideasets-form-input { padding: 22px 20px; background: transparent; border: 1px solid var(--ideasets-white-14); border-radius: var(--ideasets-radius-md); color: var(--ideasets-white); transition: all 0.3s var(--ideasets-ease-in-out-alt); }
.ideasets-reservation-form .ideasets-form-input:focus { border-color: var(--ideasets-white-50); }
.ideasets-reservation-form .ideasets-form-input::placeholder { color: var(--ideasets-white-50); }

/* ==========================================================
   69. IMAGE SELECTOR / THUMBNAIL STRIP (Royal Pattern)
   ========================================================== */
.ideasets-image-selector { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); }
.ideasets-image-selector-main { position: relative; overflow: hidden; border-radius: var(--ideasets-radius-xl); aspect-ratio: 16/10; }
.ideasets-image-selector-main img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--ideasets-duration-normal); }
.ideasets-image-selector-strip { display: flex; gap: var(--ideasets-space-xs); overflow-x: auto; scrollbar-width: none; }
.ideasets-image-selector-strip::-webkit-scrollbar { display: none; }
.ideasets-image-selector-thumb { flex: 0 0 80px; height: 60px; border-radius: var(--ideasets-radius-md); overflow: hidden; cursor: pointer; opacity: 0.5; border: 2px solid transparent; transition: opacity var(--ideasets-duration-fast), border-color var(--ideasets-duration-fast); }
.ideasets-image-selector-thumb.is-active, .ideasets-image-selector-thumb:hover { opacity: 1; border-color: var(--ideasets-text-primary); }
.ideasets-image-selector-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   70. HORIZONTAL IMAGE SLIDE (Kokoro Pattern)
   ========================================================== */
.ideasets-horizontal-gallery { display: flex; gap: var(--ideasets-space-md); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: var(--ideasets-space-lg) 0; }
.ideasets-horizontal-gallery::-webkit-scrollbar { display: none; }
.ideasets-horizontal-gallery-item { flex: 0 0 auto; scroll-snap-align: start; border-radius: var(--ideasets-radius-lg); overflow: hidden; }

/* ==========================================================
   71. ROTATING TEXT (Kokoro Pattern)
   ========================================================== */
.ideasets-rotate-text { position: relative; width: 120px; height: 120px; animation: ideasets-spin 12s linear infinite; }
.ideasets-rotate-text-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ideasets-rotate-text svg text { font-family: var(--ideasets-ff-mono); font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; }

/* ==========================================================
   72. GRADIENT OVERLAYS (Multi-direction)
   ========================================================== */
.ideasets-overlay-gradient-bottom { background: linear-gradient(0deg, var(--ideasets-black-90) 0%, transparent 100%); }
.ideasets-overlay-gradient-top { background: linear-gradient(180deg, var(--ideasets-black-90) 0%, transparent 100%); }
.ideasets-overlay-gradient-angled { background: linear-gradient(248deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); }
.ideasets-overlay-gradient-uniform { background: rgba(0,0,0,0.5); }

/* ==========================================================
   73. LINK HOVER UNDERLINE OFFSET (Lorunse Pattern)
   ========================================================== */
.ideasets-link-hover-underline { text-decoration: none; transition: text-decoration var(--ideasets-duration-fast); }
.ideasets-link-hover-underline:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================
   74. POP-IN ANIMATION
   ========================================================== */
[data-reveal="pop"] { transform: scale(0); opacity: 0; }
[data-reveal="pop"].is-visible { transform: scale(1); opacity: 1; }

/* ==========================================================
   75. ADDITIONAL CONTAINER VARIANTS
   ========================================================== */
.ideasets-container-xlarge { width: 100%; max-width: var(--ideasets-container-xlarge); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-1300 { width: 100%; max-width: var(--ideasets-container-1300); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-narrow { width: 100%; max-width: var(--ideasets-container-narrow); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-text { width: 100%; max-width: var(--ideasets-container-text); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }

/* ==========================================================
   76. ADDITIONAL BLUR UTILITIES
   ========================================================== */
.ideasets-blur-2xl { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ideasets-blur-3xl { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }

/* ==========================================================
   77. HALFPIXEL BORDER / HAIRLINE
   ========================================================== */
.ideasets-border-hairline { border-width: 0.5px; }
.ideasets-border-inset { box-shadow: inset 0px 0px 0px 1px var(--ideasets-border-color); }

/* ==========================================================
   78. ADDITIONAL ASPECT RATIOS
   ========================================================== */
.ideasets-aspect-3x4 { aspect-ratio: 3/4; }
.ideasets-aspect-cinema { aspect-ratio: 2.35/1; }
.ideasets-aspect-golden { aspect-ratio: 1.618/1; }

.ideasets-animate-pulse { animation: ideasets-pulse 2s ease-in-out infinite; }
.ideasets-animate-float { animation: ideasets-float 3s ease-in-out infinite; }

/* ==========================================================
   79. SUPERELLIPSE CORNERS (Buildaxa Pattern)
   ========================================================== */
.ideasets-corner-super { corner-shape: superellipse(2); }
.ideasets-corner-super-soft { corner-shape: superellipse(1); }

/* ==========================================================
   80. 3D PERSPECTIVE CAROUSEL (Lithos Pattern)
   ========================================================== */
.ideasets-carousel-3d { position: relative; perspective: 1200px; min-height: 60vh; overflow: hidden; }
.ideasets-carousel-3d-track { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; }
.ideasets-carousel-3d-item { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) translate3d(0, 0, -1200px) scale(0.7); opacity: 0; pointer-events: none; transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; will-change: transform, opacity; }
.ideasets-carousel-3d-item.is-center { transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1); opacity: 1; z-index: 3; pointer-events: auto; }
.ideasets-carousel-3d-item.is-left-1 { transform: translate(-50%, -50%) translate3d(-320px, 0, -200px) scale(0.85); opacity: 0.7; z-index: 2; pointer-events: auto; }
.ideasets-carousel-3d-item.is-right-1 { transform: translate(-50%, -50%) translate3d(320px, 0, -200px) scale(0.85); opacity: 0.7; z-index: 2; pointer-events: auto; }
.ideasets-carousel-3d-item.is-left-2 { transform: translate(-50%, -50%) translate3d(-560px, 0, -400px) scale(0.7); opacity: 0.4; z-index: 1; }
.ideasets-carousel-3d-item.is-right-2 { transform: translate(-50%, -50%) translate3d(560px, 0, -400px) scale(0.7); opacity: 0.4; z-index: 1; }
.ideasets-carousel-3d-item.is-hidden { transform: translate(-50%, -50%) translate3d(0, 0, -800px) scale(0.6); opacity: 0; z-index: 0; pointer-events: none; }
.ideasets-carousel-3d-arrows { position: absolute; bottom: var(--ideasets-space-lg); left: 50%; transform: translateX(-50%); display: flex; gap: var(--ideasets-space-sm); z-index: 5; }
.ideasets-carousel-3d-arrow { width: 48px; height: 48px; border-radius: 50%; border: none; background: var(--ideasets-white-15); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; transition: background var(--ideasets-duration-fast); }
.ideasets-carousel-3d-arrow:hover { background: var(--ideasets-white-30); }
.ideasets-carousel-3d-arrow.is-flipped svg { transform: scaleX(-1); }

/* ==========================================================
   81. DRAGGABLE HORIZONTAL CAROUSEL (Lithos Pattern)
   ========================================================== */
.ideasets-drag-carousel { display: flex; gap: var(--ideasets-space-md); overflow-x: auto; cursor: grab; -webkit-overflow-scrolling: touch; scrollbar-width: none; user-select: none; }
.ideasets-drag-carousel::-webkit-scrollbar { display: none; }
.ideasets-drag-carousel:active { cursor: grabbing; }
.ideasets-drag-carousel-item { flex: 0 0 auto; overflow: hidden; border-radius: var(--ideasets-radius-lg); }
.ideasets-drag-carousel-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ==========================================================
   82. FIELDSET PAGE INDICATOR (Lithos Pattern)
   ========================================================== */
.ideasets-page-indicator { display: flex; gap: 6px; align-items: center; justify-content: center; padding: var(--ideasets-space-sm) 0; }
.ideasets-page-indicator-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ideasets-near-black-1a-10); transition: background var(--ideasets-duration-fast); }
.ideasets-page-indicator-dot.is-active { background: var(--ideasets-near-black-1a); }

/* ==========================================================
   83. DOTTED UNDERLINE HOVER LINK (Lithos Pattern)
   ========================================================== */
.ideasets-link-dotted { text-decoration: none; transition: color 0.4s var(--ideasets-ease-hover-color); }
.ideasets-link-dotted:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* ==========================================================
   84. LOGO LOADER OVERLAY (Lithos Pattern)
   ========================================================== */
.ideasets-logo-loader { position: fixed; inset: 0; z-index: var(--ideasets-z-preloader); display: flex; align-items: center; justify-content: center; background: var(--ideasets-bg-primary); opacity: 1; transition: opacity var(--ideasets-duration-slow) var(--ideasets-ease-out); pointer-events: all; }
.ideasets-logo-loader.is-hidden { opacity: 0; pointer-events: none; }
.ideasets-logo-loader-spinner { width: 32px; height: 32px; border: 2px solid var(--ideasets-near-black-1a-10); border-top-color: var(--ideasets-near-black-1a); border-radius: 50%; animation: ideasets-spin 800ms linear infinite; }

/* ==========================================================
   85. LINKED CARD GRID WITH HIGHLIGHT (Lithos Pattern)
   ========================================================== */
.ideasets-linked-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ideasets-space-md); }
.ideasets-linked-card { position: relative; overflow: hidden; border-radius: var(--ideasets-radius-lg); border: 1px solid var(--ideasets-border-color); transition: border-color var(--ideasets-duration-normal) var(--ideasets-ease-in-out-alt); }
.ideasets-linked-card:hover { border-color: var(--ideasets-text-primary); }
.ideasets-linked-card-media { aspect-ratio: 4/3; overflow: hidden; }
.ideasets-linked-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-slow); }
.ideasets-linked-card:hover .ideasets-linked-card-media img { transform: scale(1.05); }
.ideasets-linked-card-body { padding: var(--ideasets-space-md); }

/* ==========================================================
   86. AWARDS LIST (Lithos Pattern)
   ========================================================== */
.ideasets-awards-list { display: flex; flex-direction: column; gap: var(--ideasets-space-md); }
.ideasets-award-item { display: flex; align-items: center; gap: var(--ideasets-space-lg); padding: var(--ideasets-space-md) 0; border-bottom: 1px solid var(--ideasets-border-color); }
.ideasets-award-year { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-tertiary); letter-spacing: var(--ideasets-ls-wide); min-width: 60px; flex-shrink: 0; }
.ideasets-award-name { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-medium); }

/* ==========================================================
   87. ARTICLE CARD WITH AUTHOR (Lithos Pattern)
   ========================================================== */
.ideasets-article-card { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); }
.ideasets-article-card-eyebrow { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; color: var(--ideasets-text-tertiary); }
.ideasets-article-card-title { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-snug); }
.ideasets-article-card-author { display: flex; align-items: center; gap: var(--ideasets-space-xs); }
.ideasets-article-card-avatar { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.ideasets-article-card-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ideasets-article-card-meta { font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }

/* ==========================================================
   88. COMPANY OVERVIEW BLOCK (Lithos Pattern)
   ========================================================== */
.ideasets-overview-block { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ideasets-space-xl); padding: var(--ideasets-space-3xl) 0; border-top: 1px solid var(--ideasets-border-color); }
.ideasets-overview-block-header { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; color: var(--ideasets-text-tertiary); margin-bottom: var(--ideasets-space-lg); }
.ideasets-overview-block-left { display: flex; flex-direction: column; gap: var(--ideasets-space-md); }
.ideasets-overview-block-right { display: flex; flex-direction: column; gap: var(--ideasets-space-md); }

/* ==========================================================
   89. FOUNDERS / TEAM CARD (Lithos Pattern)
   ========================================================== */
.ideasets-founder-card { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); }
.ideasets-founder-card-image { aspect-ratio: 3/4; overflow: hidden; border-radius: var(--ideasets-radius-lg); }
.ideasets-founder-card-image img { width: 100%; height: 100%; object-fit: cover; }
.ideasets-founder-card-name { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-medium); }
.ideasets-founder-card-title { font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }

/* ==========================================================
   90. MEDIA GRID WITH VIDEO (Lithos Pattern)
   ========================================================== */
.ideasets-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ideasets-space-sm); }
.ideasets-media-grid-item { overflow: hidden; border-radius: var(--ideasets-radius-md); }
.ideasets-media-grid-item img, .ideasets-media-grid-item video { width: 100%; height: 100%; object-fit: cover; }
.ideasets-media-grid-item.is-wide { grid-column: span 2; }
.ideasets-media-grid-item.is-tall { grid-row: span 2; }
.ideasets-media-grid-stripe { width: 100%; height: 1px; background: var(--ideasets-border-color); margin: var(--ideasets-space-lg) 0; }

/* ==========================================================
   91. GRADIENT HERO OVERLAY (Lithos Pattern)
   ========================================================== */
.ideasets-hero-gradient-dark { position: relative; }
.ideasets-hero-gradient-dark::after { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(26,26,26,0) 0%, rgba(26,26,26,0.95) 72.885%); pointer-events: none; z-index: 1; }
.ideasets-hero-zoom { overflow: hidden; }
.ideasets-hero-zoom img { transform: scale(1.1); transition: transform var(--ideasets-duration-slowest); }

/* ==========================================================
   92. HORIZONTAL FADE MASK (Lithos Pattern)
   ========================================================== */
.ideasets-mask-fade-horizontal { mask-image: linear-gradient(90deg, transparent 0%, #000 5% 95%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5% 95%, transparent 100%); }

/* ==========================================================
   93. SCROLL ARROW CTA (Lithos Pattern)
   ========================================================== */
.ideasets-scroll-arrow { display: inline-flex; align-items: center; gap: var(--ideasets-space-xs); font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; opacity: 0.7; transition: opacity var(--ideasets-duration-fast); }
.ideasets-scroll-arrow:hover { opacity: 1; }
.ideasets-scroll-arrow svg { width: 16px; height: 16px; animation: ideasets-bounce 2s ease-in-out infinite; }

/* ==========================================================
   94. FOOTER MULTI-LOCATION (Lithos Pattern)
   ========================================================== */
.ideasets-footer-locations { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ideasets-space-xl); }
.ideasets-footer-location-label { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; color: var(--ideasets-text-tertiary); margin-bottom: var(--ideasets-space-xs); }
.ideasets-footer-location-address { font-size: var(--ideasets-fs-sm); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   95. OPENTYPE FEATURES (Lithos Typography Pattern)
   ========================================================== */
.ideasets-ot-features { font-feature-settings: "blwf" on, "cv09" on, "cv03" on, "cv04" on, "cv11" on; }

/* ==========================================================
   96. TEXT WRAP BALANCE
   ========================================================== */
.ideasets-text-balance { text-wrap: balance; }

/* ==========================================================
   97. CLIP-PATH CIRCLE REVEAL (Lithos Pattern)
   ========================================================== */
[data-reveal="clip-circle-min"] { clip-path: circle(1px at calc(100% - 1px) calc(100% - 1px)); }
[data-reveal="clip-circle-min"].is-visible { clip-path: circle(150% at 50% 50%); transition: clip-path var(--ideasets-duration-slowest) var(--ideasets-ease-out); }

/* ==========================================================
   98. WIDE GAMUT P3 COLOR SUPPORT
   ========================================================== */
@supports (color: color(display-p3 1 1 1)) {
  .ideasets-p3-white { color: color(display-p3 1 1 1); }
  .ideasets-p3-white-bg { background-color: color(display-p3 1 1 1); }
}

/* ==========================================================
   99. BRAND LOGO MARQUEE (Buildaxa Pattern)
   ========================================================== */
.ideasets-brand-marquee { display: flex; gap: var(--ideasets-space-xl); align-items: center; overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent 0%, #000 10% 90%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10% 90%, transparent 100%); }
.ideasets-brand-marquee-track { display: flex; gap: var(--ideasets-space-xl); align-items: center; animation: ideasets-marquee 30s linear infinite; flex-shrink: 0; }
.ideasets-brand-marquee-item { flex: 0 0 auto; height: 32px; opacity: 0.5; transition: opacity var(--ideasets-duration-fast); }
.ideasets-brand-marquee-item:hover { opacity: 1; }
.ideasets-brand-marquee-item img { height: 100%; width: auto; object-fit: contain; filter: grayscale(1); transition: filter var(--ideasets-duration-fast); }
.ideasets-brand-marquee-item:hover img { filter: grayscale(0); }

/* ==========================================================
   100. COUNTDOWN CARD (Buildaxa Pattern)
   ========================================================== */
.ideasets-countdown { display: flex; gap: var(--ideasets-space-md); align-items: center; justify-content: center; }
.ideasets-countdown-card { display: flex; flex-direction: column; align-items: center; gap: var(--ideasets-space-xs); padding: var(--ideasets-space-lg); background: var(--ideasets-bg-secondary); border-radius: var(--ideasets-radius-20); corner-shape: superellipse(2); min-width: 100px; }
.ideasets-countdown-number { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-4xl); font-weight: var(--ideasets-fw-bold); line-height: var(--ideasets-lh-none); }
.ideasets-countdown-label { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; color: var(--ideasets-text-secondary); }
.ideasets-countdown-separator { font-size: var(--ideasets-fs-3xl); font-weight: var(--ideasets-fw-bold); color: var(--ideasets-text-tertiary); line-height: var(--ideasets-lh-none); }

/* ==========================================================
   101. PROCESS STICKY SCROLL (Buildaxa Pattern)
   ========================================================== */
.ideasets-process-sticky { position: relative; }
.ideasets-process-sticky-list { display: flex; flex-direction: column; gap: 0; }
.ideasets-process-sticky-item { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; padding: var(--ideasets-space-xl); background: var(--ideasets-bg-primary); border-bottom: 1px solid var(--ideasets-border-color); z-index: var(--ideasets-z-above); }
.ideasets-process-sticky-item:nth-child(1) { z-index: 5; }
.ideasets-process-sticky-item:nth-child(2) { z-index: 4; }
.ideasets-process-sticky-item:nth-child(3) { z-index: 3; }
.ideasets-process-sticky-item:nth-child(4) { z-index: 2; }
.ideasets-process-sticky-item:nth-child(5) { z-index: 1; }
.ideasets-process-sticky-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ideasets-space-2xl); align-items: center; width: 100%; max-width: var(--ideasets-container-max); margin: 0 auto; }
.ideasets-process-sticky-number { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); color: var(--ideasets-text-tertiary); margin-bottom: var(--ideasets-space-sm); }
.ideasets-process-sticky-title { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-3xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-snug); margin-bottom: var(--ideasets-space-md); }
.ideasets-process-sticky-desc { font-size: var(--ideasets-fs-md); line-height: var(--ideasets-lh-body); color: var(--ideasets-text-secondary); }
.ideasets-process-sticky-media { aspect-ratio: 4/3; border-radius: var(--ideasets-radius-20); overflow: hidden; }
.ideasets-process-sticky-media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   102. PORTFOLIO SLIDER (Buildaxa Pattern)
   ========================================================== */
.ideasets-portfolio-slider { position: relative; overflow: hidden; }
.ideasets-portfolio-slider-track { display: flex; transition: transform var(--ideasets-duration-slow) var(--ideasets-ease-buildaxa); }
.ideasets-portfolio-slider-item { flex: 0 0 100%; position: relative; }
.ideasets-portfolio-slider-media { aspect-ratio: 16/9; overflow: hidden; border-radius: var(--ideasets-radius-20); }
.ideasets-portfolio-slider-media img { width: 100%; height: 100%; object-fit: cover; }
.ideasets-portfolio-slider-info { display: flex; justify-content: space-between; align-items: center; padding: var(--ideasets-space-md) 0; }
.ideasets-portfolio-slider-title { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-semibold); }
.ideasets-portfolio-slider-category { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; color: var(--ideasets-text-tertiary); }
.ideasets-portfolio-slider-nav { display: flex; gap: var(--ideasets-space-sm); margin-top: var(--ideasets-space-md); }
.ideasets-portfolio-slider-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ideasets-border-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--ideasets-duration-fast); }
.ideasets-portfolio-slider-btn:hover { background: var(--ideasets-text-primary); color: var(--ideasets-text-inverse); border-color: var(--ideasets-text-primary); }

/* ==========================================================
   103. TESTIMONIAL NUMBERED CARDS (Buildaxa Pattern)
   ========================================================== */
.ideasets-testimonial-numbered { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ideasets-space-lg); }
.ideasets-testimonial-numbered-card { padding: var(--ideasets-space-xl); border: 1px solid var(--ideasets-border-color); border-radius: var(--ideasets-radius-20); corner-shape: superellipse(2); display: flex; flex-direction: column; gap: var(--ideasets-space-lg); transition: border-color var(--ideasets-duration-normal); }
.ideasets-testimonial-numbered-card:hover { border-color: var(--ideasets-text-primary); }
.ideasets-testimonial-numbered-index { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); color: var(--ideasets-text-tertiary); letter-spacing: var(--ideasets-ls-wide); }
.ideasets-testimonial-numbered-text { font-size: var(--ideasets-fs-md); line-height: var(--ideasets-lh-body); flex: 1; }
.ideasets-testimonial-numbered-author { display: flex; align-items: center; gap: var(--ideasets-space-sm); }
.ideasets-testimonial-numbered-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; }
.ideasets-testimonial-numbered-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ideasets-testimonial-numbered-name { font-weight: var(--ideasets-fw-semibold); }
.ideasets-testimonial-numbered-role { font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }

/* ==========================================================
   104. TEAM GRID (Buildaxa / Lithos Pattern)
   ========================================================== */
.ideasets-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ideasets-space-lg); }
.ideasets-team-card { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); text-align: center; }
.ideasets-team-card-image { aspect-ratio: 1/1; overflow: hidden; border-radius: var(--ideasets-radius-20); }
.ideasets-team-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-slow); }
.ideasets-team-card:hover .ideasets-team-card-image img { transform: scale(1.05); }
.ideasets-team-card-name { font-size: var(--ideasets-fs-md); font-weight: var(--ideasets-fw-semibold); }
.ideasets-team-card-role { font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }
.ideasets-team-card-social { display: flex; gap: var(--ideasets-space-xs); justify-content: center; margin-top: var(--ideasets-space-xs); }
.ideasets-team-card-social a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--ideasets-border-color); display: flex; align-items: center; justify-content: center; transition: all var(--ideasets-duration-fast); }
.ideasets-team-card-social a:hover { background: var(--ideasets-text-primary); color: var(--ideasets-text-inverse); border-color: var(--ideasets-text-primary); }

/* ==========================================================
   105. ACHIEVEMENTS TIMELINE (Buildaxa Pattern)
   ========================================================== */
.ideasets-achievements { position: relative; padding-left: var(--ideasets-space-xl); }
.ideasets-achievements::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--ideasets-border-color); }
.ideasets-achievement-item { position: relative; padding: var(--ideasets-space-lg) 0; }
.ideasets-achievement-item::before { content: ''; position: absolute; left: calc(-1 * var(--ideasets-space-xl)); top: 50%; transform: translateY(-50%); width: 12px; height: 12px; border-radius: 50%; background: var(--ideasets-text-primary); border: 3px solid var(--ideasets-bg-primary); }
.ideasets-achievement-year { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); color: var(--ideasets-text-tertiary); margin-bottom: var(--ideasets-space-xs); }
.ideasets-achievement-title { font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-semibold); margin-bottom: var(--ideasets-space-xs); }
.ideasets-achievement-desc { font-size: var(--ideasets-fs-body); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   106. CAREER SECTION (Multi-template Pattern)
   ========================================================== */
.ideasets-career-list { display: flex; flex-direction: column; }
.ideasets-career-item { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--ideasets-space-lg); align-items: center; padding: var(--ideasets-space-lg) 0; border-bottom: 1px solid var(--ideasets-border-color); transition: background var(--ideasets-duration-fast); }
.ideasets-career-item:hover { background: var(--ideasets-bg-secondary); }
.ideasets-career-title { font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-semibold); }
.ideasets-career-meta { font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); display: flex; gap: var(--ideasets-space-sm); }
.ideasets-career-cta { display: flex; align-items: center; }

/* ==========================================================
   107. HISTORY TIMELINE (Multi-template Pattern)
   ========================================================== */
.ideasets-history-timeline { position: relative; display: flex; flex-direction: column; gap: var(--ideasets-space-2xl); }
.ideasets-history-item { display: grid; grid-template-columns: 200px 1fr; gap: var(--ideasets-space-xl); position: relative; }
.ideasets-history-year { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-4xl); font-weight: var(--ideasets-fw-light); color: var(--ideasets-text-tertiary); line-height: var(--ideasets-lh-none); }
.ideasets-history-content { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); padding-bottom: var(--ideasets-space-2xl); border-bottom: 1px solid var(--ideasets-border-color); }
.ideasets-history-title { font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-semibold); }
.ideasets-history-desc { font-size: var(--ideasets-fs-body); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   108. CONTACT FORM GRID (Multi-template Pattern)
   ========================================================== */
.ideasets-contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ideasets-space-md); }
.ideasets-contact-form .is-full-width { grid-column: span 2; }
.ideasets-contact-form-info { display: flex; flex-direction: column; gap: var(--ideasets-space-lg); }
.ideasets-contact-form-info-item { display: flex; flex-direction: column; gap: var(--ideasets-space-xs); }
.ideasets-contact-form-info-label { font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; color: var(--ideasets-text-tertiary); }

/* ==========================================================
   109. DECORATIVE ARC (Multi-template Pattern)
   ========================================================== */
.ideasets-decorative-arc { position: absolute; width: 200px; height: 200px; border: 1px solid var(--ideasets-border-color); border-radius: 50%; opacity: 0.3; pointer-events: none; }
.ideasets-decorative-arc.is-top-right { top: -100px; right: -100px; }
.ideasets-decorative-arc.is-bottom-left { bottom: -100px; left: -100px; }

/* ==========================================================
   110. ANIMATED TEXT DECORATION LINK (Multi-template Pattern)
   ========================================================== */
.ideasets-link-animated-decoration { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--ideasets-duration-quick); }
.ideasets-link-animated-decoration:hover { text-decoration-color: currentColor; }

/* ==========================================================
   111. MULTI-COLUMN GRID UTILS (5/6/22-Column)
   ========================================================== */
.ideasets-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--ideasets-space-md); }
.ideasets-grid-6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--ideasets-space-md); }
.ideasets-grid-22 { display: grid; grid-template-columns: repeat(22, 1fr); gap: 4px; }

/* ==========================================================
   112. FAQ ACCORDION (Lithos Pattern)
   ========================================================== */
.ideasets-faq { display: flex; flex-direction: column; }
.ideasets-faq-item { border-bottom: 1px solid var(--ideasets-border-color); }
.ideasets-faq-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: var(--ideasets-space-md) 0; font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-medium); text-align: left; cursor: pointer; background: none; border: none; color: inherit; }
.ideasets-faq-icon { width: 24px; height: 24px; position: relative; flex-shrink: 0; }
.ideasets-faq-icon::before, .ideasets-faq-icon::after { content: ''; position: absolute; background: currentColor; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-in-out); }
.ideasets-faq-icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.ideasets-faq-icon::after { top: 0; left: 50%; width: 1.5px; height: 100%; transform: translateX(-50%); }
.ideasets-faq-item.is-open .ideasets-faq-icon::after { transform: translateX(-50%) rotate(90deg); }
.ideasets-faq-content { max-height: 0; overflow: hidden; transition: max-height var(--ideasets-duration-normal) var(--ideasets-ease-in-out); }
.ideasets-faq-item.is-open .ideasets-faq-content { max-height: 500px; }
.ideasets-faq-answer { padding: 0 0 var(--ideasets-space-md); font-size: var(--ideasets-fs-body); line-height: var(--ideasets-lh-body); color: var(--ideasets-text-secondary); }

/* ==========================================================
   113. LITHOS THEME (Near-black based)
   ========================================================== */
[data-theme="lithos"] {
  --ideasets-bg-primary: var(--ideasets-white);
  --ideasets-bg-secondary: var(--ideasets-gray-fafafa);
  --ideasets-bg-tertiary: var(--ideasets-gray-f5f5f5);
  --ideasets-bg-inverse: var(--ideasets-near-black-1a);
  --ideasets-text-primary: var(--ideasets-near-black-1a);
  --ideasets-text-secondary: var(--ideasets-near-black-1a-90);
  --ideasets-text-tertiary: var(--ideasets-gray-767);
  --ideasets-text-inverse: var(--ideasets-white);
  --ideasets-border-color: var(--ideasets-near-black-1a-10);
  --ideasets-divider: var(--ideasets-near-black-1a);
  --ideasets-accent-primary: var(--ideasets-accent-crimson);
  --ideasets-selection-bg: var(--ideasets-near-black-1a);
  --ideasets-selection-color: var(--ideasets-white);
}

/* ==========================================================
   114. BUILDAXA THEME (Deep dark + orange accent)
   ========================================================== */
[data-theme="buildaxa"] {
  --ideasets-bg-primary: var(--ideasets-dark-121);
  --ideasets-bg-secondary: var(--ideasets-dark-202);
  --ideasets-bg-tertiary: var(--ideasets-dark-2e2);
  --ideasets-bg-inverse: var(--ideasets-cream-light);
  --ideasets-text-primary: var(--ideasets-cream-light);
  --ideasets-text-secondary: var(--ideasets-gray-adadad);
  --ideasets-text-tertiary: var(--ideasets-gray-666);
  --ideasets-text-inverse: var(--ideasets-dark-121);
  --ideasets-border-color: var(--ideasets-dark-2e2);
  --ideasets-divider: var(--ideasets-dark-2e2);
  --ideasets-accent-primary: var(--ideasets-accent-orange-vivid);
  --ideasets-selection-bg: var(--ideasets-accent-orange-vivid);
  --ideasets-selection-color: var(--ideasets-dark-121);
}

/* ==========================================================
   115. CONTAINER MEGA & SMALL
   ========================================================== */
.ideasets-container-mega { width: 100%; max-width: var(--ideasets-container-mega); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }
.ideasets-container-small { width: 100%; max-width: var(--ideasets-container-small); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }

/* ==========================================================
   117. ACCORDION WITH IMAGE PREVIEW (Refit/Archform Pattern)
   ========================================================== */
.ideasets-accordion-image { display: flex; flex-direction: column; }
.ideasets-accordion-image-item { display: grid; grid-template-columns: 1fr; gap: 0; border-bottom: 1px solid var(--ideasets-border-color); overflow: hidden; }
.ideasets-accordion-image-item.is-open { grid-template-columns: 1fr 1fr; }
.ideasets-accordion-image-trigger { display: flex; justify-content: space-between; align-items: center; padding: var(--ideasets-space-lg) 0; cursor: pointer; font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-semibold); }
.ideasets-accordion-image-panel { overflow: hidden; max-height: 0; transition: max-height var(--ideasets-duration-slow) var(--ideasets-ease-in-out); }
.ideasets-accordion-image-item.is-open .ideasets-accordion-image-panel { max-height: 500px; }
.ideasets-accordion-image-media { aspect-ratio: 16/10; overflow: hidden; border-radius: var(--ideasets-radius-lg); }
.ideasets-accordion-image-media img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   118. TESTIMONIAL GRID (Refit Pattern)
   ========================================================== */
.ideasets-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ideasets-space-lg); }
.ideasets-testimonial-grid-card { padding: var(--ideasets-space-xl); border: 1px solid var(--ideasets-border-color); border-radius: var(--ideasets-radius-lg); display: flex; flex-direction: column; gap: var(--ideasets-space-md); }
.ideasets-testimonial-grid-stars { display: flex; gap: 2px; }
.ideasets-testimonial-grid-text { font-size: var(--ideasets-fs-body); line-height: var(--ideasets-lh-body); color: var(--ideasets-text-secondary); flex: 1; }
.ideasets-testimonial-grid-author { font-weight: var(--ideasets-fw-semibold); }
.ideasets-testimonial-grid-role { font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-tertiary); }

/* ==========================================================
   119. BLOCKQUOTE / PULL-QUOTE (Refit Pattern)
   ========================================================== */
.ideasets-blockquote { position: relative; padding: var(--ideasets-space-xl) var(--ideasets-space-2xl); border-left: 3px solid var(--ideasets-text-primary); }
.ideasets-blockquote-text { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-xl); font-style: italic; line-height: var(--ideasets-lh-sub); }
.ideasets-blockquote-cite { margin-top: var(--ideasets-space-md); font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); font-style: normal; color: var(--ideasets-text-secondary); }
.ideasets-blockquote-icon { position: absolute; top: var(--ideasets-space-md); left: var(--ideasets-space-lg); font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-6xl); line-height: 1; opacity: 0.1; }

/* ==========================================================
   120. FOOTER CONTACT INFO (Ambience Pattern)
   ========================================================== */
.ideasets-footer-contact { display: flex; flex-direction: column; gap: var(--ideasets-space-md); }
.ideasets-footer-contact-item { display: flex; align-items: flex-start; gap: var(--ideasets-space-sm); }
.ideasets-footer-contact-icon { flex-shrink: 0; width: 20px; height: 20px; opacity: 0.6; }
.ideasets-footer-contact-text { font-size: var(--ideasets-fs-sm); line-height: var(--ideasets-lh-body); }
.ideasets-footer-contact-text a { transition: opacity var(--ideasets-duration-fast); }
.ideasets-footer-contact-text a:hover { opacity: 0.7; }

/* ==========================================================
   121. CIRCULAR MENU BUTTON (Archform Pattern)
   ========================================================== */
.ideasets-menu-btn-circle { width: 56px; height: 56px; border-radius: 50%; background: var(--ideasets-text-primary); color: var(--ideasets-text-inverse); display: flex; align-items: center; justify-content: center; font-family: var(--ideasets-ff-mono); font-size: var(--ideasets-fs-xs); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; cursor: pointer; transition: transform var(--ideasets-duration-fast), background var(--ideasets-duration-fast); }
.ideasets-menu-btn-circle:hover { transform: scale(1.1); }

/* ==========================================================
   122. CIRCULAR SCROLL-DOWN INDICATOR (Archform Pattern)
   ========================================================== */
.ideasets-scroll-circle { width: 80px; height: 80px; border-radius: 50%; border: 1px solid var(--ideasets-border-color); display: flex; align-items: center; justify-content: center; font-family: var(--ideasets-ff-mono); font-size: 10px; letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; animation: ideasets-bounce 2s ease-in-out infinite; cursor: pointer; }

/* ==========================================================
   123. MULTI-BAND OVERLAY (Ambience Pattern)
   ========================================================== */
.ideasets-overlay-multiband { position: relative; }
.ideasets-overlay-multiband::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.8) 100%); pointer-events: none; z-index: 1; }

/* ==========================================================
   124. IMAGE TICKER / IMAGE CAROUSEL STRIP (Refit Pattern)
   ========================================================== */
.ideasets-image-ticker { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, #000 10% 90%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10% 90%, transparent 100%); }
.ideasets-image-ticker-track { display: flex; gap: var(--ideasets-space-md); animation: ideasets-marquee 25s linear infinite; flex-shrink: 0; }
.ideasets-image-ticker-item { flex: 0 0 auto; height: 200px; border-radius: var(--ideasets-radius-lg); overflow: hidden; }
.ideasets-image-ticker-item img { width: auto; height: 100%; object-fit: cover; }

/* ==========================================================
   125. FILTER BAR / PILL GROUP (Eastalio Pattern)
   ========================================================== */
.ideasets-filter-bar { display: flex; gap: var(--ideasets-space-xs); flex-wrap: wrap; }
.ideasets-filter-pill { padding: 8px 20px; border-radius: var(--ideasets-radius-full); border: 1px solid var(--ideasets-border-color); font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); cursor: pointer; transition: all var(--ideasets-duration-fast); background: transparent; color: var(--ideasets-text-primary); }
.ideasets-filter-pill:hover { border-color: var(--ideasets-text-primary); }
.ideasets-filter-pill.is-active { background: var(--ideasets-text-primary); color: var(--ideasets-text-inverse); border-color: var(--ideasets-text-primary); }

/* ==========================================================
   126. FLOATING ACTION BUTTON (Eastalio Pattern)
   ========================================================== */
.ideasets-fab { position: fixed; bottom: var(--ideasets-space-lg); right: var(--ideasets-space-lg); width: 56px; height: 56px; border-radius: 50%; background: var(--ideasets-accent-green-vivid); color: var(--ideasets-white); display: flex; align-items: center; justify-content: center; z-index: var(--ideasets-z-sticky); box-shadow: var(--ideasets-shadow-lg); cursor: pointer; transition: transform var(--ideasets-duration-fast), box-shadow var(--ideasets-duration-fast); }
.ideasets-fab:hover { transform: scale(1.1); box-shadow: var(--ideasets-shadow-xl); }
.ideasets-fab svg { width: 24px; height: 24px; }

/* ==========================================================
   127. NUMBERED FEATURE LIST (Royal Pattern)
   ========================================================== */
.ideasets-numbered-features { display: flex; flex-direction: column; gap: var(--ideasets-space-xl); counter-reset: feature; }
.ideasets-numbered-feature { display: grid; grid-template-columns: 80px 1fr; gap: var(--ideasets-space-lg); align-items: start; counter-increment: feature; }
.ideasets-numbered-feature-index { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-4xl); font-weight: var(--ideasets-fw-light); color: var(--ideasets-text-tertiary); line-height: var(--ideasets-lh-none); }
.ideasets-numbered-feature-index::before { content: counter(feature, decimal-leading-zero); }
.ideasets-numbered-feature-body { display: flex; flex-direction: column; gap: var(--ideasets-space-xs); }
.ideasets-numbered-feature-title { font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-semibold); }
.ideasets-numbered-feature-desc { font-size: var(--ideasets-fs-body); color: var(--ideasets-text-secondary); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   128. GLASS CARD (Dark Theme) (Lorunse Pattern)
   ========================================================== */
.ideasets-card-glass-dark { background: var(--ideasets-white-09); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--ideasets-white-10); border-radius: var(--ideasets-radius-xl); padding: var(--ideasets-space-lg); }

/* ==========================================================
   129. MONA SANS DISPLAY (Mirel Pattern)
   ========================================================== */
.ideasets-display-mona { font-family: var(--ideasets-ff-mona); font-size: var(--ideasets-fs-28); font-weight: var(--ideasets-fw-black); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-snug); }

/* ==========================================================
   130. INTER DISPLAY HEADINGS (Mirel Pattern)
   ========================================================== */
.ideasets-display-inter-lg { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-80); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-display-inter-md { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-35); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-display-inter-body { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-snug); }

/* ==========================================================
   131. JOST TYPOGRAPHY UTILITIES (Lorunse Pattern)
   ========================================================== */
.ideasets-label-jost { font-family: var(--ideasets-ff-jost); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; }
.ideasets-body-jost { font-family: var(--ideasets-ff-jost); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-normal); }
.ideasets-display-forum-mega { font-family: var(--ideasets-ff-forum); font-size: var(--ideasets-fs-500); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-crush); letter-spacing: var(--ideasets-ls-snug); text-transform: uppercase; }

/* ==========================================================
   132. MASK VARIANTS (Multi-template Gap)
   ========================================================== */
.ideasets-mask-fade-bottom-65 { mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,1) 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0) 65%, rgba(0,0,0,1) 100%); }
.ideasets-mask-vignette { mask-image: linear-gradient(0deg, rgba(0,0,0,0.25) 0%, rgb(0,0,0) 53%, rgba(0,0,0,0.25) 100%); -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,0.25) 0%, rgb(0,0,0) 53%, rgba(0,0,0,0.25) 100%); }
.ideasets-mask-uniform-90 { mask-image: linear-gradient(rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 100%); -webkit-mask-image: linear-gradient(rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.9) 100%); }
.ideasets-mask-uniform-70 { mask-image: linear-gradient(rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%); -webkit-mask-image: linear-gradient(rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%); }

/* ==========================================================
   133. BRIGHTNESS FILTER VARIANTS (Gap Fill)
   ========================================================== */
.ideasets-img-darken-light { filter: brightness(0.7); }

/* ==========================================================
   134. OVERLAY GRADIENT VARIANTS (Multi-template Gap)
   ========================================================== */
.ideasets-overlay-gradient-late { background: linear-gradient(180deg, transparent 65%, rgba(0,0,0,0.9) 100%); }
.ideasets-overlay-gradient-overshoot { background: linear-gradient(179deg, transparent 0%, rgba(0,0,0,1) 117%); }

/* ==========================================================
   135. SECTION PROGRESS BAR (Kokoro Pattern)
   ========================================================== */
.ideasets-progress-bar { width: 100%; height: 2px; background: var(--ideasets-border-color); border-radius: var(--ideasets-radius-full); overflow: hidden; }
.ideasets-progress-bar-fill { height: 100%; background: var(--ideasets-text-primary); border-radius: var(--ideasets-radius-full); transition: width var(--ideasets-duration-normal) var(--ideasets-ease-out); width: 0%; }

/* ==========================================================
   116. ADDITIONAL RESPONSIVE — New Components
   ========================================================== */
@media (max-width: 1200px) {
  .ideasets-linked-card-grid { grid-template-columns: repeat(2, 1fr); }
  .ideasets-overview-block { grid-template-columns: 1fr; }
  .ideasets-team-grid { grid-template-columns: repeat(3, 1fr); }
  .ideasets-testimonial-numbered { grid-template-columns: repeat(2, 1fr); }
  .ideasets-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .ideasets-process-sticky-content { grid-template-columns: 1fr; }
  .ideasets-history-item { grid-template-columns: 120px 1fr; }
  .ideasets-footer-locations { grid-template-columns: repeat(2, 1fr); }
  .ideasets-accordion-image-item.is-open { grid-template-columns: 1fr; }
  .ideasets-numbered-feature { grid-template-columns: 60px 1fr; }
  .ideasets-display-inter-lg { font-size: var(--ideasets-fs-60); }
  .ideasets-display-forum-mega { font-size: var(--ideasets-fs-300); }
}

@media (max-width: 810px) {
  .ideasets-linked-card-grid { grid-template-columns: 1fr; }
  .ideasets-team-grid { grid-template-columns: repeat(2, 1fr); }
  .ideasets-testimonial-numbered { grid-template-columns: 1fr; }
  .ideasets-testimonial-grid { grid-template-columns: 1fr; }
  .ideasets-media-grid { grid-template-columns: repeat(2, 1fr); }
  .ideasets-career-item { grid-template-columns: 1fr; gap: var(--ideasets-space-sm); }
  .ideasets-history-item { grid-template-columns: 1fr; }
  .ideasets-history-year { font-size: var(--ideasets-fs-2xl); }
  .ideasets-contact-form { grid-template-columns: 1fr; }
  .ideasets-contact-form .is-full-width { grid-column: span 1; }
  .ideasets-footer-locations { grid-template-columns: 1fr; }
  .ideasets-countdown { flex-wrap: wrap; }
  .ideasets-portfolio-slider-media { aspect-ratio: 4/3; }
  .ideasets-carousel-3d { min-height: 40vh; }
  .ideasets-grid-5 { grid-template-columns: repeat(2, 1fr); }
  .ideasets-grid-6 { grid-template-columns: repeat(3, 1fr); }
  .ideasets-grid-22 { grid-template-columns: repeat(11, 1fr); }
  .ideasets-blockquote { padding: var(--ideasets-space-md) var(--ideasets-space-lg); }
  .ideasets-filter-bar { gap: 6px; }
  .ideasets-image-ticker-item { height: 140px; }
  .ideasets-display-inter-lg { font-size: var(--ideasets-fs-3xl); }
  .ideasets-display-inter-md { font-size: var(--ideasets-fs-xl); }
  .ideasets-display-forum-mega { font-size: var(--ideasets-fs-150); }
  .ideasets-process-sticky-item { min-height: auto; padding: var(--ideasets-space-xl) var(--ideasets-space-md); }
}

@media (max-width: 480px) {
  .ideasets-team-grid { grid-template-columns: 1fr; }
  .ideasets-media-grid { grid-template-columns: 1fr; }
  .ideasets-grid-5 { grid-template-columns: 1fr; }
  .ideasets-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   AYANO TEMPLATE — Nav Link Slide-Up Hover Effect
   Text container has overflow:hidden; on hover the inner text
   slides up via justify-content:flex-end transition
   ========================================================== */
.ideasets-nav-link-slide { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; width: min-content; height: min-content; overflow: visible; position: relative; text-decoration: none; cursor: pointer; }
.ideasets-nav-link-slide-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: stretch; width: auto; height: 13px; overflow: hidden; position: relative; transition: justify-content var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-nav-link-slide:hover .ideasets-nav-link-slide-inner { justify-content: flex-end; }

/* ==========================================================
   AYANO TEMPLATE — Rounded Section Container
   Full-width section with large border-radius creating
   a rounded card appearance for major content sections
   ========================================================== */
.ideasets-section-rounded { background: var(--ideasets-bg-primary); border-radius: var(--ideasets-radius-4xl); overflow: visible; position: relative; width: 100%; padding: 78px var(--ideasets-space-sm) 0; }
.ideasets-section-rounded--sm { border-radius: var(--ideasets-radius-3xl); }
.ideasets-section-rounded--inset { margin-inline: var(--ideasets-space-sm); width: calc(100% - var(--ideasets-space-sm) * 2); }

/* ==========================================================
   AYANO TEMPLATE — Image Mask Bottom Fade
   Gradient mask that fades image to transparent at bottom,
   used on card images to blend into background
   ========================================================== */
.ideasets-mask-bottom-fade { mask: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,1) 100%) add; -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0) 65%, rgba(0,0,0,1) 100%) add; }
.ideasets-mask-bottom-fade--strong { mask: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%) add; -webkit-mask: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 100%) add; }

/* ==========================================================
   AYANO TEMPLATE — Dark Gradient Bottom Overlay
   Semi-transparent gradient from transparent to dark,
   overlaid on hero/card images for text readability
   ========================================================== */
.ideasets-gradient-bottom-dark { background: linear-gradient(#0e101100 0%, #0e1011 100%); position: absolute; inset: 0; pointer-events: none; }
.ideasets-gradient-bottom-dark--half { background: linear-gradient(#0e101100 0%, #0e1011 100%); position: absolute; left: 0; right: 0; bottom: 0; height: 50%; pointer-events: none; }

/* ==========================================================
   AYANO TEMPLATE — Card Inset Border with Low Opacity
   Thin inset box-shadow border with very low opacity for
   subtle card edge definition
   ========================================================== */
.ideasets-card-inset-border-subtle { box-shadow: inset 0px 0px 0px 1px rgb(0, 0, 0); opacity: 0.06; border-radius: var(--ideasets-radius-11); position: absolute; inset: 0; pointer-events: none; }
.ideasets-card-inset-border-faint { box-shadow: inset 0px 0px 0px 1px rgb(0, 0, 0); opacity: 0.04; border-radius: var(--ideasets-radius-11); position: absolute; inset: 0; pointer-events: none; }

/* ==========================================================
   AYANO TEMPLATE — Services Split Card
   Image + text content split layout with inner grid;
   image covers one side, text/grid occupies the other
   ========================================================== */
.ideasets-service-split { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); overflow: hidden; position: relative; }
.ideasets-service-split-image { aspect-ratio: 1.25; width: 100%; overflow: hidden; border-radius: var(--ideasets-radius-11); position: relative; }
.ideasets-service-split-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; corner-shape: inherit; }
.ideasets-service-split-content { display: flex; flex-direction: column; gap: var(--ideasets-space-md); padding: var(--ideasets-space-md) 0; }

/* ==========================================================
   AYANO TEMPLATE — Work/Portfolio Project Card
   Card with aspect-ratio image, title overlay, and hover
   zoom effect on the image
   ========================================================== */
.ideasets-project-card { display: flex; flex-direction: column; gap: var(--ideasets-space-sm); width: 400px; overflow: hidden; position: relative; cursor: pointer; text-decoration: none; }
.ideasets-project-card-media { aspect-ratio: 1.25; width: 100%; overflow: hidden; border-radius: var(--ideasets-radius-11); position: relative; }
.ideasets-project-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-project-card:hover .ideasets-project-card-media img { transform: scale(1.05); }
.ideasets-project-card-info { display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: var(--ideasets-space-sm); }

/* ==========================================================
   AYANO TEMPLATE — Blog Card with Square Image
   Blog entry card with 1:1 aspect-ratio image, hover
   effects on image height and zoom
   ========================================================== */
.ideasets-blog-card-ayano { display: flex; flex-direction: column; gap: var(--ideasets-space-md); width: 400px; overflow: hidden; position: relative; cursor: pointer; }
.ideasets-blog-card-ayano-media { aspect-ratio: 1; width: 100%; overflow: hidden; border-radius: var(--ideasets-radius-11); position: relative; }
.ideasets-blog-card-ayano-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-blog-card-ayano:hover .ideasets-blog-card-ayano-media img { transform: scale(1.05); }
.ideasets-blog-card-ayano-info { display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); gap: var(--ideasets-space-sm); }

/* ==========================================================
   AYANO TEMPLATE — Stats Row with Divider Lines
   Horizontal row of stat items separated by 1px lines,
   each stat has number + label stacked vertically
   ========================================================== */
.ideasets-stats-row { display: flex; align-items: center; width: 100%; }
.ideasets-stats-row-item { flex: 1; display: flex; flex-direction: column; gap: var(--ideasets-space-xs); padding: var(--ideasets-space-lg) 0; }
.ideasets-stats-row-divider { width: 1px; align-self: stretch; background: var(--ideasets-border-color); }

/* ==========================================================
   AYANO TEMPLATE — Dark Mode Toggle Switch
   Pill-shaped toggle with sliding circle indicator,
   1px inset border and 500px radius for perfect pill
   ========================================================== */
.ideasets-theme-toggle { position: relative; min-height: 28px; min-width: 44px; background: var(--ideasets-bg-primary); padding: 6px; border-radius: var(--ideasets-radius-494); cursor: pointer; }
.ideasets-theme-toggle-border { position: absolute; inset: 0; border-radius: var(--ideasets-radius-494); border: 1px solid var(--ideasets-text-primary); pointer-events: none; }
.ideasets-theme-toggle-knob { position: absolute; height: 16px; aspect-ratio: 1; left: 6px; background: transparent; border-radius: var(--ideasets-radius-494); transition: left var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-theme-toggle.is-active .ideasets-theme-toggle-knob { left: calc(100% - 22px); }

/* ==========================================================
   AYANO TEMPLATE — Ayano Typography Presets
   Satoshi font at various sizes and weights extracted from
   the template's heading/body/label/tag styles
   ========================================================== */
.ideasets-type-ayano-h1 { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-56); font-weight: var(--ideasets-fw-light); line-height: var(--ideasets-lh-heading); letter-spacing: var(--ideasets-ls-normal); }
.ideasets-type-ayano-h2 { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-4xl); font-weight: var(--ideasets-fw-light); line-height: var(--ideasets-lh-heading); letter-spacing: var(--ideasets-ls-normal); }
.ideasets-type-ayano-h3 { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-28); font-weight: var(--ideasets-fw-light); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-normal); }
.ideasets-type-ayano-body { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-light); line-height: var(--ideasets-lh-normal); letter-spacing: var(--ideasets-ls-normal); }
.ideasets-type-ayano-body-sm { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-light); line-height: var(--ideasets-lh-body); letter-spacing: var(--ideasets-ls-normal); }
.ideasets-type-ayano-label { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-13); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-spread); text-transform: uppercase; }
.ideasets-type-ayano-tag { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-13); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-spread); text-transform: uppercase; }
.ideasets-type-ayano-caption { font-family: var(--ideasets-ff-secondary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-light); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-normal); }

/* ==========================================================
   AYANO TEMPLATE — Aspect Ratio Utilities
   Specific aspect ratios extracted from template image
   containers and card layouts
   ========================================================== */
.ideasets-aspect-portrait-narrow { aspect-ratio: 0.795556; }
.ideasets-aspect-portrait-alt { aspect-ratio: 0.795455; }
.ideasets-aspect-portrait-wide { aspect-ratio: 0.980645; }
.ideasets-aspect-landscape-md { aspect-ratio: 1.29667; }
.ideasets-aspect-landscape-wide { aspect-ratio: 1.28598; }
.ideasets-aspect-landscape-tall { aspect-ratio: 1.40217; }
.ideasets-aspect-landscape-extra { aspect-ratio: 1.45192; }
.ideasets-aspect-portrait-tall { aspect-ratio: 0.710638; }
.ideasets-aspect-portrait-80 { aspect-ratio: 0.803313; }
.ideasets-aspect-portrait-85 { aspect-ratio: 0.856512; }
.ideasets-aspect-portrait-90 { aspect-ratio: 0.905738; }
.ideasets-aspect-portrait-93 { aspect-ratio: 0.937063; }
.ideasets-aspect-landscape-12 { aspect-ratio: 1.22222; }
.ideasets-aspect-landscape-125 { aspect-ratio: 1.2566; }
.ideasets-aspect-landscape-126 { aspect-ratio: 1.25806; }
.ideasets-aspect-landscape-142 { aspect-ratio: 1.42647; }
.ideasets-aspect-landscape-145 { aspect-ratio: 1.45865; }
.ideasets-aspect-landscape-172 { aspect-ratio: 1.725; }
.ideasets-aspect-ultra-wide { aspect-ratio: 2.58667; }
.ideasets-aspect-portrait-65 { aspect-ratio: 0.654206; }
.ideasets-aspect-portrait-72 { aspect-ratio: 0.727273; }
.ideasets-aspect-portrait-88 { aspect-ratio: 0.888889; }
.ideasets-aspect-landscape-128 { aspect-ratio: 1.28571; }
.ideasets-aspect-ultra-wide-266 { aspect-ratio: 2.66667; }
.ideasets-aspect-ultra-wide-353 { aspect-ratio: 3.53333; }
.ideasets-aspect-portrait-79 { aspect-ratio: 0.793478; }
.ideasets-aspect-portrait-81 { aspect-ratio: 0.814286; }
.ideasets-aspect-portrait-815 { aspect-ratio: 0.815556; }
.ideasets-aspect-portrait-86 { aspect-ratio: 0.866667; }
.ideasets-aspect-portrait-91 { aspect-ratio: 0.915385; }
.ideasets-aspect-square-101 { aspect-ratio: 1.01071; }
.ideasets-aspect-square-1013 { aspect-ratio: 1.01389; }
.ideasets-aspect-square-104 { aspect-ratio: 1.04571; }
.ideasets-aspect-landscape-131 { aspect-ratio: 1.31667; }
.ideasets-aspect-landscape-132 { aspect-ratio: 1.32222; }
.ideasets-aspect-landscape-152 { aspect-ratio: 1.5283; }
.ideasets-aspect-landscape-171 { aspect-ratio: 1.71429; }
.ideasets-aspect-landscape-184 { aspect-ratio: 1.84615; }
.ideasets-aspect-portrait-74 { aspect-ratio: 0.749386; }
.ideasets-aspect-portrait-797 { aspect-ratio: 0.797297; }
.ideasets-aspect-landscape-118 { aspect-ratio: 1.18678; }
.ideasets-aspect-landscape-133 { aspect-ratio: 1.33333; }
.ideasets-aspect-landscape-1404 { aspect-ratio: 1.40415; }
.ideasets-aspect-landscape-1408 { aspect-ratio: 1.40816; }
.ideasets-aspect-landscape-150 { aspect-ratio: 1.50358; }
.ideasets-aspect-landscape-158 { aspect-ratio: 1.58856; }
.ideasets-aspect-portrait-857 { aspect-ratio: 0.857143; }
.ideasets-aspect-portrait-907 { aspect-ratio: 0.9075; }
.ideasets-aspect-landscape-142 { aspect-ratio: 1.42857; }
.ideasets-aspect-landscape-162 { aspect-ratio: 1.62080; }
.ideasets-aspect-landscape-186 { aspect-ratio: 1.86667; }
.ideasets-aspect-ultra-wide-248 { aspect-ratio: 2.48889; }
.ideasets-aspect-portrait-66 { aspect-ratio: 0.66696; }
.ideasets-aspect-portrait-70 { aspect-ratio: 0.70125; }
.ideasets-aspect-landscape-147 { aspect-ratio: 1.47500; }
.ideasets-aspect-landscape-144 { aspect-ratio: 1.44074; }
.ideasets-aspect-portrait-87 { aspect-ratio: 0.872727; }
.ideasets-aspect-portrait-92 { aspect-ratio: 0.920097; }
.ideasets-aspect-portrait-977 { aspect-ratio: 0.977012; }
.ideasets-aspect-portrait-979 { aspect-ratio: 0.979592; }
.ideasets-aspect-square-102 { aspect-ratio: 1.02299; }
.ideasets-aspect-landscape-115 { aspect-ratio: 1.15584; }
.ideasets-aspect-landscape-137 { aspect-ratio: 1.37778; }
.ideasets-aspect-landscape-145-alt { aspect-ratio: 1.45902; }
.ideasets-aspect-landscape-146 { aspect-ratio: 1.46667; }
.ideasets-aspect-landscape-161 { aspect-ratio: 1.61224; }
.ideasets-aspect-landscape-168 { aspect-ratio: 1.68889; }
.ideasets-aspect-ultra-wide-233 { aspect-ratio: 2.33129; }
.ideasets-aspect-banner { aspect-ratio: 7.15; }

/* ==========================================================
   INTORIDA TEMPLATE — Nav Hover Label Pop-Up
   On hover, a label element pops up above the nav link
   with absolute positioning (top: -40px, left: 50%)
   ========================================================== */
.ideasets-nav-label-popup { position: relative; cursor: pointer; }
.ideasets-nav-label-popup-label { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; font-size: var(--ideasets-fs-xs); transition: opacity var(--ideasets-duration-fast) var(--ideasets-ease-out), top var(--ideasets-duration-fast) var(--ideasets-ease-out); white-space: nowrap; }
.ideasets-nav-label-popup:hover .ideasets-nav-label-popup-label { opacity: 1; top: -24px; }

/* ==========================================================
   INTORIDA TEMPLATE — Angled Gradient Overlay
   Gradient at 192deg angle from transparent to solid dark,
   used as hero/image overlay for dramatic effect
   ========================================================== */
.ideasets-gradient-angled-dark { background: linear-gradient(192deg, rgba(0, 0, 0, 0) -5%, rgb(0, 0, 0) 100%); position: absolute; inset: 0; pointer-events: none; }

/* ==========================================================
   INTORIDA TEMPLATE — Service Card Image Trigger
   Image that changes aspect-ratio to 1:1 on hover,
   used in service section image grid
   ========================================================== */
.ideasets-service-image-trigger { overflow: hidden; border-radius: var(--ideasets-radius-11); transition: aspect-ratio var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-service-image-trigger:hover { aspect-ratio: 1; }

/* ==========================================================
   INTORIDA TEMPLATE — Star Rating Component
   Row of star icons for review/testimonial ratings,
   small avatars + profile name layout
   ========================================================== */
.ideasets-star-rating { display: flex; gap: 4px; align-items: center; }
.ideasets-star-rating-icon { width: 16px; height: 16px; color: var(--ideasets-accent-gold); }
.ideasets-star-rating-profile { display: flex; align-items: center; gap: var(--ideasets-space-sm); }
.ideasets-star-rating-avatar { width: 39px; height: 39px; border-radius: 50%; overflow: hidden; }
.ideasets-star-rating-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================
   INTORIDA TEMPLATE — Intorida Typography Presets
   Playfair Display serif headings + DM Sans body text;
   common pairings from luxury/architecture templates
   ========================================================== */
.ideasets-type-intorida-hero { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-120); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-type-intorida-h1 { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-80); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-type-intorida-h2 { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-3xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-sub); letter-spacing: var(--ideasets-ls-tight); }
.ideasets-type-intorida-h3 { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-2xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-type-intorida-h4 { font-family: var(--ideasets-ff-serif); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-semi); }
.ideasets-type-intorida-body { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }
.ideasets-type-intorida-body-lg { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-sub); }
.ideasets-type-intorida-caption { font-family: var(--ideasets-ff-primary); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-card); }

/* ==========================================================
   INTORIDA TEMPLATE — Container 1260
   ========================================================== */
.ideasets-container-1260 { width: 100%; max-width: var(--ideasets-container-1260); margin: 0 auto; padding: 0 var(--ideasets-container-padding); }

/* ==========================================================
   INTORIDA TEMPLATE — Color Transition Utility
   Quick color transition for nav links and interactive text
   ========================================================== */
.ideasets-transition-color { transition: color 0.15s; }

/* ==========================================================
   GREENLLY TEMPLATE — Rotated Gradient Background
   Tricolor gradient (green→white→green) rotated 36deg,
   used as decorative accent behind sections
   ========================================================== */
.ideasets-gradient-rotated-accent { background: linear-gradient(180deg, var(--ideasets-accent-green) 0%, var(--ideasets-white) 59%, var(--ideasets-accent-green) 100%); transform: rotate(36deg); }

/* ==========================================================
   GREENLLY TEMPLATE — Color Transition Cubic
   Smooth color transition with linear cubic-bezier easing,
   used on nav links and interactive text elements
   ========================================================== */
.ideasets-transition-color-smooth { transition: color 0.4s cubic-bezier(0, 0, 1, 1); }

/* ==========================================================
   GREENLLY TEMPLATE — Hover Float Tooltip
   Element that floats upward on hover (bottom:30px),
   used for icon/tooltip reveal on card hover
   ========================================================== */
.ideasets-hover-float-up { position: relative; }
.ideasets-hover-float-up-target { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; transition: bottom var(--ideasets-duration-normal) var(--ideasets-ease-out), opacity var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-hover-float-up:hover .ideasets-hover-float-up-target { bottom: 30px; opacity: 1; }

/* ==========================================================
   GREENLLY TEMPLATE — Video Play Button
   Circular play button overlay with icon, positioned
   center of video/image container
   ========================================================== */
.ideasets-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; background: var(--ideasets-white); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: transform var(--ideasets-duration-fast) var(--ideasets-ease-out); }
.ideasets-play-button:hover { transform: translate(-50%, -50%) scale(1.1); }
.ideasets-play-button-icon { width: 24px; height: 24px; }

/* ==========================================================
   GREENLLY TEMPLATE — Stats Counter Card
   Counter number display with label, arranged in a
   row or grid, used in about/stats sections
   ========================================================== */
.ideasets-counter-row { display: flex; gap: var(--ideasets-space-xl); flex-wrap: wrap; }
.ideasets-counter-item { display: flex; flex-direction: column; gap: var(--ideasets-space-xs); }
.ideasets-counter-number { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-4xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-none); }
.ideasets-counter-label { font-size: var(--ideasets-fs-sm); color: var(--ideasets-text-secondary); }

/* ==========================================================
   GREENLLY TEMPLATE — Work Card with Image and Text
   Card component with image overlay, text content,
   and hover icon float-up effect
   ========================================================== */
.ideasets-work-card { position: relative; overflow: hidden; border-radius: var(--ideasets-radius-10); cursor: pointer; }
.ideasets-work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-work-card:hover img { transform: scale(1.05); }
.ideasets-work-card-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 100%); display: flex; flex-direction: column; justify-content: flex-end; padding: var(--ideasets-space-lg); }

/* ==========================================================
   AMBIENCE TEMPLATE — Frosted Pill Button
   Pill-shaped button with frosted glass backdrop-filter,
   white 50% background, 90px radius, and border
   ========================================================== */
.ideasets-btn-frosted-pill { display: inline-flex; align-items: center; justify-content: center; padding: 14px 32px; border-radius: var(--ideasets-radius-90); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); background: rgba(255, 255, 255, 0.5); border: 1px solid var(--ideasets-white-20); font-family: var(--ideasets-ff-serif-alt); font-weight: var(--ideasets-fw-regular); transition: background var(--ideasets-duration-fast), backdrop-filter var(--ideasets-duration-fast); cursor: pointer; }
.ideasets-btn-frosted-pill:hover { background: rgba(255, 255, 255, 0.7); }

/* ==========================================================
   AMBIENCE TEMPLATE — Hamburger Menu Icon
   Three-line hamburger icon with hover animation,
   lines change width/position on hover state
   ========================================================== */
.ideasets-hamburger { display: flex; flex-direction: column; gap: 6px; width: 34px; height: 49px; justify-content: center; align-items: flex-end; cursor: pointer; }
.ideasets-hamburger-line { height: 2px; background: currentColor; transition: width var(--ideasets-duration-fast) var(--ideasets-ease-out), left var(--ideasets-duration-fast) var(--ideasets-ease-out); }
.ideasets-hamburger-line--top { width: 18px; }
.ideasets-hamburger-line--mid { width: 34px; }
.ideasets-hamburger-line--bot { width: 24px; }
.ideasets-hamburger:hover .ideasets-hamburger-line { width: 34px; }

/* ==========================================================
   AMBIENCE TEMPLATE — Gradient Top Dark Overlay
   Gradient from dark (45% at top) to transparent,
   used on hero images for header text readability
   ========================================================== */
.ideasets-gradient-top-dark { background: linear-gradient(rgba(0, 0, 0, 0.45) 33%, rgba(0, 0, 0, 0) 100%); position: absolute; inset: 0; pointer-events: none; }

/* ==========================================================
   AMBIENCE TEMPLATE — Ambience Typography Presets
   Italiana serif display + Raleway body + Montserrat details;
   luxury hotel/resort inspired typography scale
   ========================================================== */
.ideasets-type-ambience-hero { font-family: var(--ideasets-ff-serif-alt); font-size: var(--ideasets-fs-180); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-normal); text-transform: uppercase; }
.ideasets-type-ambience-h1 { font-family: var(--ideasets-ff-serif-alt); font-size: var(--ideasets-fs-80); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-heading); }
.ideasets-type-ambience-h2 { font-family: var(--ideasets-ff-serif-alt); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-snug); }
.ideasets-type-ambience-body { font-family: var(--ideasets-ff-raleway); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   KOKORO TEMPLATE — Rotated -90deg Vertical Text
   Text rotated to read vertically, used for decorative
   sidebar labels and section markers
   ========================================================== */
.ideasets-text-vertical { transform: rotate(-90deg); white-space: nowrap; transform-origin: center center; }

/* ==========================================================
   KOKORO TEMPLATE — Featured Works 2-Column Layout
   Split column layout with rotation text on left,
   featured work cards on right with overlay + thumbnail
   ========================================================== */
.ideasets-featured-works { display: grid; grid-template-columns: auto 1fr; gap: var(--ideasets-space-xl); }
.ideasets-featured-works-sidebar { display: flex; align-items: center; justify-content: center; writing-mode: vertical-rl; }
.ideasets-featured-works-grid { display: flex; flex-direction: column; gap: var(--ideasets-space-lg); }
.ideasets-featured-works-card { position: relative; overflow: hidden; border-radius: var(--ideasets-radius-lg); cursor: pointer; }
.ideasets-featured-works-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-featured-works-card:hover img { transform: scale(1.05); }

/* ==========================================================
   LORUNSE TEMPLATE — All-Property Cubic Transition
   Smooth cubic-bezier transition on all properties,
   used for interactive card/button state changes
   ========================================================== */
.ideasets-transition-all-cubic { transition: all 0.3s cubic-bezier(0.44, 0, 0.56, 1) 0s; }

/* ==========================================================
   LORUNSE TEMPLATE — Dashed Border Frosted Container
   Container with dashed bottom border and frosted glass
   backdrop, used for reservation/booking bars
   ========================================================== */
.ideasets-bar-dashed-frosted { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px dashed var(--ideasets-navy-14); width: 100%; }

/* ==========================================================
   LORUNSE TEMPLATE — Hover Aspect Ratio Morph
   Element transitions from original aspect-ratio to
   square (1:1) on hover, creating shape morph effect
   ========================================================== */
.ideasets-hover-morph-square { transition: aspect-ratio var(--ideasets-duration-normal) var(--ideasets-ease-out); cursor: pointer; }
.ideasets-hover-morph-square:hover { aspect-ratio: 1; }

/* ==========================================================
   LORUNSE TEMPLATE — Hover Arrow Slide Left
   Arrow icon shifts left by -20px on hover,
   creating a pointing/invite interaction
   ========================================================== */
.ideasets-hover-arrow-slide { position: relative; cursor: pointer; }
.ideasets-hover-arrow-slide-icon { position: absolute; top: 50%; right: 0; transform: translateY(-50%); transition: left var(--ideasets-duration-fast) var(--ideasets-ease-out), right var(--ideasets-duration-fast) var(--ideasets-ease-out); }
.ideasets-hover-arrow-slide:hover .ideasets-hover-arrow-slide-icon { left: -20px; right: unset; }

/* ==========================================================
   LORUNSE TEMPLATE — Lorunse Typography Presets
   Forum serif display + Jost body text;
   boutique hotel/luxury hospitality typography
   ========================================================== */
.ideasets-type-lorunse-hero { font-family: var(--ideasets-ff-forum); font-size: var(--ideasets-fs-150); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-none); }
.ideasets-type-lorunse-h1 { font-family: var(--ideasets-ff-forum); font-size: var(--ideasets-fs-64); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-heading); }
.ideasets-type-lorunse-h2 { font-family: var(--ideasets-ff-forum); font-size: var(--ideasets-fs-4xl); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-snug); }
.ideasets-type-lorunse-body { font-family: var(--ideasets-ff-jost); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }
.ideasets-type-lorunse-detail { font-family: var(--ideasets-ff-jost); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-wide); }

/* ==========================================================
   136. FORM INPUT TOKEN SYSTEM
   ========================================================== */
:root {
  --ideasets-input-font-family: var(--ideasets-ff-secondary);
  --ideasets-input-font-size: var(--ideasets-fs-body);
  --ideasets-input-font-weight: var(--ideasets-fw-regular);
  --ideasets-input-letter-spacing: 0;
  --ideasets-input-padding: 14px 16px;
  --ideasets-input-border-width: 1px;
  --ideasets-input-border-color: var(--ideasets-border-color);
  --ideasets-input-border-radius: var(--ideasets-radius-md);
  --ideasets-input-bg: transparent;
  --ideasets-input-color: var(--ideasets-text-primary);
  --ideasets-input-placeholder-color: var(--ideasets-text-tertiary);
  --ideasets-input-focus-border-color: var(--ideasets-text-primary);
  --ideasets-input-focus-shadow: 0 0 0 2px rgba(14, 16, 17, 0.1);
  --ideasets-input-focus-transition: all 0.3s cubic-bezier(0.44, 0, 0.56, 1) 0s;
  --ideasets-input-invalid-color: var(--ideasets-accent-red);
  --ideasets-input-icon-color: var(--ideasets-text-tertiary);
  --ideasets-paragraph-spacing: 0px;
  --ideasets-text-wrap: normal;
}

.ideasets-form-input-system { font-family: var(--ideasets-input-font-family); font-size: var(--ideasets-input-font-size); font-weight: var(--ideasets-input-font-weight); letter-spacing: var(--ideasets-input-letter-spacing); padding: var(--ideasets-input-padding); border: var(--ideasets-input-border-width) solid var(--ideasets-input-border-color); border-radius: var(--ideasets-input-border-radius); background: var(--ideasets-input-bg); color: var(--ideasets-input-color); outline: none; transition: var(--ideasets-input-focus-transition); width: 100%; }
.ideasets-form-input-system::placeholder { color: var(--ideasets-input-placeholder-color); }
.ideasets-form-input-system:focus { border-color: var(--ideasets-input-focus-border-color); box-shadow: var(--ideasets-input-focus-shadow); }
.ideasets-form-input-system:invalid { border-color: var(--ideasets-input-invalid-color); }

/* ==========================================================
   137. ARCHFORM TYPOGRAPHY PRESETS
   ========================================================== */
.ideasets-type-archform-hero { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-7xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-tight); letter-spacing: var(--ideasets-ls-tight); }
.ideasets-type-archform-h1 { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-tight); }
.ideasets-type-archform-h2 { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-3xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-type-archform-h3 { font-family: var(--ideasets-ff-switzer); font-size: var(--ideasets-fs-xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-compact); }
.ideasets-type-archform-body { font-family: var(--ideasets-ff-switzer); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }
.ideasets-type-archform-label { font-family: var(--ideasets-ff-switzer); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; }

/* ==========================================================
   138. AMBIENCE MONTSERRAT DETAIL PRESET
   ========================================================== */
.ideasets-type-ambience-detail { font-family: var(--ideasets-ff-montserrat); font-size: var(--ideasets-fs-xs); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wider); text-transform: uppercase; line-height: var(--ideasets-lh-normal); }

/* ==========================================================
   139. LITHOS TYPOGRAPHY PRESETS (Host Grotesk)
   ========================================================== */
.ideasets-type-lithos-h1 { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-42); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-heading); letter-spacing: var(--ideasets-ls-snug); text-wrap: balance; }
.ideasets-type-lithos-h2 { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-35); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-between-heading); letter-spacing: var(--ideasets-ls-tightest); text-wrap: balance; }
.ideasets-type-lithos-h5 { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-card); letter-spacing: var(--ideasets-ls-tightest); }
.ideasets-type-lithos-h6 { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-17); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-between-card); }
.ideasets-type-lithos-body { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-sub); letter-spacing: var(--ideasets-ls-micro); }
.ideasets-type-lithos-label { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-none); text-transform: uppercase; }

/* ==========================================================
   140. BUILDAXA TYPOGRAPHY PRESETS (Geist)
   ========================================================== */
.ideasets-type-buildaxa-h1 { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-68); font-weight: var(--ideasets-fw-semibold); line-height: 80px; letter-spacing: var(--ideasets-ls-extreme); text-transform: uppercase; }
.ideasets-type-buildaxa-h2 { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-4xl); font-weight: var(--ideasets-fw-medium); line-height: 60px; letter-spacing: var(--ideasets-ls-ultra-tight); text-transform: uppercase; }
.ideasets-type-buildaxa-h3 { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-3xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-tight); text-transform: capitalize; }
.ideasets-type-buildaxa-h4 { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-2xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-compact); }
.ideasets-type-buildaxa-body { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-normal); }
.ideasets-type-buildaxa-body-sm { font-family: var(--ideasets-ff-geist); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-normal); color: var(--ideasets-text-secondary); }

/* ==========================================================
   141. REFIT TYPOGRAPHY PRESETS (Host Grotesk + Jakarta)
   ========================================================== */
.ideasets-type-refit-h1 { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-tight); letter-spacing: var(--ideasets-ls-tight); }
.ideasets-type-refit-h2 { font-family: var(--ideasets-ff-grotesk); font-size: var(--ideasets-fs-3xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-type-refit-body { font-family: var(--ideasets-ff-jakarta); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }
.ideasets-type-refit-label { font-family: var(--ideasets-ff-manrope); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; }

/* ==========================================================
   142. EASTALIO TYPOGRAPHY PRESETS (Inter + Manrope)
   ========================================================== */
.ideasets-type-eastalio-h1 { font-family: var(--ideasets-ff-inter); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-bold); line-height: var(--ideasets-lh-tight); letter-spacing: var(--ideasets-ls-tight); }
.ideasets-type-eastalio-h2 { font-family: var(--ideasets-ff-inter); font-size: var(--ideasets-fs-3xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-snug); }
.ideasets-type-eastalio-body { font-family: var(--ideasets-ff-manrope); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   143. ROYAL TYPOGRAPHY PRESETS (Marcellus + Inter)
   ========================================================== */
.ideasets-type-royal-h1 { font-family: var(--ideasets-ff-marcellus); font-size: var(--ideasets-fs-6xl); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-tight); }
.ideasets-type-royal-h2 { font-family: var(--ideasets-ff-marcellus); font-size: var(--ideasets-fs-4xl); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-snug); }
.ideasets-type-royal-body { font-family: var(--ideasets-ff-inter); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   144. KOKORO TYPOGRAPHY PRESETS (Marcellus + Manrope)
   ========================================================== */
.ideasets-type-kokoro-h1 { font-family: var(--ideasets-ff-marcellus); font-size: var(--ideasets-fs-7xl); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-crush); letter-spacing: var(--ideasets-ls-tight); }
.ideasets-type-kokoro-h2 { font-family: var(--ideasets-ff-marcellus); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-tight); }
.ideasets-type-kokoro-body { font-family: var(--ideasets-ff-manrope); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }

/* ==========================================================
   145. SVG MASK / ICON UTILITIES
   ========================================================== */
.ideasets-icon-mask { -webkit-mask: var(--ideasets-icon-mask); mask: var(--ideasets-icon-mask); aspect-ratio: 1; display: block; background-color: currentColor; }
.ideasets-icon-mask-sm { width: 16px; }
.ideasets-icon-mask-md { width: 20px; }
.ideasets-icon-mask-lg { width: 24px; }
.ideasets-icon-mask-xl { width: 32px; }
.ideasets-icon-mask-2xl { width: 48px; }
.ideasets-icon-mask-hero { width: 100px; }

.ideasets-icon-arrow-right { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E"); }
.ideasets-icon-arrow-left { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E"); }
.ideasets-icon-plus { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ideasets-icon-minus { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.ideasets-icon-chevron-down { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.ideasets-icon-star { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); }
.ideasets-icon-play { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='currentColor'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
.ideasets-icon-menu { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 12h18M3 6h18M3 18h18'/%3E%3C/svg%3E"); }
.ideasets-icon-close { --ideasets-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E"); }

/* ==========================================================
   146. ADDITIONAL GRADIENT OVERLAYS (Refit/Buildaxa)
   ========================================================== */
.ideasets-overlay-gradient-refit-top { background: linear-gradient(180deg, #101014 0%, transparent 100%); }
.ideasets-overlay-gradient-refit-bottom { background: linear-gradient(transparent 0%, #101014 60%); }
.ideasets-overlay-gradient-globe { background: linear-gradient(#fa771a30 -35%, #fe791a33 -27%, #20202000 22%); }

/* ==========================================================
   147. MINMAX GRID PATTERN
   ========================================================== */
.ideasets-grid-minmax-2 { display: grid; grid-template-columns: repeat(2, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--ideasets-space-lg); }
.ideasets-grid-minmax-3 { display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--ideasets-space-lg); }
.ideasets-grid-minmax-4 { display: grid; grid-template-columns: repeat(4, minmax(50px, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: var(--ideasets-space-lg); }

/* ==========================================================
   148. ADDITIONAL FILTER UTILITIES
   ========================================================== */
.ideasets-filter-contrast-invert { filter: contrast(1) invert(0); transition: filter var(--ideasets-duration-normal); }
.ideasets-filter-contrast-invert:hover { filter: contrast(1.1) invert(0); }
.ideasets-filter-saturate { filter: saturate(1.2); }
.ideasets-filter-sepia { filter: sepia(0.15); }

/* ==========================================================
   149. TICKER / MARQUEE CONFIGURATION TOKENS
   ========================================================== */
.ideasets-ticker-configurable { --ideasets-ticker-gap: 48px; --ideasets-ticker-speed: 30s; width: 100%; overflow: hidden; white-space: nowrap; }
.ideasets-ticker-configurable .ideasets-ticker-track { display: inline-flex; gap: var(--ideasets-ticker-gap); animation: ideasets-marquee var(--ideasets-ticker-speed) linear infinite; flex-shrink: 0; }

/* ==========================================================
   150. GREENLLY TYPOGRAPHY PRESETS (Inter Display)
   ========================================================== */
.ideasets-type-greenlly-h1 { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-5xl); font-weight: var(--ideasets-fw-semibold); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-tight); }
.ideasets-type-greenlly-h2 { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-3xl); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-snug); }
.ideasets-type-greenlly-body { font-family: var(--ideasets-ff-inter); font-size: var(--ideasets-fs-body); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-body); }
.ideasets-type-greenlly-label { font-family: var(--ideasets-ff-inter); font-size: var(--ideasets-fs-sm); font-weight: var(--ideasets-fw-medium); letter-spacing: var(--ideasets-ls-wide); text-transform: uppercase; }

/* ==========================================================
   151. MIREL TYPOGRAPHY PRESETS (Mona Sans + Inter Display)
   ========================================================== */
.ideasets-type-mirel-hero { font-family: var(--ideasets-ff-mona); font-size: var(--ideasets-fs-28); font-weight: var(--ideasets-fw-black); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-type-mirel-h1 { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-80); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-type-mirel-h2 { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-35); font-weight: var(--ideasets-fw-medium); line-height: var(--ideasets-lh-none); letter-spacing: var(--ideasets-ls-snug); }
.ideasets-type-mirel-body { font-family: var(--ideasets-ff-display-alt); font-size: var(--ideasets-fs-lg); font-weight: var(--ideasets-fw-regular); line-height: var(--ideasets-lh-snug); letter-spacing: var(--ideasets-ls-snug); }

/* ==========================================================
   152. ADDITIONAL RESPONSIVE — New Typography Presets
   ========================================================== */
@media (max-width: 1199.98px) {
  .ideasets-type-archform-hero { font-size: var(--ideasets-fs-5xl); }
  .ideasets-type-archform-h1 { font-size: var(--ideasets-fs-4xl); }
  .ideasets-type-lithos-h1 { font-size: var(--ideasets-fs-34); }
  .ideasets-type-lithos-h2 { font-size: var(--ideasets-fs-28); }
  .ideasets-type-buildaxa-h1 { font-size: var(--ideasets-fs-60); line-height: 72px; }
  .ideasets-type-buildaxa-h2 { font-size: var(--ideasets-fs-3xl); line-height: 48px; }
  .ideasets-type-refit-h1 { font-size: var(--ideasets-fs-4xl); }
  .ideasets-type-greenlly-h1 { font-size: var(--ideasets-fs-4xl); }
  .ideasets-type-mirel-h1 { font-size: var(--ideasets-fs-60); }
  .ideasets-type-mirel-h2 { font-size: var(--ideasets-fs-28); }
}

@media (max-width: 809.98px) {
  .ideasets-type-archform-hero { font-size: var(--ideasets-fs-3xl); }
  .ideasets-type-archform-h1 { font-size: var(--ideasets-fs-2xl); }
  .ideasets-type-archform-h2 { font-size: var(--ideasets-fs-xl); }
  .ideasets-type-lithos-h1 { font-size: var(--ideasets-fs-27); }
  .ideasets-type-lithos-h2 { font-size: var(--ideasets-fs-22); }
  .ideasets-type-buildaxa-h1 { font-size: var(--ideasets-fs-36); line-height: 44px; }
  .ideasets-type-buildaxa-h2 { font-size: var(--ideasets-fs-2xl); line-height: 40px; }
  .ideasets-type-buildaxa-h3 { font-size: var(--ideasets-fs-xl); line-height: 32px; }
  .ideasets-type-refit-h1 { font-size: var(--ideasets-fs-2xl); }
  .ideasets-type-refit-h2 { font-size: var(--ideasets-fs-xl); }
  .ideasets-type-greenlly-h1 { font-size: var(--ideasets-fs-2xl); }
  .ideasets-type-mirel-h1 { font-size: var(--ideasets-fs-3xl); }
  .ideasets-type-mirel-h2 { font-size: var(--ideasets-fs-xl); }
  .ideasets-type-eastalio-h1 { font-size: var(--ideasets-fs-2xl); }
  .ideasets-type-royal-h1 { font-size: var(--ideasets-fs-3xl); }
  .ideasets-type-kokoro-h1 { font-size: var(--ideasets-fs-4xl); }
  .ideasets-type-kokoro-h2 { font-size: var(--ideasets-fs-2xl); }
  .ideasets-type-ambience-hero { font-size: var(--ideasets-fs-80); }
  .ideasets-grid-minmax-4 { grid-template-columns: repeat(2, minmax(50px, 1fr)); }
  .ideasets-icon-mask-hero { width: 64px; }
}

/* ==========================================================
   153. COLOR-SCHEME DECLARATION
   ========================================================== */
html { color-scheme: light dark; }
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

/* ==========================================================
   154. LINK UNDERLINE SHRINK ON HOVER (Ayano Pattern)
   ========================================================== */
.ideasets-link-partial-shrink { position: relative; display: inline-flex; flex-direction: column; gap: 2px; cursor: pointer; }
.ideasets-link-partial-shrink::after { content: ''; width: 100%; height: 1px; background: currentColor; transition: width var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-link-partial-shrink:hover::after { width: 20px; }

/* ==========================================================
   155. HERO OVERLAY WITH BLUR (Intorida Pattern)
   ========================================================== */
.ideasets-hero-overlay-blur { position: absolute; inset: 0; z-index: 1; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); background: rgba(0, 0, 0, 0.65); }
.ideasets-hero-overlay-blur-heavy { position: absolute; inset: 0; z-index: 1; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); background: rgba(0, 0, 0, 0.7); }

/* ==========================================================
   156. FORM INPUT ACCENT FOCUS VARIANTS
   ========================================================== */
.ideasets-form-input-focus-gold:focus { border-color: var(--ideasets-accent-gold-deep); box-shadow: 0 0 0 2px rgba(151, 110, 43, 0.15); }
.ideasets-form-input-focus-teal:focus { border-color: var(--ideasets-accent-teal); box-shadow: 0 0 0 2px rgba(54, 90, 105, 0.15); }
.ideasets-form-input-focus-red:focus { border-color: var(--ideasets-accent-red); box-shadow: 0 0 0 2px rgba(255, 34, 68, 0.15); }

/* ==========================================================
   157. STICKY OFFSET UTILITIES
   ========================================================== */
.ideasets-sticky-offset-sm { position: sticky; top: 80px; }
.ideasets-sticky-offset-md { position: sticky; top: 105px; }
.ideasets-sticky-offset-lg { position: sticky; top: 120px; }

/* ==========================================================
   158. OVERFLOW CLIP UTILITY
   ========================================================== */
.ideasets-overflow-clip { overflow: clip; }
@supports not (overflow: clip) { .ideasets-overflow-clip { overflow: hidden; } }

/* ==========================================================
   159. PSEUDO-ELEMENT BORDER OVERLAY SYSTEM
   ========================================================== */
[data-border]::after { content: ''; border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0); border-color: var(--border-color, transparent); border-style: var(--border-style, none); border-radius: inherit; corner-shape: inherit; pointer-events: none; position: absolute; inset: 0; box-sizing: border-box; }
.ideasets-border-overlay { --border-top-width: 1px; --border-right-width: 1px; --border-bottom-width: 1px; --border-left-width: 1px; --border-color: var(--ideasets-border-color); --border-style: solid; position: relative; }
.ideasets-border-overlay-dashed { --border-style: dashed; }
.ideasets-border-overlay-bottom-only { --border-top-width: 0; --border-right-width: 0; --border-left-width: 0; --border-bottom-width: 1px; }

/* ==========================================================
   160. 2-LINE HAMBURGER MENU (Intorida Pattern)
   ========================================================== */
.ideasets-hamburger-2line { position: relative; width: 32px; height: 32px; cursor: pointer; }
.ideasets-hamburger-2line span { display: block; width: 20px; height: 2px; background: currentColor; position: absolute; left: 6px; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out), top var(--ideasets-duration-normal) var(--ideasets-ease-out), bottom var(--ideasets-duration-normal) var(--ideasets-ease-out), width var(--ideasets-duration-normal); }
.ideasets-hamburger-2line span:first-child { top: 10px; }
.ideasets-hamburger-2line span:last-child { bottom: 10px; width: 16px; }
.ideasets-hamburger-2line.is-open span:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
.ideasets-hamburger-2line.is-open span:last-child { bottom: calc(50% - 1px); width: 20px; transform: rotate(-45deg); }

/* ==========================================================
   161. BUTTON TEXT-SWAP HOVER (Intorida Pattern)
   ========================================================== */
.ideasets-btn-text-swap { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
.ideasets-btn-text-swap-default { transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-btn-text-swap-hover { position: absolute; top: 100%; transition: transform var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-btn-text-swap:hover .ideasets-btn-text-swap-default { transform: translateY(-100%); }
.ideasets-btn-text-swap:hover .ideasets-btn-text-swap-hover { transform: translateY(-100%); }

/* ==========================================================
   162. STAGGERED / WATERFALL COLUMN LAYOUT (Greenlly Pattern)
   ========================================================== */
.ideasets-waterfall { display: flex; gap: var(--ideasets-space-lg); }
.ideasets-waterfall > :nth-child(1) { padding-top: 0; }
.ideasets-waterfall > :nth-child(2) { padding-top: 86px; }
.ideasets-waterfall > :nth-child(3) { padding-top: 172px; }
.ideasets-waterfall > :nth-child(4) { padding-top: 258px; }
.ideasets-waterfall > * { flex: 1; }

/* ==========================================================
   163. SLIDING CTA BUTTON HOVER (Greenlly Pattern)
   ========================================================== */
.ideasets-btn-slide-icon { position: relative; overflow: hidden; }
.ideasets-btn-slide-icon-el { position: absolute; bottom: -100%; left: 50%; transform: translateX(-50%); transition: bottom var(--ideasets-duration-normal) var(--ideasets-ease-out); }
.ideasets-btn-slide-icon:hover .ideasets-btn-slide-icon-el { bottom: 50%; transform: translate(-50%, 50%); }

/* ==========================================================
   164. 1320PX MEDIA QUERY (Intorida Container)
   ========================================================== */
.ideasets-container-intorida { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--ideasets-container-padding); }

@media (max-width: 1319.98px) {
  .ideasets-container-intorida { max-width: 100%; }
  .ideasets-type-intorida-hero { font-size: var(--ideasets-fs-80); }
  .ideasets-type-intorida-h1 { font-size: var(--ideasets-fs-60); }
}

/* ==========================================================
   165. RESPONSIVE AYANO TYPOGRAPHY RAMP
   ========================================================== */
@media (max-width: 1599.98px) {
  .ideasets-type-ayano-h1 { font-size: var(--ideasets-fs-56); }
}
@media (max-width: 1199.98px) {
  .ideasets-type-ayano-h1 { font-size: var(--ideasets-fs-4xl); }
  .ideasets-type-ayano-h3 { font-size: var(--ideasets-fs-26); }
}
@media (max-width: 809.98px) {
  .ideasets-type-ayano-h1 { font-size: var(--ideasets-fs-3xl); }
  .ideasets-type-ayano-h3 { font-size: var(--ideasets-fs-xl); }
  .ideasets-type-intorida-hero { font-size: var(--ideasets-fs-4xl); }
  .ideasets-type-intorida-h1 { font-size: var(--ideasets-fs-3xl); }
  .ideasets-type-intorida-h2 { font-size: var(--ideasets-fs-xl); }
  .ideasets-type-lorunse-hero { font-size: var(--ideasets-fs-80); }
  .ideasets-type-lorunse-h1 { font-size: var(--ideasets-fs-3xl); }
  .ideasets-waterfall { flex-direction: column; }
  .ideasets-waterfall > * { padding-top: 0 !important; }
  .ideasets-hamburger-2line span { width: 20px; }
  .ideasets-hamburger-2line span:last-child { width: 20px; }
}

/* ==========================================================
   166. 2-ROW GRID TEMPLATE UTILITIES
   ========================================================== */
.ideasets-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
.ideasets-grid-auto-rows { grid-auto-rows: minmax(0, 1fr); }

/* ==========================================================
   167. PLACE-CONTENT SHORTHAND UTILITIES
   ========================================================== */
.ideasets-place-center { place-content: center; }
.ideasets-place-start-center { place-content: center flex-start; }
.ideasets-place-end-between { place-content: flex-end space-between; }

/* ==========================================================
   168. IMAGE HOVER VIA WIDTH/HEIGHT (Ayano Alt Pattern)
   ========================================================== */
.ideasets-img-zoom-wh { overflow: hidden; }
.ideasets-img-zoom-wh img { width: 100%; height: 100%; object-fit: cover; transition: width var(--ideasets-duration-slow) var(--ideasets-ease-out), height var(--ideasets-duration-slow) var(--ideasets-ease-out); }
.ideasets-img-zoom-wh:hover img { width: 105%; height: 105%; }

/* ==========================================================
   169. TEXT OVERFLOW / TRUNCATION UTILITIES
   ========================================================== */
.ideasets-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ideasets-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ideasets-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ideasets-line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ==========================================================
   170. COLUMN LAYOUT UTILITIES
   ========================================================== */
.ideasets-columns-2 { column-count: 2; column-gap: var(--ideasets-space-xl); }
.ideasets-columns-3 { column-count: 3; column-gap: var(--ideasets-space-xl); }
.ideasets-columns-4 { column-count: 4; column-gap: var(--ideasets-space-lg); }
.ideasets-break-inside-avoid { break-inside: avoid; }

/* ==========================================================
   171. OBJECT-POSITION UTILITIES
   ========================================================== */
.ideasets-object-top { object-position: top; }
.ideasets-object-bottom { object-position: bottom; }
.ideasets-object-left { object-position: left; }
.ideasets-object-right { object-position: right; }
.ideasets-object-center { object-position: center; }

/* ==========================================================
   172. ISOLATION / STACKING CONTEXT
   ========================================================== */
.ideasets-isolate { isolation: isolate; }

/* ==========================================================
   173. TEXT SHADOW UTILITIES
   ========================================================== */
.ideasets-text-shadow-sm { text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.ideasets-text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.ideasets-text-shadow-lg { text-shadow: 0 4px 8px rgba(0,0,0,0.5); }
.ideasets-text-shadow-none { text-shadow: none; }

/* ==========================================================
   174. WORD-BREAK / HYPHENS
   ========================================================== */
.ideasets-break-words { word-break: break-word; overflow-wrap: break-word; }
.ideasets-break-all { word-break: break-all; }
.ideasets-hyphens { hyphens: auto; -webkit-hyphens: auto; }

/* ==========================================================
   175. TEXT-INDENT
   ========================================================== */
.ideasets-indent-md { text-indent: 2em; }
.ideasets-indent-lg { text-indent: 4em; }
.ideasets-indent-xl { text-indent: 6em; }

/* ==========================================================
   176. TAB-SIZE
   ========================================================== */
.ideasets-tab-4 { tab-size: 4; -moz-tab-size: 4; }

/* ==========================================================
   177. TOUCH / INTERACTION UTILITIES
   ========================================================== */
.ideasets-touch-none { touch-action: none; }
.ideasets-touch-pan-x { touch-action: pan-x; }
.ideasets-touch-pan-y { touch-action: pan-y; }
.ideasets-touch-manipulation { touch-action: manipulation; }
.ideasets-tap-transparent { -webkit-tap-highlight-color: transparent; }

/* ==========================================================
   178. TABLE UTILITIES
   ========================================================== */
.ideasets-table { display: table; width: 100%; }
.ideasets-table-fixed { table-layout: fixed; }
.ideasets-table-auto { table-layout: auto; }
.ideasets-border-collapse { border-collapse: collapse; }
.ideasets-border-separate { border-collapse: separate; }
.ideasets-align-middle { vertical-align: middle; }
.ideasets-align-top { vertical-align: top; }
.ideasets-align-bottom { vertical-align: bottom; }

/* ==========================================================
   179. PLACE-ITEMS UTILITIES
   ========================================================== */
.ideasets-place-items-center { place-items: center; }
.ideasets-place-items-start { place-items: start; }
.ideasets-place-items-end { place-items: end; }
.ideasets-place-items-stretch { place-items: stretch; }

/* ==========================================================
   180. LOGICAL PROPERTY UTILITIES (padding-inline / block)
   ========================================================== */
.ideasets-px-inline-sm { padding-inline: var(--ideasets-space-sm); }
.ideasets-px-inline-md { padding-inline: var(--ideasets-space-md); }
.ideasets-px-inline-lg { padding-inline: var(--ideasets-space-lg); }
.ideasets-px-inline-xl { padding-inline: var(--ideasets-space-xl); }
.ideasets-py-block-sm { padding-block: var(--ideasets-space-sm); }
.ideasets-py-block-md { padding-block: var(--ideasets-space-md); }
.ideasets-py-block-lg { padding-block: var(--ideasets-space-lg); }
.ideasets-py-block-xl { padding-block: var(--ideasets-space-xl); }

/* ==========================================================
   181. DYNAMIC VIEWPORT HEIGHT (dvh)
   ========================================================== */
.ideasets-min-h-dvh { min-height: 100dvh; }
.ideasets-h-dvh { height: 100dvh; }

/* ==========================================================
   182. FIT-CONTENT WIDTH
   ========================================================== */
.ideasets-w-fit { width: fit-content; }
.ideasets-w-max { width: max-content; }

/* ==========================================================
   183. BACKGROUND-ATTACHMENT (Parallax BG)
   ========================================================== */
.ideasets-bg-fixed { background-attachment: fixed; }
.ideasets-bg-local { background-attachment: local; }

/* ==========================================================
   184. ANIMATION FILL-MODE
   ========================================================== */
.ideasets-fill-forwards { animation-fill-mode: forwards; }
.ideasets-fill-both { animation-fill-mode: both; }

/* ==========================================================
   185. PREFERS-REDUCED-MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ideasets-marquee-track,
  .ideasets-ticker-track,
  .ideasets-brand-marquee-track { animation: none !important; }
  .ideasets-preloader { display: none !important; }
}

/* ==========================================================
   186. ADDITIONAL GRADIENT OVERLAYS (from templates)
   ========================================================== */
.ideasets-overlay-fade-bottom-dark { background: linear-gradient(transparent 0%, #0e1011 100%); }
.ideasets-overlay-fade-top-dark { background: linear-gradient(180deg, #101014 0%, transparent 100%); }
.ideasets-overlay-fade-bottom-60 { background: linear-gradient(transparent 0%, #101014 60%); }
.ideasets-overlay-angled-dark { background: linear-gradient(248deg, rgba(0,0,0,0.4) 0%, #000 74%); }
.ideasets-overlay-glow-orange { background: linear-gradient(rgba(250,119,26,0.19) -35%, rgba(254,121,26,0.2) -27%, transparent 22%); }

/* ==========================================================
   187. ADDITIONAL BOX SHADOW PATTERNS
   ========================================================== */
.ideasets-shadow-card-subtle { box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
.ideasets-shadow-elevated { box-shadow: rgba(0,0,0,0.1) 0px 2px 4px, rgba(0,0,0,0.05) 0px 1px 0px, rgba(255,255,255,0.15) 0px 0px 0px 1px inset; }

/* ==========================================================
   188. ADDITIONAL BACKDROP-BLUR VARIANTS
   ========================================================== */
.ideasets-backdrop-blur-2 { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.ideasets-backdrop-blur-12 { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ideasets-backdrop-blur-15 { backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); }

/* ==========================================================
   189. BRIGHTNESS FILTER VARIANTS
   ========================================================== */
.ideasets-brightness-60 { filter: brightness(0.6); }
.ideasets-brightness-70 { filter: brightness(0.7); }
.ideasets-brightness-80 { filter: brightness(0.8); }
.ideasets-brightness-110 { filter: brightness(1.1); }
.ideasets-brightness-120 { filter: brightness(1.2); }

/* ==========================================================
   190. SVG MASK ICONS (from Framer templates)
   ========================================================== */
.ideasets-mask-icon-check {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
}
.ideasets-mask-icon-search {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16 16l4 4'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
}
.ideasets-mask-icon-mail {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 7L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='M22 7l-10 7L2 7'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
}
.ideasets-mask-icon-phone {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6A19.79 19.79 0 012.12 4.18 2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
}
.ideasets-mask-icon-location {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
}
.ideasets-mask-icon-calendar {
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  background-color: currentColor;
}

/* ==========================================================
   191. HORIZONTAL SCROLL CONTAINER
   ========================================================== */
.ideasets-scroll-x {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ideasets-scroll-x::-webkit-scrollbar { display: none; }
.ideasets-scroll-snap-x {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ideasets-scroll-snap-x::-webkit-scrollbar { display: none; }
.ideasets-snap-center { scroll-snap-align: center; }
.ideasets-snap-start { scroll-snap-align: start; }

/* ==========================================================
   192. GRID TEMPLATE PATTERNS (from Framer templates)
   ========================================================== */
.ideasets-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(50px, 1fr)); gap: var(--ideasets-space-lg); }
.ideasets-grid-6 { display: grid; grid-template-columns: repeat(6, minmax(50px, 1fr)); gap: var(--ideasets-space-lg); }
.ideasets-grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ideasets-space-md); }
.ideasets-grid-subgrid { display: grid; grid-template-columns: subgrid; }

/* ==========================================================
   193. ASPECT-RATIO UTILITIES (common Framer ratios)
   ========================================================== */
.ideasets-aspect-1 { aspect-ratio: 1 / 1; }
.ideasets-aspect-4-3 { aspect-ratio: 4 / 3; }
.ideasets-aspect-3-4 { aspect-ratio: 3 / 4; }
.ideasets-aspect-3-2 { aspect-ratio: 3 / 2; }
.ideasets-aspect-2-3 { aspect-ratio: 2 / 3; }
.ideasets-aspect-5-4 { aspect-ratio: 5 / 4; }
.ideasets-aspect-9-16 { aspect-ratio: 9 / 16; }
.ideasets-aspect-21-9 { aspect-ratio: 21 / 9; }

/* ==========================================================
   194. TRANSITION TIMING VARIANTS
   ========================================================== */
.ideasets-transition-none { transition: none; }
.ideasets-transition-fast { transition: all 0.15s var(--ideasets-ease-out); }
.ideasets-transition-normal { transition: all 0.3s var(--ideasets-ease-out); }
.ideasets-transition-slow { transition: all 0.6s var(--ideasets-ease-out); }
.ideasets-transition-colors { transition: color 0.3s, background-color 0.3s, border-color 0.3s; }
.ideasets-transition-transform { transition: transform 0.3s var(--ideasets-ease-out); }
.ideasets-transition-opacity { transition: opacity 0.3s var(--ideasets-ease-out); }

/* ==========================================================
   48. PRINT STYLES
   ========================================================== */
@media print {
  .ideasets-nav, .ideasets-cursor, .ideasets-scroll-progress,
  .ideasets-preloader, .ideasets-page-transition, .ideasets-corner-dot { display: none !important; }
  body { background: #000 !important; color: inherit !important; }
  .ideasets-hero { min-height: 210mm !important; height: 210mm !important; page-break-after: always; }
  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
}