/* The Design & Print Co. refresh, 2026: menu, homepage hero, footer.
   Loads after main.css and only overrides; delete the <link> to undo. */
:root {
  --tdp-ink: oklch(16% 0.006 330);
  --tdp-ink-2: oklch(34% 0.008 330);
  --tdp-paper: oklch(98% 0.004 330);
  --tdp-muted: oklch(70% 0.008 330);
  --tdp-magenta: #d200d5;            /* the owner's footer line colour */
  --tdp-magenta-hi: oklch(66% 0.29 325);
  --tdp-cyan: oklch(70% 0.13 230);
  --tdp-yellow: oklch(92% 0.18 100);
  --tdp-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --tdp-font: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Menu: real text instead of the old grey image strip ---------- */
div#navigation { width: auto; }

ul#navigation {
  display: flex;
  gap: 2px;
  width: auto;
  height: auto;
  padding: 5px;
  border-radius: 999px;
  background: oklch(100% 0 0 / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.7), 0 10px 30px -14px oklch(16% 0.006 330 / 0.45);
}

ul#navigation > li > a,
ul#navigation > li > a:link,
ul#navigation > li > a:visited {
  width: auto !important;
  height: auto;
  padding: 10px 16px;
  border-radius: 999px;
  background: none !important;
  color: var(--tdp-ink-2);
  font: 600 13px/1 var(--tdp-font);
  letter-spacing: 0.01em;
  text-indent: 0;
  overflow: visible;
  transition: background-color 200ms ease, color 200ms ease, transform 140ms var(--tdp-ease);
}

ul#navigation > li > a span { display: none !important; }
ul#navigation > li > a:active { transform: scale(0.96); }

html body.home ul#navigation #sf_menu_0 > a,
html body.About ul#navigation #sf_menu_1 > a,
html body.Work ul#navigation #sf_menu_2 > a,
html body.Services ul#navigation #sf_menu_3 > a,
html body.Blog ul#navigation #sf_menu_4 > a,
html body.Contact ul#navigation #sf_menu_5 > a {
  background: var(--tdp-ink) !important;
  color: var(--tdp-paper);
}

@media (hover: hover) and (pointer: fine) {
  ul#navigation > li > a:hover { background: oklch(16% 0.006 330 / 0.07) !important; color: var(--tdp-ink); }
}

ul#navigation > li > a:focus-visible { outline: 2px solid var(--tdp-magenta); outline-offset: 2px; }

/* ---------- Homepage hero ---------- */
#page-wrap div.slider-text .Left { width: 520px; }

.tdp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--tdp-ink-2);
  font: 600 12px/1 var(--tdp-font);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* The logo's four inks, as a tiny key. */
.tdp-eyebrow i {
  display: inline-flex;
  gap: 3px;
}
.tdp-eyebrow i b { width: 8px; height: 8px; border-radius: 2px; }
.tdp-eyebrow i b:nth-child(1) { background: var(--tdp-cyan); }
.tdp-eyebrow i b:nth-child(2) { background: var(--tdp-magenta); }
.tdp-eyebrow i b:nth-child(3) { background: var(--tdp-yellow); }
.tdp-eyebrow i b:nth-child(4) { background: var(--tdp-ink); }

#page-wrap .slider-text h5 {
  margin: 0 0 22px;
  color: var(--tdp-ink);
  font: 800 60px/1 var(--tdp-font);
  font-weight: 800 !important;   /* main.css forces h5 to normal */
  letter-spacing: -0.035em;
  text-transform: none;
  text-wrap: balance;
}

#page-wrap .slider-text p {
  max-width: 44ch;
  margin: 0;
  color: var(--tdp-ink-2);
  font: 400 15px/1.65 var(--tdp-font);
  opacity: 1;
  filter: none;
}

/* Slide 3: the long copy shares space with the black spikes, so a soft studio-light pool
   sits behind the text and fades them back. Not a card: no edge, no shadow. */
#page-wrap .slider-text .tdp-narrow { position: relative; isolation: isolate; }
#page-wrap .slider-text .tdp-narrow::before {
  content: "";
  position: absolute;
  inset: -70px -120px -60px -160px;
  background: radial-gradient(closest-side, oklch(90% 0 0 / 0.94), oklch(90% 0 0 / 0.7) 55%, oklch(90% 0 0 / 0) 100%);
  z-index: -1;
  pointer-events: none;
}

/* Light slides (the purple one): flip to light ink. */
#page-wrap .slider-text .Light h5 { color: var(--tdp-paper); }
#page-wrap .slider-text .Light p { color: oklch(98% 0.004 330 / 0.86); }
#page-wrap .slider-text .Light .tdp-eyebrow { color: oklch(98% 0.004 330 / 0.86); }
#page-wrap .slider-text .Light .tdp-eyebrow i b:nth-child(4) { background: var(--tdp-paper); }

.tdp-hero-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

/* Shared pill button with its arrow in its own circle. */
.tdp-cta,
.tdp-cta:link,
.tdp-cta:visited {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  background: var(--tdp-ink);
  color: var(--tdp-paper) !important;
  font: 600 14px/1 var(--tdp-font);
  text-decoration: none !important;
  transition: background-color 200ms ease, transform 160ms var(--tdp-ease);
}

.tdp-cta__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--tdp-magenta);
  color: #fff;
  transition: transform 260ms var(--tdp-ease);
}

.tdp-cta:active { transform: scale(0.97); }

