/* ============================================================================
   Homepage section identities + page-wide motion (live since 2026-11-02,
   after a /?look=wow trial). Loaded on index.html after gj-home-motion.css;
   js/gj-home-wow.js adds the progress bar, word-by-word headings, card tilt
   and the pointer light on dark bands.

   Rules start with "html " on purpose: one extra element of specificity lets
   them beat the FAQ's inline <style>, which sits later in the page body.

   Rhythm, top to bottom:
     hero light · info glass cards · blue stats (moving) · About dark
     Conditions graph-paper · Videos night · Reviews blush · Blog cream
     Appointment sky · Resources emerald · Care paper card · FAQ violet
     Clinics aurora-dark · footer
   ========================================================================== */

/* ---------- reading-progress bar ------------------------------------------- */
.gj-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100000;
    transform-origin: 0 50%;
    transform: scaleX(var(--gj-p, 0));
    background: linear-gradient(90deg, #2563eb, #14b8a6, #f59e0b, #ec4899);
    box-shadow: 0 0 12px rgba(37,99,235,.5);
    pointer-events: none;
}

/* ---------- headings rise word by word -------------------------------------- */
html .gj-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(.55em) rotate(2deg);
    transition: opacity .6s ease, transform .8s cubic-bezier(.2,1,.3,1);
    transition-delay: calc(var(--i) * 70ms + 150ms);
}
html .gj-in .gj-word,
html .gj-word.gj-word-in { opacity: 1; transform: none; }

/* ---------- card tilt (pointer devices only; JS sets the angles) ------------- */
html .gj-tilt {
    transition: transform .25s ease-out, box-shadow .25s ease-out;
    transform-style: preserve-3d;
}
html .gj-tilt.gj-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) !important;
    box-shadow: 0 26px 50px -18px rgba(15,23,42,.35) !important;
    transition: transform .08s linear, box-shadow .25s ease-out;
}

