/* Pet portrait commission page */
body {
	background: #fffdfa;
	color: #3d3531;
}

.dog-header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: auto;
	min-height: 76px;
	width: min(1180px, calc(100% - 64px));
	margin: 0 auto;
	padding: 24px 0;
	border-bottom: 1px solid rgba(82, 67, 60, .18);
}

.dog-logo,
.dog-logo:visited {
	color: #292321;
	font: 600 clamp(1.35rem, 2vw, 1.8rem)/1 "Playfair Display", serif;
	letter-spacing: -.06em;
	text-decoration: none;
}

.dog-logo span { color: #c68b7a; }

.dog-back,
.dog-back:visited {
	color: #514844;
	font: 500 .69rem/1 "DM Mono", monospace;
	letter-spacing: .12em;
	text-decoration: none;
}

.dog-back:hover { color: #b67264; }

.dog-page {
	overflow: hidden;
	padding: 0 0 84px;
}

.dog-page h1,
.dog-page h2,
.dog-page h3,
.dog-page p { margin-top: 0; }

.dog-hero,
.dog-story,
.dog-menu,
.dog-steps,
.dog-contact {
	width: min(1180px, calc(100% - 64px));
	margin-inline: auto;
}

.dog-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(320px, .93fr) minmax(420px, 1.07fr);
	min-height: 620px;
	margin-top: 42px;
	background: #f1eee5;
}

.dog-hero::before {
	position: absolute;
	z-index: 0;
	top: -85px;
	right: -100px;
	width: 360px;
	height: 360px;
	border-radius: 50%;
	background: rgba(234, 200, 183, .45);
	content: "";
	filter: blur(2px);
}

.dog-hero-photo { position: relative; z-index: 1; min-height: 620px; }
.dog-hero-photo::after { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(35, 29, 26, .05), transparent 65%); content: ""; }
.dog-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }

.dog-hero-copy {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 78px clamp(42px, 7vw, 104px) 72px;
}

