/* M&D Cakes · editorial refinement. Existing brand and typography. */
:root {
--cream:#fcfaf8;
--paper:#fff;
--cocoa:#5c321e;
--muted:#765747;
--teal:#2c6377;
--teal-dark:#204b5a;
--teal-soft:#edf5f7;
--rose:#c996a5;
--blush:#f8eef1;
--line:#e5d8cf;
--ff-title:'Cormorant Garamond',Georgia,serif;
--ff-body:'DM Sans',sans-serif;
--ease:cubic-bezier(.22,1,.36,1);
--fast:150ms;
--surface:250ms;
--max:1280px;
--gutter:clamp(20px,5vw,80px)
}

* {
box-sizing:border-box;
margin:0;
padding:0
}
html {
scroll-behavior:smooth;
scroll-padding-top:110px;
scrollbar-color:var(--rose) var(--cream)
}
body {
font-family:var(--ff-body);
color:var(--cocoa);
background:var(--cream);
line-height:1.65;
-webkit-font-smoothing:antialiased
}
body.dialog-open {
overflow:hidden
}
[hidden] {
display:none!important
}
::selection {
background:var(--rose);
color:#341e14
}
img,svg {
display:block;
max-width:100%
}
img {
object-fit:cover
}
a {
color:inherit;
text-decoration:none;
text-underline-offset:5px
}
button,input,textarea {
font:inherit
}
button,a,input,textarea,summary {
-webkit-tap-highlight-color:transparent
}
button {
cursor:pointer;
color:inherit;
background:none;
border:0
}
button,a {
touch-action:manipulation
}
input,textarea {
caret-color:var(--teal)
}
:focus-visible {
outline:3px solid var(--teal);
outline-offset:4px
}
h1,h2,h3 {
font-family:var(--ff-title);
font-weight:500;
line-height:1.05;
text-wrap:balance;
letter-spacing:-.025em
}
h1 {
font-size:clamp(3.2rem,5.4vw,5.6rem);
max-width:10ch
}
h2 {
font-size:clamp(2.5rem,4vw,4rem)
}
h3 {
font-size:1.9rem
}
em {
font-weight:400;
color:var(--teal)
}
p {
text-wrap:pretty
}
main section {
scroll-margin-top:20px
}
.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0
}
.skip {
position:fixed;
top:-100px;
left:20px;
padding:12px 20px;
background:var(--teal);
color:white;
z-index:1000
}
.skip:focus {
top:12px
}

.announcement {
display:flex;
justify-content:center;
align-items:center;
gap:20px;
background:var(--teal-dark);
color:white;
padding:8px 20px;
font-size:.75rem;
letter-spacing:.03em
}
.announcement-item {
display:flex;
align-items:center;
gap:7px
}
.announcement-item svg {
width:12px;
height:12px;
fill:currentColor
}
.announcement-divider {
opacity:.5
}
header {
position:sticky;
top:0;
z-index:100;
display:flex;
align-items:center;
gap:24px;
padding:14px var(--gutter);
border-bottom:1px solid var(--line);
background:var(--cream)
}
.brand {
display:flex;
align-items:center;
gap:12px;
flex-shrink:0
}
.brand img {
width:62px;
height:62px;
object-fit:contain
}
.brand span {
font-size:.75rem;
line-height:1.5
}
.brand strong {
font-weight:500;
color:var(--muted)
}
header nav {
display:flex;
align-items:center;
gap:24px;
margin-left:auto
}
header nav a {
font-size:.8rem;
padding-block:12px
}
header nav a:hover {
text-decoration:underline
}
.menu-toggle {
display:none
}
.button {
min-height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:12px;
padding:12px 23px;
border-radius:6px;
background:var(--teal);
color:white;
font-size:.85rem;
font-weight:500;
text-align:center;
transition:background-color var(--fast),transform var(--fast) var(--ease),box-shadow var(--fast);
line-height:1.5
}
.button.secondary {
background:transparent;
color:var(--cocoa);
box-shadow:inset 0 0 0 1px var(--line)
}
.button:active,button:active {
transform:scale(.96)
}
.header-wa {
font-size:.77rem;
padding-inline:18px
}
.text-link {
text-decoration:underline;
color:var(--teal);
padding-block:10px
}

