/* Kgotla responsive layer — one fluid scale plus the breakpoint switches the
   desktop layout can't absorb. Loaded after page.css, so it wins at equal
   specificity. Desktop values are unchanged: every clamp tops out at the
   Figma number and every rhythm multiplier is 1 above 1024px.

   Breakpoints: 480 (large phone), 768 (tablet portrait), 1024 (tablet
   landscape / small laptop), 1280 (desktop, the drawn design). */

/* ── Fluid scale ─────────────────────────────────────────────────────────── */
:root{
  --kg-pad:clamp(20px,4.6vw,64px);      /* content column gutter: 20 → 64 */
  --kg-rhythm:1;                        /* multiplier for section spacing */
  --kg-marquee-gap:112px;
  --kg-logo-scale:1;
  --kg-hero-min:692px;
  --t84:clamp(36px,22px + 4.4vw,84px);
  --t72:clamp(38px,24px + 3.8vw,72px);
  --t60:clamp(34px,22px + 3.1vw,60px);
  --t56:clamp(30px,18px + 3vw,56px);
  --t40:clamp(24px,16px + 2.2vw,40px);
  --t30:clamp(24px,20px + 1.1vw,30px);
  --t28:clamp(22px,17px + 1.4vw,28px);
  --t24:clamp(19px,16px + 0.9vw,24px);
  --t20:clamp(17px,15px + 0.55vw,20px);
  --t18:clamp(16px,14.5px + 0.45vw,18px);
}
@media (max-width:1279px){:root{--kg-hero-min:640px}}
@media (max-width:1023px){:root{--kg-rhythm:.72;--kg-marquee-gap:72px;--kg-logo-scale:.82;--kg-hero-min:620px}}
@media (max-width:767px){:root{--kg-rhythm:.58;--kg-marquee-gap:52px;--kg-logo-scale:.68;--kg-hero-min:580px}}
@media (max-width:479px){:root{--kg-rhythm:.5;--kg-marquee-gap:40px;--kg-logo-scale:.58;--kg-hero-min:540px}}

html{-webkit-text-size-adjust:100%}
body{overflow-x:clip}
a,button,summary,[role="button"]{-webkit-tap-highlight-color:rgba(0,81,255,.14)}
input,select,textarea{font-size:16px}          /* stops iOS zoom-on-focus */

/* ── Card rows: flex on desktop, grid below it ────────────────────────────
   Grid keeps the row's own `gap` and drops the flex-basis maths entirely. */
@media (max-width:1099px){
  .kg-3up{display:grid!important;grid-template-columns:1fr 1fr}
  .kg-3up>*{width:auto!important;max-width:none!important}
}
@media (max-width:719px){.kg-3up{grid-template-columns:1fr}}
@media (max-width:1023px){
  .kg-2up{display:grid!important;grid-template-columns:1fr!important}
  .kg-2up>*{width:auto!important;max-width:none!important;align-self:auto!important}
  .kg-2up-rev>*:first-child{order:2}
  .kg-2up-rev>*:last-child{order:1}
}

/* ── Media panels sized in the desktop layout ─────────────────────────────── */
@media (max-width:1023px){
  .kg-fluidh{height:clamp(280px,62vw,520px)!important;min-height:0!important}
  .kg-fluidh-tall{height:clamp(360px,84vw,620px)!important;min-height:0!important}
  .kg-fluidh-cover{height:clamp(300px,70vw,470px)!important;min-height:0!important}
  /* Portrait artwork (book covers) stays book-shaped instead of going full-bleed. */
  .kg-portrait{width:100%!important;max-width:min(100%,460px)!important;margin-left:auto!important;margin-right:auto!important;height:clamp(400px,76vw,560px)!important;min-height:0!important}
}

/* ── Pinned / scroll-driven bands: kept on touch sizes, re-proportioned ──── */
@media (max-width:1023px){
  .kg-2up-fill{grid-template-rows:auto 1fr!important;align-content:stretch!important}
  .kg-2up-fill>*{min-height:0!important}
  .kg-diffimg{height:clamp(140px,22svh,260px)!important;min-height:0!important}
  .kg-casehero{height:clamp(220px,34svh,360px)!important;min-height:0!important}
}

/* ── Full-bleed quote bands: fixed height → padded auto height ───────────── */
@media (max-width:1023px){
  .kg-quote{height:auto!important;min-height:clamp(300px,56vw,460px);padding:clamp(56px,9vw,96px) var(--kg-pad)!important;background-size:cover!important;background-position:center!important}
  .kg-fluidh-tall{background-size:cover!important;background-position:center!important}
}

