in index.html and this grid (currently
`repeat(3, 1fr)`) will need its column count updated to match.
.definition styles the "Illusion /ɪluˈzi̯oːn/ ..." pull-quote box. */
.about-grid {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: clamp(36px, 6vw, 90px);
align-items: center;
}
.about-photo {
position: relative;
border-radius: var(--radius);
overflow: hidden;
aspect-ratio: 4 / 5;
}
.about-photo img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.6s var(--ease);
}
.about-photo:hover img { transform: scale(1.05); }
.about-photo::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(0deg, rgba(0,8,168,0.28), transparent 55%);
pointer-events: none;
}
.about-copy p { color: var(--text-on-dark-muted); }
.about-copy p:first-of-type { color: var(--text-on-dark); font-family: var(--font-accent); font-size: 1.15rem; line-height: 1.6; }
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 40px;
padding-top: 32px;
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.stat b {
display: block;
font-family: var(--font-heading);
font-size: clamp(1.7rem, 3vw, 2.3rem);
color: var(--white);
}
.stat span { font-family: var(--font-ui); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--text-on-dark-muted); }
/* Credential kicker — one quiet line naming his awards, not a badge or
card. .cred-label is the small gold tag on the left (Caudex site's
"eyebrow" idea, shrunk to sit inline instead of stacked above a
heading), the rest is plain text you can extend with more " · "
separated award names as they happen. */
.credential-line {
margin: 18px 0 0;
font-family: var(--font-ui);
font-size: 0.86rem;
color: var(--text-on-dark-muted);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.cred-label {
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
padding-right: 12px;
border-right: 1px solid rgba(255, 255, 255, 0.2);
}
/* Illusion definition callout (and, further down in index.html, a second
identical block spotlighting the CVA Special Award — same classes,
same look, deliberately no photo/card/shadow for either one). */
.definition {
margin: 56px 0 0;
padding: 32px clamp(24px, 4vw, 48px);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.03);
}
.definition .word {
font-family: var(--font-accent);
font-style: italic;
font-size: clamp(1.5rem, 3vw, 2rem);
color: var(--white);
}
.definition .ipa { font-family: var(--font-ui); font-size: 0.9rem; color: var(--gold); margin-left: 10px; }
.definition p { margin-top: 10px; color: var(--text-on-dark-muted); font-family: var(--font-accent); font-size: 1.05rem; }
/* ==========================================================================
Testimonials
==========================================================================
TO ADD/REMOVE A TESTIMONIAL: copy or delete a whole .testi-card block in
index.html — the grid (repeat(3, 1fr)) auto-wraps into new rows of 3, so
any number of cards works without touching this CSS. Stars are plain
text (★) not real ratings data — five stars on every card is a
deliberate, honest design convention (it signals "positive testimonial",
not a claimed average rating), edit/remove them if you'd rather not use it. */
.testi-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; }
.testi-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.testi-card {
background: var(--white);
border: 1px solid rgba(24, 24, 24, 0.08);
border-radius: var(--radius);
padding: 30px;
box-shadow: 0 20px 40px -28px rgba(24, 24, 24, 0.18);
transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
display: flex;
flex-direction: column;
}
.testi-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -22px rgba(0, 8, 168, 0.22); }
.testi-card .stars { color: var(--gold); letter-spacing: 3px; font-size: 0.95rem; margin-bottom: 14px; }
.testi-card blockquote {
margin: 0 0 20px;
font-family: var(--font-accent);
font-size: 1.02rem;
line-height: 1.6;
color: var(--text-on-light);
flex-grow: 1;
}
.testi-card .who { display: flex; flex-direction: column; font-family: var(--font-ui); }
.testi-card .who b { font-size: 0.92rem; font-weight: 500; }
.testi-card .who span { font-size: 0.8rem; color: var(--text-on-light-muted); }
/* ==========================================================================
Gallery
==========================================================================
A 6-image mosaic on a 6-column grid. Each image gets a size class
(.g1 … .g6 below) controlling how many columns/rows it spans — that's
what creates the "some tiles bigger than others" collage look.
TO REPLACE A PHOTO: swap the URL(s) on the matching /![]()
in
index.html — no CSS change needed as long as you keep 6 images.
TO ADD A 7TH+ IMAGE: give it a new class here (e.g. .g7 { grid-column:
span 2; grid-row: span 2; }) and use it in index.html. */
.gallery-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 130px;
gap: 14px;
}
.gallery-grid a {
position: relative;
overflow: hidden;
border-radius: var(--radius-sm);
display: block;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease), filter 0.6s var(--ease); }
.gallery-grid a:hover img { transform: scale(1.08); }
.gallery-grid a::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(0,8,168,0.35));
opacity: 0; transition: opacity 0.4s var(--ease);
}
.gallery-grid a:hover::after { opacity: 1; }
.g1 { grid-column: span 3; grid-row: span 3; }
.g2 { grid-column: span 3; grid-row: span 2; }
.g3 { grid-column: span 2; grid-row: span 2; }
.g4 { grid-column: span 2; grid-row: span 2; }
.g5 { grid-column: span 2; grid-row: span 2; }
.g6 { grid-column: span 3; grid-row: span 2; }
/* ==========================================================================
Contact
==========================================================================
Left column: pitch copy + .benefits checklist (add/remove freely,
the ✓ badge is just a styled ). Right column:
.form-card, the dark contact form. IMPORTANT — this form has NO backend:
submitting it just shows a "thanks" message via the small