:root {

  --max-width: 1200px;

  --gutter: 32px;

  --black: #000;

  --white: #fff;

  --muted: #222;

  --gold: #c9a800;

}

* {
  box-sizing: border-box
}

/* Body styles - only apply on pages with .top-band (brand-building page) */
/* Exclude pages that have .hero-full-video (index.php), .site-wrap (contact.php), or other specific classes */
body:has(.top-band):not(:has(.hero-full-video)):not(:has(.site-wrap)):not(:has(.page-center)) {

  margin: 0 !important;

  font-family: "Inter", sans-serif !important;

  color: var(--muted) !important;

  background: #fff !important;

  line-height: normal !important;

}

.top-band {

  background: var(--black);

  color: #fff;

  width: 100%;

  padding-top: 130px;

  padding-bottom: 50px;

  display: flex;

  justify-content: center;

  margin-top: 90px;

  margin-bottom: 0;

}

/* Mobile: Remove gap between header and top-band - align top-band directly below header */
@media (max-width: 768px) {
  .top-band {
    margin-top: 68px;
    /* Header height on mobile: 20px top padding + 28px logo + 20px bottom padding = 68px */
    padding-top: 60px;
    /* Reduce padding-top on mobile to ensure text is visible */
    padding-bottom: 40px;
    /* Adjust padding-bottom for mobile */
  }

  .top-band .title {
    font-size: 42px;
    /* Separate font size for mobile - different from desktop */
    line-height: 1.1;
    /* Fix line-height for mobile to show text properly */
    white-space: pre-wrap;
    /* Preserve spaces and allow wrapping */
    word-break: normal;
    /* Normal word breaking */
    text-align: center;
    /* Center text horizontally */
    overflow-wrap: break-word;
    /* Break at word boundaries */
  }

  .top-band .title .letter {
    white-space: nowrap;
    /* Keep individual letter spans together */
  }
}

.top-band .title {

  font-family: "Inter", sans-serif;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 2px;

  margin: 0 10px;

  font-size: clamp(42px, 8.5vw, 80px);

  line-height: 1.05;
  /* allow multi-line titles without overlapping */

  -webkit-text-stroke: 3px #fff;

  color: #fff;

  text-align: center;

}

.wrap {

  margin-top: 0;

  padding-top: 0;

}

/* Scoped to only apply within .wrap (brand-building page) */
.wrap .hero {

  display: grid !important;

  grid-template-columns: minmax(0, 60%) minmax(0, 40%) !important;

  gap: 10px;

  align-items: stretch;

  min-height: 520px !important;
  /* taller hero so image reaches section below */

  position: relative !important;

  margin-top: 0 !important;

  width: 100% !important;

  height: auto !important;

  background: transparent !important;

  padding: 0 !important;

  overflow: visible !important;

}

.wrap .hero-left {

  padding: 40px 5%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  text-align: center;

}

.wrap .hero-left h1 {

  margin: 0 auto 26px auto;

  font-family: "Cormorant Garamond", serif;

  font-weight: 700;

  font-size: clamp(42px, 6.8vw, 52px);

  line-height: 1.15;

  color: #0b0b0b;

}

.wrap .hero-left p:not(.hero-tagline) {

  margin: 0 auto;

  font-size: clamp(15px, 1.6vw, 25px);

  line-height: 1.3;

  max-width: 680px;

}

.hero-tagline {

  margin-top: 50px;
  /* big gap from paragraph above */

  margin-bottom: 0;

  font-family: "Cormorant Garamond", serif;

  font-weight: 700;

  font-size: clamp(40px, 4.2vw, 34px);
  /* still large but balanced */

  line-height: 1.1;

  color: var(--gold);

  text-align: center;
  /* center aligned as requested */
}

.wrap .hero-right {

  position: relative;

  padding: 0;

  margin: 0;

  overflow: hidden;

  display: block;

  min-height: 0;

}

