/* IGNITE design layer, loaded last on every page: the scrolled header, one button system,
   card affordances and calmer spacing. Palette: maroon #4a0202, ivory #fffff0, sand #d8c7b7. */

/* Header: clear over the hero, then a blurred maroon bar so content never collides with the logo. */
.framer-5er3qc-container::before,.framer-fx0gay-container::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(62,2,2,.9);-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 1px 0 rgba(255,255,240,.08),0 10px 30px rgba(0,0,0,.18);opacity:0;transition:opacity .35s ease}
html.ignite-scrolled .framer-5er3qc-container::before,html.ignite-scrolled .framer-fx0gay-container::before{opacity:1}
html.ignite-scrolled nav[data-framer-name$="Close"]{background:transparent!important}

/* Buttons: ivory pill for the main action, outlined pill for the secondary one. */
.ignite-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;box-sizing:border-box;border:1px solid #fffff0;border-radius:999px;font:600 15px/1.2 Inter,"Inter Placeholder",Arial,sans-serif;letter-spacing:-.01em;text-decoration:none!important;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,border-color .2s ease,color .2s ease}
.ignite-btn--primary{background:#fffff0;color:#4a0202!important}
.ignite-btn--primary:hover{background:#d8c7b7;border-color:#d8c7b7}
.ignite-btn--ghost{background:rgba(40,0,0,.28);color:#fffff0!important;border-color:rgba(255,255,240,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ignite-btn--ghost:hover{background:rgba(255,255,240,.1);border-color:#fffff0}
.ignite-btn--primary::after,.ignite-native-service .native-service-cta::after{content:'';flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s ease}
.ignite-btn--primary:hover::after,.ignite-native-service .native-service-cta:hover::after{transform:translateX(3px)}
.ignite-btn:focus-visible,.ignite-native-service .native-service-cta:focus-visible,a.framer-text[href$="#inquire"]:focus-visible{outline:2px solid #fffff0!important;outline-offset:4px}

/* Homepage hero actions, added beneath the headline once Framer has rendered. */
.ignite-hero-ctas{position:absolute;left:0;bottom:44px;z-index:3;display:flex;flex-wrap:wrap;gap:12px;animation:ignite-rise .9s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes ignite-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(max-width:809px){.ignite-hero-ctas{left:0;right:0;bottom:max(48px,env(safe-area-inset-bottom));justify-content:center;gap:10px}.ignite-hero-ctas .ignite-btn{flex:1 1 0;min-width:0;max-width:200px;padding:0 16px;font-size:15px}}

/* Static pages (services, booking, privacy, 404): the hero action becomes a real button. */
.ignite-native-service .native-service-cta{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;width:auto!important;height:auto!important;min-height:50px;padding:0 26px!important;box-sizing:border-box;border:1px solid #fffff0!important;border-radius:999px!important;background:#fffff0!important;color:#4a0202;opacity:1!important;transition:background-color .2s ease,border-color .2s ease}
.ignite-native-service .native-service-cta [data-framer-name="Button Text"]{padding:0!important;width:auto!important}
.ignite-native-service .native-service-cta p{color:#4a0202!important;font-weight:600!important;white-space:nowrap}
.ignite-native-service .native-service-cta:hover{background:#d8c7b7!important;border-color:#d8c7b7!important;opacity:1!important}
.ignite-native-service .native-service-cta.is-secondary{background:transparent!important;border-color:rgba(255,255,240,.5)!important;color:#fffff0}
.ignite-native-service .native-service-cta.is-secondary p{color:#fffff0!important}
.ignite-native-service .native-service-cta.is-secondary:hover{background:rgba(255,255,240,.08)!important;border-color:#fffff0!important}

.ignite-native-service .ignite-session-card a{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px!important;border-radius:999px;font-weight:600;text-decoration:none;transition:background-color .2s ease}
.ignite-native-service .ignite-session-card a:hover{background:#611414}
.ignite-native-service .ignite-session-card a:focus-visible{outline:2px solid #4a0202;outline-offset:4px}

/* Who each service is for: a labelled line rather than a sentence fragment. */
.native-service-context .native-service-audience::before{content:'Who it’s for';display:block;margin-bottom:8px;font:600 12px/1.4 Inter,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d8c7b7}

/* Calmer vertical rhythm on the static pages (the exported template spaced sections 240px apart). */
@media(min-width:810px){
 .ignite-native-service .framer-1lcjgqu-container>header{padding-bottom:72px!important}
 .ignite-native-service [data-framer-name="Values Section"]{padding-top:96px!important;padding-bottom:56px!important}
 .ignite-native-service .native-related{padding-bottom:24px!important}
 .ignite-native-service .native-contact section[data-framer-name="Desktop"],.ignite-native-service .native-contact section[data-framer-name="Tablet"]{padding-top:96px!important}
}
/* Desktop: the service list lines up with the intro text column, as the values list does on About. */
@media(min-width:1200px){.ignite-native-service [data-framer-name="Value Wrap"]>[data-framer-name="Values"]{margin-left:auto}}

/* Global Programmes: the interest link becomes a button; programme cards lift and say where they go. */
a.framer-text[href$="#inquire"]{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 26px;box-sizing:border-box;border-radius:999px;background:#fffff0;color:#4a0202!important;--framer-link-text-color:#4a0202;text-decoration:none!important;font-weight:600;transition:background-color .2s ease}
a.framer-text[href$="#inquire"]:hover{background:#d8c7b7}
a[data-framer-name="Program Card Template"]{transition:translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
a[data-framer-name="Program Card Template"]:hover{translate:0 -4px;box-shadow:0 22px 44px rgba(0,0,0,.28)}
a[data-framer-name="Program Card Template"] [data-framer-name="Program Image"]{overflow:hidden}
a[data-framer-name="Program Card Template"] [data-framer-name="Program Image"] img{transition:scale .7s cubic-bezier(.2,.8,.2,1)}
a[data-framer-name="Program Card Template"]:hover [data-framer-name="Program Image"] img{scale:1.04}
a[data-framer-name="Program Card Template"] [data-framer-name="Program Details"]::after{content:'View programme →';display:block;margin-top:6px;font:600 14px/1.4 Inter,Arial,sans-serif;color:#4a0202;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
a[data-framer-name="Program Card Template"]:focus-visible{outline:2px solid #fffff0;outline-offset:4px}

/* Footer: the added "Book a session" link needs its column to grow, and the newsletter
   pill replaces Framer's arrow icon (it was drawn over the word "Join"). */
footer [data-framer-name="Links"]{height:auto!important}
footer [data-framer-name="Input"]>:not(:has(form)){display:none!important}

/* Keyboard focus is always visible; selections use the brand colours. */
a:focus-visible,button:focus-visible,summary:focus-visible,[role="button"]:focus-visible{outline:2px solid currentColor;outline-offset:3px}
::selection{background:#fffff0;color:#4a0202}

@media(prefers-reduced-motion:reduce){
 .ignite-hero-ctas{animation:none}
 a[data-framer-name="Program Card Template"],a[data-framer-name="Program Card Template"] img,.ignite-btn::after{transition:none}
 a[data-framer-name="Program Card Template"]:hover{translate:none}
 a[data-framer-name="Program Card Template"]:hover [data-framer-name="Program Image"] img{scale:none}
}

/* Homepage bento: the first card's description now matches the other cards (it was 12px). */
.framer-oxwouu>p.framer-text{font-size:16px!important;line-height:1.2!important}

/* About: the founder card already opens LinkedIn; say so. */
a[href^="https://www.linkedin.com/in/habib-allawati"]::after{content:'View LinkedIn profile ↗';display:block;align-self:flex-start;margin-top:14px;font:600 14px/1.4 Inter,Arial,sans-serif;letter-spacing:0;color:#fffff0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}

/* Open menu: dim the page behind the panel so the menu reads as one focused layer. */
nav[data-framer-name$="Open"] [data-framer-name="Menu"],nav.ignite-menu-open [data-framer-name="Menu"]{box-shadow:0 1px 0 rgba(255,255,240,.1),0 24px 60px rgba(0,0,0,.35),0 0 0 100vmax rgba(18,0,0,.55)}

/* 404 suggestions use the same pill shape as every other button. */
.ignite-not-found a{border-radius:999px;border-color:rgba(255,255,240,.45)!important}
.ignite-not-found a:hover{border-color:#fffff0!important}

/* Hover, focus and tap targets: one language across header, menu, footer, forms and dialogs.
   Filled buttons lighten, outlined ones fill softly, text links brighten and underline. */
a[data-framer-name="Brand"]{transition:opacity .2s ease}
a[data-framer-name="Brand"]:hover{opacity:.72!important}
a[data-framer-name="Brand"]::before,nav [data-framer-name="Menu Button"]::before,nav [data-framer-name="Close Button"]::before{content:'';position:absolute;inset:-12px -14px}
nav [data-framer-name="Menu Button"] p,nav [data-framer-name="Close Button"] p{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s cubic-bezier(.2,.8,.2,1)}
nav [data-framer-name="Menu Button"]:hover p,nav [data-framer-name="Close Button"]:hover p{background-size:100% 1.5px}

footer a[href],[id="contact"] a[href],.ignite-legal a,.ignite-form-note a{transition:color .2s ease,text-decoration-color .2s ease}
footer [data-framer-name="Links"] a:hover,footer a[href^="tel:"]:hover,footer a[href^="mailto:"]:hover,footer a[href^="https://wa.me"]:hover{color:#fffff0!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:5px!important}
/* Links that are underlined at rest shift to sand on hover, like the menu links; on ivory they deepen instead. */
footer .ignite-footer-legal:hover,.ignite-legal a:hover,.ix-related-all:hover,dialog .ignite-form-note a:hover{color:#d8c7b7!important}
[id="contact"] .ignite-form-note a:hover,.booking-panel .ignite-form-note a:hover{color:#8d1515!important}
[id="contact"] a[href^="tel:"]:hover,[id="contact"] a[href^="mailto:"]:hover,[id="contact"] a[href^="https://wa.me"]:hover{text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:4px!important}
/* Small text links get a larger invisible tap area (at least 24px tall) without moving anything. */
footer [data-framer-name="Links"] a,footer a[href^="tel:"],footer a[href^="mailto:"],footer a[href^="https://wa.me"],[id="contact"] a[href^="tel:"],[id="contact"] a[href^="mailto:"],[id="contact"] a[href^="https://wa.me"]{position:relative}
footer [data-framer-name="Links"] a::before,footer a[href^="tel:"]::before,footer a[href^="mailto:"]::before,footer a[href^="https://wa.me"]::before{content:'';position:absolute;inset:-3px -6px}
[id="contact"] a[href^="tel:"]::before,[id="contact"] a[href^="mailto:"]::before,[id="contact"] a[href^="https://wa.me"]::before{content:'';position:absolute;inset:-8px -6px}

/* Maroon form buttons share the same hover as every other filled button. */
form button[type="submit"]{transition:background-color .2s ease,opacity .2s ease}
[id="contact"] form button[type="submit"]:hover{background-color:#6e1212!important;opacity:1!important}
form button[type="submit"]:focus-visible{outline:2px solid #4a0202!important;outline-offset:3px!important}
form select:focus-visible{outline:2px solid currentColor!important;outline-offset:6px}

/* Newsletter: the email field carries its own underline and Join sits clear of it, centred beside the field. */
footer [data-framer-name="Input"][data-border]::after{border-width:0!important}
footer [data-framer-name="Input"]{height:auto!important;min-height:0!important}
footer form[data-ignite-newsletter]{gap:16px!important;align-items:center!important}
footer form[data-ignite-newsletter] input[type="email"]{padding:12px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,240,.55)!important;border-radius:0!important;transition:border-color .2s ease,box-shadow .2s ease}
footer form[data-ignite-newsletter] input[type="email"]:hover{border-bottom-color:rgba(255,255,240,.85)!important}
footer form[data-ignite-newsletter] input[type="email"]:focus{border-bottom-color:#fffff0!important;box-shadow:0 1px 0 0 #fffff0}
footer form[data-ignite-newsletter] input[type="submit"]{height:40px!important}
footer form[data-ignite-newsletter] input[type="email"]:focus{outline:none!important}
footer form[data-ignite-newsletter] input[type="submit"]:focus-visible{outline:2px solid #fffff0!important;outline-offset:3px!important}
/* Framer resets the button text to empty while someone types, so the label is drawn here instead. */
footer form[data-ignite-newsletter]>div{position:relative!important;inset:auto!important}
footer form[data-ignite-newsletter] input[type="submit"]{width:72px!important;color:transparent!important;-webkit-text-fill-color:transparent}
footer form[data-ignite-newsletter]>div::after{content:'Join';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:600 14px/1 Inter,"Inter Placeholder",Arial,sans-serif;color:#4a0202;pointer-events:none}

/* Dialogs */
.drawer-close{transition:background-color .2s ease,border-color .2s ease}
.drawer-close:hover{background:rgba(255,255,240,.08);border-color:#fffff0}
/* Focus rings in the dark header and menu are ivory, never maroon on maroon. */
nav a:focus-visible,nav [role="button"]:focus-visible,nav [tabindex]:focus-visible{outline:2px solid #fffff0!important;outline-offset:4px!important}
/* Menu links sit in clipped text boxes, so their focus shows as a bold underline instead. */
nav [data-framer-name="Links"] a:not(.ignite-service-submenu a):focus-visible{outline:none!important;text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:8px!important}
/* Decorative text that Framer marked as tappable should not look clickable. */
[data-framer-name="About Text"]{cursor:default!important}

/* Framer's "Work With IGNITE" arrow link: Framer swaps in an identical copy of the text on hover, so an
   underline drawn on the link itself (which Framer never touches) makes the hover visible. */
a.framer-snYOn:not(.native-service-cta)::after{content:'';position:absolute;left:0;right:44px;bottom:1px;height:1px;background:#fffff0;transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1);pointer-events:none}
a.framer-snYOn:not(.native-service-cta):hover::after{transform:scaleX(1)}
/* Framer component links inherit a default blue as their own colour: keep their focus ring ivory. */
a[data-framer-name]:focus-visible{outline-color:#fffff0!important}
/* Programme cards sit in a clipped grid, so their focus ring is drawn inside the card, with the hover lift. */
a[data-framer-name="Program Card Template"]:focus-visible{outline:3px solid #4a0202!important;outline-offset:-6px!important;translate:0 -4px}

/* Tap comfort: the Singapore interest button, "All services" and links in the privacy policy. */
button[data-framer-name="Apply to Program"]{min-height:44px}
.ix-related-all{display:inline-block;padding:10px 0;margin:-10px 0}
.ignite-legal a{position:relative}
.ignite-legal a::before{content:'';position:absolute;inset:-6px -4px}
/* Contact form fields: the underline darkens on hover, like the newsletter field. */
form .framer-form-input-wrapper::after{transition:border-color .2s ease}
form .framer-form-input-wrapper:hover::after{border-bottom-color:#8d1515!important}

/* Menu → Services: four cards with the service photo, number, title, summary and arrow (one column on phones). */
nav [data-services-trigger]::after{content:''!important;width:.36em;height:.36em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.14em) rotate(45deg);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
nav [data-services-trigger][aria-expanded="true"]::after{transform:translateY(.1em) rotate(225deg)}
nav .ignite-service-submenu{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(760px,calc(100vw - 48px))!important;max-width:none!important;padding:20px 0 12px!important;box-sizing:border-box}
nav .ignite-service-submenu[hidden]{display:none!important}
/* With an odd number of services, the first spans the row so the rest pair up. */
nav .ignite-service-submenu>a:first-child:nth-last-child(odd){grid-column:1/-1}
nav .ignite-service-submenu{align-items:stretch!important}
nav .ignite-service-submenu>a{align-self:stretch!important;height:auto!important}
nav .ignite-service-submenu a{display:grid!important;grid-template-columns:64px minmax(0,1fr) 18px;align-items:center;gap:16px;width:auto!important;min-height:0!important;padding:12px 16px 12px 12px!important;border:1px solid rgba(255,255,240,.16);background:rgba(255,255,240,.03)!important;color:#fffff0!important;text-align:left!important;text-decoration:none!important;transition:background-color .25s ease,border-color .25s ease,translate .35s cubic-bezier(.2,.8,.2,1);animation:ignite-sub-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
nav .ignite-service-submenu a:hover{background:rgba(255,255,240,.08)!important;border-color:rgba(255,255,240,.55);translate:0 -2px;text-decoration:none!important}
nav .ignite-service-submenu a[aria-current="page"]{border-color:#fffff0;background:rgba(255,255,240,.1)!important;text-decoration:none!important}
nav .ignite-service-submenu a:focus-visible{outline:2px solid #fffff0!important;outline-offset:3px!important;text-decoration:none!important}
.ignite-sub-media{display:block;width:64px;height:64px;overflow:hidden}
.ignite-sub-media img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.2,.8,.2,1)}
nav .ignite-service-submenu a:hover .ignite-sub-media img{scale:1.08}
.ignite-sub-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.ignite-sub-num{font:600 11px/1 Inter,"Inter Placeholder",Arial,sans-serif;letter-spacing:.14em;color:#d8c7b7}
.ignite-sub-text strong{font:700 17px/1.2 "Inter Display",Inter,Arial,sans-serif;letter-spacing:-.02em;color:#fffff0}
.ignite-sub-sum{font:400 13px/1.45 Inter,"Inter Placeholder",Arial,sans-serif;color:#d4cbc0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ignite-sub-arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
nav .ignite-service-submenu a:hover .ignite-sub-arrow{transform:translateX(3px)}
@keyframes ignite-sub-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:809px){
 nav .ignite-service-submenu{grid-template-columns:1fr;gap:8px;width:calc(100vw - 40px)!important;padding:14px 0 6px!important}
 nav .ignite-service-submenu a{grid-template-columns:48px minmax(0,1fr) 16px;gap:12px;padding:8px 14px 8px 8px!important}
 .ignite-sub-media{width:48px;height:48px}
 .ignite-sub-sum{display:none}
 .ignite-sub-text strong{font-size:15px}
}
@media(prefers-reduced-motion:reduce){nav .ignite-service-submenu a{animation:none}}

/* Homepage "Our services": an editorial list on maroon. The hovered (open) service fills ivory, its
   description appears and the arrow fills in. Rows are numbered 01–04. */
[data-framer-name="Service List"]{counter-reset:ignite-svc}
[data-framer-name="Service List"] a{counter-increment:ignite-svc}
[data-framer-name="Service List"] [data-framer-name="Main"]{background:transparent!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,240,.22);align-items:center!important;gap:24px!important;padding-left:24px!important;padding-right:24px!important;transition:background-color .35s ease,box-shadow .35s ease}
[data-framer-name="Service List"]>div:last-child [data-framer-name="Main"]{box-shadow:inset 0 1px 0 rgba(255,255,240,.22),inset 0 -1px 0 rgba(255,255,240,.22)}
[data-framer-name="Service List"] [data-framer-name="Main"]::before{content:counter(ignite-svc,decimal-leading-zero);flex:none;width:26px;font:600 12px/1 Inter,"Inter Placeholder",Arial,sans-serif;letter-spacing:.14em;color:#d8c7b7;transition:color .3s ease}
[data-framer-name="Service List"] [data-framer-name="Main"]::after{content:'';flex:none;margin-left:auto;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,240,.35);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 8h12M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23fffff0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;transition:background-color .3s ease,border-color .3s ease,translate .35s cubic-bezier(.2,.8,.2,1)}
[data-framer-name="Service List"] h4{color:#fffff0!important;transition:color .3s ease}
[data-framer-name="Service List"] a[data-framer-name$="Open"] [data-framer-name="Main"]{background:#fffff0!important;box-shadow:none}
[data-framer-name="Service List"] a[data-framer-name$="Open"] h4{color:#4a0202!important}
[data-framer-name="Service List"] a[data-framer-name$="Open"] [data-framer-name="Main"]::before{color:#8d1515}
[data-framer-name="Service List"] a[data-framer-name$="Open"] [data-framer-name="Main"]::after{background-color:#4a0202;border-color:#4a0202;translate:4px 0}
[data-framer-name="Service List"] a:focus-visible{outline:2px solid #fffff0!important;outline-offset:3px}
@media(max-width:809px){
 [data-framer-name="Service List"] [data-framer-name="Main"]{gap:14px!important;padding-left:16px!important;padding-right:16px!important}
 [data-framer-name="Service List"] [data-framer-name="Main"]::after{width:36px;height:36px;background-size:14px}
}
/* Framer's menu text boxes use white-space:pre, and its service-list links carry a dark fill of their own. */
nav .ignite-service-submenu a,nav .ignite-service-submenu a *{white-space:normal!important}
[data-framer-name="Service List"] a{background:transparent!important}
/* Open row: number, title and arrow on the first line, the description on its own line under the title. */
[data-framer-name="Service List"] [data-framer-name="Main"]{flex-wrap:wrap!important}
[data-framer-name="Service List"] [data-framer-name="Main"]::after{order:2}
[data-framer-name="Service List"] [data-framer-name="Content"]{order:3;flex:1 0 100%!important;width:auto!important;padding-left:50px;margin-top:-6px}
@media(max-width:809px){[data-framer-name="Service List"] [data-framer-name="Content"]{padding-left:40px}}

/* Phones: one line for number, title and arrow (Framer fixes the title box at 300px and stacks the open row). */
@media(max-width:809px){
 [data-framer-name="Service List"] [data-framer-name="Main"]{flex-direction:row!important;align-items:center!important;justify-content:flex-start!important}
 [data-framer-name="Service List"] [data-framer-name="Main"]>div:not([data-framer-name="Content"]){flex:1 1 0!important;width:auto!important;min-width:0}
 [data-framer-name="Service List"] [data-framer-name="Main"]::after{margin-left:0}
}
/* The homepage "Our services" list, redrawn by services.js from copies of Framer's rows in the services order.
   Framer's own rows stay hidden; only the open row shows its description; the photos crossfade over the panel. */
[data-framer-name="Service List"]:has(> [data-ignite-row]) > div:not([data-ignite-row]){display:none!important}
[data-ignite-row] a[data-framer-name$="Close"] [data-framer-name="Content"]{display:none!important}
[data-ignite-row] [data-framer-name="Content"]{min-width:0!important}
[data-ignite-row] [data-framer-name="Content"]>div{width:auto!important;max-width:550px;flex:1 1 auto!important}
[data-ignite-row] [data-framer-name="Content"] p{white-space:normal!important}
[data-ignite-row] a[data-framer-name$="Open"] [data-framer-name="Content"]{animation:ignite-row-in .4s cubic-bezier(.2,.8,.2,1)}
@keyframes ignite-row-in{from{opacity:0;transform:translateY(-4px)}}
.ignite-svc-photos{position:absolute;inset:0;z-index:5;pointer-events:none}
.ignite-svc-photos img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease}
.ignite-svc-photos img.is-on{opacity:1}
/* The hero services widget, redrawn with five services (Framer's own four-service version stays hidden underneath). */
[data-framer-name="Highlighted Service"]>a:has(>.ignite-hs){position:relative}
[data-framer-name="Highlighted Service"]>a:has(>.ignite-hs)>:not(.ignite-hs){visibility:hidden}
.ignite-hs{position:absolute;inset:8px;display:flex;align-items:center;gap:20px}
.ignite-hs-media{position:relative;flex:none;width:130px;height:130px;border-radius:1px;overflow:hidden}
.ignite-hs-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.ignite-hs-media img.is-on{opacity:1}
.ignite-hs-list{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;min-width:0}
.ignite-hs-list li{opacity:.5;transition:opacity .4s ease}
.ignite-hs-list li.is-on{opacity:1}
.ignite-hs-list p{margin:0;color:#fff;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.ignite-hs-media img,.ignite-hs-list li,.ignite-svc-photos img{transition:none}}
/* Language switch (services.js): English ↔ العربية, beside the menu button on every page. */
.ignite-lang{position:fixed;z-index:1000;transform:translateY(-50%);color:#fffff0!important;font:600 14px/1 Inter,"Inter Placeholder",Arial,sans-serif;text-decoration:none!important;padding:10px 4px;opacity:.85;transition:opacity .2s}
.ignite-lang[hidden]{display:none}
.ignite-lang:hover{opacity:1;text-decoration:underline!important;text-underline-offset:5px}
.ignite-lang:focus-visible{outline:2px solid #fffff0;outline-offset:4px;opacity:1}
html.ignite-dialog-open .ignite-lang{visibility:hidden}