/* CREDENTIALS PAGE STORY — page layout only. Brand colors/fonts come from global.css. */
.md-competencies{
    background:var(--md-light);
    color:var(--md-text);
    font-family:var(--md-font-body);
    font-weight:400;
    font-size:16px;
    line-height:1.65;
    overflow:hidden;
}
.md-competencies *,.md-competencies *::before,.md-competencies *::after{box-sizing:border-box}
.md-competencies h1,.md-competencies h2,.md-competencies h3,.md-competencies h4{margin:0;font-family:var(--md-font-body);font-weight:500;letter-spacing:-.03em}
.md-competencies h1{line-height:.98}
.md-competencies p,.md-competencies li{font-family:var(--md-font-body);line-height:1.65}
.md-competencies img{display:block;max-width:100%}
.md-competencies .md-wrap{width:min(1160px,calc(100% - 64px));margin:auto}
.md-competencies .md-section{padding:132px 0}
.md-competencies .md-progress{position:fixed;z-index:80;left:0;top:0;width:100%;height:3px;pointer-events:none}
.md-competencies .md-progress span{display:block;width:0;height:100%;background:var(--md-accent)}
.md-competencies .md-eyebrow{margin:0 0 28px;color:var(--md-accent-deep);font:700 10px/1.3 var(--md-font-ui);text-transform:uppercase;letter-spacing:.2em}

