/* ==========================================================================
   Rofchem Pharmacy — design system
   Loaded last, after the legacy theme (bootstrap + style.css + responsive.css).

   Rebuilt from a design audit. The previous layer had no loaded typeface, 34
   font sizes, 11 border radii, six "coloured" category tiles that were all the
   same pale blue, shadows at an alpha that never rendered, and a fixed-px hero
   that only fitted the fold on a 905px-tall viewport by luck. Everything below
   is tokenised so it can't drift back.
   ========================================================================== */

:root {
    /* --- type ------------------------------------------------------------ */
    --rc-display: 'Figtree', 'Segoe UI', system-ui, sans-serif;
    --rc-text: 'Figtree', 'Segoe UI', system-ui, sans-serif;

    --t-xs: 12px;
    --t-sm: 14px;
    --t-base: 16px;
    --t-md: 18px;
    --t-lg: 22px;
    --t-xl: 28px;
    --t-2xl: 36px;
    --t-3xl: 46px;

    /* --- ink: three real steps, cool undertone so it sits with the blue --- */
    --rc-ink: #0d1626;   /* headings   18.1:1 on white */
    --rc-body: #445063;  /* body        8.2:1 */
    --rc-muted: #5c6879; /* captions    5.7:1 */

    /* --- brand blue as a ramp, not one hex doing every job ---------------- */
    --rc-b600: #386cbc;  /* logo + large brand fills */
    --rc-b700: #27508f;  /* buttons, links        7.98:1 */
    --rc-b800: #1f4684;  /* topbar, bands, eyebrows  9.26:1 */
    --rc-b900: #16365f;  /* footer ground        12.16:1 */

    --rc-primary: var(--rc-b700);
    --rc-accent: var(--rc-b800);

    /* one warm note, used at ~5% coverage: arrows, bullets, the hero rule */
    --rc-warm: #b9531f;

    /* --- surfaces: three visible steps ----------------------------------- */
    --rc-white: #ffffff;
    --rc-surface: #eef3fa;
    --rc-line: #dbe3ee;

    /* --- elevation: dark ink, two layers, so it actually renders ---------- */
    --sh-1: 0 1px 2px rgba(13, 22, 38, .06), 0 2px 8px rgba(13, 22, 38, .06);
    --sh-2: 0 2px 4px rgba(13, 22, 38, .07), 0 12px 32px rgba(13, 22, 38, .12), 0 24px 56px rgba(13, 22, 38, .08);

    /* --- shape: three radii, nothing else --------------------------------- */
    --r-sm: 10px;
    --r-md: 20px;

    /* --- space ------------------------------------------------------------ */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
    --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px;

    /* --- chrome height, used by the hero to size itself ------------------- */
    --rc-topbar-h: 32px;
    --rc-header-h: 77px;

    --rc-width: min(1440px, 100% - 120px);

    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
    font-family: var(--rc-text);
    color: var(--rc-body);
    background: var(--rc-white);
    font-size: var(--t-base);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--rc-display);
    color: var(--rc-ink);
    /* Figtree is a lighter, more even face than the Bricolage Grotesque this
       replaced, so headings take one step more weight and slightly less
       negative tracking to hold the same presence. */
    letter-spacing: -.018em;
    font-weight: 700;
}

p { color: var(--rc-body); }
a { color: var(--rc-primary); text-decoration: none; }
a:hover { color: var(--rc-b800); }
::selection { background: #ffd166; color: var(--rc-ink); }

/* Two-tone so the ring is visible on white AND on the blue button. */
:focus-visible {
    outline: 3px solid #0d1626;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px #ffd166;
    border-radius: 4px;
}

button, a { -webkit-tap-highlight-color: transparent; }

.rc-container { width: var(--rc-width); max-width: none; margin-inline: auto; }

.rc-skip { position: fixed; left: 20px; top: -100px; z-index: 9999999; background: #fff; padding: 12px 22px; }
.rc-skip:focus { top: 10px; }

/* ==========================================================================
   Motion primitives  (driven by assets/js/rofchem-motion.js)
   ========================================================================== */
.rc-will-reveal {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    will-change: opacity, transform;
}
[data-rc-reveal="left"].rc-will-reveal  { transform: translate3d(-28px, 0, 0); }
[data-rc-reveal="right"].rc-will-reveal { transform: translate3d(28px, 0, 0); }
[data-rc-reveal="down"].rc-will-reveal  { transform: translate3d(0, -22px, 0); }
[data-rc-reveal="scale"].rc-will-reveal { transform: scale(.94); }
[data-rc-reveal="mask"].rc-will-reveal  { opacity: 1; clip-path: inset(0 0 100% 0); }

.rc-will-reveal.rc-in {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0);
}

/* Typing caret. --rc-type-len reserves the final width so nothing reflows. */
.rc-typing::after,
.rc-typed::after {
    content: '';
    display: inline-block;
    width: .06em;
    height: .9em;
    margin-left: .06em;
    vertical-align: -.08em;
    background: var(--rc-warm);
    animation: rc-caret .9s steps(1) infinite;
}
.rc-typed::after { animation-delay: .2s; opacity: .55; }
@keyframes rc-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* Elements that drift against the scroll, and cards that tilt to the pointer. */
[data-rc-parallax] { transform: translate3d(0, var(--rc-shift, 0), 0); }
[data-rc-tilt] {
    transform: perspective(900px) rotateX(var(--rc-rx, 0deg)) rotateY(var(--rc-ry, 0deg));
    transition: transform .35s var(--ease);
}

/* ==========================================================================
   Topbar + header
   ========================================================================== */
.rc-topbar {
    background: var(--rc-b800);
    color: #fff;
    font-size: var(--t-xs);
    letter-spacing: .01em;
    padding: 6px 0;
}
.rc-topbar .rc-container { display: flex; justify-content: space-between; gap: var(--s-5); align-items: center; }
.rc-topbar a { color: inherit; }
.rc-topbar a:hover { color: #cfe0f7; }
.rc-topbar i { font-size: 16px; vertical-align: -3px; margin-right: 6px; }

.rc-header {
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.6) blur(12px);
    border-bottom: 1px solid var(--rc-line);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow .3s var(--ease);
}
.rc-header.rc-stuck { box-shadow: var(--sh-1); }

.rc-nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--s-6); }

