/** Shopify CDN: Minification failed

Line 1367:0 Expected "}" to go with "{"

**/
/* Kegs Off Tap — Shopify homepage redesign
   Converted from the supplied standalone homepage.
   All styles are scoped to .kot-home so existing theme/PDP styles stay untouched.
*/

.kot-home {

  /* ---- Brand: Keg Blue ---------------------------------- */
  --kot-blue-700: #0f5d96;          /* darker hover */
  --kot-blue-600: #1579be;          /* PRIMARY brand blue (rgb 21,121,190) */
  --kot-blue-500: #4499d9;          /* accent stroke / focus ring */
  --kot-blue-100: #e7f3fb;          /* tinted callout surface */

  /* ---- Brand: Draught Gold ------------------------------ */
  --kot-gold-700: #95571a;          /* deep gold text/stroke */
  --kot-gold-600: #b26a1e;          /* gold stroke (rgb 178,106,30) */
  --kot-gold-500: #fbb000;          /* amber highlight (rgb 251,176,0) */
  --kot-gold-300: #e6a65a;          /* soft gold */
  --kot-gold-100: #f6eedf;          /* cream surface */

  /* ---- Ink / Neutrals ----------------------------------- */
  --kot-ink-900: #000000;           /* table rules, pure black */
  --kot-ink-800: #101010;           /* primary text (rgb 16,16,16) */
  --kot-ink-700: #1b1714;           /* warm near-black */
  --kot-ink-500: #404040;           /* secondary text / reviews */
  --kot-ink-400: #757575;           /* placeholder / muted */
  /* Warm neutrals — the "premium PDP" body + muted text */
  --kot-brown-600: #4f463d;         /* warm body text (rgb 79,70,61) */
  --kot-stone-500: #8b8073;         /* warm muted / captions (rgb 139,128,115) */
  --kot-line-300: #e5e5e5;          /* hairline */
  --kot-line-200: #eeeeee;          /* divider */
  --kot-grey-100: #f3f6f9;          /* page wash */
  --kot-white: #ffffff;

  /* ---- Cream / Warm neutrals ---------------------------- */
  --kot-cream-50: #fbf9f4;
  --kot-cream-100: #f6eedf;
  --kot-cream-150: #f4f0e8;         /* subtle inline note panel (rgb 244,240,232) */
  --kot-cream-200: #efe9dc;
  --kot-cream-300: #e3dbcb;

  /* ---- Semantic status ---------------------------------- */
  --kot-sale-600: #ee0000;          /* Sale badge red */
  --kot-sale-500: #e61e1e;          /* countdown panel red */
  --kot-sale-50:  #fde9eb;          /* trust-badge pink wash */
  --kot-success-600: #2e7d5b;       /* in-stock green */
  --kot-success-500: #34a853;

  /* ---- Google review brand (stars / widget) ------------- */
  --kot-google-blue: #4285f4;
  --kot-google-red: #ea4335;
  --kot-google-green: #34a853;
  --kot-google-yellow: #fbbc05;

  /* ========================================================
     SEMANTIC ALIASES — reference these in components
     ======================================================== */
  --color-bg: var(--kot-white);
  --color-bg-wash: var(--kot-grey-100);
  --color-surface: var(--kot-white);
  --color-surface-tint: var(--kot-blue-100);
  --color-surface-cream: var(--kot-cream-100);
  --color-surface-alert: var(--kot-sale-50);

  --color-primary: var(--kot-blue-600);
  --color-primary-hover: var(--kot-blue-700);
  --color-accent: var(--kot-gold-500);

  --text-strong: var(--kot-ink-800);
  --text-body: var(--kot-ink-800);
  --text-secondary: rgba(16, 16, 16, 0.85);
  --text-muted: var(--kot-ink-400);
  --text-warm: var(--kot-brown-600);      /* warm body copy (premium PDP) */
  --text-warm-muted: var(--kot-stone-500);/* warm captions */
  --text-on-primary: var(--kot-white);
  --text-review: var(--kot-ink-500);

  --color-sale: var(--kot-sale-600);
  --color-success: var(--kot-success-600);

  --border-subtle: rgba(16, 16, 16, 0.08);
  --border-input: var(--kot-ink-800);
  --border-rule: var(--kot-ink-900);
  --border-divider: var(--kot-line-200);
  --focus-ring: var(--kot-blue-500);


  /* Families */
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Weights */
  --fw-regular: 400;   /* @kind font */
  --fw-medium: 500;    /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold: 700;      /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Type scale (px values mirror the storefront) */
  --fs-display: 30px;   /* H1 / H2 hero — Bricolage Medium */
  --fs-h2: 24px;
  --fs-h3: 16px;        /* section / card heading */
  --fs-lg: 18px;
  --fs-body: 15px;      /* default paragraph */
  --fs-base: 14px;
  --fs-sm: 13px;
  --fs-xs: 12px;
  --fs-2xs: 11px;
  --fs-micro: 10px;     /* tax line, legal */

  /* Line heights */
  --lh-tight: 1.3;      /* @kind other */
  --lh-snug: 1.5;       /* @kind other */
  --lh-body: 1.8;       /* @kind other */
  --lh-ui: 1.5;         /* @kind other */

  /* Letter-spacing — the brand's signature airy tracking */
  --ls-display: 0.6px;  /* @kind other */
  --ls-body: 0.6px;     /* @kind other */
  --ls-wide: 1px;       /* @kind other */
  --ls-data: 0.4px;     /* @kind other */


  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 15px;   /* the canonical page gutter */
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 30px;
  --space-8: 40px;
  --space-9: 56px;

  --page-gutter: 15px;
  --content-max: 360px;   /* mobile content column inside 390px frame */

  /* Radius family */
  --radius-sm: 4px;     /* checkbox, chips */
  --radius-md: 8px;     /* callout cards */
  --radius-lg: 12px;    /* buttons, inputs */
  --radius-xl: 13px;    /* primary CTA */
  --radius-2xl: 20px;   /* product cards, gallery, panels */
  --radius-pill: 999px; /* sale badges */

  /* Borders */
  --border-hairline: 1px solid var(--border-subtle);
  --border-rule-1: 1px solid var(--border-rule);     /* mates-rates table */
  --border-control: 1px solid var(--border-input);   /* inputs / outline btn */

  /* Shadows — the brand leans on inset hairlines, not elevation */
  --shadow-inset-hairline: inset 0 0 0 1px rgba(16, 16, 16, 0.05);
  --shadow-inset-card: inset 0 0 0 1px rgba(16, 16, 16, 0.1);
  --shadow-ring-primary: 0 0 0 1px var(--kot-blue-600);
  --shadow-card: 0 6px 20px rgba(16, 16, 16, 0.08);
  --shadow-pop: 0 10px 30px rgba(16, 16, 16, 0.12);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);  /* @kind other */
  --dur-fast: 120ms;  /* @kind other */
  --dur-base: 200ms;  /* @kind other */

  --font-display: var(--font-heading-family, "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-body: var(--font-body-family, "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --font-ui: var(--font-body-family, "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  font-family: var(--font-display);
  color: var(--kot-ink-700);
  background: #fff;
  width: 100%;
}
.kot-home, .kot-home * { box-sizing: border-box; }
.kot-home [hidden] { display: none !important; }
.kot-home .kot-home-empty {
  min-height: 220px;
  display:flex; align-items:center; justify-content:center;
  background:#f3f6f9; color:#757575; border-radius:16px;
  padding:24px; text-align:center;
}
.kot-home .kot-home-img {
  display:block; width:100%; height:100%; object-fit:cover;
}


  .kot-home *{ box-sizing: border-box; }
  .kot-home{ margin: 0; background: #fff; color: var(--kot-ink-700); font-family: var(--font-display); }
  .kot-home img{ display: block; max-width: 100%; }
  .kot-home h1, .kot-home h2, .kot-home h3, .kot-home h4, .kot-home p{ margin: 0; }
  .kot-home a{ color: var(--kot-blue-600); text-decoration: none; }
  .kot-home a:hover{ color: var(--kot-blue-700); }
  .kot-home button{ font-family: inherit; }
  .kot-home image-slot{ background: linear-gradient(160deg, #eef2f6, #e1e8ee); }

  .kot-home .wrap{ max-width: 1280px; margin: 0 auto; padding: 0 48px; }
  .kot-home .sec{ padding: 78px 0; }
  .kot-home .sec-blue{ background: var(--kot-blue-100); }
  .kot-home .sec-grey{ background: var(--kot-grey-100); }
  .kot-home .sec-dark{ background: var(--kot-ink-700); }

  .kot-home .eyebrow{ font-weight: 700; font-size: 12.5px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--kot-blue-600); }
  .kot-home .eyebrow.on-dark{ color: var(--kot-gold-500); }
  .kot-home .h1{ font-weight: 800; font-size: 58px; line-height: 1.03; letter-spacing: -1.6px; color: #1b1714; }
  .kot-home .h2{ font-weight: 800; font-size: 36px; line-height: 1.1; letter-spacing: -0.7px; color: #1b1714; }
  .kot-home .h2.on-dark{ color: #fff; }
  .kot-home .h3{ font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -0.3px; color: #1b1714; }
  .kot-home .lead{ font-size: 16.5px; line-height: 1.62; color: var(--text-warm); max-width: 560px; }
  .kot-home .lead.on-dark{ color: rgba(255,255,255,.72); }
  .kot-home .headrow{ display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 40px; flex-wrap: wrap; }
  .kot-home .center{ text-align: center; }
  .kot-home .center .lead, .kot-home .center .h2{ margin-left: auto; margin-right: auto; }
  .kot-home .pill{ display: inline-flex; align-items: center; gap: 7px; background: var(--kot-blue-100); border-radius: 999px; padding: 8px 15px; font-weight: 700; font-size: 11.5px; letter-spacing: .5px; color: var(--kot-blue-700); white-space: nowrap; }

  .kot-home .ico{ fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--color-primary); flex: none; }
  .kot-home .ico-fill{ fill: currentColor; stroke: none; }
  .kot-home .ico-gold{ color: var(--kot-blue-500); }
  .kot-home .ico-blue5{ color: var(--kot-blue-500); }
  .kot-home .ico-deep{ color: var(--kot-blue-700); }
  .kot-home .ico-white{ color: #fff; }

  .kot-home .btn{ display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: none; cursor: pointer; border-radius: 999px; height: 54px; padding: 0 30px; font-weight: 700; font-size: 15px; letter-spacing: .3px; transition: background .16s ease, transform .16s ease, box-shadow .16s ease; }
  .kot-home .btn:hover{ transform: translateY(-1px); }
  .kot-home .btn-primary{ background: var(--kot-blue-600); color: #fff; }
  .kot-home .btn-primary:hover{
  background: var(--kot-blue-700);
  color: #fff;
}
  .kot-home .btn-outline{ background: #fff; color: var(--kot-blue-600); box-shadow: inset 0 0 0 1.5px var(--kot-blue-600); }
  .kot-home .btn-outline:hover{ background: var(--kot-blue-100); }
  .kot-home .btn-ghost-light{ background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.4); }
  .kot-home .btn-ghost-light:hover{
  background: rgba(255,255,255,.18);
  color: #fff;
}
  .kot-home .btn-gold{ background: #f5a300; color: var(--kot-ink-800); font-weight: 800; }
  .kot-home .btn-gold:hover{ background: #ffb31a; }
  .kot-home .btn-block{ width: 100%; }
  .kot-home .btn-sq{ border-radius: 12px; }
  .kot-home .stars{ display: inline-flex; gap: 2px; color: var(--kot-gold-500); }
  .kot-home .txtlink{ display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 14.5px; color: var(--kot-blue-600); cursor: pointer; }

  /* header */
  .kot-home .topbar{ background: var(--kot-ink-700); color: #fff; padding: 9px 0; font-weight: 600; font-size: 12.5px; letter-spacing: .4px; }
  .kot-home .topbar .wrap{ display: flex; align-items: center; justify-content: center; gap: 26px; }
  .kot-home .topbar .item{ display: inline-flex; align-items: center; gap: 8px; }
  .kot-home .topbar .divider{ width: 1px; height: 15px; background: rgba(255,255,255,.25); }
  .kot-home .nav{ background: #fff; border-bottom: 1px solid rgba(27,23,20,.1); position: sticky; top: 0; z-index: 40; }
  .kot-home .nav .wrap{ display: flex; align-items: center; height: 82px; }
  .kot-home .nav a.navlink{ font-weight: 600; font-size: 15px; color: #1b1714; }
  .kot-home .nav a.navlink:hover{ color: var(--kot-blue-600); }
  .kot-home .nav .navlinks{ display: flex; gap: 34px; margin-left: 56px; }
  .kot-home .iconbtn{ width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 0; color: #1b1714; }

  /* hero — split stage */
  .kot-home .hero{ position: relative; display: flex; align-items: center; min-height: 680px; background: #071f33; overflow: hidden; padding: 64px; }
  .kot-home .hero .hcopy{ position: relative; z-index: 1; max-width: 600px; display: flex; flex-direction: column; padding: 30px 32px 32px; background: rgba(10,23,35,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 18px; }
  .kot-home .hero .hcopy > *{ max-width: 100%; }
  .kot-home .hero .eyerow{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .kot-home .hero .rtext{ font-size: 14px; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,.72); }
  .kot-home .hero .rtext b{ color: #fff; font-weight: 800; }
  .kot-home .hero .eyerow .sep{ width: 1px; height: 14px; background: rgba(255,255,255,.22); }
  .kot-home .hero .stars{ display: inline-flex; align-items: center; gap: 3px; }
  .kot-home .hero .stars svg{ color: var(--kot-blue-500); fill: currentColor; stroke: none; }
  .kot-home .hero .eyerow small{ font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.66); letter-spacing: .2px; }
  .kot-home .hero h1{ font-family: var(--font-display,inherit); font-weight: 800; font-size: clamp(24px,2.2vw,30px); line-height: 1.1; letter-spacing: -1px; color: #fff; margin: 18px 0 0; text-wrap: pretty; }
  .kot-home .hero h1 em{ font-style: normal; color: #8fc6ef; }
  .kot-home .hero p.sub{ font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.88); margin: 14px 0 0; max-width: 360px; }
  .kot-home .hero .ctas{ display: flex; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
  .kot-home .hero .ctas .btn{ height: 54px; padding: 0 28px; font-size: 15.5px; border-radius: 999px; white-space: nowrap; }
  .kot-home .truststrip{ background: #e7f1fa; border-top: 1px solid rgba(13,50,83,.08); }
  .kot-home .truststrip .wrap{ display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; padding-top: 20px; padding-bottom: 20px; }
  .kot-home .truststrip .t{ display: inline-flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; letter-spacing: .1px; color: #0d3253; white-space: nowrap; }
  .kot-home .truststrip .ti{ display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(13,50,83,.07); border: 1px solid rgba(13,50,83,.14); flex: none; }
  .kot-home .truststrip .t svg{ color: #0d3253; stroke-width: 1.9; }
  .kot-home .hero .hshot{ position: absolute; inset: 0; }
  .kot-home .hero .hshot img, .kot-home .hero .hshot image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 42%; }
  .kot-home .hero .hshot::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,18,31,.18) 0%, rgba(4,18,31,0) 35%, rgba(4,18,31,.28) 100%); }
  .kot-home .hero .hshot .hslide{ opacity: 0; transition: opacity .9s ease; }
  .kot-home .hero .hshot .hslide.on{ opacity: 1; }
  .kot-home .hero .hdots{ position: absolute; z-index: 2; right: 24px; bottom: 18px; display: flex; gap: 8px; }
  .kot-home .hero .hdot{ width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(255,255,255,.42); transition: background .3s, transform .3s; }
  .kot-home .hero .hdot.on{ background: #fff; transform: scale(1.25); }
  .kot-home .hnote{ display: none; }

  /* shop kegs strip */
  .kot-home .kegstrip{ background: #fff; padding: 54px 0 58px; border-bottom: 1px solid rgba(27,23,20,.09); }
  .kot-home .kegrow{ display: grid; grid-template-columns: repeat(8,1fr); gap: 14px; }
  .kot-home .kcat{ display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(27,23,20,.14); border-radius: 14px; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
  .kot-home .kcat:hover{ border-color: var(--kot-blue-500); box-shadow: 0 14px 30px -18px rgba(8,30,48,.35); transform: translateY(-3px); }
  .kot-home .kcat .kimg{ height: 150px; background: #fff; padding: 14px 10px 4px; }
  .kot-home .kcat .kimg image-slot, .kot-home .kcat .kimg img{ width: 100%; height: 100%; object-fit: contain; }
  .kot-home .kcat .klabel{ text-align: center; font-weight: 700; font-size: 15px; color: #1b1714; padding: 12px 8px 16px; }
  .kot-home .kcat .klabel .kbrand{ display: block; font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--kot-blue-600); margin-bottom: 3px; }
  .kot-home .kcat .klabel .kprice{ display: block; font-weight: 800; font-size: 14px; color: var(--kot-ink-800); margin-top: 5px; }
  .kot-home .kcat[hidden], .kot-home .prod[hidden]{ display: none; }
  .kot-home .kegtabs{ display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; }
  .kot-home .ktab{ white-space: nowrap; appearance: none; cursor: pointer; height: 44px; padding: 0 22px; border-radius: 10px; border: 1.5px solid rgba(27,23,20,.18); background: #fff; font: inherit; font-weight: 700; font-size: 14.5px; color: #1b1714; }
  .kot-home .ktab:hover{ border-color: var(--kot-blue-600); color: var(--kot-blue-700); }
  .kot-home .ktab.active{ background: var(--kot-blue-600); border-color: var(--kot-blue-600); color: #fff; }

  /* stat band */
  .kot-home .statband{ background: #fff; border-bottom: 1px solid rgba(27,23,20,.09); padding: 40px 0; }
  .kot-home .stat4{ display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
  .kot-home .stat4 .cell{ text-align: center; padding: 0 12px; }
  .kot-home .stat4 .cell + .cell{ border-left: 1px solid rgba(27,23,20,.09); }
  .kot-home .stat4 .n{ font-weight: 800; font-size: 40px; letter-spacing: -1.2px; color: var(--kot-blue-600); line-height: 1; }
  .kot-home .stat4 .l{ font-weight: 600; font-size: 13px; color: var(--text-warm); margin-top: 10px; }

  /* category grid */
  .kot-home .catgrid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .kot-home .cat{ position: relative; overflow: hidden; border-radius: 18px; min-height: 264px; display: flex; align-items: flex-end; background: var(--kot-ink-700); cursor: pointer; }
  .kot-home .cat.wide{ grid-column: span 2; min-height: 264px; }
  .kot-home .cat img, .kot-home .cat image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
  .kot-home .cat:hover img{ transform: scale(1.045); }
  .kot-home .cat .scrim{ position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(10,26,40,.92) 8%, rgba(10,26,40,.42) 52%, rgba(10,26,40,.12) 100%); }
  .kot-home .cat .body{ position: relative; padding: 26px 26px 24px; width: 100%; }
  .kot-home .cat .body h3{ font-weight: 800; font-size: 22px; letter-spacing: -.3px; color: #fff; }
  .kot-home .cat .body p{ font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.78); margin-top: 7px; max-width: 330px; }
  .kot-home .cat .body .go{ display: inline-flex; align-items: center; gap: 7px; margin-top: 15px; font-weight: 700; font-size: 13px; letter-spacing: .3px; color: var(--kot-gold-500); }
  .kot-home .cat:hover .go svg{ transform: translateX(3px); }
  .kot-home .cat .go svg{ transition: transform .18s ease; }
  .kot-home .cat.product{ background: radial-gradient(ellipse 90% 70% at 50% 22%, #1e415f 0%, var(--kot-ink-700) 72%); }
  .kot-home .cat.product img{ inset: 0 0 auto; height: 60%; object-fit: contain; padding: 24px 24px 0; }
  .kot-home .cat.product .scrim{ background: linear-gradient(to top, rgba(10,26,40,.94) 22%, rgba(10,26,40,.35) 58%, rgba(10,26,40,0) 100%); }

  /* start paths */
  .kot-home .paths{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }


  /* bundle lead-in */
  .kot-home .bcta{ display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1), 0 26px 50px -34px rgba(8,30,48,.4); }
  .kot-home .bctatext{ padding: 44px 8px 44px 44px; }
  .kot-home .bctarow{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
  .kot-home .bctashot{ height: 340px; }
  .kot-home .bctashot image-slot, .kot-home .bctashot img{ width: 100%; height: 100%; object-fit: cover; }
  /* start here — editorial routes */
  .kot-home .startgrid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; }
  .kot-home .route{ position: relative; overflow: hidden; border-radius: 20px; min-height: 430px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--kot-ink-700); text-decoration: none; box-shadow: 0 26px 50px -30px rgba(8,30,48,.55); }
  .kot-home .route img, .kot-home .route image-slot{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .kot-home .route:hover img, .kot-home .route:hover image-slot{ transform: scale(1.05); }
  .kot-home .route .scrim{ position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,20,28,.95) 4%, rgba(10,20,28,.62) 46%, rgba(10,20,28,.18) 100%); }
  .kot-home .route .rbody{ position: relative; z-index: 2; padding: 30px 28px 28px; }
  .kot-home .route .rtag{ display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(4px); color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; }
  .kot-home .route h3{ font-family: var(--font-display,inherit); font-weight: 800; font-size: 26px; line-height: 1.14; letter-spacing: -.5px; color: #fff; margin: 16px 0 0; }
  .kot-home .route p{ font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.76); margin: 10px 0 0; max-width: 300px; }
  .kot-home .route .go{ display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-weight: 800; font-size: 14px; color: var(--kot-gold,#f6a329); }
  .kot-home .route .go svg{ stroke: currentColor; transition: transform .18s ease; }
  .kot-home .route:hover .go svg{ transform: translateX(4px); }
  /* start here — typographic paths */
  .kot-home .pathrow{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 40px; }
  .kot-home .pathcard{ position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 30px 28px 28px; border-radius: 18px; background: #E7F3FB; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); text-decoration: none; transition: box-shadow .2s ease, transform .2s ease; }
  .kot-home .pathcard:hover{ transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), 0 20px 40px -22px rgba(10,20,28,.55); }
  .kot-home .pathcard .pnum{ position: absolute; top: 24px; right: 26px; font-family: var(--font-display,inherit); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -1px; color: rgba(255,255,255,.16); }
  .kot-home .pathcard .pico{ display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: rgba(255,255,255,.10); color: var(--kot-gold-500); }
  .kot-home .pathcard .pico svg{ fill: none; color: var(--kot-gold-500); stroke: var(--kot-gold-500); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .kot-home .pathcard .ptag{ margin-top: 20px; line-height: 1.3; white-space: nowrap; font-weight: 800; font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase; color: #000000; }
  .kot-home .pathcard h3{ font-family: var(--font-display,inherit); font-weight: 800; font-size: 23px; line-height: 1.18; letter-spacing: -.4px; color: #1B1714; margin: 8px 0 0; max-width: 15ch; }
  .kot-home .pathcard p{ font-size: 14.5px; line-height: 1.55; color: #404040 ; margin: 10px 0 0; }
  .kot-home .pathcard .go{ display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; width: 100%; margin-block-start: auto; border-top: 1px solid #A9D7F3; font-weight: 800; font-size: 14px; color: #0871B9; }
  .kot-home .pathcard .go svg{ stroke: currentColor; transition: transform .18s ease; }
  .kot-home .pathcard:hover .go svg{ transform: translateX(4px); }
  .kot-home .pathcard.hasimg{ padding: 0; overflow: hidden; }
  .kot-home .pathcard .pshot{ display: block; position: relative; width: 100%; height: 178px; overflow: hidden; }
  .kot-home .pathcard .pshot img{ width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
  .kot-home .pathcard .pshot::after{ content: ""; position: absolute; top: 0; right: 0; width: 46%; height: 62%; background: radial-gradient(120% 110% at 100% 0%, rgba(8,20,32,.62), rgba(8,20,32,0) 70%); pointer-events: none; }
  .kot-home .pathcard:hover .pshot img{ transform: scale(1.05); }
  .kot-home .pathcard .pshot .pnum{ top: 14px; right: 16px; color: rgba(255,255,255,.9); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
  .kot-home .pathcard .pbody{ display: flex; flex-direction: column; align-items: flex-start; flex: 1; width: 100%; padding: 24px 26px 26px; }
  .kot-home .pathcard .pbody .ptag{ margin-top: 0; }
  @media (max-width: 640px){ .kot-home .pathcard .pshot{ height: 190px; } .kot-home .pathcard .pbody{ padding: 20px 20px 22px; } }
  .kot-home .startbar{ display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 26px; padding: 18px 24px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); }
  .kot-home .startbar span{ font-size: 14.5px; color: var(--text-warm); }
  .kot-home .startbar b{ color: #1b1714; }
  .kot-home .startlead{ max-width: 640px; margin: 0 auto; text-align: center; }
  .kot-home .path .num{ position: absolute; top: 26px; right: 26px; font-family: var(--font-display,inherit); font-weight: 800; font-size: 40px; line-height: 1; color: rgba(27,23,20,.09); letter-spacing: -1px; }
  .kot-home .path::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--kot-gold,#f6a329), rgba(246,163,41,0)); opacity: 0; transition: opacity .18s ease; }
  .kot-home .path:hover::before{ opacity: 1; }
  .kot-home .path{ position: relative; overflow: hidden; background: #fff; border-radius: 18px; padding: 30px 28px 28px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease; }
  .kot-home .path:hover{ transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(21,121,190,.4), 0 22px 44px -26px rgba(8,30,48,.5); }
  .kot-home .path .well{ width: 54px; height: 54px; border-radius: 15px; background: var(--kot-blue-100); display: flex; align-items: center; justify-content: center; }
  .kot-home .path h3{ font-weight: 800; font-size: 20px; letter-spacing: -.2px; color: #1b1714; margin-top: 20px; }
  .kot-home .path p{ font-size: 14.5px; line-height: 1.58; color: var(--text-warm); margin-top: 10px; }
  .kot-home .path ul{ list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 9px; }
  .kot-home .path li{ display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.45; color: var(--text-warm); }
  .kot-home .path .foot{ margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(27,23,20,.09); }

  /* product cards */
  .kot-home .prodgrid{ display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
  .kot-home .bstabs{ display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 24px; }
  .kot-home .bstab{ white-space: nowrap; appearance: none; cursor: pointer; height: 44px; padding: 0 22px; border-radius: 10px; border: 1.5px solid rgba(27,23,20,.18); background: #fff; font: inherit; font-weight: 700; font-size: 14px; color: var(--kot-ink-800); transition: border-color .15s ease, background .15s ease, color .15s ease; }
  .kot-home .bspanel[hidden]{ display: none; }
  .kot-home .bstab:hover{ border-color: var(--kot-blue-600); color: var(--kot-blue-700); }
  .kot-home .bstab.active{ background: var(--kot-blue-600); border-color: var(--kot-blue-600); color: #fff; }
  .kot-home .prod{ background: #fff; border-radius: 16px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .18s ease, transform .18s ease; }
  .kot-home .prod:hover{ transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(27,23,20,.1), 0 22px 40px -26px rgba(8,30,48,.5); }
  .kot-home .prod .shot{ position: relative; height: 210px; background: var(--kot-grey-100); display: flex; align-items: center; justify-content: center; padding: 18px; }
  .kot-home .prod .shot img{ max-height: 100%; width: auto; object-fit: contain; }
  .kot-home .prod .flag{ position: absolute; top: 12px; left: 12px; background: var(--kot-gold-500); color: var(--kot-ink-800); border-radius: 999px; padding: 5px 11px; font-weight: 800; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; }
  .kot-home .prod .flag.blue{ background: var(--kot-blue-600); color: #fff; }
  .kot-home .prod .body{ padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
  .kot-home .prod .brand{ font-weight: 700; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-warm-muted); }
  .kot-home .prod .name{ font-weight: 700; font-size: 16px; line-height: 1.3; color: #1b1714; margin-top: 7px; }
  .kot-home .prod .meta{ font-size: 12.5px; color: var(--text-warm-muted); margin-top: 7px; }
  .kot-home .prod .rowb{ display: flex; align-items: baseline; gap: 8px; margin-top: 14px; }
  .kot-home .prod .price{ font-weight: 800; font-size: 20px; letter-spacing: -.4px; color: #1b1714; }
  .kot-home .prod .was{ font-size: 13px; color: var(--text-warm-muted); text-decoration: line-through; }
  .kot-home .prod .cta{ margin-top: 16px; }
  .kot-home .prod .cta .btn{ height: 44px; font-size: 13.5px; }

  /* builder */
  .kot-home .builder{ display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px; align-items: start; }
  .kot-home .bsteps{ display: flex; flex-direction: column; gap: 14px; }
  .kot-home .bstep{ background: #fff; border-radius: 16px; padding: 22px 24px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); }
  .kot-home .bstep .top{ display: flex; align-items: center; gap: 12px; }
  .kot-home .bstep .num{ width: 30px; height: 30px; border-radius: 999px; background: var(--kot-blue-600); color: #fff; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
  .kot-home .bstep .lbl{ font-weight: 700; font-size: 16px; color: #1b1714; }
  .kot-home .bstep .req{ margin-left: auto; font-weight: 700; font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--text-warm-muted); }
  .kot-home .opts{ display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 16px; }
  .kot-home .opt{ background: var(--kot-grey-100); border: none; border-radius: 12px; padding: 14px 13px; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(27,23,20,.08); transition: box-shadow .16s ease, background .16s ease; }
  .kot-home .opt:hover{ background: #fff; }
  .kot-home .opt.sel{ background: #fff; box-shadow: inset 0 0 0 2px var(--kot-blue-600); }
  .kot-home .opt .on{ font-weight: 700; font-size: 13.5px; line-height: 1.3; color: #1b1714; display: block; }
  .kot-home .opt .op{ font-weight: 700; font-size: 12.5px; color: var(--kot-blue-600); margin-top: 6px; display: block; }
  .kot-home .opt .od{ font-size: 11.5px; color: var(--text-warm-muted); margin-top: 5px; display: block; line-height: 1.4; }
  .kot-home .bsum{ background: var(--kot-ink-700); border-radius: 18px; padding: 26px 26px 24px; position: sticky; top: 100px; }
  .kot-home .bsum .st{ font-weight: 800; font-size: 18px; color: #fff; }
  .kot-home .bsum .ss{ font-size: 13px; color: rgba(255,255,255,.6); margin-top: 6px; }
  .kot-home .bsum .lines{ margin-top: 20px; display: flex; flex-direction: column; gap: 11px; }
  .kot-home .bsum .line{ display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.82); }
  .kot-home .bsum .line span:first-child{ flex: 1; }
  .kot-home .bsum .line b{ color: #fff; font-weight: 700; }
  .kot-home .bsum .line.off{ color: rgba(255,255,255,.38); }
  .kot-home .bsum .tot{ display: flex; align-items: baseline; justify-content: space-between; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); }
  .kot-home .bsum .tot .l{ font-weight: 700; font-size: 13px; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.65); }
  .kot-home .bsum .tot .v{ font-weight: 800; font-size: 32px; letter-spacing: -.8px; color: #fff; }
  .kot-home .bsum .save{ display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; background: rgba(246,163,41,.16); color: var(--kot-gold-500); border-radius: 999px; padding: 7px 13px; font-weight: 700; font-size: 12px; }
  .kot-home .bsum .btn{ margin-top: 20px; }
  .kot-home .bsum .note{ display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.6); }

  /* brewery wall */
  .kot-home .brandwall{ display: grid; grid-template-columns: repeat(6,1fr); gap: 14px; }
  .kot-home .bcard{ background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
  .kot-home .bcard:hover{ transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(27,23,20,.1), 0 16px 30px -20px rgba(8,30,48,.45); }
  .kot-home .bcard img{ width: 100%; height: 108px; object-fit: contain; }
  .kot-home .bcard.wordmark{ display: flex; align-items: center; justify-content: center; height: 108px; font-weight: 800; font-size: 17px; letter-spacing: .4px; text-align: center; padding: 0 12px; }

  /* why on tap */
  .kot-home .why2{ display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
  .kot-home .whyspec{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
  .kot-home .wspec{ background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); border-radius: 16px; padding: 24px 22px; }
  .kot-home .wspec svg{ margin-bottom: 14px; }
  .kot-home .wspec .v{ font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -1.2px; color: var(--kot-gold-500); }
  .kot-home .wspec .k{ font-size: 13px; font-weight: 600; line-height: 1.45; color: rgba(255,255,255,.72); margin-top: 9px; }
  .kot-home .whyshot{ border-radius: 20px; overflow: hidden; height: 540px; }
  .kot-home .whyshot2{ display: grid; grid-template-rows: 1.35fr 1fr; gap: 14px; height: 540px; background: none; border-radius: 0; overflow: hidden; }
  .kot-home .whyshot2 > img{ min-height: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
  .kot-home .whyshot img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(1.08) saturate(1.04); }

  /* comparison */
  .kot-home .cmp{ background: #fff; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); overflow: hidden; }
  .kot-home .cmp table{ width: 100%; border-collapse: collapse; }
  .kot-home .cmp th, .kot-home .cmp td{ padding: 17px 20px; text-align: left; font-size: 14px; border-bottom: 1px solid rgba(27,23,20,.08); }
  .kot-home .cmp thead th{ background: var(--kot-grey-100); font-weight: 700; font-size: 12px; letter-spacing: .7px; text-transform: uppercase; color: var(--text-warm-muted); }
  .kot-home .cmp thead th.hl{ background: var(--kot-blue-100); color: var(--kot-blue-700); }
  .kot-home .cmp td.rowlbl{ font-weight: 700; color: #1b1714; width: 24%; }
  .kot-home .cmp td.hl{ background: rgba(21,121,190,.05); font-weight: 600; color: #1b1714; }
  .kot-home .cmp td{ color: var(--text-warm); }
  .kot-home .cmp .ch{ display: inline-flex; align-items: center; gap: 8px; }
  .kot-home .cmp tr:last-child td, .kot-home .cmp tr:last-child th{ border-bottom: none; }
  .kot-home .cmp .prodhead{ display: flex; flex-direction: column; gap: 4px; }
  .kot-home .cmp .prodhead b{ font-weight: 800; font-size: 15px; letter-spacing: -.2px; color: #1b1714; text-transform: none; letter-spacing: 0; }
  .kot-home .cmp .prodhead span{ font-weight: 600; font-size: 11.5px; letter-spacing: .3px; color: var(--text-warm-muted); text-transform: none; }

  /* reviews + UGC */
  .kot-home .revgrid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .kot-home .review{ background: #fff; border-radius: 16px; padding: 26px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); display: flex; flex-direction: column; }
  .kot-home .review .q{ font-size: 15px; line-height: 1.62; color: #1b1714; margin-top: 14px; flex: 1; }
  .kot-home .review .who{ display: flex; align-items: center; gap: 11px; margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(27,23,20,.09); }
  .kot-home .review .av{ width: 38px; height: 38px; border-radius: 999px; background: var(--kot-blue-100); color: var(--kot-blue-700); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
  .kot-home .review .nm{ font-weight: 700; font-size: 13.5px; color: #1b1714; }
  .kot-home .review .lo{ font-size: 12px; color: var(--text-warm-muted); margin-top: 2px; }
  .kot-home .ugc{ display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 20px; }
  .kot-home .ugc .tile{ border-radius: 14px; overflow: hidden; height: 220px; }
  .kot-home .ugc .tile image-slot, .kot-home .ugc .tile img{ width: 100%; height: 100%; object-fit: cover; }

  /* commercial */
  .kot-home .comm{ position: relative; overflow: hidden; border-radius: 22px; min-height: 420px; display: flex; align-items: center; background: var(--kot-ink-700); }
  .kot-home .comm img.bg, .kot-home .comm image-slot.bg{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .kot-home .comm .veil{ position: absolute; inset: 0; pointer-events: none; background: linear-gradient(95deg, rgba(10,26,40,.95) 0%, rgba(10,26,40,.82) 46%, rgba(10,26,40,.25) 100%); }
  .kot-home .comm .inner{ position: relative; padding: 52px 54px; max-width: 620px; }
  .kot-home .comm .cl{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin: 26px 0 30px; }
  .kot-home .comm .cl span{ display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.85); }

  /* story */
  .kot-home .story2{ display: grid; grid-template-columns: 1fr 1.05fr; gap: 54px; align-items: center; }
  .kot-home .storyshot{ border-radius: 20px; overflow: hidden; height: 440px; }
  .kot-home .storyshot img{ width: 100%; height: 100%; object-fit: cover; }
  .kot-home .storyp{ font-size: 16px; line-height: 1.68; color: var(--text-warm); margin-top: 18px; }
  .kot-home .sigrow{ display: flex; gap: 30px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(27,23,20,.1); }
  .kot-home .sigrow .s .v{ font-weight: 800; font-size: 24px; letter-spacing: -.5px; color: var(--kot-blue-600); }
  .kot-home .sigrow .s .k{ font-weight: 600; font-size: 12.5px; color: var(--text-warm-muted); margin-top: 5px; }

  .kot-home .usp4{ display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 28px; }
  .kot-home .uspt{ background: #fff; border-radius: 14px; padding: 18px 18px 20px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); }
  .kot-home .uspt .w{ width: 40px; height: 40px; border-radius: 11px; background: var(--kot-blue-100); display: flex; align-items: center; justify-content: center; }
  .kot-home .uspt b{ display: block; font-weight: 800; font-size: 15px; color: #1b1714; margin-top: 14px; }
  .kot-home .uspt em{ display: block; font-style: normal; font-size: 13px; line-height: 1.5; color: var(--text-warm); margin-top: 5px; }
  .kot-home .gdark{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 38px; }
  .kot-home .aboutbg{ position: relative; overflow: hidden; }
  .kot-home .aboutbg > img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .kot-home .aboutbg > .veil2{ position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,12,11,.9), rgba(14,12,11,.82) 45%, rgba(14,12,11,.93)); }
  .kot-home .aboutbg > .wrap{ position: relative; z-index: 2; }
  .kot-home .gdark.four{
  grid-template-columns: repeat(4,minmax(0,1fr));
}
  .kot-home .gdark.four .gtile{ background: rgba(255,255,255,.08); backdrop-filter: blur(3px); }
  .kot-home .gtile{ background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.13); border-radius: 16px; padding: 26px 24px; }
  .kot-home .gtile .w{ width: 48px; height: 48px; border-radius: 999px; background: rgba(246,163,41,.14); display: flex; align-items: center; justify-content: center; }
  .kot-home .gtile b{ display: block; font-weight: 800; font-size: 16.5px; color: #fff; margin-top: 18px; }
  .kot-home .gtile em{ display: block; font-style: normal; font-size: 13.5px; line-height: 1.55; color: rgba(255,255,255,.72); margin-top: 8px; }

  .kot-home .sec-blue .gtile, .kot-home .sec-blue .gdark.four .gtile{ background: #fff; backdrop-filter: none; box-shadow: inset 0 0 0 1px rgba(27,23,20,.07), 0 10px 26px -20px rgba(8,30,48,.35); }
  .kot-home .sec-blue .gtile .w{ background: var(--kot-blue-100); border-radius: 12px; }
  .kot-home .sec-blue .gtile b{ color: #1b1714; }
  .kot-home .sec-blue .gtile em{ color: var(--text-warm); }

  /* trust guarantees */
  .kot-home .g6{ display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
  .kot-home .gcard{ background: #fff; border-radius: 16px; padding: 24px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); }
  .kot-home .gcard .w{ width: 44px; height: 44px; border-radius: 12px; background: var(--kot-blue-100); display: flex; align-items: center; justify-content: center; }
  .kot-home .gcard b{ display: block; font-weight: 700; font-size: 16px; color: #1b1714; margin-top: 16px; }
  .kot-home .gcard em{ display: block; font-style: normal; font-size: 13.5px; line-height: 1.55; color: var(--text-warm); margin-top: 7px; }

  /* resources */
  .kot-home .res3{ display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
  .kot-home .res{ background: #fff; border-radius: 16px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease; cursor: pointer; }
  .kot-home .res:hover{ transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(27,23,20,.1), 0 22px 40px -26px rgba(8,30,48,.5); }
  .kot-home .res .shot{ height: 176px; }
  .kot-home .res .shot img, .kot-home .res .shot image-slot{ width: 100%; height: 100%; object-fit: cover; }
  .kot-home .res .body{ padding: 22px 22px 24px; }
  .kot-home .res .kicker{ font-weight: 700; font-size: 11px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--kot-blue-600); }
  .kot-home .res h4{ font-weight: 700; font-size: 17.5px; line-height: 1.32; color: #1b1714; margin-top: 10px; }
  .kot-home .res p{ font-size: 13.5px; line-height: 1.55; color: var(--text-warm); margin-top: 9px; }

  /* faq */
  .kot-home .qa{ background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px rgba(27,23,20,.1); overflow: hidden; }
  .kot-home .qa + .qa{ margin-top: 10px; }
  .kot-home .qa > button{ width: 100%; display: flex; align-items: center; gap: 14px; background: none; border: none; cursor: pointer; padding: 20px 22px; text-align: left; font-weight: 700; font-size: 15.5px; color: #1b1714; }
  .kot-home .qa > button svg{ margin-left: auto; transition: transform .2s ease; }
  .kot-home .qa[open] > button svg{ transform: rotate(180deg); }
  .kot-home .qa .ans{ display: none; padding: 0 22px 22px 22px; font-size: 14.5px; line-height: 1.65; color: var(--text-warm); }
  .kot-home .qa[open] .ans{ display: block; }

  /* final cta */
  .kot-home .finalcta{ background: var(--kot-ink-700); padding: 82px 0; text-align: center; }
  .kot-home .finalcta .ctas{ display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
  .kot-home .finalcta .under{ display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 28px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.62); }
  .kot-home .finalcta .under span{ display: inline-flex; align-items: center; gap: 8px; }

  /* footers */
  .kot-home .trust4{ display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
  .kot-home .trust4 .cell{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .kot-home .trust4 .t{ font-weight: 700; font-size: 14px; color: #1b1714; }
  .kot-home .trust4 .s{ font-size: 12.5px; color: var(--text-warm-muted); }
  .kot-home .trustfoot{ background: #fff; border-top: 1px solid rgba(27,23,20,.1); padding: 52px 0; }
  .kot-home .sitefoot{ background: var(--kot-ink-700); padding: 56px 0 44px; text-align: center; }
  .kot-home .sitefoot .logo{ height: 34px; display: inline-block; filter: brightness(0) invert(1); }
  .kot-home .sitefoot .tagline{ font-size: 15px; color: rgba(255,255,255,.7); margin-top: 16px; }
  .kot-home .sitefoot .legal{ font-size: 12px; line-height: 1.7; color: rgba(255,255,255,.45); margin-top: 20px; }

  /* mobile chrome */
  .kot-home .burger, .kot-home .mbar, .kot-home .topbar .mob{ display: none; }
  .kot-home .mnav{ display: none; position: fixed; inset: 0 0 0 auto; width: min(86vw, 340px); background: #fff; z-index: 60; transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); box-shadow: -20px 0 60px -20px rgba(8,30,48,.5); overflow-y: auto; padding: 18px 20px 28px; }
  .kot-home .mnav.open{ transform: none; }
  .kot-home .mscrim{ display: none; position: fixed; inset: 0; background: rgba(8,20,32,.5); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .26s ease; }
  .kot-home .mscrim.on{ opacity: 1; pointer-events: auto; }
  .kot-home .mlink{ display: flex; align-items: center; min-height: 52px; font-weight: 700; font-size: 16.5px; color: #1b1714; border-bottom: 1px solid rgba(27,23,20,.08); }
  .kot-home .mlink:hover{ color: var(--kot-blue-600); }

  @media (max-width: 1100px){
    .kot-home .kegrow{ grid-template-columns: repeat(4,1fr); }
    .kot-home .prodgrid, .kot-home .ugc{ grid-template-columns: repeat(2,1fr); }
    .kot-home .brandwall{ grid-template-columns: repeat(4,1fr); }
    .kot-home .builder, .kot-home .why2, .kot-home .story2, .kot-home .bcta{ grid-template-columns: 1fr; gap: 30px; }
    .kot-home .bctatext{ padding: 36px 30px 0; }
    .kot-home .bctashot{ height: 260px; }
    .kot-home .bsum{ position: static; }
    .kot-home .hero{ min-height: 540px; padding: 40px; }
    .kot-home .hero .hcopy{ padding: 26px 26px 28px; max-width: 560px; }
    .kot-home .hero h1{ font-size: clamp(22px,2.8vw,28px); letter-spacing: -.8px; }
    .kot-home .hero p.sub{ font-size: 17px; }
    .kot-home .truststrip .wrap{ gap: 10px 22px; line-height: 12px;}
    .kot-home .catgrid, .kot-home .paths, .kot-home .startgrid, .kot-home .pathrow, .kot-home .revgrid, .kot-home .g6, .kot-home .res3{ grid-template-columns: repeat(2,1fr); }
    .kot-home .cat.wide{ grid-column: span 2; }
    .kot-home .whyshot, .kot-home .storyshot{ height: 340px; }
    .kot-home .whyshot2{ height: 420px; }
    .kot-home .nav .navlinks{ display: none; }
    .kot-home .burger{ display: inline-flex; }
    .kot-home .mnav, .kot-home .mscrim{ display: block; }
  }

  /* ===== tablet / large phone ===== */
  @media (max-width: 900px){
    .kot-home{ overflow-x: hidden; }
    .kot-home .wrap{ padding: 0 22px; }
    .kot-home .sec{ padding: 56px 0; }
    .kot-home .h1{ font-size: 36px; letter-spacing: -1px; }
    .kot-home .h2{ font-size: 28px; letter-spacing: -.5px; }
    .kot-home .h3{ font-size: 19px; }
    .kot-home .lead{ font-size: 15.5px; line-height: 1.6; }
    .kot-home .headrow{ display: block; margin-bottom: 26px; }
    .kot-home .headrow .txtlink{ margin-top: 16px; }
    .kot-home .gdark, .kot-home .gdark.four, .kot-home .whyspec, .kot-home .usp4, .kot-home .trust4{ grid-template-columns: repeat(2,1fr); gap: 12px; }
    .kot-home .gtile{ padding: 20px 18px; }
    .kot-home .gtile .w{ width: 42px; height: 42px; }
    .kot-home .gtile b{ font-size: 15.5px; margin-top: 14px; }
    .kot-home .gtile em{ font-size: 13px; }
  }

  /* ===== phone ===== */
  @media (max-width: 760px){
    .kot-home{ padding-bottom: 0px; -webkit-tap-highlight-color: rgba(21,121,190,.12); }
    .kot-home .wrap{ padding: 0 18px; }
    .kot-home .sec{ padding: 46px 0; }

    /* header */
    .kot-home .topbar{ padding: 8px 0; }
    .kot-home .topbar .wrap{ gap: 8px; font-size: 11.5px; padding: 0 18px; }
    .kot-home .topbar .item, .kot-home .topbar .divider{ display: none; }
    .kot-home .topbar .mob{ display: inline-flex; align-items: center; gap: 7px; font-weight: 700; letter-spacing: .3px; text-align: center; }
    .kot-home .nav .wrap{ height: 62px; padding: 0 14px; }
    .kot-home .nav img{ height: 26px !important; }
    .kot-home .iconbtn{ width: 44px; height: 44px; }
    .kot-home .burger{ display: inline-flex; }

    /* hero — image with overlapping card */
    .kot-home .hero{ display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0 0 24px; background: #071f33; }
    .kot-home .hero .hshot{ order: -1; position: relative; inset: auto; height: 320px; }
    .kot-home .hero .hshot img{ position: absolute; inset: 0; height: 100%; object-position: 60% 45%; }
    .kot-home .hero .hshot::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,18,31,.12) 0%, rgba(4,18,31,0) 40%, rgba(4,18,31,.5) 100%); }
    .kot-home .hero .hcopy{ margin: -58px 16px 0; padding: 24px 22px 26px; border-radius: 14px; max-width: none; background: rgba(10,23,35,.88); }
    .kot-home .hero .eyerow{ gap: 9px; }
    .kot-home .hero h1{ font-size: 30px; line-height: 1.1; letter-spacing: -.8px; margin-top: 12px; }
    .kot-home .hero p.sub{ font-size: 15px; line-height: 1.55; margin: 10px 0 0; }
    .kot-home .truststrip .wrap{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; padding-top: 14px; padding-bottom: 14px; }
    .kot-home .truststrip .t{ font-size: 12px; white-space: normal; gap: 9px; line-height: 13px; }
    .kot-home .truststrip .ti{ width: 34px; height: 34px; }
    .kot-home .hnote{ display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.78); }
    .kot-home .hero .ctas{ display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
    .kot-home .hero .ctas .btn{ width: 100%; height: 54px; font-size: 15px; }

    /* stats */
    .kot-home .statband{ padding: 26px 0; }
    /* shop kegs strip: horizontal scroller */
    .kot-home .kegstrip{ padding: 40px 0 44px; }
    .kot-home .kegrow{ display: flex; gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -18px; padding: 4px 18px 6px; }
    .kot-home .kegrow::-webkit-scrollbar{ display: none; }
    /* best-seller tabs: single scrolling line */
    .kot-home .bstabs{ flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 20px; padding: 2px 18px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .kot-home .bstabs::-webkit-scrollbar{ display: none; }
    .kot-home .bstab{ flex: none; }
    .kot-home .kegtabs{ flex-wrap: nowrap; overflow-x: auto; margin: 0 -18px 18px; padding: 2px 18px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .kot-home .kegtabs::-webkit-scrollbar{ display: none; }
    .kot-home .ktab{ flex: none; }
    .kot-home .kcat{ flex: 0 0 148px; scroll-snap-align: start; }
    .kot-home .kcat .kimg{ height: 104px; padding: 10px 8px 2px; }
    .kot-home .kcat .klabel{ font-size: 13px; padding: 9px 6px 13px; }
    .kot-home .stat4{ grid-template-columns: repeat(2,1fr); gap: 22px 0; }
    .kot-home .stat4 .cell{ padding: 0 10px; }
    .kot-home .stat4 .cell:nth-child(3){ border-left: none; }
    .kot-home .stat4 .n{ font-size: 30px; letter-spacing: -.9px; }
    .kot-home .stat4 .l{ font-size: 12px; margin-top: 7px; }

    /* stacked grids */
    .kot-home .catgrid, .kot-home .startgrid, .kot-home .pathrow, .kot-home .revgrid, .kot-home .g6, .kot-home .res3, .kot-home .ugc{ grid-template-columns: 1fr; gap: 14px; }
    /* member offers: horizontal scroller */
    .kot-home .paths{ display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -18px; padding: 4px 18px 6px; }
    .kot-home .paths::-webkit-scrollbar{ display: none; }
    .kot-home .paths .path{ flex: 0 0 78%; scroll-snap-align: start; }
    .kot-home .cat.wide, .kot-home .cat{ grid-column: span 1; min-height: 230px; border-radius: 16px; }
    .kot-home .cat .body{ padding: 20px 20px 22px; }
    .kot-home .cat .body h3{ font-size: 20px; }
    .kot-home .cat .body p{ font-size: 13px; max-width: 100%; }
    .kot-home .cat.product{ min-height: 300px; }
    .kot-home .cat.product img{ height: 46%; padding: 20px 20px 0; }

    /* products: 2-up compact */
    .kot-home .prodgrid{ grid-template-columns: repeat(2,1fr); gap: 12px; }
    .kot-home .prod .shot{ height: 140px; padding: 12px; }
    .kot-home .prod .flag{ top: 8px; left: 8px; padding: 4px 8px; font-size: 9.5px; }
    .kot-home .prod .body{ padding: 13px 13px 15px; }
    .kot-home .prod .brand{ font-size: 10px; }
    .kot-home .prod .name{ font-size: 14px; margin-top: 5px; }
    .kot-home .prod .meta{ font-size: 11.5px; line-height: 1.4; margin-top: 5px; }
    .kot-home .prod .rowb{ margin-top: 10px; gap: 6px; }
    .kot-home .prod .price{ font-size: 17px; }
    .kot-home .prod .was{ font-size: 12px; }
    .kot-home .prod .cta{ margin-top: 12px; }
    .kot-home .prod .cta .btn{ height: 46px; font-size: 13px; padding: 0 12px; }

    /* dark tiles + specs */
    .kot-home .gdark{ grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
    .kot-home .gdark .gtile{ padding: 18px 15px; }
    .kot-home .gdark .gtile .w{ width: 40px; height: 40px; }
    .kot-home .gdark .gtile b{ font-size: 14.5px; margin-top: 12px; line-height: 1.25; }
    .kot-home .gdark .gtile em{ font-size: 12.5px; line-height: 1.5; margin-top: 6px; }
    .kot-home .gdark.four{ grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
    .kot-home .gdark.four .gtile{ padding: 18px 15px; }
    .kot-home .gdark.four .gtile .w{ width: 40px; height: 40px; }
    .kot-home .gdark.four .gtile b{ font-size: 14.5px; margin-top: 12px; line-height: 1.25; }
    .kot-home .gdark.four .gtile em{ font-size: 12.5px; line-height: 1.5; margin-top: 6px; }
    .kot-home .whyspec{ grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 26px; }
    .kot-home .wspec{ padding: 18px 16px; }
    .kot-home .wspec .v{ font-size: 26px; letter-spacing: -.8px; }
    .kot-home .wspec .k{ font-size: 12px; margin-top: 7px; }
    .kot-home .why2, .kot-home .story2{ gap: 26px; }
    .kot-home .whyshot2{ height: auto; grid-template-rows: 220px 160px; gap: 12px; }
    .kot-home .whyshot, .kot-home .storyshot{ height: 260px; }

    /* start paths */
    .kot-home .pathcard{ padding: 24px 20px 22px; border-radius: 16px; }
    .kot-home .pathcard .pnum{ top: 18px; right: 20px; font-size: 28px; }
    .kot-home .pathcard h3{ font-size: 20px; max-width: 100%; }
    .kot-home .pathcard p{ font-size: 14px; }
    .kot-home .path{ padding: 24px 20px 22px; }
    .kot-home .path h3{ font-size: 18px; }
    .kot-home .startbar{ display: grid; gap: 14px; text-align: center; padding: 18px; }
    .kot-home .startbar .btn{ width: 100%; height: 50px !important; }

    /* brewery wall */
    .kot-home .brandwall{ grid-template-columns: repeat(3,1fr); gap: 10px; }
    .kot-home .bcard{ border-radius: 12px; }
    .kot-home .bcard img{ height: 74px; }

    /* bundle lead-in */
    .kot-home .bcta{ grid-template-columns: 1fr; gap: 0; border-radius: 16px; }
    .kot-home .bctashot{ order: -1; height: 210px; }
    .kot-home .bctatext{ padding: 26px 20px 28px; }
    .kot-home .bctarow{ display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
    .kot-home .bctarow .btn{ width: 100%; }
    .kot-home .opts{ grid-template-columns: 1fr; }

    /* commercial */
    .kot-home .comm{ border-radius: 16px; min-height: 0; }
    .kot-home .comm .veil{ background: linear-gradient(180deg, rgba(10,26,40,.86) 0%, rgba(10,26,40,.95) 55%); }
    .kot-home .comm .inner{ padding: 30px 20px 32px; max-width: 100%; }
    .kot-home .comm .cl{ grid-template-columns: 1fr; gap: 10px; margin: 20px 0 24px; }
    .kot-home .comm .cl span{ font-size: 13.5px; }
    .kot-home .comm .inner > div:last-child{ display: grid !important; grid-template-columns: 1fr; gap: 10px; }
    .kot-home .comm .inner .btn{ width: 100%; }

    /* faq */
    .kot-home .qa > button{ padding: 17px 16px; font-size: 14.5px; gap: 10px; min-height: 56px; }
    .kot-home .qa .ans{ padding: 0 16px 18px; font-size: 14px; }

    /* final cta */
    .kot-home .finalcta{ padding: 52px 0; }
    .kot-home .finalcta .h2{ font-size: 28px !important; }
    .kot-home .finalcta .lead{ font-size: 15.5px !important; }
    .kot-home .finalcta .ctas{ display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 24px; }
    .kot-home .finalcta .ctas .btn{ width: 100%; }
    .kot-home .finalcta .under{ display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: center; margin-top: 22px; font-size: 12.5px; }

    /* footers */
    .kot-home .trust4{ grid-template-columns: 1fr 1fr; gap: 22px 14px; }
    .kot-home .trust4 .t{ font-size: 13px; }
    .kot-home .trust4 .s{ font-size: 11.5px; }
    .kot-home .sitefoot, .kot-home .trustfoot{ padding: 34px 0 30px; }
    .kot-home .sitefoot .tagline{ font-size: 14px; }
    .kot-home .sitefoot .legal{ font-size: 11px; }

    /* sticky action bar */
    .kot-home .mbar{ display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid rgba(27,23,20,.12); }
    .kot-home .mbar .btn{ height: 50px; font-size: 14.5px; border-radius: 12px; }
    .kot-home .mbar .call{ width: 50px; height: 50px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--kot-blue-100); color: var(--kot-blue-700); flex: none; }
  }

  /* ===== small phone ===== */
  @media (max-width: 430px){
    .kot-home .wrap{ padding: 0 16px; }
    .kot-home .h2{ font-size: 25px; }
    .kot-home .hero h1{ font-size: 30px; }
    .kot-home .hero .hshot{ height: 260px; }
    .kot-home .hnote{ padding-left: 0; padding-right: 0; }
    .kot-home .prodgrid{ grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px;}
    .kot-home .paths{ margin: 0 -16px; padding: 4px 16px 6px; }
    .kot-home .paths .path{ flex: 0 0 84%; }
    .kot-home .prod .shot{ height: 140px; }
    .kot-home .prod .name{ font-size: 15.5px; }
    .kot-home .prod .price{ font-size: 19px; }
    .kot-home .whyspec{ grid-template-columns: 1fr; }
    .kot-home .gdark.four .gtile b, .kot-home .gdark .gtile b{ font-size: 14px; }
    .kot-home .brandwall{ grid-template-columns: repeat(3, minmax(0, 1fr));gap: 8px;}
    .kot-home .stat4 .n{ font-size: 27px; }
    .kot-home .bcard img{ height: 72px;}
  }


/* Theme editor helpers */
.shopify-design-mode .kot-home [data-kot-empty]:empty::after {
  content: "Choose content in the theme editor";
  color:#757575; font-size:13px;
}

/* Fix Dawn spinner .path class collision on Member Offers */
.kot-home .paths > .path {
  animation: none !important;
}

/* =========================================================
   DESKTOP TYPOGRAPHY + WIDER SECTION SUBHEADINGS
   Mobile untouched for now
   ========================================================= */
@media screen and (min-width: 901px) {

  /* Let section subheadings use more horizontal space */
  .kot-home .lead {
    max-width: 900px;
  }

  .kot-home .center .lead {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Main typography */
  .kot-home .eyebrow { font-size: 14.5px; }
  .kot-home .h1 { font-size: 60px; }
  .kot-home .h2 { font-size: 38px; }
  .kot-home .h3 { font-size: 23px; }
  .kot-home .lead { font-size: 18.5px; }

  /* Buttons / links / pills */
  .kot-home .btn { font-size: 17px; }
  .kot-home .txtlink { font-size: 16.5px; }
  .kot-home .pill { font-size: 13.5px; }

  /* Hero */
  .kot-home .hero h1 { font-size: 32px; }
  .kot-home .hero p.sub { font-size: 18px; }
  .kot-home .hero .rtext { font-size: 16px; }
  .kot-home .hero .eyerow small { font-size: 14.5px; }
  .kot-home .hero .ctas .btn { font-size: 17.5px; }

  /* Trust strip */
  .kot-home .truststrip .t { font-size: 15.5px; }

  /* Category / keg cards */
  .kot-home .kcat .klabel { font-size: 17px; }
  .kot-home .kcat .klabel .kbrand { font-size: 13px; }
  .kot-home .kcat .klabel .kprice { font-size: 16px; }
  .kot-home .ktab { font-size: 16.5px; }

  /* Stats */
  .kot-home .stat4 .n { font-size: 42px; }
  .kot-home .stat4 .l { font-size: 15px; }

  /* Category tiles */
  .kot-home .cat .body h3 { font-size: 24px; }
  .kot-home .cat .body p { font-size: 15.5px; }
  .kot-home .cat .body .go { font-size: 15px; }

  /* Setup cards */
  .kot-home .pathcard .pnum { font-size: 36px; }
  .kot-home .pathcard .ptag { font-size: 13.5px; }
  .kot-home .pathcard h3 { font-size: 25px; }
  .kot-home .pathcard p { font-size: 16.5px; }
  .kot-home .pathcard .go { font-size: 16px; }
  .kot-home .startbar span { font-size: 16.5px; }

  /* Product cards */
  .kot-home .prod .flag { font-size: 12.5px; }
  .kot-home .prod .brand { font-size: 13px; }
  .kot-home .prod .name { font-size: 18px; }
  .kot-home .prod .meta { font-size: 14.5px; }
  .kot-home .prod .price { font-size: 22px; }
  .kot-home .prod .was { font-size: 15px; }
  .kot-home .prod .cta .btn { font-size: 15.5px; }

  /* Member offer cards */
  .kot-home .path h3 { font-size: 22px; }
  .kot-home .path p { font-size: 16.5px; }
  .kot-home .path li { font-size: 15.5px; }

  /* Content / benefit tiles */
  .kot-home .gtile b { font-size: 18.5px; }
  .kot-home .gtile em { font-size: 15.5px; }
  .kot-home .gcard b { font-size: 18px; }
  .kot-home .gcard em { font-size: 15.5px; }

  /* Commercial section */
  .kot-home .comm .cl span { font-size: 16px; }

  /* Story */
  .kot-home .storyp { font-size: 18px; }

  /* USP blocks */
  .kot-home .uspt b { font-size: 17px; }
  .kot-home .uspt em { font-size: 15px; }

  /* FAQ */
  .kot-home .qa > button { font-size: 17.5px; }
  .kot-home .qa .ans { font-size: 16.5px; }

  /* Bottom trust */
  .kot-home .trust4 .t { font-size: 16px; }
  .kot-home .trust4 .s { font-size: 14.5px; }
}

/* =========================================================
   DESKTOP — Commercial CTAs + Member Offer alignment
   ========================================================= */
@media screen and (min-width: 901px) {

  /* Commercial section: keep Request a quote + Phone on one line */
  .kot-home .comm .inner > div:last-child {
    flex-wrap: nowrap !important;
    width: max-content;
  }

  .kot-home .comm .inner > div:last-child .btn {
    white-space: nowrap;
  }

  /* Member Offers: all 3 cards equal height */
  .kot-home .paths {
    align-items: stretch;
  }

  .kot-home .paths .path {
    height: 100%;
  }

  /* Push CTA area to bottom so all buttons line up */
  .kot-home .paths .path .foot {
    margin-top: auto;
  }
}

/* =========================================================
   MOBILE — align product card price + CTA
   ========================================================= */
@media screen and (max-width: 760px) {

  .kot-home .prodgrid {
    align-items: stretch;
  }

  .kot-home .prod {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .kot-home .prod .body {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* MOBILE — align price + CTA across all product/deal cards */
@media screen and (max-width: 760px) {

  .kot-home .prod {
    height: 100%;
  }

  .kot-home .prod .body {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* Everything above can vary in height;
     price + CTA stay aligned at the bottom */
  .kot-home .prod .rowb {
    margin-top: auto;
    padding-top: 16px;
  }

  .kot-home .prod .cta {
    margin-top: 12px;
  }

  /* Prevent "From $679" from breaking awkwardly */
  .kot-home .prod .price {
    white-space: nowrap;
  }
}
/* MOBILE — stack compare-at price under main price */
@media screen and (max-width: 760px) {

  .kot-home .prod .rowb {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 3px;
    line-height: 1px;
  }

  .kot-home .prod .price {
    white-space: nowrap;
    margin: 0;
  }

  .kot-home .prod .was {
    display: block;
    margin-left: 0 !important;
    white-space: nowrap;
  }
}
/* =========================================================
   MOBILE — Member Offers spacing + CTA alignment
   ========================================================= */
@media screen and (max-width: 760px) {

  /* Keep the carousel inside the normal page gutter */
  .kot-home .paths {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    align-items: stretch;
  }

  /* Make all visible offer cards equal height */
  .kot-home .paths .path {
    height: auto;
    display: flex;
    flex-direction: column;
  }

  /* Push divider + CTA to the bottom */
  .kot-home .path .foot {
    margin-top: auto !important;
    padding-top: 18px;
  }
}
/* Hero — support separate desktop/mobile images */
.kot-home .hero .hshot .hslide {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.kot-home .hero .hshot .hslide .kot-home-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* =========================================================
   MOBILE HERO — copy over image instead of separate dark card
   ========================================================= */
@media screen and (max-width: 760px) {

  .kot-home .hero {
    position: relative !important;
    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 820px;
    padding: 0 !important;
    overflow: hidden;
    background: #081b2b;
  }

  /* Image fills the entire mobile hero */
  .kot-home .hero .hshot {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100% !important;
    min-height: 100%;
    z-index: 0;
  }

  .kot-home .hero .hshot .hslide,
  .kot-home .hero .hshot picture {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .kot-home .hero .hshot .kot-home-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }

  /* Gradient so the text stays readable */
  .kot-home .hero .hshot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
      linear-gradient(
        to bottom,
        rgba(5, 18, 29, 0.02) 32%,
        rgba(5, 18, 29, 0.30) 52%,
        rgba(5, 18, 29, 0.78) 72%,
        rgba(5, 18, 29, 0.96) 100%
      );
  }

  /* Copy overlays the image */
  .kot-home .hero .hcopy {
    position: relative !important;
    z-index: 3;

    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0 24px 42px !important;

    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Review row */
  .kot-home .hero .eyerow {
    color: #fff;
    margin-bottom: 16px;
  }

  .kot-home .hero .rtext {
    color: rgba(255,255,255,.82) !important;
  }

  .kot-home .hero .rtext b {
    color: #fff !important;
  }

  /* Heading entirely white */
  .kot-home .hero h1,
  .kot-home .hero h1 em {
    color: #fff !important;
  }

  .kot-home .hero h1 {
    margin-bottom: 14px;
  }

  /* Subheading */
  .kot-home .hero p.sub {
    color: rgba(255,255,255,.92) !important;
    margin-bottom: 24px;
  }

  /* Buttons stacked */
  .kot-home .hero .ctas {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .kot-home .hero .ctas .btn {
    width: 100%;
    min-height: 58px;
    justify-content: center;
    border-radius: 999px;
  }

  .kot-home .hero .btn-primary {
    background: #1f86c7;
    border-color: #1f86c7;
    color: #fff;
  }

  .kot-home .hero .btn-ghost-light {
    background: rgba(255,255,255,.04);
    border: 2px solid rgba(255,255,255,.50);
    color: #fff;
  }

  /* Hide the extra delivery note to match screenshot 1 */
  .kot-home .hero .hnote {
    display: none !important;
  }

  /* Keep slider dots out of the copy */
  .kot-home .hero .hdots {
    z-index: 4;
  }
}
/* MOBILE HERO — remove blur, keep only mild dark overlay */
@media screen and (max-width: 760px) {

  .kot-home .hero .hcopy {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
    box-shadow: none !important;
  }

  .kot-home .hero .hshot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
      to bottom,
      rgba(5, 18, 29, 0) 40%,
      rgba(5, 18, 29, 0.10) 55%,
      rgba(5, 18, 29, 0.32) 72%,
      rgba(5, 18, 29, 0.55) 100%
    );
  }
}
/* MOBILE HERO — tighten vertical spacing */
@media screen and (max-width: 760px) {

  .kot-home .hero .hcopy {
    gap: 0 !important;
    padding: 0 24px 24px !important;
  }

  /* Reviews → headline */
  .kot-home .hero .eyerow {
    margin: 0 0 14px !important;
  }

  /* Headline → subheadline */
  .kot-home .hero h1 {
    margin: 0 0 12px !important;
    line-height: 1.08 !important;
  }

  /* Subheadline → buttons */
  .kot-home .hero p.sub {
    margin: 0 0 16px !important;
    line-height: 1.4 !important;
  }

  /* Space between the two buttons */
  .kot-home .hero .ctas {
    gap: 10px !important;
    margin: 0 !important;
  }

  /* Slightly more compact buttons */
  .kot-home .hero .ctas .btn {
    min-height: 54px !important;
  }
}
/* =========================================================
   SPECIALIST CALLOUT BAR
   ========================================================= */

.kot-home .kot-specialist-callout {
  padding: 28px 0 !important;
  margin: 0 !important;
  background: #f3f6fa;
}

.kot-home .kot-specialist-callout .wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.kot-home .kot-specialist-callout .startbar {
  margin: 0 !important;
  padding: 20px 28px !important;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;

  background: #fff;
  border: 1px solid #dedede;
  border-radius: 16px;
}

/* DESKTOP — trust strip all copy on one line */
@media screen and (min-width: 901px) {

  .kot-home .truststrip .wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
  }

  .kot-home .truststrip .t {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;

    width: auto !important;
    max-width: none !important;
    min-width: max-content !important;

    white-space: nowrap !important;
  }

  /* THIS is the important bit */
  .kot-home .truststrip .t div,
  .kot-home .truststrip .t span,
  .kot-home .truststrip .t p {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    white-space: nowrap !important;
    margin: 0 !important;
  }

  .kot-home .truststrip .t br {
    display: none !important;
  }
}

/* =========================================================
   HOMEPAGE PRODUCT CARD LAYERING — FINAL
   Keeps sale / bestseller badges above product images.
   NOTE: white backgrounds baked into source images must be
   replaced with transparent images via the card override.
   ========================================================= */

.kot-home .prod .shot {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

.kot-home .prod .shot img {
  position: relative !important;
  z-index: 0 !important;
  pointer-events: none;
}

.kot-home .prod .flag {
  position: absolute !important;
  top: 12px;
  left: 12px;
  z-index: 50 !important;
  transform: translateZ(1px);
}

@media screen and (max-width: 760px) {
  .kot-home .prod .flag {
    top: 8px;
    left: 8px;
  }
}