/* =========================================
   ADZ MEDIA — Global Styles & Variables
   white bg · #313a41 text · #e84531 red · #8ccdcb teal
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

:root {
  /* ── Core palette ── */
  --clr-black:     #313a41;   /* ADZ brand text / dark sections         */
  --clr-white:     #ffffff;   /* Page background                        */
  --clr-accent:    #e84531;   /* ADZ red-orange — primary CTA / badges  */
  --clr-accent-dk: #c73420;   /* Darker red for hover states            */
  --clr-teal:      #8ccdcb;   /* ADZ teal — highlights & accents        */
  --clr-teal-dk:   #6ab5b3;   /* Darker teal for hover states           */
  --clr-mid:       #f4f4f4;   /* Light grey — alternate section bg      */
  --clr-mid-dk:    #e8e8e8;   /* Slightly darker grey for borders/cards */
  --clr-muted:     #7a8691;   /* Secondary / caption text (teal-grey)   */
  --clr-border:    rgba(49,58,65,0.12); /* Borders on light bg          */

  /* ── Typography ── */
  --font-display: 'Bebas Neue', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* ── Spacing ── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  8rem;

  /* ── Layout ── */
  --max-width: 1400px;
  --gutter:    clamp(1.5rem, 5vw, 4rem);

  /* ── Motion ── */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 400ms;
  --duration-slow: 700ms;
}

/* ---- Reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

.desktop{
  @media(max-width:500px){
    display:none;
  }
}
.mobile{
  @media(min-width:501px){
    display:none;
  }
}
body:not(.wp-admin)  {
  background: var(--clr-white);
  color: var(--clr-black);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  padding-top: 70px;
  @media(min-width:768px) {
    padding-top: 140px;
  }

  a {
    text-decoration: none;
  }


  img, svg {
    display: block;
  }

  ul {
    list-style: none;
  }

strong{
  font-weight: bold;
}

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

}
/* ---- Utility ---- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* =========================================
   MODULE: ANIMATIONS
   Subtle, consistent animations across
   all pages. Respects prefers-reduced-motion.
   ========================================= */

/* =========================================
   1. SCROLL REVEAL — base utility
   Applied via JS to any .anim-reveal element
   ========================================= */

.anim-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger siblings automatically */
.anim-reveal:nth-child(2) { transition-delay: 0.08s; }
.anim-reveal:nth-child(3) { transition-delay: 0.16s; }
.anim-reveal:nth-child(4) { transition-delay: 0.24s; }
.anim-reveal:nth-child(5) { transition-delay: 0.32s; }
.anim-reveal:nth-child(6) { transition-delay: 0.40s; }

/* Slide from left variant */
.anim-reveal--left {
  transform: translateX(-18px);
}
.anim-reveal--left.is-visible {
  transform: translateX(0);
}

/* Slide from right variant */
.anim-reveal--right {
  transform: translateX(18px);
}
.anim-reveal--right.is-visible {
  transform: translateX(0);
}

/* Scale up variant (for images/cards) */
.anim-reveal--scale {
  transform: scale(0.96);
}
.anim-reveal--scale.is-visible {
  transform: scale(1);
}

/* =========================================
   2. PAGE ENTRANCE — first section fades in
   ========================================= */

.anim-page-enter {
  animation: pageEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   3. LINK UNDERLINE SLIDE
   Applied to text links — animated underline
   that grows from left on hover
   ========================================= */

.anim-link {
  position: relative;
  display: inline-block;
}

.anim-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--clr-teal);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-link:hover::after {
  width: 100%;
}

/* =========================================
   4. BUTTON LIFT
   Subtle lift + shadow on interactive buttons
   ========================================= */

.anim-btn {
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(140, 205, 203, 0.25);
}

.anim-btn:active {
  transform: translateY(0);
  box-shadow: none;
}

/* =========================================
   5. IMAGE REVEAL — clip-path wipe
   Images animate in with a wipe from bottom
   ========================================= */

.anim-img-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-img-reveal.is-visible {
  clip-path: inset(0% 0 0 0);
}

/* =========================================
   6. COUNTER HIGHLIGHT
   Accent line that grows under stat numbers
   ========================================= */

.anim-stat-num {
  position: relative;
  display: inline-block;
}

.anim-stat-num::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--clr-teal);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

.anim-stat-num.is-visible::after {
  width: 100%;
}

/* =========================================
   7. NAV LINK HOVER
   Active indicator dot for nav links
   ========================================= */

.nav__link {
  position: relative;
}

/* =========================================
   8. SECTION DIVIDER LINE GROW
   Border lines animate in width on scroll
   ========================================= */

.anim-line {
  position: relative;
  overflow: hidden;
}

.anim-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--clr-teal);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.anim-line.is-visible::before {
  width: 3rem;
}

/* =========================================
   9. CARD HOVER LIFT
   Subtle lift on case study / blog cards
   ========================================= */