/* ── Pill buttons wrap instead of overflowing on the narrowest phones ─────── */
@media (max-width:479px){
  #root a[style*="border-radius: 999px"],#root button[style*="border-radius: 999px"],#root button[style*="border-radius: 100px"]{max-width:100%;white-space:normal!important;padding-left:20px!important;padding-right:20px!important;height:auto!important;min-height:48px!important;line-height:1.3!important;text-align:center}
  .kg-arrow{width:40px!important;height:40px!important}
}

/* ── Site header ──────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .kg-navlinks,.kg-navcta{display:none!important}
  .kg-header{height:auto!important;padding:14px 0!important}
}
@media (min-width:1024px){.kg-burger,.kg-stickybar{display:none!important}}
@media (max-width:1023px){.kg-header>a img{height:38px!important}}
@media (max-width:479px){.kg-header>a img{height:33px!important}}
/* Decorative hero splash: off the right edge on desktop, tucked into the bottom
   corner and dimmed once the type takes over the width. */
@media (max-width:1023px){.kg-splash{left:auto!important;right:-72px!important;top:auto!important;bottom:-56px!important;transform:scale(.74);transform-origin:bottom right;opacity:.85}}
@media (max-width:767px){.kg-splash{transform:scale(.56);right:-96px!important;bottom:-40px!important;opacity:.7}}
.kg-burger{appearance:none;border:none;background:none;padding:0;width:44px;height:44px;margin-right:-8px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;cursor:pointer}
.kg-burger span{display:block;height:2px;width:26px;border-radius:2px;background:currentColor;transition:transform 240ms var(--kg-ease),opacity 240ms var(--kg-ease),width 240ms var(--kg-ease)}
.kg-burger span:last-child{width:18px}
.kg-burger:hover span:last-child{width:26px}
.kg-drawerlink{display:flex;align-items:center;min-height:56px;font-family:var(--font-display);font-weight:400;font-size:clamp(26px,4.6vw,34px);line-height:1.15;letter-spacing:-.5px;color:#FFFFFF;border-bottom:1px solid rgba(255,255,255,.22);transition:padding-left 220ms var(--kg-ease),opacity 220ms var(--kg-ease)}
.kg-progress{display:none}
@media (max-width:1023px){
  .kg-progress{display:block;position:fixed;top:0;left:0;right:0;height:3px;z-index:75;background:rgba(15,23,43,.1);pointer-events:none}
  .kg-progress>i{display:block;height:100%;background:linear-gradient(90deg,#0051FF,#009780);transform:scaleX(0);transform-origin:left center}
}
.kg-drawerlink:hover,.kg-drawerlink:focus-visible{color:#FFFFFF;padding-left:8px}
@media (prefers-reduced-motion:reduce){.kg-drawerlink,.kg-burger span{transition:none}}

/* ── Footer ───────────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  #root footer{padding:clamp(44px,7vw,73px) var(--kg-pad) clamp(36px,5vw,54px)!important;gap:clamp(36px,5vw,57px)!important}
  #root footer img{height:clamp(56px,8vw,80px)!important;margin-left:-10px!important}
  #root footer>div:first-of-type{gap:clamp(32px,5vw,88px)!important;row-gap:clamp(32px,5vw,48px)!important}
  #root footer>div:first-of-type>div:first-child{flex:1 1 100%!important;width:auto!important;max-width:100%!important;min-width:0!important;gap:clamp(32px,6vw,122px)!important}
  #root footer div,#root footer span,#root footer a{max-width:100%}
  #root footer>div:first-of-type>div:not(:first-child){width:auto!important;flex:1 1 150px!important}
  #root footer div:has(>input){flex-wrap:wrap;height:auto!important;row-gap:10px}
  #root footer input{width:100%!important;min-width:0!important;flex:1 1 220px}
  #root footer>div:last-of-type{column-gap:clamp(24px,5vw,335px)!important;row-gap:20px!important}
  #root footer>div:last-of-type span,#root footer>div:last-of-type a{width:auto!important}
}
@media (max-width:479px){
  #root footer>div:first-of-type>div:not(:first-child){flex:1 1 100%!important}
  #root footer button{width:100%!important}
}

/* ── Locations card (design-system CardSquare stretched by .kg-loc) ───────── */
@media (max-width:1023px){
  .kg-loc>div{padding-bottom:clamp(40px,7vw,91px)!important}
  .kg-loc [role="img"]{height:clamp(200px,34vw,303px)!important}
}
@media (max-width:767px){.kg-loc>div>div:last-of-type{margin:0 clamp(20px,6vw,31px)!important}}

/* ── Stat band: 2×2 on phones, labels allowed to wrap ────────────────────── */
@media (max-width:767px){
  .kg-stats{display:grid!important;grid-template-columns:1fr 1fr!important;justify-items:center;gap:clamp(24px,5vw,40px)!important}
  .kg-stats>div>span:last-child{white-space:normal!important;text-align:center}
}
@media (max-width:479px){.kg-stats>div>span:first-child{font-size:30px!important}}
@media (max-width:560px){.kg-newsform>*{flex:1 1 100%!important;width:100%!important;min-width:0!important;box-sizing:border-box}}
@media (max-width:560px){#root form button[type="submit"],#root form a[style*="border-radius: 999px"]{width:100%!important}}
@media (max-width:479px){#root input,#root select,#root textarea{max-width:100%;box-sizing:border-box}}
/* Book details: two columns become label-over-value on phones */
@media (max-width:479px){
  .kg-deflist{grid-template-columns:1fr!important;line-height:1.5!important;row-gap:4px!important}
  .kg-deflist dt{font-weight:700}
  .kg-deflist dd{margin-bottom:12px!important}
}

/* ── Horizontal rails ─────────────────────────────────────────────────────── */
@media (max-width:767px){
  .kg-railcards>*{flex:0 0 min(84vw,340px)!important;scroll-snap-stop:always}
  .kg-railarrows{margin-left:auto}
  .kg-railarrows .kg-arrow{width:42px!important;height:42px!important}
}
.kg-rail{scroll-padding-left:2px}

/* ── Scroll cue + scroll-linked image settle ──────────────────────────────── */
@keyframes kg-cuedot{0%{transform:translateY(0);opacity:0}18%{opacity:1}70%{transform:translateY(16px);opacity:0}100%{transform:translateY(16px);opacity:0}}
.kg-cue>i{animation:kg-cuedot 1.9s cubic-bezier(.4,0,.2,1) infinite}
@keyframes kg-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
@supports (animation-timeline:view()){
  @media (max-width:1023px) and (prefers-reduced-motion:no-preference){
    .kg-fluidh .kg-zoom,.kg-fluidh-tall .kg-zoom,.kg-casehero .kg-zoom,.kg-portrait .kg-zoom,.kg-swipe .kg-zoom{animation:kg-settle linear both;animation-timeline:view();animation-range:entry 8% cover 42%}
  }
}
@media (prefers-reduced-motion:reduce){.kg-cue>i{animation:none}}

/* ── Touch: no hover to reveal, so show what hover would ─────────────────── */@media (hover:none){
  .kg-shot-badge{opacity:1;transform:none}
  .kg-card:hover .kg-zoom,.kg-media:hover .kg-zoom{transform:none}
  .kg-media:hover,.kg-cover:hover{box-shadow:0 6px 18px rgba(15,23,43,.14);transform:none}
  #root a[class*="button"]:hover,#root button[class*="button"]:hover{transform:none;box-shadow:none}
  #root a:active,#root button:active{transform:scale(.985)}
}
@media (max-width:1023px){.kg-marquee{animation-duration:38s}}
@media (max-width:479px){.kg-marquee{animation-duration:30s}}

/* ── Swipe rails ──────────────────────────────────────────────────────────
   Card rows that stack into a tall column on a phone become a snap-scrolling
   rail instead: cards bleed to the screen edge, the next one peeks in, and the
   row keeps the gap it was drawn with. Declared last so it wins over .kg-3up. */
@media (max-width:767px){
  .kg-swipe{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;grid-template-columns:none!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-left:var(--kg-pad);margin-left:calc(-1 * var(--kg-pad));margin-right:calc(-1 * var(--kg-pad));padding-left:var(--kg-pad);padding-right:var(--kg-pad);padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;justify-content:flex-start!important;align-items:stretch!important}
  .kg-swipe::-webkit-scrollbar{display:none}
  .kg-swipe>*{flex:0 0 min(80vw,340px)!important;width:auto!important;max-width:none!important;scroll-snap-align:start;scroll-snap-stop:always}
  .kg-swipe-wide>*{flex:0 0 min(88vw,420px)!important}
  .kg-swipe-one>*{flex:0 0 100%!important}
  /* the rail is the scroll container, so cards must not be pushed by row-gap */
  .kg-swipe{row-gap:0!important}
}
/* Swipe affordance: a hairline track that fills as the rail advances. */
.kg-swipebar{display:none}
@media (max-width:767px){
  .kg-swipebar{display:block;height:3px;border-radius:3px;background:rgba(15,23,43,.12);overflow:hidden;margin-top:20px}
  .kg-swipebar>i{display:block;height:100%;border-radius:3px;background:var(--gradient-brand,linear-gradient(90deg,#0051FF,#009780));transform-origin:left center;transition:transform 160ms linear}
  .kg-swipebar-dark{background:rgba(255,255,255,.22)}
  .kg-swipebar-dark>i{background:#FFFFFF}
}