/*
 * Keyway Marketing Group (keywaymarketinggroup.com): shared styles for every page.
 *
 * Most of the design is written inline on each element (kept verbatim from the original
 * design). This file holds what is shared: global rules and animations, the hover
 * effects, and the tablet/phone layout overrides. Section 3 replaces what the React app
 * used to do with JavaScript (button hovers, the Services dropdown).
 *
 * Inline styles must never contain a single quote: write font-family:Archivo,sans-serif,
 * not font-family:'Archivo',sans-serif. Netlify re-quotes every link it rewrites and a
 * quote inside a style would cut the style short on the live site.
 */

/* ==== 1. Global styles + keyframes (from the original design) ==================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #ffffff; color: #0b0e12; font-family: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; }
::selection { background: #29abe2; color: #0b0e12; }

@keyframes kmg-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes kmg-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes kmg-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes kmg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes kmg-spin { to { transform: rotate(360deg); } }

/* Website-development hero: tilted dual-column screenshot auto-scroll.
   Each column duplicates its cards, so translateY(-50%) loops seamlessly. */
@keyframes kmg-scroll-up   { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes kmg-scroll-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.kmg-shot-up   { animation: kmg-scroll-up 34s linear infinite; will-change: transform; }
.kmg-shot-down { animation: kmg-scroll-down 34s linear infinite; will-change: transform; }
.kmg-hero-bleedrow { position: absolute; inset: 0; z-index: 1; display: flex; align-items: stretch; }
.kmg-hero-bleedtext { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; box-sizing: border-box; padding: 72px 32px 56px max(48px, calc((100% - 1240px) / 2 + 48px)); }
.kmg-hero-bleedvis { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; }
.kmg-carousel { position: absolute; inset: 0; overflow: visible; }
.kmg-carousel-rot { position: absolute; top: -12%; bottom: -12%; left: 184px; width: max-content; display: flex; gap: 26px; align-items: flex-start; transform: rotate(-15deg) scale(1.08); transform-origin: center center; }
@media (prefers-reduced-motion: reduce) { .kmg-shot-up, .kmg-shot-down { animation: none; } }

/* Button fill-swipe effect (the sky-blue wipe on hover) */
[data-fill] {
  transform: translateX(-101%) skewX(-14deg);
  transition: transform .5s cubic-bezier(.45, .05, .3, 1);
  will-change: transform;
}
button:hover [data-fill],
.kmg-btn:hover [data-fill] { transform: translateX(0%) skewX(-14deg); }

@keyframes kmg-titleWipe {
  0%   { background-position: 0% 0; }
  28%  { background-position: 0% 0; }
  50%  { background-position: -66% 0; }
  78%  { background-position: -66% 0; }
  100% { background-position: -133.33% 0; }
}
@keyframes kmg-twinkle { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
@keyframes kmg-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 600px 300px, -500px 400px, 300px -200px; }
}
@keyframes kmg-shoot {
  0%   { transform: translate(0, 0) rotate(20deg); opacity: 0; }
  8%   { opacity: 1; }
  22%  { opacity: 0; }
  100% { transform: translate(520px, 190px) rotate(20deg); opacity: 0; }
}

/* Cards: sky-ink accent by default, ink on hover. Inner accent
   elements use color:var(--accent); .kmg-hoverable adds the lift + border. */
