@import url('tokens.css');

/* ============ base ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kc-cream);
  color: var(--kc-deep-sea);
  font-family: var(--kc-font-body);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--kc-font-display); font-weight: 400; letter-spacing: .01em; text-transform: uppercase; line-height: .92; margin: 0 0 .4em; }
h1 { font-size: clamp(2.6rem, 9vw, 6.5rem); }
h2 { font-size: clamp(2rem, 6vw, 4rem); }
h3 { font-size: clamp(1.3rem, 3vw, 2rem); }
p  { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--kc-mango); outline-offset: 3px; border-radius: 4px; }
.kc-skip { position: absolute; left: -9999px; }
.kc-skip:focus { left: 12px; top: 12px; z-index: 999; background: var(--kc-mango); color: var(--kc-deep-sea); padding: 10px 16px; border-radius: 999px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ layout ============ */
.wrap { width: min(1180px, 92vw); margin-inline: auto; }
.wrap-wide { width: min(1440px, 94vw); margin-inline: auto; }
section { position: relative; padding: clamp(56px, 9vw, 120px) 0; }
.light { background: var(--kc-cream); color: var(--kc-deep-sea); }
.light .muted, .sand .muted { color: var(--kc-text-muted-light); }
.sand { background: var(--kc-sand); color: var(--kc-deep-sea); }
.muted { color: var(--kc-text-muted-light); }
.sea .muted { color: var(--kc-text-muted-dark); }
.center { text-align: center; }
.eyebrow {
  font-family: var(--kc-font-body); font-weight: 700; text-transform: uppercase;
  letter-spacing: .22em; font-size: .72rem; opacity: .85; margin-bottom: 14px;
}
.tagline { font-family: var(--kc-font-accent); font-style: italic; font-size: clamp(1.05rem, 2.4vw, 1.5rem); }
.kn { font-family: var(--kc-font-kannada); }

/* ============ signature bits ============ */
.kc-catch-pill { font-size: .78em; text-transform: lowercase; letter-spacing: 0; }
.zig { height: 14px; background-repeat: repeat-x; background-size: 22px 14px; }
.zig-down { background-image: url("logo/kavi-zigzag-tile.svg"); }
.zig-cream, .zig-foot { -webkit-mask: url("logo/kavi-zigzag-tile.svg") repeat-x 0 0 / 22px 14px; mask: url("logo/kavi-zigzag-tile.svg") repeat-x 0 0 / 22px 14px; }
.zig-cream { background: var(--kc-cream); }
.zig-foot { background: var(--kc-tide-3); }
.zig-flip { transform: scaleY(-1); }
.dots::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.8px);
  background-size: 13px 13px;
  background-position: 0 var(--dotshift, 0px);
  color: inherit; mix-blend-mode: overlay;
}
.light.dots::before { opacity: .14; mix-blend-mode: normal; }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: .55em; justify-content: center;
  font-family: var(--kc-font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: 1rem; padding: .85em 1.6em; border-radius: var(--kc-radius-pill);
  border: 3px solid var(--kc-deep-sea); background: var(--kc-mango); color: var(--kc-deep-sea);
  text-decoration: none; box-shadow: 5px 5px 0 var(--kc-deep-sea);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--kc-deep-sea); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--kc-deep-sea); }
.btn-coral { background: var(--kc-coral); }
.btn-lagoon { background: var(--kc-lagoon); color: var(--kc-deep-sea); }
/* was transparent — over the hero sun the label lost all contrast */
.btn-ghost { background: var(--kc-foam); color: var(--kc-deep-sea); border-color: var(--kc-deep-sea); box-shadow: 5px 5px 0 var(--kc-line-2); }
.btn-ghost:hover { box-shadow: 8px 8px 0 var(--kc-line-2); background: rgba(14,42,48,.07); }
.btn-sm { font-size: .82rem; padding: .6em 1.1em; border-width: 2px; box-shadow: 3px 3px 0 var(--kc-deep-sea); }
.btn-sm:hover { box-shadow: 5px 5px 0 var(--kc-deep-sea); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ============ header ============ */
.kc-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,246,230,.92); backdrop-filter: blur(10px);
  color: var(--kc-deep-sea);
  border-bottom: 2px solid var(--kc-line);
}
.kc-head-in { display: flex; align-items: center; gap: 18px; padding: 10px 0; }
.kc-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.kc-logo svg { width: 42px; height: 42px; flex: none; }
/* the mark is wider than it is tall — forcing it square squashed the waves and
   clipped the sun arc. Fix the height, let the width follow. */
