/*
 * BEYOND LANKA: COMPLETE READABLE STYLESHEET
 * Version 1.8.1
 * The six theme stylesheets below appear in their original loading order.
 * Later rules intentionally override earlier rules. Keep this order when editing.
 * For direct theme replacement, use the six matching files in the ZIP.
 * The Google Fonts @import must come before all other CSS rules.
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');


/* ========================================================================
   SITE.CSS — Base styles, layout, typography and responsive components
   ======================================================================== */

/* Design tokens */
:root {
    --ink: #4e4e4f;
    --forest: #8b8b8d;
    --deep: #8b8b8c;
    --teal: #c9878d;
    --paper: #faf9f5;
    --sand: #f0eee7;
    --line: #1e1e1f;
    --orange: #ed9a65;
    --muted: #151516;
    --white: #fff;
    --radius: 4px;
}


/* Global defaults */
*,*::before,*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 16px/1.68 'DM Sans',Arial,sans-serif;
    -webkit-font-smoothing: antialiased;
}

body.menu-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button,input,select,textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,h2,h3,p {
    margin-top: 0;
}

h1,h2,h3 {
    line-height: 1.14;
}

h1,h2,h3,.brand {
    font-family: Manrope,'DM Sans',sans-serif;
}

h1 {
    letter-spacing: -.07em;
}

h2 {
    letter-spacing: -.055em;
}

h3 {
    letter-spacing: -.035em;
}

::selection {
    background: var(--orange);
    color: var(--ink);
}

:focus-visible {
    outline: 3px solid var(--orange);
    outline-offset: 4px;
}

.container {
    width: min(100% - 64px,1240px);
    margin-inline: auto;
}

.section {
    padding: 112px 0;
}

.skip-link {
    position: absolute;
    top: -100px;
    left: 16px;
    z-index: 9999;
    padding: 12px;
    background: #fff;
}

.skip-link:focus {
    top: 10px;
}

.eyebrow {
    display: inline-block;
    font: 700 11px/1.4 Manrope,sans-serif;
    letter-spacing: .17em;
    color: var(--forest);
    text-transform: uppercase;
}

.eyebrow.light {
    color: #333334;
}

.eyebrow-line {
    display: inline-block;
    width: 19px;
    height: 1px;
    background: currentColor;
    vertical-align: middle;
    margin-right: 8px;
}

.display {
    font-weight: 600;
    font-size: clamp(42px,5vw,76px);
    line-height: 1.12;
    letter-spacing: -.066em;
    margin: 16px 0 0;
}

.display em,h1 em,h2 em {
    font-family: Georgia,serif;
    font-weight: 400;
    letter-spacing: -.055em;
}

.period {
    color: var(--orange);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 56px;
    padding: 15px 23px;
    font: 700 13px/1.3 Manrope,sans-serif;
    letter-spacing: .005em;
    transition: transform .25s,background .25s,color .25s;
    border: 1px solid transparent;
    white-space: nowrap;
}

.button:hover {
    transform: translateY(-3px);
}

.button span,.text-link span {
    font-size: 19px;
    line-height: 0;
}

.button-dark {
    color: #fff;
    background: var(--ink);
}

.button-dark:hover {
    background: var(--forest);
    color: #fff;
}

.button-orange {
    background: var(--orange);
    color: var(--ink);
}

.button-orange:hover {
    background: #ffc09a;
}

.button-outline {
    border-color: rgba(255,255,255,.55);
    color: #fff;
    background: transparent;
}

.button-outline:hover {
    background: #fff;
    color: var(--deep);
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font: 700 13px/1.3 Manrope,sans-serif;
    border-bottom: 1px solid currentColor;
    padding-bottom: 8px;
    transition: gap .2s,color .2s;
}

.text-link:hover {
    gap: 25px;
    color: var(--teal);
}


/* Header and navigation */
.topbar {
    background: var(--deep);
    color: #333334;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
}

.topbar-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 35px;
}

.topbar-inner div {
    display: flex;
    gap: 24px;
}

.topbar a:hover {
    color: #fff;
}

.site-header {
    background: var(--paper);
    z-index: 50;
    position: relative;
    border-bottom: 1px solid rgba(24,24,26,.1);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 91px;
    gap: 30px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.brand-mark {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    width: 43px;
    height: 45px;
    padding: 8px;
    border: 2px solid var(--forest);
    transform: rotate(-8deg);
}

.brand-mark span {
    background: var(--forest);
    height: 26px;
    width: 7px;
    transform: skew(-19deg);
}

.brand-mark span+span {
    height: 19px;
    background: var(--orange);
}

.brand-words {
    font-size: 20px;
    line-height: 1;
    letter-spacing: -.075em;
    font-weight: 800;
}

.brand-words>span {
    display: block;
    color: var(--forest);
    letter-spacing: .06em;
    margin-top: 3px;
}

.brand-accent {
    color: var(--orange);
}

.brand-words small {
    display: block;
    font: 700 8px/1.5 'DM Sans',sans-serif;
    letter-spacing: .21em;
    color: var(--muted);
    margin-top: 4px;
}

.brand-logo {
    max-height: 67px;
    width: auto;
    max-width: 240px;
    object-fit: contain;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.primary-nav>a:not(.button) {
    font: 700 12px Manrope,sans-serif;
    transition: color .2s;
    position: relative;
}

.primary-nav>a:not(.button):hover,.primary-nav>a.active {
    color: var(--teal);
}

.primary-nav>a.active:after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--orange);
}

.nav-cta {
    min-height: 46px;
    padding: 12px 17px;
    margin-left: 8px;
}

.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    padding: 8px;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--ink);
    margin: 5px 0;
}


/* Homepage hero */
.hero {
    overflow: hidden;
    background: #f6f3eb;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    gap: 3.5%;
    align-items: center;
    min-height: 660px;
    padding-top: 47px;
    padding-bottom: 47px;
}

.hero-copy {
    position: relative;
    z-index: 1;
    padding: 25px 0;
}

.hero h1 {
    font-size: clamp(58px,6.5vw,94px);
    line-height: 1.075;
    font-weight: 600;
    max-width: 670px;
    margin: 25px 0 24px;
}

.hero h1 em {
    color: var(--forest);
}

.hero-copy>p {
    color: var(--muted);
    max-width: 510px;
    line-height: 1.85;
    font-size: 16px;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 35px;
    margin-top: 35px;
}

.hero-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 76px;
    color: #141415;
    font: 700 9px Manrope,sans-serif;
    letter-spacing: .13em;
}

.hero-star {
    color: var(--forest);
    font-size: 26px;
}

.hero-visual {
    height: 550px;
    position: relative;
    padding: 17px 14px 18px 4px;
}

.hero-visual-inner {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(160deg,#29292a 1%,#d6d9a7 45%,#ead7a3 100%);
    border-radius: 5px;
    isolation: isolate;
}

.hero-visual-inner:before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(transparent 40%,rgba(18,18,20,.5));
}

.sun-disc {
    position: absolute;
    top: 14%;
    right: 10%;
    width: 250px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f5d5a3;
    box-shadow: 0 0 75px #f5e2b199;
}

.landscape {
    position: absolute;
    width: 125%;
    left: -12%;
    border-radius: 50% 50% 0 0;
    transform: rotate(-9deg);
}

.landscape-back {
    height: 60%;
    bottom: -21%;
    background: linear-gradient(#333334,#d18087);
}

.landscape-front {
    height: 53%;
    bottom: -32%;
    left: 15%;
    background: linear-gradient(#69696a,#aeaeb0);
    transform: rotate(16deg);
}

.landscape-front:after {
    content: '';
    position: absolute;
    width: 200px;
    height: 600px;
    left: 35%;
    bottom: -480px;
    transform: rotate(-17deg);
    background: #c8b28b;
    border-radius: 50%;
}

.visual-caption {
    position: absolute;
    z-index: 5;
    top: 48px;
    left: 42px;
    color: #fff;
    font: 700 clamp(34px,3.7vw,58px)/.98 Manrope,sans-serif;
    letter-spacing: -.075em;
}

.visual-caption span {
    font-weight: 400;
    font-size: .65em;
    color: var(--orange);
    margin-left: 10px;
}

.visual-number {
    position: absolute;
    z-index: 5;
    bottom: 24px;
    right: 24px;
    color: #fff;
    font-size: 11px;
    letter-spacing: .15em;
}

.hero-sticker {
    position: absolute;
    z-index: 6;
    right: -13px;
    bottom: 65px;
    background: #fff;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.4;
    font-size: 10px;
    letter-spacing: .05em;
    transform: rotate(12deg);
    box-shadow: 0 11px 28px #092d2b30;
}

.hero-sticker strong {
    font-size: 12px;
}

.hero-sticker span {
    font-size: 22px;
    color: var(--orange);
}

.hero-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 17px;
    border-top: 1px solid #202020;
    color: #121213;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr .77fr;
    gap: 15%;
    align-items: end;
}

.intro .display {
    max-width: 640px;
}

.intro .display em {
    color: var(--forest);
}

.intro-right>p {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.9;
    max-width: 470px;
    margin-bottom: 29px;
}

.feature-band {
    overflow: hidden;
    background: var(--forest);
    color: #fff;
}

.feature-inner {
    display: grid;
    grid-template-columns: 70px 1fr .8fr;
    gap: 35px;
    min-height: 425px;
    align-items: center;
    position: relative;
}

.feature-icon {
    font-size: 67px;
    align-self: start;
    padding-top: 46px;
    color: var(--orange);
}

.feature-inner h2 {
    font-size: clamp(36px,3.6vw,56px);
    max-width: 690px;
    letter-spacing: -.055em;
    margin: 16px 0 15px;
}

.feature-inner h2 em {
    color: #f7b890;
}

.feature-inner p {
    max-width: 540px;
    color: #333334;
    line-height: 1.8;
    margin-bottom: 23px;
}

.feature-illustration {
    position: relative;
    align-self: stretch;
    min-width: 200px;
}

.ticket {
    position: absolute;
    left: 6%;
    top: 16%;
    width: 320px;
    height: 245px;
    transform: rotate(-10deg);
    background: #e9e3ce;
    color: var(--forest);
    padding: 28px;
    box-shadow: 22px 28px 0 #808081;
}

.ticket small {
    font-size: 8px;
    letter-spacing: .2em;
    font-weight: 700;
}

.ticket b {
    font: 700 40px/1.02 Manrope,sans-serif;
    letter-spacing: -.06em;
    display: block;
    margin: 28px 0;
}

.ticket>span {
    font-size: 8px;
    letter-spacing: .15em;
}

.ticket-circle {
    position: absolute;
    right: -12px;
    bottom: 12%;
    border-radius: 50%;
    width: 135px;
    height: 135px;
    background: var(--orange);
    color: var(--deep);
    display: grid;
    place-items: center;
    text-align: center;
    line-height: 1.15;
    transform: rotate(14deg);
    font: 800 16px Manrope,sans-serif;
}

.section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 40px;
}

.section-heading h2 {
    max-width: 690px;
}

.section-heading p {
    max-width: 300px;
    margin: 0 0 10px;
    color: var(--muted);
}

.section-heading .text-link {
    margin-bottom: 10px;
}


/* Service sections */
.service-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.service-card {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 290px;
    padding: 30px;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    transition: background .25s,transform .25s;
    overflow: hidden;
}

.service-card:hover {
    background: #f0f0e9;
    transform: translateY(-3px);
}

.service-card:after {
    content: '↗';
    position: absolute;
    color: #2f2f31;
    font-size: 170px;
    right: -15px;
    top: -56px;
    line-height: 1;
    z-index: -1;
}

.service-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: var(--forest);
    background: #313132;
    font-size: 25px;
}

