/* ==========================================================
   Custom changes made after leaving Webflow.
   Kept in this one file so the original Webflow styles
   stay untouched and every change is easy to find or undo.
   ========================================================== */

/* Menu overlay: links and email centered on the screen */
.nav-links-wrapper { align-items: center; text-align: center; }
.nav-link-inner { justify-content: center; }
.nav-hover-line { left: 50%; right: auto; transform: translateX(-50%); }   /* hover line grows from the center */
.nav-bottom-block { justify-content: center; }
.nav-menu-block .mail-link-bottom-line { margin-left: auto; margin-right: auto; }
@media screen and (max-width: 767px) {
  .nav-bottom-block { align-items: center; }
}

/* Menu overlay: cover the full screen and keep the page behind from showing through */
.nav-menu-block { height: 100vh; height: 100dvh; background-color: rgba(255, 255, 255, 0.94); }

/* Accessibility: the site's gray text color darkened to pass contrast on white
   (4.86:1, was 3.18:1). Used by project info labels, slider captions and CTA text. */
:root { --colors--gray: #6b727c; }

/* Headings were retagged for a correct outline (h1 > h2 > h3).
   These classes keep each one looking exactly as it did before. */
.look-h2 { font-size: var(--_typography---heading-02--h2-font-size); line-height: var(--_typography---heading-02--h2-line-height); letter-spacing: var(--_typography---heading-02--h2-letter-spacing); min-width: 0; }
.look-h3 { font-size: var(--_typography---heading-03--h3-font-size); line-height: var(--_typography---heading-02--h2-line-height); letter-spacing: var(--_typography---heading-03--h3-letter-spacing); }
.look-h4 { font-size: var(--_typography---heading-04--h4-font-size); line-height: var(--_typography---heading-04--h4-line-height); letter-spacing: var(--_typography---heading-04--h4-letter-spacing); }
main { display: block; }
.look-h5 { font-size: var(--_typography---hedaing-05--h5-font-size); line-height: var(--_typography---hedaing-05--h5-line-height); letter-spacing: var(--_typography---hedaing-05--h5-letter-spacing); }

/* Image sliders (CVS ID.me, Rexel PLP): the wrapper used to size itself from
   its images. On a first visit the images weren't loaded yet, so the slider
   was built at zero width and only one slide worked until a refresh.
   A fixed width lets it measure correctly right away. */
.project-images-wrapper._03 { width: 100%; }

/* Slider pagination dots: smaller (10px, was 16px) with more space between them
   (12px gap, set by data-nav-spacing="6" on the slider in the HTML). */
.slide-nav-2 .w-slider-dot { width: 10px; height: 10px; }
.slide-nav-2 .w-slider-dot:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #222; }
/* CVS: active dot uses the blue from the CVS header image */
.slider-cvs .slide-nav-2 .w-slider-dot.w-active { background-color: #1164b5; }
.slider-cvs .slide-nav-2 .w-slider-dot:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1164b5; }

/* ----------------------------------------------------------
   Menu open/close motion (replaces Webflow's slide-down).
   Opens with a quick fade and the links rise in one after another;
   closes with a short fade (timed by the small script at the end of each page).
   ---------------------------------------------------------- */
@keyframes tpMenuIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tpMenuOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes tpRiseIn  { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes tpIconIn  { from { opacity: 0; transform: rotate(-90deg) scale(.6); } to { opacity: 1; transform: none; } }
.nav-menu-block[data-nav-menu-open] { animation: tpMenuIn .35s cubic-bezier(.22,1,.36,1) both; }
.nav-menu-block[data-nav-menu-open] .nav-link,
.nav-menu-block[data-nav-menu-open] .mail-link { animation: tpRiseIn .6s cubic-bezier(.22,1,.36,1) both; }
.nav-menu-block[data-nav-menu-open] .nav-link:nth-child(1) { animation-delay: .06s; }
.nav-menu-block[data-nav-menu-open] .nav-link:nth-child(2) { animation-delay: .12s; }
.nav-menu-block[data-nav-menu-open] .nav-link:nth-child(3) { animation-delay: .18s; }
.nav-menu-block[data-nav-menu-open] .mail-link { animation-delay: .26s; }
html.tp-menu-closing .nav-menu-block[data-nav-menu-open] { animation: tpMenuOut .22s cubic-bezier(.4,0,.2,1) both; }
.nav-menu-open-button, .nav-menu-close-button { animation: tpIconIn .35s cubic-bezier(.22,1,.36,1); }
html.tp-menu-closing .nav-menu-close-button { display: none !important; }
html.tp-menu-closing .nav-menu-open-button { display: flex !important; }
@media (prefers-reduced-motion: reduce) {
  .nav-menu-block[data-nav-menu-open], .nav-menu-block[data-nav-menu-open] *,
  .nav-menu-open-button, .nav-menu-close-button { animation: none !important; }
}

/* ----------------------------------------------------------
   Homepage hero: live text instead of the "Hi, I'm Terrence" image.
   Sized to match the old graphic: 704px wide at most, scaling down
   with the screen. Inter Display, already part of the site.
   ---------------------------------------------------------- */
.hero-title { min-width: 0; width: 100%; max-width: 704px; margin: 0 auto; container-type: inline-size;
  font-family: Interdisplay, Arial, sans-serif; color: #000; text-align: left; line-height: 1; font-size: 16px; }
.hero-title-hi, .hero-title-name { display: block; line-height: 1; }
.hero-title-name { font-size: min(167.5px, calc((100vw - 64px) * .2379)); font-size: 23.79cqi;
  font-weight: 700; letter-spacing: .0236em; white-space: nowrap; margin: -.188em 0 -.078em -.012em; }
.hero-title-hi { font-size: min(71.2px, calc((100vw - 64px) * .1011)); font-size: 10.11cqi;
  font-weight: 600; padding-left: 1.828em; margin-top: -.077em; }