.rc-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.rc-brand-logo { display: block; width: 196px; height: auto; }
.rc-brand-mark, .rc-brand-sub { display: none; }

.rc-navigation { display: flex; gap: var(--s-6); align-items: center; }
.rc-navigation > a {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--rc-body);
    white-space: nowrap;
    position: relative;
    padding: 4px 0;
}
.rc-navigation > a::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--rc-warm);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .32s var(--ease);
}
.rc-navigation > a:hover { color: var(--rc-ink); }
.rc-navigation > a:hover::after { transform: scaleX(1); }
.rc-navigation > a[aria-current] { color: var(--rc-ink); font-weight: 600; }
.rc-navigation > a[aria-current]::after { transform: scaleX(1); }

/* Same specificity trap as the CTA above: `.rc-navigation > a` (0,1,1) beats a
   bare `.rc-account` (0,1,0), so this padding-left was being replaced by the
   nav rule's `padding: 4px 0` and the divider sat flush against the label. */
.rc-navigation > .rc-account { padding-left: var(--s-5); }
.rc-account { border-left: 1px solid var(--rc-line); padding-left: var(--s-5); }
.rc-account i { font-size: 19px; vertical-align: -4px; margin-right: 4px; }

/* --- buttons ------------------------------------------------------------- */
.rc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    background: var(--rc-primary);
    border: 1px solid var(--rc-primary);
    border-radius: var(--r-sm);
    color: #fff !important;
    font-family: var(--rc-text);
    font-size: 15px;
    font-weight: 600;
    padding: 14px 24px;
    line-height: 1.4;
    box-shadow: var(--sh-1);
    /* A button is a flex item inside the header row and inside .rc-actions.
       Without these it gets shrunk below its own label and the text spills past
       the rounded edge - which is what happened to the header CTA. */
    white-space: nowrap;
    flex-shrink: 0;
    text-align: center;
    transition: background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease);
}
.rc-button:hover { background: var(--rc-b800); transform: translateY(-2px); box-shadow: var(--sh-2); }
.rc-button span { font-size: 1em; transition: transform .2s var(--ease); }
.rc-button:hover span { transform: translate(3px, -3px); }

/* Arrow marks.
   These were typed as text: ↗ (U+2197 NE) and → (U+2192 E). Figtree's
   served subset covers U+2191 and U+2193 but NEITHER of those, so both fell back
   to a system symbol font - literally a second typeface inside the button, at a
   different weight and baseline from the label. Drawn as a masked SVG instead:
   it takes currentColor, scales with font-size, and renders identically
   everywhere instead of depending on whatever the OS happens to substitute. */
.rc-ico {
    display: inline-block;
    width: .92em;
    height: .92em;
    vertical-align: -.1em;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
}
.rc-ico-ne {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7'/%3E%3Cpath d='M8.5 7H17v8.5'/%3E%3C/svg%3E");
}
.rc-ico-e {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13'/%3E%3Cpath d='m12.5 6.5 5.5 5.5-5.5 5.5'/%3E%3C/svg%3E");
}
/* The header CTA sits INSIDE <nav class="rc-navigation">, so `.rc-navigation > a`
   (0,1,1) out-specifies a bare `.rc-nav-cta` (0,1,0) and was overriding this
   button with the plain nav-link treatment: padding 4px 0, 14px text, weight
   500, and an ::after underline that drew an orange rule through the middle of
   the button whenever the CTA pointed at the current page.
   Matching on `.rc-navigation > .rc-nav-cta` (0,2,0) wins it back. */
.rc-navigation > .rc-nav-cta {
    padding: 16px 34px;
    font-size: 15px;
    font-weight: 600;
    color: #fff !important;
}
.rc-navigation > .rc-nav-cta::after { display: none; }
.rc-nav-cta { padding: 16px 34px; }

.rc-button-outline { background: transparent; color: var(--rc-primary) !important; box-shadow: none; }
.rc-button-outline:hover { background: var(--rc-primary); color: #fff !important; }
.rc-button-light { background: #fff; border-color: #fff; color: #17417c !important; }
.rc-button-light:hover { background: #eef3fa; color: #16365f !important; }

.rc-text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 600;
    font-size: var(--t-sm);
    color: var(--rc-primary);
}
.rc-text-link > span { transition: transform .2s var(--ease); }
.rc-text-link:hover > span { transform: translate(3px, -3px); }

.rc-menu-toggle { display: none; background: none; border: 1px solid var(--rc-line); border-radius: var(--r-sm); color: var(--rc-primary); font-size: 28px; line-height: 1; padding: 6px 9px; }

/* ==========================================================================
   Hero — sized from the viewport, so it fits the fold by construction
   ========================================================================== */
.rc-hero {
    background:
        radial-gradient(90rem 40rem at 88% -10%, #e3edfa 0%, rgba(227, 237, 250, 0) 60%),
        var(--rc-surface);
    overflow: hidden;
}
.rc-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--s-8);
    align-items: center;
    min-height: clamp(470px, calc(100svh - var(--rc-topbar-h) - var(--rc-header-h) - 26px), 620px);
    padding: var(--s-6) 0 var(--s-7);
}

.rc-eyebrow {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--rc-b800);
}
.rc-dot { display: inline-block; width: 7px; height: 7px; background: var(--rc-warm); border-radius: 50%; flex-shrink: 0; }