.wrap .hero-right img {

  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  top: 0;

  height: 100%;
  /* fill hero height: no gap top/bottom */

  width: auto;
  /* width adjusts automatically to keep aspect ratio */

  object-fit: contain;
  /* keep full image visible */

  object-position: center;
  /* center image horizontally */

  display: block;

  margin: 0;

  padding: 0;

  border: 0;

}

.hero-sep {

  height: 0;
  /* no visible line */

  margin-top: 0;
  /* remove gap under hero */

}

/* Full-width image section between hero and bottom-section on video production page */

.video-production-image-section {

  width: 100%;

  margin: 0;

  padding: 0;

}

.video-production-image {

  display: block;

  width: 100%;

  height: auto;

  margin: 0;

  padding: 0;

}

@media (max-width:620px) {

  .wrap .hero {

    grid-template-columns: 1fr !important;

    gap: 20px;

    min-height: auto !important;

    margin-top: 0 !important;

    height: auto !important;

  }

  .wrap .hero-left {

    padding: 30px 5%;

  }

  .wrap .hero-left h1 {

    margin-top: 20px;
    /* Add small margin on top for mobile */

  }

  .wrap .hero-left p {

    font-size: clamp(18px, 2vw, 25px);
    /* Increase font size a bit on mobile */

  }

  .wrap .hero-right {

    height: 320px;

  }

  .wrap .hero-right img {

    position: absolute;

  }

}

/* ---------------------------------------------------
   SOCIAL MEDIA MANAGEMENT PAGE SPECIFIC STYLES
---------------------------------------------------- */

body.social-media-page .wrap .hero {
  background: var(--black) !important;
}

body.social-media-page .wrap .hero-left h1 {
  color: var(--white);
}

body.social-media-page .wrap .hero-left p:not(.hero-tagline) {
  color: var(--white);
}

body.advertising-page .bottom-section {
  background-image: url('../images/services/bg-advertising.jpg');
}

body.video-production-page .bottom-section {
  background-image: url('../images/services/bg-video-production.jpg');
}

body.digital-marketing-page .bottom-section {
  background-image: url('../images/services/bg-digital-marketing.jpg');
}

body.product-photography-page .bottom-section {
  background-image: url('../images/services/bg-product-photography.jpg');
}

body.model-photoshoot-page .bottom-section {
  background-image: url('../images/services/bg-model-photoshoot.jpg');
}

body.social-media-page .bottom-section {
  background-image: url('../images/services/bg-social-media-management.jpg');
}

body.brand-building-page .bottom-section {
  background-image: url('../images/services/bg-brand-building.jpg');
}

/* Letter-by-letter animation for brand building title */
#brand-building-title .letter {
  display: inline-block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  color: #fff;
}

#brand-building-title .letter[data-letter=" "] {
  opacity: 0;
}

#brand-building-title .letter.revealing {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: letterReveal 0.3s ease-out forwards;
  color: #fff;
}

@keyframes letterReveal {
  0% {
    clip-path: inset(0 100% 0 0);
  }

  100% {
    clip-path: inset(0 0% 0 0);
  }
}

#brand-building-title .letter.visible:first-child {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  color: #fff;
}

#brand-building-title .letter.visible {
  opacity: 1;
  color: #fff;
}

/* Social Media Management Title Animation */
#social-media-title .letter {
  display: inline-block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  color: #fff;
}

#social-media-title .letter[data-letter=" "] {
  opacity: 0;
}

#social-media-title .letter.revealing {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: letterReveal 0.3s ease-out forwards;
  color: #fff;
}

#social-media-title .letter.visible:first-child {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  color: #fff;
}

#social-media-title .letter.visible {
  opacity: 1;
  color: #fff;
}

/* Advertising Title Animation */
#advertising-title .letter {
  display: inline-block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  color: #fff;
}

#advertising-title .letter[data-letter=" "] {
  opacity: 0;
}

#advertising-title .letter.revealing {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: letterReveal 0.3s ease-out forwards;
  color: #fff;
}

#advertising-title .letter.visible:first-child {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  color: #fff;
}

#advertising-title .letter.visible {
  opacity: 1;
  color: #fff;
}

