/* MFE Mimarlık — HTML + CSS, without scripts or frameworks.
   Layout coordinates are based on the supplied 719 × 2187 reference.
   Manrope is included locally. A raster reference cannot establish font identity. */
@font-face {
  font-family: "Manrope";
  src: url("/assets/projeler/fonts/Manrope-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --u: calc(100vw / 719);
  --orange: #ff5b0b;
  --ink: #10151a;
  --paper: #faf9f7;
  --muted: #7c7e85;
  --gold: #c49354;
  --font: "Manrope", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; color: var(--ink); background: #101111; font: 400 calc(13 * var(--u))/1.4 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, dl, dd { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
a, label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }
::selection { color: white; background: var(--orange); }
.site-shell { width: 100%; max-width: none; margin-inline: 0; overflow: clip; }
.visually-hidden, .filter-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 18px; background: white; color: var(--ink); font-size: 16px; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.paper { background: radial-gradient(ellipse at 22% 36%, #fff9, transparent 60%), linear-gradient(105deg, #f8f7f5, #fcfbf9 55%, #f7f6f4); }
.eyebrow { display: flex; align-items: center; gap: calc(8 * var(--u)); color: var(--muted); font-size: calc(7.3 * var(--u)); font-weight: 750; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: calc(20 * var(--u)); height: calc(1.6 * var(--u)); background: var(--orange); flex-shrink: 0; }
h1, h2 { font-weight: 750; letter-spacing: -.05em; line-height: 1.06; }
h3 { font-weight: 750; letter-spacing: -.045em; line-height: 1.2; }
.arrow { position: relative; display: inline-block; width: 1.08em; height: 1em; flex-shrink: 0; }
.arrow::before { content: ""; position: absolute; width: .96em; height: .11em; background: currentColor; left: 0; top: .45em; }
.arrow::after { content: ""; position: absolute; width: .48em; height: .48em; border-top: .11em solid; border-right: .11em solid; top: .23em; right: .05em; transform: rotate(45deg); }
.button { display: flex; justify-content: center; align-items: center; gap: calc(12 * var(--u)); background: linear-gradient(110deg, #ff6617, #ff5707); color: #080a08; border: 1px solid #ff5b0b; border-radius: calc(4 * var(--u)); font-weight: 800; transition: filter .18s; }
.button:hover { filter: brightness(1.09); }
.brand { display: inline-flex; align-items: center; gap: calc(4 * var(--u)); width: calc(85 * var(--u)); color: #f7f6f3; }
.brand-mark { position: relative; display: block; width: calc(24 * var(--u)); height: calc(38 * var(--u)); flex-shrink: 0; }
.brand-mark i { position: absolute; inset: 0 42% 8% 13%; background: var(--orange); clip-path: polygon(0 23%, 100% 0, 100% 94%, 0 100%, 0 23%, 22% 27%, 22% 92%, 79% 88%, 79% 11%, 22% 27%); }
.brand-mark b { position: absolute; inset: 3% 14% 5% 63%; background: #eee; clip-path: polygon(0 0, 100% 13%, 100% 100%, 0 88%); }
.brand-mark em { position: absolute; left: 0; right: 0; bottom: 0; height: 4%; background: #ddd; clip-path: polygon(0 70%, 55% 0, 100% 60%, 100% 100%, 0 100%); }
.brand-type { display: flex; flex-direction: column; font-size: calc(28 * var(--u)); line-height: .92; letter-spacing: -.035em; font-weight: 450; }
.brand-type small { align-self: flex-end; margin-top: calc(2 * var(--u)); font-size: calc(6.5 * var(--u)); font-weight: 650; letter-spacing: -.055em; }

/* Header and the two diagonal photographs are separate HTML elements. */
.hero { height: calc(282 * var(--u)); position: relative; color: #f5f4f1; background: #111613; border-bottom: calc(1.5 * var(--u)) solid var(--gold); isolation: isolate; }
.hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #080d0bd9, #080d0bc9 40%, #10121270), var(--mfe-bg-f1d56c72306b, url("/api/image?src=%2Fassets%2Fprojeler%2Fimages%2Fhero-background.jpg&w=1920&p=background&d=desktop")) left 60%/cover; }
.hero::after { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .22; background: var(--mfe-bg-0f4bdd400ded, url("/api/image?src=%2Fassets%2Fprojeler%2Fimages%2Fmarble.jpg&w=1920&p=background&d=desktop")) 70% 10%/160% auto; mix-blend-mode: screen; }
.site-header { position: relative; z-index: 3; display: flex; align-items: center; height: calc(51 * var(--u)); padding-left: calc(40 * var(--u)); padding-right: calc(21 * var(--u)); gap: calc(11 * var(--u)); }
.desktop-nav { display: flex; align-items: stretch; justify-content: space-evenly; margin-left: auto; width: calc(365 * var(--u)); height: calc(34 * var(--u)); border: 1px solid #92734488; border-radius: calc(4 * var(--u)); background: #101414a8; font-size: calc(9.5 * var(--u)); }
.desktop-nav a { display: flex; position: relative; align-items: center; padding: 0 calc(9 * var(--u)); }
.desktop-nav a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(2 * var(--u)); background: var(--orange); }
.desktop-nav a:hover { color: #ff7431; }
.header-quote { height: calc(34 * var(--u)); width: calc(119 * var(--u)); font-size: calc(11 * var(--u)); }
.mobile-menu { display: none; }
.hero-copy { position: absolute; z-index: 2; left: calc(30 * var(--u)); top: calc(82 * var(--u)); }
.breadcrumb { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(7.5 * var(--u)); font-weight: 550; margin-bottom: calc(14 * var(--u)); }
.breadcrumb > span:first-child { width: calc(20 * var(--u)); height: calc(1.5 * var(--u)); margin-right: calc(1 * var(--u)); background: var(--orange); }
.breadcrumb b { font-weight: 400; opacity: .7; }
.hero h1 { font-size: calc(31 * var(--u)); }
.hero h1 span { color: var(--orange); }
.hero-copy > p { font-size: calc(13 * var(--u)); line-height: 1.45; color: #dedfd9; margin-top: calc(10 * var(--u)); letter-spacing: -.025em; }
.hero-photos { position: absolute; right: 0; bottom: 0; width: calc(457 * var(--u)); height: calc(229 * var(--u)); }
.hero-photo { position: absolute; height: 100%; background: var(--gold); padding: calc(2 * var(--u)); clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%); }
.hero-magafi { width: calc(268 * var(--u)); left: 0; }
.hero-magafi img { object-fit: cover; }
.hero-shinest { width: calc(233 * var(--u)); right: 0; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); }
.hero-shinest img { clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); object-fit: cover; }

/* Native radio buttons drive the filters; no JavaScript is needed. */
.projects { position: relative; padding: calc(23 * var(--u)) calc(26 * var(--u)) calc(17.95 * var(--u)) calc(29 * var(--u)); }
.projects-heading { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: calc(12.55 * var(--u)); }
.projects-heading .eyebrow { margin-bottom: calc(8 * var(--u)); }
.projects h2 { font-size: calc(33 * var(--u)); }
.filters { display: flex; align-items: center; gap: calc(5 * var(--u)); padding-bottom: calc(4 * var(--u)); }
.filters .filter-label { display: flex; align-items: center; justify-content: center; white-space: nowrap; font-size: calc(10.5 * var(--u)); line-height: 1; height: calc(29 * var(--u)); padding-inline: calc(12.5 * var(--u)); border: 1px solid #d9bfaa; border-radius: calc(4 * var(--u)); cursor: pointer; transition: background .15s, color .15s; }
.filters .filter-label:first-child { padding-inline: calc(18 * var(--u)); }
.filters .filter-label:nth-child(1) { width: calc(60 * var(--u)); padding-inline: 0; }
.filters .filter-label:nth-child(2) { width: calc(119 * var(--u)); padding-inline: 0; }
.filters .filter-label:nth-child(3) { width: calc(65 * var(--u)); padding-inline: 0; }
.filters .filter-label:nth-child(4) { width: calc(117 * var(--u)); padding-inline: 0; }
#filter-all:checked ~ .projects-heading label[for="filter-all"],
#filter-fair:checked ~ .projects-heading label[for="filter-fair"],
#filter-interior:checked ~ .projects-heading label[for="filter-interior"],
#filter-facade:checked ~ .projects-heading label[for="filter-facade"] { background: var(--orange); color: white; border-color: var(--orange); }
#filter-all:focus-visible ~ .projects-heading label[for="filter-all"],
#filter-fair:focus-visible ~ .projects-heading label[for="filter-fair"],
#filter-interior:focus-visible ~ .projects-heading label[for="filter-interior"],
#filter-facade:focus-visible ~ .projects-heading label[for="filter-facade"] { outline: 2px solid var(--ink); outline-offset: 3px; }
#filter-fair:checked ~ .project-grid .project-card:not(.category-fair),
#filter-interior:checked ~ .project-grid .project-card:not(.category-interior),
#filter-facade:checked ~ .project-grid .project-card:not(.category-facade) { display: none; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(16 * var(--u)); row-gap: calc(18 * var(--u)); }
.project-card { min-width: 0; }
.project-image { display: block; height: calc(175 * var(--u)); overflow: hidden; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.magafi-image img { object-fit: cover; }
.project-image:hover img { transform: scale(1.025); }
.project-caption { min-height: calc(39 * var(--u)); display: flex; align-items: center; justify-content: space-between; gap: calc(5 * var(--u)); }
.project-caption h3 { font-size: calc(14.5 * var(--u)); font-weight: 700; letter-spacing: -.025em; }
.project-caption p { font-size: calc(12.5 * var(--u)); line-height: 1.3; color: var(--muted); letter-spacing: -.025em; margin-top: calc(2 * var(--u)); }
.project-link { display: inline-flex; align-items: center; gap: calc(13 * var(--u)); border-bottom: 1px solid #ff651980; padding-bottom: calc(2 * var(--u)); font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }
.project-link .arrow { color: var(--orange); width: calc(13 * var(--u)); font-size: calc(12 * var(--u)); }
.project-link:hover { color: var(--orange); }

.featured { display: grid; grid-template-columns: calc(338 * var(--u)) minmax(0, 1fr); gap: calc(27 * var(--u)); align-items: center; height: calc(296 * var(--u)); padding: calc(23 * var(--u)) calc(32 * var(--u)); color: #f2f2ee; background: linear-gradient(#060b09a6, #060b0970), var(--mfe-bg-0f4bdd400ded, url("/api/image?src=%2Fassets%2Fprojeler%2Fimages%2Fmarble.jpg&w=1920&p=background&d=desktop")) right 15%/160% auto; }
.featured-photo { display: block; height: calc(247 * var(--u)); border: calc(1 * var(--u)) solid #c6873b; border-radius: calc(2 * var(--u)); overflow: hidden; }
.featured-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 48% center; }
.featured-copy { transform: translateY(calc(6 * var(--u))); }
.featured-copy .eyebrow { color: #dfdfdb; font-size: calc(7 * var(--u)); margin-bottom: calc(13 * var(--u)); }
.featured h2 { font-size: calc(27 * var(--u)); font-weight: 650; }
.featured-description { margin-top: calc(11 * var(--u)); color: #d7d8d3; font-size: calc(13 * var(--u)); line-height: 1.4; letter-spacing: -.03em; }
.project-facts { display: grid; grid-template-columns: .76fr 1.32fr 1.28fr; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); }
.project-facts > div { min-width: 0; height: calc(68 * var(--u)); border: 1px solid #9b7746; border-radius: calc(3 * var(--u)); background: #0c110da1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); }
.project-facts img { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
.project-facts dt { white-space: nowrap; font-size: calc(11.5 * var(--u)); font-weight: 600; letter-spacing: -.04em; }
.project-facts > div:first-child dt { font-size: calc(15 * var(--u)); }
.featured-copy > .project-link { margin-top: calc(17 * var(--u)); font-size: calc(13 * var(--u)); gap: calc(16 * var(--u)); }
.featured-copy > .project-link .arrow { font-size: calc(15 * var(--u)); }

.approach { display: grid; grid-template-columns: calc(202 * var(--u)) calc(155 * var(--u)) calc(152 * var(--u)) minmax(0, 1fr); height: calc(204 * var(--u)); padding: calc(21 * var(--u)) calc(32 * var(--u)); }
.approach-intro .eyebrow { margin-bottom: calc(10 * var(--u)); }
.approach h2 { font-size: calc(28 * var(--u)); line-height: 1.03; }
.approach-intro > p:last-child { margin-top: calc(8 * var(--u)); font-size: calc(12.5 * var(--u)); color: var(--muted); line-height: 1.4; letter-spacing: -.035em; }
.approach-item { border-left: 1px solid #ffac79; padding-left: calc(23 * var(--u)); padding-top: calc(17 * var(--u)); }
.approach-item > img, .approach-item > .mfe-picture > img { width: calc(42 * var(--u)); height: calc(42 * var(--u)); margin-bottom: calc(15 * var(--u)); }
.approach-item h3 { font-size: calc(13 * var(--u)); }
.approach-item p { margin-top: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); color: var(--muted); line-height: 1.45; letter-spacing: -.03em; }
.approach-item:last-child p { font-size: calc(10.7 * var(--u)); letter-spacing: -.045em; }

.contact-banner { height: calc(159 * var(--u)); padding: calc(23 * var(--u)) calc(32 * var(--u)); position: relative; display: flex; align-items: center; justify-content: space-between; color: #f6f4f0; background: #252922 var(--mfe-bg-201fcc6dadaf, url("/api/image?src=%2Fassets%2Fprojeler%2Fimages%2Fcontact-background.jpg&w=1920&p=background&d=desktop")) 20% 48%/120% auto; isolation: isolate; }
.contact-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #050a08c9, transparent 68%); z-index: -1; }
.contact-copy .eyebrow { color: #ded9ca; font-size: calc(7 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.contact-banner h2 { font-size: calc(25 * var(--u)); }
.contact-copy > p:last-child { margin-top: calc(7 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.4; letter-spacing: -.02em; color: #e2e1da; }
.contact-box { width: calc(238 * var(--u)); margin-top: calc(17 * var(--u)); margin-right: calc(-7 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)) calc(11 * var(--u)); border: 1px solid #7e613c; border-radius: calc(3 * var(--u)); background: linear-gradient(110deg, #111613f5, #111513ee); box-shadow: 0 5px 20px #0005; }
.contact-box .button { height: calc(39 * var(--u)); font-size: calc(13 * var(--u)); gap: calc(15 * var(--u)); }
.phone-link { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(12 * var(--u)); white-space: nowrap; font-size: calc(10 * var(--u)); letter-spacing: -.04em; }
.phone-link img { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }
.phone-link strong { font-weight: 600; }

.site-footer { min-height: calc(230 * var(--u)); padding: calc(17 * var(--u)) calc(32 * var(--u)) calc(27 * var(--u)); background: radial-gradient(ellipse at 15% 10%, #1b1e1a88, transparent 65%), #0e1110; color: #e4e5df; }
.footer-main { display: grid; grid-template-columns: 1.24fr .82fr .9fr 1.3fr .75fr; gap: calc(17 * var(--u)); }
.footer-brand .brand { width: calc(86 * var(--u)); }
.footer-brand > p { margin-top: calc(10 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.5; letter-spacing: -.025em; }
.social-links { display: flex; align-items: center; gap: calc(17 * var(--u)); margin-top: calc(13 * var(--u)); }
.social-links img { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.footer-nav, .footer-contact { padding-top: calc(5 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.5; letter-spacing: -.025em; }
.footer-nav { display: flex; flex-direction: column; }
.footer-main h3 { margin-bottom: calc(9 * var(--u)); font-size: calc(10.5 * var(--u)); font-weight: 750; }
.footer-nav a { width: fit-content; }
.footer-nav a:hover, .footer-contact a:hover, .footer-bottom a:hover { color: var(--orange); }
.footer-contact > p, .footer-contact > a { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(18 * var(--u)); white-space: nowrap; }
.footer-contact img { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex-shrink: 0; }
.footer-motto { border-left: 1px solid #96744b; padding-left: calc(25 * var(--u)); margin-top: calc(3 * var(--u)); min-height: calc(127 * var(--u)); }
.footer-motto > span { display: block; width: calc(23 * var(--u)); height: calc(2 * var(--u)); background: var(--orange); margin-top: calc(13 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.footer-motto p { font-size: calc(14 * var(--u)); line-height: 1.3; letter-spacing: -.035em; }
.footer-bottom { border-top: 1px solid #97734988; margin-top: calc(19 * var(--u)); padding-top: calc(22 * var(--u)); display: flex; justify-content: space-between; align-items: center; font-size: calc(9.5 * var(--u)); color: #b9bab6; letter-spacing: -.025em; }
.footer-bottom nav { display: flex; }
.footer-bottom nav a + a { border-left: 1px solid #9f7b4d; margin-left: calc(14 * var(--u)); padding-left: calc(14 * var(--u)); }

/* CSS-only fragment dialogs, deliberately outside the reference layout. */
.modal { display: none; position: fixed; inset: 0; z-index: 50; align-items: center; justify-content: center; padding: 24px; color: var(--ink); font: 400 16px/1.6 var(--font); }
.modal:target { display: flex; }
body:has(.modal:target) { overflow: hidden; }
.modal-scrim { position: absolute; inset: 0; background: #050b09d9; backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(680px, 100%); max-height: calc(100dvh - 48px); overflow: auto; padding: 36px; border-radius: 8px; background: var(--paper); box-shadow: 0 25px 90px #0007; }
.modal-close { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; font-size: 30px; line-height: 1; width: 40px; height: 40px; background: #f7f6f2; border-radius: 50%; }
.modal-card h2 { margin: 12px 0; font-size: 32px; }
.modal-card p { margin: 12px 0; }
.modal-card .eyebrow { font-size: 10px; gap: 12px; }
.modal-card .eyebrow::before { width: 26px; height: 2px; }
.modal-card .button { min-height: 52px; margin-top: 24px; padding: 12px; font-size: 14px; gap: 14px; }
.modal-card .project-link { margin-top: 20px; font-size: 14px; gap: 14px; }
.modal-card .project-link .arrow { font-size: 14px; width: 16px; }
.modal-phone { display: block; margin-top: 18px; font-weight: 750; }
.project-modal { padding-top: 52px; }
.project-modal > img, .project-modal > .mfe-picture > img { width: 100%; max-height: 52vh; object-fit: contain; background: #101111; }
.sitemap-nav { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 600px) {
  :root { --u: 1px; }
  body { font-size: 14px; }
  .site-header { height: 70px; padding: 0 20px; gap: 12px; }
  .brand { width: 95px; }
  .brand-type { font-size: 29px; }
  .brand-type small { font-size: 7px; }
  .desktop-nav { display: none; }
  .header-quote { margin-left: auto; width: 128px; height: 38px; font-size: 11px; gap: 10px; }
  .mobile-menu { display: block; }
  .mobile-menu summary { list-style: none; display: flex; flex-direction: column; justify-content: center; gap: 4px; border: 1px solid #91764a; border-radius: 4px; width: 36px; height: 38px; padding: 8px; cursor: pointer; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary span { display: block; height: 1px; background: #eee; }
  .mobile-menu nav { position: absolute; top: 64px; right: 20px; width: 220px; padding: 14px 22px; background: #101612f5; border: 1px solid #947447; border-radius: 5px; display: flex; flex-direction: column; gap: 0; }
  .mobile-menu nav a { font-size: 14px; padding: 10px 0; }
  .hero { height: 468px; }
  .hero-copy { left: 22px; top: 93px; }
  .breadcrumb { font-size: 9px; margin-bottom: 16px; }
  .hero h1 { font-size: clamp(29px, 7.3vw, 39px); }
  .hero-copy > p { font-size: 13px; line-height: 1.5; margin-top: 12px; }
  .hero-photos { width: 100%; height: 177px; bottom: 0; }
  .hero-magafi { width: 64%; left: -2%; }
  .hero-shinest { width: 56%; right: -5%; }
  .hero-magafi img { object-fit: cover; object-position: center 39%; }
  .projects { padding: 28px 20px 27px; }
  .projects-heading { display: block; margin-bottom: 22px; }
  .projects-heading .eyebrow { font-size: 9px; }
  .projects h2 { font-size: 34px; }
  .filters { margin-top: 20px; gap: 8px; padding: 0; flex-wrap: wrap; }
  .filters .filter-label { font-size: 11px; height: 38px; padding-inline: 14px; }
  .filters .filter-label:first-child { padding-inline: 20px; }
  .filters .filter-label:nth-child(n) { width: auto; padding-inline: 14px; }
  .filters .filter-label:first-child { padding-inline: 20px; }
  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .project-image { height: auto; aspect-ratio: 1.86; }
  .project-caption { min-height: 52px; gap: 12px; }
  .project-caption h3 { font-size: 16px; }
  .project-caption p { font-size: 13px; margin-top: 3px; }
  .project-link { font-size: 12px; gap: 12px; }
  .project-link .arrow { width: 14px; font-size: 14px; }
  .featured { height: auto; padding: 24px 22px 28px; grid-template-columns: 1fr; gap: 24px; background-size: auto 160%; }
  .featured-photo { height: auto; aspect-ratio: 1.4; }
  .featured-copy .eyebrow { font-size: 9px; margin-bottom: 12px; }
  .featured-copy { transform: none; }
  .featured h2 { font-size: 30px; }
  .featured-description { font-size: 14px; margin-top: 12px; }
  .project-facts { gap: 9px; margin-top: 20px; }
  .project-facts > div { height: 78px; }
  .project-facts img { width: 28px; height: 28px; }
  .project-facts dt { font-size: 12px; }
  .project-facts > div:first-child dt { font-size: 16px; }
  .featured-copy > .project-link { margin-top: 20px; font-size: 14px; }
  .approach { height: auto; grid-template-columns: 1fr; padding: 30px 22px; gap: 24px; }
  .approach-intro .eyebrow { font-size: 9px; margin-bottom: 14px; }
  .approach h2 { font-size: 32px; }
  .approach h2 br { display: none; }
  .approach-intro > p:last-child { font-size: 14px; margin-top: 14px; }
  .approach-intro > p:last-child br { display: none; }
  .approach-item { display: grid; grid-template-columns: 46px 1fr; column-gap: 17px; border-left: 0; border-top: 1px solid #e6b58f; padding: 22px 0 0; }
  .approach-item > img, .approach-item > .mfe-picture > img { grid-row: 1 / 3; margin: 0; width: 42px; height: 42px; }
  .approach-item h3 { font-size: 16px; }
  .approach-item p { font-size: 13px; line-height: 1.5; margin-top: 7px; }
  .approach-item:last-child p { font-size: 13px; letter-spacing: -.03em; }
  .approach-item p br { display: none; }
  .contact-banner { height: auto; min-height: 320px; padding: 30px 22px; display: block; background-size: cover; background-position: 57% center; }
  .contact-copy .eyebrow { font-size: 9px; margin-bottom: 12px; }
  .contact-banner h2 { font-size: 31px; }
  .contact-copy > p:last-child { font-size: 14px; margin-top: 10px; }
  .contact-box { width: min(310px, 100%); margin: 24px 0 0; padding: 15px; }
  .contact-box .button { height: 44px; font-size: 14px; }
  .phone-link { font-size: 12px; justify-content: center; gap: 10px; margin-top: 12px; }
  .site-footer { padding: 27px 22px 24px; min-height: 0; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 30px 22px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-brand > p { font-size: 12px; }
  .social-links { margin-top: 17px; gap: 20px; }
  .social-links img { width: 20px; height: 20px; }
  .footer-nav, .footer-contact { font-size: 12px; line-height: 1.7; padding: 0; }
  .footer-main h3 { font-size: 13px; margin-bottom: 10px; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-contact > p, .footer-contact > a { min-height: 26px; gap: 10px; }
  .footer-contact img { width: 16px; height: 16px; }
  .footer-motto { display: none; }
  .footer-bottom { display: block; margin-top: 27px; padding-top: 20px; font-size: 10px; }
  .footer-bottom nav { flex-wrap: wrap; }
  .footer-bottom > p { margin-top: 20px; }
  .modal { padding: 16px; }
  .modal-card { padding: 30px 22px; max-height: calc(100dvh - 32px); }
  .modal-card h2 { font-size: 27px; }
  .project-modal { padding-top: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}