/* Quiet studio design. Base styles retain form states and mobile navigation. */
:root {
  /* Butter-yellow logo with cocoa accents. Keep layout rules unchanged. */
  --palette-butter: #f5d982;
  --palette-butter-hover: #ebcb6c;
  --palette-cocoa: #69513d;
  --palette-cocoa-hover: #513d2d;
  --palette-linen: #f4ece2;
  --palette-petal: #e5cebc;
  --palette-sage: #a2a182;
  --palette-cinnamon: #8c7055;
  --color-ivory: var(--palette-linen);
  --color-oatmeal: #ede0d3;
  --color-oatmeal-deep: var(--palette-petal);
  /* Legacy token names retained for compatibility with the base stylesheet. */
  --color-rose-soft: var(--palette-petal);
  --color-rose-muted: var(--palette-sage);
  --color-rose-deep: var(--palette-cocoa);
  --color-rose-hover: var(--palette-cocoa-hover);
  --color-brown: #352c28;
  --color-brown-muted: #62574e;
  --color-surface: #ede0d3;
  --color-error-bg: #ead8cb;
  --color-error-border: #8e412e;
  --color-success-bg: #e5e2d4;
  --color-success-border: var(--palette-sage);
  --max-width: 760px;
  --max-width-wide: 1000px;
  --font-heading: "DM Sans", "Segoe UI", sans-serif;
  --font-body: "DM Sans", "Segoe UI", sans-serif;
}
html { scroll-behavior: auto; }
body { background: var(--color-ivory); }
h1, h2, h3 { font-weight: 600; }
.site-header { position: relative; background: transparent; backdrop-filter: none; border: 0; }
.header-inner { width: min(100% - 2.5rem, 1000px); max-width: 1000px; padding-block: 1rem; border-bottom: 1px solid var(--palette-sage); }
.logo { display: grid; text-align: center; line-height: 1; }
.logo .brand-wordmark { display: block; width: 180px; max-width: 100%; height: auto; }
.logo span { font-size: 2.2rem; font-weight: 600; letter-spacing: -.06em; }
.logo small { margin-top: .65rem; font: 400 .75rem var(--font-body); letter-spacing: .13em; color: var(--color-brown-muted); }
.site-nav ul { gap: 1.8rem; align-items: center; }
.site-nav a { display: inline-block; padding-block: .7rem; font-size: .95rem; }
.site-nav li:last-child a { color: var(--color-rose-deep); text-decoration: underline; text-underline-offset: 5px; }
.hero { margin: 0 auto; width: min(100% - 2.5rem, 1000px); padding: 2.5rem 0; border-radius: 0; background: transparent; border: 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; text-align: left; width: 100%; max-width: none; align-items: center; }
.hero-badge { background: none; padding: 0; margin: 0 0 .75rem; font-size: .85rem; letter-spacing: .025em; }
.hero h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; margin-bottom: 1rem; }
.hero h1 em { color: var(--color-rose-deep); font-weight: 600; font-style: normal; }
.hero-lead { max-width: 30rem; margin: 0 0 .9rem; font-size: 1.1rem; }
#intro-text { max-width: 38rem; margin: 0 auto 1rem; color: var(--color-brown); font-size: 1rem; }
.hero-actions { flex-direction: column; align-items: flex-start; gap: .65rem; }
.btn { transition: none; font-size: 1rem; padding: .85rem 1.7rem; font-weight: 500; border-radius: 5px; }
.quiet-link { font-size: .9rem; text-underline-offset: 4px; padding: .35rem; }
.hero-card { background: #ede0d3; color: var(--color-brown); box-shadow: none; padding: 1.5rem; margin: 0; border-radius: 6px; border: 0; max-width: 44rem; }
.hero-card h2 { font: 600 1rem var(--font-body); margin-bottom: 1rem; color: var(--color-brown); }
.design-service { margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--palette-sage); }
.design-service h3 { margin: 0 0 .6rem; font-size: 1.15rem; font-weight: 600; }
.design-service p { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--color-brown); }
.hero-card ul { padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; font-size: 1.15rem; }
.hero-card li + li { margin: 0; }
.hero-card li { background: transparent; border-radius: 0; padding: .9rem 0; color: var(--color-brown); border-top: 1px solid var(--palette-sage); }
section { padding-block: 2rem; scroll-margin-top: 2rem; }
#services { padding-block: 1.5rem 0; }
#services .section-header { text-align: center; margin-bottom: 0; }
#services .section-header p, #quote .section-header p { margin-inline: auto; }
#services h2 { font-size: 1.5rem; }
.section-header { margin-bottom: 1.25rem; }
.section-header h2 { font-weight: 600; letter-spacing: -.035em; }
.section-gallery { padding-block: 2rem; }
.section-header p { font-size: 1rem; }
.gallery-grid { gap: 2.5rem 2rem; }
.gallery-frame { height: clamp(24rem, 38vw, 32rem); min-height: 0; border-radius: 5px; box-shadow: none; background: #ede0d3; }
.gallery-frame img, .gallery-placeholder { height: 100%; min-height: 0; max-height: none; background: transparent; }
.gallery-frame img { object-fit: cover; padding: 0; }
.gallery-frame img[src$="family-trip-shirts-expanded.png"] {
  transform: scale(1.06);
  transform-origin: center;
}
.gallery-item:nth-child(2n) .gallery-frame { background: #ede0d3; }
.gallery-placeholder { font-size: .8rem; color: var(--color-brown-muted); }
.gallery-placeholder strong { font-weight: 500; font-size: 1.35rem; }
.gallery-item figcaption { text-align: left; padding: 1rem .5rem 0; font-size: .95rem; }
#how-it-works .container { max-width: 900px; }
.steps { gap: 2rem; }
.card { background: none; box-shadow: none; padding: 0 .5rem; text-align: center; }
.card h3 { font-weight: 500; font-size: 1.2rem; }
.card p { font-size: 1rem; }
.step-number { background: none; border-bottom: 2px solid var(--palette-cinnamon); border-radius: 0; font-size: 1.25rem; font-weight: 600; width: 2.8rem; height: 2.8rem; }
#faq .container { max-width: 650px; }
.faq-item summary { font-weight: 500; }
#quote { padding-top: 2rem; }
#quote > .container { background: #ede0d3; border-radius: 6px; padding: clamp(1.25rem, 4vw, 2.5rem); }
#quote .section-header { text-align: center; }
.quote-form { background: none; padding: 0; border-radius: 0; box-shadow: none; }
.form-field label { font-weight: 500; }
.form-field input, .form-field textarea { border-color: #89886d; background: var(--palette-linen); }
.form-field input:focus, .form-field textarea:focus { background: var(--palette-linen); outline: 2px solid var(--color-rose-deep); outline-offset: 2px; box-shadow: none; }
.form-field input::placeholder, .form-field textarea::placeholder { color: #62574e; opacity: 1; }
.form-field.invalid input, .form-field.invalid textarea { border-color: #8e412e; }
.field-error { color: #713324; }
.btn-primary { background: var(--palette-butter); color: var(--color-brown); }
.btn-primary:hover { background: var(--palette-butter-hover); color: var(--color-brown); }
.quiet-link { color: var(--color-brown); }
.quiet-link:hover { color: var(--palette-cocoa-hover); }
.skip-link { color: var(--palette-linen); }
.faq-list, .faq-item { border-color: var(--palette-sage); }
.form-actions { text-align: center; }
.notice-warning { background: var(--palette-petal); border-color: var(--palette-cinnamon); font-size: .9rem; }
.contact-fallback { background: none; box-shadow: none; text-align: center; padding: 1.6rem 0 0; border-top: 1px solid var(--palette-sage); border-radius: 0; overflow-wrap: anywhere; }
.site-footer { border: 0; padding-block: 1rem 3rem; }
@media (max-width: 720px) {
  .header-inner { padding-block: 1.1rem; }
  .nav-toggle { background: none; text-decoration: underline; text-underline-offset: 4px; }
  .site-nav ul { align-items: stretch; gap: .1rem; }
  .hero { padding-top: 1.5rem; border-radius: 6px; }
  .hero-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-card ul { flex-direction: column; gap: .5rem; }
  .hero h1 { font-size: clamp(2.1rem, 8vw, 3rem); }
  .gallery-frame { height: 25rem; }
  .steps { gap: 2.5rem; }
  section { padding-block: 1.75rem; }
}