/*--------------------------------------------------------------
# Svelte Editorial Theme — override layer for the Arsha template
# Loaded after main.css. Rebuilds DevMatrix around the Svelte
# design tokens: white canvas, serif editorial voice, single
# ember accent, flat surfaces, arrow-link CTAs.
--------------------------------------------------------------*/

/* ===== 1. Design tokens ===== */
:root {
  /* Palette */
  --color-svelte-ember: #d43008;
  --color-ink: #262626;
  --color-carbon: #141414;
  --color-paper: #ffffff;
  --color-linen: #f7f4ef;
  --color-fog: #f2f2f2;
  --color-slate: #666666;
  --color-ash: #808080;
  --color-obsidian: #000000;

  /* Faded backdrop gradient — used on default (non-light/dark) sections,
     the inner-page title band, and the footer */
  --gradient-surface: linear-gradient(135deg, var(--color-linen) 0%, var(--color-fog) 100%);

  /* Fonts */
  --font-eb-garamond: 'EB Garamond', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-fira-sans: 'Fira Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-dm-serif-display: 'DM Serif Display', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;

  /* Spacing / radius */
  --spacing-40: 40px;
  --spacing-48: 48px;
  --radius-md: 4px;
  --radius-full: 56px;

  /* Remap the Arsha template's own control variables to the tokens above.
     Most of the template's component CSS reads these vars directly, so
     this alone reskins a large share of the site. */
  --background-color: var(--color-linen);
  --default-color: var(--color-ink);
  --heading-color: var(--color-carbon);
  --accent-color: var(--color-svelte-ember);
  --surface-color: var(--color-paper);
  --contrast-color: var(--color-paper);

  --default-font: var(--font-eb-garamond);
  --heading-font: var(--font-fira-sans);
  --nav-font: var(--font-fira-sans);

  --nav-color: var(--color-ink);
  --nav-hover-color: var(--color-svelte-ember);
  --nav-mobile-background-color: var(--color-paper);
  --nav-dropdown-background-color: var(--color-paper);
  --nav-dropdown-color: var(--color-ink);
  --nav-dropdown-hover-color: var(--color-svelte-ember);
}

.light-background {
  --background-color: var(--color-fog);
  --surface-color: var(--color-paper);
}

.dark-background {
  --background-color: var(--color-ink);
  --default-color: var(--color-paper);
  --heading-color: var(--color-paper);
  --surface-color: var(--color-ink);
  --contrast-color: var(--color-paper);
}

/* ===== 2. Flatten everything: no shadows, capped radius ===== */
* ,
*::before,
*::after {
  box-shadow: none !important;
}

body {
  font-family: var(--font-eb-garamond);
  font-size: 18px;
  line-height: 1.5;
  color: var(--color-ink);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-fira-sans);
  color: var(--color-carbon);
}

p {
  font-family: var(--font-eb-garamond);
}

/* Bring nav, buttons, tags, labels, small print back to the workspace font */
.navmenu, .navmenu a,
.header .btn-getstarted,
.hero .btn-get-started, .hero .btn-watch-video,
.about .read-more,
.call-to-action .cta-btn,
.footer, .footer .footer-links, .footer h4, .footer-about a,
.section-title p,
.services .service-item h4, .services .service-item p,
.work-process .steps-content h3, .work-process .steps-content p, .work-process .steps-features span,
.portfolio .portfolio-filters li, .portfolio .portfolio-overlay .project-type,
.portfolio .portfolio-overlay h4, .portfolio .portfolio-overlay p, .portfolio .project-tags span,
.portfolio .btn-view, .portfolio .btn-contact,
.team .team-member h4, .team .team-member span, .team .team-member p,
.pricing h3, .pricing ul, .pricing .buy-btn,
.faq-2 .faq-container h3,
.why-us .faq-container h3,
.why-us .content h3,
.contact .info-item h3, .contact .info-item p,
.page-title, .page-title h1, .page-title .breadcrumbs,
.service-details .services-list a, .service-details h3, .service-details h4, .service-details ul,
form label, .form-control, button,
.testimonials .testimonial-item h3, .testimonials .testimonial-item h4 {
  font-family: var(--font-fira-sans);
}

/* Radius cap — content elements never exceed 4px, except avatar-style photos */
.service-item, .steps-item, .portfolio-card, .portfolio-item, .portfolio-overlay,
.team-member, .pricing-item, .faq-item, .info-wrap, .php-email-form,
.form-control, input, textarea, .portfolio-info, .service-details .services-list,
.portfolio .project-tags span, .portfolio .portfolio-overlay .project-type {
  border-radius: var(--radius-md) !important;
}

/* ===== 3. Header / Nav ===== */
.header {
  --background-color: var(--color-paper);
  --heading-color: var(--color-carbon);
  border-bottom: 1px solid var(--color-fog);
}

.index-page .header,
.index-page.scrolled .header {
  --background-color: var(--color-paper);
  --heading-color: var(--color-carbon);
  --nav-color: var(--color-ink);
}

.header .logo h1 {
  font-family: var(--font-dm-serif-display);
  font-style: italic;
  color: var(--color-svelte-ember);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  font-size: 26px;
}

.header .logo-mark {
  width: auto;
  height: 30px;
  max-height: none;
  margin-right: 10px;
}

.navmenu a, .navmenu a:focus {
  font-family: var(--font-fira-sans);
  font-size: 14px;
  color: var(--color-ink);
  text-transform: none;
}

.navmenu li:hover > a,
.navmenu .active,
.navmenu .active:focus {
  color: var(--color-svelte-ember);
}

.mobile-nav-toggle {
  color: var(--color-ink) !important;
}

/* Header CTA -> arrow text link */
.header .btn-getstarted,
.header .btn-getstarted:focus {
  background: none;
  color: var(--color-svelte-ember);
  font-family: var(--font-fira-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
}

.header .btn-getstarted::after {
  content: " →";
  display: inline-block;
  transition: transform 0.25s ease;
}

.header .btn-getstarted:hover::after {
  transform: translateX(4px);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  background: none;
  color: var(--color-carbon);
}

/* ===== 4. Hero — full-viewport background image, editorial overlay ===== */
.hero,
.hero.dark-background {
  background-image: linear-gradient(100deg, rgba(20,20,20,0.82) 0%, rgba(20,20,20,0.55) 42%, rgba(20,20,20,0.15) 68%, rgba(20,20,20,0) 85%), url('../img/hero-img.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
  width: 100%;
  padding: 160px 0 100px 0 !important;
  display: flex;
  align-items: center;
  --background-color: transparent;
  --default-color: var(--color-paper);
  --heading-color: var(--color-paper);
}

.hero::before {
  display: none !important;
}

/* The original boxed hero image is no longer needed — the photo is now
   the full-bleed section background. */
.hero .hero-img {
  display: none !important;
}

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

.hero .row > div {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

.hero-brandmark {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.hero-brandmark-word {
  font-family: var(--font-dm-serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  color: var(--color-svelte-ember);
  letter-spacing: 0.2px;
}

.hero-brandmark-sub {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-fira-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-paper);
  opacity: 0.65;
}

.hero-brandmark-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  bottom: 1px;
  width: 1px;
  background: color-mix(in srgb, var(--color-paper), transparent 55%);
}

@media (max-width: 768px) {
  .hero-brandmark-word {
    font-size: 24px;
  }
  .hero-brandmark-sub {
    font-size: 11px;
    letter-spacing: 2px;
  }
}

.hero h1,
.hero.dark-background h1 {
  font-family: var(--font-dm-serif-display) !important;
  font-weight: 500;
  font-size: 54px;
  line-height: 1.2;
  color: var(--color-paper) !important;
  margin-bottom: 17px;
  max-width: 720px;
}

.hero p,
.hero.dark-background p {
  font-family: var(--font-eb-garamond);
  color: var(--color-paper) !important;
  opacity: 0.92;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.5;
  max-width: 560px;
}

.hero .hero-actions {
  gap: 40px;
  align-items: center;
}

.hero .btn-get-started {
  background: none;
  color: var(--color-svelte-ember);
  font-family: var(--font-fira-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 0;
  border-radius: 0;
}

.hero .btn-get-started i {
  color: var(--color-svelte-ember);
}

.hero .btn-get-started::after {
  content: " →";
  transition: transform 0.25s ease;
}

.hero .btn-get-started:hover::after {
  transform: translateX(4px);
}

.hero .btn-get-started:hover {
  background: none;
  color: var(--color-paper);
}

.hero .btn-watch-video {
  color: var(--color-paper);
  font-family: var(--font-fira-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hero .btn-watch-video i {
  color: var(--color-paper);
  font-size: 20px;
}

.hero .btn-watch-video:hover,
.hero .btn-watch-video:hover i {
  color: var(--color-svelte-ember);
}

.hero .animated {
  animation: none;
}

@media (max-width: 768px) {
  .hero {
    padding: 130px 0 60px 0 !important;
    background-image: linear-gradient(180deg, rgba(20,20,20,0.55) 0%, rgba(20,20,20,0.75) 100%), url('../img/hero-img.jpg') !important;
  }
  .hero h1 {
    font-size: 34px !important;
  }
  .hero p {
    font-size: 18px !important;
  }
}

/* ===== 5. Section titles — centered serif display headline ===== */
.section-title {
  padding-bottom: 40px;
}

.section-title h2 {
  font-family: var(--font-dm-serif-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.2;
  color: var(--color-carbon);
  text-transform: none;
  letter-spacing: normal;
  padding-bottom: 0;
  margin-bottom: 12px;
}

.section-title h2::before,
.section-title h2::after {
  display: none;
}

.section-title p {
  font-family: var(--font-eb-garamond);
  font-size: 18px;
  color: var(--color-slate);
}

section, .section {
  padding: 40px 0;
}

/* Diagonal duotone backdrop for plain sections (leaves .light-background
   and .dark-background sections on their own flat tokens) */
section:not(.light-background):not(.dark-background),
.section:not(.light-background):not(.dark-background) {
  background-image: var(--gradient-surface);
}

/* ===== 6. About / read-more arrow link ===== */
.about ul i {
  color: var(--color-svelte-ember);
}

.about .read-more {
  border: none;
  padding: 0;
  border-radius: 0;
  color: var(--color-svelte-ember);
  font-family: var(--font-fira-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about .read-more:hover {
  background: none;
  color: var(--color-carbon);
}

/* ===== 7. Why us / FAQ items — flat, hairline border, no shadow surface ===== */
.why-us .content h3 {
  font-family: var(--font-dm-serif-display);
  font-weight: 500;
  color: var(--color-carbon);
}

.why-us .faq-container .faq-item,
.faq-2 .faq-container .faq-item {
  background-color: var(--color-paper);
  border: 1px solid var(--color-fog);
}

.why-us .faq-container .faq-item h3 span,
.faq-2 .faq-container .faq-item h3 span {
  color: var(--color-svelte-ember);
}

/* ===== 8. Services — flat cards ===== */
.services .service-item {
  background-color: var(--color-paper);
  border: 1px solid var(--color-fog);
  transition: border-color 0.3s;
}

.services .service-item:hover {
  transform: none;
  border-color: var(--color-svelte-ember);
}

.services .service-item .icon i {
  color: var(--color-svelte-ember);
}

.services .service-item h4 a {
  color: var(--color-carbon);
}

.services .service-item:hover h4 a {
  color: var(--color-svelte-ember);
}

/* ===== 9. Work process — numbered sequence, flat cards ===== */
.work-process .steps-item {
  border-radius: var(--radius-md) !important;
  border: 1px solid var(--color-fog);
}

.work-process .steps-item:hover {
  transform: none;
}

.work-process .steps-content .steps-number {
  background: var(--color-svelte-ember);
  color: var(--color-paper);
  border-radius: 50%;
  font-family: var(--font-fira-sans);
}

.work-process .steps-features .feature-item i {
  color: var(--color-svelte-ember);
}

/* ===== 10. Call to action — flat editorial band ===== */
.call-to-action {
  padding: 100px 0;
}

.call-to-action:before {
  background: color-mix(in srgb, var(--color-ink), transparent 20%);
}

.call-to-action h3 {
  font-family: var(--font-dm-serif-display);
  font-weight: 500;
  font-size: 40px;
  color: var(--color-paper) !important;
}

.call-to-action p {
  color: var(--color-paper) !important;
  font-family: var(--font-eb-garamond);
}

.call-to-action .cta-btn {
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--color-paper);
  font-family: var(--font-fira-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.call-to-action .cta-btn::after {
  content: " →";
}

.call-to-action .cta-btn:hover {
  background: none;
  color: var(--color-svelte-ember);
  border: none;
}

/* ===== 11. Portfolio ===== */
.portfolio .portfolio-filters li {
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  border-radius: 0 !important;
  color: var(--color-slate);
  padding: 6px 4px;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  background: none;
  color: var(--color-carbon);
  border-bottom-color: var(--color-svelte-ember);
}

.portfolio .portfolio-card,
.portfolio .portfolio-item {
  background: var(--color-paper);
  border: 1px solid var(--color-fog);
}

.portfolio .portfolio-overlay,
.portfolio .portfolio-item .portfolio-info {
  background: var(--color-paper) !important;
}

.portfolio .portfolio-overlay .project-type {
  background: var(--color-fog);
  color: var(--color-ink);
}

.portfolio .project-tags span {
  border: 1px solid var(--color-fog);
  color: var(--color-slate);
}

.portfolio .portfolio-overlay .btn-view,
.portfolio .portfolio-info .btn-view {
  background: none;
  color: var(--color-svelte-ember);
  border-radius: 0 !important;
  padding: 0;
  font-family: var(--font-fira-sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.portfolio .portfolio-overlay .btn-view::after,
.portfolio .portfolio-info .btn-view::after {
  content: " →";
}

.portfolio .portfolio-overlay .btn-view:hover,
.portfolio .portfolio-info .btn-view:hover {
  background: none;
  color: var(--color-carbon);
}

.portfolio .portfolio-overlay .btn-contact {
  background: none;
  border: 1px solid var(--color-ink);
  color: var(--color-ink);
  border-radius: 0 !important;
  padding: 8px 16px;
  font-family: var(--font-fira-sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.portfolio .portfolio-overlay .btn-contact:hover {
  background: var(--color-ink);
  color: var(--color-paper);
}

/* ===== 12. Team ===== */
.team .team-member {
  background: var(--color-paper);
  border: 1px solid var(--color-fog);
}

.team .team-member:hover {
  transform: none;
}

.team .team-member .pic {
  border-radius: var(--radius-md);
}

.team .team-member span {
  color: var(--color-svelte-ember);
}

.team .team-member .social a {
  background: none;
  border: 1px solid var(--color-fog);
  border-radius: 50%;
}

.team .team-member .social a:hover {
  background: var(--color-svelte-ember);
  border-color: var(--color-svelte-ember);
}

/* ===== 13. Pricing ===== */
.pricing .pricing-item {
  background: var(--color-paper);
  border: 1px solid var(--color-fog);
  border-top: 1px solid var(--color-fog);
}

.pricing .pricing-item.featured {
  border-top: 2px solid var(--color-svelte-ember);
}

.pricing h4 {
  font-family: var(--font-dm-serif-display);
  color: var(--color-carbon);
  font-weight: 500;
}

.pricing .buy-btn {
  border: none;
  border-radius: 0 !important;
  padding: 0;
  color: var(--color-svelte-ember);
  font-family: var(--font-fira-sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing .buy-btn::after {
  content: " →";
}

.pricing .buy-btn:hover {
  background: none;
  color: var(--color-carbon);
}

.pricing .featured .buy-btn {
  background: none;
  color: var(--color-svelte-ember);
}

/* ===== 14. Testimonials ===== */
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: var(--color-svelte-ember);
}

.testimonials .testimonial-item p {
  font-family: var(--font-eb-garamond);
  font-size: 20px;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--color-svelte-ember);
}

/* ===== 15. Page title / breadcrumbs (inner pages) ===== */
.page-title {
  --background-color: var(--color-linen);
  background-image: var(--gradient-surface);
  border-bottom: 1px solid var(--color-fog);
  padding: 140px 0 30px 0;
}

.page-title h1 {
  font-family: var(--font-dm-serif-display);
  font-weight: 500;
  font-size: 40px;
  color: var(--color-carbon);
}

.page-title .breadcrumbs ol {
  font-family: var(--font-fira-sans);
  color: var(--color-slate);
}

.page-title .breadcrumbs ol li a {
  color: var(--color-slate);
}

.page-title .breadcrumbs ol .current {
  color: var(--color-svelte-ember);
}

/* ===== 16. Service details sidebar ===== */
.service-details .services-list {
  background: var(--color-paper);
  border: 1px solid var(--color-fog);
}

.service-details .services-list a {
  border-left: 2px solid var(--color-fog);
  color: var(--color-slate);
}

.service-details .services-list a.active,
.service-details .services-list a:hover {
  border-color: var(--color-svelte-ember);
  color: var(--color-carbon);
}

.service-details h3, .service-details h4 {
  font-family: var(--font-dm-serif-display);
  font-weight: 500;
  color: var(--color-carbon);
}

.service-details ul i {
  color: var(--color-svelte-ember);
}

/* ===== 17. Contact ===== */
.contact .info-wrap,
.contact .php-email-form {
  background: var(--color-paper);
  border: 1px solid var(--color-fog);
  border-top: 1px solid var(--color-fog);
  border-bottom: 1px solid var(--color-fog);
}

.contact .info-item i {
  color: var(--color-svelte-ember);
  background: var(--color-fog);
  border-radius: var(--radius-md);
}

.contact .info-item:hover i {
  background: var(--color-svelte-ember);
  color: var(--color-paper);
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea,
.php-email-form input[type=text],
.php-email-form input[type=email],
.php-email-form textarea {
  border: 1px solid var(--color-obsidian);
  border-radius: var(--radius-md) !important;
  background-color: var(--color-fog);
  font-family: var(--font-fira-sans);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--color-svelte-ember);
}

.contact .php-email-form button[type=submit],
.php-email-form button[type=submit] {
  background: none;
  color: var(--color-svelte-ember);
  border-radius: 0 !important;
  padding: 0;
  font-family: var(--font-fira-sans);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.contact .php-email-form button[type=submit]::after,
.php-email-form button[type=submit]::after {
  content: " →";
}

.contact .php-email-form button[type=submit]:hover,
.php-email-form button[type=submit]:hover {
  background: none;
  color: var(--color-carbon);
}

/* ===== 18. Footer ===== */
.footer {
  border-top: 1px solid var(--color-fog);
  background: var(--color-linen);
  background-image: var(--gradient-surface);
}

.footer .footer-about a .sitename {
  font-family: var(--font-dm-serif-display);
  color: var(--color-carbon);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  font-size: 26px;
}

.footer .footer-about a .sitename span {
  color: var(--color-svelte-ember) !important;
}

.footer h4 {
  font-family: var(--font-fira-sans);
  color: var(--color-carbon);
}

.footer .footer-links ul i,
.footer .footer-links ul a:hover {
  color: var(--color-svelte-ember);
}

.footer .social-links a {
  border: 1px solid var(--color-fog);
  color: var(--color-ink);
}

.footer .social-links a:hover {
  color: var(--color-svelte-ember);
  border-color: var(--color-svelte-ember);
}

.footer .copyright {
  border-top: 1px solid var(--color-fog);
  color: var(--color-slate);
  font-family: var(--font-fira-sans);
  font-size: 13px;
}

/* ===== 19. Floating utility buttons — flat, quiet ===== */
.scroll-top {
  background-color: var(--color-ink);
  border-radius: var(--radius-md);
}

.scroll-top:hover {
  background-color: var(--color-svelte-ember);
}

.whatsapp-float {
  box-shadow: none !important;
}

/* ===== 20. Preloader ===== */
#preloader {
  background: var(--color-paper);
}

#preloader:before {
  border-color: var(--color-svelte-ember) transparent var(--color-svelte-ember) transparent;
}

/* ===== 21b. Utility arrow-link class for inline CTAs across service/portfolio pages ===== */
.devmatrix-link {
  display: inline-block;
  background: none !important;
  color: var(--color-svelte-ember) !important;
  font-family: var(--font-fira-sans);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  transition: color 0.25s ease;
}

.devmatrix-link i {
  color: var(--color-svelte-ember) !important;
  transition: transform 0.25s ease;
}

.devmatrix-link:hover {
  color: var(--color-carbon) !important;
}

.devmatrix-link:hover i {
  transform: translateX(4px);
}

/* ===== 21. Sitename in nav (fallback if logo text used elsewhere) ===== */
.sitename {
  font-family: var(--font-dm-serif-display) !important;
}