/* ==========================================================================
   Daily Hero 6 — Arkkhe  ·  "Green Not Boring"

   Every length here is the number Figma reports for that layer, so the
   artboard is reproduced at its native 1440x810 and scaled as a whole.
   Percentages that Figma emitted as calc() are resolved to absolute px.
   ========================================================================== */

.section-hero-arkkhe{
  --frame-w: 1440px;
  --frame-h: 810px;

  --teal: #009ca6;
  --cream: #fefff0;
  --butter: #ffd689;
  --price: #05abb5;
  --note: #5f5f5f;

  /* Figma "Ease out" on the per-letter reveals. */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  /* Figma's "Slow" spring on the four panel components. A spring cannot be
     expressed exactly as a bezier; this is the closest non-overshooting
     approximation of its long, gliding settle. */
  --ease-slow: cubic-bezier(0.22, 1, 0.36, 1);
}

.section-hero-arkkhe *{
  box-sizing: border-box;
}

.section-hero-arkkhe, .section-hero-arkkhe{
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--teal);
  font-family: "Prompt", system-ui, sans-serif;
  /* Figma rasterises type with grayscale antialiasing. Without this, macOS
     Chrome thickens every stem and the copy reads a half-weight bolder than
     the design. */
  -webkit-font-smoothing: antialiased;
}

/* Full-width artboard; js/main.js scales by viewport width.
   Page height follows the scaled hero so nothing is clipped. */
.section-hero-arkkhe .stage{
  position: relative;
  width: var(--frame-w);
  height: var(--frame-h);
  margin: 0;
  transform-origin: 0 0;
}

.section-hero-arkkhe .frame{
  position: relative;
  width: var(--frame-w);
  height: var(--frame-h);
  overflow: hidden;
  background: var(--teal);
  isolation: isolate;
}

/* Bootstrap's reset adds margins, list padding and button chrome the artboard
   must not have. :where() keeps these at zero specificity so the component
   rules below can restore a background or padding without fighting them. */
