/* GENERATED — do not edit.
   Source: 21 Knots Design System/ui_kits/site/site.css
   Built by build-css.mjs, which strips the space after the colon inside every
   [style*="…"] selector so the rules match server-rendered markup. */

/* ====================================================
   21 Knots — UI kit shared styles
   ==================================================== */

/* Reserve the scrollbar gutter at all times. Short pages (the Integrations
   and Managed Support tracks, which carry no testimonial carousel) otherwise
   drop the scrollbar and the whole layout jumps right by its width. */
html { scrollbar-gutter: stable; }

/* tiny shared button press affordance */
.btn-press { transition: transform var(--duration-fast) var(--ease-standard),
                         opacity   var(--duration-fast) var(--ease-standard); }
.btn-press:active { transform: scale(0.95); }
.tk-link { cursor: pointer; }

/* ====================================================
   Hover + focus — design system rules, applied globally
   so every control gets them, not just the .btn classes.
   Hover: 0.05 opacity drop. Focus: 2 px teal ring, always visible.
   ==================================================== */
button:hover, a:hover, .tk-link:hover { opacity: 0.95; }
button:disabled:hover { opacity: 1; }

:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 2px;
}

/* Smooth image rendering for the partner badges */
img { -webkit-user-drag: none; }

/* ====================================================
   Nautical imagery treatment
   The brand photography in assets/photography/ is already
   black-and-white film, so no filter is applied. The
   grayscale fallback stays for any colour image dropped in.
   ==================================================== */
.kn-photo {
  filter: grayscale(1);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kn-photo-frame {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-tile-3);
}
/* Testimonial carousel fade */
@keyframes kn-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* On narrow screens the quote well no longer needs as much reserved height */
@media (max-width: 640px) {
  div[style*="min-height:340"] { min-height: 220px !important; }
}

/* Placeholder for user-supplied imagery — dashed frame */
.kn-photo-slot {
  border: 2px dashed rgba(31, 179, 166, 0.5);
  background: repeating-linear-gradient(
    45deg,
    rgba(31,179,166,0.03),
    rgba(31,179,166,0.03) 10px,
    rgba(31,179,166,0.06) 10px,
    rgba(31,179,166,0.06) 20px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-deep);
  font: 500 13px/1.4 var(--font-body);
  text-align: center;
  padding: 24px;
  border-radius: var(--radius-md);
  min-height: 200px;
}


/* ====================================================
   RESPONSIVE — Tablet (≤960 px) and Mobile (≤640 px)
   The marketing screens use inline grid styles for clarity;
   we override them here with attribute selectors + !important.

   NOTE: these selectors match how React serialises inline styles IN THE
   BROWSER — "font: 600 64px", with a space after the colon. The production
   build in ~/Projects/21knots-site is server-rendered, where React omits that
   space, so its copy of this file is generated with the spaces stripped out of
   every [style*="…"]. Keep that in mind before copying rules between the two.
   ==================================================== */