.kc-logo img { width: auto; height: 42px; max-width: none; flex: none; }
.kc-logo b { font-family: var(--kc-font-display); font-size: 1.3rem; letter-spacing: .02em; line-height: 1; white-space: nowrap; }
@media (max-width: 520px) { .kc-logo b { font-size: 1.05rem; } .kc-logo img, .kc-logo svg { height: 34px; width: 34px; } }
.kc-nav { display: flex; gap: 4px; align-items: center; }
.kc-nav a {
  text-decoration: none; font-weight: 500; font-size: .92rem; padding: 8px 12px; border-radius: 999px;
  transition: background .2s, color .2s;
}
.kc-nav a:hover { background: rgba(14,42,48,.08); }
.kc-nav a[aria-current="page"] { background: var(--kc-mango); color: var(--kc-deep-sea); font-weight: 700; }
.kc-cartbtn {
  position: relative; background: var(--kc-coral); color: var(--kc-deep-sea); border: 2px solid var(--kc-deep-sea);
  border-radius: 999px; padding: 9px 16px; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
.kc-cartbtn .n {
  min-width: 22px; height: 22px; border-radius: 999px; background: var(--kc-deep-sea); color: var(--kc-cream);
  display: grid; place-items: center; font-size: .75rem; padding: 0 5px;
}
.kc-burger { display: none; background: none; border: 2px solid var(--kc-deep-sea); border-radius: 999px; color: var(--kc-deep-sea); padding: 8px 12px; }
@media (max-width: 960px) {
  .kc-burger { display: block; }
  .kc-nav {
    position: fixed; inset: 64px 0 auto; background: var(--kc-cream); color: var(--kc-deep-sea);
    flex-direction: column;
    align-items: stretch; padding: 14px; gap: 2px; border-bottom: 3px solid var(--kc-mango);
    box-shadow: 0 18px 30px rgba(14,42,48,.18);
    display: none; max-height: calc(100vh - 64px); overflow: auto;
  }
  .kc-nav.open { display: flex; }
  .kc-nav a { padding: 14px; font-size: 1.05rem; }
}

/* ============ hero ============ */
/* --deep is the waterline. On a phone the hero is tall and narrow, so 30% puts
   the surface — and everything floating on it — up level with the buttons;
   drop it so the water stays under the pack shelf where it belongs. */
.hero { --deep: 40%; padding: clamp(40px, 7vw, 80px) 0 0; overflow: hidden; }
@media (max-width: 760px) { .hero { --deep: 24%; } }
/* the CTA wraps to two rows down here and eats the sky — drop the waterline
   further so the boats riding it stay clear of the buttons */
@media (max-width: 359px) { .hero { --deep: 14%; } }
.hero-in { position: relative; z-index: 5; text-align: center; }
.hero h1 { margin-bottom: .15em; }
.hero h1 .l { color: var(--kc-deep-sea); display: inline-block; }
/* ಕಡಲು = the sea. The hero says so out loud, under the wordmark. */
.meaning {
  display: inline-flex; align-items: center; gap: .6em; flex-wrap: wrap; justify-content: center;
  border: 2px dashed var(--kc-line-2); border-radius: var(--kc-radius-pill);
  padding: 7px 18px; margin: 14px 0 0; font-size: .92rem;
}
.meaning b { font-family: var(--kc-font-kannada); font-size: 1.25rem; font-weight: 700; }
.meaning i { font-family: var(--kc-font-accent); font-style: italic; }
.verbs { font-family: var(--kc-font-display); font-size: clamp(1.3rem, 4.2vw, 2.6rem); display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; margin: .2em 0 .35em; }
.verbs span:nth-child(1) { color: var(--kc-lagoon); }
.verbs span:nth-child(2) { color: var(--kc-coral); }
/* mango (#FFC93C) on the sunset sky is ~1.3:1 — the word simply vanished.
   The brand orange is the same family and actually reads. */
.verbs span:nth-child(3) { color: var(--kc-sun); }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
/* ============ the sea: sunset sky above, blue water below ============
   `.sea` is the sunset sky — warm, light, ink text. The water is a separate
   band (`.seaband`) pinned to the bottom of the section, with the wave line as
   its surface. Fish and dolphins launch out of that line into the sky. */
.sea { background: linear-gradient(180deg, var(--kc-sky-1) 0%, var(--kc-sky-2) 34%, var(--kc-sky-3) 64%, var(--kc-sky-4) 100%); color: var(--kc-deep-sea); }
.sea, .pagehead, .switcher { overflow: hidden; }

/* The water. --deep is how much of the section it fills, and everything that
   belongs to the surface — boats, dolphins, splashes — is positioned off it,
   so the whole scene moves together if the waterline is retuned. */
.seaband {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--deep, 30%); z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, var(--kc-tide) 0%, var(--kc-tide-2) 58%, var(--kc-tide-3) 100%);
}
/* The wave line rides on top of the band, so the band's top edge is the surface.
   Descendant, not child: KC.WAVES injects .waves *inside* the [data-waves] host. */
.seaband .waves { position: absolute; left: 0; right: 0; bottom: 100%; top: auto; }
.seaband .shafts, .seaband .bubbles, .seaband .school { position: absolute; inset: 0; }

/* the sun, low on one side — the thing the brand is named after, setting over it */
/* sitting low, just clear of the horizon — it is a sunset, and the stamp owns
   the top-right corner */
