/* MFE Mimarlık — Hakkımızda.
   Native HTML and CSS only. No JavaScript, frameworks or remote font requests.
   Desktop geometry follows the supplied 725 × 2169 reference.
   A raster screenshot cannot establish the original font; local Manrope is used.
   The reference image is a photographic atlas. Only photograph/logo crops appear.
   Every heading, paragraph, navigation item and caption is actual HTML text. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/Manrope-Variable.ttf") format("truetype");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --u: calc(100vw / 725);
  --paper: #f8f7f5;
  --ink: #11171b;
  --muted: #80818a;
  --orange: #ff5908;
  --bronze: #866139;
  --reference: var(--mfe-bg-ba119fe992d1, url("/api/image?src=%2Fassets%2Fimages%2Fhakkimizda-reference.png&w=1920&p=background&d=desktop"));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 20px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Manrope", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, figure, ol { margin: 0; }
a { color: inherit; text-decoration: none; }
button, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; cursor: pointer; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; text-align: left; }
a, button, summary { outline-offset: 5px; }
:focus-visible { outline: 3px solid var(--orange); }
::selection { background: var(--orange); color: white; }
.page { max-width: 1920px; margin-inline: auto; }
h1, h2, h3 { font-weight: 750; letter-spacing: -.055em; }
.body-copy { font-size: calc(13 * var(--u)); line-height: 1.38; letter-spacing: -.037em; color: var(--muted); }
.accent-line { display: block; width: calc(22 * var(--u)); height: calc(2 * var(--u)); background: var(--orange); flex: none; }
.eyebrow { display: flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 500; letter-spacing: 0; line-height: 1.3; color: #81828b; }
.eyebrow::before { content: ""; width: calc(22 * var(--u)); height: calc(2 * var(--u)); flex: none; background: var(--orange); }
.skip-link { position: fixed; z-index: 50; top: 12px; left: 12px; padding: 12px 18px; background: white; color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

/* Photographs are clipped with CSS. They never cover the HTML copy. */
.reference-photo { display: block; background-image: var(--reference); background-repeat: no-repeat; }
.hero { position: relative; isolation: isolate; height: calc(396 * var(--u)); overflow: hidden; background: #0b100e var(--mfe-bg-38ff268bc6a9, url("/api/image?src=%2Fassets%2Fimages%2Fhakkimizda-hero-fill.png&w=1920&p=background&d=desktop")) center / cover no-repeat; color: #f5f4f1; }
.hero-photo { position: absolute; left: calc(304 * var(--u)); top: calc(41 * var(--u)); width: calc(421 * var(--u)); height: calc(329 * var(--u)); background-size: calc(725 * var(--u)) calc(2169 * var(--u)); background-position: calc(-304 * var(--u)) calc(-41 * var(--u)); }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b100e, transparent 12%); }
.hero-glass { position: absolute; left: calc(204 * var(--u)); top: calc(41 * var(--u)); width: calc(100 * var(--u)); height: calc(81 * var(--u)); background-size: calc(725 * var(--u)) calc(2169 * var(--u)); background-position: calc(-204 * var(--u)) calc(-41 * var(--u)); }
.hero-glass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #0b100e, transparent 25%), linear-gradient(90deg, #0b100e, transparent 25%); }
.hero-glass-lower { position: absolute; left: calc(204 * var(--u)); top: calc(278 * var(--u)); width: calc(100 * var(--u)); height: calc(52 * var(--u)); background-size: calc(725 * var(--u)) calc(2169 * var(--u)); background-position: calc(-204 * var(--u)) calc(-278 * var(--u)); }
.hero-glass-lower::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0b100e, transparent 35%), linear-gradient(90deg, #0b100e, transparent 25%); }
.hero-floor { position: absolute; inset-inline: 0; top: calc(330 * var(--u)); height: calc(42 * var(--u)); background-size: calc(725 * var(--u)) calc(2169 * var(--u)); background-position: 0 calc(-330 * var(--u)); }
.hero-bottom-edge { position: absolute; bottom: 0; width: 100%; height: calc(24 * var(--u)); background-size: calc(725 * var(--u)) calc(2169 * var(--u)); background-position: 0 calc(-372 * var(--u)); }
.hero-bottom-edge::after { content: ""; position: absolute; right: calc(15 * var(--u)); top: 0; width: calc(105 * var(--u)); height: calc(16 * var(--u)); background: #262825; }
.hero::after { content: ""; position: absolute; left: 0; top: calc(45 * var(--u)); width: calc(304 * var(--u)); height: calc(285 * var(--u)); z-index: -1; background: linear-gradient(90deg, #030706e6, #030706b0); }
.site-header { position: relative; z-index: 5; height: calc(47 * var(--u)); display: flex; align-items: flex-start; padding: calc(5 * var(--u)) calc(23 * var(--u)) 0 calc(40 * var(--u)); background: linear-gradient(90deg, #0c100c, #17170f 46%, #17140c); }
.brand { display: block; flex: none; }
.brand-header { width: calc(89 * var(--u)); height: calc(38 * var(--u)); }
.brand-art { display: block; width: 100%; height: 100%; background-image: var(--reference); background-repeat: no-repeat; }
.brand-header .brand-art { background-size: 814.60674% auto; background-position: 6.28931% .187705%; }
.desktop-nav { margin-left: calc(75 * var(--u)); margin-top: calc(3 * var(--u)); width: calc(350 * var(--u)); height: calc(32 * var(--u)); display: flex; align-items: stretch; justify-content: center; border: calc(.7 * var(--u)) solid #715635; border-radius: calc(3 * var(--u)); background: #151716; }
.desktop-nav a, .desktop-nav button { position: relative; display: flex; align-items: center; justify-content: center; padding-inline: calc(13 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 500; letter-spacing: -.03em; white-space: nowrap; }
.desktop-nav a[aria-current]::after { content: ""; position: absolute; bottom: calc(1 * var(--u)); height: calc(2 * var(--u)); background: var(--orange); inset-inline: calc(10 * var(--u)); }
.desktop-nav a:hover, .desktop-nav button:hover { color: var(--orange); }
.quote-button { display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); min-height: calc(33 * var(--u)); padding-inline: calc(21 * var(--u)); border-radius: calc(5 * var(--u)); background: var(--orange); color: #080c09; font-size: calc(13 * var(--u)); font-weight: 750; letter-spacing: -.04em; white-space: nowrap; transition: background .2s; }
.quote-button:hover { background: #ff752b; }
.header-quote { margin-top: calc(3 * var(--u)); margin-left: auto; width: calc(126 * var(--u)); min-height: calc(32 * var(--u)); font-size: calc(11 * var(--u)); padding-inline: calc(12 * var(--u)); gap: calc(9 * var(--u)); }
.arrow-icon { display: inline-block; position: relative; width: calc(17 * var(--u)); height: calc(17 * var(--u)); flex: none; }
.arrow-icon::before { content: ""; position: absolute; left: 12%; top: 48%; width: 68%; border-top: max(1px, calc(1.5 * var(--u))) solid currentColor; }
.arrow-icon::after { content: ""; position: absolute; top: 28%; right: 10%; width: 40%; height: 40%; border-top: max(1px, calc(1.5 * var(--u))) solid currentColor; border-right: max(1px, calc(1.5 * var(--u))) solid currentColor; transform: rotate(45deg); }
.mobile-menu { display: none; }
.breadcrumb { position: absolute; z-index: 1; top: calc(79 * var(--u)); left: calc(31 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(9 * var(--u)); letter-spacing: -.035em; line-height: 1.4; }
.breadcrumb .accent-line { width: calc(19 * var(--u)); margin-right: calc(2 * var(--u)); }
.breadcrumb-divider { color: var(--orange); }
.hero-copy { position: absolute; z-index: 1; top: calc(112 * var(--u)); left: calc(31 * var(--u)); }
.hero-eyebrow { color: #dfdfda; font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: .035em; gap: calc(9 * var(--u)); }
.hero h1 { margin-top: calc(7 * var(--u)); font-size: calc(37 * var(--u)); line-height: 1.05; font-weight: 750; letter-spacing: -.045em; }
.hero h1 span { color: var(--orange); }
.hero-description { margin-top: calc(9 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.25; letter-spacing: -.039em; color: #e0e0db; }
.hero-quote { margin-top: calc(16 * var(--u)); width: calc(160 * var(--u)); }
.concept-caption { position: absolute; right: calc(21 * var(--u)); bottom: calc(14 * var(--u)); font-size: calc(8 * var(--u)); line-height: 1.2; color: #d6d3cc; letter-spacing: -.025em; }

.intro { position: relative; height: calc(319 * var(--u)); background: #faf9f7; border-bottom: calc(6 * var(--u)) solid white; }
.intro-copy { position: absolute; top: calc(28 * var(--u)); left: calc(31 * var(--u)); width: calc(241 * var(--u)); }
.intro h2 { margin-top: calc(8 * var(--u)); font-size: calc(30 * var(--u)); line-height: 1.02; }
.intro-lead { margin-top: calc(12 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 550; line-height: 1.4; letter-spacing: -.04em; color: #5c6067; white-space: nowrap; }
.intro .body-copy { margin-top: calc(15 * var(--u)); width: calc(239 * var(--u)); }
.intro-figure { position: absolute; left: calc(294 * var(--u)); top: calc(20 * var(--u)); right: 0; }
.intro-photo { width: 100%; aspect-ratio: 431 / 254; background-size: 168.213457% auto; background-position: 100% 21.723238%; }
.intro-figure figcaption { padding-top: calc(5 * var(--u)); font-size: calc(10 * var(--u)); line-height: 1.4; letter-spacing: -.045em; }
.intro-figure figcaption strong { font-weight: 750; }

.founder { position: relative; height: calc(298 * var(--u)); border-bottom: calc(14 * var(--u)) solid #faf9f7; background: #faf9f7; }
.founder-copy { position: absolute; top: calc(22 * var(--u)); left: calc(31 * var(--u)); width: calc(243 * var(--u)); }
.founder h2 { margin-top: calc(7 * var(--u)); font-size: calc(31 * var(--u)); line-height: 1.1; white-space: nowrap; }
.founder-role { margin-top: calc(1 * var(--u)); font-size: calc(19 * var(--u)); line-height: 1.35; letter-spacing: -.04em; }
.founder-accent { margin-top: calc(11 * var(--u)); width: calc(28 * var(--u)); }
.founder .body-copy { margin-top: calc(18 * var(--u)); width: calc(244 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.39; }
.founder-photo { position: absolute; top: calc(1 * var(--u)); left: calc(294 * var(--u)); right: 0; aspect-ratio: 431 / 282; background-size: 168.213457% auto; background-position: 100% 37.943826%; }

.journey { height: calc(166 * var(--u)); position: relative; color: #f3f2ef; background: #101211 var(--mfe-bg-447f5708b1e4, url("/api/image?src=%2Fassets%2Fimages%2Fmarble.png&w=1920&p=background&d=desktop")) center top / cover; }
.journey::before { content: ""; position: absolute; inset: 0; background: rgba(4, 7, 6, .08); }
.journey-copy { position: absolute; left: calc(35 * var(--u)); top: calc(27 * var(--u)); }
.journey .eyebrow { color: #d0cecb; font-weight: 600; }
.journey h2 { margin-top: calc(6 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.04; letter-spacing: -.03em; font-weight: 650; }
.timeline { position: absolute; left: calc(210 * var(--u)); right: calc(12 * var(--u)); top: calc(52 * var(--u)); display: grid; grid-template-columns: 159fr 175fr 169fr; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; top: calc(9 * var(--u)); left: calc(79.5 * var(--u)); right: calc(84.5 * var(--u)); border-top: calc(1 * var(--u)) solid #a57136; }
.timeline li { position: relative; text-align: center; }
.timeline-dot { display: block; position: relative; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: 0 auto calc(9 * var(--u)); border: calc(2 * var(--u)) solid var(--orange); border-radius: 50%; background: #181b13; }
.timeline-dot::after { content: ""; position: absolute; inset: calc(3 * var(--u)); border: calc(1 * var(--u)) solid #ef6d1b; border-radius: 50%; background: #704c24; }
.timeline h3 { font-size: calc(20 * var(--u)); line-height: 1.2; font-weight: 650; letter-spacing: -.025em; }
.timeline p { font-size: calc(12.5 * var(--u)); line-height: 1.25; letter-spacing: -.03em; margin-top: calc(2 * var(--u)); }
.timeline li + li::before { content: ""; position: absolute; top: calc(39 * var(--u)); bottom: calc(2 * var(--u)); left: calc(-10 * var(--u)); width: calc(1 * var(--u)); background: #806139; }

.approach { height: calc(220 * var(--u)); padding: calc(18 * var(--u)) calc(31 * var(--u)) calc(20 * var(--u)); border-bottom: calc(1 * var(--u)) solid white; }
.approach > .eyebrow { margin-bottom: calc(9 * var(--u)); }
.value-grid { display: grid; grid-template-columns: 1fr .98fr 1.03fr; gap: calc(8 * var(--u)); }
.value-card { height: calc(162 * var(--u)); border: calc(.75 * var(--u)) solid #ffb77d; border-radius: calc(4 * var(--u)); padding: calc(17 * var(--u)) calc(23 * var(--u)) calc(12 * var(--u)); }
.value-card h3 { font-size: calc(18 * var(--u)); line-height: 1.05; letter-spacing: -.05em; font-weight: 750; margin-top: calc(6 * var(--u)); min-height: calc(39 * var(--u)); display: flex; align-items: center; }
.value-card p { margin-top: calc(7 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.38; color: var(--muted); letter-spacing: -.038em; white-space: nowrap; }
.target-icon, .chart-icon, .gear-icon { position: relative; color: var(--orange); width: calc(43 * var(--u)); height: calc(43 * var(--u)); }
.target-icon { width: calc(37 * var(--u)); height: calc(37 * var(--u)); margin-top: calc(2 * var(--u)); margin-bottom: calc(4 * var(--u)); border: calc(3 * var(--u)) solid currentColor; border-radius: 50%; }
.target-icon::before, .target-icon::after { content: ""; position: absolute; border: calc(2.5 * var(--u)) solid currentColor; border-radius: 50%; }
.target-icon::before { inset: calc(5 * var(--u)); }
.target-icon::after { inset: calc(11 * var(--u)); }
.target-icon span { position: absolute; z-index: 1; width: calc(24 * var(--u)); border-top: calc(3 * var(--u)) solid currentColor; left: calc(14 * var(--u)); top: calc(11 * var(--u)); transform: rotate(-49deg); transform-origin: left; }
.target-icon i { position: absolute; z-index: 2; right: calc(-4 * var(--u)); top: calc(-5 * var(--u)); width: calc(10 * var(--u)); height: calc(9 * var(--u)); transform: rotate(-49deg); background: var(--paper); border-left: calc(3 * var(--u)) solid currentColor; border-bottom: calc(3 * var(--u)) solid currentColor; }
.chart-icon { display: flex; align-items: flex-end; gap: calc(5 * var(--u)); padding-bottom: calc(2 * var(--u)); }
.chart-icon span { display: block; width: calc(9 * var(--u)); height: calc(19 * var(--u)); border: calc(2.5 * var(--u)) solid currentColor; border-radius: calc(3 * var(--u)); }
.chart-icon span:nth-child(2) { height: calc(31 * var(--u)); }
.chart-icon span:nth-child(3) { height: calc(42 * var(--u)); }
.gear-icon { width: calc(43 * var(--u)); height: calc(43 * var(--u)); }
.gear-icon > span { position: absolute; z-index: 2; inset: calc(7 * var(--u)); border: calc(2.5 * var(--u)) solid currentColor; border-radius: 50%; background: var(--paper); }
.gear-icon > span::after { content: ""; position: absolute; inset: calc(6 * var(--u)); border: calc(2.5 * var(--u)) solid currentColor; border-radius: 50%; }
.gear-icon > i { position: absolute; left: calc(17 * var(--u)); top: 0; width: calc(9 * var(--u)); height: calc(43 * var(--u)); border: calc(2.5 * var(--u)) solid currentColor; border-radius: calc(3 * var(--u)); background: var(--paper); }
.gear-icon > i:nth-of-type(2) { transform: rotate(45deg); }
.gear-icon > i:nth-of-type(3) { transform: rotate(90deg); }
.gear-icon > i:nth-of-type(4) { transform: rotate(135deg); }

.projects { height: calc(271 * var(--u)); position: relative; border-bottom: calc(3 * var(--u)) solid #faf9f7; }
.projects-copy { position: absolute; left: calc(31 * var(--u)); top: calc(19 * var(--u)); width: calc(207 * var(--u)); }
.projects h2 { font-size: calc(27 * var(--u)); line-height: 1.05; letter-spacing: -.045em; margin-top: calc(10 * var(--u)); }
.projects .body-copy { margin-top: calc(13 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.4; width: calc(202 * var(--u)); }
.text-link { display: inline-flex; align-items: center; gap: calc(11 * var(--u)); margin-top: calc(15 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 750; letter-spacing: -.04em; }
.text-link > span:first-child { border-bottom: calc(1.5 * var(--u)) solid var(--orange); padding-bottom: calc(4 * var(--u)); }
.text-link .arrow-icon { color: var(--orange); width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.project-grid { position: absolute; top: calc(19 * var(--u)); left: calc(254 * var(--u)); right: calc(23 * var(--u)); display: grid; grid-template-columns: 144fr 145fr 145fr; gap: calc(7 * var(--u)); }
.project-card { overflow: hidden; border: calc(.7 * var(--u)) solid #ae8554; border-radius: calc(3 * var(--u)); background: #1c1e1b; color: #f4f2ed; width: 100%; transition: border-color .2s, transform .2s; }
.project-card:hover { border-color: var(--orange); transform: translateY(calc(-3 * var(--u))); }
.project-card > .reference-photo { width: 100%; aspect-ratio: 144 / 178; }
.project-card > .shinest-photo, .project-card > .ndesign-photo { aspect-ratio: 145 / 178; }
.magafi-photo { background-size: 503.472222% auto; background-position: 43.717728% 71.220492%; }
.shinest-photo { background-size: 500% auto; background-position: 69.655172% 71.220492%; }
.ndesign-photo { background-size: 500% auto; background-position: 96.034483% 71.220492%; }
.project-caption { display: flex; align-items: flex-end; justify-content: space-between; height: calc(55 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); background: linear-gradient(115deg, #252624, #191b19); }
.project-caption strong { display: block; font-size: calc(12 * var(--u)); line-height: 1.3; font-weight: 500; letter-spacing: -.025em; }
.project-caption small { display: block; font-size: calc(12 * var(--u)); line-height: 1.3; color: #c2c2bd; font-weight: 400; letter-spacing: -.04em; }
.project-caption .arrow-icon { color: #f1f0e9; width: calc(17 * var(--u)); height: calc(17 * var(--u)); }

.contact-banner { height: calc(230 * var(--u)); position: relative; overflow: hidden; isolation: isolate; color: #f2f2ed; background: #151b15 var(--mfe-bg-fc182283d4de, url("/api/image?src=%2Fassets%2Fimages%2Fhakkimizda-contact-fill.png&w=1920&p=background&d=desktop")) center / cover no-repeat; border-bottom: calc(1 * var(--u)) solid #8b6436; }
.contact-photo { position: absolute; top: 0; right: 0; width: calc(427 * var(--u)); height: calc(230 * var(--u)); background-size: calc(725 * var(--u)) calc(2169 * var(--u)); background-position: calc(-298 * var(--u)) calc(-1670 * var(--u)); }
.contact-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #12170de6, transparent 16%); }
.contact-floor { position: absolute; bottom: 0; left: 0; width: calc(298 * var(--u)); height: calc(17 * var(--u)); background-size: calc(725 * var(--u)) calc(2169 * var(--u)); background-position: 0 calc(-1883 * var(--u)); }
.contact-copy { position: relative; z-index: 1; left: calc(31 * var(--u)); top: calc(35 * var(--u)); width: calc(340 * var(--u)); }
.contact-copy::before { content: ""; position: absolute; z-index: -1; left: calc(-31 * var(--u)); top: calc(-35 * var(--u)); width: calc(370 * var(--u)); height: calc(212 * var(--u)); background: linear-gradient(90deg, #03080680 0%, #03080640 70%, transparent); }
.contact-banner h2 { font-size: calc(25 * var(--u)); line-height: 1.14; letter-spacing: -.04em; font-weight: 700; }
.contact-copy > p { margin-top: calc(4 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.4; letter-spacing: -.04em; }
.contact-copy > .quote-button { margin-top: calc(13 * var(--u)); width: calc(160 * var(--u)); }
.contact-phone { display: flex; width: max-content; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(13 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.4; letter-spacing: -.04em; }
.phone-icon { display: inline-block; position: relative; width: 1.45em; height: 1.45em; flex: none; }
.phone-icon::before { content: ""; position: absolute; inset: 11% 25% 3% 17%; border: .12em solid currentColor; border-top-color: transparent; border-right-color: transparent; border-radius: 45% 30% 40% 50%; transform: rotate(-36deg); }
.phone-icon::after { content: ""; position: absolute; width: 25%; height: 30%; left: 20%; top: 0; border: .12em solid currentColor; border-radius: 35%; transform: rotate(-25deg); box-shadow: .61em .88em 0 -.06em var(--paper); }
.contact-phone .phone-icon { color: #e0b878; width: calc(23 * var(--u)); height: calc(23 * var(--u)); }
.contact-phone .phone-icon::after { box-shadow: .65em .85em 0 -.03em #e0b878; }

.site-footer { height: calc(269 * var(--u)); background: radial-gradient(ellipse at top, #171916, #0d100f); color: #dddeda; padding: calc(21 * var(--u)) calc(31 * var(--u)) 0; }
.footer-grid { display: grid; grid-template-columns: calc(158 * var(--u)) calc(103 * var(--u)) calc(113 * var(--u)) calc(153 * var(--u)) 1fr; gap: calc(9 * var(--u)); }
.brand-footer { width: calc(96 * var(--u)); height: calc(46 * var(--u)); margin-top: calc(-4 * var(--u)); }
.brand-footer .brand-art { background-size: 755.208333% auto; background-position: 4.928458% 90.29675%; }
.footer-brand > p { font-size: calc(11 * var(--u)); line-height: 1.4; margin-top: calc(1 * var(--u)); letter-spacing: -.03em; }
.social-links { display: flex; gap: calc(17 * var(--u)); align-items: center; margin-top: calc(18 * var(--u)); }
.social-links > * { display: flex; align-items: center; justify-content: center; width: calc(17 * var(--u)); height: calc(19 * var(--u)); }
.linkedin-icon { font: 750 calc(21 * var(--u))/1 Arial, sans-serif; letter-spacing: -.02em; }
.instagram-icon { display: inline-block; position: relative; width: 1.15em; height: 1.15em; flex: none; border: .13em solid currentColor; border-radius: 27%; }
.instagram-icon::before { content: ""; position: absolute; width: 46%; height: 46%; border: .11em solid currentColor; border-radius: 50%; left: 27%; top: 27%; }
.instagram-icon::after { content: ""; position: absolute; width: 12%; height: 12%; border-radius: 50%; background: currentColor; top: 12%; right: 12%; }
.social-links .instagram-icon { font-size: calc(15 * var(--u)); }
.youtube-icon { display: inline-block; position: relative; width: calc(18 * var(--u)); height: calc(13 * var(--u)); border-radius: calc(4 * var(--u)); background: currentColor; }
.youtube-icon::after { content: ""; position: absolute; left: 40%; top: 27%; border-top: calc(3 * var(--u)) solid transparent; border-bottom: calc(3 * var(--u)) solid transparent; border-left: calc(4 * var(--u)) solid #111410; }
.footer-nav, .footer-contact { font-size: calc(11 * var(--u)); line-height: 1.45; letter-spacing: -.04em; }
.footer-nav h3, .footer-contact h3 { font-size: calc(11 * var(--u)); font-weight: 650; line-height: 1.35; letter-spacing: -.03em; margin: calc(5 * var(--u)) 0 calc(9 * var(--u)); }
.footer-nav a, .footer-nav :is(button,a) { display: block; line-height: 1.45; }
.footer-nav a:hover, .footer-nav :is(button,a):hover, .footer-contact a:hover, .legal-links button:hover { color: var(--orange); }
.footer-contact { font-style: normal; min-width: 0; }
.footer-contact > span, .footer-contact a { display: flex; align-items: center; gap: calc(9 * var(--u)); line-height: 1.45; min-height: calc(19 * var(--u)); white-space: nowrap; }
.footer-contact .phone-icon, .footer-contact .mail-icon, .footer-contact .instagram-icon, .footer-contact .pin-icon { width: calc(13 * var(--u)); height: calc(13 * var(--u)); font-size: calc(12 * var(--u)); }
.footer-contact .phone-icon::after { box-shadow: .57em .7em 0 -.07em #dddeda; }
.pin-icon { display: inline-block; flex: none; position: relative; width: 1em; height: 1.2em; }
.pin-icon::before { content: ""; position: absolute; width: 70%; height: 70%; left: 15%; top: 0; border: .12em solid currentColor; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.pin-icon::after { content: ""; position: absolute; width: 25%; height: 25%; left: 38%; top: 24%; border: .1em solid currentColor; border-radius: 50%; }
.mail-icon { display: inline-block; flex: none; position: relative; width: 1.25em; height: .9em; border: .1em solid currentColor; border-radius: .12em; }
.mail-icon::after { content: ""; position: absolute; width: 54%; height: 70%; left: 23%; top: -33%; border-right: .1em solid currentColor; border-bottom: .1em solid currentColor; transform: rotate(45deg); }
.footer-motto { border-left: calc(1 * var(--u)) solid #715936; height: calc(119 * var(--u)); margin-top: calc(7 * var(--u)); padding-left: calc(26 * var(--u)); padding-top: calc(9 * var(--u)); }
.footer-motto .accent-line { width: calc(24 * var(--u)); }
.footer-motto p { margin-top: calc(15 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.23; letter-spacing: -.04em; font-weight: 400; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; border-top: calc(1 * var(--u)) solid #79603a; margin-top: calc(27 * var(--u)); padding-top: calc(24 * var(--u)); font-size: calc(10 * var(--u)); letter-spacing: -.035em; color: #b3b3b0; }
.legal-links { display: flex; align-items: center; }
.legal-links button + button { margin-left: calc(13 * var(--u)); padding-left: calc(13 * var(--u)); border-left: calc(1 * var(--u)) solid #80613d; }

/* Native popovers live outside the screenshot layout. */
.panel { position: fixed; width: min(620px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); overflow: auto; margin: auto; border: 1px solid #c9ad8c; padding: 38px; border-radius: 8px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 100px #0006; font: 14px/1.5 "Manrope", Arial, sans-serif; }
.panel::backdrop { background: #07100bd9; backdrop-filter: blur(5px); }
.panel .eyebrow { font-size: 11px; gap: 10px; margin-bottom: 13px; }
.panel .eyebrow::before { width: 22px; height: 2px; }
.panel h2 { font-size: 32px; line-height: 1.15; margin-bottom: 20px; }
.panel > p:not(.eyebrow) { color: #6e7272; margin-bottom: 22px; }
.panel-close { position: absolute; top: 9px; right: 11px; width: 34px; height: 34px; border-radius: 50%; font: 28px/34px Arial, sans-serif; text-align: center; color: #5e655e; }
.panel-close:hover { background: #e7e4dd; color: var(--ink); }
.panel-contact { display: flex; align-items: center; gap: 16px; margin-top: 12px; border: 1px solid #d8c4ac; padding: 16px; border-radius: 5px; overflow-wrap: anywhere; }
.panel-contact > span:first-child { color: var(--orange); width: 24px; height: 24px; font-size: 20px; }
.panel-contact .phone-icon::after { box-shadow: .55em .7em 0 -.06em var(--orange); }
.panel-contact small, .panel-contact strong { display: block; }
.panel-contact small { color: #737971; font-size: 12px; }
.panel-contact strong { font-size: 15px; }
.panel-contact:hover { border-color: var(--orange); }
.project-panel { width: min(480px, calc(100vw - 32px)); }
.panel-photo { width: 100%; aspect-ratio: 144 / 178; border-radius: 4px; }
.panel-photo.shinest-photo, .panel-photo.ndesign-photo { aspect-ratio: 145 / 178; }
.panel-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.panel-projects .reference-photo { width: 100%; aspect-ratio: 144 / 178; margin-bottom: 10px; }
.panel-projects .shinest-photo, .panel-projects .ndesign-photo { aspect-ratio: 145 / 178; }
.panel-projects strong, .panel-projects small { display: block; }
.panel-projects small { color: #74776e; }
.panel-quote { font-size: 14px; min-height: 42px; padding: 10px 24px; border-radius: 5px; gap: 12px; }
.panel-quote .arrow-icon { width: 18px; height: 18px; }
.service-list { padding-left: 20px; margin-block: 20px 28px; }
.service-list li { margin-bottom: 9px; }
.sitemap { display: grid; gap: 12px; }
.sitemap a:hover, .sitemap button:hover { color: var(--orange); }

@media (min-width: 1920px) { :root { --u: calc(1920px / 725); } }

/* The reference is a desktop page. Below 600px the same content reflows. */
@media (max-width: 600px) {
  :root { --u: 1px; }
  html { scroll-padding-top: 12px; }
  .page { width: 100%; }
  .hero { height: 650px; background-image: none; }
  .site-header { height: 73px; align-items: center; padding: 12px 20px; gap: 14px; background: #0b100e; }
  .brand-header { width: 88px; height: 38px; }
  .desktop-nav { display: none; }
  .header-quote { margin: 0 0 0 auto; width: auto; min-height: 36px; font-size: 11px; padding-inline: 12px; gap: 7px; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: flex; align-items: center; justify-content: center; width: 32px; height: 36px; list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .menu-icon { position: relative; display: block; width: 22px; height: 16px; border-block: 2px solid currentColor; }
  .menu-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: currentColor; }
  .mobile-menu nav { position: absolute; top: 67px; left: 20px; right: 20px; padding: 14px; display: grid; gap: 2px; border: 1px solid #8a653c; background: #141914; border-radius: 6px; box-shadow: 0 15px 30px #0005; }
  .mobile-menu:not([open]) > nav { display: none; }
  .mobile-menu nav a, .mobile-menu nav button { display: block; padding: 12px; font-size: 14px; }
  .mobile-menu nav a[aria-current] { color: var(--orange); }
  .breadcrumb { top: 92px; left: 24px; font-size: 10px; }
  .hero-copy { top: 136px; left: 24px; right: 20px; }
  .hero h1 { font-size: clamp(32px, 8.8vw, 46px); line-height: 1.08; }
  .hero-description { font-size: 16px; line-height: 1.42; margin-top: 13px; max-width: 355px; }
  .intro .desktop-break, .founder .desktop-break { display: none; }
  .hero-eyebrow { font-size: 10px; }
  .hero-quote { margin-top: 21px; min-height: 42px; width: 170px; font-size: 14px; }
  .hero::after { display: none; }
  .hero-photo { --photo-scale: max(calc(100vw / 421), calc(318px / 329)); left: auto; right: 0; top: 332px; width: 100%; height: 318px; background-size: calc(725 * var(--photo-scale)) calc(2169 * var(--photo-scale)); background-position: 100% calc(-41 * var(--photo-scale)); }
  .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0b100e, transparent 24%); }
  .hero-glass, .hero-glass-lower, .hero-floor, .hero-bottom-edge { display: none; }
  .concept-caption { font-size: 9px; bottom: 13px; right: 20px; }
  .intro, .founder { height: auto; display: flex; flex-direction: column; }
  .intro { padding: 32px 24px 25px; border-bottom: 6px solid white; }
  .intro-copy, .founder-copy { position: static; width: auto; }
  .intro h2 { font-size: 33px; line-height: 1.05; margin-top: 13px; }
  .intro-lead { font-size: 15px; white-space: normal; margin-top: 17px; }
  .intro .body-copy, .founder .body-copy { width: auto; font-size: 15px; line-height: 1.65; letter-spacing: -.027em; margin-top: 16px; }
  .intro-figure { position: static; margin-top: 24px; }
  .intro-figure figcaption { font-size: 11px; padding-top: 8px; }
  .founder { padding: 31px 24px 0; border-bottom: 12px solid var(--paper); }
  .founder .eyebrow, .approach .eyebrow, .projects .eyebrow { font-size: 11px; }
  .founder h2 { font-size: clamp(28px, 7.9vw, 40px); white-space: normal; margin-top: 12px; }
  .founder-role { font-size: 21px; margin-top: 4px; }
  .founder-accent { margin-top: 14px; }
  .founder-photo { position: static; margin: 26px -24px 0; }
  .journey { height: auto; padding: 31px 24px 34px; }
  .journey-copy { position: relative; left: auto; top: auto; }
  .journey h2 { font-size: 28px; margin-top: 13px; line-height: 1.1; }
  .timeline { position: relative; left: auto; right: auto; top: auto; grid-template-columns: 1fr; gap: 28px; margin-top: 31px; }
  .timeline::before { left: 9px; top: 12px; bottom: 21px; right: auto; border-top: 0; border-left: 1px solid #a57136; }
  .timeline li { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; text-align: left; }
  .timeline-dot { margin: 4px 0 0; grid-row: 1 / 3; }
  .timeline h3 { font-size: 23px; }
  .timeline p { font-size: 14px; line-height: 1.4; margin-top: 5px; }
  .timeline li + li::before { display: none; }
  .approach { height: auto; padding: 28px 24px; }
  .approach > .eyebrow { margin-bottom: 17px; }
  .value-grid { grid-template-columns: 1fr; gap: 12px; }
  .value-card { height: auto; min-height: 148px; padding: 22px; display: grid; grid-template-columns: 47px 1fr; column-gap: 18px; align-items: center; }
  .value-card > div { grid-row: 1 / 3; align-self: start; margin-top: 3px; }
  .value-card h3 { font-size: 22px; min-height: auto; margin-top: 0; display: block; }
  .value-card p { white-space: normal; font-size: 15px; line-height: 1.45; margin-top: 9px; }
  .value-card p br { display: none; }
  .projects { height: auto; padding: 29px 24px 28px; }
  .projects-copy { position: static; width: auto; }
  .projects h2 { font-size: 31px; margin-top: 14px; }
  .projects .body-copy { width: auto; font-size: 15px; line-height: 1.6; margin-top: 17px; }
  .text-link { font-size: 15px; min-height: 44px; margin-top: 12px; }
  .project-grid { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 21px; }
  .project-card { border-radius: 4px; }
  .project-caption { height: 57px; padding: 10px 8px; }
  .project-caption strong, .project-caption small { font-size: 10px; }
  .project-caption .arrow-icon { width: 13px; height: 13px; }
  .contact-banner { height: 420px; }
  .contact-photo { --photo-scale: max(calc(100vw / 427), calc(420px / 230)); width: 100%; height: 100%; background-size: calc(725 * var(--photo-scale)) calc(2169 * var(--photo-scale)); background-position: 100% calc(-1670 * var(--photo-scale)); }
  .contact-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #07100de8 5%, #07100d80 70%, #07100d55); }
  .contact-floor { display: none; }
  .contact-copy { left: 24px; top: 51px; width: calc(100% - 48px); }
  .contact-copy::before { display: none; }
  .contact-banner h2 { font-size: clamp(28px, 7.4vw, 36px); line-height: 1.14; }
  .contact-copy > p { font-size: 15px; line-height: 1.5; margin-top: 13px; max-width: 260px; }
  .contact-copy > .quote-button { min-height: 43px; width: 177px; font-size: 14px; margin-top: 22px; }
  .contact-phone { display: flex; font-size: 16px; gap: 12px; margin-top: 20px; }
  .site-footer { height: auto; padding: 28px 24px 25px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 27px 16px; }
  .footer-brand { grid-column: 1 / -1; }
  .brand-footer { width: 109px; height: 52px; }
  .footer-brand > p { font-size: 13px; margin-top: 6px; line-height: 1.5; }
  .social-links { margin-top: 16px; gap: 19px; }
  .social-links > * { min-width: 32px; min-height: 34px; justify-content: flex-start; }
  .linkedin-icon { font-size: 23px; }
  .social-links .instagram-icon { font-size: 18px; }
  .youtube-icon { width: 22px; height: 16px; }
  .footer-nav, .footer-contact { font-size: 13px; line-height: 1.7; }
  .footer-nav h3, .footer-contact h3 { font-size: 14px; margin: 0 0 10px; }
  .footer-nav a, .footer-nav :is(button,a) { min-height: 29px; line-height: 1.7; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-contact > span, .footer-contact a { font-size: 13px; min-height: 31px; gap: 11px; }
  .footer-contact .phone-icon, .footer-contact .mail-icon, .footer-contact .instagram-icon, .footer-contact .pin-icon { width: 15px; height: 15px; font-size: 14px; }
  .footer-motto { grid-column: 1 / -1; height: auto; border-left: 0; border-top: 1px solid #715936; padding: 20px 0 0; margin: 0; display: flex; align-items: center; gap: 14px; }
  .footer-motto p { margin: 0; font-size: 15px; }
  .footer-motto br { display: none; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 19px; font-size: 10px; margin-top: 23px; padding-top: 19px; }
  .legal-links button { min-height: 28px; }
  .panel { padding: 32px 22px 25px; }
  .panel h2 { font-size: 27px; }
  .panel-contact { padding: 13px 10px; gap: 10px; }
  .panel-contact strong { font-size: 13px; }
  .panel-projects { gap: 8px; font-size: 12px; }
}

@media (max-width: 359px) {
  .site-header { padding-inline: 15px; gap: 9px; }
  .brand-header { width: 79px; height: 34px; }
  .header-quote { padding-inline: 10px; font-size: 10px; gap: 5px; }
  .project-grid { grid-template-columns: 1fr; gap: 14px; }
  .project-card > .reference-photo { aspect-ratio: 144 / 178; }
  .project-caption { height: 65px; padding: 13px 16px; }
  .project-caption strong, .project-caption small { font-size: 14px; }
  .project-caption .arrow-icon { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

@media print {
  .page { max-width: 100%; }
  .panel, .mobile-menu, .skip-link { display: none !important; }
  .hero, .journey, .contact-banner, .site-footer { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Independent high-resolution photos replace screenshot crops. */
.hero { background: linear-gradient(90deg, #080c0bd9 0%, #080c0b77 38%, #080c0b00 72%), var(--mfe-bg-2bfa08e9a993, url("/api/image?src=%2Fassets%2Fimages%2Fabout-hq%2Fhero.png&w=1920&p=background&d=desktop")) center / cover no-repeat; }
.intro-photo { background-image: var(--mfe-bg-c3f9e4d184c7, url("/api/image?src=%2Fassets%2Fprojeler%2Fimages%2Foriginals%2Fshinest.jpg&w=1920&p=background&d=desktop&v=111a614166ce")); background-size: cover; background-position: center; }
.founder-photo { background-image: var(--mfe-bg-26567741f545, url("/api/image?src=%2Fassets%2Fimages%2Fabout-hq%2Ffounder.png&w=1920&p=background&d=desktop")); background-size: cover; background-position: center; overflow: hidden; }
.magafi-photo { background-image: var(--mfe-bg-134057db0c46, url("/api/image?src=%2Fassets%2Fprojeler%2Fimages%2Foriginals%2Fmagafi.jpg&w=1920&p=background&d=desktop&v=4a94abd173c0")); background-size: cover; background-position: center; }
.shinest-photo { background-image: var(--mfe-bg-c3f9e4d184c7, url("/api/image?src=%2Fassets%2Fprojeler%2Fimages%2Foriginals%2Fshinest.jpg&w=1920&p=background&d=desktop&v=111a614166ce")); background-size: cover; background-position: center; }
.ndesign-photo { background-image: var(--mfe-bg-650d65a7f1a3, url("/api/image?src=%2Fassets%2Fprojeler%2Fimages%2Foriginals%2Fndesign-cephe.jpg&w=1920&p=background&d=desktop&v=e41d686fb577")); background-size: cover; background-position: center; }
.contact-banner { background: linear-gradient(90deg, #080c0bb3 0%, #080c0b44 45%, transparent 75%), var(--mfe-bg-ffe0f27473f9, url("/api/image?src=%2Fassets%2Fimages%2Fabout-hq%2Fcontact.png&w=1920&p=background&d=desktop")) center / cover no-repeat; }
.wall-slogan { position: absolute; left: 32%; top: 15%; color: #252923; font: 500 clamp(18px, 2.1vw, 28px)/1.4 Manrope, sans-serif; letter-spacing: .02em; }
.wall-logo { position: absolute; right: 7%; bottom: 12%; display: flex; align-items: center; gap: 8px; color: #161b18; font: 600 clamp(30px, 4vw, 58px)/1 Manrope, sans-serif; }
.wall-logo svg { width: .65em; height: 1em; }
.wall-logo small { display: block; text-align: right; font-size: .19em; letter-spacing: .03em; margin-top: 3px; }
@media (max-width: 767px) {
  .hero { background-position: 64% center; }
  .founder-photo { position: relative; }
  .wall-slogan { font-size: clamp(16px, 4.8vw, 26px); }
  .wall-logo { font-size: clamp(28px, 8vw, 44px); }
}
@media (max-width: 767px) { .founder-photo { left: auto; right: auto; top: auto; } }