/* ---------- Tablet : ≤ 960 px ---------- */
@media (max-width: 960px) {
  /* 3-column grids → 2 columns */
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="gridTemplateColumns:'repeat(3, 1fr)'"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 5-column footer → 2 cols */
  [style*="grid-template-columns:repeat(5, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Section vertical padding shrinks */
  section { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ---------- Mobile : ≤ 640 px ---------- */
@media (max-width: 640px) {
  /* Hamburger menu: hide desktop links + CTA, show hamburger */
  .kn-nav-links { display: none !important; }
  .kn-nav-cta   { display: none !important; }
  .kn-hamburger { display: flex !important; }

  /* All multi-column grids collapse to a single column.
     The weighted two-column heros (1.15fr 1fr and friends) need naming
     explicitly — they are not "1fr 1fr" and were being left side-by-side. */
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:1.2fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr"],
  [style*="grid-template-columns:1fr 1.2fr"],
  [style*="grid-template-columns:1fr 1.35fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2, 1fr)"],
  [style*="grid-template-columns:repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Tighter tile padding on phones */
  section {
    padding: 56px 18px !important;
  }

  /* --- Headlines scale down --- */
  /* h1 hero: 64 → 36 */
  h1[style*="font:600 64px"] { font: 600 36px/1.10 var(--font-display) !important; letter-spacing: -0.02em !important; }
  /* h1 page heads: 56 → 32 */
  h1[style*="font:600 56px"] { font: 600 32px/1.10 var(--font-display) !important; letter-spacing: -0.02em !important; }
  /* h1 page heads: 48 → 30 */
  h1[style*="font:600 48px"] { font: 600 30px/1.12 var(--font-display) !important; letter-spacing: -0.02em !important; }
  /* h2 inner heads: 40 → 26 */
  h2[style*="font:600 40px"] { font: 600 26px/1.15 var(--font-display) !important; letter-spacing: -0.012em !important; }
  /* h3 card heads: 28 → 22 */
  h3[style*="font:600 28px"] { font: 600 22px/1.18 var(--font-display) !important; letter-spacing: -0.011em !important; }
  /* h3 module heads: 21 → 19 */
  h3[style*="font:600 21px"] { font: 600 19px/1.20 var(--font-display) !important; }
  /* Big stat numbers: 40 → 28 */
  [style*="font:600 40px/1 var(--font-display)"] { font: 600 28px/1 var(--font-display) !important; }
  /* Lead paragraphs: 24 → 17 */
  p[style*="font:400 24px"] { font: 400 17px/1.45 var(--font-body) !important; }
  /* Lead paragraphs: 22 → 17 */
  p[style*="font:400 22px"] { font: 400 17px/1.45 var(--font-body) !important; }
  /* Lead paragraphs: 20 → 17 */
  p[style*="font:400 20px"] { font: 400 17px/1.45 var(--font-body) !important; }
  /* Pull-quote: 32 → 22 */
  p[style*="font:300 32px"] { font: 300 22px/1.30 var(--font-display) !important; }
  /* Carousel quote: 22 → 18 */
  p[style*="font:300 22px"] { font: 300 18px/1.45 var(--font-display) !important; }
  /* Large section paragraphs: 21 → 17 */
  p[style*="font:400 21px"] { font: 400 17px/1.45 var(--font-body) !important; }
  /* Section heads that sit between the scales */
  h2[style*="font:600 44px"] { font: 600 26px/1.15 var(--font-display) !important; }
  h2[style*="font:600 36px"] { font: 600 26px/1.15 var(--font-display) !important; }
  h2[style*="font:600 34px"] { font: 600 24px/1.2 var(--font-display) !important; }
  h2[style*="font:600 32px"] { font: 600 24px/1.2 var(--font-display) !important; }
  div[style*="font:600 26px"] { font: 600 22px/1.2 var(--font-display) !important; }

  /* Manual <br/> in heros stays on phones. Hiding it joined the words
     either side ("your agencyto wrestle") because there is no whitespace
     around the tag — the headline wraps fine on its own at 36 px. */

  /* Buttons stack on narrow screens */
  div[style*="display:flex"][style*="gap:14"] { flex-wrap: wrap !important; }

  /* Tabs / chips: horizontal scroll instead of wrap */
  div[style*="display:flex"][style*="gap:12"][style*="flex-wrap"] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  div[style*="display:flex"][style*="gap:12"][style*="flex-wrap"]::-webkit-scrollbar { display: none; }

  /* Sub-nav frosted bar shrinks */
  div[style*="height:64px"][style*="position:sticky"] {
    padding: 0 16px !important;
    overflow-x: auto;
  }

  /* Global nav: shrink gap, allow nav links to ellipsis-truncate */
  nav[style*="height:56px"][style*="#2b3b3b"] {
    gap: 14px !important;
    padding: 0 14px !important;
  }
}


/* ====================================================
   Schedule — the "who you're booking with" bar above the Calendly embed.
   Side-by-side on a phone it wraps into a ragged three-line block with the
   button stranded on the left, so stack and centre it instead.
   ==================================================== */
@media (max-width: 720px) {
  .kn-sched-head {
    flex-direction: column;
    justify-content: center !important;
    text-align: center;
    gap: 14px !important;
  }
  .kn-sched-who {
    flex-direction: column;
    gap: 6px !important;
    text-align: center;
  }
}

/* The separator belongs only to the single-line layout */
@media (min-width: 721px) {
  .kn-sched-role::before { content: '\00b7\00a0'; }
}

/* ====================================================
   Footer — real classes, not style matching.
   The outer grid is "logo column + links column"; left alone on a phone it
   squeezes the tagline into one word per line. Link groups read better two-up
   than as one long stack.
   ==================================================== */
@media (max-width: 860px) {
  .kn-footer-top {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    margin-bottom: 32px !important;
  }
  .kn-footer-cols {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 24px !important;
  }
}
@media (max-width: 380px) {
  .kn-footer-cols { grid-template-columns: 1fr !important; }
}


/* ---------- Mobile nav: hide secondary global-nav links on phones ---------- */
/* Handled by the kn-* classes inside GlobalNav.jsx — see the @media (max-width: 640px) block above. */