/* Careggi brand layer. Loaded after the template's stylesheet, which is never edited (one exception: its two Inter
   @font-face rules pointed at the images folder instead of a font, so they were removed; the faces are defined below).
   White is the page, the red of the logo is everything on it, and long reading text in the opening is the grey of
   the stone. The template was light type on black, so its two base colours are simply swapped here.
   Anything under html.cg-motion is the scroll-driven version (wide screens, motion allowed); without that class
   every section is plain and readable in place. */

/* Inter, served from this site: one variable file per character set, byte-identical to the files Google served
   Chrome and Safari before (Inter 4.001). The page uses weights 300 to 700. Only the latin file is needed for this
   page's text; the browser fetches latin-ext only if a character from it appears. */
@font-face { font-family: Inter; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* The opening wipe's four columns cover the page only while scripts run: Webflow's interaction slides them away and
   then sets them to display:none itself. With scripts off they never show, and if the scripts fail the head's
   failsafe adds html.cg-failsafe, which takes them away for good. */
html.w-mod-js .wrap_columns { display: flex; }
html.cg-failsafe .wrap_columns { display: none !important; }
/* Under the failsafe, text and pictures Webflow animates stay where they rest. Its scripts may still arrive after the
   failsafe has shown the page (a very slow line), and would hide the first screen to play its entrance again; and if
   ScrollTrigger is missing, the text reveals further down set their starting state and never play. */
html.cg-failsafe :is([animation="hero-text"], [navbar="item"], [arrow-links="item"], [data-wf-target*="c8e16a7e-2eb0-1880-33b3-f45d2be2f210"]),
html.cg-failsafe :is([animation="hero-text"], [animation="line-by-line"], [animation="word-by-word"]) :is(.gsap_split_line, .gsap_split_word) {
  opacity: 1 !important; transform: none !important;
}
/* The footer strip's pictures are swapped in by the head script once the page has loaded. Their placeholders carry
   the picture's own size, so nothing in the strip moves when it arrives. Without JavaScript the placeholders are
   left out and a <noscript> copy of each picture takes its place in the row. */
html:not(.w-mod-js) img[data-src] { display: none; }
/* Only without scripts: with scripts on, a browser keeps a <noscript>'s contents as plain text, and display:contents
   would print that text in the strip. */
html:not(.w-mod-js) .footer_loop-content > noscript { display: contents; }

/* The section labels are headings (h2; h3 for the clinic names and the questions) for search engines and screen
   readers. They keep exactly the look they had as plain text: the classes already set size, weight and spacing. */
.cg-h { font-family: inherit; }
h3.cg-h { font-weight: inherit; }

:root {
  --cg-red: #901112;                 /* measured from the supplied logo */
  --cg-white: #ffffff;
  --cg-stone: #2e2c2a;               /* the dark grey of the marble's veins, for the opening paragraph */
  --cg-line: rgba(144, 17, 18, 0.2);

  --base--black: var(--cg-white);    /* the template's surfaces */
  --base--white: var(--cg-red);      /* the template's type, buttons and marks */
  --base--blue: var(--cg-red);
  --base--blue-dark: #6f0d0e;
  --text-color--text-secondary: rgba(144, 17, 18, 0.64);
  --grey--grey-100: rgba(144, 17, 18, 0.14);
}

html, body { background-color: var(--cg-white); }
::selection { background: var(--cg-red); color: var(--cg-white); }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.nav-button_component { background-color: var(--cg-red); }
.nav-button_line { background-color: var(--cg-white); }
.cg-dim { opacity: 0.66; }

/* ---------- The logo, drawn inline so it takes the colour of its surroundings ---------- */
.cg-logo svg { display: block; width: auto; height: 100%; }
.cg-logo--nav { height: 1.15rem; color: var(--cg-red); }
h1.cg-logo--hero { line-height: 0; }
h1.cg-logo--hero svg { width: clamp(17rem, min(50vw, 92vh), 64rem); height: auto; }
/* On wide, short windows (a 1366x768 or 1280x800 laptop once the browser's own bars are counted) the picture covers
   the window by its width, so it rises, and the villa's roof met the first letter of the wordmark. There the wordmark
   now shrinks just enough to clear it, either by sitting above the highest point of the villa beneath it or by
   starting to the right of it. The numbers are the villa's outline in hero-villa.webp: for each fraction of the
   picture's width (0.50, 0.53, ...), how far down its highest point to the right of that fraction is (35.3%, 39.5%, ...).
   8rem is the wordmark's top (7.25rem) plus 0.75rem of air; 0.1703 is the wordmark's height over its width. On every
   window where the two never met, the wordmark keeps its size. Redo the numbers if the hero picture changes. */
@supports (height: 1svh) {
  @media (min-width: 992px) {
    /* The picture's width on wide screens: it covers the window at 16:9, but stops growing where the villa's tower
       (37.07% of the picture's width above its foot) would reach the nav plus 1rem. Only ultrawide windows (wider than
       about 2.4:1, such as a 21:9 monitor in a browser) reach that limit, where the tower used to rise under the nav. */
    :root { --cg-stage-w: min(max(100vw, 177.78svh), calc((100svh - 4.75rem) / 0.3707)); }
    h1.cg-logo--hero svg {
      --cg-c: var(--cg-stage-w);
      --cg-fit: max(
        calc((100svh - 0.3707 * var(--cg-c) - 8rem) / 0.1703),
        min(calc(50vw - 1.5rem), calc((100svh - 0.3639 * var(--cg-c) - 8rem) / 0.1703)),
        min(calc(50vw - 0.03 * var(--cg-c) - 1.5rem), calc((100svh - 0.3403 * var(--cg-c) - 8rem) / 0.1703)),
        min(calc(50vw - 0.06 * var(--cg-c) - 1.5rem), calc((100svh - 0.3206 * var(--cg-c) - 8rem) / 0.1703)),
        min(calc(50vw - 0.10 * var(--cg-c) - 1.5rem), calc((100svh - 0.3099 * var(--cg-c) - 8rem) / 0.1703)),
        min(calc(50vw - 0.14 * var(--cg-c) - 1.5rem), calc((100svh - 0.2019 * var(--cg-c) - 8rem) / 0.1703)),
        calc(50vw - 0.20 * var(--cg-c) - 1.5rem));
      width: clamp(17rem, min(50vw, 92vh, var(--cg-fit)), 64rem);
    }
  }
}
a.cg-nav-cta { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- The opening ----------
   The hero is the villa. On scroll it opens like a pair of doors on the gathering inside; the gathering fades and
   leaves the one red chair; the paragraph arrives, falls away a line at a time, and its five words gather. */
.section_hero .img.is-hero { object-position: 50% 100%; filter: none !important; }   /* the template dims its photo on phones for white type */
.cg-stage { display: none; }
.cg-gathering-static { display: block; width: 100%; height: auto; }
.cg-caption { max-width: 40rem; margin: 0 auto; padding: 2.5rem var(--_sizes---fixed--xxlarge) 0; text-align: center; }
.cg-open_text { padding: 4rem var(--_sizes---fixed--xxlarge) 5rem; --slogan-size: clamp(1.2rem, 5.4vw, 1.75rem); }
.slogan_wrap { position: relative; width: 100%; max-width: 24em; margin: 0 auto; font-size: var(--slogan-size); }
.slogan_text { margin: 0; color: var(--cg-stone); font-size: 1em; line-height: 1.2; letter-spacing: -0.012em; text-transform: uppercase; font-weight: 400; }
.slogan_word { display: inline-block; will-change: transform, opacity; }
.slogan_slot { display: inline-block; white-space: nowrap; color: var(--cg-red); }
.slogan_key { display: none; }
.slogan_cta { margin-top: 2.25rem; font-size: 1rem; }

/* The hero on phones and tablets (below 992px): centred, with the tagline on the rule of thirds.
   The wordmark, the two lines and "Book a call" are centred over the villa. The tagline sits a third of the way down
   the free space between the wordmark's foot and the top of the villa (its tower: 45.2% down the upright file, 34.1%
   down the wide one), so the gap under the tagline is always twice the gap above it. The villa stands on the hero's
   bottom edge and covers the window where there is room; on a short screen it narrows so those gaps never drop below
   1rem and 2rem. Both picture files have a pure white ground, so a picture narrower than the window shows no edge. */
@media (max-width: 991px) {
  .section_hero {
    --cg-g: 1.5rem; --cg-nav: 4.8125rem;                        /* the page gutter and the nav's height here */
    --cg-logo-w: clamp(17rem, min(50vw, 92vh), 64rem);          /* the wordmark's width, as set above */
    --cg-mark-foot: calc(7.25rem + 0.1703 * var(--cg-logo-w));  /* where the wordmark ends, from the top of the hero */
    --cg-tag-h: 3rem;                                            /* the tagline: two 1rem lines at 1.4, 0.2rem apart */
    overflow: hidden;   /* the picture can be wider than the window; the page's own clip needs iOS 16, this does not */
  }
  .container-full.is-hero, .hero_content { align-items: center; }
  .hero_content { row-gap: 0; }
  .hero_description { align-items: center; text-align: center; max-width: none; row-gap: .2rem; font-size: 1rem; line-height: 1.4; margin-top: 1.5rem; }
  .hero_links { inset: auto 0 0 0; align-items: center; }
}
@media (max-width: 767px) { .section_hero { --cg-g: 1rem; --cg-nav: 4.3125rem; } }
@supports (height: 1svh) {
  @media (max-width: 991px) {
    .section_hero {
      --cg-words: calc(var(--cg-mark-foot) + var(--cg-tag-h) + 3rem);   /* the least room the villa leaves above it */
      /* The wide file, used in windows wider than 3:4: its tower stands 37.07% of its width above the picture's foot and
         its rock ends 3.49% above it, so the villa itself is 33.58% of the width tall. It is lifted, when it has to be,
         so the rock clears the centred "Book a call" (4.25rem up), and it narrows so it still fits under the words. */
      --cg-hero-w: min(max(100vw, 177.78svh), calc((100svh - var(--cg-words)) / 0.3707), calc((100svh - 4.25rem - var(--cg-words)) / 0.3358));
      --cg-lift: max(0px, calc(4.25rem - 0.0349 * var(--cg-hero-w)));
      --cg-villa-top: calc(100svh - var(--cg-lift) - 0.3707 * var(--cg-hero-w));
    }
    .hero_description { margin-top: calc((var(--cg-villa-top) - var(--cg-mark-foot) - var(--cg-tag-h)) / 3); }
    .section_hero .img.is-hero { top: auto; bottom: var(--cg-lift); left: calc(50% - var(--cg-hero-w) / 2); width: var(--cg-hero-w); height: auto; max-width: none; object-fit: fill; }
  }
  /* The upright file, chosen by the <picture> below a 3:4 window: 9:16, its tower 97.42% of its width above the
     picture's foot and its rock 24.89% above it (the villa itself 72.53% of the width tall). Same lift and fit. */
  @media (max-width: 991px) and (max-aspect-ratio: 3/4) {
    .section_hero {
      --cg-hero-w: min(max(100vw, 56.25svh), calc((100svh - var(--cg-words)) / 0.9742), calc((100svh - 4.25rem - var(--cg-words)) / 0.7253));
      --cg-lift: max(0px, calc(4.25rem - 0.2489 * var(--cg-hero-w)));
      --cg-villa-top: calc(100svh - var(--cg-lift) - 0.9742 * var(--cg-hero-w));
    }
  }
  /* A phone on its side: no room under the words, so the villa stands on the left, centred between the nav and the
     bottom edge, and the words take the column on the right, centred, with "Book a call" at its foot. The villa's
     outline fills 25.1%-68.6% of the wide file's width and 34.1%-93.8% of its height. */
  @media (max-width: 991px) and (min-aspect-ratio: 13/10) and (max-height: 540px) {
    .section_hero { --cg-col: max(var(--cg-logo-w), 18.5rem); }
    .container-full.is-hero { align-items: flex-end; }
    .hero_content { width: var(--cg-col); }
    .hero_description { margin-top: 1.25rem; }
    .hero_links { inset: auto 0 0 auto; width: var(--cg-col); }
    .section_hero .img.is-hero {
      --cg-room: calc(100vw - 2 * var(--cg-g) - var(--cg-col) - 1rem);
      --cg-hero-w: min(calc((100svh - var(--cg-nav) - 2rem) / 0.3358), calc(var(--cg-room) / 0.435));
      left: calc(var(--cg-g) + var(--cg-room) / 2 - 0.4685 * var(--cg-hero-w));
      top: calc((100svh + var(--cg-nav)) / 2 - 0.3597 * var(--cg-hero-w)); bottom: auto;
    }
  }
}

html.cg-motion .cg-open { height: 720vh; }
html.cg-motion .cg-open_sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--cg-white); }
html.cg-motion .cg-open .section_hero { position: absolute; inset: 0; height: auto; z-index: 5; pointer-events: none; }
html.cg-motion .cg-open .section_hero a { pointer-events: auto; }
html.cg-motion .cg-open .section_hero .img.is-hero { visibility: hidden; }
html.cg-motion .cg-gathering-static { display: none; }
html.cg-motion .cg-stage { display: block; position: absolute; inset: 0; pointer-events: none; }
.cg-stage_canvas { position: absolute; bottom: 0; width: max(100%, calc(100svh * 16 / 9)); aspect-ratio: 16 / 9; left: calc((100% - max(100%, calc(100svh * 16 / 9))) * 0.5); }
.cg-gathering { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; transform-origin: var(--split) 100%; will-change: transform, opacity; }
.cg-chair, .cg-chair-turn { position: absolute; z-index: 3; height: auto; display: block; will-change: transform, opacity; }
.cg-chair-turn { opacity: 0; mix-blend-mode: multiply; }   /* its white ground disappears into the page; the floor shadow stays */
.cg-door { position: absolute; inset: 0; z-index: 4; transform-origin: var(--split) 100%; will-change: transform; }
.cg-door img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cg-door--l { clip-path: inset(0 calc(100% - var(--split) - 1px) 0 0); }
.cg-door--r { clip-path: inset(0 0 0 var(--split)); }
html.cg-motion .cg-caption { position: absolute; z-index: 2; left: 0; right: 0; top: 15svh; width: min(46rem, calc(100% - 3rem)); max-width: none; margin: 0 auto; padding: 0; opacity: 0; pointer-events: none; }
html.cg-motion .cg-open_text { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; padding: 5.5rem var(--_sizes---fixed--xxlarge) calc(max(100svh, 56.25vw) * 0.365); --slogan-size: clamp(1.1rem, min(2.7vw, 3.75svh), 3.4rem); }
html.cg-motion .slogan_wrap { margin: 0; }
html.cg-motion .slogan_slot { visibility: hidden; }
html.cg-motion .slogan_stack { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
html.cg-motion .slogan_key { display: block; color: var(--cg-red); white-space: nowrap; font-size: 1.8em; line-height: 1.1; letter-spacing: -0.012em; text-transform: uppercase; font-weight: 400; transform-origin: 0 0; will-change: transform; }
html.cg-motion .slogan_cta { pointer-events: auto; }
/* On an ultrawide window the stage stops at --cg-stage-w and is centred with white either side (every picture on it
   has a pure white ground). It clips its own doors so they leave at its edges, and the slogan keeps its room above
   the chair (36.5% of the stage's height). Without motion, the still hero follows the same width. */
@supports (height: 1svh) {
  html.cg-motion .cg-stage_canvas { width: var(--cg-stage-w); left: calc((100% - var(--cg-stage-w)) / 2); overflow: hidden; }
  html.cg-motion .cg-open_text { padding-bottom: calc(var(--cg-stage-w) * 0.5625 * 0.365); }
  @media (min-width: 992px) {
    html:not(.cg-motion) .section_hero { overflow: hidden; }
    html:not(.cg-motion) .section_hero .img.is-hero { top: auto; bottom: 0; left: calc(50% - var(--cg-stage-w) / 2); width: var(--cg-stage-w); height: auto; max-width: none; object-fit: fill; }
  }
}
/* The caption over the gathering. On wide, short windows (a 1366x768 laptop in a browser, any ultrawide) the figures
   stand taller in the window, and the caption's last line sat on the head of the standing figure, 43.6% down the
   gathering picture (31.73% of the stage's width above its foot). The caption now rises just enough to clear that head
   by 1rem, never higher than 1rem under the nav; only where even that is too little room (a 21:9 monitor) does its
   type shrink, to fit its three lines (3.6 times the type size). Everywhere else it stays at 15% down the window. */
@supports (height: 1svh) {
  html.cg-motion .cg-caption {
    --cg-heads: calc(100svh - 0.3173 * var(--cg-stage-w));
    --cg-cap: min(var(--_typography---4xl--font-size), calc((var(--cg-heads) - 5.75rem) / 3.6));
    font-size: var(--cg-cap);
    top: max(4.75rem, min(15svh, calc(var(--cg-heads) - 1rem - 3.6 * var(--cg-cap))));
    text-wrap: balance;   /* even lines, so a smaller caption never leaves "Careggi." alone on the last one */
  }
}

/* ---------- Results: four published figures, on the one red surface of the page ---------- */
#results { background: var(--cg-red); color: var(--cg-white); }
#results .cg-numbers_grid, #results .cg-number + .cg-number { border-color: rgba(255, 255, 255, 0.28); }
#results .cg-number_value { color: var(--cg-white); }
#results .text-xs { color: rgba(255, 255, 255, 0.8); }
.cg-numbers_grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--cg-line); border-bottom: 1px solid var(--cg-line); }
.cg-number { padding: 3rem 1.5rem 2.75rem 0; display: flex; flex-direction: column; gap: 1rem; }
.cg-number + .cg-number { padding-left: 1.5rem; border-left: 1px solid var(--cg-line); }
.cg-number_value { font-size: clamp(2.75rem, 5.6vw, 5.25rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- The system: pinned while the scroll steps through its five parts ---------- */
.cg-sys .container-large.is-exhibitions { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); align-items: center; min-height: 0; column-gap: 4rem; }
.cg-sys .exhibitions_left { gap: 2rem; justify-content: flex-start; }
.cg-svc_images { width: 100%; padding: 0; aspect-ratio: 3 / 2; }
.cg-svc_img { transition: transform 0.8s cubic-bezier(0.2, 0, 0, 1); will-change: transform; }
.cg-svc_list { width: 100%; }
.cg-svc_item { appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; padding: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; }
.cg-svc_title { display: flex; align-items: baseline; gap: 1.25rem; }
.cg-svc_title .text-xs { min-width: 1.5rem; }
.cg-svc_desc { display: block; max-width: 31rem; margin: 0.85rem 0 0 2.75rem; font-size: 1rem; line-height: 1.5; opacity: 0.92; }
.cg-sys_sticky { padding: var(--_sizes---padding-section--medium) 0; }
html.cg-motion .cg-sys_track { height: calc(100svh + 5 * 62vh); }
html.cg-motion .cg-sys_sticky { position: sticky; top: 0; height: 100svh; padding: 0; display: flex; flex-direction: column; justify-content: center; }
html.cg-motion .cg-svc_item { opacity: 0.3; transition: opacity 0.3s ease; }
html.cg-motion .cg-svc_item.is-active, html.cg-motion .cg-svc_item:focus-visible { opacity: 1; }
html.cg-motion .cg-svc_desc { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.45s ease; }
html.cg-motion .cg-svc_item.is-active .cg-svc_desc { max-height: 11rem; margin-top: 0.85rem; opacity: 0.92; }
/* The fixed nav covers the window's top 3.75rem, so the pinned list centres in the space under it, not in the whole
   window; on a short window (a laptop once the browser's own bars are counted) its first line went under the nav.
   There the button also sits closer to the list. */
html.cg-motion .cg-sys_sticky { padding-top: 3.75rem; }
@media (max-height: 820px) { html.cg-motion .cg-sys .exhibitions_right { row-gap: 2.5rem; } }

/* ---------- Partner clinics: each clinic is one block, built the same way ---------- */
.cg-clinic_head { display: flex; align-items: center; gap: 1.25rem; }
.cg-clinic_head .text-4xl { line-height: 1.1; margin-bottom: 0.5rem; }
.cg-clinic_logo { width: 4.25rem; height: 4.25rem; flex: none; border-radius: 50%; border: 1px solid var(--cg-line); }
.cg-clinic_figures { display: grid; grid-template-columns: repeat(3, auto); gap: 2.5rem; }
.cg-clinic_figure { display: flex; flex-direction: column; gap: 0.75rem; }
.cg-clinic_value { font-size: clamp(2.5rem, 4.4vw, 4.25rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 500; font-variant-numeric: tabular-nums; }
.cg-link { display: inline-flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
/* Each clinic is one block, built the same way: its name plate, then a picture beside its words and figures.
   Nassim has the film and the doctor's lines; Aquila has its photograph and its own statement. Same scale. */
.clinic { padding: 4rem 0 5rem; border-top: 1px solid var(--cg-line); }
.cg-clinic-first { margin-top: 4rem; }
.clinic:last-child { border-bottom: 1px solid var(--cg-line); }
.clinic_plate { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 3rem; }
.clinic_plate .cg-clinic_head { gap: 1.75rem; }
.clinic_plate .cg-clinic_logo { width: 6.5rem; height: 6.5rem; }
.clinic_plate .cg-clinic_head .text-4xl { margin-bottom: 0.5rem; color: var(--cg-stone); font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: 1.05; }
.clinic_grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: center; }
.clinic_video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.clinic_video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The doctor in soft studio light, lifted onto the page's white. Nothing behind him; the crop at the bottom of
   the frame dissolves so he is not standing on a line. */
.clinic_portrait { display: flex; justify-content: center; align-items: flex-end; }
.clinic_portrait img { display: block; width: min(100%, 28rem); height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, #000 84%, transparent 100%); }
.clinic_quote { margin: 0; color: var(--cg-stone); font-size: clamp(1.6rem, 2.9vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 400; }
.clinic_quote em { font-style: normal; color: var(--cg-red); }
.clinic_who { margin-top: 1.75rem; }
.clinic_figs { display: flex; gap: 3rem; margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--cg-line); }
.clinic_lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 4.5rem; }
.clinic_line { color: var(--cg-stone); font-size: 1.2rem; line-height: 1.35; }
.clinic_line small { display: block; margin-top: 0.75rem; color: var(--cg-red); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

@media (max-width: 991px) {
  .clinic_grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .clinic_lines { grid-template-columns: 1fr; gap: 2rem; }
  .clinic_plate { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .clinic_figs { flex-wrap: wrap; gap: 2rem; }
}

/* ---------- Guarantee ---------- */
.cg-points { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 5rem; border-top: 1px solid var(--cg-line); border-bottom: 1px solid var(--cg-line); }
.cg-point { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem 1.5rem 2.25rem 0; }
.cg-point + .cg-point { padding-left: 1.5rem; border-left: 1px solid var(--cg-line); }
.cg-point_text { font-size: 1.375rem; line-height: 1.25; letter-spacing: -0.01em; }

/* ---------- Origin: the path up to Careggi ----------
   Plain version: the hillside as a picture, then the dates as a list. Scroll-driven version: the hillside is pinned
   and tall, the scroll climbs it, the path reddens below a line, and one date at a time shows beside it. */
.cg-climb_scene { position: relative; overflow: hidden; }
.cg-climb_img { display: block; width: 100%; height: auto; aspect-ratio: 2000 / 3556; }   /* every size of the file draws the same box */
.cg-climb_img--stone { display: none; }   /* the plain version shows the hill with its path already red */
.cg-climb_text { display: flex; flex-direction: column; gap: 2rem; padding: 3.5rem 0 0; }
.cg-climb_head { max-width: 30rem; }
.cg-climb_steps { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 3rem; }
.cg-climb_date { font-size: clamp(3rem, 6vw, 5.5rem); line-height: 0.95; letter-spacing: -0.045em; font-weight: 500; }
.cg-climb_line { margin-top: 1rem; max-width: 26rem; font-size: 1.25rem; line-height: 1.4; }
.cg-climb_ticks { display: none; }

html.cg-motion .cg-climb_track { height: calc(100svh + 340vh); }
html.cg-motion .cg-climb_sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
html.cg-motion .cg-climb_scene { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; }
html.cg-motion .cg-climb_img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none; transform-origin: 50% 0; will-change: transform; }
html.cg-motion .cg-climb_img--stone { display: block; }
html.cg-motion .cg-climb_red { display: block; position: absolute; inset: 0; --line: 60%;
  -webkit-mask-image: linear-gradient(to bottom, transparent calc(var(--line) - 7%), #000 calc(var(--line) + 7%)); mask-image: linear-gradient(to bottom, transparent calc(var(--line) - 7%), #000 calc(var(--line) + 7%)); }
html.cg-motion .cg-climb_copy { position: relative; height: 100%; display: flex; align-items: center; }
html.cg-motion .cg-climb_text { width: 38%; padding: 0; }
html.cg-motion .cg-climb_steps { position: relative; margin: 1rem 0 0; min-height: 15rem; display: block; }
html.cg-motion .cg-climb_step { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
html.cg-motion .cg-climb_step.is-on { opacity: 1; transform: none; }
/* The dates are stacked in one grid cell, so the stack is as tall as its longest entry rather than a fixed 15rem. */
html.cg-motion .cg-climb_steps { display: grid; min-height: 0; }
html.cg-motion .cg-climb_step { position: relative; grid-area: 1 / 1; }
/* Centred in the space under the fixed nav (its "Origin" label went under the nav on short windows), and on a short
   window the words tighten so the whole column fits between the nav and the bottom edge. */
html.cg-motion .cg-climb_copy { padding-top: 3.75rem; }
@media (max-height: 820px) {
  html.cg-motion .cg-climb_text { gap: 1.25rem; }
  html.cg-motion .cg-climb_head { font-size: min(var(--_typography---4xl--font-size), 5.4svh); }
  html.cg-motion .cg-climb_date { font-size: min(5.5rem, 6vw, 10svh); }
}
html.cg-motion .cg-climb_ticks { display: flex; gap: 0.5rem; }
.cg-climb_tick { width: 2.25rem; height: 2px; background: var(--cg-line); transition: background-color 0.4s ease; }
.cg-climb_tick.is-on { background: var(--cg-red); }

/* ---------- Mission ---------- */
.cg-mission_grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: 4rem; align-items: center; }
.cg-mission_media img { display: block; width: 100%; height: auto; }
.cg-mission_text { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; max-width: 40rem; }
.cg-mission_text .text-2xl { opacity: 0.86; }

/* ---------- Q&A ---------- */
.cg-faq_col { width: 100%; }
.cg-faq_list { width: 100%; border-bottom: 1px solid var(--cg-line); }
.cg-faq_item { border-top: 1px solid var(--cg-line); }
.cg-faq_item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 2.5rem 1fr 1.25rem; align-items: baseline; gap: 0.5rem; padding: 1.4rem 0; }
.cg-faq_item summary::-webkit-details-marker { display: none; }
.cg-faq_q { font-size: 1.375rem; line-height: 1.3; letter-spacing: -0.01em; }
.cg-faq_mark { position: relative; width: 0.9rem; height: 0.9rem; align-self: center; justify-self: end; }
.cg-faq_mark::before, .cg-faq_mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform 0.3s ease; }
.cg-faq_mark::after { transform: rotate(90deg); }
.cg-faq_item[open] .cg-faq_mark::after { transform: rotate(0deg); }
.cg-faq_a { padding: 0 1.75rem 1.6rem 3rem; max-width: 40rem; }
.cg-faq_a p { margin: 0 0 0.9rem; font-size: 1rem; line-height: 1.6; opacity: 0.9; }
.cg-faq_a p:last-child { margin-bottom: 0; }

/* ---------- Type colour: headings red, supporting paragraphs in the site's black ---------- */
.cg-mission_text .text-2xl, .cg-svc_desc, .cg-climb_line, .cg-faq_a p { color: var(--cg-stone); opacity: 1; }

/* ---------- The last call to action: a real button ---------- */
.cg-button--pill { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1.05rem 1.6rem; background: var(--cg-red); color: var(--cg-white); border-radius: 999px; text-decoration: none; }
.cg-button--pill .icon-1x1-xsmall { display: none; }
.cg-button--pill .text-xs { color: var(--cg-white); font-size: 0.8rem; letter-spacing: 0.12em; }

/* ---------- The nav stays: fixed to the top, white at 85% with blur so the renders show through; the template's
   hide-on-scroll is overridden. ---------- */
/* The nav's wordmark on the home page: hidden while the big wordmark is on screen, so the first screen shows the name
   once, and faded in as soon as the big one has gone (js "The nav's wordmark"). Other pages always show it. */
.cg-logo--nav { transition: opacity .35s ease; }
html.cg-home-top .cg-logo--nav { opacity: 0; }
html.cg-home-top .navbar_logo-link { pointer-events: none; }

/* ---------- The phone menu: a writing scroll ----------
   The card unrolls from under the nav like a scroll: the roller at its head stays put, the roller at its foot travels
   down and uncovers the sections, and closing rolls it back up. The template's slide is switched off but its timings
   are kept: on closing it holds the menu for 0.5s, which is when the scroll rolls up. A browser without registered
   custom properties simply shows the card without the roll. */
@property --cg-unroll { syntax: '<number>'; inherits: true; initial-value: 1; }
@keyframes cg-unroll { from { --cg-unroll: 0; } to { --cg-unroll: 1; } }
@keyframes cg-reroll { from { --cg-unroll: 1; } to { --cg-unroll: 0; } }
@media (max-width: 991px) {
  .w-nav-overlay [data-nav-menu-open] { transform: none !important; }
  .navbar:has(.w-nav-button.w--open) .w-nav-overlay [data-nav-menu-open] { animation: cg-unroll .8s cubic-bezier(.22, .7, .2, 1) both; }
  .navbar:has(.w-nav-button:not(.w--open)) .w-nav-overlay [data-nav-menu-open] { animation: cg-reroll .45s cubic-bezier(.55, 0, .8, .2) both; }
  .navbar_list { background: #fffdf8; padding-top: 1.7rem; padding-bottom: 2rem;
    clip-path: inset(0 -3rem calc(100% - var(--cg-unroll) * (100% - .75rem) - .375rem) -3rem); }   /* the paper ends under the middle of the travelling roller */
  /* the two rollers: ivory rods shaded like the marble renders, with a red knob at each end */
  .w-nav-overlay [data-nav-menu-open]::before, .w-nav-overlay [data-nav-menu-open]::after {
    content: ""; position: absolute; z-index: 2; left: -.45rem; right: -.45rem; height: .75rem; border-radius: .375rem; pointer-events: none;
    background:
      radial-gradient(circle at .375rem 50%, #b4191b 0 .2rem, #901112 .22rem .3rem, #5e0b0c .32rem .375rem, transparent .39rem),
      radial-gradient(circle at calc(100% - .375rem) 50%, #b4191b 0 .2rem, #901112 .22rem .3rem, #5e0b0c .32rem .375rem, transparent .39rem),
      linear-gradient(180deg, #e9e2d8 0%, #ffffff 36%, #d9d0c4 76%, #b3a898 100%);
    box-shadow: 0 .15rem .35rem rgba(46, 44, 42, .25); }
  .w-nav-overlay [data-nav-menu-open]::before { top: 0; }
  .w-nav-overlay [data-nav-menu-open]::after { top: calc(var(--cg-unroll) * (100% - .75rem));
    box-shadow: 0 .15rem .35rem rgba(46, 44, 42, .25), 0 -.35rem .6rem -.4rem rgba(46, 44, 42, .3); }
}
@media (prefers-reduced-motion: reduce) { .navbar .w-nav-overlay [data-nav-menu-open] { animation: none !important; } }

/* The menu on phones and tablets is the template's dropdown card, which was black on black and is now white on white:
   it had no edge, so its links read as part of the page underneath. A hairline and a soft shadow make it a panel. */
@media (max-width: 991px) { .navbar_list { border: 1px solid var(--cg-line); box-shadow: 0 1.25rem 2.5rem rgba(46, 44, 42, 0.12); } }
.navbar { position: fixed !important; top: 0; left: 0; right: 0; z-index: 99; transform: none !important; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cg-line); }

/* Arriving at careggi.com/#faq and the like: the browser's own jump lands a section where a click on its link does,
   just under the fixed nav with 24px of air. The nav is 69px tall on phones, 77px on tablets and 60px from 992px up;
   careggi.js sets --cg-land to the measured height + 24px. Safari repeats its jump after the page has loaded, over
   anything a script did, so the two must agree. Pinned scenes land at their top (next rule). */
section[id], footer[id] { scroll-margin-top: var(--cg-land, 93px); }
@media (min-width: 768px) { section[id], footer[id] { scroll-margin-top: var(--cg-land, 101px); } }
@media (min-width: 992px) { section[id], footer[id] { scroll-margin-top: var(--cg-land, 84px); } }
html.cg-motion #system, html.cg-motion #origin { scroll-margin-top: 0; }

/* ---------- Reading progress: no scrollbar; a red line along the top edge, under the nav, grows as the page is read ---------- */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }
.cg-progress { position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 100; background: var(--cg-red); transform-origin: 0 0; transform: scaleX(0); pointer-events: none; }

/* ---------- The cursor: a red dot that sits on the pointer and opens into a ring over anything you can click. A red dot that follows the pointer a beat behind, and opens into a ring over anything you can
   click. Only where there is a real pointer; touch screens and reduced-motion keep the system cursor. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.cg-cursor, html.cg-cursor a, html.cg-cursor button, html.cg-cursor summary, html.cg-cursor [role="button"] { cursor: none; }
  html.cg-cursor iframe { cursor: auto; }
  .cg-cursor_dot { position: fixed; left: 0; top: 0; z-index: 1000; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--cg-red); pointer-events: none; opacity: 0; transition: width 0.25s cubic-bezier(0.2, 0, 0, 1), height 0.25s cubic-bezier(0.2, 0, 0, 1), margin 0.25s cubic-bezier(0.2, 0, 0, 1), background-color 0.25s, border-color 0.25s, opacity 0.2s; border: 1.5px solid var(--cg-red); box-sizing: border-box; mix-blend-mode: multiply; }
  .cg-cursor_dot.is-on { opacity: 1; }
  .cg-cursor_dot.is-link { width: 44px; height: 44px; margin: -22px 0 0 -22px; background: rgba(144, 17, 18, 0.08); }
  .cg-cursor_dot.is-down { width: 8px; height: 8px; margin: -4px 0 0 -4px; }
}

/* ---------- Footer loop: driven by CSS on the compositor, not by a script ----------
   Two identical copies slide left by exactly one copy's width and repeat; the seam between copies gets the same gap
   as the items inside a copy, so the rhythm never hiccups. Images are sized before they load, so nothing shifts. */
.footer_loop { overflow: hidden; }
.footer_loop-content { flex: none; will-change: transform; backface-visibility: hidden; animation: cg-footer-loop 20s linear infinite; }
.footer_loop-image { aspect-ratio: 5 / 3; height: auto; object-fit: contain; }
/* The chair alone: as tall as the villa beside it, with the same air either side that the villa's picture carries
   inside its own frame (about 15% of its width), so the wordmark sits the same distance from both. */
.footer_loop-image.is-2 { width: auto; height: 15rem; aspect-ratio: auto; margin: 0 3.75rem; }
@media screen and (max-width: 991px) { .footer_loop-image.is-2 { height: 10rem; margin: 0 2.5rem; } }
@media screen and (max-width: 767px) { .footer_loop-image.is-2 { height: 7.5rem; margin: 0 1.9rem; } }
@keyframes cg-footer-loop { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .footer_loop-content { animation: none; } }
.footer_loop-content { padding-right: var(--_sizes---fixed--3-5rem\<deleted\|variable-26168126-c7ae-d95e-fc39-dd33441d2577\>); }
@media screen and (max-width: 991px) { .footer_loop-content { padding-right: var(--_sizes---fixed--huge); } }
@media screen and (max-width: 767px) { .footer_loop-content { padding-right: var(--_sizes---fixed--xlarge); } }

/* ---------- Footer: the wordmark in its own red, running across white ---------- */
.cg-loop-logo { flex: none; height: clamp(4.5rem, 10.75vw, 9.7rem); color: var(--cg-red); }
.cg-loop-logo svg { display: block; height: 100%; width: auto; }
footer#contact { padding-bottom: 3.5rem; }

/* ---------- Smaller screens ---------- */
@media (max-width: 991px) {
  .cg-points { grid-template-columns: 1fr 1fr; }
  .cg-point:nth-child(3) { padding-left: 0; border-left: 0; }
  .cg-point:nth-child(n + 3) { border-top: 1px solid var(--cg-line); }
  .cg-numbers_grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cg-number:nth-child(3) { padding-left: 0; border-left: 0; }
  .cg-number:nth-child(n + 3) { border-top: 1px solid var(--cg-line); }
  .cg-sys .container-large.is-exhibitions { grid-template-columns: 1fr; row-gap: 2.5rem; }
  .cg-svc_img + .cg-svc_img { display: none; }
  .cg-mission_grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .cg-mission_media { max-width: 24rem; }
}
/* A clinic's three figures stay on one row, as on wider screens, instead of the third falling onto a row of its own
   (it did below about 530px). Sized so "$100k+" (3.53 times its type size) fits a third of the row on a 320px phone. */
@media (max-width: 767px) {
  .clinic_figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .cg-clinic_value { font-size: min(2.5rem, calc(9.4vw - 0.4rem)); }
}
@media (max-width: 479px) {
  /* "$4.3M+" is 3.5 times its type size wide; below 390px it now shrinks to fit its half of the band instead of
     pushing the right-hand column off a 320px screen. */
  .cg-number_value { font-size: min(2.75rem, calc(14.2vw - 0.75rem)); }
  .cg-svc_desc { margin-left: 0; }
  .cg-svc_title { gap: 0.75rem; }
  .cg-clinic_figures { grid-template-columns: 1fr 1fr; }
  .cg-faq_a { padding-left: 0; }
  .cg-faq_item summary { grid-template-columns: 2rem 1fr 1rem; }
  .cg-faq_q { font-size: 1.15rem; }
}