/* =========================================================================
   yasmine — custom Ghost theme for yasminemohamed.com
   One stylesheet, ordered by section. Edit in place; there is no build step.

   Palette derived from the logo (cyan #20B0E0 / green #90C040), deepened onto a
   warm cream ground so every pairing clears WCAG AA.
   Type: Cormorant Garamond (humanist serif headings) + Karla (clean sans body),
   Noto Naskh Arabic for Arabic runs.
   ========================================================================= */

:root {
    /* ── SAMPLED FROM THE LOGO ────────────────────────────────────────────
       The wordmark runs a horizontal gradient cyan → teal → green.
       These are the measured values, not approximations.                    */
    --logo-cyan:   #30A8D8;   /* left of the wordmark, the hands, the trunk */
    --logo-teal:   #60C0A8;   /* the midpoint of the gradient */
    --logo-green:  #90C048;   /* right of the wordmark, the canopy, the arc */
    --logo-sky:    #4FB3DC;   /* the "SPIRITUAL COUNSELOR" line */
    --logo-sweep:  linear-gradient(96deg, #30A8D8 0%, #48A8C0 34%, #60C0A8 58%, #90C048 100%);

    /* ── the same hues taken deep enough for text (WCAG AA on cream) ───── */
    --teal:        #14607A;   /* 6.8:1 — links, buttons */
    --teal-deep:   #10485C;   /* the dark band, from the same cyan */
    --green-text:  #55742A;   /* 5.2:1 */
    --sage-text:   #55742A;
    --sage:        #90C048;

    /* ── grounds: warm sands under a cool mark ─────────────────────────── */
    --cream:       #FDFAF4;
    --sand:        #F5EDE0;
    --sand-deep:   #EADFCB;
    --card:        #FFFDF8;

    --ink:         #26302F;
    --body:        #4C5654;
    --muted:       #5C6663;
    --line:        rgba(38, 48, 47, 0.13);
    --line-strong: rgba(38, 48, 47, 0.22);
    --accent:      #30A8D8;

    --serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sans:   Karla, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --arabic: 'Noto Naskh Arabic', 'Cormorant Garamond', serif;

    --pad-x: clamp(20px, 5vw, 64px);
    --pad-y: clamp(56px, 9vw, 116px);
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
img, svg, iframe { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover, a:focus-visible { color: var(--sage-text); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
::selection { background: #D9E5D1; }
button { font: inherit; }

.visually-hidden {
    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;
    padding: 12px 20px; background: var(--teal); color: var(--cream);
    font-size: 14px; font-weight: 600;
}
.skip-link:focus { left: 0; color: var(--cream); }

/* ---------- layout ---------- */

.wrap        { max-width: 1120px; margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.wrap-narrow { max-width: 760px;  margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); }
.section     { padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
.center      { text-align: center; }
.band-sand   { background: var(--sand); }
.band-deep   { background: var(--teal-deep); color: #F1EFE7; }

.split, .split-wide { display: grid; gap: clamp(36px, 6vw, 80px); align-items: start; }
.split      { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.split-wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-2 { display: grid; gap: clamp(24px, 3.4vw, 40px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { display: grid; gap: clamp(24px, 3.4vw, 40px); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.section-head {
    display: flex; flex-wrap: wrap; gap: 20px;
    align-items: baseline; justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: clamp(40px, 5vw, 60px);
    margin-bottom: clamp(36px, 5vw, 56px);
}

/* ---------- type ---------- */

.h-xl, .h-lg, .h-md, .page-title, .hero-title, .card-title, .service-title,
.reminder-title, .pull-quote, .post-title, .detail-value, .step-num,
.post-content h1, .post-content h2, .post-content h3, .post-content h4,
.rail-item blockquote p, .footer-name {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.hero-title { margin: 0; font-size: clamp(46px, 8vw, 88px); line-height: 1; letter-spacing: -0.015em; }
.page-title { margin: 0; font-size: clamp(40px, 6.2vw, 74px); line-height: 1.05; max-width: 22ch; }
.error-title { max-width: none; }
.h-xl { margin: 0; font-size: clamp(36px, 5vw, 58px);   line-height: 1.1; }
.h-lg { margin: 0; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.1; }
.h-md { margin: 0; font-size: clamp(27px, 3vw, 36px);   line-height: 1.2; }

.eyebrow {
    margin: 0 0 18px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--sage-text);
}
.lede, .page-lede, .prose {
    font-size: clamp(16.5px, 1.7vw, 18.5px); line-height: 1.8;
    color: var(--body); text-wrap: pretty;
}
.page-lede { margin: 24px 0 0; max-width: 56ch; }
.prose { margin: 0 0 28px; line-height: 1.85; }

.pull-quote { margin: 0; font-size: clamp(22px, 2.8vw, 31px); line-height: 1.55; color: var(--ink); }
.attribution {
    margin: 34px 0 0; font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
}
.meta {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 0 0 14px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted);
}
.chip { padding: 5px 11px; border-radius: 999px; background: #E7EDE1; color: var(--sage-text); }
.on-deep { color: #FBF8F1; }
.on-deep-muted { color: rgba(241, 239, 231, 0.82); }

/* Arabic / transliterated runs — taller line box, larger optical size */
[lang="ar"], .arabic {
    font-family: var(--arabic); line-height: 2.1;
    font-size: 1.14em; direction: rtl; unicode-bidi: isolate;
}
.post-content [lang="ar"] { display: block; margin: 1.4em 0; text-align: right; }

/* ---------- motif: two squares, one rotated 45deg ---------- */

.motif-star, .logo-motif, .footer-motif {
    position: relative; display: inline-block; width: 12px; height: 12px; flex: 0 0 auto;
}
.motif-star b, .logo-motif i, .footer-motif i { position: absolute; inset: 0; background: var(--accent); }
.motif-star b:last-child, .logo-motif i:last-child, .footer-motif i:last-child {
    background: #2F7C8C; transform: rotate(45deg);
}
.motif-rule {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 38px; opacity: 0.55;
}
.motif-line { display: block; width: 52px; height: 1px; background: rgba(36, 48, 47, 0.3); }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 30px; border: 1px solid transparent; border-radius: 999px;
    font-size: 14px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; cursor: pointer; text-align: center;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-sm { padding: 10px 18px; font-size: 12.5px; letter-spacing: 0.04em; white-space: nowrap; }
.btn-primary { background: var(--teal); color: var(--cream); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--ink); color: var(--cream); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--sage); color: var(--teal); }
.btn-light { background: #FBF8F1; color: var(--teal-deep); }
.btn-light:hover, .btn-light:focus-visible { background: #D9E5D1; color: var(--teal-deep); }
.btn-outline-light { border-color: rgba(251, 248, 241, 0.4); color: #FBF8F1; }
.btn-outline-light:hover, .btn-outline-light:focus-visible { border-color: #FBF8F1; color: #FBF8F1; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.btn-row-center { justify-content: center; }

.link-arrow {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.link-back {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 32px;
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted);
}
.link-back:hover { color: var(--teal); }

/* ---------- header ---------- */

.site-header {
    position: sticky; top: 0; z-index: 50;
    padding: 0 var(--pad-x);
    background: transparent; border-bottom: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
/* One panel across the top: logo left, menu through the middle, CTA at the end. */
.site-header-inner {
    max-width: 1280px; margin: 0 auto;
    padding: 10px clamp(14px, 1.8vw, 22px);
    display: flex; align-items: center; gap: clamp(10px, 1.4vw, 22px);
    background: rgba(253, 250, 244, 0.72);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    box-shadow:
        0 1px 1px rgba(38, 48, 47, 0.03),
        0 14px 30px -18px rgba(38, 48, 47, 0.16),
        0 30px 60px -34px rgba(20, 96, 122, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.5);
}
.site-logo { flex: 0 0 auto; display: flex; align-items: center; }
.site-logo img { height: clamp(44px, 4.6vw, 64px); width: auto; max-width: 100%; }
.logo-text { display: grid; gap: 5px; }
.logo-name {
    display: block; font-family: var(--serif); font-size: clamp(21px, 2.4vw, 28px);
    font-weight: 500; letter-spacing: 0.085em; text-transform: uppercase; line-height: 1;
}
.logo-role {
    display: block; font-size: 8.5px; font-weight: 600; letter-spacing: 0.24em;
    text-transform: uppercase; color: var(--teal); line-height: 1;
}

/* min-width:0 lets the nav shrink so the CTA never breaks to a second row */
.site-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; }
.nav-list {
    display: flex; align-items: center; justify-content: center;
    gap: clamp(7px, 1.15vw, 22px);
    margin: 0; padding: 0; list-style: none;
}
.nav-item a {
    font-size: 12.5px; font-weight: 500; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
@media (max-width: 1180px) { .nav-list { gap: 8px; } .nav-item a { font-size: 12px; } }
@media (max-width: 1040px) { .nav-item a { font-size: 11.5px; letter-spacing: 0.02em; } }
.nav-item a:hover { color: var(--sage-text); }
.nav-current a { color: var(--teal); }

.header-cta { flex: 0 0 auto; }

.nav-toggle {
    display: none; order: 2; width: 44px; height: 44px; padding: 12px 10px;
    background: none; border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer;
    flex-direction: column; justify-content: space-between;
}
.nav-toggle span { display: block; height: 1.5px; background: var(--ink); }

/* ---------- hero ---------- */

.hero { padding: clamp(52px, 8vw, 104px) 0 clamp(48px, 7vw, 92px); }
.hero-grid {
    display: grid; gap: clamp(40px, 6vw, 80px);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: center;
}
.hero-eyebrow {
    display: flex; align-items: center; gap: 12px; margin: 0 0 26px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
}
.hero-dash { display: block; width: 26px; height: 1px; background: var(--accent); flex: 0 0 auto; }
.hero-role {
    margin: 26px 0 0; font-size: clamp(15px, 1.5vw, 17px); font-weight: 600;
    letter-spacing: 0.13em; text-transform: uppercase; color: var(--teal); line-height: 1.65;
}
.hero-role .dot { color: var(--sage-text); }
.hero-lede {
    margin: 30px 0 0; max-width: 44ch;
    font-size: clamp(16.5px, 1.7vw, 18.5px); line-height: 1.75; color: var(--body);
}
.hero-portrait { display: flex; justify-content: center; }
.hero-portrait .portrait {
    width: 100%; max-width: 400px; aspect-ratio: 4 / 5; object-fit: cover;
    border-radius: 200px 200px 6px 6px;
}
.portrait-frame, .placeholder-frame {
    width: 100%; max-width: 400px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 14px; padding: 34px; text-align: center;
    background: repeating-linear-gradient(135deg, #EFE9DD 0 9px, #F6F1E7 9px 18px);
    border: 1px solid rgba(36, 48, 47, 0.10);
}
.portrait-frame { aspect-ratio: 4 / 5; border-radius: 200px 200px 6px 6px; }
.portrait-frame .motif-star, .placeholder-frame .motif-star { width: 22px; height: 22px; opacity: 0.45; }
.placeholder-frame { min-height: clamp(280px, 34vw, 380px); border-radius: 4px; max-width: none; }
.placeholder-note {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px; line-height: 1.8; letter-spacing: 0.06em;
    color: var(--muted); text-transform: uppercase;
}

/* ---------- services ---------- */

.services-intro { padding-top: 0 !important; padding-bottom: clamp(36px, 5vw, 56px) !important; }
.service { display: flex; flex-direction: column; background: var(--card); border: 1px solid rgba(36, 48, 47, 0.11); }
.service-media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--sand); }
.service-media img { width: 100%; height: 100%; object-fit: cover; }
.service-body { padding: clamp(26px, 3vw, 36px); display: flex; flex-direction: column; flex: 1; }
.service-title { margin: 0; font-size: clamp(26px, 2.8vw, 33px); line-height: 1.2; font-weight: 500; }
.service-tagline { margin: 12px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--body); }
.service-cta { margin-top: auto; padding-top: 28px; }

.detail-list {
    margin: 26px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px;
    font-size: 14px; border-top: 1px solid rgba(36, 48, 47, 0.11); padding-top: 20px;
}
.detail-list dt {
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--muted); align-self: center;
}
.detail-list dd { margin: 0; color: var(--ink); }

/* ---------- testimonial rail ---------- */

.rail { margin-top: 40px; }
.rail-track {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: minmax(min(88%, 340px), 1fr);
    gap: clamp(24px, 4vw, 48px);
    margin: 0; padding: 0 0 6px; list-style: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    text-align: left;
}
.rail-track::-webkit-scrollbar { display: none; }
.rail-item { scroll-snap-align: center; }
.rail-item blockquote { margin: 0; }
.rail-item blockquote p {
    margin: 0; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.5; color: var(--ink);
}
.rail-item blockquote footer {
    margin-top: 22px; font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--muted);
}
.rail-controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 40px; }
.rail-controls[hidden] { display: none; }
.rail-btn {
    width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-strong);
    background: transparent; color: var(--ink); cursor: pointer;
    font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
    transition: border-color 0.2s, color 0.2s;
}
.rail-btn:hover { border-color: var(--teal); color: var(--teal); }
.rail-dots { display: flex; gap: 9px; }
.rail-dot {
    width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px;
    background: var(--line-strong); cursor: pointer; transition: background 0.2s;
}
.rail-dot.is-active { background: var(--teal); }

/* three across on desktop — no scrolling, nothing hidden */
@media (min-width: 900px) {
    .rail-track { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, 1fr); overflow: visible; }
}

/* ---------- cards / blog list ---------- */

.card-list { display: grid; gap: clamp(28px, 4vw, 44px); }
.card {
    display: grid; gap: clamp(24px, 4vw, 48px);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    align-items: center; padding-bottom: clamp(28px, 4vw, 44px);
    border-bottom: 1px solid var(--line);
}
.card:last-child { border-bottom: 0; padding-bottom: 0; }
.card-media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--sand); display: block; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-fallback {
    width: 100%; height: 100%; background: #F0EADE;
    display: flex; align-items: center; justify-content: center;
}
.card-media-fallback .motif-star { width: 18px; height: 18px; opacity: 0.45; }
.card-title { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; }
.card-title a { color: var(--ink); }
.card-title a:hover { color: var(--teal); }
.card-excerpt { margin: 16px 0 22px; font-size: 16.5px; line-height: 1.75; color: var(--body); text-wrap: pretty; }

/* ---------- page + post ---------- */

.page-head { padding: clamp(52px, 7vw, 92px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.post-head { padding: clamp(44px, 6vw, 80px) 0 clamp(32px, 4vw, 48px); }
.post-title { margin: 0; font-size: clamp(34px, 4.8vw, 58px); line-height: 1.1; }
.post-figure img {
    max-width: 840px; margin: 0 auto;
    /* contain, never crop — a reminder graphic carries its citation inside the image */
    object-fit: contain; background: var(--sand);
}
.post-rule { display: block; max-width: 840px; margin: 0 auto; height: 1px; background: var(--line); }

.post-content { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(48px, 6vw, 80px); }
.post-content > * { margin-top: 0; margin-bottom: 1.5em; }
.post-content > *:last-child { margin-bottom: 0; }
.post-content p, .post-content li {
    font-size: clamp(17.5px, 1.8vw, 19.5px); line-height: 1.9; color: #333F3D; text-wrap: pretty;
}
.post-content h2 { font-size: clamp(28px, 3vw, 36px); line-height: 1.2; margin-top: 2em; }
.post-content h3 { font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; margin-top: 1.8em; }
.post-content h4 { font-size: clamp(19px, 2vw, 23px); line-height: 1.4; margin-top: 1.6em; }
.post-content ul, .post-content ol { padding-left: 1.3em; }
.post-content li { margin-bottom: 0.6em; }
.post-content blockquote {
    margin: 2em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--sage);
    font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.6;
}
.post-content blockquote p { font-family: var(--serif); font-size: inherit; line-height: inherit; }
.post-content a { border-bottom: 1px solid rgba(27, 92, 105, 0.3); }
.post-content hr { border: 0; height: 1px; background: var(--line); margin: 2.5em 0; }
.post-content strong { font-weight: 700; }
.post-content figure { margin: 2em 0; }
.post-content figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); text-align: center; }
.post-content pre {
    padding: 20px 22px; background: var(--sand); border-radius: 4px; overflow-x: auto;
    font-size: 14.5px; line-height: 1.7;
}
.post-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.post-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.post-content th, .post-content td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }

.source-line {
    margin: 2em 0 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px; letter-spacing: 0.05em; color: var(--muted);
}
.tag-row {
    display: flex; flex-wrap: wrap; gap: 9px; margin-top: 44px; padding-top: 28px;
    border-top: 1px solid var(--line);
}
.tag { padding: 7px 14px; border-radius: 999px; background: #F0EADE; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.tag:hover { background: #E7EDE1; color: var(--sage-text); }

/* ---------- Koenig editor cards ---------- */

.post-content .kg-card { margin-bottom: 1.5em; }
.kg-width-wide  { max-width: 1040px; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 var(--pad-x); }
.kg-width-wide > *, .kg-width-full > * { margin-left: auto; margin-right: auto; }
.kg-width-full  { max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.kg-width-full img { width: 100%; }
.kg-image { margin-left: auto; margin-right: auto; }
.kg-image-card figcaption, .kg-gallery-card figcaption, .kg-embed-card figcaption {
    margin-top: 10px; font-size: 13.5px; color: var(--muted); text-align: center;
}
.kg-gallery-container { display: flex; flex-direction: column; max-width: 1040px; margin: 0 auto; }
.kg-gallery-row { display: flex; flex-direction: row; justify-content: center; }
.kg-gallery-image img { display: block; width: 100%; height: 100%; }
.kg-gallery-row:not(:first-of-type) { margin: 6px 0 0; }
.kg-gallery-image:not(:first-of-type) { margin: 0 0 0 6px; }
.kg-embed-card { display: flex; flex-direction: column; align-items: center; width: 100%; }
.kg-embed-card iframe { max-width: 100%; }

.kg-bookmark-card { width: 100%; }
.kg-bookmark-container {
    display: flex; min-height: 148px; color: var(--ink);
    background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
.kg-bookmark-container:hover { color: var(--ink); border-color: var(--sage); }
.kg-bookmark-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: start; padding: 20px; }
.kg-bookmark-title { font-family: var(--serif); font-size: 21px; line-height: 1.3; }
.kg-bookmark-description {
    display: -webkit-box; margin-top: 8px; max-height: 44px; overflow: hidden;
    font-size: 15px; line-height: 1.5; color: var(--body);
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kg-bookmark-thumbnail { position: relative; flex-grow: 1; min-width: 33%; }
.kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kg-bookmark-metadata { display: flex; align-items: center; margin-top: 14px; font-size: 13px; color: var(--muted); }
.kg-bookmark-icon { width: 20px; height: 20px; margin-right: 8px; }
.kg-bookmark-author::after { content: "•"; margin: 0 6px; }
.kg-bookmark-publisher {
    overflow: hidden; max-width: 240px; line-height: 1.5;
    white-space: nowrap; text-overflow: ellipsis; color: var(--muted);
}

.kg-callout-card { display: flex; gap: 12px; padding: 20px 24px; border-radius: 4px; background: var(--sand); }
.kg-callout-card-accent { background: #E7EDE1; }
.kg-callout-emoji { font-size: 20px; line-height: 1.4; }
.kg-callout-text { font-size: 16.5px; line-height: 1.7; }

.kg-toggle-card { border-bottom: 1px solid var(--line); padding: 18px 0; }
.kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; }
.kg-toggle-card-icon { width: 16px; height: 16px; transition: transform 0.2s; }
.kg-toggle-card[data-kg-toggle-state="close"] .kg-toggle-content { display: none; }
.kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon { transform: rotate(180deg); }

.kg-button-card { display: flex; }
.kg-button-card.kg-align-center { justify-content: center; }
.kg-btn {
    display: inline-flex; align-items: center; padding: 15px 28px; border-radius: 999px;
    background: var(--teal); color: var(--cream);
    font-size: 14px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.kg-btn:hover { background: var(--ink); color: var(--cream); }
.kg-btn-accent { background: var(--teal); }

.kg-header-card { padding: clamp(40px, 6vw, 72px) var(--pad-x); text-align: center; background: var(--sand); }
.kg-header-card h2 { font-family: var(--serif); font-size: clamp(30px, 4vw, 46px); margin: 0; }
.kg-header-card h3 { margin: 14px 0 0; font-size: 17px; font-weight: 400; color: var(--body); }

.kg-product-card, .kg-file-card {
    display: flex; gap: 18px; padding: 20px; background: var(--card);
    border: 1px solid var(--line); border-radius: 4px;
}
.kg-file-card-container { display: flex; align-items: center; gap: 18px; width: 100%; color: var(--ink); }
.kg-file-card-title { font-weight: 600; }
.kg-file-card-caption, .kg-file-card-filesize { font-size: 14px; color: var(--muted); }

.kg-audio-card, .kg-video-card { border-radius: 4px; overflow: hidden; background: var(--sand); }
.kg-nft-card { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.kg-blockquote-alt {
    font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.6;
    color: var(--body); border-left: 0; padding-left: 0; text-align: center;
}

/* ---------- reminders ---------- */

.reminder { margin: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid rgba(36, 48, 47, 0.11); }
.reminder-media { background: var(--sand); padding: 14px; }
.reminder-media img { width: 100%; height: auto; object-fit: contain; }
.reminder-caption { padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.reminder-title { margin: 0; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.4; }
.reminder-title a { color: var(--ink); }
.reminder-title a:hover { color: var(--teal); }
.reminder-caption .source-line { margin: auto 0 0; }

.notice { padding: clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 34px); background: #FFF8E8; border: 1px solid #E3D3A8; color: #5E5335; }
.notice-head {
    margin: 0 0 9px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; color: #8A6A17;
}
.notice p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.notice code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.notice + .link-back { margin-top: 28px; }

/* ---------- book page ---------- */

.step-list { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.step-list li { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; font-size: 16.5px; line-height: 1.75; color: var(--body); }
.step-num { font-size: 25px; line-height: 1.1; color: var(--sage-text); }
.callout { margin-top: 36px; padding: 22px 24px; background: var(--sand); border-left: 2px solid var(--sage); }
.callout p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--body); }

.booking-panel { border: 1px solid rgba(36, 48, 47, 0.14); background: var(--card); padding: clamp(28px, 3.4vw, 44px); text-align: center; }
.booking-panel .post-rule { margin: 28px auto; }
.booking-panel .btn { margin-top: 28px; }
.cal-embed { position: relative; min-height: clamp(420px, 52vw, 620px); }
.cal-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- contact page ---------- */

.contact-details { display: grid; gap: 30px; }
.detail-block { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 18px; }
.detail-label { margin: 0; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.detail-value { margin: 0; font-size: clamp(21px, 2.2vw, 26px); }
.detail-value a { border-bottom: 1px solid rgba(27, 92, 105, 0.28); }
.social-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.social-pills a {
    padding: 10px 17px; border-radius: 999px; border: 1px solid rgba(36, 48, 47, 0.18);
    font-size: 13px; font-weight: 500; color: var(--ink);
}
.social-pills a:hover { border-color: var(--sage); color: var(--teal); }
.contact-form-panel { padding: clamp(28px, 3.4vw, 42px) !important; background: var(--card); border: 1px solid rgba(36, 48, 47, 0.12); }

/* ---------- newsletter ---------- */

.newsletter { padding: clamp(56px, 8vw, 100px) 0; }
.newsletter-inner { display: grid; gap: clamp(30px, 5vw, 70px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: center; }
.newsletter .lede { margin: 16px 0 0; }
.signup { display: flex; flex-wrap: wrap; gap: 12px; }
.signup-input {
    flex: 1 1 220px; min-width: 0; padding: 16px 20px;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--card); font-family: var(--sans); font-size: 16px; color: var(--ink);
}
.signup-msg { display: none; flex: 1 0 100%; margin: 0; font-size: 14px; }
.signup-success { color: var(--sage-text); }
.signup-error { color: #9B3A2E; }
form[data-members-form].success .signup-success { display: block; }
form[data-members-form].error .signup-error { display: block; }

/* ---------- footer ---------- */

.site-footer { background: var(--teal-deep); color: #F1EFE7; padding: clamp(52px, 7vw, 84px) 0 clamp(28px, 3vw, 40px); }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 var(--pad-x); }
.footer-brand {
    display: grid; justify-items: center; gap: 22px; text-align: center;
    padding-bottom: clamp(40px, 5vw, 60px); margin-bottom: clamp(40px, 5vw, 60px);
    border-bottom: 1px solid rgba(241, 239, 231, 0.16);
}
.footer-brand .arabesque { margin-bottom: 0; }
.footer-grid { display: grid; gap: clamp(32px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.footer-name { margin: 0; font-size: clamp(28px, 3.6vw, 40px); font-weight: 500; letter-spacing: 0.075em; color: #FBF8F1; }
.footer-role {
    margin: 0; font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em;
    text-transform: uppercase; color: rgba(241, 239, 231, 0.75);
}
.footer-head {
    margin: 0 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.19em;
    text-transform: uppercase; color: rgba(241, 239, 231, 0.75);
}
.footer-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 15px; }
.footer-col li { color: rgba(241, 239, 231, 0.88); word-break: break-word; }
.footer-col a { color: rgba(241, 239, 231, 0.88); }
.footer-col a:hover { color: #FBF8F1; }
.social-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.social-row a {
    padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(241, 239, 231, 0.3);
    font-size: 12px; color: rgba(241, 239, 231, 0.88);
}
.social-row a:hover { border-color: #FBF8F1; color: #FBF8F1; }
.footer-base {
    margin-top: clamp(40px, 5vw, 64px); padding-top: 22px;
    border-top: 1px solid rgba(241, 239, 231, 0.16);
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
    font-size: 12.5px; color: rgba(241, 239, 231, 0.75);
}
.footer-base p { margin: 0; }
.footer-base a { color: inherit; }

/* ---------- pagination ---------- */

.pagination {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--line);
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.page-number { color: var(--muted); }

/* ---------- small screens ---------- */

@media (max-width: 940px) {
    .nav-toggle { display: flex; }
    .site-header-inner { flex-wrap: wrap; }
    .site-logo { order: 0; }
    .header-cta { order: 1; }
    .site-nav {
        display: none; order: 3; width: 100%; flex: 1 0 100%; padding: 15px 0 4px;
        flex-direction: column; align-items: flex-start; gap: 16px;
        border-top: 1px solid var(--line);
    }
    .site-nav.is-open { display: flex; }
    .nav-list { flex-direction: column; align-items: flex-start; gap: 15px; }
    .nav-item a { font-size: 14px; letter-spacing: 0.05em; }
    .header-cta { margin-left: auto; }
}

@media (max-width: 560px) {
    .header-cta { display: none; }
    .site-nav.is-open ~ .header-cta { display: inline-flex; order: 4; margin: 4px 0 0; }
}

@media (max-width: 800px) {
    body { font-size: 16.5px; }
    .nav-item a { font-size: 15px; }
    .section-head { flex-direction: column; align-items: flex-start; }
    .card { gap: 20px; }
    .btn { width: 100%; }
    .site-nav .btn { width: auto; }
    .footer-base { flex-direction: column; }
}

/* ---------- print ---------- */

@media print {
    .site-header, .site-footer, .newsletter, .btn-row, .tag-row, .link-back, .rail-controls, .nav-toggle { display: none; }
    body { background: #fff; color: #000; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .rail-track { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* =========================================================================
   v1.1 — arabesque rule, Arabic feature, events, two-path booking
   ========================================================================= */

/* ---------- arabesque rule (replaces the plain motif divider) ---------- */

.arabesque { display: block; width: 100%; max-width: 340px; margin: 0 auto 38px; height: auto; }
.arabesque path, .arabesque circle { vector-effect: non-scaling-stroke; }
.arabesque-vine { fill: none; stroke: var(--logo-green); stroke-width: 2; stroke-linecap: round; }
.arabesque-stem { fill: none; stroke: var(--logo-green); stroke-width: 1; opacity: 0.75; }
.arabesque-leaf { fill: var(--logo-cyan); opacity: 0.85; }
.arabesque-seed { fill: var(--logo-cyan); }
.arabesque-sm { max-width: 200px; margin-bottom: 24px; }
.on-deep-rule .arabesque-vine, .on-deep-rule .arabesque-stem { stroke: rgba(144, 192, 64, 0.85); }
.on-deep-rule .arabesque-leaf, .on-deep-rule .arabesque-seed { fill: rgba(32, 176, 224, 0.9); }

/* ---------- Arabic feature ---------- */

.arabic-feature { padding: clamp(52px, 8vw, 96px) 0; background: var(--sand); }
.arabic-feature-inner { display: grid; gap: 26px; justify-items: center; text-align: center; }
.arabic-script {
    margin: 0; font-family: var(--arabic); direction: rtl; unicode-bidi: isolate;
    font-size: clamp(34px, 6vw, 62px); line-height: 2; color: var(--ink);
}
.arabic-translation {
    margin: 0; max-width: 34ch; font-family: var(--serif);
    font-size: clamp(21px, 2.4vw, 28px); line-height: 1.55; color: var(--ink);
}
.arabic-citation {
    margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.arabic-pending {
    display: grid; gap: 14px; justify-items: center; padding: clamp(28px, 4vw, 44px);
    border: 1px dashed var(--line-strong); background: var(--card);
}

/* ---------- service area ---------- */

.service-area { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.area-block { display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 16px; }
.area-value { margin: 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.4; color: var(--ink); }

/* ---------- events ---------- */

.event-list { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.event {
    margin: 0; display: flex; flex-direction: column;
    background: var(--card); border: 1px solid rgba(38, 48, 47, 0.11);
}
/* Event images are usually promotional posters: portrait, and made almost
   entirely of text — dates, venues, addresses, times. Contain them on a sand
   ground so nothing is cropped away, same rule as the reminder graphics. */
.event-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--sand); padding: 10px; }
.event-media img { width: 100%; height: 100%; object-fit: contain; }
.event-media-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: var(--sand-deep); }
.event-body { padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.event-status {
    align-self: start; padding: 5px 12px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.event-upcoming { background: #DFF0F6; color: #0B4E62; }
.event-past { background: var(--sand-deep); color: var(--muted); }
.event-title { margin: 0; font-family: var(--serif); font-size: clamp(21px, 2.2vw, 26px); line-height: 1.3; }
.event-title a { color: var(--ink); }
.event-title a:hover { color: var(--teal); }
.event-where {
    margin: auto 0 0; font-size: 13.5px; letter-spacing: 0.03em; color: var(--muted);
    display: flex; flex-wrap: wrap; gap: 8px;
}
.events-group + .events-group { margin-top: clamp(48px, 6vw, 80px); }
.events-group-head {
    margin: 0 0 clamp(24px, 3vw, 36px); padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sage-text);
}

/* ---------- two-path booking ---------- */

.path-grid { display: grid; gap: clamp(22px, 3vw, 34px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; }
.path {
    display: flex; flex-direction: column; gap: 16px;
    padding: clamp(26px, 3.2vw, 40px);
    background: var(--card); border: 1px solid rgba(38, 48, 47, 0.13);
}
.path-primary { border-color: var(--teal); box-shadow: 0 1px 0 var(--teal) inset, 0 -1px 0 var(--teal) inset; }
.path-tag {
    align-self: start; padding: 6px 13px; border-radius: 999px; background: #DFF0F6;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #0B4E62;
}
.path-title { margin: 0; font-family: var(--serif); font-size: clamp(25px, 2.8vw, 32px); line-height: 1.2; }
.path-shape { display: grid; gap: 8px; margin: 4px 0 0; }
.path-bar { display: flex; gap: 4px; align-items: center; }
.path-hour {
    flex: 1; height: 34px; border-radius: 3px; display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.hour-free { background: #DFF0F6; color: #0B4E62; }
.hour-paid { background: var(--sand-deep); color: var(--body); }
.path-note { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body); }
.path-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 15px; line-height: 1.65; color: var(--body); }
.path-list li { display: grid; grid-template-columns: auto 1fr; gap: 11px; }
.path-list li::before { content: ""; width: 6px; height: 6px; margin-top: 9px; background: var(--logo-green); }
.path .btn { margin-top: auto; }

.step-flow { display: grid; gap: clamp(20px, 3vw, 30px); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: clamp(30px, 4vw, 46px); }
.step-card { display: grid; gap: 10px; padding-top: 18px; border-top: 2px solid var(--logo-cyan); }
.step-card:nth-child(2) { border-top-color: var(--logo-green); }
.step-card:nth-child(3) { border-top-color: var(--sage); }
.step-card:nth-child(4) { border-top-color: var(--line-strong); }
.step-index { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: 0.16em; color: var(--muted); }
.step-name { margin: 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.3; }
.step-body { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body); }

.tentative {
    display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
    margin-top: clamp(30px, 4vw, 44px); padding: 20px 24px;
    background: #FFF8E8; border: 1px solid #E3D3A8; color: #5E5335;
}
.tentative p { margin: 0; font-size: 15.5px; line-height: 1.7; }
.tentative strong { color: #8A6A17; }

/* ---------- testimonial city ---------- */

.rail-city { display: block; margin-top: 6px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; color: var(--muted); }

.hero-note { margin: 20px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* =========================================================================
   v1.2 — floating glass panels
   Every panel is a translucent pane lifted off an ambient wash. The wash is
   what the blur has to work with; without it, glass on a flat ground reads
   as nothing. Both are built from the existing palette only.
   ========================================================================= */

body {
    background-color: var(--cream);
    background-image:
        radial-gradient(60ch 50ch at 12% 8%,  rgba(32, 176, 224, 0.055), transparent 70%),
        radial-gradient(56ch 46ch at 88% 32%, rgba(144, 192, 64, 0.055), transparent 70%),
        radial-gradient(70ch 54ch at 50% 96%, rgba(234, 223, 203, 0.5),   transparent 72%);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* the sand bands become translucent so the wash carries through them */
.band-sand, .arabic-feature { background: rgba(245, 237, 224, 0.72); backdrop-filter: blur(6px); }

/* ---- the panel treatment ---- */
.service,
.event,
.reminder,
.path,
.booking-panel,
.contact-form-panel,
.notice,
.callout,
.arabic-pending,
.kg-bookmark-container,
.kg-callout-card,
.kg-product-card,
.kg-file-card {
    background: rgba(255, 253, 248, 0.62);
    backdrop-filter: blur(16px) saturate(1.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
    border: 1px solid rgba(255, 255, 255, 0.68);
    box-shadow:
        0 1px 1px rgba(38, 48, 47, 0.03),
        0 10px 24px -12px rgba(38, 48, 47, 0.13),
        0 28px 56px -28px rgba(14, 107, 133, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

/* panels that sit on the sand bands need a touch more body to read */
.band-sand .service,
.band-sand .event,
.band-sand .reminder,
.arabic-pending {
    background: rgba(255, 253, 248, 0.74);
}

/* the lift */
.service:hover,
.event:hover,
.reminder:hover,
.path:hover,
.kg-bookmark-container:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 1px rgba(38, 48, 47, 0.03),
        0 16px 32px -14px rgba(38, 48, 47, 0.16),
        0 40px 72px -32px rgba(14, 107, 133, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* the notice keeps its amber identity, gains the glass */
.notice { background: rgba(255, 248, 232, 0.72); border-color: rgba(227, 211, 168, 0.85); }
.tentative {
    background: rgba(255, 248, 232, 0.72);
    backdrop-filter: blur(16px) saturate(1.06);
    -webkit-backdrop-filter: blur(16px) saturate(1.06);
    border: 1px solid rgba(227, 211, 168, 0.85);
    border-radius: 10px;
    box-shadow: 0 10px 24px -14px rgba(38, 48, 47, 0.12);
}
.callout { border-left: 2px solid var(--sage); border-radius: 0 10px 10px 0; }

/* the primary booking path stays the emphasised one */
.path-primary {
    border-color: rgba(14, 107, 133, 0.55);
    box-shadow:
        0 1px 1px rgba(38, 48, 47, 0.03),
        0 14px 30px -14px rgba(14, 107, 133, 0.22),
        0 34px 64px -30px rgba(14, 107, 133, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* media inside a glass panel needs the corners clipped to match */
.service-media { border-radius: 10px 10px 0 0; }
.event-media   { border-radius: 10px 10px 0 0; }
.reminder-media{ border-radius: 10px 10px 0 0; }

/* inputs pick up the same pane language */
.signup-input,
.post-content input[type="email"],
.post-content input[type="text"],
.post-content textarea {
    background: rgba(255, 253, 248, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 2px rgba(38, 48, 47, 0.04);
}



/* the deep bands stay solid — glass over dark reads as haze, not glass */
.band-deep, .site-footer { backdrop-filter: none; }

/* no blur support, or reduced transparency preferred: fall back to solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .service, .event, .reminder, .path, .booking-panel, .contact-form-panel,
    .notice, .callout, .arabic-pending, .tentative, .site-header, .band-sand, .arabic-feature {
        background: var(--card);
    }
    .band-sand, .arabic-feature { background: var(--sand); }
}

@media (prefers-reduced-transparency: reduce) {
    .service, .event, .reminder, .path, .booking-panel, .contact-form-panel,
    .notice, .callout, .arabic-pending, .tentative { background: var(--card); backdrop-filter: none; }
    .site-header { background: var(--cream); backdrop-filter: none; }
    .band-sand, .arabic-feature { background: var(--sand); backdrop-filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .service:hover, .event:hover, .reminder:hover, .path:hover, .kg-bookmark-container:hover { transform: none; }
}

.area-note { margin: 18px 0 0; font-size: 14px; letter-spacing: 0.02em; color: var(--muted); }

/* =========================================================================
   v1.3 — brought into line with the logo
   The logo's vocabulary is: an OPEN ARC, LEAF forms, a cyan→green SWEEP,
   an all-caps wide-tracked serif, and a label set between HAIRLINES.
   The old diamond motif and vine rule were foreign to it and are gone.
   ========================================================================= */

/* ---- the arc: the logo's canopy, reused as the system mark ---- */
.arc-mark { display: block; flex: 0 0 auto; }
.arc-mark circle { fill: none; stroke: url(#arcSweep); stroke-linecap: round; }

/* ---- the flanked label: straight from "— PROFESSIONAL LIFE COACH —" ---- */
.flanked {
    display: flex; align-items: center; justify-content: center; gap: clamp(12px, 2vw, 20px);
    margin: 0 0 18px;
}
.flanked-line {
    display: block; flex: 1 1 auto; max-width: 74px; height: 1px;
    background: linear-gradient(90deg, rgba(48,168,216,0) 0%, var(--logo-cyan) 100%);
}
.flanked-line-r { background: linear-gradient(90deg, var(--logo-green) 0%, rgba(144,192,64,0) 100%); }
.flanked-text {
    font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--teal); white-space: nowrap;
}
@media (max-width: 420px) { .flanked-text { white-space: normal; } }
.flanked-left { justify-content: flex-start; }
.flanked-left .flanked-line:first-child { display: none; }

/* ---- the sweep, used as the logo uses it: across display type ---- */
.sweep-text {
    background: var(--logo-sweep);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .sweep-text { -webkit-text-fill-color: currentColor; color: var(--teal); }
}

/* ---- the divider: an arc flanked by hairlines that fade cyan→green ---- */
.rule-arc { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 38px; }
.rule-arc .rule-line { display: block; width: clamp(40px, 12vw, 86px); height: 1px; }
.rule-arc .rule-line-l { background: linear-gradient(90deg, rgba(48,168,216,0) 0%, var(--logo-cyan) 100%); }
.rule-arc .rule-line-r { background: linear-gradient(90deg, var(--logo-green) 0%, rgba(144,192,64,0) 100%); }

/* ---- leaf, from the canopy: list bullets and small accents ---- */
.leaf-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.leaf-list li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.leaf-bullet { width: 11px; height: 11px; margin-top: 7px; flex: 0 0 auto; }

/* the old motif classes now render the arc instead of a diamond */
.motif-star, .logo-motif, .footer-motif { position: relative; display: inline-block; width: 14px; height: 14px; flex: 0 0 auto; }
.motif-star b, .logo-motif i, .footer-motif i { position: absolute; inset: 0; border-radius: 50%; background: none; }
.motif-star b:first-child, .logo-motif i:first-child, .footer-motif i:first-child {
    border: 1.6px solid var(--logo-green); border-right-color: transparent; border-bottom-color: transparent;
    transform: rotate(-45deg);
}
.motif-star b:last-child, .logo-motif i:last-child, .footer-motif i:last-child {
    inset: 3.5px; border: 1.4px solid var(--logo-cyan);
    border-right-color: transparent; border-bottom-color: transparent; transform: rotate(-45deg);
}

/* ---- the hero, laid out the way the logo is ---- */
.hero-name {
    margin: 0; font-family: var(--serif); font-weight: 500;
    font-size: clamp(38px, 6.4vw, 72px); line-height: 1.06;
    letter-spacing: 0.055em; text-transform: uppercase;
}
.hero-lines { display: grid; gap: 9px; margin: 24px 0 0; }
.hero-line-role {
    margin: 0; font-size: clamp(12.5px, 1.4vw, 15px); font-weight: 600;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); line-height: 1.3;
}
.hero-line-sub {
    margin: 0; font-size: clamp(11px, 1.25vw, 13px); font-weight: 500;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--logo-sky); line-height: 1.3;
}

/* the canopy arc, drawn faintly behind the portrait */
.hero-portrait { position: relative; }
.hero-arc {
    position: absolute; top: -3%; left: 50%; transform: translateX(-50%);
    width: min(112%, 470px); height: auto; z-index: 0; opacity: 0.5; pointer-events: none;
}
.hero-portrait .portrait, .portrait-frame { position: relative; z-index: 1; }

/* ---- panels: softer, matching the mark's roundness ---- */
.service, .event, .reminder, .path, .booking-panel, .contact-form-panel,
.notice, .arabic-pending, .tentative, .kg-bookmark-container { border-radius: 14px; }
.service-media, .event-media, .reminder-media { border-radius: 14px 14px 0 0; }
.callout { border-radius: 0 14px 14px 0; }

/* a hairline of the sweep across the top of the emphasised panel */
.path-primary { position: relative; overflow: hidden; }
.path-primary::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--logo-sweep);
}

/* ---- buttons: the primary carries the sweep, as the wordmark does ---- */
.btn-primary { background: var(--logo-sweep); color: #FFFFFF; border: none; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--teal-deep); color: #FFFFFF; }
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--logo-green); color: var(--teal); }
.btn-light { background: #FBF8F1; color: var(--teal-deep); }
.btn-light:hover, .btn-light:focus-visible { background: #E4F1D8; color: var(--teal-deep); }

/* ---- eyebrows take the logo's tracking ---- */
.eyebrow { letter-spacing: 0.22em; color: var(--teal); }



/* ---- steps and events pick up the sweep order, cyan → green ---- */
.step-card:nth-child(1) { border-top-color: var(--logo-cyan); }
.step-card:nth-child(2) { border-top-color: #48A8C0; }
.step-card:nth-child(3) { border-top-color: var(--logo-teal); }
.step-card:nth-child(4) { border-top-color: var(--logo-green); }

.event-upcoming { background: rgba(48, 168, 216, 0.14); color: #0F5570; }
.event-past { background: var(--sand-deep); color: var(--muted); }
.hour-free { background: rgba(48, 168, 216, 0.16); color: #0F5570; }
.chip { background: rgba(144, 192, 64, 0.18); color: var(--green-text); }
.path-tag { background: rgba(48, 168, 216, 0.14); color: #0F5570; }

/* ---- the ambient wash uses the logo's own two colours ---- */
body {
    background-image:
        radial-gradient(60ch 50ch at 12% 8%,  rgba(48, 168, 216, 0.07), transparent 70%),
        radial-gradient(56ch 46ch at 88% 32%, rgba(144, 192, 64, 0.07), transparent 70%),
        radial-gradient(70ch 54ch at 50% 96%, rgba(234, 223, 203, 0.5), transparent 72%);
}

/* ---- the dark band, derived from the logo cyan ---- */
.band-deep, .site-footer { background: var(--teal-deep); }
.footer-motif i:first-child { border-color: rgba(144,192,64,0.9); border-right-color: transparent; border-bottom-color: transparent; }
.footer-motif i:last-child { border-color: rgba(48,168,216,0.9); border-right-color: transparent; border-bottom-color: transparent; }


/* the leaf bullet replaces the square in the booking paths */
.path-list li::before { content: none; }
.path-list li { grid-template-columns: auto 1fr; gap: 12px; }

.step-num {
    font-family: var(--serif); font-size: 27px; line-height: 1.1; font-weight: 500;
    background: var(--logo-sweep); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.event-media-fallback { background: linear-gradient(150deg, rgba(48,168,216,0.10), rgba(144,192,64,0.12)); }
.card-media-fallback  { background: linear-gradient(150deg, rgba(48,168,216,0.10), rgba(144,192,64,0.12)); }
.portrait-frame, .placeholder-frame {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(48,168,216,0.10), transparent 62%),
        repeating-linear-gradient(135deg, #F2ECE1 0 9px, #F8F3EA 9px 18px);
    border-radius: 220px 220px 14px 14px;
}
.placeholder-frame { border-radius: 14px; }
.rail-item blockquote footer { color: var(--teal); }
.tag:hover { background: rgba(144, 192, 64, 0.18); color: var(--green-text); }
.detail-value a { border-bottom-color: rgba(20, 96, 122, 0.32); }
.post-content a { border-bottom-color: rgba(20, 96, 122, 0.32); }
.post-content blockquote { border-left-color: var(--logo-green); }
.callout { border-left-color: var(--logo-green); }
.kg-btn { background: var(--logo-sweep); color: #fff; }
.kg-btn:hover { background: var(--teal-deep); color: #fff; }
.signup-success { color: var(--green-text); }
.hero-dash { background: var(--logo-sweep); }