/* ============================================================
GREENDOOR GLOBAL — MOBILE-FIRST
Editorial / botanical / hopeful.
Palette: deep forest moss, warm cream, terracotta coral, dim gold.
Type: Fraunces + Instrument Sans + JetBrains Mono.
Breakpoints (mobile-first, min-width):
sm: 560px — large phones / small tablets
md: 820px — tablets / small laptops
lg: 1100px — desktops
xl: 1320px — wide desktops
============================================================ */
:root{
--ink: #0F1B14;
--moss: #1F3D2E;
--leaf: #426B53;
--sage: #94AE9C;
--cream: #F4EEDF;
--paper: #FAF6E9;
--bone: #EBE2CC;
--shell: #E1D6B8;
--coral: #DC6E4A;
--ember: #B94B25;
--amber: #E79A2B;
--gold: #C9A35A;
--mist: rgba(15,27,20,0.08);
--serif: "Fraunces", "Times New Roman", serif;
--sans: "Instrument Sans", -apple-system, system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
--easing: cubic-bezier(.22,.61,.36,1);
--easing-soft: cubic-bezier(.4,0,.2,1);
--maxw: 1320px;
/* mobile-first sizing */
--gutter: 20px;
--section-y: 38px;
--tap: 44px;
}
@media (min-width:560px){
:root{ --gutter:28px; --section-y:46px; }
}
@media (min-width:820px){
:root{ --gutter:40px; --section-y:62px; }
}
@media (min-width:1100px){
:root{ --gutter:56px; --section-y:70px; }
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
font-family:var(--sans);
background:var(--cream);
color:var(--ink);
line-height:1.55;
font-size:16px;
font-feature-settings:"ss01","cv11";
overflow-x:hidden;
-webkit-tap-highlight-color: rgba(220,110,74,.15);
}
@media (min-width:820px){ body{ font-size:17px; } }
/* Subtle paper grain overlay */
body::before{
content:"";
position:fixed;inset:0;
pointer-events:none;
z-index:1;
opacity:.3;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:multiply;
}
::selection{background:var(--moss);color:var(--cream);}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:2px;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent;}
button{font:inherit;border:0;background:none;cursor:pointer;color:inherit;}
/* Custom scroll */
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--cream);}
::-webkit-scrollbar-thumb{background:var(--moss);border:2px solid var(--cream);border-radius:10px;}
::-webkit-scrollbar-thumb:hover{background:var(--ink);}
/* ============================================================
TYPOGRAPHY
============================================================ */
.display, .serif{
font-family:var(--serif);
font-weight:400;
font-variation-settings:"opsz" 144, "SOFT" 60;
letter-spacing:-0.02em;
line-height:0.95;
color:var(--ink);
}
.italic{font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 80;}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:0.08em;text-transform:uppercase;}
.eyebrow{
font-family:var(--mono);
font-size:1.33rem;
font-weight:826;
letter-spacing:.11em;
text-transform:uppercase;
color:var(--leaf);
display:inline-flex;align-items:center;gap:10px;
}
@media (min-width:820px){ .eyebrow{ font-size:1.41rem; } }
.eyebrow::before,
.eyebrow::after{
content:"";display:inline-block;width:24px;height:1px;background:currentColor;
}
.lead{
font-size:1rem;
color:#3A4A40;
max-width:46ch;
line-height:1.6;
}
@media (min-width:820px){ .lead{ font-size:1.15rem; } }
/* ============================================================
LAYOUT
============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2;}
section{position:relative;z-index:2;}
/* ============================================================
BUTTONS — touch-friendly (44px min)
============================================================ */
.btn{
display:inline-flex;align-items:center;gap:12px;
min-height:var(--tap);
padding:14px 22px 13px;
border-radius:999px;
font-family:var(--sans);
font-weight:500;
font-size:.95rem;
letter-spacing:.01em;
transition:all .35s var(--easing);
position:relative;
white-space:nowrap;
}
@media (min-width:820px){
.btn{ padding:18px 26px 17px; gap:14px; }
}
.btn-primary{ background:var(--moss);color:var(--cream); }
.btn-primary:hover{
background:var(--ink);transform:translateY(-2px);
box-shadow:0 18px 36px -18px rgba(15,27,20,.55);
}
.btn-coral{background:var(--coral);color:var(--paper);}
.btn-coral:hover{background:var(--ember);transform:translateY(-2px);box-shadow:0 18px 36px -18px rgba(185,75,37,.55);}
.btn-ghost{
background:transparent;color:var(--ink);
box-shadow:inset 0 0 0 1.5px var(--ink);
}
.btn-ghost:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px);}
.btn .arrow{
width:22px;height:22px;
display:inline-grid;place-items:center;
border-radius:999px;
background:rgba(244,238,223,.18);
transition:transform .4s var(--easing);
flex-shrink:0;
}
.btn-ghost .arrow{background:rgba(15,27,20,.08);}
.btn:hover .arrow{transform:translateX(4px) rotate(-8deg);}
.btn .arrow svg{width:11px;height:11px;}
/* ============================================================
DEMO-ONLY DISCLAIMER BANNER
============================================================ */
.demo-banner{
position:sticky;
top:0;left:0;right:0;
z-index:100;
background:var(--ink);
color:var(--cream);
padding:11px 16px;
font-family:var(--mono);
font-size:.78rem;
letter-spacing:.08em;
text-transform:uppercase;
text-align:center;
line-height:1.45;
border-bottom:1px solid rgba(220,110,74,.3);
}
@media (min-width:560px){
.demo-banner{font-size:.88rem;letter-spacing:.12em;padding:12px 20px;}
}
@media (min-width:820px){
.demo-banner{font-size:.96rem;letter-spacing:.14em;padding:14px 22px;}
}
.demo-banner strong{
color:var(--coral);
font-weight:500;
letter-spacing:.08em;
}
.demo-banner .sep{
display:inline-block;
width:4px;height:4px;border-radius:50%;
background:rgba(244,238,223,.35);
vertical-align:middle;
margin:0 8px 2px;
}
/* ============================================================
NAVIGATION (mobile-first)
============================================================ */
.nav{
position:fixed;
top:var(--banner-h, 0px);
left:0;right:0;
z-index:50;
padding:14px var(--gutter);
display:flex;align-items:center;justify-content:space-between;
transition:all .4s var(--easing);
backdrop-filter:saturate(140%) blur(0);
}
.nav.scrolled{
background:rgba(244,238,223,.9);
backdrop-filter:saturate(140%) blur(14px);
border-bottom:1px solid var(--mist);
}
@media (min-width:820px){
.nav{ padding:18px var(--gutter); }
.nav.scrolled{ padding:14px var(--gutter); }
}
.brand{
display:flex;align-items:center;gap:10px;
font-family:var(--serif);
font-weight:500;
font-size:1.1rem;
letter-spacing:-0.01em;
color:var(--ink);
flex-shrink:0;
transition:color .35s var(--easing);
}
@media (min-width:820px){ .brand{ gap:12px; font-size:1.25rem; } }
.brand-mark{
width:29px;height:38px;
background:url('/assets/img/gd-mark.svg?v=2') center/contain no-repeat;
position:relative;
flex-shrink:0;
transform-origin:center;
transition:transform .6s var(--easing);
}
@media (min-width:820px){
.brand-mark{ width:35px;height:46px; }
}
.brand-mark::after{ content:none; }
.brand:hover .brand-mark{transform:rotateY(-32deg);}
.brand small{
font-family:var(--mono);font-size:.6rem;
letter-spacing:.16em;color:var(--leaf);
text-transform:uppercase;display:block;line-height:1;margin-top:3px;
}
@media (min-width:820px){ .brand small{ font-size:.65rem; } }
/* Mobile nav links: drawer */
.nav-links{
position:fixed;
inset:0;
background:var(--moss);
color:var(--cream);
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
gap:8px;
padding:90px var(--gutter) 60px;
transform:translateX(100%);
transition:transform .5s var(--easing);
z-index:49;
overflow-y:auto;
}
.nav-links.open{ transform:translateX(0); }
.nav-links a{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:2.2rem;
line-height:1.1;
letter-spacing:-.02em;
color:var(--cream);
padding:10px 0;
position:relative;
}
.nav-links a em{ color:var(--coral);font-style:italic; }
.nav-links a::after{
content:"→";color:var(--coral);
opacity:0;margin-left:14px;
transition:all .3s var(--easing);
display:inline-block;transform:translateX(-10px);
}
.nav-links a:hover::after{opacity:1;transform:translateX(0);}
.nav-drawer-foot{
margin-top:auto;
padding-top:24px;
border-top:1px solid rgba(244,238,223,.15);
font-family:var(--mono);font-size:.7rem;
letter-spacing:.18em;text-transform:uppercase;
color:var(--sage);
display:flex;flex-direction:column;gap:8px;
width:100%;
}
.nav-drawer-foot a{font-family:var(--sans);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--cream);}
/* Desktop nav links */
@media (min-width:1100px){
.nav-links{
position:static;
inset:auto;
background:transparent;
color:inherit;
flex-direction:row;
align-items:center;
justify-content:flex-end;
gap:34px;
padding:0;
transform:none;
overflow:visible;
z-index:auto;
}
.nav-links a{
font-family:var(--sans);
font-size:.92rem;
color:var(--ink);
padding:0;
font-variation-settings:normal;
letter-spacing:0;
transition:color .35s var(--easing);
}
.nav-links a::after{
content:"";position:absolute;left:0;right:100%;bottom:-6px;
height:1.5px;background:var(--coral);opacity:1;margin:0;transform:none;
transition:right .35s var(--easing);
}
.nav-links a:hover::after{right:0;}
.nav-drawer-foot{display:none;}
}
.nav-cta{display:flex;align-items:center;gap:10px;}
/* Hamburger toggle */
.nav-toggle{
width:var(--tap);height:var(--tap);
display:inline-grid;place-items:center;
border-radius:999px;
background:transparent;
position:relative;
z-index:51;
}
.nav-toggle:hover{ background:rgba(15,27,20,.06); }
.nav-toggle span{
display:block;width:22px;height:1.6px;
background:var(--ink);
position:relative;
transition:all .35s var(--easing);
}
.nav-toggle span::before,
.nav-toggle span::after{
content:"";position:absolute;left:0;right:0;
height:1.6px;background:var(--ink);
transition:all .35s var(--easing);
}
.nav-toggle span::before{ top:-7px; }
.nav-toggle span::after{ top:7px; }
.nav-toggle[aria-expanded="true"] span{ background:transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top:0;transform:rotate(45deg);background:var(--cream); }
.nav-toggle[aria-expanded="true"] span::after{ top:0;transform:rotate(-45deg);background:var(--cream); }
/* When mobile drawer is open, drop the nav's backdrop-filter. Any non-none
backdrop-filter makes .nav a containing block for its position:fixed children,
which would clip the inset:0 drawer to the nav-bar height instead of the
viewport — the classic "drawer is too short" bug. */
body.menu-open .nav{ backdrop-filter:none; }
/* When mobile drawer is open, swap nav text to cream so it reads on the moss drawer */
body.menu-open .brand{ color:var(--cream); }
body.menu-open .brand small{ color:var(--sage); }
body.menu-open .nav-toggle:hover{ background:rgba(244,238,223,.08); }
/* Before scroll the nav floats over the near-black hero — black text is
invisible there, so lighten the foreground. .scrolled (cream bg) keeps the
default dark text. */
.nav:not(.scrolled) .brand{ color:var(--cream); }
.nav:not(.scrolled) .brand small{ color:var(--sage); }
.nav:not(.scrolled) .nav-toggle span,
.nav:not(.scrolled) .nav-toggle span::before,
.nav:not(.scrolled) .nav-toggle span::after{ background:var(--cream); }
.nav:not(.scrolled) .nav-toggle:hover{ background:rgba(244,238,223,.08); }
.nav:not(.scrolled) .nav-cta .btn-ghost{
color:var(--cream);
box-shadow:inset 0 0 0 1.5px rgba(244,238,223,.5);
}
.nav:not(.scrolled) .nav-cta .btn-ghost:hover{
background:var(--cream);
color:var(--ink);
}
@media (min-width:1100px){
.nav:not(.scrolled) .nav-links a{ color:var(--cream); }
}
/* ------------------------------------------------------------
Solid moss nav — for pages whose top section is light (e.g.
/about, /roles). The default nav floats over the dark hero
with cream text; on a light page that text vanishes. Adding
.nav-solid gives the bar a moss gradient and keeps cream text
in both the at-top and scrolled states.
------------------------------------------------------------ */
.nav.nav-solid,
.nav.nav-solid.scrolled{
background:linear-gradient(180deg, var(--moss), var(--ink));
backdrop-filter:saturate(140%) blur(14px);
border-bottom:1px solid rgba(244,238,223,.12);
}
.nav.nav-solid .brand{ color:var(--cream); }
.nav.nav-solid .brand small{ color:var(--sage); }
.nav.nav-solid .nav-toggle span,
.nav.nav-solid .nav-toggle span::before,
.nav.nav-solid .nav-toggle span::after{ background:var(--cream); }
.nav.nav-solid .nav-toggle:hover{ background:rgba(244,238,223,.08); }
.nav.nav-solid .nav-cta .btn-ghost{
color:var(--cream);
box-shadow:inset 0 0 0 1.5px rgba(244,238,223,.5);
}
.nav.nav-solid .nav-cta .btn-ghost:hover{
background:var(--cream);
color:var(--ink);
}
@media (min-width:1100px){
.nav.nav-solid .nav-links a{ color:var(--cream); }
}
@media (min-width:1100px){
.nav-toggle{display:none;}
}
/* Hide nav CTA button on smallest screens to avoid crowding */
.nav-cta .btn{ display:none; }
@media (min-width:560px){
.nav-cta .btn{
display:inline-flex;
padding:11px 18px;
font-size:.85rem;
}
}
@media (min-width:820px){
.nav-cta .btn{ padding:14px 22px;font-size:.9rem; }
}
body.menu-open{overflow:hidden;}
/* ============================================================
HERO (mobile-first)
============================================================ */
.hero{
padding:120px var(--gutter) 40px;
min-height:auto;
display:flex;flex-direction:column;justify-content:space-between;
position:relative;
overflow:hidden;
}
@media (min-width:820px){
.hero{ padding:140px var(--gutter) 50px;min-height:90vh; }
}
@media (min-width:1100px){
.hero{ padding:160px var(--gutter) 60px;min-height:100vh; }
}
.hero-grid{
display:grid;
grid-template-columns:1fr;
gap:48px;
align-items:end;
max-width:var(--maxw);margin:0 auto;width:100%;
}
.hero-headline{ position:relative; }
.hero h1{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.8rem;
line-height:.95;
letter-spacing:-0.03em;
font-weight:400;
color:var(--ink);
}
@media (min-width:560px){ .hero h1{ font-size:2.5rem; } }
@media (min-width:820px){ .hero h1{ font-size:3.6rem;line-height:.92;letter-spacing:-.035em; } }
@media (min-width:1100px){ .hero h1{ font-size:4.7rem; } }
@media (min-width:1320px){ .hero h1{ font-size:5.7rem; } }
.hero h1 .line{display:block;overflow:hidden;}
.hero h1 .line > span{
display:inline-block;
transform:translateY(105%) rotate(2deg);
opacity:0;
animation:rise 1.1s var(--easing) forwards;
}
.hero h1 .l1 > span{animation-delay:.15s;}
.hero h1 .l2 > span{animation-delay:.3s;}
.hero h1 .l3 > span{animation-delay:.45s;}
.hero h1 .l4 > span{animation-delay:.6s;}
.hero h1 em{
font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
color:var(--moss);
}
.hero h1 .underline{ position:relative;display:inline-block; }
.hero h1 .underline::after{
content:"";position:absolute;left:-2%;right:-2%;bottom:6%;
height:10px;
background:var(--coral);
z-index:-1;
border-radius:30% 70% 70% 30% / 60% 40% 60% 40%;
opacity:.85;
transform-origin:left center;
animation:swell 1s var(--easing) .9s both;
}
@media (min-width:820px){ .hero h1 .underline::after{ height:14px; } }
@keyframes rise{ to{transform:translateY(0) rotate(0);opacity:1;} }
@keyframes swell{ from{transform:scaleX(0);} to{transform:scaleX(1);} }
.hero-sub{
margin-top:24px;
font-size:1.02rem;
max-width:50ch;
color:#384239;
opacity:0;animation:fade 1s var(--easing) 1.1s forwards;
}
@media (min-width:820px){ .hero-sub{ margin-top:36px;font-size:1.18rem; } }
.hero-actions{
margin-top:28px;
display:flex;flex-wrap:wrap;gap:12px;
opacity:0;animation:fade 1s var(--easing) 1.3s forwards;
}
@media (min-width:820px){ .hero-actions{ margin-top:36px;gap:14px; } }
@keyframes fade{to{opacity:1;}}
/* Hero foot meta strip */
.hero-meta{
display:flex;align-items:flex-start;justify-content:space-between;
gap:20px;
margin-top:40px;
padding-top:20px;
border-top:1px solid var(--mist);
font-size:.78rem;color:#4a5a4f;
flex-wrap:wrap;
}
@media (min-width:820px){ .hero-meta{ margin-top:64px;padding-top:24px;font-size:.82rem; } }
.hero-meta .dot{display:inline-block;width:7px;height:7px;background:var(--coral);border-radius:50%;margin-right:8px;}
.hero-meta-item{display:flex;align-items:center;}
.scroll-cue{
display:flex;align-items:center;gap:10px;
font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--leaf);
}
@media (min-width:820px){ .scroll-cue{font-size:.7rem;} }
.scroll-cue .line{
width:32px;height:1px;background:var(--leaf);
position:relative;overflow:hidden;
}
@media (min-width:820px){ .scroll-cue .line{width:38px;} }
.scroll-cue .line::after{
content:"";position:absolute;left:-100%;top:0;
width:100%;height:1px;background:var(--coral);
animation:dash 1.8s var(--easing) infinite;
}
@keyframes dash{to{left:100%;}}
/* ============================================================
MANIFESTO
============================================================ */
.manifesto{
padding:var(--section-y) var(--gutter);
position:relative;overflow:hidden;
background:
radial-gradient(660px 480px at 2% 4%, rgba(31,61,46,.20), transparent 62%),
radial-gradient(740px 540px at 100% 18%, rgba(220,110,74,.18), transparent 60%),
radial-gradient(660px 580px at 84% 114%, rgba(201,163,90,.20), transparent 62%),
radial-gradient(rgba(31,61,46,.10) 1.2px, transparent 1.4px);
background-size:auto, auto, auto, 24px 24px;
}
.manifesto-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1fr;gap:18px;
}
@media (min-width:820px){
.manifesto-grid{ gap:26px; }
}
.manifesto-aside{ position:static; }
.manifesto-aside .num{
font-family:var(--serif);font-style:italic;
font-size:2.4rem;color:var(--coral);
line-height:1;font-variation-settings:"opsz" 144;
}
@media (min-width:820px){ .manifesto-aside .num{font-size:4rem;} }
.manifesto-aside .label{
margin-top:10px;
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.6rem;line-height:1;letter-spacing:-.025em;
font-weight:400;text-transform:none;color:var(--ink);
}
@media (min-width:560px){ .manifesto-aside .label{font-size:2.08rem;} }
@media (min-width:820px){ .manifesto-aside .label{font-size:2.72rem;} }
@media (min-width:1100px){ .manifesto-aside .label{font-size:3.2rem;} }
.manifesto-body p{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.04rem;
line-height:1.22;
letter-spacing:-0.012em;
color:var(--ink);
margin-bottom:22px;
}
@media (min-width:560px){ .manifesto-body p{ font-size:1.24rem; } }
@media (min-width:820px){ .manifesto-body p{ font-size:1.56rem;line-height:1.18;margin-bottom:28px; } }
@media (min-width:1100px){ .manifesto-body p{ font-size:1.84rem;margin-bottom:32px; } }
.manifesto-body p:first-child{
font-size:1.3rem;
line-height:1.18;
letter-spacing:-0.02em;
color:var(--ink);
margin-bottom:28px;
}
@media (min-width:560px){ .manifesto-body p:first-child{ font-size:1.6rem; } }
@media (min-width:820px){ .manifesto-body p:first-child{ font-size:2.1rem;line-height:1.14;margin-bottom:34px; } }
@media (min-width:1100px){ .manifesto-body p:first-child{ font-size:2.5rem;margin-bottom:38px; } }
.manifesto-body p .accent{color:var(--moss);font-style:italic;}
.manifesto-body p .strike{
position:relative;display:inline-block;
}
.manifesto-body p .strike::after{
content:"";position:absolute;left:0;right:0;top:55%;
height:2px;background:var(--coral);
transform:scaleX(0);transform-origin:left;
transition:transform .8s var(--easing);
}
.manifesto-body.in-view p .strike::after{transform:scaleX(1);}
.manifesto-foot{
margin-top:28px;
display:flex;align-items:center;gap:16px;
font-size:.85rem;color:#4a5a4f;
flex-wrap:wrap;
}
@media (min-width:820px){ .manifesto-foot{ margin-top:40px;gap:20px;font-size:.9rem; } }
.manifesto-foot .sig{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
font-size:1.04rem;color:var(--moss);
}
@media (min-width:820px){ .manifesto-foot .sig{font-size:1.28rem;} }
/* ============================================================
TWO PATHS
============================================================ */
.paths{
padding:var(--section-y) var(--gutter) calc(var(--section-y) * .4);
background:var(--moss);
color:var(--cream);
}
/* About page: uniform vertical rhythm for every band */
#about{ padding-bottom:var(--section-y); }
.paths-tight{ padding-top:var(--section-y);padding-bottom:var(--section-y); }
/* Unique "two doors" accent for the About page's moss paths band */
.paths-tight{
position:relative;overflow:hidden;
background:
linear-gradient(120deg, rgba(220,110,74,.11), transparent 42%),
linear-gradient(300deg, rgba(148,174,156,.10), transparent 46%),
linear-gradient(155deg, #18301f, var(--moss) 52%, #1f4029);
}
.paths-tight::before,
.paths-tight::after{
content:"";position:absolute;z-index:0;pointer-events:none;
border:1.5px solid rgba(244,238,223,.07);border-bottom:0;
border-radius:50% 50% 0 0 / 72% 72% 0 0;
}
.paths-tight::before{ left:-90px;bottom:-70px;width:300px;height:420px;transform:rotate(-6deg); }
.paths-tight::after{ right:-80px;top:-150px;width:340px;height:470px;transform:rotate(7deg); }
.paths-tight .paths-head,
.paths-tight .paths-grid{ position:relative;z-index:1; }
.paths-head{
max-width:var(--maxw);margin:0 auto 36px;
display:flex;flex-direction:column;
gap:24px;
}
@media (min-width:820px){
.paths-head{
flex-direction:row;justify-content:space-between;align-items:flex-end;
gap:40px;flex-wrap:wrap;margin-bottom:56px;
}
}
.paths-head h2{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.6rem;
letter-spacing:-.02em;line-height:1.05;font-weight:400;
color:var(--cream);
}
@media (min-width:820px){ .paths-head h2{ font-size:2.7rem; } }
.paths-head h2 em{color:var(--coral);font-variation-settings:"opsz" 144, "SOFT" 100;}
.paths-head .lead{color:rgba(244,238,223,.78);max-width:42ch;}
.paths-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1fr;gap:20px;
}
@media (min-width:820px){
.paths-grid{ grid-template-columns:1fr 1fr;gap:24px; }
}
@media (min-width:1100px){ .paths-grid{ gap:28px; } }
.path-card{
position:relative;
border-radius:16px;
overflow:hidden;
display:flex;flex-direction:column;
padding:28px 26px;
color:var(--cream);
background:rgba(244,238,223,.04);
border:1px solid rgba(244,238,223,.1);
isolation:isolate;
cursor:pointer;
transition:transform .4s var(--easing), background .4s, border-color .3s;
}
@media (min-width:820px){ .path-card{padding:40px 36px;border-radius:20px;} }
.path-card:hover{transform:translateY(-4px);background:rgba(244,238,223,.07);border-color:var(--coral);}
.path-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:var(--coral);
transform:scaleX(0);transform-origin:left;
transition:transform .55s var(--easing);
}
.path-card:hover::before{transform:scaleX(1);}
.path-num{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
font-size:2rem;color:var(--coral);line-height:1;
margin-bottom:18px;
}
.path-tag{
font-family:var(--mono);font-size:.66rem;
letter-spacing:.22em;text-transform:uppercase;
color:var(--coral);
margin-bottom:14px;
display:flex;align-items:center;gap:10px;
}
@media (min-width:820px){ .path-tag{font-size:.7rem;margin-bottom:18px;} }
.path-tag::before{
content:"";width:24px;height:1px;background:var(--coral);
}
@media (min-width:820px){ .path-tag::before{width:30px;} }
.path-card h3{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.7rem;
line-height:1.02;letter-spacing:-.02em;
margin-bottom:18px;
font-weight:400;
}
@media (min-width:560px){ .path-card h3{font-size:1.9rem;} }
@media (min-width:820px){ .path-card h3{font-size:2.2rem;} }
@media (min-width:1100px){ .path-card h3{font-size:2.5rem;} }
.path-card h3 em{font-style:italic;color:var(--coral);font-variation-settings:"opsz" 144, "SOFT" 100;}
.path-card p{
font-size:.95rem;
max-width:42ch;
color:rgba(244,238,223,.85);
margin-bottom:20px;
}
@media (min-width:820px){ .path-card p{font-size:1rem;margin-bottom:24px;} }
.path-list{
list-style:none;
margin-bottom:24px;
display:grid;gap:8px;
}
@media (min-width:820px){ .path-list{margin-bottom:28px;} }
.path-list li{
font-size:.86rem;
color:rgba(244,238,223,.78);
padding-left:22px;
position:relative;
}
@media (min-width:820px){ .path-list li{font-size:.9rem;} }
.path-list li::before{
content:"";position:absolute;left:0;top:8px;
width:9px;height:11px;
background:var(--coral);
border-radius:5px 5px 1px 1px;
}
.path-cta{
display:inline-flex;align-items:center;gap:12px;
min-height:var(--tap);
font-family:var(--sans);font-weight:500;font-size:.95rem;
color:var(--cream);
padding-bottom:4px;
border-bottom:1px solid rgba(244,238,223,.4);
transition:gap .35s var(--easing), border-color .3s;
align-self:flex-start;
margin-top:auto;
}
.path-card:hover .path-cta{gap:22px;border-color:var(--coral);}
/* Light variant — breaks the long moss run (home page) */
.paths-light{
position:relative;overflow:hidden;
background:
radial-gradient(900px 500px at 100% 0%, rgba(220,110,74,.05), transparent 65%),
var(--bone);
color:var(--ink);
}
.paths-light .paths-head,
.paths-light .paths-grid{ position:relative;z-index:1; }
/* Scattered, slowly-floating leaf accents */
.paths-leaves{ position:absolute;inset:0;z-index:0;pointer-events:none; }
.paths-leaf{
position:absolute;
background:url(/assets/img/leaf.svg) center/contain no-repeat;
transform:rotate(var(--rot,0deg));
}
@keyframes leafSway{
0%,100%{ transform:translate3d(0,0,0) rotate(var(--rot,0deg)); }
50%{ transform:translate3d(6px,-16px,0) rotate(calc(var(--rot,0deg) + 7deg)); }
}
.paths-leaf.l1{ top:6%;left:3%;width:96px;height:102px;--rot:-20deg;--dur:12s;--delay:-1s; }
.paths-leaf.l2{ top:60%;left:8%;width:72px;height:76px;--rot:34deg;--dur:15s;--delay:-4s; }
.paths-leaf.l3{ top:11%;right:4%;width:120px;height:127px;--rot:22deg;--dur:13.5s;--delay:-7s; }
.paths-leaf.l4{ bottom:6%;right:11%;width:84px;height:89px;--rot:-44deg;--dur:16s;--delay:-2s; }
.paths-leaf.l5{ top:43%;left:48%;width:60px;height:64px;--rot:10deg;--dur:11.5s;--delay:-5s; }
.paths-leaf.l6{ bottom:9%;left:25%;width:100px;height:106px;--rot:-12deg;--dur:14.5s;--delay:-9s; }
.paths-leaf.l7{ top:28%;right:29%;width:66px;height:70px;--rot:50deg;--dur:12.8s;--delay:-3s; }
@media (max-width:680px){
.paths-leaf.l5,.paths-leaf.l7{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .paths-leaf{ animation:none; } }
.paths-light .paths-head h2{ color:var(--ink); }
.paths-light .paths-head .lead{ color:#3a4a40; }
.paths-light .path-card{
background:var(--paper);
border-color:rgba(15,27,20,.07);
color:var(--ink);
box-shadow:0 26px 54px -34px rgba(15,27,20,.35);
}
.paths-light .path-card:hover{
background:#fff;
border-color:var(--coral);
box-shadow:0 34px 64px -32px rgba(15,27,20,.4);
}
.paths-light .path-card p{ color:rgba(15,27,20,.7); }
.paths-light .path-list li{ color:rgba(15,27,20,.66); }
.paths-light .path-cta{ color:var(--ink);border-bottom-color:rgba(15,27,20,.22); }
.paths-light .path-card:hover .path-cta{ border-color:var(--coral); }
/* ============================================================
STATES — geographic grid
============================================================ */
.states{
padding:var(--section-y) var(--gutter);
background:var(--ink);
color:var(--cream);
position:relative;
overflow:hidden;
}
.states::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(500px 400px at 80% 20%, rgba(220,110,74,.14), transparent 60%),
radial-gradient(600px 500px at 10% 80%, rgba(66,107,83,.2), transparent 60%);
pointer-events:none;
}
@media (min-width:820px){
.states::before{
background:
radial-gradient(700px 500px at 80% 20%, rgba(220,110,74,.14), transparent 60%),
radial-gradient(800px 600px at 10% 80%, rgba(66,107,83,.2), transparent 60%);
}
}
.states-head{
max-width:var(--maxw);margin:0 auto 40px;
display:flex;flex-direction:column;
gap:24px;
position:relative;
}
@media (min-width:820px){
.states-head{
flex-direction:row;justify-content:space-between;align-items:flex-end;
gap:40px;flex-wrap:wrap;margin-bottom:60px;
}
}
.states-head h2{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.92rem;
line-height:.95;letter-spacing:-.03em;color:var(--cream);
margin-top:16px;
}
@media (min-width:560px){ .states-head h2{font-size:2.56rem;} }
@media (min-width:820px){ .states-head h2{font-size:3.2rem;} }
@media (min-width:1100px){ .states-head h2{font-size:3.84rem;} }
.states-head h2 em{color:var(--coral);font-variation-settings:"opsz" 144, "SOFT" 100;}
.states-head .eyebrow{color:var(--coral);}
.states-head .eyebrow::before{background:var(--coral);}
.states-head p{max-width:38ch;color:var(--sage);font-size:1rem;}
.states-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
position:relative;
}
@media (min-width:560px){ .states-grid{grid-template-columns:repeat(4,1fr);gap:12px;} }
@media (min-width:1100px){ .states-grid{grid-template-columns:repeat(8,1fr);gap:14px;} }
.state-card{
background:rgba(244,238,223,.04);
border:1px solid rgba(244,238,223,.1);
border-radius:12px;
padding:18px 16px 16px;
min-height:140px;
display:flex;flex-direction:column;justify-content:space-between;
transition:all .4s var(--easing);
cursor:default;
position:relative;
overflow:hidden;
}
@media (min-width:560px){ .state-card{ padding:22px 18px 18px;min-height:170px;border-radius:14px; } }
@media (min-width:820px){ .state-card{ padding:26px 22px 22px;min-height:200px; } }
@media (min-width:1100px){
.state-card{ grid-column:span 2; }
}
.state-card::before{
content:"";position:absolute;inset:0;
background:var(--moss);
transform:translateY(100%);
transition:transform .5s var(--easing);
z-index:0;
}
.state-card > *{position:relative;z-index:1;}
.state-card:hover{transform:translateY(-6px);border-color:var(--coral);}
.state-card:hover::before{transform:translateY(0);}
.state-card .abbr{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:2.2rem;line-height:1;
letter-spacing:-.04em;color:var(--cream);
font-weight:400;
}
@media (min-width:820px){ .state-card .abbr{font-size:3.2rem;} }
.state-card .name{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
font-size:.95rem;color:var(--coral);
margin-top:4px;
}
@media (min-width:820px){ .state-card .name{font-size:1.1rem;} }
.state-card .fact{
font-family:var(--mono);font-size:.62rem;
letter-spacing:.16em;text-transform:uppercase;
color:var(--sage);
margin-top:12px;
}
@media (min-width:820px){ .state-card .fact{font-size:.68rem;letter-spacing:.18em;margin-top:14px;} }
.state-card.featured{
grid-column:span 2;
background:var(--moss);
border-color:var(--moss);
}
@media (min-width:560px){ .state-card.featured{grid-column:span 4;} }
@media (min-width:1100px){ .state-card.featured{grid-column:span 4;} }
.state-card.featured .abbr{font-size:3.4rem;color:var(--cream);}
@media (min-width:820px){ .state-card.featured .abbr{font-size:5rem;} }
.state-card.featured .name{color:var(--coral);font-size:1.15rem;}
@media (min-width:820px){ .state-card.featured .name{font-size:1.4rem;} }
.state-card.featured .fact{color:var(--sage);}
/* "Coming soon" growth card — sits beside NM to fill the trailing row */
.state-card.growth{
background:transparent;
border:1px dashed rgba(244,238,223,0.22);
color:var(--cream);
display:flex;flex-direction:column;justify-content:space-between;
overflow:visible;
}
.state-card.growth::before{ content:none; }
.state-card.growth:hover{
transform:translateY(-4px);
border-color:var(--coral);
background:rgba(220,110,74,0.05);
}
.state-card.growth .label{
font-family:var(--mono);font-size:.6rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--coral);
display:inline-flex;align-items:center;gap:8px;
}
@media (min-width:820px){.state-card.growth .label{font-size:.68rem;}}
.state-card.growth .label::before{
content:"+";font-size:1.3em;line-height:.8;font-weight:300;
}
.state-card.growth .title{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-style:italic;
color:var(--cream);
font-size:1.4rem;line-height:1.1;
letter-spacing:-.015em;
margin-top:14px;
}
@media (min-width:1100px){
.state-card.growth .title{ font-size:1.7rem; }
}
.state-card.growth .targets{
margin-top:8px;
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.8rem;line-height:1;
color:var(--cream);letter-spacing:-.03em;
}
@media (min-width:1100px){
.state-card.growth .targets{ font-size:2.6rem; }
}
.state-card.growth .targets em{color:var(--coral);font-style:italic;}
.state-card.growth .meta{
font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;
color:var(--sage);text-transform:uppercase;
}
@media (min-width:1100px){
.state-card.growth{grid-column:span 6;}
.state-card.growth{
display:grid;
grid-template-columns:1fr 1fr;
align-items:end;
gap:24px;
}
.state-card.growth .label{grid-column:1;grid-row:1;align-self:start;}
.state-card.growth .title{grid-column:1;grid-row:2;margin-top:0;}
.state-card.growth .targets{grid-column:2;grid-row:1 / span 2;align-self:end;}
.state-card.growth .meta{grid-column:1 / -1;grid-row:3;}
}
/* ============================================================
STATS / SOCIAL PROOF
============================================================ */
.stats{
padding:var(--section-y) var(--gutter);
background:var(--cream);
position:relative;
}
.stats-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1fr;gap:36px;
align-items:end;
}
@media (min-width:820px){
.stats-grid{ grid-template-columns:repeat(3,1fr);gap:48px; }
}
@media (min-width:1100px){
.stats-grid{ gap:60px; }
}
.stat{
display:flex;flex-direction:column;gap:10px;
border-top:2px solid var(--ink);
padding-top:20px;
position:relative;
}
@media (min-width:820px){ .stat{padding-top:24px;} }
.stat .num{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:3.6rem;
line-height:.9;
letter-spacing:-.04em;
color:var(--ink);
display:flex;align-items:baseline;gap:6px;
}
@media (min-width:560px){ .stat .num{font-size:4.6rem;} }
@media (min-width:820px){ .stat .num{font-size:5.4rem;} }
@media (min-width:1100px){ .stat .num{font-size:6.4rem;} }
@media (min-width:1320px){ .stat .num{font-size:7.5rem;} }
.stat .num .suffix{
font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
color:var(--coral);
font-size:.6em;
}
.stat .label{
font-family:var(--sans);font-weight:500;
font-size:1.02rem;color:var(--ink);
max-width:24ch;
}
@media (min-width:820px){ .stat .label{font-size:1.1rem;} }
.stat .desc{
font-size:.85rem;color:#4a5a4f;max-width:30ch;
}
@media (min-width:820px){ .stat .desc{font-size:.9rem;} }
.stat .mono{margin-top:4px;color:var(--leaf);}
/* ============================================================
TESTIMONIAL
============================================================ */
.testimonial{
padding:var(--section-y) var(--gutter);
background:var(--bone);
position:relative;
overflow:hidden;
}
.testimonial::before{
content:"\201C";
position:absolute;
font-family:var(--serif);
font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
font-size:16rem;
line-height:.5;
color:rgba(220,110,74,.12);
top:14px;left:-18px;
pointer-events:none;
}
@media (min-width:820px){
.testimonial::before{ font-size:30rem;top:20px;left:-30px; }
}
.testimonial-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1fr;gap:32px;
align-items:center;
position:relative;
}
@media (min-width:820px){
.testimonial-grid{ grid-template-columns: 1fr 1.4fr;gap:60px; }
}
@media (min-width:1100px){ .testimonial-grid{ gap:80px; } }
.testimonial-photo{
position:relative;
max-width:300px;
}
@media (min-width:820px){ .testimonial-photo{max-width:none;} }
.testimonial-photo img{
width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
border-radius:14px;
box-shadow:0 22px 50px -22px rgba(15,27,20,.4);
}
@media (min-width:820px){ .testimonial-photo img{border-radius:18px;box-shadow:0 28px 60px -28px rgba(15,27,20,.4);} }
.testimonial-photo::after{
content:"";position:absolute;
inset:auto -12px -12px auto;
width:34%;height:34%;
background:var(--coral);
border-radius:14px;
z-index:-1;
}
@media (min-width:820px){
.testimonial-photo::after{ inset:auto -16px -16px auto;width:40%;height:40%;border-radius:18px; }
}
.testimonial blockquote{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.35rem;
line-height:1.28;letter-spacing:-.012em;
color:var(--ink);
font-weight:400;
margin-bottom:24px;
}
@media (min-width:560px){ .testimonial blockquote{font-size:1.6rem;} }
@media (min-width:820px){ .testimonial blockquote{font-size:1.95rem;line-height:1.25;margin-bottom:32px;} }
@media (min-width:1100px){ .testimonial blockquote{font-size:2.3rem;} }
.testimonial blockquote em{color:var(--moss);font-style:italic;}
.testimonial cite{
font-style:normal;
display:flex;align-items:center;gap:16px;
}
.testimonial cite strong{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
font-size:1.2rem;color:var(--moss);
font-weight:500;
}
@media (min-width:820px){ .testimonial cite strong{font-size:1.4rem;} }
.testimonial cite span{
display:block;font-size:.82rem;color:#4a5a4f;
margin-top:2px;
}
@media (min-width:820px){ .testimonial cite span{font-size:.85rem;} }
/* ============================================================
FINAL CTA
============================================================ */
.cta{
padding:var(--section-y) var(--gutter);
background:var(--moss);
color:var(--cream);
position:relative;
overflow:hidden;
text-align:center;
}
.cta::before{
content:"";position:absolute;
width:400px;height:400px;
background:radial-gradient(circle, rgba(220,110,74,.25), transparent 65%);
top:-100px;left:50%;transform:translateX(-50%);
pointer-events:none;
}
@media (min-width:820px){
.cta::before{ width:600px;height:600px;top:-200px; }
}
.cta .door-big{
width:90px;height:114px;
margin:0 auto 28px;
background:var(--coral);
border-radius:42px 42px 5px 5px;
position:relative;
transform-origin:left center;
animation:doorBig 6s var(--easing) infinite;
}
@media (min-width:820px){
.cta .door-big{ width:140px;height:172px;border-radius:60px 60px 6px 6px;margin-bottom:36px; }
}
.cta .door-big::after{
content:"";position:absolute;right:10px;top:50%;
width:7px;height:7px;border-radius:50%;background:var(--cream);
transform:translateY(-50%);
}
@media (min-width:820px){
.cta .door-big::after{ right:14px;width:9px;height:9px; }
}
.cta .door-big::before{
content:"";position:absolute;
inset:0;
background:radial-gradient(circle at 30% 50%, rgba(255,255,255,.1), transparent 70%);
border-radius:inherit;
}
@keyframes doorBig{
0%,60%,100%{transform:perspective(800px) rotateY(0);}
70%,85%{transform:perspective(800px) rotateY(-55deg);}
}
.cta h2{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.92rem;
line-height:.95;letter-spacing:-.03em;
max-width:18ch;margin:0 auto 20px;
font-weight:400;
}
@media (min-width:560px){ .cta h2{font-size:2.56rem;} }
@media (min-width:820px){ .cta h2{font-size:3.52rem;margin-bottom:24px;} }
@media (min-width:1100px){ .cta h2{font-size:4.32rem;} }
@media (min-width:1320px){ .cta h2{font-size:5.12rem;} }
.cta h2 em{font-style:italic;color:var(--coral);font-variation-settings:"opsz" 144, "SOFT" 100;}
.cta p{
font-size:1.02rem;
color:rgba(244,238,223,.78);
max-width:46ch;margin:0 auto 32px;
}
@media (min-width:820px){ .cta p{font-size:1.15rem;margin-bottom:40px;} }
.cta-actions{
display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
}
.cta .btn-primary{background:var(--coral);color:var(--paper);}
.cta .btn-primary:hover{background:var(--ember);}
.cta .btn-ghost{box-shadow:inset 0 0 0 1.5px var(--cream);color:var(--cream);}
.cta .btn-ghost:hover{background:var(--cream);color:var(--moss);}
.cta-foot{
margin-top:48px;
display:flex;flex-direction:column;justify-content:center;gap:14px;
font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--sage);
align-items:center;
}
@media (min-width:560px){
.cta-foot{ flex-direction:row;gap:32px;font-size:.76rem; }
}
@media (min-width:820px){
.cta-foot{ margin-top:80px;gap:48px;font-size:.78rem; }
}
.cta-foot a{color:var(--cream);transition:color .3s;text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:.95rem;}
.cta-foot a:hover{color:var(--coral);}
/* ============================================================
FOOTER
============================================================ */
footer{
background-color:var(--ink);
background-image:url(/assets/img/globe.svg?v=11);
background-repeat:no-repeat;
background-position:right -190px bottom -250px;
background-size:880px;
color:var(--cream);
padding:32px var(--gutter) 32px;
position:relative;
}
@media (min-width:820px){
footer{ padding:44px var(--gutter) 40px; }
}
.footer-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;
grid-template-columns: 1fr;
align-items:start;
gap:36px;
padding-bottom:40px;
border-bottom:1px solid rgba(244,238,223,.12);
}
@media (min-width:560px){
.footer-grid{ grid-template-columns:1fr 1fr;gap:36px; }
}
@media (min-width:1100px){
.footer-grid{ grid-template-columns: 2fr 1fr 1fr 1fr;gap:60px;padding-bottom:60px; }
}
.footer-brand .brand-mark{width:37px;height:48px;}
@media (min-width:820px){
.footer-brand .brand-mark{width:43px;height:56px;}
}
.footer-brand{
grid-column:1 / -1;
display:grid;
grid-template-columns:auto 1fr;
align-items:start;
column-gap:14px;row-gap:4px;
}
@media (min-width:1100px){
.footer-brand{ grid-column:auto; }
}
.footer-brand .brand-mark{ grid-column:1; grid-row:1 / 3; align-self:start; }
.footer-brand h3{
grid-column:2; grid-row:1;
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.7rem;line-height:1;margin:0;
font-weight:400;color:#fff;
}
@media (min-width:820px){ .footer-brand h3{font-size:2rem;} }
.footer-brand h3 em{color:#fff;font-style:italic;}
.footer-brand p{grid-column:2;grid-row:2;color:rgba(244,238,223,.7);max-width:36ch;font-size:.95rem;margin:6px 0 0;}
.footer-col h4{
font-family:var(--mono);font-size:.68rem;
letter-spacing:.22em;text-transform:uppercase;
color:var(--sage);margin-bottom:18px;font-weight:500;
}
@media (min-width:820px){ .footer-col h4{font-size:.72rem;margin-bottom:24px;} }
.footer-col ul{list-style:none;display:grid;gap:10px;}
@media (min-width:820px){ .footer-col ul{gap:12px;} }
.footer-col a{
color:rgba(244,238,223,.8);
font-size:.92rem;
transition:color .3s;
display:inline-flex;align-items:center;gap:6px;
min-height:30px;
}
@media (min-width:820px){ .footer-col a{font-size:.95rem;gap:8px;} }
.footer-col a:hover{color:var(--coral);}
.footer-col a::before{
content:"→";opacity:0;
transition:all .3s var(--easing);
width:0;overflow:hidden;
}
.footer-col a:hover::before{opacity:1;width:16px;}
.footer-office{
font-size:.92rem;color:rgba(244,238,223,.8);line-height:1.6;
}
@media (min-width:820px){ .footer-office{font-size:.95rem;} }
.footer-office strong{color:var(--coral);font-family:var(--serif);font-style:italic;font-size:1.05rem;font-weight:500;display:block;margin-bottom:6px;}
@media (min-width:820px){ .footer-office strong{font-size:1.1rem;margin-bottom:8px;} }
.footer-wordmark{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 60;
font-size:3.6rem;
line-height:.85;letter-spacing:-.04em;
color:#fff;
margin:40px 0 24px;
white-space:nowrap;
overflow:hidden;
text-align:left;
}
@media (min-width:560px){ .footer-wordmark{font-size:5rem;} }
@media (min-width:820px){ .footer-wordmark{font-size:8rem;margin:60px 0 30px;} }
@media (min-width:1100px){ .footer-wordmark{font-size:11rem;} }
@media (min-width:1320px){ .footer-wordmark{font-size:13.5rem;} }
.footer-wordmark em{color:#fff;font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 100;}
.footer-bottom{
max-width:var(--maxw);margin:0 auto;
display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--sage);
gap:16px;
}
@media (min-width:560px){
.footer-bottom{
flex-direction:row;align-items:center;
font-size:.7rem;letter-spacing:.18em;gap:20px;flex-wrap:wrap;
}
}
@media (min-width:820px){ .footer-bottom{font-size:.72rem;} }
.footer-bottom a{color:var(--cream);}
.footer-bottom .links{display:flex;gap:18px;flex-wrap:wrap;}
@media (min-width:820px){ .footer-bottom .links{gap:24px;} }
/* ============================================================
REVEAL UTILITIES
============================================================ */
[data-reveal]{
opacity:0;transform:translateY(28px);
transition:opacity .9s var(--easing), transform .9s var(--easing);
}
[data-reveal].in-view{opacity:1;transform:translateY(0);}
[data-reveal][data-delay="1"]{transition-delay:.08s;}
[data-reveal][data-delay="2"]{transition-delay:.16s;}
[data-reveal][data-delay="3"]{transition-delay:.24s;}
[data-reveal][data-delay="4"]{transition-delay:.32s;}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:0.01ms!important;
animation-iteration-count:1!important;
transition-duration:0.01ms!important;
}
[data-reveal]{opacity:1;transform:none;}
.hero h1 .line > span{transform:none;opacity:1;}
.hero-sub, .hero-actions{opacity:1;}
}
.live-dot{
display:inline-block;width:7px;height:7px;border-radius:50%;
background:#5BE6A3;
box-shadow:0 0 0 0 rgba(91,230,163,.7);
animation:livePulse 2s ease-out infinite;
flex-shrink:0;
}
@keyframes livePulse{
0%{box-shadow:0 0 0 0 rgba(91,230,163,.7);}
70%{box-shadow:0 0 0 9px rgba(91,230,163,0);}
100%{box-shadow:0 0 0 0 rgba(91,230,163,0);}
}
/* ============================================================
OPEN ROLES — JOBS
============================================================ */
.jobs{
padding:var(--section-y) var(--gutter);
background:var(--paper);
position:relative;
}
.jobs-head{
max-width:var(--maxw);margin:0 auto 32px;
display:flex;flex-direction:column;gap:22px;
}
@media (min-width:820px){
.jobs-head{
flex-direction:row;justify-content:space-between;align-items:flex-end;
margin-bottom:48px;
}
}
.jobs-head h2{
font-family:var(--serif);font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.6rem;line-height:1.05;letter-spacing:-.02em;font-weight:400;
margin-top:14px;
}
@media (min-width:820px){ .jobs-head h2{font-size:2.7rem;} }
.jobs-head h2 em{color:var(--moss);font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 100;}
.jobs-head .filter-rail{
display:flex;gap:8px;
overflow-x:auto;
padding-bottom:4px;
margin:0 calc(-1 * var(--gutter));
padding-left:var(--gutter);padding-right:var(--gutter);
scrollbar-width:none;
}
.jobs-head .filter-rail::-webkit-scrollbar{display:none;}
@media (min-width:820px){
.jobs-head .filter-rail{margin:0;padding:0;}
}
.jobs-head .chip{
font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
padding:9px 14px 8px;border-radius:99px;
border:1px solid rgba(15,27,20,.15);background:transparent;color:var(--ink);
cursor:pointer;transition:all .25s var(--easing);white-space:nowrap;
min-height:34px;
flex-shrink:0;
}
.jobs-head .chip.active{background:var(--moss);color:var(--cream);border-color:var(--moss);}
.jobs-head .chip:hover:not(.active){background:rgba(15,27,20,.06);}
.jobs-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;
grid-auto-flow:column;
grid-auto-columns:82%;
gap:14px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding-bottom:14px;
margin-left:calc(-1 * var(--gutter));
margin-right:calc(-1 * var(--gutter));
padding-left:var(--gutter);
padding-right:var(--gutter);
scrollbar-width:thin;
}
@media (min-width:560px){ .jobs-grid{grid-auto-columns:54%;} }
@media (min-width:820px){
.jobs-grid{
grid-auto-flow:row;grid-auto-columns:auto;
grid-template-columns:repeat(2,1fr);
gap:18px;margin:0 auto;padding:0;
overflow:visible;scroll-snap-type:none;
}
}
@media (min-width:1100px){
.jobs-grid{grid-template-columns:repeat(3,1fr);}
}
.job-card{
scroll-snap-align:start;
background:var(--cream);
border:1px solid rgba(15,27,20,.08);
border-radius:18px;
padding:22px;
display:flex;flex-direction:column;gap:12px;
transition:transform .4s var(--easing), border-color .3s, box-shadow .4s;
position:relative;
overflow:hidden;
color:var(--ink);
min-height:280px;
}
@media (min-width:820px){ .job-card{padding:26px;} }
.job-card:hover{
transform:translateY(-4px);
border-color:var(--coral);
box-shadow:0 22px 50px -28px rgba(15,27,20,.35);
}
.job-card .meta{
display:flex;align-items:center;justify-content:space-between;gap:10px;
font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--leaf);
}
.job-card .meta .badge{
background:var(--coral);color:var(--paper);
padding:5px 10px 4px;border-radius:99px;letter-spacing:.14em;font-size:.58rem;
}
.job-card .meta .badge.cold{background:rgba(15,27,20,.07);color:var(--leaf);}
.job-card h3{
font-family:var(--serif);font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.4rem;line-height:1.1;letter-spacing:-.02em;font-weight:400;
color:var(--ink);
}
@media (min-width:820px){ .job-card h3{font-size:1.55rem;} }
.job-card .hospital{
font-family:var(--serif);font-style:italic;color:var(--moss);
font-variation-settings:"opsz" 144, "SOFT" 100;
font-size:1rem;
margin-top:-2px;
}
.job-card .loc-row{
display:flex;flex-wrap:wrap;gap:14px;font-size:.85rem;color:#3a4a40;
}
.job-card .loc-row span{display:inline-flex;align-items:center;gap:6px;}
.job-card .loc-row svg{width:13px;height:13px;color:var(--coral);}
.job-card .salary{
margin-top:auto;padding-top:8px;
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
color:var(--moss);font-size:1.35rem;
border-top:1px dashed rgba(15,27,20,.12);
}
.job-card .salary small{
font-family:var(--sans);font-style:normal;font-size:.65rem;
color:#3a4a40;letter-spacing:.1em;text-transform:uppercase;margin-left:6px;
}
.job-card .apply{
display:inline-flex;align-items:center;gap:10px;
font-weight:500;font-size:.88rem;color:var(--ink);
border-bottom:1px solid rgba(15,27,20,.2);
padding-bottom:4px;
align-self:flex-start;
transition:all .3s var(--easing);
}
.job-card:hover .apply{border-color:var(--coral);color:var(--ember);gap:18px;}
.jobs-foot{
max-width:var(--maxw);margin:32px auto 0;
display:flex;justify-content:center;align-items:center;gap:14px;
flex-wrap:wrap;
font-size:.9rem;color:#3a4a40;
}
@media (min-width:820px){ .jobs-foot{margin-top:44px;} }
.jobs-foot strong{color:var(--ink);font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 144;font-size:1.2rem;font-weight:500;}
/* ============================================================
TESTIMONIAL CAROUSEL
============================================================ */
.testimonial-slides{
position:relative;
min-height:0;
}
.testimonial-slide{
display:grid;grid-template-columns:1fr;gap:32px;align-items:center;
position:relative;
}
@media (min-width:820px){
.testimonial-slide{grid-template-columns:1fr 1.4fr;gap:60px;}
}
@media (min-width:1100px){ .testimonial-slide{gap:80px;} }
.testimonial-slide:not(.active){
position:absolute;inset:0;
opacity:0;
pointer-events:none;
visibility:hidden;
}
.testimonial-slide.active{
opacity:1;
pointer-events:auto;
visibility:visible;
transition:opacity .7s var(--easing);
}
.testimonial-controls{
max-width:var(--maxw);margin:32px auto 0;
display:flex;align-items:center;justify-content:space-between;gap:18px;
position:relative;z-index:2;
}
@media (min-width:820px){.testimonial-controls{margin-top:44px;}}
.testimonial-dots{display:flex;gap:8px;align-items:center;}
.testimonial-dot{
width:10px;height:10px;border-radius:50%;
background:rgba(15,27,20,.18);
cursor:pointer;
transition:all .35s var(--easing);
border:0;padding:0;
display:inline-block;
}
.testimonial-dot.active{background:var(--coral);width:34px;border-radius:99px;}
.testimonial-arrows{display:flex;gap:10px;}
.testimonial-arrow{
width:44px;height:44px;border-radius:50%;
background:transparent;
display:inline-grid;place-items:center;
box-shadow:inset 0 0 0 1.5px var(--ink);
transition:all .35s var(--easing);
color:var(--ink);
}
.testimonial-arrow:hover{background:var(--ink);color:var(--cream);transform:translateY(-2px);}
.testimonial-arrow svg{width:14px;height:14px;}
.testimonial-counter{
font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--leaf);
}
/* ============================================================
VIDEO BAND — full-width muted background video
============================================================ */
.videoband{
position:relative;
overflow:hidden;
background:var(--ink);
color:var(--cream);
min-height:380px;
}
@media (min-width:560px){ .videoband{min-height:460px;} }
@media (min-width:820px){ .videoband{min-height:560px;} }
@media (min-width:1100px){ .videoband{min-height:640px;} }
.videoband video,
.videoband .vb-fallback{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
z-index:0;
}
.videoband .vb-fallback{
background-position:center;background-size:cover;
background-color:var(--moss);
}
.videoband::after{
content:"";position:absolute;inset:0;z-index:1;
background:
radial-gradient(800px 600px at 30% 40%, rgba(15,27,20,.25), transparent 70%),
linear-gradient(180deg, rgba(15,27,20,.4) 0%, rgba(15,27,20,.7) 100%);
}
.videoband .vb-inner{
position:relative;z-index:2;
max-width:var(--maxw);
margin:0 auto;
padding:var(--section-y) var(--gutter);
display:flex;flex-direction:column;justify-content:flex-end;
min-height:inherit;
}
.videoband .vb-eyebrow{
font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--coral);
display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;
}
.videoband .vb-eyebrow::before{
content:"";width:24px;height:1px;background:var(--coral);
}
.videoband h2{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.6rem;line-height:1.05;letter-spacing:-.02em;
font-weight:400;
max-width:18ch;
}
@media (min-width:560px){ .videoband h2{font-size:2.08rem;} }
@media (min-width:820px){ .videoband h2{font-size:2.88rem;} }
@media (min-width:1100px){ .videoband h2{font-size:3.68rem;} }
.videoband h2 em{font-style:italic;color:var(--coral);font-variation-settings:"opsz" 144, "SOFT" 100;}
.videoband .vb-foot{
margin-top:28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
font-size:.95rem;color:rgba(244,238,223,.85);
}
.videoband .vb-foot .meta{
font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--sage);
}
/* ============================================================
INSIGHTS / STORIES
============================================================ */
.insights{
padding:var(--section-y) var(--gutter);
background:var(--cream);
position:relative;
}
.insights-head{
max-width:var(--maxw);margin:0 auto 32px;
display:flex;flex-direction:column;gap:20px;
}
@media (min-width:820px){
.insights-head{flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:48px;}
}
.insights-head h2{
font-family:var(--serif);font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.76rem;line-height:.95;letter-spacing:-.025em;font-weight:400;
margin-top:14px;
}
@media (min-width:560px){.insights-head h2{font-size:2.24rem;}}
@media (min-width:820px){.insights-head h2{font-size:2.72rem;}}
@media (min-width:1100px){.insights-head h2{font-size:3.36rem;}}
.insights-head h2 em{color:var(--moss);font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 100;}
.insights-head p{max-width:34ch;color:#3a4a40;font-size:1rem;}
.insights-head .all-stories{
display:inline-flex;align-items:center;gap:10px;
border-bottom:1px solid rgba(15,27,20,.25);padding-bottom:4px;
font-weight:500;font-size:.95rem;
align-self:flex-start;
transition:all .3s var(--easing);
}
.insights-head .all-stories:hover{border-color:var(--coral);color:var(--ember);gap:18px;}
.insights-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1fr;gap:18px;
}
@media (min-width:560px){.insights-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.insights-grid{grid-template-columns:repeat(4,1fr);gap:20px;}}
.insight-card{
background:var(--paper);
border-radius:16px;
overflow:hidden;
display:flex;flex-direction:column;
transition:transform .5s var(--easing), box-shadow .5s, border-color .3s;
position:relative;
color:var(--ink);
border:1px solid rgba(15,27,20,.06);
text-decoration:none;
}
.insight-card:hover{
transform:translateY(-4px);
box-shadow:0 22px 50px -28px rgba(15,27,20,.35);
border-color:var(--coral);
}
.insight-photo{
aspect-ratio:4/3;
background:var(--shell);
overflow:hidden;
position:relative;
}
.insight-photo img{
width:100%;height:100%;object-fit:cover;
transition:transform 1s var(--easing);
}
.insight-card:hover .insight-photo img{transform:scale(1.06);}
.insight-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 60%, rgba(15,27,20,.35) 100%);
}
.insight-cat{
position:absolute;top:12px;left:12px;z-index:2;
font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
background:var(--paper);color:var(--ink);
padding:5px 10px 4px;border-radius:99px;
}
.insight-body{
padding:18px 20px 22px;
display:flex;flex-direction:column;gap:8px;flex:1;
}
.insight-body .mono{font-size:.6rem;color:var(--leaf);letter-spacing:.18em;}
.insight-body h3{
font-family:var(--serif);font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.2rem;line-height:1.18;letter-spacing:-.015em;font-weight:400;
color:var(--ink);
}
.insight-body p{font-size:.88rem;color:#3a4a40;line-height:1.5;}
.insight-body .read{
margin-top:auto;padding-top:4px;
font-size:.85rem;color:var(--moss);font-weight:500;
display:inline-flex;align-items:center;gap:8px;
transition:gap .3s var(--easing), color .3s;
}
.insight-card:hover .read{gap:14px;color:var(--ember);}
/* ============================================================
STICKY MOBILE CTA BAR
============================================================ */
.mobile-cta{
position:fixed;
bottom:0;left:0;right:0;
z-index:48;
display:flex;gap:0;
background:var(--moss);
border-top:1px solid rgba(244,238,223,.1);
padding-bottom:env(safe-area-inset-bottom,0);
transform:translateY(110%);
transition:transform .5s var(--easing);
box-shadow:0 -16px 36px -16px rgba(0,0,0,.35);
}
.mobile-cta.visible{transform:translateY(0);}
.mobile-cta a{
flex:1;
display:flex;align-items:center;justify-content:center;gap:8px;
color:var(--cream);
padding:14px 12px;
font-family:var(--sans);
font-weight:600;font-size:.9rem;
border-right:1px solid rgba(244,238,223,.1);
min-height:54px;
letter-spacing:.01em;
}
.mobile-cta a:last-child{
border-right:0;background:var(--coral);color:var(--paper);
}
.mobile-cta a:active{background:rgba(244,238,223,.06);}
.mobile-cta a:last-child:active{background:var(--ember);}
.mobile-cta svg{width:14px;height:14px;flex-shrink:0;}
@media (min-width:820px){.mobile-cta{display:none;}}
body.with-mobile-cta footer{padding-bottom:80px;}
@media (min-width:820px){body.with-mobile-cta footer{padding-bottom:100px;}}
/* ============================================================
BRAND ONLINE PULSE
============================================================ */
.brand-online{
display:inline-block;width:6px;height:6px;border-radius:50%;
background:#5BE6A3;
vertical-align:middle;
margin-left:6px;
box-shadow:0 0 0 0 rgba(91,230,163,.7);
animation:livePulse 2s ease-out infinite;
}
/* ============================================================
TILT helpers (desktop pointer only)
============================================================ */
.tilt-host{will-change:transform;transform-style:preserve-3d;}
/* Desktop nav: hide the "0X" prefix to free space for more links */
@media (min-width:1100px){
.nav-links a em{display:none;}
}
/* ============================================================
JOURNEYS THAT INSPIRE — YouTube video showcase
============================================================ */
.journeys{
padding:var(--section-y) var(--gutter);
background:var(--ink);
color:var(--cream);
position:relative;
overflow:hidden;
}
.journeys::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(700px 500px at 90% 0%, rgba(220,110,74,.12), transparent 65%),
radial-gradient(700px 600px at 0% 100%, rgba(31,61,46,.4), transparent 65%);
}
.journeys-head{
max-width:var(--maxw);margin:0 auto 32px;
display:grid;grid-template-columns:1fr;gap:24px;align-items:end;
position:relative;z-index:2;
}
@media (min-width:820px){
.journeys-head{grid-template-columns:1.5fr 1fr;gap:60px;margin-bottom:48px;}
}
.journeys-head h2{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.76rem;line-height:.95;letter-spacing:-.025em;font-weight:400;
color:var(--cream);margin-top:16px;
}
@media (min-width:560px){.journeys-head h2{font-size:2.24rem;}}
@media (min-width:820px){.journeys-head h2{font-size:2.88rem;}}
@media (min-width:1100px){.journeys-head h2{font-size:3.52rem;}}
.journeys-head h2 em{
color:var(--coral);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
}
.journeys-head .eyebrow{color:var(--coral);}
.journeys-head .eyebrow::before{background:var(--coral);}
.journeys-head p{color:rgba(244,238,223,.78);font-size:1rem;max-width:38ch;}
.journeys-head .watch-more{
display:inline-flex;align-items:center;gap:10px;
margin-top:18px;
color:var(--cream);
border-bottom:1px solid rgba(244,238,223,.3);
padding-bottom:3px;font-weight:500;font-size:.92rem;
transition:all .3s var(--easing);
align-self:flex-start;
}
.journeys-head .watch-more:hover{border-color:var(--coral);color:var(--coral);gap:18px;}
.journeys-head .watch-more svg{width:13px;height:13px;}
/* Featured player */
.player{
max-width:var(--maxw);margin:0 auto 20px;
position:relative;z-index:2;
}
@media (min-width:820px){.player{margin-bottom:24px;}}
.player-frame{
position:relative;
aspect-ratio:16/9;
background:#000;
border-radius:14px;
overflow:hidden;
box-shadow:0 30px 80px -30px rgba(0,0,0,.65);
}
@media (min-width:820px){.player-frame{border-radius:20px;}}
.player-frame iframe{
position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.player-poster{
position:absolute;inset:0;
background-position:center;background-size:cover;
background-color:var(--moss);
cursor:pointer;
display:block;
overflow:hidden;
transition:transform .6s var(--easing);
}
.player-poster::before{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, rgba(15,27,20,.08) 0%, rgba(15,27,20,.5) 100%);
transition:opacity .35s var(--easing);
}
.player-poster:hover::before{opacity:.6;}
.player-poster .play-btn{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:74px;height:74px;border-radius:50%;
background:var(--coral);
display:grid;place-items:center;
z-index:2;
box-shadow:0 18px 40px -10px rgba(220,110,74,.5),
0 0 0 0 rgba(220,110,74,.4);
transition:all .35s var(--easing);
animation:playPulse 2.2s ease-out infinite;
}
@media (min-width:820px){.player-poster .play-btn{width:96px;height:96px;}}
.player-poster:hover .play-btn{
transform:translate(-50%,-50%) scale(1.08);
background:var(--ember);
animation:none;
}
.player-poster .play-btn svg{
width:26px;height:26px;fill:var(--cream);
margin-left:4px;
}
@media (min-width:820px){.player-poster .play-btn svg{width:34px;height:34px;}}
@keyframes playPulse{
0%{box-shadow:0 18px 40px -10px rgba(220,110,74,.5), 0 0 0 0 rgba(220,110,74,.5);}
70%{box-shadow:0 18px 40px -10px rgba(220,110,74,.5), 0 0 0 22px rgba(220,110,74,0);}
100%{box-shadow:0 18px 40px -10px rgba(220,110,74,.5), 0 0 0 0 rgba(220,110,74,0);}
}
.player-poster .caption{
position:absolute;bottom:18px;left:20px;right:20px;z-index:2;
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
font-size:1.05rem;line-height:1.3;color:var(--cream);
text-shadow:0 2px 12px rgba(0,0,0,.4);
}
@media (min-width:820px){
.player-poster .caption{bottom:26px;left:32px;right:32px;font-size:1.3rem;}
}
.player-poster .corner-tag{
position:absolute;top:14px;left:14px;z-index:2;
font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
background:rgba(15,27,20,.6);backdrop-filter:blur(8px);
color:var(--cream);
padding:6px 12px 5px;border-radius:99px;
display:inline-flex;align-items:center;gap:6px;
}
.player-poster .corner-tag .live-dot{background:#FF5C5C;}
/* Player meta below the iframe */
.player-meta{
max-width:var(--maxw);margin:0 auto 30px;
display:flex;justify-content:space-between;align-items:center;gap:18px;
flex-wrap:wrap;
font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--sage);
position:relative;z-index:2;
}
@media (min-width:820px){.player-meta{margin-bottom:40px;}}
.player-meta .now-playing{display:inline-flex;align-items:center;gap:10px;}
.player-meta .now-playing b{
color:var(--coral);font-weight:500;letter-spacing:.12em;
font-variant-numeric:tabular-nums;
}
.player-meta .yt-link{
color:var(--cream);text-transform:none;letter-spacing:0;
font-family:var(--sans);font-size:.92rem;
border-bottom:1px solid rgba(244,238,223,.3);padding-bottom:3px;
display:inline-flex;align-items:center;gap:8px;
transition:all .3s var(--easing);
}
.player-meta .yt-link:hover{border-color:var(--coral);color:var(--coral);gap:14px;}
.player-meta .yt-link svg{width:13px;height:13px;}
/* Thumbnail rail */
.thumbs{
max-width:var(--maxw);margin:0 auto;
display:grid;
grid-auto-flow:column;
grid-auto-columns:70%;
gap:12px;
overflow-x:auto;
scroll-snap-type:x mandatory;
margin-left:calc(-1 * var(--gutter));
margin-right:calc(-1 * var(--gutter));
padding:4px var(--gutter) 14px;
scrollbar-width:thin;
position:relative;z-index:2;
}
@media (min-width:560px){.thumbs{grid-auto-columns:42%;}}
@media (min-width:820px){
.thumbs{
grid-auto-flow:row;grid-auto-columns:auto;
grid-template-columns:repeat(5,1fr);
overflow:visible;scroll-snap-type:none;
margin:0 auto;padding:0;gap:14px;
}
}
.thumbs::-webkit-scrollbar-thumb{background:rgba(244,238,223,.2);}
.thumb{
scroll-snap-align:start;
background:rgba(244,238,223,.04);
border:1.5px solid rgba(244,238,223,.1);
border-radius:12px;
overflow:hidden;
padding:0;
cursor:pointer;
text-align:left;
color:var(--cream);
display:flex;flex-direction:column;
transition:all .4s var(--easing);
position:relative;
font-family:var(--sans);
}
.thumb:hover{transform:translateY(-3px);border-color:var(--coral);}
.thumb.active{
border-color:var(--coral);
box-shadow:0 14px 30px -16px rgba(220,110,74,.5);
background:rgba(220,110,74,.06);
}
.thumb-img{
aspect-ratio:16/9;
background:var(--moss);
background-size:cover;background-position:center;
position:relative;
}
.thumb-img::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.5) 100%);
transition:opacity .3s;
}
.thumb.active .thumb-img::after,
.thumb:hover .thumb-img::after{opacity:.35;}
.thumb-img .mini-play{
position:absolute;inset:0;display:grid;place-items:center;z-index:2;
}
.thumb-img .mini-play span{
width:34px;height:34px;border-radius:50%;
background:rgba(15,27,20,.55);backdrop-filter:blur(8px);
display:grid;place-items:center;
transition:all .3s var(--easing);
}
.thumb:hover .mini-play span,
.thumb.active .mini-play span{
background:var(--coral);transform:scale(1.08);
}
.thumb-img .mini-play svg{width:11px;height:11px;fill:var(--cream);margin-left:2px;}
.thumb-label{
padding:12px 14px;
display:flex;flex-direction:column;gap:3px;
}
.thumb-label .num{
font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--sage);
}
.thumb.active .thumb-label .num,
.thumb:hover .thumb-label .num{color:var(--coral);}
.thumb-label .ttl{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
color:var(--cream);font-size:.92rem;line-height:1.3;
}
/* ============================================================
FOR NURSES — USRN journey, founder quote, named stories
============================================================ */
.nurses-section{
padding:var(--section-y) var(--gutter);
background:var(--cream);
position:relative;
overflow:hidden;
}
.nurses-section::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(600px 400px at 100% 0%, rgba(220,110,74,.06), transparent 70%),
radial-gradient(700px 500px at 0% 100%, rgba(31,61,46,.06), transparent 70%);
pointer-events:none;
}
/* Header band */
.nurses-header{
max-width:var(--maxw);margin:0 auto 60px;
display:grid;grid-template-columns:1fr;gap:32px;align-items:start;
position:relative;
}
@media (min-width:820px){
.nurses-header{
grid-template-columns: 1.35fr 1fr;
gap:48px;margin-bottom:84px;
}
}
@media (min-width:1100px){
.nurses-header{ gap:64px; }
}
.nurses-header h2{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.92rem;line-height:.95;letter-spacing:-.025em;
font-weight:400;color:var(--ink);
margin-top:18px;
}
@media (min-width:560px){.nurses-header h2{font-size:2.4rem;}}
@media (min-width:820px){.nurses-header h2{font-size:3.04rem;}}
@media (min-width:1100px){.nurses-header h2{font-size:3.84rem;}}
@media (min-width:1320px){.nurses-header h2{font-size:4.48rem;}}
.nurses-header h2 em{
color:var(--moss);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
}
.nurses-header .lead{
font-size:1.02rem;color:#3a4a40;max-width:50ch;margin-top:14px;
}
@media (min-width:820px){.nurses-header .lead{font-size:1.1rem;}}
.nurses-header-actions{
margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;
}
.nurses-header-photo{
position:relative;
aspect-ratio:3/4;
background:var(--moss);
border-radius:18px;overflow:hidden;
box-shadow:0 28px 60px -28px rgba(15,27,20,.4);
max-width:380px;width:100%;justify-self:start;
}
@media (min-width:820px){.nurses-header-photo{max-width:none;justify-self:auto;}}
.nurses-header-photo img{
width:100%;height:100%;object-fit:cover;
transition:transform 8s linear;
}
.nurses-header-photo:hover img{transform:scale(1.06);}
.nurses-header-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 40%, rgba(15,27,20,.5) 100%);
pointer-events:none;
}
.nurses-header-photo .stamp{
position:absolute;top:16px;left:16px;z-index:2;
font-family:var(--mono);font-size:.6rem;
letter-spacing:.2em;text-transform:uppercase;
padding:6px 12px 5px;
background:rgba(244,238,223,.92);color:var(--ink);
border-radius:99px;
display:inline-flex;align-items:center;gap:8px;
}
.nurses-header-photo .stamp .live-dot{width:6px;height:6px;}
.nurses-header-photo .caption{
position:absolute;bottom:16px;left:18px;right:18px;z-index:2;
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
font-size:1.05rem;line-height:1.3;color:var(--cream);
}
/* Founder block — Atty. Carmen quote */
.founder-block{
max-width:var(--maxw);margin:0 auto 72px;
display:grid;grid-template-columns:1fr;gap:28px;
align-items:center;
padding:32px var(--gutter);
background:var(--moss);color:var(--cream);
border-radius:24px;
position:relative;overflow:hidden;
}
@media (min-width:820px){
.founder-block{
grid-template-columns:1fr 1.8fr;
gap:44px;padding:44px 44px;
margin-bottom:88px;
}
}
@media (min-width:1100px){
.founder-block{
grid-template-columns:1fr 2fr;
padding:56px 56px;gap:56px;margin-bottom:100px;
}
}
.founder-block::before{
content:"\201C";
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
position:absolute;top:-30px;right:24px;
font-size:12rem;line-height:.5;
color:rgba(220,110,74,.18);
pointer-events:none;
z-index:0;
}
@media (min-width:820px){.founder-block::before{font-size:16rem;top:-40px;right:40px;}}
.founder-block > *{position:relative;z-index:1;}
.founder-photo{
aspect-ratio:1/1;
background:var(--leaf);
border-radius:18px;overflow:hidden;
position:relative;
max-width:280px;
width:100%;
}
@media (min-width:820px){.founder-photo{max-width:none;}}
.founder-photo img{
width:100%;height:100%;object-fit:cover;
display:block;
}
.founder-photo .initials{
position:absolute;inset:0;display:grid;place-items:center;
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
font-size:5rem;color:var(--coral);
pointer-events:none;z-index:0;opacity:.85;
}
.founder-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 60%, rgba(15,27,20,.4) 100%);
pointer-events:none;
}
.founder-photo .ring{
position:absolute;inset:12px;border:1.5px solid rgba(220,110,74,.5);
border-radius:14px;z-index:2;pointer-events:none;
}
.founder-content blockquote{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.2rem;line-height:1.32;letter-spacing:-.01em;
color:var(--cream);font-weight:400;
}
@media (min-width:560px){.founder-content blockquote{font-size:1.4rem;}}
@media (min-width:820px){.founder-content blockquote{font-size:1.65rem;}}
@media (min-width:1100px){.founder-content blockquote{font-size:1.95rem;}}
.founder-content blockquote em{color:var(--coral);font-style:italic;}
.founder-content cite{
display:flex;flex-direction:column;gap:4px;
font-style:normal;margin-top:22px;
padding-top:18px;border-top:1px solid rgba(244,238,223,.15);
}
.founder-content cite strong{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
font-size:1.25rem;color:var(--coral);font-weight:500;
}
.founder-content cite span{
font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;
text-transform:uppercase;color:var(--sage);
}
/* Three pillars */
.nurses-pillars{
max-width:var(--maxw);margin:0 auto 72px;
}
.pillars-sub{
max-width:var(--maxw);margin:0 auto 28px;
}
.pillars-sub h3{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.6rem;line-height:1.05;letter-spacing:-.02em;font-weight:400;
margin-top:14px;
}
@media (min-width:820px){.pillars-sub h3{font-size:2.7rem;}}
.pillars-sub h3 em{color:var(--moss);font-style:italic;}
.pillars-sub-lead{
margin-top:14px;max-width:60ch;
color:var(--leaf);font-size:1rem;line-height:1.6;
}
@media (min-width:820px){ .pillars-sub-lead{ font-size:1.08rem; } }
.gallery-intro{
margin-top:14px;max-width:62ch;
color:var(--leaf);font-size:1rem;line-height:1.6;
}
@media (min-width:820px){ .gallery-intro{ font-size:1.08rem; } }
/* ---------- Photo gallery — cover-flow carousel ---------- */
.nurses-gallery{ max-width:var(--maxw);margin:0 auto 72px; }
.gallery-carousel{ position:relative; }
.gallery-viewport{
position:relative;
overflow:hidden;
height:clamp(280px, 46vw, 460px);
perspective:1500px;
-webkit-tap-highlight-color:transparent;
}
.gallery-track{
position:relative;width:100%;height:100%;
transform-style:preserve-3d;
cursor:grab;user-select:none;touch-action:pan-y;
}
.gallery-track.is-dragging{ cursor:grabbing; }
.gallery-item{
position:absolute;top:50%;left:50%;
height:82%;aspect-ratio:4/3;
margin:0;padding:0;border:0;
overflow:hidden;
border-radius:16px;
background:var(--moss);
cursor:zoom-in;
isolation:isolate;
transform-origin:center center;
transform:translate(-50%,-50%);
box-shadow:0 34px 64px -30px rgba(15,27,20,.6);
opacity:0;
will-change:transform,opacity,filter;
transition:transform .6s var(--easing), opacity .6s var(--easing), filter .6s var(--easing);
}
.gallery-item.is-active{ cursor:zoom-in; }
.gallery-item img{
width:100%;height:100%;object-fit:cover;display:block;
-webkit-user-drag:none;user-select:none;pointer-events:none;
transition:transform .8s var(--easing);
}
.gallery-item:hover img,
.gallery-item:focus-visible img{ transform:scale(1.06); }
.gallery-item::after{ /* darken + readability gradient */
content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg, rgba(15,27,20,0) 38%, rgba(15,27,20,.72) 100%);
opacity:.5;transition:opacity .4s var(--easing);
}
.gallery-item:hover::after,
.gallery-item:focus-visible::after{ opacity:.85; }
.gallery-item:focus-visible{ outline:2px solid var(--coral);outline-offset:3px; }
.gallery-num{
position:absolute;top:12px;left:13px;z-index:2;
font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
color:var(--cream);opacity:.8;
}
.gallery-cap{
position:absolute;left:0;right:0;bottom:0;z-index:2;
padding:14px 14px 13px;
overflow:hidden;
}
.gallery-cap span{
display:block;
font-family:var(--serif);font-size:.92rem;line-height:1.25;
color:var(--cream);
transform:translateY(115%);
transition:transform .45s var(--easing);
}
.gallery-item:hover .gallery-cap span,
.gallery-item:focus-visible .gallery-cap span,
.gallery-item.is-active .gallery-cap span{ transform:translateY(0); }
.gallery-item.is-active::after{ opacity:.78; }
/* Touch / no-hover devices: keep captions visible */
@media (hover:none){
.gallery-cap span{ transform:translateY(0); }
.gallery-item::after{ opacity:.8; }
}
/* ---------- Gallery carousel controls ---------- */
.gallery-controls{
display:flex;align-items:center;justify-content:center;gap:18px;
margin-top:24px;
}
.gallery-arrow{
width:44px;height:44px;border-radius:50%;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
background:var(--cream);color:var(--ink);
border:1px solid rgba(15,27,20,.16);
cursor:pointer;
transition:background .3s,color .3s,transform .3s,border-color .3s,opacity .3s;
}
.gallery-arrow:hover{ background:var(--ink);color:var(--cream);transform:translateY(-2px); }
.gallery-arrow:disabled{ opacity:.3;cursor:default;transform:none; }
.gallery-arrow svg{ width:15px;height:15px; }
.gallery-dots{ display:flex;align-items:center;gap:9px; }
.gallery-dot{
width:8px;height:8px;border-radius:50%;padding:0;border:0;
background:rgba(15,27,20,.2);cursor:pointer;
transition:background .3s var(--easing),width .3s var(--easing);
}
.gallery-dot:hover{ background:rgba(15,27,20,.4); }
.gallery-dot.is-active{ background:var(--coral);width:24px;border-radius:99px; }
/* ---------- Lightbox ---------- */
.lightbox{
position:fixed;inset:0;z-index:2000; /* topmost: above nav (100) and mobile CTA (48) */
display:flex;align-items:center;justify-content:center;
padding:max(18px,env(safe-area-inset-top)) 16px max(18px,env(safe-area-inset-bottom));
background:rgba(9,16,12,.94);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
opacity:0;visibility:hidden;
transition:opacity .3s var(--easing),visibility .3s var(--easing);
}
.lightbox.open{ opacity:1;visibility:visible; }
.lightbox-fig{
margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;
max-width:min(1100px,92vw);
}
.lightbox-fig img{
max-width:100%;max-height:78vh;
border-radius:12px;
box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
background:var(--moss);
opacity:0;transform:scale(.985);
transition:opacity .35s var(--easing),transform .35s var(--easing);
}
.lightbox.is-ready .lightbox-fig img{ opacity:1;transform:scale(1); }
.lightbox-fig figcaption{
display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;justify-content:center;
text-align:center;color:var(--cream);
font-family:var(--serif);font-size:1.02rem;
}
.lightbox-count{ font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;color:var(--sage); }
.lightbox button{
position:absolute;z-index:2;
display:flex;align-items:center;justify-content:center;
background:rgba(244,238,223,.1);color:var(--cream);
border:1px solid rgba(244,238,223,.22);border-radius:99px;
cursor:pointer;transition:background .25s var(--easing),transform .25s var(--easing);
}
.lightbox button:hover{ background:rgba(244,238,223,.22); }
.lightbox button:active{ transform:scale(.93); }
.lightbox-close{
top:max(14px,env(safe-area-inset-top));
right:max(14px,env(safe-area-inset-right));
width:46px;height:46px;
z-index:3; /* sit above the nav arrows so the tap target is never covered */
background:rgba(244,238,223,.16);
}
.lightbox-close svg{ width:17px;height:17px; }
.lightbox-nav{ top:50%;transform:translateY(-50%);width:48px;height:48px; }
.lightbox-nav:active{ transform:translateY(-50%) scale(.93); }
.lightbox-nav svg{ width:18px;height:18px; }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
@media (max-width:640px){
.lightbox-close{ width:50px;height:50px; }
.lightbox-nav{ top:auto;bottom:max(16px,env(safe-area-inset-bottom));transform:none;width:50px;height:50px; }
.lightbox-nav:active{ transform:scale(.93); }
.lightbox-prev{ left:calc(50% - 64px); }
.lightbox-next{ right:calc(50% - 64px); }
.lightbox-fig img{ max-height:64vh; }
}
/* Three promises — accordion */
/* Three Core Values — lively staircase grid over a shaped backdrop */
.values-block{ position:relative; }
.values-block .pillars-sub,
.values-block .values-grid{ position:relative;z-index:1; }
/* Full-width band so the patterned background bleeds edge-to-edge */
.values-band{
position:relative;overflow:hidden;
padding:var(--section-y) var(--gutter);
background:
linear-gradient(135deg, rgba(31,61,46,.05), transparent 45%, rgba(220,110,74,.05)),
radial-gradient(rgba(31,61,46,.07) 1.2px, transparent 1.3px),
var(--cream);
background-size:auto, 22px 22px, auto;
}
.values-band .nurses-pillars{ margin-bottom:0; }
/* Centered container for the decorative arch only (pattern now lives on the band) */
.values-decor{
position:absolute;left:50%;top:0;bottom:0;
width:100%;max-width:var(--maxw);transform:translateX(-50%);
z-index:0;pointer-events:none;overflow:hidden;
}
.values-arch{
position:absolute;right:5%;top:54%;transform:translateY(-50%);
width:min(320px,38%);height:auto;color:rgba(31,61,46,.10);
}
@media (max-width:680px){ .values-arch{ display:none; } }
.values-stage{ position:relative;max-width:var(--maxw);margin:0 auto; }
@media (min-width:880px){ .values-stage{ padding-top:54px; } }
/* Stepped "stairs" line above the cards — signals the stagger is intentional */
.values-stairs{
position:absolute;left:0;top:0;width:100%;z-index:3;pointer-events:none;display:none;
}
@media (min-width:880px){ .values-stairs{ display:block; } }
.values-stairs svg{ width:100%;height:auto;aspect-ratio:1200 / 130;display:block;overflow:visible; }
.values-stairs .stairs-line{
stroke:rgba(31,61,46,.34);stroke-width:2.4;
stroke-linecap:round;stroke-linejoin:round;
}
.values-stairs .stairs-dot{ fill:var(--coral); }
.values-grid{
margin:0 auto;
display:grid;grid-template-columns:1fr;gap:16px;
}
@media (min-width:560px){ .values-grid{ grid-template-columns:repeat(2,1fr);gap:18px; } }
@media (min-width:880px){
.values-grid{ grid-template-columns:repeat(3,1fr);gap:24px;align-items:start; }
/* descending staircase */
.values-grid .value-card:nth-child(2){ margin-top:36px; }
.values-grid .value-card:nth-child(3){ margin-top:72px; }
}
.value-card{
position:relative;overflow:hidden;
background:var(--paper);
border:1px solid rgba(15,27,20,.07);
border-radius:18px;padding:30px 28px 32px;
display:block;
box-shadow:0 24px 50px -38px rgba(15,27,20,.45);
transition:transform .45s var(--easing), box-shadow .45s, border-color .3s;
}
.value-card:hover{
transform:translateY(-6px);
box-shadow:0 36px 66px -34px rgba(15,27,20,.5);
border-color:rgba(31,61,46,.22);
}
.value-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--coral);
transform:scaleX(0);transform-origin:left;transition:transform .55s var(--easing);
}
.value-card:hover::before{ transform:scaleX(1); }
.value-bgnum{
position:absolute;top:-22px;right:8px;z-index:0;pointer-events:none;
font-family:var(--serif);font-style:italic;font-variation-settings:"opsz" 144;
font-size:7rem;line-height:1;color:rgba(31,61,46,.06);
}
.value-fold{ position:relative;z-index:1; }
.value-head{
display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:16px;
cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent;
}
.value-head::-webkit-details-marker{ display:none; }
.value-head::marker{ content:""; }
.value-ico{
width:52px;height:52px;border-radius:14px;
display:inline-flex;align-items:center;justify-content:center;
background:var(--moss);color:var(--cream);
box-shadow:0 12px 24px -14px rgba(31,61,46,.7);
transition:transform .4s var(--easing);
}
.value-card:hover .value-ico{ transform:translateY(-3px) rotate(-5deg); }
.value-ico svg{ width:26px;height:26px; }
.value-card h4{
font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 80;
font-size:1.32rem;line-height:1.1;letter-spacing:-.015em;font-weight:400;color:var(--ink);
}
.value-card h4 em{ color:var(--coral);font-style:italic; }
.value-chev{
flex-shrink:0;width:30px;height:30px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(15,27,20,.14);color:var(--moss);
transition:transform .35s var(--easing), background .3s, color .3s, border-color .3s;
}
.value-chev svg{ width:15px;height:15px; }
.value-head:hover .value-chev{ background:var(--moss);border-color:var(--moss);color:var(--cream); }
.value-fold[open] .value-chev{ transform:rotate(180deg); }
.value-card p{
position:relative;z-index:1;margin-top:16px;
font-size:.93rem;line-height:1.6;color:rgba(15,27,20,.66);
}
/* Desktop (3-up staircase): always expanded, no toggle affordance */
@media (min-width:880px){
.value-head{ cursor:default;pointer-events:none; }
.value-chev{ display:none; }
.value-fold > p{ display:block; }
}
.promises{
max-width:var(--maxw);margin:0 auto;
border-top:1px solid rgba(15,27,20,.12);
}
.promise{ border-bottom:1px solid rgba(15,27,20,.12); }
.promise-head{
width:100%;background:none;border:0;cursor:pointer;
display:flex;align-items:center;gap:16px;
padding:22px 4px;text-align:left;color:var(--ink);
-webkit-tap-highlight-color:transparent;
}
@media (min-width:820px){ .promise-head{ padding:28px 6px;gap:20px; } }
.promise-head .ico{
flex-shrink:0;
width:30px;height:36px;
background:var(--moss);
border-radius:15px 15px 2px 2px;
position:relative;
transform-origin:left;
transition:transform .6s var(--easing);
}
.promise-head .ico::after{
content:"";position:absolute;right:5px;top:50%;
width:4px;height:4px;border-radius:50%;background:var(--coral);
transform:translateY(-50%);
}
.promise-head:hover .ico{ transform:perspective(400px) rotateY(-22deg); }
.promise-title{
flex:1;min-width:0;
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.3rem;line-height:1.1;letter-spacing:-.015em;
font-weight:400;color:var(--ink);
}
@media (min-width:560px){ .promise-title{ font-size:1.6rem; } }
@media (min-width:820px){ .promise-title{ font-size:2rem; } }
.promise-title em{ color:var(--moss);font-style:italic; }
.promise-chev{
flex-shrink:0;
width:42px;height:42px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(15,27,20,.2);color:var(--ink);
transition:transform .45s var(--easing), background .3s, color .3s, border-color .3s;
}
.promise-chev svg{ width:17px;height:17px; }
.promise-head:hover .promise-chev{ background:var(--moss);border-color:var(--moss);color:var(--cream); }
.promise-head[aria-expanded="true"] .promise-chev{ transform:rotate(180deg); }
.promise-body{
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .5s var(--easing);
}
.promise-head[aria-expanded="true"] + .promise-body{ grid-template-rows:1fr; }
.promise-inner{ overflow:hidden; }
.promise-inner p{
margin:0;padding:0 0 24px 46px;
max-width:70ch;
color:#3a4a40;font-size:1rem;line-height:1.6;
}
@media (min-width:820px){ .promise-inner p{ padding-left:50px; } }
/* Named nurse story cards */
.nurses-stories-row{
max-width:var(--maxw);margin:0 auto 56px;
display:grid;grid-template-columns:1fr;gap:22px;
}
@media (min-width:820px){
.nurses-stories-row{grid-template-columns:1fr 1fr;gap:26px;margin-bottom:64px;}
}
.nurse-story{
background:var(--paper);
border-radius:18px;overflow:hidden;
display:grid;grid-template-columns:1fr;
border:1px solid rgba(15,27,20,.06);
transition:transform .5s var(--easing), box-shadow .5s;
color:var(--ink);
}
.nurse-story:hover{
transform:translateY(-4px);
box-shadow:0 22px 50px -28px rgba(15,27,20,.35);
}
@media (min-width:560px){
.nurse-story{grid-template-columns:0.75fr 1fr;}
}
.nurse-story-photo{
aspect-ratio:3/4;background:var(--moss);
position:relative;overflow:hidden;
}
@media (min-width:560px){
.nurse-story-photo{aspect-ratio:auto;min-height:100%;}
}
.nurse-story-photo img{
width:100%;height:100%;object-fit:cover;
transition:transform 1s var(--easing);
}
.nurse-story:hover .nurse-story-photo img{transform:scale(1.05);}
.nurse-story-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 60%, rgba(15,27,20,.4) 100%);
}
.nurse-story-photo .badge{
position:absolute;bottom:14px;left:14px;z-index:2;
font-family:var(--mono);font-size:.6rem;
letter-spacing:.18em;text-transform:uppercase;
padding:5px 10px 4px;
background:var(--cream);color:var(--ink);
border-radius:99px;
}
.nurse-story-body{
padding:22px 24px 24px;
display:flex;flex-direction:column;justify-content:space-between;gap:18px;
}
@media (min-width:820px){.nurse-story-body{padding:28px 28px 30px;}}
.nurse-story-body .tag{
font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;
text-transform:uppercase;color:var(--leaf);
}
.nurse-story-body blockquote{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
font-size:1.05rem;line-height:1.4;letter-spacing:-.005em;
color:var(--ink);
}
@media (min-width:820px){.nurse-story-body blockquote{font-size:1.18rem;}}
.nurse-story-body cite{
font-style:normal;display:flex;flex-direction:column;gap:3px;
padding-top:14px;border-top:1px dashed rgba(15,27,20,.15);
}
.nurse-story-body cite strong{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
color:var(--moss);font-size:1.2rem;font-weight:500;
}
.nurse-story-body cite span{
font-family:var(--mono);font-size:.6rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--leaf);
}
/* Nurses CTA band */
.nurses-cta{
max-width:var(--maxw);margin:0 auto;
padding:34px 0 0;
border-top:1px solid var(--mist);
display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:22px;
}
@media (min-width:820px){
.nurses-cta{
flex-direction:row;align-items:center;
padding-top:48px;
}
}
.nurses-cta h3{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.28rem;line-height:1;letter-spacing:-.02em;
font-weight:400;color:var(--ink);
}
@media (min-width:820px){.nurses-cta h3{font-size:1.84rem;}}
.nurses-cta h3 em{color:var(--moss);font-style:italic;}
.nurses-cta-actions{
display:flex;gap:12px;flex-wrap:wrap;
}
/* ============================================================
FOR EMPLOYERS / HOSPITALS — deep partnership pitch
============================================================ */
.employers{
padding:calc(var(--section-y) * .8) var(--gutter);
background:var(--moss);
color:var(--cream);
position:relative;
overflow:hidden;
}
.employers::before{
content:"";position:absolute;inset:0;
background:
radial-gradient(700px 500px at 90% 5%, rgba(220,110,74,.16), transparent 70%),
radial-gradient(800px 600px at 0% 100%, rgba(15,27,20,.5), transparent 60%);
pointer-events:none;
}
/* Wide photo accent — heavily moss-tinted so it reads as texture only */
.emp-bg{
position:absolute;inset:0;z-index:0;pointer-events:none;
background:
linear-gradient(90deg, rgba(31,61,46,.93) 0%, rgba(31,61,46,.82) 52%, rgba(31,61,46,.72) 100%),
url(/assets/img/gallery/trinity-execs.jpg) center 62%/cover no-repeat;
}
/* Redesigned employer band — balanced two-column: pitch + stat card */
.emp-inner{
max-width:var(--maxw);margin:0 auto;position:relative;z-index:2;
display:grid;grid-template-columns:1fr;gap:36px;align-items:center;
}
@media (min-width:900px){ .emp-inner{ grid-template-columns:1.32fr .88fr;gap:56px; } }
@media (min-width:1100px){ .emp-inner{ gap:72px; } }
.emp-main .eyebrow{ color:var(--coral); }
.emp-main h2{
font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 70;
font-size:1.9rem;line-height:1.04;letter-spacing:-.02em;font-weight:400;color:var(--cream);
margin-top:16px;
}
@media (min-width:820px){ .emp-main h2{ font-size:2.8rem; } }
@media (min-width:1100px){ .emp-main h2{ font-size:3.3rem; } }
.emp-main h2 em{ color:var(--coral);font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100; }
.emp-lead{
margin-top:22px;max-width:46ch;
font-family:var(--serif);font-variation-settings:"opsz" 144;
font-size:1.18rem;line-height:1.45;color:rgba(244,238,223,.92);
}
@media (min-width:820px){ .emp-lead{ font-size:1.34rem; } }
.emp-lead em{ color:var(--coral);font-style:italic; }
.emp-main .emp-cta-actions{ margin-top:26px;display:flex;gap:12px;flex-wrap:wrap; }
.emp-feature{
position:relative;overflow:hidden;
background:linear-gradient(160deg, rgba(244,238,223,.08), rgba(244,238,223,.03));
border:1px solid rgba(244,238,223,.16);
border-radius:20px;padding:34px 30px;
display:grid;grid-template-columns:auto 1fr;align-content:start;
column-gap:20px;row-gap:8px;
box-shadow:0 30px 60px -34px rgba(0,0,0,.5);
}
.emp-feature::before{
content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--coral);
}
.emp-feature-ico{
grid-row:1;grid-column:1;align-self:center;justify-self:start;
width:54px;height:54px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(244,238,223,.08);border:1px solid rgba(244,238,223,.2);color:var(--cream);
}
.emp-feature-ico svg{ width:26px;height:26px; }
.emp-feature-num{
grid-row:1;grid-column:2;align-self:center;justify-self:start;
font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 80;
font-size:4.6rem;line-height:.85;letter-spacing:-.04em;color:var(--coral);font-weight:400;
display:flex;align-items:baseline;
}
@media (min-width:820px){ .emp-feature-num{ font-size:5.4rem; } }
.emp-feature-num .pct{ font-size:.46em;font-style:italic;margin-left:2px; }
.emp-feature-label{
grid-column:1 / -1;
font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
color:var(--cream);margin-top:6px;
}
.emp-feature-desc{ grid-column:1 / -1;font-size:.92rem;line-height:1.55;color:rgba(244,238,223,.72);margin-top:8px; }
/* Header band with 90% retention stat */
.emp-header{
max-width:var(--maxw);margin:0 auto 60px;
display:grid;grid-template-columns:1fr;gap:36px;
position:relative;
}
@media (min-width:820px){
.emp-header{
grid-template-columns: 1.3fr 1fr;
gap:60px;align-items:end;margin-bottom:88px;
}
}
.emp-header .eyebrow{color:var(--coral);}
.emp-header .eyebrow::before{background:var(--coral);}
.emp-header h2{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.6rem;line-height:1.05;letter-spacing:-.02em;
font-weight:400;color:var(--cream);
margin-top:18px;
}
@media (min-width:820px){.emp-header h2{font-size:2.7rem;}}
.emp-header h2 em{
color:var(--coral);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
}
.emp-stat{
display:flex;flex-direction:column;align-items:flex-start;gap:10px;
padding-top:22px;border-top:2px solid var(--coral);
}
.emp-stat big{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:5.4rem;line-height:.85;letter-spacing:-.04em;
color:var(--cream);font-weight:400;
display:flex;align-items:baseline;gap:2px;
}
@media (min-width:560px){.emp-stat big{font-size:6.6rem;}}
@media (min-width:820px){.emp-stat big{font-size:7.6rem;}}
@media (min-width:1100px){.emp-stat big{font-size:8.6rem;}}
@media (min-width:1320px){.emp-stat big{font-size:9.6rem;}}
.emp-stat big span{
font-style:italic;color:var(--coral);font-size:.5em;
font-variation-settings:"opsz" 144, "SOFT" 100;
}
.emp-stat small{
font-family:var(--sans);font-size:.95rem;
color:rgba(244,238,223,.78);
max-width:32ch;line-height:1.55;
}
/* Shared sub-section heading */
/* Reveal-curtain widgets (One-Stop Shop / Why Choose) */
.emp-curtain{
max-width:var(--maxw);margin:0 auto;
border-top:1px solid rgba(244,238,223,.16);
}
.emp-curtain:last-of-type{ border-bottom:1px solid rgba(244,238,223,.16); }
.emp-curtain-head{
width:100%;background:none;border:0;cursor:pointer;
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:26px 0;text-align:left;color:var(--cream);
-webkit-tap-highlight-color:transparent;
}
@media (min-width:820px){ .emp-curtain-head{ padding:34px 0; } }
.emp-curtain-titles{ display:flex;flex-direction:column;gap:12px;min-width:0; }
.emp-curtain-head .eyebrow{ color:var(--coral); }
.emp-curtain-head .eyebrow::before{ background:var(--coral); }
.emp-curtain-h{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.6rem;line-height:1.05;letter-spacing:-.02em;
font-weight:400;color:var(--cream);
}
@media (min-width:820px){ .emp-curtain-h{ font-size:2.7rem; } }
.emp-curtain-h em{ color:var(--coral);font-style:italic;font-variation-settings:"opsz" 144, "SOFT" 100; }
.emp-curtain-ico{
flex-shrink:0;
width:46px;height:46px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(244,238,223,.3);color:var(--cream);
transition:transform .45s var(--easing), background .3s, color .3s, border-color .3s;
}
.emp-curtain-ico svg{ width:18px;height:18px; }
.emp-curtain-head:hover .emp-curtain-ico{ background:var(--coral);border-color:var(--coral);color:var(--paper); }
.emp-curtain-head[aria-expanded="true"] .emp-curtain-ico{ transform:rotate(180deg); }
.emp-curtain-body{
display:grid;grid-template-rows:0fr;
transition:grid-template-rows .55s var(--easing);
}
.emp-curtain-head[aria-expanded="true"] + .emp-curtain-body{ grid-template-rows:1fr; }
.emp-static .emp-curtain-head{ cursor:default; }
.emp-static .emp-curtain-body{ grid-template-rows:1fr; }
.emp-curtain-inner{ overflow:hidden; }
.emp-curtain-intro{
max-width:60ch;color:rgba(244,238,223,.78);font-size:1rem;
margin:0 0 22px;
}
.emp-curtain-body .emp-services,
.emp-curtain-body .emp-reasons{ padding-bottom:38px; }
.emp-services{
display:grid;grid-template-columns:1fr;gap:12px;
}
@media (min-width:560px){.emp-services{grid-template-columns:repeat(2,1fr);gap:14px;}}
@media (min-width:1100px){.emp-services{grid-template-columns:repeat(4,1fr);gap:16px;}}
.emp-service{
background:rgba(244,238,223,.04);
border:1px solid rgba(244,238,223,.1);
border-radius:16px;
padding:24px 22px;
display:flex;flex-direction:column;gap:12px;
position:relative;
transition:transform .4s var(--easing), background .4s, border-color .3s;
overflow:hidden;
min-height:200px;
}
.emp-service:hover{
background:rgba(244,238,223,.07);
border-color:var(--coral);
transform:translateY(-4px);
}
.emp-service::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:var(--coral);
transform:scaleX(0);transform-origin:left;
transition:transform .55s var(--easing);
}
.emp-service:hover::before{transform:scaleX(1);}
.emp-service .num{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
font-size:2rem;color:var(--coral);line-height:1;
}
.emp-service h4{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.25rem;line-height:1.1;letter-spacing:-.015em;
font-weight:400;color:var(--cream);
}
@media (min-width:1100px){.emp-service h4{font-size:1.35rem;}}
.emp-service p{
font-size:.88rem;line-height:1.55;
color:rgba(244,238,223,.72);
}
/* Why Choose — 6-reason grid */
.emp-reasons{
display:grid;grid-template-columns:1fr;
border-top:1px solid rgba(244,238,223,.12);
}
@media (min-width:820px){
.emp-reasons{ grid-template-columns:repeat(2,1fr); }
}
@media (min-width:1100px){
.emp-reasons{ grid-template-columns:repeat(4,1fr); }
}
.emp-reason{
padding:26px 0;
display:flex;flex-direction:column;gap:6px;
border-bottom:1px solid rgba(244,238,223,.12);
position:relative;
}
@media (min-width:820px){
.emp-reason{
padding:30px 26px;
border-right:1px solid rgba(244,238,223,.12);
}
.emp-reason:nth-child(2n){border-right:0;}
}
@media (min-width:1100px){
.emp-reason{ padding:34px 28px; }
.emp-reason:nth-child(2n){border-right:1px solid rgba(244,238,223,.12);}
.emp-reason:nth-child(3n){border-right:0;}
}
.emp-reason .num{
font-family:var(--mono);font-size:.62rem;
letter-spacing:.2em;text-transform:uppercase;color:var(--coral);
margin-bottom:6px;
}
.emp-reason h4{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.35rem;line-height:1.1;letter-spacing:-.015em;
font-weight:400;color:var(--cream);
}
@media (min-width:820px){.emp-reason h4{font-size:1.55rem;}}
.emp-reason h4 em{color:var(--coral);font-style:italic;}
.emp-reason p{
font-size:.92rem;line-height:1.55;
color:rgba(244,238,223,.72);
margin-top:8px;
}
/* Resources */
.emp-resources{ max-width:var(--maxw);margin:0 auto 56px; }
@media (min-width:820px){ .emp-resources{margin-bottom:72px;} }
.emp-resources-grid{
display:grid;grid-template-columns:1fr;gap:14px;
}
@media (min-width:560px){.emp-resources-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.emp-resources-grid{grid-template-columns:repeat(3,1fr);gap:18px;}}
.resource-card{
background:rgba(244,238,223,.05);
border:1px solid rgba(244,238,223,.12);
border-radius:16px;
padding:24px;
display:flex;flex-direction:column;gap:10px;
color:var(--cream);
transition:transform .4s var(--easing), background .3s, border-color .3s;
position:relative;
overflow:hidden;
min-height:220px;
}
.resource-card:hover{
background:rgba(244,238,223,.08);
border-color:var(--coral);
transform:translateY(-4px);
}
.resource-card::after{
content:"↓";position:absolute;top:22px;right:22px;
width:32px;height:32px;border-radius:50%;
background:rgba(244,238,223,.08);
color:var(--cream);
display:grid;place-items:center;font-size:.85rem;
transition:all .35s var(--easing);
}
.resource-card:hover::after{
background:var(--coral);transform:translateY(2px);
}
.resource-cat{
font-family:var(--mono);font-size:.6rem;
letter-spacing:.2em;text-transform:uppercase;
color:var(--coral);
}
.resource-card h4{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.25rem;line-height:1.15;letter-spacing:-.015em;
font-weight:400;color:var(--cream);
max-width:18ch;
}
@media (min-width:820px){.resource-card h4{font-size:1.4rem;}}
.resource-card p{
font-size:.9rem;line-height:1.5;
color:rgba(244,238,223,.7);
flex:1;
}
.resource-card .download{
font-family:var(--mono);font-size:.62rem;
letter-spacing:.16em;text-transform:uppercase;
color:var(--cream);
padding-top:10px;
margin-top:6px;
border-top:1px dashed rgba(244,238,223,.2);
display:inline-flex;align-items:center;gap:8px;
font-weight:500;
transition:color .3s;
}
.resource-card:hover .download{color:var(--coral);}
/* Emp CTA band */
.emp-cta{
max-width:var(--maxw);margin:0 auto;
padding:36px 0 0;
border-top:1px solid rgba(244,238,223,.12);
display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:22px;
}
@media (min-width:820px){
.emp-cta{
flex-direction:row;align-items:center;
padding-top:48px;
}
}
.emp-cta h3{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.28rem;line-height:1;letter-spacing:-.02em;
font-weight:400;color:var(--cream);
}
@media (min-width:820px){.emp-cta h3{font-size:1.76rem;}}
.emp-cta h3 em{color:var(--coral);font-style:italic;}
.emp-cta-actions{
display:flex;gap:12px;flex-wrap:wrap;
}
.employers .btn-primary{
background:var(--coral);color:var(--paper);
}
.employers .btn-primary:hover{background:var(--ember);}
.employers .btn-ghost{
box-shadow:inset 0 0 0 1.5px rgba(244,238,223,.7);color:var(--cream);
}
.employers .btn-ghost:hover{background:var(--cream);color:var(--moss);box-shadow:inset 0 0 0 1.5px var(--cream);}
.employers .btn-ghost .arrow{background:rgba(244,238,223,.18);}
/* ============================================================
ABOUT / TEAM — executive cards + nurse quote cards
============================================================ */
.team{
padding:var(--section-y) var(--gutter);
background:var(--paper);
position:relative;
}
/* About page: the first band must clear the fixed banner + solid nav */
#about.team.is-page{ padding-top:calc(var(--section-y) + 70px);padding-bottom:var(--section-y); }
#about .team-mission{ margin-bottom:0; }
.team::before{
content:"";position:absolute;left:0;right:0;top:0;height:1px;
background:linear-gradient(90deg, transparent, var(--mist), transparent);
}
/* Mission band */
.team-mission{
max-width:var(--maxw);margin:0 auto 64px;
display:grid;grid-template-columns:1fr;gap:18px;
}
@media (min-width:820px){
.team-mission{
grid-template-columns: 1.85fr 1fr;
gap:60px;align-items:start;margin-bottom:88px;
}
}
.team-mission .eyebrow{margin-bottom:6px;}
.team-mission h2{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 70;
font-size:1.6rem;line-height:1.05;letter-spacing:-.02em;
font-weight:400;color:var(--ink);
}
@media (min-width:820px){ .team-mission h2{ font-size:2.7rem; } }
.team-mission h2 em{
color:var(--moss);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
}
.team-mission .lead{
max-width:42ch;color:#3a4a40;
}
/* Sub-section heading */
.team-sub-head{
max-width:var(--maxw);margin:0 auto 28px;
display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
flex-wrap:wrap;
}
@media (min-width:820px){.team-sub-head{margin-bottom:36px;}}
.team-sub-head h3{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.36rem;line-height:1.05;letter-spacing:-.02em;font-weight:400;
}
@media (min-width:560px){.team-sub-head h3{font-size:1.6rem;}}
@media (min-width:820px){.team-sub-head h3{font-size:2.08rem;}}
.team-sub-head h3 em{color:var(--moss);font-style:italic;}
.team-sub-head .num{
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144;
font-size:2.4rem;color:var(--coral);line-height:1;
}
/* Exec grid */
.team-exec{ max-width:var(--maxw); margin:0 auto; }
.team-exec-grid{
display:grid;
grid-template-columns:1fr;
gap:20px;
}
@media (min-width:560px){
.team-exec-grid{ grid-template-columns: repeat(2, 1fr); gap:22px; }
}
@media (min-width:1100px){
.team-exec-grid{ grid-template-columns: repeat(3, 1fr); gap:28px; }
}
.exec-card{
background:var(--cream);
border-radius:18px;
overflow:hidden;
display:flex;flex-direction:column;
transition:transform .5s var(--easing), box-shadow .5s;
border:1px solid rgba(15,27,20,.06);
}
.exec-card:hover{
transform:translateY(-6px);
box-shadow:0 28px 60px -28px rgba(15,27,20,.4);
}
.exec-photo{
aspect-ratio:4/5;
overflow:hidden;
background:var(--moss);
position:relative;
isolation:isolate;
}
.exec-photo img{
width:100%;height:100%;object-fit:cover;
transition:transform 1.2s var(--easing);
display:block;
}
.exec-card:hover .exec-photo img{transform:scale(1.06);}
/* Per-photo framing — zoom up from the bottom to cut headroom, matching Carmen */
.exec-photo img.frame-joanne{ transform:scale(1.12); transform-origin:50% 100%; }
.exec-card:hover .exec-photo img.frame-joanne{ transform:scale(1.18); }
.exec-photo img.frame-camille{ object-position:50% 100%; transform:scale(1.38); transform-origin:50% 100%; }
.exec-card:hover .exec-photo img.frame-camille{ transform:scale(1.45); }
.exec-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 60%, rgba(15,27,20,.5) 100%);
}
.exec-tag{
position:absolute;top:14px;left:14px;z-index:2;
font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
background:var(--paper);color:var(--ink);
padding:5px 10px 4px;border-radius:99px;
}
.exec-photo::first-letter{ /* nothing — placeholder for ::before */ }
.exec-photo .initials{
position:absolute;inset:0;display:grid;place-items:center;
font-family:var(--serif);font-variation-settings:"opsz" 144;
font-style:italic;font-size:5rem;color:var(--coral);
z-index:0;pointer-events:none;opacity:.85;
}
.exec-body{
padding:22px 24px 26px;
display:flex;flex-direction:column;gap:8px;
}
@media (min-width:820px){.exec-body{padding:26px 28px 30px;}}
.exec-body .role{
font-family:var(--mono);font-size:.64rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--leaf);
}
.exec-body h4{
font-family:var(--serif);
font-variation-settings:"opsz" 144, "SOFT" 80;
font-size:1.45rem;line-height:1.05;letter-spacing:-.015em;
font-weight:400;color:var(--ink);
}
@media (min-width:820px){.exec-body h4{font-size:1.7rem;}}
.exec-body h4 .credentials{
font-family:var(--serif);font-style:italic;color:var(--moss);
font-size:.62em;display:inline-block;margin-left:4px;
font-variation-settings:"opsz" 144;
}
.exec-body p{
font-size:.95rem;color:#3a4a40;line-height:1.55;
margin-top:4px;
}
.exec-body .links{
margin-top:14px;
display:flex;gap:14px;align-items:center;
font-family:var(--mono);font-size:.62rem;
letter-spacing:.18em;text-transform:uppercase;
}
.exec-body .links a{
color:var(--moss);
border-bottom:1px solid rgba(31,61,46,.3);
padding-bottom:3px;
display:inline-flex;align-items:center;gap:6px;
transition:all .3s var(--easing);
}
.exec-body .links a:hover{color:var(--ember);border-color:var(--coral);}
/* Nurse showcase */
.team-nurses{ max-width:var(--maxw); margin:0 auto; }
.team-nurses-grid{
display:grid;
grid-template-columns:1fr;
gap:14px;
}
@media (min-width:560px){
.team-nurses-grid{ grid-template-columns: repeat(2,1fr); gap:16px; }
}
@media (min-width:820px){
.team-nurses-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (min-width:1100px){
.team-nurses-grid{ grid-template-columns: repeat(5,1fr); gap:16px; }
}
.nurse-card{
background:var(--cream);
border-radius:14px;
overflow:hidden;
position:relative;
transition:transform .5s var(--easing), box-shadow .5s;
border:1px solid rgba(15,27,20,.06);
display:flex;flex-direction:column;
}
.nurse-card:hover{
transform:translateY(-4px);
box-shadow:0 22px 50px -28px rgba(15,27,20,.35);
}
.nurse-photo{
aspect-ratio:3/4;
overflow:hidden;
background:var(--moss);
position:relative;
}
.nurse-photo img{
width:100%;height:100%;object-fit:cover;
transition:transform 1.2s var(--easing);
display:block;
}
.nurse-card:hover .nurse-photo img{transform:scale(1.06);}
.nurse-photo::after{
content:"";position:absolute;inset:0;
background:linear-gradient(180deg, transparent 30%, rgba(15,27,20,.85) 95%);
}
.nurse-photo .quote-mark{
position:absolute;top:8px;left:14px;z-index:2;
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
font-size:4rem;line-height:1;color:var(--coral);
opacity:.85;
}
.nurse-quote{
position:absolute;bottom:16px;left:16px;right:16px;z-index:2;
font-family:var(--serif);font-style:italic;
font-variation-settings:"opsz" 144, "SOFT" 100;
font-size:.95rem;line-height:1.4;color:var(--cream);
letter-spacing:-.005em;
}
.nurse-meta{
padding:14px 16px;
display:flex;justify-content:space-between;gap:10px;
font-family:var(--mono);font-size:.6rem;
letter-spacing:.18em;text-transform:uppercase;color:var(--leaf);
border-top:1px solid rgba(15,27,20,.06);
}
.nurse-meta .placement{color:var(--ink);}
.nurse-meta .placement b{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-weight:500;color:var(--coral);}
/* ============================================================
CINEMATIC HERO — full-bleed video/image + flight path
(overrides earlier light-hero styles)
============================================================ */
.hero{
background:var(--ink);
color:var(--cream);
}
.hero-bg{
position:absolute;inset:0;z-index:0;
overflow:hidden;
background:var(--ink);
}
.hero-bg img,
.hero-bg video{
position:absolute;inset:0;
width:100%;height:100%;
object-fit:cover;
/* Ken-Burns drift on the bg image */
animation:bgDrift 30s ease-in-out infinite alternate;
}
/* On phones/narrow screens the bg crops tighter — anchor to the right so the
nurse stays in frame (the left of the shot is just a flower vase). */
@media (max-width:819px){
.hero-bg img,
.hero-bg video{ object-position:right center; }
}
.hero-bg::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(105deg,
rgba(15,27,20,0.78) 0%,
rgba(15,27,20,0.55) 38%,
rgba(15,27,20,0.24) 70%,
rgba(15,27,20,0.5) 100%),
linear-gradient(180deg,
rgba(15,27,20,0.4) 0%,
transparent 30%,
transparent 68%,
rgba(15,27,20,0.55) 100%);
}
@keyframes bgDrift{
from{transform:scale(1.05) translate(0,0);}
to{transform:scale(1.12) translate(-1.5%, -1%);}
}
.hero-grid{position:relative;z-index:3;}
/* Invert hero text colors */
.hero h1{color:var(--cream);}
.hero h1 em{color:var(--coral);}
.hero h1 .underline::after{opacity:0.7;}
.hero-sub{color:rgba(244,238,223,0.86);}
.hero .btn-primary{background:var(--coral);color:var(--paper);}
.hero .btn-primary:hover{background:var(--ember);}
.hero .btn-ghost{
background:transparent;color:var(--cream);
box-shadow:inset 0 0 0 1.5px rgba(244,238,223,0.7);
}
.hero .btn-ghost:hover{background:var(--cream);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--cream);}
.hero .btn-ghost .arrow{background:rgba(244,238,223,0.18);}
.hero-meta{
border-color:rgba(244,238,223,0.16);
color:rgba(244,238,223,0.72);
}
.scroll-cue{color:rgba(244,238,223,0.65);}
.scroll-cue .line{background:rgba(244,238,223,0.35);}
/* ============================================================
POST-MISSION REARRANGE — usrn hero, process, stats,
why-choose, employer band + botanical leaf overlays
============================================================ */
/* Laurel wreath accent (generated SVG, coloured via currentColor).
Subtle motif — moss-green bands only. */
.leaf-decor{
position:absolute;z-index:0;pointer-events:none;line-height:0;
width:300px;max-width:48%;
}
.leaf-decor .leaf-svg{ width:100%;height:auto;display:block; }
.leaf-accent{ color:var(--sage);opacity:.1;width:300px; }
.leaf-spray{ top:0;right:0;width:360px;max-width:44%;color:var(--leaf);opacity:.16; }
@media (max-width:680px){ .leaf-spray{ width:210px;opacity:.12; } }
.leaf-accent-br{ bottom:-64px;right:-56px;transform:rotate(-20deg); }
.leaf-accent-bl{ bottom:-64px;left:-58px;transform:rotate(22deg); }
@media (max-width:680px){
.leaf-accent{ width:210px;opacity:.08; }
}
/* ---- BAND 1: USRN hero ---- */
.usrn-hero{
padding:var(--section-y) var(--gutter) calc(var(--section-y) * .7);
background:var(--cream);position:relative;
}
.usrn-hero-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1fr;gap:30px;align-items:center;
}
@media (min-width:820px){ .usrn-hero-grid{ grid-template-columns:1.12fr .88fr;gap:48px; } }
@media (min-width:1100px){ .usrn-hero-grid{ gap:64px; } }
.usrn-hero h2{
font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 70;
font-size:2.4rem;line-height:.98;letter-spacing:-.025em;
font-weight:400;color:var(--ink);margin-top:18px;
}
@media (min-width:560px){.usrn-hero h2{font-size:3rem;}}
@media (min-width:820px){.usrn-hero h2{font-size:3.4rem;}}
@media (min-width:1100px){.usrn-hero h2{font-size:4.2rem;}}
@media (min-width:1320px){.usrn-hero h2{font-size:4.6rem;}}
.usrn-hero h2 em{ color:var(--moss);font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100; }
.usrn-hero-lead{ font-size:1.05rem;line-height:1.6;color:#3a4a40;max-width:42ch;margin-top:16px; }
@media (min-width:820px){.usrn-hero-lead{font-size:1.12rem;}}
.usrn-hero-actions{ margin-top:26px;display:flex;gap:12px;flex-wrap:wrap; }
.usrn-hero-photo{
position:relative;border-radius:20px;overflow:hidden;width:100%;
background:linear-gradient(150deg, var(--amber), #d98321);
box-shadow:0 30px 70px -34px rgba(15,27,20,.45);
aspect-ratio:5/4;
}
@media (min-width:820px){ .usrn-hero-photo{ aspect-ratio:auto;min-height:440px;height:100%; } }
.usrn-hero-photo img{ width:100%;height:100%;object-fit:cover;object-position:50% 38%; }
/* ---- BAND 2: We handle all of it (moss) ---- */
.handle-all{
position:relative;overflow:hidden;
padding:calc(var(--section-y) * .5) var(--gutter);
background:
radial-gradient(rgba(244,238,223,.05) 1px, transparent 1.5px),
linear-gradient(180deg, #18301f, var(--moss) 45%, #1b3829);
background-size:26px 26px, auto;
color:var(--cream);
}
.handle-all::before{
content:"";position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(720px 480px at 88% 2%, rgba(220,110,74,.18), transparent 64%),
radial-gradient(680px 560px at 2% 104%, rgba(148,174,156,.14), transparent 62%);
}
/* large faint orbit arcs sweeping across the band */
.handle-all::after{
content:"";position:absolute;right:-220px;top:-260px;width:760px;height:760px;
border-radius:50%;pointer-events:none;
border:1px solid rgba(244,238,223,.06);
box-shadow:
0 0 0 60px rgba(244,238,223,.035),
0 0 0 150px rgba(244,238,223,.025);
}
.handle-inner{ max-width:var(--maxw);margin:0 auto;position:relative;z-index:1; }
.handle-head{ text-align:center;max-width:720px;margin:0 auto 44px; }
.handle-head .eyebrow{ color:var(--coral);justify-content:center;white-space:nowrap; }
.handle-head .eyebrow::before{ background:var(--coral); }
.handle-head h2{
font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 70;
font-size:1.7rem;line-height:1.08;letter-spacing:-.02em;
font-weight:400;color:var(--cream);margin-top:14px;
}
@media (min-width:820px){.handle-head h2{font-size:2.6rem;}}
.handle-head h2 em{ color:var(--coral);font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100; }
.handle-grid{ display:grid;grid-template-columns:1fr;gap:14px; }
@media (min-width:560px){.handle-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1100px){.handle-grid{grid-template-columns:repeat(4,1fr);gap:18px;}}
.handle-card{
background:var(--cream);border:1px solid rgba(15,27,20,.05);
border-radius:16px;padding:26px 22px;
display:grid;grid-template-columns:auto 1fr;align-content:start;
row-gap:14px;column-gap:12px;
min-height:210px;position:relative;overflow:hidden;
box-shadow:0 22px 44px -30px rgba(0,0,0,.55);
transition:transform .4s var(--easing), box-shadow .4s;
}
.handle-card:hover{ transform:translateY(-5px);box-shadow:0 30px 56px -28px rgba(0,0,0,.6); }
.handle-card::before{
content:"";position:absolute;top:0;left:0;right:0;height:2px;
background:var(--coral);transform:scaleX(0);transform-origin:left;
transition:transform .55s var(--easing);
}
.handle-card:hover::before{ transform:scaleX(1); }
.handle-ico{
grid-row:1;grid-column:1;justify-self:start;
width:48px;height:48px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(31,61,46,.22);color:var(--moss);
transition:background .3s,color .3s,border-color .3s;
}
.handle-ico svg{ width:22px;height:22px; }
.handle-card:hover .handle-ico{ background:var(--moss);border-color:var(--moss);color:var(--cream); }
.handle-card .num{
grid-row:1;grid-column:2;align-self:center;justify-self:start;
font-family:var(--mono);font-size:1.15rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);
}
.handle-card h3{
grid-column:1 / -1;text-align:center;margin-top:-22px;
font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 80;
font-size:1.3rem;line-height:1.1;letter-spacing:-.015em;font-weight:400;color:var(--ink);
}
.handle-card p{ grid-column:1 / -1;text-align:center;font-size:.9rem;line-height:1.55;color:rgba(15,27,20,.6); }
/* ---- BAND 3: Impact stats strip ---- */
.impact-stats{ padding:calc(var(--section-y) * .55) var(--gutter);background:var(--paper); }
.impact-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px;
}
@media (min-width:560px){.impact-grid{grid-template-columns:repeat(2,1fr);gap:36px 0;}}
@media (min-width:1100px){.impact-grid{grid-template-columns:repeat(4,1fr);gap:0;}}
/* Grey vertical rule between the two columns (2x2 layout, small screens) */
@media (max-width:559.98px){
.impact-stat:nth-child(even){ border-left:1px solid rgba(15,27,20,.13);padding-left:16px; }
}
.impact-stat{
display:grid;grid-template-columns:auto 1fr;align-content:start;
row-gap:10px;column-gap:14px;text-align:left;
}
@media (min-width:560px){ .impact-stat{ padding:6px 30px;border-left:1px solid var(--mist); } .impact-stat:nth-child(2n+1){ border-left:0; } }
@media (min-width:1100px){ .impact-stat{ border-left:1px solid var(--mist);padding:4px 30px; } .impact-stat:nth-child(2n+1){ border-left:1px solid var(--mist); } .impact-stat:first-child{ border-left:0; } }
.impact-ico{
grid-row:1;grid-column:1;align-self:center;justify-self:start;
width:44px;height:44px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
border:1px solid rgba(31,61,46,.2);color:var(--moss);
}
.impact-ico svg{ width:21px;height:21px; }
.impact-num{
grid-row:1;grid-column:2;align-self:center;justify-self:start;
font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 80;
font-size:2.5rem;line-height:.9;letter-spacing:-.03em;color:var(--coral);font-weight:400;
}
@media (min-width:560px){.impact-num{font-size:3rem;}}
@media (min-width:820px){.impact-num{font-size:3.6rem;}}
.impact-label{
grid-column:1 / -1;
font-family:var(--sans);font-weight:600;font-size:.82rem;
letter-spacing:.07em;color:var(--ink);text-transform:uppercase;
}
.impact-stat--text .impact-label{ color:var(--coral);font-size:.95rem; }
.impact-desc{ grid-column:1 / -1;font-size:.88rem;line-height:1.55;color:rgba(15,27,20,.6);max-width:30ch; }
/* ---- BAND 4: Why choose Greendoor (light) ---- */
.why-choose{ position:relative;overflow:hidden;padding:calc(var(--section-y) * .6) var(--gutter);background:var(--cream); }
.why-inner{ max-width:var(--maxw);margin:0 auto;position:relative;z-index:1; }
.why-head{ max-width:none;margin:0 0 40px; }
.why-head .eyebrow{ color:var(--coral); }
.why-head .eyebrow::before{ background:var(--coral); }
.why-head h2{
font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 70;
font-size:1.9rem;line-height:1.04;letter-spacing:-.02em;font-weight:400;color:var(--ink);margin-top:14px;
}
@media (min-width:820px){.why-head h2{font-size:2.9rem;}}
.why-head h2 em{ color:var(--coral);font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 100; }
.why-grid{ display:grid;grid-template-columns:1fr;gap:26px; }
@media (min-width:560px){.why-grid{grid-template-columns:repeat(2,1fr);gap:32px 30px;}}
@media (min-width:1100px){.why-grid{grid-template-columns:repeat(4,1fr);gap:34px;}}
.why-reason{
display:grid;grid-template-columns:auto 1fr;align-content:start;
column-gap:14px;row-gap:13px;
}
.why-ico{
grid-row:1;grid-column:1;align-self:center;justify-self:start;
width:46px;height:46px;border-radius:13px;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(31,61,46,.06);color:var(--moss);
}
.why-ico svg{ width:23px;height:23px; }
.why-reason h3{
grid-row:1;grid-column:2;align-self:center;
font-family:var(--sans);font-weight:600;font-size:1.02rem;
line-height:1.25;letter-spacing:0;color:var(--ink);
}
.why-reason p{ grid-column:1 / -1;font-size:.9rem;line-height:1.58;color:rgba(15,27,20,.6); }
/* ---- BAND 5: Employer band overrides (moss) ---- */
.employers .emp-header,
.employers .emp-cta{ position:relative;z-index:2; }
.emp-map{
position:absolute;top:0;right:0;bottom:0;width:55%;z-index:0;pointer-events:none;opacity:.55;
background-image:radial-gradient(rgba(244,238,223,.2) 1.3px, transparent 1.6px);
background-size:14px 14px;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 62%);
mask-image:linear-gradient(90deg, transparent, #000 62%);
}
@media (max-width:820px){ .emp-map{ display:none; } }
.employers .emp-stat{
flex-direction:row;align-items:flex-start;gap:18px;
border-top:0;padding-top:0;
}
.emp-stat-ico{
flex-shrink:0;width:64px;height:64px;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
background:rgba(244,238,223,.1);border:1px solid rgba(244,238,223,.22);color:var(--cream);
}
.emp-stat-ico svg{ width:30px;height:30px; }
.emp-stat-text{ display:flex;flex-direction:column;gap:5px; }
.employers .emp-stat big{ font-size:3.4rem;line-height:.9; }
@media (min-width:820px){ .employers .emp-stat big{ font-size:4.2rem; } }
.emp-stat-text strong{
font-family:var(--mono);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral);font-weight:500;
}
/* ============================================================
ELIGIBILITY — moved from positions (used on /about)
============================================================ */
============================================================ */
.pos-eligibility{
padding:var(--section-y) var(--gutter);
background:var(--paper);
}
.pos-elig-grid{
max-width:var(--maxw);margin:0 auto;
display:grid;grid-template-columns:1fr;gap:18px;
}
@media (min-width:860px){ .pos-elig-grid{ grid-template-columns:1fr 1fr;gap:24px; } }
.pos-elig-card{
border-radius:22px;padding:34px 28px;
margin:32px 0;
}
.pos-elig-card h2{
font-family:var(--serif);font-variation-settings:"opsz" 144, "SOFT" 70;
font-weight:400;font-size:1.6rem;line-height:1.08;letter-spacing:-.02em;margin-top:10px;
}
@media (min-width:820px){ .pos-elig-card h2{ font-size:1.9rem; } }
.pos-elig-fit{
background:var(--moss);color:var(--cream);
}
.pos-elig-fit .eyebrow{ color:var(--coral); }
.pos-elig-fit .eyebrow::before{ background:var(--coral); }
.pos-elig-need{
background:var(--paper);border:1px solid var(--mist);
}
.pos-checklist{ list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:14px; }
.pos-checklist li{
position:relative;padding-left:34px;
color:rgba(244,238,223,.86);font-size:.98rem;line-height:1.5;
}
.pos-checklist li::before{
content:"";position:absolute;left:0;top:1px;
width:22px;height:22px;border-radius:50%;
background:rgba(220,110,74,.18);
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:center;background-size:14px;
}
.pos-elig-note{
margin-top:20px;font-size:.92rem;line-height:1.55;color:var(--leaf);font-style:italic;
}