/* ==================================================================
   Oldcraft Sattlerei Höltschi · Website
   Design & Umsetzung: Casa Luvoni
   ================================================================== */

@font-face { font-family: "Peachi"; src: url("../fonts/peachi-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Peachi"; src: url("../fonts/peachi-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Azo Sans"; src: url("../fonts/azo-sans-regular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Azo Sans"; src: url("../fonts/azo-sans-medium.woff") format("woff"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --brown: #412717;
  --brown-deep: #2d1b10;
  --gold: #807242;
  --cream: #f0ebe4;
  --cream-light: #fffaf3;
  --sand: #ded7cf;
  --white: #f5f5f5;
  --line: rgba(65, 39, 23, .1);
  --muted: rgba(0, 0, 0, .55);
  --muted-brown: rgba(65, 39, 23, .7);
  --serif: "Peachi", Georgia, serif;
  --sans: "Azo Sans", "Helvetica Neue", Arial, sans-serif;
  --ui: "Inter", "Helvetica Neue", Arial, sans-serif;
  --nav-w: 250px;
  --pad: 64px;
  --content: 1047px;
  --radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--cream); color: var(--brown); font-family: var(--sans); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
button { font: inherit; color: inherit; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 50%; top: 16px; transform: translate(-50%, -200%); z-index: 100; background: #000; color: #fff; padding: 12px 18px; border-radius: 12px; border: 1px solid #fff; font-family: var(--ui); text-decoration: none; }
.skip:focus { transform: translate(-50%, 0); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Typografie ---------- */
.eyebrow { font-family: var(--ui); font-size: 20px; line-height: 1.4; letter-spacing: .17em; text-transform: uppercase; text-align: center; }
.h-section { font-family: var(--serif); font-weight: 400; font-size: 45px; line-height: 1.4; letter-spacing: -.005em; text-align: center; margin-top: 11px; }
.h-card { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.2; letter-spacing: .02em; }

/* ---------- Navigation ---------- */
.nav { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: var(--nav-w); background: var(--cream); border-right: 1px solid var(--line); overflow-y: auto; }
.nav__bar { padding: 30px 30px 30px; }
.nav__logo { display: block; width: 190px; }
.nav__logo img { width: 100%; height: auto; }
.nav__toggle { display: none; }
.nav__menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.nav__menu li { border-bottom: 1px solid var(--line); }
.nav__menu a { display: block; padding: 14.7px 36px; font-family: var(--serif); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: .02em; text-decoration: none; color: var(--brown); transition: color .2s, background-color .2s; }
.nav__menu a:hover { color: var(--gold); background: rgba(65, 39, 23, .03); }
.nav__menu a[aria-current="page"] { color: var(--gold); }

.main { margin-left: var(--nav-w); min-height: 100vh; display: flex; flex-direction: column; }
.main > :last-child { margin-top: auto; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-height: 50px; padding: 12px 16px; border: 0; border-radius: var(--radius); background: var(--brown); color: #fff; font-family: var(--ui); font-weight: 600; font-size: 18px; line-height: 1.45; letter-spacing: -.005em; text-decoration: none; cursor: pointer; transition: background-color .2s, transform .2s; }
.btn:hover { background: #573522; }
.btn:active { transform: translateY(1px); }
.btn--light { background: var(--cream); color: var(--brown); border-radius: 16px; min-height: 52px; padding: 13px 22px; }
.btn--light:hover { background: #fff; }
.link-arrow { font-family: var(--sans); font-weight: 500; color: var(--gold); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Sektionen ---------- */
.section { padding: 100px var(--pad) 64px; border-bottom: 1px solid var(--line); }
.section__head { margin-bottom: 64px; }
.section > *:not(.team) { max-width: var(--content); margin-left: auto; margin-right: auto; }

/* ---------- Startseite: Hero ---------- */
.hero { position: relative; height: 600px; display: grid; place-items: start center; overflow: hidden; color: var(--white); isolation: isolate; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; background: rgba(45, 27, 16, .8); z-index: -1; }
.hero__inner { width: 100%; padding: 112px 80px 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero__logo { width: 457px; height: auto; }
.hero__title { margin-top: 50px; font-family: var(--serif); font-weight: 400; font-size: 45px; line-height: 1.1; letter-spacing: .02em; min-height: 1.1em; }
.type { position: relative; display: inline-block; }
.type__ghost { visibility: hidden; }
.type__text { position: absolute; left: 0; top: 0; white-space: nowrap; }
.type__text::after { content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 3px; vertical-align: -0.15em; background: currentColor; animation: blink 1s steps(1) infinite; }
.type.is-static .type__ghost { visibility: visible; }
.type.is-static .type__text { display: none; }
@keyframes blink { 50% { opacity: 0; } }
.hero__text { margin-top: 24px; max-width: 760px; font-family: var(--ui); font-weight: 300; font-size: 24px; line-height: 1.4; letter-spacing: .02em; }

/* ---------- Startseite: Intro ---------- */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 120px var(--pad); border-bottom: 1px solid var(--line); }
.intro__col { max-width: 492px; }
.intro__col:nth-child(2) { justify-self: end; width: 100%; }
.intro__icon { width: 96px; height: 82px; margin-bottom: 24px; }
.intro .h-card { margin-bottom: 24px; }
.intro__text p { font-size: 20px; line-height: 1.45; letter-spacing: -.005em; color: var(--muted); }
.intro__text p + p { margin-top: 29px; }

/* ---------- Startseite: Kacheln ---------- */
.tiles-section { border-bottom: 0; padding-bottom: 72px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.tile { position: relative; display: flex; align-items: flex-end; aspect-ratio: 330 / 320; overflow: hidden; background: var(--brown); color: var(--cream-light); text-decoration: none; isolation: isolate; }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(45, 27, 16, 0) 35%, rgba(45, 27, 16, .85) 100%); }
.tile:hover .tile__img { transform: scale(1.04); }
.tile__label { padding: 24px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: .02em; hyphens: manual; overflow-wrap: normal; word-break: normal; }
.tile--more { background: var(--brown); }
.tile--more::after { display: none; }
.tile--more .tile__label span { display: inline-block; font-family: var(--ui); font-weight: 500; transition: transform .2s; }
.tile--more:hover .tile__label span { transform: translateX(4px); }

/* ---------- Kundenstimmen & Logos ---------- */
.quotes-section, .logos-section { border-bottom: 1px solid var(--line); }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; }
.quote { background: var(--cream-light); padding: 32px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 24px; }
.quote blockquote { margin: 0; font-family: var(--serif); font-size: 20px; line-height: 1.45; }
.quote blockquote p + p { margin-top: 12px; }
.quote blockquote::before { content: "“"; display: block; font-size: 56px; line-height: .6; color: var(--gold); margin-bottom: 8px; }
.quote figcaption { margin-top: auto; display: flex; flex-direction: column; font-size: 15px; }
.quote figcaption span { color: var(--muted-brown); }
.logos { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px 56px; }
.logos img { max-height: 64px; max-width: 160px; width: auto; filter: grayscale(1) sepia(.35); opacity: .8; transition: filter .2s, opacity .2s; }
.logos a:hover img { filter: none; opacity: 1; }

/* ---------- Seiten-Hero ---------- */
.phero { background: var(--brown); color: var(--cream); text-align: center; min-height: 345px; padding: 120px 80px 80px; }
.phero__title { font-family: var(--serif); font-weight: 400; font-size: 45px; line-height: 1.1; letter-spacing: .02em; }
.phero__text { max-width: 760px; margin: 12px auto 0; font-family: var(--ui); font-weight: 300; font-size: 24px; line-height: 1.4; letter-spacing: .02em; }
.phero--small { min-height: 240px; padding-top: 95px; }

/* ---------- Über uns ---------- */
.team-section { padding: 96px 0 0; }
.team-section .section__head { padding: 0 var(--pad); margin-bottom: 96px; }
.team { display: grid; grid-template-columns: 63.4fr 36.6fr; }
.team--1 { grid-template-columns: 1fr; }
.team--3 { grid-template-columns: repeat(3, 1fr); }
.team--4 { grid-template-columns: repeat(2, 1fr); }
.member { position: relative; height: 625px; overflow: hidden; color: var(--cream-light); isolation: isolate; display: flex; align-items: flex-end; }
.member__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.member::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(45, 27, 16, 0) 50%, rgba(45, 27, 16, .85) 100%); }
.member figcaption { padding: 24px; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.member__name { font-family: var(--serif); font-size: 36px; line-height: 1.2; letter-spacing: .02em; }
.member__role { font-size: 24px; line-height: 1.2; letter-spacing: -.005em; }
.about { padding-top: 96px; padding-bottom: 96px; }
.about .h-section { letter-spacing: .02em; }
.about__lead { max-width: 892px !important; text-align: center; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.45; letter-spacing: .02em; margin-bottom: 64px !important; }
.about__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
.about__icon { height: 62px; width: auto; margin-bottom: 32px; }
.about__col p { font-size: 16px; line-height: 1.45; letter-spacing: .02em; }
.about__col p + p { margin-top: 12px; }
.cta { background: var(--brown); color: var(--cream); padding: 96px var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.cta__text { max-width: 777px; font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.45; letter-spacing: .02em; }
.cta .btn { flex-shrink: 0; }

/* ---------- Services ---------- */
.svc { padding-bottom: 96px; }
.svc__bar { position: sticky; top: 0; z-index: 20; background: var(--cream); border-bottom: 1px solid var(--line); transition: background-color .25s, color .25s; }
.svc__bar.is-stuck { background: var(--brown); color: var(--cream); border-bottom-color: transparent; }
.svc__tabs { max-width: calc(var(--content) + 2 * var(--pad)); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(5, 1fr); }
.svc__tab { position: relative; background: none; border: 0; padding: 22px 10px; min-height: 84px; font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.2; text-align: center; cursor: pointer; color: inherit; transition: background-color .2s, color .2s; }
.svc__tab::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 96px; height: 2px; background: currentColor; transform: translateX(-50%) scaleX(0); transition: transform .25s; }
.svc__tab[aria-selected="true"]::after { transform: translateX(-50%) scaleX(1); }
.svc__tab:hover { color: var(--gold); }
.is-stuck .svc__tab:hover { color: #fff; }
.is-stuck .svc__tab[aria-selected="true"] { background: rgba(240, 235, 228, .14); }
.svc__panel { max-width: calc(var(--content) + 2 * var(--pad)); margin: 0 auto; padding: 94px calc(var(--pad) + 12px) 0; animation: fadeUp .4s ease both; scroll-margin-top: 90px; }
.svc__panel:focus { outline: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.svc__imgs { display: grid; gap: 20px; height: 398px; }
.svc__imgs--1 { grid-template-columns: 1fr; }
.svc__imgs--2 { grid-template-columns: 1fr 1fr; }
.svc__imgs--3 { grid-template-columns: 1fr 2fr; grid-template-rows: 1fr 1fr; }
.svc__imgs--3 .svc__img:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.svc__img { position: relative; overflow: hidden; background: var(--sand); min-height: 0; }
.svc__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svc__body { display: grid; grid-template-columns: 299px 1fr; gap: 36px; margin-top: 73px; }
.svc__title { font-size: 36px; color: var(--brown); }
.svc__text p { font-size: 16px; line-height: 1.5; color: var(--muted-brown); }
.svc__text p + p { margin-top: 18px; }
.svc__text .svc__lead { color: var(--brown); font-weight: 500; }

/* ---------- Arbeiten ---------- */
.works-section { padding-top: 80px; }
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 48px !important; }
.chip { border: 1px solid rgba(65, 39, 23, .25); background: transparent; border-radius: 999px; padding: 9px 18px; font-family: var(--sans); font-weight: 500; font-size: 15px; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--brown); }
.chip[aria-pressed="true"] { background: var(--brown); border-color: var(--brown); color: var(--cream); }
.works { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.work[hidden] { display: none; }
.work__btn { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; cursor: zoom-in; color: var(--cream-light); isolation: isolate; background: var(--brown); }
.work__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.work__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.work__btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(45, 27, 16, 0) 45%, rgba(45, 27, 16, .88) 100%); }
.work__btn:hover .work__img { transform: scale(1.04); }
.work__meta { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.work__service { font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.work__title { font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.2; }
.work__count { font-size: 13px; opacity: .8; }
.empty { text-align: center; font-size: 18px; color: var(--muted-brown); padding: 40px 0; }
.lightbox { width: min(1200px, 100vw - 32px); max-height: calc(100vh - 32px); padding: 0; border: 0; background: var(--cream); color: var(--brown); display: none; grid-template-columns: 1fr 340px; overflow: hidden; }
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(28, 17, 10, .88); }
.lightbox__stage { position: relative; background: #1c110a; display: grid; place-items: center; min-height: 60vh; }
.lightbox__img { max-width: 100%; max-height: calc(100vh - 32px); object-fit: contain; }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(240, 235, 228, .9); color: var(--brown); font-size: 30px; line-height: 1; cursor: pointer; }
.lightbox__nav--prev { left: 14px; } .lightbox__nav--next { right: 14px; }
.lightbox__nav[hidden] { display: none; }
.lightbox__close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 44px; height: 44px; border: 0; background: transparent; font-size: 32px; line-height: 1; cursor: pointer; color: var(--brown); }
.lightbox__info { padding: 56px 32px 32px; overflow-y: auto; }
.lightbox__service { font-family: var(--ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.lightbox__title { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.2; margin-bottom: 20px; }
.lightbox__text p { color: var(--muted-brown); }
.lightbox__text p + p { margin-top: 12px; }
.lightbox__count { margin-top: 20px; font-size: 14px; color: var(--muted-brown); }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: 299px 1fr; gap: 36px; padding: 120px calc(var(--pad) + 8px); max-width: calc(var(--content) + 2 * var(--pad) + 16px); width: 100%; margin: 0 auto; }
.contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 27px 27px; }
.contact__grid dt { font-size: 24px; line-height: 1.2; letter-spacing: .02em; }
.contact__grid dd a { font-weight: 500; font-size: 24px; line-height: 1.2; letter-spacing: .02em; color: var(--gold); text-decoration: none; overflow-wrap: anywhere; }
.contact__grid dd a:hover { text-decoration: underline; }
.visit { display: grid; grid-template-columns: 1fr 591fr; grid-template-columns: minmax(0, 584fr) minmax(0, 591fr); background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 493px; }
.visit__text { padding: 112px var(--pad); }
.visit__text address { font-style: normal; font-size: 24px; line-height: 1.45; letter-spacing: .02em; margin: 24px 0 47px; }
.visit__map { position: relative; min-height: 360px; background: #cfc6bb; }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.form-section { background: #fff; padding: 120px calc(var(--pad) + 8px); }
.form-section > * { max-width: 1031px; margin-left: auto; margin-right: auto; }
.form-section .h-card { font-weight: 500; margin-bottom: 32px; }
.form { display: flex; flex-direction: column; gap: 28px; }
.field { display: block; border-bottom: 1px solid #000; padding-bottom: 12px; transition: border-color .2s; }
.field:focus-within { border-bottom-color: var(--gold); }
.field input, .field textarea { width: 100%; border: 0; background: transparent; padding: 0; font-family: var(--sans); font-size: 24px; line-height: 1.2; color: var(--brown); resize: none; }
.field input::placeholder, .field textarea::placeholder { color: rgba(65, 39, 23, .55); }
.field input:focus, .field textarea:focus { outline: none; }
.field.is-invalid { border-bottom-color: #a33a2a; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__note { font-size: 13px; color: var(--muted-brown); }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.form__status { font-size: 16px; }
.form__status.is-ok { color: #3f6b36; }
.form__status.is-error { color: #a33a2a; }
.form.is-sending .btn { opacity: .6; pointer-events: none; }

/* ---------- Rechtliches ---------- */
.legal { max-width: 760px; width: 100%; margin: 0 auto; padding: 80px var(--pad) 96px; font-size: 15px; line-height: 1.6; }
.legal h2 { font-family: var(--sans); font-weight: 500; font-size: 15px; margin: 28px 0 4px; }
.legal h2:first-child { margin-top: 0; }
.legal p + p { margin-top: 10px; }
.legal ul { margin: 6px 0 10px; padding-left: 20px; }
.legal a { color: var(--gold); }

/* ---------- Fusszeile ---------- */
.foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; min-height: 76px; padding: 20px 40px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.2; letter-spacing: .02em; }
.foot a { text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot__links, .foot__meta { display: flex; flex-wrap: wrap; gap: 8px 21px; }
.foot__links { gap: 8px 16px; }
.foot__meta a { text-decoration: underline; }

/* ==================================================================
   Tablet & Handy
   ================================================================== */
@media (max-width: 1279px) {
  .intro { gap: 48px; }
  .hero__inner { padding-left: 48px; padding-right: 48px; }
}

@media (max-width: 1099px) {
  :root { --pad: 44px; }
  .nav { position: sticky; top: 0; bottom: auto; width: 100%; height: auto; border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .nav__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px 12px 24px; height: 72px; }
  .nav__logo { width: 150px; }
  .nav__toggle { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -8px; border: 0; background: transparent; cursor: pointer; }
  .nav__burger { position: relative; width: 26px; height: 18px; }
  .nav__burger i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--brown); transition: transform .3s, opacity .2s, top .3s; }
  .nav__burger i:nth-child(1) { top: 0; } .nav__burger i:nth-child(2) { top: 8px; } .nav__burger i:nth-child(3) { top: 16px; }
  .nav.is-open .nav__burger i:nth-child(1) { top: 8px; transform: rotate(45deg); }
  .nav.is-open .nav__burger i:nth-child(2) { opacity: 0; }
  .nav.is-open .nav__burger i:nth-child(3) { top: 8px; transform: rotate(-45deg); }
  .nav__menu { position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px -18px rgba(45, 27, 16, .35); display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s .3s; }
  .nav__menu > ul { overflow: hidden; min-height: 0; }
  .nav.is-open .nav__menu { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s ease; }
  .nav__menu a { text-align: center; padding: 14.7px 24px; }
  .nav__menu li:last-child { border-bottom: 0; }
  .main { margin-left: 0; }
  .svc__bar { top: 72px; }

  .hero__logo { width: 360px; }
  .intro { grid-template-columns: 1fr; padding: 96px var(--pad); gap: 72px; }
  .intro__col, .intro__col:nth-child(2) { max-width: none; justify-self: stretch; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 24px; }
  .eyebrow { font-size: 16px; }
  .h-section { font-size: 36px; }
  .team { grid-template-columns: 1fr; }
  .member { height: 520px; }
  .about__cols { grid-template-columns: 1fr; gap: 48px; max-width: 620px !important; }
  .cta { flex-direction: column; align-items: flex-start; }
  .svc__tabs { padding: 0 12px; }
  .svc__tab { font-size: 14px; padding: 18px 6px; min-height: 72px; }
  .svc__panel { padding: 56px var(--pad) 0; }
  .svc__body { grid-template-columns: 1fr; gap: 20px; margin-top: 48px; }
  .svc__imgs { height: 340px; }
  .works { grid-template-columns: 1fr 1fr; gap: 20px; }
  .lightbox { grid-template-columns: 1fr; overflow-y: auto; }
  .lightbox__stage { min-height: 50vh; }
  .lightbox__img { max-height: 70vh; }
  .lightbox__info { padding: 28px 24px 32px; }
  .contact { grid-template-columns: 1fr; padding: 96px var(--pad); gap: 32px; }
  .visit { grid-template-columns: 1fr; }
  .visit__text { padding: 80px var(--pad); }
  .visit__map { min-height: 380px; }
  .form-section { padding: 96px var(--pad); }
}

@media (max-width: 699px) {
  .hero { height: 600px; }
  .hero__inner { padding: 92px 24px 0; }
  .hero__logo { width: 287px; }
  .hero__title { font-size: 32px; margin-top: 44px; min-height: 2.2em; }
  .type__text { white-space: normal; position: absolute; left: 0; right: 0; }
  .hero__text { font-size: 20px; }
  .intro { padding: 80px var(--pad); gap: 64px; }
  .intro .h-card { font-size: 32px; }
  .section { padding-top: 80px; }
  .section__head { margin-bottom: 48px; }
  .tiles { grid-template-columns: 1fr; gap: 28px; }
  .tile { aspect-ratio: 287 / 320; }
  .tile__label { font-size: 20px; }
  .phero { min-height: 260px; padding: 88px 24px 56px; }
  .phero__title { font-size: 36px; }
  .phero__text { font-size: 20px; }
  .phero--small { min-height: 200px; padding-top: 80px; }
  .member { height: 440px; }
  .member__name { font-size: 30px; }
  .member__role { font-size: 20px; }
  .about__lead { font-size: 21px; }
  .cta { padding: 80px var(--pad); }
  .cta__text { font-size: 21px; }
  .svc__bar { overflow-x: auto; scrollbar-width: none; }
  .svc__bar::-webkit-scrollbar { display: none; }
  .svc__tabs { display: flex; padding: 0 8px; width: max-content; min-width: 100%; }
  .svc__tab { flex: 0 0 auto; width: 128px; font-size: 14px; }
  .svc__panel { padding-top: 40px; padding-left: 20px; padding-right: 20px; }
  .svc__imgs { height: auto; }
  .svc__imgs--2, .svc__imgs--3 { grid-template-columns: 1fr; grid-template-rows: none; }
  .svc__imgs--3 .svc__img:nth-child(3) { grid-column: auto; grid-row: auto; }
  .svc__img { aspect-ratio: 4 / 3; }
  .svc__title { font-size: 30px; }
  .works { grid-template-columns: 1fr; }
  .contact__grid { grid-template-columns: 1fr; }
  .contact__grid dt, .contact__grid dd a, .visit__text address { font-size: 20px; }
  .field input, .field textarea { font-size: 20px; }
  .legal { padding: 56px 24px 72px; }
  .foot { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
  .foot__links, .foot__meta { justify-content: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .foot__meta { border-bottom: 0; }
}