/* Domi Aile Danışma Merkezi — ortak stil.
   Ana sayfa, blog listesi, yazı sayfası ve yönetim paneli bunu paylaşır. */
:root{
  --cream:#FCF4E9; --sand:#F5E8D7; --paper:#FFFDF9;
  --ink:#14100E; --body:#3A2F28; --muted:#6B5B4E;
  --rose:#C08579; --rose-deep:#8E5044; --blush:#F0D9C4;
  --sage:#A9C0A6; --camel:#D3AE79;
  --line:#E3D5C2; --hair:#D8C6AF;
  --sp:clamp(20px,5vw,32px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--body); overflow-x:hidden;
  font:400 17px/1.7 "Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{margin:0; color:var(--ink); font-weight:300; line-height:1.14; letter-spacing:-.015em}
p{margin:0}
a{color:inherit}
svg{display:block}
.wrap{width:100%; max-width:1080px; margin:0 auto; padding:0 var(--sp); position:relative}
.script{font-family:"Sacramento",cursive; font-weight:400; letter-spacing:.01em}
.caps{font-size:11.5px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:var(--muted)}

/* ── butonlar: logonun ince çizgi dili ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px; border-radius:100px; border:1px solid var(--ink);
  font:500 14px/1 "Jost",sans-serif; letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap; background:transparent; color:var(--ink);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn svg{flex:none}
.btn-ink{background:var(--ink); color:var(--cream)}
.btn-ink:hover{background:#000; transform:translateY(-2px)}
.btn-line:hover{background:var(--ink); color:var(--cream); transform:translateY(-2px)}
:focus-visible{outline:2px solid var(--rose-deep); outline-offset:4px; border-radius:8px}

/* ── header ── */
header{position:sticky; top:0; z-index:50; background:rgba(252,244,233,.86); backdrop-filter:blur(12px); transition:border-color .3s; border-bottom:1px solid transparent}
header.stuck{border-bottom-color:var(--line)}
.bar{display:flex; align-items:center; justify-content:space-between; height:74px; gap:18px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
/* yatay kilit: amblem solda, yazı markası + altyazı sağda (altyazı genişliği yazıyla eşleşsin) */
.brand .mk{height:46px; width:107px; flex:none}
.brand .wm{line-height:1}
.brand .wm .wd{display:block; height:45px; width:120px; color:var(--ink)}
.brand .wm span{display:block; font-size:7.8px; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); margin-top:5px; font-weight:500}
nav{display:none; gap:22px}
nav a{text-decoration:none; color:var(--body); font-size:13px; letter-spacing:.11em; text-transform:uppercase; font-weight:500; position:relative; padding:6px 0}
nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:var(--ink); transition:right .32s ease}
nav a:hover::after{right:0}
.hcta{display:none}

/* ── hero: merkezî, çizgi kompozisyon ── */
.hero{padding:clamp(34px,6vw,58px) 0 clamp(30px,4vw,44px); text-align:center}
.hero .mark{width:min(300px,66vw); margin:0 auto clamp(20px,3vw,30px)}
.hero h1{font-size:clamp(36px,7.2vw,62px); font-weight:300}
.hero h1 .script{display:block; font-size:clamp(52px,10.5vw,92px); color:var(--rose-deep); line-height:.92; margin-top:6px; font-weight:400; letter-spacing:0}
.hero .lead{margin:clamp(20px,3vw,26px) auto 0; max-width:52ch; color:var(--muted); font-size:clamp(16.5px,2.2vw,18.5px)}
.hero .cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:clamp(26px,3.4vw,34px)}

/* ── künye şeridi: gölgesiz, tel örgü ── */
.strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:clamp(34px,4.5vw,52px)}
.strip-in{display:grid; grid-template-columns:repeat(2,1fr)}
.st{padding:22px 14px; text-align:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line)}
.st:nth-child(2n){border-right:0}
.st:nth-last-child(-n+2){border-bottom:0}
.st b{display:block; font-size:clamp(21px,3.6vw,27px); font-weight:400; color:var(--ink); letter-spacing:-.01em}
.st span{display:block; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:7px; font-weight:500}

