/* body rule added by build: this page set font and background on a
   wrapper div, and shared chrome sits outside it. Same values the
   design's other pages declare on body. */
body { margin: 0; font-family: 'Poppins', sans-serif; background: #f3f1ee; color: #1a1a1a; -webkit-font-smoothing: antialiased; }

html { scroll-behavior: auto; }
  body { margin: 0; background: #f3f1ee; }
  * { box-sizing: border-box; }
  a { color: #1a1a1a; text-decoration: none; }
  @keyframes prWordIn { from { opacity: 0; transform: translateY(28px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
  /* The blur in prWordIn forces each word onto its own GPU layer, and the
   layer is sized from the element box. With line-height 1.06 that box is
   shorter than the glyphs, so descenders — the tails on g, p and y — were
   clipped while the filter was active and popped back in when it finished.
   The padding gives the box room for them; the negative margin cancels it so
   nothing moves. */
.pr-word {
  display: inline-block;
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
  animation: prWordIn 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
  @keyframes lgsHeadTilt { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(10deg); } }
  @keyframes lgsBodyPulse { 0%,100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
  .lgs-o { display: inline-block; width: 0.72em; height: 0.80em; vertical-align: baseline; margin: 0 -0.04em; overflow: visible; }
  .lgs-o svg { width: 100%; height: 100%; overflow: visible; }
  .lgs-head { transform-box: fill-box; transform-origin: 50% 100%; animation: lgsHeadTilt 2.8s ease-in-out infinite; }
  .lgs-body { transform-box: fill-box; transform-origin: 50% 50%; animation: lgsBodyPulse 2.8s ease-in-out infinite; }
  #pr-menu-btn { display: none; }
  @media (min-width: 861px) {
    #pr-chevrons { left: 68% !important; right: auto !important; top: auto !important; bottom: 20vh !important; transform: translateX(-50%) !important; }
  }
  @media (max-width: 1030px) {
    #pr-nav-links { display: none !important; }
    #pr-nav-icons { display: none !important; }
    #pr-nav-cta { display: none !important; }
    #pr-menu-btn { display: flex !important; }
    #pr-nav { padding: 16px 20px !important; }
  }
  @media (max-width: 860px) {
    html { scroll-snap-type: y proximity; }
    #pr-wrap { scroll-snap-align: start; scroll-snap-stop: always; }

  /* Taller than the 175vh the animation was authored against. The extra 21vh
     is a plateau in the middle of the services phase — the cards sit at full
     size and nothing moves, so there is room to swipe through them before
     they tuck away. On a 390x844 phone that's about 175px more scroll where
     the swipe works.

     lgsHeroProgress() in home.js freezes progress through that stretch, so
     the hero before it and the get in touch after it run over exactly the
     same pixel distances at exactly the same speed. Neither changes.

     If you change this number, nothing else needs changing — the helper
     works out the plateau from whatever height it finds. */
  #pr-wrap { height: 196vh !important; }
    #pr-headA { top: 15vh !important; padding: 0 5vw !important; }
    #pr-headA h1 { font-size: clamp(27px, 5.4vw, 44px) !important; }
    #pr-headA h1 span { white-space: normal !important; }
    #pr-bub-coplin { display: none !important; }
    #pr-heroBottom { top: 72% !important; padding: 0 6vw !important; }
    #pr-heroBottom .pr-btns, #pr-headB .pr-btns { flex-direction: column !important; align-items: center; }
    #pr-headB { top: 11vh !important; left: 6vw !important; right: 6vw !important; max-width: none !important; text-align: center; }
    #pr-headB p { max-width: none !important; margin-left: auto; margin-right: auto; }
    #pr-headB .pr-btns { align-items: stretch !important; }
    #pr-headC { top: 11vh !important; left: 0 !important; right: 0 !important; text-align: center; padding: 0 6vw; }
    #pr-banner { left: 16px !important; right: 16px !important; height: 54vh !important; }
    #pr-chevrons { bottom: 8vh !important; }
    #pr-nav-cta { display: none !important; }
  }
  @media (max-width: 1100px) {
    #pr-proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    #pr-proof-grid > .pr-proof-card:nth-child(n+4) { display: none !important; }
    #pr-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
  @media (max-width: 900px) {
    #pr-contact { grid-template-columns: 1fr !important; gap: 8vh !important; }
    #pr-office { padding-bottom: 16% !important; }
    #pr-footer { grid-template-columns: 1fr 1fr !important; gap: 32px 40px !important; }
  }
  @media (max-width: 560px) {
    #pr-footer { grid-template-columns: 1fr !important; gap: 30px !important; }
    #pr-svcmodal-card > div:nth-child(2) { grid-template-columns: repeat(2, 1fr) !important; }
    #pr-svcmodal-card { padding: 22px !important; }
  }
  @media (max-width: 860px) {
    #pr-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    #pr-proof-grid > .pr-proof-card { min-height: 0 !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; padding: 20px 18px !important; }
    #pr-proof-grid > .pr-proof-card image-slot { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; }
    #pr-proof-head { font-size: 40px !important; line-height: 1.0 !important; max-width: 100% !important; }
    #pr-proof-grid > .pr-proof-card:nth-child(n+3) { display: none !important; }
    #pr-proof-grid > .pr-proof-card { padding: 20px 18px !important; }
    #pr-proof-grid > .pr-proof-card > div:first-child { font-size: 40px !important; }
    #pr-proof-grid > .pr-proof-card [style*="font-size: 19px"] { font-size: 15px !important; }
    #pr-proof-grid > .pr-proof-card [style*="font-size: 13.5px"], #pr-proof-grid > .pr-proof-card [style*="font-size: 14px"] { font-size: 12px !important; }
    #pr-work-grid { grid-template-columns: 1fr !important; justify-items: center !important; }
    #pr-work-grid > .pr-work-card { aspect-ratio: auto !important; width: min(86vw, 300px) !important; height: calc(min(86vw, 300px) * 1.296) !important; max-width: none !important; margin: 0 0 26px !important; }
  }
  @keyframes lgsMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes logoIn { 0% { opacity: 0; transform: translateY(26px) rotate(-6deg) scale(0.9); } 100% { opacity: 1; transform: translateY(0) rotate(0deg) scale(1); } }
  .pr-logo-tile { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease; }
  .pr-logo-tile:hover { transform: translateY(-6px) rotate(-2deg) scale(1.04) !important; box-shadow: 0 16px 36px rgba(0,0,0,0.12) !important; }
  @keyframes popCard { 0% { opacity: 0; transform: translateY(24px) scale(0.94); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
  #pr-proof-grid > .pr-proof-card { min-width: 0; }
  @keyframes svcDrop { 0% { transform: translateY(-130vh) rotate(0deg); opacity: 0; } 55% { opacity: 1; } 100% { transform: translateY(0) rotate(var(--rest, 0deg)); opacity: 1; } }
  @keyframes svcLift { from { transform: translateY(0) rotate(var(--rest, 0deg)); opacity: 1; } to { transform: translateY(-130vh) rotate(0deg); opacity: 0; } }
  #pr-svc-land .pr-svc-drop { margin-left: -38px; transition: margin-left 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.45s cubic-bezier(0.22,1,0.36,1); }
  #pr-svc-land .pr-svc-drop:first-child { margin-left: 0; }
  #pr-svc-land .pr-svc-drop:hover { transform: translateY(-10px) scale(1.06) !important; z-index: 5; box-shadow: 0 26px 55px rgba(0,0,0,0.4); }
  @keyframes swipeHint { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
  @keyframes prProofIn { 0% { opacity: 0; transform: translateY(70px) rotate(-10deg) scale(0.86); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)) scale(1); } }
  @keyframes prPhotoIn { 0% { opacity: 0; transform: translateY(55px) rotate(calc(var(--rot, 0deg) - 10deg)) scale(0.9); } 100% { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)) scale(1); } }
  @keyframes bookIn { 0% { opacity: 0; transform: translateY(60px) scale(0.8) rotate(-3deg); } 60% { transform: translateY(-8px) scale(1.02) rotate(0.5deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); } }
  @keyframes bookConfetti { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(140px) rotate(320deg); opacity: 0; } }
  @media (max-width: 860px) {
    #pr-banner { height: auto !important; max-height: 92vh !important; margin-left: 12px !important; margin-right: 12px !important; }
    #pr-banner > div { padding: 26px 24px !important; justify-content: center !important; }
    #pr-banner-contact { grid-template-columns: 1fr !important; gap: 12px !important; align-items: start !important; }
    #pr-banner-contact h3 { font-size: 26px !important; margin: 0 0 10px !important; }
    #pr-banner-contact > div:first-child > div:nth-child(3) { gap: 8px !important; }
    #pr-banner-contact > div:first-child span[style*="40px"] { width: 32px !important; height: 32px !important; }
    #pr-banner-contact > div:last-child { min-height: 340px !important; height: 340px !important; }
    #pr-banner-contact > div:last-child > div:first-child img,
    #pr-banner-contact > div:last-child > div:last-child img { max-height: 300px !important; width: 100% !important; object-fit: cover !important; }
    #pr-svc-land { display: none !important; }
  }
  @media (max-height: 760px) and (min-width: 861px) {
    #pr-banner { height: auto !important; max-height: 94vh !important; bottom: 3vh !important; }
    #pr-banner > div { padding: 3vh 3vw !important; justify-content: center !important; }
    #pr-banner-contact { gap: 3vw !important; }
    #pr-banner-contact h3 { font-size: clamp(24px, 3vw, 40px) !important; margin-bottom: 14px !important; }
    #pr-banner-contact > div:first-child > div:nth-child(3) { gap: 9px !important; }
    #pr-banner-contact > div:last-child { min-height: 0 !important; height: 46vh !important; }
    #pr-svc-land { margin-bottom: 2vh !important; }
    #pr-svc-land .pr-svc-drop { width: clamp(60px, 6vw, 92px) !important; }
  }
  @media (max-width: 860px) {
    #pr-headB { max-width: 100% !important; left: 0 !important; right: 0 !important; padding: 0 6vw !important; top: 9vh !important; }
    #pr-headB h2 { white-space: normal !important; }
    #pr-headB .pr-btns { display: none !important; }
    #pr-chevrons { display: none !important; }
    #pr-headA h1 span { white-space: normal !important; }
    #pr-bub-coplin { display: none !important; }
    #pr-headB p { display: none !important; }
    #pr-headA h1 { font-size: clamp(27px, 4.4vw, 40px) !important; line-height: 1.12 !important; }
    #pr-heroBottom { top: auto !important; bottom: 4vh !important; }
    #pr-heroBottom .pr-btns { flex-direction: row !important; justify-content: center; flex-wrap: wrap; }
    #pr-heroBottom .pr-btns a { padding: 12px 20px !important; font-size: 13px !important; }
    #pr-heroBottom p { font-size: 14px !important; margin-bottom: 16px !important; }
    #pr-cm-form [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 10px !important; }
    #pr-cm-form input, #pr-cm-form textarea { font-size: 16px !important; width: 100% !important; padding: 10px 13px !important; }
    #pr-cm-form .pr-cm-step { gap: 10px !important; }
    #pr-cm-form label { gap: 4px !important; }
    #pr-tile-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 6px !important; }
    #pr-tile-grid .pr-tile > div:last-child { font-size: 9px !important; left: 4px !important; right: 4px !important; bottom: 4px !important; }
    #pr-tile-grid .pr-tile-check { width: 16px !important; height: 16px !important; top: 4px !important; right: 4px !important; }
    #pr-cm-form label:has(input[name="phone"]) { display: none !important; }
    #pr-cm-card { max-height: 94vh !important; }
    #pr-headB h2 { font-size: clamp(34px, 5vw, 48px) !important; }
    #pr-proof-head { font-size: clamp(34px, 5vw, 52px) !important; }
    #pr-footer { grid-template-columns: 1fr !important; gap: 28px !important; margin-top: 8vh !important; }
  }

@media (max-width: 860px) {
  /* Heights are left at the design's vh values on purpose.
     svh is the address-bar-VISIBLE height, so once the bar
     hides the viewport grows past the stage and a strip of
     background shows below it — a visible cut across the
     bottom of the hero. vh on iOS is the bar-hidden height,
     so the stage always covers the screen.
     The buttons clearing the bar is handled by the
     safe-area offset on #pr-heroBottom below, which is what
     actually fixed that. */
  /* No snap override here. The design snaps to the START of the
     hero. Moving it to the end put a snap point at the bottom of a
     175vh element, which yanked the page around at the 'let's talk'
     banner. scroll-snap-stop is left at the design's value. */
  /* clear the home indicator and Safari's toolbar edge: the design's
     4% leaves ~27px, which iOS covers */
  #pr-heroBottom { bottom: calc(4% + env(safe-area-inset-bottom, 0px) + 26px) !important; }
}


/* no flash of unpositioned cards on first paint */
#pr-cards-3d { visibility: hidden; }
#pr-cards-3d.lgs-cards-ready { visibility: visible; }
/* if JS never runs, don't hide them forever */
.no-js #pr-cards-3d { visibility: visible; }


@media (min-width: 861px) and (max-width: 1400px) {
  /* pull the headline and sub-copy in toward the cards */
  #pr-headA { top: 9% !important; }
  #pr-heroBottom { bottom: 8% !important; }
}
@media (min-width: 861px) and (max-width: 1400px) and (orientation: portrait) {
  #pr-stage { height: 88svh !important; }
  /* Portrait only: a shorter stage tightens the vertical gaps.
     In landscape the screen is short already and the hero should
     fill it, so the stage is left at full height there.
     #pr-wrap is never touched: the hero maths is
     (wrap.offsetHeight - innerHeight), so shortening it compresses
     the animation and fires the banner early. */
}


/* hover states, from style-hover attributes */
.h-1:hover{color: #d10a6f}
.h-2:hover{background: #f3f1ee}
.h-3:hover{transform: translateY(-2px)}
.h-4:hover{background: #d10a6f; transform: rotate(90deg)}
.h-5:hover{background: #1a1a1a}
.h-6:hover{background: rgba(255,255,255,0.35); transform: rotate(90deg)}
.h-7:hover{background: #e3ded7}
.h-8:hover{transform: translateY(-2px); background: #b00860}
.h-9:hover{color:#111}
.h-10:hover{transform: rotate(-2deg) scale(1.03); box-shadow: 0 30px 60px rgba(0,0,0,0.2); --ax: -50%}
.h-11:hover{background: #111; color: #fff}
.h-12:hover{background: #fff; color: #d10a6f}
.h-13:hover{background: #fff; color: #d10a6f; transform: translateY(-2px)}