/* ==========================================================================
   Design tokens — fonts and colours.

   These live here because header.css is loaded on every page, so the
   variables and @font-face rules are available everywhere. Custom properties
   resolve at computed-value time, not parse time, so rules in style.css
   (which loads first) can still use them.

   Colours are the named styles from the Figma file, values taken from the
   swatches themselves rather than read off the design.
   ========================================================================== */
:root{
  /* Primary */
  --cs-violet:#5B0375;        /* Primary/Voilet      — header bar, accents   */
  --cs-deep-violet:#2C023A;   /* Primary/Deep Voilet — dark bands            */
  --cs-deep-purple:#5C0375;   /* Primary/Deep purple — see note below        */
  --cs-lime:#C2C904;          /* Primary/Lime Zest   — CTA fill and borders  */

  /* Neutrals */
  --cs-white:#FFFFFF;         /* Neutrals/White                              */
  --cs-off-white:#F4F4F4;     /* Neutrals/Off-White  — Why Us, blogs bg      */
  --cs-bk-10:#EFEFEF;         /* Neutrals/BK-10      — case study bg         */
  --cs-bk-30:#E0E0E0;         /* Neutrals/Bk-30                              */
  --cs-black-70:#555555;      /* Neutrals/Black-70   — body copy             */
  --cs-black-80:#2B2B2B;      /* Neutrals/Black-80   — headings              */
  --cs-black-100:#060606;     /* Neutrals/Black-100  — tile gradients        */

  /* Not a named style, but used by the design: the card shadow and the
     outlined-button stroke on the flexible band. */
  --cs-shadow-pink:#91004E;
  --cs-stroke-pink:#B21469;

  /* Type. Figma variables Fonts/Heading Text and Fonts/Body Text. */
  --cs-font-heading:'Rubik', sans-serif;
  --cs-font-body:'Inter', sans-serif;
}

/* Note: Figma carries both Primary/Voilet #5B0375 and Primary/Deep purple
   #5C0375 — one red channel apart, almost certainly a duplicated swatch
   rather than two intended colours. Both are listed so the file matches the
   design; the page itself only uses #5B0375. */

/* --- Web fonts -----------------------------------------------------------
   Moved here from the top of style.css, unchanged. Note these are largely
   vestigial: the site actually gets Rubik and Inter from the Google Fonts
   link in common/head.php, and two of the declarations below are malformed
   in the original (a nested-quote font-family, and a family list inside
   @font-face). Left exactly as they were rather than silently "fixing"
   them — worth a separate look.
   ------------------------------------------------------------------------- */
@font-face{font-family:'Inter', sans-serif;src:url(../fonts/source-sans-pro.regular.ttf) format("truetype"),url(../fonts/source-sans-pro.light.ttf) format("woff"),url(../fonts/source-sans-pro.light.ttf) format("woff2");font-display:swap}@font-face{font-family:''Inter', sans-serif';src:url(../fonts/source-sans-pro.bold.ttf) format("truetype"),url(../fonts/source-sans-pro.bold.woff2) format("woff"),url(../fonts/source-sans-pro.bold.woff2) format("woff2");font-display:swap}@font-face{font-family:'GoogleSans-Bold';src:url(../fonts/GoogleSans-Bold.ttf) format("truetype"),url(../fonts/GoogleSans-Bold.woff) format("woff"),url(../fonts/GoogleSans-Bold.woff2) format("woff2");font-display:swap}@font-face{font-family:"Rubik", sans-serif;src:url(../fonts/Segoe-UI.ttf) format("truetype"),url(../fonts/Segoe-UI.woff) format("woff"),url(../fonts/Segoe-UI.woff2) format("woff2");font-display:swap}@font-face{font-family:"Rubik", sans-serif;src:url(../fonts/Segoe-UI-Bold.ttf) format("truetype"),url(../fonts/Segoe-UI-Bold.woff) format("woff"),url(../fonts/Segoe-UI-Bold.woff2) format("woff2");font-display:swap}

/* ==========================================================================
   header.css — site header, nav and mobile menu

   Split out of style.css. Load order in common/head.php is
   style.css -> header.css -> footer.css -> home.css, and it matters:
   these rules used to be interleaved in style.css, so anything that
   ties on specificity now resolves in this file's favour. Verified
   against a computed-style snapshot of every header/footer element at
   393, 900 and 1512 before and after the split.
   ========================================================================== */