.hero {
max-width:1440px;
margin:auto;
padding:64px var(--gutter) 72px;
display:grid;
grid-template-columns:1fr 1fr;
gap:clamp(36px,6vw,100px);
align-items:center
}
.hero-copy {
display:flex;
flex-direction:column;
align-items:flex-start;
gap:28px
}
.hero-copy .intro {
max-width:44ch;
color:var(--muted);
font-size:.96rem
}
.hero-actions {
display:flex;
gap:12px;
flex-wrap:wrap
}
.hero-social-pill {
display:flex;
align-items:center;
gap:10px;
font-size:.75rem;
color:var(--muted);
padding-block:8px
}
.hero-social-pill strong {
display:block;
font-weight:500;
color:var(--teal)
}
.social-icon {
width:20px;
flex-shrink:0
}
.pill-arrow {
margin-left:10px
}
.hero-visual {
min-width:0
}
.photo-frame {
position:relative;
aspect-ratio:4/5;
max-height:610px;
overflow:hidden;
border-radius:180px 180px 12px 12px;
background:var(--blush)
}
.photo-note {
position:absolute;
z-index:2;
bottom:20px;
left:20px;
padding:8px 13px;
color:var(--cocoa);
background:var(--cream);
font-size:.75rem;
border-radius:3px
}
.img-placeholder,.hero-photo {
width:100%;
height:100%;
object-fit:cover
}
.hero-visual figcaption {
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding-top:18px;
font-size:.75rem;
color:var(--muted);
min-height:64px
}
.slide-controls {
display:flex;
align-items:center;
gap:5px;
flex-shrink:0
}
.slide-controls button {
width:44px;
height:44px;
border:1px solid var(--line);
border-radius:50%;
transition:background-color var(--fast),transform var(--fast)
}
#slide-count {
min-width:54px;
text-align:center;
font-variant-numeric:tabular-nums
}
.benefits {
display:flex;
justify-content:space-evenly;
gap:24px;
flex-wrap:wrap;
padding:25px var(--gutter);
background:var(--blush);
border-block:1px solid var(--line);
font-size:.83rem
}
.benefits em {
margin-left:4px;
font-style:normal
}

.gallery,.process,.faq {
padding:90px var(--gutter);
max-width:1440px;
margin:auto
}
.section-heading {
display:flex;
justify-content:space-between;
align-items:flex-end;
gap:40px;
margin-bottom:38px
}
.section-heading h2 {
max-width:17ch
}
.section-heading>p {
max-width:38ch;
color:var(--muted);
font-size:.9rem
}
.gallery-tools {
display:flex;
justify-content:space-between;
gap:20px;
align-items:center;
margin-bottom:16px
}
.filters {
display:flex;
gap:8px;
flex-wrap:wrap
}
.filters button {
min-height:44px;
padding:9px 17px;
border:1px solid var(--line);
border-radius:24px;
font-size:.78rem;
transition:background-color var(--fast),color var(--fast)
}
.filters button.active {
background:var(--teal);
border-color:var(--teal);
color:white
}
.search-box {
display:flex;
border-bottom:1px solid var(--muted);
max-width:310px;
width:100%
}
.search-box input {
min-width:0;
width:100%;
border:0;
background:transparent;
padding:12px 0;
color:var(--cocoa);
font-size:.85rem
}
.search-box button {
width:44px;
flex-shrink:0
}
.reference-note,.result-count {
font-size:.75rem;
color:var(--muted)
}
.result-count {
margin:5px 0 24px
}
#products {
display:grid;
grid-template-columns:1.12fr 1fr 1fr;
gap:28px;
align-items:start
}
.card {
min-width:0
}
.card-thumb {
display:block;
width:100%;
position:relative;
aspect-ratio:4/5;
border-radius:12px;
overflow:hidden;
background:var(--blush)
}
.card-thumb img {
width:100%;
height:100%;
transition:transform 400ms var(--ease)
}
.card-badge {
position:absolute;
bottom:14px;
left:14px;
background:var(--cream);
padding:5px 12px;
font-size:.75rem;
border-radius:3px
}
.card-body {
padding:23px 0 17px
}
.card-body h3 {
font-size:1.8rem;
margin-bottom:12px
}
.card-body p {
font-size:.85rem;
color:var(--muted);
line-height:1.75
}
.card-footer {
border-top:1px solid var(--line);
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
padding-top:8px
}
.card-wa,.card-details {
min-height:44px;
display:inline-flex;
align-items:center;
gap:8px;
color:var(--teal);
font-size:.8rem
}
.card-wa svg {
fill:var(--teal)
}
.card-details {
text-decoration:underline;
text-underline-offset:4px
}
#empty {
padding:44px 20px;
text-align:center;
border-block:1px solid var(--line)
}
#empty p {
max-width:65ch;
margin:16px auto 24px
}
#empty .text-link {
display:block
}
.gallery-callout {
margin-top:64px;
padding-top:32px;
border-top:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
gap:32px
}
.callout-content {
max-width:650px
}
.callout-content h3 {
font-size:2rem;
max-width:28ch
}
.callout-content p {
margin-top:12px;
font-size:.88rem;
color:var(--muted)
}
.btn-wa-callout {
flex-shrink:0
}

