/* ==========================================================================
   metapsikoloji — tema
   Renkler site fotoğraflarından türetilmiştir (Boğaz, gün batımı, Kız Kulesi):
     derin deniz #0d2a4d · deniz #165290 · orta mavi #2e73b4
     gök #6ca7cf · kehribar #c49a72 · koyu kehribar #9a5f2c · pus #c9d3d4
   Logodan korunan vurgu: gül #dd376c (yalnızca gradyan şeritte).
   Font değiştirmek için --font-heading / --font-body ve index.html içindeki
   Google Fonts bağlantısını güncellemek yeterlidir.
   ========================================================================== */
:root {
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* fotoğraflardan çıkan renkler */
  --sea-deep: #0d2a4d;
  --sea: #165290;
  --sea-mid: #2e73b4;
  --sky: #6ca7cf;
  --amber: #c49a72;
  --amber-deep: #9a5f2c;
  --rose: #dd376c;

  /* arayüz renkleri */
  --bg: #f7f9fb;
  --bg-alt: #e9f0f6;
  --surface: #ffffff;
  --header-bg: rgba(247, 249, 251, .9);
  --text: #10233d;
  --muted: #44597a;
  --accent: #12508f;
  --accent-hover: #0e3f72;
  --accent-soft: #e2ecf6;
  --cta: #9a5f2c;
  --cta-hover: #7f4d22;
  --btn-bg: #0d2a4d;
  --btn-bg-hover: #143a66;
  --btn-fg: #ffffff;
  --tint-sea: #e6eef7;
  --tint-warm: #f7efe5;
  --border: #d5e0ea;
  --shadow: 0 1px 2px rgba(13, 42, 77, .06), 0 10px 28px rgba(13, 42, 77, .08);
  --grad: linear-gradient(90deg, #6ca7cf 0%, #2e73b4 26%, #165290 48%, #c49a72 78%, #dd376c 100%);

  --radius: 14px;
  --wrap: 1120px;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a1a2e;
    --bg-alt: #0f2440;
    --surface: #142c4d;
    --header-bg: rgba(10, 26, 46, .9);
    --text: #e8eef6;
    --muted: #a3b8d0;
    --accent: #8cc3ec;
    --accent-hover: #a9d3f2;
    --accent-soft: #16304f;
    --cta: #e0a66a;
    --cta-hover: #eebb85;
    --btn-bg: #8cc3ec;
    --btn-bg-hover: #a9d3f2;
    --btn-fg: #0a1a2e;
    --tint-sea: #12294a;
    --tint-warm: #2a2014;
    --border: #244062;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  --bg: #0a1a2e;
  --bg-alt: #0f2440;
  --surface: #142c4d;
  --header-bg: rgba(10, 26, 46, .9);
  --text: #e8eef6;
  --muted: #a3b8d0;
  --accent: #8cc3ec;
  --accent-hover: #a9d3f2;
  --accent-soft: #16304f;
  --cta: #e0a66a;
  --cta-hover: #eebb85;
  --btn-bg: #8cc3ec;
  --btn-bg-hover: #a9d3f2;
  --btn-fg: #0a1a2e;
  --tint-sea: #12294a;
  --tint-warm: #2a2014;
  --border: #244062;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .45);
}

/* ===== temel ===== */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* gün batımı gradyanı: sayfanın en üstünde ince şerit */
body::before {
  content: "";
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: var(--grad);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.012em;
  color: var(--text);
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.15rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1.1em; }
a { color: var(--accent); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--cta);
  outline-offset: 3px;
  border-radius: 4px;
}

.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: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--sea-deep); color: #fff;
  padding: 12px 18px; border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow { max-width: 760px; }

