/*
SHIP CHANDLER IN EGYPT CO., LTD
Colour theme: PHARAOH GOLD & DEEP OCEAN BLUE

Loaded after templatemo-klassy-cafe.css and site.css. Colours only: no layout,
spacing, size or animation changes. Remove this file (THEME_CSS = None in
_build_site.py) to return to the original Klassy Cafe coral colours, which
are kept unchanged in the other two stylesheets.

All colours come from the variables below.
*/

:root {
  /* palette */
  --color-primary: #173A53;        /* Deep Ocean Blue */
  --color-primary-dark: #102B40;   /* Midnight Ocean Blue */
  --color-secondary: #C5A46D;      /* Pharaoh Gold */
  --color-accent: #9AB8C8;         /* Muted Sky Blue */
  --color-background: #F8F6F1;     /* Warm Ivory */
  --color-surface: #FFFFFF;        /* White */
  --color-text: #263442;           /* Charcoal Navy */
  --color-light-blue: #EDF3F6;
  --color-light-gold: #F5EFE3;
  /* derived: gold text on white/ivory (Pharaoh Gold itself is too light for text there) */
  --color-secondary-text: #8C6B32;
  --color-muted: #5B6B79;
  --color-line: #DCE6EC;
  --color-deep: #0D2436;           /* mobile sub-menu rows */

  /* site.css tokens mapped onto the palette */
  --coral: var(--color-primary);
  --coral-dark: var(--color-primary-dark);
  --ink: var(--color-text);
  --ink-2: var(--color-primary-dark);
  --blush: var(--color-background);
  --grey: var(--color-light-blue);
  --line: var(--color-line);
  --muted: var(--color-muted);
}

/* ---------------------------------------------- base */
body, p { color: var(--color-text); }
::selection { background: var(--color-secondary); color: var(--color-primary-dark); }
::-moz-selection { background: var(--color-secondary); color: var(--color-primary-dark); }
a { color: var(--color-primary); }
a:hover { color: var(--color-secondary-text); }
.about-copy p, .svc-copy p, .port-body p, .why-intro, .section-sub, .banner-lede,
.checklist-text, .cta-text, .quote-aside p { color: var(--color-text); }
#preloader { background-color: var(--color-primary); }
#preloader .jumper > div { background-color: var(--color-secondary); }
.skip-link { background: var(--color-secondary); color: var(--color-primary-dark); }
.skip-link:focus { color: var(--color-primary-dark); }