.service-index {
    position: absolute;
    right: 31px;
    top: 39px;
    color: #151515;
    font-size: 12px;
    letter-spacing: .1em;
}

.service-card h3 {
    font-size: 21px;
    line-height: 1.28;
    letter-spacing: -.04em;
    margin: 42px 0 11px;
    max-width: 260px;
}

.service-card p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 25px;
}

.service-card .text-link {
    margin-top: auto;
    align-self: flex-start;
    font-size: 12px;
    border-bottom: 0;
    padding: 0;
}

.section-end {
    text-align: center;
    margin-top: 42px;
}


/* Portfolio and project cards */
.projects-section {
    background: #f1f0e9;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 26px;
}

.project-card {
    min-width: 0;
}

.project-art {
    height: 315px;
    position: relative;
    overflow: hidden;
    padding: 32px;
    display: grid;
    place-items: center;
    background: #262627;
}

.project-travel {
    background: radial-gradient(circle at 80% 18%,#e5d1a1 0 15%,transparent 16%),linear-gradient(145deg,#333334,#333334);
}

.project-shop {
    background: radial-gradient(circle at 25% 70%,#f2b689 0 14%,transparent 15%),linear-gradient(130deg,#d7bcb0,#8d766e);
}

.project-local {
    background: radial-gradient(circle at 80% 85%,#333334 0 22%,transparent 23%),linear-gradient(140deg,#2c2c2d,#c9878d);
}

.mock-browser {
    background: #fff;
    width: 85%;
    height: 82%;
    border-radius: 8px 8px 0 0;
    box-shadow: 13px 20px 35px #6f6f7040;
    transform: rotate(-6deg) translateY(24px);
    overflow: hidden;
}

.project-shop .mock-browser {
    transform: rotate(6deg) translateY(24px);
}

.mock-bar {
    height: 19px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 9px;
    background: #1d1d1d;
}

.mock-bar i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #1a1a1a;
}

.mock-body {
    height: calc(100% - 19px);
    padding: 27px 22px;
    background: linear-gradient(112deg,#2f2f30 10%,#2a2a2b 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.project-shop .mock-body {
    background: linear-gradient(130deg,#fff2e5 15%,#dda993 100%);
}

.project-local .mock-body {
    background: linear-gradient(130deg,#333334 15%,#c9878d 100%);
}

.mock-body small {
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 700;
    font-size: 7px;
}

.mock-body strong {
    font: 700 21px/1.12 Manrope,sans-serif;
    max-width: 180px;
    letter-spacing: -.05em;
    margin-top: 27px;
}

.mock-button {
    display: block;
    width: 63px;
    height: 14px;
    background: var(--forest);
    margin-top: 20px;
}

.project-meta {
    margin: 23px 0 9px;
    text-transform: uppercase;
    color: var(--teal);
    font: 700 10px Manrope,sans-serif;
    letter-spacing: .11em;
}

.project-card h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.project-card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
}

.project-custom {
    background: #303031;
}

.project-custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    inset: 0;
}

.project-placeholder {
    font: 800 42px/1 Manrope,sans-serif;
    letter-spacing: -.08em;
    color: var(--forest);
}

.process-section {
    background: #2b2b2c;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 23px;
    margin-top: 48px;
}

.process-grid.three {
    grid-template-columns: repeat(3,1fr);
}

.process-grid article {
    border-top: 1px solid #1c1c1c;
    padding-top: 16px;
}

.process-grid article>span {
    color: var(--teal);
    font: 700 13px Manrope,sans-serif;
}

.process-grid h3 {
    font-size: 22px;
    margin: 39px 0 11px;
}

.process-grid p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.75;
}


/* Blog and articles */
.post-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 27px;
}

.post-card-image {
    display: block;
    height: 245px;
    overflow: hidden;
    background: #2e2e30;
}

.post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}

.post-card-image:hover img {
    transform: scale(1.06);
}

.post-card-art {
    height: 100%;
    padding: 30px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    font: 700 30px/1 Manrope,sans-serif;
    letter-spacing: -.05em;
    background: linear-gradient(120deg,#333334,#ce8389);
    color: white;
}

.post-card-art>span+span {
    font-size: 50px;
}

.post-card-meta {
    font-size: 10px;
    letter-spacing: .12em;
    color: var(--teal);
    font-weight: 700;
    margin: 21px 0 7px;
}

.post-card h3 {
    font-size: 20px;
    line-height: 1.33;
    margin: 0 0 10px;
}

.post-card h3 a:hover {
    color: var(--teal);
}

.post-card p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.7;
}

.post-card .text-link {
    font-size: 12px;
}

.empty-posts {
    grid-column: 1/-1;
    background: #2c2c2d;
    padding: 45px;
    min-height: 200px;
}

.empty-posts span {
    font-size: 10px;
    letter-spacing: .15em;
    color: var(--teal);
    font-weight: 700;
}

.empty-posts h3 {
    font-size: 25px;
    margin: 15px 0 7px;
}

.empty-posts p {
    color: var(--muted);
}


/* Footer */
.site-footer {
    background: #6e6e70;
    color: #333334;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    padding: 84px 0 88px;
    border-bottom: 1px solid #ffffff2b;
}

.footer-intro h2 {
    max-width: 670px;
    font-size: clamp(38px,5vw,68px);
    letter-spacing: -.06em;
    margin: 15px 0 24px;
}

.footer-intro h2 em {
    color: var(--orange);
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    white-space: nowrap;
}

.footer-contact>span {
    font-size: 10px;
    letter-spacing: .15em;
    color: #333334;
    font-weight: 700;
    margin-bottom: 12px;
}

.footer-contact>a {
    font-size: 19px;
    font-weight: 600;
}

.footer-contact>a:hover {
    color: var(--orange);
}

.footer-contact p {
    color: #272727;
    margin: 0;
}

.footer-links {
    display: grid;
    grid-template-columns: 2.1fr 1fr 1.2fr 1fr;
    gap: 32px;
    padding: 55px 0;
}

.footer-links>div {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.footer-links strong {
    font-size: 12px;
    margin-bottom: 10px;
}

.footer-links a:not(.footer-brand) {
    color: #29292a;
    font-size: 13px;
}

.footer-links a:hover {
    color: #fff;
}

.footer-links p {
    color: #29292a;
    font-size: 13px;
    line-height: 1.8;
    margin-top: 12px;
}

.footer-brand {
    font: 800 22px Manrope,sans-serif;
    letter-spacing: -.07em;
}

.footer-brand span {
    color: var(--orange);
}

.footer-brand i {
    font-style: normal;
    margin-left: 4px;
    font-weight: 400;
}

.footer-bottom {
    border-top: 1px solid #ffffff2b;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    font-size: 11px;
    color: #29292a;
}

.whatsapp-float {
    position: fixed;
    right: 25px;
    bottom: 22px;
    z-index: 70;
    background: #e0717a;
    color: white;
    display: flex;
    align-items: center;
    gap: 9px;
    border-radius: 40px;
    padding: 12px 16px;
    box-shadow: 0 10px 30px #0003;
    font-size: 12px;
    font-weight: 700;
    transition: transform .25s;
}

.whatsapp-float:hover {
    transform: translateY(-3px);
    color: #fff;
}

.page-hero {
    background: #eeeae0;
    padding: 92px 0 98px;
    overflow: hidden;
}

.page-hero .container {
    position: relative;
    z-index: 1;
}

.page-hero .display {
    max-width: 930px;
}

.page-hero p {
    max-width: 640px;
    color: var(--muted);
    font-size: 17px;
    line-height: 1.8;
    margin: 20px 0 0;
}

.page-hero .display em {
    color: var(--forest);
}

.page-hero-dark {
    background: var(--deep);
    color: #fff;
    position: relative;
}

.page-hero-dark:after {
    content: '✳';
    position: absolute;
    font: 450px/1 Georgia,serif;
    right: 4%;
    top: -40%;
    color: #ffffff09;
}

.page-hero-dark .display em {
    color: var(--orange);
}

.page-hero-dark p {
    color: #2e2e2f;
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    align-items: center;
}

.about-art {
    position: relative;
    min-height: 530px;
    background: linear-gradient(155deg,#1d1d1e,#c9878d);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-art:before,.about-art:after {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border: 1px solid #ffffff65;
    border-radius: 50%;
}

.about-art:after {
    width: 650px;
    height: 650px;
}

.about-circle {
    position: relative;
    z-index: 1;
    background: #f4dfbd;
    border-radius: 50%;
    width: 270px;
    height: 270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(-12deg);
    text-align: center;
    font: 800 30px/1 Manrope,sans-serif;
    letter-spacing: -.07em;
    box-shadow: 23px 30px 0 #a9a9ab35;
}

.about-circle em {
    font: italic 27px Georgia,serif;
    letter-spacing: -.06em;
    margin-top: 4px;
}

.about-art>span {
    position: absolute;
    bottom: 25px;
    left: 25px;
    color: white;
    font-size: 10px;
    letter-spacing: .15em;
    font-weight: 700;
}

.about-copy .display {
    font-size: clamp(40px,4vw,62px);
}

.about-copy p {
    color: var(--muted);
    line-height: 1.9;
}

.about-copy .button {
    margin-top: 15px;
}

.strip-cta {
    background: var(--deep);
    color: white;
    padding: 53px 0;
}

.strip-cta>.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
}

.strip-cta span {
    font-size: 10px;
    letter-spacing: .16em;
    color: #333334;
    font-weight: 700;
}

.strip-cta h2 {
    font-size: clamp(29px,3.2vw,45px);
    margin: 10px 0 0;
}

.service-hero-grid {
    display: grid;
    grid-template-columns: 1.4fr .7fr;
    gap: 80px;
    align-items: center;
}

.service-hero .display {
    max-width: 800px;
}

.service-hero p {
    margin-bottom: 28px;
}

.back-link {
    display: block;
    font: 700 12px Manrope,sans-serif;
    margin-bottom: 42px;
    color: var(--teal);
}

.back-link:hover {
    color: var(--deep);
}

.service-graphic {
    height: 350px;
    position: relative;
    border-radius: 50%;
    background: #2a2a2b;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.graphic-orbit {
    position: absolute;
    border: 1px solid #262627;
    border-radius: 50%;
    width: 75%;
    height: 75%;
}

.orbit-two {
    width: 115%;
    height: 115%;
}

.graphic-center {
    background: var(--forest);
    color: white;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    display: grid;
    place-items: center;
    font: 800 96px Manrope,sans-serif;
    letter-spacing: -.1em;
    position: relative;
}

.graphic-center span {
    font-size: 30px;
    position: absolute;
    right: 20px;
    bottom: 10px;
    color: var(--orange);
}

.graphic-note {
    position: absolute;
    bottom: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
}

.service-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12%;
}

.service-details .display {
    font-size: clamp(38px,3.5vw,57px);
}

.service-details>div+div p {
    font-size: 17px;
    color: var(--muted);
    line-height: 1.9;
    margin-top: 32px;
}

.deliverables {
    background: #2b2b2c;
}

.deliverables .display {
    font-size: clamp(38px,3.8vw,58px);
}

.deliverable-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 20px;
    margin-top: 48px;
}

.deliverable-grid>div {
    border-top: 1px solid #1d1d1e;
    padding-top: 18px;
    min-height: 130px;
}

.deliverable-grid span {
    font-size: 12px;
    color: var(--teal);
    font-weight: 700;
}

.deliverable-grid h3 {
    font-size: 20px;
    margin-top: 30px;
}


/* Forms and contact */
.form-layout {
    display: grid;
    grid-template-columns: minmax(0,1.42fr) minmax(270px,.85fr);
    gap: 42px;
    align-items: start;
}

.form-panel {
    background: #fff;
    padding: 46px;
    box-shadow: 0 10px 50px #8b8b8c09;
}

