@font-face { font-family: Florista; src: url("assets/TheFloristaScript.ttf") format("truetype"); font-display: swap; }
:root { --ink:#4e4e4e; --rose:#d1b2ae; --pale:#fbf8f5; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:"Nunito Sans",sans-serif; }
.hero { --parallax:0px; --content-shift:0px; min-height:123vh; padding:32px clamp(24px,6vw,96px); position:relative; isolation:isolate; overflow:hidden; }
.hero::after { content:""; position:absolute; inset:-7%; z-index:-2; background:url("assets/sandy-grigsby-creative-director.jpg") 30% center / cover no-repeat; transform:translateY(var(--parallax)) scale(1.06); will-change:transform; }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background:transparent; }
nav { position:fixed; z-index:1000; inset:0 0 auto; width:100%; max-width:none; padding:32px clamp(24px,6vw,96px); display:flex; justify-content:space-between; align-items:center; gap:20px; letter-spacing:.11em; text-transform:uppercase; font-size:11px; font-weight:700; transition:background .22s,box-shadow .22s; }
a { color:inherit; text-decoration:none; } .wordmark { color:var(--ink); font-size:14px; } .nav-links { display:flex; gap:24px; } .nav-links a:hover { opacity:.65; }
.is-scrolled { background:#a3cbd4; box-shadow:0 2px 12px rgba(78,78,78,.12); }
.hero-content { max-width:1280px; height:calc(100vh - 96px); margin:auto; display:flex; align-items:center; justify-content:flex-end; position:sticky; top:0; transform:translateY(var(--content-shift)); will-change:transform; }
.intro { width:min(490px,46vw); padding:28px 0; }
.eyebrow { color:var(--ink); letter-spacing:.16em; font-size:11px; font-weight:700; } h1 { font:300 clamp(49px,6vw,82px)/.95 "Cormorant Garamond",serif; margin:18px 0; color:var(--ink); }
.lead { max-width:470px; font-size:17px; line-height:1.8; } .cta { display:inline-flex; gap:14px; align-items:center; margin-top:26px; padding:15px 19px; background:var(--ink); color:white; letter-spacing:.08em; text-transform:uppercase; font-size:11px; font-weight:700; transition:transform .2s,opacity .2s; } .cta:hover { opacity:.83; transform:translateY(-2px); }
.socials { display:flex; align-items:center; gap:16px; margin-top:31px; } .socials a { color:var(--ink); font-size:19px; transition:opacity .2s; } .socials a:hover { opacity:.55; }
.confidence-story { padding:0 0 92px; background:#fff; color:var(--ink); overflow:hidden; } .story-heading { max-width:1150px; margin:0 auto 38px; padding:20px 24px 0; text-align:center; } .story-heading .eyebrow { display:inline-block; padding-bottom:14px; border:0; font-size:13px; } .story-content { max-width:1280px; height:920px; margin:auto; position:relative; } .story-images { position:static; } .story-images img { display:block; object-fit:cover; } .story-image-back { position:absolute; width:50%; height:896px; left:3%; top:0; } .story-image-front { position:absolute; width:43%; height:660px; right:3%; top:258px; } .story-copy { position:absolute; z-index:1; top:26px; left:23%; width:43%; padding:50px 60px; background:#fff; } .script { margin:0 0 -9px; padding-left:50px; font:400 61px/1 Florista,cursive; color:var(--ink); } .story-copy h2 { margin:0 0 21px; font:500 clamp(42px,4.6vw,61px)/.95 "Cormorant Garamond",serif; } .story-copy p:not(.script) { font-size:15px; line-height:1.78; } .story-link { display:inline-flex; align-items:center; gap:12px; margin-top:15px; padding:13px 19px; background:var(--ink); color:#fff; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
footer { color:var(--ink); background:#fff; } .footer-navigation { max-width:900px; margin:auto; padding:58px clamp(24px,6vw,96px) 42px; display:grid; grid-template-columns:repeat(3,1fr); gap:55px; } .footer-column { display:flex; flex-direction:column; align-items:flex-start; gap:10px; font-size:13px; } .footer-column h2 { margin:0 0 6px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .footer-column a:hover { opacity:.58; } .footer-bottom { position:relative; margin-top:36px; padding:56px clamp(24px,6vw,96px) 30px; background:#f3e8e4; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; font-size:11px; } .footer-bottom::before { content:""; position:absolute; inset:-36px 0 auto; height:37px; background:#f3e8e4; clip-path:polygon(0 100%,100% 0,100% 100%); } .footer-identity { display:flex; flex-direction:column; align-items:flex-start; gap:7px; } .footer-logo { letter-spacing:.12em; text-transform:uppercase; font-size:14px; font-weight:700; } .footer-socials { display:flex; gap:15px; font-size:16px; } .footer-socials .x-icon { font-family:Arial,sans-serif; font-size:14px; line-height:1; } .footer-socials a:hover { opacity:.6; } .footer-tagline { justify-self:end; letter-spacing:.08em; font-weight:700; }
@media (max-width:700px) { .hero { padding-top:24px; min-height:115vh; } .hero::after { background-position:33% center; } nav { align-items:flex-start; } .nav-links { gap:12px; flex-wrap:wrap; justify-content:flex-end; } .hero-content { height:calc(100vh - 88px); align-items:flex-end; } .intro { width:100%; padding-bottom:20px; } .confidence-story { padding-bottom:66px; } .story-content { height:auto; display:flex; flex-direction:column; } .story-images { position:relative; width:100%; height:475px; } .story-image-back { width:76%; height:425px; left:-9%; top:0; } .story-image-front { width:62%; height:350px; right:-6%; top:125px; } .story-copy { position:relative; inset:auto; width:calc(100% - 48px); min-height:0; margin:-50px auto 0; padding:32px 28px 44px; } .footer-navigation { grid-template-columns:1fr; gap:32px; } .footer-bottom { grid-template-columns:1fr; justify-items:start; } .footer-tagline { justify-self:start; } }