/* Homepage sections added Nov 2026: hero caption, trusted brands marquee,
   opportunities, services card refresh, FAQ, and booking.
   Ported from homepage.css; selectors use the live site's class names and are
   scoped so existing sections (featured projects, testimonials, process,
   about, gallery) keep their original styling. */
:root {
  --home-ink: #171e29;
  --home-violet: #282eed;
  --home-lilac: #c7cbef;
}
/* CSS smooth scrolling breaks GSAP ScrollTrigger's re-measure after the browser
   restores a scroll position (reload / back button mid-page): the process line's
   start was recorded thousands of px too high, so it showed fully filled early.
   Nav links and back-to-top still scroll smoothly via script.js. */
html { scroll-behavior: auto; }

#trusted-brands,
#business-opportunities,
#faq-section,
#start-your-project { scroll-margin-top: 3rem; }

.home-gradient-heading {
  margin: 0;
  background: linear-gradient(100deg, #d5d8eb, #848be1);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: clamp(3.6rem, 3.34vw, 6.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.06;
}
.home-gradient-heading em { font-family: "Times New Roman", Georgia, serif; font-weight: 400; font-size: 1.12em; }
.home-faq-item summary:focus-visible {
  outline: 3px solid #9da8ff;
  outline-offset: 6px;
}

/* Hero: new two-paragraph caption; trusted brands sit right below the heading. */
.elementor-zandro-website .elementor-hero-section { min-height: 0; }
.elementor-zandro-website .elementor-hero-section .elementor-background-overlay { background-position: center top; }
.elementor-zandro-website .elementor-hero-container { padding-bottom: clamp(2.4rem, 2.1vw, 4rem); }
.elementor-zandro-website .elementor-hero-kicker {
  width: min(71.3rem, 100%);
  margin-inline: auto;
  padding-inline: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 2rem;
  text-align: center;
  overflow-wrap: break-word;
  color: #fff;
}
.elementor-zandro-website .elementor-hero-kicker p { margin: 0; }
.elementor-zandro-website .elementor-hero-heading { padding-bottom: 0; }

/* Trusted brands marquee (reuses the featured-strip classes, scoped here). */
.elementor-zandro-website .elementor-trusted-brands {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.8rem;
  padding: 4rem var(--page-gutter) 4.8rem;
  margin: 0;
  background: #160f0f;
}
.elementor-trusted-brands .elementor-featured-heading-title { font: italic 1.8rem/2.6rem "Times New Roman", serif; white-space: normal; }
.brand-strip { width: min(100%, 121.6rem); padding: 1.7rem 0; overflow: hidden; border-radius: 2.4rem; background: #514d4b; }
.elementor-trusted-brands .elementor-featured-marquee { width: 100%; mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.elementor-trusted-brands .elementor-featured-marquee-track { animation: home-brand-scroll 32s linear infinite; }
.elementor-trusted-brands .elementor-featured-logo-list { flex-shrink: 0; gap: 0; padding: 0; }
.elementor-trusted-brands .elementor-featured-logo-item { flex: 0 0 20.3rem; height: 4.8rem; margin: 0; padding: 0 3rem; }
.elementor-trusted-brands .elementor-featured-logo-item img { display: block; width: auto; height: auto; max-width: 14rem; max-height: 4.8rem; object-fit: contain; aspect-ratio: auto; border-radius: 0; }
.elementor-trusted-brands .elementor-featured-marquee:hover .elementor-featured-marquee-track { animation-play-state: running; }
@keyframes home-brand-scroll { to { transform: translateX(-50%); } }

/* The closed mobile menu waits just off-screen; its drop shadow bled onto the new
   white sections, so only cast it while the menu is open. */
.e-off-canvas:not(.e-open) .e-off-canvas__main { box-shadow: none; }

/* The featured-projects strip no longer follows the hero, so drop its hero overlap. */
#elementor-featured-projects { margin-top: 0; }

/* Is your website costing you business opportunities? */
.home-opportunities {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 65.5rem) minmax(0, 1fr);
  align-items: center;
  gap: clamp(4rem, 5vw, 10rem);
  padding: clamp(7rem, 7vw, 13.5rem) 0 clamp(7rem, 8vw, 15rem) max(var(--page-gutter), calc((100% - 146rem) / 2));
  background: #121114;
  overflow: hidden;
}
.opportunity-copy { max-width: 65.5rem; }
.opportunity-copy h2 { margin-bottom: 3.2rem; }
.opportunity-copy p { margin-bottom: 1.6rem; color: #b7bcc4; font-size: 1.7rem; line-height: 1.48; }
.opportunity-copy p:last-child { margin-top: 3.2rem; margin-bottom: 0; }
.opportunity-benefits { list-style: none; display: grid; gap: .8rem; margin-top: 3rem; }
.opportunity-benefits li { display: flex; align-items: flex-start; gap: .9rem; font-size: 1.7rem; line-height: 1.48; font-weight: 700; }
.opportunity-benefits img { flex-shrink: 0; margin-top: .3rem; }
.opportunity-gallery { display: grid; gap: .9rem; min-width: 0; overflow: hidden; padding-block: 2rem; }
.opportunity-row { display: flex; width: max-content; gap: .9rem; transform: translate3d(calc(50px + var(--row-shift, 0px)), 0, 0); will-change: transform; }
.opportunity-row:nth-child(2) { transform: translate3d(var(--row-shift, 0px), 0, 0); }
.opportunity-row img { flex: 0 0 auto; width: clamp(19rem, 13.44vw, 25.8rem); height: clamp(14.3rem, 10.1vw, 19.4rem); object-fit: cover; border-radius: .8rem; }
/* Floating magnifier preview created by homepage-sections.js; lives outside the gallery so its overflow can't clip it. */
.opportunity-zoom { position: fixed; top: 0; left: 0; z-index: 9; pointer-events: none; will-change: transform; }
.opportunity-zoom img { display: block; width: 100%; height: 100%; border-radius: 1.2rem; box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; transform: scale(.92); transition: opacity .3s ease-out, transform .3s cubic-bezier(.22, 1, .36, 1); }
.opportunity-zoom.is-open img { opacity: 1; transform: none; }

/* Boost your conversions (services) — now follows the opportunities section. */
.elementor-zandro-website .elementor-services-section { padding-top: clamp(7rem, 5.6vw, 10.8rem); }
.elementor-zandro-website .elementor-services-eyebrow { display: none; }
.elementor-zandro-website .elementor-services-heading-title { margin-top: 0; max-width: 80rem; }
.elementor-zandro-website .elementor-services-card { background: linear-gradient(#303748, #1b202d); border: 2px solid #3c4458; }
.elementor-zandro-website .elementor-services-card::before { display: none; }
.elementor-zandro-website .elementor-services-card-title { max-width: none; text-wrap: balance; }
.elementor-zandro-website .elementor-services-card-text { line-height: 1.5; overflow-wrap: break-word; text-wrap: pretty; }
@media (min-width: 86.01rem) {
  /* Equal title heights keep body copy aligned across the 3-column row */
  .elementor-zandro-website .elementor-services-card-title { min-height: calc(3 * 1.12em); }
}

/* FAQ */
.home-faq { padding: clamp(8rem, 8.7vw, 16.8rem) var(--page-gutter) 7.4rem; background: #fff; color: var(--home-ink); }
.home-faq h2 { text-align: center; font-size: clamp(3.2rem, 3.125vw, 6rem); line-height: 1.2; margin-bottom: clamp(5rem, 5.8vw, 11rem); }
.home-faq-list { width: min(89.6rem, 100%); margin: 0 auto; }
.home-faq-item { position: relative; border-bottom: 1px solid #e8eaf0; }
.home-faq-item summary { list-style: none; display: grid; grid-template-columns: 2.3rem 1fr 2.3rem; gap: 1.4rem; align-items: start; padding: 3.2rem 0; font-size: 2.4rem; font-weight: 700; line-height: 1.34; color: #65738d; cursor: pointer; transition: color .35s ease; }
.home-faq-item summary:hover,
.home-faq-item summary:focus-visible { color: var(--home-ink); }
.home-faq-item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--home-ink); transform: scaleX(0); transform-origin: center; transition: transform .5s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.home-faq-item:has(summary:hover)::after,
.home-faq-item:has(summary:focus-visible)::after { transform: scaleX(1); }
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item[open] summary { color: var(--home-ink); padding-bottom: 2rem; }
.faq-number { font-size: 1.4rem; font-weight: 400; line-height: 3.2rem; }
.faq-symbol { font-size: 2.4rem; font-weight: 400; text-align: center; }
.faq-symbol::before { content: "+"; }
.home-faq-item[open] .faq-symbol::before { content: "×"; }
.home-faq-item > p { padding: 0 3.7rem 3.2rem; color: #66738a; font-size: 1.6rem; line-height: 1.7; }
.home-faq-item > p:has(+ ol) { padding-bottom: 1.2rem; }
.home-faq-item > ol { margin: 0 3.7rem 1.6rem; padding-left: 2rem; color: #66738a; font-size: 1.6rem; line-height: 1.7; list-style: decimal; }
.home-faq-item > ol li + li { margin-top: .6rem; }
.faq-price { font-weight: 550; color: var(--home-ink); }

/* Start your project (Calendly) */
.home-booking { background: white; padding: 0 var(--page-gutter) clamp(8rem, 8vw, 15rem); color: #202124; }
.booking-panel { width: min(136rem, 100%); margin-inline: auto; padding: clamp(3rem, 4.2vw, 8rem) clamp(2.4rem, 4vw, 8rem); display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(3rem, 5vw, 9rem); background: #e6e4e8; border-radius: 1.6rem; }
.booking-badge { display: inline-flex; align-items: center; gap: .6rem; border-radius: 10rem; background: #cdd0d9; color: #405b70; padding: .6rem 1.2rem; font-size: 1.4rem; }
.booking-badge span { width: .6rem; height: .6rem; background: #506e84; border-radius: 50%; }
.booking-intro h2 { font-size: clamp(3.4rem, 2.4vw, 4.6rem); font-weight: 400; line-height: 1.25; margin: 2.9rem 0 1.3rem; color: #263640; }
.booking-intro > p:not(.booking-badge) { font-size: 1.5rem; line-height: 1.6; }
.booking-proof { display: flex; align-items: center; gap: 1.2rem; margin-top: 2.8rem; }
.booking-portraits { display: flex; padding-left: .8rem; flex-shrink: 0; }
.booking-portraits img { display: block; object-fit: cover; border-radius: 50%; border: 2px solid #e6e4e8; margin-left: -.8rem; }
.booking-proof p { color: #506e84; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: clamp(1.4rem, 1.2rem + .390625vw, 1.6rem); font-weight: 400; line-height: 1.4; }
.booking-proof p span { display: block; margin-top: .2rem; color: #99a7b6; font-size: .8125em; }
.booking-calendar { min-width: 0; }
.booking-calendar iframe { width: 100%; height: 78rem; border: 0; border-radius: 1.2rem; background: #fff; display: block; }
.booking-calendar > p { color: #4f5869; font-size: 1.3rem; line-height: 1.6; margin-top: 1.6rem; }
.booking-calendar a { color: #292ec8; text-underline-offset: .3rem; }

@media (min-width: 1921px) {
  .home-opportunities { grid-template-columns: 65.5rem minmax(0, 1fr); }
  .opportunity-gallery { max-width: 110rem; }
}
@media (max-width: 1024px) {
  .home-opportunities { grid-template-columns: 1fr; padding: 7rem 0; gap: 4rem; }
  .opportunity-copy { max-width: none; margin-inline: var(--page-gutter); }
  .opportunity-copy h2 { max-width: 60rem; }
  .opportunity-gallery { width: 100%; }
  .opportunity-row img { width: 28rem; height: 21rem; }
  .booking-panel { grid-template-columns: 1fr; gap: 4rem; }
  .booking-intro { max-width: 62rem; }
  .booking-calendar iframe { height: 72rem; }
}
@media (max-width: 639px) {
  /* Phone hero: headline only, sized to the screen so it reads as the focal point */
  .elementor-zandro-website .elementor-hero-kicker { display: none; }
  .elementor-zandro-website .elementor-hero-heading { margin-top: 0; }
  .elementor-zandro-website .elementor-hero-container { padding-top: clamp(17rem, 46vw, 24rem); }
  .elementor-zandro-website .elementor-hero-heading h1 { font-size: clamp(5.2rem, 19vw, 10rem); line-height: 0.9; }
  .elementor-zandro-website .elementor-trusted-brands { gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; }
  .elementor-trusted-brands .elementor-featured-logo-item { flex-basis: 15rem; padding-inline: 2rem; }
  .elementor-trusted-brands .elementor-featured-logo-item img { max-width: 11rem; }
  .opportunity-copy p, .opportunity-benefits li { font-size: 1.6rem; }
  .opportunity-row img { width: 20rem; height: 15rem; }
  .elementor-zandro-website .elementor-services-heading-title { font-size: 3.8rem; }
  .home-faq-item summary { font-size: 1.8rem; gap: .8rem; padding-block: 2.4rem; }
  .home-faq-item > p { padding-left: 3.1rem; padding-right: 0; }
  .home-faq-item > ol { margin-left: 3.1rem; margin-right: 0; }
  .booking-panel { padding: 3rem 1.6rem; }
  .booking-calendar iframe { height: 78rem; }
  .booking-proof { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .elementor-trusted-brands .elementor-featured-marquee-track { animation: none; transform: none; }
  .elementor-trusted-brands .elementor-featured-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .elementor-trusted-brands .elementor-featured-logo-list[aria-hidden="true"] { display: none; }
  .opportunity-row { --row-shift: 0px !important; will-change: auto; }
  .opportunity-zoom img { transition: none; }
  .home-faq-item summary, .home-faq-item::after { transition: none; }
}