/*
 * Public site overrides.
 *
 * Two fixes only. Everything else on the public pages is the purchased Exsit
 * template's own markup and its own utility classes; this file exists because
 * the two problems below have no utility in that build of main.css to express
 * them, and main.css itself is kept byte-identical to the package so the
 * template stays updatable.
 */

/*
 * The template's desktop header carried no auth button at all — its single
 * "Register" lives in .menu-bottom, which main.css shows only below 992px.
 * This site puts "Sign in" and "Create account" in the desktop cluster, and
 * between 992px and 1199px the extra button leaves the flex row short of
 * width: both labels break onto two lines and the Services chevron drops below
 * its own text, growing the header from 90px to 121px on every page. The row
 * fits at its natural widths; it only needed permission not to wrap.
 */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar .navbar-nav > .nav-item > .nav-link,
    .navbar-expand-lg .navbar-nav > .nav-item > .nav-link {
        white-space: nowrap;
    }

    header .d-flex > .btn {
        white-space: nowrap;
    }
}

/*
 * The home hero is a 95vh banner. It once held a "Talk to sales" card that was
 * taller than the banner below roughly 720px of viewport height, so it rose
 * under the 90px fixed header and printed over the nav; that needed a 760px
 * floor. The card is gone and the banner now carries a headline, two buttons
 * and a line of small print, so the floor only has to clear the header and
 * keep the copy off the very bottom edge.
 */
@media (min-width: 992px) {
    .data-analytics-banner {
        min-height: 620px;
    }
}

/* ============================================================================
   BRAND PALETTE
   ----------------------------------------------------------------------------
   The purchased template ships a yellow-and-brown brand. These rules map the
   Orun palette onto the template's OWN tokens and utilities, so every component
   keeps working and main.css stays byte-identical to the package.

     Japanese Indigo  #285C70 #255468 #224D5F #1C3E4E #193746 #16303D  primary
     Steel Teal       #3F5A66 #486675 #517380 #60899B #6692A4 #6C9BAD  accent
     Charcoal         #353535 #2C2C2C #232323 #111111 #090909 #000000  ink, dark
     Mid Grey         #757575 #7E7E7E #808080 #989898 #A1A1A1 #AAAAAA  muted
     Foggy            #9E9C8A #A8A692 #B1AF9A #C4C2AA #CDCAB2 #D6D3BA  warm band
     Star Dust        #CECAC8 #D8D3D1 #E2DDDA #F2EDEA #F9F3F1 #FFFAF8  surfaces

   main.css defines the brand utilities TWICE — once from the custom property
   and again as a literal with !important, the literal winning. Retuning the
   token alone therefore changes nothing, which is why each utility is restated
   here rather than only its variable.
   ========================================================================== */

:root {
    --bs-deepyellow: #285C70;
    --bs-deepyellow-rgb: 40, 92, 112;
    --bs-darkyellow: #3F5A66;
    --bs-darkyellow-rgb: 63, 90, 102;
    --bs-deepbrown: #16303D;
    --bs-deepbrown-rgb: 22, 48, 61;
    --bs-deepcyan: #193746;
    --bs-darkcyan: #517380;
    --bs-deepgreen: #1C3E4E;
    --bs-darkgreen: #6C9BAD;
    --bs-deepblue: #224D5F;
    --bs-darkblack: #111111;

    --bs-gray-100: #FFFAF8;
    --bs-gray-200: #F9F3F1;
    --bs-gray-300: #E2DDDA;
    --bs-gray-400: #CECAC8;
    --bs-gray-500: #AAAAAA;
    --bs-gray-600: #808080;
    --bs-gray-700: #575757;
    --bs-gray-800: #2C2C2C;
    --bs-gray-900: #232323;
}

