<!--
  ============================================================================
  CELES GLOBAL — Clinics (B2B)
  ----------------------------------------------------------------------------
  A product page for Celes Clinic OS, written for dermatologists and clinic
  staff who have come to find out what the software is and how it works.
  Informational throughout: it describes rather than persuades, and there is no
  statistic, metric or testimonial anywhere on it that is not a plain statement
  of what a feature does.

  THE PRODUCT IS CALLED CLINIC OS. Full name — "Celes Clinic Operating System"
  — on first mention in a section; "Clinic OS" everywhere after that and in all
  running copy. The three-letter content-management acronym this page used to
  use appears nowhere in the markup, the comments, the stylesheet or the
  script, and must not come back: it named a category this product is not.

  STRUCTURE — and the rhythm is the structure. Text+media, then cards, then
  media, then a list: no two card grids sit against each other without a change
  of surface or a piece of real footage between them.

    1  Nav
    2  Hero .............. the tilted-card plane, full viewport, copy over it
    3  Platform .......... pinned split: one photo, three sentences, no cards
    4  Modules ........... pinned: statement → six cards, one line each
    5  Media break ....... pinned split: the portrait clip beside the statement
    6  Automation ........ pinned: two marquee tracks, opposite directions
    7  How the sync works  pinned: four steps drawn on one rail
    8  Onboarding ........ pinned: statement → three cards
    9  Closing ........... pinned: statement → scheduler, then the footer

  THERE IS NO PILLARS SECTION. A pinned "the practice layer / every practice
  touchpoint in one place" statement followed by three cards — unified patient
  record, automated insight digests, appointments that arrive briefed — sat
  between §3 and §4 and was deleted on request. All three cards restated
  modules that §4 names properly, so the page made the same argument twice and
  spent a pinned screen doing it. Its ambient tag layer was the one thing worth
  keeping and moved into §4's statement, which is now the only section on the
  page carrying one.

  THERE IS NO ROADMAP BLOCK. An "in development" strip sat between §8 and §9
  naming ambient consultation documentation, inventory and billing; it was
  removed on request along with its styles. Clinic OS is presented as one
  shipped platform, with no release-stage labels anywhere on the page.

  NO PRODUCT UI ANYWHERE ON THIS PAGE. Not a screenshot of the software, not a
  drawn dashboard, not a placeholder frame captioned "Clinic OS screen". The
  photography and footage are of clinics and treatments — real rooms, real
  hands — which is a different thing from a mockup of an interface and is the
  only kind of image this page carries.

  MEDIA RULES, and they are not negotiable because the source files are 4K
  portrait and a container that argues with them will crop a face in half:

    · Every frame declares the source's OWN aspect-ratio and the media inside
      is object-fit: contain. A video is never cropped and never stretched.
    · assets/video/clinic-treatment.mp4 is 2160x3840 — PORTRAIT, 9:16. It gets
      the narrow phone-shaped frame in §6 beside text, never a full-width band.
    · The one photo on the page is pre-cropped to the exact ratio its frame
      declares (clinic-consult.jpg, 1000x1250 = 4:5), so the cover on it
      resolves to a 1:1 fit and no crop happens in the browser at all.
      clinic-treatment.jpg is no longer used — the wide band it filled under
      the sync steps was removed, and the file is left in assets/img/ only in
      case it is wanted elsewhere.
    · The clip carries a poster and NO autoplay attribute — clinics.js §4
      starts it when it scrolls into view. It is a 14.7MB 4K file; nothing on
      this page should be downloading it while the hero is still painting.

  THE HERO DECK IS BUILT BY JS (clinics.js §1), not written out here — filling
  a viewport takes 9 columns of 12 and a hand-written deck that size cannot be
  retuned. The tile vocabulary lives in one place there.

  EVERY PINNED SCENE IS A [data-snap-scene]. The attribute no longer snaps
  anything — the programmatic scene snap was removed from script.js §6e, and
  the note left in its place explains why. What it still does is tell
  clinics.js §2 which sections own a statement→components sequence. Sections
  without it are read straight through, which is the right treatment for a
  ten-item list and the wrong one for a pinned statement.

  COPY IS CUT TO THE BONE ON PURPOSE. One line per card, two sentences per
  block, and no section carrying much more than 120 words. Everything that used
  to be a third sentence is a thing to say on the demo call.

  THE BOOKER WRITES. It validates, inserts the request into the demo_bookings
  table via celes-db.js, and shows the confirmation only once that has
  resolved — see submitBooking() at the bottom of clinics.js. It is a B2B
  enquiry and is kept entirely separate from the consumer waitlist: a booking
  never touches the waitlist table and never moves the signup counter.

  NOTHING EMAILS ANYONE YET. A booking sits in demo_bookings until a person
  opens it, which is why the confirmation copy promises a reply rather than an
  automatic calendar invite.
  ============================================================================
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<!-- viewport-fit=cover is what makes env(safe-area-inset-*) resolve to real
     numbers on a notched iPhone. Without it iOS reports 0 for all four and
     every safe-area rule in styles.css §20 silently does nothing. -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>Celes Clinic OS | One record per patient, and the follow-up handled</title>
<meta name="description" content="Clinic OS is the clinic side of the Celes app: appointments, patient history, treatment records and consent in one place, with confirmations, reminders, intake and follow-up handled automatically." />

<!-- Share card and identity — see the note on the same block in index.html.
     This is the page a practice manager forwards to a colleague, so it is the
     one that most needs to unfurl as something other than a bare URL. -->