.rc-hero h1 {
    font-size: clamp(40px, 3.7vw, 60px);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: var(--s-4) 0 var(--s-4);
    max-width: none;
}
/* The word that types itself. It used to be set in Fraunces italic - a serif
   with strong thick/thin stroke contrast - dropped into the middle of a sans
   headline, which is what made the line read as uneven. It now inherits the
   headline face outright and is distinguished by colour alone, so "A healthier
   tomorrow." is one continuous, even piece of type. */
.rc-hero h1 em {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    letter-spacing: inherit;
    color: var(--rc-b700);
}
.rc-hero-copy > p { max-width: 46ch; font-size: var(--t-base); line-height: 1.65; }

.rc-actions { display: flex; align-items: center; gap: var(--s-5); margin-top: var(--s-6); flex-wrap: wrap; }

.rc-hero-note {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-top: var(--s-6);
    font-size: var(--t-sm);
    font-weight: 600;
    color: var(--rc-ink);
}
.rc-hero-note small { display: block; font-weight: 400; color: var(--rc-muted); font-size: 13px; }
.rc-note-icon { font-size: 27px; line-height: 1; color: var(--rc-warm); }

.rc-hero-visual { position: relative; height: 100%; min-height: 340px; }
.rc-hero-visual > picture, .rc-story-image > picture { display: block; width: 100%; height: 100%; }
.rc-hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% center;
    border-radius: var(--r-md);
    filter: saturate(1.04) contrast(1.02);
    box-shadow: var(--sh-2);
}

/* --- hero slideshow ------------------------------------------------------ *
   Rounding and elevation move onto the frame so slides can crossfade and
   scale inside it without their corners or shadow sliding around. The floating
   label and care card sit OUTSIDE this box, so they are never clipped. */
.rc-hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-2);
    isolation: isolate;
}
.rc-hero-slides > .rc-hero-slide { display: block; width: 100%; height: 100%; }
/* The first slide stays in flow and gives the frame its height. The rest
   stack on top of it, so the box never collapses mid-transition. */
.rc-hero-slides > .rc-hero-slide:not(:first-child) { position: absolute; inset: 0; }

.rc-hero-slide { opacity: 0; transition: opacity 1.1s var(--ease); }
.rc-hero-slide.is-active { opacity: 1; }
.rc-hero-slide .rc-hero-photo { border-radius: 0; box-shadow: none; }

/* Slow drift for as long as a slide is up. It runs longer than the swap
   interval, so the movement is still travelling when the next slide takes
   over and the panel is never completely still. */
@keyframes rc-kenburns {
    from { transform: scale(1.015) translate3d(0, 0, 0); }
    to   { transform: scale(1.12) translate3d(-1.6%, -1.4%, 0); }
}
.rc-hero-slide.is-active .rc-hero-photo { animation: rc-kenburns 7.5s var(--ease) forwards; }

/* Product slide. cosmetics.jpg is a 500px packshot cut out on white, not a
   photograph - "cover" would crop the bottles and magnify the softness. It is
   contained on a brand-tinted ground instead, and drifts more gently, so it
   reads as a deliberate product panel rather than a broken photo. */