/* Brand surfaces. */
.bg-deepyellow { background-color: #285C70 !important; }
.bg-deepbrown  { background-color: #16303D !important; }
.bg-darkyellow { background-color: #3F5A66 !important; }
.bg-deepgreen  { background-color: #1C3E4E !important; }
.bg-deepcyan   { background-color: #193746 !important; }
.bg-darkcyan   { background-color: #517380 !important; }
.bg-darkblack  { background-color: #111111 !important; }

/*
 * The template's primary was a bright yellow carrying near-black label text.
 * The new primary is a dark indigo, so that same label has to invert or the
 * call to action reads as a filled box with nothing legible on it. Stated at
 * two-class specificity, and again under body.dark-theme, so it outranks the
 * .text-gray-* utility in both themes.
 */
.bg-deepyellow.text-gray-900,
.bg-deepyellow.text-gray-800,
.bg-deepyellow.text-gray-700,
body.dark-theme .bg-deepyellow.text-gray-900,
body.dark-theme .bg-deepyellow.text-gray-800,
body.dark-theme .bg-deepyellow.text-gray-700 { color: #FFFAF8 !important; }

/* Accent text: a mid tone that holds up on light, lifted on dark. */
.text-deepyellow { color: #285C70 !important; }
body.dark-theme .text-deepyellow { color: #6C9BAD !important; }

/* The circular hover wipe on the primary buttons. */
.btn-hover-bg-lighten-deepyellow::before,
.btn-hover-bg-lighten-deepyellow::after { background: #3F5A66 !important; }
.btn-hover-bg-darken-deepyellow::before,
.btn-hover-bg-darken-deepyellow::after  { background: #16303D !important; }

/* Neutral ramp: Star Dust for surfaces, Mid Grey and Charcoal for ink. */
.text-gray-100 { color: #FFFAF8 !important; }
.text-gray-200 { color: #F9F3F1 !important; }
.text-gray-300 { color: #E2DDDA !important; }
.text-gray-400 { color: #CECAC8 !important; }
.text-gray-500 { color: #AAAAAA !important; }
.text-gray-600 { color: #808080 !important; }
.text-gray-700 { color: #575757 !important; }
.text-gray-800 { color: #2C2C2C !important; }
.text-gray-900 { color: #232323 !important; }

.bg-gray-100 { background-color: #FFFAF8 !important; }
.bg-gray-200 { background-color: #F9F3F1 !important; }
.bg-gray-900 { background-color: #232323 !important; }

.border-gray-100 { border-color: #F2EDEA !important; }
.border-gray-200 { border-color: #E2DDDA !important; }
.border-gray-600 { border-color: #808080 !important; }

/* Dark theme keeps the template's inversion, drawn from Charcoal and Star Dust. */
body.dark-theme .text-gray-700,
body.dark-theme .text-gray-800,
body.dark-theme .text-gray-900 { color: #FFFAF8 !important; }
body.dark-theme .bg-gray-900   { background-color: #111111 !important; }
body.dark-theme .border-gray-100,
body.dark-theme .border-gray-200 { border-color: #353535 !important; }

/*
 * Body ink and surfaces.
 *
 * The template's default body colour is a purple-grey (#515184) and its pages
 * sit on a cream (.bg-lightyellow, #FFFFEF) — both off-palette, and both
 * showing on every page, so they matter more than any single component.
 * Semantic colours (danger, success, warning) are deliberately NOT remapped:
 * an error has to read as an error, and this palette carries no red or green.
 */
:root {
    --bs-body-color: #353535;
    --bs-body-color-rgb: 53, 53, 53;
    --bs-body-bg: #F9F3F1;
    --bs-body-bg-rgb: 249, 243, 241;

    --bs-primary: #285C70;
    --bs-primary-rgb: 40, 92, 112;
    --bs-secondary: #3F5A66;
    --bs-secondary-rgb: 63, 90, 102;
    --bs-info: #517380;
    --bs-info-rgb: 81, 115, 128;
    --bs-dark: #232323;
    --bs-dark-rgb: 35, 35, 35;
    --bs-light: #F9F3F1;
    --bs-light-rgb: 249, 243, 241;
    --bs-light2: #757575;

    --bs-link-color: #285C70;
    --bs-link-color-rgb: 40, 92, 112;
    --bs-link-hover-color: #16303D;

    --bs-border-color: #E2DDDA;

    --bs-lightyellow: #FFFAF8;
    --bs-lightbrown: #FFFAF8;
    --bs-lightbrown2: #F2EDEA;
    --bs-lightbrown3: #FFFAF8;
    --bs-lightorange: #F9F3F1;
    --bs-lightgreen: #F2EDEA;
    --bs-lightblue: #F9F3F1;
    --bs-lightblue2: #F2EDEA;
    --bs-lightcyan: #16303D;
    --bs-lightcyan2: #F2EDEA;
    --bs-light4: #F9F3F1;
}

body { color: #353535; }

.bg-lightyellow,
.bg-lightbrown,
.bg-lightbrown3 { background-color: #F9F3F1 !important; }
.bg-lightbrown2,
.bg-lightgreen,
.bg-lightblue2,
.bg-lightcyan2 { background-color: #F2EDEA !important; }
.bg-lightorange,
.bg-lightblue,
.bg-light4,
.bg-light { background-color: #F9F3F1 !important; }
.bg-lightcyan { background-color: #16303D !important; }

/*
 * Star Dust stands in for flat white, one step ABOVE the page so a card still
 * reads as a card. Matching the two made every panel vanish into the page.
 */
.bg-white { background-color: #FFFAF8 !important; }
.text-white { color: #FFFAF8 !important; }
.bg-black { background-color: #000000 !important; }
.bg-dark { background-color: #232323 !important; }
.text-dark { color: #232323 !important; }

.bg-primary { background-color: #285C70 !important; }
.text-primary { color: #285C70 !important; }
.bg-secondary { background-color: #3F5A66 !important; }
.bg-info { background-color: #517380 !important; }
.text-info { color: #517380 !important; }
body.dark-theme .text-info { color: #6C9BAD !important; }

/* Dark theme sits on Charcoal rather than the template's near-black. */
body.dark-theme { background-color: #111111; color: #E2DDDA; }
body.dark-theme .bg-white,
body.dark-theme .bg-lightyellow,
body.dark-theme .bg-lightbrown,
body.dark-theme .bg-lightbrown2 { background-color: #1A1A1A !important; }

/*
 * Remaining literal utilities. main.css writes each of these as a hex with
 * !important as well as through its token, so the token alone does not reach
 * them. bg-cyan/bg-light2 appear as decorative tints in the template's own
 * markup; danger, success and warning are left untouched on purpose so a real
 * error, confirmation or caution still reads as one.
 */
.bg-cyan { background-color: #517380 !important; }
.text-cyan { color: #517380 !important; }
.bg-light2 { background-color: #757575 !important; }
.text-light2 { color: #757575 !important; }
.bg-darkcyan { background-color: #3F5A66 !important; }
.bg-deepblue { background-color: #224D5F !important; }
.bg-darkgreen { background-color: #6C9BAD !important; }
.bg-lighten { background-color: #F2EDEA !important; }

/*
 * Gradients. The template ships lime, orange, cornflower and violet blends;
 * each is restated here as a two-stop blend drawn from one palette family, so
 * the tiles and banners keep their depth without importing a colour the brand
 * does not own.
 */
.bg-gradient-lime-green   { background: linear-gradient(to bottom, #6C9BAD, #3F5A66) !important; }
.bg-gradient-orange-yellow{ background: linear-gradient(to bottom, #D6D3BA, #9E9C8A) !important; }
.bg-gradient-cyan-blue    { background: linear-gradient(to bottom, #CECAC8, #B1AF9A) !important; }
.bg-gradient-orange       { background: linear-gradient(-70deg, #6692A4, #3F5A66) !important; }
.bg-gradient-primary      { background: linear-gradient(-70deg, #517380, #285C70) !important; }
.bg-gradient-secondary    { background: linear-gradient(-70deg, #60899B, #1C3E4E) !important; }
.bg-gradient-white-light  { background: linear-gradient(to bottom, #F2EDEA, #FFFAF8) !important; }
.bg-gradient-blue-light   { background: linear-gradient(135deg, #E2DDDA 0, #CECAC8 50%, #B1AF9A 100%) !important; backdrop-filter: blur(20px); }
.bg-gradient-home-banner  { background-image: url(/pgs/images/svg/dots.svg), linear-gradient(166deg, rgba(255, 250, 248, 0) 50%, rgba(255, 250, 248, .4)), linear-gradient(#F2EDEA, #F9F3F1) !important; }

body.dark-theme .bg-gradient-white-light { background: linear-gradient(to bottom, #1A1A1A, #232323) !important; }
body.dark-theme .bg-gradient-home-banner { background-image: url(/pgs/images/svg/dots.svg), linear-gradient(#111111, #1A1A1A) !important; }

/*
 * The page-banner wash. The template layers seven gradients here in cornflower
 * and powder blue; the structure is kept exactly and only the two tinted stops
 * are moved onto Steel Teal, so the banner keeps its depth on-palette.
 */
.light-blue-banner {
    background:
        radial-gradient(circle farthest-corner at 130% 110%, #FFFAF8 15%, rgba(255, 250, 248, 0) 37%),
        linear-gradient(50deg, rgba(255, 250, 248, 0) 70%, rgba(255, 250, 248, .8) 93%),
        linear-gradient(100deg, #FFFAF8 12%, rgba(255, 250, 248, 0) 30%),
        linear-gradient(0deg, #FFFAF8, rgba(255, 250, 248, 0) 85%),
        radial-gradient(circle at -20% -40%, rgba(255, 250, 248, 0) 8%, rgba(108, 155, 173, .40) 33%, rgba(255, 250, 248, 0) 68%),
        repeating-linear-gradient(210deg, rgba(255, 250, 248, 0), rgba(226, 221, 218, .30) 18%, rgba(255, 250, 248, 0) 50%),
        repeating-linear-gradient(195deg, rgba(255, 250, 248, 0) 55%, rgba(81, 115, 128, .30) 66%, rgba(255, 250, 248, 0) 85%) !important;
}

body.dark-theme .light-blue-banner {
    background:
        radial-gradient(circle farthest-corner at 130% 110%, #111111 15%, transparent 37%),
        linear-gradient(50deg, transparent 70%, rgba(17, 17, 17, .8) 93%),
        linear-gradient(100deg, #111111 12%, transparent 30%),
        linear-gradient(0deg, #111111, transparent 85%),
        radial-gradient(circle at -20% -40%, transparent 8%, rgba(63, 90, 102, .40) 33%, transparent 68%),
        repeating-linear-gradient(210deg, transparent, rgba(17, 17, 17, .3) 18%, transparent 50%),
        repeating-linear-gradient(195deg, transparent 55%, rgba(40, 92, 112, .30) 66%, transparent 85%) !important;
}

/*
 * The hero banner is a fixed 95vh, dropping to 60vh below the large breakpoint.
 * That fits the template's own banner, which is a headline and one button. This
 * one adds a price badge, a paragraph, two buttons and a line of small print,
 * which at 375px is taller than 60vh — the content ran out of the banner and
 * printed over the section beneath it, and the badge rose under the fixed
 * header. Below the breakpoint the banner is sized by its content instead, with
 * enough top padding to clear the header.
 */
@media (max-width: 991.98px) {
    .data-analytics-banner {
        height: auto;
        min-height: 60vh;
        padding-top: 96px;
        padding-bottom: 48px;
    }
}

/* ============================================================================
   CONTRAST THE PALETTE REMAP LEFT BEHIND
   ----------------------------------------------------------------------------
   Three places where a token that reads correctly on one surface is reused on
   the opposite one. Each was measured in Chrome against the composited
   background actually behind the text, not against the token's nominal value.
   ========================================================================== */

/*
 * The footer band is Japanese Indigo's darkest step (.bg-lightcyan, #16303D) in
 * BOTH themes, but .text-deepyellow is tuned for the light page surface. #285C70
 * on that band measures 1.87:1, which made the three footer column headings —
 * "Services", "Company", "Contact & legal" — the least legible text on all ten
 * public pages. Dark theme already lifts this same token to Steel Teal's
 * lightest, so light theme is brought to the value the footer already uses
 * rather than to a new one. Measured 4.55:1 at 17px/500 on #16303D.
 */
footer .footer-link-title.text-deepyellow { color: #6C9BAD !important; }

/*
 * main.css carries `body.dark-theme .btn.bg-deepyellow{color:#212529!important}`
 * because the template's primary was a bright yellow that needed a near-black
 * label. The new primary is a dark indigo, so in dark theme that label measured
 * 2.10:1 — and the arrow icon beside it, which that selector does not match,
 * stayed cream, so one button carried two different label colours. Restated at
 * the same specificity, and later in the cascade, so this one wins.
 * Measured 7.10:1 on #285C70.
 */
body.dark-theme .btn.bg-deepyellow { color: #FFFAF8 !important; }

/*
 * Link ink in dark theme. --bs-link-color and .text-primary are both #285C70, a
 * tone picked to hold up on the light page; on the dark-theme card surface
 * (#1C1C1E) the unclassed mailto links on /contact and the .text-primary ones on
 * /services measured 2.31:1. Lifted to the Steel Teal the other accents already
 * switch to in dark theme. Measured 9.13:1.
 */
body.dark-theme {
    --bs-link-color: #6C9BAD;
    --bs-link-color-rgb: 108, 155, 173;
    --bs-link-hover-color: #FFFAF8;
}

body.dark-theme .text-primary { color: #6C9BAD !important; }

/*
 * Descenders cropped by tight display line-height.
 *
 * The template sets display headings to a line-height of about 1.02 of their
 * font size. That is fine for a plain line, where the glyph simply overhangs
 * the line box. It is not fine in two places here:
 *
 *   1. The banner headline highlights one phrase in an inline-block carrying a
 *      tinted background. The box is drawn to the line box, so the tails of p,
 *      g and y are cut off by its lower edge — clearest at 375px, where the
 *      phrase wraps onto a line of its own.
 *   2. The entry-price heading pairs a display figure with a small "a month"
 *      and pins both to lh-1, clipping the same way.
 *
 * Loosening only these two, rather than the lh-1 utility itself, which the
 * template uses elsewhere for deliberately tight stacked type.
 */
h1 .bg-gradient-primary,
.banner-text .bg-gradient-primary {
    line-height: 1.18;
    padding-block: 0.06em;
}

/*
 * The same crop on the price headings, which pair a display figure with a small
 * "a month" and pin both to lh-1. There are twenty of these across the site, so
 * this is one scoped rule rather than twenty markup edits — and it carries
 * !important because the package writes `.lh-1{line-height:1!important}`, which
 * nothing of ordinary weight can outrank. Narrowed to display-size headings, so
 * lh-1 keeps its meaning everywhere the template uses it for tight stacked type.
 */
.display4-size.lh-1,
.display5-size.lh-1,
.display6-size.lh-1,
.display7-size.lh-1 {
    line-height: 1.15 !important;
}