/* Zeina Osman Counselling Services — shared styles for /index.html and /ar/index.html */
:root {
  --paper: #F4F0EA;
  --stone: #E9E1D3;
  --lavender: #C8C4D5;
  --deep-lavender: #71659A;
  --plum: #4B4366;
  --sage: #ADBBAE;
  --deep-sage: #68836A;
  --charcoal: #343633;
  --line: rgba(52, 54, 51, 0.22);
  --sans: 'Manrope', system-ui, sans-serif;
  --display: 'Instrument Serif', Georgia, serif;
  --arabic: 'Noto Naskh Arabic', serif;
}
:lang(ar) {
  --sans: 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --display: 'Noto Naskh Arabic', serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
:lang(ar) body, body:lang(ar) { font-size: 1.1rem; line-height: 1.85; }
img { display: block; max-width: 100%; }
a { color: var(--plum); }
a:hover { color: var(--charcoal); }
p, h1, h2, h3, dl, dd, blockquote { margin: 0; }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 2rem; }
.skip { position: absolute; inset-inline-start: 1rem; top: 0; transform: translateY(-120%); background: var(--charcoal); color: var(--paper); padding: 0.75rem 1rem; z-index: 10; }
.skip:focus { transform: translateY(0.5rem); }
:focus-visible { outline: 2px solid var(--deep-lavender); outline-offset: 3px; }

/* Type */
.eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--plum); }
.kicker { font-family: var(--display); font-style: italic; font-size: 1.4rem; color: var(--plum); }
.h1 { font-family: var(--display); font-weight: 400; font-size: clamp(3.2rem, 7.4vw, 7rem); line-height: 0.98; letter-spacing: -0.01em; }
.h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2.4rem, 4.2vw, 3.75rem); line-height: 1.05; }
.accent { color: var(--deep-lavender); }
:lang(ar) .eyebrow { font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
:lang(ar) .kicker { font-style: normal; }
:lang(ar) .h1 { font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 5.25rem); line-height: 1.3; letter-spacing: 0; }
:lang(ar) .h2 { font-weight: 500; font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.3; }
.latin { font-family: 'Manrope', sans-serif; }

/* Buttons and links */
.btn { display: inline-block; text-decoration: none; border-radius: 999px; padding: 1rem 1.75rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.btn--plum { background: var(--plum); color: var(--paper); }
.btn--dark { background: var(--charcoal); color: var(--paper); }
.btn--plum:hover, .btn--dark:hover { color: var(--paper); opacity: 0.9; }
.link-arrow { display: inline-block; text-decoration: none; color: var(--charcoal); padding: 0.75rem 0.25rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--charcoal); }
:lang(ar) .btn, :lang(ar) .link-arrow { font-size: 1rem; font-weight: 600; letter-spacing: 0; text-transform: none; padding-block: 0.85rem; }

/* Header */
.site-header { border-bottom: 1px solid rgba(52, 54, 51, 0.14); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding-block: 1.25rem; }
.brand { display: flex; align-items: center; gap: 0.9rem; text-decoration: none; color: var(--charcoal); }
.brand img { width: 52px; height: 45px; }
.brand-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.brand-en { font-family: 'Manrope', sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.2em; line-height: 1; }
.brand-ar { font-family: var(--arabic); font-size: 0.95rem; font-weight: 500; line-height: 1.3; }
.brand-rule { width: 1.1rem; height: 2px; background: var(--deep-lavender); }
.brand-tag { font-family: 'Manrope', sans-serif; font-size: 0.55rem; font-weight: 600; letter-spacing: 0.3em; line-height: 1; color: var(--plum); }
:lang(ar) .brand-ar { font-size: 1.3rem; font-weight: 600; line-height: 1.2; }
:lang(ar) .brand-en { font-size: 0.7rem; }
:lang(ar) .brand-tag { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0; line-height: 1.2; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; font-size: 0.875rem; font-weight: 500; }
.nav a { text-decoration: none; color: var(--charcoal); padding: 0.6rem 0; }
.nav .lang-ar { font-family: var(--arabic); font-size: 1rem; }
.nav .lang-en { font-family: 'Manrope', sans-serif; font-size: 0.85rem; font-weight: 600; }
.nav .btn { padding: 0.8rem 1.4rem; font-size: 0.75rem; color: var(--paper); }
:lang(ar) .nav { font-size: 0.95rem; }
:lang(ar) .nav .btn { font-size: 0.95rem; }