.dog-kicker,
.dog-card-en {
	color: #9c6f61;
	font: 500 .67rem/1.2 "DM Mono", monospace;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.dog-script {
	margin: 18px 0 2px !important;
	color: #bd8978;
	font: italic clamp(2.6rem, 5vw, 4.7rem)/.94 "Playfair Display", serif;
	letter-spacing: -.06em;
}

.dog-hero h1 {
	margin: 8px 0 24px !important;
	font: 500 clamp(2.15rem, 4.3vw, 4.25rem)/1.22 "Zen Kaku Gothic New", sans-serif;
	letter-spacing: -.08em;
}

.dog-hero h1 em,
.dog-story h2 em { color: #b57969; font-style: normal; }

.dog-lead { color: #5a504b; font-size: .98rem; line-height: 2; }

.dog-button,
.dog-button:visited {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	width: fit-content;
	margin-top: 22px;
	padding: 15px 18px 15px 21px;
	border: 1px solid #604f49;
	color: #fffdfa;
	background: #604f49;
	font: 500 .72rem/1.25 "DM Mono", monospace;
	letter-spacing: .08em;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.dog-button span { font-size: 1.08rem; }
.dog-button:hover { color: #604f49; background: transparent; transform: translateX(4px); }
.dog-note { margin: 13px 0 0 !important; color: #887973; font-size: .72rem; }

.dog-badge {
	position: absolute;
	z-index: 2;
	right: -28px;
	bottom: 38px;
	display: grid;
	place-content: center;
	width: 142px;
	height: 142px;
	border: 2px solid #dcae9c;
	border-radius: 48% 52% 45% 55% / 51% 42% 58% 49%;
	background: #fff9df;
	color: #795c56;
	text-align: center;
	transform: rotate(-7deg);
}

.dog-badge span { font: 500 .55rem/1.2 "DM Mono", monospace; letter-spacing: .1em; }
.dog-badge strong { margin-top: 7px; font: 600 1.15rem/1.2 "Zen Kaku Gothic New", sans-serif; }

.dog-story {
	margin-top: 112px;
	padding: 68px 7.5%;
	background: #e9efe5;
}

.dog-story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: end; margin-top: 18px; }
.dog-story h2,
.dog-section-heading h2 { margin-bottom: 0; font: 500 clamp(1.8rem, 3vw, 3rem)/1.35 "Zen Kaku Gothic New", sans-serif; letter-spacing: -.07em; }
.dog-story-grid > p { margin-bottom: 3px; color: #5f625b; font-size: .94rem; line-height: 2.05; }

.dog-menu { margin-top: 110px; }
.dog-section-heading { text-align: center; }
.dog-section-heading h2 { margin-top: 15px; color: #403633; }
.dog-menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 27px; margin-top: 44px; }
.dog-menu-card { padding-bottom: 7px; }
.dog-menu-image { aspect-ratio: 1 / 1; overflow: hidden; background: #eee9e2; }
.dog-menu-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.dog-menu-card:hover img { transform: scale(1.04); }
.dog-menu-card .dog-card-en { margin: 19px 0 7px; }
.dog-menu-card h3 { margin-bottom: 13px; font: 600 1.15rem/1.45 "Zen Kaku Gothic New", sans-serif; letter-spacing: -.04em; }
.dog-menu-card > p:not(.dog-card-en) { min-height: 5.8em; margin-bottom: 16px; color: #6c605b; font-size: .84rem; line-height: 1.8; }
.dog-menu-card strong { color: #725b54; font: 500 1.12rem/1.3 "Playfair Display", "Zen Kaku Gothic New", serif; letter-spacing: .02em; }
.dog-menu-card small { font: 400 .67rem/1 "Zen Kaku Gothic New", sans-serif; }

.dog-steps { margin-top: 124px; padding: 77px 7.5%; background: #f4eee8; }
.dog-steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; margin: 48px 0 0; padding: 0; list-style: none; }
.dog-steps li { position: relative; padding-top: 46px; border-top: 1px solid #c9aaa0; }
.dog-steps li span { position: absolute; top: 14px; left: 0; color: #b67d6d; font: 500 .65rem/1 "DM Mono", monospace; letter-spacing: .12em; }
.dog-steps h3 { margin-bottom: 10px; font: 600 1rem/1.4 "Zen Kaku Gothic New", sans-serif; }
.dog-steps p { margin-bottom: 0; color: #6d625d; font-size: .82rem; line-height: 1.8; }

.dog-order {
	margin-top: 110px;
	padding: 76px clamp(28px, 8vw, 108px);
	background: #eef2e9;
}

.dog-order-heading { max-width: 630px; margin: 0 auto 37px; text-align: center; }
.dog-order-heading h2 { margin: 14px 0 15px; font: 500 clamp(1.9rem, 3.2vw, 3rem)/1.35 "Zen Kaku Gothic New", sans-serif; letter-spacing: -.07em; }
.dog-order-heading > p:not(.dog-kicker) { margin-bottom: 0; color: #5b635a; font-size: .88rem; line-height: 1.9; }
.dog-order-form { max-width: 760px; margin: 0 auto; }
.dog-order-form label,
.dog-order-form legend { color: #443b37; font: 500 .88rem/1.7 "Zen Kaku Gothic New", sans-serif; }
.dog-order-form b { display: inline-block; margin-left: 7px; color: #ae6f60; font: 500 .58rem/1 "DM Mono", monospace; letter-spacing: .05em; vertical-align: middle; }
.dog-order-form label > span { margin-left: 8px; color: #756c66; font-size: .69rem; font-weight: 400; }
.dog-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 23px 20px; }
.dog-form-grid > label,
.dog-order-form > label { display: block; }
.dog-form-wide { grid-column: 1 / -1; }
.dog-order-form input[type="text"],
.dog-order-form input[type="tel"],
.dog-order-form input[type="email"],
.dog-order-form input[type="number"],
.dog-order-form textarea {
	display: block;
	width: 100%;
	margin-top: 7px;
	padding: 12px 13px;
	border: 1px solid #c3c7bc;
	border-radius: 0;
	outline: 0;
	color: #3f3733;
	background: #fffefb;
	font: 400 .9rem/1.6 "Zen Kaku Gothic New", sans-serif;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.dog-order-form textarea { resize: vertical; }
.dog-order-form input:focus,
.dog-order-form textarea:focus { border-color: #a8796b; box-shadow: 0 0 0 3px rgba(180, 125, 109, .14); }
.dog-order-form fieldset { margin: 31px 0 0; padding: 0; border: 0; }
.dog-order-form legend { padding: 0; }
.dog-choice-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.dog-choice-row label { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid #c3c7bc; background: #fffefb; cursor: pointer; }
.dog-choice-row input { accent-color: #9e7062; }
.dog-form-count { display: block; width: min(100%, 270px); margin-top: 31px; }
.dog-photo-field { display: block; margin-top: 31px; }
.dog-photo-field > span { display: block; margin: 3px 0 8px !important; }
.dog-order-form input[type="file"] { display: block; width: 100%; padding: 12px; border: 1px dashed #ac9f94; background: #fffefb; color: #615751; font: 400 .75rem/1.5 "Zen Kaku Gothic New", sans-serif; }
.dog-order-form > label:not(.dog-form-count):not(.dog-photo-field) { margin-top: 31px; }
.dog-form-notes { margin-top: 31px; padding: 16px 18px; border-left: 2px solid #c29180; color: #655b55; background: rgba(255, 253, 250, .72); }
.dog-form-notes p { margin-bottom: 0; font-size: .76rem; line-height: 1.9; }
.dog-form-submit { width: 100%; margin-top: 28px; padding: 18px 21px; border: 0; cursor: pointer; }
.dog-form-message { max-width: 760px; margin: 0 auto 25px; padding: 14px 17px; font-size: .84rem; }
.dog-form-message-success { border: 1px solid #9aaf92; color: #455c41; background: #f7fcf4; }
.dog-form-message-error { border: 1px solid #cf9180; color: #7d463a; background: #fff8f6; }
.dog-honeypot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.dog-page-editable-content { max-width: 760px; margin: 36px auto 0; color: #625953; font-size: .86rem; line-height: 1.9; }

.dog-contact { display: grid; grid-template-columns: 260px 1fr; margin-top: 110px; background: #6d584f; color: #fffaf4; }
.dog-contact-profile { min-height: 320px; }
.dog-contact-profile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.dog-contact-copy { padding: 60px clamp(35px, 7vw, 92px); }
.dog-contact .dog-kicker { color: #eac7b9; }
.dog-contact h2 { margin: 14px 0 22px; font: 500 clamp(1.75rem, 3vw, 2.7rem)/1.3 "Playfair Display", "Zen Kaku Gothic New", serif; letter-spacing: -.04em; }
.dog-contact h2 em { color: #ead6cc; font: 400 1rem/1 "Zen Kaku Gothic New", sans-serif; }
.dog-contact-copy > p:not(.dog-kicker) { max-width: 570px; margin-bottom: 0; color: #f0e5dd; font-size: .9rem; line-height: 1.95; }
.dog-button-light { border-color: #fffaf4; background: transparent; color: #fffaf4; }
.dog-button-light:hover { background: #fffaf4; color: #6d584f; }

@media (max-width: 800px) {
	.dog-header,
	.dog-hero,
	.dog-story,
	.dog-menu,
	.dog-steps,
	.dog-contact { width: min(100% - 34px, 560px); }
	.dog-header { padding: 18px 0; }
	.dog-page { padding-bottom: 48px; }
	.dog-hero { grid-template-columns: 1fr; min-height: 0; margin-top: 24px; }
	.dog-hero-photo { min-height: 330px; max-height: 440px; }
	.dog-hero-photo img { object-position: center 38%; }
	.dog-hero-copy { padding: 44px 28px 47px; }
	.dog-script { font-size: clamp(2.5rem, 14vw, 4rem); }
	.dog-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
	.dog-badge { right: 12px; bottom: auto; top: 280px; width: 114px; height: 114px; }
	.dog-badge strong { font-size: .95rem; }
	.dog-story { margin-top: 68px; padding: 45px 26px; }
	.dog-story-grid { grid-template-columns: 1fr; gap: 20px; }
	.dog-menu { margin-top: 72px; }
	.dog-menu-grid { grid-template-columns: 1fr; gap: 44px; margin-top: 32px; }
	.dog-menu-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; align-items: start; }
	.dog-menu-image { grid-row: span 4; }
	.dog-menu-card .dog-card-en { margin: 2px 0 7px; }
	.dog-menu-card h3 { margin-bottom: 9px; font-size: 1.03rem; }
	.dog-menu-card > p:not(.dog-card-en) { min-height: 0; margin-bottom: 12px; font-size: .76rem; line-height: 1.7; }
	.dog-menu-card strong { font-size: .96rem; }
	.dog-steps { margin-top: 78px; padding: 50px 26px; }
	.dog-steps ol { grid-template-columns: 1fr; gap: 22px; margin-top: 33px; }
	.dog-order { margin-top: 72px; padding: 48px 23px; }
	.dog-form-grid { grid-template-columns: 1fr; gap: 20px; }
	.dog-form-wide { grid-column: auto; }
	.dog-order-form fieldset,
	.dog-form-count,
	.dog-photo-field,
	.dog-order-form > label:not(.dog-form-count):not(.dog-photo-field) { margin-top: 25px; }
	.dog-choice-row { display: grid; grid-template-columns: 1fr; }
	.dog-choice-row label { justify-content: flex-start; }
	.dog-contact { grid-template-columns: 1fr; margin-top: 74px; }
	.dog-contact-profile { min-height: 260px; }
	.dog-contact-copy { padding: 43px 28px; }
	.dog-button { max-width: 100%; font-size: .64rem; }
}

@media (max-width: 390px) {
	.dog-header,
	.dog-hero,
	.dog-story,
	.dog-menu,
	.dog-steps,
	.dog-contact { width: min(100% - 24px, 560px); }
	.dog-back { font-size: .58rem; }
	.dog-menu-card { grid-template-columns: 46% 1fr; column-gap: 14px; }
	.dog-menu-card > p:not(.dog-card-en) { font-size: .71rem; }
}