/* Google Fonts loaded via in HTML for faster first paint */
:root {
--navy: #1f3554;
--navy-deep: #15263c;
--navy-ink: #0f1d30;
--blue: #4f7593;
--sand: #e5d4b3;
--copper: #b98558;
--sage: #768777;
--shell: #f4ecdd;
--ivory: #faf6ee;
--white: #ffffff;
--charcoal: #1f2a36;
--muted: #6b7785;
--line: #e7dec9;
--shadow: 0 18px 45px rgba(31, 53, 84, 0.14);
--radius: 6px;
--serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
color: var(--charcoal);
background: var(--ivory);
line-height: 1.6;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
text-decoration: none;
}
p {
margin: 0 0 1rem;
}
.container {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
}
.site-header {
position: sticky;
top: 0;
z-index: 40;
border-bottom: 1px solid rgba(231, 222, 201, 0.9);
background: rgba(250, 246, 238, 0.94);
backdrop-filter: blur(12px);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 100px;
gap: 24px;
}
.brand {
display: inline-flex;
align-items: center;
color: var(--navy);
text-decoration: none;
}
.brand-logo {
display: block;
height: 72px;
width: auto;
}
@media (max-width: 540px) {
.brand-logo {
height: 56px;
}
}
.nav-toggle {
display: none;
width: 42px;
height: 42px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
color: var(--navy);
font-size: 1.35rem;
}
.nav-links {
display: flex;
align-items: center;
gap: 22px;
margin: 0;
padding: 0;
list-style: none;
color: var(--navy);
font-size: 0.95rem;
font-weight: 700;
}
.nav-links a {
padding: 28px 0;
}
.has-menu {
position: relative;
}
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
display: grid;
min-width: 540px;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow);
opacity: 0;
pointer-events: none;
transform: translate(-50%, 12px);
transition: opacity 0.22s ease, transform 0.22s ease;
}
/* Single-column slim variant for About and Resources dropdowns */
.mega-menu.slim {
min-width: 210px;
grid-template-columns: 1fr;
}
.has-menu:hover .mega-menu,
.has-menu:focus-within .mega-menu {
opacity: 1;
pointer-events: auto;
transform: translate(-50%, 0);
}
.mega-menu strong {
display: block;
margin-bottom: 10px;
color: var(--blue);
text-transform: uppercase;
font-size: 0.76rem;
}
.mega-menu a {
display: block;
padding: 6px 0;
color: var(--charcoal);
font-weight: 650;
}
.btn,
button.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
padding: 0 26px;
letter-spacing: 0.01em;
border: 1px solid transparent;
border-radius: var(--radius);
background: var(--navy);
color: var(--white);
font-weight: 800;
cursor: pointer;
}
.btn.secondary {
border-color: var(--navy);
background: var(--white);
color: var(--navy);
}
.btn.sand {
background: var(--sand);
color: var(--navy);
}
.btn.ghost {
border-color: rgba(255, 255, 255, 0.55);
background: rgba(255, 255, 255, 0.08);
color: var(--white);
}
.hero {
position: relative;
min-height: clamp(720px, 92vh, 940px);
display: grid;
align-items: center;
overflow: hidden;
color: var(--white);
/* background lives on ::before so only the photo moves, not the text */
}
/* ── Animated photo layer ── */
.hero::before {
content: "";
position: absolute;
inset: -12%; /* generous room for drift without edge exposure */
z-index: 0;
background:
linear-gradient(155deg, rgba(15, 29, 48, 0.68), rgba(31, 53, 84, 0.34) 52%, rgba(21, 38, 60, 0.04)),
url("https://images.unsplash.com/photo-1584752242818-b4bd7fb3fe10?auto=format&fit=crop&w=2400&q=82") center/cover;
animation: heroKenBurns 42s ease-in-out infinite;
will-change: transform;
}
/* ── Bottom fade gradient (above photo, below content) ── */
.hero::after {
position: absolute;
inset: auto 0 0;
height: 42%;
z-index: 1;
pointer-events: none;
background: linear-gradient(0deg, rgba(15, 29, 48, 0.92), rgba(15, 29, 48, 0));
content: "";
}
/* Seamless loop: 0% and 100% share same state so there's no jump.
6 stops trace a flowing organic path — scale breathes, position drifts,
micro-rotation adds the "alive" quality. */
@keyframes heroKenBurns {
0% { transform: scale(1.00) translate(0, 0) rotate(0deg); }
16% { transform: scale(1.03) translate(-0.7%, 0.4%) rotate(0.15deg); }
33% { transform: scale(1.06) translate(-0.2%, -0.6%) rotate(-0.1deg); }
50% { transform: scale(1.09) translate(0.8%, -0.3%) rotate(0.2deg); }
66% { transform: scale(1.07) translate(0.9%, 0.5%) rotate(-0.15deg);}
83% { transform: scale(1.03) translate(0.2%, 0.7%) rotate(0.05deg); }
100% { transform: scale(1.00) translate(0, 0) rotate(0deg); }
}
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.38fr);
gap: 44px;
align-items: end;
padding: 96px 0 150px;
}
.hero-content {
width: min(860px, 100%);
}
.eyebrow {
display: inline-block;
margin-bottom: 18px;
color: var(--sand);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.hero h1,
.page-hero h1 {
margin: 0 0 22px;
font-family: var(--serif);
font-size: clamp(2.8rem, 7vw, 5.75rem);
font-weight: 600;
line-height: 1;
letter-spacing: 0.005em;
}
.hero p,
.page-hero p {
max-width: 680px;
font-size: clamp(1.05rem, 2vw, 1.3rem);
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
.hero-panel {
align-self: end;
padding: 26px;
border: 1px solid rgba(229, 212, 179, 0.44);
border-radius: var(--radius);
background: rgba(15, 29, 48, 0.72);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(14px);
}
.hero-panel span,
.hero-panel a {
color: var(--sand);
font-size: 0.78rem;
font-weight: 900;
text-transform: uppercase;
}
.hero-panel strong {
display: block;
margin: 8px 0 12px;
font-family: var(--serif);
font-size: 2rem;
font-weight: 600;
line-height: 1;
}
.hero-panel p {
margin-bottom: 18px;
color: rgba(255, 255, 255, 0.78);
font-size: 0.98rem;
}
.proof-strip {
position: absolute;
z-index: 2;
right: 0;
bottom: 0;
left: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid rgba(229, 212, 179, 0.32);
border-bottom: 0;
background: rgba(250, 246, 238, 0.96);
color: var(--navy);
box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.18);
}
.proof-strip div {
padding: 18px 22px;
border-right: 1px solid var(--line);
}
.proof-strip div:last-child {
border-right: 0;
}
.proof-strip strong,
.proof-strip span {
display: block;
}
.proof-strip strong {
font-family: var(--serif);
font-size: 1.35rem;
line-height: 1.05;
}
.proof-strip span {
margin-top: 3px;
color: var(--muted);
font-size: 0.88rem;
}
.section {
padding: 114px 0;
background: var(--white);
}
.section.shell {
background: var(--shell);
}
.section.navy {
background: var(--navy);
color: var(--white);
}
.section-header {
max-width: 760px;
margin-bottom: 52px;
}
.section-header.center {
margin-right: auto;
margin-left: auto;
text-align: center;
}
h2,
h3 {
margin: 0 0 16px;
color: var(--navy);
font-family: var(--serif);
font-weight: 600;
line-height: 1.08;
letter-spacing: 0.005em;
}
.navy h2,
.navy h3 {
color: var(--white);
}
h2 {
font-size: clamp(2.1rem, 4.5vw, 3.75rem);
}
h3 {
font-size: clamp(1.35rem, 2vw, 1.75rem);
}
.lead {
color: var(--muted);
font-size: 1.12rem;
}
.navy .lead {
color: rgba(255, 255, 255, 0.78);
}
.grid {
display: grid;
gap: 24px;
}
.grid.three {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid.two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.card {
height: 100%;
padding: 28px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
}
.card.shadow {
box-shadow: var(--shadow);
}
.card h3 a {
color: var(--navy);
}
.feature-image {
min-height: 430px;
border-radius: var(--radius);
background: url("https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?auto=format&fit=crop&w=1600&q=80") center/cover;
}
.feature-stack {
position: relative;
min-height: 540px;
}
.feature-stack .feature-image {
position: absolute;
overflow: hidden;
box-shadow: var(--shadow);
}
.feature-stack .feature-image::after {
position: absolute;
inset: 0;
border: 1px solid rgba(255, 255, 255, 0.45);
content: "";
}
.feature-image.primary {
inset: 0 72px 64px 0;
background-image: url("https://images.unsplash.com/photo-1675275724396-f16c10fced75?auto=format&fit=crop&w=1600&q=82");
}
.feature-image.secondary {
right: 0;
bottom: 0;
width: 48%;
min-height: 260px;
border: 10px solid var(--ivory);
background-image: url("https://images.unsplash.com/photo-1754597215918-b4b1f113ca77?auto=format&fit=crop&w=900&q=80");
}
.split {
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 28px;
}
.stat {
padding: 18px;
border: 1px solid rgba(229, 212, 179, 0.6);
border-radius: var(--radius);
background: rgba(250, 246, 238, 0.62);
}
.stat strong {
display: block;
color: var(--navy);
font-size: 1.6rem;
}
.location-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
padding: 0;
list-style: none;
}
.location-list a {
display: block;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
color: var(--navy);
font-weight: 800;
}
.location-list a:hover,
.card h3 a:hover,
.footer a:hover {
color: var(--copper);
}
.process-section {
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.process-track {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid rgba(31, 53, 84, 0.16);
background: rgba(255, 255, 255, 0.74);
}
.process-track article {
padding: 30px;
border-right: 1px solid var(--line);
}
.process-track article:last-child {
border-right: 0;
}
.process-track span {
display: block;
margin-bottom: 42px;
color: var(--copper);
font-weight: 900;
}
.process-track h3 {
margin-bottom: 10px;
}
.tech-section {
background: linear-gradient(135deg, var(--navy-deep), var(--navy));
color: var(--white);
}
.tech-aside {
align-self: stretch;
color: var(--charcoal);
}
.tech-section h2 {
color: var(--white);
}
.tech-section .lead {
color: rgba(255, 255, 255, 0.78);
}
.tech-points {
display: grid;
gap: 14px;
margin-top: 30px;
}
.tech-points div {
display: grid;
gap: 4px;
padding: 16px 18px;
border-left: 3px solid var(--sand);
background: rgba(255, 255, 255, 0.08);
}
.tech-points strong,
.tech-points span {
display: block;
}
.tech-points strong {
color: var(--white);
font-weight: 850;
}
.tech-points span {
color: rgba(255, 255, 255, 0.72);
}
.page-hero {
padding: 96px 0 76px;
color: var(--white);
background:
linear-gradient(90deg, rgba(31, 53, 84, 0.92), rgba(31, 53, 84, 0.6)),
url("https://images.unsplash.com/photo-1600566753151-384129cf4e3e?auto=format&fit=crop&w=2200&q=80") center/cover;
}
.page-hero.compact {
padding: 76px 0 62px;
}
.breadcrumbs {
margin-bottom: 16px;
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.service-band {
border-top: 1px solid var(--line);
}
.check-list {
padding-left: 1.1rem;
}
.check-list li {
margin-bottom: 10px;
}
.faq {
display: grid;
gap: 12px;
}
.faq details {
padding: 18px 22px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
}
.faq details[open] {
box-shadow: var(--shadow);
}
.faq summary {
cursor: pointer;
color: var(--navy);
font-weight: 800;
list-style: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
float: right;
margin-left: 16px;
color: var(--blue);
content: "+";
font-size: 1.4rem;
line-height: 1;
}
.faq details[open] summary::after {
content: "\2013";
}
.faq details p {
margin-top: 12px;
color: var(--charcoal);
}
.testimonial {
color: var(--charcoal);
font-size: 1.05rem;
}
.testimonial cite {
display: block;
margin-top: 16px;
color: var(--blue);
font-style: normal;
font-weight: 800;
}
/* Chad's Story — founder photo */
.founder-photo {
width: 100%;
display: block;
border-radius: var(--radius);
object-fit: cover;
aspect-ratio: 3 / 4;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
}
.story-prose p {
margin-top: 20px;
color: var(--charcoal);
line-height: 1.8;
}
.story-prose p:first-of-type {
margin-top: 16px;
}
.story-prose p.lead {
color: var(--navy);
margin-top: 16px;
}
.form {
display: grid;
gap: 16px;
}
.form label {
display: grid;
gap: 7px;
color: var(--navy);
font-weight: 800;
}
.form input,
.form select,
.form textarea {
width: 100%;
min-height: 48px;
padding: 11px 12px;
border: 1px solid #cfc7bb;
border-radius: var(--radius);
font: inherit;
}
.form input:focus,
.form select:focus,
.form textarea:focus,
.btn:focus-visible,
.nav-links a:focus-visible,
.location-list a:focus-visible {
outline: 3px solid rgba(185, 133, 88, 0.38);
outline-offset: 3px;
}
.form textarea {
min-height: 140px;
resize: vertical;
}
.footer {
padding: 48px 0 24px;
background: var(--navy-deep);
color: rgba(255, 255, 255, 0.78);
}
.footer-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
gap: 32px;
}
.footer h2,
.footer h3,
.footer strong {
color: var(--white);
}
.footer a {
display: block;
margin: 7px 0;
}
.copyright {
margin-top: 34px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: 0.9rem;
}
@media (max-width: 860px) {
.nav-toggle {
display: inline-grid;
place-items: center;
}
.nav-links {
position: absolute;
top: 100px;
right: 16px;
left: 16px;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 10px 18px 18px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
box-shadow: var(--shadow);
z-index: 50;
/* animated show/hide */
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0.26s;
}
.nav-links.is-open {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: translateY(0);
transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0s;
}
.nav-links a {
padding: 12px 0;
}
/* Slim dropdowns (About, Resources) hidden on mobile — just tap the main link */
.mega-menu.slim {
display: none;
}
.mega-menu {
position: static;
min-width: 0;
grid-template-columns: 1fr;
padding: 8px 0 10px;
border: 0;
box-shadow: none;
opacity: 1;
pointer-events: auto;
transform: none;
}
.hero-grid,
.split,
.grid.two,
.grid.three,
.process-track,
.footer-grid {
grid-template-columns: 1fr;
}
/* Increase bottom padding to clear the proof-strip (3 items stacked ≈ 240px) */
.hero-grid {
padding: 72px 0 265px;
}
/* Let hero size to content rather than forcing 880px on tablet */
.hero {
min-height: auto;
}
/* Tighten page-hero on tablet */
.page-hero {
padding: 72px 0 56px;
}
.proof-strip {
grid-template-columns: 1fr;
}
.proof-strip div {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.proof-strip div:last-child {
border-bottom: 0;
}
.feature-stack {
min-height: 470px;
}
.process-track article {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.process-track article:last-child {
border-bottom: 0;
}
.location-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Cap founder photo height on mobile so it doesn't fill the viewport */
.founder-photo {
aspect-ratio: 4 / 3;
max-height: 420px;
}
}
@media (max-width: 540px) {
.container {
width: min(100% - 24px, 1120px);
}
/* Shorter nav bar on phones */
.nav {
min-height: 72px;
}
/* Align mobile dropdown with shorter nav */
.nav-links {
top: 72px;
}
.section {
padding: 56px 0;
}
.hero h1,
.page-hero h1 {
font-size: clamp(2.1rem, 9vw, 2.75rem);
}
/* Enough bottom padding for 3-row proof-strip on small screens */
.hero-grid {
padding-top: 44px;
padding-bottom: 275px;
}
/* Hide the "Best fit" aside panel — saves ~200px on phones */
.hero-panel {
display: none;
}
/* Stack hero CTAs vertically */
.hero-actions {
flex-direction: column;
align-items: stretch;
}
/* Compact page-hero on phones */
.page-hero {
padding: 54px 0 38px;
}
.feature-stack {
min-height: 390px;
}
.feature-image.primary {
inset: 0 34px 54px 0;
}
.feature-image.secondary {
width: 58%;
min-height: 190px;
border-width: 8px;
}
.location-list,
.stats {
grid-template-columns: 1fr;
}
/* Full-width buttons on phones */
.btn {
width: 100%;
justify-content: center;
}
/* Navy CTA section — stack button below text */
.section.navy .split {
gap: 28px;
}
/* Footer tighter on phones */
.footer {
padding: 40px 0 20px;
}
/* Proof strip items slightly more compact */
.proof-strip div {
padding: 14px 18px;
}
}
/* =====================================================================
ANIMATIONS & MICRO-INTERACTIONS
===================================================================== */
/* --- Page entrance: fade in on every page load / navigation --- */
@keyframes pageFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
body {
animation: pageFadeIn 0.38s ease both;
}
/* --- Shared fade-up keyframe (hero entrance + scroll reveal) --- */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(26px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Hero entrance sequence: each element staggers in --- */
.hero-content .eyebrow {
animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.hero-content h1 {
animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.26s both;
}
.hero-content > p {
animation: fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}
.hero-actions {
animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.54s both;
}
.hero-panel {
animation: fadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.46s both;
}
.proof-strip > div:nth-child(1) {
animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.68s both;
}
.proof-strip > div:nth-child(2) {
animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.80s both;
}
.proof-strip > div:nth-child(3) {
animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.92s both;
}
/* --- Scroll reveal: set by JS IntersectionObserver --- */
[data-reveal] {
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms),
transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
[data-reveal].is-visible {
opacity: 1;
transform: translateY(0);
}
/* --- Button micro-interactions --- */
.btn,
button.btn {
transition:
background 0.22s ease,
color 0.22s ease,
border-color 0.22s ease,
transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.22s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(31, 53, 84, 0.22);
}
.btn.sand:hover {
box-shadow: 0 8px 22px rgba(185, 133, 88, 0.28);
}
.btn:active {
transform: scale(0.97);
box-shadow: none;
transition-duration: 0.08s;
}
/* --- Nav toggle — flips to navy when menu is open --- */
.nav-toggle {
transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.nav-toggle.is-open {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
}
/* --- Nav link underline sweep (desktop only) --- */
@media (min-width: 861px) {
.nav-links > li > a:not(.btn) {
position: relative;
transition: color 0.2s ease;
}
.nav-links > li > a:not(.btn)::after {
content: "";
position: absolute;
bottom: 22px;
left: 0;
width: 0;
height: 2px;
border-radius: 2px;
background: var(--copper);
transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links > li > a:not(.btn):hover::after {
width: 100%;
}
}
/* --- Mega-menu link indent on hover --- */
.mega-menu a {
transition: color 0.18s ease, padding-left 0.18s ease;
}
.mega-menu a:hover {
color: var(--copper);
padding-left: 5px;
}
/* --- Header: deepen shadow as user scrolls --- */
.site-header {
transition: box-shadow 0.32s ease, background 0.32s ease;
}
.site-header.scrolled {
box-shadow: 0 2px 32px rgba(31, 53, 84, 0.11);
background: rgba(250, 246, 238, 0.98);
}
/* --- Location list: lift on hover --- */
.location-list a {
transition: color 0.2s ease, border-color 0.22s ease,
transform 0.22s ease, box-shadow 0.22s ease;
}
.location-list a:hover {
transform: translateY(-2px);
border-color: var(--copper);
box-shadow: 0 4px 16px rgba(31, 53, 84, 0.1);
}
/* --- Cards: lift on hover --- */
.card {
transition: box-shadow 0.28s ease, transform 0.28s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 28px 64px rgba(31, 53, 84, 0.14);
}
/* --- Process steps: warm tint on hover --- */
.process-track article {
transition: background 0.22s ease;
}
.process-track article:hover {
background: rgba(229, 212, 179, 0.1);
}
/* --- Tech points: highlight on hover --- */
.tech-points > div {
transition: background 0.2s ease, border-color 0.2s ease;
}
.tech-points > div:hover {
background: rgba(255, 255, 255, 0.14);
border-color: var(--copper);
}
/* --- Footer links --- */
.footer a {
transition: color 0.2s ease;
}
/* --- Form fields: copper border on focus --- */
.form input,
.form select,
.form textarea {
transition: border-color 0.22s ease, box-shadow 0.22s ease;
}
.form input:focus,
.form select:focus,
.form textarea:focus {
border-color: var(--copper);
}
/* ─── Statement band ───────────────────────────────────────────────────────── */
.statement-band {
position: relative;
padding: clamp(100px, 13vw, 160px) var(--space-xl);
overflow: hidden;
text-align: center;
color: var(--cream);
}
/* Animated photo layer */
.statement-band::before {
content: "";
position: absolute;
inset: -12%;
z-index: 0;
background: url("https://images.unsplash.com/photo-1710637270235-74cdecffabff?auto=format&fit=crop&w=2200&q=80") center 40%/cover;
animation: bandKenBurns 52s ease-in-out infinite;
will-change: transform;
}
/* Dark overlay above photo */
.statement-band::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(rgba(15, 29, 48, 0.72), rgba(15, 29, 48, 0.72));
}
/* Text must sit above both pseudo-elements */
.statement-band .container {
position: relative;
z-index: 2;
}
@keyframes bandKenBurns {
0% { transform: scale(1.00) translate(0, 0) rotate(0deg); }
20% { transform: scale(1.04) translate(1.0%, -0.5%) rotate(0.12deg); }
40% { transform: scale(1.08) translate(0.4%, -0.9%) rotate(-0.08deg); }
60% { transform: scale(1.10) translate(-0.8%, -0.3%) rotate(0.15deg); }
80% { transform: scale(1.05) translate(-0.6%, 0.6%) rotate(-0.1deg); }
100% { transform: scale(1.00) translate(0, 0) rotate(0deg); }
}
.statement-band .eyebrow {
color: var(--sand);
letter-spacing: 0.22em;
margin-bottom: 28px;
}
.statement-band p {
font-family: var(--serif);
font-size: clamp(2.2rem, 5vw, 4.2rem);
font-weight: 600;
line-height: 1.12;
color: var(--ivory);
max-width: 860px;
margin: 0 auto;
letter-spacing: -0.01em;
}
/* ─── Hero scroll cue ──────────────────────────────────────────────────────── */
.hero-scroll-cue {
position: absolute;
z-index: 4;
bottom: 96px;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
animation: pageFadeIn 0.8s ease 1.8s both;
pointer-events: none;
}
.hero-scroll-cue svg {
animation: scrollBounce 2.6s ease-in-out 2.4s infinite;
}
@keyframes scrollBounce {
0%, 100% { transform: translateY(0); opacity: 0.6; }
50% { transform: translateY(9px); opacity: 1; }
}
@media (max-width: 600px) {
.hero-scroll-cue { display: none; }
.statement-band p { font-size: clamp(1.8rem, 7vw, 2.6rem); }
}
/* =====================================================================
PORTFOLIO — project grid, cards, filter bar
===================================================================== */
.portfolio-section { padding-bottom: 0; }
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 48px;
}
.project-card {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--radius);
aspect-ratio: 4 / 3;
background: var(--navy-deep);
cursor: pointer;
text-decoration: none;
}
.project-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
display: block;
}
.project-card:hover img {
transform: scale(1.06);
}
.city-badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
background: rgba(255, 255, 255, 0.93);
color: var(--navy);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 13px;
border-radius: 20px;
}
.card-overlay {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(0deg, rgba(15, 29, 48, 0.82) 0%, rgba(15, 29, 48, 0.1) 55%, transparent 100%);
opacity: 0;
transition: opacity 0.35s ease;
}
.project-card:hover .card-overlay {
opacity: 1;
}
.card-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
padding: 22px 20px 18px;
color: var(--ivory);
transform: translateY(8px);
opacity: 0;
transition: transform 0.35s ease, opacity 0.35s ease;
}
.card-label strong {
display: block;
font-size: 1rem;
font-weight: 700;
margin-bottom: 3px;
}
.card-label span {
font-size: 0.78rem;
opacity: 0.8;
letter-spacing: 0.02em;
}
.project-card:hover .card-label {
transform: translateY(0);
opacity: 1;
}
.portfolio-cta {
margin-top: 40px;
text-align: center;
}
.work-photo-note {
margin-top: 48px;
text-align: center;
color: var(--muted);
font-size: 0.88rem;
font-style: italic;
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* ── Filter bar ── */
.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 8px;
}
.filter-btn {
padding: 8px 20px;
border: 1px solid var(--line);
border-radius: 24px;
background: transparent;
color: var(--charcoal);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.filter-btn:hover {
border-color: var(--navy);
color: var(--navy);
}
.filter-btn.active {
background: var(--navy);
border-color: var(--navy);
color: var(--white);
}
/* ── Why grid ── */
.why-grid .card {
border-top: 3px solid var(--copper);
}
.why-grid .card h3 {
margin-bottom: 10px;
}
/* ── CTA conversion band ── */
.cta-conversion-band {
background: linear-gradient(135deg, var(--navy-deep), var(--navy));
color: var(--white);
text-align: center;
}
.cta-conversion-band .eyebrow {
color: var(--sand);
}
.cta-conversion-band h2 {
color: var(--white);
font-size: clamp(2rem, 4vw, 3.2rem);
margin-bottom: 16px;
}
.cta-conversion-band .lead {
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: 0 auto 36px;
}
.cta-conversion-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ── Responsive ── */
@media (max-width: 900px) {
.portfolio-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.portfolio-grid {
grid-template-columns: 1fr;
}
.filter-bar {
gap: 8px;
}
.filter-btn {
padding: 7px 14px;
font-size: 0.78rem;
}
.cta-conversion-actions {
flex-direction: column;
align-items: center;
}
.cta-conversion-actions .btn {
width: 100%;
max-width: 320px;
}
}
/* =====================================================================
STICKY MOBILE CTA BAR
===================================================================== */
.mobile-cta-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 500;
display: flex;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18);
}
.mobile-cta-bar.is-visible {
transform: translateY(0);
}
.mobile-cta-call,
.mobile-cta-contact {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 12px;
font-size: 0.88rem;
font-weight: 800;
letter-spacing: 0.02em;
text-decoration: none;
line-height: 1.1;
}
.mobile-cta-call {
background: var(--navy);
color: var(--white);
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-cta-contact {
background: var(--copper);
color: var(--white);
}
@media (min-width: 769px) {
.mobile-cta-bar {
display: none;
}
}
@media (max-width: 540px) {
}
/* =====================================================================
WHY PALMETTO — COMPARISON GRID
===================================================================== */
.comparison-section {
background: var(--white);
}
.comparison-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
}
.comparison-col {
padding: 36px 28px;
border-right: 1px solid var(--line);
}
.comparison-col:last-child {
border-right: 0;
}
.comparison-col.highlight {
background: var(--navy);
}
.comparison-col-label {
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--copper);
margin-bottom: 10px;
}
.comparison-col.highlight .comparison-col-label {
color: var(--sand);
}
.comparison-col h3 {
font-size: 1.1rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 24px;
line-height: 1.3;
}
.comparison-col.highlight h3 {
color: var(--white);
}
.comparison-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 14px;
}
.comparison-list li {
font-size: 0.9rem;
line-height: 1.5;
color: var(--charcoal);
padding-left: 22px;
position: relative;
}
.comparison-list li::before {
content: '–';
position: absolute;
left: 0;
color: var(--charcoal);
opacity: 0.4;
}
.comparison-col.highlight .comparison-list li {
color: rgba(255, 255, 255, 0.82);
}
.comparison-col.highlight .comparison-list li::before {
content: '✓';
color: var(--sand);
opacity: 1;
font-weight: 800;
}
@media (max-width: 768px) {
.comparison-grid {
grid-template-columns: 1fr;
}
.comparison-col {
border-right: 0;
border-bottom: 1px solid var(--line);
}
.comparison-col:last-child {
border-bottom: 0;
}
}
/* =====================================================================
PROCESS TIMELINE (Services page)
===================================================================== */
.process-timeline {
position: relative;
display: grid;
gap: 0;
padding-left: 4px;
}
.process-timeline::before {
content: '';
position: absolute;
left: 27px;
top: 56px;
bottom: 20px;
width: 2px;
background: linear-gradient(to bottom, var(--navy), var(--line));
}
.timeline-step {
display: grid;
grid-template-columns: 56px 1fr;
gap: 24px;
padding-bottom: 44px;
position: relative;
}
.timeline-step:last-child {
padding-bottom: 0;
}
.timeline-num {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--navy);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--serif);
font-size: 1.35rem;
font-weight: 700;
position: relative;
z-index: 1;
flex-shrink: 0;
box-shadow: 0 0 0 4px var(--white), 0 0 0 5px var(--line);
}
.timeline-content {
padding-top: 14px;
}
.timeline-content h4 {
font-size: 1rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 6px;
letter-spacing: -0.01em;
}
.timeline-content p {
font-size: 0.92rem;
color: var(--charcoal);
line-height: 1.7;
margin: 0;
}
/* =====================================================================
VIDEO PLACEHOLDER (About page)
===================================================================== */
.video-placeholder-wrap {
position: relative;
border-radius: var(--radius);
overflow: hidden;
background: var(--navy);
aspect-ratio: 16 / 9;
cursor: pointer;
}
.video-placeholder-bg {
position: absolute;
inset: 0;
background-image: url('../img/chad-family.jpg');
background-size: cover;
background-position: center 20%;
filter: brightness(0.38);
transition: filter 0.3s ease;
}
.video-placeholder-wrap:hover .video-placeholder-bg {
filter: brightness(0.45);
}
.video-play-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
color: var(--white);
text-align: center;
}
.video-play-btn {
width: 72px;
height: 72px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 2px solid rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(6px);
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.video-placeholder-wrap:hover .video-play-btn {
background: rgba(255, 255, 255, 0.22);
border-color: var(--white);
transform: scale(1.06);
}
.video-play-btn svg {
width: 26px;
height: 26px;
fill: var(--white);
margin-left: 3px;
}
.video-caption {
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.72;
}
/* =====================================================================
PROJECT DETAIL PAGES
===================================================================== */
.project-detail-hero {
background: var(--navy);
padding: 80px 0 56px;
}
.project-detail-hero .breadcrumbs a,
.project-detail-hero .breadcrumbs {
color: rgba(255, 255, 255, 0.55);
}
.project-detail-hero h1 {
color: var(--white);
margin-top: 16px;
}
.project-detail-hero p {
color: rgba(255, 255, 255, 0.72);
max-width: 540px;
margin-top: 12px;
}
.project-stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--line);
gap: 1px;
margin: 40px 0 48px;
}
.project-stat-item {
background: var(--white);
padding: 24px 20px;
text-align: center;
}
.project-stat-item strong {
display: block;
font-family: var(--serif);
font-size: 1.55rem;
color: var(--navy);
margin-bottom: 5px;
}
.project-stat-item span {
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--charcoal);
}
.project-main-img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius);
display: block;
margin-bottom: 12px;
}
.project-gallery-thumbs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 56px;
}
.project-gallery-thumbs img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--radius);
display: block;
}
.project-story {
max-width: 680px;
}
.project-story h2 {
margin-bottom: 20px;
}
.project-story p {
color: var(--charcoal);
line-height: 1.8;
margin-top: 16px;
}
.project-story p:first-of-type {
margin-top: 0;
}
@media (max-width: 768px) {
.project-stats-bar {
grid-template-columns: repeat(2, 1fr);
}
.project-gallery-thumbs {
grid-template-columns: repeat(2, 1fr);
}
}
/* =====================================================================
ACCESSIBILITY — respect reduced-motion preference
===================================================================== */
@media (prefers-reduced-motion: reduce) {
/* Kill all animations and transitions */
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Reveal elements immediately — no fade/slide */
[data-reveal] {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* =====================================================================
POLISH PASS — 2026-05-09
Audit-driven additions: spacing scale, asymmetric section padding,
heading line-heights, text-wrap balance, body prose measure cap,
inline link underline polish, focus-visible ring, anchor scroll
padding for sticky nav. Plus the design-build section rebuild.
Appended at end of file so all rules cleanly override defaults
above; remove this block to revert.
===================================================================== */
:root {
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.5rem;
--space-5: 4rem;
--space-6: 6rem;
}
/* Anchor jumps land below the sticky nav (header is ~100px tall) */
html {
scroll-padding-top: 110px;
}
/* Section vertical rhythm: top heavier than bottom for visual gravity
between consecutive sections. Asymmetry reads as intentional pacing. */
.section {
padding: clamp(80px, 9vw, 128px) 0 clamp(64px, 7vw, 104px);
}
/* Heading typography polish: tighter line-height + balance to prevent
orphan words on the last line of large display headings. */
h1 {
line-height: 1.05;
letter-spacing: -0.015em;
text-wrap: balance;
}
h2 {
line-height: 1.1;
letter-spacing: -0.01em;
text-wrap: balance;
}
h3 {
text-wrap: balance;
}
h4 {
line-height: 1.25;
text-wrap: balance;
}
/* Body prose: cap measure at ~60-70 chars, use text-wrap: pretty
to avoid orphans on the last line of paragraphs. */
.lead {
max-width: 60ch;
text-wrap: pretty;
}
.project-story p,
.story-prose p {
text-wrap: pretty;
}
/* Inline links inside body prose get refined underline.
Excludes nav, buttons, and brand link by scoping to known prose containers. */
.project-story a:not(.btn):not(.eyebrow),
.story-prose a:not(.btn),
main p a:not(.btn):not(.brand),
main li a:not(.btn) {
text-decoration: underline;
text-decoration-color: rgba(31, 53, 84, 0.32);
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
transition: text-decoration-color 0.15s ease;
}
.project-story a:not(.btn):not(.eyebrow):hover,
.story-prose a:not(.btn):hover,
main p a:not(.btn):not(.brand):hover,
main li a:not(.btn):hover {
text-decoration-color: currentColor;
}
/* Focus-visible — keyboard-only outline that matches the brand. */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--copper);
outline-offset: 3px;
border-radius: 2px;
}
/* =====================================================================
DESIGN-BUILD PROCESS — section rebuild
Replaces the old left-timeline / right-intro split with a centered
intro + 3x2 grid of step cards. Cleaner hierarchy, more scannable,
each step gets equal visual weight.
===================================================================== */
.design-build-intro {
max-width: 720px;
margin: 0 auto var(--space-5);
text-align: center;
}
.design-build-intro .lead {
margin: var(--space-3) auto 0;
max-width: 60ch;
}
.design-build-steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
@media (max-width: 900px) {
.design-build-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.design-build-steps { grid-template-columns: 1fr; }
}
.design-build-steps li {
position: relative;
padding: var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--white);
display: flex;
flex-direction: column;
transition: border-color 0.2s ease, transform 0.2s ease;
list-style: none;
}
/* Kill the auto number that some browsers still render
even with list-style: none on the parent — flex/grid layouts
sometimes leak the ::marker through. */
.design-build-steps li::marker {
content: '';
}
.design-build-steps li:hover {
border-color: var(--navy);
transform: translateY(-2px);
}
.design-build-steps h3 {
font-family: var(--serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--navy);
margin: 0 0 var(--space-2);
line-height: 1.25;
letter-spacing: -0.005em;
}
.design-build-steps p {
font-size: 0.94rem;
color: var(--charcoal);
line-height: 1.65;
margin: 0;
}