.sunset {
  position: absolute; right: var(--sx, 7%); top: var(--sy, 33%);
  width: clamp(130px, 19vw, 300px); aspect-ratio: 1; z-index: 0; pointer-events: none;
}
.sunset .disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #FFE9A8 0%, var(--kc-sun-disc) 48%, var(--kc-sun-low) 100%);
  box-shadow: 0 0 60px 18px rgba(255, 178, 96, .5), 0 0 160px 60px rgba(255, 160, 110, .3);
  animation: sunpulse 9s ease-in-out infinite;
}
@keyframes sunpulse { 50% { transform: scale(1.035); } }
.sunset .rays {
  position: absolute; inset: -42%; border-radius: 50%; opacity: .32;
  background: repeating-conic-gradient(from 0deg, rgba(255,201,110,.9) 0 3deg, transparent 3deg 11deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%);
  mask: radial-gradient(circle, #000 28%, transparent 68%);
  animation: rays 120s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
/* The glare the low sun lays down the water, straight below the disc. Broken
   into soft broadening bands and faded at both edges, so it reads as light on a
   moving surface rather than as a striped rectangle. */
.seaband .glint {
  position: absolute; top: 0; bottom: 0; left: var(--gx, 80%); width: clamp(120px, 20vw, 330px);
  transform: translateX(-50%); pointer-events: none; opacity: .8; filter: blur(1.5px);
  background:
    radial-gradient(60% 42% at 50% 0%, rgba(255,236,186,.95), transparent 72%),
    linear-gradient(180deg, rgba(255,214,140,.8), rgba(255,196,130,.25) 55%, transparent 85%);
  -webkit-mask:
    repeating-linear-gradient(180deg, #000 0 3px, rgba(0,0,0,.25) 5px, transparent 9px 16px),
    linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  mask:
    repeating-linear-gradient(180deg, #000 0 3px, rgba(0,0,0,.25) 5px, transparent 9px 16px),
    linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  animation: glint 7s ease-in-out infinite alternate;
}
@keyframes glint { to { transform: translateX(-50%) scaleX(1.18); opacity: .6; } }

.shafts {
  position: absolute; inset: -10% -20% 30%; z-index: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(100deg, rgba(255,251,242,.3) 0 26px, transparent 26px 96px);
  -webkit-mask: linear-gradient(180deg, #000 0, transparent 88%);
  mask: linear-gradient(180deg, #000 0, transparent 88%);
  animation: shafts 19s ease-in-out infinite alternate;
}
@keyframes shafts { to { transform: translateX(44px) skewX(-2.5deg); opacity: .78; } }

.bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.bubbles i {
  position: absolute; bottom: -8%; border-radius: 50%;
  border: 1.5px solid rgba(255,251,242,.75); background: rgba(255,251,242,.22);
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translate(0, 0) scale(.6); opacity: 0; }
  12%  { opacity: .85; }
  50%  { transform: translate(16px, -46vh) scale(1); }
  100% { transform: translate(-10px, -96vh) scale(1.15); opacity: 0; }
}

.school { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.school .swim { position: absolute; left: -16%; animation: swim linear infinite; will-change: transform; }
.school .swim > span { display: block; animation: wobble 2.6s ease-in-out infinite; }
.school .swim svg { display: block; }
@keyframes swim { to { transform: translateX(132vw); } }
@keyframes wobble { 50% { transform: translateY(-13px) rotate(-5deg); } }
/* swims right → left: reverse the travel and mirror the art on the svg,
   not on .swim — the swim animation owns that element's transform. */
.swim-back { animation-direction: reverse; }
.swim-back svg { transform: scaleX(-1); }

.waves { position: absolute; left: 0; right: 0; bottom: -2px; z-index: 2; pointer-events: none; line-height: 0; }
/* max-width:none or the global `img, svg { max-width: 100% }` caps this at one
   container width — the swell then drifts off the right edge and leaves bald
   water behind it. It has to be two container widths for the loop to cover. */
.waves svg { width: 200%; max-width: none; height: clamp(74px, 10vw, 150px); }
/* shallower crests at the surface, so the swell does not climb into the sky
   and read as dunes behind the boats */
.seaband .waves svg { height: clamp(44px, 5.5vw, 86px); }
.waves .w1 { animation: drift 26s linear infinite; }
.waves .w2 { animation: drift 38s linear infinite reverse; }
.waves .w3 { animation: drift 17s linear infinite; }
/* -50% of a 200%-wide svg is exactly one container width — four whole wave
   periods — so it loops seamlessly at every viewport. A fixed -1440px only
   lined up on a 1440px screen and tore everywhere else. */
@keyframes drift { to { transform: translateX(-50%); } }

/* ---- the harbour: distant shore, jetty, boats riding the swell ---- */
/* The harbour's floor IS the waterline, so everything in it stands on the
   surface. Anchored below it the hulls sank, and the box was tall enough that
   the masts climbed into the hero copy. */
.harbour { position: absolute; left: 0; right: 0; bottom: var(--deep, 8%); height: clamp(90px, 12vw, 190px); z-index: 2; pointer-events: none; }
/* the far shore sits ON the horizon, i.e. right where the water starts */
.harbour .shore {
  position: absolute; left: 0; right: 0; bottom: 0; opacity: .32;
  -webkit-mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
  mask: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.harbour .shore svg { width: 100%; height: clamp(46px, 6vw, 86px); }
.pagehead .harbour { opacity: .5; }
/* bottom:0 = the waterline, pulled down a hair so the hull lip dips in and the
   boat floats rather than perches */
.harbour .boat { position: absolute; bottom: -0.6%; transform-origin: 50% 85%; animation: rock 8s ease-in-out infinite; }
.harbour .boat svg { width: 100%; height: auto; filter: drop-shadow(0 8px 12px rgba(4,14,17,.45)); }
/* further out to sea: smaller, fainter, and sitting higher toward the horizon */
.harbour .boat-far { bottom: clamp(10px, 2vw, 30px); opacity: .55; }
@keyframes rock { 50% { transform: translateY(-8px) rotate(2.2deg); } }

/* ---- fishing net: the cover our racks dry under ---- */
.net::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .13;
  background-image:
    repeating-linear-gradient(45deg, currentColor 0 1px, transparent 1px 17px),
    repeating-linear-gradient(-45deg, currentColor 0 1px, transparent 1px 17px);
  -webkit-mask: radial-gradient(120% 90% at 50% 0, #000 35%, transparent 78%);
  mask: radial-gradient(120% 90% at 50% 0, #000 35%, transparent 78%);
}

/* ---- a net strung across the room: rope, cork floats, scalloped mesh hem ---- */
.netband {
  position: relative; height: clamp(44px, 5.5vw, 74px); color: var(--kc-kraft);
  background-image:
    repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 16px),
    repeating-linear-gradient(-45deg, currentColor 0 1.5px, transparent 1.5px 16px);
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0 9px, #000 9.5px) 0 0 / 24px 100% repeat-x;
  mask: radial-gradient(circle at 50% 100%, transparent 0 9px, #000 9.5px) 0 0 / 24px 100% repeat-x;
  opacity: .62;
}
.netband::before { /* the head rope */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: repeating-linear-gradient(66deg, #C9A27A 0 6px, #8E6B45 6px 8px);
}
.netband::after { /* cork floats along it */
  content: ""; position: absolute; left: 0; right: 0; top: 2px; height: 16px;
  background: radial-gradient(circle at 50% 50%, var(--kc-sun) 0 6px, transparent 6.5px) 0 0 / 62px 16px repeat-x;
}
.netband-dark { color: var(--kc-deep-sea); opacity: .16; }
.netband-hang { position: absolute; top: 0; left: 0; right: 0; z-index: 1; }

/* ---- rope: coir rule, used to hang things and to close sections ---- */
.rope {
  height: 13px; border-radius: 999px;
  background: repeating-linear-gradient(66deg, #C9A27A 0 8px, #8E6B45 8px 10px, #E0C6A4 10px 11px, #C9A27A 11px 16px);
  box-shadow: inset 0 -3px 0 rgba(10,32,38,.22), inset 0 2px 0 rgba(255,243,224,.25);
}

/* ---- the word CATCH, hung from a line like the real thing ---- */
.hooked { position: relative; }
.hooked > .kc-catch-pill { animation: sway 6s ease-in-out infinite; transform-origin: 14% -220%; }
@keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-2.5deg); } }
.hooked::before {
  content: ""; position: absolute; left: 14%; bottom: 94%; width: 2px; height: clamp(30px, 6vw, 86px);
  background: linear-gradient(180deg, transparent, rgba(14,42,48,.2) 20%, rgba(14,42,48,.8));
}
.hooked::after { /* the hook itself */
  content: ""; position: absolute; left: calc(14% - 7px); bottom: calc(94% - 11px); width: 16px; height: 16px;
  border: 2px solid rgba(14,42,48,.8); border-top-color: transparent; border-right-color: transparent;
  border-radius: 0 0 999px 999px; transform: rotate(-20deg);
}
@media (max-width: 620px) { .hooked::before, .hooked::after { display: none; } }

/* ---- rope stamp: the seal on every batch ---- */
.stamp { width: clamp(104px, 12vw, 158px); color: var(--kc-chilli); opacity: .72; transform: rotate(-9deg); }
.stamp-hold { position: absolute; right: clamp(-10px, 1vw, 30px); top: -10%; z-index: 6; }
@media (max-width: 900px) { .stamp-hold { display: none; } }
.stamp-foot { margin-top: 18px; }
.stamp-foot .stamp { width: 112px; opacity: .8; transform: rotate(-7deg); }

/* ---- big outline word behind a section ---- */
.watermark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  font-family: var(--kc-font-display); font-size: clamp(5rem, 22vw, 20rem); line-height: 1; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 2px rgba(14,42,48,.09); opacity: 1;
}

/* ---- the auction board ---- */
.board {
  /* near-white, so the board lifts off the cream section instead of merging with it */
  position: relative; background: var(--kc-deep-sea-2); color: var(--kc-deep-sea);
  border: 3px solid var(--kc-deep-sea); border-radius: var(--kc-radius-card);
  padding: clamp(20px, 3vw, 36px); box-shadow: var(--kc-shadow-pop);
  background-image: radial-gradient(rgba(14,42,48,.07) 1.4px, transparent 1.6px); background-size: 11px 11px;
}
.board-hang { display: flex; justify-content: center; gap: clamp(120px, 38vw, 520px); margin: 28px 0 0; }
.board-hang i {
  width: 9px; height: clamp(26px, 4vw, 46px); border-radius: 3px;
  background: repeating-linear-gradient(12deg, #C9A27A 0 6px, #8E6B45 6px 8px);
  box-shadow: 0 -7px 0 -1px var(--kc-kraft), 0 -10px 0 -1px rgba(14,42,48,.25);
}
.board-row {
  display: grid; grid-template-columns: minmax(120px, .5fr) minmax(170px, 1fr) auto; gap: 10px 26px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px dashed var(--kc-line); text-decoration: none;
}
.board-row:last-child { border-bottom: 0; }
.board-row:hover .bn { color: var(--kc-mango); }
.board-row .kn { font-size: clamp(1.1rem, 2.6vw, 1.5rem); line-height: 1.5; }
.board-row .bn { font-family: var(--kc-font-display); text-transform: uppercase; font-size: clamp(1rem, 2.2vw, 1.35rem); display: block; transition: color .2s; }
.board-row .en { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kc-text-muted-dark); }
.board-row .to { font-size: .84rem; color: #0C7D7A; text-align: right; }
.board-note { display: flex; gap: 12px; align-items: flex-start; margin-top: 22px; font-size: .86rem; color: var(--kc-text-muted-dark); }
@media (max-width: 680px) {
  .board-row { grid-template-columns: 1fr; gap: 2px; }
  .board-row .to { text-align: left; }
}

/* floating pack shelf — real packs, drawn in CSS, bobbing like they are on water */
.hero-packs {
  position: relative; z-index: 3; margin-top: clamp(20px, 4vw, 44px);
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(8px, 1.6vw, 26px); padding-bottom: clamp(30px, 6vw, 70px);
}
.hero-packs .float { display: block; text-decoration: none; width: clamp(96px, 15vw, 210px); animation: bob 5.5s ease-in-out infinite; }
.hero-packs .float > span { display: block; transition: transform .3s cubic-bezier(.2,.8,.3,1); }
.hero-packs .float:nth-child(odd) { animation-duration: 6.8s; }
.hero-packs .float:nth-child(2) { width: clamp(84px, 13vw, 182px); animation-delay: -1.2s; }
.hero-packs .float:nth-child(3) { width: clamp(104px, 16.5vw, 228px); animation-delay: -2.6s; }
.hero-packs .float:nth-child(4) { width: clamp(76px, 12vw, 166px); animation-delay: -.6s; }
.hero-packs .float:nth-child(5) { width: clamp(82px, 12.5vw, 176px); animation-delay: -3.4s; }
.hero-packs .float .pack { box-shadow: 0 26px 42px rgba(5,18,21,.5); }
@keyframes bob { 50% { transform: translateY(-16px) rotate(1.4deg); } }
@media (max-width: 620px) { .hero-packs .float:nth-child(n+5) { display: none; } }
.marquee {
  overflow: hidden; border-block: 3px solid var(--kc-deep-sea); background: var(--kc-mango); color: var(--kc-deep-sea);
  font-family: var(--kc-font-display); font-size: 1.05rem; letter-spacing: .1em; padding: 10px 0;
}
.marquee div { display: flex; gap: 2.5rem; white-space: nowrap; width: max-content; animation: slide 34s linear infinite; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ============ packs (CSS-drawn) ============ */
.pack {
  position: relative; width: 100%; aspect-ratio: 3 / 4.1; border-radius: 10px;
  background: var(--c, var(--kc-lagoon)); color: var(--ink, var(--kc-deep-sea));
  display: flex; flex-direction: column; padding: 11% 9% 13%;
  box-shadow: 0 16px 34px rgba(14,42,48,.35); overflow: hidden; container-type: inline-size;
  transition: transform .3s cubic-bezier(.2,.8,.3,1);
}
.pack::after { /* riso dots on pack */
  content: ""; position: absolute; inset: 0; opacity: .14; pointer-events: none;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.7px); background-size: 9px 9px;
}
/* ---- photographed packs ----
   Same silhouette as the drawn ones so a mixed grid still lines up; the shot is
   landscape, so the frame crops it to `focus` instead of dead centre. */
.pack-photo { padding: 0; background: var(--kc-sand); border-radius: 14px; box-shadow: 0 16px 34px rgba(14,42,48,.3); }
.pack-photo::after { display: none; }
.pack-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.pack-pouch { clip-path: polygon(0 0, 100% 0, 100% 100%, 95.5% 95%, 91% 100%, 86.5% 95%, 82% 100%, 77.5% 95%, 73% 100%, 68.5% 95%, 64% 100%, 59.5% 95%, 55% 100%, 50.5% 95%, 46% 100%, 41.5% 95%, 37% 100%, 32.5% 95%, 28% 100%, 23.5% 95%, 19% 100%, 14.5% 95%, 10% 100%, 5.5% 95%, 1% 100%, 0 97%); }
.pack-foil { clip-path: polygon(0 0, 100% 0, 96% 4%, 100% 8%, 96% 12%, 100% 16%, 96% 20%, 100% 24%, 96% 28%, 100% 32%, 96% 36%, 100% 40%, 96% 44%, 100% 48%, 96% 52%, 100% 56%, 96% 60%, 100% 64%, 96% 68%, 100% 72%, 96% 76%, 100% 80%, 96% 84%, 100% 88%, 96% 92%, 100% 96%, 96% 100%, 4% 100%, 0 96%, 4% 92%, 0 88%, 4% 84%, 0 80%, 4% 76%, 0 72%, 4% 68%, 0 64%, 4% 60%, 0 56%, 4% 52%, 0 48%, 4% 44%, 0 40%, 4% 36%, 0 32%, 4% 28%, 0 24%, 4% 20%, 0 16%, 4% 12%, 0 8%, 4% 4%); padding: 9% 12% 11%; }
/* Paws & Tides pack — drawn as one SVG, so the pack art is identical everywhere */
.pack-pt { background: none; padding: 0; aspect-ratio: 300 / 420; border-radius: 22px; overflow: visible; }
.pack-pt::after { display: none; }                    /* the riso dots live inside the svg */
.pack-pt svg { display: block; width: 100%; height: auto; border-radius: 22px; }
.pack-pt .pt-brand { font-family: var(--kc-font-display); font-size: 25px; letter-spacing: .01em; }
.pack-pt .pt-amp { font-family: var(--kc-font-accent); font-style: italic; }
.pack-pt .pt-by { font-family: var(--kc-font-display); font-size: 12px; letter-spacing: .06em; }
.pack-pt .pt-catch { font-family: var(--kc-font-accent); font-style: italic; font-size: 12px; }
.pack-pt .pt-seal-big { font-family: var(--kc-font-display); font-size: 15px; letter-spacing: .02em; }
.pack-pt .pt-seal { font-family: var(--kc-font-body); font-weight: 700; font-size: 6.6px; letter-spacing: .16em; }
.pack-pt .pt-name { font-family: var(--kc-font-display); font-size: 40px; letter-spacing: .005em; }
.pack-pt .pt-sub { font-family: var(--kc-font-body); font-weight: 700; font-size: 11px; letter-spacing: .14em; }
.pack-pt .pt-for { font-family: var(--kc-font-body); font-weight: 700; font-size: 11px; letter-spacing: .16em; }
.pack-pt .pt-wt { font-family: var(--kc-font-display); font-size: 17px; letter-spacing: .04em; }
.card:hover .pack-pt { transform: rotate(-2deg) scale(1.03); }
.pack-jar { border-radius: 10px 10px 28px 28px; padding-top: 19%; }
.pack-jar::before {
  content: ""; position: absolute; left: 17%; right: 17%; top: 0; height: 10%;
  background: #2A1711; border-radius: 3px 3px 8px 8px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 6px);
  box-shadow: 0 6px 0 -1px rgba(14,42,48,.35);
}
.pack-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.pack-brand {
  background: var(--kc-cream); color: var(--kc-deep-sea); border-radius: 999px; padding: 3px 8px 3px 4px;
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--kc-font-display);
  font-size: clamp(6px, 5cqw, 12px); letter-spacing: .02em; white-space: nowrap;
}
.pack-brand .dot { width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--kc-sun); border: 1.5px dashed var(--kc-chilli); flex: none; }
.pack-no {
  width: 2.6em; height: 2.6em; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--kc-mango); color: var(--kc-deep-sea); font-family: var(--kc-font-display);
  font-size: clamp(5px, 4.4cqw, 11px); text-align: center; line-height: 1;
}
.pack-name {
  font-family: var(--kc-font-display); text-transform: uppercase; line-height: .88;
  font-size: clamp(12px, 14cqw, 34px); margin-top: auto;
}
.pack-real { font-size: clamp(6px, 4.2cqw, 11px); letter-spacing: .14em; text-transform: uppercase; opacity: .85; margin-top: .5em; }
.pack-fish { width: 68%; margin: 7% 0; opacity: .95; }
.pack-foot { display: flex; justify-content: space-between; align-items: flex-end; font-size: clamp(6px, 4cqw, 10px); letter-spacing: .12em; text-transform: uppercase; margin-top: auto; padding-top: 8%; font-weight: 700; }
.pack-win { /* crunch oval window */
  width: 72%; aspect-ratio: 2/1; border-radius: 50%; background: var(--kc-cream); margin: 7% 0;
  display: grid; place-items: center; position: relative; overflow: hidden;
}
.pack-win i { position: absolute; width: 22%; height: 36%; background: var(--kc-kraft); border-radius: 50%; }

/* ============ product cards ============ */
.grid { display: grid; gap: clamp(18px, 2.6vw, 30px); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* 230px min meant one card per phone screen — a shopper saw a single product and left.
   Two up below 560px roughly doubles what a thumb passes on the way down. */
/* uneven name/chip counts left the Add buttons at different heights across a row */
.grid .card { display: flex; flex-direction: column; }
.grid .card .card-row { margin-top: auto; }

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid .card { padding: 12px; }
  .grid .card-ttl { font-size: 1.05rem; }
  .grid .card-real, .grid .chip { font-size: .68rem; }
  .grid .price { font-size: 1rem; }
  .grid .price small { font-size: .62rem; }
  .grid .card-row { flex-wrap: wrap; gap: 8px; }
}
.card {
  position: relative; background: var(--kc-cream); color: var(--kc-deep-sea); border: 3px solid var(--kc-deep-sea);
  border-radius: var(--kc-radius-card); padding: 16px; display: flex; flex-direction: column;
  box-shadow: var(--kc-shadow-pop); transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--kc-deep-sea); }
.card:hover .pack { transform: rotate(-2.5deg) scale(1.03); }
.card-link { text-decoration: none; color: inherit; display: block; }
.card-ttl { font-family: var(--kc-font-display); font-size: 1.4rem; margin: 14px 0 2px; text-transform: uppercase; line-height: .95; }
.card-real { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kc-text-muted-light); }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.price { font-family: var(--kc-font-display); font-size: 1.3rem; }
.price small { font-family: var(--kc-font-body); font-size: .62rem; display: block; letter-spacing: .08em; text-transform: uppercase; opacity: .7; font-weight: 500; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; padding: 5px 10px; border-radius: 999px; border: 2px solid currentColor;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.nonveg { width: 15px; height: 15px; border: 1.6px solid #7A3B10; display: inline-grid; place-items: center; flex: none; }
.nonveg::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #7A3B10; }
/* FSSAI veg mark: same box, green, and a dot instead of a triangle */
.nonveg.veg { border-color: #1E7A3C; }
.nonveg.veg::after { width: 7px; height: 7px; border: 0; border-radius: 50%; background: #1E7A3C; }

/* meters */
.meter { display: flex; align-items: center; gap: 10px; font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.meter b { width: 48px; }
.meter .bars { display: flex; gap: 4px; }
.meter i {
  width: 16px; height: 9px; border-radius: 3px; border: 1.5px solid currentColor; background: transparent;
  transform-origin: left; transition: transform .4s cubic-bezier(.3,1.4,.5,1), background .3s;
}
.js .meter i { transform: scaleX(0); }
.meter i.on { background: currentColor; }
.meter.in i, .in .meter i { transform: scaleX(1); }
.meter i:nth-child(2) { transition-delay: .06s; }
.meter i:nth-child(3) { transition-delay: .12s; }
.meter i:nth-child(4) { transition-delay: .18s; }
.meter i:nth-child(5) { transition-delay: .24s; }

/* ============ range switcher ============ */
.switcher { transition: background .6s ease, color .6s ease; }
.tabs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 36px; }
.tab {
  font-family: var(--kc-font-display); text-transform: uppercase; font-size: clamp(1rem, 2.4vw, 1.5rem);
  padding: .45em 1.2em; border-radius: 999px; border: 3px solid currentColor; background: transparent; color: inherit;
  transition: transform .2s, background .25s, color .25s, box-shadow .2s;
}
.tab[aria-selected="true"] { background: var(--kc-deep-sea); color: var(--kc-cream); box-shadow: 5px 5px 0 rgba(14,42,48,.3); transform: translate(-2px,-2px); }
.tab[disabled] { opacity: .45; cursor: not-allowed; }
.tab small { display: block; font-family: var(--kc-font-accent); font-style: italic; text-transform: lowercase; font-size: .58em; }

/* shop filter bar: chips scroll sideways on a phone instead of stacking four deep */
.shop-tabs { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-bottom: 14px;
  padding: 4px 4px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.shop-tabs::-webkit-scrollbar { display: none; }
.shop-tabs .tab { flex: none; font-size: clamp(.9rem, 2.2vw, 1.15rem); border-width: 2px; }
.shop-adv { margin-bottom: 8px; }
.shop-adv .count { font-family: var(--kc-font-body); text-transform: none; letter-spacing: 0;
  font-size: .82rem; font-weight: 500; color: var(--kc-text-muted-light); margin-left: auto; padding-right: 10px; }

/* ============ scroll story ============ */
.story-rail { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: s; }
.story-step {
  position: relative; border: 3px solid var(--kc-deep-sea); border-radius: var(--kc-radius-card); padding: 26px 20px 22px;
  background: var(--kc-deep-sea-2); box-shadow: 5px 5px 0 var(--kc-line-2);
}
.story-step b { font-family: var(--kc-font-display); font-size: 1.15rem; text-transform: uppercase; display: block; margin-bottom: 6px; }
.story-step::before {
  counter-increment: s; content: counter(s, decimal-leading-zero);
  position: absolute; top: -20px; left: 18px; background: var(--kc-mango); color: var(--kc-deep-sea);
  font-family: var(--kc-font-display); font-size: 1.1rem; padding: 4px 12px; border-radius: 999px; border: 3px solid var(--kc-deep-sea);
}

/* a single fish crossing a section band */
.fishline { position: absolute; left: 0; right: 0; height: 0; z-index: 1; pointer-events: none; overflow: visible; }
.fishline .swim { position: absolute; left: -14%; animation: swim 34s linear infinite; }
.fishline .swim > span { display: block; animation: wobble 3s ease-in-out infinite; }

/* bobbing icon / box / jar */
.floaty { animation: bob 6s ease-in-out infinite; }
.floaty-slow { animation: bob 9s ease-in-out infinite; }
.pack.floaty { animation-name: bobtilt; }
@keyframes bobtilt { 50% { transform: translateY(-14px) rotate(-2deg); } }

/* reveal — only hidden when JS is alive to reveal them again */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.js .rv.in { opacity: 1; transform: none; }

/* ============ cart drawer ============ */
.scrim { position: fixed; inset: 0; background: rgba(5,18,21,.6); backdrop-filter: blur(3px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(430px, 100vw); z-index: 100;
  background: var(--kc-cream); color: var(--kc-deep-sea); border-left: 4px solid var(--kc-mango);
  transform: translateX(104%); transition: transform .38s cubic-bezier(.3,.9,.3,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: none; }
.drawer header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 2px solid var(--kc-line); }
.drawer header h3 { margin: 0; }
.drawer .items { flex: 1; overflow: auto; padding: 16px 20px; }
.drawer footer { padding: 18px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 2px solid var(--kc-line); display: grid; gap: 10px; }
.ci { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px dashed var(--kc-line); }
.ci .sw { width: 54px; height: 54px; border-radius: 10px; border: 2px solid var(--kc-deep-sea); }
.ci b { display: block; font-family: var(--kc-font-display); font-size: 1rem; text-transform: uppercase; }
.ci small { opacity: .75; font-size: .76rem; }
.qty { display: inline-flex; align-items: center; border: 2px solid var(--kc-deep-sea); border-radius: 999px; }
.qty button { background: none; border: 0; color: inherit; width: 28px; height: 28px; font-size: 1.1rem; line-height: 1; border-radius: 999px; }
.qty button:hover { background: rgba(14,42,48,.1); }
.qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: .9rem; }
.ship { font-size: .8rem; }
.ship .bar { height: 10px; border-radius: 999px; background: rgba(14,42,48,.14); overflow: hidden; margin: 7px 0; }
.ship .bar i { display: block; height: 100%; background: var(--kc-mango); width: 0; transition: width .5s ease; }
.closeb { background: none; border: 2px solid currentColor; color: inherit; border-radius: 999px; width: 36px; height: 36px; font-size: 1.1rem; line-height: 1; }

/* swimming fish on add-to-cart */
.fly { position: fixed; z-index: 95; width: 46px; pointer-events: none; transition: transform .75s cubic-bezier(.4,-0.2,.6,1), opacity .75s; }

/* ============ whatsapp fab ============ */
.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 70;
  background: #25D366; color: #06281A; border: 3px solid var(--kc-deep-sea); border-radius: 999px;
  padding: 12px 18px; font-family: var(--kc-font-display); text-transform: uppercase; text-decoration: none;
  box-shadow: 5px 5px 0 var(--kc-deep-sea); display: inline-flex; gap: 8px; align-items: center; font-size: .9rem;
}
.fab:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--kc-deep-sea); }
.fab svg { width: 22px; height: 22px; flex: none; }
/* On a phone the labelled pill sat on top of cards, tabs and Add buttons.
   Shrink to the icon alone — same target, a third of the blocked area. */
@media (max-width: 760px) {
  .fab { padding: 0; width: 54px; height: 54px; justify-content: center; }
  .fab span { display: none; }
}
/* and get out of the way entirely while the cart is open */
body.cart-open .fab { opacity: 0; pointer-events: none; }

/* ============ forms ============ */
label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-bottom: 6px; }
input, select, textarea {
  font: inherit; width: 100%; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--kc-deep-sea);
  background: var(--kc-cream); color: var(--kc-deep-sea);
}
.field { margin-bottom: 16px; }
.form-grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* ============ accordion ============ */
details { border: 3px solid currentColor; border-radius: 18px; padding: 0 18px; margin-bottom: 12px; background: rgba(14,42,48,.03); }
details[open] { background: rgba(14,42,48,.06); }
summary { font-family: var(--kc-font-display); text-transform: uppercase; font-size: 1.05rem; padding: 16px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 1.4rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details .body { padding-bottom: 16px; }
.light details { background: rgba(14,42,48,.03); }

/* ============ footer ============ */
.kc-foot { background: var(--kc-tide-3); color: var(--kc-cream); padding: 0 0 30px; }
.foot-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 50px 0 30px; }
.foot-grid h4 { font-size: 1rem; letter-spacing: .1em; }
.foot-grid a { display: block; text-decoration: none; padding: 4px 0; font-size: .9rem; opacity: .85; }
.foot-grid a:hover { opacity: 1; text-decoration: underline; }
.legal { border-top: 1px solid rgba(255,243,224,.2); padding-top: 20px; font-size: .78rem; opacity: .8; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.fssai { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--kc-cream); border-radius: 8px; padding: 4px 10px; font-size: .72rem; font-weight: 700; letter-spacing: .06em; }

/* ============ misc utility ============ */
.two { display: grid; gap: clamp(24px, 4vw, 54px); grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: center; }
.box { border: 3px solid currentColor; border-radius: var(--kc-radius-card); padding: clamp(20px, 3vw, 34px); }
.box-pop { box-shadow: var(--kc-shadow-pop); }
.pagehead { padding: clamp(40px, 6vw, 80px) 0 clamp(26px, 4vw, 48px); position: relative; }
.pagehead p { max-width: 62ch; }
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 20px); z-index: 120;
  background: var(--kc-mango); color: var(--kc-deep-sea); border: 3px solid var(--kc-deep-sea);
  border-radius: 999px; padding: 10px 20px; font-weight: 700; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; box-shadow: var(--kc-shadow-pop);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.insta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.insta a { aspect-ratio: 1; border-radius: 16px; border: 3px solid var(--kc-deep-sea); display: grid; place-items: center; text-decoration: none; font-family: var(--kc-font-display); text-transform: uppercase; font-size: .8rem; color: var(--kc-deep-sea); text-align: center; padding: 10px; transition: transform .2s; }
.insta a:hover { transform: rotate(-3deg) scale(1.04); }

/* ============ Paws & Tides page ============
   The pet line keeps the Konkan Pop palette but stays on light grounds —
   sand and cream only, no deep-sea sections. Same house, lighter room. */
.pt-hero { background: var(--kc-cream); padding-bottom: clamp(34px, 5vw, 64px); }
.pt-hero-in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.pt-lockup { line-height: 0; margin-bottom: 10px; }
.pt-wordmark { font-size: clamp(2.6rem, 8vw, 5.2rem); line-height: .88; margin: 0; }
.pt-wordmark em { font-family: var(--kc-font-accent); font-style: italic; color: var(--kc-chilli); }
.pt-by-line { font-family: var(--kc-font-display); letter-spacing: .06em; font-size: 1.05rem; margin: .5em 0 0; }
.pt-hero .hero-cta { justify-content: flex-start; }
/* the pack svg is all percentage widths, so the holder needs a real one */
.pt-hero-pack { width: 100%; max-width: 330px; margin-inline: auto; }
.pt-hero-pack > a { display: block; width: 100%; }
.pt-marquee { background: var(--kc-sand); }
.pt-notes { display: grid; gap: 16px; align-content: start; }
.pt-feed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; text-align: center; }
.pt-feed div { display: grid; gap: 4px; padding: 14px 8px; border: 3px solid var(--kc-deep-sea); border-radius: 14px; }
.pt-feed b { font-family: var(--kc-font-display); font-size: 1.1rem; letter-spacing: .02em; }
.pt-feed span { font-size: .92rem; color: var(--kc-text-muted-light); }
@media (max-width: 760px) {
  .pt-hero-in { grid-template-columns: 1fr; }
  .pt-hero-pack { max-width: 260px; }
  .pt-feed { grid-template-columns: 1fr; }
}