<link rel="canonical" href="https://www.celesglobal.in/clinics" />
<meta name="robots" content="index, follow" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Celes Global" />
<meta property="og:title" content="Celes Clinic OS | One record per patient, and the follow-up handled" />
<meta property="og:description" content="Appointments, patient history, treatment records and consent in one place, with confirmations, reminders, intake and follow-up handled automatically." />
<meta property="og:url" content="https://www.celesglobal.in/clinics" />
<meta property="og:image" content="https://www.celesglobal.in/og.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Celes Clinic OS | One record per patient, and the follow-up handled" />
<meta name="twitter:description" content="Appointments, patient history, treatment records and consent in one place, with confirmations, reminders, intake and follow-up handled automatically." />
<meta name="twitter:image" content="https://www.celesglobal.in/og.jpg" />
<meta name="theme-color" content="#faf9f7" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="styles.css?v=50" />
<link rel="stylesheet" href="clinics.css?v=50" />

<!-- Mobile overrides, loaded LAST so cascade order does the work. Every rule
     inside is wrapped in @media (max-width: 768px) — at desktop widths not one
     declaration in it applies. -->
<link rel="stylesheet" href="mobile.css?v=50" />

<!-- Mobile boot guard. Runs BEFORE the parser reaches the <video> below and,
     on phones only, strips the attributes that start a 15MB download. Entirely
     inside one width check: at desktop widths it does nothing at all. -->
<script src="mobile-boot.js?v=50"></script>
</head>
<body class="page-clinics">

<!-- Shared Celes mark — same <symbol> as index.html. -->
<svg width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute">
  <defs>
    <linearGradient id="celesPetal" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%"  stop-color="#e2d8f8" />
      <stop offset="55%" stop-color="#b79df0" />
      <stop offset="100%" stop-color="#7a61bd" />
    </linearGradient>
  </defs>
  <symbol id="celes-mark" viewBox="0 0 24 24">
    <path d="M18.56 4.19A10.2 10.2 0 1 0 18.56 19.81"
          fill="none" stroke="currentColor" stroke-width="1.7"
          stroke-linecap="round" opacity=".9" />
    <path d="M12 5.8c2.95 2.8 4.4 5.15 4.4 7.35a4.4 4.4 0 0 1-8.8 0c0-2.2 1.45-4.55 4.4-7.35z"
          fill="url(#celesPetal)" />
  </symbol>
</svg>


<!-- ==========================================================================
     1. NAV — the Celes Global / for clinics lockup is unchanged.
     ======================================================================= -->
<header class="nav" id="nav">
  <div class="nav__inner">
    <a href="index.html" class="logo" aria-label="Celes Global home">
      <svg class="logo__mark" aria-hidden="true"><use href="#celes-mark" /></svg>
      <span class="logo__word">Celes Global</span>
      <span class="logo__sub">for clinics</span>
    </a>

    <nav class="nav__links" aria-label="Primary">
      <a href="#platform">Platform</a>
      <a href="#capabilities">Capabilities</a>
      <a href="#onboarding">Onboarding</a>
      <a href="index.html">Consumer app</a>
    </nav>

    <div class="nav__actions">
      <a href="#book" class="btn btn--dark">Book a demo</a>
    </div>

    <button class="nav__toggle" id="navToggle" aria-label="Menu" aria-expanded="false" aria-controls="navMobile">
      <span></span><span></span><span></span>
    </button>
  </div>

  <div class="nav__mobile" id="navMobile">
    <a href="#platform">Platform</a>
    <a href="#capabilities">Capabilities</a>
    <a href="#onboarding">Onboarding</a>
    <a href="index.html">Consumer app</a>
    <a href="#book" class="btn btn--primary">Book a demo</a>
  </div>
</header>