/* Video Production Title Animation */
#video-production-title .letter {
  display: inline-block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  color: #fff;
}

#video-production-title .letter[data-letter=" "] {
  opacity: 0;
}

#video-production-title .letter.revealing {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: letterReveal 0.3s ease-out forwards;
  color: #fff;
}

#video-production-title .letter.visible:first-child {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  color: #fff;
}

#video-production-title .letter.visible {
  opacity: 1;
  color: #fff;
}

/* Digital Marketing Title Animation */
#digital-marketing-title .letter {
  display: inline-block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  color: #fff;
}

#digital-marketing-title .letter[data-letter=" "] {
  opacity: 0;
}

#digital-marketing-title .letter.revealing {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: letterReveal 0.3s ease-out forwards;
  color: #fff;
}

#digital-marketing-title .letter.visible:first-child {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  color: #fff;
}

#digital-marketing-title .letter.visible {
  opacity: 1;
  color: #fff;
}

/* Product Photography Title Animation */
#product-photography-title .letter {
  display: inline-block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  color: #fff;
}

#product-photography-title .letter[data-letter=" "] {
  opacity: 0;
}

#product-photography-title .letter.revealing {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: letterReveal 0.3s ease-out forwards;
  color: #fff;
}

#product-photography-title .letter.visible:first-child {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  color: #fff;
}

#product-photography-title .letter.visible {
  opacity: 1;
  color: #fff;
}

/* Model Photoshoot Title Animation */
#model-photoshoot-title .letter {
  display: inline-block;
  position: relative;
  overflow: hidden;
  opacity: 0;
  color: #fff;
}

#model-photoshoot-title .letter[data-letter=" "] {
  opacity: 0;
}

#model-photoshoot-title .letter.revealing {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  animation: letterReveal 0.3s ease-out forwards;
  color: #fff;
}

#model-photoshoot-title .letter.visible:first-child {
  opacity: 1;
  clip-path: inset(0 0% 0 0);
  color: #fff;
}

#model-photoshoot-title .letter.visible {
  opacity: 1;
  color: #fff;
}

/* ---------------------------------------------------
   BOTTOM SECTION BACKGROUND (NEW WRAPPER)
---------------------------------------------------- */

.bottom-section {

  background-image: url('../images/services/bg-brand-building.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: relative;

}

.bottom-section::before {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(0, 0, 0, 0.78);
  /* overlay */

  z-index: 1;

}

.bottom-section>* {

  position: relative;

  z-index: 2;

}

/* ---------- BRANDING SERVICES SECTION ---------- */

.brand-services-section {

  color: #fff;

  padding: 48px 0 36px;

}

.brand-services-wrap {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 32px;

}

.services-heading {

  font-family: "Cormorant Garamond", serif;

  color: #c9a800;

  font-size: 34px;

  text-align: center;

  font-weight: 900;

  letter-spacing: 1px;

  -webkit-text-stroke: 1px #c9a800;

}

.pills-grid {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 34px;

  margin-bottom: 30px;

  padding: 20px 0;

}

.pill {

  border: 3px solid #fff;

  padding: 16px 36px;

  border-radius: 999px;

  font-size: 18px;

  color: #fff;

  text-align: center;

  display: flex;

  align-items: center;

  justify-content: center;

  flex: 0 1 240px;

  min-width: 160px;

  max-width: 320px;

  box-sizing: border-box;

}

.pill-center {
  flex-basis: 280px;
}

.why-heading {

  font-family: "Cormorant Garamond", serif;

  color: #c9a800;

  font-size: 34px;

  text-align: center;

  font-weight: 900;

  letter-spacing: 1px;

  -webkit-text-stroke: 1px #c9a800;

}

.why-list {

  list-style: none;

  padding: 0;

  margin: 0 auto;

  max-width: 800px;

  text-align: center;

  font-size: 21px;

  line-height: 1.4;

  font-weight: 200;

}

.why-list li {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  margin-bottom: 12px;

}

.why-list li:before {

  content: "";

  width: 8px;

  height: 8px;

  background: #fff;

  border-radius: 50%;

  flex-shrink: 0;

}

.cta-title {

  text-align: center;

  font-family: "Cormorant Garamond", serif;

  font-weight: 700;

  font-size: 48px;

  color: #fff;

  margin-top: 60px;

  margin-bottom: 0;

  line-height: 1.05;

}

/* ---------- FOOTER ---------- */

.site-footer {

  color: #fff;

  font-family: "Inter", sans-serif;

  margin-top: 0;

  padding-bottom: 80px;

}

.footer-wrap {

  max-width: 1200px;

  margin: 0 auto;

  padding: 26px 60px;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

}

.footer-left {

  display: flex;

  flex-direction: column;

  gap: 10px;

  align-items: flex-start;

  min-width: 300px;

}

.contact-row {

  display: flex;

  align-items: center;

  gap: 18px;

}

.icon-circle {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: #fff;

  color: #111;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);

  font-size: 20px;

}

.footer-contact-link {

  color: #fff;

  text-decoration: none;

  font-size: 22px;

  font-weight: 600;

  line-height: 1;

}

.footer-center {

  display: flex;

  justify-content: center;

  align-items: center;

}

.cta-button {

  padding: 10px 36px;

  border-radius: 999px;

  border: 2px solid var(--gold);

  background: transparent;

  color: var(--gold);

  font-weight: 600;

  font-size: 18px;

  cursor: pointer;

  letter-spacing: 0.4px;

  display: inline-block;

  text-decoration: none;

}

.footer-right {

  display: flex;

  gap: 14px;

  align-items: center;

}

.social-circle {

  width: 62px;

  height: 62px;

  border-radius: 50%;

  background: var(--gold);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  text-decoration: none;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);

  font-size: 26px;

}

