/* ============================================================
Chief of CPG — Stylesheet (Photo-Forward design)
------------------------------------------------------------
Organized top to bottom in the order things appear on a page:
1. Brand variables (colors, fonts)
2. Reset & base styles
3. Buttons & shared layout helpers
4. Scroll-reveal animation classes
5. Header / nav
6. Hero
7. Testimonial rotator
8. Build / Scale / Exit triad (icon cards)
9. Photo gallery
10. About (diagonal color shape)
11. Packages (teaser cards + full package blocks + icons)
12. Leadership
13. Footer CTA + footer
14. Responsive (mobile) adjustments
============================================================ */
/* ---- 1. BRAND VARIABLES ---- */
:root {
--magenta:#A53B7B;
--byzantium:#82235C;
--teal:#2CAB8F;
--forest:#014133;
--ink:#241d1a;
--gray:#6b5f5a;
--cream:#FBF6EF;
--card:#fff;
--font-heading:'Abhaya Libre', Georgia, serif;
--font-body:'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
/* ---- 2. RESET & BASE ---- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); color:var(--ink); background:var(--cream); line-height:1.65; font-size:17px; overflow-x:hidden; }
h1,h2,h3 { font-family:var(--font-heading); font-weight:700; line-height:1.15; }
a { text-decoration:none; }
img { max-width:100%; display:block; }
p { color:var(--gray); }
/* ---- 3. BUTTONS & LAYOUT ---- */
.container { max-width:1160px; margin:0 auto; padding:0 32px; position:relative; z-index:2; }
.btn { display:inline-block; padding:17px 36px; font-weight:700; border-radius:40px; font-size:0.95rem; transition:transform .25s ease, box-shadow .25s ease, background .25s ease; }
.btn-primary { background:var(--magenta); color:#fff; box-shadow:0 8px 20px -6px rgba(165,59,123,0.55); }
.btn-primary:hover { background:var(--byzantium); transform:translateY(-2px); box-shadow:0 14px 26px -8px rgba(130,35,92,0.55); }
.btn-ghost { border:2px solid var(--ink); color:var(--ink); margin-left:12px; transition:all .25s ease; }
.btn-ghost:hover { background:var(--ink); color:#fff; transform:translateY(-2px); }
.section-label { text-transform:uppercase; letter-spacing:0.14em; font-size:0.98rem; color:var(--magenta); font-weight:700; }
/* ---- 4. SCROLL REVEAL ----
Add class="reveal" (optionally reveal d1 / d2 / d3 / d4 for a
staggered delay) to any element and it will fade + slide up the
first time it scrolls into view. Powered by assets/script.js. */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:translateY(0); }
.reveal.d1.in { transition-delay:.08s; }
.reveal.d2.in { transition-delay:.16s; }
.reveal.d3.in { transition-delay:.24s; }
.reveal.d4.in { transition-delay:.32s; }
/* ---- 5. HEADER / NAV ---- */
header { padding:26px 0; position:sticky; top:0; z-index:80; background:rgba(251,246,239,0.9); backdrop-filter:blur(6px); }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; max-width:1160px; margin:0 auto; padding:0 32px; }
header img.logo { height:52px; }
/* Temporary text wordmark standing in for the Chief of CPG logo.
Replace .logo-text in the markup with an ![]()
when the
real mark exists — the surrounding styles already handle an image. */
.logo-text { font-family:var(--font-heading); font-weight:700; font-size:1.85rem;
color:var(--magenta); line-height:1; letter-spacing:0.005em; white-space:nowrap; display:inline-block; }
.logo-text span { color:var(--forest); }
.site-footer .logo-text { font-size:1.5rem; color:#fff; margin-bottom:12px; }
.site-footer .logo-text span { color:rgba(255,255,255,0.72); }
@media (max-width:820px){ .logo-text { font-size:1.4rem; } }
@media (max-width:640px){ .logo-text { font-size:1.25rem; } }
.logo-link { display:inline-block; transition:opacity .2s ease; }
.logo-link:hover { opacity:0.78; }
nav ul { list-style:none; display:flex; gap:30px; align-items:center; }
nav a { color:var(--ink); font-size:0.9rem; font-weight:600; transition:color .2s; }
nav a:hover { color:var(--magenta); }
.nav-cta { background:var(--ink); color:#fff !important; padding:11px 22px; border-radius:40px; }
.nav-cta:hover { background:var(--magenta); }
/* ---- 6. HERO (full-bleed retail store banner) ----
The hero is now one large edge-to-edge image with the headline sitting
on top of it. The photo lives in .hero-bg (so it can slowly zoom via
the kenburns animation), and .hero-scrim is a soft gradient over it
that keeps the text readable no matter how bright the photo is.
To swap the photo: replace assets/graphics/hero-retail-wide.jpg. */
.hero { position:relative; min-height:620px; display:flex; align-items:center; overflow:hidden; }
/* The hero copy is pinned to the left edge of the screen rather than
sitting inside the site's centred 1160px column — otherwise on a wide
monitor the centring pushes it toward the middle of the page. */
.hero > .container { max-width:100%; margin:0; padding-left:clamp(32px, 5vw, 96px); padding-right:32px; }
.hero-bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
/* pushed right so the shoppers stay out of the headline's column */
.hero-bg img { width:100%; height:100%; object-fit:cover; object-position:82% 50%; transform:scale(1.06); animation:kenburns 20s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform:scale(1.06) translate(0,0);} to { transform:scale(1.14) translate(-1.5%,-1%);} }
/* Solid cream on the left so the headline never sits on the photo,
then a clean fade into the image. */
.hero-scrim { position:absolute; inset:0; z-index:1;
background:linear-gradient(90deg, var(--cream) 0%, var(--cream) 34%, rgba(251,246,239,0.82) 46%, rgba(251,246,239,0.25) 60%, rgba(251,246,239,0) 72%); }
.hero .container { position:relative; z-index:2; }
.hero-copy { max-width:500px; }
/* The real brand letterform from the brand pack, used as a large, very
faint watermark. Swap the colour by pointing src at f-teal.png or
f-forest.png instead. To make it more or less visible, change opacity. */
.ghost-f { position:absolute; top:-160px; left:-150px; width:660px; height:auto; opacity:0.065; z-index:1; user-select:none; pointer-events:none; will-change:transform; }
.page-hero .ghost-f { width:330px; top:-70px; left:-90px; }
.hero h1 { font-size:3.6rem; margin-bottom:38px; opacity:0; animation:fadeUp .8s ease forwards .1s; }
.hero h1 .accent { color:var(--magenta); }
.hero p.lede { font-size:1.15rem; color:var(--gray); margin-bottom:36px; max-width:470px; opacity:0; animation:fadeUp .8s ease forwards .3s; }
.hero .cta-row { opacity:0; animation:fadeUp .8s ease forwards .5s; }
@keyframes fadeUp { from { opacity:0; transform:translateY(20px);} to { opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
/* Simple page banner (used on interior pages like /packages/) */
/* Kept deliberately compact so the cards below land inside the first
screen when someone navigates to the page. */
.page-hero { padding:40px 0 26px; text-align:center; position:relative; overflow:hidden; }
.page-hero h1 { font-size:2.7rem; margin:10px 0 12px; }
.page-hero p { max-width:600px; margin:0 auto; font-size:1.02rem; }
/* ---- 7. TESTIMONIAL ROTATOR ---- */
.proof-strip { background:var(--forest); padding:56px 0; position:relative; overflow:hidden; }
.proof-strip .slides { position:relative; min-height:110px; }
.proof-strip .slide { position:absolute; inset:0; opacity:0; transition:opacity .8s ease; text-align:center; max-width:680px; margin:0 auto; }
.proof-strip .slide.active { opacity:1; position:relative; }
.proof-strip blockquote { font-family:var(--font-heading); font-size:1.3rem; font-style:italic; color:#fff; }
.proof-strip cite { display:block; font-family:var(--font-body); font-style:normal; font-size:0.82rem; color:var(--teal); margin-top:14px; font-weight:700; letter-spacing:.03em; }
.dots { display:flex; gap:8px; justify-content:center; margin-top:28px; }
.dots span { width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,0.3); cursor:pointer; transition:background .3s; }
.dots span.active { background:var(--teal); }
/* ---- 8. TRIAD (icon cards) ---- */
.triad { padding:110px 0 40px; text-align:center; }
/* "What I Do" now sits inside the About section — keep it above the
decorative diagonal shape and tighten the spacing between the two. */
.about .triad { position:relative; z-index:1; padding:80px 0 0; }
.triad h2 { font-size:2.9rem; margin:18px 0 56px; }
.triad-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; text-align:left; }
/* Stage cards are now links, so they need block display + inherited colour. */
.triad-item { display:block; color:inherit; background:var(--card); border-radius:14px; padding:40px 30px 34px; transition:transform .35s ease, box-shadow .35s ease; }
.triad-item h3 { transition:color .25s ease; }
.triad-item:hover h3 { color:var(--magenta); }
.stage-link { display:block; margin-top:18px; font-size:0.9rem; font-weight:700; color:var(--magenta); opacity:0.75; transition:opacity .3s ease, transform .3s ease; }
.triad-item:hover .stage-link { opacity:1; transform:translateX(3px); }
.triad-note { margin-top:34px; font-size:1rem; }
.triad-note a { color:var(--magenta); font-weight:700; border-bottom:1px solid rgba(165,59,123,0.35); }
.triad-note a:hover { border-bottom-color:var(--magenta); }
.triad-item:hover { transform:translateY(-8px); box-shadow:0 24px 40px -18px rgba(36,29,26,0.25); }
.icon-badge { width:76px; height:76px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:transform .35s ease; }
.triad-item:nth-child(1) .icon-badge { background:linear-gradient(150deg, var(--teal), #1e8a6f); }
.triad-item:nth-child(2) .icon-badge { background:linear-gradient(150deg, var(--magenta), var(--byzantium)); }
.triad-item:nth-child(3) .icon-badge { background:linear-gradient(150deg, var(--forest), #012e22); }
.triad-item:hover .icon-badge { transform:scale(1.1) rotate(-4deg); }
.icon-badge img.icon { width:38px; height:38px; margin:0; filter:brightness(0) invert(1); }
.triad-item h3 { font-size:1.4rem; margin-bottom:12px; color:var(--magenta); }
.triad-item p { font-size:0.98rem; }
/* ---- 8b. RETAILER BAND (endless-loop logo strip) ----
Its own full-width section on the brand's sage-to-cream gradient.
The names (or logos) scroll on an endless loop and pause on hover.
To add a retailer: add one more .retailer-item in index.html — the
script duplicates the row automatically so the loop stays seamless.
To use a real logo instead of text, drop the file into
assets/retailers/ and replace the text with
. */
/* Category statement band, between the hero and the retailer logos. Slim on
purpose — it is a single claim, not a section. */
.shelf-band { background:var(--forest); padding:34px 0; text-align:center; }
.shelf-band h2 { font-size:2.4rem; color:#fff; margin:0; }
@media (max-width:640px){
.shelf-band { padding:26px 0; }
.shelf-band h2 { font-size:1.55rem; }
}
.retailer-band { position:relative; padding:54px 0 58px; overflow:hidden;
background:linear-gradient(100deg, #a9bcae 0%, #c6d2c2 28%, #e4e4db 60%, #f0efe7 100%); }
.band-label { text-align:center; text-transform:uppercase; letter-spacing:0.16em; font-size:1rem; font-weight:700; color:var(--forest); opacity:0.78; margin-bottom:34px; }
/* Credential line that sits with the retailer logos. */
.band-credential { text-align:center; margin-top:32px; font-size:1.1rem; color:var(--forest); opacity:0.85; }
.band-credential strong { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--forest); }
.retailer-strip { position:relative; z-index:2; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.retailer-track { display:flex; align-items:center; gap:70px; width:max-content; animation:filmscroll 26s linear infinite; }
/* No hover-pause on these two bands. There is nothing to click, so stopping
the motion under the cursor reads as a glitch rather than a feature.
The photo filmstrip keeps its pause, because you click those to enlarge. */
.retailer-item { flex:0 0 auto; font-family:var(--font-heading); font-size:1.9rem; font-weight:700; color:var(--forest); opacity:0.82; white-space:nowrap; }
.retailer-item img { height:54px; width:auto; display:block; object-fit:contain; }
/* keep tall/short marks optically balanced against the wordmarks */
/* Squarer logos need a little more height to read at the same visual weight
as the wide wordmarks next to them. */
.retailer-item img[alt="Target"], .retailer-item img[alt="buybuy BABY"], .retailer-item img[alt="Amazon"],
.retailer-item img[alt="Walmart"], .retailer-item img[alt="Rite Aid"],
.retailer-item img[alt="AAFES Army & Air Force Exchange Service"] { height:64px; }
/* ---- 8c. STATS MARQUEE (scrolling credential band) ----
Same seamless-loop mechanism as the retailer strip: script.js clones the
row once, CSS slides it -50%. Add or remove .stat-item blocks freely —
the loop adapts. Pauses on hover so anything can be read. */
.stats-band { position:relative; padding:52px 0; background:url('graphics/stat-bg-magenta.jpg') center / cover no-repeat; }
.stats-band::before { content:''; position:absolute; inset:0; background:linear-gradient(160deg, rgba(1,65,51,0.88), rgba(165,59,123,0.88)); }
/* Forest at the top, magenta at the bottom: the stats band now sits directly
above the forest testimonial band, so magenta at the seam keeps the two
from merging into one dark mass. */
._stats-seam-note { display:none; }
.stats-strip { position:relative; z-index:2; overflow:hidden;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.stats-track { display:flex; align-items:center; gap:64px; width:max-content; animation:filmscroll 45s linear infinite; }
.stat-item { flex:0 0 auto; text-align:center; padding:0 6px; }
.stat-item strong { display:block; font-family:var(--font-heading); font-weight:700; font-size:2.5rem; color:#fff; line-height:1.1; white-space:nowrap; }
.stat-item span { display:block; margin-top:6px; font-size:0.98rem; color:rgba(255,255,255,0.85); white-space:nowrap; }
/* ---- 9. GALLERY (auto-scrolling filmstrip) ----
To add a photo: drop the file in assets/photos/, then copy one
.film-item block in index.html inside .filmstrip-track and point it
at the new file. assets/script.js automatically duplicates the whole
track once at load time so the scroll loops seamlessly — you never
need to duplicate items by hand, just add one copy.
If the scroll feels too fast/slow after adding more photos, adjust
the "30s" duration in the @keyframes filmscroll rule below — more
photos generally wants a longer duration. */
.gallery { padding:70px 0 0; }
/* Gallery on the About page: sits between the bio and the CTA, so it runs
tighter than a standalone homepage section did. */
.gallery-tight { padding-top:56px; background:#fff; }
.gallery-tight .gallery-head { margin-bottom:34px; }
.gallery-tight .filmstrip { padding-bottom:60px; }
.gallery-head { text-align:center; max-width:600px; margin:0 auto 50px; padding:0 32px; }
.gallery-head h2 { font-size:2.9rem; margin-top:14px; }
.filmstrip { overflow:hidden; padding-bottom:100px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.filmstrip-track { display:flex; gap:20px; width:max-content; animation:filmscroll 30s linear infinite; }
.filmstrip:hover .filmstrip-track { animation-play-state:paused; }
@keyframes filmscroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.film-item { position:relative; flex:0 0 auto; width:300px; height:360px; border-radius:16px; overflow:hidden; box-shadow:0 16px 34px -18px rgba(36,29,26,0.3); }
.film-item img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; cursor:zoom-in; }
.film-item:hover img { transform:scale(1.08); }
.film-item .cap { position:absolute; left:0; right:0; bottom:0; padding:18px 20px; background:linear-gradient(0deg, rgba(0,4,17,0.65), transparent); color:#fff; font-size:0.85rem; font-weight:600; opacity:0; transition:opacity .35s ease; pointer-events:none; }
.film-item:hover .cap { opacity:1; }
/* ---- Lightbox (click a filmstrip photo to view it larger) ---- */
.lightbox-overlay { position:fixed; inset:0; background:rgba(0,4,17,0.92); display:flex; align-items:center; justify-content:center; z-index:1000; opacity:0; pointer-events:none; transition:opacity .3s ease; padding:40px; }
.lightbox-overlay.active { opacity:1; pointer-events:auto; }
.lightbox-overlay img { max-width:94vw; max-height:90vh; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,0.5); cursor:default; }
.lightbox-close { position:absolute; top:24px; right:32px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.1); color:#fff; font-size:1.6rem; line-height:1; border:none; cursor:pointer; transition:background .2s ease; }
.lightbox-close:hover { background:rgba(255,255,255,0.2); }
/* ---- 10. ABOUT (diagonal shape) ---- */
.about { padding:64px 0; position:relative; }
/* The "f" split background — the brand device where the letterform itself
is the boundary between the two colour fields. It's a real brand asset
(Brand Graphic Elements > Background), recoloured into the pale palette.
To use the bold magenta version instead, change the filename below to
split-f-magenta.jpg and set .about h2, .about p to a light colour. */
.about { background:var(--cream) url('graphics/f/split-f-pale.jpg') right center / auto 100% no-repeat; }
/* The About page leads with this section instead of a separate banner,
so it carries the h1. .about-lead adds the extra top room a page
opener needs without inflating the homepage version. */
.about-inner { max-width:620px; position:relative; z-index:1; }
.about-lead { padding-top:78px; }
.about-lead h1 { font-size:3rem; margin:12px 0 10px; }
.about-lede { font-family:var(--font-heading); font-size:1.45rem; font-style:italic; color:var(--magenta); margin-bottom:24px !important; }
.about h2 { font-size:2.9rem; margin:18px 0 24px; }
/* text-wrap:balance removed here on purpose: the heading now carries an
explicit
, and balancing on top of that made the homepage break in a
different place than the About page. */
.about p { font-size:1.08rem; margin-bottom:16px; max-width:560px; }
/* Small inline stat row used inside the About text (founding year, retail reach, exit year) */
/* wraps to two rows once there are more than three stats */
.about-stats { display:flex; flex-wrap:wrap; gap:28px 40px; margin-top:28px; padding-top:28px; border-top:1px solid #e5ddd3; }
.about-stats div strong { display:block; font-family:var(--font-heading); font-size:2rem; color:var(--magenta); }
.about-stats div span { font-size:0.95rem; color:var(--gray); text-transform:uppercase; letter-spacing:0.05em; }
/* ---- 11. PACKAGES ---- */
.packages { padding:64px 0; background:#fff; }
.packages-head { text-align:center; max-width:600px; margin:0 auto 56px; }
.packages-head h2 { font-size:2.9rem; margin-top:14px; }
.pkg-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.pkg-card { display:block; color:inherit; background:var(--cream); border-radius:14px; padding:34px 26px; text-align:center; transition:transform .3s ease, box-shadow .3s ease; }
.pkg-card h3 { color:var(--ink); transition:color .25s ease; }
.pkg-card:hover h3 { color:var(--magenta); }
.pkg-card .pkg-more { display:block; margin-top:14px; font-size:0.8rem; font-weight:700; letter-spacing:0.04em; color:var(--magenta); opacity:0; transform:translateY(-4px); transition:opacity .3s ease, transform .3s ease; }
.pkg-card:hover .pkg-more { opacity:1; transform:translateY(0); }
.pkg-card:hover { transform:translateY(-6px); box-shadow:0 20px 34px -18px rgba(36,29,26,0.2); }
.pkg-card .icon-badge { width:64px; height:64px; margin:0 auto 18px; }
.pkg-card .icon-badge img.icon { width:32px; height:32px; }
.pkg-card:nth-child(1) .icon-badge { background:linear-gradient(150deg, var(--magenta), var(--byzantium)); }
.pkg-card:nth-child(2) .icon-badge { background:linear-gradient(150deg, var(--teal), #1e8a6f); }
.pkg-card:nth-child(3) .icon-badge { background:linear-gradient(150deg, var(--byzantium), var(--forest)); }
.pkg-card:nth-child(4) .icon-badge { background:linear-gradient(150deg, var(--forest), #012e22); }
.pkg-card h3 { font-size:1.1rem; margin-bottom:10px; }
.pkg-card p { font-size:0.92rem; }
/* Full package detail blocks (packages page) */
.package-full { background:var(--cream); border-radius:16px; padding:44px; margin-bottom:28px; display:grid; grid-template-columns:76px 1fr; gap:28px; }
.package-full .icon-badge { width:76px; height:76px; }
.package-full .icon-badge img.icon { width:38px; height:38px; }
.package-full:nth-of-type(1) .icon-badge { background:linear-gradient(150deg, var(--magenta), var(--byzantium)); }
.package-full:nth-of-type(2) .icon-badge { background:linear-gradient(150deg, var(--teal), #1e8a6f); }
.package-full:nth-of-type(3) .icon-badge { background:linear-gradient(150deg, var(--byzantium), var(--forest)); }
.package-full:nth-of-type(4) .icon-badge { background:linear-gradient(150deg, var(--forest), #012e22); }
.package-full .tag { color:var(--magenta); font-weight:700; text-transform:uppercase; font-size:0.78rem; letter-spacing:0.08em; margin-bottom:6px; }
.package-full h2 { font-size:1.7rem; margin-bottom:10px; }
.package-full ul { list-style:disc; padding-left:20px; margin:14px 0 20px; }
.package-full li { margin-bottom:6px; font-size:0.96rem; }
.testimonial-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.testimonial { background:var(--card); border-radius:14px; padding:30px; border-top:4px solid var(--magenta); }
.testimonial p { font-style:italic; color:var(--ink); opacity:0.85; }
.testimonial cite { font-style:normal; font-weight:700; color:var(--magenta); display:block; margin-top:14px; font-size:0.85rem; }
/* ---- 11c. JUMP NAV (top of the services page) ----
Four icon tiles that scroll down to their section on the same page. */
.jump-nav { padding:4px 0 44px; }
.jump-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.jump-item { display:block; color:var(--ink); background:var(--cream); border:1px solid #ece4da; border-radius:14px; padding:38px 22px 34px; text-align:center; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.jump-item:hover { transform:translateY(-6px); box-shadow:0 20px 34px -18px rgba(36,29,26,0.2); border-color:transparent; }
.jump-item .icon-badge { width:66px; height:66px; margin:0 auto 18px; }
.jump-item .icon-badge img.icon { width:38px; height:38px; }
.jump-item:nth-child(1) .icon-badge { background:linear-gradient(150deg, var(--magenta), var(--byzantium)); }
.jump-item:nth-child(2) .icon-badge { background:linear-gradient(150deg, var(--teal), #1e8a6f); }
.jump-item:nth-child(3) .icon-badge { background:linear-gradient(150deg, var(--byzantium), var(--forest)); }
.jump-item:nth-child(4) .icon-badge { background:linear-gradient(150deg, var(--forest), #012e22); }
.jump-item h3 { font-size:1.25rem; margin-bottom:6px; color:var(--ink); transition:color .25s ease; }
.jump-item:hover h3 { color:var(--magenta); }
.jump-item p { font-size:0.95rem; margin:0; line-height:1.45; }
/* ---- 11d. ENGAGEMENT MODELS (services page) ----
Three cards describing how the work gets delivered. Move the .featured
class to a different card to change which engagement gets top billing. */
.engagements { padding:4px 0 70px; background:#fff; }
.engagement-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:start; }
.engagement { position:relative; background:var(--cream); border:1px solid #ece4da; border-radius:16px; padding:30px 26px 26px; transition:transform .3s ease, box-shadow .3s ease; }
.engagement:hover { transform:translateY(-5px); box-shadow:0 22px 40px -20px rgba(36,29,26,0.22); }
.engagement.featured { background:#fff; border:2px solid var(--magenta); box-shadow:0 20px 44px -24px rgba(165,59,123,0.45); }
.eng-flag { position:absolute; top:-13px; left:30px; background:var(--magenta); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:0.09em; text-transform:uppercase; padding:6px 14px; border-radius:20px; }
.engagement .icon-badge { width:54px; height:54px; margin-bottom:14px; }
.engagement .icon-badge img.icon { width:32px; height:32px; }
.engagement:nth-child(1) .icon-badge { background:linear-gradient(150deg, var(--magenta), var(--byzantium)); }
.engagement:nth-child(2) .icon-badge { background:linear-gradient(150deg, var(--forest), #012e22); }
.engagement:nth-child(3) .icon-badge { background:linear-gradient(150deg, var(--teal), #1e8a6f); }
.engagement h3 { font-size:1.45rem; margin-bottom:4px; }
.engagement .eng-line { font-family:var(--font-heading); font-size:1rem; font-style:italic; color:var(--magenta); margin-bottom:10px; }
.engagement p { font-size:0.95rem; margin-bottom:10px; line-height:1.55; }
.engagement .eng-eg { margin-top:12px; margin-bottom:6px; color:var(--ink); font-size:0.9rem; }
.engagement ul { list-style:none; padding:0; margin:0; }
.engagement li { position:relative; padding-left:20px; margin-bottom:5px; font-size:0.91rem; line-height:1.5; color:var(--gray); }
.engagement li::before { content:''; position:absolute; left:0; top:0.62em; width:7px; height:7px; border-radius:50%; background:var(--teal); }
/* Phase blocks reuse .package-full but need roomier lists */
.package-full.phase ul { list-style:none; padding-left:0; margin:18px 0 0; }
.package-full.phase li { position:relative; padding-left:26px; margin-bottom:11px; font-size:1rem; }
.package-full.phase li::before { content:''; position:absolute; left:2px; top:0.62em; width:9px; height:9px; border-radius:50%; background:var(--teal); }
.package-full.phase .tag { color:var(--gray); }
/* ---- 11b. FAQ (accordion) ----
Uses native / so it works with no JavaScript and stays
readable to search engines and AI crawlers even when collapsed.
To add a question: copy one .faq-item block in index.html AND add a
matching entry to the FAQPage schema in the so the two agree. */
.faq { padding:70px 0; background:var(--cream); scroll-margin-top:90px; }
/* scroll-margin keeps the sticky header clear when someone arrives from
the FAQ link in the navigation or the footer. */
.faq-list { max-width:820px; margin:0 auto; }
.faq-item { border-bottom:1px solid #e5ddd3; padding:4px 0; }
.faq-item summary { cursor:pointer; list-style:none; padding:22px 44px 22px 0; font-family:var(--font-heading); font-size:1.35rem; font-weight:700; color:var(--ink); position:relative; transition:color .2s ease; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary:hover { color:var(--magenta); }
.faq-item summary::after { content:'+'; position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:1.7rem; font-weight:400; color:var(--magenta); transition:transform .25s ease; line-height:1; }
.faq-item[open] summary::after { transform:translateY(-50%) rotate(45deg); }
.faq-item p { padding:0 40px 26px 0; font-size:1.05rem; margin:0; }
/* ---- 12. LEADERSHIP ---- */
/* scroll-margin keeps the sticky header from covering the heading when
someone lands here from an anchor link like /about/#sari */
.leadership { background:var(--cream); padding:70px 0; scroll-margin-top:100px; }
.leader-grid { display:grid; grid-template-columns:260px 1fr; gap:60px; align-items:center; }
.leader-grid .frame { border-radius:16px; overflow:hidden; box-shadow:0 20px 40px -18px rgba(36,29,26,0.3); }
.leadership .role { color:var(--magenta); text-transform:uppercase; letter-spacing:0.1em; font-size:0.8rem; font-weight:700; margin-bottom:8px; }
.leadership h2 { font-size:2.1rem; margin-bottom:16px; }
.leadership p { margin-bottom:14px; }
/* ---- 12b. BLOG ---- */
.blog-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:40px; }
.blog-card { background:var(--card); border-radius:16px; overflow:hidden; box-shadow:0 20px 40px -24px rgba(36,29,26,0.25); transition:transform .35s ease, box-shadow .35s ease; }
.blog-card:hover { transform:translateY(-6px); box-shadow:0 26px 50px -22px rgba(36,29,26,0.32); }
.blog-card a.blog-card-link { display:block; color:inherit; }
.blog-card .blog-card-body { padding:32px 32px 34px; }
.blog-card .blog-meta { color:var(--gray); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; margin-bottom:12px; }
.blog-card h2 { font-size:1.5rem; margin-bottom:12px; }
.blog-card p.excerpt { color:var(--gray); margin-bottom:0; }
.blog-card .read-more { display:inline-block; margin-top:16px; color:var(--magenta); font-weight:700; }
.post-hero { padding:70px 0 20px; }
.post-hero .blog-meta { color:var(--gray); font-size:0.82rem; text-transform:uppercase; letter-spacing:0.08em; font-weight:700; margin-bottom:14px; }
.post-hero h1 { font-size:2.6rem; max-width:760px; }
.post-body { padding:20px 0 90px; }
.post-body .container { max-width:720px; }
.post-body p { font-size:1.08rem; margin-bottom:20px; }
.post-body h2 { font-size:1.5rem; margin:36px 0 16px; }
.post-body blockquote { border-left:4px solid var(--teal); padding:4px 0 4px 24px; margin:28px 0; font-family:var(--font-heading); font-size:1.2rem; font-style:italic; color:var(--ink); }
.post-nav { margin-top:50px; padding-top:30px; border-top:1px solid #e5ddd3; }
.post-nav a { color:var(--magenta); font-weight:700; }
/* ---- 13. FOOTER ---- */
.footer-cta { text-align:center; padding:70px 0; position:relative; overflow:hidden; }
.footer-cta h2 { font-size:2.9rem; margin-bottom:30px; }
footer.site-footer { background:var(--ink); color:rgba(255,255,255,0.7); padding:50px 0 30px; }
.footer-grid { display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:30px; }
.footer-grid img.logo { height:26px; margin-bottom:12px; filter:brightness(0) invert(1); }
.footer-grid p { font-size: 0.9rem; }
.footer-links { display:flex; gap:44px; }
.footer-links h4 { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.1em; color:#fff; margin-bottom:12px; }
.footer-links li { list-style:none; margin-bottom:8px; font-size:0.88rem; }
.footer-links a { color:rgba(255,255,255,0.6); transition:color .2s; }
.footer-links a:hover { color:var(--teal); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.15); padding-top:20px; font-size:0.8rem; }
/* Newsletter + contact forms */
.newsletter-form { display:flex; gap:12px; max-width:480px; margin:0 auto; flex-wrap:wrap; }
.contact-form { display:flex; flex-direction:column; gap:16px; max-width:560px; margin:0 auto; }
input, textarea { font-family:var(--font-body); font-size:1rem; padding:13px 16px; border:1px solid #e5ddd3; border-radius:8px; flex:1; min-width:200px; background:#fff; }
textarea { width:100%; min-height:120px; resize:vertical; }
/* ---- 14. RESPONSIVE ---- */
@media (max-width:900px) {
.about { background-image:none; }
.ghost-f { width:340px; left:-90px; }
.page-hero .ghost-f { width:280px; }
.hero { min-height:0; padding:70px 0 80px; }
.hero h1 { font-size:2.4rem; }
.hero-scrim { background:linear-gradient(180deg, rgba(251,246,239,0.96) 0%, rgba(251,246,239,0.9) 55%, rgba(251,246,239,0.78) 100%); }
.hero-copy { max-width:100%; }
.hero > .container { padding-left:32px; }
header img.logo { height:38px; }
.triad-grid { grid-template-columns:1fr; }
.film-item { width:220px; height:280px; }
.stat-item strong { font-size:1.9rem; }
.stat-item span { font-size:0.9rem; }
.stats-track { gap:40px; }
.retailer-item { font-size:1.15rem; }
/* [alt] matches the specificity of the alt-specific sizing rules above,
so this actually wins on small screens. Plain `.retailer-item img`
silently lost to them and left six logos oversized. */
.retailer-item img[alt] { height:34px; }
.retailer-track { gap:40px; }
.pkg-grid { grid-template-columns:1fr 1fr; }
.jump-grid { grid-template-columns:1fr 1fr; }
.engagement-grid { grid-template-columns:1fr; }
.package-full { grid-template-columns:1fr; }
.testimonial-grid { grid-template-columns:1fr; }
.leader-grid { grid-template-columns:1fr; text-align:center; }
.blog-grid { grid-template-columns:1fr; }
.faq-item summary { font-size:1.1rem; }
.post-hero h1 { font-size:2rem; }
.about h2 { font-size:2rem; }
.footer-grid { flex-direction:column; }
nav ul { gap:16px; flex-wrap:wrap; }
}
/* ================= MOBILE ==================================================
The hamburger button is created by assets/script.js, so adding a page
later needs no extra markup — it picks up this styling automatically. */
.nav-toggle { display:none; background:none; border:0; padding:10px; margin:0; cursor:pointer;
width:46px; height:46px; align-items:center; justify-content:center; }
.nav-toggle span { display:block; position:relative; width:24px; height:2px; background:var(--ink); transition:background .2s ease; }
.nav-toggle span::before, .nav-toggle span::after { content:''; position:absolute; left:0; width:24px; height:2px;
background:var(--ink); transition:transform .25s ease, top .2s ease; }
.nav-toggle span::before { top:-7px; }
.nav-toggle span::after { top:7px; }
header.nav-open .nav-toggle span { background:transparent; }
header.nav-open .nav-toggle span::before { top:0; transform:rotate(45deg); }
header.nav-open .nav-toggle span::after { top:0; transform:rotate(-45deg); }
/* Nav collapses into a panel under the header on tablets and phones. */
@media (max-width:820px){
.nav-toggle { display:flex; }
header { padding:14px 0; }
header img.logo { height:36px; }
.nav-wrap { padding:0 20px; }
header nav { position:absolute; top:100%; left:0; right:0; background:var(--cream);
border-top:1px solid #e8ded1; box-shadow:0 18px 30px -22px rgba(36,29,26,0.45);
max-height:0; overflow:hidden; transition:max-height .32s ease; }
header.nav-open nav { max-height:460px; }
header nav ul { flex-direction:column; align-items:stretch; gap:0; padding:4px 0 14px; }
header nav li { border-top:1px solid #ece4da; }
header nav li:first-child { border-top:none; }
header nav a { display:block; padding:16px 22px; font-size:1rem; }
header nav a.nav-cta { margin:14px 22px 2px; text-align:center; padding:15px 22px; }
}
/* Phones. Headline sizes, side padding and stacked buttons. */
@media (max-width:640px){
.container { padding:0 22px; }
.hero { padding:56px 0 64px; }
.hero h1 { font-size:2.05rem; }
.hero > .container { padding-left:22px; }
.cta-row { display:flex; flex-direction:column; align-items:stretch; gap:12px; max-width:330px; }
.btn { padding:15px 24px; font-size:0.9rem; text-align:center; }
.btn-ghost { margin-left:0; }
.page-hero { padding:28px 0 20px; }
.page-hero h1 { font-size:1.95rem; }
.about { padding:48px 0; }
.about-lead { padding-top:44px; }
.about-lead h1 { font-size:2.05rem; }
.about h2 { font-size:1.85rem; }
.about-lede { font-size:1.15rem; }
.section-label { font-size:0.82rem; letter-spacing:0.1em; }
.gallery-head h2 { font-size:1.85rem; }
.footer-cta h2, .faq h2, .leadership h2 { font-size:1.8rem; }
.footer-cta { padding:52px 0; }
.faq { padding:52px 0; }
.faq-item summary { font-size:1rem; padding-right:36px; }
.faq-item p { padding-right:8px; font-size:0.98rem; }
.jump-grid, .pkg-grid { grid-template-columns:1fr; }
.jump-item { padding:26px 20px 24px; }
.film-item { width:190px; height:240px; }
.film-item .cap { opacity:1; font-size:0.78rem; padding:14px; }
.stat-item strong { font-size:1.5rem; }
.stat-item span { font-size:0.78rem; }
.stats-band { padding:34px 0; }
.stats-track { gap:30px; }
/* Retailer band: the label and logos were sized for a desktop row. */
.retailer-band { padding:32px 0 36px; }
.band-label { font-size:0.78rem; letter-spacing:0.12em; margin-bottom:20px; }
.retailer-item img[alt] { height:26px; }
.retailer-track { gap:28px; }
/* Hero: a 2.3:1 photo cropped into a tall phone screen was landing on
Sari's shoulder. Pull the focal point up and across to her face. */
.hero { padding:44px 0 52px; }
.hero-bg img { object-position:64% 24%; }
.cta-row { max-width:270px; }
.btn { padding:14px 18px; font-size:0.85rem; }
.newsletter-form { flex-direction:column; }
.newsletter-form .btn { width:100%; }
.leader-grid { gap:28px; }
.leader-grid .frame { max-width:230px; margin:0 auto; }
}
/* Honeypot: invisible to people, tempting to bots. A filled value means spam. */
.hp { position:absolute; left:-9999px; visibility:hidden; }