.consult-section {
background:var(--teal-soft);
padding:80px var(--gutter)
}
.consult-inner {
max-width:1120px;
margin:auto;
display:grid;
grid-template-columns:.8fr 1.2fr;
column-gap:80px;
align-items:start
}
.consult-inner h2 {
grid-column:1;
grid-row:1
}
.consult-inner>.intro {
grid-column:1;
grid-row:2;
color:var(--muted);
font-size:.9rem;
margin-top:24px
}
.consult-form {
grid-column:2;
grid-row:1/4
}
.form-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:22px
}
.form-field:first-child,.form-field.full {
grid-column:1/-1
}
.form-field label {
display:block;
font-size:.8rem;
font-weight:500;
margin-bottom:8px
}
.hint-inline {
font-size:.75rem;
font-weight:400
}
.form-field input,.form-field textarea,.modal-form textarea {
display:block;
width:100%;
max-width:100%;
min-width:0;
border:1px solid #b7c8cb;
background:var(--paper);
color:var(--cocoa);
padding:13px 14px;
border-radius:6px;
font-size:1rem;
min-height:48px
}
.form-field textarea,.modal-form textarea {
min-height:110px;
resize:vertical
}
input::placeholder,textarea::placeholder {
color:#746a64;
opacity:1
}
.consult-clarification {
font-size:.76rem;
margin:22px 0;
color:var(--muted)
}
.message-preview {
border-block:1px solid #bdced2;
padding:12px 0;
margin-bottom:22px
}
.message-preview summary {
cursor:pointer;
min-height:36px;
font-size:.82rem
}
.message-preview pre {
white-space:pre-wrap;
overflow-wrap:anywhere;
font-family:var(--ff-body);
font-size:.82rem;
line-height:1.7;
padding-block:12px
}
.form-actions {
display:flex;
flex-wrap:wrap;
gap:12px
}
.reset-consult {
font-size:.77rem;
min-height:44px;
text-decoration:underline;
margin-top:12px;
color:var(--muted)
}

.process h2 {
max-width:18ch
}
.steps {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:44px;
margin-top:44px
}
.steps article {
border-top:1px solid var(--line);
padding-top:20px
}
.steps article>span {
font-size:.82rem;
font-variant-numeric:tabular-nums;
color:var(--teal)
}
.steps h3 {
margin:20px 0 16px
}
.steps p {
font-size:.88rem;
color:var(--muted)
}
.process-note {
font-size:.75rem;
margin-top:30px;
color:var(--muted)
}
.faq {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
border-top:1px solid var(--line)
}
.faq>div>p {
color:var(--muted);
font-size:.9rem;
margin:24px 0
}
.faq-list details {
border-bottom:1px solid var(--line)
}
.faq-list details:first-child {
border-top:1px solid var(--line)
}
.faq-list summary {
cursor:pointer;
list-style:none;
padding:22px 36px 22px 0;
position:relative;
font-size:.9rem;
font-weight:500
}
.faq-list summary::-webkit-details-marker {
display:none
}
.faq-list summary::after {
content:'';
position:absolute;
right:4px;
top:28px;
width:9px;
height:9px;
border-right:1.5px solid var(--teal);
border-bottom:1.5px solid var(--teal);
transform:rotate(45deg);
transition:transform var(--surface) var(--ease)
}
.faq-list details[open] summary::after {
transform:rotate(225deg)
}
.faq-list details p {
font-size:.87rem;
color:var(--muted);
padding:0 28px 24px 0
}
.closing {
text-align:center;
background:var(--blush);
padding:80px var(--gutter)
}
.closing h2 {
font-size:clamp(2.8rem,5vw,4.6rem)
}
.closing-desc {
margin:24px auto;
max-width:48ch;
color:var(--muted);
font-size:.9rem
}
.closing-actions {
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap
}
footer {
max-width:1440px;
margin:auto;
padding:60px var(--gutter) 100px;
display:grid;
grid-template-columns:1.4fr 1fr 1fr;
gap:36px
}
footer h3 {
font:500 .78rem var(--ff-body);
margin-bottom:15px
}
footer a {
display:block;
font-size:.78rem;
padding-block:6px;
color:var(--muted)
}
.footer-name {
font:500 2rem var(--ff-title)
}
.footer-loc {
font-size:.75rem;
letter-spacing:.04em
}
footer small {
grid-column:1/-1;
border-top:1px solid var(--line);
padding-top:24px;
font-size:.75rem;
color:var(--muted);
max-width:100ch
}