/* Hero */
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 3.5rem; padding-block: 4.5rem 5rem; }
.hero-text { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 1.75rem; }
.hero-lede { max-width: 36rem; font-size: 1.15rem; line-height: 1.65; }
:lang(ar) .hero-lede { font-size: 1.2rem; line-height: 1.85; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding-top: 0.5rem; }
.hero-art { flex: 1 1 340px; min-width: 0; max-width: 30rem; position: relative; height: 34rem; }
.hero-art .arch-back { position: absolute; inset-inline-start: 0; top: 3rem; width: 62%; height: 29rem; background: var(--sage); border-radius: 999px 999px 0 0; }
.hero-art .arch-photo { position: absolute; inset-inline-end: 0; top: 0; width: 70%; height: 34rem; border-radius: 999px 999px 0 0; overflow: hidden; background: var(--lavender); }
.arch-photo img, .photo img, .arch img { width: 100%; height: 100%; object-fit: cover; }

/* Ticker */
.ticker { background: var(--plum); color: var(--paper); overflow: hidden; }
.ticker p { padding: 1.15rem 2rem; white-space: nowrap; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.24em; }
.ticker span { color: var(--sage); }
:lang(ar) .ticker p { font-size: 1rem; letter-spacing: 0; word-spacing: 0.35em; padding-block: 1rem; }

/* Sections */
.section { padding-block: 7rem; }
.band-stone { background: var(--stone); }
.split { display: flex; flex-wrap: wrap; gap: 3rem 5rem; }
.split-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.split-main { flex: 999 1 560px; min-width: 0; }

/* About */
.about { display: flex; flex-wrap: wrap; gap: 4rem; align-items: center; }
.about .photo { flex: 1 1 320px; min-width: 0; height: 32rem; background: var(--stone); overflow: hidden; }
.about-text { flex: 999 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.about-text p { max-width: 36rem; }
.note { padding: 1rem 1.25rem; background: var(--stone); font-size: 0.9rem; }
.rule { height: 1px; background: var(--line); margin-top: 0.5rem; }

/* Who I work with */
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem; margin-bottom: 3rem; }
.section-head p { max-width: 27rem; font-size: 1rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; }
.card { padding: 2.25rem 2rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; min-height: 20rem; }
.card--lavender { background: var(--lavender); }
.card--sage { background: var(--sage); }
.card--paper { background: var(--paper); }
.card .num { font-family: 'Manrope', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; align-self: flex-start; }
.card h3 { margin-top: auto; font-family: var(--display); font-weight: 400; font-size: 2.25rem; line-height: 1.1; }
.card p { font-size: 0.975rem; }
:lang(ar) .card h3 { font-weight: 500; font-size: 2.1rem; line-height: 1.3; }

/* Areas of focus */
.focus { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 3rem; }
.focus div { border-top: 1px solid var(--line); padding: 1.4rem 0 1.6rem; }
.focus dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.focus dd { margin-top: 0.4rem; font-size: 0.95rem; }
:lang(ar) .focus dt { font-size: 1.05rem; letter-spacing: 0; }
:lang(ar) .focus dd { font-size: 1rem; }