/* ── bölüm ── */
section{padding:clamp(52px,8vw,88px) 0}

/* ── bölümler arası "sayfa geçişi" ──
   her bölüm tam ekran bir sayfa: kendi zemini, dikeyde ortalanmış içerik ve
   içeri girerken sırayla yükselen bloklar. scroll-snap YOK — tekerlek her
   döndüğünde yakalayıp bırakıyor, kaydırma takılıyordu. */
.page{
  position:relative; background:var(--surf,var(--cream));
  scroll-margin-top:74px;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  padding:clamp(88px,12vh,128px) 0;
}
#kadro{--surf:var(--paper)} #surec{--surf:var(--sand)} #yazilar{--surf:var(--paper)} #sss{--surf:var(--paper)} #iletisim{--surf:var(--sand)}
/* ayraç çizgisi ortadan iki yana açılır */
.page::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px; background:var(--hair);
  transform:scaleX(0); transform-origin:50% 50%; transition:transform 1.3s cubic-bezier(.22,.7,.3,1);
}
.page.in::before{transform:scaleX(1)}
/* bloklar: gecikmeleri JS sırayla veriyor (transition-delay) */
.rv{opacity:0; transform:translateY(34px); transition:opacity 1.15s cubic-bezier(.22,.7,.3,1), transform 1.15s cubic-bezier(.22,.7,.3,1)}
.rv.in{opacity:1; transform:none}
.shead{text-align:center; max-width:600px; margin:0 auto clamp(32px,4.5vw,48px)}
.shead h2{font-size:clamp(29px,5.2vw,44px); margin-top:14px}
.shead h2 .script{color:var(--rose-deep); font-size:1.24em; letter-spacing:0}
.shead p{margin-top:15px; color:var(--muted); font-size:16.5px}
.shead p+p{margin-top:13px}

/* ── hizmetler: geniş editoryal satırlar (kart değil) ── */
.rows{border-top:1px solid var(--line)}
.srow{border-bottom:1px solid var(--line); padding:clamp(28px,4vw,40px) 0; display:grid; gap:20px; grid-template-columns:1fr; align-items:start; transition:background .3s ease}
.srow:hover{background:rgba(245,232,215,.44)}
.srow .ico{width:58px; height:58px; color:var(--ink)}
.srow h3{font-size:clamp(23px,3.6vw,30px); margin-bottom:10px}
.srow p{color:var(--muted); max-width:56ch; font-size:16.5px}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.chip{font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; color:var(--rose-deep); border:1px solid var(--hair); border-radius:100px; padding:7px 14px}

/* ── kadro ── */
.team{display:grid; gap:0; grid-template-columns:1fr; border:1px solid var(--line)}
.mem{padding:clamp(26px,3.4vw,34px); border-bottom:1px solid var(--line); text-align:center}
.mem:last-child{border-bottom:0}
/* fotograf cercevesi: duz hairline, esit padding */
.mem .cer{width:min(272px,72vw); margin:20px auto 18px; padding:16px; border:1px solid var(--hair)}
.mem .por{width:100%; height:auto; display:block}
.mem .nm{font-size:20px; color:var(--ink); font-weight:400; letter-spacing:-.01em}
.mem .ttl{margin-top:6px}
.mem .areas{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:16px}
.mem .role{margin-top:9px; font-size:14.5px; color:var(--rose-deep); line-height:1.55}
.mem .bio{margin-top:14px; font-size:15px; color:var(--muted); line-height:1.72}

/* ── değerler: ince çizgi kutular ── */
.vals{display:grid; gap:0; grid-template-columns:1fr; border:1px solid var(--line)}
.val{padding:clamp(24px,3.2vw,32px); border-bottom:1px solid var(--line)}
.val:last-child{border-bottom:0}
.val .ico{width:34px;height:34px;color:var(--ink);margin-bottom:16px}
.val h3{font-size:19px; font-weight:400; margin-bottom:8px}
.val p{font-size:15px; color:var(--muted)}