.form-panel h2 {
    font-size: 34px;
    margin-bottom: 9px;
}

.form-panel>p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 30px;
}

.enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.enquiry-form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-weight: 700;
    font-size: 12px;
}

.enquiry-form label span {
    color: #c15a34;
}

.enquiry-form input,.enquiry-form select,.enquiry-form textarea {
    width: 100%;
    border: 1px solid #1e1e1f;
    background: #333334;
    border-radius: 0;
    padding: 13px 14px;
    color: var(--ink);
    outline: none;
    font-weight: 400;
    font-size: 14px;
    min-height: 48px;
}

.enquiry-form textarea {
    resize: vertical;
}

.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus {
    border-color: var(--forest);
    box-shadow: 0 0 0 3px #8b8b8d26;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-small {
    font-size: 11px;
    color: var(--muted);
    margin: 0;
}

.enquiry-form button {
    align-self: start;
}

.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-notice {
    padding: 14px 18px;
    margin-bottom: 18px;
    border-left: 3px solid var(--forest);
    background: #e0b9bc;
    color: var(--ink);
}

.form-notice.error {
    border-color: #bb5847;
    background: #fff0ed;
}

.form-aside,.contact-aside {
    background: var(--forest);
    color: white;
    padding: 45px 35px;
}

.form-aside h2,.contact-aside h2 {
    font-size: 31px;
    letter-spacing: -.055em;
    margin: 17px 0 34px;
}

.form-aside ol {
    list-style: none;
    padding: 0;
    counter-reset: steps;
}

.form-aside li {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 19px 0 19px 42px;
    position: relative;
    border-top: 1px solid #ffffff44;
}

.form-aside li:before {
    counter-increment: steps;
    content: counter(steps,decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 20px;
    font-size: 11px;
    color: var(--orange);
    font-weight: 700;
}

.form-aside li strong {
    font-size: 13px;
}

.form-aside li span {
    font-size: 12px;
    color: #333334;
}

.form-aside>a {
    display: inline-block;
    color: var(--orange);
    border-bottom: 1px solid var(--orange);
    font-size: 13px;
    font-weight: 700;
    margin-top: 35px;
    padding-bottom: 7px;
}

.contact-aside>div {
    border-top: 1px solid #ffffff44;
    padding: 20px 0;
}

.contact-aside small {
    display: block;
    color: #333334;
    font-size: 10px;
    letter-spacing: .14em;
    margin-bottom: 6px;
}

.contact-aside div a {
    font-size: 17px;
    overflow-wrap: anywhere;
}

.contact-aside div a:hover {
    color: var(--orange);
}

.contact-aside p {
    margin: 0;
}

.contact-aside .button {
    margin-top: 20px;
}

.pagination {
    margin-top: 50px;
}

.pagination .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.pagination .page-numbers {
    padding: 7px 13px;
    border: 1px solid var(--line);
    font-size: 13px;
}

.pagination .current {
    background: var(--forest);
    color: white;
}

.article-hero .display {
    max-width: 970px;
}

.article-container {
    max-width: 900px;
}

.article-image {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    margin: 55px 0;
}

.article-body {
    padding: 65px 0 40px;
    font-size: 17px;
    line-height: 1.9;
    color: #2c2c2d;
}

.article-body h2 {
    font-size: 37px;
    margin-top: 50px;
    color: var(--ink);
}

.article-body h3 {
    font-size: 27px;
    margin-top: 30px;
    color: var(--ink);
}

.article-body a,.editor-content a,.page-editor a {
    color: var(--forest);
    text-decoration: underline;
}

.article-body img {
    height: auto;
}

.article-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid var(--line);
    padding: 30px 0 90px;
}

.editor-content,.page-editor {
    padding-top: 45px;
    padding-bottom: 65px;
}

.editor-content:empty {
    display: none;
}

.page-editor {
    min-height: 300px;
}

.not-found {
    min-height: 550px;
}

.not-found .button {
    margin-top: 28px;
}

.reveal {
    opacity: 0;
    transform: translateY(19px);
    transition: opacity .7s,transform .7s;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Responsive styles */
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior: auto!important;
        animation-duration: .01ms!important;
        transition-duration: .01ms!important;
    }
    .reveal {
        opacity: 1;
        transform: none;
    }
}

@media(max-width:1080px) {
    .container {
        width: min(100% - 46px,1240px);
    }
    .primary-nav {
        gap: 14px;
    }
    .primary-nav>a:not(.button) {
        font-size: 11px;
    }
    .nav-cta {
        margin-left: 2px;
        padding: 10px;
    }
    .hero-grid {
        min-height: 580px;
    }
    .hero h1 {
        font-size: clamp(54px,6.2vw,78px);
    }
    .hero-visual {
        height: 470px;
    }
    .service-card {
        min-height: 310px;
    }
    .feature-inner {
        grid-template-columns: 45px 1fr .6fr;
    }
    .ticket {
        width: 250px;
        height: 220px;
        left: -10%;
    }
    .ticket b {
        font-size: 32px;
    }
}


/* Clients and testimonials */
.clients-section {
    padding: 72px 0;
    background: #fff;
    border-top: 1px solid var(--line);
}

.clients-section>.container {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 50px;
    align-items: center;
}

.clients-section h2 {
    font-size: clamp(27px,3vw,41px);
    margin: 12px 0 9px;
}

.clients-section h2 em {
    color: var(--forest);
}

.clients-section p {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

.client-placeholders {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 11px;
}

.client-placeholders>span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 92px;
    border: 1px dashed #1b1b1b;
    color: #171717;
    font: 700 12px Manrope,sans-serif;
    letter-spacing: .04em;
}

.client-placeholders small {
    font: 700 8px Manrope,sans-serif;
    letter-spacing: .09em;
    margin-top: 6px;
    color: #171717;
}

@media(max-width:800px) {
    .topbar-inner>span {
        display: none;
    }
    .topbar-inner {
        justify-content: center;
    }
    .header-inner {
        min-height: 73px;
    }
    .menu-toggle {
        display: block;
        z-index: 61;
    }
    .primary-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 73px);
        overflow: auto;
        background: var(--paper);
        padding: 18px 24px 30px;
        box-shadow: 0 15px 25px #0002;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .primary-nav.is-open {
        display: flex;
    }
    .primary-nav>a:not(.button) {
        padding: 13px 4px;
        font-size: 15px;
        border-bottom: 1px solid var(--line);
    }
    .primary-nav>a.active:after {
        display: none;
    }
    .nav-cta {
        align-self: flex-start;
        margin: 20px 0 0;
    }
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding-top: 50px;
    }
    .hero-copy {
        padding: 0;
    }
    .hero h1 {
        font-size: clamp(54px,9vw,80px);
        max-width: 650px;
    }
    .hero-foot {
        margin-top: 45px;
    }
    .hero-visual {
        height: 420px;
        width: min(100%,550px);
        margin: 12px auto 20px;
    }
    .hero-visual-inner {
        border-radius: 15px;
    }
    .intro-grid,.about-grid,.service-details {
        gap: 36px;
    }
    .feature-inner {
        grid-template-columns: 1fr .55fr;
        min-height: 380px;
    }
    .feature-icon {
        display: none;
    }
    .feature-illustration {
        opacity: .8;
    }
    .ticket {
        left: -15%;
        width: 200px;
        height: 175px;
        padding: 18px;
    }
    .ticket b {
        font-size: 25px;
        margin: 20px 0;
    }
    .ticket-circle {
        width: 100px;
        height: 100px;
        font-size: 11px;
    }
    .service-grid,.project-grid,.post-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .service-card {
        min-height: 295px;
    }
    .process-grid,.deliverable-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .footer-links {
        grid-template-columns: repeat(2,1fr);
    }
    .service-hero-grid {
        grid-template-columns: 1fr .5fr;
        gap: 35px;
    }
    .service-graphic {
        height: 240px;
    }
    .graphic-center {
        width: 125px;
        height: 125px;
        font-size: 75px;
    }
    .form-layout {
        grid-template-columns: 1fr;
    }
    .form-aside,.contact-aside {
        max-width: none;
    }
}