.header{z-index:99;position:fixed;top:0;background:transparent;border:0;transition:top .3s ease,background-color .3s ease;width:100%}header{background-color:#000;border-bottom:1px solid rgb(182 12 98 / 35%)}.header-row{align-items:center;height:75px;margin-top:25.5px}.logo{align-items:center;height:46px;}.main-navigation ul{display:flex;gap:56px;justify-content:flex-end;list-style:none}.main-navigation ul li a{color:#FFFFFF;font-size:1.1rem;line-height:1;font-family:'Rubik',sans-serif;font-weight:normal;border-radius: 32px;}
 .logo a{display:flex;height:100%;flex-wrap: wrap;align-content: center;}.logo svg{width:100%}.top-header{background:#36363675;opacity:.8;backdrop-filter:blur(47px);-webkit-backdrop-filter:blur(27px);position:relative}.home .top-header{background:#EFEFEF;opacity:1;backdrop-filter:unset;-webkit-backdrop-filter:unset;position:relative}.menu-container{padding:0}.contact-info-top{display:flex;list-style:none;padding:0;margin:0;gap:33px}.logo-flex{display:flex;gap:25px;margin-bottom:28.52px}.logo-flex span{display:flex;font-size:46px;line-height:27px}.fixed-header{background:#5A0072;padding:9px 0}.fixed-header .header-row{margin-top:0}.fixed-header .top-header{display:none}.main-navigation ul li a:hover{color:#C2C904;/*font-weight:bold*/}@media(max-width:1370px){.main-navigation ul{gap:30px}}
@media(max-width:991px){.header-row{margin-top:16px}.logo-flex{justify-content:center}}
@media(max-width:770px){.menu-container{padding:0 10px}.logo{align-items:center;flex-wrap:wrap;gap:5px 0;width:220px}.logo span{margin-left:15%;font-size:11px}.header-row{margin-top:10px}}
@media(max-width:680px){.header-row .mobile-width{width:50%}.contact-info-top{justify-content:center}.logo-flex svg{width:100%;height:auto}}
@supports (-webkit-hyphens:none){.main-navigation li{padding:0 12px}.contact-info-top li:first-child{margin-right:33px}}


/* Owl Navigation Styling */
/* .blog-carousel .owl-stage-outer {
    overflow: visible;
}
.blog-carousel .owl-item {
    transition: transform .3s ease;
}
.blog-carousel .owl-nav {
    position: absolute;
    top: -60px;
    right: 0;
}
.blog-carousel .owl-nav button {
    background: #eaeaea !important;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 10px;
    font-size: 18px !important;
    transition: 0.3s;
}
.blog-carousel .owl-nav button:hover {
    background: #2B2B2B !important;
    color: #fff !important;
} */


/* home page new design css end */


/* ===================================================================
   Chilliapple-style header
   Contact details sit top-right, stacked above the nav, and stay
   visible on the sticky (scrolled) header.
   =================================================================== */

/* Right column: contact row on top, nav below, both right-aligned */
.header-right-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 16px;
}

/* Top-right contact row */
.header-right-col .contact-info-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header-right-col .contact-info-top .contact-links {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
    font-size: 15px;
    color: #EDEDED;
    transition: color .2s ease;
}

.header-right-col .contact-info-top .contact-links:hover {
    color: #C2C904;
    opacity: 1;
}

/* Keep icons light on every page (contact row now sits over a dark header) */
.header-right-col .contact-links svg,
.home .header-right-col .contact-links svg {
    filter: brightness(0) saturate(100%) invert(84%) sepia(0%) saturate(0%) hue-rotate(203deg) brightness(96%) contrast(89%);
}

/* ...except the WhatsApp mark, which must stay brand green */
.header-right-col .contact-links .wa-icon svg,
.home .header-right-col .contact-links .wa-icon svg,
.header .nav ul.contact-info-mobile .contact-links .wa-icon svg {
    filter: none;
}

.home .header-right-col .contact-links {
    color: #EDEDED;
}

.home .header-right-col .contact-links:hover {
    color: #C2C904;
    opacity: 1;
}

/* Bordered CTA button at the end of the contact row */
.header-right-col .contact-info-top .header-cta {
    margin-left: 4px;
}

.header-cta-btn {
    display: inline-block;
    padding: 9px 28px;
    border: 2px solid #C2C904;
    border-radius: 32px;
    color: #FFFFFF !important;
    font-size: 15px;
    line-height: 1;
    font-family: 'Rubik', sans-serif;
    transition: background .2s ease, color .2s ease;
}

.header-cta-btn:hover {
    background: #C2C904;
    color: #2B2B2B !important;
}

/* Nav sits below the contact row, right-aligned */
.header-right-col .main-navigation {
    width: 100%;
}

.header-right-col .main-navigation ul.menu {
    display: flex;
    justify-content: flex-end;
    gap: clamp(1.25rem, 3vw, 3rem);
}

/* Let the two stacked rows define the header height */
.header .header-row {
    height: auto;
    align-items: center;
    margin-top: 0;
}

.header .menu-container {
    padding: 18px 0;
}

/* --- Sticky header: keep the contact details visible (Chilliapple behaviour) --- */
.fixed-header .menu-container {
    padding: 8px 0;
}

.fixed-header .header-right-col {
    gap: 10px;
}@media screen and (max-width: 1199px){
    .header-right-col {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0;
    }
    .header-right-col .contact-info-top {
        display: none;
    }

    /* 15px edge padding + logo and hamburger vertically centred */
    .header .menu-container {
        padding-left: 15px;
        padding-right: 15px;
    }
    .header .header-row {
        align-items: center;
        margin-top: 0;
    }
    /* floated hamburger gives .mobile no height, so it can't centre — make
       .mobile a flex box and drop the float + top offset */
    .header .mobile {
        display: flex;
        align-items: center;
    }
    .header .mobmenu-open {
        float: none;
        margin-top: 5px;
    }

    /* shorter purple sticky bar (~20% less height) */
    .fixed-header {
        padding: 4px 0;
    }
    .fixed-header .menu-container {
        padding: 5px 15px 0;
    }}


/* Contact details inside the mobile slide-out menu (keeps phone + email
   reachable on mobile, where the top-right contact row is hidden) */
.contact-info-mobile { display: none; }

/* let the contact rows continue straight after the nav items (the menu ul
   otherwise adds an 8% bottom margin that breaks the list rhythm) */
.header .nav ul#menu.header3 {
    margin-bottom: 0;
}