<main id="top">

  <!-- ========================================================================
       2. HERO
       ---------------------------------------------------------------------
       Three layers in one stacking context, and the order is the whole idea:

         .chero__bg     the drifting plane, edge to edge, z 0
         .chero__scrim  a cream wash + a centred bloom, z 1
         .chero__inner  the copy, z 2

       THE SCRIM IS A WASH PLUS A BLOOM, NOT A FLAT OVERLAY. A uniform cream
       over the whole plane buys legibility for the headline by greying every
       tile in the corners too, where nothing needs protecting. The wash is the
       flat part of the budget; the radial on top thickens only the ellipse the
       words occupy.

       .marquee__deck IS LEFT EMPTY ON PURPOSE — clinics.js §1 fills it.
       ===================================================================== -->
  <section class="chero" id="hero" data-snap-scene="hero">

    <div class="chero__bg" aria-hidden="true">
      <div class="marquee marquee--bleed" data-hero-marquee>
        <div class="marquee__deck" data-hero-deck></div>
      </div>
    </div>

    <span class="chero__scrim" aria-hidden="true"></span>

    <!-- THERE IS NO MOBILE-ONLY IMAGE IN THIS HERO, AND ITS ABSENCE IS THE
         DESIGN. A phone-only <figure> holding clinic-consult.jpg sat here so
         the mobile hero had a subject once the drifting plane behind it was
         switched off. It is removed on request: the desktop hero is badge →
         headline → two buttons → trust row over a background layer and
         nothing else, and mobile is now the same composition at phone scale
         rather than a second, different hero.

         It was also the same photograph §3 uses two screens later, at half a
         screen tall, so a reader scrolling from the top met it twice inside
         one thumb-flick. mobile.css §8 composes the stack; §2 handles what is
         behind it. -->

    <div class="chero__inner">
      <p class="chero__badge">For clinics &amp; dermatologists</p>

      <!-- Split letter by letter and streaked in by clinics.js §2a. The text
           node here is the source of truth: the splitter reads it, hands the
           element an aria-label carrying the whole sentence, and hides the
           spans from the accessibility tree. -->
      <h1 class="chero__title" data-chero-title>Everything your practice knows about a patient, in one place.</h1>

      <!-- THERE IS NO LEAD PARAGRAPH UNDER THE HEADLINE. "The Celes Clinic
           Operating System is the clinic side of the Celes app. One record per
           patient, and the routine follow-up handled for you." sat here and
           was removed on request. §3 makes the same introduction properly, in
           the same words, beside a photograph of the room the software is used
           in — so over the hero it was the page saying what it is twice before
           the reader had scrolled once. clinics.js §2a staggers whatever
           children .chero__inner has, so nothing there needed changing. -->

      <div class="chero__actions">
        <!-- Both are in-page anchors, so script.js §1b routes them through
             Lenis with the nav's height as an offset — the smooth scroll is
             already handled and needs nothing here. -->
        <a href="#book" class="btn btn--primary btn--lg">Book a practice demo</a>
        <a href="#capabilities" class="btn btn--outline btn--lg">Explore platform features</a>
      </div>

      <ul class="chero__meta">
        <li>Built with practising dermatologists</li>
        <li>No cost to join the pilot</li>
      </ul>
    </div>

    <span class="chero__cue" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v15M6 13.5l6 6 6-6"/></svg>
    </span>
  </section>


  <!-- ========================================================================
       3. INTRO SPLIT — a photograph and three sentences
       ---------------------------------------------------------------------
       THE FIRST THING AFTER THE HERO IS NOT A GRID. The page used to open its
       argument with a pinned statement and then three cards, which meant a
       reader met an abstraction before they had seen the room the software is
       used in. One photo of a treatment in progress does that job in no words
       at all, and the copy beside it only has to say what the thing is and who
       it is for.

       The photo is 1000x1250 — exactly the 4:5 the frame declares, so nothing
       is cropped in the browser. Not decorative: it carries the alt text that
       tells a screen-reader user what the page is about.

       THIS SECTION IS #platform, AND IT IS THE ONLY PLATFORM SECTION. A pinned
       "practice layer" statement and a three-card grid — unified patient
       record / automated insight digests / appointments that arrive briefed —
       used to sit between here and "What's in Clinic OS". It was deleted on
       request: all three claims are restatements of modules the six-card grid
       below names properly, so the page was making its argument twice and
       spending a whole pinned screen doing it. The nav and the footer already
       pointed at #platform, so the id moved here rather than the links moving.
       ===================================================================== -->
  <section class="section section--intro split" id="platform" data-split-pin>
    <div class="container split__grid">

      <figure class="mediaframe mediaframe--portrait split__media">
        <img src="assets/img/clinic-consult.jpg"
             alt="A clinician performing a facial treatment on a patient in a clinic room."
             width="1000" height="1250" loading="lazy" decoding="async" />
      </figure>

      <div class="split__copy" data-plain-head>
        <p class="eyebrow eyebrow--accent">The platform</p>
        <h2 class="split__title">Built for the way a practice already runs.</h2>
        <p class="split__lead">
          Clinic OS holds one record per patient: history, treatments, consent
          and appointments together. It is used by dermatologists and clinic
          staff, alongside the app their patients are already on.
        </p>
        <a href="#capabilities" class="btn btn--outline">See what&rsquo;s in it</a>
      </div>

    </div>
  </section>


  <!-- ========================================================================
       4. WHAT'S IN CLINIC OS — six modules, one line each
       ---------------------------------------------------------------------
       THE ORDER IS FIXED AND IT IS AN ARGUMENT, not a list of what exists.
       GlowMission integration leads because it is the one module no other
       clinic system has — the two-way sync with the patient's own app is what
       makes the record different, and it belongs in the top-left where reading
       starts. Row 1 is then the patient (profiles & history) and how they
       reach you (appointments). Row 2 is the clinic's own day: workflow,
       treatment records, consent. Reordering means moving whole <li> blocks —
       the grid places them in source order and nothing keys off position.

       .fgrid--tight IS THE SAME CARD WITH LESS AIR IN IT. Same plate, same
       radius, same lavender icon, same hover — six of them at the full padding
       and a paragraph each was a wall of text where a comparison should be.
       One line per module, and the second line goes on the demo call.
       ===================================================================== -->
  <section class="scene2 modules" id="capabilities" data-snap-scene="modules">
    <div class="scene2__stage" data-seq>

      <!-- THE ONLY AMBIENT LAYER ON THE PAGE — see clinics.css §4c. Ten
           mini-cards on an even ring around the statement. It lived in the
           deleted pillars scene and moved here with it; it exists in this one
           stage and nowhere else, and .amb is `inset: 0; overflow: hidden`
           inside a `position: relative` stage, so a tag drifting at the edge
           is cut at this section's boundary rather than bleeding into the
           media break above or down into the six-card grid below. -->
      <div class="amb" data-amb aria-hidden="true">
        <span class="amb__slot amb--tl" data-amb-group="a"><span class="amb__tag"><i class="amb__dot amb__dot--1"></i>Real-Time Sync</span></span>
        <span class="amb__slot amb--tc" data-amb-group="b"><span class="amb__tag"><i class="amb__dot amb__dot--2"></i>AI Insights</span></span>
        <span class="amb__slot amb--tr" data-amb-group="c"><span class="amb__tag"><i class="amb__dot amb__dot--3"></i>Compliance</span></span>
        <span class="amb__slot amb--mlc" data-amb-group="a"><span class="amb__tag"><i class="amb__dot amb__dot--2"></i>Derm Analytics</span></span>
        <span class="amb__slot amb--mrc" data-amb-group="b"><span class="amb__tag"><i class="amb__dot amb__dot--3"></i>Patient History</span></span>
        <span class="amb__slot amb--bl" data-amb-group="c"><span class="amb__tag"><i class="amb__dot amb__dot--1"></i>Auto Sync</span></span>
        <span class="amb__slot amb--bc" data-amb-group="a"><span class="amb__tag"><i class="amb__dot amb__dot--3"></i>Active Protocol</span></span>
        <span class="amb__slot amb--br" data-amb-group="b"><span class="amb__tag"><i class="amb__dot amb__dot--1"></i>Smart Records</span></span>
        <span class="amb__slot amb--ocl" data-amb-group="c"><span class="amb__tag"><i class="amb__dot amb__dot--2"></i>Secure Intake</span></span>
        <span class="amb__slot amb--ocr" data-amb-group="a"><span class="amb__tag"><i class="amb__dot amb__dot--1"></i>Instant Brief</span></span>
      </div>
      <span class="amb__glow" data-amb-glow aria-hidden="true"></span>

      <!-- THE WHITE WASH, AND IT IS WHAT LETS ONE SECTION HAVE TWO SURFACES.
           The statement and the six cards share a single pinned stage, so the
           ambient field behind the statement was still behind the cards when
           they arrived — the six-card grid is supposed to be clean white with
           no floating badges at all. Splitting them into two sections would
           end the statement→cards sequence, so instead this pane fades up as
           the statement leaves (clinics.js §2, beat 2): it covers the tag
           field and turns the surface #FFFFFF in one move, and the cards land
           on clean white. The tags keep the cream they read well against and
           the grid gets the white it needs. -->
      <span class="scene2__wash" data-seq-wash aria-hidden="true"></span>

      <!-- [data-seq-fill] swaps this title off the letter-streak entrance and
           onto the homepage statement's scroll-driven colour sweep: the line
           starts at rgba(26,26,26,.25) and is filled to #1A1A1A word by word
           under the reader's own scroll (clinics.js §2c). It still leaves on
           beat 2 exactly as every other statement does. -->
      <header class="scene2__statement" data-seq-head>
        <p class="eyebrow eyebrow--accent">What&rsquo;s in Clinic OS</p>
        <h2 class="scene2__title" data-seq-title data-seq-fill>Everything a practice runs on, gathered into one system.</h2>
      </header>

      <div class="scene2__body" data-seq-body>
        <div class="container">
      <ul class="fgrid fgrid--3 fgrid--tight">

        <!-- Row 1 -->

        <li class="fcard">
          <span class="fcard__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 9.2h12.4M13.2 5.6l3.6 3.6-3.6 3.6"/><path d="M20 14.8H7.6M10.8 11.2l-3.6 3.6 3.6 3.6"/></svg>
          </span>
          <h3 class="fcard__h">GlowMission integration</h3>
          <p class="fcard__p">
            Two-way sync with the patient&rsquo;s app: routines, daily compliance and
            skin scans in, plan changes out.
          </p>
        </li>

        <li class="fcard">
          <span class="fcard__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8.2" r="3.6"/><path d="M4.8 20c.7-3.7 3.7-5.8 7.2-5.8s6.5 2.1 7.2 5.8"/></svg>
          </span>
          <h3 class="fcard__h">Patient profiles &amp; history</h3>
          <p class="fcard__p">
            Quiz answers, scans, products and past treatments in one timeline
            per person.
          </p>
        </li>

        <li class="fcard">
          <span class="fcard__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.6"/><path d="M3.5 9.6h17M8.4 3.2v3.4M15.6 3.2v3.4"/><path d="M7.6 13.4h3M7.6 17h3M13.6 13.4h3"/></svg>
          </span>
          <h3 class="fcard__h">Appointments &amp; scheduling</h3>
          <p class="fcard__p">
            Bookings, working hours, reschedules and cancellations in one
            calendar.
          </p>
        </li>

        <!-- Row 2 -->

        <li class="fcard">
          <span class="fcard__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9.4 6.5H20M9.4 12H20M9.4 17.5H20"/><path d="M4 5.9l1.3 1.3L7.6 4.8M4 11.4l1.3 1.3 2.3-2.4M4 16.9l1.3 1.3 2.3-2.4"/></svg>
          </span>
          <h3 class="fcard__h">Clinic workflow</h3>
          <p class="fcard__p">
            Reviews, approvals and follow-ups in one queue instead of across
            email.
          </p>
        </li>

        <li class="fcard">
          <span class="fcard__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5.5" width="8" height="13" rx="1.8"/><rect x="13" y="5.5" width="8" height="13" rx="1.8"/><path d="M5.4 15.2l2-2.4 1.2 1.4M15.4 15.2l2-2.4 1.2 1.4"/></svg>
          </span>
          <h3 class="fcard__h">Treatment records</h3>
          <p class="fcard__p">
            Procedures logged per visit, with before and after photos paired by
            date.
          </p>
        </li>

        <li class="fcard">
          <span class="fcard__icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18.5 12.2V19a2 2 0 0 1-2 2h-9a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5.4"/><path d="M8.8 16.4c1.6-.3 2.6-.6 3.3-1.3l6.3-6.3a1.6 1.6 0 0 0-2.3-2.3l-6.3 6.3c-.7.7-1 1.7-1.3 3.3z"/></svg>
          </span>
          <h3 class="fcard__h">Consent &amp; documents</h3>
          <p class="fcard__p">
            Forms signed on the patient&rsquo;s own device and filed to their profile.
          </p>
        </li>

      </ul>
        </div>
      </div>
    </div>
  </section>


  <!-- ========================================================================
       6. MEDIA BREAK — the portrait clip, and the automation statement
       ---------------------------------------------------------------------
       THE CLIP IS 2160x3840. PORTRAIT. It is in a 9:16 frame capped at 380px
       and it will never be anywhere else: stretched across a content column it
       is a 3:2 crop through somebody's face, and "cover" on a 9:16 source in a
       16:9 box throws away two thirds of the frame. The ratio here is declared
       from the file's own dimensions and the video inside is object-fit:
       contain, so there is no arrangement of viewport and container that can
       crop or squash it.

       NO autoplay ATTRIBUTE AND preload="none". clinics.js §4 attaches the
       source and starts playback when the frame is near the viewport. The file
       is 14.7MB of 4K — with a bare autoplay attribute the browser starts
       pulling it while the reader is still in the hero, competing with the
       fonts and the hero deck for the same connection. The poster is a frame
       out of the clip itself, so the block is never empty and the no-JS state
       is a still photograph rather than a hole.

       This block is also what stops §5 and §7 sitting against each other: a
       card grid, then footage, then a list.
       ===================================================================== -->
  <section class="section section--media split split--flip" id="automation" data-split-pin>
    <div class="container split__grid split__grid--narrow">

      <figure class="mediaframe mediaframe--phone split__media">
        <video class="mediaframe__video"
               data-lazy-video
               data-src="assets/video/clinic-treatment.mp4"
               poster="assets/img/clinic-treatment-poster.jpg"
               muted loop playsinline webkit-playsinline preload="none"
               aria-label="A clinician applying a serum treatment to a patient's face."></video>
      </figure>

      <div class="split__copy" data-plain-head>
        <p class="eyebrow eyebrow--accent">Automation</p>
        <h2 class="split__title">It runs the routine work on its own.</h2>
        <p class="split__lead">
          Confirmations, reminders, intake, aftercare and check-ins go out
          without anyone starting them. Each one replaces something staff were
          doing by hand.
        </p>
      </div>

    </div>
  </section>


  <!-- ========================================================================
       7. WHAT RUNS ON ITS OWN — ten items, two columns, no cards
       ---------------------------------------------------------------------
       NO HEADER ON THIS SECTION AND NO CARDS IN IT. §6 is its heading — it
       states what the list is and why it matters, over a piece of footage —
       and repeating that here in a second <h2> would be the same sentence
       twice. What is left is the list itself.

       Ten white plates carrying two paragraphs and an inset "you no longer"
       box each is what made this page read as a document. The claim was never
       in the second paragraph anyway; it was in the title. So: a rule, a bold
       title, one line. Ten of them scan in about as long as it takes to
       scroll past, which is the entire job of this section.
       ===================================================================== -->
  <!-- ========================================================================
       7. WHAT RUNS ON ITS OWN — two tracks, opposite directions
       ---------------------------------------------------------------------
       SECTION 6 IS THIS SECTION'S HEADING. It states what the ten items are
       and why they matter, over a piece of footage, so repeating that here in
       a second <h2> would be the same sentence twice.

       WHY A MARQUEE AND NOT A LIST. Ten one-line items in two static columns
       was scannable but inert — a specification, read top to bottom once. Two
       tracks moving in opposite directions read as a system running, which is
       the actual claim: these things happen continuously, without anyone
       starting them. The opposition matters more than the speed; two tracks
       moving the same way is a conveyor, two moving against each other is a
       mechanism.

       NOTHING ON THE CARD IS HIDDEN. Category, photograph, title and the one
       sentence are all on the face of it at all times. The previous version
       showed a title and opened its copy on hover, which made the section
       unreadable to anyone who did not point at each card in turn — and made
       the whole thing depend on an interaction a touch device does not have.
       Hover now only lifts and lights; it reveals nothing.

       THE SECTION IS NOT PINNED — see clinics.css §4b for why, and why it has
       stayed unpinned now that the compact card would fit a locked screen
       again. The dwell lives in the cards: they are legible while gliding.

       ONE SHORT SENTENCE PER CARD. Each says what the thing does and what it
       saves in a single clause of about a dozen words, sized so it sets to
       two or three lines in a 320px card. The longer two-sentence version
       these carried before pushed the card to 493px and the section to two
       full screens; the claim was always in the first clause anyway.

       KEYBOARD REACHES IT TOO. Each card is tabbable, and :focus-within opens
       it and pauses the track exactly as hover does — otherwise the ten
       descriptions would be information available only to a mouse.

       THE TRACKS ARE DUPLICATED BY clinics.js SECTION 7, not written out
       twice. A seamless loop needs the run of cards to appear twice so the
       animation can translate exactly one half-width and land on an identical
       frame; hand-writing them means two places to edit every string. Until
       the clone happens there is no animation at all (.is-ready gates it), so
       a page without JS shows five static cards per row rather than a row
       that visibly jumps back to its start.
       ===================================================================== -->
  <section class="section section--list autos" data-autos
           aria-label="What Clinic OS runs on its own">
    <div class="autos__stage" data-autos-stage>

    <div class="mq" data-mq>
      <ul class="mq__track" data-mq-track data-mq-dir="right">

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Alerts</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_confirmations.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Confirmations &amp; reminders</h3>
            <p class="mqcard__p">Patients get a text and a push before every visit, so fewer of them forget.</p>
          </div>
        </li>

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Scheduling</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_waitlist.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Waitlist backfill</h3>
            <p class="mqcard__p">A cancelled slot is offered to the next patient waiting, so the day stays full.</p>
          </div>
        </li>

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Imaging</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_photofiling.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Photo filing</h3>
            <p class="mqcard__p">Progress photos file themselves by date and body area, into the patient record.</p>
          </div>
        </li>

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Dictation</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_dictation.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Voice-note dictation</h3>
            <p class="mqcard__p">Voice notes after a consult become structured chart entries for you to approve.</p>
          </div>
        </li>

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Monitoring</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_checkins.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Daily &amp; weekly check-ins</h3>
            <p class="mqcard__p">Patients are prompted for recovery updates and photos between their visits.</p>
          </div>
        </li>

      </ul>
    </div>

    <div class="mq" data-mq>
      <ul class="mq__track" data-mq-track data-mq-dir="left">

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Booking</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_reschedule.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Reschedules &amp; cancellations</h3>
            <p class="mqcard__p">Patients change their own appointment from the reminder, and the slot reopens itself.</p>
          </div>
        </li>

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Onboarding</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_intake.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Digital intake</h3>
            <p class="mqcard__p">Medical history and consent are done before arrival and land in the chart.</p>
          </div>
        </li>

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Briefing</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_summary.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Pre-consult summary</h3>
            <p class="mqcard__p">Check-ins and app activity are pulled into a short brief before you see them.</p>
          </div>
        </li>

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Recovery</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_aftercare.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Aftercare instructions</h3>
            <p class="mqcard__p">Recovery instructions arrive in the patient&rsquo;s app as soon as the visit ends.</p>
          </div>
        </li>

        <li class="mqcard" tabindex="0" data-glare>
          <span class="mqcard__foil" aria-hidden="true"></span>
          <span class="mqcard__glare" aria-hidden="true"></span>
          <div class="mqcard__in">
            <p class="mqcard__tag">Retention</p>
            <figure class="mqcard__shot">
              <img src="assets/img/portrait_coursereminders.jpg" alt=""
                   width="420" height="220" loading="lazy" decoding="async" />
            </figure>
            <h3 class="mqcard__h">Review &amp; course reminders</h3>
            <p class="mqcard__p">Courses of treatment are tracked, and patients are prompted when the next one is due.</p>
          </div>
        </li>

      </ul>
    </div>

    </div>
  </section>


  <!-- ========================================================================
       8. HOW THE SYNC WORKS — four steps, then the photo band
       ---------------------------------------------------------------------
       Five steps on one rule. The return to the patient's app is stated as a
       step rather than left implied by the arrangement, and the fifth —
       monitor, track and analyse — is what closes the circle: without it the
       sequence ends at "the plan is back in their app" and the continuous
       part of the claim is missing. One line each.

       THE STEP COUNT LIVES IN --cols (clinics.css §6) AND NOWHERE ELSE. The
       rail's right-hand inset has to be derived from it — the rail ends at
       the centre of the LAST node, which is a function of how many columns
       the grid has — so a sixth step is one <li> and one number, not a
       recalculated magic value. The node thresholds in clinics.js §6 already
       count the nodes they find.

       THE BAND UNDERNEATH IS WIDE BUT NOT FULL-BLEED, and clinics.css §4b
       explains why at length: the source is a 4K portrait close-up, and there
       is no wider scene inside the file to show at 100vw. The photo is
       pre-cropped to the exact 3:2 the frame declares (1440x960), so nothing
       is cropped again in the browser. It is the visual full stop on the
       argument, and what separates this section from the muted strip below.
       ===================================================================== -->
  <section class="section syncs" id="sync" data-plain>
    <div class="container">
      <header class="section__head" data-plain-head>
        <p class="eyebrow eyebrow--accent">How the sync works</p>
        <h2 class="section__title">The record updates from both ends.</h2>
      </header>

      <!-- THE RAIL IS ONE ELEMENT BEHIND ALL FOUR NODES, not a connector per
           step. The old version drew a segment off each marker's ::after and
           suppressed it on the last one — fine for a static row, impossible to
           animate as one continuous draw, because four independent segments
           cannot share a single scaleX without the joins popping. One rail,
           one transform-origin: left, one tween. -->
      <ol class="flow" data-flow-stream>
        <div class="flow__rail" aria-hidden="true">
          <span class="flow__rail-fill" data-flow-fill></span>
        </div>

        <li class="flowstep" data-flow-node>
          <span class="flowstep__no">1</span>
          <h3 class="flowstep__h">The patient uses the app</h3>
          <p class="flowstep__p">Scans, routine steps and photos, between visits.</p>
        </li>
        <li class="flowstep" data-flow-node>
          <span class="flowstep__no">2</span>
          <h3 class="flowstep__h">It lands in the record</h3>
          <p class="flowstep__p">Written to their profile as it happens.</p>
        </li>
        <li class="flowstep" data-flow-node>
          <span class="flowstep__no">3</span>
          <h3 class="flowstep__h">The clinic treats and updates</h3>
          <p class="flowstep__p">You log the treatment and adjust the plan.</p>
        </li>
        <li class="flowstep" data-flow-node>
          <span class="flowstep__no">4</span>
          <h3 class="flowstep__h">It reflects back in the app</h3>
          <p class="flowstep__p">The new plan and aftercare appear in their GlowMission.</p>
        </li>
        <li class="flowstep" data-flow-node>
          <span class="flowstep__no">5</span>
          <h3 class="flowstep__h">Monitor, track &amp; analyse</h3>
          <p class="flowstep__p">Progress is tracked over time and feeds back into the plan.</p>
        </li>

        <!-- THERE IS NO RETURN ARC. A dashed curve looped from node 05 back to
             node 01 here and was removed on request. The straight rule through
             the five nodes is the only connector this section carries; the
             cycle is carried by step 5's copy instead. Its reserved padding
             came off .flow with it (clinics.css §6) — the graphic and the
             space it sat in were one change, and leaving the padding behind
             would put 60px of empty section under the descriptions. -->
      </ol>
    </div>
  </section>


  <!-- The "in development" strip (ambient consultation documentation,
       inventory, billing) was removed on request. Clinic OS is presented as
       one shipped platform: no roadmap block, no release-stage labels, and
       nothing on the page that a reader has to mentally discount. The
       .devband / .dev styles went with it (clinics.css §7). -->

  <!-- ========================================================================
       10. ONBOARDING
       ---------------------------------------------------------------------
       Same pinned shape as §4 — statement, exit, components — with one extra
       job in beat 3: the three cards arrive in sequence rather than together,
       and the badge on whichever one is arriving lights up as it does. The
       highlight is driven off the timeline's own progress (clinics.js §2d),
       not a second trigger, so the lit card and the visible card cannot
       disagree.

       TEXT ONLY, TWO SENTENCES EACH. The cards used to end with a small drawn
       interface preview each — a patient brief, a bar chart, a sync list. They
       were the banned thing: invented product UI. The cards are now heading,
       badge, two sentences, and nothing else.
       ===================================================================== -->
  <section class="scene2 convo" id="onboarding" data-snap-scene="convo">
    <div class="scene2__stage" data-seq>


      <header class="scene2__statement" data-seq-head>
        <p class="eyebrow eyebrow--accent">Onboarding</p>
        <h2 class="scene2__title" data-seq-title>Live in three conversations.</h2>
      </header>

      <div class="scene2__body" data-seq-body>
        <div class="container">
          <ol class="convo__grid">

            <li class="convo__card" data-convo-card>
              <div class="convo__top">
                <span class="convo__no">01</span>
                <span class="convo__badge">20 minutes</span>
              </div>
              <h3 class="convo__h">Consultation</h3>
              <p class="convo__p">
                We walk through Clinic OS together and map how your practice
                runs today. Nothing to prepare beforehand.
              </p>
            </li>

            <li class="convo__card" data-convo-card>
              <div class="convo__top">
                <span class="convo__no">02</span>
                <span class="convo__badge">Setup</span>
              </div>
              <h3 class="convo__h">Verification and setup</h3>
              <p class="convo__p">
                We verify each clinician, build your practice profile and load
                your appointment types. You confirm the calendar before anything
                goes live.
              </p>
            </li>

            <li class="convo__card" data-convo-card>
              <div class="convo__top">
                <span class="convo__no">03</span>
                <span class="convo__badge">Go live</span>
              </div>
              <h3 class="convo__h">Launch</h3>
              <p class="convo__p">
                Availability is published and your profile appears in the app.
                We stay on hand through the first weeks of bookings.
              </p>
            </li>

          </ol>
        </div>
      </div>
    </div>
  </section>
