:root {
--green:#2f5b49;
--green-dark:#1f4435;
--green-soft:#dce8df;
--pink:#e97988;
--pink-dark:#cf5e70;
--pink-soft:#f9e6e8;
--cream:#fffaf4;
--paper:#fffdf9;
--ink:#24342d;
--muted:#66736d;
--line:#dfddd5;
--shadow:0 22px 70px rgba(47,91,73,.12);
--radius:24px;
--serif:'Fraunces',Georgia,serif;
--sans:'DM Sans',Arial,sans-serif}
* {
box-sizing:border-box}
html {
scroll-behavior:smooth}
body {
margin:0;
background:var(--cream);
color:var(--ink);
font-family:var(--sans);
font-size:16px;
line-height:1.6;
overflow-x:hidden}
img {
max-width:100%;
display:block}
a {
color:inherit;
text-decoration:none}
button,input,textarea {
font:inherit}
button {
cursor:pointer}
h1,h2,h3,p {
margin-top:0}
.announcement {
height:34px;
background:var(--green-dark);
color:#fff;
text-align:center;
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
display:flex;
align-items:center;
justify-content:center;
gap:12px}
.announcement span {
color:#f3a0aa}
.navbar {
height:82px;
background:rgba(255,250,244,.94);
border-bottom:1px solid rgba(47,91,73,.1);
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(14px);
width:100%}
.navbar-container {
max-width:1240px;
height:100%;
margin:auto;
padding:0 28px;
display:flex;
align-items:center;
justify-content:space-between}
.logo {
display:block}
.logo-image,.logo img {
width:auto;
height:48px}
.nav-links {
list-style:none;
display:flex;
align-items:center;
gap:34px;
margin:0;
padding:0}
.nav-links a {
font-size:14px;
font-weight:600;
color:var(--green-dark);
position:relative}
.nav-links a:not(.nav-cta):after {
content:"";
position:absolute;
left:0;
right:100%;
bottom:-7px;
height:2px;
background:var(--pink);
transition:.25s}
.nav-links a:hover:after,.nav-links a.active:after {
right:0}
.nav-cta {
background:var(--green);
color:white!important;
padding:12px 20px;
border-radius:999px}
.nav-toggle {
display:none;
background:none;
border:0;
padding:8px}
.nav-toggle span {
display:block;
width:24px;
height:2px;
background:var(--green);
margin:5px}
.hero {
max-width:1320px;
margin:auto;
min-height:680px;
padding:70px 48px 80px;
display:grid;
grid-template-columns:.92fr 1.08fr;
gap:70px;
align-items:center}
.eyebrow {
display:inline-flex;
align-items:center;
gap:8px;
color:var(--pink-dark);
font-size:12px;
font-weight:700;
letter-spacing:.15em;
text-transform:uppercase;
margin-bottom:18px}
.eyebrow:before {
content:"";
width:28px;
height:1px;
background:currentColor}
.hero h1 {
font-family:var(--serif);
font-size:clamp(52px,6vw,86px);
line-height:.98;
letter-spacing:-.045em;
color:var(--green-dark);
margin-bottom:28px}
.hero h1 em {
font-weight:600;
color:var(--pink-dark)}
.hero-lead {
max-width:560px;
font-size:19px;
color:var(--muted);
line-height:1.7}
.hero-actions {
display:flex;
align-items:center;
gap:26px;
margin:34px 0 46px}
.button {
display:inline-flex;
align-items:center;
justify-content:center;
gap:14px;
border-radius:999px;
padding:15px 24px;
font-weight:700;
font-size:14px;
border:1px solid transparent;
transition:.2s}
.button:hover {
transform:translateY(-2px)}
.button span {
font-size:19px}
.button-primary {
background:var(--green);
color:#fff;
box-shadow:0 12px 26px rgba(47,91,73,.2)}
.button-primary:hover {
background:var(--green-dark)}
.button-outline {
border-color:var(--green);
color:var(--green);
width:100%}
.button-outline:hover {
background:var(--green);
color:#fff}
.button-light {
background:#fff;
color:var(--green-dark)}
.text-link {
font-weight:700;
color:var(--green);
border-bottom:1px solid}
.trust-row {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:18px;
padding-top:24px;
border-top:1px solid var(--line)}
.trust-row strong,.trust-row span {
display:block}
.trust-row strong {
font-family:var(--serif);
font-size:16px;
color:var(--green-dark)}
.trust-row span {
font-size:11px;
color:var(--muted)}
.hero-visual {
position:relative;
padding:0 22px 26px 0}
.hero-image-wrap {
height:600px;
overflow:hidden;
border-radius:42% 42% 24px 24px;
box-shadow:var(--shadow);
position:relative;
z-index:2}
.hero-image-wrap img {
width:100%;
height:100%;
object-fit:cover;
object-position:center 62%}
.floating-note {
position:absolute;
z-index:4;
left:-35px;
bottom:64px;
background:#fff;
padding:15px 20px;
border-radius:16px;
box-shadow:0 16px 35px rgba(31,68,53,.18);
display:flex;
align-items:center;
gap:12px}
.note-heart {
width:38px;
height:38px;
background:var(--pink-soft);
color:var(--pink-dark);
border-radius:50%;
display:grid;
place-items:center}
.floating-note strong,.floating-note small {
display:block}
.floating-note strong {
font-family:var(--serif);
font-size:14px}
.floating-note small {
font-size:10px;
color:var(--muted)}
.magnet-shape {
position:absolute;
width:115px;
height:115px;
border-radius:15px;
background:var(--pink);
box-shadow:0 16px 28px rgba(207,94,112,.22);
transform:rotate(12deg)}
.magnet-shape-one {
right:-20px;
top:48px}
.magnet-shape-two {
right:-6px;
bottom:0;
background:var(--green-soft);
transform:rotate(-8deg)}
.intro-band {
background:var(--pink-soft);
padding:26px max(28px,calc((100vw - 1180px)/2));
display:flex;
justify-content:space-between;
align-items:center;
gap:30px}
.intro-band p {
font-family:var(--serif);
color:var(--green-dark);
font-size:19px;
margin:0}
.intro-band div {
display:flex;
gap:28px;
font-size:12px;
font-weight:600;
color:var(--green)}
.section {
max-width:1240px;
margin:auto;
padding:112px 28px}
.section-heading {
display:flex;
justify-content:space-between;
align-items:end;
gap:50px;
margin-bottom:48px}
.section-heading h2,.story-copy h2,.final-cta h2 {
font-family:var(--serif);
font-size:clamp(38px,4vw,58px);
line-height:1.08;
color:var(--green-dark);
letter-spacing:-.025em;
margin:0}
.section-heading>p {
max-width:420px;
color:var(--muted);
margin-bottom:6px}
.section-heading.centered {
justify-content:center;
text-align:center}
.package-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px}
.package-card {
background:var(--paper);
border:1px solid var(--line);
border-radius:var(--radius);
padding:30px;
position:relative;
display:flex;
flex-direction:column;
transition:.25s}
.package-card:hover {
transform:translateY(-6px);
box-shadow:var(--shadow)}
.package-card.featured {
background:var(--green);
color:#fff;
border-color:var(--green);
transform:translateY(-12px)}
.popular-badge {
position:absolute;
right:22px;
top:-14px;
background:var(--pink);
color:#fff;
border-radius:999px;
padding:7px 13px;
font-size:10px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.08em}
.package-top {
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:38px}
.package-number {
font-family:var(--serif);
font-size:36px;
color:var(--pink-dark)}
.package-tag {
font-size:10px;
text-transform:uppercase;
letter-spacing:.12em;
font-weight:700;
color:var(--muted)}
.featured .package-number {
color:#f3a0aa}
.featured .package-tag,.featured p {
color:#d8e6df}
.package-card h3 {
font-family:var(--serif);
font-size:30px;
color:var(--green-dark);
margin-bottom:9px}
.featured h3 {
color:white}
.package-card p {
font-size:14px;
color:var(--muted);
min-height:68px}
.package-price {
display:flex;
align-items:end;
gap:7px;
margin:14px 0 22px}
.package-price strong {
font-family:var(--serif);
font-size:44px;
line-height:1;
color:var(--green-dark)}
.featured .package-price strong {
color:#fff}
.package-price span {
font-size:12px;
font-weight:700;
margin-bottom:5px}
.package-card ul {
list-style:none;
margin:0 0 28px;
padding:22px 0;
border-top:1px solid var(--line);
flex:1}
.featured ul {
border-color:rgba(255,255,255,.2)}
.package-card li {
font-size:13px;
margin:9px 0}
.package-card li:before {
content:"✓";
color:var(--pink);
font-weight:700;
margin-right:9px}
.featured .button-primary {
background:#fff;
color:var(--green-dark);
box-shadow:none}
.story-section {
max-width:1320px;
margin:auto;
background:var(--pink-soft);
display:grid;
grid-template-columns:1fr 1fr;
border-radius:36px;
overflow:hidden}
.story-image {
min-height:590px}
.story-image img {
width:100%;
height:100%;
object-fit:cover}
.story-copy {
padding:80px;
display:flex;
flex-direction:column;
justify-content:center}
.story-copy h2 {
margin-bottom:28px}
.story-copy p {
color:var(--muted);
font-size:17px;
line-height:1.8}
.signature {
font-family:var(--serif);
font-size:19px;
color:var(--green);
margin-top:20px}
.signature span {
color:var(--pink)}
.process-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px}
.process-grid article {
position:relative;
text-align:center;
padding:20px}
.step-number {
position:absolute;
top:8px;
right:28px;
color:#d9d8d1;
font-family:var(--serif);
font-size:52px}
.step-icon {
width:74px;
height:74px;
border-radius:50%;
background:var(--pink-soft);
color:var(--pink-dark);
display:grid;
place-items:center;
margin:0 auto 22px;
font-family:var(--serif);
font-size:30px}
.process-grid article:nth-child(2) .step-icon {
background:var(--green-soft);
color:var(--green)}
.process-grid h3 {
font-family:var(--serif);
font-size:23px;
color:var(--green-dark);
margin-bottom:8px}
.process-grid p {
color:var(--muted);
font-size:14px;
max-width:300px;
margin:auto}
.final-cta {
margin:0 24px 24px;
padding:95px 25px;
text-align:center;
border-radius:32px;
background:var(--green);
color:#fff;
position:relative;
overflow:hidden}
.final-cta:before,.final-cta:after {
content:"";
position:absolute;
width:250px;
height:250px;
border:1px solid rgba(255,255,255,.15);
border-radius:50%}
.final-cta:before {
left:-70px;
bottom:-120px}
.final-cta:after {
right:-50px;
top:-130px}
.final-cta .eyebrow {
color:#f5a6b0}
.final-cta h2 {
color:#fff}
.final-cta p {
color:#d8e6df;
margin:20px auto 28px}
.site-footer {
background:#f1eee6;
padding:56px max(28px,calc((100vw - 1180px)/2)) 24px;
width:100%;
margin-top:auto}
.footer-main {
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px}
.footer-brand img {
display:block;
width:150px;
height:auto;
max-height:52px;
margin-bottom:12px}
.footer-brand p {
max-width:320px;
color:var(--muted);
font-size:14px;
margin:0}
.footer-column a {
display:block;
color:var(--muted);
font-size:13px;
margin:8px 0}
.footer-main h3 {
font-size:12px;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--green-dark);
margin-bottom:16px}
.footer-main div:not(:first-child) a,.footer-main div:not(:first-child) span {
display:block;
color:var(--muted);
font-size:13px;
margin:8px 0}
.footer-main a:hover {
color:var(--pink-dark)}
.footer-bottom {
border-top:1px solid #d8d4ca;
margin-top:50px;
padding-top:20px;
display:flex;
justify-content:space-between;
color:#8a8f8b;
font-size:11px}
/* Order, contact and admin surfaces */
body:not(.home-page) {
padding:0;
display:flex;
flex-direction:column;
background:linear-gradient(180deg,var(--pink-soft),var(--cream) 430px);
min-height:100vh}
.order-page>h1 {
font-family:var(--serif);
font-size:clamp(38px,5vw,60px);
line-height:1.05;
color:var(--green-dark);
max-width:760px;
text-align:center;
margin:72px auto 30px;
padding:0 24px}
body:not(.home-page) #instructions {
max-width:880px;
background:rgba(255,255,255,.82);
border:1px solid rgba(47,91,73,.12);
border-radius:24px;
padding:28px 34px;
margin:0 auto 28px;
box-shadow:0 12px 40px rgba(47,91,73,.07);
color:var(--muted)}
#instructions>p:first-child {
font-family:var(--serif);
font-size:21px;
color:var(--green-dark);
margin-bottom:12px}
#instructions ol {
margin:0;
padding-left:22px;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px 36px}
#instructions li {
font-size:13px;
line-height:1.55;
padding-left:5px}
#instructions strong {
color:var(--green-dark)}
.inline-content {
background:var(--green-soft);
padding:16px 22px!important;
border-radius:16px!important}
.main-square {
width:54px;
height:54px;
background:var(--pink);
position:relative;
display:inline-block;
border-radius:6px}
.sub-square {
width:40px;
height:40px;
border:2px dashed white;
position:absolute;
top:7px;
left:7px;
border-radius:3px}
#upload-grid {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:16px;
width:100%;
max-width:650px;
margin:20px auto 38px}
.upload-box {
position:relative;
width:100%;
padding-top:100%;
background:var(--paper);
overflow:hidden;
border:2px dashed #a6b7ae;
border-radius:18px;
color:var(--green);
transition:.2s;
box-shadow:0 8px 24px rgba(47,91,73,.06)}
.upload-box:hover {
border-color:var(--pink);
transform:translateY(-3px)}
.upload-box span {
position:absolute;
inset:0;
display:grid;
place-items:center;
font-size:13px;
font-weight:700;
color:var(--green)}
.upload-box span:before {
content:"+";
position:absolute;
top:calc(50% - 38px);
font-size:28px;
color:var(--pink)}
.upload-box img {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:86.39%;
height:86.39%;
object-fit:cover;
border:2px dashed #fff}
.upload-box::before {
content:"";
position:absolute;
top:6.805%;
left:6.805%;
width:86.39%;
height:86.39%;
border:2px dashed rgba(255,255,255,.9);
z-index:2;
pointer-events:none}
form {
width:100%;
max-width:650px;
background:var(--paper);
padding:34px;
border-radius:24px;
box-shadow:var(--shadow);
display:flex;
flex-direction:column;
gap:8px;
margin:0 auto 50px}
#price-notice {
background:var(--green);
color:#fff;
border-radius:18px;
padding:18px 22px;
margin-bottom:18px;
text-align:center}
#price-notice p {
margin:0}
#display-price {
color:#fff!important;
font-family:var(--serif);
font-size:26px}
.form-group {
display:flex;
flex-direction:column;
gap:7px;
margin-bottom:12px;
width:100%}
.form-group h2 {
font-family:var(--serif)!important;
color:var(--green-dark);
font-size:30px!important}
.form-group label {
font-size:13px;
font-weight:700;
color:var(--green-dark)}
.form-group input,.form-group textarea,form textarea {
width:100%;
padding:13px 15px;
border:1px solid #d5d8d2;
border-radius:11px;
background:#fff;
color:var(--ink);
outline:none}
.form-group input:focus,.form-group textarea:focus,form textarea:focus {
border-color:var(--green);
box-shadow:0 0 0 3px rgba(47,91,73,.1)}
form button[type=submit],#apply-coupon,.modal-button {
border:0;
border-radius:999px;
background:var(--green);
color:#fff;
padding:14px 24px;
font-weight:700}
form button[type=submit] {
width:100%;
margin-top:10px}
form button:disabled {
opacity:.45;
cursor:not-allowed}
.coupon-button {
align-self:flex-start;
border:1px solid #ebbdc3;
background:var(--pink-soft);
color:var(--pink-dark);
padding:9px 15px;
border-radius:999px;
font-weight:700;
font-size:12px}
#coupon-field {
background:var(--pink-soft);
padding:18px;
border-radius:14px}
#coupon-code {
margin-bottom:10px}
.modal {
position:fixed;
inset:0;
background:rgba(31,68,53,.58);
z-index:5000;
align-items:center;
justify-content:center;
padding:20px;
backdrop-filter:blur(5px)}
.modal-content {
background:#fff;
border-radius:22px;
padding:32px;
max-width:420px;
width:100%;
text-align:center;
box-shadow:var(--shadow)}
#popup-message {
border:0!important;
border-radius:22px!important;
box-shadow:0 30px 90px rgba(31,68,53,.25)!important}
.crop-container {
position:fixed;
inset:5vh 5vw;
background:#fff;
padding:20px;
border-radius:22px;
box-shadow:0 30px 90px rgba(31,68,53,.25);
z-index:4000;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center}
.crop-image {
max-width:100%;
max-height:75vh;
object-fit:contain}
@media(max-width:900px) {
.announcement {
display:none}
.navbar {
height:70px}
.navbar-container {
padding:0 20px}
.logo-image,.logo img {
height:42px}
.nav-toggle {
display:block;
z-index:3}
.nav-links {
display:none;
position:absolute;
top:70px;
left:0;
right:0;
background:var(--cream);
padding:24px;
flex-direction:column;
align-items:stretch;
gap:0;
border-bottom:1px solid var(--line);
box-shadow:0 16px 32px rgba(47,91,73,.1)}
.nav-links.active {
display:flex}
.nav-links a {
display:block;
padding:13px 8px}
.nav-cta {
text-align:center;
margin-top:8px}
.hero {
padding:48px 24px 70px;
grid-template-columns:1fr;
gap:48px}
.hero-copy {
text-align:center}
.hero-lead {
margin-left:auto;
margin-right:auto}
.hero-actions {
justify-content:center}
.trust-row {
text-align:left}
.hero-visual {
max-width:650px;
margin:auto;
width:100%}
.hero-image-wrap {
height:520px}
.floating-note {
left:0}
.intro-band {
flex-direction:column;
text-align:center}
.intro-band div {
flex-wrap:wrap;
justify-content:center}
.section {
padding:82px 24px}
.section-heading {
display:block;
text-align:center}
.section-heading>p {
margin:18px auto 0}
.package-grid {
grid-template-columns:1fr;
max-width:600px;
margin:auto}
.package-card.featured {
transform:none;
order:-1}
.story-section {
margin:0 24px;
grid-template-columns:1fr}
.story-image {
min-height:440px}
.story-copy {
padding:56px 38px}
.process-grid {
grid-template-columns:1fr;
gap:22px}
.footer-main {
grid-template-columns:1fr 1fr}
.footer-brand {
grid-column:1/-1}
body:not(.home-page)>.navbar+h1 {
margin-top:70px}
#instructions ol {
grid-template-columns:1fr}
}
@media(max-width:560px) {
.hero {
padding-top:38px}
.hero h1 {
font-size:48px}
.hero-actions {
flex-direction:column;
gap:16px}
.trust-row {
grid-template-columns:1fr;
max-width:300px;
margin:auto}
.hero-image-wrap {
height:430px}
.floating-note {
bottom:38px}
.magnet-shape {
width:78px;
height:78px}
.intro-band div {
flex-direction:column;
gap:8px}
.section {
padding:68px 18px}
.section-heading h2,.story-copy h2,.final-cta h2 {
font-size:36px}
.package-card {
padding:25px}
.story-section {
margin:0 12px}
.story-image {
min-height:330px}
.story-copy {
padding:42px 24px}
.final-cta {
margin:0 12px 12px;
padding:68px 20px}
.footer-main {
grid-template-columns:1fr}
.footer-brand {
grid-column:auto}
.footer-bottom {
display:block}
.footer-bottom a {
display:block;
margin-top:8px}
.order-page>h1 {
font-size:38px;
margin-top:52px}
body:not(.home-page) #instructions {
padding:22px 20px}
#upload-grid {
gap:8px}
.upload-box {
border-radius:11px}
.upload-box span {
font-size:11px}
form {
padding:24px 18px}
.inline-content {
flex-direction:column!important;
text-align:center!important}
.text-container {
padding:8px 0 0!important;
text-align:center!important}
}
.dropdown {
position:relative}
.dropdown-menu {
display:none;
position:absolute;
top:100%;
left:-18px;
min-width:170px;
list-style:none;
margin:0;
padding:12px;
background:var(--paper);
border:1px solid var(--line);
border-radius:14px;
box-shadow:var(--shadow)}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu {
display:block}
.dropdown-menu a {
display:block;
padding:9px 10px;
border-radius:8px;
white-space:nowrap}
.dropdown-menu a:hover {
background:var(--pink-soft);
color:var(--pink-dark)}
@media(max-width:900px) {
.dropdown-menu {
display:block;
position:static;
box-shadow:none;
border:0;
background:transparent;
padding:0 0 0 18px}
.dropdown-menu a {
padding:8px}
}
@media(prefers-reduced-motion:reduce) {
* {
scroll-behavior:auto!important;
transition:none!important}
}
.contact-shell {
width:100%;
max-width:1100px;
margin:110px auto 70px;
display:grid;
grid-template-columns:.85fr 1.15fr;
gap:70px;
align-items:center}
.contact-intro h1 {
font-family:var(--serif);
font-size:clamp(48px,6vw,72px);
line-height:1;
color:var(--green-dark);
letter-spacing:-.04em;
margin-bottom:25px}
.contact-intro h1 em {
color:var(--pink-dark)}
.contact-intro>p {
color:var(--muted);
font-size:17px;
max-width:440px;
margin-bottom:34px}
.contact-detail {
display:flex;
align-items:center;
gap:14px;
margin:16px 0}
.contact-detail>span {
width:42px;
height:42px;
border-radius:50%;
background:var(--green-soft);
display:grid;
place-items:center;
color:var(--green)}
.contact-detail small,.contact-detail a,.contact-detail strong {
display:block}
.contact-detail small {
font-size:10px;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--muted)}
.contact-detail a,.contact-detail strong {
font-size:14px;
color:var(--green-dark)}
.contact-form-card {
background:var(--paper);
border-radius:28px;
padding:42px;
box-shadow:var(--shadow)}
.contact-form-card h2 {
font-family:var(--serif);
font-size:34px;
color:var(--green-dark);
margin-bottom:4px}
.contact-form-card>p {
color:var(--muted);
font-size:14px}
.contact-form-card form {
padding:0;
box-shadow:none;
margin:24px 0 0}
.contact-form-card #charCount {
font-size:11px;
color:var(--muted);
text-align:right}
.contact-page>footer {
margin-top:auto}
@media(max-width:800px) {
.contact-shell {
grid-template-columns:1fr;
margin-top:75px;
gap:38px}
.contact-intro {
text-align:center}
.contact-intro>p {
margin-left:auto;
margin-right:auto}
.contact-detail {
justify-content:center}
.contact-form-card {
padding:28px 20px}
}
#upload-grid:has(.upload-box:only-child) {
grid-template-columns:minmax(0,220px);
justify-content:center;
max-width:650px;
margin-top:28px;
margin-bottom:42px}

#upload-grid:has(.upload-box:only-child) .upload-box {
width:220px;
border-width:2px;
border-radius:20px}

#upload-grid:has(.upload-box:only-child) .upload-box span {
font-size:14px}

@media(max-width:560px) {
#upload-grid:has(.upload-box:only-child) {
grid-template-columns:minmax(0,180px)}

#upload-grid:has(.upload-box:only-child) .upload-box {
width:180px}
}