:root {
  --navy: #34477f; --lavender: #b8a9d5; --lavender-light: #eee8f5;
  --pink: #f2bfd2; --pink-light: #fdf0f5; --cream: #fffdf8; --ink: #26376d;
  --line: rgba(52, 71, 127, 0.2); --script: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  --sans: "Trebuchet MS", "Avenir Next", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
img { display: block; width: 100%; }
a { color: inherit; }
button, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.top-note { padding: .45rem 1rem; color: #6e6198; background: linear-gradient(90deg,#efe7f4,#f8eef4 52%,#eee6f3); text-align: center; font-family: var(--script); font-size: .85rem; letter-spacing: .06em; }
.top-note span { padding: 0 1rem; }
.site-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 106px; padding: .8rem clamp(1.2rem,7vw,7rem); background: rgba(255,253,248,.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.brand { display: inline-grid; grid-template-columns: auto auto auto auto; align-items: center; color: var(--navy); text-decoration: none; font-family: var(--script); font-size: clamp(1.7rem,3.4vw,3rem); font-weight: 700; line-height: .82; transform: rotate(-1deg); }
.brand strong { padding: 0 .1em; color: var(--pink); font-size: 1.45em; font-weight: 500; }
.brand i { margin-left: .15rem; font-size: .8em; font-style: normal; }
.brand small { grid-column: 1/-1; margin-top: .55rem; font-family: var(--sans); font-size: .55rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
nav { display: flex; align-items: center; gap: clamp(1rem,2.6vw,2.4rem); }
nav a { padding: .55rem 0; color: #22366d; text-decoration: none; font-family: var(--script); font-size: .84rem; font-weight: 700; text-transform: uppercase; }
nav a:hover, nav .active { border-bottom: 3px solid var(--lavender); }
.menu-button { display: none; }

.hero { position: relative; display: grid; grid-template-columns: 1fr .9fr; min-height: 600px; overflow: hidden; background: #718b55; }
.hero-photo { position: absolute; inset: 0; }
.hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(34,48,30,.05),rgba(34,48,30,.08)); }
.hero-photo img { height: 100%; object-fit: cover; object-position: center 35%; filter: saturate(.78) brightness(.94); }
.paint-panel { position: relative; z-index: 2; align-self: center; width: min(650px,92%); margin-left: clamp(1rem,6vw,6rem); padding: clamp(3rem,6vw,5rem) clamp(1.4rem,5vw,4.4rem); background: rgba(255,248,247,.92); border-radius: 44% 18% 34% 21% / 20% 35% 20% 30%; box-shadow: 0 0 35px 35px rgba(255,248,247,.55); }
.paint-panel h1 { margin: 0 0 .8rem; color: var(--navy); font-family: var(--script); font-size: clamp(2.4rem,5vw,5rem); letter-spacing: -.07em; line-height: 1; }
.paint-panel h1 b { color: var(--pink); font-size: 1.35em; font-weight: 500; }
.paint-panel h1 i { color: #e896b5; font-size: .75em; font-style: normal; }
.tagline { margin-bottom: .55rem; font-size: clamp(1.25rem,2vw,1.7rem); font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.paint-panel > p:not(.tagline) { max-width: 33rem; font-size: 1.08rem; }
.brush-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: .75rem; padding: .75rem 1.8rem; border: 0; color: var(--navy); background: linear-gradient(175deg,transparent 5%,#d8c7e7 7%,#d8c7e7 88%,transparent 90%); text-decoration: none; cursor: pointer; font-size: .88rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.brush-button:hover { color: #182655; background: linear-gradient(175deg,transparent 5%,#efc8da 7%,#efc8da 88%,transparent 90%); }
.photo-stack { position: relative; z-index: 3; grid-column: 2; min-height: 600px; pointer-events: none; }
.frame { position: absolute; margin: 0; padding: .55rem; background: white; box-shadow: 0 12px 25px rgba(24,30,34,.22); }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame-one { right: 25%; top: 14%; width: 37%; height: 58%; transform: rotate(-7deg); }
.frame-two { right: 3%; top: 20%; width: 35%; height: 60%; transform: rotate(6deg); }
.love-note { position: absolute; right: 4%; bottom: 9%; padding: .9rem 1.2rem; background: rgba(255,242,246,.94); font-family: var(--script); font-size: 1.1rem; line-height: 1.15; text-align: center; transform: rotate(-4deg); }

.benefits { display: grid; grid-template-columns: repeat(4,1fr); padding: 1.2rem clamp(1rem,8vw,8rem); background: rgba(255,253,248,.96); border-bottom: 1px solid var(--line); }
.benefits div { display: grid; grid-template-columns: auto auto; gap: .8rem; align-items: center; justify-content: center; min-height: 82px; border-right: 1px solid var(--line); }
.benefits div:last-child { border-right: 0; }
.benefits span { color: #917caf; font-family: var(--script); font-size: 2.2rem; }
.benefits p { margin: 0; font-size: .75rem; letter-spacing: .1em; line-height: 1.35; text-align: center; text-transform: uppercase; }

.feature-split { display: grid; grid-template-columns: 1fr 1.14fr; background: linear-gradient(90deg,#fffdf8,#fdf6f9); border-bottom: 1px solid var(--line); }
.memory-card, .featured-product { min-width: 0; padding: clamp(2.3rem,5vw,5rem); }
.memory-card { display: grid; grid-template-columns: .75fr 1fr; gap: clamp(1.5rem,4vw,4rem); align-items: center; border-right: 1px solid var(--line); background: radial-gradient(circle at 65% 55%,#fce9f1,transparent 48%); }
.memory-card figure { margin: 0; padding: .55rem; background: white; box-shadow: 0 13px 25px rgba(71,59,94,.16); transform: rotate(-5deg); }
.memory-card figure img { aspect-ratio: .78; object-fit: cover; }
.script-kicker { margin: 0 0 1rem; color: var(--navy); font-family: var(--script); font-size: clamp(2rem,3.3vw,3.3rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.05; }
.memory-card p:not(.script-kicker), .product-copy > p:last-of-type { font-size: .95rem; }
.featured-product { display: grid; grid-template-columns: .82fr 1.18fr; gap: 1.8rem; align-items: center; }
.product-copy { display: flex; flex-direction: column; align-items: flex-start; }
.small-caps { margin-bottom: 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.price { display: flex; align-items: baseline; justify-content: center; gap: .45rem; margin: .15rem 0 .8rem; color: var(--navy); font-size: 1.35rem; font-weight: 800; }
.price span { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.product-copy .price { justify-content: flex-start; }
.mini-gallery { display: grid; grid-template-columns: 1.45fr .8fr; gap: .45rem; height: 360px; }
.mini-gallery img { height: 100%; object-fit: cover; }
.mini-gallery > div { display: grid; grid-template-rows: 1fr 1fr; gap: .45rem; min-height: 0; }
.mini-gallery > *, .mini-gallery > div > img { min-width: 0; min-height: 0; overflow: hidden; }

.more-creations { padding: clamp(4rem,8vw,7rem) clamp(1.2rem,8vw,8rem); background: linear-gradient(140deg,#f8edf4,#fffdf8 45%,#eee8f6); }
.section-title { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section-title > p:last-child { font-size: 1.05rem; }
.creation-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(1.6rem,4vw,4rem); max-width: 1400px; margin: auto; }
.creation-grid article { text-align: center; }
.tilted-photo { max-width: 480px; margin: auto auto 2rem; padding: .65rem; background: white; box-shadow: 0 16px 28px rgba(71,59,94,.17); }
.tilted-photo img { aspect-ratio: 1; object-fit: cover; }
.tilt-left { transform: rotate(-2.5deg); } .tilt-right { transform: rotate(2.5deg); }
.creation-grid h2 { margin: .3rem 0 .5rem; font-family: var(--script); font-size: clamp(1.6rem,3vw,2.5rem); letter-spacing: -.06em; }
.creation-grid article > p:not(.small-caps):not(.price) { margin-bottom: 1rem; }
.ink-link { border: 0; border-bottom: 1px dashed var(--navy); background: none; cursor: pointer; font-weight: 800; }
.ink-link:hover { color: #9b5a78; }

.story { padding: clamp(4rem,8vw,7rem) 1.2rem; color: white; background: #4f5d91; text-align: center; }
.story .script-kicker { color: #f4c9dc; }
.story h2 { max-width: 900px; margin: 0 auto 1rem; font-family: var(--script); font-size: clamp(2rem,4vw,3.8rem); line-height: 1.1; }
.story > p:last-child { max-width: 720px; margin: auto; color: rgba(255,255,255,.82); }
.contact { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem,6vw,6rem); align-items: center; padding: clamp(3rem,7vw,6rem) clamp(1.2rem,9vw,9rem); background: linear-gradient(90deg,#f1e6f4,#f9edf3); }
.contact-heading { display: flex; gap: 1.2rem; align-items: center; }
.contact-heading p { margin: 0; }
.mail-icon { display: grid; place-items: center; width: 72px; aspect-ratio: 1; border: 2px solid #8c78ad; border-radius: 50%; font-size: 2.4rem; }
.contact form { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem 1rem; }
.contact label { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.contact label:nth-of-type(2), .contact textarea, .contact .brush-button, .form-note { grid-column: 1/-1; }
.contact select, .contact textarea { width: 100%; padding: .8rem; border: 1px solid #a99cbd; background: rgba(255,255,255,.8); }
.contact textarea { resize: vertical; }
.contact .brush-button { justify-self: start; }
.form-note { margin: 0; font-size: .8rem; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.2rem clamp(1.2rem,7vw,7rem); color: white; background: #2e3b70; }
.brand-footer { color: white; font-size: 1.7rem; }
.brand-footer small { color: rgba(255,255,255,.68); }
footer > p { margin: 0; font-size: .8rem; }
:focus-visible { outline: 3px solid #e79cbb; outline-offset: 3px; }

@media (max-width: 1050px) {
  .site-header { min-height: 86px; }
  .menu-button { display: inline-flex; padding: .6rem .85rem; border: 1px solid var(--navy); background: transparent; cursor: pointer; font-weight: 800; text-transform: uppercase; }
  nav { position: absolute; top: 100%; right: 0; left: 0; display: none; padding: .7rem 1.2rem 1.2rem; background: var(--cream); border-bottom: 1px solid var(--line); }
  nav.open { display: grid; } nav a { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  nav a:hover, nav .active { border-bottom: 1px solid var(--line); color: #9b5a78; }
  .hero { grid-template-columns: 1fr; min-height: 720px; }
  .paint-panel { align-self: start; margin-top: 4rem; }
  .photo-stack { position: absolute; inset: 0; }
  .frame-one { right: 20%; top: 48%; width: 28%; height: 43%; }
  .frame-two { right: 3%; top: 52%; width: 27%; height: 40%; }
  .love-note { right: 3%; bottom: 2%; }
  .benefits { grid-template-columns: repeat(2,1fr); }
  .benefits div:nth-child(2) { border-right: 0; }
  .benefits div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .feature-split { grid-template-columns: 1fr; }
  .memory-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .creation-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creation-grid article:last-child { grid-column: 1/-1; width: min(100%,520px); justify-self: center; }
}
@media (max-width: 720px) {
  .top-note span { padding: 0 .3rem; }
  .brand { font-size: 1.45rem; } .brand small { max-width: 230px; font-size: .45rem; }
  .hero { min-height: 760px; } .hero-photo img { object-position: 54% center; }
  .paint-panel { width: 95%; margin: 2.4rem auto 0; padding: 2.6rem 1.5rem; }
  .paint-panel h1 { font-size: 2.55rem; } .paint-panel > p:not(.tagline) { max-width: 25rem; }
  .photo-stack { top: 300px; }
  .frame-one { right: 44%; top: 36%; width: 43%; height: 43%; }
  .frame-two { right: 8%; top: 40%; width: 40%; height: 42%; }
  .love-note { display: none; }
  .benefits { padding: .7rem; }
  .benefits div { grid-template-columns: 1fr; gap: 0; min-height: 105px; padding: .5rem; }
  .benefits span { font-size: 1.8rem; text-align: center; } .benefits p { font-size: .62rem; }
  .memory-card, .featured-product { padding: 3.3rem 1.2rem; grid-template-columns: 1fr; }
  .memory-card figure { width: min(76vw,340px); margin: auto; }
  .memory-card > div { text-align: center; }
  .mini-gallery { grid-template-columns: 1.2fr .8fr; width: 100%; height: 310px; overflow: hidden; }
  .mini-gallery > div { height: 310px; overflow: hidden; }
  .mini-gallery img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
  .creation-grid { grid-template-columns: 1fr; gap: 4.5rem; }
  .creation-grid article:last-child { grid-column: auto; width: 100%; }
  .contact { grid-template-columns: 1fr; }
  .contact form { grid-template-columns: 1fr; }
  .contact label, .contact select, .contact textarea, .contact .brush-button, .form-note { grid-column: 1; }
  footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.contact-heading{flex-wrap:wrap}#contact-details{width:100%;overflow-wrap:anywhere}.product-copy p,.creation-grid p,.story p{white-space:pre-line;overflow-wrap:anywhere}.feature-split:not(:has(.featured-product)){grid-template-columns:1fr}

.request-contact-fields{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1rem}
.request-contact-fields input{display:block;width:100%;padding:.8rem;border:1px solid #a99cbd;background:rgba(255,255,255,.8);font:inherit;margin-top:.4rem}
.request-honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:600px){.request-contact-fields{grid-template-columns:1fr}}

.request-contact-fields>label{grid-column:auto}

.sister-company{margin:3rem auto;padding:3rem 1.5rem;text-align:center;background:#f6eadb;border-block:1px solid #d6bea3}.sister-company h2{font-size:2.5rem;color:#71354b}.sister-company p{max-width:38rem;margin:1rem auto}.sister-company .brush-button{display:inline-block}

.sister-logo{display:block;width:230px;max-width:90%;height:auto;margin:1rem auto;border-radius:6px}

/* Keep complete branded product artwork visible. */
.memory-card figure img,.mini-gallery img{object-fit:contain;background:#fffaf6}

.tilted-photo img{object-fit:contain;background:#fffaf6}

.product-image{position:relative;min-width:0;height:100%}.product-image img{display:block;width:100%;height:100%;object-fit:contain}.sold-stamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-18deg);color:#ad2639;border:5px double currentColor;border-radius:8px;padding:.2em .45em;font:900 clamp(1.6rem,4vw,3.6rem)/1.1 Arial,sans-serif;letter-spacing:.12em;background:rgba(255,250,246,.85);box-shadow:0 2px 12px #fff8;text-shadow:1px 1px #fff;pointer-events:none}.sold-notice{font-weight:700;color:#ad2639}.mini-gallery>.product-image{display:block;height:100%;min-height:0}