@import url("theme.css");

/* AZ Bau site composition */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 9999; top: 1rem; left: 1rem; padding: .8rem 1rem; background: var(--color-gold); color: #080808; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: fixed; width: 100%; transition: background .25s ease, box-shadow .25s ease; }
.site-header.is-scrolled { background: rgb(8 8 8 / 96%); box-shadow: 0 .5rem 2rem rgb(0 0 0 / 25%); }
.brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--color-ivory); text-decoration: none; }
.brand:hover { color: var(--color-ivory); }
.brand__logo { width: 5.8rem; height: 3.3rem; object-fit: contain; }
.brand__wordmark { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .1em; white-space: nowrap; }
.brand__wordmark b { color: var(--color-gold-light); font-weight: 600; }
.site-nav { margin-left: auto; }
.language-switcher { display: flex; align-items: center; gap: .35rem; color: var(--color-graphite); }
.language-switcher button, [data-footer-language] { border: 0; padding: .35rem; background: transparent; color: var(--color-muted); cursor: pointer; font: 600 var(--text-xs)/1 var(--font-body); letter-spacing: .08em; }
.language-switcher button.is-active, .language-switcher button:hover, [data-footer-language]:hover { color: var(--color-gold-light); }
.menu-toggle { display: none; width: 2.75rem; height: 2.75rem; border: 0; padding: .55rem; background: transparent; cursor: pointer; }
.menu-toggle > span:not(.sr-only) { display: block; width: 100%; height: 1px; margin: .38rem 0; background: var(--color-ivory); transition: transform .2s, opacity .2s; }

.hero { min-height: 100svh; padding-top: 7rem; background: radial-gradient(circle at 72% 45%, #252017 0, #11100e 22%, #080808 52%); }
.hero::before { background: linear-gradient(90deg, rgb(8 8 8 / 60%), transparent), repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), rgb(255 255 255 / 3%) 25%); }
.hero__layout { display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; gap: var(--space-7); }
.hero h1 em { color: var(--color-gold-light); font-style: normal; }
.hero__brand { position: relative; width: min(100%, 31rem); justify-self: center; }
.hero__brand::before { position: absolute; inset: -4%; border: 1px solid var(--color-border); content: ""; }
.hero__brand img { position: relative; width: 100%; box-shadow: 0 2rem 6rem rgb(0 0 0 / 55%); mix-blend-mode: lighten; }
.hero__geometry { position: absolute; z-index: -1; right: 3%; bottom: 0; width: 46vw; height: 70%; opacity: .16; }
.hero__geometry span { position: absolute; bottom: 0; width: 22%; border: 1px solid var(--color-gold); border-bottom: 0; transform: skewY(-20deg); }
.hero__geometry span:nth-child(1) { left: 5%; height: 45%; }.hero__geometry span:nth-child(2) { left: 32%; height: 75%; }.hero__geometry span:nth-child(3) { left: 59%; height: 58%; }
.scroll-cue { position: absolute; bottom: 1.5rem; left: 50%; display: grid; justify-items: center; gap: .5rem; color: var(--color-muted); font-size: .65rem; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.scroll-cue i { display: block; width: 1px; height: 2.5rem; background: linear-gradient(var(--color-gold), transparent); }

.section-heading { max-width: 52rem; margin-bottom: clamp(2.5rem, 5vw, 5rem); }
.section-heading h2 { margin-bottom: 0; }
.section-heading--split { display: grid; max-width: none; grid-template-columns: 1.3fr .7fr; align-items: end; gap: var(--space-8); }
.section-heading--split > p { margin: 0; }
.about { position: relative; overflow: hidden; }
.about::after { position: absolute; z-index: -1; right: -8rem; bottom: -8rem; width: 28rem; height: 28rem; border: 1px solid var(--color-border-subtle); content: ""; transform: rotate(45deg); }
.about__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 8vw, 8rem); }
.about__copy > p:not(.lead) { max-width: 42rem; }
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: var(--space-7); }
.values div { border-top: 1px solid var(--color-border); padding-top: 1rem; }
.values strong, .values span { display: block; }.values strong { margin-bottom: .6rem; color: var(--color-gold); font: 500 1rem var(--font-display); }.values span { color: var(--color-silver); font-size: var(--text-xs); }