/* ---------------------------------------------- header */
.header-area, .background-header { background-color: var(--color-primary); }
.background-header { box-shadow: 0 6px 18px rgba(16, 43, 64, .35) !important; }
.header-area .main-nav .nav li a,
.background-header .main-nav .nav li a { color: #fff !important; }
.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active,
.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active { color: var(--color-secondary) !important; }
.header-area .main-nav .nav > li:not(.nav-cta) > a::after { background: var(--color-secondary); }
.logo-text .logo-line { color: #fff; }
.logo-text .logo-line em { color: var(--color-secondary); }
.logo-text .logo-sub { color: var(--color-accent); }
.sub-toggle { color: #fff; }
.header-area .main-nav .nav li.submenu:after { color: #fff; } /* template caret (hidden) */
.submenu:hover > .sub-toggle, .submenu.open > .sub-toggle { color: var(--color-secondary); }
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after,
.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after { background-color: #fff; }
.header-area .main-nav .menu-trigger.active span,
.background-header .main-nav .menu-trigger.active span { background-color: transparent; }
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after { background-color: #fff; }
.header-area :focus-visible { outline-color: var(--color-secondary); }

/* dropdowns: white panel, gold top rule, light gold hover */
.header-area .main-nav .nav li.submenu ul { background: var(--color-surface); border-top-color: var(--color-secondary); box-shadow: 0 14px 30px rgba(16, 43, 64, .22); }
.header-area .main-nav .nav li.submenu ul li a,
.background-header .main-nav .nav li.submenu ul li a {
  background: var(--color-surface); color: var(--color-primary-dark) !important; border-bottom-color: var(--color-line);
}
.header-area .main-nav .nav li.submenu ul li a:hover,
.background-header .main-nav .nav li.submenu ul li a:hover,
.header-area .main-nav .nav li.submenu ul li a.active {
  background: var(--color-light-gold); color: var(--color-primary) !important;
}
.header-area .main-nav .nav li.submenu ul li.submenu-label { color: var(--color-secondary-text); background: var(--color-surface); border-bottom-color: var(--color-line); }

/* Get Free Quote */
.header-area .main-nav .nav li.nav-cta a,
.header-area .main-nav .nav li.nav-cta:hover a,
.background-header .main-nav .nav li.nav-cta a,
.background-header .main-nav .nav li.nav-cta:hover a,
.header-area .main-nav .nav li.nav-cta a.active {
  background: var(--color-secondary); color: var(--color-primary-dark) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .2);
}
.header-area .main-nav .nav li.nav-cta a:hover,
.background-header .main-nav .nav li.nav-cta a:hover { background: #fff; color: var(--color-primary-dark) !important; }

/* mobile and tablet menu: deep blue panel */
@media (max-width: 1199px) {
  .header-area, .background-header { background: var(--color-primary); }
  .header-area .main-nav ul.nav { background: var(--color-primary-dark); border-top-color: rgba(255, 255, 255, .1); }
  .header-area .main-nav ul.nav > li { background: var(--color-primary-dark); border-bottom-color: rgba(255, 255, 255, .08); }
  .header-area .main-nav ul.nav li a { background: transparent !important; color: #fff !important; }
  .header-area .main-nav ul.nav li a:hover,
  .header-area .main-nav ul.nav li a.active { background: rgba(255, 255, 255, .06) !important; color: var(--color-secondary) !important; }
  .header-area .main-nav ul.nav li.submenu ul li { background: var(--color-deep); border-bottom-color: rgba(255, 255, 255, .06); }
  .header-area .main-nav ul.nav li.submenu ul li a { background: var(--color-deep) !important; color: #e6eef3 !important; border-bottom-color: rgba(255, 255, 255, .06); }
  .header-area .main-nav ul.nav li.submenu ul li a:hover,
  .header-area .main-nav ul.nav li.submenu ul li a.active { background: var(--color-deep) !important; color: var(--color-secondary) !important; }
  .header-area .main-nav ul.nav li.submenu ul li.submenu-label { background: var(--color-deep); color: var(--color-secondary); border-bottom-color: rgba(255, 255, 255, .06); }
  .header-area .main-nav ul.nav li.nav-cta a { background: var(--color-secondary) !important; color: var(--color-primary-dark) !important; }
  .header-area .main-nav ul.nav li.nav-cta a:hover { background: #fff !important; color: var(--color-primary-dark) !important; }
}

/* ---------------------------------------------- headings */
.section-heading h2, .banner-heading h1 { color: var(--color-primary); }
.section-heading h2 em, .section-heading h1 em, .banner-heading h1 em { color: var(--color-secondary-text); }
.section-heading .eyebrow { color: var(--color-secondary-text); }
.section-heading .eyebrow:before { background-color: var(--color-secondary); }
.section-heading.light h2 { color: #fff; }
.section-heading.light .eyebrow { color: var(--color-secondary); }
.section-heading.light .eyebrow:before { background: var(--color-secondary); }

/* ---------------------------------------------- buttons */
/* primary: blue -> gold */
.main-coral-button a { background: var(--color-primary); color: #fff; box-shadow: 0 8px 20px rgba(23, 58, 83, .22); }
.main-coral-button a:hover { background: var(--color-secondary); color: var(--color-primary-dark); }
/* on blue backgrounds the primary button is gold (secondary style) */
.cta-band .main-coral-button a { background: var(--color-secondary); color: var(--color-primary-dark); box-shadow: 0 8px 20px rgba(0, 0, 0, .2); }
.cta-band .main-coral-button a:hover { background: #fff; color: var(--color-primary-dark); }
/* hero: gold primary, outlined secondary */
.hero-banner .main-white-button a { background: var(--color-secondary); color: var(--color-primary); }
.hero-banner .main-white-button a:hover { background: #fff; color: var(--color-primary-dark); }
.main-outline-button a { color: #fff; border-color: var(--color-secondary); }
.main-outline-button a:hover { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-primary-dark); }
/* form buttons */
.contact-form button, .contact-form button.main-button-icon { background-color: var(--color-primary); color: #fff; }
.contact-form button.main-button-icon:hover { background: var(--color-secondary); color: var(--color-primary-dark); }

/* ---------------------------------------------- page banner */
.page-banner { background: var(--color-background); border-bottom-color: var(--color-light-gold); }
.page-banner::before { border-color: rgba(154, 184, 200, .55); }
.page-banner::after { background: var(--color-secondary); }
.banner-script { color: rgba(197, 164, 109, .16); }
.crumbs { color: var(--color-muted); }
.crumbs a { color: var(--color-primary); }
.crumbs a:hover { color: var(--color-secondary-text); }
.crumbs li + li::before { color: var(--color-secondary-text); }

/* ---------------------------------------------- home hero */
.hero-left {
  background-color: var(--color-primary);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(197, 164, 109, .16) 0, rgba(197, 164, 109, 0) 40%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 18px);
}
.hero-left::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='46' viewBox='0 0 120 46'%3E%3Cpath d='M0 30 Q15 16 30 30 T60 30 T90 30 T120 30' fill='none' stroke='%23C5A46D' stroke-width='1.5'/%3E%3C/svg%3E");
}
.hero-script { color: var(--color-secondary); }
.hero-title { color: #fff; }
.hero-location { color: var(--color-accent); }
.hero-location::before { background: var(--color-secondary); }
.hero-text { color: rgba(255, 255, 255, .9); }
.hero-image { background: var(--color-primary-dark); }
.hero-tag { background: #fff; color: var(--color-primary); border-left-color: var(--color-secondary); }

/* ---------------------------------------------- services preview cards */
.services-preview { background: var(--color-surface); }
.svc-card { background: var(--color-primary-dark); box-shadow: 0 14px 34px rgba(23, 58, 83, .14); transition: box-shadow .4s; }
.svc-card:hover, .svc-card:focus-within { box-shadow: 0 0 0 2px var(--color-secondary), 0 18px 40px rgba(23, 58, 83, .2); }
.svc-card-num span { background: var(--color-secondary); color: var(--color-primary-dark); }
.svc-card-info { background: var(--color-surface); border-top: 3px solid var(--color-secondary); }
.svc-card .title a { color: var(--color-primary); }
.svc-card .title a:hover { color: var(--color-secondary-text); }
.svc-card .description { color: var(--color-text); }
.svc-card-points li { color: var(--color-text); }
.svc-card-points li::before { color: var(--color-secondary-text); opacity: 1; }
.svc-card .main-text-button a { color: var(--color-primary); }
.svc-card .main-text-button a:hover { color: var(--color-secondary-text); }

/* ---------------------------------------------- why choose us */
.why-section { background: var(--color-surface); }
.why-aim { color: var(--color-secondary-text); }
.why-item { border-bottom-color: var(--color-accent); }
.why-item::after { background: var(--color-secondary); }
.why-num { color: var(--color-primary); }
.why-text { color: var(--color-primary); }
.why-item:hover .why-num { color: var(--color-secondary-text); }

/* ---------------------------------------------- vessels */
.vessels-section { background: var(--color-light-blue); }
.vessels-left {
  background-color: var(--color-primary);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 14px);
}
.vessels-count { -webkit-text-stroke-color: rgba(197, 164, 109, .55); }
.vessels-right { background: var(--color-light-blue); }
.vessel-list li { color: var(--color-text); border-bottom-color: var(--color-accent); }
.vessel-list li::before { background: var(--color-secondary); }
.vessel-list li:hover { background: var(--color-surface); color: var(--color-primary); }
.vessel-num { color: var(--color-secondary-text); }

/* ---------------------------------------------- call to action (RFQ) */
.cta-band {
  background-color: var(--color-primary);
  background-image:
    radial-gradient(circle at 85% 20%, rgba(197, 164, 109, .22) 0, rgba(197, 164, 109, 0) 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 16px);
}
.cta-band .section-heading h2 em { color: var(--color-secondary); }
.cta-text { color: rgba(255, 255, 255, .88); }
.rfq-chips li { border-color: rgba(154, 184, 200, .45); color: #fff; }
.rfq-chips li i { color: var(--color-secondary); }
.rfq-chips li:hover { border-color: var(--color-secondary); background: rgba(197, 164, 109, .14); }

/* ---------------------------------------------- about */
.home-about { background: var(--color-background); }
.about-watermark { color: rgba(197, 164, 109, .1); }
.about-script { color: var(--color-secondary-text); }
.about-rule { background: var(--color-secondary); }
.dropcap::first-letter { color: var(--color-secondary-text); }
.about-focus { background: var(--color-light-gold); border-left-color: var(--color-secondary); }
.about-overview { background: var(--color-surface); }
.about-photo::before { border-color: var(--color-secondary); }
.checklist-section { background: var(--color-background); }
.checklist-card { background: var(--color-surface); box-shadow: 0 14px 34px rgba(23, 58, 83, .08); }
.checklist li { color: var(--color-text); border-bottom-color: var(--color-line); }
.checklist li i { background: var(--color-secondary); color: var(--color-primary-dark); }
.checklist-note { color: var(--color-muted); }

/* ---------------------------------------------- services page */
.svc-block { background: var(--color-surface); }
.svc-block--alt { background: var(--color-background); }
.svc-block--wide { background: var(--color-light-blue); }
.svc-media { box-shadow: 0 16px 36px rgba(23, 58, 83, .14); }
.svc-num { -webkit-text-stroke-color: var(--color-secondary); }
.svc-num--on-img { -webkit-text-stroke-color: #fff; }
.svc-media--wide::after { background: linear-gradient(0deg, rgba(16, 43, 64, .55), rgba(16, 43, 64, 0) 55%); }
.svc-list li { color: var(--color-text); border-bottom-color: var(--color-line); }
.svc-list li::before { border-color: var(--color-secondary); }
.svc-list li:hover { color: var(--color-primary); }
.svc-list li:hover::before { background: var(--color-secondary); }
.svc-block--urgent { background-color: var(--color-primary-dark); background-image: radial-gradient(circle at 90% 10%, rgba(197, 164, 109, .2), rgba(197, 164, 109, 0) 45%); }
.svc-block--urgent .svc-copy p { color: rgba(255, 255, 255, .88); }
.svc-block--urgent .svc-num { -webkit-text-stroke-color: var(--color-secondary); }

/* ---------------------------------------------- contact */
.contact-section {
  background-color: var(--color-primary);
  background-image: radial-gradient(circle at 10% 90%, rgba(197, 164, 109, .18), rgba(197, 164, 109, 0) 45%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 16px);
}
.info-box { background: var(--color-surface); }
.info-box:hover { box-shadow: 0 0 0 2px var(--color-secondary), 0 14px 30px rgba(0, 0, 0, .25); }
.info-box i { background: var(--color-secondary); color: var(--color-primary-dark); }
.info-box h3 { color: var(--color-primary); }
.info-box p, .info-box a { color: var(--color-text); }
.info-box a:hover { color: var(--color-secondary-text); }
.map-link { color: #fff; border-bottom-color: rgba(197, 164, 109, .6); }
.map-link:hover { color: var(--color-secondary); border-color: var(--color-secondary); }

/* ---------------------------------------------- forms */
.form-card { background: var(--color-surface); }
.form-title { color: var(--color-primary); }
.form-intro, .form-hint { color: var(--color-muted); }
.form-label { color: var(--color-primary); }
.req { color: var(--color-secondary-text); }
.contact-form input, .contact-form textarea, .contact-form select { border-color: var(--color-accent); color: var(--color-text); }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(197, 164, 109, .3);
}
.contact-form ::placeholder { color: #8796a3; }
.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23173A53' stroke-width='2'/%3E%3C/svg%3E");
}
.form-section-label { color: var(--color-primary); border-bottom-color: var(--color-line); }
.form-section-label span { background: var(--color-primary); color: #fff; }
.file-drop { border-color: var(--color-accent); background: var(--color-light-blue); color: var(--color-text); }
.file-drop i { color: var(--color-primary); }
.file-drop:hover, .file-input:focus-visible + .file-drop, .file-drop.has-files { border-color: var(--color-primary); background: var(--color-surface); }
.form-note.is-pending { background: var(--color-light-gold); border-left-color: var(--color-secondary); color: var(--color-text); }
.quote-section { background: var(--color-background); }
.steps li { color: var(--color-text); }
.steps li::before { background: var(--color-primary); color: #fff; }
.steps li:not(:last-child)::after { background: var(--color-accent); }
.steps strong { color: var(--color-primary); }
.chips li { background: var(--color-light-gold); border-color: var(--color-secondary); color: var(--color-primary); }

/* ---------------------------------------------- port pages */
.port-section { background: var(--color-surface); }
.port-section--alt { background: var(--color-background); }
.port-num { -webkit-text-stroke-color: var(--color-secondary); }
.port-h2 { color: var(--color-primary); }
.port-rule { background: var(--color-secondary); }
.port-list li { color: var(--color-text); border-bottom-color: var(--color-line); }
.port-list li::before { background: var(--color-secondary); }
.port-list li:hover { color: var(--color-primary); background: var(--color-light-blue); }
.port-sign { color: var(--color-primary); border-top-color: var(--color-secondary); border-bottom-color: var(--color-secondary); }

/* ---------------------------------------------- footer */
footer.site-footer { background-color: var(--color-primary); color: #fff; }
footer.site-footer::before {
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='46' viewBox='0 0 120 46'%3E%3Cpath d='M0 16 Q15 2 30 16 T60 16 T90 16 T120 16' fill='none' stroke='%239AB8C8' stroke-width='1.5'/%3E%3C/svg%3E");
}
.footer-name, .footer-name:hover { color: #fff; }
.footer-name span { color: var(--color-secondary); }
.footer-name small { color: var(--color-accent); }
.footer-script { color: var(--color-secondary); }
.footer-text { color: rgba(255, 255, 255, .85); }
.footer-title { color: var(--color-secondary); }
.footer-title::after { background: var(--color-accent); }
.footer-links a { color: #fff; }
.footer-links a:hover { color: var(--color-secondary); }
.footer-links a::after { background: var(--color-secondary); }
.footer-contact li { color: #fff; }
.footer-contact i { background: var(--color-secondary); color: var(--color-primary-dark); }
.footer-contact li:hover i { color: #fff; background: var(--color-primary-dark); }
.footer-contact b { color: var(--color-accent); opacity: 1; }
.footer-contact a { color: #fff; }
.footer-contact a:hover { color: var(--color-secondary); }
.footer-bottom { border-top-color: rgba(154, 184, 200, .3); }
.footer-bottom p { color: var(--color-accent); }

/* ---------------------------------------------- simplified section backgrounds
   Homepage hero: solid cream (see below), no stripes, glow or wave overlay.
   Quotation band ("Send your RFQ before arrival" on the homepage, "Request a
   quotation" on Services): solid cream. The band on the Abidjan page stays blue. */
.hero-left::after { content: none; }

/* Homepage hero on solid cream, so the blue header stands apart from it */
.hero-banner, .hero-left { background: var(--color-background); }
.hero-left .hero-script { color: var(--color-secondary); }
.hero-left .hero-title { color: var(--color-primary); }
.hero-left .hero-location { color: var(--color-muted); }
.hero-left .hero-text { color: var(--color-text); }
.hero-banner .main-white-button a { background: var(--color-secondary); color: var(--color-primary); }
.hero-banner .main-white-button a:hover { background: var(--color-primary); color: #fff; }
.hero-banner .main-outline-button a { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.hero-banner .main-outline-button a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
@media (min-width: 992px) {
  /* rounded inner corners; the image keeps its size and position */
  .hero-banner .hero-image { border-radius: 16px 0 0 16px; }
}

.page-services .cta-band,
.page-index .cta-band { background: var(--color-background); }
.page-services .cta-band .section-heading.light .eyebrow,
.page-index .cta-band .section-heading.light .eyebrow { color: var(--color-secondary); }
.page-services .cta-band .section-heading.light .eyebrow:before,
.page-index .cta-band .section-heading.light .eyebrow:before { background: var(--color-secondary); }
.page-services .cta-band .section-heading.light h2,
.page-index .cta-band .section-heading.light h2 { color: var(--color-primary); }
.page-services .cta-band .section-heading h2 em,
.page-index .cta-band .section-heading h2 em { color: var(--color-secondary); }
.page-services .cta-band .cta-text,
.page-index .cta-band .cta-text { color: var(--color-text); }
.page-index .cta-band .rfq-chips li { background: var(--color-surface); border-color: var(--color-accent); color: var(--color-primary); }
.page-index .cta-band .rfq-chips li i { color: var(--color-secondary); }
.page-index .cta-band .rfq-chips li:hover { background: var(--color-light-blue); border-color: var(--color-accent); }
.page-services .cta-band .main-coral-button a,
.page-index .cta-band .main-coral-button a { background: var(--color-secondary); color: var(--color-primary); box-shadow: 0 8px 20px rgba(23, 58, 83, .15); }
.page-services .cta-band .main-coral-button a:hover,
.page-index .cta-band .main-coral-button a:hover { background: var(--color-primary); color: #fff; }

/* ---------------------------------------------- contact page, section 2: solid white
   Info boxes take the cream fill and the form card a thin border so they keep
   their edges on white. */
.page-contact .contact-section { background: var(--color-surface); }
.page-contact .contact-section .section-heading.light .eyebrow { color: var(--color-secondary); }
.page-contact .contact-section .section-heading.light .eyebrow:before { background: var(--color-secondary); }
.page-contact .contact-section .section-heading.light h2 { color: var(--color-primary); }
.page-contact .info-box { background: var(--color-background); }
.page-contact .info-box:hover { box-shadow: 0 0 0 2px var(--color-secondary), 0 14px 30px rgba(23, 58, 83, .12); }
.page-contact .info-box p, .page-contact .info-box a { color: var(--color-primary); }
.page-contact .info-box a:hover { color: var(--color-secondary-text); }
.page-contact .contact-section .map-link { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.page-contact .contact-section .map-link:hover { color: var(--color-secondary-text); border-color: var(--color-secondary); }
.page-contact .form-card { border: 1px solid var(--color-line); box-shadow: 0 14px 34px rgba(23, 58, 83, .08); }

/* ---------------------------------------------- Services dropdown scrollbar */
.header-area .main-nav .nav li.submenu--services > ul { scrollbar-color: var(--color-accent) var(--color-background); }
.header-area .main-nav .nav li.submenu--services > ul::-webkit-scrollbar-track { background: var(--color-background); }
.header-area .main-nav .nav li.submenu--services > ul::-webkit-scrollbar-thumb { background: var(--color-accent); }
.header-area .main-nav .nav li.submenu--services > ul::-webkit-scrollbar-thumb:hover { background: var(--color-secondary); }

/* ---------------------------------------------- Services page hero (split layout) */
.page-services .page-banner .eyebrow { color: var(--color-secondary); }
.banner-count { color: var(--color-secondary); }
.banner-count-label { color: var(--color-primary); }
.banner-count-rule { background: var(--color-secondary); }
.banner-count-text { color: var(--color-muted); }
.banner-cta a:hover { color: var(--color-primary); }

/* ---------------------------------------------- homepage WhatsApp button */
.wa-pill { border-color: var(--color-primary); color: var(--color-primary); }
.wa-pill:hover, .wa-pill:focus-visible { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }