/* ============================================
CORONADO DIGITAL: DESIGN SYSTEM
Color: Ink #0c1220, Navy #0a2a72, Blue #1445d1, Royal #2f68ff, Paper #f5f7fb, Slate #545b70
Type: Poppins (display), Inter (body/UI)
Motif: Isometric "flight path" line, a continuously looping campaign path from spend to result
============================================ */
/* Fonts (Poppins/Inter) are loaded via + in the HTML , not @import here. @import forces
a serial round-trip (download+parse this file, THEN discover and start
the font CSS fetch) before the browser can even begin loading fonts;
a in lets the browser discover and start that fetch in
parallel with everything else, which is strictly faster. */
:root {
--ink: #0c1220;
--navy: #0a2a72;
--blue: #1445d1;
--royal: #2f68ff;
--paper: #f5f7fb;
--paper-dim: #eaeefa;
--white: #ffffff;
--slate: #545b70;
--slate-light: #8790a8;
--line: #e2e5f0;
--font-display: 'Poppins', sans-serif;
--font-body: 'Inter', sans-serif;
--radius: 14px;
--radius-sm: 8px;
--container: 1180px;
--shadow-soft: 0 20px 50px -25px rgba(14, 20, 40, 0.25);
--shadow-card: 0 1px 2px rgba(18,21,29,0.04), 0 10px 24px -14px rgba(18,21,29,0.12);
/* Shared vertical rhythm for icon+headline+body cards (Why Coronado,
Goals, Services, Process). Icon-to-headline is deliberately larger
than headline-to-body for a more premium, less cramped feel.
Services sets the reference scale for icon size, title size, and
body size/line-height; every other informational card matches it. */
--card-icon-gap: 20px;
--card-heading-gap: 10px;
--card-icon-size: 60px;
--card-icon-svg-size: 27px;
--card-title-size: 21px;
--card-body-size: 15px;
--card-body-line-height: 1.6;
}
/* Mobile-only: circular icon treatments scaled down ~10% (60->54px,
27->24px, preserving the same ratio) so typography reads as the
primary focus and icons stay supporting. Since every card type (Why
Coronado, Services, Process timeline, Goals carousel) references these
same shared variables, this one change applies consistently across all
of them without touching each section individually. Desktop is
untouched since this only applies under the mobile breakpoint. */
@media (max-width: 640px) {
:root {
--card-icon-size: 54px;
--card-icon-svg-size: 24px;
}
}
* { box-sizing: border-box; }
/* ---------- Accessibility: skip link + focus states ---------- */
.skip-link {
position: absolute;
top: -48px;
left: 12px;
z-index: 1000;
background: var(--ink);
color: var(--white);
padding: 12px 20px;
border-radius: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 14px;
text-decoration: none;
transition: top 0.2s ease;
}
.skip-link:focus {
top: 12px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.carousel-dot:focus-visible {
outline: 2px solid var(--royal);
outline-offset: 3px;
border-radius: 4px;
}
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
outline: 2px solid var(--royal);
outline-offset: 1px;
}
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background: var(--paper);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 700;
line-height: 1.12;
margin: 0;
letter-spacing: -0.01em;
}
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
.container {
max-width: var(--container);
margin: 0 auto;
padding: 0 32px;
}
.eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--blue);
}
.eyebrow.on-dark { color: var(--royal); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 15px;
padding: 14px 26px;
border-radius: 999px;
border: none;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--blue);
color: var(--white);
font-weight: 700;
box-shadow: 0 12px 24px -10px rgba(20, 69, 209, 0.55);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 32px -10px rgba(20, 69, 209, 0.65); }
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--line);
}
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-on-dark.btn-ghost { color: var(--white); border-color: rgba(255,255,255,0.28); }
.btn-on-dark.btn-ghost:hover { border-color: var(--royal); color: var(--royal); }
/* ---------- Scroll reveal (only active once JS confirms it can un-hide) ---------- */
.js .reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 0.7s cubic-bezier(.2,.6,.2,1), transform 0.7s cubic-bezier(.2,.6,.2,1);
}
.js .reveal.in-view {
opacity: 1;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.js .reveal { opacity: 1; transform: none; transition: none; }
}
/* ---------- Header / Nav ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(245, 247, 251, 0.85);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
transition: box-shadow 0.25s ease;
}
.site-header.scrolled {
box-shadow: 0 4px 20px -12px rgba(12,18,32,0.15);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 32px;
max-width: var(--container);
margin: 0 auto;
transition: padding 0.25s ease;
}
.site-header.scrolled .nav { padding: 11px 32px; }
.nav-brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
color: var(--ink);
}
.nav-brand img { width: 32px; height: 32px; }
.nav-links {
display: flex;
align-items: center;
gap: 34px;
}
.nav-links a {
font-size: 15px;
font-weight: 500;
color: var(--slate);
position: relative;
padding: 6px 0;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-links a.active::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--blue);
border-radius: 2px;
}
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-toggle {
display: none;
background: none;
border: none;
cursor: pointer;
padding: 4px;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--ink);
margin: 5px 0;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ---------- Hero ---------- */
.hero {
position: relative;
background: var(--ink);
color: var(--white);
overflow: hidden;
padding: 96px 0 120px;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 1500px 900px at 55% -25%, rgba(20,69,209,0.4), transparent 78%);
pointer-events: none;
}
.blob {
position: absolute;
border-radius: 50%;
filter: blur(50px);
pointer-events: none;
opacity: 0.55;
animation: blob-drift 16s ease-in-out infinite;
}
.hero .blob-a {
width: 340px; height: 340px;
background: radial-gradient(circle, rgba(47,104,255,0.55), transparent 70%);
top: -60px; right: 12%;
animation-duration: 18s;
}
.hero .blob-b {
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(20,69,209,0.5), transparent 70%);
bottom: -40px; left: 6%;
animation-duration: 22s;
animation-delay: -6s;
}
@keyframes blob-drift {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(30px, -24px) scale(1.08); }
66% { transform: translate(-22px, 18px) scale(0.94); }
}
@media (prefers-reduced-motion: reduce) {
.blob { animation: none; }
}
.hero-inner {
position: relative;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 48px;
align-items: center;
}
.hero h1 {
font-size: 52px;
margin-top: 18px;
color: var(--white);
}
.hero h1 em {
font-style: normal;
background: linear-gradient(100deg, var(--royal), #a7b0ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hero-sub {
font-size: 18px;
color: #c3c8e0;
max-width: 480px;
margin-top: 20px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 34px;
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 28px 44px;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-stat b {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: 40px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--white);
}
.hero-stat span {
font-size: 13px;
color: #9aa1c2;
display: block;
margin-top: 8px;
}
/* Signature flight-path graphic: loops continuously */
.flight-path {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
}
.flight-path svg { width: 100%; height: 100%; overflow: visible; }
.fp-line-base {
stroke-dasharray: 900;
stroke-dashoffset: 0;
opacity: 0.18;
}
.fp-line-draw {
stroke-dasharray: 900;
animation: draw-loop 3.4s cubic-bezier(.45,0,.2,1) infinite;
}
.fp-comet {
offset-path: path('M70 320 C 140 320, 120 210, 190 200 S 260 130, 330 70');
animation: fly 3.4s cubic-bezier(.45,0,.2,1) infinite;
}
.fp-dot-end {
animation: pulse 2s ease-in-out infinite;
transform-origin: 330px 70px;
}
.fp-badge {
animation: float-badge 4.5s ease-in-out infinite;
}
@keyframes draw-loop {
0% { stroke-dashoffset: 900; opacity: 0; }
8% { opacity: 1; }
55% { stroke-dashoffset: 0; opacity: 1; }
85% { opacity: 1; }
100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes fly {
0% { offset-distance: 0%; opacity: 0; }
8% { opacity: 1; }
55% { offset-distance: 100%; opacity: 1; }
62% { opacity: 0; }
100% { offset-distance: 100%; opacity: 0; }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.5); }
}
@keyframes float-badge {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
.fp-line-draw, .fp-comet, .fp-dot-end, .fp-badge { animation: none; }
.fp-line-draw { stroke-dashoffset: 0; opacity: 1; }
}
/* ---------- Sections generic ---------- */
section { padding: 96px 0; }
.section-head {
max-width: 640px;
margin-bottom: 56px;
}
.section-head h2 {
font-size: 36px;
margin-top: 14px;
}
.section-head p {
color: var(--slate);
font-size: 17px;
margin-top: 14px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
/* ---------- Services grid ---------- */
.services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.service-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 40px 36px;
box-shadow: var(--shadow-card);
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
display: flex;
flex-direction: column;
}
.service-card:hover { transform: translateY(-6px) rotate(-0.4deg); box-shadow: var(--shadow-soft); }
.service-icon {
width: var(--card-icon-size); height: var(--card-icon-size);
border-radius: 50%;
background: linear-gradient(135deg, var(--blue), var(--royal));
display: flex; align-items: center; justify-content: center;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
margin-bottom: var(--card-icon-gap);
}
.service-card:hover .service-icon { transform: scale(1.1) rotate(8deg); }
.service-icon svg { width: var(--card-icon-svg-size); height: var(--card-icon-svg-size); stroke: white; }
.service-card h3 { font-size: var(--card-title-size); white-space: nowrap; margin-bottom: var(--card-heading-gap); }
.service-card p { color: var(--slate); font-size: var(--card-body-size); line-height: var(--card-body-line-height); }
.service-card .learn-more {
margin-top: auto;
font-size: 14px;
font-weight: 600;
color: var(--blue);
display: flex; align-items: center; gap: 6px;
}
/* ---------- Approach steps ---------- */
.approach-band, .why-band { background: var(--paper-dim); }
.steps {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
counter-reset: step;
position: relative;
}
.step {
counter-increment: step;
padding: 0 20px 0 0;
position: relative;
}
.step:not(:last-child)::after {
content: '';
position: absolute;
top: 18px; right: 0;
width: 100%; height: 1px;
background: var(--line);
}
.step-num {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--ink);
color: var(--white);
font-family: var(--font-display);
font-size: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 18px;
position: relative; z-index: 1;
}
.step h4 { font-size: 15.5px; margin-bottom: 8px; }
.step p { font-size: 13.5px; color: var(--slate); }
/* ---------- Clients marquee ---------- */
.clients-strip { padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.clients-strip .eyebrow { display: block; text-align: center; margin-bottom: 20px; }
.marquee {
position: relative;
width: 100%;
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
display: flex;
align-items: center;
gap: 56px;
width: max-content;
animation: marquee-scroll 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
letter-spacing: 0.02em;
color: var(--slate-light);
filter: grayscale(1);
opacity: 0.75;
white-space: nowrap;
transition: opacity 0.2s ease, color 0.2s ease;
}
.marquee-track span:hover { opacity: 1; color: var(--ink); }
@keyframes marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track { animation: none; }
}
/* ---------- CTA / Form band ---------- */
.cta-band {
background: var(--navy);
color: var(--white);
border-radius: 24px;
padding: 72px 64px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
position: relative;
}
.cta-copy {
display: flex;
flex-direction: column;
justify-content: center;
}
.cta-copy h2 { font-size: 32px; color: var(--white); margin-top: 14px; }
.cta-copy p { color: #c3c8e0; margin-top: 16px; font-size: 17px; }
.cta-list { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.cta-list li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #dde0f2; }
.cta-list li svg { width: 16px; height: 16px; stroke: var(--royal); flex-shrink: 0; }
.cta-band.cta-centered {
grid-template-columns: 1fr;
text-align: center;
padding: 56px 64px;
}
.cta-band.cta-centered .cta-copy { text-align: center; }
.lead-form {
background: var(--white);
border-radius: var(--radius);
padding: 30px;
color: var(--ink);
position: relative;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.form-field label { font-size: 12.5px; font-weight: 600; color: var(--slate); }
.form-field input, .form-field select, .form-field textarea {
font-family: var(--font-body);
font-size: 14.5px;
padding: 11px 13px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--line);
background: var(--paper);
color: var(--ink);
outline: none;
transition: border-color 0.15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--blue); }
.form-field textarea { resize: vertical; min-height: 70px; font-family: var(--font-body); }
@media (max-width: 640px) {
.form-field input, .form-field select, .form-field textarea { font-size: 16px; }
.service-card h3 { white-space: normal; }
}
.lead-form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.form-note { font-size: 12px; color: var(--slate); margin-top: 10px; text-align: center; }
.form-status { font-size: 13.5px; margin-top: 10px; text-align: center; display: none; }
.form-status.success { display: block; color: #1a7f4e; }
.form-status.error { display: block; color: #c23b3b; }
/* ---------- Footer ---------- */
.site-footer {
background: var(--ink);
color: #9aa1c2;
padding: 56px 0 28px;
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 32px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; color: var(--white); font-size: 17px; margin-bottom: 14px; }
.footer-brand img { width: 28px; height: 28px; }
.footer-col h5 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); margin-bottom: 16px; }
.footer-col ul { display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14.5px; color: #9aa1c2; }
.footer-col a:hover { color: var(--royal); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
font-size: 13px;
}
/* ---------- Inner page hero (services/about) ---------- */
.page-hero {
background: var(--ink);
color: var(--white);
padding: 64px 0 72px;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 700px 400px at 90% 0%, rgba(20,69,209,0.4), transparent 65%);
}
.page-hero .container { position: relative; }
.breadcrumb { font-size: 13.5px; color: #9aa1c2; margin-bottom: 18px; }
.breadcrumb a:hover { color: var(--royal); }
.page-hero h1 { font-size: 42px; color: var(--white); margin-top: 14px; max-width: 640px; }
.page-hero .hero-sub { color: #c3c8e0; }
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.detail-list { display: flex; flex-direction: column; gap: 22px; margin-top: 8px; }
.detail-item { display: flex; gap: 16px; }
.detail-item .dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--blue);
margin-top: 8px; flex-shrink: 0;
}
.detail-item h4 { font-size: 16px; margin-bottom: 6px; }
.detail-item p { font-size: 14.5px; color: var(--slate); }
.side-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 28px;
box-shadow: var(--shadow-card);
position: sticky;
top: 100px;
}
.side-card h4 { font-size: 15px; margin-bottom: 14px; }
.side-card ul { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.side-card ul li { font-size: 14px; color: var(--slate); display: flex; gap: 8px; }
.side-card ul li svg { width: 15px; height: 15px; stroke: var(--blue); flex-shrink: 0; margin-top: 2px; }
.side-card .btn { width: 100%; justify-content: center; }
.related-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ---------- Utility bands ---------- */
.divider-triangle {
width: 0; height: 0;
border-left: 10px solid transparent;
border-bottom: 16px solid var(--royal);
}
/* ---------- About page ---------- */
.about-grid {
display: grid;
grid-template-columns: 0.85fr 1.15fr;
gap: 56px;
align-items: center;
}
.about-photo-frame {
position: relative;
border-radius: 20px;
overflow: hidden;
background: var(--navy);
aspect-ratio: 4/5;
}
.about-photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.credentials { display: flex; gap: 20px; margin-top: 28px; flex-wrap: wrap; }
.credential-pill {
display: flex; align-items: center; gap: 10px;
border: 1px solid var(--line);
border-radius: 999px;
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
background: var(--white);
}
.credential-pill .school-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.values-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 8px;
}
.value-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 26px;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.value-card h4 { font-size: 16px; margin-bottom: 10px; }
.value-card p { font-size: 14.5px; color: var(--slate); }
/* ---------- Responsive ---------- */
@media (max-width: 980px) {
.container { padding: 0 24px; }
.hero-inner { grid-template-columns: 1fr; }
.hero .flight-path { max-width: 320px; margin: 32px auto 0; }
.services-grid { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
.step:not(:last-child)::after { display: none; }
.cta-band { grid-template-columns: 1fr; padding: 40px; border-radius: 20px; }
.cta-band.cta-centered { padding: 40px; }
.footer-top { grid-template-columns: 1fr 1fr; row-gap: 32px; }
.two-col { grid-template-columns: 1fr; }
.side-card { position: static; }
.related-services { grid-template-columns: 1fr; }
.about-grid { grid-template-columns: 1fr; }
.about-photo-frame { max-width: 360px; margin: 0 auto; }
.values-grid { grid-template-columns: 1fr; }
.nav-links { gap: 22px; }
}
@media (max-width: 640px) {
.nav-links, .nav-cta .btn-ghost { display: none; }
.nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: 100%; left: 0; right: 0;
background: var(--paper);
border-bottom: 1px solid var(--line);
padding: 16px 24px 24px;
gap: 16px;
}
.nav { position: relative; padding: 14px 20px; }
.nav-brand { font-size: 16px; }
.nav-brand img { width: 28px; height: 28px; }
.nav-toggle { display: block; }
.hero { padding: 48px 0 64px; }
.container { padding: 0 20px; }
.hero h1 { font-size: 31px; line-height: 1.15; margin-top: 14px; }
.hero-sub { font-size: 17px; line-height: 1.6; margin-top: 16px; }
.hero-actions { margin-top: 26px; }
.hero-actions .btn { width: 100%; justify-content: center; }
.hero-stats { gap: 22px 28px; margin-top: 40px; }
.hero-stat b { font-size: 21px; }
.hero-stat span { font-size: 12.5px; }
.flight-path { max-width: 260px !important; }
section { padding: 56px 0; }
.section-head h2 { font-size: 26px; }
.services-grid { grid-template-columns: 1fr; }
.service-card { padding: 26px 22px; }
.clients-strip { padding: 36px 0; }
.marquee-track { gap: 36px; animation-duration: 22s; }
.marquee-track span { font-size: 15px; }
.cta-band, .cta-band.cta-centered { padding: 32px 20px; }
.cta-copy h2 { font-size: 25px; }
.lead-form { padding: 22px; }
.form-row { grid-template-columns: 1fr; }
.page-hero { padding: 48px 0 56px; }
.page-hero h1 { font-size: 27px; }
.footer-top { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; gap: 10px; align-items: flex-start; }
.credentials { gap: 12px; }
.credential-pill { font-size: 13px; padding: 8px 14px; }
.blob { filter: blur(30px); }
.hero .blob-a, .hero .blob-b { width: 160px; height: 160px; }
}
@media (min-width: 341px) and (max-width: 480px) {
.cta-band, .cta-band.cta-centered { padding: 32px 24px; }
}
@media (min-width: 481px) and (max-width: 640px) {
.cta-band, .cta-band.cta-centered { padding: 32px 30px; }
}
/* Below ~340px, the 17px subheadline wraps to 4 lines with a lone final
word ("agency."), the same orphan problem at a narrower width. Stepping
the size back down here keeps every practical phone width free of an
isolated last word. The headline has the same issue: at 31px, "Smarter
marketing." itself no longer fits on one line below ~340px, breaking
into a 3rd line ("Smarter" / "marketing." / "Stronger growth."), so it
also steps down here to guarantee exactly two lines. */
@media (max-width: 340px) {
.hero h1 { font-size: 26px; }
.hero-sub { font-size: 15px; }
}
/* ============================================
REDESIGN v2: staged hero dashboard, equal-card grids,
glassmorphism, animated type moment, Sankey flow,
scroll-scrubbed process, coastline strip, clean CTA
============================================ */
/* ---------- Hero: centered layout with dashboard below ---------- */
.hero-centered { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.hero-copy-centered { max-width: 640px; text-align: center; }
.hero-copy-centered .hero-actions { justify-content: center; }
.hero-copy-centered .hero-sub { margin-left: auto; margin-right: auto; }
.hero-dash-wrap { width: 100%; max-width: 980px; }
/* ---------- Client logos ---------- */
.marquee-track span { font-size: 20px; }
.marquee-track { gap: 64px; }
.clients-strip { padding: 36px 0; }
.clients-strip .eyebrow { margin-bottom: 20px; }
/* ---------- Split (alternating) layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split.reverse .split-copy { order: 2; }
.split.reverse .split-visual { order: 1; }
.split-copy .eyebrow { display: block; margin-bottom: 14px; }
.split-copy h2 { font-size: 34px; margin-bottom: 16px; }
.split-copy p { color: var(--slate); font-size: 16px; line-height: 1.65; }
.split-visual { display: flex; align-items: center; justify-content: center; }
.split-below { margin-top: 56px; }
/* ---------- Equal card grid (Why Coronado: 6 equal cards, 3x2) ---------- */
.equal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
@media (max-width: 860px) {
.equal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.equal-grid { grid-template-columns: 1fr; }
}
.equal-card {
background: var(--white);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px 28px;
display: flex;
flex-direction: column;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease;
}
.equal-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }
.equal-card .card-icon {
width: var(--card-icon-size); height: var(--card-icon-size);
border-radius: 14px;
background: linear-gradient(135deg, var(--blue), var(--royal));
display: flex; align-items: center; justify-content: center;
transition: transform 0.3s cubic-bezier(.2,.8,.2,1);
margin-bottom: var(--card-icon-gap);
}
.equal-card:hover .card-icon { transform: scale(1.1) rotate(6deg); }
.equal-card .card-icon svg { width: var(--card-icon-svg-size); height: var(--card-icon-svg-size); stroke: white; }
.equal-card h3 { font-size: var(--card-title-size); margin-bottom: var(--card-heading-gap); }
.equal-card p { font-size: var(--card-body-size); color: var(--slate); line-height: var(--card-body-line-height); }
/* ---------- Oversized type moment (animated words) ---------- */
.type-moment { padding: 56px 0 8px; text-align: center; overflow: hidden; }
.type-moment h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(52px, 9vw, 128px);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--ink);
}
.tm-word { display: inline-block; }
.tm-fade { opacity: 0; transition: opacity 1s ease; }
.reveal.in-view .tm-fade { opacity: 1; }
.tm-slide { opacity: 0; transform: translateY(28px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.8,.2,1); transition-delay: 0.25s; }
.reveal.in-view .tm-slide { opacity: 1; transform: translateY(0); }
.tm-blur {
opacity: 0;
filter: blur(14px);
background: linear-gradient(100deg, var(--blue), var(--royal));
-webkit-background-clip: text; background-clip: text; color: transparent;
transition: opacity 1s ease, filter 1.1s ease;
transition-delay: 0.55s;
}
.reveal.in-view .tm-blur { opacity: 1; filter: blur(0); }
.tm-underline-wrap { position: relative; display: inline-block; }
.tm-underline {
position: absolute; left: 0; bottom: -6px;
height: 5px; width: 100%;
background: linear-gradient(90deg, var(--blue), var(--royal));
border-radius: 3px;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.8s cubic-bezier(.2,.8,.2,1);
transition-delay: 1.4s;
}
.reveal.in-view .tm-underline { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
.tm-fade, .tm-slide, .tm-blur { opacity: 1; transform: none; filter: none; transition: none; }
.tm-underline { transform: scaleX(1); transition: none; }
}
/* ---------- Dashboard visual (staged, gated on .reveal.in-view) ---------- */
.dash-panel {
background: var(--ink);
border-radius: 22px;
padding: 36px;
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--shadow-soft);
position: relative;
overflow: hidden;
width: 100%;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.reveal.in-view .dash-panel { opacity: 1; transform: translateY(0); }
.dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }
.dash-kpis.dash-kpis-2col { grid-template-columns: repeat(2, 1fr); }
.dash-kpi {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 15px 17px;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2,.8,.2,1);
transition-delay: var(--d, 0s);
}
.reveal.in-view .dash-kpi { opacity: 1; transform: translateY(0); }
.dash-kpi-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9aa1c2; margin-bottom: 7px; }
.dash-kpi-label svg { width: 12px; height: 12px; }
.dash-kpi-label .up { stroke: #4ade80; }
.dash-kpi-label .down { stroke: #f87171; }
.dash-kpi-value { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--white); }
.dash-dot {
display: inline-block; width: 6px; height: 6px; border-radius: 50%;
background: #4ade80; margin-right: 5px;
}
.reveal.in-view .dash-dot { animation: dash-pulse 2s ease-in-out infinite; animation-delay: 2.5s; }
@keyframes dash-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
50% { opacity: 0.6; box-shadow: 0 0 0 4px rgba(74,222,128,0); }
}
.dash-chart-wrap { position: relative; }
.dash-chart { width: 100%; height: auto; display: block; overflow: visible; }
/* Hero dashboard: mobile simplification only. Hero copy/CTA/desktop design
are locked and untouched. On mobile the line chart is hidden entirely
(too small to read any value from) and the four KPI cards become the
whole dashboard, sized up to be the primary visual element. */
@media (max-width: 640px) {
.dash-chart-wrap,
.dash-milestone,
.dash-annotation { display: none; }
.dash-panel { padding: 20px; border-radius: 18px; }
.dash-kpis { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 0; }
.dash-kpi { padding: 18px 18px; border-radius: 14px; }
.dash-kpi-value { font-size: 24px; }
.dash-kpi-label { font-size: 12.5px; margin-bottom: 9px; }
.hero-dash-wrap { margin-bottom: 0; }
}
@media (max-width: 380px) {
.dash-panel { padding: 16px; }
.dash-kpis { gap: 10px; }
.dash-kpi { padding: 15px 15px; }
.dash-kpi-value { font-size: 21px; }
.dash-kpi-label { font-size: 11.5px; }
}
.dash-line-draw {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
transition: stroke-dashoffset 3s cubic-bezier(.3,.6,.2,1);
transition-delay: var(--line-delay, 1.8s);
}
.reveal.in-view .dash-line-draw { stroke-dashoffset: 0; }
.dash-area-fill {
opacity: 0;
transition: opacity 1.2s ease;
transition-delay: calc(var(--line-delay, 1.8s) + 2.6s);
}
.reveal.in-view .dash-area-fill { opacity: 1; }
.dash-milestone {
opacity: 0;
transform: scale(0.4);
transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.3,.6,.3,1.4);
}
.reveal.in-view .dash-milestone { opacity: 1; transform: scale(1); }
.dash-annotation {
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal.in-view .dash-annotation { opacity: 1; transform: translateY(0); }
.dash-final-dot {
opacity: 0;
transition: opacity 0.4s ease;
transition-delay: var(--final-delay, 5.6s);
}
.reveal.in-view .dash-final-dot { opacity: 1; }
.reveal.in-view .dash-final-dot circle:first-child {
animation: dash-pulse-ring 1.8s ease-out infinite;
animation-delay: var(--final-delay, 5.6s);
}
@keyframes dash-pulse-ring {
0% { r: 5; opacity: 0.9; }
100% { r: 16; opacity: 0; }
}
.dash-roas-badge {
opacity: 0;
transform: translateX(-14px);
transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2,.8,.2,1);
transition-delay: var(--badge-delay, 6s);
}
.reveal.in-view .dash-roas-badge { opacity: 1; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
.dash-panel, .dash-kpi, .dash-line-draw, .dash-area-fill, .dash-milestone, .dash-annotation, .dash-final-dot, .dash-roas-badge {
transition: none !important; animation: none !important;
opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important;
}
}
/* ============================================
REDESIGN v3: static logos, carousel section,
funnel Sankey, sticky scroll-driven process
(hero is locked/untouched; dash-panel rules
above remain solely for the hero's use)
============================================ */
/* ---------- Static client logos (no marquee) ---------- */
.clients-static {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 22px 48px;
}
.clients-static span {
font-family: var(--font-display);
font-weight: 600;
font-size: 19px;
letter-spacing: 0.01em;
color: var(--slate-light);
filter: grayscale(1);
opacity: 0.8;
transition: opacity 0.2s ease, color 0.2s ease;
}
.clients-static span:hover { opacity: 1; color: var(--ink); }
/* ---------- Why Coronado: simple static section header ---------- */
.why-band .container { max-width: 1250px; }
.why-band .section-head { max-width: 920px; margin-left: 0; margin-right: 0; text-align: left; }
.why-band .section-head p { max-width: 720px; }
@media (max-width: 640px) {
.why-band .section-head p { max-width: none; }
}
@media (min-width: 341px) and (max-width: 480px) {
.why-band .section-head { width: calc(100% - 8px); margin-left: 4px; margin-right: 4px; }
}
@media (min-width: 481px) and (max-width: 640px) {
.why-band .section-head { width: calc(100% - 20px); margin-left: 10px; margin-right: 10px; }
}
/* ---------- Goals carousel (Built Around Your Goals) ---------- */
.goals-band {
position: relative;
overflow: hidden;
padding: 110px 24px;
}
.goals-bg {
position: absolute; inset: 0;
background-color: var(--ink);
background-image: url('../assets/ocean.jpg');
background-size: cover;
background-position: center 40%;
z-index: 0;
}
.goals-overlay {
position: absolute; inset: 0;
background: radial-gradient(ellipse at center, transparent 50%, rgba(6,10,22,0.22) 100%);
z-index: 1;
}
.goals-panel {
position: relative;
z-index: 2;
width: 88%;
max-width: 1240px;
margin: 0 auto;
background: rgba(19, 37, 82, 0.95);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 28px;
box-shadow: 0 44px 90px -30px rgba(0,0,0,0.55);
padding: 76px 64px;
}
.goals-panel .section-head { position: relative; max-width: 640px; margin-bottom: 48px; }
.goals-panel .section-head h2 { color: #fff; }
.goals-panel .section-head p { color: #b8bedb; }
@media (max-width: 980px) {
.goals-band { padding: 72px 20px; }
.goals-panel { width: 100%; padding: 48px 32px; border-radius: 22px; }
}
@media (max-width: 640px) {
.goals-band { padding: 56px 20px; }
.goals-panel { padding: 32px 20px; }
.goals-panel .section-head { margin-bottom: 32px; }
}
@media (max-width: 340px) {
.goals-band { padding: 48px 20px; }
}
@media (min-width: 341px) and (max-width: 480px) {
.goals-band { padding: 56px 24px; }
}
@media (min-width: 481px) and (max-width: 640px) {
.goals-band { padding: 56px 30px; }
}
.carousel {
position: relative;
max-width: 1080px;
margin: 0 auto;
padding: 8px 0 0;
}
.carousel-track {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 340px;
touch-action: pan-y;
}
.carousel-card {
position: absolute;
width: 390px;
max-width: 76vw;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 18px;
padding: 34px 32px;
transition: transform 0.7s cubic-bezier(.2,.8,.2,1), opacity 0.7s cubic-bezier(.2,.8,.2,1);
opacity: 0;
pointer-events: none;
}
.carousel-card.is-center {
transform: translateX(0) scale(1);
opacity: 1;
z-index: 3;
pointer-events: auto;
background: rgba(255,255,255,0.1);
border-color: rgba(255,255,255,0.22);
box-shadow: 0 20px 44px -20px rgba(0,0,0,0.5);
}
.carousel-card.is-left {
transform: translateX(-110%) scale(0.8);
opacity: 0.55;
z-index: 2;
}
.carousel-card.is-right {
transform: translateX(110%) scale(0.8);
opacity: 0.55;
z-index: 2;
}
.carousel-icon {
width: var(--card-icon-size); height: var(--card-icon-size);
border-radius: 14px;
background: rgba(47,104,255,0.18);
border: 1px solid rgba(90,130,255,0.35);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--card-icon-gap);
}
.carousel-icon svg { width: var(--card-icon-svg-size); height: var(--card-icon-svg-size); stroke: var(--royal); }
.carousel-card h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--card-title-size); color: #fff; margin-bottom: var(--card-heading-gap); }
.carousel-card p { font-size: var(--card-body-size); color: #b8bedb; line-height: var(--card-body-line-height); }
@media (max-width: 900px) {
.carousel-track { height: 300px; }
.carousel-card { width: 300px; padding: 28px 24px; }
.carousel-card.is-left { transform: translateX(-105%) scale(0.82); }
.carousel-card.is-right { transform: translateX(105%) scale(0.82); }
}
@media (max-width: 640px) {
.carousel-track {
display: block;
height: auto;
width: 100%;
padding: 0;
}
.carousel-card {
display: none;
position: relative;
width: 100%;
max-width: none;
padding: 26px 24px;
margin: 0 auto;
opacity: 1 !important;
transform: none !important;
filter: none !important;
pointer-events: auto;
}
.carousel-card.is-active {
display: flex;
flex-direction: column;
justify-content: center;
}
.carousel-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-top: 20px;
}
.carousel-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.28);
border: none; padding: 0; cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.carousel-dot.active { background: #fff; transform: scale(1.35); }
}
@media (min-width: 641px) {
.carousel-dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.carousel-card { transition: opacity 0.3s ease; }
}
/* ---------- Services: uploaded illustration visuals ---------- */
.services-intro { max-width: 920px; margin: 0 auto 48px; text-align: center; }
.services-intro p { max-width: 620px; margin-left: auto; margin-right: auto; }
.services-intro .eyebrow { display: block; }
@media (max-width: 640px) {
.services-intro p { max-width: none; }
}
@media (min-width: 341px) and (max-width: 480px) {
.services-intro { width: calc(100% - 8px); margin-left: auto; margin-right: auto; }
}
@media (min-width: 481px) and (max-width: 640px) {
.services-intro { width: calc(100% - 20px); margin-left: auto; margin-right: auto; }
}
.service-card {
padding: 0;
overflow: hidden;
}
.service-card-body {
padding: 26px 28px 30px;
display: flex;
flex-direction: column;
flex: 1;
}
.mini-ui {
background: #ffffff;
border-bottom: 1px solid var(--line);
position: relative;
padding: 20px;
}
.mini-illustration img {
width: 100%;
height: auto;
aspect-ratio: 5 / 4;
object-fit: contain;
display: block;
}
@media (max-width: 640px) {
.mini-ui { padding: 16px; }
.service-card-body { padding: 22px 22px 26px; }
}
/* ---------- Process: two-column layout (timeline left, ocean image right) ---------- */
/* Pinned scroll sequence (desktop only, JS-gated). Default state is a
plain static section — .is-pinned is added by JS only when the viewport
qualifies as desktop and the user hasn't requested reduced motion, so
there's a safe, simple fallback for every other case. */
.process-pin-wrapper { position: relative; }
.process-pin-inner { }
.process-pin-wrapper.is-pinned .process-pin-inner {
position: sticky;
top: 96px;
}
.process-header { margin-bottom: 48px; max-width: 640px; margin-left: auto; margin-right: auto; text-align: center; }
@media (max-width: 640px) {
.process-header { max-width: none; }
}
@media (min-width: 341px) and (max-width: 480px) {
.process-header { width: calc(100% - 8px); margin-left: auto; margin-right: auto; }
}
@media (min-width: 481px) and (max-width: 640px) {
.process-header { width: calc(100% - 20px); margin-left: auto; margin-right: auto; }
}
.process-header h2 { white-space: pre-line; }
/* Utility: forces a line break only on mobile, without touching the
desktop heading or duplicating copy. */
.mobile-break { display: none; }
@media (max-width: 640px) {
.mobile-break { display: block; }
}
.process-header .eyebrow { display: block; }
/* Centered, standalone timeline (no accompanying image) */
.process-timeline-wrap {
max-width: 920px;
margin: 0 auto;
}
.timeline {
position: relative;
padding: 4px 0;
}
.timeline::before {
content: '';
position: absolute;
left: 50%; top: 6px; bottom: 6px;
width: 2px;
background: var(--line);
transform: translateX(-50%);
}
.timeline-step {
position: relative;
display: flex;
margin-top: -86px;
}
.timeline-step:first-child { margin-top: 0; }
.timeline-step.side-left { justify-content: flex-start; }
.timeline-step.side-right { justify-content: flex-end; }
.timeline-node {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 15px; height: 15px;
border-radius: 50%;
background: var(--white);
border: 2.5px solid var(--royal);
z-index: 2;
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.timeline-node.is-active {
background: var(--royal);
box-shadow: 0 0 0 4px rgba(47,104,255,0.16);
}
.timeline-card {
width: calc(50% - 18px);
background: var(--white);
border: 1px solid var(--line);
border-radius: 14px;
padding: 26px 30px;
position: relative;
z-index: 1;
transition: transform 0.25s cubic-bezier(.2,.8,.2,1), box-shadow 0.25s ease,
border-color 0.25s ease;
}
.timeline-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.timeline-card.is-active {
border-color: var(--royal);
box-shadow: 0 12px 32px -18px rgba(20,69,209,0.35);
}
.timeline-card-icon {
width: var(--card-icon-size); height: var(--card-icon-size);
border-radius: 50%;
background: var(--paper);
border: 1.5px solid var(--line);
display: flex; align-items: center; justify-content: center;
margin-bottom: var(--card-icon-gap);
transition: background 0.25s ease, border-color 0.25s ease;
}
.timeline-card-icon svg { width: var(--card-icon-svg-size); height: var(--card-icon-svg-size); stroke: var(--blue); transition: stroke 0.25s ease; }
.timeline-card.is-active .timeline-card-icon { background: var(--royal); border-color: var(--royal); }
.timeline-card.is-active .timeline-card-icon svg { stroke: var(--white); }
.timeline-card h3 { font-size: var(--card-title-size); margin-bottom: var(--card-heading-gap); }
.timeline-card p { font-size: var(--card-body-size); color: var(--slate); line-height: var(--card-body-line-height); }
@media (max-width: 980px) {
.process-timeline-wrap { max-width: 640px; }
}
@media (max-width: 640px) {
.timeline::before { left: 22px; }
.timeline-step { margin-top: 22px; }
.timeline-step:first-child { margin-top: 0; }
.timeline-step.side-left, .timeline-step.side-right { justify-content: flex-start; }
.timeline-node { left: 22px; }
.timeline-card { width: calc(100% - 50px); margin-left: 50px; padding: 20px 22px; }
}