@media (min-width:900px) {

  .footer-center,

  .footer-right {

    margin-top: -12px;

  }

}

@media (max-width:880px) {

  .footer-wrap {

    flex-direction: column;

    align-items: center;

    padding: 30px 24px;

    text-align: center;

  }

  .footer-left {

    flex-direction: row;

    gap: 18px;

    align-items: center;

  }

  .footer-center {
    margin: 12px 0;
  }

}

@media (max-width:520px) {

  .footer-left {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    width: fit-content;
    margin: 0 auto;
  }

}


/* DIGITAL MARKETING HERO SECTION - NEW STYLE */
.dm-hero-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  line-height: 0;
  min-height: 0;
  background-color: #f5f5f5;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden;
}

.dm-hero-bg-image {
  width: 100%;
  height: auto;
  display: block;
}

.dm-hero-text-overlay {
  position: absolute;
  /* Positioning relative to the image size to cover the screen */
  top: 3.1%;
  left: 25.2%;
  width: 49.6%;
  height: 76.7%;



  /* Center content */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  /* Spacing */
  padding: 3% 4%;
  box-sizing: border-box;

  /* Content Color */
  color: #111;

  /* Restore line-height */
  line-height: normal;
}

.dm-hero-container h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3.5vw;
  font-weight: 400;
  margin: 0 0 0.4em 0;
  color: #000;
  line-height: 1.1;
}

.dm-hero-container p {
  font-family: 'Roboto', sans-serif;
  font-size: 1.9vw;
  /* Increased size (~1.75x of 1.25vw) */
  font-weight: 400;
  line-height: 1.4;
  color: #222;
  margin: 0;
}

/* Large screen adjustment to cap sizes */
@media screen and (min-width: 1920px) {
  .dm-hero-container h1 {
    font-size: 68px;
  }

  .dm-hero-container p {
    font-size: 24px;
  }
}