/* ── süreç: logonun tek çizgisi, düğümlü yolculuk ── */
.journey{position:relative; margin-top:10px}
.jline{position:absolute; left:23px; top:12px; bottom:12px; width:1px; background:var(--hair)}
.jstep{position:relative; padding:0 0 clamp(28px,3.6vw,38px) 64px}
.jstep:last-child{padding-bottom:0}
.jdot{position:absolute; left:12px; top:2px; width:23px; height:23px; border-radius:50%; background:var(--cream); border:1px solid var(--ink); display:grid; place-items:center; font-size:11px; font-weight:500; color:var(--ink)}
.jstep h3{font-size:20px; font-weight:400; margin-bottom:7px}
.jstep p{color:var(--muted); font-size:15.5px; max-width:52ch}

/* ── yazılar: hairline satırlar, kart/gölge yok ── */
.posts{border-top:1px solid var(--line)}
.post{display:block; text-decoration:none; border-bottom:1px solid var(--line); padding:clamp(24px,3.4vw,34px) 0; transition:background .3s ease}
.post:hover{background:rgba(245,232,215,.44)}
.post .meta{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:500}
.post h3{font-size:clamp(21px,3.4vw,29px); font-weight:300; margin:11px 0 9px}
.post p{color:var(--muted); font-size:16px; max-width:64ch}
.post .more{display:inline-flex; align-items:center; gap:9px; margin-top:15px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-deep); font-weight:500}
.post .more svg{transition:transform .3s ease}
.post:hover .more svg{transform:translateX(5px)}
.posts-more{text-align:center; margin-top:clamp(30px,4vw,42px)}
.empty{text-align:center; color:var(--muted); font-size:16px; padding:clamp(34px,5vw,54px) 0; border-bottom:1px solid var(--line)}

/* ── yazı sayfası ── */
.article{max-width:720px; margin:0 auto}
.article-head{text-align:center; margin-bottom:clamp(30px,4.4vw,46px); padding-bottom:clamp(26px,3.4vw,36px); border-bottom:1px solid var(--line)}
.article-head h1{font-size:clamp(30px,5.6vw,48px); font-weight:300; margin-top:14px}
.article-head .lead{margin-top:16px; color:var(--muted); font-size:17px; max-width:56ch; margin-left:auto; margin-right:auto}
.prose{font-size:17.5px; line-height:1.78}
.prose > * + *{margin-top:1.15em}
.prose h3{font-size:clamp(21px,3vw,26px); font-weight:400; margin-top:1.9em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:.5em}
.prose a{color:var(--rose-deep)}
.prose blockquote{margin-left:0; padding-left:20px; border-left:2px solid var(--rose); color:var(--muted); font-style:italic}
/* width/height etiketten geliyor: yer önceden ayrılıyor, görsel yüklenince yazı zıplamıyor. */
.prose img{display:block; max-width:100%; height:auto; margin:1.6em 0}
.article-foot{margin-top:clamp(40px,5vw,60px); padding-top:clamp(26px,3.4vw,36px); border-top:1px solid var(--line); text-align:center}
.article-foot p{color:var(--muted); font-size:16px; max-width:48ch; margin:0 auto 22px}
.backlink{display:inline-flex; align-items:center; gap:9px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; font-weight:500}
.backlink:hover{color:var(--ink)}

