/* Give the process section three distinct cards instead of one ruled row */
#approach .approach-grid {
  gap: clamp(12px, 1.5vw, 20px);
  border: 0 !important;
  align-items: stretch;
}
#approach .approach-card {
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
  padding: clamp(22px, 2.2vw, 32px);
}
#approach .approach-card .step { display: none !important; }
#approach .approach-card h3 { margin-top: 0; }

/* Make each project card's location and details land consistently */
#experience .project {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 320px;
}
#experience .project::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(12,14,14,.35) 0%, transparent 35%, transparent 44%, rgba(12,14,14,.74) 100%);
}
#experience .project .project-photo-link { position: absolute; inset: 0; z-index: 0; }
#experience .project .project-photo { width: 100%; height: 100%; object-fit: cover; }
#experience .project .project-meta {
  position: absolute !important;
  z-index: 2;
  top: 18px;
  left: 20px;
  color: #fff !important;
  text-shadow: 0 1px 7px rgba(0,0,0,.65);
}
#experience .project > div {
  position: absolute !important;
  z-index: 2;
  left: 20px;
  right: 20px;
  bottom: 18px;
}
#experience .project h3 {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 1.7vw, 1.65rem);
  line-height: 1.12;
}

/* Keep the page clear of the floating contact bubble */
.scroll-contact { display: none !important; }

@media (max-width: 960px) {
  #experience .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #approach .approach-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  #experience .project-grid { grid-template-columns: 1fr; }
  #experience .project { min-height: 300px; }
  #experience .project > div { left: 18px; right: 18px; bottom: 16px; }
  #experience .project .project-meta { left: 18px; top: 16px; }
  #approach .approach-grid { gap: 12px; }
}

/* Keep the header menu as the main route to Services and Contact */
#main-content .hero-actions { display: none !important; }

/* Give the Nexra mark a little more presence in the header */
.site-header .brand img { width: 156px !important; height: 108px !important; object-fit: contain; }
@media (max-width: 640px) {
  .site-header .brand img { width: 132px !important; height: 92px !important; }
}

/* Compact floating contact pill; hide it on narrower grids so it never covers project photos */
.scroll-contact {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  width: auto !important;
  min-width: 116px;
  height: 42px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  background: #ed8b11 !important;
  color: #111 !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transform: none !important;
  z-index: 1000;
}
.scroll-contact-ring { display: none !important; }
.scroll-contact::before { content: "Talk to us"; font: 600 13px/1 Arial, sans-serif; white-space: nowrap; }
.scroll-contact .scroll-contact-arrow { display: inline-block; font-size: 16px; line-height: 1; }
@media (max-width: 960px) {
  .scroll-contact { display: none !important; }
}

/* Match the supplied logo reference at the top and bottom; retain the existing artwork colours */
.site-header .brand img,
.footer-brand img { width: 279px !important; height: 218px !important; object-fit: fill; max-width: none; }
@media (max-width: 640px) {
  .site-header .brand img,
  .footer-brand img { width: 160px !important; height: 125px !important; }
}

/* Keep the full-size header logo visible and let gallery cards paint above the floating pill */
.site-header .header-inner { height: 218px !important; min-height: 218px !important; }
#experience .project-grid { position: relative; z-index: 29; }
.scroll-contact { z-index: 28 !important; }
@media (max-width: 640px) {
  .site-header .header-inner { height: 125px !important; min-height: 125px !important; }
}

/* Slightly reduce matching header and footer logos while keeping their colours */
.site-header .brand img,.footer-brand img { width:230px!important;height:180px!important; }
.site-header .header-inner { height:180px!important;min-height:180px!important; }
@media(max-width:640px) {
  .site-header .brand img,.footer-brand img { width:145px!important;height:113px!important; }
  .site-header .header-inner { height:113px!important;min-height:113px!important; }
}


/* 5% smaller logo sizing adjustment */
.site-header .brand img,.footer-brand img { width:218px!important;height:171px!important; }
.site-header .header-inner { height:171px!important;min-height:171px!important; }
@media(max-width:640px) {
  .site-header .brand img,.footer-brand img { width:138px!important;height:107px!important; }
  .site-header .header-inner { height:107px!important;min-height:107px!important; }
}


/* Align the contact copy and make both contact links a consistent width */
#contact .contact-grid { align-items:center; }
#contact .contact-links { width:min(100%,380px); justify-self:end; align-self:center; display:grid; gap:0; }
#contact .contact-links a { display:block; width:100%; box-sizing:border-box; padding:14px 0 12px; border-bottom:1px solid rgba(0,0,0,.24); text-align:left; }
#contact .contact-links a:first-child { border-top:1px solid rgba(0,0,0,.24); }
#contact .contact-links a small { white-space:nowrap; }
@media(max-width:800px) {
  #contact .contact-grid { grid-template-columns:1fr; align-items:start; gap:24px; }
  #contact .contact-links { justify-self:start; align-self:start; width:min(100%,420px); }
}