@media(max-width:800px) {
    .clients-section>.container {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

@media(max-width:600px) {
    .container {
        width: calc(100% - 36px);
    }
    .section {
        padding: 70px 0;
    }
    .topbar-inner {
        min-height: 31px;
    }
    .topbar-inner div {
        gap: 14px;
    }
    .topbar a {
        font-size: 10px;
    }
    .header-inner {
        min-height: 70px;
    }
    .brand-mark {
        width: 36px;
        height: 39px;
    }
    .brand-words {
        font-size: 17px;
    }
    .brand-words small {
        font-size: 7px;
    }
    .hero-grid {
        padding-top: 40px;
        padding-bottom: 20px;
    }
    .hero h1 {
        font-size: clamp(48px,12vw,68px);
        margin: 20px 0;
    }
    .hero-copy>p {
        font-size: 14px;
    }
    .hero-actions {
        gap: 24px;
    }
    .hero-foot {
        font-size: 8px;
        line-height: 1.5;
        margin-top: 35px;
    }
    .hero-visual {
        height: 355px;
        width: 100%;
        padding: 8px 12px 12px 2px;
    }
    .hero-sticker {
        width: 100px;
        height: 100px;
        right: -2px;
        bottom: 29px;
        font-size: 8px;
    }
    .hero-sticker strong {
        font-size: 9px;
    }
    .hero-sticker span {
        font-size: 16px;
    }
    .sun-disc {
        width: 170px;
    }
    .visual-caption {
        top: 35px;
        left: 24px;
        font-size: 42px;
    }
    .hero-bottom {
        font-size: 8px;
        gap: 15px;
    }
    .intro-grid,.about-grid,.service-details {
        grid-template-columns: 1fr;
    }
    .display {
        font-size: clamp(39px,10vw,55px);
    }
    .intro-right>p {
        font-size: 15px;
    }
    .feature-inner {
        grid-template-columns: 1fr;
        padding: 64px 0 0;
    }
    .feature-inner h2 {
        font-size: 42px;
    }
    .feature-illustration {
        min-height: 230px;
        max-width: 320px;
        width: 100%;
        margin: 12px auto 0;
    }
    .ticket {
        left: 12%;
        top: 6%;
        width: 220px;
        height: 190px;
    }
    .ticket-circle {
        right: 0;
        bottom: 5%;
    }
    .section-heading {
        display: block;
    }
    .section-heading p {
        margin: 17px 0 0;
    }
    .section-heading .text-link {
        margin-top: 20px;
    }
    .service-grid,.project-grid,.post-grid {
        grid-template-columns: 1fr;
    }
    .service-card {
        min-height: 240px;
        padding: 27px;
    }
    .service-card h3 {
        margin-top: 31px;
    }
    .project-art {
        height: 300px;
    }
    .project-grid,.post-grid {
        gap: 38px;
    }
    .process-grid,.process-grid.three,.deliverable-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .process-grid h3 {
        margin-top: 23px;
    }
    .process-grid p {
        font-size: 12px;
    }
    .page-hero {
        padding: 65px 0 73px;
    }
    .page-hero p {
        font-size: 15px;
    }
    .about-art {
        min-height: 350px;
    }
    .about-circle {
        width: 210px;
        height: 210px;
        font-size: 26px;
    }
    .about-circle em {
        font-size: 22px;
    }
    .strip-cta>.container {
        display: block;
    }
    .strip-cta .button {
        margin-top: 27px;
    }
    .service-hero-grid {
        display: block;
    }
    .service-graphic {
        display: none;
    }
    .back-link {
        margin-bottom: 26px;
    }
    .form-panel {
        padding: 27px 19px;
    }
    .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .form-aside,.contact-aside {
        padding: 35px 25px;
    }
    .footer-top {
        display: block;
        padding: 70px 0 50px;
    }
    .footer-contact {
        margin-top: 52px;
    }
    .footer-links {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 37px 18px;
    }
    .footer-links>div:first-child {
        grid-column: 1/-1;
    }
    .footer-bottom {
        flex-direction: column;
    }
    .whatsapp-float {
        padding: 12px;
        right: 14px;
        bottom: 14px;
    }
    .whatsapp-float span {
        display: none;
    }
    .article-body {
        padding-top: 40px;
        font-size: 16px;
    }
    .article-image {
        margin: 30px 0;
    }
    .empty-posts {
        padding: 30px;
    }
}

@media(max-width:600px) {
    .client-placeholders {
        grid-template-columns: repeat(2,1fr);
    }
    .clients-section {
        padding: 60px 0;
    }
}


/* ========================================================================
   UPGRADE.CSS — Enhanced sections, interactions and animations
   ======================================================================== */

/* Enhanced sections, interactions and animations. Loaded after site.css. */

/* Beyond Lanka 1.1: brand, content, interaction and responsive refinements. */

/* Design tokens */
:root {
    --forest: #d87981;
    --deep: #8b8b8c;
    --orange: #ed9a65;
    --ink: #4e4e4f;
    --paper: #faf9f5;
}


/* Header and navigation */
.brand-logo {
    display: block;
    width: min(235px,29vw);
    height: auto;
    max-height: 69px;
    max-width: 235px;
}


/* Footer */
.footer-brand img {
    display: block;
    width: 200px;
    height: auto;
    max-width: 100%;
}

.nav-service-group {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    height: 91px;
}

.nav-service-group>a {
    font: 700 12px Manrope,sans-serif;
    transition: color .2s;
}

.nav-service-group>a:hover,.nav-service-group>a.active {
    color: var(--teal);
}

.nav-service-group>a.active {
    border-bottom: 2px solid var(--orange);
    padding-bottom: 5px;
    margin-bottom: -7px;
}

.submenu-toggle {
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 21px;
    line-height: 1;
    padding: 4px 8px;
    transition: transform .25s,color .25s;
}

.nav-service-group:hover .submenu-toggle,.submenu-toggle[aria-expanded=true] {
    color: var(--teal);
    transform: rotate(180deg);
}


/* Service sections */
.service-dropdown {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    position: absolute;
    z-index: 80;
    top: 100%;
    left: -30px;
    width: 348px;
    background: #fff;
    border-top: 3px solid var(--orange);
    box-shadow: 0 20px 45px #9595972b;
    padding: 19px 23px 20px;
    pointer-events: none;
    transition: opacity .2s,transform .2s,visibility .2s;
}

.nav-service-group:hover .service-dropdown,.nav-service-group:focus-within .service-dropdown,.nav-service-group.is-open .service-dropdown {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-heading {
    display: block;
    color: var(--teal);
    font: 700 10px Manrope,sans-serif;
    letter-spacing: .14em;
    margin-bottom: 11px;
}

.service-dropdown a {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 2px;
    border-bottom: 1px solid #232324;
    font: 600 12px/1.5 Manrope,sans-serif;
    transition: padding .2s,color .2s;
}

.service-dropdown a:last-child {
    border: 0;
}

.service-dropdown a:hover {
    padding-left: 8px;
    color: var(--teal);
}

.service-dropdown a span {
    font-size: 15px;
    color: var(--orange);
}

.button {
    position: relative;
    overflow: hidden;
}

.button:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg,transparent 30%,#ffffff26 50%,transparent 70%);
    transform: translateX(-140%);
    transition: transform .65s ease;
    pointer-events: none;
}

.button:hover:before {
    transform: translateX(140%);
}

.button>span {
    display: inline-block;
    transition: transform .25s ease;
}

.button:hover>span {
    transform: translate(3px,-3px);
}

.text-link>span {
    display: inline-block;
    transition: transform .25s;
}

.text-link:hover>span {
    transform: translate(3px,-3px);
}


/* Homepage hero */
.hero-visual-inner {
    transition: filter .6s,transform .6s;
}

.hero-visual:hover .hero-visual-inner {
    filter: saturate(1.2);
    transform: scale(1.02);
}

.hero-sticker {
    animation: gentle-bob 5s ease-in-out infinite;
}

.about-art {
    transition: filter .4s;
}

.about-art:hover {
    filter: saturate(1.2);
}

.about-art:hover .about-circle {
    transform: rotate(-5deg) scale(1.04);
}

.about-circle {
    transition: transform .4s;
}


/* Motion keyframes */
@keyframes gentle-bob {
    0%,100% {
        translate: 0 0;
    }
    50% {
        translate: 0 -8px;
    }
}


/* Statistics */
.metrics-section {
    background: #333334;
    padding: 55px 0;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 0;
}

.metric-card {
    padding: 15px 29px;
    border-left: 1px solid #323233;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.metric-card:first-child {
    border-left: 0;
}

.metric-icon {
    width: 49px;
    height: 49px;
    border: 1px solid #313132;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--forest);
    margin-bottom: 20px;
}

.metric-icon svg {
    width: 25px;
    height: 25px;
}

.metric-card strong {
    font: 700 clamp(38px,4.7vw,63px)/1 Manrope,sans-serif;
    letter-spacing: -.07em;
    color: var(--forest);
}

.metric-card>span {
    margin-top: 13px;
    color: #242425;
    font: 700 10px/1.5 Manrope,sans-serif;
    letter-spacing: .09em;
}


/* Clients and testimonials */
.clients-section>.container {
    grid-template-columns: .78fr 1.65fr;
}

.clients-heading h2 {
    line-height: 1.2;
}

.clients-heading p {
    line-height: 1.75;
}

.client-logo-card {
    min-height: 125px;
    background: #333334;
    border: 1px solid #29292a;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 13px;
    transition: transform .3s,box-shadow .3s,border-color .3s;
}

.client-logo-card:hover {
    transform: translateY(-6px);
    border-color: #313133;
    box-shadow: 0 15px 30px #7c7c7e1c;
}

.client-logo-card img {
    max-height: 59px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: transform .4s;
}

.client-logo-card:hover img {
    transform: scale(1.07);
}

.client-logo-card strong {
    font: 700 11px/1.4 Manrope,sans-serif;
    text-align: center;
}

.client-logo-card small {
    font: 700 8px/1.3 Manrope,sans-serif;
    letter-spacing: .04em;
    color: #1d1d1d;
}

.client-monogram {
    display: grid;
    place-items: center;
    width: 53px;
    height: 53px;
    background: #333334;
    border-radius: 50%;
    color: var(--forest);
    font: 800 20px Manrope,sans-serif;
}

.client-sample {
    border-style: dashed;
    background: #fcfcfa;
    color: #1b1b1c;
}

.testimonials-section {
    background: #f3f0e8;
}

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px;
}

.testimonial-grid:has(> :only-child) {
    grid-template-columns: minmax(0,1fr);
}

.testimonial-card {
    margin: 0;
    background: #fff;
    padding: 35px 29px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 3px 20px #55555611;
    transition: transform .3s,box-shadow .3s;
}

.testimonial-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 14px 34px #55555622;
}

.quote-mark {
    font: 95px/.65 Georgia,serif;
    color: var(--orange);
    margin: 8px 0 18px;
}

.testimonial-card p {
    font: 400 16px/1.65 Georgia,serif;
    letter-spacing: -.01em;
    flex: 1;
}