/* Mobile Layout - Smartphone Look */
@media screen and (max-width: 900px) {
  .dm-hero-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Mobile Background (No Laptop) */
    background-image: url('../images/services/bg-mobile-digital-marketing.png');
    background-size: cover;
    background-position: center;
    padding: 40px 0;
    /* Space top/bottom */
    box-sizing: border-box;
  }

  .dm-hero-bg-image {
    display: none;
    /* Hide the laptop image */
  }

  .dm-hero-text-overlay {
    position: relative;
    width: 85%;
    max-width: 600px;
    /* Increased for tablets */
    height: auto;
    /* Grows with content */
    min-height: 600px;
    /* Ensure tall frame for tablets */

    /* Smartphone Frame Styling */
    background-color: #fff;
    border: 16px solid #1a1a1a;
    /* Phone bezel */
    border-radius: 48px;
    /* More rounded corners for modern look */
    margin: 0 auto;

    /* Internal Spacing - Extra top/bottom for notch/home button */
    padding: 60px 24px 60px 24px;

    /* Reset transforms */
    transform: none;
    top: auto;
    left: auto;

    /* Shadow for depth */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  }

  /* Notch (connected to top) */
  .dm-hero-text-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 26px;
    /* Reduced height */
    background-color: #1a1a1a;
    /* Match frame color */
    border-radius: 0 0 20px 20px;
    /* Flatten top to merge with bezel */
    z-index: 2;
  }

  /* Home Button / Indicator */
  .dm-hero-text-overlay::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 5px;
    /* Home Indicator Style */
    background-color: #000;
    /* Black on white screen */
    border-radius: 10px;
    z-index: 2;
    opacity: 0.8;
  }

  .dm-hero-container h1 {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .dm-hero-container p {
    font-size: 18px;
    line-height: 1.6;
  }
}

/* Remove padding above and below hero on desktop only */
@media screen and (min-width: 901px) {
  body.digital-marketing-page .top-band {
    padding-bottom: 0 !important;
  }

  body.digital-marketing-page .brand-services-section {
    padding-top: 80px !important;
  }
}

/* PRODUCT PHOTOGRAPHY HERO SECTION */
.pp-hero-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  background-color: #fff;
  padding: 0;
  min-height: 500px;
}

.pp-hero-img {
  height: auto;
  max-height: 600px;
  width: auto;
  object-fit: cover;
  flex-shrink: 0;
  max-width: 30vw;
}

.pp-hero-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 20px;
  z-index: 10;
}

.pp-hero-content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 3.5vw;
  font-weight: 400;
  margin: 0 0 0.5em 0;
  color: #000;
  line-height: 1.2;
}

.pp-hero-content p {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(15px, 1.6vw, 25px);
  font-weight: 400;
  line-height: 1.3;
  color: #333;
  max-width: 680px;
  margin: 0 auto 30px auto;
}

.pp-hero-cta {
  font-family: 'Playfair Display', serif;
  font-size: 2vw;
  color: #c9a800;
  /* Gold color from brand */
  margin: 0;
}

/* Large screen adjustments */
@media screen and (min-width: 1600px) {
  .pp-hero-content h1 {
    font-size: 60px;
  }



  .pp-hero-cta {
    font-size: 32px;
  }
}

/* Mobile Layout */
@media screen and (max-width: 900px) {
  .pp-hero-section {
    flex-direction: column;
    padding: 60px 20px;
    position: relative;
    background: #ffffff;
  }

  .pp-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background-image: url('../images/services/bg-product-photography-right.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
  }

  .pp-hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
  }

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

  .pp-hero-img {
    display: none;
    /* Hide images on mobile to ensure readability as requested */
  }

  .pp-hero-content h1 {
    font-size: 36px;
    background: linear-gradient(to right, #000 50%, #fff 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    mix-blend-mode: normal;
  }

  .pp-hero-content p {
    font-size: 18px;
    max-width: 100%;
    background: linear-gradient(to right, #000 50%, #fff 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    mix-blend-mode: normal;
  }

  .pp-hero-cta {
    font-size: 24px;
    margin-top: 20px;
    background: linear-gradient(to right, #c9a800 50%, #c9a800 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Force word wrapping at spaces in animated titles */
.top-band .title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em;
}

/* Word group wrapping for animated titles */
.top-band .title .word-group {
  display: inline-block;
  white-space: nowrap;
}