/* Match the email label and address, and remove contact dividers */
#contact .contact-links { gap:16px; }
#contact .contact-links a,
#contact .contact-links a:first-child { border:0!important; padding:0; font-size:17px; font-weight:600; line-height:1.5; }
#contact .contact-links a small { font-size:inherit!important; font-weight:inherit!important; line-height:inherit; vertical-align:baseline; white-space:nowrap; }


/* Replace the floating contact button with a subtle scroll-driven Nexra seal */
.scroll-contact { display: none !important; }
@media (min-width: 961px) {
  body::after {
    content: "THE WIFI\A GURUS";
    white-space: pre;
    position: fixed;
    right: 18px;
    top: calc(50% - 42px);
    z-index: 27;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid rgba(17, 18, 17, .72);
    border-radius: 50%;
    background: #f5f4ef;
    color: #111211;
    box-shadow: inset 0 0 0 5px #f5f4ef, inset 0 0 0 6px rgba(17, 18, 17, .18);
    text-align: center;
    font: 700 9px/1.5 inherit;
    letter-spacing: .12em;
    pointer-events: none;
    transform: rotate(0deg);
  }
  @supports (animation-timeline: scroll(root block)) {
    body::after {
      animation: nexra-guru-scroll-spin 1s linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 100%;
    }
  }
}
@keyframes nexra-guru-scroll-spin {
  to { transform: rotate(720deg); }
}
@media (prefers-reduced-motion: reduce) {
  body::after { animation: none !important; }
}

@media (min-width: 961px) { body::after { font-family: inherit; font-size: 9px; font-weight: 700; line-height: 1.5; } }

/* Keep the words upright while the outer ring follows the page scroll */
@media (min-width: 961px) {
  body::after { animation: none !important; }
  body::before {
    content: "";
    position: fixed;
    right: 18px;
    top: calc(50% - 42px);
    z-index: 26;
    width: 84px;
    height: 84px;
    box-sizing: border-box;
    border: 1px dashed rgba(17, 18, 17, .58);
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(0deg);
  }
  @supports (animation-timeline: scroll(root block)) {
    body::before {
      animation: nexra-guru-scroll-spin 1s linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 100%;
    }
  }
}
@media (prefers-reduced-motion: reduce) { body::before { animation: none !important; } }

/* Keep the rotating seal in the hero so it never covers project photos */
@media (min-width: 961px) {
  body::before, body::after { content: none !important; display: none !important; }
  .hero-inner { position: relative; }
  .hero-inner::before {
    content: "THE WIFI\A GURUS";
    white-space: pre;
    position: absolute;
    top: calc(50% - 42px);
    right: -122px;
    z-index: 3;
    width: 84px;
    height: 84px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid rgba(17, 18, 17, .72);
    border-radius: 50%;
    background: #f5f4ef;
    color: #111211;
    box-shadow: inset 0 0 0 5px #f5f4ef, inset 0 0 0 6px rgba(17, 18, 17, .18);
    text-align: center;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .12em;
    pointer-events: none;
  }
  .hero-inner::after {
    content: "";
    position: absolute;
    top: calc(50% - 42px);
    right: -122px;
    z-index: 4;
    width: 84px;
    height: 84px;
    box-sizing: border-box;
    border: 1px dashed rgba(17, 18, 17, .58);
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(0deg);
  }
  @supports (animation-timeline: scroll(root block)) {
    .hero-inner::after {
      animation: nexra-guru-scroll-spin 1s linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 100%;
    }
  }
}
@media (prefers-reduced-motion: reduce) { .hero-inner::after { animation: none !important; } }

/* Compact hero seal on phones, clear of the hero copy and project cards */
@media (max-width: 960px) {
  .hero-inner { position: relative; }
  .hero-inner::before {
    content: "THE WIFI\A GURUS";
    white-space: pre;
    position: absolute;
    top: auto;
    right: 0;
    bottom: -68px;
    z-index: 3;
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    box-sizing: border-box;
    border: 1px solid rgba(17, 18, 17, .72);
    border-radius: 50%;
    background: #f5f4ef;
    color: #111211;
    box-shadow: inset 0 0 0 4px #f5f4ef, inset 0 0 0 5px rgba(17, 18, 17, .18);
    text-align: center;
    font-family: inherit;
    font-size: 7px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .08em;
    pointer-events: none;
  }
  .hero-inner::after {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: -68px;
    z-index: 4;
    width: 64px;
    height: 64px;
    box-sizing: border-box;
    border: 1px dashed rgba(17, 18, 17, .58);
    border-radius: 50%;
    pointer-events: none;
    transform: rotate(0deg);
  }
  @supports (animation-timeline: scroll(root block)) {
    .hero-inner::after {
      animation: nexra-guru-scroll-spin 1s linear both;
      animation-timeline: scroll(root block);
      animation-range: 0% 100%;
    }
  }
}
@media (prefers-reduced-motion: reduce) { .hero-inner::after { animation: none !important; } }