/* ── iletişim ── */
.contact{background:var(--sand)}
.cgrid{display:grid; gap:clamp(28px,4vw,52px); grid-template-columns:1fr; align-items:start}
.cbox{background:var(--paper); border:1px solid var(--line); padding:clamp(26px,3.6vw,38px)}
.crow{display:flex; gap:15px; padding:16px 0; border-bottom:1px solid var(--line)}
.crow:last-of-type{border-bottom:0}
.crow .ci{width:21px;height:21px;flex:none;color:var(--rose-deep);margin-top:3px}
.crow .k{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); font-weight:500}
.crow .v{font-size:16.5px; color:var(--ink); margin-top:3px}
.crow .v a{text-decoration:none; border-bottom:1px solid var(--hair)}
.cbox .btn{width:100%; margin-top:22px}
/* Tam genişlikteki butonda nowrap hiçbir işe yaramıyor, yalnız taşırıyor:
   320 px'te “WhatsApp'tan randevu” 261 px min-content ile iletişim kartını
   ekranın dışına itiyordu (body overflow-x:hidden bunu görünmez kesme yapıyordu).
   Genişlik zaten kaptan geliyor, yazı sarabilir. */
.cbox .btn{white-space:normal}
.note{margin-top:22px; font-size:14px; color:var(--muted); line-height:1.65; padding-left:16px; border-left:2px solid var(--rose)}

