/* Kook Stack static-site overrides. Edit this file, not the theme CSS. */
.author_company, .author_company a { text-transform: none !important; }
.author_company a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

/* Contact form: black fields, white uppercase text, matching gutters (Shawn mockup 2026-08-29) */
.wpcf7-form .two_columns_50_50 { display: flex; gap: 20px; }
.wpcf7-form .two_columns_50_50 .column1, .wpcf7-form .two_columns_50_50 .column2 { width: 50%; float: none; padding: 0; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; margin: 0 0 20px; }
.wpcf7-form input.wpcf7-text, .wpcf7-form textarea.wpcf7-textarea {
  width: 100%; box-sizing: border-box; background: #000 !important; color: #fff !important; border: 0 !important;
  border-radius: 0; padding: 12px 14px; margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.wpcf7-form textarea.wpcf7-textarea { min-height: 150px; resize: vertical; }
.wpcf7-form ::placeholder { color: #fff !important; opacity: 1; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus { outline: 2px solid #e30613; outline-offset: -2px; }
.wpcf7-form input.wpcf7-submit, .wpcf7-form .wpcf7-submit {
  background: #000 !important; color: #fff !important; border: 0 !important; border-radius: 0; padding: 12px 22px; margin: 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.wpcf7-form .wpcf7-submit:hover { background: #e30613 !important; }
@media (max-width: 768px) { .wpcf7-form .two_columns_50_50 { display: block; } .wpcf7-form .two_columns_50_50 .column1, .wpcf7-form .two_columns_50_50 .column2 { width: 100%; } }

/* Footer: centre the logo on mobile */
@media (max-width: 768px) { .footer_bottom .wp-block-image, .footer_bottom img, .footer_bottom figure { margin-left: auto !important; margin-right: auto !important; text-align: center; } }
.wpcf7-form .two_columns_50_50 .column_inner { padding: 0 !important; margin: 0 !important; }
.wpcf7-form ::placeholder { text-transform: uppercase; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: .08em; }

/* Self-hosted video (replaces Vimeo/RevSlider). Cropped band on desktop, uncropped on mobile. */
.ks-video-wrap { width: 100%; aspect-ratio: 1920 / 740; overflow: hidden; background: #000; line-height: 0; }
.ks-video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .ks-video-wrap { aspect-ratio: 16 / 9; } .ks-video { object-fit: contain; } }

/* Contact section per Shawn mockup 2026-08-29 (round 2): block title like CREATIVE CLIENTS, flush field row, compact SEND */
.elementor-element-c5cbfa1 h3.qodef-m-title { display: inline-block; background: #000; color: #fff; padding: 0; margin: 0 0 20px;
  font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: var(--e-global-typography-primary-font-weight, 700); }
.wpcf7-form .two_columns_50_50 { padding: 0 !important; margin: 0 !important; }
.wpcf7-form input.wpcf7-submit, .wpcf7-form .wpcf7-submit { padding: 0 6px !important; line-height: 1.2; font-family: var(--e-global-typography-primary-font-family), sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0; }
.wpcf7-form .two_columns_50_50 .column1, .wpcf7-form .two_columns_50_50 .column2 { flex: 1 1 0 !important; width: auto !important; max-width: none !important; }
.wpcf7-form input.wpcf7-submit, .wpcf7-form .wpcf7-submit { font-family: var(--e-global-typography-primary-font-family), sans-serif !important; font-size: 24px !important; font-weight: 700 !important; padding: 2px 6px !important; }
.wpcf7-form .two_columns_50_50::before, .wpcf7-form .two_columns_50_50::after { display: none !important; content: none !important; }

/* Punch list 2026-08-29 (2): form field text + placeholders match testimonial author name (.testimonial_author: Hind 16px/400) */
.wpcf7-form input.wpcf7-text, .wpcf7-form textarea.wpcf7-textarea, .wpcf7-form ::placeholder {
  font-family: 'Hind', sans-serif !important; font-weight: 400 !important; font-size: 16px !important;
  letter-spacing: normal !important; text-transform: none !important; line-height: 1.4 !important; }

/* Punch list (5) mobile: show side-area opener below 1000px (theme collapses .header_inner_right) */
@media only screen and (max-width: 1000px) {
  header .header_inner_right { display: block !important; position: fixed; top: 0; right: 0; z-index: 9999; }
  header .side_menu_button_wrapper { display: table !important; height: 80px; }
  header .side_menu_button { display: table-cell !important; vertical-align: middle; padding: 0 20px; }
  header .side_menu_button > a.side_menu_button_link { display: inline-block !important; }
  header .side_menu_button_link svg { width: 26px; height: 13px; fill: #000; }
}

/* Mobile follow-up (A) 2026-08-30: full-width flyout on small phones.
   An inline style block hardcodes .side_menu_slide_from_right .side_menu width:490px
   (Bridge side-area width option), beating the theme's own max-768 width:100% rule,
   so on narrow phones the panel hangs off-screen left and its centered content looks
   shifted. Closed/open right values (-100% / 0) are already correct at mobile. */
@media only screen and (max-width: 500px) {
  .side_menu_slide_from_right .side_menu { width: 100vw !important; }
}

/* Mobile follow-up (B) 2026-08-30: landscape-phone hero text too large, covers image.
   Scoped to landscape + short viewports only (phones sideways); portrait phones,
   tablets (both orientations) and desktop all have height > 500px and are untouched.
   RS 1024-grid scales layers by width, so sizes/positions are restated in vw at ~62%
   of RS-computed values (base 930px wide: 73/53/109px fonts, tops 114/209/279).
   Tops are re-stacked so the three red boxes stay tight after the shrink.
   Layer ids: 4=SPECIALIZING, 3=IN ALL THINGS, 5=EXCITING. */
@media only screen and (orientation: landscape) and (max-height: 500px) {
  #slider-3-slide-5-layer-4 { font-size: 4.87vw !important; line-height: 6.06vw !important; }
  #slider-3-slide-5-layer-3 { font-size: 3.53vw !important; line-height: 4.40vw !important; }
  #slider-3-slide-5-layer-5 { font-size: 7.27vw !important; line-height: 7.60vw !important; }
  #slider-3-slide-5-layer-3, #slider-3-slide-5-layer-4, #slider-3-slide-5-layer-5 {
    width: auto !important; text-align: left !important; padding: 0 .35em !important; white-space: nowrap !important; }
  rs-layer-wrap:has(#slider-3-slide-5-layer-4) { top: 12.26vw !important; }
  rs-layer-wrap:has(#slider-3-slide-5-layer-3) { top: 18.52vw !important; }
  rs-layer-wrap:has(#slider-3-slide-5-layer-5) { top: 23.12vw !important; }
}

/* Follow-up 2026-08-30 pt2: landscape-short hero bg raised so horizon sits just
   below the text block instead of below the fold (module is 700px tall, short
   viewports were cropping to sky). Scoped to same landscape-short query. */
@media only screen and (orientation: landscape) and (max-height: 500px) {
  #rev_slider_3_1 rs-sbg-px { transform: translateY(-130px) !important; }
}

/* Follow-up 2026-08-30 pt2: flyout panel scrolls itself on short viewports.
   Theme pins inline overflow-y:hidden and closes the side area on page scroll,
   so on phones-in-landscape the flyout content below the fold was unreachable.
   Contained overscroll keeps the gesture inside the panel. */
@media only screen and (max-height: 640px) {
  .side_menu { overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    touch-action: pan-y !important; overscroll-behavior: contain; }
}