/* Curved “The Wi-Fi Gurus!” lettering rotates with page scroll */
@media (min-width: 961px) {
  .hero-inner::before {
    content: "" !important;
    top: calc(50% - 75px) !important;
    right: -155px !important;
    width: 150px !important;
    height: 150px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cpath%20id%3D%22ring%22%20d%3D%22M50%2050%20m-41%200%20a41%2041%200%201%201%2082%200%20a41%2041%200%201%201%20-82%200%22%2F%3E%3C%2Fdefs%3E%3Ctext%20fill%3D%22%23171715%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227.2%22%20font-weight%3D%22500%22%20letter-spacing%3D%221.25%22%3E%3CtextPath%20href%3D%22%23ring%22%20startOffset%3D%2250%25%22%20text-anchor%3D%22middle%22%3ETHE%20WI-FI%20GURUS!%20%E2%80%A2%20THE%20WI-FI%20GURUS!%20%E2%80%A2%3C%2FtextPath%3E%3C%2Ftext%3E%3C%2Fsvg%3E") center / contain no-repeat !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    transform: rotate(0deg);
    animation: none;
    pointer-events: none;
  }
  .hero-inner::after { content: none !important; display: none !important; }
  @supports (animation-timeline: scroll(root block)) {
    .hero-inner::before { animation: nexra-guru-scroll-spin 1s linear both; animation-timeline: scroll(root block); animation-range: 0% 100%; }
  }
}
@media (max-width: 960px) {
  .hero-inner::before {
    content: "" !important;
    top: auto !important;
    right: 0 !important;
    bottom: -78px !important;
    width: 86px !important;
    height: 86px !important;
    display: block !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cdefs%3E%3Cpath%20id%3D%22ring%22%20d%3D%22M50%2050%20m-41%200%20a41%2041%200%201%201%2082%200%20a41%2041%200%201%201%20-82%200%22%2F%3E%3C%2Fdefs%3E%3Ctext%20fill%3D%22%23171715%22%20font-family%3D%22Georgia%2Cserif%22%20font-size%3D%227.2%22%20font-weight%3D%22500%22%20letter-spacing%3D%221.25%22%3E%3CtextPath%20href%3D%22%23ring%22%20startOffset%3D%2250%25%22%20text-anchor%3D%22middle%22%3ETHE%20WI-FI%20GURUS!%20%E2%80%A2%20THE%20WI-FI%20GURUS!%20%E2%80%A2%3C%2FtextPath%3E%3C%2Ftext%3E%3C%2Fsvg%3E") center / contain no-repeat !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    transform: rotate(0deg);
    animation: none;
    pointer-events: none;
  }
  .hero-inner::after { content: none !important; display: none !important; }
  @supports (animation-timeline: scroll(root block)) {
    .hero-inner::before { animation: nexra-guru-scroll-spin 1s linear both; animation-timeline: scroll(root block); animation-range: 0% 100%; }
  }
}
@media (prefers-reduced-motion: reduce) { .hero-inner::before { animation: none !important; } }

@media (min-width: 961px) { .hero-inner::before { right: -100px !important; } }

/* Remove the rotating hero badge */
.hero-inner::before, .hero-inner::after, body::before, body::after { content: none !important; display: none !important; }
.scroll-contact { display: none !important; }


/* Match the service cards to the approach-card rhythm while keeping their palette */
#services .service-card { border-radius: 8px; padding: clamp(22px, 2.2vw, 32px); }
#services .service-card .service-number { display: block; margin: 0 0 14px !important; font-size: 0 !important; line-height: 1.2; letter-spacing: .14em; }
#services .service-card .service-number::after { font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: inherit; }
#services .service-card:nth-of-type(1) .service-number::after { content: "PLAN"; }
#services .service-card:nth-of-type(2) .service-number::after { content: "DEPLOY"; }
#services .service-card:nth-of-type(3) .service-number::after { content: "SUPPORT"; }
#services .service-card h3 { margin: 0 0 8px !important; font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 1.1; }
@media (max-width: 640px) { #services .service-card h3 { font-size: 26px; } }


/* Simplify and balance the footer */
.site-footer .footer-meta > a { display: none !important; }
.site-footer .footer-meta { flex: 1; align-items: center; justify-content: center; text-align: center; }
.site-footer .footer-meta .copyright { display: block; margin: 0; text-align: center; }
@media (max-width: 640px) {
  .site-footer .footer-inner { flex-direction: column; gap: 16px; }
  .site-footer .footer-meta { width: 100%; justify-content: center; }
}


/* Anchor the copyright at the footer bottom-right */
.site-footer .footer-inner { position: relative; }
.site-footer .footer-meta { position: absolute; right: 0; bottom: 0; width: auto; flex: initial; justify-content: flex-end; }
.site-footer .footer-meta .copyright { text-align: right; }
@media (max-width: 640px) {
  .site-footer .footer-meta { position: relative; right: auto; bottom: auto; width: 100%; align-self: stretch; justify-content: flex-end; }
}


/* Align the copyright with the logo tagline */
@media (min-width: 641px) { .site-footer .footer-meta { bottom: 24px; } }