#modal {
margin:auto;
width:min(760px,calc(100% - 32px));
max-height:90dvh;
border:0;
border-radius:16px;
background:var(--cream);
color:var(--cocoa);
padding:32px;
box-shadow:0 24px 80px #24140d33
}
#modal::backdrop {
background:#22181099
}
#modal[open] {
animation:dialog-in var(--surface) var(--ease)
}
@keyframes dialog-in {
from {
opacity:0;
transform:translateY(8px) scale(.96)
}
to {
opacity:1;
transform:none
}

}
#close {
position:absolute;
top:10px;
right:10px;
width:44px;
height:44px;
border-radius:50%;
background:var(--cream);
font-size:1.6rem;
z-index:2
}
#detail {
display:grid;
grid-template-columns:1fr 1fr;
gap:24px
}
.modal-thumb {
aspect-ratio:4/5;
overflow:hidden;
border-radius:10px
}
.modal-thumb img {
width:100%;
height:100%
}
.modal-info {
align-self:center
}
.modal-info h2 {
font-size:2.6rem;
margin-block:12px 20px
}
.modal-info p {
font-size:.86rem;
color:var(--muted)
}
.modal-info .category-label {
color:var(--teal)
}
.modal-ref-note {
margin-top:18px
}
.modal-form {
grid-column:1/-1
}
.modal-form label {
display:block;
font-size:.83rem
}
.modal-form textarea {
margin-top:8px
}
.modal-actions {
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:16px
}
.modal-actions .button {
font-size:.78rem
}
#toast {
position:fixed;
z-index:1000;
bottom:24px;
left:50%;
transform:translate(-50%,8px);
max-width:calc(100% - 32px);
width:max-content;
text-align:center;
padding:14px 24px;
background:var(--cocoa);
color:white;
border-radius:8px;
opacity:0;
pointer-events:none;
font-size:.8rem;
transition:opacity var(--fast),transform var(--surface) var(--ease)
}
#toast.show {
opacity:1;
transform:translate(-50%,0)
}
.floating {
position:fixed;
bottom:20px;
right:20px;
z-index:90;
display:flex;
align-items:center;
gap:8px;
padding:13px 18px;
border-radius:28px;
background:var(--teal-dark);
color:white;
font-size:.8rem;
box-shadow:0 5px 20px #204b5a24
}
.no-script {
padding:24px
}

@media(hover:hover) and (pointer:fine) {
.button:hover {
background:var(--teal-dark);
box-shadow:0 4px 12px #204b5a1a
}
.button.secondary:hover {
background:var(--blush);
box-shadow:inset 0 0 0 1px var(--rose)
}
.card-thumb:hover img {
transform:scale(1.035)
}
.slide-controls button:hover,.filters button:not(.active):hover {
background:var(--blush)
}
.card-details:hover,.card-wa:hover {
color:var(--cocoa)
}

}

@media(min-width:1000px) {
.card:nth-child(2) {
padding-top:48px
}
.card:nth-child(3) {
padding-top:96px
}

}

