/* Beyond Lanka dark-theme overrides. Formatting only; declarations remain in original order. */

/* Final palette: black, charcoal, white and the logo's red. */

/* Design tokens */
:root {
    --ink: #f7f7f8;
    --forest: #ed414b;
    --teal: #f06670;
    --orange: #ed414b;
    --paper: #0b0b0c;
    --sand: #18181a;
    --line: #353538;
    --muted: #b6b6bd;
    --deep: #09090a;
}


/* Global defaults */
html {
    color-scheme: dark;
}

body {
    background: #0b0b0c;
    color: #f7f7f8;
}

::selection {
    background: #ec424d;
    color: #fff;
}

:focus-visible {
    outline: 2px solid #ff5b64;
    outline-offset: 4px;
}


/* Header and navigation */
.topbar,.site-header,.site-footer {
    background: #09090a;
    border-color: #2a2a2d;
}

.topbar,.topbar a {
    color: #d3d3d6;
}

.brand,.footer-brand {
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.brand-logo-composite .brand-logo {
    display: block;
}

.primary-nav>a:not(.button),.nav-service-group>a,.service-dropdown a {
    color: #f0f0f2;
}

.primary-nav>a:not(.button):hover,.primary-nav>a.active,.nav-service-group>a:hover,.nav-service-group>a.active,.service-dropdown a:hover,.footer-contact a:hover {
    color: #ff5962;
}


/* Service sections */
.service-dropdown {
    background: #141416;
}

.dropdown-heading,.submenu-toggle:hover {
    color: #ff5962;
}

.button-dark,.button-orange {
    background: #e43d47;
    color: #fff;
    border-color: #e43d47;
}

.button-dark:hover,.button-orange:hover,.button-dark:focus-visible,.button-orange:focus-visible {
    background: #fb5560;
    border-color: #fb5560;
    color: #fff;
}

.button-outline {
    border-color: #f0f0f0;
    color: #fff;
    background: transparent;
}

.button-outline:hover,.button-outline:focus-visible {
    background: #e43d47;
    border-color: #e43d47;
    color: #fff;
}

.button:hover,.button:focus-visible {
    box-shadow: 0 8px 0 #0004,0 19px 34px #ed414b3a;
}

.text-link:hover,.area-link-strip a,.post-card h3 a:hover,.article-body a,.editor-content a,.page-editor a,.editorial-body a {
    color: #ff636d;
}

.eyebrow,.eyebrow.light,.period,.hero h1 em,.display em,.page-hero .display em,.intro .display em,.clients-section h2 em,.page-hero-dark .display em {
    color: #f24954;
}


/* Homepage hero */
.hero {
    background: radial-gradient(circle at 85% 9%,#2b2b2e,transparent 38%),linear-gradient(120deg,#09090b,#18181b);
}

.hero-visual-inner {
    background: linear-gradient(155deg,#3b3b40,#1b1b20 55%,#0f0f12);
}

.landscape-back {
    background: linear-gradient(#58585e,#323238);
}

.landscape-front {
    background: linear-gradient(#26262b,#111114);
}

.sun-disc {
    background: #f14954;
    box-shadow: 0 0 90px #f1495455;
}

.hero-sticker {
    background: #f4f4f5;
    color: #161618;
}

.hero-sticker span {
    color: #ed414b;
}

.intro,.services-section,.blog-preview,.faq-section,.service-editorial,.service-enquiry {
    background: #101011;
}

.feature-band {
    background: linear-gradient(105deg,#151517,#202023);
    border-color: #333337;
	padding: 50px 0px;
}

.feature-band p {
    color: #c9c9ce;
}

.ticket {
    background: #26262b;
    border-color: #55555b;
    color: #fff;
}

.ticket-circle {
    background: #e43d47;
}


/* Statistics */
.metrics-section {
    background: #18181a;
}

.metric-card {
    border-color: #38383b;
}

.metric-icon {
    color: #f45863;
    border-color: #66666d;
}

.metric-card strong {
    color: #fff;
}

.metric-card>span {
    color: #b9b9bf;
}

.service-grid {
    border-color: #353538;
}

.service-card {
    background: #19191c;
    border-color: #353538;
    color: #f7f7f8;
}

.service-card:hover,.service-card:focus-visible {
    background: #222226;
}

.service-index {
    color: #a3a3aa;
}

.service-card p {
    color: #b8b8c0;
}

.service-card .text-link {
    color: #ff656e;
}

.service-art {
    color: #f15a64;
}

.service-art:before {
    background: #28282c;
    border-color: #4a4a50;
}

.service-art-orbit {
    background: #f14954;
}


/* Portfolio and project cards */
.projects-section,.process-section,.service-process,.deliverables,.related-services,.related-articles {
    background: #151517;
}

.process-grid article,.deliverable-grid>div {
    border-color: #4a4a50;
}

.process-grid p {
    color: #b8b8bf;
}

.page-hero,.portfolio-hero,.area-hero,.area-hero-wide {
    background: radial-gradient(circle at 85% 17%,#303034,transparent 35%),linear-gradient(110deg,#121214,#1e1e21);
}

.page-hero p,.page-hero-dark p {
    color: #c8c8ce;
}

.page-hero-dark {
    background: #141416;
}

.about-art {
    background: linear-gradient(155deg,#36363b,#18181a);
}

.about-art:after {
    background: #343438;
}

.about-circle {
    background: #222225;
    color: #fff;
}

.service-graphic {
    background: radial-gradient(circle,#38383d,#19191c 70%);
    border-color: #55555b;
}

.graphic-orbit {
    border-color: #74747b;
}

.graphic-center {
    background: #e43d47;
    color: #fff;
}


/* Clients and testimonials */
.testimonials-section {
    background: #18181b;
}

.testimonial-card {
    background: #252528;
    color: #fff;
}

.testimonial-card footer {
    border-color: #424248;
}

.testimonial-card footer span {
    color: #b8b8bf;
}

.big-cta {
    background: radial-gradient(circle at 84% 34%,#372226,#0b0b0c 60%);
    border-color: #3c3335;
}

.big-cta p {
    color: #d0c9ca;
}

.strip-cta,.area-link-strip,.portfolio-method {
    background: #171719;
}

.area-link-strip {
    border-color: #45454a;
}


/* Forms and contact */
.form-panel {
    background: #242428;
    color: #fff;
}

.form-aside,.contact-aside {
    background: #1b1b1f;
}

.form-panel>p,.form-small,.editorial-body p,.service-details>div+div p {
    color: #bcbcc3;
}

.enquiry-form input,.enquiry-form select,.enquiry-form textarea {
    background: #141416;
    border-color: #515157;
    color: #fff;
}

.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus {
    border-color: #f45a65;
    box-shadow: 0 0 0 3px #ed414b38;
}


/* Footer */
.footer-contact>span,.footer-contact p,.footer-links a:not(.footer-brand),.footer-links p,.footer-bottom,.footer-location {
    color: #b9b9c1;
}

.whatsapp-float {
    background: #222226;
    border-color: #55555b;
    color: #fff;
}

.whatsapp-float svg {
    color: #f15a64;
}


/* Blog and articles */
.article-body {
    color: #d3d3d8;
}

.article-body h2,.article-body h3 {
    color: #fff;
}

.post-card p {
    color: #b9b9bf;
}

.client-grid .client-logo-card {
    background: #222225;
    border-color: #47474d;
}

.client-grid .client-logo-card:hover {
    background: #29292e;
    border-color: #f45a65;
}

.client-grid .client-logo-card strong {
    color: #fff;
}

.client-grid .client-logo-card small {
    color: #ff6771;
}

/* Keep the supplied white logo tiles, framed by a dark portfolio section. */
.portfolio-main {
    background: #111113;
    color: #f7f7f8;
}

.portfolio-main .section-heading .display {
    color: #fff;
}

.portfolio-main .section-heading .display em {
    color: #f45a65;
}

.portfolio-main .section-heading p {
    color: #b9b9c1;
}

.portfolio-main .eyebrow {
    color: #ff6871;
}

.portfolio-main .portfolio-filters button {
    background: #27272a;
    border-color: #55555b;
    color: #f7f7f8;
}

.portfolio-main .portfolio-filters button:hover,.portfolio-main .portfolio-filters button.is-selected {
    background: #e43d47;
    border-color: #e43d47;
    color: #fff;
}

.portfolio-tile {
    background: #fff;
    border-color: #a2a2a6;
    color: #1b1b1d;
}

.portfolio-tile:hover,.portfolio-tile:focus-visible {
    border-color: #f14954;
}

.portfolio-tile-preview,.portfolio-tile-no-preview {
    background: #18181a;
}

.portfolio-tile-overlay {
    background: linear-gradient(transparent,#111113ee);
}

.portfolio-tile-overlay small,.portfolio-tile-no-preview small {
    color: #ffafb5;
}

.portfolio-tile-logo {
    background: #fff;
}

.portfolio-tile-line {
    background: #ed414b;
}

.pagination .current,.portfolio-filters button.is-selected {
    background: #e43d47;
    color: #fff;
}

.area-service-card,.area-city-card {
    background: #232326;
    border-color: #434348;
    color: #fff;
}

.area-service-card:hover,.area-city-card:hover {
    background: #2b2b30;
    border-color: #e43d47;
}

.area-service-card>span,.area-city-card>span,.area-service-card b,.area-city-card a {
    color: #ff757d;
}


/* Responsive styles */
@media(max-width:800px) {
    .primary-nav,.service-dropdown {
        background: #171719;
    }
}

@media(prefers-reduced-motion:reduce) {
    .service-motion-icon .icon-mark,.service-art-orbit {
        animation: none;
    }
}

/* Red is reserved mainly for actions and small details. */
.eyebrow,.eyebrow.light {
    color: #bdbdc4;
}

.hero h1 em,.display em,.page-hero .display em,.intro .display em,.clients-section h2 em,.page-hero-dark .display em,.feature-band h2 em,.big-cta h2 em,.footer-intro h2 em {
    color: #e1e1e5;
}

.period {
    color: #ed414b;
}

.metric-icon {
    color: #d4d4d9;
    border-color: #5c5c62;
}

.service-art {
    color: #dedee2;
}

.service-art-orbit {
    background: #e44953;
}

.service-card .text-link {
    color: #d8d8dc;
}

.quote-mark,.post-card-meta {
    color: #c8c8ce;
}

.whatsapp-float svg {
    color: #e6e6ea;
}

.projects-section .eyebrow {
    color: #bdbdc4;
}

.projects-section .display em {
    color: #e1e1e5;
}

.portfolio-main .eyebrow {
    color: #bdbdc4;
}

.portfolio-main .section-heading .display em {
    color: #e1e1e5;
}

.brand-logo-composite .brand-logo {
    height: auto;
    object-fit: contain;
}

/* The homepage presents website images in visible browser frames. */
.projects-section .portfolio-browser-gallery {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 24px;
}

.portfolio-browser-gallery .portfolio-item {
    background: transparent;
    min-width: 0;
}

.portfolio-browser-card {
    display: block;
    text-decoration: none;
    color: #f5f5f6;
}

.portfolio-browser-frame {
    display: block;
    overflow: hidden;
    border: 1px solid #54545a;
    border-radius: 10px 10px 6px 6px;
    background: #fff;
    box-shadow: 0 20px 35px #0005;
    transition: transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;
}

.portfolio-browser-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 36px;
    padding: 0 12px;
    background: #e7e7e9;
    border-bottom: 1px solid #c5c5c8;
    color: #595960;
}

.portfolio-browser-dots {
    display: flex;
    gap: 5px;
    flex-shrink: 0;
}

.portfolio-browser-dots i {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #aaaab0;
}

.portfolio-browser-dots i:first-child {
    background: #e05560;
}

.portfolio-browser-address {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #d6d6d9;
    border-radius: 4px;
    padding: 4px 11px;
    text-align: center;
    font: 600 10px/1 Manrope,sans-serif;
    color: #6a6a72;
}

.portfolio-browser-menu {
    font-size: 16px;
    line-height: 1;
}

.portfolio-browser-screen {
    display: block;
    height: 210px;
    overflow: hidden;
    background: #fff;
}

.portfolio-browser-screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform .65s ease;
}

.portfolio-browser-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 3px 0;
}

.portfolio-browser-caption strong {
    font: 700 14px/1.3 Manrope,sans-serif;
}

.portfolio-browser-caption>span {
    flex-shrink: 0;
    color: #bfc0c7;
    font: 700 10px Manrope,sans-serif;
    transition: color .3s,transform .3s;
}

.portfolio-browser-card:hover .portfolio-browser-frame,.portfolio-browser-card:focus-visible .portfolio-browser-frame {
    transform: translateY(-5px);
    border-color: #9999a1;
    box-shadow: 0 25px 44px #0008;
}

.portfolio-browser-card:hover .portfolio-browser-screen img,.portfolio-browser-card:focus-visible .portfolio-browser-screen img {
    transform: scale(1.045);
}

.portfolio-browser-card:hover .portfolio-browser-caption>span,.portfolio-browser-card:focus-visible .portfolio-browser-caption>span {
    color: #fff;
    transform: translate(2px,-2px);
}

@media(max-width:900px) {
    .projects-section .portfolio-browser-gallery {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media(max-width:600px) {
    .projects-section .portfolio-browser-gallery {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .portfolio-browser-screen {
        height: 220px;
    }
    .portfolio-browser-caption {
        padding-top: 13px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .portfolio-browser-frame,.portfolio-browser-screen img,.portfolio-browser-caption>span {
        transition: none;
    }
}

/* Final contrast pass: charcoal surfaces need light copy; requested metric icons are red. */
.metric-icon,.metric-icon svg {
    color: #ff6570;
    stroke: currentColor;
}

.testimonial-card p,.testimonial-placeholder p {
    color: #e6e6e9;
}

.testimonial-card footer strong {
    color: #fff;
}

.testimonial-card footer span,.testimonial-card .testimonial-meta {
    color: #c5c5cb;
}

.hero-copy>p,.intro-right>p,.section-heading p,.editorial-body p,.service-details p,.faq-list details p,.portfolio-method p,.method-grid p,.article-byline,.back-link,.post-card-meta,.form-small,.form-panel>p,.contact-aside p,.form-aside p,.form-aside li span,.footer-bottom,.footer-location,.hero-foot,.hero-bottom,.portfolio-note {
    color: #c9c9cf;
}

.testimonials-section .eyebrow,.services-section .eyebrow,.metrics-section .eyebrow {
    color: #d0d0d6;
}

.portfolio-browser-caption>span {
    color: #dedee3;
}

.enquiry-form input::placeholder,.enquiry-form textarea::placeholder {
    color: #a9a9b1;
    opacity: 1;
}