/* Approach */
.approach { background: var(--charcoal); color: var(--paper); position: relative; overflow: hidden; }
.approach .watermark { position: absolute; inset-inline-end: -6rem; bottom: -5rem; width: 34rem; opacity: 0.16; pointer-events: none; }
.approach .wrap { position: relative; display: flex; flex-direction: column; gap: 3.5rem; }
.approach .eyebrow { color: var(--sage); }
.approach .h2 { max-width: 46rem; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 1.02; }
.approach .h2 em { color: var(--lavender); }
:lang(ar) .approach .h2 { font-size: clamp(2.4rem, 4.6vw, 4.1rem); line-height: 1.3; }
:lang(ar) .approach .h2 em { font-style: normal; }
.principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2.5rem; }
.principles blockquote { border-top: 1px solid rgba(244, 240, 234, 0.3); padding-top: 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.principles .quote { font-family: var(--display); font-size: 2rem; line-height: 1.15; }
.principles .why { font-size: 0.95rem; color: var(--stone); }
.principles strong { color: var(--sage); letter-spacing: 0.08em; }
:lang(ar) .principles .quote { font-size: 1.85rem; line-height: 1.45; }
:lang(ar) .principles .why { font-size: 1rem; }
:lang(ar) .principles strong { letter-spacing: 0; }

/* Image row */
.gallery { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; padding-block: 7rem 2rem; }
.gallery .arch { min-width: 0; border-radius: 999px 999px 0 0; overflow: hidden; }
.arch--a { flex: 1 1 300px; height: 26rem; background: var(--sage); }
.arch--b { flex: 1.4 1 340px; height: 34rem; background: var(--lavender); }
.arch--c { flex: 1 1 300px; height: 22rem; background: var(--stone); }

/* Reminder */
.reminder { max-width: 900px; margin: 0 auto; padding: 5rem 2rem 7rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.reminder .stars { font-size: 1.1rem; letter-spacing: 0.8em; color: var(--deep-lavender); }
.reminder .big { font-family: var(--display); font-size: clamp(2.2rem, 4.2vw, 3.5rem); line-height: 1.12; }
.reminder .big em { color: var(--deep-lavender); }
:lang(ar) .reminder .big { font-size: clamp(2rem, 3.8vw, 3.2rem); line-height: 1.5; }
:lang(ar) .reminder .big em { font-style: normal; }

/* Fees */
.fees-intro p { font-size: 1rem; }
.fees-intro .btn { align-self: flex-start; margin-top: 0.5rem; }
.fee { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 2rem; border-top: 1px solid rgba(52, 54, 51, 0.3); padding: 1.6rem 0; }
.fee:last-child { border-bottom: 1px solid rgba(52, 54, 51, 0.3); }
.fee .name { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; }
.fee .meta { display: flex; gap: 2rem; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; }
:lang(ar) .fee .name { font-size: 1.8rem; line-height: 1.3; }
:lang(ar) .fee .meta { font-size: 1rem; letter-spacing: 0; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 44px; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; letter-spacing: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 0.75rem; max-width: 40rem; }
:lang(ar) .faq summary { font-size: 1.1rem; letter-spacing: 0; text-transform: none; }

/* Contact */
.cta { background: var(--lavender); }
.cta .wrap { padding-block: 6.5rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 2.5rem; }
.cta-text { display: flex; flex-direction: column; gap: 1.25rem; }
.cta-text .big { font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 8vw, 7.5rem); line-height: 0.95; }
.cta-text p { max-width: 30rem; }
:lang(ar) .cta-text .big { font-weight: 500; font-size: clamp(3.2rem, 7.4vw, 7rem); line-height: 1.15; }
.cta-actions { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.cta-actions .contact { font-size: 0.9rem; font-weight: 600; letter-spacing: 0.06em; }
:lang(ar) .cta-actions .contact { font-size: 1rem; letter-spacing: 0; }

/* Footer */
.site-footer { background: var(--charcoal); color: var(--paper); }
.site-footer .wrap { padding-block: 5rem 2.5rem; display: flex; flex-direction: column; gap: 3.5rem; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 3rem; }
.footer-about { flex: 1 1 280px; display: flex; flex-direction: column; gap: 1.25rem; }
.footer-about p { max-width: 24rem; font-size: 0.9rem; color: var(--stone); }
.site-footer .brand { color: var(--paper); }
.site-footer .brand img { width: 64px; height: 56px; }
.site-footer .brand-en { font-size: 1rem; }
.site-footer .brand-ar { font-size: 1rem; }
.site-footer .brand-rule { background: var(--lavender); }
.site-footer .brand-tag { font-size: 0.62rem; color: var(--sage); }
:lang(ar) .site-footer .brand-ar { font-size: 1.4rem; }
:lang(ar) .site-footer .brand-tag { font-size: 0.85rem; }
.footer-col { display: flex; flex-direction: column; gap: 0.35rem; flex: 0 1 220px; font-size: 0.95rem; }
.footer-col h2 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage); padding-bottom: 0.5rem; }
:lang(ar) .footer-col h2 { font-size: 0.95rem; letter-spacing: 0; }
.footer-col a { color: var(--paper); text-decoration: none; padding: 0.2rem 0; }
.footer-col a:hover { color: var(--sage); }
.crisis { background: var(--plum); padding: 1.25rem 1.5rem; font-size: 0.9rem; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.8rem; color: var(--stone); border-top: 1px solid rgba(244, 240, 234, 0.2); padding-top: 1.5rem; }
.footer-base a { color: var(--stone); }

@media (max-width: 640px) {
  .wrap { padding-inline: 1.25rem; }
  .section { padding-block: 4.5rem; }
  .hero { padding-block: 3rem 3.5rem; }
  .hero-art { height: 26rem; }
  .hero-art .arch-photo { height: 26rem; }
  .hero-art .arch-back { height: 22rem; }
  .about .photo { height: 24rem; }
  .gallery { padding-block: 4.5rem 1rem; }
  .arch--a, .arch--b, .arch--c { height: 22rem; }
}