/* Kontaktprøve: et roligt tekstfelt og et geometrisk, interaktivt landskab. */
.contact-page{background:var(--mineral)}
.contact-hero{position:relative;isolation:isolate;min-height:calc(100svh - 105px);display:flex;align-items:center;padding:150px var(--gutter) 115px;overflow:hidden}
.contact-copy{position:relative;z-index:1;width:51%;max-width:780px;margin-left:max(0px,calc((100vw - 1920px)/2))}
.contact-copy .section-label{margin:0 0 29px}
.contact-copy h1{font-family:var(--serif);font-weight:400;font-size:clamp(50px,5.8vw,88px);line-height:1.09;letter-spacing:-.045em;margin:0 0 30px}
.contact-description{max-width:480px;font-size:clamp(17px,1.4vw,21px);line-height:1.55;margin:0 0 45px;text-wrap:pretty}
.contact-email{display:inline-flex;align-items:center;gap:30px;padding:0 0 13px;border-bottom:1px solid currentColor;font-size:clamp(22px,2.3vw,33px);line-height:1.3;letter-spacing:-.025em}
.contact-email svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .2s}
.contact-email:hover svg{transform:translateX(6px)}
.contact-email:hover{color:var(--petrol)}
.contact-note{margin:23px 0 0;font-size:14px;line-height:1.65;color:var(--mint-dark)}
.contact-art{position:absolute;inset:80px -9% -3% 43%;z-index:-1;mask-image:linear-gradient(90deg,transparent,var(--petrol-dark) 13%);-webkit-mask-image:linear-gradient(90deg,transparent,var(--petrol-dark) 13%)}
.contact-canvas{display:block;width:100%;height:100%;opacity:0}
.contact-art.is-ready .contact-canvas{opacity:1}
.contact-art.is-ready .contact-fallback{display:none}
.contact-fallback{position:absolute;inset:9% 8% 10% 5%;display:grid;grid-template-columns:repeat(8,1fr);align-items:center;justify-items:center;transform:rotate(-9deg)}
.contact-fallback i{display:block;width:clamp(20px,3vw,44px);aspect-ratio:1;background:var(--mint-dark);transform:rotate(18deg);box-shadow:8px 13px 16px color-mix(in srgb,var(--petrol-dark) 9.41%,transparent)}
.contact-fallback i:nth-child(3n){background:var(--orange-mid);border-radius:50%;width:clamp(22px,3.3vw,50px);border:9px solid var(--orange-mid);background:transparent}
.contact-fallback i:nth-child(3n + 1){clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--mint-mid)}
.contact-fallback i:nth-child(5n){background:var(--petrol-mid)}
.contact-art-caption{position:absolute;right:var(--gutter);bottom:42px;display:flex;gap:12px;align-items:center;font-size:12px;letter-spacing:.03em;color:var(--mint-dark)}
.contact-art-caption span{width:6px;height:6px;background:var(--mint-dark);border-radius:50%}
.contact-page .site-footer{margin-top:0;position:relative}
@media(min-width:1921px){.contact-art{right:calc((100vw - 1920px)/2 - 170px);left:calc((100vw - 1920px)/2 + 830px)}}
@media(max-width:1100px){.contact-hero{min-height:calc(100svh - 100px)}.contact-copy{width:58%}.contact-copy h1{font-size:clamp(50px,6vw,70px)}.contact-art{left:47%;right:-20%}.contact-description{max-width:365px}.desktop-break{display:none}}
@media(max-width:680px){
 .contact-hero{display:block;min-height:0;padding:136px var(--gutter) 330px}
 .contact-copy{width:100%;max-width:520px;margin:0}
 .contact-copy .section-label{margin-bottom:23px}
 .contact-copy h1{font-size:clamp(44px,8.6vw,58px);margin-bottom:24px}
 .contact-description{font-size:17px;max-width:360px;margin-bottom:32px}
 .contact-email{font-size:26px;gap:24px}
 .contact-note{font-size:13px;margin-top:20px}
 .contact-art{inset:auto -15% -14px -15%;height:310px;mask-image:linear-gradient(180deg,transparent,var(--petrol-dark) 16%);-webkit-mask-image:linear-gradient(180deg,transparent,var(--petrol-dark) 16%)}
 .contact-art-caption{bottom:18px;font-size:11px}
 .contact-page .site-footer{gap:22px;padding-top:26px;padding-bottom:26px}
 .contact-fallback{inset:15% 9% 10%;grid-template-columns:repeat(8,1fr)}
}
@media(prefers-reduced-motion:reduce){.contact-email svg{transition:none}}

/* Lokal billedprøve: hele den afsluttede underkant bevares over kontaktteksten. */
.contact-red-hero{position:relative;isolation:isolate}
.contact-red-art{overflow:hidden;line-height:0}
.contact-red-art img{display:block;width:100%;height:auto;filter:none}
.contact-red-intro{position:absolute;left:var(--gutter);top:118px;width:min(600px,calc(100% - 2 * var(--gutter)));padding:28px;color:var(--mineral);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.contact-red-intro .section-label{margin:0 0 22px}
.contact-red-intro h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,4.5vw,76px);line-height:1.09;letter-spacing:-.045em;margin:0}
.contact-red-details{padding:20px var(--gutter) 80px;color:var(--ink)}
.contact-red-details .contact-copy{width:100%;max-width:780px}
.contact-red-details .contact-description{max-width:620px}
.contact-red-details .contact-email:hover{color:var(--petrol)}
@media(max-width:1200px){.contact-red-art img{width:120%;max-width:none;margin-left:-10%}.contact-red-intro{top:105px}}
@media(max-width:680px){.contact-red-art img{width:280%;margin-left:-90%}.contact-red-intro{top:102px;padding:22px}.contact-red-intro h1{font-size:clamp(38px,9vw,54px)}.contact-red-details{padding-top:8px;padding-bottom:50px}.contact-red-details .contact-description{margin-bottom:30px}}