/* ===== WIMBY THINKS DESIGN SYSTEM ===== */


:root {
--wt-bg: #141619;
--wt-bg-alt: #1c1f24;
--wt-text: #e8e2d4;
--wt-text-muted: #7a7d84;
--wt-accent: #d4a84b;
--wt-accent-dark: #141619;
--wt-border: #2a2d33;
--wt-font-heading: 'Cormorant Garamond', Georgia, serif;
--wt-font-body: 'Inter', system-ui, sans-serif;
}

/* Reset for WordPress compatibility */
.wt-page {
background: var(--wt-bg);
color: var(--wt-text);
font-family: var(--wt-font-body);
line-height: 1.7;
font-weight: 300;
}
.wt-page *, .wt-page *::before, .wt-page *::after { box-sizing: border-box; }
.wt-page h1, .wt-page h2, .wt-page h3 { font-family: var(--wt-font-heading); font-weight: 300; }

/* ===== HERO ===== */
.wt-hero {
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.wt-hero__collage {
position: relative;
width: 100%;
height: 50vh;
}
.wt-hero__collage img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.wt-hero__collage-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(20,22,25,0.2), transparent, var(--wt-bg));
}
.wt-hero__content {
flex: 1; display: flex; align-items: center; justify-content: center;
text-align: center; background: var(--wt-bg);
}
.wt-hero__inner {
max-width: 800px; padding: 3rem 2rem 5rem;
}
.wt-hero h1 {
font-size: clamp(2.5rem, 6vw, 5.5rem);
line-height: 1.1;
margin-bottom: 1.5rem;
letter-spacing: -0.02em;
}
.wt-hero h1 em { color: var(--wt-accent); font-style: italic; }
.wt-hero__subtitle {
font-size: clamp(1rem, 2vw, 1.25rem);
color: var(--wt-text-muted);
max-width: 600px; margin: 0 auto 2.5rem;
}
.wt-hero__name {
font-family: var(--wt-font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
margin-top: 2rem;
}
.wt-hero__scroll {
display: inline-block; margin-top: 3rem;
color: var(--wt-text-muted); text-decoration: none;
font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase;
transition: color 0.3s;
}
.wt-hero__scroll:hover { color: var(--wt-accent); }

/* ===== DIVIDER ===== */
.wt-divider {
width: 4rem; height: 1px;
background: var(--wt-accent);
margin: 2rem auto;
}

/* ===== SECTIONS ===== */
.wt-section { padding: 6rem 1.5rem; }
.wt-section--alt { background: var(--wt-bg-alt); }
.wt-section__inner { max-width: 720px; margin: 0 auto; }
.wt-section__inner--wide { max-width: 960px; margin: 0 auto; }
.wt-section h2 {
font-size: clamp(1.8rem, 4vw, 3.2rem);
text-align: center;
margin-bottom: 1rem;
}
.wt-section h3.wt-label {
font-size: 0.75rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--wt-accent);
text-align: center;
margin-bottom: 1rem;
font-family: var(--wt-font-heading);
}

/* ===== ABOUT: THEMES LIST ===== */
.wt-themes {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem; /* This 'gap' is for grid columns/rows, so it's fine. Only the flexbox 'gap' was the potential issue. */
padding: 2rem 0;
list-style: none; margin: 0;
}
.wt-themes li {
display: flex;
align-items: flex-start;
/* gap: 0.75rem;  <-- REMOVED THIS LINE */
}
.wt-themes li::before {
content: '◆';
color: var(--wt-accent);
font-size: 0.6rem;
margin-top: 0.5rem;
flex-shrink: 0;
margin-right: 0.75rem; /* <-- ADDED THIS LINE */
}

/* ===== BLOCKQUOTE ===== */
.wt-quote {
border-left: 2px solid var(--wt-accent);
padding: 1rem 0 1rem 1.5rem;
margin: 3rem 0;
font-family: var(--wt-font-heading);
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
font-style: italic;
font-weight: 300;
}

/* ===== BACKGROUND: EXPERIENCE GRID ===== */
.wt-exp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 3rem; /* This 'gap' is for grid columns/rows, which is widely supported. */
padding: 2rem 0;
}
.wt-exp-grid h3 {
font-family: var(--wt-font-heading);
font-size: 1.3rem;
color: var(--wt-accent);
margin-bottom: 0.75rem;
font-weight: 500;
}
.wt-exp-grid p { font-size: 0.9rem; color: var(--wt-text-muted); }

.wt-closing {
text-align: center;
font-family: var(--wt-font-heading);
font-size: 1.1rem;
font-style: italic;
margin-top: 2rem;
}

/* ===== CLIENTS ===== */
.wt-clients {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 3rem; /* This 'gap' is for flexbox elements, but often it's less problematic than the one for specific item spacing. If you still get an error after this change, this could be the next one to address, potentially with margin on direct children. */
margin-top: 4rem;
}
.wt-clients img {
height: 3.5rem; width: auto;
filter: brightness(0) invert(1);
opacity: 0.5;
transition: opacity 0.3s;
}
.wt-clients img:hover { opacity: 1; }

/* ===== WRITING / CTA BUTTONS ===== */
.wt-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem; /* This 'gap' is for flexbox elements as well. Similar note as above. */
justify-content: center;
margin-top: 3rem;
}
.wt-btn {
display: inline-block;
padding: 0.75rem 2rem;
border: 1px solid var(--wt-accent);
color: var(--wt-accent);
text-decoration: none;
font-size: 0.8rem;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: all 0.3s;
}
.wt-btn:hover {
background: var(--wt-accent);
color: var(--wt-accent-dark);
}
.wt-btn--ghost {
border-color: var(--wt-text-muted);
color: var(--wt-text-muted);
}
.wt-btn--ghost:hover {
border-color: var(--wt-text);
color: var(--wt-text);
background: transparent;
}
.wt-btn--solid {
background: var(--wt-accent);
color: var(--wt-accent-dark);
}
.wt-btn--solid:hover { opacity: 0.85; }

/* ===== CONTACT ===== */
.wt-contact { text-align: center; }
.wt-contact p { color: var(--wt-text-muted); max-width: 560px; margin: 0 auto; }

/* ===== FOOTER ===== */
.wt-footer {
text-align: center;
color: var(--wt-text-muted);
font-size: 0.85rem;
margin-top: 4rem;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
.wt-section { padding: 4rem 1.25rem; }
.wt-clients { gap: 2rem; } /* This 'gap' is for flexbox. */
.wt-clients img { height: 2.5rem; }
}