.header .nav ul.contact-info-mobile {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
}

/* each li keeps the menu's own border-top (`.header .nav ul li`), so the
   separator lines stay consistent with the nav items above — no extra border */
.header .nav ul.contact-info-mobile li {
    float: none;
    margin: 0;
    width: 100%;
    border-top: 1px solid #ffffff24;
}

.header .nav ul.contact-info-mobile li a.contact-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    color: #EDEDED;
    /* padding intentionally omitted: inherits the menu item's padding
       (`.header .nav ul li a`) so every row has consistent spacing */
}

/* icon sits inline beside the text even though legacy CSS forces the
   mobile-menu anchor to display:block */
.header .nav ul.contact-info-mobile li a.contact-links span {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
}

.header .nav ul.contact-info-mobile li a.contact-links:hover {
    color: #C2C904;
}

.header .nav ul.contact-info-mobile .contact-links svg {
    filter: brightness(0) saturate(100%) invert(84%) sepia(0%) saturate(0%) hue-rotate(203deg) brightness(96%) contrast(89%);
}


/* ==========================================================================
   Figma header geometry -- every page.

   Moved here from home.css, where it sat under .home_n and so only ever
   reached the home page. The design has one header: the home frame
   (1283:2329) instances Top-Header (2363:2471), the contact frame
   (1881:128) instances Navigation, and both come from the same 1920-wide
   master with a 1450px content box 235px in from each edge and 18px above
   and below the row. Nothing in it is page-specific, so neither are these
   rules -- the contact page was reading 1230px wide with 141px margins
   purely because it never saw them.
   ========================================================================== */

/* Content box: min(100% - 144px, 1450px), centred. The master is 1920 wide
   with the box at x=235; instanced at 1512 the component's own 72px padding
   governs instead, which is the 1368px the design measures there.

   Written as .container.menu-container, not .header .container: a page that
   sets its own .container width (home.css, and the contact page) ties on
   specificity and would win on load order, which put the bar 12px wider
   than the content on each side. Two classes on the one element settles it
   whatever the order.

   One header on every page. These rules were briefly limited to the home
   and contact pages, which made the bar a different width on the other 26
   -- and, worse, their extra specificity outranked the sticky rule further
   down, so the home header stopped shrinking on scroll above 1550px while
   every other page still did. Unscoped, the width, the 12px inset and the
   scroll behaviour are the same everywhere. Pages whose content box is not
   this width (most are 1450 above 1549px, 1230 below) will show the header
   edge off their content edge until their content width follows. */
@media (min-width:1441px) and (max-width:1549px){
  /* The header takes no gutter and sits 12px inside the content edge */
  .header .container.menu-container{width:calc(100% - 144px);max-width:1450px}
}