@media(max-width:1100px) {
header {
gap:16px
}
header nav {
gap:16px
}
.brand span {
display:none
}
.header-wa {
font-size:.75rem
}
.hero {
gap:36px
}
.consult-inner,.faq {
column-gap:40px
}
.gallery-callout {
align-items:flex-start;
flex-direction:column
}

}

@media(max-width:800px) {
html {
scroll-padding-top:94px
}
.announcement-item:first-child,.announcement-divider {
display:none
}
.announcement {
font-size:.75rem;
gap:15px
}
header {
padding-block:10px;
gap:14px
}
.brand img {
width:52px;
height:52px
}
.menu-toggle {
display:flex;
align-items:center;
justify-content:center;
gap:8px;
min-height:44px;
padding:8px;
margin-left:auto;
font-size:.82rem
}
header nav {
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:var(--cream);
border-bottom:1px solid var(--line);
padding:16px var(--gutter);
box-shadow:0 12px 20px #5c321e0a
}
header nav.is-open {
display:flex;
flex-direction:column;
align-items:stretch;
gap:0;
animation:menu-in var(--surface) var(--ease)
}
header nav a {
min-height:48px;
padding:12px
}
.header-wa {
min-height:44px;
padding:10px 12px
}
.hero {
padding-top:40px;
padding-bottom:44px;
gap:32px;
grid-template-columns:1fr 1fr
}
.hero h1 {
font-size:3.35rem
}
.hero-copy {
gap:22px
}
.hero-copy .intro {
font-size:.85rem
}
.hero-actions {
gap:10px
}
.hero-actions .button {
font-size:.78rem;
padding:12px 15px
}
.hero-social-pill {
font-size:.75rem
}
.photo-frame {
border-radius:120px 120px 10px 10px
}
.photo-note {
left:12px;
bottom:12px;
font-size:.75rem
}
.hero-visual figcaption {
flex-wrap:wrap;
gap:8px
}
.section-heading {
gap:25px
}
.section-heading>p {
font-size:.83rem
}
#products {
gap:18px;
grid-template-columns:repeat(3,1fr)
}
.card-body h3 {
font-size:1.5rem
}
.card-body p {
font-size:.78rem
}
.gallery,.process,.faq {
padding-block:60px
}
.gallery-tools {
flex-wrap:wrap
}
.consult-inner {
display:block
}
.consult-inner>h2 {
max-width:18ch
}
.consult-inner>.intro {
max-width:60ch;
margin-bottom:32px
}
.consult-section {
padding-block:55px
}
.steps {
gap:24px
}
.steps h3 {
font-size:1.6rem
}
.faq {
grid-template-columns:1fr;
gap:32px
}
footer {
grid-template-columns:1fr 1fr
}
.footer-brand {
grid-column:1/-1
}

}

@keyframes menu-in {
from {
opacity:0;
transform:translateY(-8px)
}
to {
opacity:1;
transform:none
}

}