.section-hero-arkkhe :where(.frame h1, .frame h2, .frame p, .frame ul){
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-hero-arkkhe :where(.frame button){
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.section-hero-arkkhe :where(.frame a){
  text-decoration: none;
  color: inherit;
}

.section-hero-arkkhe :where(.frame img){
  display: block;
}

/* --------------------------------------------------------------- backdrop  */

/* capcut-color-edit 1 — 1483.972 x 834.734, centred on (1074.68, 405). The
   clip is 16:9 like the layer, so `cover` matches Figma's FILL with no crop. */
.section-hero-arkkhe .hero-clip{
  position: absolute;
  left: 332.694px;
  top: -12.367px;
  width: 1483.972px;
  height: 834.734px;
  object-fit: cover;
}

/* Mask group — image 8 behind image 7. image 7 is a plain horizontal
   #C4C4C4 -> transparent gradient used as an alpha mask, so the mask is
   reproduced in CSS rather than shipped as a file. */
.section-hero-arkkhe .backdrop-fade{
  position: absolute;
  left: -47.71px;
  top: -11.334px;
  width: 552.367px;
  height: 833.704px;
  -webkit-mask-image: linear-gradient(to right, #000 0 368.835px, transparent 531.99px);
  mask-image: linear-gradient(to right, #000 0 368.835px, transparent 531.99px);
}

.section-hero-arkkhe .backdrop-fade img{
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* ------------------------------------------------------------------ entrance */

/* One shared entrance for the four panel components. Each element carries its
   own start offset, angle and duration; they all resolve to the design's
   resting state, which is what the stylesheet below describes. */
.section-hero-arkkhe .anim{
  animation: arkkhe-fly-in var(--dur, 1.25s) var(--ez, var(--ease-slow)) var(--d, 0s) both;
}

@keyframes arkkhe-fly-in {
  from {
    transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg));
  }
  to {
    transform: translate(0, 0) rotate(0deg);
  }
}

/* ------------------------------------------------------------------- top bar */

.section-hero-arkkhe .topbar{
  position: absolute;
  inset: 0;
  height: 81.61px;
  z-index: 40;
  pointer-events: none;
}
.section-hero-arkkhe .topbar a,
.section-hero-arkkhe .topbar button {
  pointer-events: auto;
}

.section-hero-arkkhe .brand{
  position: absolute;
  left: 24px;
  top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 280px;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: rgba(254, 255, 240, 0.16);
  border: 1px solid rgba(254, 255, 240, 0.28);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none !important;
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.section-hero-arkkhe .brand:hover,
.section-hero-arkkhe .brand:focus-visible{
  background: rgba(254, 255, 240, 0.24);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
  outline: none;
}

.section-hero-arkkhe .brand-mark{
  position: relative;
  left: auto;
  top: auto;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  overflow: hidden;
  background: #fefff0;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  display: grid;
  place-items: center;
}

.section-hero-arkkhe .brand-mark img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 5px;
  display: block;
}

.section-hero-arkkhe .brand-word{
  position: relative;
  left: auto;
  top: auto;
  font-family: "Outfit", "Quicksand", system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fefff0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.18);
  text-box: trim-both cap alphabetic;
}

.section-hero-arkkhe .navpill{
  position: absolute;
  left: 50%;
  top: 23.61px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
}

/* The pill's white body grows outward 218.5px per side while the links drop
   in, so it is a sibling layer that can be clipped independently. */
.section-hero-arkkhe .navpill-bg{
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 999px;
  animation: arkkhe-pill-grow var(--dur, 1.25s) var(--ease-slow) var(--d, 0s) both;
}

@keyframes arkkhe-pill-grow {
  from {
    clip-path: inset(0 218.5px round 999px);
  }
  to {
    clip-path: inset(0 0 round 999px);
  }
}

/* A nav item in Figma is a 20px-padded frame around a text layer whose box is
   the cap height — 10px at 14px Prompt — which is what makes the item 50px
   tall and the pill 58. text-box trims block containers only, so the label
   must stay a block rather than a centred flex box. */
.section-hero-arkkhe .navpill-link{
  position: relative;
  display: block;
  padding: 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 400;
  color: #000;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}

.section-hero-arkkhe .navpill-link.is-active{
  font-weight: 600;
  background: rgba(255, 214, 137, 0.56);
}

.section-hero-arkkhe .nav-search{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 50px;
  border-radius: 999px;
}

.section-hero-arkkhe .cart-btn{
  position: absolute;
  left: 1227.05px;
  top: 23.61px;
  width: 58.003px;
  height: 58px;
  border-radius: 999px;
  background: #fff;
}

.section-hero-arkkhe .cart-btn-icon{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 21.467px;
  height: 21.467px;
  transform: translate(-50%, -50%);
}

.section-hero-arkkhe .cart-btn-dot{
  position: absolute;
  right: 1.57px; /* 2.57 box inset, less the svg's own 1px shadow bleed */
  top: 2.98px;
  width: 14.571px;
  height: 14.571px;
}

.section-hero-arkkhe .account{
  position: absolute;
  left: 1323.05px;
  top: 23.61px;
  width: 93px;
  height: 58px;
  border-radius: 999px;
  background: #fff;
}

.section-hero-arkkhe .account-photo{
  position: absolute;
  left: 0;
  top: -0.18px;
  width: 58.003px;
  height: 58px;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 999px;
}

.section-hero-arkkhe .account-photo img{
  position: absolute;
  left: -9.99px;
  top: -12.29px;
  width: 71.991px;
  height: 107.987px;
  object-fit: cover;
}

.section-hero-arkkhe .account-caret{
  position: absolute;
  left: 73px; /* 50% + 26.5 of 93, centred */
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
}

/* ------------------------------------------------------------------ headline */

/* Thunderhouse Pro is a licensed display face, so each glyph ships as the PNG
   Figma renders for its own "Letter n, Stage 2" variant. The images are
   full-width and pre-positioned, so stacking them rebuilds the word exactly. */
.section-hero-arkkhe .headline{
  font: inherit;
}

.section-hero-arkkhe .word{
  position: absolute;
  display: block;
}

.section-hero-arkkhe .word img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: letter-in 0.3s var(--ease-out) var(--d) both;
}

@keyframes letter-in {
  from {
    opacity: 0;
    transform: translateY(var(--rise));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-hero-arkkhe .word-green{
  left: 24px;
  top: 200.79px;
  width: 332px;
  height: 133px;
  overflow: hidden;
  --rise: 99.37px;
}

/* "Not" is the one word Figma leaves unclipped, so its glyphs are visible
   while they travel. Kept as-is rather than tidied. */
.section-hero-arkkhe .word-not{
  left: 377.66px;
  top: 200.79px;
  width: 178px;
  height: 133px;
  --rise: 99.37px;
}

.section-hero-arkkhe .word-boring{
  left: 257.05px;
  top: 357.77px;
  width: 528px;
  height: 180px;
  overflow: hidden;
  --rise: 134.81px;
}

/* ---------------------------------------------------------------- seal (C1) */

.section-hero-arkkhe .seal{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.section-hero-arkkhe .seal-ring-outer{
  position: absolute;
  left: 0.52px;
  top: 328.5px;
  width: 256.476px;
  height: 256.476px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Star 2 sits at 5.42deg in the resting design; the entrance angle rides on
   the parent so the two rotations do not fight. */
.section-hero-arkkhe .seal-ring-outer-spin{
  position: relative;
  width: 235.305px;
  height: 235.305px;
  transform: rotate(5.42deg);
}

.section-hero-arkkhe .seal-ring-outer-spin img, .section-hero-arkkhe .seal-ring-inner img{
  position: absolute;
  inset: 4.92%;
  width: 90.16%;
  height: 90.16%;
}

.section-hero-arkkhe .seal-ring-inner{
  position: absolute;
  left: 11.11px;
  top: 339.11px;
  width: 235.305px;
  height: 235.305px;
}

.section-hero-arkkhe .seal-text{
  position: absolute;
  left: 50.09px;
  top: 384.09px;
  width: 157.5px;
  height: 146.5px;
}

.section-hero-arkkhe .seal-dot{
  position: absolute;
  left: 126.14px;
  width: 5.253px;
  height: 5.253px;
}

.section-hero-arkkhe .seal-dot-1{
  top: 381.84px;
}

.section-hero-arkkhe .seal-dot-2{
  top: 526.44px;
}

.section-hero-arkkhe .seal-leaf{
  position: absolute;
  left: 97.67px;
  top: 422.97px;
  width: 67.53px;
  height: 67.53px;
  overflow: hidden;
}

/* --------------------------------------------------------------------- lede */

.section-hero-arkkhe .lede{
  position: absolute;
  left: 170.75px;
  top: 602px;
  width: 459.25px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  text-box: trim-both cap alphabetic;
}

.section-hero-arkkhe .lede .w{
  display: inline-block;
  animation: word-in 0.3s var(--ease-out) var(--d) both;
}

.section-hero-arkkhe .lede b{
  font-weight: 700;
}

@keyframes word-in {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------- cta */

.section-hero-arkkhe .cta{
  position: absolute;
  left: 170.05px;
  top: 716.2px;
  display: flex;
  align-items: center;
}

.section-hero-arkkhe .cta-main{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 69.767px;
  padding: 24.15px 26.833px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(
    135deg,
    var(--brand-primary, #0e7490) 0%,
    var(--teal, #009ca6) 55%,
    #0a8a92 100%
  ) !important;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: #fefff0 !important;
  white-space: nowrap;
  text-decoration: none !important;
  box-shadow: 0 12px 28px rgba(14, 116, 144, 0.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  text-box: trim-both cap alphabetic;
}

.section-hero-arkkhe .cta-main:hover,
.section-hero-arkkhe .cta-main:focus-visible{
  background: linear-gradient(
    135deg,
    var(--brand-accent, #eab308) 0%,
    var(--butter, #ffd689) 100%
  ) !important;
  color: #0a4a52 !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(234, 179, 8, 0.35);
  outline: none;
}

.section-hero-arkkhe .cta-cart{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 69.77px;
  height: 69.767px;
  padding: 24.15px 26.833px;
  border-radius: 999px;
  background: #fefff0 !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.16);
  transition: transform .18s ease, background-color .18s ease;
}

.section-hero-arkkhe .cta-cart:hover,
.section-hero-arkkhe .cta-cart:focus-visible{
  background: var(--butter, #ffd689) !important;
  transform: translateY(-2px);
  outline: none;
}

.section-hero-arkkhe .cta-cart img{
  width: 21.467px;
  height: 21.467px;
}

.section-hero-arkkhe .scroll-cue{
  position: absolute;
  left: 24px;
  top: 716.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 69.77px;
  height: 69.77px;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

/* ------------------------------------------------------------ card rail (C2) */

.section-hero-arkkhe .rail{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.section-hero-arkkhe .rail .dish, .section-hero-arkkhe .rail .rail-prev, .section-hero-arkkhe .rail .rail-next{
  pointer-events: auto;
}

.section-hero-arkkhe .dish{
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  transition:
    left 0.55s var(--ease-slow),
    top 0.55s var(--ease-slow),
    width 0.55s var(--ease-slow),
    padding 0.55s var(--ease-slow),
    border-radius 0.55s var(--ease-slow),
    gap 0.55s var(--ease-slow),
    opacity 0.4s ease;
  will-change: left, top, width;
}

/* Slot 0 — featured (Smoky Bloom resting geometry). */
.section-hero-arkkhe .dish[data-slot="0"]{
  left: 899px;
  top: 523px;
  width: 201px;
  padding: 4px 4px 24px;
  border-radius: 28px;
  gap: 24px;
  z-index: 3;
}

/* Slot 1 — mid (Sunset Crunch resting geometry). */
.section-hero-arkkhe .dish[data-slot="1"]{
  left: 1107.95px;
  top: 602px;
  width: 201px;
  padding: 4px 4px 24px;
  border-radius: 28px;
  gap: 24px;
  z-index: 2;
}

/* Slot 2 — peek (Green Halo resting geometry). */
.section-hero-arkkhe .dish[data-slot="2"]{
  left: 1319.05px;
  top: 633.77px;
  width: 166.043px;
  padding: 3.304px 3.304px 19.826px;
  border-radius: 23.13px;
  gap: 19.826px;
  z-index: 1;
}

.section-hero-arkkhe .dish-thumb{
  position: relative;
  width: 100%;
  height: 119px;
  border-radius: 24px;
  transition: height 0.55s var(--ease-slow), border-radius 0.55s var(--ease-slow);
}

.section-hero-arkkhe .dish[data-slot="2"] .dish-thumb{
  height: 98.304px;
  border-radius: 19.826px;
}

.section-hero-arkkhe .dish-thumb-smoky{
  background: rgba(145, 255, 242, 0.4);
}

.section-hero-arkkhe .dish-thumb-sunset{
  background: rgba(255, 145, 240, 0.4);
}

.section-hero-arkkhe .dish-thumb-halo{
  background: rgba(255, 255, 145, 0.4);
}

/* The plated shots overhang the card, exactly as they do in the design. */
.section-hero-arkkhe .dish-shot{
  position: absolute;
  display: block;
  overflow: hidden;
  transition:
    left 0.55s var(--ease-slow),
    top 0.55s var(--ease-slow),
    width 0.55s var(--ease-slow),
    height 0.55s var(--ease-slow),
    transform 0.55s var(--ease-slow);
}

.section-hero-arkkhe .dish-shot img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.section-hero-arkkhe .dish-shot-smoky{
  left: 31.72px;
  top: -77.52px;
  width: 152.84px;
  height: 196.52px;
}

.section-hero-arkkhe .dish-shot-smoky img{
  width: 152.81px;
  height: 244.94px;
}

.section-hero-arkkhe .dish-shot-sunset{
  left: 0;
  top: -77.03px;
  width: 198.041px;
  height: 196.029px;
}

.section-hero-arkkhe .dish-shot-sunset img{
  width: 198.041px;
  height: 247.51px;
}

.section-hero-arkkhe .dish-shot-halo{
  left: 50%;
  top: -71.49px;
  width: 159.435px;
  height: 169.791px;
  transform: translateX(-50%);
}

.section-hero-arkkhe .dish-shot-halo img{
  width: 159.435px;
  height: 211.66px;
}

/* Scale the shot to the peek slot. */
.section-hero-arkkhe .dish[data-slot="2"] .dish-shot-smoky{
  left: 26.2px;
  top: -64px;
  width: 126.2px;
  height: 162.3px;
}

.section-hero-arkkhe .dish[data-slot="2"] .dish-shot-smoky img{
  width: 126.2px;
  height: 202.3px;
}

.section-hero-arkkhe .dish[data-slot="2"] .dish-shot-sunset{
  width: 163.5px;
  height: 161.9px;
  top: -63.6px;
}

.section-hero-arkkhe .dish[data-slot="2"] .dish-shot-sunset img{
  width: 163.5px;
  height: 204.4px;
}

.section-hero-arkkhe .dish[data-slot="2"] .dish-shot-halo{
  top: -59px;
  width: 131.7px;
  height: 140.2px;
}

.section-hero-arkkhe .dish[data-slot="2"] .dish-shot-halo img{
  width: 131.7px;
  height: 174.8px;
}

.section-hero-arkkhe .dish-add{
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40.002px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.section-hero-arkkhe .dish[data-slot="0"] .dish-add{
  opacity: 1;
  pointer-events: auto;
}

.section-hero-arkkhe .dish-copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0 12px;
  gap: 12px;
  transition: padding 0.55s var(--ease-slow), gap 0.55s var(--ease-slow);
}

.section-hero-arkkhe .dish[data-slot="2"] .dish-copy{
  padding: 0 9.913px;
}

.section-hero-arkkhe .dish-name{
  width: 100%;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.18px;
  color: #000;
  text-align: center;
  text-box: trim-both cap alphabetic;
  transition: font-size 0.55s var(--ease-slow), letter-spacing 0.55s var(--ease-slow);
}

.section-hero-arkkhe .dish[data-slot="2"] .dish-name{
  font-size: 14.87px;
  letter-spacing: -0.1487px;
}

.section-hero-arkkhe .dish-note, .section-hero-arkkhe .dish-price{
  width: 100%;
  line-height: 1.4;
  text-align: center;
  text-box: trim-both cap alphabetic;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin: 0;
  transition: max-height 0.45s ease, opacity 0.35s ease;
}

.section-hero-arkkhe .dish-note{
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.14px;
  color: var(--note);
}

.section-hero-arkkhe .dish-price{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.18px;
  color: var(--price);
}

.section-hero-arkkhe .dish[data-slot="0"] .dish-note, .section-hero-arkkhe .dish[data-slot="0"] .dish-price{
  max-height: 60px;
  opacity: 1;
}

.section-hero-arkkhe .rail-prev, .section-hero-arkkhe .rail-next{
  position: absolute;
  top: 521px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  z-index: 4;
  transition: opacity 0.25s ease;
}

.section-hero-arkkhe .rail-prev{
  left: 1326.58px;
}

.section-hero-arkkhe .rail-next{
  left: 1375.95px;
}

.section-hero-arkkhe .rail-prev:disabled, .section-hero-arkkhe .rail-next:disabled{
  opacity: 0.4;
  cursor: default;
}

.section-hero-arkkhe .rail-next img{
  transform: rotate(180deg);
}

/* ---------------------------------------------------------- social rail (C4) */

.section-hero-arkkhe .social{
  position: absolute;
  left: 1356px;
  top: 148px;
  width: 58px;
  height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 35;
  margin: 0;
  padding: 0;
  list-style: none;
}

.section-hero-arkkhe .social li{
  position: relative;
  display: block;
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 0;
}

.section-hero-arkkhe .social-link{
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #fefff0 !important;
  color: #009ca6 !important;
  border: 1.5px solid rgba(254, 255, 240, 0.95);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  text-decoration: none !important;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

.section-hero-arkkhe .social-link svg{
  width: 24px;
  height: 24px;
  display: block;
}

.section-hero-arkkhe .social-link:hover,
.section-hero-arkkhe .social-link:focus-visible{
  background: #ffd689 !important;
  color: #0a6d74 !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.26);
  outline: none;
}

.section-hero-arkkhe .social-link:focus-visible{
  box-shadow: 0 0 0 3px rgba(254, 255, 240, 0.95), 0 12px 26px rgba(0, 0, 0, 0.26);
}

/* -------------------------------------------------------------------- chrome */

.section-hero-arkkhe .replay{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: "Prompt", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.section-hero-arkkhe .replay:hover{
  background: rgba(0, 0, 0, 0.75);
}

/* Hold every layer in its final state and park the clip on its poster frame. */
@media (prefers-reduced-motion: reduce) {
  .section-hero-arkkhe .anim, .section-hero-arkkhe .word img, .section-hero-arkkhe .lede .w, .section-hero-arkkhe .navpill-bg{
    animation: none;
  }
}

/* Section chrome — full-bleed in editor + storefront */
.section-hero-arkkhe {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #009ca6;
  isolation: isolate;
  font-family: "Prompt", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.theme-editor-section:has(.section-hero-arkkhe) {
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  background: #009ca6 !important;
}
.section-hero-arkkhe .arkkhe-replay {
  display: none;
}
.section-hero-arkkhe .headline,
.section-hero-arkkhe .lede,
.section-hero-arkkhe .backdrop-fade,
.section-hero-arkkhe .hero-clip {
  pointer-events: none;
}
.section-hero-arkkhe .cta,
.section-hero-arkkhe .scroll-cue,
.section-hero-arkkhe .social {
  z-index: 30;
}

.section-hero-arkkhe .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.section-hero-arkkhe a.cta-main,
.section-hero-arkkhe a.cta-cart,
.section-hero-arkkhe a.dish-add,
.section-hero-arkkhe a.cart-btn,
.section-hero-arkkhe a.account,
.section-hero-arkkhe a.scroll-cue,
.section-hero-arkkhe a.nav-search {
  text-decoration: none;
  color: inherit;
}