/* Pacific North Works — site-wide styles.
   Most styling lives right on each element in index.html.
   This file holds page basics, the form fields, and phone-size adjustments. */

/* Fonts are stored in this folder (no outside font service needed).
   Both are free, open-license fonts — see fonts/OFL-*.txt */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('fonts/bricolage-grotesque.woff') format('woff');
  font-weight: 500 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree.woff') format('woff');
  font-weight: 400 700; font-style: normal; font-display: swap;
}

html { scroll-behavior: smooth; }
body { margin: 0; background: #F2F6FB; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: #2A6CB2; }
a:hover { color: #1F5590; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #8EC5FF; outline-offset: 3px;
}
section[id] { scroll-margin-top: 96px; }

/* Header stays visible while scrolling */
.site-header { position: sticky; top: 0; z-index: 10; }

/* Contact form fields */
.contact-form input, .contact-form textarea {
  font: inherit; font-weight: 400; font-size: 17px; color: #0B1F33;
  background: #FFFFFF; border: 1.5px solid #2B5B88; border-radius: 14px;
  padding: 14px 16px; box-sizing: border-box; width: 100%;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form button:hover { background: #B5D9FF !important; }
.contact-form button[disabled] { opacity: .6; cursor: wait; }

/* Tablets and phones */
@media (max-width: 860px) {
  .navlink { display: none; }
}
@media (max-width: 600px) {
  body > div { font-size: 17px; }
  .site-header img { height: 40px !important; }
  #top { padding-bottom: 72px !important; border-radius: 0 0 28px 28px !important; }
  #top > div { padding-top: 56px !important; gap: 40px !important; }
  section { padding-left: 16px !important; padding-right: 16px !important; }
  section > div, section > figure { min-width: 0; }
  #tool { padding-top: 80px !important; padding-bottom: 72px !important; }
  #services, #work, #process { padding-bottom: 72px !important; }
  /* roomy cards get tighter padding on small screens */
  #tool [style*="padding: 40px"], #work [style*="padding: 40px"],
  #work [style*="padding: 48px"], #process [style*="padding: 64px 48px"] {
    padding: 28px 22px !important;
  }
  #services [style*="padding: 32px 36px 36px"] { padding: 26px 24px 28px !important; }
  /* the three tiny clip previews: hide caption bubbles so faces stay visible */
  #work span[style*="box-shadow: 0 2px 8px"] { display: none; }
  /* "How it works": steps stack on phones, so drop the connector line */
  #process [style*="position: absolute; left: 22px"] { display: none; }
  /* keep the 4-step "Script -> Launch ad" chips on tidy rows */
  #work [style*="font-size: 14px; font-weight: 600"] { row-gap: 10px; }
  #contact > div { padding: 64px 22px 40px !important; border-radius: 28px !important; }
  #contact footer { justify-content: center !important; text-align: center; }
}