@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  color-scheme: light;
  --ink: #2a1c16;
  --ink2: #3b261d;
  --surface: #fffaf2;
  --line: rgba(87, 54, 35, .23);
  --paper: #2a1c16;
  --muted: #705e51;
  --gold: #a77b45;
  --rose: #87543c;
  --ice: #bba17f;
  --max: 1220px;
}

html { scroll-padding-top: 92px; }
body {
  isolation: isolate;
  background: #29180f;
  color: var(--ink);
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 400;
}
body::before {
  z-index: -2;
  background: linear-gradient(rgba(35, 19, 12, .27), rgba(35, 19, 12, .32)), url('/assets/site-backdrop.jpg') center / cover fixed;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 18%, transparent, rgba(24, 12, 8, .2) 78%);
}
main, .topbar, .footer { position: relative; }
::selection { background: #cfaf7c; color: #21150f; }
:focus-visible { outline: 2px solid #986834; outline-offset: 3px; }

.container, .topbar__in { width: min(calc(100% - 64px), var(--max)); }
.eyebrow, .card__status, .example-card__tag, .showcase-card__meta {
  color: #946d42;
  font-family: 'IBM Plex Sans', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .17em;
}
h1, h2, h3, .brand, .card__num, .case-story__index, .price-card__price,
.quote-band p, .gift-list li::before, .offer-line {
  font-family: 'Libre Baskerville', Georgia, serif !important;
}
h1 em, h2 em { font-style: italic !important; color: #8f6139 !important; }
.section, .closing { background: rgba(255, 250, 242, .86); }
.section--soft { background: rgba(235, 224, 211, .86); }
.section { padding: 102px 0; }
.section-heading { max-width: 830px; }
.section-heading h2, .prose h2, .closing h2 {
  color: #2b1d17;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.055em;
}
.section-heading p, .prose p, .closing p { color: var(--muted); }
.divider { background: linear-gradient(90deg, transparent, #8d6038, transparent); opacity: .5; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(252, 248, 241, .94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 25px rgba(39, 22, 12, .08);
}
.topbar__in { min-height: 84px; }
.brand { color: #2e1e17; letter-spacing: .055em; }
.brand__mark { color: #a77b45; }
.brand small { color: #7f6b59; }
.nav a { color: #4d382a; font-weight: 500; }
.nav a:hover, .nav a[aria-current=page] { color: #8f5f30; }
.menu-toggle { color: #2c1c13; border-color: var(--line); border-radius: 0; }
.button {
  min-height: 58px;
  padding: 17px 27px;
  border-radius: 0;
  font-size: .82rem;
  letter-spacing: .065em;
  text-transform: uppercase;
  box-shadow: 0 8px 18px rgba(47, 29, 17, .07);
}
.button--gold { background: #3b281e; color: #fff8ed; }
.button--gold:hover { background: #65422c; color: #fffaf2; }
.button--outline { border-color: #835c3e; background: rgba(255, 250, 242, .36); color: #3a281e; }
.button--outline:hover { background: #e6d5be; border-color: #835c3e; color: #2a1c16; }
.button--text { color: #75502f; box-shadow: none; border-bottom: 1px solid rgba(117, 80, 47, .45); }
.button--text:hover { color: #402718; }
.button-group { gap: 14px; margin-top: 34px; }
.hero--home .button-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero--home .button-group .button { min-width: 0; width: 100%; }

.hero {
  background: rgba(250, 246, 238, .86);
  border-bottom: 1px solid var(--line);
}
.hero__grid { gap: clamp(35px, 5vw, 85px); padding-top: 78px; padding-bottom: 88px; }
.hero--home .hero__grid { grid-template-columns: 1fr 1fr; }
.hero--home .hero__grid > div:first-child { grid-column: 2; grid-row: 1; }
.hero--home .hero__visual { grid-column: 1; grid-row: 1; }
.hero h1 { color: #2b1b15; letter-spacing: -.065em; line-height: 1.06; }
.hero--home .hero__grid h1 { font-size: clamp(3.4rem, 5.2vw, 5.7rem); }
.hero__lead { color: #675447; font-size: 1.11rem; line-height: 1.75; }
.hero__meta { margin-top: 27px; }
.tag { border-color: rgba(109, 72, 44, .31); color: #674d3b; border-radius: 0; }
.hero__visual, .page-hero .hero__visual {
  height: 640px;
  border: 0;
  border-radius: 0;
  box-shadow: 20px 22px 0 rgba(149, 102, 56, .13), 0 28px 65px rgba(40, 22, 12, .22);
}
.hero__visual::after { background: linear-gradient(0deg, rgba(34, 20, 13, .58), transparent 33%); }
.hero__visual img { object-position: center 35%; }
.hero__visual-caption { color: #fff6ea; }
.hero__visual-caption span { color: #f0cf9f; }
.page-hero .hero__grid { padding-top: 80px; padding-bottom: 90px; }

.card, .showcase-card, .example-card, .gift-list li {
  background: rgba(255, 252, 247, .84);
  border: 1px solid var(--line);
  box-shadow: 0 16px 38px rgba(64, 37, 20, .06);
}
.card--path { min-height: 300px; }
.card--path::before { background: linear-gradient(90deg, #a87a43, #e7d1a7, transparent); }
.card__num, .case-story__index { color: rgba(138, 91, 51, .6); }
.card h3, .showcase-card h3, .example-card h2, .gift-list h3 { color: #322018; line-height: 1.28; }
.card p, .showcase-card p, .example-card p, .gift-list p { color: #705b4d; }
.card--muted { opacity: .72; }
.step { border-top-color: #a67a45; }
.step strong { color: #946c42; }
.step p { color: #705b4d; }
.quote-band {
  background: rgba(43, 27, 18, .96);
  color: #f7ead9;
  border-color: rgba(225, 187, 132, .36);
}
.quote-band p span { color: #e4bd84; }
.closing { background: rgba(244, 232, 216, .94); }
.offer-line { color: #754e30; border-color: #aa7945; background: rgba(181, 128, 71, .1); }

.panel, .price-card, .showcase-card, .example-card { padding: 35px; }
.panel { background: rgba(255, 252, 248, .9); border-color: var(--line); }
.panel h3 { color: #35231b; }
.panel p { color: #705e51; }
.check-list li { border-bottom-color: var(--line); color: #4e392a; }
.check-list li::before { color: #a77b45; }
.price-card { background: #3b281e; color: #fff8ee; border-color: #ac8558; }
.price-card--vip { background: linear-gradient(135deg, #4a3022, #2b1c18); }
.price-card h3 { color: #fff4e4; }
.price-card__price { color: #e6c99a; }
.price-card p, .price-card__later { color: #e9dac8; }
.countdown { background: rgba(90, 57, 35, .12); color: #4c3528; }
.countdown strong { color: #8b5c30; }
.price-note, .faq p { color: #705e51; }
.field label { color: #4e382a; }
.field input, .field textarea, .field select {
  background: #fffdf8;
  color: #2a1c16;
  border-color: #b49a7c;
  border-radius: 0;
  min-height: 51px;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: #976c3e; box-shadow: 0 0 0 3px rgba(167, 123, 69, .15); }
.form-note { color: #745637; }
.checkbox-line { color: #705e51; }
.form-status { color: #3c281c; }

.case-note, .case-story dd, .case-story__source { color: #705e51; }
.case-story { border-top-color: var(--line); }
.case-story h2 { color: #302018; }
.case-story dt { color: #8b5f37; }
.case-story__source { border-top-color: var(--line); }
.example-card details summary { color: #805630; }
.filmstrip__frame { background: #4a3022; border-color: #b59167; }
.filmstrip__frame span { color: #fff4e5; background: rgba(43, 27, 18, .8); }
.mini-slide { background: linear-gradient(135deg, #5b3b27, #2f2019 68%, #8e603c); border-color: #b59167; color: #fff5e8; }
.mini-slide small { color: #ecc995; }
.lyrics { color: #493021; background: rgba(202, 166, 119, .18); }
.visual-pair img { border-color: rgba(87, 54, 35, .3); }
.mur-card img { border-color: #b88d58; }
.gift-list li::before { color: #9e7142; }
.prompt-box { background: #ead9c1; border-left-color: #9e7142; color: #3d2b20; }

.footer { background: rgba(34, 21, 16, .97); border-top-color: rgba(230, 195, 143, .38); color: #f6ead9; }
.footer .brand { color: #f8ead8; }
.footer .brand small { color: #c8ad8d; }
.footer p, .footer small, .footer__bottom { color: #d0bda7; }
.footer h3 { color: #e3bc82; }
.footer__links a { color: #e8d8c4; }
.footer__links a:hover { color: #f5d5a4; }

.assistant-toggle { background: #3d281d; border-color: #d8af76; box-shadow: 0 10px 35px rgba(36, 19, 10, .42); }
.assistant-panel { background: #fffaf2; border-color: #b58c60; box-shadow: 0 22px 65px rgba(35, 18, 10, .36); }
.assistant-panel__head { border-bottom-color: var(--line); }
.assistant-panel__head strong { color: #38241b; }
.assistant-panel__head button { color: #3d291f; }
.assistant-panel p, .assistant-identity span { color: #6d5748; }
.assistant-choices button { background: #f1e6d8; color: #38261c; border-color: #bea587; }
.assistant-answer { background: #f1e5d4; border-left-color: #a67a45; color: #3e2a1d; }
.assistant-answer a { color: #744b29; }
.celebration { background: rgba(34, 21, 16, .76); }
.celebration__card { background: linear-gradient(145deg, #fffaf1, #ebdcc8); color: #2e1e16; border-color: #a77b45; }
.celebration__card h2 { color: #2e1e16; }
.celebration__card p { color: #614a3a; }
.celebration__symbol { color: #8d5e32; background: #f1e1c8; }
.celebration__close { color: #3d281c; }
.celebration__gift { background: #f7ecda; }
.celebration__gift strong { color: #8d5e32; }

.portfolio-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.portfolio-preview__item { padding: 25px; border: 1px solid var(--line); background: rgba(255, 251, 244, .86); }
.portfolio-preview__item strong { display: block; font: 400 1.45rem/1.25 'Libre Baskerville', Georgia, serif; margin-bottom: 11px; }
.portfolio-preview__item span { color: #705e51; font-size: .88rem; }
.portfolio-preview__item small { display: block; margin-top: 18px; color: #946d42; text-transform: uppercase; letter-spacing: .1em; }

@media (max-width: 1040px) {
  .portfolio-preview { grid-template-columns: repeat(2, 1fr); }
  .hero--home .hero__grid { grid-template-columns: .9fr 1.1fr; }
}
@media (max-width: 760px) {
  .container, .topbar__in { width: min(calc(100% - 32px), var(--max)); }
  .topbar__in { min-height: 72px; }
  .nav { background: rgba(251, 246, 237, .98); border-color: var(--line); box-shadow: 0 20px 35px rgba(48, 28, 16, .15); }
  .nav a { color: #3e2b20; }
  .hero--home .hero__grid { grid-template-columns: 1fr; }
  .hero--home .hero__grid > div:first-child { grid-column: 1; grid-row: 1; }
  .hero--home .hero__visual { grid-column: 1; grid-row: 2; }
  .hero__grid, .page-hero .hero__grid { padding-top: 52px; padding-bottom: 64px; }
  .hero__visual, .page-hero .hero__visual { height: min(610px, 119vw); }
  .section { padding: 70px 0; }
}
@media (max-width: 580px) {
  .hero--home .hero__grid h1 { font-size: clamp(2.9rem, 12vw, 4.3rem); }
  .hero--home .button-group { grid-template-columns: 1fr; }
  .hero--home .button-group .button { width: 100%; min-width: 0; }
  .portfolio-preview { grid-template-columns: 1fr; }
  .card, .panel, .price-card, .showcase-card, .example-card { padding: 25px; }
  .brand { font-size: 1.17rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