.cs-card__link,
.blog-card__link,
.post-related__card-link {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-card__link:hover,
.blog-card__link:hover,
.post-related__card-link:hover {
  transform: translateY(-3px);
}

/* =========================================
   10. TEAL ACCENT LINE
   Grows in on page load under headings
   ========================================= */

.anim-heading-line {
  position: relative;
  padding-bottom: 0.75rem;
}

.anim-heading-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--clr-teal);
  animation: lineGrow 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes lineGrow {
  to { width: 3rem; }
}

/* =========================================
   REDUCED MOTION — disable everything
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .anim-reveal,
  .anim-reveal--left,
  .anim-reveal--right,
  .anim-reveal--scale,
  .anim-img-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .anim-page-enter        { animation: none; }
  .anim-link::after       { transition: none; }
  .anim-btn               { transition: none; }
  .anim-stat-num::after   { transition: none; }
  .anim-line::before      { transition: none; }
  .anim-heading-line::after { animation: none; width: 3rem; }
  .cs-card__link,
  .blog-card__link,
  .post-related__card-link { transition: none; }
}

/* =========================================
   11. TEAL FOCUS RING — accessibility
   ========================================= */

:focus-visible {
  outline: 2px solid var(--clr-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================
   12. SMOOTH IMAGE SCALE on all card images
   (consolidates hover scale in one place)
   ========================================= */

.svc-work-strip__item .svc-work-strip__img,
.cs-brands__screen-img,
.about-story__image,
.about-team__image {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.svc-work-strip__item:hover .svc-work-strip__img,
.about-story__image-wrap:hover .about-story__image,
.about-team__image-wrap:hover .about-team__image {
  transform: scale(1.03);
}

/* =========================================
   13. SERVICES ACCORDION ROW — slide feel
   Already has max-height transition in services-list.css
   but add a subtle background wash on open
   ========================================= */

.svc-row.is-open {
  background: rgba(140, 205, 203, 0.04);
}

/* =========================================
   14. BACK / NAV LINKS — arrow nudge
   ========================================= */

.cs-hero__back,
.cs-gallery__nav-link,
.post-header__back,
.svc-header__back,
.post-related__all {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.25s cubic-bezier(0.16, 1, 0.3, 1),
  color 0.2s ease;
}

.cs-gallery__nav-link--next:hover,
.post-related__all:hover {
  gap: 0.7rem;
}

.cs-hero__back:hover,
.post-header__back:hover,
.svc-header__back:hover {
  gap: 0.6rem;
}


/* =========================================
   WEDDING BUTTONS
   Single shared button class used across
   all wedding blocks. Three colour variants:
   default (dark), --light (white), --gold.
   ========================================= */

.wedding-btn {
  display: inline-block;
  padding: 1.1rem 2.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid #2C2C2C;
  color: #2C2C2C;
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  max0
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.wedding-btn:hover {
  background-color: #2C2C2C;
  color: #ffffff;
}

/* White outline — for use on dark / image backgrounds */
.wedding-btn--light {
  border-color: #ffffff;
  color: #ffffff;
}

.wedding-btn--light:hover {
  background-color: #ffffff;
  color: #2C2C2C;
}

/* Gold outline — accent / highlight CTAs */
.wedding-btn--gold {
  border-color: #C9A86A;
  color: #C9A86A;
}

.wedding-btn--gold:hover {
  background-color: #C9A86A;
  color: #ffffff;
}

/* Filled dark — solid variant for high-emphasis CTAs */
.wedding-btn--filled {
  background-color: #2C2C2C;
  border-color: #2C2C2C;
  color: #ffffff;
}

.wedding-btn--filled:hover {
  background-color: #1a1a1a;
  border-color: #1a1a1a;
}

/* ── Global play button ──────────────────────────────────────────────────────
   Shared by wedding-dual-video, wedding-video-grid, and any future block
   that uses data-lightbox-video. Blocks only need to handle positioning.
   ─────────────────────────────────────────────────────────────────────────── */

.wedding-play {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  pointer-events: none;
  flex-shrink: 0;
  transition: border-color 0.45s ease,
              background-color 0.45s ease,
              transform 0.45s ease;
}

/* Rotating gold arc — appears on hover */
.wedding-play::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: #C9A86A;
  border-right-color: #C9A86A;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: wedding-play-spin 2.4s linear infinite;
}

/* Expanding pulse ring — appears on hover */
.wedding-play::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(201, 168, 106, 0.55);
  opacity: 0;
}

.wedding-play__icon {
  width: 15px;
  height: 17px;
  margin-left: 3px;
  color: #ffffff;
  transition: color 0.35s ease;
  display: block;
}

/* Hover triggers — works on any wrapper with data-lightbox-video */
[data-lightbox-video]:hover .wedding-play {
  border-color: rgba(201, 168, 106, 0.75);
  background: rgba(201, 168, 106, 0.1);
}

[data-lightbox-video]:hover .wedding-play::before {
  opacity: 1;
}

[data-lightbox-video]:hover .wedding-play::after {
  animation: wedding-play-pulse 1.8s ease-out infinite;
}

[data-lightbox-video]:hover .wedding-play__icon {
  color: #C9A86A;
}

@keyframes wedding-play-spin {
  to { transform: rotate(360deg); }
}

@keyframes wedding-play-pulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.2); opacity: 0; }
}