/* Dan's touches on top of the Showcase style (styles.css is Mark's Showcase layout in Dan's colours).
   Motion always plays, there is no reduce motion switch here (Mark's rule). */

html, html.lenis { scroll-behavior: auto; }
h1, h2, h3 { font-family: var(--head); }

/* Word mark, orange and black like Dan's job sign */
.brand { display: flex; flex-direction: column; text-decoration: none; font: 800 21px/.95 var(--head); text-transform: uppercase; letter-spacing: .03em; color: var(--orange); }
.brand--foot { font-size: 26px; margin-bottom: 14px; }
.topbar .nav a { color: var(--char); }
.topbar .nav a:hover { color: var(--char); }

/* Hero: the sun comes from the top left of Dan's video */
.hs__glow {
  background:
    radial-gradient(ellipse 60% 55% at 16% 6%, rgba(255, 196, 120, .55), rgba(255, 170, 90, .16) 45%, rgba(255, 160, 80, 0) 72%),
    radial-gradient(ellipse 45% 35% at 72% 58%, rgba(255, 170, 90, .35), rgba(255, 170, 90, 0) 70%);
}
.hs__title { text-transform: uppercase; }
.hs .eyebrow--light { color: var(--orange); }

/* Services: small orange tag on the photo */
.svc__media { position: relative; }
.svc__tag--photo { position: absolute; left: 16px; top: 16px; z-index: 1; margin: 0; }
.svc__info h3 { margin-bottom: 20px; }

/* Our work photo row: tap a photo to see it big */
.strip__item button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: #ddd; cursor: zoom-in; }
.strip__item button:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.work__more { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.btn--fb { gap: 10px; background: #1877f2; color: #fff; }
.btn--fb:hover { background: #3b8cff; color: #fff; }
.text-link { font: 700 18px var(--head); color: var(--orange-dark); text-decoration: none; border-bottom: 2px solid var(--orange); }

/* About: Dan's photo is tall, keep him in the frame */
.about__img { object-position: 50% 28%; }

/* How it works: 3 steps */
.steps { grid-template-columns: repeat(3, 1fr); }

/* Reviews: Facebook card in place of a rating badge, no stars */
.fbcard { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: #fff; color: var(--char); border-radius: 16px; text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.fbcard:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .28); }
.fbcard__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #1877f2; color: #fff; flex: none; }
.fbcard__text { display: grid; gap: 4px; }
.fbcard__text strong { font: 800 20px/1.2 var(--head); color: var(--char); }
.fbcard__text span { color: var(--muted); font-size: 16px; }
.rv__fbline { margin: 0; color: #e6e1d8; font-size: 16px; }
.rv__text figcaption strong { color: var(--orange-dark); font: 700 18px var(--head); }
.rv__mini { grid-template-columns: 64px 1fr; }
.rv__mini blockquote { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rv__source { margin: 28px 0 0; color: #cfcac0 !important; font-style: normal; }
.rv__source a { color: var(--orange); }
#reviews .section__head { margin-bottom: 36px; }

/* Ending: warm glow on the lights, words on the left */
.finale__glow {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 40% 30% at 30% 6%, rgba(255, 190, 110, .55), rgba(255, 190, 110, 0) 70%),
    radial-gradient(ellipse 35% 40% at 50% 34%, rgba(255, 170, 90, .35), rgba(255, 170, 90, 0) 70%);
  opacity: calc(.08 + var(--fp, 0) * .6);
}
.finale__title { text-transform: uppercase; }
.finale__words { max-width: 1200px; }
.finale__panel h2 { font-size: clamp(28px, 3vw, 38px); }
.finale__panel .contact a { color: #fff; font-size: 19px; word-break: break-word; }
.finale__panel .contact__more a { color: var(--orange); }
.finale .form .opt { font-weight: 400; color: var(--muted); }
.finale .form .form__file { background: #fff; border-style: dashed; padding: 10px; }
.form__done a { color: var(--orange-dark); font-weight: 600; }
.honey { position: absolute; left: -9999px; }

/* Footer */
.footer h3 { font-family: var(--head); }
.footer .btn--fb { color: #fff; }
.footer .btn--fb:hover { text-decoration: none; }

/* Lightbox */
.lightbox { padding: 0; border: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(0,0,0,.94); }
.lightbox::backdrop { background: rgba(0,0,0,.9); }
.lightbox img { width: 100%; height: 100%; object-fit: contain; }
.lightbox button {
  position: absolute; width: 52px; height: 52px; border: 0; border-radius: 50%;
  background: rgba(20,20,20,.75); color: #fff; font: 400 34px/1 var(--head); cursor: pointer;
}
.lightbox button:hover { background: var(--orange); color: var(--black, #111); }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }

@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .brand { font-size: 18px; }
  .steps { grid-template-columns: 1fr; }
  .work__more { flex-direction: column; align-items: flex-start; }
  .work__more .btn--fb { width: 100%; }
  .fbcard__text strong { font-size: 18px; }
}

/* Phones: Dan's videos are 4:3, show the whole thing at full width, words below */
@media (max-width: 699px) {
  .hs__stage :is(video[data-sc-scrub], .sc-stage__poster) { aspect-ratio: 4 / 3; }
  .hs__glow { height: 75vw; }
  .hs__copy { top: calc(64px + 75vw + 4px); }

  /* ending: not pinned on phones, video at the top, words straight under, then the cards. No black gaps. */
  .finale .finale__bg, .finale.is-phone .finale__bg { position: relative; top: auto; height: auto; aspect-ratio: 4 / 3; margin-bottom: 0; overflow: hidden; }
  .finale .finale__poster, .finale .finale__video {
    object-fit: contain;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0, #000 82%, transparent 100%);
  }
  .finale .finale__shade { display: none; }
  .finale .finale__lead { height: auto; }
  .finale .finale__words, .finale.is-phone .finale__words { position: static; padding-top: 6px; padding-bottom: 4px; }
  .finale__title { font-size: clamp(36px, 11vw, 46px); }
  .finale__content { padding-top: 22px; }
}

/* Dan's reviews are long, so the big quote is a little smaller */
.rv__text blockquote { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.38; }
.rv__photo { min-height: 380px; }
@media (max-width: 640px) { .rv__text blockquote { font-size: 19px; } .rv__photo { min-height: 0; } }

/* 21 Oct: hero label easier to read over the video */
.hs .eyebrow--light { color: #ffb066; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 14px rgba(0,0,0,.6); }

/* 21 Oct: bigger photos in "More of Dan's work" on computers, less empty space */
@media (min-width: 900px) {
  .pin.is-pinned .strip__item { width: min(46vw, calc((100vh - 230px) * 4 / 3), 760px); }
}