@media(max-width:560px) {
.announcement-item:last-child {
display:none
}
.announcement-item:nth-child(3) {
display:flex
}
.announcement {
padding:6px 20px
}
.brand span {
display:block;
font-size:.75rem
}
.header-wa {
display:none
}
.hero {
grid-template-columns:1fr;
padding-top:32px;
gap:32px
}
.hero-copy {
gap:20px
}
.hero h1 {
font-size:clamp(3rem,12vw,4.1rem);
max-width:12ch
}
.hero-copy .intro {
font-size:.9rem;
max-width:38ch
}
.hero-actions {
width:100%
}
.hero-actions .button {
flex:1;
font-size:.79rem
}
.hero-social-pill {
font-size:.75rem
}
.photo-frame {
aspect-ratio:5/4;
border-radius:110px 110px 10px 10px;
max-height:390px
}
.hero-photo {
object-position:center 48%
}
.hero-visual figcaption {
flex-wrap:nowrap;
font-size:.75rem
}
.photo-note {
font-size:.75rem
}
.benefits {
gap:9px;
flex-direction:column;
padding-block:20px;
font-size:.79rem
}
.section-heading {
display:block;
margin-bottom:28px
}
.section-heading>p {
margin-top:20px;
max-width:42ch;
font-size:.87rem
}
.gallery-tools {
gap:18px
}
.filters {
gap:7px
}
.filters button {
font-size:.75rem;
padding:8px 13px
}
.search-box {
max-width:none
}
.reference-note {
margin-top:20px
}
#products {
grid-template-columns:1fr;
gap:36px
}
.card-thumb {
aspect-ratio:5/4
}
.card-body {
padding-top:18px
}
.card-body h3 {
font-size:2rem
}
.card-body p {
font-size:.88rem
}
.card-footer {
padding-top:6px
}
.gallery-callout {
margin-top:44px;
gap:24px
}
.btn-wa-callout {
width:100%;
font-size:.76rem
}
.form-grid {
gap:18px;
grid-template-columns:1fr
}
.form-field:first-child,.form-field.full {
grid-column:auto
}
.form-actions {
flex-direction:column
}
.form-actions .button {
width:100%
}
.steps {
grid-template-columns:1fr;
gap:26px
}
.steps article {
display:grid;
grid-template-columns:34px 1fr;
gap:8px 14px
}
.steps article>span {
padding-top:7px
}
.steps h3 {
margin:0;
font-size:1.8rem
}
.steps p {
grid-column:2
}
.process-note {
font-size:.75rem
}
.closing {
padding-block:60px
}
.closing-actions {
flex-direction:column
}
.closing h2 br {
display:none
}
footer {
gap:28px 18px;
padding-bottom:100px
}
footer a {
overflow-wrap:anywhere;
font-size:.75rem;
min-height:44px
}
#modal {
padding:22px;
max-height:88dvh
}
#detail {
grid-template-columns:1fr;
gap:20px
}
.modal-thumb {
aspect-ratio:5/4
}
.modal-info h2 {
font-size:2.2rem
}
.modal-form {
grid-column:auto
}
.modal-actions {
flex-direction:column
}
.floating {
bottom:max(12px,env(safe-area-inset-bottom));
right:12px;
padding:12px 16px
}
.floating span {
display:none
}
#toast {
bottom:76px
}

}

@media(prefers-reduced-motion:reduce) {
html {
scroll-behavior:auto
}
*,*::before,*::after {
animation:none!important;
transition:none!important;
scroll-behavior:auto!important
}
.button:active,button:active {
transform:none
}

}

/* Celebratory motion: stars frame the headline without covering its letters. */
.title-deco { position: relative; isolation: isolate; }
.cake-spark { position: absolute; display: block; pointer-events: none; color: var(--rose); opacity: .8; }
.spark-1 { width: 29px; top: -26px; right: 26px; }
.spark-2 { width: 17px; top: 18%; right: -28px; color: var(--teal); }
.spark-3 { width: 21px; bottom: -18px; left: 35%; }
#hero-ph { position: relative; }
#hero-ph .hero-photo { position: absolute; inset: 0; opacity: 0; transition: opacity 400ms var(--ease); }
#hero-ph .hero-photo.is-current { opacity: 1; }
.steps article { position: relative; }
.steps article::before { content: ''; position: absolute; top: -1px; left: 0; width: 100%; height: 1px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 650ms var(--ease); }
.steps-connected article::before { transform: scaleX(1); }
.steps-connected article:nth-child(2)::before { transition-delay: 120ms; }
.steps-connected article:nth-child(3)::before { transition-delay: 240ms; }
header nav a { position: relative; }
header nav a::after { content: ''; position: absolute; bottom: 7px; left: 0; right: 0; height: 1px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform var(--surface) var(--ease); }
@media (hover:hover) and (pointer:fine) {
  header nav a:hover { text-decoration: none; }
  header nav a:hover::after { transform: scaleX(1); }
  .hero-social-pill .pill-arrow { transition: transform var(--surface) var(--ease); }
  .hero-social-pill:hover .pill-arrow { transform: translate(2px,-2px); }
}
@media(max-width:560px) {
  .spark-1 { top: -16px; right: 12px; width: 23px; }
  .spark-2 { top: 38%; right: 3px; width: 13px; }
  .spark-3 { bottom: -13px; left: 72%; width: 17px; }
}
.keyboard-motion #hero-ph .hero-photo, .keyboard-motion .steps article::before { transition: none; }
.keyboard-motion #modal[open], .keyboard-motion header nav.is-open { animation: none; }
@media(prefers-reduced-motion:reduce) {
  .cake-spark { opacity: .8; transform: none; }
  .steps article::before { transform: scaleX(1); }
  #hero-ph .hero-photo { transition: none; }
}