.services-section { background: var(--color-surface); }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--color-border-subtle); background: var(--color-border-subtle); }
.service-card { min-height: 23rem; border: 0; border-radius: 0; padding: clamp(1.5rem, 2.8vw, 2.5rem); background: var(--color-surface); box-shadow: none; }
.service-card::before { height: 100%; background: linear-gradient(145deg, rgb(200 155 75 / 18%), transparent 58%); opacity: 0; transition: opacity .25s; }.service-card:hover::before { opacity: 1; }
.service-card__number { position: relative; display: block; color: var(--color-muted); font-size: var(--text-xs); letter-spacing: .1em; }
.service-card__icon { position: relative; width: 3.75rem; margin: auto 0 2.5rem; padding-top: 3.5rem; color: var(--color-gold-light); }
.service-card__icon svg { fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.service-card h3, .service-card p { position: relative; }.service-card h3 { min-height: 2.4em; }.service-card p { margin-bottom: 0; font-size: var(--text-sm); }

.projects-section { overflow: hidden; background: var(--color-black); }
.project-videos { display: grid; grid-template-columns: repeat(2, minmax(0, 28rem)); align-items: stretch; justify-content: center; gap: clamp(1rem, 3vw, 3rem); }
.project-video { display: grid; grid-template-rows: minmax(0, 1fr) auto; margin: 0; border: 1px solid var(--color-border-subtle); background: var(--color-black-soft); }
.project-video__media { position: relative; aspect-ratio: 9 / 16; overflow: hidden; background: #050505; }
.project-video__media::after { position: absolute; inset: 0; border: 1px solid rgb(255 255 255 / 5%); content: ""; pointer-events: none; }
.project-video video { width: 100%; height: 100%; background: #050505; object-fit: contain; }
.project-video figcaption { display: grid; grid-template-columns: 2.5rem 1fr; gap: .2rem 1rem; border-top: 1px solid var(--color-border-subtle); padding: 1.25rem 1.5rem; }
.project-video figcaption span { grid-row: 1 / 3; color: var(--color-gold); font: 600 1rem var(--font-display); }
.project-video figcaption strong { color: var(--color-ivory); font-size: var(--text-sm); font-weight: 600; }
.project-video figcaption small { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.5; }

.process { padding-block: var(--space-section); background: linear-gradient(110deg, #8f672b, #c89b4b 55%, #e5c77f); color: var(--color-black); }
.process :is(h2,h3,p), .process .eyebrow { color: var(--color-black); }.process .eyebrow::before { background: var(--color-black); }
.process__grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 8vw, 8rem); }
.process__steps { margin: 0; padding: 0; list-style: none; }
.process__steps li { display: grid; grid-template-columns: 3rem 1fr; gap: 1.2rem; border-top: 1px solid rgb(8 8 8 / 30%); padding: 1.2rem 0; }
.process__steps li:last-child { border-bottom: 1px solid rgb(8 8 8 / 30%); }.process__steps > li > span { font: 600 1rem var(--font-display); }.process__steps h3 { margin-bottom: .25rem; font-family: var(--font-body); font-size: 1rem; }.process__steps p { margin: 0; font-size: var(--text-sm); }

.info-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1px; background: var(--color-border-subtle); }
.info-card { min-height: 30rem; padding: clamp(1.5rem, 3vw, 3rem); background: var(--color-black-soft); }
.info-card--contact { background: var(--color-charcoal); }.info-card__label { display: block; margin-bottom: 3rem; color: var(--color-gold-light); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.contact-list { margin: 2.5rem 0; padding: 0; list-style: none; }.contact-list li { display: grid; grid-template-columns: 5rem 1fr; border-top: 1px solid var(--color-border-subtle); padding: .85rem 0; }.contact-list li > span { color: var(--color-muted); font-size: var(--text-xs); }.contact-list a, .contact-list address { color: var(--color-silver); font-style: normal; text-decoration: none; }
.hours { margin-top: 2.5rem; }.hours div { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--color-border-subtle); padding: .85rem 0; }.hours dt { color: var(--color-silver); }.hours dd { margin: 0; color: var(--color-gold-light); white-space: nowrap; }.note { margin-top: 2rem; font-size: var(--text-xs); }
.map-frame { position: relative; min-height: 12rem; margin: 1.5rem 0; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-charcoal); }
.map-placeholder { display: grid; align-content: center; justify-items: center; gap: 1rem; background: radial-gradient(circle at 50% 42%, rgb(200 155 75 / 13%), transparent 45%), repeating-linear-gradient(45deg, transparent 0 2rem, rgb(255 255 255 / 2%) 2rem calc(2rem + 1px)); color: var(--color-gold-light); }
.map-placeholder svg { width: 3.5rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.2; }
.map-placeholder span { color: var(--color-silver); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.text-link { font-size: var(--text-sm); font-weight: 600; text-decoration: none; }

.site-footer { padding-top: var(--space-8); }
.footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--space-8); padding-bottom: var(--space-8); }.footer__brand img { width: 7rem; margin-bottom: 1rem; }.footer__brand p { max-width: 22rem; }.footer__top h2 { color: var(--color-gold-light); font: 600 var(--text-xs) var(--font-body); letter-spacing: .12em; text-transform: uppercase; }.footer__top > div:not(:first-child) { display: flex; flex-direction: column; gap: .65rem; }.footer__top a, .footer__top span { color: var(--color-muted); font-size: var(--text-sm); text-decoration: none; }.footer__top a:hover { color: var(--color-gold-light); }
.footer__bottom { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--color-border-subtle); padding-block: 1.4rem; color: var(--color-muted); font-size: var(--text-xs); }.footer__bottom a { color: var(--color-muted); }

