body.skx-lux { --ig-dark: var(--c-ink); --ig-body: var(--c-ink); --ig-muted: var(--c-mute); --ig-cream: var(--c-linen); --ig-warm: var(--c-beige);
--ig-white: var(--c-ivory); --ig-accent: var(--c-brass-text); --ig-serif: var(--font-display); --ig-sans: var(--font-sans); }
.skx-lux .ig-page { background: var(--c-linen); color: var(--c-ink); font: var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans); }
.skx-lux .ig-page *, .skx-lux .ig-page *::before, .skx-lux .ig-page *::after { box-sizing: border-box; }
.skx-lux .ig-page :where(h1, h2, h3, p, div) { margin: 0; }
.skx-lux .ig-page > section { padding: var(--section-y-sm) var(--gutter); } .skx-lux :is(.ig-hero-label, .ig-section-label, .ig-dest-label) {
display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-5);
font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--c-mute);
}
.skx-lux :is(.ig-learn, .ig-proof, .ig-how, .ig-cta) .ig-section-label, .skx-lux .ig-hero-label { justify-content: center; }
.skx-lux :is(.ig-learn, .ig-proof, .ig-how, .ig-cta) .ig-section-label::before, .skx-lux :is(.ig-learn, .ig-proof, .ig-how, .ig-cta) .ig-section-label::after,
.skx-lux .ig-hero-label::before { content: ""; width: 2rem; height: 1px; background: var(--c-brass); } .skx-lux .ig-learn .ig-section-label::before, .skx-lux .ig-proof .ig-section-label::before, .skx-lux .ig-how .ig-section-label::before, .skx-lux .ig-cta .ig-section-label::before {
width: auto; height: auto; background: none; padding-left: calc(2rem + var(--sp-3));
background: linear-gradient(var(--c-brass), var(--c-brass)) left center / 2rem 1px no-repeat;
font: italic var(--fw-regular) var(--fs-h4)/1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--c-brass-text); font-variation-settings: "opsz" 16;
}
.skx-lux .ig-learn .ig-section-label::before { content: "I"; }
.skx-lux .ig-proof .ig-section-label::before { content: "II"; color: var(--c-brass-light); }
.skx-lux .ig-how .ig-section-label::before { content: "III"; }
.skx-lux .ig-cta .ig-section-label::before { content: "IV"; color: var(--c-brass-light); }
.skx-lux .ig-section-title {
font: var(--fw-regular) var(--fs-h2)/var(--lh-heading) var(--font-display); letter-spacing: var(--tr-heading); color: var(--c-ink);
text-align: center; max-width: 22ch; margin: 0 auto var(--sp-4) !important; text-wrap: balance;
}
.skx-lux .ig-section-desc { text-align: center; color: var(--c-ink); max-width: var(--measure-intro); margin: 0 auto !important; } .skx-lux .ig-hero {
position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--c-espresso); color: var(--c-linen);
padding: calc(var(--header-h-mobile) + var(--sp-5)) var(--gutter) var(--sp-8) !important;
--focus: var(--c-brass-light); --focus-halo: var(--c-espresso);
}
.skx-lux .ig-hero-bg {
position: relative; inset: auto; aspect-ratio: 16 / 10; margin-bottom: var(--sp-6);
background: url(//skhai.com/wp-content/uploads/2025/11/Domaine-Agape-Mykonos-by-SKHAI-1200x683.jpg) 50% 60% / cover no-repeat var(--c-umber); opacity: 1;
}
.skx-lux .ig-hero-inner { position: relative; z-index: 1; display: grid; gap: var(--sp-6); }
@media (min-width: 992px) {
.skx-lux .ig-hero {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(3rem, 5vw, 6rem);
padding: calc(var(--header-h) + var(--sp-6)) max(var(--gutter), calc((100% - var(--container-max)) / 2 + var(--gutter))) var(--sp-9) !important;
}
.skx-lux .ig-hero-bg { grid-column: 2; grid-row: 1; aspect-ratio: auto; min-height: 100%; max-height: 860px; margin: 0; background-position: 58% 50%; }
.skx-lux .ig-hero-inner { grid-column: 1; grid-row: 1; align-content: start; }
}
.skx-lux .ig-hero-content { color: var(--c-linen); }
.skx-lux .ig-hero-label { justify-content: flex-start; color: var(--c-brass-light); }
.skx-lux .ig-hero-title {
font: var(--fw-regular) clamp(2.75rem, 1.6rem + 2.6vw, 4.5rem)/var(--lh-tight) var(--font-display); letter-spacing: var(--tr-display);
color: var(--c-linen); max-width: 19ch; margin-bottom: var(--sp-5) !important; text-wrap: balance;
}
.skx-lux .ig-hero-title em { color: var(--c-brass-light); font-style: italic; }
.skx-lux .ig-hero-desc { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-taupe); max-width: 34rem; }
.skx-lux .ig-hero-stats { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-7); margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid rgba(239, 232, 222, .5); }
.skx-lux .ig-stat-num { font: var(--fw-regular) clamp(2rem, 1.7rem + 1vw, 2.75rem)/1.05 var(--font-display); color: var(--c-linen); font-variation-settings: "opsz" 16; font-variant-numeric: lining-nums; }
.skx-lux .ig-stat-label { margin-top: var(--sp-2); font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-taupe); } .skx-lux .ig-form-card {
display: grid; gap: var(--sp-4); background: var(--c-ivory); color: var(--c-ink); padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); border-top: 1px solid var(--c-brass);
--focus: var(--c-brass-text); --focus-halo: var(--c-ivory); text-align: left;
}
.skx-lux .ig-form-title { font: var(--fw-regular) var(--fs-h3)/1.2 var(--font-display); color: var(--c-ink); }
.skx-lux .ig-form-sub { font-size: var(--fs-small); color: var(--c-mute); margin-top: calc(-1 * var(--sp-2)) !important; }
.skx-lux .ig-form-row { display: grid; gap: var(--sp-4); }
@media (min-width: 576px) { .skx-lux .ig-form-row { grid-template-columns: 1fr 1fr; } }
.skx-lux .ig-form-label { display: block; margin-bottom: var(--sp-2); font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-ink); }
.skx-lux :is(.ig-form-input, .ig-form-select) {
width: 100%; min-height: 52px; padding: 0 var(--sp-4); border: 1px solid var(--c-line-strong); border-radius: 0; background-color: var(--c-white); color: var(--c-ink);
font: var(--fw-regular) max(16px, var(--fs-body))/1.4 var(--font-sans); outline: none;
}
.skx-lux .ig-form-input::placeholder { color: var(--c-mute); opacity: 1; }
.skx-lux :is(.ig-form-input, .ig-form-select):focus { border-color: var(--c-brass-text); }
.skx-lux .ig-form-select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
background-image: linear-gradient(45deg, transparent 50%, var(--c-ink) 50%), linear-gradient(135deg, var(--c-ink) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.skx-lux .ig-form-btn {
display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: 0 1.75rem; cursor: pointer;
background: var(--c-brass); color: var(--c-ink); border: 1px solid var(--c-brass-line); border-radius: 0;
font: var(--fw-medium) var(--fs-small)/1.2 var(--font-sans); letter-spacing: var(--tr-button); text-transform: uppercase;
transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.skx-lux .ig-form-btn:hover { background: var(--c-espresso); color: var(--c-linen); border-color: var(--c-espresso); }
.skx-lux .ig-form-btn:disabled { cursor: progress; }
.skx-lux .ig-form-btn[style*="background"] { color: var(--c-white) !important; border-color: transparent; } .skx-lux .ig-form-msg { display: none; font-size: var(--fs-small); line-height: 1.6; }
.skx-lux .ig-form-msg a { display: inline-flex !important; align-items: center; min-height: 44px; }
.skx-lux .ig-form-fine { font-size: var(--fs-small); color: var(--c-mute); } .skx-lux .ig-learn-inner, .skx-lux .ig-how-inner { max-width: var(--container-max); margin: 0 auto; }
.skx-lux .ig-lessons { margin-top: var(--sp-8); border-bottom: 1px solid var(--c-sand); }
.skx-lux .ig-lesson { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sp-4); padding-block: var(--sp-5); border-top: 1px solid var(--c-sand); }
@media (min-width: 768px) {
.skx-lux .ig-lesson { grid-template-columns: 4rem minmax(0, 1fr); }
.skx-lux .ig-lesson > div:last-child { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-6); align-items: baseline; }
}
.skx-lux .ig-lesson-num { font: italic var(--fw-regular) var(--fs-h4)/1.3 var(--font-display); color: var(--c-brass-text); font-variation-settings: "opsz" 16; font-variant-numeric: lining-nums; }
.skx-lux .ig-lesson-title { font: var(--fw-regular) var(--fs-h4)/1.3 var(--font-display); color: var(--c-ink); }
.skx-lux .ig-lesson-desc { margin-top: var(--sp-1); color: var(--c-mute); }
@media (min-width: 768px) { .skx-lux .ig-lesson-desc { margin-top: 0; } } .skx-lux .ig-proof { background: var(--c-espresso); color: var(--c-linen); text-align: center; --focus: var(--c-brass-light); --focus-halo: var(--c-espresso); }
.skx-lux .ig-proof-inner { max-width: var(--container-max); margin: 0 auto; }
.skx-lux .ig-proof .ig-section-label[style] { color: var(--c-taupe) !important; }
.skx-lux .ig-proof-quote { max-width: 46rem; margin: 0 auto var(--sp-5) !important; font: italic var(--fw-regular) var(--fs-h3)/1.35 var(--font-display); color: var(--c-linen); text-wrap: balance; }
.skx-lux .ig-proof-quote + div[style] { color: var(--c-brass-light) !important; font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans) !important; letter-spacing: var(--tr-label) !important; }
.skx-lux .ig-proof-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-5); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-brass); text-align: left; }
@media (min-width: 768px) { .skx-lux .ig-proof-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } .skx-lux .ig-proof-stats > div + div { padding-left: var(--sp-5); border-left: 1px solid rgba(239, 232, 222, .28); } }
.skx-lux .ig-proof-stat-num { font: var(--fw-regular) var(--fs-numeral)/1.05 var(--font-display); color: var(--c-linen); font-variation-settings: "opsz" 16; font-variant-numeric: lining-nums; }
.skx-lux .ig-proof-stat-label { margin-top: var(--sp-2); font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--c-taupe); } .skx-lux .ig-how { background: var(--c-beige); }
.skx-lux .ig-how .ig-section-desc { color: var(--c-ink); }
.skx-lux .ig-steps { display: grid; gap: var(--sp-7); margin-top: var(--sp-8); }
@media (min-width: 768px) { .skx-lux .ig-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); } }
.skx-lux .ig-step-num { display: flex; align-items: center; gap: var(--sp-3); font: italic var(--fw-regular) var(--fs-h3)/1 var(--font-display); color: var(--c-brass-text); font-variation-settings: "opsz" 16; font-variant-numeric: lining-nums; }
.skx-lux .ig-step-num::after { content: ""; width: 2rem; height: 1px; background: var(--c-brass); }
.skx-lux .ig-step-title { margin-top: var(--sp-5) !important; font: var(--fw-regular) var(--fs-h3)/1.2 var(--font-display); color: var(--c-ink); }
.skx-lux .ig-step-desc { margin-top: var(--sp-3) !important; color: var(--c-mute-on-beige); } .skx-lux .ig-cta { background: var(--c-espresso); color: var(--c-linen); text-align: center; --focus: var(--c-brass-light); --focus-halo: var(--c-espresso); }
.skx-lux .ig-cta-inner { max-width: 40rem; margin: 0 auto; }
.skx-lux .ig-cta .ig-section-label { color: var(--c-taupe); }
.skx-lux .ig-cta .ig-section-title { color: var(--c-linen); font-size: var(--fs-h2); margin-bottom: var(--sp-7) !important; } .skx-lux .ig-destinations { text-align: center; }
.skx-lux .ig-cta + .ig-destinations { padding-top: var(--section-y-sm) !important; }
.skx-lux .ig-destinations[style] { padding-top: 0 !important; margin-top: 0 !important; }
.skx-lux .ig-dest-label { justify-content: center; }
.skx-lux .ig-dest-links { max-width: 56rem; margin: 0 auto; color: var(--c-mute); font-size: var(--fs-small); }
.skx-lux .ig-dest-links a {
display: inline-flex; align-items: center; min-height: 44px; font: var(--fw-regular) var(--fs-h4)/1.2 var(--font-display); color: var(--c-ink);
text-decoration: underline; text-decoration-color: var(--c-brass-line); text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.skx-lux .ig-dest-links a:hover { color: var(--c-brass-text); }