/* Shared site styles — 2026 redesign.
   The design ships as inline styles on each page; this file holds the
   shared tokens (--px gutter), hover behaviours, the logo marquee, and
   responsive overrides that target style-attribute substrings (which
   must win with !important). */

/* Shared cross-site tokens: content width and gutter match the classes site
   (and closely the comedy site), so the three Inconspicuous sites line up. */
:root { --px: clamp(20px, 4vw, 56px); }

/* full-bleed sections: backgrounds span the viewport, content centres at 1320px */
.wrap { max-width: 1320px; margin-left: auto; margin-right: auto; }

img { max-width: 100%; }
/* anchor jumps land below the sticky header */
[id] { scroll-margin-top: 112px; }

/* ---- accessibility ---- */
/* skip link: hidden above the viewport until keyboard focus lands on it */
.skip-link { position: fixed; top: -100px; left: 0; z-index: 100; background: #ffc857; color: #011c27; border: 1.5px solid #011c27; border-top: none; border-radius: 0 0 10px 0; padding: 14px 22px; font: 600 14px/1 'Instrument Sans', sans-serif; }
.skip-link:focus { top: 0; }
/* two-tone focus ring reads on light, navy and purple backgrounds alike */
:focus-visible { outline: 3px solid #ffc857; outline-offset: 1px; box-shadow: 0 0 0 1px #011c27, 0 0 0 5px #011c27; }
/* nav and footer text links get a comfortable hit area without moving layout */
.utility-bar a, .nav-links > a, .nav-dropdown-toggle { padding: 10px 2px; margin: -10px -2px; }
[role="contentinfo"] a:not([aria-label]) { display: inline-block; padding: 6px 0; margin: -6px 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
button { font-family: inherit; }

/* pill buttons lift on hover */
.btn { display: inline-block; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 #011c27; }

/* bordered cards slide out an offset navy shadow */
.card { transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 #011c27; }

/* team photos: grayscale multiplied onto palette colours, colour on hover */
.team-photo { filter: grayscale(1) contrast(1.05); mix-blend-mode: multiply; transition: filter .25s ease; }
.team-card:hover .team-photo { filter: none; mix-blend-mode: normal; }

/* client logo marquee */
@keyframes incon-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 72px; padding-right: 72px; align-items: center; width: max-content; animation: incon-marquee 50s linear infinite; }

/* nav About dropdown: opens on hover or keyboard focus */
.nav-dropdown { position: relative; }
.nav-dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: 14px; display: none; z-index: 60; }
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }
.nav-dropdown-inner { background: #fff; border: 1.5px solid #011c27; border-radius: 10px; box-shadow: 4px 4px 0 #011c27; padding: 8px; min-width: 160px; }
.nav-dropdown-inner a { display: block; padding: 11px 14px; border-radius: 100px; white-space: nowrap; }
.nav-dropdown-inner a:hover { background: #e1d0ec; color: #011c27; }

/* skills menu picker on the catalogue page */
.skills-groups { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 40px 48px; margin-top: 48px; align-items: start; text-align: left; }
.skills-group summary { font: 700 13px/1.4 'Instrument Sans',sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #704f70; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 3px solid #ffc857; padding-bottom: 14px; }
.skills-group.teal summary { border-bottom-color: #b8cad2; }
.skills-group .skills-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px 28px; margin-top: 16px; }
.skills-group .faq-icon { display: none; }
.skill-pick { font: 400 15.5px/1.45 'Instrument Sans',sans-serif; color: #3d4a51; background: none; border: none; padding: 2px 0; cursor: pointer; display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; }
.skill-pick .tick { flex: none; width: 16px; height: 16px; border: 1.5px solid #011c27; border-radius: 50%; box-sizing: border-box; background: #fff; transition: background .12s ease; }
.skill-pick .txt { padding: 1px 4px; margin: -1px -4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.skill-pick[aria-pressed="true"] .tick { background: #ffc857; }
.skill-pick[aria-pressed="true"] .txt { background: #ffc857; font-weight: 600; color: #011c27; }
.skills-fab { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; justify-content: center; padding: 0 var(--px,20px) calc(14px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.skills-fab a { pointer-events: auto; font: 600 15px/1 'Instrument Sans',sans-serif; background: #011c27; color: #ffc857; padding: 15px 24px; border-radius: 100px; box-shadow: 0 4px 18px rgba(1,28,39,.35); }
@media (min-width: 561px) { .skills-group summary { pointer-events: none; } }
@media (max-width: 980px) { .skills-fab:not([hidden]) { display: flex; } }
@media (max-width: 980px) { .skills-groups { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .skills-group .faq-icon { display: inline-block; font: 400 22px/1 'Instrument Sans',sans-serif; color: #011c27; }
  .skills-group summary { padding: 4px 0; }
  .skills-group .skills-items { grid-template-columns: 1fr; gap: 13px; }
}

/* mobile nav: burger button + full-screen navy overlay */
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: 10px; margin: -10px; flex-direction: column; gap: 5px; }
.nav-burger span { display: block; width: 24px; height: 2.5px; background: #011c27; border-radius: 2px; }
.nav-overlay { display: none; position: fixed; inset: 0; z-index: 100; background: #011c27; overflow-y: auto; }
body.nav-open .nav-overlay { display: flex; align-items: center; justify-content: center; }
body.nav-open { overflow: hidden; }
.nav-overlay-close { position: absolute; top: 16px; right: 16px; background: none; border: none; color: #faf6ff; font-size: 24px; line-height: 1; cursor: pointer; padding: 12px; }
.nav-overlay-links { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; padding: 72px 20px; }
.nav-overlay-links a { font: 700 22px/1.2 'Instrument Sans',sans-serif; color: #faf6ff; }
.nav-overlay-links a:hover { color: #ffc857; }
.nav-overlay-links a.nav-overlay-cta { background: #ffc857; color: #011c27; border-radius: 100px; padding: 15px 28px; font-size: 17px; margin-top: 4px; }
.nav-overlay-rule { width: 130px; border-top: 1px solid rgba(250,246,255,.35); }
.nav-overlay-links a.nav-overlay-sister { font-size: 17px; font-weight: 600; color: #c8cdd2; }
.nav-overlay-links a.nav-overlay-sister:hover { color: #ffc857; }

/* FAQ accordions: + rotates to x when open */
.faq-icon { transition: transform .2s ease; display: inline-block; }
details[open] .faq-icon { transform: rotate(45deg); }

/* ---- ≤1120px: footer 4-col → 2-col ---- */
@media (max-width: 1120px) {
  [style*="grid-template-columns:1.4fr .6fr .6fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---- ≤980px: two-column layouts stack, decorative hero clusters hide ---- */
@media (max-width: 980px) {
  .hero-shapes { display: none !important; }
  .rhythm-grid { grid-template-columns: 1fr !important; }
  .rhythm-arrow { transform: rotate(90deg); justify-self: center; }
  [style*="grid-template-columns:.9fr 1.1fr"],
  [style*="grid-template-columns:1.2fr .8fr"],
  [style*="grid-template-columns:.85fr 1.15fr"],
  [style*="grid-template-columns:.8fr 1.2fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(300px,410px)"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(300px,500px)"],
  [style*="grid-template-columns:240px minmax(0,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .faq-intro { position: static !important; }
  /* vertical rules between stacked columns disappear */
  [style*="border-right:1px solid #011c27"] { border-right: none !important; }
  /* split-background sections: halves stack, so drop the two-tone gradient */
  .split-bg { background: #faf6ff !important; }
}

/* ---- ≤720px: everything stacks, nav wraps ---- */
@media (max-width: 720px) {
  /* like the classes site, the sister-site row hides on phones (footer keeps the links) */
  .utility-bar { display: none; }
  .faq-tabs { position: static !important; }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2,minmax(0,1fr))"] {
    grid-template-columns: 1fr !important;
  }
  .stack-m { grid-template-columns: 1fr !important; }
  /* nav collapses to the burger + overlay (matches the classes and comedy sites) */
  .nav-links { display: none !important; }
  .nav-burger { display: flex; }
  .hero-ctas { justify-content: flex-start !important; flex-wrap: wrap; }
}