footer{background:var(--ink); color:#C9BCAE; padding:clamp(38px,5vw,54px) 0 calc(104px + env(safe-area-inset-bottom)); text-align:center}
footer .mk{height:52px; width:120px; margin:0 auto 10px; opacity:.92; --mkbg:var(--ink)}
footer .wm .wd{height:48px; width:128px; color:var(--cream); display:block; margin:0 auto}
footer .wm span{font-size:8.3px; letter-spacing:.19em; text-transform:uppercase; color:#9C8B7C; display:block; margin-top:6px}
footer p{font-size:13.5px; margin-top:20px; color:#A2907F}
footer .slogan{font-size:26px; color:var(--blush); margin-top:22px; line-height:1.3}
footer a{color:var(--blush)}

.dock{position:fixed; left:0; right:0; bottom:0; z-index:60; padding:11px var(--sp) calc(11px + env(safe-area-inset-bottom)); background:rgba(252,244,233,.94); backdrop-filter:blur(12px); border-top:1px solid var(--line); display:flex; gap:10px}
.dock .btn{flex:1; min-height:50px; padding:0 10px; font-size:12.5px}
/* dock aynı iki butonu ekranın altında sabit tutuyor — hero'da tekrarlamasın */
@media (max-width:899px){.hero .cta{display:none}}

/* logonun içindeki krem alanlar zemine göre değişir (koyu footer'da ink olur) */
.mk,.mark{--mkbg:var(--cream)}
/* çizim animasyonu: maskedeki kılavuz logonun orta hattını izliyor. İki <use>
   aynı çizgiyi paylaşır, her biri kendi dilimini aynı anda çizer: biri alt
   tabandan sağa, diğeri geriye doğru sol dikme–çatı–sağ dikme boyunca.
   Geriye çizende dash boyu büyürken dashoffset de kayar, böylece ucu sabit
   kalıp kuyruğu geriye açılır — ikisi de siluetin kenarından başlar.
   Kalem sayısı neden iki: bkz. index.html'deki maske yorumu. */
/* easing doğrusal: ölçüldü, kapsamayı zamanla en düzgün artıran bu. Her ease-out
   varyantı ilk yarıya yığıp sonda hiçbir şeyin değişmediği bir kuyruk bırakıyor
   (doğrusal sapma .084, en yakın ease-out .188). */
/* yedek değerler blog ve panel sayfaları için: onlarda logo hâlâ tek kalemli
   eski biçimde duruyor, değişkenleri tanımlamıyorlar. Yedek yoksa var() çözülmez,
   animasyon tümden düşer ve o sayfalarda çizim hiç oynamaz. */
/* stroke-dasharray:1 = maske tam çizgi. Animasyon uygulandığında from karesi
   bunu zaten eziyor; uygulanmadığı her durumda (media query'de animation:none,
   eski tarayıcı) maske boş kalıp logoyu tümden gizlemesin diye duruyor. */
.ciz{stroke-dasharray:1; animation:ciz var(--d,1.6s) linear both}
@keyframes ciz{
  from{stroke-dasharray:0 9;          stroke-dashoffset:var(--o1,0)}
  to  {stroke-dasharray:var(--l,1) 9; stroke-dashoffset:var(--o2,0)}
}

/* tekrar geçiş: logo çizili kaldıktan sonra her 6 sn'de bir aynı iki kalemin
   yolundan kısa bir bant geçip geçtiği yeri aydınlatıyor. Geçiş 1.1 sn sürüyor
   (ilk çizimle aynı hız), kalan ~4.9 sn logo hiç değişmeden duruyor. İlk tur
   6 sn gecikmeli ki açılıştaki çizimin üstüne binmesin. Bant yoldan çıktıktan
   sonra katman opaklıkla kapanıyor, yoksa kuyruğu logoda asılı kalıyor. */
.parlak{opacity:0; animation:parlaGor 6s linear 6s infinite}
@keyframes parlaGor{0%,17%{opacity:1} 19%,100%{opacity:0}}
.parla{stroke-dasharray:.07 9; animation:parla 6s linear 6s infinite}
@keyframes parla{
  0%      {stroke-dashoffset:var(--p1)}
  18%,100%{stroke-dashoffset:var(--p2)}
}

/* mobilde çizim hiç yok — hero dahil. Tek örneğe indirmek yetmedi: maskenin
   içindeki stroke-dasharray her karede maskenin yeniden rasterize edilmesini
   istiyor, telefon bunu atlayınca çizim yarıda asılı kalıyor. Küçük ekranda üç
   logo da maskesiz, yani bitmiş halde geliyor; 46-250 px'te çizim zaten
   okunmuyor. Parıltı katmanı da kapalı: blur + renk filtresi zinciri sonsuza
   kadar her karede yeniden çalışıyor, pili tüketiyor. */
@media (max-width:899px){
  .mk,.mark{--maske:none}
  .parlak{display:none} .parla{animation:none}
}

@media (min-width:620px){
  .strip-in{grid-template-columns:repeat(4,1fr)}
  .st{border-bottom:0}
  .st:nth-child(2n){border-right:1px solid var(--line)}
  .st:last-child{border-right:0}
  .srow{grid-template-columns:78px 1fr; gap:30px}
  .team{grid-template-columns:1fr 1fr}
  .mem{border-right:1px solid var(--line)}
  .mem:nth-child(2n){border-right:0}
  .mem:nth-last-child(-n+2){border-bottom:0}
  .vals{grid-template-columns:1fr 1fr}
  .val{border-right:1px solid var(--line)}
  .val:nth-child(2n){border-right:0}
  .val:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:900px){
  .hcta{display:inline-flex}
  .vals{grid-template-columns:repeat(4,1fr)}
  .val{border-bottom:0}
  .val:nth-child(2n){border-right:1px solid var(--line)}
  .val:last-child{border-right:0}
  .cgrid{grid-template-columns:1fr 1fr}
  .dock{display:none}
  footer{padding-bottom:54px}
}
/* menu 7 baglanti + marka + buton ile ancak ~1040px'ten sonra tasmadan siğiyor */
@media (min-width:1040px){ nav{display:flex} }

/* ── dar ekranda menü: başlığın ikinci satırı, yatay kaydırmalı şerit ──
   Hamburger değil: açıp kapamak iki dokunuş, buradaki iş tek dokunuşta bölüme
   gitmek. Şerit kenardan kenara taşıyor ve son bağlantı bilerek yarım kalıyor —
   kaydırılabildiğini gösteren şey bu.
   header'ın top'u marka satırı kadar negatif: sayfa kayınca marka yukarı çıkıp
   gidiyor, yalnız şerit tepede asılı kalıyor (74 px yerine 43 px yer tutuyor).
   scroll-margin-top da o 43'e iniyor, yoksa bölüm başlıkları şeridin altında
   kalıyordu. */
@media (max-width:1039px){
  header{--ust:64px; top:calc(-1 * var(--ust))}
  .bar{flex-wrap:wrap; height:auto; gap:0 18px}/* satır arası boşluk yok: şerit markaya bitişik */
  .brand{height:var(--ust)}
  nav{
    /* flex-basis negatif kenar boşluklarını da kapsamalı: box-sizing:border-box
       ile 100% kabın iç genişliği kadar kalıyordu, şerit sağ kenara 20 px kala
       bitip üstündeki ayırıcı çizgi yarım görünüyordu. */
    display:flex; order:3; flex-basis:calc(100% + 2 * var(--sp)); height:42px; align-items:center; gap:0 20px;
    overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none;
    border-top:1px solid var(--line);
    margin:0 calc(-1 * var(--sp)); padding:0 var(--sp);
  }
  nav::-webkit-scrollbar{display:none}
  /* bağlantı şeridin tüm yüksekliğini kaplasın: 11,5 px yazı parmakla
     tutturulamaz, dokunma alanı 42 px oluyor */
  nav a{flex:none; display:flex; align-items:center; height:100%; padding:0; font-size:11.5px}
  /* display:flex, [hidden]'ın UA kuralını ezip yazı yokken Yazılar'ı gösteriyordu */
  nav a[hidden]{display:none}
  .page{scroll-margin-top:43px}
}
/* 900 px'in altında başlığın ilk satırında yalnız marka kalıyor — Randevu
   butonu ancak 900'den sonra çıkıyor. space-between tek öğeyi sola yapıştırıp
   sağda koca bir boşluk bırakıyordu; sayfanın geri kalanı zaten ortalı.
   Ortalama .bar'ın justify-content'iyle değil markanın kendi otomatik kenar
   boşluğuyla: justify-content her satıra işliyor, alttaki gezinme şeridi de
   negatif kenar boşluğuyla taştığı için kendi satırında boşluk bırakıyor ve
   şerit kenardan kenara değil 20 px içeriden başlıyordu. */
@media (max-width:899px){ .brand{margin-left:auto; margin-right:auto} }

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important}
  .rv{opacity:1 !important; transform:none !important}
  /* tekrar geçen bant tamamen kalksın (opaklık animasyonu da durduğu için
     katmanı gizlemek gerekiyor, yoksa bant logoda sabit duruyor) */
  .parlak{display:none}
  .page::before{transform:scaleX(1) !important}
}

/* ── açılır bloklar: S.S.S. ve kadro özgeçmişleri ──
   summary'nin varsayılan üçgeni kapatılıp yerine +/− işareti konuyor. */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer}
summary::-webkit-details-marker{display:none}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:20px 0; font-size:17px; color:var(--ink); line-height:1.4}
.faq summary:hover{color:var(--rose-deep)}
.faq details>p{color:var(--muted); font-size:16px; padding:0 0 21px; max-width:66ch}
.pm{position:relative; width:14px; height:14px; flex:none}
.pm::before,.pm::after{content:""; position:absolute; background:var(--rose-deep); transition:transform .3s ease}
.pm::before{left:0; top:6.5px; width:14px; height:1px}
.pm::after{left:6.5px; top:0; width:1px; height:14px}
details[open]>summary .pm::after{transform:scaleY(0)}

/* özgeçmiş: kart içinde açılan uzun metin — okunurluk için sola dayalı */
.mem details{margin-top:18px; border-top:1px solid var(--line)}
.mem summary{display:inline-flex; align-items:center; gap:10px; padding:15px 0 0;
  font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--rose-deep); font-weight:500}
.cv{text-align:left; font-size:15px; color:var(--muted); line-height:1.72; padding:4px 0 6px}
.cv p{margin-top:12px}
.cv h4{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  font-weight:500; margin:24px 0 2px}
.cv ul{margin:10px 0 0; padding-left:19px}
.cv li{margin-top:6px}