/* ==========================================================================
ELSP CAPITAL HOLDINGS INC. — SITE-WIDE CSS
Paste the ENTIRE contents of this file into:
Squarespace → Design → Custom CSS
--------------------------------------------------------------------------
Everything is namespaced under .elsp so it cannot fight your template.
The only global rules are the four marked [GLOBAL] near the bottom.
========================================================================== */
/* ---------- 1. DESIGN TOKENS ---------------------------------------------- */
:root{
/* Colour system */
--elsp-navy: #0D1B2A; /* primary */
--elsp-navy-800: #122336;
--elsp-navy-700: #172E45;
--elsp-navy-600: #1E3A52;
--elsp-navy-line: rgba(255,255,255,.12);
--elsp-gold: #C9A227; /* accent */
--elsp-gold-soft: #E0C25A;
--elsp-gold-line: rgba(201,162,39,.35);
--elsp-white: #FFFFFF; /* secondary */
--elsp-gray: #F5F5F5; /* support */
--elsp-gray-200: #E7E9EC;
--elsp-ink: #14202B; /* body text on light */
--elsp-ink-soft: #56626F; /* muted text on light */
--elsp-ink-onnavy: rgba(255,255,255,.78);
/* Type */
--elsp-serif: 'Playfair Display', Canela, 'Times New Roman', Georgia, serif;
--elsp-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Rhythm — 8px base grid */
--elsp-s1: 8px; --elsp-s2: 16px; --elsp-s3: 24px; --elsp-s4: 32px;
--elsp-s5: 48px; --elsp-s6: 64px; --elsp-s7: 96px; --elsp-s8: 128px;
--elsp-section: clamp(80px, 9vw, 152px); /* vertical section padding */
--elsp-gutter: clamp(20px, 5vw, 64px); /* horizontal page gutter */
--elsp-max: 1240px; /* content max width */
--elsp-narrow: 760px; /* reading measure */
/* Motion */
--elsp-ease: cubic-bezier(.22,.61,.36,1);
/* ---- IMAGE HOOKS -----------------------------------------------------
Upload each photo to Squarespace, copy its URL, and paste it here.
Until you do, the section falls back to an elegant navy gradient.
------------------------------------------------------------------- */
--elsp-img-hero: none; /* Home hero. e.g. url('https://images.squarespace-cdn.com/.../hero.jpg') */
--elsp-img-about: none; /* About page hero */
--elsp-img-philosophy: none; /* Investment Philosophy hero */
--elsp-img-portfolio: none; /* Portfolio hero + Tree Corporation image frame */
--elsp-img-leadership: none; /* Leadership page hero */
--elsp-img-governance: none; /* Governance page hero */
--elsp-img-insights: none; /* News & Insights hero */
--elsp-img-contact: none; /* Contact page hero */
--elsp-img-chairman: none; /* Chairman portrait, 4:5 */
}
/* ---------- 2. FOUNDATION ------------------------------------------------- */
.elsp{
font-family: var(--elsp-sans);
font-size: 17px;
line-height: 1.75;
color: var(--elsp-ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
}
.elsp *,
.elsp *::before,
.elsp *::after{ box-sizing: border-box; }
.elsp p{ margin: 0 0 1.15em; }
.elsp p:last-child{ margin-bottom: 0; }
.elsp strong{ font-weight: 600; color: inherit; }
.elsp img{ display:block; max-width:100%; height:auto; }
/* Headings */
.elsp h1,.elsp h2,.elsp h3,.elsp h4{
font-family: var(--elsp-serif);
font-weight: 400;
letter-spacing: -0.015em;
line-height: 1.08;
margin: 0 0 var(--elsp-s3);
text-wrap: balance;
}
.elsp h1{ font-size: clamp(2.6rem, 6.4vw, 5.1rem); }
.elsp h2{ font-size: clamp(1.95rem, 3.8vw, 3.2rem); line-height:1.12; }
.elsp h3{ font-size: clamp(1.25rem, 1.7vw, 1.6rem); line-height:1.25; letter-spacing:-.01em; }
.elsp h4{ font-size: 1.0625rem; font-family: var(--elsp-sans); font-weight:600; letter-spacing:0; }
/* Eyebrow / kicker */
.elsp-eyebrow{
display:block;
font-family: var(--elsp-sans);
font-size: .72rem;
font-weight: 600;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--elsp-gold);
margin: 0 0 var(--elsp-s3);
}
.elsp-eyebrow--onlight{ color: #80660F; } /* gold darkened to pass WCAG AA on white and on #F5F5F5 */
/* Lead paragraph */
.elsp-lead{
font-size: clamp(1.125rem, 1.45vw, 1.375rem);
line-height: 1.6;
color: var(--elsp-ink);
letter-spacing: -.005em;
}
.elsp-section--navy .elsp-lead{ color: rgba(255,255,255,.88); }
/* Hairline rule */
.elsp-rule{
width: 56px; height: 1px; border: 0; margin: 0 0 var(--elsp-s4);
background: var(--elsp-gold);
}
.elsp-rule--center{ margin-left:auto; margin-right:auto; }
/* ---------- 3. LAYOUT ---------------------------------------------------- */
.elsp-section{
position: relative;
padding: var(--elsp-section) var(--elsp-gutter);
background: var(--elsp-white);
}
.elsp-section--gray{ background: var(--elsp-gray); }
.elsp-section--navy{
background: var(--elsp-navy);
color: var(--elsp-ink-onnavy);
}
.elsp-section--navy h1,
.elsp-section--navy h2,
.elsp-section--navy h3,
.elsp-section--navy h4{ color: var(--elsp-white); }
.elsp-section--tight{ padding-top: clamp(56px,6vw,96px); padding-bottom: clamp(56px,6vw,96px); }
.elsp-wrap{ max-width: var(--elsp-max); margin: 0 auto; }
.elsp-narrow{ max-width: var(--elsp-narrow); }
.elsp-center{ text-align: center; }
.elsp-center .elsp-rule{ margin-left:auto; margin-right:auto; }
/* Two-column split */
.elsp-split{
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
.elsp-split--top{ align-items: start; }
.elsp-split--40{ grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
/* Section header block */
.elsp-shead{ max-width: 780px; margin-bottom: clamp(48px, 5vw, 80px); }
.elsp-shead.elsp-center{ margin-left:auto; margin-right:auto; }
/* ---------- 4. HERO ----------------------------------------------------- */
.elsp-hero{
position: relative;
display: flex;
align-items: flex-end;
min-height: min(88vh, 860px);
padding: calc(var(--elsp-section) + 40px) var(--elsp-gutter) var(--elsp-section);
background-color: var(--elsp-navy);
background-image: var(--elsp-img-hero);
background-size: cover;
background-position: center 40%;
color: var(--elsp-white);
overflow: hidden;
}
.elsp-hero--sub{ min-height: min(58vh, 560px); align-items: flex-end; }
/* Per-page hero photography. Each inner page can carry its own image, or
inherit the home hero simply by leaving its variable set to none. */
.elsp-hero--about{ background-image: var(--elsp-img-about); }
.elsp-hero--philosophy{ background-image: var(--elsp-img-philosophy); }
.elsp-hero--portfolio{ background-image: var(--elsp-img-portfolio); }
.elsp-hero--leadership{ background-image: var(--elsp-img-leadership); }
.elsp-hero--governance{ background-image: var(--elsp-img-governance); }
.elsp-hero--insights{ background-image: var(--elsp-img-insights); }
.elsp-hero--contact{ background-image: var(--elsp-img-contact); }
/* Navy veil so type always passes contrast over any photo */
.elsp-hero::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(13,27,42,.55) 0%, rgba(13,27,42,.72) 45%, rgba(13,27,42,.93) 100%),
radial-gradient(120% 85% at 12% 100%, rgba(30,58,82,.55) 0%, rgba(13,27,42,0) 62%);
}
/* Fine gold grid — reads as architectural drafting, not decoration */
.elsp-hero::after{
content:""; position:absolute; inset:0; opacity:.16;
background-image:
linear-gradient(to right, var(--elsp-gold) 1px, transparent 1px),
linear-gradient(to bottom, var(--elsp-gold) 1px, transparent 1px);
background-size: 120px 120px;
mask-image: radial-gradient(90% 70% at 78% 22%, #000 0%, transparent 72%);
-webkit-mask-image: radial-gradient(90% 70% at 78% 22%, #000 0%, transparent 72%);
}
.elsp-hero__inner{ position: relative; z-index:2; max-width: var(--elsp-max); margin:0 auto; width:100%; }
.elsp-hero h1{ color: var(--elsp-white); max-width: 15ch; }
.elsp-hero__sub{
max-width: 52ch;
font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
line-height: 1.6;
color: rgba(255,255,255,.82);
margin: var(--elsp-s4) 0 var(--elsp-s5);
}
.elsp-hero__meta{
display:flex; flex-wrap:wrap; gap: var(--elsp-s3) var(--elsp-s5);
margin-top: var(--elsp-s7);
padding-top: var(--elsp-s4);
border-top: 1px solid var(--elsp-navy-line);
font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
color: rgba(255,255,255,.62);
}
/* ---------- 5. BUTTONS -------------------------------------------------- */
.elsp-btns{ display:flex; flex-wrap:wrap; gap: var(--elsp-s2) var(--elsp-s3); }
.elsp-btn{
--b: var(--elsp-gold);
position: relative;
display:inline-flex; align-items:center; gap:.7em;
padding: 1.05em 2.1em;
font-family: var(--elsp-sans);
font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
text-decoration:none; cursor:pointer;
border: 1px solid var(--b);
background: var(--elsp-gold); color: var(--elsp-navy);
transition: background .35s var(--elsp-ease), color .35s var(--elsp-ease),
border-color .35s var(--elsp-ease), transform .35s var(--elsp-ease);
}
.elsp-btn:hover,.elsp-btn:focus-visible{
background: transparent; color: var(--elsp-gold-soft);
border-color: var(--elsp-gold-soft); transform: translateY(-2px);
}
/* Ghost — on navy */
.elsp-btn--ghost{
background: transparent; color: var(--elsp-white);
border-color: rgba(255,255,255,.4);
}
.elsp-btn--ghost:hover,.elsp-btn--ghost:focus-visible{
background: var(--elsp-white); color: var(--elsp-navy); border-color: var(--elsp-white);
}
/* Outline — on white */
.elsp-btn--outline{
background: transparent; color: var(--elsp-navy); border-color: var(--elsp-navy);
}
.elsp-btn--outline:hover,.elsp-btn--outline:focus-visible{
background: var(--elsp-navy); color: var(--elsp-white);
}
/* Text link with animated rule */
.elsp-link{
display:inline-flex; align-items:center; gap:.6em;
font-size:.8rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
text-decoration:none; color: var(--elsp-navy);
padding-bottom:.5em; border-bottom:1px solid var(--elsp-gold-line);
transition: color .3s var(--elsp-ease), border-color .3s var(--elsp-ease), gap .3s var(--elsp-ease);
}
.elsp-link:hover,.elsp-link:focus-visible{ color:#80660F; border-color: var(--elsp-gold); gap:1.1em; }
.elsp-section--navy .elsp-link,
.elsp-hero .elsp-link{ color: var(--elsp-white); }
.elsp-section--navy .elsp-link:hover,
.elsp-hero .elsp-link:hover{ color: var(--elsp-gold-soft); }
.elsp-link svg{ width:16px; height:8px; flex:none; }
.elsp a:focus-visible,
.elsp button:focus-visible{ outline: 2px solid var(--elsp-gold-soft); outline-offset: 4px; }
/* ---------- 6. CARDS / GRIDS ------------------------------------------- */
.elsp-grid{ display:grid; gap: clamp(20px, 2.4vw, 32px); }
.elsp-grid--2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.elsp-grid--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.elsp-grid--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
/* Principle card (numbered, minimal) */
.elsp-card{
position: relative;
padding: clamp(28px,2.6vw,40px);
background: var(--elsp-white);
border: 1px solid var(--elsp-gray-200);
border-top: 2px solid var(--elsp-navy);
transition: transform .45s var(--elsp-ease), box-shadow .45s var(--elsp-ease), border-top-color .45s var(--elsp-ease);
}
.elsp-card:hover{
transform: translateY(-6px);
box-shadow: 0 24px 48px -24px rgba(13,27,42,.28);
border-top-color: var(--elsp-gold);
}
.elsp-card__num{
display:block; font-family: var(--elsp-serif); font-size:1.5rem;
color: var(--elsp-gold); margin-bottom: var(--elsp-s3);
}
.elsp-card h3{ margin-bottom: var(--elsp-s2); color: var(--elsp-navy); }
.elsp-card p{ font-size:.96rem; color: var(--elsp-ink-soft); margin:0; }
/* Card on navy */
.elsp-section--navy .elsp-card{
background: var(--elsp-navy-800);
border-color: var(--elsp-navy-line);
border-top-color: var(--elsp-gold-line);
}
.elsp-section--navy .elsp-card:hover{ border-top-color: var(--elsp-gold); box-shadow:none; background: var(--elsp-navy-700); }
.elsp-section--navy .elsp-card p{ color: rgba(255,255,255,.7); }
/* Sector card — icon + status tag */
.elsp-sector{
display:flex; flex-direction:column;
padding: clamp(28px,2.6vw,38px);
background: var(--elsp-white);
border:1px solid var(--elsp-gray-200);
transition: transform .45s var(--elsp-ease), box-shadow .45s var(--elsp-ease), border-color .45s var(--elsp-ease);
}
.elsp-sector:hover{
transform: translateY(-6px); border-color: var(--elsp-gold-line);
box-shadow: 0 24px 48px -26px rgba(13,27,42,.24);
}
.elsp-sector__icon{
width:44px; height:44px; margin-bottom: var(--elsp-s4);
color: var(--elsp-navy);
}
.elsp-sector:hover .elsp-sector__icon{ color: #80660F; }
.elsp-sector__icon svg{ width:100%; height:100%; display:block; }
.elsp-sector h3{ font-size:1.1875rem; margin-bottom: var(--elsp-s2); color: var(--elsp-navy); }
.elsp-sector p{ font-size:.94rem; color: var(--elsp-ink-soft); margin:0 0 var(--elsp-s3); }
.elsp-tag{
align-self:flex-start; margin-top:auto;
font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
padding:.45em .85em; border:1px solid currentColor;
}
.elsp-tag--held{ color:#0D1B2A; background: rgba(201,162,39,.16); border-color: var(--elsp-gold); }
.elsp-tag--watch{ color:#56626F; }
/* ---------- 7. TIMELINE / PROCESS -------------------------------------- */
.elsp-process{ counter-reset: step; display:grid; gap:0; }
.elsp-step{
counter-increment: step;
display:grid; grid-template-columns: 88px 1fr;
gap: clamp(20px,3vw,48px);
padding: clamp(26px,2.6vw,36px) 0;
border-top: 1px solid var(--elsp-navy-line);
align-items: start;
}
.elsp-step:last-child{ border-bottom: 1px solid var(--elsp-navy-line); }
.elsp-step__n{
font-family: var(--elsp-serif); font-size: clamp(1.75rem,2.6vw,2.5rem);
line-height:1; color: var(--elsp-gold);
}
.elsp-step h3{ margin-bottom: var(--elsp-s2); }
.elsp-step p{ margin:0; max-width: 62ch; font-size:1rem; }
.elsp-section--navy .elsp-step p{ color: rgba(255,255,255,.72); }
/* Vertical history timeline */
.elsp-timeline{ position:relative; padding-left: clamp(28px,4vw,56px); }
.elsp-timeline::before{
content:""; position:absolute; left:0; top:.6em; bottom:.6em; width:1px;
background: linear-gradient(180deg, var(--elsp-gold) 0%, var(--elsp-gray-200) 100%);
}
.elsp-tl{ position:relative; padding-bottom: clamp(36px,4vw,56px); }
.elsp-tl:last-child{ padding-bottom:0; }
.elsp-tl::before{
content:""; position:absolute; left: calc(clamp(28px,4vw,56px) * -1); top:.55em;
width:9px; height:9px; margin-left:-4px; border-radius:50%;
background: var(--elsp-gold); box-shadow: 0 0 0 5px rgba(201,162,39,.14);
}
.elsp-tl__year{
display:block; font-family: var(--elsp-sans); font-size:.78rem; font-weight:600;
letter-spacing:.16em; color:#80660F; margin-bottom: var(--elsp-s1);
}
.elsp-tl h3{ font-size:1.25rem; margin-bottom: var(--elsp-s2); color: var(--elsp-navy); }
.elsp-tl p{ margin:0; color: var(--elsp-ink-soft); max-width:60ch; }
/* ---------- 8. METRICS -------------------------------------------------- */
.elsp-metrics{
display:grid; grid-template-columns: repeat(4, minmax(0,1fr));
gap: 1px; background: var(--elsp-navy-line);
border: 1px solid var(--elsp-navy-line);
}
.elsp-metric{ padding: clamp(32px,3.4vw,52px) clamp(20px,2vw,32px); background: var(--elsp-navy); }
.elsp-metric__val{
display:block; font-family: var(--elsp-serif);
font-size: clamp(2.6rem, 5vw, 4.25rem); line-height:1;
color: var(--elsp-white); letter-spacing:-.02em;
}
.elsp-metric__val sup{ font-size:.4em; top:-.9em; color: var(--elsp-gold); }
.elsp-metric__label{
display:block; margin-top: var(--elsp-s3);
font-size:.74rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
color: rgba(255,255,255,.6); line-height:1.5;
}
.elsp-metrics__note{
margin-top: var(--elsp-s4); font-size:.8rem; color: rgba(255,255,255,.45);
letter-spacing:.02em;
}
/* ---------- 9. PULL QUOTE ---------------------------------------------- */
.elsp-quote{ position:relative; padding-left: clamp(28px,4vw,56px); }
.elsp-quote::before{
content:""; position:absolute; left:0; top:.35em; bottom:.35em; width:2px;
background: var(--elsp-gold);
}
.elsp-quote blockquote{
margin:0; font-family: var(--elsp-serif);
font-size: clamp(1.4rem, 2.5vw, 2.125rem); line-height:1.3;
letter-spacing:-.015em; color: var(--elsp-white); text-wrap: balance;
}
.elsp-section:not(.elsp-section--navy) .elsp-quote blockquote{ color: var(--elsp-navy); }
.elsp-quote cite{
display:block; margin-top: var(--elsp-s4); font-style:normal;
font-size:.78rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
color: var(--elsp-gold);
}
/* ---------- 10. PORTRAIT / MEDIA FRAME -------------------------------- */
.elsp-figure{
position:relative; aspect-ratio: 4 / 5;
background-color: var(--elsp-navy-800);
background-size: cover; background-position: center;
border: 1px solid var(--elsp-navy-line);
}
.elsp-figure--wide{ aspect-ratio: 16 / 10; }
.elsp-figure--square{ aspect-ratio: 1 / 1; }
.elsp-figure::after{ /* gold corner bracket */
content:""; position:absolute; right:-1px; bottom:-1px; width:64px; height:64px;
border-right:2px solid var(--elsp-gold); border-bottom:2px solid var(--elsp-gold);
}
.elsp-figure__ph{ /* placeholder label, delete once photo is in */
position:absolute; inset:0; display:grid; place-content:center; text-align:center;
padding: var(--elsp-s4);
font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
color: rgba(255,255,255,.42); line-height:1.9;
}
.elsp-figcaption{
margin-top: var(--elsp-s3); font-size:.78rem; letter-spacing:.1em;
text-transform:uppercase; color: var(--elsp-ink-soft);
}
/* ---------- 11. DEFINITION / COMPARISON TABLE ------------------------- */
.elsp-compare{
display:grid; grid-template-columns: repeat(2,minmax(0,1fr));
gap:1px; background: var(--elsp-gray-200); border:1px solid var(--elsp-gray-200);
}
.elsp-compare__cell{ background: var(--elsp-white); padding: clamp(24px,2.4vw,36px); }
.elsp-compare__cell--head{
background: var(--elsp-navy); color: var(--elsp-white);
font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
}
.elsp-compare__cell h4{ color: var(--elsp-navy); margin-bottom: var(--elsp-s1); }
.elsp-compare__cell p{ font-size:.94rem; color: var(--elsp-ink-soft); margin:0; }
/* ---------- 12. INSIGHTS / BLOG LIST ---------------------------------- */
.elsp-post{
display:grid; grid-template-columns: 160px 1fr auto;
gap: clamp(20px,3vw,48px); align-items: baseline;
padding: clamp(28px,2.8vw,40px) 0;
border-top:1px solid var(--elsp-gray-200);
text-decoration:none; color:inherit;
transition: padding-left .4s var(--elsp-ease);
}
.elsp-post:last-of-type{ border-bottom:1px solid var(--elsp-gray-200); }
.elsp-post:hover{ padding-left: var(--elsp-s2); }
.elsp-post__meta{ font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:#80660F; }
.elsp-post h3{ margin:0 0 var(--elsp-s2); color: var(--elsp-navy); }
.elsp-post p{ margin:0; font-size:.96rem; color: var(--elsp-ink-soft); max-width:64ch; }
.elsp-post__arrow{ color: var(--elsp-gold); font-size:1.25rem; line-height:1; }
/* ---------- 13. CONTACT ----------------------------------------------- */
.elsp-contact-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(24px,3vw,48px); }
.elsp-contact-card{ padding-top: var(--elsp-s4); border-top:2px solid var(--elsp-gold); }
.elsp-contact-card h3{ font-size:1.1875rem; margin-bottom: var(--elsp-s2); }
.elsp-contact-card p{ font-size:.95rem; margin-bottom: var(--elsp-s3); }
.elsp-contact-card a{ color: inherit; text-decoration:none; border-bottom:1px solid var(--elsp-gold-line); }
.elsp-contact-card a:hover{ border-color: var(--elsp-gold); }
.elsp-section--navy .elsp-contact-card p{ color: rgba(255,255,255,.72); }
.elsp-office{
display:grid; grid-template-columns: repeat(2,minmax(0,1fr));
gap: clamp(32px,4vw,72px); align-items:start;
}
.elsp-dl{ margin:0; }
.elsp-dl div{
display:grid; grid-template-columns: 168px 1fr; gap: var(--elsp-s3);
padding: var(--elsp-s3) 0; border-top:1px solid var(--elsp-gray-200);
}
.elsp-dl dt{
font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
color: var(--elsp-ink-soft);
}
.elsp-dl dd{ margin:0; font-size:1rem; }
/* ---------- 14. CTA BAND ---------------------------------------------- */
.elsp-cta{
position:relative; overflow:hidden;
padding: clamp(88px,10vw,168px) var(--elsp-gutter);
background: var(--elsp-navy); text-align:center; color: var(--elsp-white);
}
.elsp-cta::after{
content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
background-image:
linear-gradient(to right, var(--elsp-gold) 1px, transparent 1px),
linear-gradient(to bottom, var(--elsp-gold) 1px, transparent 1px);
background-size: 96px 96px;
mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 78%);
-webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 0%, transparent 78%);
}
.elsp-cta__inner{ position:relative; z-index:2; max-width: 820px; margin:0 auto; }
.elsp-cta h2{ margin-bottom: var(--elsp-s4); }
.elsp-cta .elsp-btns{ justify-content:center; margin-top: var(--elsp-s6); }
/* ---------- 15. SCROLL REVEAL ---------------------------------------- */
.elsp-reveal{
opacity:0; transform: translateY(28px);
transition: opacity .9s var(--elsp-ease), transform .9s var(--elsp-ease);
will-change: opacity, transform;
}
.elsp-reveal.is-in{ opacity:1; transform:none; }
.elsp-reveal[data-d="1"]{ transition-delay:.09s; }
.elsp-reveal[data-d="2"]{ transition-delay:.18s; }
.elsp-reveal[data-d="3"]{ transition-delay:.27s; }
.elsp-reveal[data-d="4"]{ transition-delay:.36s; }
/* ---------- 16. RESPONSIVE ------------------------------------------- */
@media (max-width: 1024px){
.elsp-grid--4{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.elsp-grid--3{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.elsp-metrics{ grid-template-columns: repeat(2,minmax(0,1fr)); }
.elsp-contact-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 800px){
.elsp{ font-size:16px; }
.elsp-split,
.elsp-split--40,
.elsp-office,
.elsp-compare{ grid-template-columns: 1fr; }
.elsp-split{ gap: var(--elsp-s5); }
.elsp-grid--2,
.elsp-grid--3,
.elsp-grid--4{ grid-template-columns: 1fr; }
.elsp-hero{ min-height: 78vh; align-items:flex-end; }
.elsp-hero h1{ max-width: 20ch; }
.elsp-hero__meta{ margin-top: var(--elsp-s5); gap: var(--elsp-s2) var(--elsp-s4); font-size:.7rem; }
.elsp-step{ grid-template-columns: 56px 1fr; gap: var(--elsp-s3); }
.elsp-post{ grid-template-columns: 1fr; gap: var(--elsp-s2); }
.elsp-post__arrow{ display:none; }
.elsp-dl div{ grid-template-columns: 1fr; gap: var(--elsp-s1); }
.elsp-btns .elsp-btn{ width:100%; justify-content:center; }
.elsp-figure{ aspect-ratio: 3 / 4; }
}
@media (max-width: 520px){
.elsp-metrics{ grid-template-columns: 1fr; }
}
/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
.elsp *{ animation:none !important; transition-duration:.01ms !important; }
.elsp-reveal{ opacity:1 !important; transform:none !important; }
}
/* Print */
@media print{
.elsp-hero::after,.elsp-cta::after{ display:none; }
.elsp-section--navy,.elsp-cta,.elsp-hero{ background:#fff !important; color:#000 !important; }
}
/* ---------- 17. [GLOBAL] SQUARESPACE CHROME -------------------------- */
/* These four rules restyle the template header, footer and page wrapper so
they match the code-block sections. Delete any you don't want. */
/* [GLOBAL] Remove the default padding Squarespace puts around a Code Block
so our full-bleed sections truly run edge to edge. */
.sqs-block-code{ padding: 0 !important; }
.sqs-block-code .sqs-block-content{ padding: 0 !important; }
#sections > .page-section > .content-wrapper{ padding-left:0 !important; padding-right:0 !important; }
/* [GLOBAL] Site title / nav typography */
.header-title-text a{
font-family: var(--elsp-serif) !important;
letter-spacing: .01em;
}
.header-nav-item a,
.header-menu-nav-item a{
font-family: var(--elsp-sans) !important;
font-size: .78rem !important;
font-weight: 600 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
}
.header-nav-item--active a{ box-shadow: inset 0 -1px 0 var(--elsp-gold); }
/* [GLOBAL] Header button = gold */
.header-actions .btn,
.header-actions-action--cta .btn{
background: var(--elsp-gold) !important;
color: var(--elsp-navy) !important;
border-radius: 0 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-size: .74rem !important;
}
/* [GLOBAL] Footer on navy */
footer.sections{ background: var(--elsp-navy); }
footer.sections .sqs-block-content,
footer.sections p,
footer.sections a{ color: rgba(255,255,255,.7); }
footer.sections a:hover{ color: var(--elsp-gold-soft); }
/* [GLOBAL] Native Squarespace form styling, for the Contact page form */
.sqs-block-form .field-list .title{
font-family: var(--elsp-sans); font-size:.74rem; font-weight:600;
letter-spacing:.14em; text-transform:uppercase; color: var(--elsp-ink-soft);
}
.sqs-block-form input[type=text],
.sqs-block-form input[type=email],
.sqs-block-form textarea,
.sqs-block-form select{
border:0 !important; border-bottom:1px solid var(--elsp-gray-200) !important;
border-radius:0 !important; background: transparent !important;
padding:.85em 0 !important; font-family: var(--elsp-sans) !important;
}
.sqs-block-form input:focus,
.sqs-block-form textarea:focus{ border-bottom-color: var(--elsp-gold) !important; }
.sqs-block-form .form-button-wrapper input[type=submit]{
background: var(--elsp-navy) !important; color: var(--elsp-white) !important;
border-radius:0 !important; padding:1.05em 2.1em !important;
font-size:.8rem !important; font-weight:600 !important;
letter-spacing:.14em !important; text-transform:uppercase !important;
}
.sqs-block-form .form-button-wrapper input[type=submit]:hover{
background: var(--elsp-gold) !important; color: var(--elsp-navy) !important;
}