/* ---------- quick info: glass cards with colour icons ------------------------ */
html .quick-info {
    background: linear-gradient(180deg, #eef6ff 0%, #fff 100%);
}
html .info-card {
    position: relative;
    background: rgba(255,255,255,.75);
    border: 1px solid rgba(37,99,235,.12);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    box-shadow: 0 14px 34px -18px rgba(15,23,42,.3);
    overflow: hidden;
}
html .info-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 4px;
    background: var(--gj-accent, #2563eb);
}
html .info-card i {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    color: #fff;
    border-radius: 18px;
    background: var(--gj-accent, #2563eb);
    box-shadow: 0 12px 24px -10px var(--gj-accent, #2563eb);
}
html .info-card:hover i { transform: rotate(-8deg) scale(1.08); }
html .info-card:nth-child(1) { --gj-accent: linear-gradient(135deg, #2563eb, #60a5fa); }
html .info-card:nth-child(2) { --gj-accent: linear-gradient(135deg, #0d9488, #2dd4bf); }
html .info-card:nth-child(3) { --gj-accent: linear-gradient(135deg, #e11d48, #fb7185); }
html .info-card:nth-child(4) { --gj-accent: linear-gradient(135deg, #d97706, #fbbf24); }

/* ---------- stats bar: slowly moving gradient + sheen ------------------------ */
html .stats-bar {
    position: relative;
    overflow: hidden;
    background: linear-gradient(110deg, #0b3a8f, #1d4ed8, #0d9488, #1d4ed8, #0b3a8f) !important;
    background-size: 300% 100% !important;
    animation: wowFlow 14s ease-in-out infinite;
}
html .stats-bar::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -30%;
    width: 25%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.18), transparent);
    transform: skewX(-20deg);
    animation: wowSheen 6s ease-in-out 1s infinite;
    pointer-events: none;
}
@keyframes wowFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes wowSheen { 0% { left: -30%; } 45%, 100% { left: 120%; } }

/* ---------- Conditions: graph paper, colour-coded cards ---------------------- */
html .conditions-section#conditions {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0) 0%, #fff 75%),
        linear-gradient(rgba(37,99,235,.07) 1px, transparent 1px) 0 0 / 32px 32px,
        linear-gradient(90deg, rgba(37,99,235,.07) 1px, transparent 1px) 0 0 / 32px 32px,
        #fbfdff;
}
html .condition-tabs {
    display: inline-flex;
    padding: 6px;
    gap: 6px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 10px 30px -14px rgba(15,23,42,.3), inset 0 0 0 1px #e2e8f0;
}
html #conditions .condition-tabs { left: 50%; position: relative; transform: translateX(-50%); }
html .tab-btn { border-radius: 999px; }
html .condition-card {
    border: 1px solid #e6edf7;
    border-radius: 22px;
    box-shadow: 0 10px 30px -20px rgba(15,23,42,.35);
}
/* colour bar drawn as a background layer: the card's ::after is already its
   blue hover overlay (the text turns white on hover), which stays */
html .condition-card {
    background: var(--gj-c, linear-gradient(90deg, #2563eb, #60a5fa)) 0 0 / 30% 5px no-repeat, #fff;
    transition: background-size .5s cubic-bezier(.2,1,.3,1), transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s ease;
}
html .condition-card:hover { background-size: 100% 5px, auto; }
html .conditions-grid > :nth-child(5n+1) { --gj-c: linear-gradient(90deg, #2563eb, #60a5fa); }
html .conditions-grid > :nth-child(5n+2) { --gj-c: linear-gradient(90deg, #0d9488, #2dd4bf); }
html .conditions-grid > :nth-child(5n+3) { --gj-c: linear-gradient(90deg, #7c3aed, #c084fc); }
html .conditions-grid > :nth-child(5n+4) { --gj-c: linear-gradient(90deg, #d97706, #fbbf24); }
html .conditions-grid > :nth-child(5n+5) { --gj-c: linear-gradient(90deg, #e11d48, #fb7185); }

/* ---------- Reviews: blush band, pinned-note cards, giant quote -------------- */
html .testimonials-section#testimonials {
    background:
        radial-gradient(ellipse at 10% 20%, rgba(244,114,182,.16), transparent 45%),
        radial-gradient(ellipse at 90% 80%, rgba(167,139,250,.18), transparent 45%),
        linear-gradient(180deg, #fff7fb 0%, #f7f3ff 100%);
    overflow: hidden;
}
html #testimonials .container { position: relative; }
html #testimonials .container::before {
    content: '\201C';
    position: absolute;
    left: -10px;
    top: -60px;
    font: 700 22rem/1 'Playfair Display', Georgia, serif;
    color: rgba(236,72,153,.08);
    pointer-events: none;
    z-index: 0;
}
html #testimonials .gj-chap { color: #db2777; }
html #testimonials .section-subtitle { color: #db2777; }
html #testimonials .section-title::after { background: linear-gradient(90deg, #ec4899, #a78bfa); }
html #testimonials .gj-ghost { color: rgba(219,39,119,.07); }
html #homeReviewExcerpts { position: relative; z-index: 1; gap: 1.6rem !important; }
html #homeReviewExcerpts > blockquote {
    position: relative;
    border: 0 !important;
    border-radius: 20px !important;
    padding: 1.6rem 1.5rem 1.3rem !important;
    box-shadow: 0 22px 44px -24px rgba(131,24,67,.45) !important;
    transition: transform .4s cubic-bezier(.2,1,.3,1), box-shadow .4s ease;
}
html #homeReviewExcerpts > blockquote:nth-child(3n+1) { transform: rotate(-1.4deg); }
html #homeReviewExcerpts > blockquote:nth-child(3n+2) { transform: rotate(1deg) translateY(10px); }
html #homeReviewExcerpts > blockquote:nth-child(3n+3) { transform: rotate(-.6deg); }
html #homeReviewExcerpts > blockquote:hover { transform: rotate(0) translateY(-6px); }
html #homeReviewExcerpts > blockquote::before {
    content: '';
    position: absolute;
    top: -9px;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fda4af, #e11d48);
    box-shadow: 0 4px 8px rgba(225,29,72,.4);
}

/* ---------- Resources: emerald band with a heartbeat line -------------------- */
html .resources-section#resources {
    background:
        radial-gradient(600px circle at var(--mx, 70%) var(--my, 20%), rgba(52,211,153,.18), transparent 60%),
        linear-gradient(180deg, #053d30 0%, #065f46 100%);
    z-index: 2;
    overflow: visible;
}
html #resources .section-subtitle,
html #resources .gj-chap { color: #6ee7b7; }
html #resources .section-title { color: #fff; }
html #resources .section-title::after { background: linear-gradient(90deg, #34d399, #a7f3d0); }
html #resources .section-description { color: rgba(236,253,245,.8); }
html #resources .gj-ghost { color: rgba(255,255,255,.06); }
html #resources .section-header::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--gj-title-mid, 50%) - 35px);
    width: 100vw;
    height: 70px;
    transform: translateX(-50%);
    z-index: -1;
    opacity: .35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70'%3E%3Cpath d='M0 35h120l12-18 14 40 16-58 14 52 10-16h214' fill='none' stroke='%236ee7b7' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0 / 400px 70px;
    animation: wowPulse 6s linear infinite;
    -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
            mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
@keyframes wowPulse { to { background-position: 400px 0; } }
html #resources::after { display: none; }
html #resources::before,
html #resources::after {
    content: '';
    display: block;
    position: absolute;
    left: 0; right: 0;
    width: auto;
    height: 46px;
    transform: none;
    background-repeat: repeat-x;
    background-size: 1200px 46px;
    pointer-events: none;
    animation: gjWaveDrift 40s linear infinite;
}
html #resources::before {
    bottom: calc(100% - 1px);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V24C200 4 400 4 600 22S1000 42 1200 24V46Z' fill='%23053d30'/%3E%3C/svg%3E");
}
html #resources::after {
    top: calc(100% - 1px);
    animation-direction: reverse;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 0V18C150 40 300 40 450 26S750 2 900 16 1100 40 1200 18V0Z' fill='%23065f46'/%3E%3C/svg%3E");
}
html .resource-card { border-radius: 22px; }

/* ---------- Care: an editorial paper card ------------------------------------ */
html .ortho-info#orthopedic-doctor-indore {
    background:
        repeating-linear-gradient(135deg, rgba(15,23,42,.018) 0 2px, transparent 2px 9px),
        #f3f5f9;
    padding-top: 6rem !important;
    padding-bottom: 5rem !important;
}
html #orthopedic-doctor-indore::after { display: none; }
html #orthopedic-doctor-indore > div {
    position: relative;
    background: #fff;
    border-radius: 28px;
    padding: 3.2rem 3.4rem;
    box-shadow: 0 40px 80px -40px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.04);
}
html #orthopedic-doctor-indore > div::before {
    content: '';
    position: absolute;
    left: 3.4rem; right: 3.4rem; top: 0;
    height: 5px;
    border-radius: 0 0 6px 6px;
    background: linear-gradient(90deg, #2563eb, #14b8a6, #f59e0b);
}
html #orthopedic-doctor-indore .ortho-body > p:first-of-type::first-letter {
    float: left;
    margin: .35rem .6rem 0 0;
    font: 700 3.6rem/.8 'Playfair Display', Georgia, serif;
    color: #2563eb;
}

/* ---------- FAQ: violet, numbered --------------------------------------------- */
html .faq-section#faq {
    background:
        radial-gradient(ellipse at 15% 10%, rgba(139,92,246,.14), transparent 45%),
        radial-gradient(ellipse at 85% 90%, rgba(59,130,246,.12), transparent 45%),
        #f6f4ff;
}
html #faq .gj-chap,
html #faq .section-subtitle { color: #7c3aed; }
html #faq .section-title::after { background: linear-gradient(90deg, #7c3aed, #3b82f6); }
html #faq .gj-ghost { color: rgba(124,58,237,.07); }
html .faq-section .faq-list { counter-reset: faq; }
html .faq-section .faq-item {
    counter-increment: faq;
    border-radius: 16px;
    border-color: #e9e5ff;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    position: relative;
    overflow: hidden;
}
html .faq-section .faq-item:hover { transform: translateX(6px); box-shadow: 0 12px 30px -16px rgba(91,33,182,.4); }
html .faq-section .faq-item[open] { border-color: #c4b5fd; }
html .faq-section .faq-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #7c3aed, #3b82f6);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s ease;
}
html .faq-section .faq-item[open]::before,
html .faq-section .faq-item:hover::before { transform: scaleY(1); }
html .faq-section .faq-item > summary { justify-content: flex-start; }
html .faq-section .faq-item > summary::before {
    content: counter(faq, decimal-leading-zero);
    flex: 0 0 auto;
    min-width: 2.2rem;
    font: 700 1.25rem/1 'Playfair Display', Georgia, serif;
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
html .faq-section .faq-chev { margin-left: auto; }
html .faq-section .faq-item[open] .faq-chev { color: #7c3aed; }

/* ---------- Clinics: dark aurora --------------------------------------------- */
html .locations-section#contact {
    background:
        radial-gradient(600px circle at var(--mx, 30%) var(--my, 30%), rgba(96,165,250,.16), transparent 60%),
        radial-gradient(ellipse at 15% 20%, rgba(20,184,166,.28), transparent 45%),
        radial-gradient(ellipse at 85% 30%, rgba(139,92,246,.28), transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(37,99,235,.35), transparent 55%),
        #0b1220;
    background-size: auto, 160% 160%, 160% 160%, auto, auto;
    animation: wowAurora 18s ease-in-out infinite alternate;
    z-index: 2;
    overflow: visible;
}
@keyframes wowAurora {
    from { background-position: 0 0, 0% 0%, 100% 0%, 0 0, 0 0; }
    to   { background-position: 0 0, 40% 30%, 60% 40%, 0 0, 0 0; }
}
html #contact .gj-chap,
html #contact .section-subtitle { color: #93c5fd; }
html #contact .section-title { color: #fff; }
html #contact .gj-ghost { color: rgba(255,255,255,.05); }
html #contact::after { display: none; }
html #contact::before {
    content: '';
    display: block;
    position: absolute;
    left: 0; right: 0;
    bottom: calc(100% - 1px);
    height: 46px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V22C150 4 300 4 450 18S750 44 900 30 1100 6 1200 22V46Z' fill='%230b1220'/%3E%3C/svg%3E") repeat-x 0 0 / 1200px 46px;
    animation: gjWaveDrift 40s linear infinite;
    pointer-events: none;
}
html .location-card {
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(0,0,0,.7);
}

/* ---------- spotlight on dark bands ----------------------------------------- */
html .video-section#videos {
    background:
        radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(96,165,250,.16), transparent 60%),
        radial-gradient(ellipse at 20% 35%, rgba(59,130,246,.22), transparent 50%),
        linear-gradient(180deg, #0f1b3d 0%, #13234d 100%);
}

/* ---------- phones ----------------------------------------------------------- */
@media (max-width: 600px) {
    html #testimonials .container::before { font-size: 12rem; top: -30px; }
    html #homeReviewExcerpts > blockquote:nth-child(n) { transform: none; }
    html #orthopedic-doctor-indore > div { padding: 2rem 1.3rem; border-radius: 20px; }
    html #orthopedic-doctor-indore > div::before { left: 1.3rem; right: 1.3rem; }
    html #resources::before, html #resources::after,
    html #contact::before { height: 26px; background-size: 700px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    html .stats-bar, html .stats-bar::after,
    html #resources .section-header::before,
    html .locations-section#contact { animation: none; }
    html .gj-word { opacity: 1; transform: none; transition: none; }
}

/* ---------- illustrations beside section headings ---------------------------- */
/* Watercolour pictures with their white cut away (assets/images/art), each in
   a <span class="gj-art"> so it can carry two layers behind it:
     ::before  light rays (a striped conic gradient, faded at the rim, turning)
     ::after   a soft glow — or, with .gj-art-plate, a white disc
   On wide screens they sit beside the centred heading; narrower, above it. */
html .section-header .gj-art {
    --ray: rgba(37,99,235,.11);
    --glow: rgba(191,219,254,.75);
    position: absolute;
    top: 50%;
    width: 210px;
    display: grid;
    place-items: center;
    isolation: isolate;
    z-index: 1;
    pointer-events: none;
    transform: translateY(var(--gj-art-y, -50%));
    animation: gjArtFloat 7s ease-in-out infinite;
}
html .section-header .gj-art-right { right: 0; }
html .section-header .gj-art-left { left: 0; animation-delay: -3.5s; }
html .gj-art-img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 22px rgba(15,23,42,.16));
}
html .gj-art::before,
html .gj-step-art::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 175%;
    aspect-ratio: 1;
    z-index: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, var(--ray) 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(circle, #000 22%, transparent 66%);
            mask: radial-gradient(circle, #000 22%, transparent 66%);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: gjRays 48s linear infinite;
}
html .gj-art::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 115%;
    aspect-ratio: 1;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
    transform: translate(-50%, -50%);
    animation: gjGlow 5s ease-in-out infinite;
}
@keyframes gjRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes gjGlow {
    0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.94); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes gjArtFloat {
    0%, 100% { transform: translateY(var(--gj-art-y, -50%)); }
    50%      { transform: translateY(calc(var(--gj-art-y, -50%) - 10px)); }
}

/* white disc version: the picture sits inside a plate, rays fan out round it */
html .section-header .gj-art-plate { width: 230px; height: 230px; }
html .gj-art-plate::after {
    width: 100%;
    background: radial-gradient(circle, #fff 62%, var(--plate-rim, #f1f5ff) 100%);
    box-shadow: 0 0 0 8px var(--ray), 0 24px 50px -18px rgba(15,23,42,.45);
    animation: none;
}
html .gj-art-plate .gj-art-img {
    width: auto;
    max-width: 74%;
    max-height: 80%;
    filter: none;
}

/* per-section colours */
html #conditions .gj-art { --ray: rgba(37,99,235,.12); --glow: rgba(191,219,254,.8); }
html #testimonials .gj-art { --ray: rgba(236,72,153,.13); --glow: rgba(251,207,232,.85); }
html #appointment .gj-art { --ray: rgba(14,165,233,.14); --glow: rgba(255,255,255,.85); }
html #resources .gj-art { --ray: rgba(167,243,208,.2); --plate-rim: #ecfdf5; }
html #faq .gj-art { --ray: rgba(124,58,237,.13); --plate-rim: #f3efff; }

/* sizes and spots per section */
/* tall anatomy sketch: hangs from the header top, clear of the tabs */
html #conditions .section-header .gj-art { width: 130px; top: -24px; --gj-art-y: 0px; }
/* tall picture: hang it from the header's top, or the heads disappear
   behind the Videos wave above */
html #testimonials .section-header .gj-art { width: 138px; top: -30px; --gj-art-y: 0px; }
html #appointment .section-header .gj-art { width: 230px; }
/* the FAQ column is narrow: its plate sits outside it, left of the list */
html #faq .section-header .gj-art { left: -270px; width: 205px; height: 205px; --gj-art-y: -32%; }

/* when a picture sits above a heading, it goes first, above the "09 · …"
   label that the motion script inserts at the top of the header */
@media (max-width: 1440px) {
    html #faq .section-header { display: flex; flex-direction: column; align-items: center; }
    html #faq .section-header .gj-art {
        order: -1;
        position: relative;
        top: auto; left: auto; right: auto;   /* relative, not static: the disc and rays are measured from this box */
        width: 190px;
        height: 190px;
        margin: 10px auto 26px;
        transform: none;
        animation: none;
    }
}
@media (max-width: 1100px) {
    html .section-header:has(.gj-art) { display: flex; flex-direction: column; align-items: center; }
    html .section-header .gj-art,
    html #testimonials .section-header .gj-art,
    html #appointment .section-header .gj-art {
        order: -1;
        position: relative;
        top: auto; left: auto; right: auto;   /* relative, not static: the disc and rays are measured from this box */
        width: 170px;
        margin: 10px auto 22px;
        transform: none;
        animation: none;
    }
    html #conditions .section-header .gj-art { width: 104px; }
    html .section-header .gj-art-plate { width: 170px; height: 170px; }
}
@media (prefers-reduced-motion: reduce) {
    html .section-header .gj-art, html .gj-art::before, html .gj-art::after,
    html .gj-step-art::before { animation: none; }
}

/* ---------- Clubfoot journey: five steps on a dotted path -------------------- */
html .journey-section#clubfoot-journey {
    position: relative;
    padding: 5rem 0 4.5rem;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(251,146,60,.14), transparent 50%),
        radial-gradient(ellipse at 85% 100%, rgba(59,130,246,.10), transparent 50%),
        linear-gradient(180deg, #fff7ef 0%, #fffaf5 100%);
}
html #clubfoot-journey .section-subtitle,
html #clubfoot-journey .gj-chap { color: #c2410c; }
html #clubfoot-journey .section-title::after { background: linear-gradient(90deg, #fb923c, #f59e0b); }
html #clubfoot-journey .gj-ghost { color: rgba(194,65,12,.07); }
html .gj-journey {
    position: relative;
    list-style: none;
    margin: 3rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.4rem;
    counter-reset: none;
}
/* the dotted path behind the picture discs */
html .gj-journey::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 85px;
    border-top: 3px dashed rgba(251,146,60,.55);
    z-index: 0;
}
html .gj-step {
    position: relative;
    z-index: 1;
    text-align: center;
}
html .gj-step-art {
    --ray: rgba(251,146,60,.16);
    position: relative;
    isolation: isolate;
    width: 170px;
    height: 170px;
    margin: 0 auto;
    display: grid;
    place-items: center;
    transition: transform .4s cubic-bezier(.2,1.4,.4,1);
}
/* the white disc; the turning rays are ::before (shared with .gj-art above) */
html .gj-step-art::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 64%, #ffedd5 100%);
    box-shadow: 0 0 0 6px rgba(251,146,60,.12), 0 20px 40px -20px rgba(154,52,18,.45);
}
html .gj-step:hover .gj-step-art { transform: translateY(-6px) scale(1.04); }
html .gj-step-art img {
    position: relative;
    z-index: 2;
    max-width: 78%;
    max-height: 82%;
    width: auto;
    height: auto;
    object-fit: contain;
}
html .gj-step-no {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin: -18px auto 10px;
    position: relative;
    border-radius: 50%;
    font: 700 1rem/1 'Playfair Display', Georgia, serif;
    color: #fff;
    background: linear-gradient(135deg, #f97316, #f59e0b);
    box-shadow: 0 6px 14px -4px rgba(234,88,12,.6), 0 0 0 4px #fff7ef;
}
html .gj-step h3 {
    font-size: 1.08rem;
    margin: 0 0 .45rem;
    color: #1e293b;
}
html .gj-step p {
    font-size: .9rem;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}
html .gj-step:last-child .gj-step-art { --ray: rgba(34,197,94,.16); }
html .gj-step:last-child .gj-step-art::after {
    background: radial-gradient(circle, #fff 64%, #dcfce7 100%);
    box-shadow: 0 0 0 6px rgba(34,197,94,.14), 0 20px 40px -20px rgba(21,128,61,.45);
}
html .gj-step:last-child .gj-step-no { background: linear-gradient(135deg, #16a34a, #4ade80); }
html .gj-journey-cta { text-align: center; margin-top: 2.6rem; }

/* tablets: 3 + 2 */
@media (max-width: 1024px) {
    html .gj-journey { grid-template-columns: repeat(6, 1fr); row-gap: 2.4rem; }
    html .gj-step { grid-column: span 2; }
    html .gj-step:nth-child(4) { grid-column: 2 / span 2; }
    html .gj-journey::before { display: none; }
}
/* phones: a vertical timeline, picture left, words right */
@media (max-width: 640px) {
    html .gj-journey { grid-template-columns: 1fr; row-gap: 1.6rem; }
    html .gj-step,
    html .gj-step:nth-child(4) {
        grid-column: auto;
        display: grid;
        grid-template-columns: 104px 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 1rem;
        text-align: left;
        align-items: start;
    }
    html .gj-step-art { width: 104px; height: 104px; grid-row: 1 / span 3; }
    html .gj-step-no { width: 28px; height: 28px; margin: 0 0 .3rem; font-size: .9rem; }
    html .gj-journey::before {
        display: block;
        left: 52px;
        right: auto;
        top: 52px;
        bottom: 52px;
        border-top: 0;
        border-left: 3px dashed rgba(251,146,60,.55);
    }
}


/* ---------- moving line motifs behind headings -------------------------------- */
/* Same idea as the Resources heartbeat line: a faint pattern strip across the
   whole width behind each heading, faded at both ends, drifting sideways.
   Each section has its own motif: About a DNA helix, Conditions a spine,
   Journey footprints, Videos a sound wave, Reviews stars, Blog a handwriting
   line, Appointment a timeline, FAQ question marks, Clinics a map route. */
html #about .section-header::before,
html #conditions .section-header::before,
html #clubfoot-journey .section-header::before,
html #videos .section-header::before,
html #testimonials .section-header::before,
html #blog .section-header::before,
html #appointment .section-header::before,
html #faq .section-header::before,
html #contact .section-header::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(var(--gj-title-mid, 50%) - 35px);   /* centred on the heading line (set by gj-home-motion.js) */
    width: 100vw;
    height: 70px;
    transform: translateX(-50%);
    z-index: -1;
    pointer-events: none;
    background-repeat: repeat-x;
    -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
            mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
html #about .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70'%3E%3Cg fill='none' stroke='%2393c5fd' stroke-width='2'%3E%3Cpath d='M0 35 C30 5 60 5 90 35 S150 65 180 35 S240 5 240 35'/%3E%3Cpath d='M0 35 C30 65 60 65 90 35 S150 5 180 35 S240 65 240 35'/%3E%3C/g%3E%3Cg stroke='%2393c5fd' stroke-width='1.5' opacity='.7'%3E%3Cline x1='15' y1='22' x2='15' y2='48'/%3E%3Cline x1='45' y1='18' x2='45' y2='52'/%3E%3Cline x1='75' y1='22' x2='75' y2='48'/%3E%3Cline x1='105' y1='18' x2='105' y2='52'/%3E%3Cline x1='135' y1='22' x2='135' y2='48'/%3E%3Cline x1='165' y1='18' x2='165' y2='52'/%3E%3Cline x1='195' y1='22' x2='195' y2='48'/%3E%3Cline x1='225' y1='18' x2='225' y2='52'/%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 70px; opacity: .3; animation: gjLineAbout 50s linear infinite; }
html #conditions .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 70'%3E%3Cg fill='none' stroke='%232563eb' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M0 35H14M50 35H64'/%3E%3Crect x='14' y='24' width='36' height='22' rx='8'/%3E%3Cpath d='M24 24 L20 12 M40 24 L44 12 M32 46 V58'/%3E%3C/g%3E%3C/svg%3E"); background-size: 64px 70px; opacity: .22; animation: gjLineConditions 40s linear infinite; }
html #clubfoot-journey .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 70'%3E%3Cg fill='%23fb923c'%3E%3Cellipse cx='40' cy='24' rx='7' ry='12' transform='rotate%2880 40 24%29'/%3E%3Ccircle cx='52' cy='17' r='2.6'/%3E%3Ccircle cx='54' cy='22' r='2.2'/%3E%3Ccircle cx='54' cy='27' r='2'/%3E%3Cellipse cx='120' cy='46' rx='7' ry='12' transform='rotate%28100 120 46%29'/%3E%3Ccircle cx='132' cy='53' r='2.6'/%3E%3Ccircle cx='134' cy='48' r='2.2'/%3E%3Ccircle cx='134' cy='43' r='2'/%3E%3C/g%3E%3C/svg%3E"); background-size: 180px 70px; opacity: .3; animation: gjLineClubfootJourney 30s linear infinite; }
html #videos .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 70'%3E%3Cg fill='%2393c5fd'%3E%3Crect x='8' y='30.0' width='6' height='10' rx='3'/%3E%3Crect x='24' y='24.0' width='6' height='22' rx='3'/%3E%3Crect x='40' y='17.0' width='6' height='36' rx='3'/%3E%3Crect x='56' y='26.0' width='6' height='18' rx='3'/%3E%3Crect x='72' y='11.0' width='6' height='48' rx='3'/%3E%3Crect x='88' y='21.0' width='6' height='28' rx='3'/%3E%3Crect x='104' y='28.0' width='6' height='14' rx='3'/%3E%3Crect x='120' y='15.0' width='6' height='40' rx='3'/%3E%3Crect x='136' y='23.0' width='6' height='24' rx='3'/%3E%3Crect x='152' y='9.0' width='6' height='52' rx='3'/%3E%3Crect x='168' y='27.0' width='6' height='16' rx='3'/%3E%3Crect x='184' y='20.0' width='6' height='30' rx='3'/%3E%3Crect x='200' y='13.0' width='6' height='44' rx='3'/%3E%3Crect x='216' y='25.0' width='6' height='20' rx='3'/%3E%3Crect x='232' y='29.0' width='6' height='12' rx='3'/%3E%3Crect x='248' y='18.0' width='6' height='34' rx='3'/%3E%3Crect x='264' y='22.0' width='6' height='26' rx='3'/%3E%3Crect x='280' y='31.0' width='6' height='8' rx='3'/%3E%3Crect x='296' y='16.0' width='6' height='38' rx='3'/%3E%3Crect x='312' y='24.0' width='6' height='22' rx='3'/%3E%3Crect x='328' y='12.0' width='6' height='46' rx='3'/%3E%3Crect x='344' y='26.0' width='6' height='18' rx='3'/%3E%3Crect x='360' y='20.0' width='6' height='30' rx='3'/%3E%3Crect x='376' y='28.0' width='6' height='14' rx='3'/%3E%3Crect x='392' y='30.0' width='6' height='10' rx='3'/%3E%3C/g%3E%3C/svg%3E"); background-size: 400px 70px; opacity: .28; animation: gjLineVideos 45s linear infinite reverse; }
html #testimonials .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70'%3E%3Cg fill='%23ec4899'%3E%3Cpolygon points='30.0%2C15.0 27.6%2C20.7 21.4%2C21.2 26.1%2C25.3 24.7%2C31.3 30.0%2C28.1 35.3%2C31.3 33.9%2C25.3 38.6%2C21.2 32.4%2C20.7'/%3E%3Cpolygon points='95.0%2C40.0 93.4%2C43.8 89.3%2C44.1 92.4%2C46.8 91.5%2C50.9 95.0%2C48.7 98.5%2C50.9 97.6%2C46.8 100.7%2C44.1 96.6%2C43.8'/%3E%3Cpolygon points='150.0%2C15.0 148.7%2C18.2 145.2%2C18.5 147.9%2C20.7 147.1%2C24.0 150.0%2C22.2 152.9%2C24.0 152.1%2C20.7 154.8%2C18.5 151.3%2C18.2'/%3E%3Cpolygon points='200.0%2C34.0 197.4%2C40.4 190.5%2C40.9 195.7%2C45.4 194.1%2C52.1 200.0%2C48.5 205.9%2C52.1 204.3%2C45.4 209.5%2C40.9 202.6%2C40.4'/%3E%3C/g%3E%3Cg fill='none' stroke='%23ec4899' stroke-width='1.5' stroke-dasharray='2 6'%3E%3Cpath d='M0 35 Q60 10 120 35 T240 35'/%3E%3C/g%3E%3C/svg%3E"); background-size: 240px 70px; opacity: .3; animation: gjLineTestimonials 55s linear infinite; }
html #blog .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70'%3E%3Cpath d='M0 42 C20 42 25 18 40 22 S50 48 62 40 S78 14 92 24 S100 50 116 40 S134 20 150 30 S170 44 186 34 S204 16 220 28 S236 46 252 36 S278 30 300 42' fill='none' stroke='%23f59e0b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 300px 70px; opacity: .35; animation: gjLineBlog 50s linear infinite reverse; }
html #appointment .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 70'%3E%3Cg stroke='%230ea5e9' stroke-width='2' fill='none'%3E%3Cpath d='M0 35H120'/%3E%3Cpath d='M30 27V43M90 27V43' opacity='.6'/%3E%3C/g%3E%3Ccircle cx='60' cy='35' r='7' fill='none' stroke='%230ea5e9' stroke-width='2'/%3E%3Ccircle cx='60' cy='35' r='2.5' fill='%230ea5e9'/%3E%3C/svg%3E"); background-size: 120px 70px; opacity: .3; animation: gjLineAppointment 35s linear infinite; }
html #faq .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 70'%3E%3Cg fill='%237c3aed' font-family='Georgia%2Cserif' font-weight='700'%3E%3Ctext x='20' y='34' font-size='26'%3E%3F%3C/text%3E%3Ctext x='80' y='58' font-size='18'%3E%3F%3C/text%3E%3Ctext x='130' y='30' font-size='14'%3E%3F%3C/text%3E%3Ctext x='175' y='54' font-size='24'%3E%3F%3C/text%3E%3C/g%3E%3Cpath d='M0 40 Q55 20 110 40 T220 40' fill='none' stroke='%237c3aed' stroke-width='1.5' stroke-dasharray='3 7'/%3E%3C/svg%3E"); background-size: 220px 70px; opacity: .25; animation: gjLineFaq 60s linear infinite reverse; }
html #contact .section-header::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 70'%3E%3Cpath d='M0 50 C50 50 60 20 100 22 S170 52 210 46 S270 24 300 50' fill='none' stroke='%2393c5fd' stroke-width='2' stroke-dasharray='6 6'/%3E%3Cpath d='M100 4c-6 0-10 4.5-10 10 0 7 10 16 10 16s10-9 10-16c0-5.5-4-10-10-10z' fill='%2393c5fd'/%3E%3Ccircle cx='100' cy='14' r='3.5' fill='%230b1220'/%3E%3Cpath d='M210 28c-6 0-10 4.5-10 10 0 7 10 16 10 16s10-9 10-16c0-5.5-4-10-10-10z' fill='%2393c5fd'/%3E%3Ccircle cx='210' cy='38' r='3.5' fill='%230b1220'/%3E%3C/svg%3E"); background-size: 300px 70px; opacity: .35; animation: gjLineContact 55s linear infinite; }
@keyframes gjLineAbout { to { background-position: 960px 0; } }
@keyframes gjLineConditions { to { background-position: 256px 0; } }
@keyframes gjLineClubfootJourney { to { background-position: 720px 0; } }
@keyframes gjLineVideos { to { background-position: 1600px 0; } }
@keyframes gjLineTestimonials { to { background-position: 960px 0; } }
@keyframes gjLineBlog { to { background-position: 1200px 0; } }
@keyframes gjLineAppointment { to { background-position: 480px 0; } }
@keyframes gjLineFaq { to { background-position: 880px 0; } }
@keyframes gjLineContact { to { background-position: 1200px 0; } }
@media (prefers-reduced-motion: reduce) {
    html #about .section-header::before,
    html #conditions .section-header::before,
    html #clubfoot-journey .section-header::before,
    html #videos .section-header::before,
    html #testimonials .section-header::before,
    html #blog .section-header::before,
    html #appointment .section-header::before,
    html #faq .section-header::before,
    html #contact .section-header::before { animation: none; }
}

/* ---------- Videos section player (js/gj-videos.js) ------------------------- */
/* The newest upload large, the next four as thumbnails under it. A thumbnail
   with a play button stands in until it is pressed; then the YouTube player
   (youtube-nocookie) loads in its place. */
html #videos .gj-videos {
    display: block;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}
html .gj-video-main { margin-bottom: 1.6rem; }
html .gj-video-frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 0 0 1px rgba(147,197,253,.18), 0 40px 80px -30px rgba(0,0,0,.8), 0 0 80px -20px rgba(59,130,246,.45);
}
html .gj-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
html .gj-video-poster { cursor: pointer; }
html .gj-video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,1,.3,1), filter .4s ease;
    filter: brightness(.85);
}
html .gj-video-poster:hover img { transform: scale(1.04); filter: brightness(1); }
html .gj-video-play {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 84px;
    height: 84px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(255,255,255,.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%231d4ed8'/%3E%3C/svg%3E") 56% 50% / 38px no-repeat;
    box-shadow: 0 0 0 0 rgba(255,255,255,.6);
    animation: gjPlayPulse 2.2s ease-out infinite;
}
html .gj-video-play-sm { width: 46px; height: 46px; background-size: 22px; animation: none; }
@keyframes gjPlayPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
    100% { box-shadow: 0 0 0 26px rgba(255,255,255,0); }
}
html .gj-video-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem 1rem;
    margin-top: 1rem;
    color: #e2e8f0;
}
html .gj-video-caption h3 { margin: 0; font-size: 1.2rem; color: #fff; }
html .gj-video-caption span { font-size: .9rem; color: #93c5fd; }
html .gj-video-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
html .gj-video-item {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
    color: #cbd5e1;
    font: inherit;
}
html .gj-video-thumb {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(147,197,253,.15), 0 16px 30px -18px rgba(0,0,0,.8);
}
html .gj-video-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
html .gj-video-item:hover .gj-video-thumb img { transform: scale(1.06); }
html .gj-video-item-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: .55rem;
    font-size: .88rem;
    line-height: 1.45;
}
html .gj-video-item:hover .gj-video-item-title { color: #fff; }
/* without JS, or if the feed cannot be read: a plain link to the channel */
html .gj-video-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    padding: 2.4rem 1rem;
    border-radius: 20px;
    border: 1px dashed rgba(147,197,253,.4);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
html .gj-video-fallback i { font-size: 2rem; color: #ef4444; }
@media (max-width: 768px) {
    html .gj-video-list { grid-template-columns: repeat(2, 1fr); }
    html .gj-video-play:not(.gj-video-play-sm) { width: 64px; height: 64px; background-size: 30px; }
    html .gj-video-play-sm { width: 38px; height: 38px; background-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    html .gj-video-play { animation: none; }
}