@media (min-width:1550px){
  /* 1392 box = 1368 of content once .container's 12px gutter is taken off,
     which is the width the sections hold above the design tier. */
  .header .container.menu-container{max-width:1392px}
  .header .menu-container{padding:18px 12px}
}

@media (min-width:1200px) and (max-width:1440px){
  .header .menu-container{padding:18px 12px}
}

/* --- Sticky header -------------------------------------------------------
   The scroll script (common/footer-script.php) adds .fixed-header once the
   page moves. Its global rule hides .top-header, an element no page has, so
   nothing collapsed -- the bar only lost 8px from a padding change that was
   not in the transition list, which is the jolt on scroll.

   On scroll only the padding tightens: 18px -> 10px top and bottom, so the
   header goes 143px -> 127px. Nothing is hidden, nothing is resized and
   nothing reflows -- the contact row, the nav and the logo all stay exactly
   as they are. Colour and shadow come from Figma Navigation (1312:6513).
   Desktop only: below 992px the header is the burger layout. */

@media (min-width:992px){
  .header{transition:top .3s ease,background-color .3s ease,box-shadow .3s ease}
  .header .menu-container{transition:padding-top .3s ease,padding-bottom .3s ease}

  .fixed-header{background:var(--cs-violet);padding:0;box-shadow:0 8px 13px rgba(43,43,43,.05)}
  .fixed-header .menu-container{padding-top:10px;padding-bottom:10px}
}

/* --- Header contact icons ------------------------------------------------
   Figma Top-Header (2363:2471) and Navigation (1930:159): the phone glyph
   (Path 28591) and both mail paths (Path 2, Path 3) are #FFFFFF, with the
   labels beside them #EDEDED. The inline SVGs ship with fill="#000" baked
   into the markup, so on the purple bar they were all but invisible. A CSS
   fill beats the presentation attribute, so the markup is untouched. The
   WhatsApp mark is left alone -- it carries its own brand gradient in the
   design too.

   style.css also lightens the black glyphs with filter:brightness(0) ...
   invert(84%) ..., which lands on grey (~#D6D6D6) and would grey the white
   fill too. With the fill set properly that filter is redundant, so it is
   switched off for these two. */
.header .contact-info-top a[href^="tel:"] svg,
.header .contact-info-top a[href^="mailto:"] svg{filter:none}
.header .contact-info-top a[href^="tel:"] svg path,
.header .contact-info-top a[href^="mailto:"] svg path{fill:var(--cs-white)}

/* --- Mobile close button -------------------------------------------------
   .header .mobmenu-close (navmenu-new.css:30) has no width or height, so its
   box comes out of 30px of bar + 10px side padding + 3px border = 56 wide,
   against 3px of bar + 24px top/bottom padding + 3px border = 57 tall.
   border-radius:50px on a 56x57 box is an ellipse, not a circle. Half a
   pixel off the vertical padding squares it up; the rule is scaled by
   transform elsewhere, which keeps working. */
.header .mobmenu-close{padding:23.5px 10px}

/* --- Current page in the navigation --------------------------------------
   common/header.php puts aria-current="page" on the link for the page being
   viewed; everything here hangs off that attribute.

   Top level: the current item takes the lime the menu already uses for hover,
   and nothing else. A dropdown heading takes it when the current page is one
   of its children. (Figma's Nav-Menu "Hover & Active" state is a 1px underline;
   it was tried and removed on request, 12-10-2026: colour only.)

   Inside the white dropdown the current page is violet on a faint violet tint
   with an 8px radius, the fill and radius Figma gives its menu items
   (2398:975). The lime used for hover barely shows on white, so it is not
   reused there.

   Mobile menu: the current link, and the heading it sits under, take the lime
   that menu already uses for hover.

   The :has() rules are kept apart from the plain ones on purpose. A browser
   without :has() throws away the whole rule it appears in, and this way it
   still marks the link itself. */
.main-navigation .menu > li > a[aria-current="page"]{color:var(--cs-lime)}
.main-navigation .menu > li.dropdown:has(a[aria-current="page"]) > a{color:var(--cs-lime)}
.main-navigation .menu .dropdown ul li a[aria-current="page"]{color:var(--cs-violet)}
.main-navigation .menu .dropdown ul li:has(> a[aria-current="page"]){background:rgba(91,3,117,.08);border-radius:8px}
.header ul#menu a[aria-current="page"]{color:var(--cs-lime)}
.header ul#menu > li.dropdown:has(a[aria-current="page"]) > a{color:var(--cs-lime)}