/* ===== Trunk Creative header (added Nov 2, 2026) ===== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap');

/* Desktop logo: smaller, with breathing room top & bottom */
.tm-header .uk-logo { padding-top: 14px; padding-bottom: 14px; }
.tm-header .uk-logo img { width: 86px; height: auto; }

/* Desktop menu: charcoal IBM Plex Mono, gold underline on hover/current page */
.tm-header .uk-navbar-nav > li > a {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 13.5px; font-weight: 500; letter-spacing: .1em;
  color: #2B2B2B;
}
.tm-header .uk-navbar-nav > li > a:hover,
.tm-header .uk-navbar-nav > li.uk-active > a {
  color: #2B2B2B;
  text-decoration: underline; text-decoration-color: #F8B81A;
  text-decoration-thickness: 3px; text-underline-offset: 8px;
}
.uk-navbar-dropdown-nav > li > a { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; color: #2B2B2B; }

/* Mobile header logo */
.tm-header-mobile .uk-logo { padding-top: 8px; padding-bottom: 8px; }
.tm-header-mobile .uk-logo img { width: 60px; height: auto; }


/* ===== Mobile & tablet home banner (added Nov 2, 2026) ===== */
@media (max-width: 960px) {
  /* Gold brush stroke along the bottom of the slideshow, replacing the flat gold bar */
  .tc-hero-show .showcase { border-bottom: 0 !important; }
  .tc-hero-show .frame::after {
    content: ""; position: absolute; left: -12%; right: -12%; top: calc(300px - 24px); height: 46px; z-index: 4; pointer-events: none;
    background: url("https://trunkcreative.com/wp-content/uploads/2026/11/trunk-brush-stroke-wide.webp") no-repeat center / 100% 100%;
    transform: rotate(-1.2deg);
  }
  /* Hide the service / client caption tags on smaller screens */
  .tc-hero-show figcaption { display: none !important; }
}

/* ===== Mobile menu: bigger white text, gray when tapped (added Nov 2, 2026) ===== */
#tm-dialog-mobile .uk-nav > li > a {
  font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  font-size: 19px; font-weight: 500; letter-spacing: .08em;
  color: #FFFFFF; padding: 14px 0;
  -webkit-tap-highlight-color: transparent;
}
#tm-dialog-mobile .uk-nav > li > a:hover,
#tm-dialog-mobile .uk-nav > li > a:focus,
#tm-dialog-mobile .uk-nav > li > a:active { color: #9A9A9A; }
#tm-dialog-mobile .uk-nav .uk-nav-sub { padding: 2px 0 10px 14px; border-left: 2px solid #F8B81A; margin-left: 2px; }
#tm-dialog-mobile .uk-nav .uk-nav-sub a { font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: .05em; color: #FFFFFF; padding: 7px 0; display: block; }
#tm-dialog-mobile .uk-nav .uk-nav-sub a:active, #tm-dialog-mobile .uk-nav .uk-nav-sub a:hover { color: #9A9A9A; }
#tm-dialog-mobile .uk-offcanvas-close { color: #FFFFFF; }


/* ===== Gold dashed dividers between Graphic Design services (added Nov 2, 2026) ===== */
/* Desktop dropdown */
.tm-header .uk-navbar-dropdown-nav > li + li { border-top: 1.5px dashed #F8B81A; }
.tm-header .uk-navbar-dropdown-nav > li > a { padding: 10px 0; font-size: 13px; letter-spacing: .06em; }
.tm-header .uk-navbar-dropdown { width: 270px; }
.tm-header .uk-navbar-dropdown-nav > li > a { white-space: nowrap; }
/* Mobile menu */
#tm-dialog-mobile .uk-nav .uk-nav-sub > li + li { border-top: 1.5px dashed #F8B81A; }


/* ===== Home headline: bigger + bolder (added Nov 2, 2026) ===== */
.page-id-4 .tc .hero.photo h1 { font-size: clamp(50px, 6.3vw, 104px); -webkit-text-stroke: .022em currentColor; letter-spacing: .015em; line-height: .95; }
.page-id-4 .tc .hero.photo h1 .h1sub { -webkit-text-stroke: 0; letter-spacing: 0; line-height: 1.3; }
@media (max-width: 960px) { .page-id-4 .tc .hero.photo h1 { font-size: clamp(50px, 17.5vw, 84px); } }
/* Keep the hero copy clear of the brush divider on laptop widths */
@media (min-width: 961px) { .page-id-4 .tc .hero.photo .copy { max-width: min(520px, calc(34vw - 24px)); } }
@media (min-width: 961px) and (max-width: 1280px) { .page-id-4 .tc .hero.photo .btns { gap: 12px; } .page-id-4 .tc .hero.photo .btn { padding: 14px 18px; font-size: 12.5px; } }

/* Page jump links: gold underline (all service pages, desktop + mobile) */
body .tc section.jump a { border-bottom: 2px solid #F8B81A; padding-bottom: 3px; }
body .tc section.jump a:hover, body .tc section.jump a:focus-visible { color: #F8B81A; }

/* Home "What we do": light gold accents */
body.page-id-4 .tc #services h2::after { content: ""; display: block; width: clamp(170px, 18vw, 260px); height: clamp(16px, 1.7vw, 24px); margin-top: clamp(12px, 1.2vw, 18px); background: url("https://trunkcreative.com/wp-content/uploads/2026/11/headline-brush-stroke.png") no-repeat 0 50% / 100% 100%; }
body.page-id-4 .tc #services .svcgrid .n { font-family: 'Bebas Neue', Impact, sans-serif; font-size: 38px; line-height: 1; letter-spacing: 0; color: #F8B81A; -webkit-text-stroke: 1.2px #2B2B2B; }
body.page-id-4 .tc #services .svcgrid .pic { position: relative; }
body.page-id-4 .tc #services .svcgrid .pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: #F8B81A; transition: height .2s ease; }
body.page-id-4 .tc #services .svcgrid a:hover .pic::after, body.page-id-4 .tc #services .svcgrid a:focus-visible .pic::after { height: 8px; }
body.page-id-4 .tc #services .svcgrid .go { border-bottom: 2px solid #F8B81A; padding-bottom: 3px; display: inline-block; width: auto; align-self: flex-start; justify-self: start; }

/* Home "What we do": gentle image zoom on hover */
body.page-id-4 .tc #services .svcgrid .pic { overflow: hidden; }
body.page-id-4 .tc #services .svcgrid .pic img { transition: transform .5s ease; }
body.page-id-4 .tc #services .svcgrid a:hover .pic img, body.page-id-4 .tc #services .svcgrid a:focus-visible .pic img { transform: scale(1.07); }
@media (prefers-reduced-motion: reduce) { body.page-id-4 .tc #services .svcgrid .pic img { transition: none; } body.page-id-4 .tc #services .svcgrid a:hover .pic img { transform: none; } }

/* Home: thin charcoal line between the header and the hero slider */
body.page-id-4 .tm-header, body.page-id-4 .tm-header-mobile { border-bottom: 1.5px solid #2B2B2B; }