.legal-page { min-height: calc(100vh - 8rem); padding: 10rem 0 var(--space-section); background: linear-gradient(120deg, #080808, #13110e); }.legal-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(3rem, 8vw, 8rem); }.legal-heading { position: sticky; top: 8rem; align-self: start; }.legal-heading h1 { margin-bottom: 1rem; }.legal-content { max-width: 48rem; }.legal-content section { border-top: 1px solid var(--color-border-subtle); padding: 2rem 0; }.legal-content h2 { font-size: var(--text-xl); }.legal-content a { overflow-wrap: anywhere; }.legal-alert { margin-bottom: 2rem; border: 1px solid var(--color-gold); padding: 1.25rem; background: rgb(200 155 75 / 9%); }.legal-alert strong { color: var(--color-gold-light); }.legal-alert p { margin: .5rem 0 0; font-size: var(--text-sm); }.legal-data div { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--color-border-subtle); padding: .7rem 0; }.legal-data dt { color: var(--color-muted); }.legal-data dd { margin: 0; }.legal-footer { padding-top: 0; }

.reveal { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s ease, transform .7s ease; }.reveal.is-visible { opacity: 1; transform: none; }

.gdpr-dialog { position: fixed; z-index: 4000; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem); left: clamp(1rem, 3vw, 2.5rem); border: 1px solid var(--color-border); background: rgb(15 15 15 / 98%); box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 65%); }
.gdpr-dialog[hidden] { display: none; }
.gdpr-dialog__content { display: grid; width: min(100%, 75rem); grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.5rem, 4vw, 4rem); margin-inline: auto; padding: clamp(1.5rem, 3vw, 2.5rem); }
.gdpr-dialog__content h2 { margin-bottom: .65rem; font-size: clamp(1.6rem, 3vw, 2.5rem); }
.gdpr-dialog__content p { max-width: 54rem; margin: 0; font-size: var(--text-sm); }
.gdpr-dialog__eyebrow { margin-bottom: .55rem !important; color: var(--color-gold-light) !important; font-size: var(--text-xs) !important; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.gdpr-dialog__button { flex: none; white-space: nowrap; }

@media (max-width: 64rem) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .info-grid { grid-template-columns: 1fr 1fr; }.info-card--contact { grid-column: 1 / -1; min-height: auto; }
  .project-videos { grid-template-columns: repeat(2, minmax(0, 24rem)); }
}

@media (max-width: 48rem) {
  body { overflow-x: clip; }.container, .container--narrow { width: 100%; padding-inline: var(--gutter); }.site-header__inner { gap: .6rem; }.brand { margin-right: auto; }.brand__wordmark { display: none; }.brand__logo { width: 5rem; height: 2.85rem; }.language-switcher { order: 2; }.menu-toggle { display: block; order: 3; margin-left: 0; }.site-nav { position: fixed; inset: 4.5rem 0 auto; display: grid; gap: 0; margin: 0; padding: 1rem var(--gutter) 1.5rem; border-bottom: 1px solid var(--color-border); background: rgb(8 8 8 / 98%); opacity: 0; pointer-events: none; transform: translateY(-1rem); transition: .2s; }.site-nav.is-open { opacity: 1; pointer-events: auto; transform: none; }.site-nav a { border-bottom: 1px solid var(--color-border-subtle); padding: 1rem 0; }.menu-toggle.is-open > span:nth-of-type(2) { transform: translateY(7px) rotate(45deg); }.menu-toggle.is-open > span:nth-of-type(3) { opacity: 0; }.menu-toggle.is-open > span:nth-of-type(4) { transform: translateY(-7px) rotate(-45deg); }.legal-nav { display: none; }
  .hero__layout, .about__grid, .section-heading--split, .process__grid, .legal-layout { grid-template-columns: minmax(0, 1fr); }.hero__layout > *, .about__grid > *, .process__grid > * { min-width: 0; }.hero__layout { padding-bottom: 5rem; }.hero__content { padding-top: 2rem; }.hero h1 { overflow-wrap: anywhere; }.hero__brand { width: min(80%, 22rem); margin: 0 auto; }.scroll-cue { display: none; }
  .section-heading--split { gap: 1.5rem; }.values { grid-template-columns: 1fr; }.services-grid, .info-grid { grid-template-columns: 1fr; }.service-card { min-height: 21rem; border-right: 0; border-bottom: 1px solid var(--color-border-subtle); }.service-card:last-child { border-bottom: 0; }.info-card--contact { grid-column: auto; }.footer__top { grid-template-columns: 1fr 1fr; }.footer__brand { grid-column: 1 / -1; }.legal-heading { position: static; }.footer__bottom { flex-wrap: wrap; }
  .project-videos { grid-template-columns: minmax(0, 28rem); }
  .gdpr-dialog__content { grid-template-columns: 1fr; align-items: stretch; }
  .gdpr-dialog__button { width: 100%; }
}

@media (max-width: 30rem) { .hero__actions .button { width: 100%; }.footer__top { grid-template-columns: 1fr; }.footer__brand { grid-column: auto; }.contact-list li { grid-template-columns: 1fr; gap: .2rem; }.legal-data div { grid-template-columns: 1fr; gap: .2rem; } }

@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }