/* =================================================

   1. BRAND SETTINGS

   Change a colour or font here and it changes everywhere.

================================================= */

:root {

  --navy: #0A1A2F;        /* main dark colour, headings and dark sections */

  --teal: #12A594;        /* brand colour, used for shapes and highlights */

  --teal-dark: #0F7471;   /* darker teal, safe to use for links and text */

  --teal-light: #7DCEC4;  /* light teal, used on dark backgrounds */

  --ice: #EEF4F3;         /* very pale teal, background of alternate sections */

  --white: #FFFFFF;

  --text: #2B3A50;        /* reading text, a softer navy */

  --line: #D5DFDE;        /* thin divider lines */



  --font-heading: 'Sora', 'Segoe UI', sans-serif;

  --font-body: 'Source Serif 4', Georgia, serif;

}





/* =================================================

   2. BASICS

================================================= */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

  /* when you click a menu link, stop the sticky menu from covering the heading */

  scroll-padding-top: 90px;

}



body {

  font-family: var(--font-body);

  font-size: 1.125rem;      /* 18px, comfortable for reading */

  line-height: 1.65;

  color: var(--text);

  background: var(--white);

}



img {

  max-width: 100%;

  height: auto;

  display: block;

}



h1, h2, h3 {

  font-family: var(--font-heading);

  font-weight: 600;

  color: var(--navy);

  line-height: 1.15;

  letter-spacing: -0.02em;

}



h1 { font-size: clamp(2.3rem, 5vw, 3.75rem); line-height: 1.08; }

h2 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin-bottom: 40px; }

h3 { font-size: 1.3rem; }



a {

  color: var(--teal-dark);

  text-underline-offset: 3px;

}



a:hover {

  color: var(--navy);

}



/* a clear ring when someone moves around with the keyboard */

:focus-visible {

  outline: 3px solid var(--teal);

  outline-offset: 3px;

  border-radius: 4px;

}



/* .wrap keeps content in a centred column with space at the sides */

.wrap {

  max-width: 1120px;

  margin: 0 auto;

  padding-left: 24px;

  padding-right: 24px;

}



/* .band gives every section the same space above and below */

.band {

  padding-top: 96px;

  padding-bottom: 96px;

}



.band-ice {

  background: var(--ice);

}



.band-navy {

  background: var(--navy);

  color: #D9E2E8;

}



.band-navy h2,

.band-navy h3 {

  color: var(--white);

}



.lead {

  font-size: 1.25rem;

  max-width: 34em;

}



.section-intro {

  max-width: 36em;

  margin-top: -16px;

  margin-bottom: 40px;

}



.small-note {

  font-size: 1rem;

  margin-top: 16px;

}



.skip-link {

  position: absolute;

  left: 16px;

  top: -60px;

  background: var(--navy);

  color: var(--white);

  padding: 10px 16px;

  border-radius: 8px;

  z-index: 100;

}



.skip-link:focus {

  top: 16px;

  color: var(--white);

}





/* =================================================

   3. BUTTONS AND LINKS

================================================= */

.btn {

  display: inline-block;

  font-family: var(--font-heading);

  font-weight: 600;

  font-size: 1rem;

  text-decoration: none;

  color: var(--white);

  background: var(--navy);

  padding: 15px 28px;

  border-radius: 10px;

  transition: background 0.2s ease;

}



.btn:hover {

  background: var(--teal-dark);

  color: var(--white);

}



.btn-small {

  padding: 11px 20px;

  font-size: 0.95rem;

}



.text-link {

  font-family: var(--font-heading);

  font-weight: 600;

  font-size: 1rem;

  color: var(--navy);

}





/* =================================================

   4. MENU BAR

   position: sticky keeps it at the top while you scroll.

================================================= */

.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  background: var(--white);

  border-bottom: 1px solid var(--line);

}



.header-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  min-height: 88px;
  height: auto;
  padding-block: 10px;

}



.logo-link {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.logo-link img,
.logo-link img.site-logo {
  display: block;
  width: 310px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}



.main-nav {

  display: flex;

  gap: 32px;

  margin-left: auto;

}



.main-nav a {

  font-family: var(--font-heading);

  font-weight: 500;

  font-size: 0.95rem;

  color: var(--navy);

  text-decoration: none;

}



.main-nav a:hover {

  text-decoration: underline;

}





/* =================================================

   5. HERO

   Two columns. Words on the left, crystal on the right.

================================================= */

.hero {

  padding-top: 80px;

  padding-bottom: 96px;

}



.hero-grid {

  display: grid;

  grid-template-columns: 1.25fr 1fr;

  gap: 64px;

  align-items: center;

}



.hero-text .lead {

  margin-top: 28px;

}



.hero-actions {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 28px;

  margin-top: 36px;

}



.hero-fact {

  margin-top: 40px;

  padding-top: 20px;

  border-top: 1px solid var(--line);

  font-size: 1rem;

  max-width: 34em;

}


.hero-panel {
  background: linear-gradient(180deg, #F7FAFF 0%, #EEF4FF 100%);
  border: 1px solid #E3EAF5;
  border-radius: 28px;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
}

.hero-crystal {
  display: block;
  width: min(82%, 420px);
  height: auto;
  object-fit: contain;
}


/* Espatika Digital - Animated AI Crystal */

.hero-crystal {
  display: block;
  width: min(82%, 420px);
  height: auto;
  object-fit: contain;

  animation: crystalFloat 5s ease-in-out infinite;
  will-change: transform;
  filter: drop-shadow(0 12px 22px rgba(47, 98, 210, 0.15));
}

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

  50% {
    transform: translateY(-14px);
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-crystal {
    animation: none;
    will-change: auto;
  }
}


/* Some people switch animations off on their device. Respect that. */

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

  html { scroll-behavior: auto; }

  .face { animation: none; opacity: 1; }

}





/* =================================================

   6. SERVICES

   Each service is a row. Name on the left, details on the right.

================================================= */

.service-row {

  display: grid;

  grid-template-columns: 1fr 2.2fr;

  gap: 48px;

  padding-top: 40px;

  padding-bottom: 40px;

  border-top: 1px solid var(--line);

}



.service-row:last-child {

  border-bottom: 1px solid var(--line);

}



.service-row h3 {

  font-size: 1.6rem;

}



.service-row p {

  max-width: 38em;

}



/* a list where each bullet is a small teal diamond, echoing the crystal */

.tick-list {

  list-style: none;

  margin-top: 20px;

}



.tick-list li {

  position: relative;

  padding-left: 26px;

  margin-bottom: 8px;

}



.tick-list li::before {

  content: "";

  position: absolute;

  left: 2px;

  top: 0.62em;

  width: 9px;

  height: 9px;

  background: var(--teal);

  transform: rotate(45deg);

}





/* =================================================

   7. WORK

================================================= */

.work-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 40px;

}



/* the box that holds a screenshot. It keeps its shape even before the image loads */

.work-shot {

  aspect-ratio: 4 / 3;

  background: var(--white);

  border: 1px solid var(--line);

  border-radius: 14px;

  overflow: hidden;

  margin-bottom: 20px;

}



.work-shot img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top;

  font-size: 0.9rem;   /* size of the alt text shown if the image is missing */

  padding: 0;

}



.work-item h3 {

  margin-bottom: 8px;

}



.work-item p {

  font-size: 1.05rem;

  margin-bottom: 10px;

}



.work-item a {

  font-size: 1rem;

}



.read-more-btn {

  display: block;

  background: none;

  border: 0;

  padding: 0;

  margin: 0 0 8px 0;



  font-family: var(--font-heading);

  font-size: 0.9rem;

  font-weight: 600;



  color: var(--teal-dark);

  cursor: pointer;

  text-decoration: underline;

  text-underline-offset: 3px;

}



.read-more-btn:hover {

  color: var(--navy);

}



.work-link {

  display: inline-block;

}



/* =================================================

   8. HOW WE WORK

   The numbers come from a CSS counter, so if you add

   or remove a step they renumber themselves.

================================================= */

.steps {

  list-style: none;

  counter-reset: step;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 36px;

}



.steps li {

  counter-increment: step;

  border-top: 2px solid var(--teal);

  padding-top: 20px;

}



.steps li::before {

  content: counter(step);

  display: block;

  font-family: var(--font-heading);

  font-weight: 600;

  font-size: 2.2rem;

  line-height: 1;

  color: var(--teal-light);

  margin-bottom: 16px;

}



.steps h3 {

  margin-bottom: 10px;

}



.steps p {

  font-size: 1.05rem;

}





/* =================================================

   9. PRICING

================================================= */

.pricing-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 56px;

}



.price-group h3 {

  padding-bottom: 16px;

  border-bottom: 2px solid var(--navy);

}



/* one package. Details on the left, price pushed to the right */

.price-row {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  gap: 24px;

  padding-top: 20px;

  padding-bottom: 20px;

  border-bottom: 1px solid var(--line);

}



.price-name {

  font-family: var(--font-heading);

  font-weight: 600;

  color: var(--navy);

  font-size: 1.05rem;

}



.price-detail {

  font-size: 1rem;

}



.price-amount {

  font-family: var(--font-heading);

  font-weight: 600;

  font-size: 1.3rem;

  color: var(--navy);

  white-space: nowrap;

}





/* =================================================

   10. TESTIMONIALS (only used if you switch the section on)

================================================= */

.quote-grid {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 48px;

}



.quote blockquote {

  font-size: 1.3rem;

  line-height: 1.5;

  color: var(--navy);

  border-left: 3px solid var(--teal);

  padding-left: 24px;

}



.quote figcaption {

  font-family: var(--font-heading);

  font-size: 0.95rem;

  margin-top: 16px;

  padding-left: 27px;

}





/* =================================================

   11. CONTACT

================================================= */

.contact-grid {

  display: grid;

  grid-template-columns: 1.4fr 1fr;

  gap: 64px;

  align-items: start;

}



.contact-grid h2 {

  margin-bottom: 24px;

}



.contact-grid .btn {

  margin-top: 32px;

}



.contact-details {

  font-style: normal;   /* the address tag is italic by default */

  border-top: 2px solid var(--navy);

}



.contact-details p {

  padding-top: 18px;

  padding-bottom: 18px;

  border-bottom: 1px solid var(--line);

}



.contact-label {

  display: block;

  font-family: var(--font-heading);

  font-size: 0.85rem;

  font-weight: 500;

  color: var(--navy);

}





/* =================================================

   12. FOOTER

================================================= */

.site-footer {

  background: var(--navy);

  color: #B9C6D0;

  padding-top: 40px;

  padding-bottom: 40px;

}



.footer-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 24px;

}



.footer-row img {

  height: 32px;

  width: auto;

}



.footer-nav {

  display: flex;

  gap: 28px;

}



.footer-nav a {

  font-family: var(--font-heading);

  font-size: 0.9rem;

  color: var(--white);

  text-decoration: none;

}



.footer-nav a:hover {

  text-decoration: underline;

}



.copyright {

  font-size: 0.9rem;

}





/* =================================================

   13. PHONES AND TABLETS

   Below 860px wide, everything that sat side by side stacks up.

================================================= */

@media (max-width: 860px) {

  body { font-size: 1.0625rem; }



  .band {

    padding-top: 64px;

    padding-bottom: 64px;

  }



  h2 { margin-bottom: 28px; }



  /* hide the text links, keep the logo and the button */

  .main-nav { display: none; }



  .hero {

    padding-top: 48px;

    padding-bottom: 64px;

  }



  .hero-grid,

  .service-row,

  .work-grid,

  .pricing-grid,

  .quote-grid,

  .contact-grid {

    grid-template-columns: 1fr;

  }



  .hero-grid { gap: 48px; }


.hero-panel {
  aspect-ratio: 16 / 10;
  border-radius: 20px;
  padding: 24px;
}

.hero-crystal {
  width: min(52%, 240px);
}


  .service-row { gap: 16px; }



  .steps { grid-template-columns: repeat(2, 1fr); }



  .footer-row {

    flex-direction: column;

    align-items: flex-start;

  }

}



@media (max-width: 520px) {

  .steps { grid-template-columns: 1fr; }



  .logo-link img,
  .logo-link img.site-logo {
    width: 205px;
    height: auto;
  }

}



/* Final logo size controls */
@media (max-width: 860px) {
  .header-row { min-height: 76px; gap: 12px; }
  .logo-link img, .logo-link img.site-logo { width: 235px; height: auto; }
  .header-row .btn-small { padding: 9px 12px; font-size: 0.82rem; }
}

@media (max-width: 520px) {
  .logo-link img, .logo-link img.site-logo { width: 205px; height: auto; }
}