/* ============ dolphins ============
   One keyframe owns the whole breach. The long hidden stretch at the start is
   the wait between jumps — CSS has no gap between iterations, so the gap is
   written into the timeline. Negative delays stagger the pod. */
/* Behind the pack shelf (z 3). It used to ride in front, which was fine over the
   drawn packs but pastes a dolphin flat across a product photograph — it stops
   reading as a leap and starts reading as a sticker that never moves. */
.pod { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* --lh scales the whole arc. A phone hero has ~110px of water under a CTA that
   spans most of the width, so a full-height breach punches straight through the
   buttons; shrink the leap rather than drop the dolphin. */
.dolphin {
  --lh: 1;
  position: absolute; left: var(--x, 20%); bottom: calc(var(--deep, 9%) - 4%);
  width: calc(clamp(52px, 10.5vw, 158px) * var(--s, 1));
  animation: leap var(--t, 11s) ease-in-out infinite;
}
@media (max-width: 1100px) { .dolphin { --lh: .5; } }
@media (max-width: 760px)  { .dolphin { --lh: .3; } }
/* below this the CTA wraps and fills the full width — there is no open water
   left for a dolphin to surface in without landing on a button */
@media (max-width: 359px)  { .pod { display: none; } }
/* The arc clears the water by about its own body height and no more: any higher
   and it stops reading as a breach and starts reading as a fish in the sky.
   Visible for just over half the cycle, so three of them keep the water busy. */
/* Evenly spaced steps with only a short dip under water at either end. The old
   curve parked the dolphin invisible for a third of the cycle and bunched four
   keyframes into its last quarter, which is what made it look stuck. */
@keyframes leap {
  0%, 12%   { transform: translate(-46%, calc(78px * var(--lh))) rotate(24deg); opacity: 0; }
  22%       { transform: translate(-30%, calc(12px * var(--lh))) rotate(-34deg); opacity: 1; }
  38%       { transform: translate(-8%, calc(-78px * var(--lh))) rotate(-22deg); opacity: 1; }
  52%       { transform: translate(18%, calc(-124px * var(--lh))) rotate(0deg); opacity: 1; }
  66%       { transform: translate(44%, calc(-78px * var(--lh))) rotate(22deg); opacity: 1; }
  82%       { transform: translate(68%, calc(12px * var(--lh))) rotate(42deg); opacity: 1; }
  94%, 100% { transform: translate(84%, calc(78px * var(--lh))) rotate(52deg); opacity: 0; }
}
/* the ring it leaves on the way out and the one it punches on the way in */
.splash {
  position: absolute; left: var(--x, 20%); bottom: calc(var(--deep, 9%) - 2%);
  width: calc(clamp(54px, 7vw, 108px)); height: 16px; border-radius: 50%;
  border: 3px solid rgba(255,251,242,.85); border-bottom-color: transparent;
  opacity: 0; animation: splash var(--t, 11s) ease-out infinite;
}
/* the ring it leaves on the way out (~20%) and punches on the way back in
   (~84%) — both tied to where `leap` crosses the surface */
@keyframes splash {
  0%, 16%   { transform: scale(.2); opacity: 0; }
  21%       { transform: scale(1); opacity: .9; }
  33%       { transform: scale(1.9); opacity: 0; }
  80%       { transform: translateX(70%) scale(.2); opacity: 0; }
  85%       { transform: translateX(70%) scale(1); opacity: .9; }
  100%      { transform: translateX(70%) scale(2); opacity: 0; }
}

/* ============ Paws & Tides: the sea bed ============ */
.seabed { position: relative; height: clamp(190px, 26vw, 300px); overflow: hidden; }
.seabed .floor {
  position: absolute; left: -4%; right: -4%; bottom: 0; height: 46%;
  background: linear-gradient(180deg, var(--kc-kraft), #8E6B45);
  border-radius: 50% 50% 0 0 / 34px 34px 0 0;
}
.seabed .weed {
  position: absolute; bottom: 34%; width: 11px; height: var(--h, 54px);
  background: linear-gradient(180deg, #19C2B4, #0E7A72);
  border-radius: 50% 50% 3px 3px; transform-origin: 50% 100%; opacity: .72;
  animation: weed var(--t, 5s) ease-in-out infinite alternate;
}
@keyframes weed { from { transform: rotate(-11deg) scaleY(.96); } to { transform: rotate(13deg) scaleY(1); } }

/* a cat and a dog asleep on the sand, breathing */
.seabed .sleeper { position: absolute; bottom: 16%; z-index: 2; }
.seabed .sleeper svg {
  width: 100%; transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 14px rgba(4,14,17,.35));
  animation: breathe 4.6s ease-in-out infinite;
}
.sleeper-cat { left: 10%; width: clamp(130px, 20vw, 250px); }
.sleeper-dog { right: 9%; width: clamp(140px, 22vw, 270px); }
.sleeper-dog svg { animation-duration: 5.8s; animation-delay: -1.7s; }
@keyframes breathe { 50% { transform: scale(1.025, 1.045); } }

.seabed .zz {
  position: absolute; top: -6%; left: 62%; font-family: var(--kc-font-display);
  font-size: clamp(14px, 2vw, 24px); font-style: normal; color: var(--kc-cream);
  opacity: 0; animation: zfloat 4.2s ease-out infinite;
}
.seabed .zz:nth-of-type(2) { animation-delay: 1.4s; }
.seabed .zz:nth-of-type(3) { animation-delay: 2.8s; }
.sleeper-dog .zz { left: 58%; }
@keyframes zfloat {
  0%   { transform: translate(0, 0) scale(.5) rotate(-8deg); opacity: 0; }
  18%  { opacity: .95; }
  100% { transform: translate(30px, -64px) scale(1.25) rotate(12deg); opacity: 0; }
}

/* ============ Paws & Tides: the peek row ============
   Cats and dogs watching over the tide line. Heads bob, ears twitch, eyes
   blink; every third one ducks under and comes back up. Scoped to .peekrow so
   the same art on a printed pack stays still. */
.peekrow {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; pointer-events: none;
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 0 2vw; overflow: hidden; height: clamp(54px, 8vw, 96px);
}
.peekrow .peek {
  width: clamp(48px, 7vw, 92px); flex: none;
  animation: peekbob var(--t, 4s) ease-in-out infinite;
}
.peekrow .peek svg { filter: drop-shadow(0 -4px 10px rgba(4,14,17,.22)); }
@keyframes peekbob {
  0%, 100% { transform: translateY(26%) rotate(-4deg); }
  50%      { transform: translateY(14%) rotate(5deg); }
}
/* the shy ones drop out of sight and surface again */
.peekrow .peek-duck { animation-name: peekduck; animation-timing-function: cubic-bezier(.4,0,.5,1); }
@keyframes peekduck {
  0%, 16%  { transform: translateY(104%) rotate(0); }
  34%, 72% { transform: translateY(18%) rotate(4deg); }
  88%, 100% { transform: translateY(104%) rotate(0); }
}
.peekrow .eye, .peekrow .pk-ears { transform-box: fill-box; }
.peekrow .eye { transform-origin: center; animation: blink 5.3s ease-in-out infinite; }
.peekrow .eye-r { animation-delay: .07s; }
@keyframes blink { 0%, 91%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } }
.peekrow .pk-ears { transform-origin: 50% 100%; animation: twitch 6.4s ease-in-out infinite; }
@keyframes twitch {
  0%, 68%, 100% { transform: rotate(0); }
  74% { transform: rotate(-8deg); }
  80% { transform: rotate(6deg); }
  86% { transform: rotate(0); }
}

/* ---- the harbour box: four drawn packs standing in a coir crate ---- */
.giftbox { position: relative; padding-bottom: 34px; }
.giftbox-in { display: flex; align-items: flex-end; justify-content: center; gap: clamp(6px, 1.2vw, 16px); }
.giftbox-in span { display: block; width: clamp(62px, 9vw, 124px); animation: bob 6.5s ease-in-out infinite; }
.giftbox-in span:nth-child(2) { width: clamp(70px, 10vw, 138px); animation-delay: -1.5s; }
.giftbox-in span:nth-child(3) { animation-delay: -3s; }
.giftbox-in span:nth-child(4) { animation-delay: -4.5s; }
.giftbox-in .pack { box-shadow: 0 18px 28px rgba(14,42,48,.26); }
.giftbox .crate {
  position: absolute; left: 4%; right: 4%; bottom: 0; height: 30px; border-radius: 6px 6px 14px 14px;
  background: repeating-linear-gradient(66deg, #C9A27A 0 9px, #8E6B45 9px 12px, #E0C6A4 12px 13px, #C9A27A 13px 19px);
  border: 3px solid var(--kc-deep-sea); box-shadow: 6px 6px 0 var(--kc-line-2);
}

/* ============ the two-brand bar in the footer ============ */
.brandbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; padding: 36px 0 4px; }
.brandbar a {
  display: grid; gap: 2px; text-decoration: none; padding: 15px 20px;
  border: 3px solid var(--kc-cream); border-radius: var(--kc-radius-card);
  transition: transform .2s, background .2s, color .2s;
}
.brandbar a:hover { transform: translate(-2px, -2px); }
.brandbar a.on { background: var(--kc-cream); color: var(--kc-deep-sea); }
.brandbar b { font-family: var(--kc-font-display); font-size: 1.25rem; letter-spacing: .02em; }
.brandbar small { font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.brandbar p { grid-column: 1 / -1; font-size: .82rem; margin: 6px 0 0; }

/* ============ side-brand skin (body.pt, everything under /paws/) ============ */
.pt-amp { font-family: var(--kc-font-accent); font-style: italic; color: var(--kc-chilli); }
.pt .kc-head { background: rgba(251,242,226,.93); border-bottom-color: var(--kc-line); }
.pt .kc-nav a[aria-current="page"] { background: var(--pt-sun); color: var(--kc-cream); }
.pt .kc-logo-pt b { font-family: var(--kc-font-display); font-size: 1.3rem; line-height: 1; }
.pt .kc-logo-pt .pt-amp { color: var(--kc-mango); }  /* chilli red disappears into the tide */
.pt .drawer { border-left-color: var(--pt-sun); }
.pt .kc-cartbtn { background: var(--pt-sun); color: var(--kc-cream); }
.pt .kc-cartbtn .n { background: var(--kc-cream); color: var(--pt-ink); }
body.pt { background: var(--pt-shell); }
.pt .kc-logo-pt b, .pt .kc-burger { color: var(--kc-deep-sea); }
/* the pet line's one deep band is open water, same blue as the house */
.pt-sea { background: linear-gradient(180deg, var(--kc-tide-2) 0%, var(--kc-tide-3) 100%); color: var(--kc-cream); overflow: hidden; }
.pt-sea .muted, .pt-sea .tagline { color: rgba(255,251,242,.86); }
.pt-shell { background: var(--pt-shell); color: var(--pt-ink); }
.pt-shell .muted { color: var(--kc-text-muted-light); }

@media (prefers-reduced-motion: reduce) {
  .dolphin, .splash, .seabed .zz, .peekrow .peek-duck { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
}

/* Netlify injects its own badge iframe on free-tier *.netlify.app sites, after
   </html>. It has no opt-out on this plan, so it is hidden here. The supported
   way to drop it is a paid Netlify plan. */
#nl-badge-frame, #nl-hud-frame { display: none !important; }