/* ==========================================================================
   CUSTOM.CSS — extra rules layered on top of style.css
   Loaded AFTER style.css in both index.html and services.html, so a rule
   here with the same selector simply wins the cascade (no !important
   needed). Keeps every later addition to the site in one place instead
   of scattered inside the main stylesheet.

   Contents:
     1. Skill card image slot ..... Canva / MS Office real-image support
     2. Project card image slot ... screenshot overlay for mock cards
     3. Contact & testimonial bits . second phone line, flag badges
     4. Testimonials marquee ....... full-bleed infinite scroll strip
     5. Services — 3D icons ........ layered, tilting service icons
   ========================================================================== */

/* ============================================================
   1. SKILL CARD IMAGE SLOT (Canva Designer / Microsoft Office)
   Drop a real screenshot at img/canva-designer.png or
   img/ms-office.png and it covers the emoji placeholder
   automatically. If the file is missing, the onerror attribute
   on the <img> hides it so the emoji + gradient shows through —
   no broken-image icon ever appears.
   ============================================================ */
.skill-card .thumb.icon-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.skill-card .thumb.icon-thumb .skill-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}

.skill-card:hover .thumb.icon-thumb .skill-img {
  transform: scale(1.08);
}

.skill-card .thumb.icon-thumb .skill-emoji {
  font-size: 44px;
  position: relative;
  z-index: 1;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.4));
}

.skill-card:hover .thumb.icon-thumb .skill-emoji {
  transform: scale(1.15) rotate(-6deg);
}

.icon-thumb-canva {
  background: radial-gradient(circle at 30% 30%, rgba(0, 196, 204, 0.16), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(138, 58, 185, 0.16), transparent 60%),
    linear-gradient(160deg, var(--black-3), var(--black-2));
}

.icon-thumb-office {
  background: radial-gradient(circle at 30% 30%, rgba(212, 175, 55, 0.22), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(138, 109, 31, 0.2), transparent 60%),
    linear-gradient(160deg, var(--black-3), var(--black-2));
}

/* ============================================================
   2. PROJECT CARD IMAGE SLOT (mock browser-window cards)
   Same graceful-fallback pattern as above: drop a screenshot at
   the filename referenced in each card's <img>, it covers the
   glow + initials placeholder. Missing file -> onerror hides the
   <img> and the placeholder still looks intentional.
   ============================================================ */
.proj-card .mockbody .mock-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 2;
  transition: transform .5s cubic-bezier(.2, .9, .3, 1);
}

.proj-card:hover .mockbody .mock-img {
  transform: scale(1.05);
}

/* ============================================================
   3. CONTACT — second phone line / TESTIMONIALS — flag badge
   ============================================================ */
.contact-info-row span.phone-line {
  display: block;
}

.contact-info-row span.phone-line+.phone-line {
  margin-top: 2px;
}

.test-person b .flag {
  font-size: 13px;
  margin-left: 4px;
}

/* ============================================================
   4. TESTIMONIALS — full-bleed infinite marquee
   Breaks out to 100vw using the classic negative-margin trick so
   it runs edge-to-edge. The track holds the 5 cards written
   twice in the HTML, and the keyframe slides it left by exactly
   50% of the track's width for a seamless loop. On mobile each
   card is sized to ~86vw so only one is comfortably visible at a
   time as the strip scrolls, one card after another.
   ============================================================ */
.test-marquee-wrap {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  padding: 10px 0 4px;
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.test-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: testScroll 42s linear infinite;
}

.test-marquee-wrap:hover .test-track,
.test-marquee-wrap:focus-within .test-track {
  animation-play-state: paused;
}

@keyframes testScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.test-card {
  flex: 0 0 360px;
  border-radius: 16px;
  padding: 28px;
  transition: transform .3s;
  position: relative;
}

@media(max-width:900px) {
  .test-card {
    flex: 0 0 320px;
  }
}

@media(max-width:560px) {
  .test-card {
    flex: 0 0 86vw;
  }

  .test-track {
    gap: 16px;
  }
}

.test-card:hover {
  transform: translateY(-5px);
}

.test-card .quote-mark {
  position: absolute;
  top: 14px;
  right: 20px;
  font-family: 'Fraunces', serif;
  font-size: 56px;
  color: rgba(212, 175, 55, 0.14);
  line-height: 1;
}

.test-card .stars {
  color: var(--gold);
  font-size: 13px;
  margin-bottom: 14px;
  letter-spacing: 2px;
}

.test-card p {
  font-size: 14.5px;
  color: var(--ivory);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.test-person {
  display: flex;
  align-items: center;
  gap: 12px;
}

.test-person img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(212, 175, 55, 0.45);
}

.test-person b {
  display: block;
  font-size: 14px;
}

.test-person span {
  font-size: 12px;
  color: var(--muted);
}

@media(prefers-reduced-motion: reduce) {
  .test-track {
    animation: none !important;
  }
}

/* ============================================================
   5. SERVICES — 3D icon badges
   Replaces the flat gold square with a layered, glassy badge:
   a soft drop shadow gives it lift off the card, an inner highlight
   arc fakes a curved top-left glare, and on hover the whole badge
   tilts in 3D space (rotateX/rotateY) using CSS perspective, like
   it's a little floating tile reacting to the cursor.
   ============================================================ */
.service-card {
  perspective: 700px;
}

.service-card .svc-icon {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: linear-gradient(150deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin-bottom: 18px;
  position: relative;
  transform-style: preserve-3d;
  box-shadow:
    0 10px 20px -8px rgba(212, 175, 55, 0.55),
    0 2px 0 0 rgba(255, 255, 255, 0.25) inset,
    0 -6px 10px -4px rgba(0, 0, 0, 0.35) inset;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1), box-shadow .45s;
}

.service-card .svc-icon::before {
  content: "";
  position: absolute;
  inset: 3px 3px 55% 3px;
  border-radius: 11px 11px 30px 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}

.service-card:hover .svc-icon {
  transform: rotateX(18deg) rotateY(-16deg) translateZ(6px) scale(1.08);
  box-shadow:
    0 18px 30px -10px rgba(212, 175, 55, 0.6),
    0 2px 0 0 rgba(255, 255, 255, 0.3) inset,
    0 -6px 10px -4px rgba(0, 0, 0, 0.35) inset;
}

/* svc-teaser-card icons (flagship section) get the same 3D lift */
.svc-teaser-card {
  perspective: 700px;
}

.svc-teaser-card .svc-icon {
  position: relative;
  transform-style: preserve-3d;
  box-shadow:
    0 10px 20px -8px rgba(212, 175, 55, 0.55),
    0 2px 0 0 rgba(255, 255, 255, 0.25) inset,
    0 -6px 10px -4px rgba(0, 0, 0, 0.35) inset;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1), box-shadow .45s;
}

.svc-teaser-card .svc-icon::before {
  content: "";
  position: absolute;
  inset: 3px 3px 55% 3px;
  border-radius: 11px 11px 30px 30px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}

.svc-teaser-card:hover .svc-icon {
  transform: rotateX(18deg) rotateY(-16deg) translateZ(6px) scale(1.08);
  box-shadow:
    0 18px 30px -10px rgba(212, 175, 55, 0.6),
    0 2px 0 0 rgba(255, 255, 255, 0.3) inset,
    0 -6px 10px -4px rgba(0, 0, 0, 0.35) inset;
}