.tdp-link,
.tdp-link:link,
.tdp-link:visited {
  color: var(--tdp-ink) !important;
  font: 600 14px/1 var(--tdp-font);
  text-decoration: none !important;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px;
  transition: color 200ms ease;
}

.Light .tdp-cta { background: var(--tdp-paper); color: var(--tdp-ink) !important; }
.Light .tdp-link { color: var(--tdp-paper) !important; }

@media (hover: hover) and (pointer: fine) {
  .tdp-cta:hover .tdp-cta__icon { transform: translate(2px, -2px); }
  .tdp-link:hover { color: var(--tdp-magenta) !important; }
}

.tdp-cta:focus-visible,
.tdp-link:focus-visible { outline: 2px solid var(--tdp-magenta); outline-offset: 3px; }

/* Slide dots become slim bars; the current one stretches and takes the magenta. */
div.anythingSlider .thumbNav { display: flex; gap: 8px; }
div.anythingSlider .thumbNav li { margin: 0; }
div.anythingSlider .thumbNav a,
div.anythingSlider.activeSlider .thumbNav a,
element.style div.anythingSlider .thumbNav a.cur {
  width: 22px;
  height: 4px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  background: oklch(16% 0.006 330 / 0.22) !important;
  background-image: none !important;
  transition: width 320ms var(--tdp-ease), background-color 200ms ease;
}
div.anythingSlider .thumbNav a.cur,
div.anythingSlider.activeSlider .thumbNav a.cur {
  width: 44px;
  background: var(--tdp-magenta) !important;
}
div.anythingSlider .thumbNav a span { display: none; }

/* Fade the copy in each time a slide arrives. */
@media (prefers-reduced-motion: no-preference) {
  #page-wrap .activePage .slider-text .Left > * {
    animation: tdp-rise 700ms var(--tdp-ease) both;
  }
  #page-wrap .activePage .slider-text .Left > :nth-child(2) { animation-delay: 60ms; }
  #page-wrap .activePage .slider-text .Left > :nth-child(3) { animation-delay: 120ms; }
  #page-wrap .activePage .slider-text .Left > :nth-child(4) { animation-delay: 180ms; }
}

@keyframes tdp-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Footer ---------- */
#footer.tdp-footer {
  width: auto;
  max-width: 1040px;
  height: auto;
  padding: 112px 40px 0;
  color: var(--tdp-muted);
  font: 400 14px/1.7 var(--tdp-font);
}

.tdp-footer__lead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 64px;
  border-bottom: 1px solid oklch(100% 0 0 / 0.1);
}

.tdp-footer .tdp-eyebrow { color: var(--tdp-muted); }
.tdp-footer .tdp-eyebrow i b:nth-child(4) { background: var(--tdp-paper); }

.tdp-footer__statement {
  margin: 0;
  color: var(--tdp-paper);
  font: 800 52px/1.05 var(--tdp-font);
  font-weight: 800 !important;
  letter-spacing: -0.035em;
  text-transform: none;
  text-wrap: balance;
}

.tdp-footer__statement span { color: var(--tdp-muted); font-weight: 500 !important; }

.tdp-footer__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  flex-shrink: 0;
}

.tdp-footer .tdp-cta { background: var(--tdp-paper); color: var(--tdp-ink) !important; }

.tdp-footer__phone,
.tdp-footer__phone:link,
.tdp-footer__phone:visited {
  color: var(--tdp-paper) !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: color 200ms ease;
}

.tdp-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr;
  gap: 40px;
  padding: 56px 0 64px;
}

.tdp-footer__logo { display: block; margin-bottom: 18px; }
.tdp-footer__logo img { display: block; height: 64px; width: auto; }
.tdp-footer__brand p { max-width: 30ch; margin: 0; }

.tdp-footer__title {
  margin: 0 0 16px;
  color: var(--tdp-paper);
  font: 700 12px/1 var(--tdp-font);
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.tdp-footer ul { margin: 0; padding: 0; list-style: none; }
.tdp-footer li { margin: 0 0 8px; padding: 0; background: none; border: 0; }

.tdp-footer__col a,
.tdp-footer__col a:link,
.tdp-footer__col a:visited,
.tdp-footer__base a,
.tdp-footer__base a:link,
.tdp-footer__base a:visited {
  color: var(--tdp-muted) !important;
  text-decoration: none !important;
  transition: color 200ms ease;
}

.tdp-footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 26px 0 34px;
  border-top: 1px solid oklch(100% 0 0 / 0.1);
  font-size: 13px;
}

.tdp-footer__base p { margin: 0; }
.tdp-footer__base nav { display: flex; gap: 24px; }

@media (hover: hover) and (pointer: fine) {
  .tdp-footer__phone:hover,
  .tdp-footer__col a:hover,
  .tdp-footer__base a:hover { color: var(--tdp-magenta-hi) !important; }
}

.tdp-footer a:focus-visible { outline: 2px solid var(--tdp-magenta); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 900px) {
  #footer.tdp-footer { padding: 88px 20px 0; }
  .tdp-footer__lead { flex-direction: column; align-items: flex-start; }
  .tdp-footer__actions { align-items: flex-start; }
  .tdp-footer__statement { font-size: 38px; }
  .tdp-footer__grid { grid-template-columns: 1fr 1fr; }
  .tdp-footer__base { flex-direction: column; align-items: flex-start; }
}

/* About: the ink drops live in the 800px background picture; keep the page tall enough to show them
   now that the client logo strip is gone. */
#wrapper.About { min-height: 800px; }