/* ===== başlık / menü ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 76px;
}

.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 42px; width: auto; }

/* Logo lacivert; koyu temada okunur kalması için beyaz zemine alınır. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand img,
  :root:not([data-theme="light"]) .footer-logo {
    background: #fff; padding: 5px 9px; border-radius: 9px;
  }
}
:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .footer-logo {
  background: #fff; padding: 5px 9px; border-radius: 9px;
}

.nav ul {
  display: flex; align-items: center; gap: 24px;
  list-style: none; margin: 0; padding: 0;
}
.nav a:not(.btn) {
  color: var(--text); text-decoration: none;
  font-size: .95rem; font-weight: 600;
}
.nav a:not(.btn):hover { color: var(--accent); text-decoration: underline; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid var(--border);
  border-radius: 10px; cursor: pointer;
  position: relative;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute; left: 13px; width: 20px; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle-bar { top: 22px; }
.nav-toggle-bar::before { content: ""; top: -6px; left: 0; }
.nav-toggle-bar::after  { content: ""; top: 6px; left: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translateY(-6px) rotate(-45deg); }

/* ===== butonlar ===== */
.btn {
  display: inline-block;
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 13px 26px; border: 1px solid var(--btn-bg);
  border-radius: 999px; font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); }
.btn:active { transform: translateY(1px); }

.btn-cta { background: var(--cta); border-color: var(--cta); color: #fff; }
.btn-cta:hover { background: var(--cta-hover); border-color: var(--cta-hover); }

.btn-sm { padding: 10px 20px; font-size: .9rem; }

.btn-ghost { background: transparent; color: var(--accent); border-color: currentColor; }
.btn-ghost:hover { background: var(--accent-soft); color: var(--accent-hover); }

/* Koyu temada kehribar buton zemini üzerinde koyu yazı okunur */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn-cta { color: #2a1a08; }
}
:root[data-theme="dark"] .btn-cta { color: #2a1a08; }

/* ===== bölüm ortak ===== */
.section { padding: clamp(60px, 8vw, 100px) 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-desc { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 .7em;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
}
.eyebrow::before {
  content: ""; width: 26px; height: 3px; border-radius: 2px;
  background: var(--grad); flex: none;
}

.grid-2 {
  display: grid; gap: clamp(32px, 5vw, 64px);
  grid-template-columns: 1fr 1fr; align-items: start;
}
.grid-2-tight { align-items: center; }

/* ==========================================================================
   Fotoğraflı bölümler
   Fotoğrafın parlaklığı değişken olduğu için üzerine sabit koyu bir perde
   konur ve bölüm içindeki renk değişkenleri açık tonlarla ezilir. Böylece
   metin, temadan ve fotoğrafın hangi bölgesine denk geldiğinden bağımsız
   olarak okunur kalır.
   ========================================================================== */
.photo-section {
  position: relative;
  background-color: var(--sea-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  --text: #ffffff;
  --muted: #d8e4f0;
  --accent: #ffd9ad;
  --border: rgba(255, 255, 255, .28);
  --surface: rgba(255, 255, 255, .1);
  --btn-bg: #ffffff;
  --btn-bg-hover: #e8eef6;
  --btn-fg: #0d2a4d;
  --cta: #e0a66a;
  --cta-hover: #eebb85;
  color: #fff;
}
.photo-section::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8, 22, 40, .9) 0%, rgba(8, 22, 40, .82) 48%, rgba(8, 22, 40, .7) 100%);
}
.photo-section > * { position: relative; }
.photo-section .btn-cta { color: #2a1a08; }
.photo-section .btn-ghost { background: transparent; color: #fff; border-color: #fff; }
.photo-section .btn-ghost:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.photo-section h1, .photo-section h2, .photo-section h3 { color: #fff; }

.hero { background-image: url("../img/bg-gunbatimi.jpg"); }
#koltuk { background-image: url("../img/bg-kizkulesi.jpg"); }
#online { background-image: url("../img/bg-sahil.jpg"); }

/* Kız Kulesi karesinin göğü diğerlerinden parlak; perdesi bir tık koyu. */
#koltuk::before {
  background: linear-gradient(100deg, rgba(8, 22, 40, .94) 0%, rgba(8, 22, 40, .9) 48%, rgba(8, 22, 40, .84) 100%);
}

/* ===== hero ===== */
.hero { padding: clamp(60px, 8vw, 104px) 0; }
.hero-inner {
  display: grid; gap: clamp(32px, 5vw, 56px);
  grid-template-columns: 1.12fr .88fr; align-items: center;
}
.lead-serif {
  font-family: var(--font-heading);
  font-size: clamp(1.18rem, 2.1vw, 1.42rem);
  line-height: 1.58;
  color: var(--text);
  max-width: 40ch;
  margin-bottom: 1.5em;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  list-style: none; margin: 0; padding: 0;
  font-size: .92rem; color: var(--muted); font-weight: 500;
}
.hero-meta li { display: flex; align-items: center; gap: 9px; }
.hero-meta li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cta); flex: none;
}

.hero-media { margin: 0; }
.hero-media img {
  width: 100%;
  border-radius: calc(var(--radius) + 8px);
  border: 4px solid rgba(255, 255, 255, .85);
  box-shadow: 0 18px 44px rgba(4, 14, 28, .45);
}
.hero-media figcaption {
  margin-top: 12px; text-align: center;
  font-size: .88rem; color: var(--muted);
}

/* ===== deneyim şeridi ===== */
.stats-strip {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 30px 0;
}
.stats {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  text-align: center;
}
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat strong {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 600; color: var(--accent);
  line-height: 1.1;
}
.stat span { color: var(--muted); font-size: .92rem; }

/* ===== kartlar ===== */
.card-stack { display: grid; gap: 16px; }
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .35em; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ===== yaklaşım blokları ===== */
.approach { display: grid; gap: 22px; }
.approach-item {
  position: relative; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(26px, 3.5vw, 34px);
  box-shadow: var(--shadow);
}
.approach-item::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--grad);
}
.approach-item p:last-child { margin-bottom: 0; }
.approach-tag {
  margin-bottom: .85em;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
}
@media (min-width: 900px) {
  .approach { grid-template-columns: repeat(3, 1fr); }
}

