/* ============================ Web-Hero  ======================= */
 a {
     color: inherit;
     text-decoration: none;
 }

 .web-hero {
     --gutter: clamp(1.25rem, 5vw, 5rem);
     --brand-red: #6D2732;
     --bg: #F1E8E0;
     padding: clamp(2.5rem, 2rem + 4vw, 6rem) 0 clamp(2.5rem, 2rem + 4vw, 6rem);
     background: var(--bg);
     color: #000;
     overflow: hidden;
 }

 .web-hero__inner {
     display: grid;
     grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
     grid-template-areas:
         "text    text"
         "actions media"
         "stats   claims";
     column-gap: clamp(1rem, 2vw, 2rem);
     row-gap: clamp(0.5rem, 1rem + 1vw, 1rem);
     align-items: start;
     margin-inline: auto;
     padding: clamp(5rem, 5vw, 5rem) 0 clamp(2rem, 2vw, 2rem) var(--gutter);
 }

 /* ---------- Heading + paragraph ---------- */
 .web-hero__text {
     grid-area: text;
 }

 .web-hero__heading {
     margin: 0;
     font-size: clamp(1.8rem, 1.1rem + 2.8vw, 60px);
     font-weight: 500;
     line-height: 1.3;
     color: #000;
 }

 .web-hero__accent {
     display: block;
     font-size: 1.2em;
     font-style: italic;
     font-weight: 400;
     line-height: 1.3;
     color: var(--brand-red);
 }

 .web-hero__lead {
     max-width: 42em;
     margin: clamp(0.9rem, 0.6rem + 1vw, 1.5rem) 0 0;
     font-size: clamp(1rem, 1.5vw, 1.15rem);
     line-height: 1.3;
     color: #111;
 }

 /* ---------- Buttons ---------- */
 .web-hero__actions {
     grid-area: actions;
     position: relative;
     z-index: 2;
     display: flex;
     flex-wrap: wrap;
     gap: 2rem;
     align-self: start;
     flex-direction: column;
     margin-top: clamp(0.5rem, 0.2rem + 5vw, 5.5rem);
 }

 .web-hero__actions .web-hero__btn {
     position: relative;
     overflow: hidden;
     display: inline-flex;
     align-items: center;
     gap: 0.6rem;
     width: fit-content;
     line-height: normal;
     padding: clamp(1rem, 0.6rem + 0.6vw, 1.5rem) clamp(1.1rem, 0.8rem + 1.7vw, 2rem);
     border: 1px solid var(--brand-red);
     border-radius: 999px;
     background: var(--brand-red);
     color: #fff;
     font-size: clamp(0.75rem, 1.1vw, 1.12rem);
     text-transform: uppercase;
     text-decoration: none;
     white-space: nowrap;
     z-index: 1;
     transition: color 0.4s ease;
 }

 .web-hero__actions .web-hero__btn::before {
     content: "";
     position: absolute;
     top: 0px;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: rgb(255, 255, 255);
     z-index: -1;
     transition: left 0.4s;
 }

 .web-hero__btn svg {
     flex: none;
     width: 1em;
     height: 1em;
     transition: transform 0.3s ease;
 }

 .web-hero__btn-arrow {
     fill: #fff;
 }

 .web-hero__btn:hover,
 .web-hero__btn:focus-visible {
     color: #6D2732;
 }

 .web-hero__actions .web-hero__btn:hover::before {
     left: 0px;
 }

 .web-hero__btn:hover .web-hero__btn-arrow {
     background: transparent;
     fill: var(--brand-red);
 }


 /* ---------- Laptop ---------- */
 .web-hero__media {
     grid-area: media;
     margin: 0;
     align-self: center;
 }

 .web-hero__media img {
     display: block;
     width: 100%;
     height: auto;
     -webkit-user-drag: none;
 }

 /* ---------- Stats (left) ---------- */
 .web-hero__stats {
     position: relative;
     top: -130%;
     grid-area: stats;
     display: flex;
     flex-wrap: wrap;
     flex-direction: column;
     gap: clamp(1.8rem, 1rem + 4vw, 34.5rem);
     margin: 0;
     padding: 0;
     list-style: none;
     align-self: end;
 }

 .web-hero__num {
     display: block;
     font-size: clamp(1.8rem, 1.2rem + 5.2vw, 5rem);
     font-weight: 700;
     line-height: 1;
     color: var(--brand-red);
 }

 .web-hero__label {
     display: block;
     margin-top: 0.35rem;
     font-size: clamp(0.8rem, 0.72rem + 0.8vw, 1.9rem);
     color: #000;
 }

 /* ---------- Claims (right) ---------- */
 .web-hero__claims {
     grid-area: claims;
     display: flex;
     flex-direction: column;
     gap: clamp(1.25rem, 1rem + 3.5vw, 3.25rem);
     margin: 0;
     padding: 0;
     padding-right: clamp(1.25rem, 5vw, 5rem);
     list-style: none;
     align-self: center;
     text-align: right;
 }

 .web-hero__claim-title {
     display: block;
     font-size: clamp(1.2rem, 0.85rem + 1.5vw, 3rem);
     font-weight: 700;
     line-height: 1.2;
     color: var(--brand-red);
 }

 .web-hero__claim-text {
     display: block;
     margin-top: 0.3rem;
     font-size: clamp(0.85rem, 0.75rem + 0.9vw, 1.9rem);
     font-weight: 300;
     line-height: 1.3;
     color: var(--brand-red);
 }

 /* ---------- Reveal on scroll ---------- */
 .web-hero.js-anim .web-hero__text,
 .web-hero.js-anim .web-hero__actions,
 .web-hero.js-anim .web-hero__stats,
 .web-hero.js-anim .web-hero__claims,
 .web-hero.js-anim .web-hero__media {
     opacity: 0;
     transform: translateY(1.75rem);
     transition: opacity 0.9s ease, transform 1s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .web-hero.js-anim .web-hero__media {
     transform: translateX(3rem);
     transition-duration: 1.1s, 1.3s;
     transition-delay: 0.15s;
 }

 .web-hero.js-anim .web-hero__actions {
     transition-delay: 0.2s;
 }

 .web-hero.js-anim .web-hero__stats {
     transition-delay: 0.35s;
 }

 .web-hero.js-anim .web-hero__claims {
     transition-delay: 0.5s;
 }

 .web-hero.js-anim.is-visible .web-hero__text,
 .web-hero.js-anim.is-visible .web-hero__actions,
 .web-hero.js-anim.is-visible .web-hero__stats,
 .web-hero.js-anim.is-visible .web-hero__claims,
 .web-hero.js-anim.is-visible .web-hero__media {
     opacity: 1;
     transform: none;
 }

 /* Keep the italic line on one row when there is room */
 @media (min-width: 480px) {
     .web-hero__accent {
         white-space: nowrap;
     }
 }

 /* ---------- Mobile: same arrangement as the design ---------- */
 @media (max-width: 1700px) {
     .web-hero__stats {
         top: -100%;
     }
 }

 @media (max-width: 1600px) {
     .web-hero__stats {
         top: -90%;
     }
 }

 @media (max-width: 767.98px) {
     .web-hero__inner {
         grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
         grid-template-areas:
             "text    text"
             "actions media"
             "stats   media"
             "stats   claims";
         column-gap: 0.5rem;
         row-gap: 1.25rem;
     }

     .web-hero__lead {
         max-width: 45em;
     }

     .web-hero__text {
         padding-right: clamp(1.25rem, 5vw, 5rem);
     }

     .web-hero__actions {
         flex-direction: column;
         align-items: flex-start;
         margin-top: 0.5rem;
         gap: 1rem;
     }

     /* The laptop is larger than its column and tucks in behind the buttons */
     .web-hero__media {
         align-self: start;
         margin-top: 8rem;
     }

     .web-hero__media img {
         width: 135%;
         max-width: none;
         margin-left: -10%;
     }

     .web-hero__stats {
         flex-direction: column;
         gap: 1.5rem;
         align-self: center;
         margin-top: 0;
         top: -10%;
     }

     .web-hero__claims {
         align-self: start;
         margin-top: 1rem;
     }
 }

 @media (prefers-reduced-motion: reduce) {

     .web-hero.js-anim .web-hero__text,
     .web-hero.js-anim .web-hero__actions,
     .web-hero.js-anim .web-hero__stats,
     .web-hero.js-anim .web-hero__claims,
     .web-hero.js-anim .web-hero__media {
         opacity: 1;
         transform: none;
         transition: none;
     }
 }

 /* ============================ Web-Hero  ======================= */


 /* ============================ Website-issues  ======================= */
 .website-issues {
     --pad: clamp(1.25rem, 3.2vw, 4rem);
     --brand-red: #6D2732;
     padding: clamp(2.5rem, 2rem + 3vw, 5rem) 0 clamp(2.5rem, 2rem + 3vw, 5rem);
     background: #fff;
     color: #000;
     overflow: hidden;
 }

 .website-issues__inner {
     display: grid;
     grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
     grid-template-areas:
         "head  list"
         "media list"
         "cta   list";
     grid-template-rows: auto auto 1fr;
     column-gap: clamp(2rem, 6vw, 8rem);
     max-width: 90rem;
     margin-inline: auto;
     padding-inline: var(--pad);
 }

 /* ---------- Left column ---------- */
 .website-issues__heading {
     grid-area: head;
     margin: 0 0 clamp(1.25rem, 0.8rem + 1.6vw, 2.25rem);
     max-width: 12.5em;
     font-size: clamp(1.75rem, 1rem + 2.6vw, 50px);
     font-weight: 400;
     line-height: 1.2;
     text-transform: uppercase;
     color: #000;
 }

 .website-issues__media {
     grid-area: media;
     margin: 0;
     overflow: hidden;
     aspect-ratio: 365 / 167;
     /* background: #e4e0df;  */
 }

 .website-issues__media img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
 }

 @media (hover: hover) {
     .website-issues__media:hover img {
         transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
         transform: scale(1.02);
     }
 }

 .website-issues__cta {
     position: relative;
     grid-area: cta;
     align-self: end;
     overflow: hidden;
     justify-self: start;
     margin-top: clamp(1.5rem, 4vw, 3rem);
     display: inline-flex;
     align-items: center;
     gap: 0.9em;
     padding: clamp(1rem, 0.6rem + 0.6vw, 1.5rem) clamp(1.1rem, 0.8rem + 1.7vw, 2rem);
     border: 1px solid var(--brand-red);
     border-radius: 999px;
     background: var(--brand-red);
     color: #fff;
     font-size: clamp(0.75rem, 1.1vw, 1.12rem);
     line-height: normal;
     text-transform: uppercase;
     text-decoration: none;
     white-space: nowrap;
     transition: color 0.4s ease;
     z-index: 1;
 }

 .website-issues__cta::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: #fff;
     z-index: -1;
     transition: left 0.4s ease;
 }

 .website-issues__cta svg {
     flex: none;
     width: 1em;
     height: 1em;
     transition: transform 0.3s ease;
 }

 .website-issues__cta:hover {
     color: #6D2732;
 }

 .website-issues__cta:hover::before {
     left: 0;
 }

 .website-issues__btn-arrow {
     fill: #fff;
 }

 .website-issues__cta:hover,
 .website-issues__cta:focus-visible {
     color: var(--brand-red);
 }

 .website-issues__cta:hover .website-issues__btn-arrow {
     background: transparent;
     fill: var(--brand-red);
 }


 /* ---------- Right column: the list ---------- */
 .website-issues__list {
     grid-area: list;
     display: flex;
     flex-direction: column;
     gap: clamp(1.25rem, 0.5rem + 2vw, 2rem);
     margin: 0;
     padding: clamp(2.5rem, 0.625rem + 6vw, 5.625rem) 0 0 0;
     list-style: none;
     counter-reset: none;
 }

 .website-issues__item {
     position: relative;
     display: grid;
     grid-template-columns: clamp(2.5rem, 2rem + 2vw, 3.6rem) minmax(0, 1fr);
     align-items: baseline;
     padding-bottom: clamp(0.7rem, 0.5rem + 0.8vw, 1.1rem);
     padding-top: clamp(0.7rem, 0.5rem + 0.8vw, 1.1rem);
     padding-left: clamp(1rem, 0.8rem + 1vw, 1.5rem);
     padding-right: clamp(1rem, 0.8rem + 1vw, 1.5rem);
     overflow: hidden;
     isolation: isolate;
     /* Ensures z-index layers remain scoped inside each item */
     cursor: pointer;
     border-radius: 8px;
     /* Optional subtle corner curve */
 }

 /* Sliding black background box */
 .website-issues__item::before {
     content: "";
     position: absolute;
     inset: 0;
     background-color: #000000;
     z-index: -1;
     transform: scaleX(0);
     transform-origin: left center;
     transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* Thin bottom separator line */
 .website-issues__item::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     height: 1px;
     background: linear-gradient(to right, rgba(0, 0, 0, 1) 0%, rgba(102, 102, 102, 0) 100%);
     transform-origin: left center;
     transition: opacity 0.3s ease;
 }

 .website-issues__num {
     font-size: clamp(1rem, 0.85rem + 1.4vw, 1.9rem);
     line-height: 1.2;
     color: #000;
     transition: color 0.35s ease;
 }

 .website-issues__title {
     margin: 0;
     font-size: clamp(1rem, 0.85rem + 1.4vw, 1.9rem);
     font-weight: 400;
     line-height: 1.2;
     color: #000;
     transition: color 0.35s ease;
 }

 .website-issues__text {
     grid-column: 2;
     margin: clamp(0.4rem, 0.3rem + 0.4vw, 0.7rem) 0 0;
     font-size: clamp(0.99rem, 0.7rem + 0.6vw, 1.13rem);
     font-weight: 300;
     line-height: 1.4;
     color: #000;
     transition: color 0.35s ease;
 }

 /* Hover State */
 @media (hover: hover) {
     .website-issues__item:hover::before {
         transform: scaleX(1);
     }

     .website-issues__item:hover .website-issues__num,
     .website-issues__item:hover .website-issues__title {
         color: #ffffff;
     }

     .website-issues__item:hover .website-issues__text {
         color: rgba(255, 255, 255, 0.85);
     }

     /* Softens the bottom divider line while hovered */
     .website-issues__item:hover::after {
         opacity: 0.2;
     }
 }

 /* ---------- Mobile ---------- */
 @media (max-width: 767.98px) {
     .website-issues__inner {
         grid-template-columns: minmax(0, 1fr);
         grid-template-areas:
             "head"
             "media"
             "list"
             "cta";
         grid-template-rows: none;
     }

     .website-issues__heading {
         max-width: none;
     }

     .website-issues__list {
         margin-top: clamp(2rem, 1.2rem + 4vw, 3rem);
     }

     .website-issues__cta {
         margin-top: clamp(2rem, 1.2rem + 4vw, 3rem);
     }
 }

 /* ---------- Reveal on scroll ---------- */
 .website-issues.js-anim .website-issues__heading,
 .website-issues.js-anim .website-issues__media,
 .website-issues.js-anim .website-issues__cta,
 .website-issues.js-anim .website-issues__item {
     opacity: 0;
     transform: translateY(1.5rem);
     transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, color 0.3s ease;
 }

 .website-issues.js-anim .website-issues__media {
     transition-delay: 0.15s;
 }

 .website-issues.js-anim .website-issues__cta {
     transition-delay: 0.3s;
 }

 .website-issues.js-anim .website-issues__item {
     transition-delay: calc(0.15s + var(--i, 0) * 0.12s);
 }

 .website-issues.js-anim .website-issues__item::after {
     transform: scaleX(0);
     transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
     transition-delay: calc(0.4s + var(--i, 0) * 0.12s);
 }

 .website-issues.js-anim.is-visible .website-issues__heading,
 .website-issues.js-anim.is-visible .website-issues__media,
 .website-issues.js-anim.is-visible .website-issues__cta,
 .website-issues.js-anim.is-visible .website-issues__item {
     opacity: 1;
     transform: none;
 }

 .website-issues.js-anim.is-visible .website-issues__item::after {
     transform: scaleX(1);
 }

 @media (prefers-reduced-motion: reduce) {

     /* .website-issues.js-anim .website-issues__heading,
     .website-issues.js-anim .website-issues__media,
     .website-issues.js-anim .website-issues__cta,
     .website-issues.js-anim .website-issues__item {
         opacity: 1;
         transform: none;
         transition: none;
     }

     .website-issues.js-anim .website-issues__item::after {
         transform: none;
         transition: none;
     }

     .website-issues__media img {
         transition: none;
     } */
 }

 /* ============================ Website-issues  ======================= */


 /****************************** Website-Services-cards *****************************/

 .website-services-cards {
     --gutter: clamp(1.25rem, 5vw, 5rem);
     --brand-red: #6D2732;
     --ink: #1c1c1c;
     padding: clamp(3rem, 2rem + 8vw, 8rem) 0;
     padding-left: var(--gutter);
     /* no right padding: the slider runs off the right edge */
     background-color: #F1E8E0;
     overflow: hidden;
     color: var(--ink);
 }

 .website-services-cards__btn svg {
     width: 1.1rem;
     height: 1.1rem;
 }

 .website-services-cards__btn .owl-prev {
     display: grid;
     place-items: center;
     width: 2.75rem;
     height: 2.75rem;
     padding: 0;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 50%;
     background: transparent;
     color: var(--ink);
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 .website-services-cards__btn .owl-next {
     display: grid;
     place-items: center;
     width: 2.75rem;
     height: 2.75rem;
     padding: 0;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 50%;
     background: transparent;
     color: var(--ink);
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 /* Header: title left, arrows right */
 .website-services-cards__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1.5rem;
     padding-right: var(--gutter);
     margin-bottom: clamp(1.5rem, 1rem + 4vw, 4rem);
 }

 .website-services-cards__title {
     margin: 0;
     font-size: clamp(1.75rem, 1rem + 2.6vw, 50px);
     font-weight: 400;
     line-height: 1.3;
     text-transform: uppercase;
 }

 .website-services-cards__accent {
     font-size: 1.2em;
     text-transform: none;
     color: var(--brand-red);
 }

 .website-services-cards__nav {
     display: flex;
     gap: 0.5rem;
     flex-shrink: 0;
 }

 .website-services-cards__btn {
     display: grid;
     place-items: center;
     width: 2.75rem;
     height: 2.75rem;
     padding: 0;
     border: 1px solid rgba(0, 0, 0, 0.25);
     border-radius: 50%;
     background: transparent;
     color: var(--ink);
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 .website-services-cards__btn svg {
     width: 1.1rem;
     height: 1.1rem;
 }

 .website-services-cards__btn:hover {
     background-color: var(--brand-red);
     border-color: var(--brand-red);
     color: #fff;
 }

 .website-services-cards__btn:focus-visible,
 .website-services-cards__card:focus-visible {
     outline: 2px solid var(--brand-red);
     outline-offset: 3px;
 }

 /* Owl container: the cursor shows it can be dragged */
 .website-services-cards .owl-carousel {
     cursor: grab;
 }

 .website-services-cards .owl-carousel.owl-grab {
     cursor: grabbing;
 }

 /* Card */
 .website-services-cards__card {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     aspect-ratio: 1 / 1.25;
     padding: clamp(1rem, 0.7rem + 2vw, 2rem);
     border-radius: 10px;
     overflow: hidden;
     color: #fff;
     text-decoration: none;
     background: var(--bg, #2a1a1e);
     isolation: isolate;
     user-select: none;
     -webkit-user-drag: none;
 }

 /* soft dark layer that fades in on hover */
 .website-services-cards__card::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: rgba(0, 0, 0, 0);
     transition: background-color 0.6s ease;
 }

 /* a thin line under the title that grows on hover */
 .website-services-cards__name::after {
     content: "";
     display: block;
     width: 0;
     height: 1px;
     margin-top: 0.7rem;
     background: #fff;
     transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* description starts slightly low and faded */
 .website-services-cards__text {
     opacity: 0.75;
     transform: translateY(8px);
     transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
 }

 /* hover only on devices that have a mouse, so touch screens don't get stuck states */
 @media (hover: hover) and (pointer: fine) {
     .website-services-cards__card:hover::before {
         background: rgba(0, 0, 0, 0.22);
     }

     .website-services-cards__card:hover .website-services-cards__name::after {
         width: 2.75rem;
     }

     .website-services-cards__card:hover .website-services-cards__text {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* keyboard users get the same effect */
 .website-services-cards__card:focus-visible .website-services-cards__text {
     opacity: 1;
     transform: translateY(0);
 }

 .website-services-cards__card:focus-visible .website-services-cards__name::after {
     width: 2.75rem;
 }

 /* Image sits behind the text */
 .website-services-cards__media {
     position: absolute;
     inset: 0;
     z-index: -2;
 }

 .website-services-cards__media img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     -webkit-user-drag: none;
     transform: scale(1);
     transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .website-services-cards__card:hover .website-services-cards__media img {
     transform: scale(1.05);
     transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* Dark fade so white text stays readable on any photo */
 .website-services-cards__card::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 100%);
 }

 .website-services-cards__name {
     margin: 0;
     font-family: 'Helventica-Bold', Helvetica;
     max-width: 85%;
     font-size: clamp(1.3rem, 1rem + 0.7vw, 1.5rem);
     font-weight: 600;
     line-height: 1.2;
     color: #fff;
     padding-top: 20px;
 }

 .website-services-cards__text {
     font-family: 'Helvetica-light', Helvetica;
     margin: 0;
     max-width: 90%;
     font-size: clamp(0.8rem, 0.65rem + 0.2vw, 1rem);
     line-height: 1.35;
     opacity: 1;
     color: #fff;
     padding-bottom: 20px;
 }

 @media (max-width: 575.98px) {
     .website-services-cards__btn {
         width: 2.4rem;
         height: 2.4rem;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     /* .website-services-cards__media img {
        transition: none;
    } */
 }

 /****************************** website-services-cards *****************************/



 /* =====================  WEB DESIGN SHOWCASE  ===================== */
 .wds {
     --wds-bg: #F1E8E0;
     --wds-panel: #6D2732;
     /* maroon panel */
     --wds-text: #ffffff;
     --wds-muted: #CEB9B9;
     --wds-btn-bg: #F1E8E0;
     --wds-btn-text: #000;
     --wds-speed: .75s;
     background: var(--wds-bg);
     padding-top: clamp(1rem, 1rem + 2vw, 2rem);
     padding-bottom: clamp(3rem, 2rem + 8vw, 8rem);
 }

 .wds__wrap {
     padding-inline: 0px;
 }

 /* Card Layout: Stacked on Mobile, 2 Columns on Desktop */
 .wds__card {
     display: grid;
     grid-template-columns: 1fr;
     background: #6D2732;
     overflow: hidden;
 }

 @media (min-width: 992px) {
     .wds__card {
         grid-template-columns: 1fr 1fr;
         min-height: 650px;
     }
 }

 /* ---- Left: Content ---- */
 .wds__content {
     color: var(--wds-text);
     padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem) clamp(1.5rem, 4vw, 4rem);
     display: flex;
     flex-direction: column;
     justify-content: center;
     order: 2;
     /* Shows below image on mobile */
 }

 @media (min-width: 992px) {
     .wds__content {
         order: 1;
         /* Shows on left on desktop */
     }
 }

 .wds__title {
     margin-bottom: 0px;
     font-size: clamp(1.75rem, 1rem + 2.6vw, 50px);
     font-weight: 500;
     line-height: 1.3;
     text-transform: uppercase; 
 }

 .wds__title .wds__title__accent {
     display: inline-block;
     font-style: italic;
     font-size: 1.2em;
     font-weight: 400;
     text-transform: none;
 }

 .wds__lead {
     margin: clamp(1.2rem, 2vw, 2rem) 0;
     max-width: 27em;
     font-size: clamp(.875rem, .8rem + .35vw, 1.3rem);
     line-height: 1.3;
     color: var(--wds-muted);
 }

 /* ---- List ---- */
 .wds__list {
     list-style: none;
     margin-bottom: 2.5rem;
     display: flex;
     flex-direction: column;
     gap: 0.4rem;
     max-width: 360px;
     padding-left: 0;
 }

 .wds__item {
     position: relative;
     display: block;
     font-family: 'Helventica-Regular', sans-serif;
     width: 100%;
     padding: 0.4rem 0 0.4rem 2.2rem;
     border: 0;
     background: none;
     font-size: clamp(1.05rem, .9rem + .55vw, 1.35rem);
     line-height: 1.35;
     text-align: left;
     color: var(--wds-muted);
     cursor: pointer;
     transition: color 0.3s ease, transform 0.3s ease, padding 0.3s ease;
 }

 .wds__item::before {
     content: "";
     position: absolute;
     inset-inline-start: clamp(2.5rem, 2rem + 2.5vw, 3rem);
     top: 50%;
     width: 7px;
     height: 7px;
     border-radius: 50%;
     background: currentColor;
     transform: translateY(-50%) scale(0);
     transition: transform .3s ease;
 }

 .wds__item.is-active {
     color: var(--wds-text);
     padding-left: 4.2rem;
 }

 .wds__item.is-active::before {
     transform: translateY(-50%) scale(1);
 }

 .wds__item:focus-visible {
     outline: 2px solid var(--wds-text);
     outline-offset: 2px;
 }

 @media (hover: hover) and (pointer: fine) {
     .wds__item:hover {
         color: var(--wds-text);
         transform: translateX(4px);
     }
 }

 /* ---- Button ---- */
 .wds__btn {
     position: relative;
     display: inline-flex;
     font-family: 'Helventica-Regular', sans-serif;
     align-items: center;
     gap: 0.6rem;
     width: fit-content;
     padding: clamp(1rem, 0.6rem + 0.6vw, 1.5rem) clamp(1.1rem, 0.8rem + 1.7vw, 2rem);
     border: 1px solid var(--brand-red, #6D2732);
     border-radius: 999px;
     background: var(--wds-btn-bg);
     color: var(--wds-btn-text);
     font-size: clamp(0.75rem, 1.1vw, 1.12rem);
     text-transform: uppercase;
     text-decoration: none;
     line-height: normal;
     white-space: nowrap;
     overflow: hidden;
     z-index: 1;
     transition: color 0.4s ease;
 }

 .wds__btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: #fff;
     z-index: -1;
     transition: left 0.4s ease;
 }

 .wds__btn:hover::before {
     left: 0;
 }

 .wds__btn:hover {
     color: #6D2732;
 }

 .wds__btn .wds__btn-arrow {
     width: 1em;
     height: 1em;
     transition: transform 0.3s ease;
     fill: #000;
 }

 @media (hover: hover) and (pointer: fine) {
     .wds__btn:hover {
         /* background: #fff; */
     }

     /* .wds__btn:hover svg {
         transform: translate(2px, -2px);
     } */
 }

 /* ---- Right: Vertical Owl Slider ---- */
 .wds__media {
     position: relative;
     background: #dfe3ea;
     order: 1;
     height: 580px;
     overflow: hidden;
 }

 @media (max-width:995px) {
     .wds__lead {
         max-width: 36em;
     }

     .wds__list {
         margin-bottom: 2rem;
     }
 }

 @media (min-width: 576px) {
     .wds__media {
         height: 480px;
     }

     .wds__item.is-active {
         padding-left: 4.3rem;
     }
 }

 @media (min-width: 992px) {
     .wds__media {
         order: 2;
         height: 100%;
         min-height: 100%;
     }


 }

 .wds__owl-carousel,
 .wds__owl-carousel .owl-stage-outer,
 .wds__owl-carousel .owl-stage,
 .wds__owl-carousel .owl-item {
     height: 100% !important;
 }

 .wds__slide {
     width: 100%;
     height: 100%;
 }

 .wds__slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 /* Bottom-to-Top Animations */
 .owl-carousel .animated {
     animation-duration: 750ms;
     animation-timing-function: cubic-bezier(.4, 0, .2, 1);
     animation-fill-mode: both;
 }

 .owl-carousel .owl-animated-in {
     z-index: 2;
 }

 .owl-carousel .owl-animated-out {
     z-index: 1;
 }

 @keyframes slideInUp {
     0% {
         transform: translateY(100%);
     }

     100% {
         transform: translateY(0);
     }
 }

 @keyframes slideOutUp {
     0% {
         transform: translateY(0);
     }

     100% {
         transform: translateY(-100%);
     }
 }

 .slideInUp {
     animation-name: slideInUp;
 }

 .slideOutUp {
     animation-name: slideOutUp;
 }

 /* =====================  WEB DESIGN SHOWCASE  ===================== */






 /****************************** branding-recognised *****************************/
 .branding-recognised {
     position: relative;
     overflow: hidden;
     padding: clamp(3rem, 2rem + 5vw, 6rem) 0 clamp(3rem, 2rem + 5vw, 6rem);
     background: url('../images/web-development/branding-business.webp') center / cover no-repeat;
 }

 .branding-recognised__bg {
     position: absolute;
     inset: 0;
     background:
         linear-gradient(rgba(107, 37, 53, 0.30), rgba(107, 37, 53, 0.30));

 }

 .branding-recognised__title {
     font-size: clamp(1.75rem, 1rem + 2.5vw, 3rem);
     line-height: 1.3;
     font-weight: 400;
 }

 .branding-recognised__accent {
     font-style: italic;
     font-weight: 400;
 }

 .brandingRecognised-button {
     text-align: center;
     margin-top: 1.3rem;
 }

 .brandingRecognised-button .btn-branding-primary {
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 0.75rem;
     background: #6D2732;
     color: #fff;
     border: 1px solid #6D2732;
     border-radius: 50px;
     padding: clamp(0.9rem, 1.6vw, 1.15rem) clamp(1.5rem, 3vw, 2.25rem);
     font-family: 'Helventica-Regular', sans-serif;
     font-size: clamp(0.75rem, 1.1vw, 1.12rem);
     text-transform: uppercase;
     text-decoration: none;
     overflow: hidden;
     z-index: 1;
     transition: color 0.4s ease;
 }

 .brandingRecognised-button svg {
     width: 1em;
     height: 1em;
     transition: transform 0.3s ease;
 }

 .brandingRecognised-button .btn-branding-primary:hover {
     color: #6D2732;
 }

 .brandingRecognised-button .btn-branding-primary:hover::before {
     left: 0;
 }

 .brandingRecognised-button:hover .btn-arrow-icon {
     fill: #6D2732;
 }

 .brandingRecognised-button .btn-branding-primary::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: #fff;
     z-index: -1;
     transition: left 0.4s ease;
 }

 /* Marquee */
 .branding-marquee {
     margin-top: clamp(2rem, 1.5rem + 3vw, 4rem);
     overflow: hidden;
     -webkit-mask-image: linear-gradient(to right, transparent, #000 25%, #000 85%, transparent);
     mask-image: linear-gradient(to right, transparent, #000 25%, #000 85%, transparent);
 }

 .branding-marquee__track {
     display: flex;
     width: max-content;
     animation: branding-scroll 30s linear infinite !important;
 }

 .branding-marquee:hover .branding-marquee__track {
     /* animation-play-state: paused; */
 }

 .branding-marquee__group {
     display: flex;
     align-items: center;
     flex-shrink: 0;
 }

 .branding-marquee__group li {
     font-family: 'Helventica-Regular';
     font-weight: 100;
     color: #fff;
     white-space: nowrap;
     font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem);
 }

 .branding-marquee__star {
     width: 0.9rem;
     height: 0.9rem;
     margin: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
     background: #fff;
     /* 8-point star / asterisk shape */
     clip-path: polygon(50% 0%, 59.3% 15.2%, 75% 6.7%, 75.5% 24.5%,
             93.3% 25%, 84.8% 40.7%, 100% 50%, 84.8% 59.3%,
             93.3% 75%, 75.5% 75.5%, 75% 93.3%, 59.3% 84.8%,
             50% 100%, 40.7% 84.8%, 25% 93.3%, 24.5% 75.5%,
             6.7% 75%, 15.2% 59.3%, 0% 50%, 15.2% 40.7%,
             6.7% 25%, 24.5% 24.5%, 25% 6.7%, 40.7% 15.2%);
 }

 @keyframes branding-scroll {
     from {
         transform: translateX(0);
     }

     to {
         transform: translateX(-50%);
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .branding-marquee__track {
         animation: none;
     }

     .branding-marquee__track {
         animation-duration: 90s;
     }

 }

 @media (max-width:500px) {
     .brandingRecognised-button .btn-branding-primary {
         padding: clamp(0.9rem, 1.6vw, 1.15rem) clamp(0.5rem, 6vw, 2.25rem);
     }
 }

 /****************************** branding-recognised *****************************/


 /* ============================= TECHNOLOGIES & PLATFORMS SECTION ========================== */
 .tech-platforms {
     --tp-bg: #F1E8E0;
     --tp-accent: #6D2732;
     /* Deep maroon/wine color */
     --tp-heading: #000000;
     --tp-label: #000000;
     background-color: var(--tp-bg);
     padding: clamp(3.5rem, 9vw, 8rem) 1.5rem;
     text-align: center;
     width: 100%;
 }

 .tech-platforms__container {
     max-width: 1240px;
     margin: 0 auto;
 }

 /* ---- Heading ---- */
 .tech-platforms__title {
     font-size: clamp(1.75rem, 1rem + 2.6vw, 50px);
     font-weight: 400;
     line-height: 1.3;
     color: var(--tp-heading); 
     text-transform: uppercase;
     margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
 }

 .tech-platforms__title-accent {
     font-size: clamp(1.75rem, 1rem + 2.6vw, 58px);
     font-style: italic;
     font-weight: 400;
     color: var(--tp-accent);
     text-transform: none; 
     display: inline-block;
     margin-right: 0.35em;
 }

 /* ---- Responsive Grid ---- */
 .tech-platforms__grid {
     display: grid;
     /* 2 columns on small screens, expands automatically */
     grid-template-columns: repeat(2, 1fr);
     gap: 2rem 1.5rem;
     align-items: start;
     justify-items: center;
 }

 /* Tablet: 3 columns */
 @media (min-width: 640px) {
     .tech-platforms__grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 2.5rem 1.75rem;
     }
 }

 /* Desktop: 6 columns */
 @media (min-width: 992px) {
     .tech-platforms__grid {
         grid-template-columns: repeat(6, 1fr);
         gap: 2rem 1rem;
     }
 }

 /* ---- Individual Item ---- */
 .tech-platforms__item {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     text-decoration: none;
     transition: transform 0.3s ease;
     width: 100%;
     max-width: 170px;
 }

 @media (hover: hover) and (pointer: fine) {
     .tech-platforms__item:hover {
         transform: translateY(-6px);
     }
 }

 /* ---- Logo Icon Box ---- */
 .tech-platforms__icon-wrap {
     width: clamp(75px, 7vw, 105px);
     height: clamp(75px, 7vw, 105px);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.1rem;
 }

 .tech-platforms__icon-wrap img,
 .tech-platforms__icon-wrap svg {
     width: 100%;
     height: 100%;
     object-fit: contain;
     display: block;
     filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.05));
 }

 /* ---- Label ---- */
 .tech-platforms__name {
     font-size: clamp(0.99rem, 2vw, 1.15rem);
     font-weight: 500;
     color: var(--tp-label);
     white-space: nowrap;
     letter-spacing: -0.01em;
     font-family: 'Helventica-Regular', sans-serif;
 }

 /* ============================= TECHNOLOGIES & PLATFORMS SECTION ========================== *



  /* ========================== WEBSITE DEVELOPMENT PROCESS SECTION ============================ */
 .wds-process {
     position: relative;
     background-image: url('../images/web-development/website-development-service-background.webp');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     padding: clamp(3.5rem, 6vw, 7rem) 1.5rem;
     color: #ffffff;
     overflow: hidden;
 }

 .wds-process__container {
     max-width: 1320px;
     margin: 0 auto;
 }

 /* ---- Heading ---- */
 .wds-process__title {
     text-align: center;
     font-size: clamp(1.75rem, 1rem + 2.6vw, 50px);
     font-weight: 400; 
     text-transform: uppercase;
     line-height: 1.25;
     margin-bottom: clamp(3rem, 6vw, 6rem);
 }

 .wds-process__title-accent {
     font-size: clamp(1.75rem, 1rem + 2.6vw, 58px);
     font-style: italic;
     font-weight: 400;
     text-transform: none; 
 }

 /* ---- Timeline Container ---- */
 .wds-process__timeline {
     display: flex;
     flex-direction: column;
     position: relative;
 }

 /* Desktop Horizontal Row */
 @media (min-width: 992px) {
     .wds-process__timeline {
         flex-direction: row;
         justify-content: space-between;
         align-items: flex-start;
     }
 }

 /* ---- Step Item ---- */
 .wds-process__step {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     gap: 1.25rem;
     position: relative;
     flex: 1;
 }

 @media (min-width: 992px) {
     .wds-process__step {
         flex-direction: column;
         align-items: center;
         text-align: center;
         gap: 0;
     }
 }

 /* ---- Number Circle Box & Connectors ---- */
 .wds-process__badge-wrap {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
 }

 @media (min-width: 992px) {
     .wds-process__badge-wrap {
         width: 100%;
         margin-bottom: 2rem;
     }
 }

 /* The Circle Badge */
 .wds-process__circle {
     font-family: 'Helventica-Bold', sans-serif;
     width: clamp(48px, 4.2vw, 62px);
     height: clamp(48px, 4.2vw, 62px);
     border-radius: 50%;
     border: 1.8px solid rgba(255, 255, 255, 0.95);
     background-color: transparent;
     backdrop-filter: blur(4px);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: clamp(1.3rem, 1.5vw, 1.9rem);
     font-weight: 700;
     color: #ffffff;
     z-index: 2;
 }

 /* ---- Connecting Lines (Desktop) ---- */
 @media (min-width: 992px) {

     /* .wds-process__step::before {
        content: "";
        position: absolute;
        top: clamp(24px, 2.1vw, 31px);  
        left: 0;
        width: 50%;
        height: 1px;
        background: rgba(255, 255, 255, 0.65);
        z-index: 1;
      } */

     /* Right horizontal connecting half */
     .wds-process__step::after {
         content: "";
         position: absolute;
         top: clamp(24px, 2.1vw, 31px);
         transform: translateY(60%);
         left: calc(60% + 1px);
         height: 3px;
         width: calc(100% - 51px);
         background-image: url(../images/web-development/website-development-service-border.svg);
         background-repeat: no-repeat;
         background-position: center;
         background-size: contain;
         z-index: 1;
         pointer-events: none;
     }

     /* Shaded / Faded line leading into Item #1 */
     .wds-process__step:first-child::before {
         background: linear-gradient(to right, transparent 0%, rgba(255, 255, 255, 0.65) 100%);
     }

     /* Clean end on the last item */
     .wds-process__step:last-child::after {
         display: none;
     }
 }

 /* ---- Connecting Lines (Mobile & Tablet) ---- */
 @media (max-width: 991px) {
     .wds-process__timeline {
         gap: 14px;
     }

     /* Vertical connecting line down between circles */
     .wds-process__step:not(:first-child)::after {
         content: "";
         position: absolute;
         top: -44px;
         transform: translateY(60%);
         left: -33px;
         height: 5px;
         width: 115px;
         background-image: url(../images/web-development/website-development-service-border.svg);
         background-repeat: no-repeat;
         background-position: center;
         background-size: contain;
         z-index: 1;
         pointer-events: none;
         transform: rotate(90deg);
     }

     /* Faded line leading into the top on mobile */
     /* .wds-process__step:first-child::before {
         content: "";
         position: absolute;
         top: -1.5rem;
         left: calc(clamp(48px, 4.2vw, 62px) / 2);
         height: 1.5rem;
         width: 1px;
         background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.45));
         transform: translateX(-50%);
         z-index: 1;
     } */
 }

 /* ---- Text Content ---- */
 .wds-process__content {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     min-height: 105px;
     padding: 0 12px;
 }

 .wds-process__step-title {
     font-family: 'Helventica-Bold', sans-serif;
     font-size: clamp(1.09rem, 1.1vw, 1.15rem);
     font-weight: 700; 
     text-transform: uppercase;
     line-height: 1.3;
     margin-bottom: 0.65rem;
     color: #ffffff;
 }

 .wds-process__step-desc {
     font-size: clamp(0.94rem, 0.85vw, 0.95rem);
     line-height: 1.2;
     color: #fff;
     max-width: 250px;
     font-family: 'Helventica-Regular', sans-serif;
 }

 @media (max-width: 991px) {

     .wds__lead,
     .wds__item {
         color: #fff;
     }

     .wds-process__step-desc {
         max-width: 100%;
     }

     .wds-process__content {
         justify-content: center;
     }

     .wds__card {
         display: grid;
         grid-template-columns: 1fr;
         grid-template-rows: 1fr;
         position: relative;
         overflow: hidden;
     }

     .wds__media {
         grid-column: 1 / -1;
         grid-row: 1 / -1;
         z-index: 1;
         width: 100%;
         height: 100%;
     }

     .wds__media .owl-carousel,
     .wds__media .owl-stage-outer,
     .wds__media .owl-stage,
     .wds__media .owl-item,
     .wds__slide {
         height: 100%;
         margin: 0;
     }

     .wds__slide img {
         width: 100%;
         height: 100%;
         object-fit: cover;
     }

     .wds__content {
         grid-column: 1 / -1;
         grid-row: 1 / -1;
         z-index: 2;
         position: relative;
         padding: 2.5rem 1.5rem;
         pointer-events: none;
         background: linear-gradient(180deg,
                 rgba(0, 0, 0, 0.70) 0%,
                 rgba(0, 0, 0, 0.70) 50%,
                 rgba(0, 0, 0, 0.70) 100%);
         /* backdrop-filter:blur(1px); */
     }

     .wds__list button,
     .wds__btn,
     .wds__title,
     .wds__lead {
         pointer-events: auto;
     }
 }

 @media (max-width:414px) {
     .wds__content {
         padding: 4.5rem 1.5rem;
     }
 }

 /* ========================== WEBSITE DEVELOPMENT PROCESS SECTION ============================ */

 /* ============================== Website-Industries-cards ============================== */

 .website-industries-cards {
     --gutter: clamp(1.25rem, 5vw, 5rem);
     --brand-red: #6D2732;
     --ink: #1c1c1c;
     padding: clamp(3rem, 2rem + 8vw, 8rem) 0;
     padding-left: var(--gutter);
     /* no right padding: the slider runs off the right edge */
     background-color: #6D2732;
     overflow: hidden;
     color: var(--ink);
 }

 .website-industries-cards__btn svg {
     width: 1.1rem;
     height: 1.1rem;
 }

 /* Header: title left, arrows right */
 .website-industries-cards__head {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 1.5rem;
     padding-right: var(--gutter);
     margin-bottom: clamp(1.5rem, 1rem + 4vw, 4rem);
 }

 .website-industries-cards__title {
     margin: 0;
     font-size: clamp(1.75rem, 1rem + 2.6vw, 50px);
     font-weight: 400;
     line-height: 1.3;
     text-transform: uppercase;
 }

 .website-industries-cards__accent {
     font-size: 1.2em;
     text-transform: none;
     color: #fff;
 }

 .website-industries-cards__nav {
     display: flex;
     gap: 0.5rem;
     flex-shrink: 0;
 }

 .website-industries-cards__btn {
     display: grid;
     place-items: center;
     width: 2.75rem;
     height: 2.75rem;
     padding: 0;
     border: 1px solid rgba(255, 255, 255, 1);
     border-radius: 50%;
     background: transparent;
     color: #fff;
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 .website-industries-cards__btn .owl-prev {
     display: grid;
     place-items: center;
     width: 2.75rem;
     height: 2.75rem;
     padding: 0;
     border: 1px solid rgba(255, 255, 255, 1);
     border-radius: 50%;
     background: transparent;
     color: #fff;
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 .website-industries-cards__btn .owl-next {
     display: grid;
     place-items: center;
     width: 2.75rem;
     height: 2.75rem;
     padding: 0;
     border: 1px solid rgba(255, 255, 255, 1);
     border-radius: 50%;
     background: transparent;
     color: #fff;
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
 }

 .website-industries-cards__btn svg {
     width: 1.1rem;
     height: 1.1rem;
 }

 .website-industries-cards__btn:hover {
     background-color: #fff;
     border-color: var(--brand-red);
     color: var(--brand-red);
 }

 .website-industries-cards__btn:focus-visible,
 .website-industries-cards__card:focus-visible {
     outline: 2px solid var(--brand-red);
     outline-offset: 3px;
 }

 /* Owl container: cursor feedback */
 .website-industries-cards .owl-carousel {
     cursor: grab;
 }

 .website-industries-cards .owl-carousel.owl-grab {
     cursor: grabbing;
 }

 /* Card */
 .website-industries-cards__card {
     position: relative;
     display: flex;
     flex-direction: column;
     justify-content: end;
     align-items: center;
     aspect-ratio: 1 / 1.25;
     padding: clamp(1rem, 0.7rem + 2vw, 2rem);
     border-radius: 15px;
     overflow: hidden;
     color: #fff;
     text-decoration: none;
     background: var(--bg, #2a1a1e);
     isolation: isolate;  
 }

 /* Soft dark layer that fades in on hover */
 .website-industries-cards__card::before {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: rgba(0, 0, 0, 0);
     transition: background-color 0.6s ease;
 }

 /* A thin line under the title that expands on hover */
 .website-industries-cards__name::after {
     content: "";
     display: block;
     width: 0;
     height: 1px;
     margin-top: 0.7rem;
     background: #fff;
     transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
 }


 /* Desktop hover interactions */
 @media (hover: hover) and (pointer: fine) {
     .website-industries-cards__card:hover::before {
         background: rgba(0, 0, 0, 0.22);
     }

     .website-industries-cards__card:hover .website-industries-cards__name::after {
         width: 2.75rem;
     }

 }

 .website-industries-cards__card:focus-visible .website-industries-cards__name::after {
     width: 2.75rem;
 }

 /* Image background container */
 .website-industries-cards__media {
     position: absolute;
     inset: 0;
     z-index: -2;
 }

 .website-industries-cards__media img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     -webkit-user-drag: none;
     transform: scale(1);
     transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
 }

 .website-industries-cards__card:hover .website-industries-cards__media img {
     transform: scale(1.05);
     transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
 }

 /* Dark gradient overlay for text readability */
 .website-industries-cards__card::after {
     content: "";
     position: absolute;
     inset: 0;
     z-index: -1;
     background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
 }

 .website-industries-cards__name {
     margin: 0;
     font-family: 'Helventica-Bold', Helvetica, sans-serif;
     max-width: 85%;
     font-size: clamp(1.3rem, 1rem + 0.7vw, 2rem);
     font-weight: 600;
     text-align: center;
     line-height: 1.2;
     color: #F1E8E0;
     padding-top: 20px;
 }

 @media (max-width: 575.98px) {
     .website-industries-cards__nav {
         flex-direction: column;
     }

     .website-industries-cards__btn {
         width: 2.4rem;
         height: 2.4rem;
     }
 }

 /* ============================== Website-Industries-cards ============================== */

 /* ============================== Website-Brand-Showcase ============================== */
 .brand-showcase-section {
     position: relative;
     background: #322D2A;
     color: #eef0eb;
     padding: 60px 4% 90px;
 }

 .brand-showcase-intro {
     display: flex;
     justify-content: flex-end;
     align-items: flex-start;
     gap: 25px;
     margin-top: 50px;
     text-align: right;
 }

 .brand-showcase-intro .brand-showcase__title {
     margin: 0;
     max-width: 1210px;
     color: #fff;
     text-align: right;
     text-transform: uppercase;
     font-size: clamp(1.75rem, 1rem + 2.6vw, 50px);
     font-weight: 400; 
     line-height: 1.3;
 }

 /* -------------------------------------------------------------
       PINNED STACK CONTAINER
    ------------------------------------------------------------- */
 .brand-showcase {
     position: relative;
     width: 100%;
 }

 .brand-showcase-stage {
     position: sticky;
     top: 30px;
     height: calc(100svh - 60px);
     min-height: 520px;
     isolation: isolate;
     overflow: hidden;
     border-radius: 8px;
     background: #322D2A;
 }

 .brand-showcase-panel {
     position: absolute;
     inset: 0;
     background: #322D2A;
     clip-path: inset(100% 0px 0px 0px);
     display: flex;
     align-items: center;
     will-change: clip-path;
 }

 .brand-showcase-panel:nth-child(1) {
     --logo-h: clamp(100px, 12vw, 120px);
 }
.brand-showcase-panel:nth-child(2) {
     --logo-h: clamp(80px, 12vw, 90px);
 }
 .brand-showcase-panel:nth-child(3) {
     --logo-h: clamp(90px, 12vw, 120px);
 }
 .brand-showcase-panel:nth-child(4) {
     --logo-h: clamp(90px, 12vw, 120px);
 }
 .brand-showcase-panel:nth-child(5) {
     --logo-h: clamp(80px, 12vw, 100px);
 }
 .brand-showcase-panel:nth-child(6) {
     --logo-h: clamp(90px, 12vw, 100px);
 }
 .brand-showcase-panel:first-child {
     clip-path: inset(0% 0px 0px 0px);
 }

 /* Left Text / Info Column */
 .brand-showcase-copy {
     position: absolute;
     left: 6%;
     top: 14%;
     bottom: 12%;
     z-index: 2;
     width: 26%;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: flex-start;
 }

 .brand-showcase-copy-top {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
 }

 .brand-showcase-index {
     font-family: 'Gotham-Regular', sans-serif;
     font-size: 12px;
     color: #f1e8e099;
     font-variant-numeric: tabular-nums; 
     margin-bottom: 24px;
 }

 .brand-showcase-project-logo {
     display: block;
     max-height: var(--logo-h, clamp(100px, 10vw, 120px));
     width: auto;
     max-width: 180px;
     object-fit: contain;
     object-position: left center;
     filter: brightness(0) invert(1);
     margin-bottom: 14px;
 }

 .brand-showcase-type {
     font-size: 11px;
     color: rgba(255, 255, 255, 0.45);
     margin: 0; 
 }

 /* Right Frame (Website Image Preview) */
 .brand-showcase-frame {
     position: absolute;
     left: 36%;
     right: 6%;
     top: 10%;
     bottom: 10%;
     background: #322D2A;
     border-radius: 6px;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .brand-showcase-frame img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     object-position: center;
     display: block;
 }

 /* Button Style */
 .brand-showcase__btn {
     font-family: 'Helvetica-Regular', sans-serif;
     position: relative;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     line-height: normal;
     text-align: center;
     gap: 0.75rem;
     padding: clamp(0.9rem, 1.6vw, 1.15rem) clamp(1.5rem, 3vw, 2.5rem);
     border-radius: 999px;
     border: 1px solid rgba(255, 255, 255, 0.5);
     background: rgba(255, 255, 255, 0.04);
     color: #fff;
     text-decoration: none;
     font-size: clamp(0.75rem, 1.1vw, 1rem);
     text-transform: uppercase;
     overflow: hidden;
     cursor: pointer;
     transition: color 0.4s ease, border-color 0.4s ease;
 }

 /* Sliding background fill layer */
 .brand-showcase__btn::before {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background-color: #fff;
     z-index: 0;
     transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
 }

 /* Ensure text and icon remain on top of the sliding background */
 .brand-showcase__btn span,
 .brand-showcase__btn svg {
     position: relative;
     z-index: 1;
 }

 .brand-showcase__btn svg {
     width: 1em;
     height: 1em;
     transition: transform 0.3s ease;
 }

 .brand-showcase__btn .btn-arrow-icon {
     fill: currentColor;
     transition: fill 0.4s ease;
 }

 /* Hover States */
 .brand-showcase__btn:hover {
     color: #1e1e1e;
     border-color: #fff;
 }

 .brand-showcase__btn:hover::before {
     transform: translateX(100%);
 }

 .brand-showcase__btn:hover svg {
     /* transform: translate(2px, -2px); */
 }

 /* Desktop View: Mobile-dedicated button is hidden */
 .brand-showcase-mobile-btn {
     display: none;
 }

 .brand-showcase-scroll-hint {
     font-family: 'Gotham-Regular', sans-serif;
     position: absolute;
     bottom: 24px;
     left: 6%;
     z-index: 5;
     color: #f1e8e099;
     font-size: 11px; 
 }

 /* -------------------------------------------------------------
       RESPONSIVE BREAKPOINTS (Mobile Layout)
    ------------------------------------------------------------- */
 @media (max-width: 820px) {
     .brand-showcase-section {
         padding: 40px 4% 50px;
     }

     .brand-showcase-intro {
         flex-direction: column;
         gap: 16px;
         margin-bottom: 24px;
     }

     .brand-showcase-intro p {
         text-align: left;
     }

     .brand-showcase-stage {
         top: 60px;
         height: calc(100svh - 40px);
         min-height: 480px;
     }

     .brand-showcase-panel {
         flex-direction: column;
         align-items: stretch;
         justify-content: flex-start;
         padding: 45px 5%;
     }



     /* Un-anchor the left info column so elements flow sequentially */
     .brand-showcase-copy {
         position: relative;
         left: auto;
         top: auto;
         bottom: auto;
         width: 100%;
         margin-bottom: 14px;
     }

     .brand-showcase-index {
         margin-bottom: 6px;
     }

     /* .brand-showcase-project-logo {
         max-height: 36px;
         margin-bottom: 6px;
     } */

     /* Hide the desktop button located in the left copy */
     .brand-showcase-desktop-btn {
         display: none !important;
     }

     /* Frame becomes flexible inside mobile flow */
     .brand-showcase-frame {
         position: relative;
         left: auto;
         right: auto;
         top: auto;
         bottom: auto;
         width: 100%;
         flex: 1;
         min-height: 0;
     }

     /* Enable button on mobile devices directly after the image frame */
     .brand-showcase-mobile-btn {
         display: inline-flex !important;
         align-self: flex-start;
         margin-top: 14px;
         padding: 10px 20px;
         font-size: 11px;
     }

     .brand-showcase-scroll-hint {
         display: none;
     }
 }

 /* ============================== Website-Brand-Showcase ============================== */


 /* ========================  WHY BUSINESSES CHOOSE SECTION ======== ==================== */

 .why-choose {
     background-color: #642834;
     /* Deep Burgundy / Wine brand color */
     color: #ffffff;
     padding: clamp(3.5rem, 8vw, 8rem) clamp(0rem, 4vw, 0rem) clamp(3.5rem, 8vw, 8rem) clamp(1rem, 4vw, 6rem);
     overflow: hidden;
 }

 .why-choose__container {
     max-width: 1900px;
     margin: 0 auto;
     float: right;
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     gap: clamp(2rem, 5vw, 5rem);
     padding: 0px;
 }

 /* Left Column */
 .why-choose__content {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 /* Heading: Sans-serif uppercase top + Italic serif accent below */
 .why-choose__title {
     font-family: 'Helvetica-Regular', sans-serif;
     font-size: clamp(1.8rem, 2.8vw, 3.2rem);
     font-weight: 500; 
     text-transform: uppercase;
     line-height: 1.15;
     margin: 0 0 2.5rem 0;
     color: #ffffff;
 }

 .why-choose__title-accent {
     display: block;
     font-family: 'Playfair-MediumItalic', sans-serif;
     font-size: 1.12em;
     font-style: italic;
     font-weight: 400;
     text-transform: none; 
     margin-top: 0.25rem;
 }

 /* Explanatory Paragraph */
 .why-choose__text {
     font-family: 'Helvetica-Regular', sans-serif;
     font-size: clamp(0.95rem, 1vw, 1.1rem);
     line-height: 1.5;
     font-weight: 300;
     color: #fff;
     margin: 0;
 }

 .why-choose__text strong {
     font-weight: 700;
     color: #ffffff;
 }

 /* Right Column: Image */
 .why-choose__media {
     flex: 1;
     display: flex;
     align-items: center;
     justify-content: flex-end;
 }

 .why-choose__figure {
     margin: 0;
     width: 100%;
     height: 100%;
     height: 500px;
     overflow: hidden;
     background-color: rgba(0, 0, 0, 0.15);
 }

 .why-choose__figure img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }

 /* ================= Mobile & Tablet Responsive ================= */
 @media (max-width: 991px) {
     .why-choose {
         padding: clamp(3.5rem, 8vw, 8rem) clamp(1rem, 4vw, 6rem) clamp(3.5rem, 8vw, 8rem) clamp(1rem, 4vw, 6rem);
     }

     .why-choose__title {
         margin: 0 0 1.2rem 0;
     }

     .why-choose__container {
         flex-direction: column;
         gap: 2.5rem;
     }

     .why-choose__content {
         max-width: 100%;
         gap: 0rem;
     }

     .why-choose__figure {
         height: 300px;
         aspect-ratio: 1 / 2;
     }
 }

 /* ========================  WHY BUSINESSES CHOOSE SECTION ======== ==================== */