.rc-hero-slide--product { background: linear-gradient(150deg, #eaf1fb 0%, #d8e6f8 100%); }
.rc-hero-slide--product .rc-hero-photo {
    object-fit: contain;
    padding: clamp(26px, 6%, 62px);
    filter: none;
    mix-blend-mode: multiply;
}
.rc-hero-slide--product.is-active .rc-hero-photo { animation: rc-kenburns-soft 7.5s var(--ease) forwards; }
@keyframes rc-kenburns-soft {
    from { transform: scale(.96) translate3d(0, 0, 0); }
    to   { transform: scale(1.05) translate3d(0, -1.5%, 0); }
}

/* Without JS the first slide is already .is-active, so it just shows. */
@media (prefers-reduced-motion: reduce) {
    .rc-hero-slide { transition: none; }
    .rc-hero-slide.is-active .rc-hero-photo { animation: none; }
}
.rc-photo-label {
    position: absolute;
    top: var(--s-4); left: var(--s-4);
    background: rgba(13, 22, 38, .55);
    backdrop-filter: blur(10px);
    color: #fff;
    border-radius: 100px;
    padding: 7px 14px;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-xs);
    letter-spacing: .1em;
    font-weight: 600;
    text-transform: uppercase;
}
.rc-photo-label .rc-dot { background: #ffd166; }

.rc-care-card {
    position: absolute;
    bottom: var(--s-4);
    left: var(--s-4);
    right: var(--s-4);
    display: flex;
    gap: var(--s-4);
    align-items: center;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    border-radius: var(--r-sm);
    padding: var(--s-4) var(--s-5);
    box-shadow: var(--sh-2);
    font-size: var(--t-md);
    line-height: 1.3;
    font-weight: 600;
    color: var(--rc-ink);
}
.rc-care-card small { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: var(--rc-muted); }
.rc-care-icon {
    display: grid; place-items: center;
    background: #e2ecf8;
    border-radius: 50%;
    width: 46px; height: 46px;
    font-size: 24px;
    color: var(--rc-b700);
    flex-shrink: 0;
}
.rc-care-cross { font-size: 40px; color: rgba(31, 70, 132, .16); margin-left: auto; line-height: 1; }

/* ==========================================================================
   Benefits strip
   ========================================================================== */
.rc-benefits { border-bottom: 1px solid var(--rc-line); background: #fff; }
.rc-benefits .rc-container { display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--s-5) 0; gap: var(--s-4); }
.rc-benefits span { font-size: var(--t-sm); display: flex; align-items: center; gap: var(--s-3); font-weight: 500; color: var(--rc-body); }
.rc-benefits i { font-size: 24px; color: var(--rc-b700); flex-shrink: 0; }

/* ==========================================================================
   Sections
   ========================================================================== */
.rc-section { padding: var(--s-9) 0; }
.rc-section-heading { display: flex; justify-content: space-between; align-items: end; gap: var(--s-6); margin-bottom: var(--s-7); }
.rc-section h2, .rc-section-heading h2 {
    font-size: clamp(28px, 2.4vw, var(--t-2xl));
    line-height: 1.15;
    font-weight: 600;
    margin: var(--s-3) 0 0;
}
.rc-section-heading > p { font-size: var(--t-base); margin: 0; }

/* --- category tiles: six genuinely different hues, each with its own ink -- */
.rc-category-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-4); }
.rc-category {
    position: relative;
    border-radius: var(--r-md);
    padding: var(--s-5) var(--s-4) var(--s-7);
    min-height: 210px;
    box-shadow: var(--sh-1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
    overflow: hidden;
}
.rc-category:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.rc-category-icon {
    font-size: 26px;
    display: grid; place-items: center;
    width: 50px; height: 50px;
    border-radius: 50%;
    background: rgba(13, 22, 38, .07);
    margin-bottom: var(--s-5);
    color: inherit;
}
.rc-category h3 { font-size: var(--t-md); letter-spacing: -.01em; line-height: 1.25; margin-bottom: var(--s-2); color: inherit; }
.rc-category p { font-size: 13px; line-height: 1.55; margin: 0; color: var(--rc-body); }
.rc-category-arrow { position: absolute; right: var(--s-4); bottom: var(--s-3); font-size: 18px; transition: transform .22s var(--ease); }
.rc-category:hover .rc-category-arrow { transform: translate(3px, -3px); }

.rc-mint  { background: #dde9fb; color: #17417c; }
.rc-peach { background: #f8e5da; color: #8a4220; }
.rc-sand  { background: #fbeecd; color: #79540a; }
.rc-blue  { background: #d7ebe5; color: #0c5543; }
.rc-lilac { background: #e3eddb; color: #3a5a1c; }
.rc-rose  { background: #fadfe4; color: #8c2b3b; }

/* --- story --------------------------------------------------------------- */
.rc-story { background: var(--rc-surface); }
.rc-story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-9); align-items: center; }
.rc-story-image { height: 440px; position: relative; }
.rc-story-image > img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: var(--r-md);
    filter: saturate(1.04) contrast(1.02);
    box-shadow: var(--sh-2);
}
.rc-story-tag {
    position: absolute;
    bottom: var(--s-5); left: var(--s-5); right: var(--s-5);
    background: var(--rc-b800);
    color: #fff;
    border-radius: var(--r-sm);
    padding: var(--s-4) var(--s-5);
    font-size: var(--t-lg);
    line-height: 1.35;
    box-shadow: var(--sh-2);
}
.rc-story-tag em { font-family: inherit; font-style: normal; color: #cfe0f7; }
.rc-story-copy h2 { margin: var(--s-4) 0 var(--s-5); font-size: clamp(30px, 2.6vw, 40px); }
.rc-story-copy p { font-size: var(--t-base); }
.rc-story-points { display: grid; gap: var(--s-3); font-size: var(--t-base); margin: var(--s-5) 0 var(--s-6); }
.rc-story-points i { color: var(--rc-warm); margin-right: var(--s-2); }

/* --- services ------------------------------------------------------------ */
.rc-service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.rc-service {
    display: flex; flex-direction: column;
    border: 1px solid var(--rc-line);
    border-radius: var(--r-md);
    padding: var(--s-6);
    background: #fff;
    box-shadow: var(--sh-1);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rc-service:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.rc-service-number { font-size: var(--t-xs); letter-spacing: .1em; color: var(--rc-muted); font-weight: 600; text-transform: uppercase; }
.rc-service > i { font-size: 34px; margin: var(--s-5) 0 var(--s-4); color: var(--rc-b700); }
.rc-service h3 { font-size: var(--t-lg); font-weight: 600; line-height: 1.25; }
.rc-service p { font-size: var(--t-base); margin: var(--s-3) 0 var(--s-5); }
.rc-service .rc-text-link { margin-top: auto; }

/* --- visit band ---------------------------------------------------------- */
.rc-visit { background: var(--rc-b800); color: #fff; }
.rc-visit-inner { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; padding: var(--s-9) 0; }
.rc-visit .rc-eyebrow { color: #cfe0f7; }
.rc-visit .rc-dot { background: #ffd166; }
.rc-visit h2 { color: #fff; font-size: clamp(30px, 2.8vw, 44px); font-weight: 600; margin: var(--s-4) 0 var(--s-4); line-height: 1.15; }
.rc-visit p { color: #dbe7f8; font-size: var(--t-base); }
.rc-visit .rc-button-light { margin-top: var(--s-4); }
.rc-visit-aside { display: flex; align-items: center; gap: var(--s-7); justify-content: center; font-size: var(--t-xl); line-height: 1.35; }
.rc-visit-aside em { font-family: inherit; font-style: normal; color: #cfe0f7; }
.rc-visit-cross { font-size: 130px; color: rgba(255, 255, 255, .22); font-weight: 300; line-height: 1; }

/* --- shop ---------------------------------------------------------------- *
   The product grid is generated by web/jquery/shop/category-products.php and
   injected over ajax, so it is restyled here by its existing class names
   rather than by rewriting the template. */
.shop-area, .blog-details-area { background: var(--rc-white); }

/* Equal-height cards. The bootstrap column is the flex item and the card fills
   it, so a long product name no longer makes one card taller than its row. */
.shop-area .row > [class*="col-"] { display: flex; margin-bottom: var(--s-5); }

.single-shop {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--rc-white);
    border: 1px solid var(--rc-line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-1);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.single-shop:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: #c6d6ec; }

/* Stock shots are packshots on white at wildly mixed sizes. Containing them in
   one fixed box lines every card up instead of each setting its own height. */
/* Product tile.
   This was a 4:3 box with 24px of padding and object-fit:contain, so a square
   packshot was letterboxed twice over - once by the padding, once by the
   ratio mismatch - and floated in the middle of a large empty panel.
   The stock is 1:1 (6 of 7 files measured exactly square), so a square tile
   with cover fills edge to edge and crops nothing. */
.single-shop .shop-img { background: #fff; border-bottom: 1px solid var(--rc-line); }
.single-shop .shop-img-1 { aspect-ratio: 1 / 1; display: block; padding: 0; overflow: hidden; }
.single-shop .shop-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.single-shop .shop-img-2 { display: none; }   /* duplicate of the same src */

.single-shop .shop-content { flex: 1; padding: var(--s-4) var(--s-5) 0; text-align: center; }
.single-shop .shop-content .title {
    display: block;
    font-size: var(--t-xs);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--rc-muted);
}
.single-shop .shop-content h3 {
    font-size: var(--t-md);
    font-weight: 700;
    line-height: 1.3;
    margin: var(--s-2) 0 var(--s-3);
    color: var(--rc-ink);
}
.single-shop .shop-content .price {
    display: block;
    font-size: var(--t-lg);
    font-weight: 700;
    color: var(--rc-warm);
}

.single-shop .purchase-bar { padding: var(--s-4) var(--s-5) var(--s-5); }
.single-shop .purchase-bar ul { display: none; }   /* all three icons are href="#" */

/* The theme's .default-btn is a tall pill with a sliding ::before overlay, and
   it let "Add To Cart" wrap onto two lines. */
.single-shop .purchase-bar .default-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 12px 18px;
    white-space: nowrap;
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.3;
    background: var(--rc-primary);
    border: 1px solid var(--rc-primary);
    border-radius: var(--r-sm);
    color: #fff;
    box-shadow: none;
    transition: background .22s var(--ease);
}
.single-shop .purchase-bar .default-btn::before { display: none; }
.single-shop .purchase-bar .default-btn:hover { background: var(--rc-b800); color: #fff; }

/* Stand-in for a product with no picture on file. Reads as a deliberate blank
   tile rather than the browser's broken-image icon. */
.rc-thumb-placeholder {
    display: grid;
    place-items: center;
    width: 80px; height: 80px;
    flex-shrink: 0;
    background: var(--rc-surface);
    border: 1px solid var(--rc-line);
    border-radius: var(--r-sm);
    color: #a9b6c8;
    font-size: 30px;
}
.rc-thumb-placeholder-lg { width: 100%; height: 100%; min-height: 150px; font-size: 52px; border: 0; background: transparent; }

/* Loading state for the ajax product grid. */
.rc-shop-loading { display: grid; place-items: center; gap: var(--s-4); padding: var(--s-9) var(--s-5); text-align: center; }
.rc-shop-loading p { margin: 0; color: var(--rc-muted); font-size: var(--t-sm); }
.rc-shop-spinner {
    width: 34px; height: 34px;
    border: 3px solid var(--rc-line);
    border-top-color: var(--rc-primary);
    border-radius: 50%;
    animation: rc-spin .8s linear infinite;
}
@keyframes rc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rc-shop-spinner { animation-duration: 2.4s; } }

/* Sidebar widgets */
.blog-widget {
    background: var(--rc-white);
    border: 1px solid var(--rc-line);
    border-radius: var(--r-md);
    padding: var(--s-5);
    box-shadow: var(--sh-1);
    margin-bottom: var(--s-5);
}
.blog-widget .title { font-size: var(--t-md); font-weight: 700; color: var(--rc-ink); margin-bottom: var(--s-4); }
.blog-widget .sigma-recent-posts img { border-radius: var(--r-sm); }

/* --- newsletter ---------------------------------------------------------- */
.rc-newsletter { background: var(--rc-surface); }
.rc-newsletter-inner {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: var(--s-8);
    align-items: center;
}
.rc-newsletter-copy h2 { margin: var(--s-4) 0 var(--s-4); font-size: clamp(28px, 2.6vw, 40px); }
.rc-newsletter-copy > p { max-width: 46ch; font-size: var(--t-base); }
.rc-newsletter-points { list-style: none; padding: 0; margin: var(--s-5) 0 0; display: grid; gap: var(--s-3); }
.rc-newsletter-points li { display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--rc-body); }
.rc-newsletter-points i { color: var(--rc-warm); font-size: 20px; flex-shrink: 0; }

.rc-newsletter-form {
    background: var(--rc-white);
    border: 1px solid var(--rc-line);
    border-radius: var(--r-md);
    padding: var(--s-6);
    box-shadow: var(--sh-2);
    display: grid;
    gap: var(--s-4);
}

/* Shared form field. The old signup declared its NAME box as type="email", so
   every real name entered failed the browser's own validation. */
.rc-field { display: grid; gap: 6px; }
.rc-field label {
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--rc-muted);
}
.rc-field input {
    width: 100%;
    font: inherit;
    color: var(--rc-ink);
    background: #fcfdff;
    border: 1px solid var(--rc-line);
    border-radius: var(--r-sm);
    padding: 13px 15px;
    transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.rc-field input::placeholder { color: #9aa5b4; }
.rc-field input:focus {
    outline: none;
    border-color: var(--rc-b600);
    box-shadow: 0 0 0 4px rgba(56, 108, 188, .16);
}

/* Invalid state lives ON the field, not in a note at the bottom of the form.
   The message box keeps its height at all times so showing or clearing an
   error never makes the rest of the form jump. */
.rc-field-error {
    font-size: 13px;
    line-height: 1.35;
    min-height: 1.35em;
    color: #b3261e;
    font-weight: 600;
}
.rc-field.is-invalid input { border-color: #b3261e; background: #fffafa; }
.rc-field.is-invalid input:focus {
    border-color: #b3261e;
    box-shadow: 0 0 0 4px rgba(179, 38, 30, .16);
}
.rc-newsletter-form .rc-button { width: 100%; margin-top: var(--s-2); }
.rc-newsletter-form .rc-button[disabled] { opacity: .72; cursor: progress; transform: none; }

.rc-newsletter-result { margin: 0; font-size: var(--t-sm); min-height: 1.25em; }
.rc-newsletter-result[data-state="ok"]    { color: #15703f; font-weight: 600; }
.rc-newsletter-result[data-state="error"] { color: #b3261e; font-weight: 600; }

@media (max-width: 900px) {
    .rc-newsletter-inner { grid-template-columns: 1fr; gap: var(--s-6); }
}

/* --- footer -------------------------------------------------------------- */
.rc-footer { background: var(--rc-b900); color: #cbd6e6; padding: var(--s-9) 0 0; }
.rc-footer-grid { display: grid; grid-template-columns: 1.5fr .8fr .8fr 1.3fr; gap: var(--s-7); padding-bottom: var(--s-7); }
.rc-footer .rc-brand { margin-bottom: var(--s-4); }
.rc-footer .rc-brand-logo { width: 200px; background: #fff; border-radius: var(--r-sm); padding: 8px 12px; }
.rc-footer p { font-size: var(--t-sm); max-width: 34ch; color: #a9bad2; }
.rc-footer h3 { font-size: var(--t-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; margin: var(--s-2) 0 var(--s-4); }
.rc-footer ul { list-style: none; margin: 0; padding: 0; }
.rc-footer li { font-size: var(--t-sm); margin-bottom: var(--s-3); }
.rc-footer li a { color: #a9bad2; }
.rc-footer li a:hover { color: #fff; }
.rc-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .14); display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font-size: var(--t-xs); color: #8fa3bf; }
.rc-footer-bottom a { color: #cbd6e6; }

/* ==========================================================================
   Bridge: pull the legacy catalogue, forms and content into the same system
   ========================================================================== */
@media (min-width: 1200px) { .container { max-width: 1440px; width: var(--rc-width); } }

.default-btn {
    background: var(--rc-primary);
    border-radius: var(--r-sm);
    font-family: var(--rc-text);
    font-size: 15px;
    font-weight: 600;
    box-shadow: var(--sh-1);
    transition: background .22s var(--ease), transform .22s var(--ease);
}
.default-btn:before, .default-btn:after { display: none; }
.default-btn:hover { background: var(--rc-b800); transform: translateY(-2px); }

.top-title { color: var(--rc-b800) !important; font-size: var(--t-xs) !important; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }
.section-title h2 { font-family: var(--rc-display); font-weight: 700; font-size: clamp(28px, 2.4vw, var(--t-2xl)); color: var(--rc-ink); }
.section-title h2 span { color: var(--rc-b700); }

.page-title-area { background: var(--rc-surface) !important; padding: var(--s-9) 0 !important; }
.page-title-area:before { display: none; }
.page-title-content h2 { color: var(--rc-ink); font-size: clamp(32px, 3vw, var(--t-3xl)); font-weight: 600; }
.page-title-content ul li, .page-title-content ul li a { color: var(--rc-body); }
.page-title-content ul li.active { color: var(--rc-b700); }
.page-title-content ul li:before { background: var(--rc-warm); }

.single-shop {
    border: 1px solid var(--rc-line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-1);
    padding-bottom: var(--s-4);
    background: #fff;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.single-shop:hover { transform: translateY(-6px); box-shadow: var(--sh-2); }
.single-shop .shop-img img { height: 210px; object-fit: contain; background: #f6f8fc; padding: var(--s-4); }
.single-shop .shop-img-2 { display: none; }
.single-shop .shop-content h3 { font-size: var(--t-base); font-family: var(--rc-text); font-weight: 600; }
.single-shop .shop-content h3 a { color: var(--rc-ink); }
.single-shop .shop-content .price { color: var(--rc-b800); font-weight: 700; }
.single-shop .purchase-bar { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; padding: 0 var(--s-3); }
.single-shop .purchase-bar ul { display: none; }
.single-shop .purchase-bar .default-btn { width: 100%; }

.rc-home .shop-area { padding: var(--s-9) 0 var(--s-7); background: #fff; }
/* the products block is followed by another rc-section, so the two 80px pads doubled up */
.rc-home .shop-area + .rc-section { padding-top: var(--s-7); }
.rc-home .shop-area .section-title { text-align: left; max-width: none; margin-bottom: var(--s-6); }

.single-services, .single-features, .single-blog, .single-team, .single-contact {
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    border: 1px solid var(--rc-line);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.single-services:hover, .single-features:hover, .single-blog:hover, .single-team:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.single-services { background: #fff; }
.single-services i, .single-features i { color: var(--rc-b700); }
.bg-color { background: var(--rc-surface); }

.form-control { border-radius: var(--r-sm); border-color: var(--rc-line); background: #fcfdff; font-family: var(--rc-text); }
.form-control:focus { border-color: var(--rc-b700); box-shadow: 0 0 0 3px rgba(39, 80, 143, .15); }
.subscribe-area { background: var(--rc-surface); }
.subscribe-area h2 { color: var(--rc-ink); }

.shopcart button { background: var(--rc-primary) !important; border: 1px solid rgba(255, 255, 255, .5); border-radius: 50%; width: 54px; height: 54px; box-shadow: var(--sh-2); }
.shopcart { bottom: 28px !important; right: 24px !important; }
body .shopcart { top: auto !important; width: 54px !important; height: 54px !important; padding: 0 !important; border: 0 !important; background: transparent !important; z-index: 1020; transition: transform .22s var(--ease); }
body .shopcart:hover { transform: translateY(-3px); }
body .shopcart button { color: #fff !important; padding: 0 !important; }
body .shopcart button i { font-size: 24px; top: 2px; }
body .shopcart button .item-amt { background: #ffd166; color: var(--rc-ink); display: grid; place-items: center; width: 22px; height: 22px; padding: 0; line-height: 1; right: -3px; top: -4px; font-weight: 700; }

.go-top { background: var(--rc-primary); border-radius: 50%; }
.modal-content { border: 1px solid var(--rc-line) !important; border-radius: var(--r-md); }
.modal-header { background: var(--rc-b800); }

.rc-home h1, .rc-home h2, .rc-home h3, .rc-footer h3 { text-transform: none; }
.rc-footer h3 { text-transform: uppercase; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1199px) {
    :root { --rc-width: calc(100% - 56px); }
    .rc-navigation { gap: var(--s-5); }
    .rc-nav-wrap { gap: var(--s-5); }
    .rc-nav-cta { display: none; }
    .rc-brand-logo { width: 176px; }
    .rc-hero-grid { gap: var(--s-6); }
    .rc-category-grid { grid-template-columns: repeat(3, 1fr); }
    .rc-story-grid { gap: var(--s-6); }
    .rc-footer-grid { gap: var(--s-5); grid-template-columns: 1.4fr .9fr .9fr 1.2fr; }
    .rc-benefits .rc-container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
    :root { --rc-width: calc(100% - 32px); --rc-header-h: 72px; }
    .rc-topbar { font-size: 11px; }
    .rc-topbar .rc-container > span, .rc-call-label { display: none; }
    .rc-topbar .rc-container { justify-content: center; }
    .rc-nav-wrap { min-height: 70px; }
    .rc-brand-logo { width: 158px; }
    .rc-menu-toggle { display: block; }
    .rc-navigation {
        display: none;
        position: absolute;
        left: 0; right: 0; top: 100%;
        padding: var(--s-4);
        background: #fff;
        border-bottom: 1px solid var(--rc-line);
        box-shadow: var(--sh-2);
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .rc-navigation.is-open { display: flex; }
    .rc-navigation > a { padding: 12px 8px; font-size: var(--t-base); }
    .rc-account { border-left: none; border-top: 1px solid var(--rc-line); margin-top: var(--s-2); padding-left: 8px; }
    .rc-navigation .rc-nav-cta { display: flex; margin-top: var(--s-3); }

    .rc-hero-grid { grid-template-columns: 1fr; min-height: 0; padding: var(--s-6) 0 var(--s-7); gap: var(--s-6); }
    .rc-hero h1 { font-size: clamp(34px, 9vw, 46px); max-width: none; }
    .rc-hero-copy > p { font-size: var(--t-base); }
    .rc-hero-visual { height: 340px; min-height: 0; }
    .rc-care-card { font-size: var(--t-base); padding: var(--s-3) var(--s-4); }
    .rc-care-icon { width: 40px; height: 40px; font-size: 21px; }
    .rc-care-cross { display: none; }

    .rc-benefits .rc-container { gap: var(--s-4) var(--s-3); }
    .rc-benefits span { font-size: 13px; }

    .rc-section { padding: var(--s-7) 0; }
    .rc-section-heading { align-items: start; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-5); }
    .rc-category-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
    .rc-category { min-height: 186px; padding: var(--s-4) var(--s-4) var(--s-6); }
    .rc-story-grid { grid-template-columns: 1fr; gap: var(--s-6); }
    .rc-story-image { height: 320px; }
    .rc-service-grid { grid-template-columns: 1fr; gap: var(--s-4); }
    .rc-service { padding: var(--s-5); }
    .rc-visit-inner { grid-template-columns: 1fr; padding: var(--s-7) 0; gap: var(--s-6); }
    .rc-visit-aside { justify-content: start; font-size: var(--t-lg); gap: var(--s-5); }
    .rc-visit-cross { font-size: 84px; }
    .rc-footer { padding-top: var(--s-7); }
    .rc-footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-5); }
    .rc-footer-grid > div:first-child, .rc-footer-grid > div:last-child { grid-column: 1 / -1; }
    .rc-footer-bottom { flex-direction: column; gap: var(--s-1); }
    .shopcart { right: 15px !important; bottom: 18px !important; }
    .shopcart.md-none { display: block !important; }
    .single-shop .purchase-bar { display: block; }
}

/* ==========================================================================
   Reduced motion — show everything, animate nothing
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .rc-will-reveal, [data-aos] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .rc-typing::after, .rc-typed::after { display: none; }
}

/* ==========================================================================
   COLOUR PASS
   The page was reading as a white void with one blue. Two things were wrong:
   the inner-page title band lost its colour (my earlier `background:` shorthand
   also cleared the theme's background-image, leaving white-on-#eef3fa text that
   was literally invisible), and every section shared one ground. This gives the
   page a colour rhythm and puts the brand back into the banded areas.
   ========================================================================== */

/* --- inner page title band ------------------------------------------------
   The theme sets height:100% here, which resolved to a full 900px viewport on
   /blogs and /shop and produced the huge empty band. Pinned to auto.
   White type is kept because the band is dark again — matching the theme's own
   selector specificity (0,3,1) so these actually win. */
.page-title-area {
    height: auto !important;
    padding: 88px 0 !important;
    background:
        radial-gradient(60rem 24rem at 82% -30%, rgba(255, 209, 102, .16) 0%, rgba(255, 209, 102, 0) 62%),
        linear-gradient(135deg, #27508f 0%, #1f4684 48%, #16365f 100%) !important;
    border-bottom: 3px solid var(--rc-warm);
}
.page-title-area::before { display: none; }

.page-title-area .page-title-content h2 {
    color: #ffffff;
    font-family: var(--rc-display);
    font-weight: 700;
    font-size: clamp(32px, 3vw, var(--t-3xl));
    letter-spacing: -.02em;
}
.page-title-area .page-title-content ul li,
.page-title-area .page-title-content ul li a { color: #cfe0f7; font-size: var(--t-sm); }
.page-title-area .page-title-content ul li a:hover { color: #ffffff; }
.page-title-area .page-title-content ul .active { color: #ffd166; }
.page-title-area .page-title-content ul li::before { background-color: #ffd166; }

/* --- section rhythm: white -> warm paper -> tint, instead of white on white */
:root { --rc-paper: #faf7f2; }

.rc-categories { background: var(--rc-paper); }
.rc-categories + .rc-story { background: var(--rc-surface); }
.rc-home .shop-area { background: var(--rc-paper) !important; }

/* the services band gets a soft tinted ground so it stops floating on white */
.rc-home .shop-area + .rc-section { background: #ffffff; }

/* --- legacy content areas were all bare white ---------------------------- */
.blog-details-area, .contact-info-area, .team-area, .faq-area, .about-area { background: var(--rc-paper); }
.contact-area, .map-area { background: #ffffff; }

/* --- newsletter band: was a pale nothing --------------------------------- */
.subscribe-area {
    background:
        radial-gradient(50rem 20rem at 15% 120%, rgba(255, 209, 102, .18) 0%, rgba(255, 209, 102, 0) 60%),
        linear-gradient(120deg, #1f4684 0%, #27508f 100%) !important;
    color: #fff;
}
.subscribe-area h2, .subscribe-area h3 { color: #fff !important; }
.subscribe-area p, .subscribe-area span { color: #dbe7f8 !important; }
.subscribe-area .form-control { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .28); color: #fff; }
.subscribe-area .form-control::placeholder { color: #b9cbe6; }
.subscribe-area .default-btn { background: #ffd166; color: #16365f !important; font-weight: 700; }
.subscribe-area .default-btn:hover { background: #ffdd8a; }

/* --- product cards: a warm price and a coloured media well --------------- */
.single-shop .shop-img { background: linear-gradient(160deg, #f3f7fd 0%, #eaf1fb 100%); }
.single-shop .shop-img img { background: transparent; }
.single-shop .shop-content .price { color: var(--rc-warm); }
.single-shop:hover { border-color: #c3d5ee; }

/* --- benefits strip: tint it so the fold has three bands, not two -------- */
.rc-benefits { background: var(--rc-paper); }
.rc-benefits i { color: var(--rc-warm); }

/* --- section eyebrows across the legacy sections ------------------------- */
.top-title { color: var(--rc-warm) !important; }
.section-title h2 span { color: var(--rc-b700); }

/* --- keep the story tag and visit band anchored to the deep blue --------- */
.rc-visit {
    background:
        radial-gradient(55rem 22rem at 88% -20%, rgba(255, 209, 102, .17) 0%, rgba(255, 209, 102, 0) 60%),
        linear-gradient(125deg, #27508f 0%, #1f4684 55%, #16365f 100%);
}

/* --- empty states: a blank grid reads as a broken page ------------------- */
.rc-empty {
    text-align: center;
    background: #fff;
    border: 1px solid var(--rc-line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-1);
    padding: var(--s-9) var(--s-6);
    max-width: 620px;
    margin: 0 auto;
}
.rc-empty-icon {
    display: grid; place-items: center;
    width: 66px; height: 66px;
    margin: 0 auto var(--s-5);
    border-radius: 50%;
    background: #e2ecf8;
    color: var(--rc-b700);
    font-size: 32px;
}
.rc-empty h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.rc-empty p { font-size: var(--t-base); max-width: 46ch; margin: 0 auto var(--s-6); }
.rc-empty-actions { display: flex; gap: var(--s-5); align-items: center; justify-content: center; flex-wrap: wrap; }

/* --- legacy vertical rhythm: ptb-100 stacked on top of the section title's
       own margin left ~200px of dead space under every page-title band ----- */
.blog-details-area.ptb-100, .shop-details-area.ptb-100 { padding-top: var(--s-7); }
.blog-details-area .section-title, .rc-home .shop-area .section-title { margin-bottom: var(--s-6); }
.contact-info-area.pt-100 { padding-top: var(--s-7); }
.section-title { margin-bottom: var(--s-6); }

/* The theme applies text-transform:capitalize to every heading, which produces
   "Our Health Journal Is On Its Way". Sentence case is what the copy is written in. */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { text-transform: none; }
.rc-footer h3, .rc-eyebrow, .top-title, .rc-service-number, .rc-photo-label { text-transform: uppercase; }