/* ===== temalar ===== */
.grid-cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.service {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--sky);
  border-radius: var(--radius);
  padding: 24px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.service:nth-child(4n+2) { border-top-color: var(--sea-mid); }
.service:nth-child(4n+3) { border-top-color: var(--sea); }
.service:nth-child(4n+4) { border-top-color: var(--amber); }
.service:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.service h3 { margin-bottom: .4em; }
.service p { margin: 0; color: var(--muted); font-size: .95rem; }

/* ===== adımlar ===== */
.steps {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.steps li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.step-no {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; margin-bottom: 16px;
  border-radius: 50%;
  background: var(--sea-deep); color: #fff;
  font-weight: 700; font-size: 1rem;
}
.steps li:nth-child(2) .step-no { background: var(--sea); }
.steps li:nth-child(3) .step-no { background: var(--sea-mid); }
.steps li:nth-child(4) .step-no { background: var(--amber-deep); }
.steps h3 { margin-bottom: .35em; }
.steps p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Koyu temada daireler açık zemin + koyu yazı */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .step-no { background: var(--accent); color: #0a1a2e; }
  :root:not([data-theme="light"]) .steps li:nth-child(2) .step-no { background: var(--sky); color: #0a1a2e; }
  :root:not([data-theme="light"]) .steps li:nth-child(3) .step-no { background: var(--sea-mid); color: #fff; }
  :root:not([data-theme="light"]) .steps li:nth-child(4) .step-no { background: var(--cta); color: #2a1a08; }
}
:root[data-theme="dark"] .step-no { background: var(--accent); color: #0a1a2e; }
:root[data-theme="dark"] .steps li:nth-child(2) .step-no { background: var(--sky); color: #0a1a2e; }
:root[data-theme="dark"] .steps li:nth-child(3) .step-no { background: var(--sea-mid); color: #fff; }
:root[data-theme="dark"] .steps li:nth-child(4) .step-no { background: var(--cta); color: #2a1a08; }

/* ===== liste / alıntı / kapanış ===== */
.check-list { list-style: none; margin: 0 0 26px; padding: 0; }
.check-list li {
  position: relative; padding-left: 30px; margin-bottom: 11px;
  color: var(--muted);
}
.check-list li::before {
  content: ""; position: absolute; left: 4px; top: .6em;
  width: 10px; height: 6px;
  border-left: 2.5px solid var(--cta);
  border-bottom: 2.5px solid var(--cta);
  transform: rotate(-45deg);
}

.quote-card {
  background: var(--tint-sea);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(28px, 5vw, 48px);
}
.quote-card blockquote { margin: 0; }
.quote-card p {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-style: italic; line-height: 1.5; color: var(--text);
}
.quote-card footer { color: var(--muted); font-size: .92rem; }

.closing-card {
  background: var(--tint-warm);
  border-radius: calc(var(--radius) + 6px);
  padding: clamp(28px, 5vw, 48px);
}
.closing-card p {
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.9vw, 1.25rem);
  line-height: 1.65; color: var(--text);
}

/* Fotoğraflı bölümlerde kartlar cam görünümlü */
.photo-section .quote-card,
.photo-section .closing-card {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(6px);
}

/* ===== sss ===== */
details { border-bottom: 1px solid var(--border); padding: 4px 0; }
summary {
  cursor: pointer; list-style: none;
  padding: 19px 44px 19px 0; position: relative;
  font-weight: 600; font-family: var(--font-heading); font-size: 1.08rem;
  color: var(--text);
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; position: absolute; right: 10px; top: 27px;
  width: 9px; height: 9px;
  border-right: 2.5px solid var(--cta);
  border-bottom: 2.5px solid var(--cta);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
details[open] summary { color: var(--accent); }
details[open] summary::after { transform: rotate(-135deg); top: 31px; }
details p { color: var(--muted); padding-bottom: 6px; margin: 0 0 14px; }

/* ===== eksik bilgi işareti ===== */
.todo {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  padding: 3px 10px;
  font-size: .87rem; font-style: normal;
}

/* ===== iletişim ===== */
.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding: 15px 0; border-bottom: 1px solid var(--border);
}
.contact-label {
  flex: 0 0 130px; color: var(--muted);
  font-size: .82rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

.contact-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 34px);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 18px; }
.field label { display: block; margin-bottom: 7px; font-size: .9rem; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 1rem;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 10px;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field input.invalid, .field textarea.invalid { border-color: var(--cta); }
.form-note { margin: 14px 0 0; font-size: .88rem; color: var(--muted); }
.form-note.hata { color: var(--cta); font-weight: 600; }

/* form sonucu: mailto açılmazsa mesaj burada görünür */
.form-sonuc {
  margin-top: 18px; padding: 18px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.form-sonuc[hidden] { display: none; }
.form-sonuc h3 { font-size: 1rem; margin-bottom: .5em; }
.form-sonuc pre {
  margin: 0 0 14px; padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .85rem; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; word-break: break-word;
  max-height: 200px; overflow: auto;
}
.form-sonuc-aksiyon { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===== alt bilgi ===== */
.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
  padding: 52px 0 40px;
}
.footer-inner { display: grid; gap: 26px; }
.footer-logo { height: 40px; width: auto; }
.footer-note { color: var(--muted); font-size: .92rem; margin: 10px 0 0; }
.site-footer nav ul {
  display: flex; flex-wrap: wrap; gap: 8px 24px;
  list-style: none; margin: 0; padding: 0;
}
.site-footer nav a { color: var(--text); text-decoration: none; font-size: .93rem; font-weight: 500; }
.site-footer nav a:hover { color: var(--accent); text-decoration: underline; }
.footer-legal {
  margin: 0; padding-top: 22px;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: .85rem;
}

/* ===== mobil ===== */
@media (max-width: 900px) {
  .hero-inner, .grid-2 { grid-template-columns: 1fr; }
  .hero-media { order: -1; max-width: 320px; }
  /* Mobilde fotoğraflı bölümlerin perdesi dikey aksın */
  .photo-section::before {
    background: linear-gradient(180deg, rgba(8, 22, 40, .88) 0%, rgba(8, 22, 40, .82) 100%);
  }
}

@media (max-width: 780px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    display: none;
    padding: 8px var(--gutter) 22px;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav li { border-bottom: 1px solid var(--border); }
  .nav li:last-child { border-bottom: 0; padding-top: 16px; }
  .nav a:not(.btn) { display: block; padding: 14px 0; }
  .nav .btn { display: block; }
  .header-inner { position: relative; }
  .brand img { height: 36px; }
  .contact-label { flex-basis: 100%; }
}