.testimonial-card footer {
    border-top: 1px solid #262627;
    padding-top: 17px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-card footer strong {
    font: 700 12px Manrope,sans-serif;
}

.testimonial-card footer span {
    font-size: 11px;
    color: var(--muted);
}

.testimonial-placeholder {
    border: 1px dashed #1a1a1b;
    box-shadow: none;
}

.testimonial-placeholder p {
    color: #191919;
}

.big-cta {
    background: radial-gradient(circle at 85% 30%,#c9878d 0,#8b8b8c 48%);
    color: #fff;
    overflow: hidden;
}

.big-cta-inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 50px;
    padding: 85px 0;
}

.big-cta-inner:after {
    content: "✳";
    position: absolute;
    right: 10%;
    top: -67px;
    font: 300px Georgia,serif;
    opacity: .06;
    pointer-events: none;
}

.big-cta h2 {
    max-width: 700px;
    font-size: clamp(37px,4.6vw,65px);
    line-height: 1.15;
    margin: 14px 0 15px;
    letter-spacing: -.055em;
}

.big-cta p {
    color: #333334;
    max-width: 630px;
    margin: 0;
}

.big-cta .button {
    z-index: 1;
    flex-shrink: 0;
}

.service-editorial {
    background: #fff;
}

.editorial-grid {
    display: grid;
    grid-template-columns: .82fr 1.2fr;
    gap: 12%;
    align-items: start;
}

.editorial-aside {
    position: sticky;
    top: 25px;
}

.editorial-aside h2 {
    font-size: clamp(31px,3.4vw,48px);
    margin: 17px 0 40px;
    letter-spacing: -.055em;
}

.editorial-rule {
    border-top: 1px solid var(--line);
    padding-top: 14px;
    font: 700 10px Manrope,sans-serif;
    letter-spacing: .14em;
    color: var(--teal);
}

.editorial-body p {
    font-size: 16px;
    line-height: 1.95;
    color: var(--muted);
    margin: 0 0 22px;
}

.editorial-body p:first-child:first-letter {
    font-family: Georgia,serif;
    font-size: 36px;
    color: var(--forest);
    line-height: 1;
}

.service-process {
    background: #f6f5ef;
}

.faq-section {
    background: #fff;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 11%;
}

.faq-grid .display {
    font-size: clamp(38px,4vw,60px);
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-list details {
    border-bottom: 1px solid var(--line);
    padding: 0;
}

.faq-list summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    cursor: pointer;
    font: 700 16px/1.5 Manrope,sans-serif;
    padding: 24px 5px;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list summary span {
    font-size: 27px;
    color: var(--teal);
    font-weight: 400;
    transition: transform .2s;
}

.faq-list details[open] summary span {
    transform: rotate(45deg);
}

.faq-list p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
    padding: 0 40px 20px 5px;
    margin: 0;
}

.service-enquiry {
    background: #29292a;
    scroll-margin-top: 24px;
}

.service-enquiry .form-panel {
    border-top: 4px solid var(--orange);
}

.service-enquiry .form-aside p {
    color: #333334;
}

.service-enquiry .form-aside>a {
    margin-top: 15px;
}

.related-services {
    background: #f4f3ed;
}

.related-services .service-grid {
    border-left: 1px solid var(--line);
}


/* Portfolio and project cards */
.portfolio-hero {
    background: linear-gradient(100deg,#313132,#f5eee1);
}

.portfolio-hero-foot {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.portfolio-hero-foot span {
    padding: 8px 12px;
    border: 1px solid #2e2e2f;
    color: #c9878d;
    font: 700 10px Manrope,sans-serif;
    letter-spacing: .07em;
}

.portfolio-main {
    background: #fff;
}

.portfolio-filters {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
    margin: 0 0 35px;
}

.portfolio-filters button {
    border: 1px solid #202020;
    background: transparent;
    padding: 11px 18px;
    color: var(--ink);
    font: 700 11px Manrope,sans-serif;
    transition: color .2s,background .2s;
}

.portfolio-filters button:hover,.portfolio-filters button.is-selected {
    background: var(--forest);
    border-color: var(--forest);
    color: #fff;
}

.portfolio-main .portfolio-gallery {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 40px 28px;
}

.portfolio-main .portfolio-item:first-child {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 4px 32px;
    align-items: center;
    background: #333334;
    padding: 20px 24px 20px 20px;
}

.portfolio-main .portfolio-item:first-child .project-art {
    grid-row: span 5;
    height: 390px;
}

.portfolio-main .portfolio-item:first-child h3 {
    font-size: 32px;
}

.portfolio-item.is-hidden {
    display: none!important;
}

.portfolio-item .project-art {
    display: grid;
    overflow: hidden;
}

.project-custom img {
    transition: transform .6s,filter .6s;
}

.project-art:hover img {
    transform: scale(1.055);
    filter: saturate(1.12);
}

.project-card:hover .mock-browser {
    transform: rotate(-3deg) translateY(13px) scale(1.03);
}

.project-shop:hover .mock-browser {
    transform: rotate(3deg) translateY(13px) scale(1.03);
}

.mock-browser {
    transition: transform .55s cubic-bezier(.2,.7,.2,1);
}

.portfolio-note {
    font-size: 11px;
    color: #191919;
}

.portfolio-item .project-meta {
    margin-bottom: 10px;
}

.portfolio-item .text-link {
    font-size: 12px;
    margin-top: 15px;
}

.project-open {
    position: absolute;
    right: 17px;
    bottom: 17px;
    width: 42px;
    height: 42px;
    background: #fff;
    color: var(--forest);
    font-size: 23px;
    display: grid;
    place-items: center;
    transition: transform .3s;
}

.project-art:hover .project-open {
    transform: rotate(45deg);
}

.portfolio-method {
    background: var(--deep);
    color: #fff;
}

.method-grid {
    display: grid;
    grid-template-columns: 1fr .85fr;
    gap: 13%;
}

.method-grid h2 {
    font-size: clamp(38px,4.3vw,62px);
    letter-spacing: -.055em;
    margin: 17px 0;
}

.method-grid h2 em {
    color: var(--orange);
}

.method-grid p {
    color: #333334;
    line-height: 1.85;
}

.method-grid .button {
    margin-top: 15px;
}

.portfolio-single-body {
    padding-top: 65px;
    padding-bottom: 70px;
}

.single-project-image {
    background: #333334;
    overflow: hidden;
}

.single-project-image img {
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: cover;
    transition: transform .7s;
}

.single-project-image:hover img {
    transform: scale(1.03);
}

.single-project-copy {
    display: grid;
    grid-template-columns: 240px minmax(0,1fr);
    gap: 8%;
    margin-top: 38px;
}

.single-project-copy aside {
    border-top: 1px solid var(--line);
    padding-top: 20px;
}

.single-project-copy aside p {
    font-weight: 700;
    font-size: 14px;
    margin: 15px 0 35px;
}

.single-project-copy .article-body {
    padding: 0;
    font-size: 16px;
}


/* Blog and articles */
.article-hero .article-byline {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 28px;
    font: 700 11px Manrope,sans-serif;
    letter-spacing: .04em;
    color: #333334;
}

.article-byline span+span:before {
    content: "✳";
    padding-right: 21px;
    color: var(--orange);
}

.article-image-wrap {
    margin: 45px 0 0;
    overflow: hidden;
    background: #333334;
}

.article-image-wrap .article-image {
    width: 100%;
    max-height: 520px;
    height: auto;
    object-fit: cover;
    margin: 0;
    transition: transform .65s;
}

.article-image-wrap:hover .article-image {
    transform: scale(1.035);
}

.related-articles {
    background: #f1f0e9;
}

/* Content stays visible if JavaScript is unavailable. */
.reveal {
    opacity: 1;
    transform: none;
}

.js .reveal:not(.visible) {
    opacity: 0;
    transform: translateY(23px);
}

.js .reveal.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Responsive styles */
@media(max-width:1080px) {
    .topbar-inner>span {
        font-size: 9px;
    }
    .nav-service-group>a {
        font-size: 11px;
    }
    .service-dropdown {
        left: -95px;
    }
    .client-placeholders {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:800px) {
    .nav-service-group {
        display: flex;
        flex-wrap: wrap;
        height: auto;
        border-bottom: 1px solid var(--line);
        position: relative;
    }
    .nav-service-group>a {
        flex: 1;
        padding: 13px 4px;
        font-size: 15px;
    }
    .nav-service-group>a.active {
        margin: 0;
        border: 0;
        color: var(--teal);
    }
    .submenu-toggle {
        padding: 9px 11px;
    }
    .service-dropdown {
        display: none;
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        box-shadow: none;
        border-top: 1px solid var(--line);
        background: #333334;
        width: 100%;
        padding: 13px;
    }
    .nav-service-group:hover .service-dropdown,.nav-service-group:focus-within .service-dropdown {
        display: none;
    }
    .nav-service-group.is-open .service-dropdown,.nav-service-group.is-open:hover .service-dropdown,.nav-service-group.is-open:focus-within .service-dropdown {
        display: block;
    }
    .service-dropdown a {
        font-size: 13px;
    }
    .metrics-grid {
        grid-template-columns: repeat(2,1fr);
        row-gap: 26px;
    }
    .metric-card:nth-child(odd) {
        border-left: 0;
    }
    .testimonials-section .testimonial-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .big-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }
    .editorial-grid,.faq-grid,.method-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .editorial-aside {
        position: static;
    }
    .portfolio-main .portfolio-gallery {
        gap: 28px;
    }
    .single-project-copy {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media(max-width:600px) {
    .brand-logo {
        width: 195px;
        max-height: 58px;
    }
    .topbar-inner>span {
        display: none;
    }
    .metrics-section {
        padding: 36px 0;
    }
    .metric-card {
        padding: 14px 17px;
    }
    .metric-card strong {
        font-size: 42px;
    }
    .metric-card>span {
        font-size: 8px;
    }
    .metric-icon {
        width: 43px;
        height: 43px;
        margin-bottom: 13px;
    }
    .metric-icon svg {
        width: 23px;
    }
    .clients-section>.container {
        grid-template-columns: 1fr;
    }
    .client-logo-card {
        min-height: 105px;
    }
    .testimonials-section .testimonial-grid {
        grid-template-columns: 1fr;
    }
    .testimonial-card {
        min-height: 210px;
    }
    .big-cta-inner {
        padding: 65px 0;
    }
    .big-cta h2 {
        font-size: 40px;
    }
    .faq-list summary {
        font-size: 14px;
    }
    .portfolio-main .portfolio-gallery {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .portfolio-main .portfolio-item:first-child {
        grid-column: auto;
        display: block;
        padding: 14px;
    }
    .portfolio-main .portfolio-item:first-child .project-art {
        height: 295px;
    }
    .portfolio-main .portfolio-item:first-child h3 {
        font-size: 23px;
    }
    .portfolio-hero-foot {
        gap: 6px;
    }
    .portfolio-hero-foot span {
        font-size: 8px;
    }
    .article-byline {
        gap: 9px!important;
    }
    .article-byline span+span:before {
        padding-right: 8px;
    }
    .article-image-wrap {
        margin-top: 26px;
    }
    .service-enquiry .form-aside {
        padding: 30px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .js .reveal,.js .reveal:not(.visible) {
        opacity: 1;
        transform: none;
    }
    .hero-sticker {
        animation: none;
    }
}


/* ========================================================================
   BRAND.CSS — Earlier brand palette and section refinements
   ======================================================================== */

/* Earlier brand palette and section refinements. Loaded after upgrade.css. */

/* 1.2 brand palette drawn from the supplied Beyond Lanka logo. */

/* Design tokens */
:root {
    --ink: #b7b7b9;
    --forest: #ededee;
    --deep: #e4e4e5;
    --teal: #e6e6e7;
    --orange: #ed3438;
    --paper: #f2f2f3;
    --sand: #e2e2e3;
    --line: #e2a7ac;
    --muted: #333334;
}


/* Global defaults */
body {
    background: var(--paper);
}

::selection {
    background: #f2f2f3;
    color: var(--deep);
}


/* Header and navigation */
.site-header {
    background: #fff;
    border-bottom: 1px solid #e9a8ae;
}

.topbar {
    background: #e4e4e5;
    color: #eeeeef;
}

.topbar a:hover {
    color: #fff;
}

.brand {
    min-width: 0;
}

.brand-logo {
    width: 305px;
    max-width: 305px;
    max-height: none;
    height: auto;
    object-fit: contain;
}

.header-inner {
    gap: 16px;
    min-height: 100px;
}

.primary-nav {
    gap: 19px;
}

.nav-service-group {
    height: 100px;
}

.nav-cta {
    margin-left: 2px;
}

.primary-nav>a:not(.button):hover,.primary-nav>a.active {
    color: var(--forest);
}


/* Service sections */
.service-dropdown {
    box-shadow: 0 20px 45px #e4e4e529;
}

.service-dropdown a {
    border-bottom-color: var(--line);
}

.submenu-toggle:hover {
    color: var(--forest);
}


/* Homepage hero */
.hero {
    background: linear-gradient(115deg,#f2f2f3 0%,#f2f2f3 100%);
}

.hero-visual-inner {
    background: linear-gradient(160deg,#f2f2f3 0%,#eaeaeb 55%,#e9e9ea 100%);
}

.hero-visual-inner:before {
    background: #f2f2f3;
}

.sun-disc {
    background: #f9d8db;
    box-shadow: 0 0 75px #ffb9c488;
}

.landscape-back {
    background: linear-gradient(#e9e9ea,#eaeaeb);
}

.landscape-front {
    background: linear-gradient(#dededf,#e4e4e5);
}

.hero-sticker {
    color: var(--deep);
}

.hero-foot {
    color: #313133;
}

.feature-band {
    background: linear-gradient(120deg,#e4e4e5,#e7e7e8);
}

.ticket {
    background: #f2f2f3;
    color: var(--deep);
    box-shadow: 22px 28px 0 #e9e9ea;
}

.ticket-circle {
    background: #c72533;
    color: #fff;
}

.feature-icon {
    color: #f2f2f3;
}

.button-orange {
    background: #bd2633;
    color: #fff;
}

.button-orange:hover {
    background: #a91929;
    color: #fff;
}

.button-dark {
    background: var(--deep);
}

.button-dark:hover {
    background: #ebebec;
}

.button-outline:hover {
    color: var(--deep);
}

.text-link:hover {
    color: var(--forest);
}


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

.metric-card {
    border-color: #e79097;
}

.metric-icon {
    border-color: #e0717a;
    color: var(--deep);
}

.metric-card strong {
    color: var(--deep);
}

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

.service-card:hover {
    background: #f2f2f3;
}

.service-card:after {
    color: var(--forest);
}


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

.project-card .project-art,.project-art {
    background-color: #f2f2f3;
}

.project-shop {
    background: radial-gradient(circle at 25% 70%,#fa8185 0 14%,transparent 15%),linear-gradient(130deg,#f2f2f3,#e0717a);
}

.portfolio-hero {
    background: linear-gradient(110deg,#f2f2f3,#f2f2f3);
}

.portfolio-hero-foot span {
    border-color: #e07c85;
    color: #e0717a;
}

.portfolio-filters button {
    border-color: #db8e94;
}

.portfolio-main .portfolio-item:first-child {
    background: #e8e8e9;
}

.single-project-image,.article-image-wrap {
    background: #f2f2f3;
}

.portfolio-note {
    color: #2d2d2e;
}

.method-grid p {
    color: #eaeaeb;
}

.project-travel {
    background: radial-gradient(circle at 80% 18%,#ffd2d6 0 15%,transparent 16%),linear-gradient(145deg,#e9e9ea,#e0717a);
}

.project-local {
    background: radial-gradient(circle at 80% 85%,#f2f2f3 0 22%,transparent 23%),linear-gradient(140deg,#e6e6e7,#dfdfe0);
}

.mock-body {
    background: linear-gradient(112deg,#f2f2f3,#eaeaeb);
}

.project-shop .mock-body {
    background: linear-gradient(130deg,#fff4f4,#ffc5cb);
}

.project-local .mock-body {
    background: linear-gradient(130deg,#f2f2f3,#f2f2f3);
}


/* Blog and articles */
.post-card-image {
    background: #f2f2f3;
}


/* Forms and contact */
.enquiry-form input:focus,.enquiry-form select:focus,.enquiry-form textarea:focus {
    box-shadow: 0 0 0 3px #ededee29;
}

.post-card-art {
    background: linear-gradient(120deg,#ededee,#dfdfe0);
}

.post-card h3 a:hover {
    color: var(--forest);
}

.blog-preview {
    background: #fff;
}

.article-hero .article-byline {
    color: #333334;
}


/* Clients and testimonials */
.clients-section {
    border-color: var(--line);
}

.client-logo-card {
    background: #f2f2f3;
    border-color: #eca7ad;
}

.client-logo-card:hover {
    border-color: #e7e7e8;
    box-shadow: 0 15px 30px #e0717a1b;
}

.client-monogram {
    background: #f2f2f3;
    color: var(--deep);
}

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

.client-sample {
    background: #f2f2f3;
    color: #333334;
}

.testimonials-section {
    background: #e2e2e3;
}

.testimonial-card {
    box-shadow: 0 3px 20px #e2e2e20e;
}

.testimonial-card:hover {
    box-shadow: 0 14px 34px #e2e2e220;
}

.testimonial-card footer {
    border-color: var(--line);
}

.testimonial-placeholder {
    border-color: #cc888e;
}

.testimonial-placeholder p {
    color: #333334;
}

.big-cta {
    background: radial-gradient(circle at 85% 30%,#e2e2e3 0,#e4e4e5 53%);
}

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

.service-enquiry {
    background: #f2f2f3;
}

.service-enquiry .form-aside p {
    color: #f2f2f3;
}

.form-panel {
    box-shadow: 0 12px 50px #e4e4e50d;
}

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

.form-aside a:hover,.contact-aside a:hover {
    color: #fff;
}

.page-hero {
    background: #f2f2f3;
}

.page-hero-dark {
    background: var(--deep);
}

.about-art {
    background: linear-gradient(155deg,#f2f2f3,#e0e0e1);
}

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

.editorial-body p:first-child:first-letter {
    color: var(--forest);
}


/* Footer */
.site-footer {
    background: #e0e0e1;
    color: #f2f2f3;
}

.footer-links {
    grid-template-columns: 1.8fr .85fr 1.15fr 1.15fr .8fr;
    gap: 24px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    background: #fff;
    padding: 10px 12px;
    border-radius: 5px;
}

.footer-brand img {
    display: block;
    width: 230px;
    height: auto;
    max-width: 100%;
}

.footer-location {
    display: block;
    margin-top: 12px;
    color: #d27f86;
    font-size: 12px;
}

.footer-intro h2 em {
    color: #f66a6d;
}

.footer-links p {
    color: #e2969d;
}

.area-hero {
    background: radial-gradient(circle at 84% 18%,#f2f2f3 0 11%,transparent 11.2%),linear-gradient(115deg,#f2f2f3,#f2f2f3);
}

.area-hero .container {
    max-width: 1240px;
}

.area-hero .display {
    max-width: 900px;
}

.area-hero p {
    max-width: 740px;
}

.area-hero .button {
    margin-top: 17px;
}

.area-hero-wide {
    background: radial-gradient(circle at 86% 17%,#ffcfd1 0 9%,transparent 9.2%),linear-gradient(115deg,#f2f2f3,#f2f2f3);
}

.area-services {
    background: #f2f2f3;
}

.area-service-grid,.area-city-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 19px;
    margin-top: 42px;
}

.area-service-card,.area-city-card {
    padding: 30px;
    background: #fff;
    border: 1px solid var(--line);
    border-top: 3px solid var(--forest);
    transition: transform .3s,box-shadow .3s,border-color .3s;
}

.area-service-card:hover,.area-city-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 19px 36px #dededf16;
    border-color: #dfdfe0;
}

.area-service-card>span,.area-city-card>span {
    color: var(--forest);
    font: 800 10px Manrope,sans-serif;
    letter-spacing: .12em;
}

.area-service-card h3,.area-city-card h3 {
    font-size: 23px;
    margin: 17px 0 12px;
}

.area-service-card p,.area-city-card p {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.area-service-card b,.area-city-card a {
    color: var(--forest);
    font: 700 12px Manrope,sans-serif;
}

.area-city-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
}

.area-city-card {
    border-top-color: var(--orange);
}

.area-city-card h3 {
    font-size: 21px;
}

.area-link-strip {
    background: var(--deep);
    color: #fff;
    padding: 28px 0;
}

.area-link-strip p {
    margin: 0;
    font-weight: 700;
}

.area-link-strip a {
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #f2f2f3;
}

.area-link-strip a:hover {
    color: #fff;
}


/* Responsive styles */
@media(max-width:1180px) {
    .brand-logo {
        width: 245px;
        max-width: 245px;
    }
    .primary-nav {
        gap: 14px;
    }
    .nav-cta {
        padding: 10px 12px;
    }
}

@media(max-width:950px) {
    .brand-logo {
        width: 225px;
        max-width: 225px;
    }
    .primary-nav {
        gap: 10px;
    }
    .primary-nav>a:not(.button) {
        font-size: 11px;
    }
    .nav-service-group {
        height: 100px;
    }
    .area-city-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:800px) {
    .header-inner {
        min-height: 88px;
    }
    .brand-logo {
        width: 245px;
        max-width: 245px;
    }
    .nav-service-group {
        height: auto;
    }
    .service-dropdown {
        background: #f2f2f3;
    }
    .footer-links {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
    .footer-links>div:first-child {
        grid-column: span 2;
    }
    .area-service-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .metric-card:nth-child(odd) {
        border-left: 0;
    }
}

@media(max-width:600px) {
    .brand-logo {
        width: 210px;
        max-width: 210px;
        max-height: none;
    }
    .footer-links {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 28px;
    }
    .footer-links>div:first-child {
        grid-column: span 2;
    }
    .footer-brand img {
        width: 225px;
    }
    .area-service-grid,.area-city-grid {
        grid-template-columns: 1fr;
    }
    .area-service-card,.area-city-card {
        padding: 25px;
    }
    .area-hero {
        padding: 70px 0;
    }
    .area-hero .display {
        font-size: clamp(40px,11vw,64px);
    }
}

@media(prefers-reduced-motion:reduce) {
    .area-service-card,.area-city-card {
        transition: none;
    }
    .area-service-card:hover,.area-city-card:hover {
        transform: none;
    }
}


/* ========================================================================
   DARK.CSS — Dark surfaces and component colour overrides
   ======================================================================== */

/* Dark surfaces and component colour overrides. Loaded after brand.css. */

/* Earlier dark foundation; the final black and red palette loads after this file. */

/* Design tokens */
:root {
    --ink: #e9c1c4;
    --forest: #f2f2f3;
    --deep: #090b0f;
    --teal: #f2f2f3;
    --orange: #ec525b;
    --paper: #0c0e13;
    --sand: #151921;
    --line: #262627;
    --muted: #323233;
}


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

body {
    background: var(--paper);
    color: var(--ink);
}

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

:focus-visible {
    outline-color: #ec525b;
}

.skip-link {
    background: #fff;
    color: #0c111b;
}

.eyebrow {
    color: var(--forest);
}

.eyebrow.light {
    color: #f2f2f3;
}

.period {
    color: var(--orange);
}

/* Base header styles; the final logo has a transparent background. */

/* Header and navigation */
.topbar {
    background: #06070a;
    color: #333334;
    border-bottom: 1px solid #333334;
}

.topbar a {
    color: #ecaab0;
}

.site-header {
    background: #0d1016;
    border-bottom: 1px solid #2f2f31;
}

.header-inner {
    min-height: 101px;
}

.brand {
    background: #fff;
    border-radius: 6px;
    padding: 2px 11px;
    box-shadow: 0 4px 18px #0004;
}

.brand-logo {
    width: 285px;
    max-width: 285px;
}

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

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

.submenu-toggle {
    color: #e6e6e7;
}

.submenu-toggle:hover,.nav-service-group:hover .submenu-toggle {
    color: #f2f2f3;
}

.menu-toggle span {
    background: #fff;
}


/* Service sections */
.service-dropdown {
    background: #333334;
    border-top-color: var(--orange);
    box-shadow: 0 24px 55px #0009;
}

.service-dropdown a {
    color: #efb6ba;
    border-bottom-color: #313132;
}

.service-dropdown a:hover {
    color: #f2f2f3;
}

.dropdown-heading {
    color: #f2f2f3;
}

.button-dark {
    background: #e3e3e4;
    color: #fff;
}

.button-dark:hover {
    background: #e8e8e9;
    color: #fff;
}

.button-orange {
    background: #c93340;
    color: #fff;
}

.button-orange:hover {
    background: #e24751;
    color: #fff;
}

.button-outline {
    color: #fff;
    border-color: #333334;
}

.button-outline:hover {
    background: #e9c1c4;
    color: #0c111b;
}

.text-link {
    color: inherit;
}

.text-link:hover {
    color: #f2f2f3;
}

/* Home hero and key feature retain the graphical shapes with a darker range. */

/* Homepage hero */
.hero {
    background: radial-gradient(circle at 82% 9%,#828284 0,transparent 34%),linear-gradient(120deg,#0b0d12,#111722);
}

.hero h1 em {
    color: #f2f2f3;
}

.hero-copy>p,.intro-right>p,.section-heading p {
    color: var(--muted);
}

.hero-foot {
    color: #323233;
}

.hero-bottom {
    border-color: #2d2d2e;
    color: #323233;
}

.hero-visual-inner {
    background: linear-gradient(155deg,#db757e,#e0717a 48%,#111827 100%);
}

.hero-visual-inner:before {
    background: linear-gradient(transparent 40%,#080c1699);
}

.sun-disc {
    background: #eb5b65;
    box-shadow: 0 0 90px #cf334663;
}

.landscape-back {
    background: linear-gradient(#e0717a,#e0717a);
}

.landscape-front {
    background: linear-gradient(#e0717a,#080d1a);
}

.hero-sticker {
    background: #eebcc0;
    color: #09101d;
    box-shadow: 0 11px 30px #0008;
}

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

.intro,.services-section,.blog-preview,.faq-section,.service-editorial,.portfolio-main {
    background: #0c0e13;
}

.intro .display em,.display em,.page-hero .display em {
    color: #ededee;
}

.feature-band {
    background: linear-gradient(105deg,#101319,#6e6e70);
    border-block: 1px solid #c9878d;
}

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

.feature-icon {
    color: #f2f2f3;
}

.ticket {
    background: #515152;
    color: #f2f2f3;
    border: 1px solid #c9878d;
    box-shadow: 22px 28px 0 #080b10;
}

.ticket-circle {
    background: #c93340;
    color: #fff;
}


/* Statistics */
.metrics-section {
    background: #141820;
    border-bottom: 1px solid var(--line);
}

.metric-card {
    border-color: #2d2d2e;
}

.metric-icon {
    border-color: #333334;
    color: #f2f2f3;
}

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

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

.service-grid {
    border-color: var(--line);
}

.service-card {
    background: #131720;
    border-color: var(--line);
}

.service-card:hover {
    background: #4c4c4d;
}

.service-card:after {
    color: #4f4f50;
}

.service-icon {
    background: #cd8389;
    color: #f2f2f3;
}

.service-index {
    color: #333334;
}

.service-card p {
    color: var(--muted);
}

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


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

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

.process-grid p {
    color: var(--muted);
}

.project-art,.project-card .project-art {
    background: #59595a;
}

.project-travel {
    background: radial-gradient(circle at 80% 18%,#eb5c68 0 15%,transparent 16%),linear-gradient(145deg,#d27f86,#0e1729);
}

.project-shop {
    background: radial-gradient(circle at 25% 70%,#bf3b4d 0 14%,transparent 15%),linear-gradient(130deg,#333334,#111522);
}

.project-local {
    background: radial-gradient(circle at 80% 85%,#e0717a 0 22%,transparent 23%),linear-gradient(140deg,#c9878d,#7c7c7d);
}

.mock-browser {
    background: #101723;
    box-shadow: 13px 20px 35px #0009;
}

.mock-bar {
    background: #333334;
}

.mock-body,.project-shop .mock-body,.project-local .mock-body {
    background: linear-gradient(130deg,#cd838a,#6b6b6c);
    color: #f2f2f3;
}

.mock-button {
    background: #ec525b;
}

.project-custom {
    background: #5c5c5d;
}

.project-placeholder {
    color: #ececed;
}

.portfolio-main .portfolio-item:first-child {
    background: #333334;
}

.portfolio-note {
    color: #333334;
}

.project-meta {
    color: #f2f2f3;
}

.project-open {
    background: #f2f2f3;
    color: #d77a82;
}


/* Blog and articles */
.post-card-image,.article-image-wrap,.single-project-image {
    background: #4c4c4d;
}

.post-card-art {
    background: linear-gradient(120deg,#e0717a,#5e5e5f);
}

.post-card-meta {
    color: #f2f2f3;
}

.post-card h3 a:hover {
    color: #f2f2f3;
}

.post-card p {
    color: var(--muted);
}

.empty-posts {
    background: #333334;
}

.article-hero .article-byline {
    color: #333334;
}

.article-body {
    color: #d5a2a6;
}

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

.article-body a,.editor-content a,.page-editor a,.editorial-body a {
    color: #f2f2f3;
}

.article-bottom {
    border-color: var(--line);
}


/* Clients and testimonials */
.clients-section {
    background: #0f1219;
    border-color: var(--line);
}

.clients-section h2 em {
    color: #f2f2f3;
}

.clients-section p {
    color: var(--muted);
}

.client-logo-card,.client-sample {
    background: #eab9bd;
    border: 1px solid #d8a9ad;
    color: #6a6a6c;
}

.client-sample {
    border-style: dashed;
}

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

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

.client-logo-card:hover {
    border-color: #e4e4e4;
    box-shadow: 0 15px 35px #0005;
}

.client-monogram {
    background: #f2f2f3;
    color: #e0717a;
}

.client-placeholders>span {
    border-color: #222223;
    color: #d7a6aa;
}

.client-placeholders small {
    color: #333334;
}

.testimonials-section {
    background: #151921;
}

.testimonial-card {
    background: #333334;
    color: #e5c4c7;
    box-shadow: 0 8px 30px #0003;
}

.testimonial-card:hover {
    box-shadow: 0 16px 38px #0007;
}

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

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

.testimonial-placeholder {
    border-color: #272728;
}

.testimonial-placeholder p {
    color: #333334;
}

.quote-mark {
    color: #ef626a;
}

.big-cta {
    background: radial-gradient(circle at 84% 34%,#d37e85,#0b0e14 57%);
    border-top: 1px solid #333334;
}

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

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

.area-link-strip {
    border-block: 1px solid #c9878d;
}

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

.page-hero,.portfolio-hero,.area-hero {
    background: radial-gradient(circle at 85% 15%,#cc858b,transparent 34%),linear-gradient(115deg,#101319,#333334);
}

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

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

.page-hero-dark .display em {
    color: #ef626a;
}

.about-art {
    background: linear-gradient(155deg,#d67a82,#101622);
}

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

.about-circle {
    background: #69696a;
    color: #f2f2f3;
    box-shadow: 23px 30px 0 #0307126b;
}

.about-copy p {
    color: var(--muted);
}

.service-graphic {
    background: radial-gradient(circle,#d27f86,#555556 70%);
    border: 1px solid #c9878d;
}

.graphic-orbit {
    border-color: #333334;
}

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

.graphic-note {
    color: #e8949b;
}

.service-details>div+div p,.editorial-body p {
    color: var(--muted);
}

.editorial-body p:first-child:first-letter {
    color: #f2f2f3;
}

.service-enquiry {
    background: #131820;
}

.pagination .current {
    background: #e0e0e1;
    color: #fff;
}


/* Forms and contact */
.form-panel {
    background: #333334;
    box-shadow: 0 15px 45px #0005;
    color: #eebcc0;
}

.form-panel>p,.form-small {
    color: #333334;
}

.enquiry-form input,.enquiry-form select,.enquiry-form textarea {
    background: #111720;
    border-color: #282829;
    color: #e5e5e6;
}

.enquiry-form input::placeholder,.enquiry-form textarea::placeholder {
    color: #303031;
}

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

.enquiry-form label span {
    color: #ff8188;
}

.form-notice {
    background: #555556;
    color: #eaafb4;
}

.form-notice.error {
    background: #42232a;
    color: #fff0f1;
}

.form-aside,.contact-aside {
    background: #5f5f60;
    color: #fff;
}

.form-aside li span,.service-enquiry .form-aside p {
    color: #cf959a;
}

.form-aside>a {
    color: #ff8790;
    border-color: #ff8790;
}

.contact-aside small {
    color: #cd868c;
}

.portfolio-hero-foot span {
    border-color: #313132;
    color: #d7868d;
}

.portfolio-filters button {
    background: #333334;
    border-color: #2c2c2d;
    color: #e8b6ba;
}

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

.method-grid p {
    color: #333334;
}

.related-articles {
    border-top: 1px solid var(--line);
}

.area-hero-wide {
    background: radial-gradient(circle at 84% 15%,#40212a,transparent 30%),linear-gradient(115deg,#101319,#333334);
}

.area-services {
    background: #12161d;
}

.area-service-card,.area-city-card {
    background: #333334;
    border-color: #2e2e2f;
    color: #eebcc0;
}

.area-service-card:hover,.area-city-card:hover {
    background: #333334;
    border-color: #cb858b;
    box-shadow: 0 19px 36px #0005;
}

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

.area-service-card p,.area-city-card p {
    color: #333334;
}

.area-city-card {
    border-top-color: #e75560;
}


/* Footer */
.site-footer {
    background: #080a0e;
    color: #ebb4b9;
    border-top: 1px solid #333334;
}

.footer-brand {
    background: #fff;
    padding: 8px 11px;
}

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

.footer-intro h2 em {
    color: #f06d75;
}

.footer-contact a:hover,.footer-links a:hover {
    color: #f2f2f3;
}

.footer-links strong {
    color: #e5c4c7;
}

.whatsapp-float {
    background: #333334;
    border: 1px solid #333334;
    color: #f2f2f3;
}

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


/* Responsive styles */
@media(max-width:1180px) {
    .brand-logo {
        width: 235px;
        max-width: 235px;
    }
}

@media(max-width:950px) {
    .brand-logo {
        width: 220px;
        max-width: 220px;
    }
}

@media(max-width:800px) {
    .brand-logo {
        width: 230px;
        max-width: 230px;
    }
    .primary-nav {
        background: #11161e;
    }
    .nav-service-group {
        border-color: var(--line);
    }
    .service-dropdown {
        background: #333334;
        border-top: 1px solid #333334;
    }
    .primary-nav>a:not(.button) {
        border-color: var(--line);
    }
}

@media(max-width:600px) {
    .header-inner {
        min-height: 79px;
    }
    .brand {
        padding: 2px 7px;
    }
    .brand-logo {
        width: 201px;
        max-width: 201px;
    }
    .hero-bottom {
        border-color: var(--line);
    }
}

@media(max-width:380px) {
    .brand-logo {
        width: 180px;
        max-width: 180px;
    }
}

/* The logo is displayed unchanged on black surfaces. */
.brand,.footer-brand {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
}

.brand-logo-composite {
    position: relative;
    display: block;
    width: 285px;
    line-height: 0;
}

.brand-logo-composite .brand-logo {
    display: block;
    width: 100%;
    max-width: none;
    max-height: none;
    height: auto;
}

.brand-logo-composite .brand-logo-white {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    clip-path: inset(0 35% 0 25%);
    pointer-events: none;
}

.footer-brand .brand-logo-composite {
    width: 230px;
}

/* Supplied client artwork on charcoal cards; the JPG logos retain their own backgrounds. */
.client-placeholders.client-grid {
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 12px;
}

.client-grid .client-logo-card {
    min-width: 0;
    min-height: 180px;
    padding: 18px 12px;
    background: #333334;
    border: 1px solid #2a2a2b;
    color: #edbdc1;
    text-decoration: none;
}

.client-grid .client-logo-card:hover {
    background: #333334;
    border-color: #e0717a;
    box-shadow: 0 16px 32px #0007;
}

.client-grid .client-logo-card img {
    max-height: 104px;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.client-grid .client-logo-card strong {
    color: #edbdc1;
    font-size: 11px;
}

.client-grid .client-logo-card small {
    color: #f2f2f3;
    font-size: 9px;
}

.client-grid .client-monogram {
    background: #cf8288;
    color: #fff;
}

@media(max-width:1180px) {
    .brand .brand-logo-composite {
        width: 235px;
    }
    .client-placeholders.client-grid {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media(max-width:950px) {
    .brand .brand-logo-composite {
        width: 220px;
    }
}

@media(max-width:800px) {
    .brand .brand-logo-composite {
        width: 230px;
    }
}

@media(max-width:600px) {
    .brand .brand-logo-composite {
        width: 201px;
    }
    .client-placeholders.client-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .client-grid .client-logo-card {
        min-height: 153px;
    }
    .client-grid .client-logo-card img {
        max-height: 83px;
    }
    .client-grid .client-logo-card:last-child:nth-child(odd) {
        grid-column: 1/-1;
        width: calc(50% - 6px);
        justify-self: center;
    }
}

@media(max-width:380px) {
    .brand .brand-logo-composite {
        width: 180px;
    }
}


/* ========================================================================
   REFRESH.CSS — Layout and animated illustration refinements
   ======================================================================== */

/* Layout and animated illustration refinements. Loaded after dark.css. */

/* Beyond Lanka design refinements. This file loads after the original theme styles. */

/* Design tokens */
:root {
    --forest: #f2f2f3;
    --teal: #e0717a;
    --orange: #f0474d;
    --ink: #e5c5c8;
    --paper: #0b0d0e;
    --sand: #151a19;
    --line: #212122;
    --muted: #1d1d1e;
}

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

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


/* Header and navigation */
.brand-logo-composite .brand-logo-white {
    display: none;
}

.brand-logo-composite {
    isolation: isolate;
}


/* Homepage hero */
.hero {
    background: radial-gradient(circle at 82% 9%,#737375 0,transparent 37%),linear-gradient(120deg,#0a0c0b,#101915);
}

.feature-band {
    background: linear-gradient(105deg,#101513,#14231a);
    border-color: #535354;
}

.page-hero,.portfolio-hero,.area-hero {
    background: radial-gradient(circle at 85% 15%,#6d6d6e,transparent 34%),linear-gradient(115deg,#0e1310,#181e1a);
}

.area-hero-wide {
    background: radial-gradient(circle at 85% 15%,#3c2024,transparent 35%),linear-gradient(115deg,#0e1310,#181e1a);
}

.big-cta {
    background: radial-gradient(circle at 84% 34%,#7f7f81,#0a0f0c 60%);
}


/* Forms and contact */
.form-aside,.contact-aside {
    background: #585859;
}


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

.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: #f2f2f3;
}

.button {
    border-radius: 5px;
    box-shadow: 0 4px 0 #0004,0 10px 24px #0003;
    transition: transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,background .32s,color .32s,border-color .32s;
}

.button-dark {
    background: #f2f2f3;
    color: #071510;
}

.button-dark:hover {
    background: #f2f2f3;
    color: #071510;
}

.button-orange {
    background: #eb464d;
    color: #fff;
}

.button-orange:hover {
    background: #ff5961;
    color: #fff;
}

.button-outline:hover {
    background: #f2f2f3;
    border-color: #f2f2f3;
    color: #081711;
}

.button:hover,.button:focus-visible {
    transform: translateY(-5px);
    box-shadow: 0 8px 0 #0003,0 19px 34px #f2f2f329;
}

.button:active {
    transform: translateY(-1px);
    box-shadow: 0 2px 0 #0005;
}

.button:before {
    background: linear-gradient(110deg,transparent 28%,#ffffff77 49%,transparent 67%);
    transition: transform .75s cubic-bezier(.2,.8,.2,1);
}

.button:hover:before,.button:focus-visible:before {
    transform: translateX(140%);
}

.button>span,.text-link>span {
    transition: transform .3s cubic-bezier(.2,.8,.2,1);
}

.button:hover>span,.button:focus-visible>span,.text-link:hover>span {
    transform: translate(5px,-5px);
}

.text-link {
    transition: color .3s;
}

.text-link:hover {
    color: #f2f2f3;
}

.hero h1 em,.display em,.page-hero .display em,.intro .display em,.clients-section h2 em {
    color: #f2f2f3;
}

.hero-visual-inner {
    background: linear-gradient(155deg,#ababad,#10251f 55%,#0e1012);
}

.landscape-back {
    background: linear-gradient(#e0717a,#7e7e7f);
}

.landscape-front {
    background: linear-gradient(#8e8e90,#091b19);
}

/* Animated icons in the service cards. */
.service-card {
    min-height: 350px;
}

.service-card:after {
    display: none;
}

.service-card h3 {
    margin-top: 23px;
}

.service-card:hover {
    background: #0f0f10;
}

.service-index {
    top: 38px;
}

.service-art {
    display: grid;
    place-items: center;
    position: relative;
    width: 106px;
    height: 106px;
    margin: 0 0 11px;
    color: #f34a53;
    isolation: isolate;
}

.service-art:before {
    content: "";
    position: absolute;
    inset: 3px;
    background: #131314;
    border: 1px solid #0e0e0e;
    border-radius: 23px;
    transform: rotate(-7deg);
    transition: transform .4s,border-color .4s,box-shadow .4s;
}

.service-motion-icon {
    position: relative;
    z-index: 2;
    width: 70px;
    height: 70px;
    filter: drop-shadow(0 7px 8px #0006);
    transition: transform .4s ease;
}

.service-motion-icon .icon-frame {
    stroke-dasharray: 240;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s ease;
}

.service-motion-icon .icon-mark {
    transition: transform .45s ease,opacity .45s;
    transform-box: fill-box;
    transform-origin: center;
    animation: bl-icon-breathe 3.2s ease-in-out infinite;
}

.service-art-orbit {
    position: absolute;
    z-index: 3;
    right: -3px;
    top: 3px;
    width: 19px;
    height: 19px;
    background: #ef414b;
    border: 3px solid #161619;
    border-radius: 50%;
    box-shadow: 0 0 0 3px #ed444633;
    animation: bl-icon-orbit 3.2s ease-in-out infinite;
}

.service-card:hover .service-art:before,.service-card:focus-visible .service-art:before {
    transform: rotate(3deg);
    border-color: #ef414b;
    box-shadow: 0 0 25px #d7374430;
}

.service-card:hover .service-motion-icon,.service-card:focus-visible .service-motion-icon {
    transform: translateY(-6px) scale(1.05);
}

.service-card:hover .icon-frame,.service-card:focus-visible .icon-frame {
    stroke-dashoffset: 35;
}

.service-card:hover .icon-mark,.service-card:focus-visible .icon-mark {
    transform: scale(1.12) rotate(4deg);
}

.service-art-travel-agency-website-development .icon-mark {
    transform-origin: 28px 26px;
}

.service-art-website-seo .icon-mark {
    transform-origin: 43px 44px;
}

.service-art-graphic-design .icon-mark {
    transform-origin: 67px 35px;
}


/* Motion keyframes */
@keyframes bl-icon-breathe {
    50% {
        opacity: .52;
        transform: scale(.94);
    }
}

@keyframes bl-icon-orbit {
    50% {
        transform: translate(4px,-7px);
        box-shadow: 0 0 0 7px #ed44461a;
    }
}

/* The light portfolio gallery follows the supplied four-column logo reference. */

/* Portfolio and project cards */
.portfolio-main {
    background: #222223;
    color: #151c1a;
}

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

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

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

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

.portfolio-main .portfolio-gallery {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px 20px;
}

.projects-section .portfolio-gallery {
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 20px;
}

.portfolio-main .portfolio-item:first-child {
    display: block;
    grid-column: auto;
    background: transparent;
    padding: 0;
}

.portfolio-main .portfolio-item:first-child .portfolio-tile {
    height: 180px;
}

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

.portfolio-tile {
    display: block;
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #121213;
    text-decoration: none;
    color: #333334;
    isolation: isolate;
    transition: border-color .35s,transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
}

.portfolio-tile-logo,.portfolio-tile-preview,.portfolio-tile-no-preview {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #fff;
    transition: opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1);
}

.portfolio-tile-logo {
    z-index: 2;
}

.portfolio-tile-logo img {
    display: block;
    width: auto;
    max-width: 82%;
    height: auto;
    max-height: 105px;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform .5s;
}

.portfolio-wordmark {
    font: 800 clamp(17px,2vw,25px)/1.1 Manrope,sans-serif;
    text-align: center;
    letter-spacing: -.04em;
}

.portfolio-tile-preview {
    z-index: 1;
    padding: 0;
    background: #132320;
    opacity: 0;
    transform: scale(1.09);
}

.portfolio-tile-preview>img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    filter: saturate(1.1);
    transition: transform .7s;
}

.portfolio-tile-overlay {
    position: absolute;
    inset: auto 0 0;
    padding: 27px 15px 13px;
    background: linear-gradient(transparent,#081713ef);
    color: #fff;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
}

.portfolio-tile-overlay strong {
    font: 700 12px/1.3 Manrope,sans-serif;
}

.portfolio-tile-overlay small {
    white-space: nowrap;
    font: 700 9px Manrope,sans-serif;
    color: #e2e2e2;
}

.portfolio-tile-no-preview {
    z-index: 1;
    background: #10251f;
    color: #fff;
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 9px;
    text-align: center;
    font: 700 16px Manrope,sans-serif;
}

.portfolio-tile-no-preview small {
    font-size: 11px;
    color: #e0717a;
}

.portfolio-tile-line {
    position: absolute;
    bottom: 0;
    left: 18%;
    width: 64%;
    height: 3px;
    background: #ec444e;
    z-index: 4;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .42s cubic-bezier(.2,.8,.2,1);
}

.portfolio-tile:hover,.portfolio-tile:focus-visible {
    transform: translateY(-5px);
    border-color: #ed4850;
    box-shadow: 0 16px 35px #0003;
    outline-offset: 4px;
}

.portfolio-tile:hover .portfolio-tile-logo,.portfolio-tile:focus-visible .portfolio-tile-logo {
    opacity: 0;
    transform: translateY(-12px);
}

.portfolio-tile:hover .portfolio-tile-preview,.portfolio-tile:focus-visible .portfolio-tile-preview,.portfolio-tile:hover .portfolio-tile-no-preview,.portfolio-tile:focus-visible .portfolio-tile-no-preview {
    opacity: 1;
    transform: scale(1);
}

.portfolio-tile:hover .portfolio-tile-preview>img,.portfolio-tile:focus-visible .portfolio-tile-preview>img {
    transform: scale(1.06);
}

.portfolio-tile:hover .portfolio-tile-line,.portfolio-tile:focus-visible .portfolio-tile-line {
    transform: scaleX(1);
}

.portfolio-main .portfolio-item:first-child h3 {
    font-size: initial;
}

.portfolio-main .portfolio-filters button {
    border: 1px solid #262627;
    background: #fff;
    color: #333334;
    border-radius: 4px;
    transition: background .25s,transform .25s,border-color .25s;
}

.portfolio-main .portfolio-filters button:hover,.portfolio-main .portfolio-filters button.is-selected {
    background: #e9e9ea;
    border-color: #e9e9ea;
    color: #fff;
    transform: translateY(-2px);
}


/* Responsive styles */
@media(max-width:1050px) {
    .portfolio-main .portfolio-gallery {
        grid-template-columns: repeat(3,minmax(0,1fr));
    }
}

@media(max-width:800px) {
    .portfolio-main .portfolio-gallery,.projects-section .portfolio-gallery {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 15px;
    }
    .service-card {
        min-height: 350px;
    }
}

@media(max-width:600px) {
    .portfolio-main .portfolio-gallery,.projects-section .portfolio-gallery {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 10px;
    }
    .portfolio-tile,.portfolio-main .portfolio-item:first-child .portfolio-tile {
        height: 148px;
    }
    .portfolio-tile-logo {
        padding: 12px;
    }
    .portfolio-tile-logo img {
        max-width: 96%;
        max-height: 92px;
    }
    .service-card {
        min-height: 330px;
    }
    .service-art {
        margin-bottom: 2px;
    }
}

@media(max-width:390px) {
    .portfolio-main .portfolio-gallery,.projects-section .portfolio-gallery {
        grid-template-columns: 1fr;
    }
    .portfolio-tile,.portfolio-main .portfolio-item:first-child .portfolio-tile {
        height: 175px;
    }
}

@media(hover:none) {
    .portfolio-tile {
        height: 205px;
    }
    .portfolio-tile-logo {
        inset: 0 0 43%;
    }
    .portfolio-tile-preview {
        inset: 57% 0 0;
        opacity: 1;
        transform: none;
    }
    .portfolio-tile-preview>img {
        object-position: center 28%;
    }
    .portfolio-tile-overlay {
        padding: 17px 8px 5px;
    }
    .portfolio-tile-overlay strong {
        font-size: 9px;
    }
    .portfolio-tile-overlay small {
        font-size: 8px;
    }
    .portfolio-tile-no-preview {
        inset: 57% 0 0;
        opacity: 1;
        font-size: 12px;
    }
    .portfolio-tile:hover .portfolio-tile-logo {
        opacity: 1;
        transform: none;
    }
    .portfolio-main .portfolio-item:first-child .portfolio-tile {
        height: 205px;
    }
}

@media(prefers-reduced-motion:reduce) {
    .service-art-orbit,.service-motion-icon .icon-mark {
        animation: none;
    }
    .service-motion-icon,.service-art:before,.portfolio-tile,.portfolio-tile-logo,.portfolio-tile-preview,.portfolio-tile-preview>img,.button,.button:before {
        transition-duration: .01ms;
    }
}


/* ========================================================================
   MONOCHROME.CSS — Final black, charcoal, white and red appearance
   ======================================================================== */

/* Final black, charcoal, white and red appearance. Loaded after refresh.css. */

/* 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;
}

.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;
}

.hero-visual-inner:before {
    content: none;
}

.hero-visual-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .6s ease;
}

.hero-visual:hover .hero-visual-image {
    transform: scale(1.04);
}

@media(prefers-reduced-motion:reduce) {
    .hero-visual-image {
        transition: none;
    }
    .hero-visual:hover .hero-visual-image {
        transform: none;
    }
}