/* Live type and untouched original photographs over the existing artist's paper. */
:root { --button-green: #315d49; --button-green-hover: #244b39; }
.header-cta, .button { background: var(--button-green); color: var(--paper); }
.header-cta:hover, .button:is(:hover, :focus-visible) { background: var(--button-green-hover); box-shadow: 0 8px 18px #244b3924; transform: none; }
.button { transition: background-color .22s ease, box-shadow .25s ease; }
.button svg { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .28s cubic-bezier(.16,1,.3,1); }
.button:is(:hover, :focus-visible) svg { transform: translate(3px, -3px); }
.carousel-controls button { color: var(--button-green); }
.faq summary, .faq summary span, .faq-list summary::after { color: var(--button-green); }
.carousel-controls button:not(:disabled):is(:hover, :focus-visible) { color: var(--button-green-hover); background: #315d4910; border-radius: 50%; }
.contact-form .button:disabled { cursor: wait; opacity: .7; box-shadow: none; }
.form-status { margin: 0; font: .9rem/1.5 Arial, sans-serif; color: var(--ink); }
.form-status[data-state="error"] { color: #923b30; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.hero-exact { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: auto 1fr; align-items: center; column-gap: 2rem; min-height: 100svh; padding: 0 max(5.5vw, calc((100vw - 1500px) / 2)) 3rem; background: #faf1e2 url("assets/murais/backgrounds/hero-desktop-extension-v1.webp") center / cover no-repeat; }
.mural-mobile-header { position: relative; z-index: 5; grid-column: 1 / -1; display: flex; align-items: center; min-height: 108px; }
.mural-mobile-brand { color: var(--ink); font: clamp(1.9rem, 2.5vw, 2.7rem)/1 Georgia, serif; letter-spacing: -.04em; text-decoration: none; }
.mural-mobile-brand em { color: var(--coral); }
.mural-mobile-brand small { display: block; margin-top: .6rem; font: 700 .57rem/1.3 Arial, sans-serif; letter-spacing: .19em; text-transform: uppercase; }
.mural-mobile-menu { display: none; }
.hero-header-actions { position: absolute; right: 0; top: 27px; display: flex; align-items: center; gap: 1rem; }
.language-switch { display: inline-flex; align-items: center; gap: .2rem; padding: .2rem; border: 1px solid #315d4938; border-radius: 999px; font: 700 .72rem Arial, sans-serif; }
.language-switch a { display: grid; place-items: center; min-width: 34px; min-height: 38px; padding: .4rem; color: var(--button-green); border-radius: 999px; text-decoration: none; transition: background-color .22s ease, color .22s ease; }
.language-switch a[aria-current="page"] { background: var(--button-green); color: var(--paper); }
.language-switch a:not([aria-current]):is(:hover, :focus-visible) { background: #315d4914; }
.hero-desktop-nav { position: absolute; z-index: 6; top: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; min-height: 108px; gap: clamp(1.4rem, 3vw, 3rem); white-space: nowrap; font: 700 .85rem Arial, sans-serif; }
.hero-desktop-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .4rem; text-decoration: none; }
.hero-desktop-nav a::after { content: ""; position: absolute; inset: auto .4rem .2rem; height: 2px; background: var(--button-green); transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.16,1,.3,1); }
.hero-desktop-nav a:is(:hover, :focus-visible) { color: var(--button-green); }
.hero-desktop-nav a:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.hero-header-cta { position: relative; z-index: 6; min-height: 54px; }
.hero-exact-copy { position: relative; z-index: 2; max-width: 750px; padding: 1.5rem 0; }
.hero-exact-copy h1 { max-width: 14ch; margin: 0; font-size: clamp(3.4rem, 5.7vw, 6rem); font-weight: 400; line-height: 1.06; letter-spacing: -.04em; text-wrap: balance; }
.hero-exact-copy h1 em { color: var(--coral); font-weight: 400; }
.hero-exact-copy > p { max-width: 43ch; font-size: clamp(1rem, 1.35vw, 1.3rem); line-height: 1.55; margin: 2rem 0; }
.hero-mobile-cta { display: inline-flex; }
.hero-exact-copy .hero-exact-proof { margin: 1.7rem 0 0; font-size: 1rem; color: var(--muted); }
.hero-proof-desktop { display: inline-flex; align-items: center; gap: 1.25rem; color: var(--ink); }
.hero-proof-desktop strong { font: 400 clamp(3rem, 4.5vw, 4.5rem)/1 Georgia, serif; letter-spacing: -.04em; }
.hero-proof-desktop > span { padding-left: 1.25rem; border-left: 1px solid #183a4052; font: 1rem/1.45 Georgia, serif; }
.hero-proof-mobile { display: none; }
.hero-real-art { position: relative; width: min(100%, calc((100svh - 170px) * .9)); aspect-ratio: .9; margin: 0 auto; }
.hero-real-art figure { position: absolute; margin: 0; padding: 12px 12px 0; background: #fffaf0; box-shadow: 10px 18px 28px #353b332b; }
.hero-real-main { z-index: 1; top: 2%; right: 2%; width: 78%; transform: rotate(4deg); }
.hero-real-main::before { content: ""; position: absolute; z-index: 2; left: 36%; top: -12px; width: 29%; height: 28px; background: #d7b978c9; transform: rotate(-7deg); }
.hero-real-art img { display: block; width: 100%; height: auto; }
.hero-real-art figcaption { margin: 0; padding: 1rem .1rem 1.15rem; color: #6e6355; font: italic clamp(.75rem, 1.05vw, 1rem)/1.4 Georgia, serif; text-align: center; }
.hero-real-detail { z-index: 2; left: -2%; bottom: 2%; width: 38%; transform: rotate(-7deg); }
.hero-real-detail figcaption { padding: .65rem 0 .9rem; color: var(--coral-dark); font-size: clamp(.65rem, .85vw, .8rem); }

.postit--mountains .photo-frame { position: relative; display: block; height: auto; aspect-ratio: 1.24; }
.postit--mountains .photo-frame img { position: absolute; inset: 0; object-fit: cover; object-position: center 73%; }
.postit--mountains .photo-frame img:nth-child(2) { object-position: center 69%; }

/* Desktop framing follows each original photograph's subject. */
@media (min-width: 1001px) {
  .wall .postit--clouds { grid-column: 2 / 7; }
  .wall .postit--clouds .photo-frame { position: relative; display: block; height: auto; aspect-ratio: 4 / 5; }
  .postit--clouds .photo-frame img { position: absolute; inset: 0; object-fit: contain; }
  .wall .postit--clouds .photo-frame:has(img:first-child:not([hidden])) { aspect-ratio: 1.14; }
  .postit--clouds .photo-frame img:first-child { object-fit: cover; object-position: center 47%; }
  .wall .postit--clouds .photo-frame:has(img:nth-child(2):not([hidden])) { aspect-ratio: .96; }
  .postit--clouds .photo-frame img:nth-child(2) { position: absolute; inset: 0; object-fit: cover; object-position: center top; }
  .postit--sky .photo-frame { position: relative; display: block; height: auto; aspect-ratio: 3 / 4; }
  .postit--sky .photo-frame img { position: absolute; inset: 0; object-fit: contain; }
  .postit--sky .photo-frame:has(img:first-child:not([hidden])) { aspect-ratio: 1.05; }
  .postit--sky .photo-frame img:first-child { object-fit: cover; object-position: center 80%; }
  .postit--sky .photo-frame:has(img:nth-child(2):not([hidden])) { aspect-ratio: .84; }
  .postit--sky .photo-frame img:nth-child(2) { object-fit: cover; object-position: center bottom; }
}

@media (max-width: 1000px) {
  .hero-exact { display: block; padding: 0 0 2rem; min-height: 100svh; background-image: url("assets/murais/backgrounds/hero-mobile-paper-v1.webp"); }
  .hero-desktop-nav, .hero-header-cta { display: none; }
  .mural-mobile-header { justify-content: space-between; min-height: 86px; gap: 1rem; padding: 1rem .75rem; border-bottom: 1px solid #183a4018; }
  .hero-header-actions { position: static; margin-left: auto; }
  .language-switch { font-size: .68rem; }
  .language-switch a { min-width: 30px; min-height: 40px; }
  .mural-mobile-brand { font-size: 1.75rem; }
  .mural-mobile-brand small { font-size: .55rem; letter-spacing: .16em; }
  .mural-mobile-menu { display: block; margin-left: 0; }
  .mural-mobile-menu summary { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding-left: .6rem; cursor: pointer; list-style: none; color: var(--button-green); font: 700 .85rem Arial, sans-serif; }
  .mural-mobile-menu summary::-webkit-details-marker { display: none; }
  .mural-mobile-menu nav { position: absolute; top: calc(100% - 1px); inset-inline: 0; padding: .7rem 1.4rem 1.2rem; background: #faf1e2; box-shadow: 0 12px 18px #183a4014; }
  .mural-mobile-menu nav a { display: flex; align-items: center; min-height: 48px; color: var(--button-green); border-bottom: 1px solid #183a4020; text-decoration: none; font: 700 .95rem Arial, sans-serif; }
  .hero-exact-copy { padding: 1.75rem 1.4rem 1rem; }
  .hero-exact-copy h1 { max-width: 15ch; font-size: clamp(2.5rem, 10vw, 4rem); line-height: 1.05; letter-spacing: -.035em; }
  .hero-exact-copy > p { max-width: 44ch; margin: 1rem 0 1.25rem; font-size: 1rem; line-height: 1.5; }
  .hero-exact-copy .hero-exact-proof { margin: .9rem 0 0; font-size: .85rem; }
  .hero-proof-desktop { display: none; }
  .hero-proof-mobile { display: inline; }
  .hero-mobile-cta { min-height: 48px; padding: .9rem 1.35rem; }
  .hero-real-art { width: min(88%, 520px); margin: 1.6rem auto 1rem; }
  .hero-real-main { right: 1%; }
  .hero-real-detail { left: 0; width: 40%; }
  .hero-real-art figure { padding: 9px 9px 0; }
  .hero-real-art figcaption { font-size: .76rem; padding: .75rem 0 .9rem; }
  .hero-real-detail figcaption { font-size: .63rem; padding: .6rem 0 .8rem; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .hero-desktop-nav { left: 48%; gap: 1rem; font-size: .77rem; }
  .hero-header-actions { gap: .65rem; }
  .hero-header-cta { padding-inline: 1.1rem; gap: .75rem; font-size: .78rem; }
}
@media (max-width: 450px) {
  .mural-mobile-header { gap: .55rem; }
  .mural-mobile-brand { font-size: 1.6rem; }
  .mural-mobile-brand small { font-size: .48rem; }
  .mural-mobile-menu summary { gap: .4rem; padding-left: 0; font-size: .75rem; }
}
@media (min-width: 600px) and (max-width: 1000px) {
  .hero-exact { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; padding-bottom: 3rem; }
  .mural-mobile-header { grid-column: 1 / -1; }
  .hero-exact-copy { padding-block: 2.5rem; }
  .hero-exact-copy h1 { font-size: clamp(2.5rem, 5.6vw, 3.8rem); }
  .hero-real-art { width: 90%; }
}
@media (max-width: 650px) {
  .statement, .portfolio, .why-mural, .behind-wall, .contact, .faq, .process.process { padding: 3.5rem 1.4rem; gap: 2rem; }
  .statement h2, .section-heading h2, .why-mural h2, .behind-wall h2, .process h2, .contact h2, .faq h2 { font-size: clamp(2.35rem, 9.5vw, 3.3rem); }
  .section-heading { margin-bottom: 2.5rem; }
  .postit:nth-child(n) { transform: none; }
  .photo-frame, .postit:nth-child(1) .photo-frame { height: auto; aspect-ratio: 4 / 5; }
  .postit--mountains .photo-frame { aspect-ratio: 1.24; }
  .contact-form { grid-template-columns: 1fr; padding: 1.25rem; gap: 1.1rem; }
  .contact-form .wide { grid-column: 1; }
  .contact-form input, .contact-form textarea { min-height: 48px; }
  .site-footer a { display: inline-flex; align-items: center; min-height: 44px; }
  body { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
  .button, .button svg, .hero-desktop-nav a::after, .language-switch a { transition: none; }
  .button:is(:hover, :focus-visible) svg { transform: none; }
}

/* A compact painted strip with a gently irregular paper edge. */
.statement {
  z-index: 2;
  margin-block: -18px;
  padding-block: clamp(2rem, 2.8vw, 3rem);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 22C35 8 65 32 105 20S170 9 220 25S290 13 345 19S405 32 470 17S535 12 595 24S665 8 730 20S795 31 850 16S925 10 1000 23V978C960 990 935 970 890 983S815 995 760 978S700 990 640 984S565 973 505 986S430 995 375 980S300 988 240 983S170 971 110 987S45 990 0 979Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 22C35 8 65 32 105 20S170 9 220 25S290 13 345 19S405 32 470 17S535 12 595 24S665 8 730 20S795 31 850 16S925 10 1000 23V978C960 990 935 970 890 983S815 995 760 978S700 990 640 984S565 973 505 986S430 995 375 980S300 988 240 983S170 971 110 987S45 990 0 979Z'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.statement h2 { font-size: clamp(2.8rem, 4.6vw, 4.8rem); }
.statement-copy > p:last-child { margin-top: 1.25rem; }
.portfolio .section-heading { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; }
.portfolio .section-heading h2 { max-width: 1100px; text-wrap: balance; }
.portfolio .section-heading > p { max-width: 58ch; margin: 0; text-wrap: pretty; }
.portfolio .portfolio-note { width: fit-content; max-width: 850px; margin: 4rem auto 0; padding: 1.5rem 2rem; color: var(--ink); font-size: clamp(1.45rem, 2.5vw, 2.2rem); line-height: 1.35; text-wrap: balance; }
.portfolio-note strong { color: var(--coral); font-weight: 400; text-decoration: underline; text-decoration-color: #bd9b615c; text-decoration-thickness: 3px; text-underline-offset: .2em; }
.why-list { padding: 1rem 1.75rem; background: #fff9edc9 url("assets/murais/backgrounds/paper.webp") center / auto 450% no-repeat; box-shadow: 7px 12px 24px #183a4017; }
.why-list::before { content: ""; position: absolute; width: 90px; height: 22px; left: calc(50% - 45px); top: -11px; background: #d6b77485; transform: rotate(-4deg); }
.why-list article { grid-template-columns: 2.6rem 1fr; column-gap: 1rem; padding-block: 1.5rem; border-top: 1px solid #ad8c7738; }
.why-list article:first-child { border-top: 0; }
.why-list article:last-child { border-bottom: 0; }
.why-list article > span { display: grid; place-items: center; align-self: start; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; background: #dce5d7 url("assets/murais/backgrounds/process.webp") center / auto 300% no-repeat; font: italic 1.25rem Georgia, serif; color: var(--ink); }
.why-list article:nth-child(2) > span { background-color: #eed9c7; color: var(--coral); background-image: url("assets/murais/backgrounds/transformation.webp"); }
.why-list article:nth-child(3) > span { background-image: url("assets/murais/backgrounds/artist.webp"); }
@media (max-width: 650px) {
  .portfolio .portfolio-note { margin-top: 2.5rem; padding: 1rem .25rem; }
  .why-list { padding: .5rem 1rem; }
  .why-list article { column-gap: .8rem; }
  .statement { padding-block: 2rem; }
  .statement h2 { font-size: clamp(2.35rem, 9.5vw, 3.3rem); }
}