/* Crystal PNG used by the updated hero HTML */
.hero-crystal {
  display: block;
  width: min(74%, 370px);
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}
@media (max-width: 860px) {
  .hero-crystal { width: min(50%, 270px); }
}



/* Espatika Digital WhatsApp Button */

.whatsapp-btn {
  display: inline-block;
  background: #16803c;
  color: #ffffff;
  padding: 10px 20px;
  margin-top: 8px;
  border-radius: 8px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  font-style: normal;
  text-decoration: none;
  transition: background 0.2s ease;
}

.whatsapp-btn:hover,
.whatsapp-btn:focus-visible {
  background: #11632e;
  color: #ffffff;
}



/* Compact Espatika Digital contact details */

.contact-details.contact-compact {
  display: grid;
  gap: 10px;
  border-top: none;
  font-style: normal;
}

.contact-compact .contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 0;
  min-height: 42px;
  color: var(--navy);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-compact a.contact-item:hover {
  color: var(--teal-dark);
}

.contact-compact .contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #E4F4F6;
  color: #087D88;
  font-family: Arial, sans-serif;
  font-size: 19px;
  font-weight: 700;
}

.contact-compact a[href*="wa.me"] .contact-icon {
  background: #E0F6E8;
  color: #16803C;
}

@media (max-width: 520px) {
  .contact-compact .contact-item {
    font-size: 0.9rem;
    gap: 10px;
    padding: 5px 0;
  }
}

/* ==========================================
   ESPATIKA DIGITAL - PREMIUM CONTACT
========================================== */

.digital-contact {
  background: #0A1A2F;
  padding: 65px 0;
  color: #FFFFFF;
}

.digital-contact-inner {
  max-width: 760px;
  margin: 0 auto;
}

/* Upper tagline */

.contact-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.3px;
  color: #83DDE6;
  margin-bottom: 18px;
}

.contact-dot {
  width: 7px;
  height: 7px;
  background: #22C7CE;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Heading */

.digital-contact h2 {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 600;
  color: #FFFFFF;
  margin-bottom: 14px;
}

/* Description */

.contact-description {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.8;
  color: #CBD8E5;
  max-width: 540px;
  margin-bottom: 25px;
}

/* WhatsApp CTA */

.contact-whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 13px 20px;
  background: #FFFFFF;
  color: #0A1A2F;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 9px;
  transition: background 0.2s ease,
              transform 0.2s ease;
}

.contact-whatsapp-button:hover {
  background: #E8F5F7;
  color: #0A1A2F;
  transform: translateY(-2px);
}

/* Email */

.contact-email-text {
  margin-top: 17px;
  font-family: var(--font-heading);
  font-size: 13px;
  color: #B8CAD9;
}

.contact-email-text a {
  color: #D8EAFF;
  text-decoration: none;
}

.contact-email-text a:hover {
  color: #83DDE6;
  text-decoration: underline;
}

/* Bottom row */

.contact-bottom {
  margin-top: 35px;
  padding-top: 22px;
  border-top: 1px solid #34465D;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* Social icons */

.contact-social-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.contact-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #A8D2F6;
  text-decoration: none;
  transition: color 0.2s ease,
              transform 0.2s ease;
}

.contact-social-links a:first-child {
  color: #C9A4FF;
}

.contact-social-links a:hover {
  color: #FFFFFF;
  transform: translateY(-2px);
}

.contact-social-links svg {
  width: 20px;
  height: 20px;
}

/* Location */

.contact-location {
  font-family: var(--font-heading);
  font-size: 12px;
  color: #ACBDD0;
}

/* Mobile responsiveness */

@media (max-width: 600px) {

  .digital-contact {
    padding: 48px 0;
  }

  .digital-contact h2 {
    font-size: 25px;
  }

  .contact-description {
    font-size: 14px;
  }

  .contact-tagline {
    font-size: 10px;
    letter-spacing: 0.7px;
  }

  .contact-whatsapp-button {
    font-size: 13px;
    padding: 12px 17px;
  }

  .contact-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 28px;
  }

  .contact-location {
    font-size: 12px;
  }
}

/* Wider, balanced contact section */

.digital-contact-inner {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.contact-description {
  max-width: 620px;
}

@media (max-width: 600px) {
  .digital-contact-inner {
    max-width: 100%;
  }
}