.kmg-card { --accent: #0a6fa3; }
.kmg-card:hover { --accent: #0b0e12; }
.kmg-hoverable { transition: transform .25s, border-color .25s, box-shadow .25s; }
.kmg-hoverable:hover { transform: translateY(-4px); border-color: #29abe2 !important; box-shadow: 0 18px 40px rgba(16, 32, 48, 0.10) !important; }

/* Work / portfolio cards (hover lift + sky glow + image zoom; click to expand) */
.kmg-work-card { transition: transform .3s, border-color .3s, box-shadow .3s; cursor: pointer; }
.kmg-work-card:hover {
  transform: translateY(-6px);
  border-color: #29abe2 !important;
  box-shadow: 0 24px 60px rgba(41, 171, 226, 0.18) !important;
}
.kmg-work-card .kmg-shot { overflow: hidden; line-height: 0; }
.kmg-work-card .kmg-shot img { transition: transform .5s cubic-bezier(.2, .8, .2, 1); display: block; width: 100%; }
.kmg-work-card:hover .kmg-shot img { transform: scale(1.05); }

/* Formspree validation / error text */
.kmg-form-err { color: #b42318; font-size: 12.5px; line-height: 1.4; margin: -2px 0 0; }

/* Route enter transition: a soft opacity fade on each navigation.
   Opacity-only on purpose: a `transform` on this wrapper (even an identity
   matrix left behind by animation-fill-mode) establishes a containing block
   for fixed descendants, which would break the portfolio lightbox's
   position:fixed inset:0 overlay. Fading opacity alone keeps the viewport as
   the lightbox's containing block. */
@keyframes kmg-page-enter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.kmg-page-enter { animation: kmg-page-enter .32s cubic-bezier(.22, .61, .36, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .kmg-page-enter { animation: none; }
}

/* ==== 2. Tablet / phone layout (inline styles win over CSS, hence !important) ===== */

img { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }

/* ----------------------------- Tablet (≤ 960px) ----------------------------- */
@media (max-width: 960px) {
  .kmg-section       { padding-left: 28px !important; padding-right: 28px !important; }
  .kmg-section-inner { padding-left: 28px !important; padding-right: 28px !important; }
  .kmg-header        { padding-left: 28px !important; padding-right: 28px !important; }
  .kmg-hero          { padding-left: 28px !important; padding-right: 28px !important; padding-top: 56px !important; }
  .kmg-hero-overlay  { display: block !important; } /* a white veil over the hero lines on tablet + phone */

  .kmg-hero-grid      { grid-template-columns: 1fr !important; gap: 40px !important; }
  /* The full-bleed carousel is desktop-only; on smaller screens fall back to a
     plain text hero (the carousel would overlap the copy when stacked). */
  .kmg-hero-bleedrow  { position: relative !important; display: block !important; }
  .kmg-hero-bleedvis  { display: none !important; }
  .kmg-hero-bleedtext { display: block !important; padding: 0 0 44px !important; }
  .kmg-hero           { min-height: 0 !important; }
  .kmg-grid-4         { grid-template-columns: repeat(2, 1fr) !important; }
  .kmg-grid-3         { grid-template-columns: repeat(2, 1fr) !important; }
  .kmg-deepdive       { grid-template-columns: 1fr !important; }
  .kmg-deepdive-panel { grid-template-columns: 1fr !important; }
  .kmg-cta            { grid-template-columns: 1fr !important; padding: 40px !important; }
  .kmg-why-card       { padding: 38px !important; }
  .kmg-footer-grid    { grid-template-columns: repeat(2, 1fr) !important; }

  .kmg-h1 { font-size: 56px !important; }
  .kmg-h2 { font-size: 38px !important; }
}

/* --------------------- Nav collapses to hamburger (≤ 860px) ------------------ */
@media (max-width: 860px) {
  .kmg-nav, .kmg-nav-cta { display: none !important; }
  .kmg-burger { display: flex !important; }
}

/* ------------------------------ Phone (≤ 640px) ----------------------------- */
@media (max-width: 640px) {
  .kmg-nav { display: none !important; }

  .kmg-section       { padding-left: 18px !important; padding-right: 18px !important; }
  .kmg-section-inner { padding-left: 18px !important; padding-right: 18px !important; }
  .kmg-header        { padding-left: 18px !important; padding-right: 18px !important; }
  .kmg-hero          { padding-left: 18px !important; padding-right: 18px !important; padding-top: 40px !important; }

  .kmg-grid-3      { grid-template-columns: 1fr !important; }
  .kmg-grid-2      { grid-template-columns: 1fr !important; }
  .kmg-stats       { grid-template-columns: repeat(2, 1fr) !important; padding: 34px 24px !important; gap: 24px !important; }
  .kmg-footer      { padding: 36px 18px !important; }
  .kmg-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* hero buttons stack full-width */
  .kmg-hero-cta                 { flex-direction: column !important; align-items: stretch !important; }
  .kmg-hero-cta button,
  .kmg-hero-cta a               { width: 100% !important; }

  .kmg-h1       { font-size: 40px !important; }
  .kmg-h2       { font-size: 30px !important; }
  .kmg-stat-num { font-size: 42px !important; }
  .kmg-why-card { padding: 26px !important; }
  .kmg-cta      { padding: 28px !important; }

  /* keep the floating hero badges inside the screen */
  .kmg-badge-a { left: 8px !important;  top: -14px !important; }
  .kmg-badge-b { right: 8px !important; bottom: -14px !important; }
}

/* --------------------------- Small phone (≤ 460px) -------------------------- */
@media (max-width: 460px) {
  .kmg-grid-4  { grid-template-columns: 1fr !important; }
  .kmg-form-row { grid-template-columns: 1fr !important; }
  .kmg-h1 { font-size: 34px !important; }
}

/* ==== 3. What the React app used to do with JavaScript (2026-09-27) ================ */

/* Hidden panels (mobile menu, closed FAQ answers, inactive home-page tabs). Their inline
   display:flex/grid would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

/* Buttons: hover lift + glow, press-down. Inline styles win over CSS, hence !important.
   kmg-btn-primary is the ink button with the sky-blue fill-swipe (section 1). */
.kmg-btn-primary:hover   { transform: translateY(-2px) !important; box-shadow: 0 12px 28px rgba(10,111,163,0.28) !important; }
/* Secondary (clear) buttons: matte glass. Inline styles set background:transparent, hence !important. */
.kmg-btn-secondary {
  background: rgba(244,247,250,0.68) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid rgba(138,148,159,0.45) !important;
  box-shadow: 0 8px 22px rgba(16,32,48,0.08), inset 0 1px 0 rgba(255,255,255,0.7) !important;
}
.kmg-btn-secondary:hover { transform: translateY(-2px) !important; border: 1px solid #0b0e12 !important; background: rgba(255,255,255,0.82) !important; box-shadow: 0 12px 28px rgba(16,32,48,0.12), inset 0 1px 0 rgba(255,255,255,0.8) !important; }
.kmg-btn-light:hover     { transform: translateY(-3px) !important; box-shadow: 0 16px 40px rgba(0,0,0,0.35) !important; }
.kmg-btn:active          { transform: translateY(-1px) scale(.97) !important; }

/* Desktop nav: the Services dropdown opens on hover (or keyboard focus). */
.kmg-dd-menu { display: none; }
.kmg-dd:hover .kmg-dd-menu,
.kmg-dd:focus-within .kmg-dd-menu { display: block; }
.kmg-dd-item:hover { background: #eef8fd; }

/* ==== 4. Phone/tablet header + menu, and the scrollbar (2026-09-27) ================= */

/* Below 861px, where the menu button replaces the navigation, the header is solid instead of
   frosted glass. Page content no longer shows through it once the page has scrolled, and the
   menu panel inside it can fill the screen: a backdrop-filter makes an element the containing
   block of its position:fixed children, so under the glass header the panel was cut to the
   header's own height and showed only "Home". The open menu is solid white too, and scrolling inside
   it never scrolls the page behind. The header is solid dark on all sizes. */
@media (max-width: 860px) {
  header {
    background: #0b0e12 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  #kmg-mobile-menu {
    background: #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overscroll-behavior: contain;
  }
}
/* The menu belongs to phones and tablets: never left open on a wider screen. */
@media (min-width: 861px) {
  #kmg-mobile-menu { display: none !important; }
}

/* The scrollbar matches the theme (house rule for every site): a slate thumb on the page's light
   mist, sky blue under the pointer. Firefox and current Chrome read scrollbar-color; Safari reads
   the ::-webkit-scrollbar rules. (Light redesign, 2026-09-27.) */
html { scrollbar-color: #9aa5b1 #f1f4f7; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #f1f4f7; }
::-webkit-scrollbar-thumb { background: #9aa5b1; border-radius: 6px; border: 2px solid #f1f4f7; }
::-webkit-scrollbar-thumb:hover { background: #29abe2; }
::-webkit-scrollbar-corner { background: #f1f4f7; }

/* ==== 5. Light black-and-white theme with sky-blue accents (2026-09-27 redesign) ======== */

/* Palette: ink #0b0e12, paper #ffffff, mist #f4f7fa, sky #29abe2 (the blue of the KMG logo),
   sky-ink #0a6fa3 (the sky dark enough for text on white, 5.5:1). Black is used on purpose for
   the footer and the stats band. Type: Newsreader for headings and big figures, Schibsted
   Grotesk for everything else (loaded in each page's head). Colours on the elements themselves
   are inline, like the rest of the design; this section holds what is shared. */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, .kmg-stat-num { font-variant-numeric: lining-nums; }

/* Hero: a whisper of sky at the top and a faint chart grid under the moving lines (js/site.js). */
.kmg-hero { background: linear-gradient(180deg, #f1f8fd 0%, #ffffff 62%); }
.kmg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(11, 14, 18, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 14, 18, 0.045) 1px, transparent 1px);
  background-size: 88px 88px;
  -webkit-mask-image: radial-gradient(110% 85% at 80% 35%, #000 0%, transparent 70%);
          mask-image: radial-gradient(110% 85% at 80% 35%, #000 0%, transparent 70%);
}

/* The lines fade out towards the headline: across the width on wide screens, from the top on
   phones, where the text sits above them. A mask costs nothing to redraw. */
.kmg-hero canvas[data-louver] {
  -webkit-mask-image: none;
          mask-image: none;
}
@media (max-width: 700px) {
  .kmg-hero canvas[data-louver] {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 45%, #000 85%);
            mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 45%, #000 85%);
  }
}

/* The two centred heroes (thank-you, 404): the lines keep clear of the text in the middle. */
.kmg-hero canvas[data-louver="green"], .kmg-hero canvas[data-louver="red"] {
  -webkit-mask-image: radial-gradient(60% 75% at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.35) 60%, #000 100%);
          mask-image: radial-gradient(60% 75% at 50% 45%, transparent 35%, rgba(0, 0, 0, 0.35) 60%, #000 100%);
}

/* The highlighted words in headings: the sky underline draws in once. */
@keyframes kmg-underline {
  from { background-size: 0% 0.07em; }
  to   { background-size: 100% 0.07em; }
}

/* Links and buttons: visible keyboard focus everywhere (sky ring on the black bands). */
:focus-visible { outline: 2px solid #0a6fa3; outline-offset: 3px; }
header :focus-visible, .kmg-footer :focus-visible, .kmg-stats :focus-visible { outline-color: #29abe2; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid #0a6fa3 !important;
  outline-offset: 1px;
  border-color: #0a6fa3 !important;
}
::placeholder { color: #6b7580; opacity: 1; }

/* Hover colours for the plain text links (their colours are inline). */
.kmg-nav > a:hover, .kmg-dd > a:hover { color: #ffffff !important; }
#kmg-mobile-menu a:not(.kmg-btn):hover { color: #0a6fa3 !important; }
.kmg-footer a:not(.kmg-btn):hover { color: #ffffff !important; }

/* Reduced motion: the tickers and floating badges stand still too (the hero lines draw one
   still frame, js/site.js). */
@media (prefers-reduced-motion: reduce) {
  [style*="kmg-marquee"], [style*="kmg-float"], [style*="kmg-underline"] { animation: none !important; }
}