</main>


<!-- ==========================================================================
     11. THE CLOSING SCENE — scheduler and footer, one container
     ---------------------------------------------------------------------
     ONE SECTION, NOT TWO. The booker and the footer are a single
     `min-height: 100svh` container, so the end of the page reads as one
     closing screen rather than a section followed by a page footer.

     THE SEQUENCE, under the pin on .closing__pin (clinics.js §2f):
       1  "Pick a time that suits your practice." holds, centred, assembling
       2  it holds a beat, then leaves — opacity 0, y -30
       3  the scheduler slides up into the space it left and locks there

     Then the pin releases and the footer is the next thing under the reader's
     scroll. The scene is deliberately NOT in the snap list (script.js §6e
     excludes `final` by name): it is meant to be read through to the bottom.
     ======================================================================= -->
<section class="closing" id="book" data-snap-scene="final">

  <div class="closing__pin" data-closing>

    <header class="closing__statement" data-closing-head>
      <p class="eyebrow eyebrow--accent">Book a call</p>
      <h2 class="closing__title" data-closing-title>Pick a time that suits your practice.</h2>
      <p class="closing__lead">
        A 20-minute intro call with the Celes team. No preparation needed.
      </p>
    </header>

    <div class="closing__panel" data-closing-body>
      <div class="container">
        <div class="booker" data-booker>

          <!-- Step indicator -->
          <ol class="booker__steps" aria-hidden="true">
            <li class="is-on" data-step-dot="1">Date</li>
            <li data-step-dot="2">Time</li>
            <li data-step-dot="3">Details</li>
          </ol>

          <div class="booker__body">

            <!-- ---- Calendar ---- -->
            <div class="cal">
              <div class="cal__head">
                <button class="cal__nav" data-cal-prev aria-label="Previous month">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M15 5l-7 7 7 7"/></svg>
                </button>
                <p class="cal__month" data-cal-label aria-live="polite">&nbsp;</p>
                <button class="cal__nav" data-cal-next aria-label="Next month">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/></svg>
                </button>
              </div>

              <div class="cal__dow" aria-hidden="true">
                <span>Mon</span><span>Tue</span><span>Wed</span>
                <span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
              </div>

              <!-- Populated by clinics.js -->
              <div class="cal__grid" data-cal-grid role="grid" aria-label="Choose a date"></div>

              <p class="cal__note">
                Weekdays only. Times shown in <span data-tz>your local time</span>.
              </p>
            </div>

            <!-- ---- Slots + details ---- -->
            <div class="booker__side">

              <!-- Empty state, replaced once a date is chosen -->
              <div class="slots" data-slots>
                <p class="slots__empty" data-slots-empty>
                  Choose a date to see available times.
                </p>
                <div class="slots__grid" data-slots-grid role="group" aria-label="Available times"></div>
              </div>

              <!-- Details form, enabled once a slot is chosen -->
              <form class="form booker__form" data-booking-form novalidate hidden>
                <p class="booker__chosen" data-chosen></p>

                <div class="field">
                  <label for="bk-name">Your name</label>
                  <input type="text" id="bk-name" name="name" placeholder="Full name" autocomplete="name" required />
                </div>
                <div class="field">
                  <label for="bk-clinic">Clinic or practice</label>
                  <input type="text" id="bk-clinic" name="clinic" placeholder="Practice name" autocomplete="organization" required />
                </div>
                <div class="field">
                  <label for="bk-email">Work email</label>
                  <input type="email" id="bk-email" name="email" placeholder="you@practice.com" autocomplete="email" required />
                </div>
                <div class="field">
                  <label for="bk-notes">Anything we should know? <span class="opt">Optional</span></label>
                  <textarea id="bk-notes" name="notes" placeholder="Size of practice, specialisms, what you're hoping to get out of the call"></textarea>
                </div>

                <!-- HONEYPOT — see the note on the same block in index.html. -->
                <div class="hp" aria-hidden="true">
                  <label for="bk-company">Company</label>
                  <input type="text" id="bk-company" name="company" tabindex="-1" autocomplete="off" />
                </div>
                <button type="submit" class="btn btn--primary btn--lg btn--block">Confirm booking</button>
                <p class="form__msg" data-form-msg role="status" aria-live="polite"></p>
              </form>

              <!-- Confirmation -->
              <div class="booked" data-booked hidden>
                <span class="modal__check" aria-hidden="true">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>
                </span>
                <h3>Your call is booked.</h3>
                <p class="booked__when" data-booked-when></p>
                <!-- HONEST BY DESIGN. This promised an automatic confirmation
                     email and a calendar invite; nothing sends either yet, and
                     the request sits in the demo_bookings table until someone
                     opens it. Promising the invite made the first thing a
                     high-value B2B lead heard from us a thing that would not
                     happen. When the notification webhook is built, this copy
                     can go back to naming it. -->
                <p class="booked__note">
                  Thanks &mdash; we&rsquo;ve got your request and will be in touch
                  shortly to schedule.
                </p>
                <button class="btn btn--outline" data-booking-reset>Book another time</button>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ------------------------------------------------------- the footer --
       Inside .closing, directly under the scheduler — no top border and no
       change of surface, so the two read as one block. Full-bleed: the page
       container's 1240px cap left it visibly narrower than everything above
       it on a wide screen (clinics.css §9). -->
  <footer class="footer footer--full">
    <div class="container footer__top">
      <a href="index.html" class="logo logo--footer" aria-label="Celes Global home">
        <svg class="logo__mark" aria-hidden="true"><use href="#celes-mark" /></svg>
        <span class="logo__word">Celes Global</span>
      </a>
      <p class="footer__tagline">The clinical layer behind the app.</p>
    </div>

    <div class="container footer__main">
      <div class="footer__cols">
        <div class="footer__col">
          <h4>Location</h4>
          <p>Celes Global Private Limited</p>
          <p>Hyderabad, Telangana, India</p>
        </div>

        <div class="footer__col">
          <h4>Contact</h4>
          <a href="mailto:founder@celes.global">founder@celes.global</a>
          <a href="/contact">Contact us</a>
          <a href="#book">Request a clinic demo</a>
        </div>

        <div class="footer__col">
          <h4>Follow</h4>
          <!-- PLACEHOLDER: real social URLs -->
          <a href="#">LinkedIn</a>
          <a href="#">Instagram</a>
          <a href="#">TikTok</a>
        </div>

        <div class="footer__col">
          <h4>Platform</h4>
          <a href="#platform">The platform</a>
          <a href="#capabilities">What&rsquo;s in Clinic OS</a>
          <a href="#automation">Automation</a>
          <a href="#sync">How the sync works</a>
        </div>

        <nav class="footer__col" aria-label="Footer navigation">
          <h4>Celes</h4>
          <a href="#onboarding">Onboarding</a>
          <a href="index.html">Consumer app</a>
          <a href="index.html#waitlist">Early access</a>
        </nav>

        <!-- The same six links as the homepage footer, so the policy pages are
             reachable from either page. This footer is .footer--full and has no
             max-width, so a sixth column has the room the homepage's 1240px
             container would not have given it. -->
        <nav class="footer__col" aria-label="Legal">
          <h4>Legal</h4>
          <a href="/privacy">Privacy Policy</a>
          <a href="/terms">Terms of Use</a>
          <a href="/medical-disclaimer">Medical Disclaimer</a>
          <a href="/cookies">Cookie Policy</a>
          <a href="/data-deletion">Data Deletion Request</a>
          <a href="/contact">Contact</a>
        </nav>
      </div>
    </div>

    <div class="footer__bar">
      <div class="container footer__bar-inner">
        <span>&copy; <span data-year></span> Celes Global. All rights reserved.</span>
        <span class="footer__legal">
          <a href="/privacy">Privacy</a>
          <a href="/terms">Terms</a>
        </span>
      </div>
    </div>
  </footer>
</section>

<!-- Same vendored libraries as the homepage: the cursor, smooth scroll and
     card tilt are site-wide, so this page needs them too. -->
<!-- Supabase, then the shared client that wraps it. Both must run BEFORE
     clinics.js, which calls window.CelesDB from the booker's submit handler.
     Plain <script> tags, no defer: the ordering here is the contract. -->
<!-- PINNED AND HASHED — see the note on the same tag in index.html. -->
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2.112.2"
        integrity="sha384-B2duOBIryCXbX4eDE4BdJwtNkQMRQde3o6IsjfPW28E6aH1CYE96hHeZRG3zY56O"
        crossorigin="anonymous"
        referrerpolicy="no-referrer"></script>
<script src="celes-db.js?v=50"></script>

<script src="assets/vendor/lenis.min.js?v=50"></script>
<script src="assets/vendor/gsap.min.js?v=50"></script>
<script src="assets/vendor/ScrollTrigger.min.js?v=50"></script>
<script src="script.js?v=50"></script>
<script src="clinics.js?v=50"></script>

<!-- Mobile behaviour, loaded last so the triggers it adjusts already exist.
     Gated on (max-width: 768px): at desktop widths it registers nothing. -->
<script src="mobile.js?v=50"></script>
</body>
</html>