/* Hero */
.md-competencies .md-hero{width:100%;min-height:760px;background:var(--md-cream);color:var(--md-text);display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;padding:92px 5vw 76px;overflow:hidden}
.md-competencies .md-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.35),transparent 54%),radial-gradient(circle at 72% 30%,color-mix(in srgb,var(--md-accent) 24%,transparent),transparent 32%)}
.md-competencies .md-hero>*{position:relative;z-index:1}
.md-competencies .md-hero h1{font-size:clamp(46px,5.7vw,82px);margin:0 0 32px}
.md-competencies .md-hero h1 em,.md-competencies .md-hero h1 b{font-family:var(--md-font-display);font-weight:400}
.md-competencies .md-hero h1 em{color:var(--md-accent-deep);font-style:italic}
.md-competencies .md-hero h1 b{color:var(--md-brand)}
.md-competencies .md-hero-copy{padding-bottom:32px}
.md-competencies .md-lead{max-width:490px;margin:0;color:var(--md-brand-soft);font-size:17px}
.md-competencies .md-hero-art{height:560px;margin-left:30px;position:relative}
.md-competencies .md-hero-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(.97)}
.md-competencies .md-hero-art::after{content:"EDUCATION  ·  STANDARD  ·  EXPERIENCE";position:absolute;left:-22px;bottom:24px;background:var(--md-brand);color:var(--md-mist);font:700 9px/1 var(--md-font-ui);letter-spacing:.18em;padding:14px 16px;transform:rotate(-90deg);transform-origin:left bottom}
.md-competencies .md-art-note{position:absolute;right:18px;bottom:18px;background:var(--md-brand);width:138px;min-height:138px;padding:17px;color:#fff}
.md-competencies .md-art-note span{font-family:var(--md-font-display);font-size:11px;opacity:.75}
.md-competencies .md-art-note p{font-family:var(--md-font-display);font-size:18px;line-height:1.08;margin:22px 0 0;max-width:95px}
.md-competencies .md-hero-foot{position:absolute!important;bottom:27px;left:5vw;right:5vw;display:flex;justify-content:space-between;color:var(--md-muted);font:700 10px/1.3 var(--md-font-ui);letter-spacing:.12em;text-transform:uppercase}

/* Shared page-story layout */
.md-competencies .md-two-col{display:grid;grid-template-columns:1fr 1fr;gap:100px}
.md-competencies .md-intro{background:var(--md-surface)}
.md-competencies h2{font-size:clamp(40px,4.5vw,63px);line-height:1.05}
.md-competencies h2 em{font-family:var(--md-font-display);font-weight:400;color:var(--md-accent-deep);font-style:italic}
.md-competencies .md-copy{max-width:530px}
.md-competencies .md-copy p{color:var(--md-brand-soft);margin:0 0 22px}
.md-competencies .md-quote{font-family:var(--md-font-display)!important;font-size:26px;line-height:1.3;color:var(--md-text)!important}
.md-competencies .md-statement{border-top:1px solid var(--md-line);padding-top:25px;margin-top:80px;display:flex;gap:50px}
.md-competencies .md-statement span{color:var(--md-accent-deep);font-family:var(--md-font-display);font-size:12px}
.md-competencies .md-statement p{font-family:var(--md-font-display);font-size:30px;line-height:1.15;margin:0}
.md-competencies .md-statement em{color:var(--md-accent-deep)}
.md-competencies .md-dark{background:var(--md-brand);color:#fff}
.md-competencies .md-section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:60px}
.md-competencies .md-section-head>p{max-width:350px;color:var(--md-brand-soft);margin:0}
.md-competencies .md-dark .md-section-head>p,.md-competencies .md-philosophy .md-section-head>p{color:#d9e1dc}
.md-competencies .md-dark .md-copy p{color:#d9e1dc}
.md-competencies .md-dark .md-copy .md-quote{color:#fff!important}

/* Education timeline */
.md-competencies .md-timeline{border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:repeat(4,1fr)}
.md-competencies .md-time{padding:26px 24px 0;border-right:1px solid rgba(255,255,255,.18);min-height:220px}
.md-competencies .md-time:last-child{border-right:0}
.md-competencies .md-time span{color:var(--md-accent);font:700 11px/1.3 var(--md-font-ui);letter-spacing:.1em}
.md-competencies .md-time h3{font-size:22px;margin:30px 0 12px;color:#fff}
.md-competencies .md-time p{color:#d9e1dc;font-size:14px;margin:0}

/* Competence cards */
.md-competencies .md-competence{background:var(--md-cream)}
.md-competencies .md-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--md-line);border:1px solid var(--md-line)}
.md-competencies .md-card{background:var(--md-cream);padding:28px 24px;min-height:280px}
.md-competencies .md-card:nth-child(2n){background:var(--md-light)}
.md-competencies .md-card span{color:var(--md-accent-deep);font-family:var(--md-font-display);font-size:12px}
.md-competencies .md-card h3{font-size:23px;margin:45px 0 15px}
.md-competencies .md-card p{font-size:14px;color:var(--md-muted);margin:0}

/* Board credential */
.md-competencies .md-credential{background:var(--md-surface)}
.md-competencies .md-credential-box{border:0;padding:60px;display:grid;grid-template-columns:110px 1fr;gap:34px;background:var(--md-brand);color:#fff;position:relative;overflow:hidden}
.md-competencies .md-credential-box::after{content:"EBOPRAS";position:absolute;right:-20px;bottom:-38px;color:rgba(255,255,255,.05);font-family:var(--md-font-display);font-size:150px;line-height:1}
.md-competencies .md-credential-box>span{font-family:var(--md-font-display);font-size:38px;color:var(--md-accent)}
.md-competencies .md-credential-box h3{position:relative;z-index:1;font-size:30px;margin:0 0 15px;color:#fff}
.md-competencies .md-credential-box p{position:relative;z-index:1;color:#d9e1dc;max-width:760px;margin:0 0 15px}
.md-competencies .md-badges{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}
.md-competencies .md-badges span{border:1px solid var(--md-line);padding:7px 11px;font:700 11px/1.3 var(--md-font-ui);color:var(--md-muted)}
.md-competencies .md-dark .md-badges span,.md-competencies .md-credential-box .md-badges span{color:#e1e8e9;border-color:rgba(255,255,255,.3)}

/* Clinical areas accordion */
.md-competencies .md-areas{background:var(--md-surface)}
.md-competencies .md-area-list{border-top:1px solid var(--md-line)}
.md-competencies details{border-bottom:1px solid var(--md-line)}
.md-competencies summary{display:grid;grid-template-columns:70px 1fr 40px;align-items:center;list-style:none;cursor:pointer;padding:24px 0}
.md-competencies summary::-webkit-details-marker{display:none}
.md-competencies summary span{font-family:var(--md-font-display);color:var(--md-accent-deep);font-size:11px}
.md-competencies summary strong{font-size:27px;font-weight:500}
.md-competencies summary i{font-style:normal;font-size:24px;text-align:right;color:var(--md-accent-deep);transition:transform .25s var(--md-ease)}
.md-competencies details[open] summary i{transform:rotate(45deg)}
.md-competencies details p{max-width:760px;margin:0 70px 28px;color:var(--md-muted)}

/* Philosophy */
.md-competencies .md-philosophy{background:var(--md-brand-soft);color:#fff}
.md-competencies .md-philosophy .md-eyebrow{color:var(--md-accent)}
.md-competencies .md-step-list{border-top:1px solid rgba(255,255,255,.18)}
.md-competencies .md-step{display:grid;grid-template-columns:80px 260px 1fr;gap:25px;padding:28px 0;border-bottom:1px solid rgba(255,255,255,.18)}
.md-competencies .md-step>span{font-family:var(--md-font-display);color:var(--md-accent)}
.md-competencies .md-step h3{margin:0;font-size:22px;color:#fff}
.md-competencies .md-step p{margin:0;color:#d9e1dc;max-width:610px}

/* Summary table */
.md-competencies .md-summary{background:var(--md-cream)}
.md-competencies .md-table{width:100%;border-collapse:collapse;margin-top:48px}
.md-competencies .md-table th,.md-competencies .md-table td{text-align:left;padding:17px 15px;border-bottom:1px solid var(--md-line);vertical-align:top}
.md-competencies .md-table th{font:700 11px/1.3 var(--md-font-ui);text-transform:uppercase;letter-spacing:.14em;color:var(--md-accent-deep)}
.md-competencies .md-table td:first-child{font-weight:600;width:30%}

/* CTA + inline consultation */
.md-competencies .md-cta{background:var(--md-brand);color:#fff;text-align:center;padding:115px 0 85px}
.md-competencies .md-cta h2{font-size:clamp(45px,5.5vw,80px)}
.md-competencies .md-cta h2 em{color:var(--md-accent)}
.md-competencies .md-cta .md-eyebrow{color:var(--md-accent)}
.md-competencies .md-cta>div>p:not(.md-eyebrow){max-width:550px;margin:28px auto;color:#e6ded8}
.md-competencies .md-youform{width:100%;max-width:860px;margin:46px auto 0;padding:12px;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.03);text-align:left}
.md-competencies .md-youform .dmd-chatnow{width:100%;margin:0}
.md-competencies .md-credentials{margin-top:65px;color:var(--md-accent);font:700 10px/1.3 var(--md-font-ui);letter-spacing:.14em;text-transform:uppercase}

/* Motion */
.md-competencies .md-reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--md-ease),transform .8s var(--md-ease)}
.md-competencies .md-reveal.is-visible{opacity:1;transform:none}

@media(max-width:1000px){
    .md-competencies .md-hero{grid-template-columns:1fr;min-height:auto;padding:88px 7vw 62px;gap:44px}
    .md-competencies .md-hero-copy{padding-bottom:0;max-width:760px}
    .md-competencies .md-hero h1{font-size:clamp(42px,8.2vw,76px);line-height:.98;max-width:760px;text-wrap:balance;overflow-wrap:normal}
    .md-competencies .md-hero-art{height:min(58vw,500px);margin-left:0;max-width:760px}
    .md-competencies .md-hero-foot{position:relative!important;left:auto;right:auto;bottom:auto;margin-top:-8px}
    .md-competencies .md-hero-art::after{left:0}
}
@media(max-width:800px){
    .md-competencies .md-wrap{width:min(calc(100% - 38px),600px)}
    .md-competencies .md-section{padding:85px 0}
    .md-competencies .md-hero{min-height:auto;padding-top:75px}
    .md-competencies .md-hero-art{height:360px;margin:0}
    .md-competencies .md-hero-foot{position:relative!important;left:auto;right:auto;bottom:auto;margin-top:24px;font-size:8px}
    .md-competencies .md-art-note{right:12px;bottom:12px;width:110px;min-height:110px;padding:13px}
    .md-competencies .md-art-note p{font-size:15px;margin-top:18px;max-width:80px}
    .md-competencies .md-two-col{grid-template-columns:1fr;gap:44px}
    .md-competencies .md-section-head{display:block;margin-bottom:42px}
    .md-competencies .md-section-head>p{margin-top:25px}
    .md-competencies .md-timeline{grid-template-columns:1fr 1fr}
    .md-competencies .md-time{min-height:190px;padding:20px 15px}
    .md-competencies .md-time:nth-child(2){border-right:0}
    .md-competencies .md-card-grid{grid-template-columns:1fr 1fr}
    .md-competencies .md-card{min-height:250px;padding:20px 16px}
    .md-competencies .md-card h3{font-size:18px;margin:28px 0 15px}
    .md-competencies .md-credential-box{padding:28px 20px;grid-template-columns:1fr;gap:18px}
    .md-competencies .md-credential-box>span{font-size:30px}
    .md-competencies .md-step{grid-template-columns:38px 1fr;gap:13px}
    .md-competencies .md-step h3{font-size:18px}
    .md-competencies .md-step p{grid-column:2}
    .md-competencies .md-table{font-size:13px}
    .md-competencies .md-table th,.md-competencies .md-table td{padding:12px 8px}
    .md-competencies .md-table td:first-child{width:38%}
    .md-competencies summary strong{font-size:20px}
    .md-competencies details p{margin-left:0}
    .md-competencies .md-youform{padding:8px}
}
@media(max-width:600px){
    .md-competencies .md-hero{padding:72px 19px 40px;gap:34px}
    .md-competencies .md-hero h1{font-size:clamp(38px,11vw,58px)}
    .md-competencies .md-hero-art{height:360px}
    .md-competencies .md-hero-foot{font-size:8px;gap:12px;line-height:1.4}
    .md-competencies .md-hero-foot span:nth-child(2){display:none}
}
@media(prefers-reduced-motion:reduce){
    .md-competencies .md-reveal{opacity:1;transform:none;transition:none}
    .md-competencies summary i{transition:none}
}


/* =========================================================
   CREDENTIALS — SCROLL MOTION SYSTEM v1.51
   Progressive enhancement: everything remains visible if JS
   is unavailable. Motion is enabled only after JS initializes.
   ========================================================= */
.md-competencies.md-motion-enabled .md-motion-item{
    opacity:0;
    transform:translate3d(0,28px,0);
    transition:
        opacity .72s cubic-bezier(.22,.61,.36,1),
        transform .72s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--md-motion-delay,0ms);
    will-change:opacity,transform;
}

.md-competencies.md-motion-enabled .md-motion-from-left{
    transform:translate3d(-30px,0,0);
}

.md-competencies.md-motion-enabled .md-motion-from-right{
    transform:translate3d(30px,0,0);
}

.md-competencies.md-motion-enabled .md-motion-scale{
    transform:translate3d(0,18px,0) scale(.975);
}

.md-competencies.md-motion-enabled .md-motion-item.is-visible{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}

/* Existing legacy reveal classes use the same motion language. */
.md-competencies.md-motion-enabled .md-reveal{
    opacity:0;
    transform:translate3d(0,26px,0);
    transition:
        opacity .72s cubic-bezier(.22,.61,.36,1),
        transform .72s cubic-bezier(.22,.61,.36,1);
}
.md-competencies.md-motion-enabled .md-reveal.is-visible{
    opacity:1;
    transform:none;
}

/* Subtle post-reveal interaction, not a distracting animation. */
@media (hover:hover) and (pointer:fine){
    .md-competencies .md-card,
    .md-competencies .md-time,
    .md-competencies .md-credential-box,
    .md-competencies .md-step,
    .md-competencies details{
        transition:
            transform .28s var(--md-ease),
            box-shadow .28s var(--md-ease),
            background-color .28s var(--md-ease);
    }

    .md-competencies .md-card:hover,
    .md-competencies .md-time:hover,
    .md-competencies .md-step:hover{
        transform:translateY(-3px);
    }
}

@media(prefers-reduced-motion:reduce){
    .md-competencies.md-motion-enabled .md-motion-item,
    .md-competencies.md-motion-enabled .md-reveal{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }
}


/* =========================================================
   CREDENTIALS HERO — TITLE / VERTICAL LABEL COLLISION FIX v1.52
   Keep the experience label inside the image on every viewport.
   ========================================================= */

/* Give the copy and image explicit breathing room and prevent grid overflow. */
.md-competencies .md-hero{
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    column-gap:clamp(42px,4.5vw,86px);
}

.md-competencies .md-hero-copy,
.md-competencies .md-hero-art{
    min-width:0;
}

.md-competencies .md-hero-copy{
    padding-right:clamp(8px,1.5vw,28px);
}

.md-competencies .md-hero h1{
    max-width:760px;
    text-wrap:balance;
    overflow-wrap:normal;
    word-break:normal;
}

/* Replace the rotated pseudo-label with a true vertical label.
   It now sits INSIDE the photo instead of hanging into the copy column. */
.md-competencies .md-hero-art::after{
    left:14px!important;
    top:14px!important;
    right:auto!important;
    bottom:auto!important;
    transform:none!important;
    transform-origin:center!important;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    white-space:nowrap;
    max-height:calc(100% - 28px);
    padding:14px 12px!important;
    line-height:1.2!important;
    z-index:3;
}

/* Tablet: stack cleanly and keep the label contained in the image. */
@media(max-width:1000px){
    .md-competencies .md-hero{
        grid-template-columns:1fr;
        column-gap:0;
    }

    .md-competencies .md-hero-copy{
        padding-right:0;
    }

    .md-competencies .md-hero h1{
        max-width:760px;
    }

    .md-competencies .md-hero-art::after{
        left:14px!important;
        top:14px!important;
    }
}

/* Mobile: prevent any horizontal escape, including the vertical label. */
@media(max-width:600px){
    .md-competencies .md-hero{
        overflow:hidden!important;
    }

    .md-competencies .md-hero-copy,
    .md-competencies .md-hero-art{
        width:100%;
        max-width:100%;
    }

    .md-competencies .md-hero h1{
        max-width:100%;
        font-size:clamp(36px,10.5vw,54px)!important;
        line-height:.98!important;
    }

    .md-competencies .md-hero-art::after{
        left:10px!important;
        top:10px!important;
        max-height:calc(100% - 20px);
        padding:10px 9px!important;
        font-size:8px!important;
        letter-spacing:.14em!important;
    }
}