/* Purpose: Shared components - buttons, eyebrow, cards, forms, header, footer, drawer.
   BEM naming. .js- prefixed classes are behaviour hooks and are never styled here. */

/* ============================================================
   EYEBROW - pentagon marker, the BeeZeta1 cage motif
   ============================================================ */
.eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-body);
  font-size:var(--fs-12);
  font-weight:var(--weight-semibold);
  line-height:20px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--c-crimson);
  margin-bottom:0;
}
/* The square red marker the design puts before every eyebrow. */
.eyebrow::before{
  content:"";flex:none;
  width:6px;height:6px;
  background:var(--c-crimson);
  border-radius:3px;
}
.eyebrow--center{justify-content:center}
/* The label is one line in the design. Where it has to wrap - a long label on a narrow
   screen - the flex row leaves the dot stranded at the far left, because the text block
   centres its own lines inside a box the dot sits outside of. Letting the dot flow inline
   instead keeps it against the first word, and the whole thing still centres. */
@media (max-width:767px){
  .eyebrow--center{display:block;text-align:center}
  .eyebrow--center::before{display:inline-block;vertical-align:middle;margin-right:14px}
}

/* ============================================================
   BUTTONS
   16px Montserrat, 2px tracking, uppercase, 4px radius, 16/32 padding.
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  font-family:var(--font-body);
  font-weight:var(--weight-regular);
  font-size:var(--fs-body);
  line-height:24px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:var(--space-16) var(--space-32);
  min-height:56px;
  border-radius:var(--r-sm);
  border:1px solid transparent;
  text-align:center;
  transition:background var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.btn svg{flex:none;transition:transform var(--dur-base) var(--ease-out)}
.btn:hover svg{transform:translateX(var(--space-4))}

.btn--primary,.btn--crimson{background:var(--c-crimson);color:var(--c-text-on-brand)}
.btn--primary:hover,.btn--crimson:hover{background:var(--c-primary-hover)}

.btn--ghost{border-color:var(--c-text);color:var(--c-text);background:transparent}
.btn--ghost:hover{background:var(--c-text);color:var(--c-bg)}

.btn--sm{padding:var(--space-12) var(--space-24);min-height:48px;font-size:var(--fs-caption)}
.btn--block{width:100%}

/* Per-letter reveal on the label. Words are kept whole so a label never breaks
   between letters. */
.btn__label{display:inline}
.btn__word{display:inline-block;white-space:nowrap}
.btn__letter{display:inline-block}
@media (prefers-reduced-motion:no-preference){
  .btn__letter{
    opacity:0;
    transform:translateY(0.4em);
    animation:btn-letter var(--dur-base) var(--ease-out) forwards;
    animation-delay:calc(var(--i, 0) * 22ms);
  }
  .reveal:not(.is-in) .btn__letter{animation:none;opacity:0}
}
@keyframes btn-letter{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .btn__letter{opacity:1;transform:none;animation:none}
}

/* Underlined text link with a small chevron - the design's card link. */
.tlink{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-heading);
  font-weight:var(--weight-regular);
  font-size:var(--fs-12);
  line-height:22px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:underline;
  text-underline-offset:3px;
  color:var(--c-text);
  transition:color var(--dur-base) var(--ease-out);
}
/* The exported arrow points down; the design turns it a quarter turn to point along the
   line of the link. Orientation is held on `rotate` and the hover nudge on `translate` -
   both standalone properties, which compose in a fixed order. Putting the nudge on
   `transform` instead would apply it after the rotation, sending the arrow upwards. */
.tlink img,.tlink svg{
  width:12px;height:12px;flex:none;
  rotate:-90deg;
  translate:0 0;
  transition:translate var(--dur-base) var(--ease-out);
}
.tlink:hover{color:var(--c-accent)}
.tlink:hover img,.tlink:hover svg{translate:var(--space-4) 0}

/* ============================================================
   ICON BADGE
   A red rounded square carrying a white line icon. The reference uses this
   as the marker on every feature and pillar card.
   ============================================================ */
.icon-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--space-40);height:var(--space-40);
  flex:none;
  background:var(--c-crimson);
  color:var(--c-text-on-brand);
  border-radius:var(--r-md);
}
.icon-badge img,.icon-badge svg{width:var(--icon-20);height:var(--icon-20)}
.icon-badge--lg{width:var(--space-48);height:var(--space-48)}
.icon-badge--lg svg{width:var(--icon-24);height:var(--icon-24)}

/* ============================================================
   CARD - the base surface every card variant extends
   ============================================================ */
.card{
  background:transparent;
  border:1px solid var(--c-border);
  border-radius:var(--r-card);
  padding:var(--space-32);
  height:100%;
  display:flex;flex-direction:column;
  transition:border-color var(--dur-base) var(--ease-out),
             background var(--dur-base) var(--ease-out);
}
.card:hover{border-color:var(--c-border-strong)}
.card--interactive:hover{
  border-color:var(--c-border-strong);
  background:var(--c-surface-raised);
  transform:translateY(-4px);
}
.card__icon{
  width:var(--icon-40);height:var(--icon-40);
  color:var(--c-accent);
  margin-bottom:var(--space-24);
}
.card__title{
  font-family:var(--font-body);
  font-size:var(--fs-lead);
  font-weight:var(--weight-semibold);
  letter-spacing:normal;
  line-height:1.3;
  margin-top:var(--space-32);
  margin-bottom:var(--space-12);
}
.card__text{color:var(--c-text-muted);font-size:var(--fs-caption);line-height:1.6}
.card__link{margin-top:auto;padding-top:var(--space-24)}

/* Stat card - the number-led trust card */
.stat{
  border-top:1px solid var(--c-border);
  padding-top:var(--space-24);
}
.stat__num{
  font-family:var(--font-heading);
  font-size:var(--fs-h3);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight);
  line-height:var(--lh-tight);
  color:var(--c-text);
}
.stat__cap{
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--c-accent);
  margin-top:var(--space-8);
}
.stat__text{
  color:var(--c-text-muted);
  font-size:var(--fs-body);
  line-height:var(--lh-loose);
  margin-top:var(--space-12);
}

/* Checklist with pentagon bullets */
.checklist{display:flex;flex-wrap:wrap;gap:var(--space-12) var(--space-24)}
.checklist li{
  display:inline-flex;align-items:center;gap:var(--space-8);
  color:var(--c-text-muted);font-size:var(--fs-body);
}
.checklist li::before{
  content:"";width:var(--space-8);height:var(--space-8);flex:none;
  background:var(--c-accent);clip-path:var(--pentagon);
}

/* Pill / tag row */
.pills{display:flex;flex-wrap:wrap;gap:var(--space-8)}
.pill{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--c-text-muted);
  border:1px solid var(--c-border);
  border-radius:var(--r-full);
  padding:var(--space-8) var(--space-16);
}
.pill--accent{color:var(--c-accent);border-color:var(--c-border-strong)}

/* Media frame - deliberate aspect ratios, no CLS */
.media{
  position:relative;overflow:hidden;
  border:1px solid var(--c-border);
  border-radius:var(--r-hairline);
  background:var(--c-bg-alt);
}
.media img,.media video{width:100%;height:100%;object-fit:cover}
.media--16x9{aspect-ratio:16/9}
.media--4x3{aspect-ratio:4/3}
.media--1x1{aspect-ratio:1/1}
.media--4x5{aspect-ratio:4/5}

/* ============================================================
   FORMS
   ============================================================ */
.field{display:flex;flex-direction:column;gap:var(--space-8)}
.field__label{
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--c-text-muted);
}
.field__label .req{color:var(--c-crimson-light)}
.field__control,
.rte input[type="text"],.rte input[type="email"],.rte textarea{
  width:100%;
  min-height:var(--space-48);
  padding:var(--space-12) var(--space-16);
  background:var(--c-bg-alt);
  border:1px solid var(--c-border);
  border-radius:var(--r-hairline);
  color:var(--c-text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  transition:border-color var(--dur-base) var(--ease-out);
}
textarea.field__control{min-height:var(--space-128);resize:vertical;line-height:var(--lh-normal)}
select.field__control{appearance:none;cursor:pointer}
.field__control::placeholder{color:var(--c-text-dim)}
.field__control:focus{border-color:var(--c-accent);outline:none}
.field__control:focus-visible{outline:2px solid var(--c-accent-high);outline-offset:2px}
.field__error{font-size:var(--fs-caption);color:var(--c-error)}
.field__control[aria-invalid="true"]{border-color:var(--c-error)}
.field__hint{font-size:var(--fs-caption);color:var(--c-text-dim)}

.form__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-20)}
@media (min-width:640px){
  .form__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form__grid .field--wide{grid-column:1 / -1}
}
.form__status{
  margin-top:var(--space-16);
  padding:var(--space-16);
  border-radius:var(--r-hairline);
  font-size:var(--fs-body);
}
.form__status--ok{border:1px solid var(--c-success);color:var(--c-text)}
.form__status--err{border:1px solid var(--c-error);color:var(--c-text)}
.form__status[hidden]{display:none}

/* Honeypot - hidden from humans, visible to bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ============================================================
   SITE HEADER - smart sticky, scroll-direction aware
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;
  z-index:var(--z-sticky);
  transition:transform var(--dur-slow) var(--ease-out),
             background var(--dur-slow) var(--ease-out),
             border-color var(--dur-slow) var(--ease-out);
  border-bottom:1px solid transparent;
  will-change:transform;
}
.site-header--scrolled{
  background:rgba(var(--rgb-void),.88);
  backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--c-border);
}
.site-header--hidden{transform:translateY(-100%)}
.site-header--revealed{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .site-header{transition:background var(--dur-fast) linear}
  .site-header--hidden{transform:none}
}

/* Announcement bar - visible only at the top of the page */
.announce{
  background:var(--c-navy);
  color:var(--c-text);
  overflow:hidden;
  max-height:var(--space-96);
  transition:max-height var(--dur-slow) var(--ease-out),
             opacity var(--dur-base) var(--ease-out);
}
.site-header--scrolled .announce{max-height:0;opacity:0}
.announce__inner{
  display:flex;align-items:center;justify-content:center;gap:var(--space-12);
  flex-wrap:wrap;
  min-height:var(--header-announcement-target);
  padding:var(--space-8) 0;
  font-family:var(--font-mono);
  font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);
  text-align:center;
}
.announce__link{
  color:var(--c-accent-high);
  text-decoration:underline;
  text-underline-offset:var(--space-4);
}

.header__bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-16);
  padding-block:var(--space-16);
  min-height:auto;
}
.header__side{display:flex;align-items:center;gap:6px;flex:1 1 0;min-width:0}
.header__side--end{justify-content:flex-end}

.brand{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;margin:0}
.brand img{height:70px;width:auto;object-fit:contain;max-width:100%}
@media (max-width:767px){ .brand img{height:48px} }

.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:38px;flex:none;background:none;border:0;
}
.burger img{width:44px;height:24px}

.icon-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:2px;
  color:var(--c-text);
  transition:opacity var(--dur-base) var(--ease-out);
}
.icon-btn:hover{opacity:.7}
.icon-btn .ui-icon{width:22px;height:22px}
@media (max-width:767px){
  .header__side--end .icon-btn--wishlist,
  .header__side--end .icon-btn--account{display:none}
}

/* ------------------------------------------------------------
   Utility icons
   Each is two exported vector layers stacked in a 22px box. The outer inset
   places the layer; the inner one is Figma's own stroke compensation. Both are
   reproduced exactly so the icons match the design rather than approximating it.
   ------------------------------------------------------------ */
.ui-icon{position:relative;display:block;width:22px;height:22px;flex:none;overflow:hidden}
.ui-icon__l{position:absolute}
.ui-icon__l > i{position:absolute;display:block;inset:0}
.ui-icon__l img{display:block;width:100%;height:100%}

.ui-icon--search .ui-icon__l--1{inset:16.67% 25% 25% 16.67%}
.ui-icon--search .ui-icon__l--1 > i{inset:-4.68%}
.ui-icon--search .ui-icon__l--2{inset:68.75% 16.67% 16.67% 68.75%}
.ui-icon--search .ui-icon__l--2 > i{inset:-13.22%}

.ui-icon--wishlist .ui-icon__l--1{inset:15.21% 13.33% 22.5% 13.33%}
.ui-icon--wishlist .ui-icon__l--1 > i{inset:-4.38% -3.72% -5.14% -3.72%}

.ui-icon--account .ui-icon__l--1{inset:19.58% 34.17% 48.75% 34.17%}
.ui-icon--account .ui-icon__l--1 > i{inset:-8.61%}
.ui-icon--account .ui-icon__l--2{inset:58.33% 18.75% 16.67% 18.75%}
.ui-icon--account .ui-icon__l--2 > i{inset:-10.91% -4.23% -2.65% -4.23%}

/* The three sequence callout badges. Same two-layer construction as the header icons; the
   glyph box is 20px inside the 40px crimson tile rather than 22px. */
.icon-badge .ui-icon{width:var(--icon-20);height:var(--icon-20)}
.icon-badge .ui-icon__l img{width:100%;height:100%}

.ui-icon--designed .ui-icon__l--1,
.ui-icon--designed .ui-icon__l--2{inset:9.38%}
.ui-icon--designed .ui-icon__l--1 > i,
.ui-icon--designed .ui-icon__l--2 > i{inset:-2.89%}

.ui-icon--nabl .ui-icon__l--1{inset:9.38% 15.63%}
.ui-icon--nabl .ui-icon__l--1 > i{inset:-2.89% -3.41%}
.ui-icon--nabl .ui-icon__l--2{inset:40.63% 34.38% 39.06% 34.38%}
.ui-icon--nabl .ui-icon__l--2 > i{inset:-11.55% -7.51%}

.ui-icon--support .ui-icon__l--1{inset:31.25%}
.ui-icon--support .ui-icon__l--1 > i{inset:-6.26%}
.ui-icon--support .ui-icon__l--2{inset:15.63%}
.ui-icon--support .ui-icon__l--2 > i{inset:-3.41%}

.ui-icon--cart .ui-icon__l--1{inset:29.17% 20.83% 16.67% 20.83%}
.ui-icon--cart .ui-icon__l--1 > i{inset:-5.03% -5.3%}
.ui-icon--cart .ui-icon__l--2{inset:12.5% 37.5% 70.83% 37.5%}
.ui-icon--cart .ui-icon__l--2 > i{inset:-16.36% -10.91% 0 -10.91%}
.icon-btn__count{
  position:absolute;top:7px;right:6px;
  width:12px;height:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--c-crimson);color:var(--c-text-on-brand);
  border-radius:7.5px;
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:8px;line-height:12px;
}
.icon-btn__count.is-empty{display:none}

/* The design has no inline navigation; everything lives behind the menu control. */
.nav{display:none}

/* ============================================================
   MENU DRAWER - the only navigation; the bar carries no inline links
   ============================================================ */
.drawer{
  position:fixed;inset:0;
  z-index:var(--z-drawer);
  background:var(--c-bg);
  padding:var(--space-128) var(--container-pad) var(--space-48);
  display:flex;flex-direction:column;gap:var(--space-8);
  overflow-y:auto;
  transform:translateX(100%);
  visibility:hidden;
  /* visibility flips instantly on open so focus can move in on the same tick,
     and waits for the slide-out to finish on close. */
  transition:transform var(--dur-slow) var(--ease-out),
             visibility 0s linear var(--dur-slow);
}
/* Clear of the close control, but not so deep that the CTAs drop off a short screen. */
@media (max-height:860px){ .drawer{padding-top:var(--space-96)} }
.drawer.is-open{
  transform:translateX(0);
  visibility:visible;
  transition:transform var(--dur-slow) var(--ease-out), visibility 0s linear 0s;
}
@media (prefers-reduced-motion:reduce){
  .drawer{transition:visibility 0s linear var(--dur-fast)}
  .drawer.is-open{transition:visibility 0s linear 0s}
}
.drawer__close{
  position:absolute;top:var(--space-32);left:var(--container-pad);
  width:44px;height:38px;flex:none;background:none;border:0;cursor:pointer;
}
/* Two hairlines crossed - matches icon-menu.svg's 1px white stroke and round caps. */
.drawer__close span,
.drawer__close span::before{
  position:absolute;top:50%;left:50%;
  display:block;width:28px;height:1px;
  background:var(--c-text);border-radius:1px;
  content:'';
}
.drawer__close span{transform:translate(-50%,-50%) rotate(45deg)}
.drawer__close span::before{transform:translate(-50%,-50%) rotate(-90deg)}
.drawer__close:focus-visible{outline:2px solid var(--c-accent);outline-offset:4px}

.drawer__list,
.drawer__actions,
.drawer__meta{width:100%;max-width:520px}
.drawer__list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}
.drawer a:not(.btn){
  display:block;
  font-family:var(--font-heading);
  font-size:var(--fs-h4);
  font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-tight);
  padding-block:var(--space-12);
  border-bottom:1px solid var(--c-border);
  transition:color var(--dur-fast) var(--ease-out);
}
.drawer a:not(.btn):hover,
.drawer a:not(.btn):focus-visible{color:var(--c-accent)}
@media (min-width:768px) and (min-height:860px){
  .drawer a:not(.btn){font-size:var(--fs-h3);padding-block:var(--space-16)}
}
.drawer__utils{
  display:none;list-style:none;margin:var(--space-24) 0 0;padding:0;
  width:100%;max-width:520px;
  gap:var(--space-24);flex-wrap:wrap;
}
.drawer__utils a{
  font-family:var(--font-label);font-size:var(--fs-caption);
  font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--c-text-muted);
}
.drawer__utils a:hover,.drawer__utils a:focus-visible{color:var(--c-accent)}
@media (max-width:767px){ .drawer__utils{display:flex} }
.drawer__actions{display:flex;flex-direction:column;gap:var(--space-12);margin-top:var(--space-32)}
.drawer__meta{
  margin-top:auto;padding-top:var(--space-32);
  font-family:var(--font-mono);font-size:var(--fs-caption);
  color:var(--c-text-dim);letter-spacing:var(--tracking-wide);
}

/* ============================================================
   SITE FOOTER
   Figma node 121:4583. The supplied backdrop under an 80% black wash, then
   the brand column and the link columns 120 apart, and a hairline bottom bar.
   ============================================================ */
.site-footer{
  position:relative;
  background:var(--c-bg);
  padding:var(--section-pad-lg) 0;
  color:var(--c-text);
}
/* The backdrop, and the wash the design lays over it.

   Note the stacking: the footer paints an opaque background of its own, as a fallback for a
   missing picture. A negative z-index here would put the backdrop *behind* that background
   and it would never be seen. So the backdrop stays at the default level - above the parent's
   background, below anything positioned after it - and the content is lifted over it
   instead. */
.site-footer__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.site-footer__bg img{display:block;width:100%;height:100%;object-fit:cover}
/* No wash here. The design lays 80% black over its picture, but the supplied export is the
   flattened result and already carries it - its brightest pixel is 41 of 255. Applying it a
   second time takes the mean to 2.9 and the backdrop disappears, which is what it did. The
   CTA's export is the raw photograph (max 195), so that one keeps its 20%. */
.site-footer > .container{position:relative;z-index:1}

.footer__inner{display:flex;flex-direction:column;gap:var(--space-40)}
.footer__top{display:flex;flex-direction:column;gap:var(--space-48)}
@media (min-width:1024px){ .footer__top{flex-direction:row;gap:120px;align-items:flex-start} }

/* Brand column: the mark at 215 x 128, the line about the company on a 326 measure,
   then the social row. */
.footer__brand{display:flex;flex-direction:column;gap:var(--space-24);flex:none}
.footer__logo img{display:block;width:215px;height:128px;object-fit:contain;max-width:100%}
.footer__about{
  font-family:var(--font-body);font-size:var(--fs-body);line-height:24px;
  color:var(--c-text-muted);max-width:326px;
}
.footer__social{display:flex;gap:var(--space-24);align-items:flex-start}
.footer__social a{display:block;line-height:0;opacity:.9;transition:opacity var(--dur-base) var(--ease-out)}
.footer__social a:hover,.footer__social a:focus-visible{opacity:1}
.footer__social img{display:block;width:24px;height:24px}

.footer__cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-40)}
@media (min-width:768px){ .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .footer__cols{display:flex;gap:60px;align-items:flex-start;flex:1 1 auto;min-width:0}
  .footer__col--links{flex:none}
  .footer__col--contact,.footer__col--qr{width:253px;flex:none}
}
.footer__col{display:flex;flex-direction:column;gap:var(--space-16)}
.footer__col--links{gap:var(--space-24)}
.footer__col-title{
  font-family:var(--font-heading);font-size:var(--fs-body);font-weight:var(--weight-medium);
  line-height:24px;letter-spacing:0.16px;text-transform:capitalize;color:var(--c-text);
}

.footer__links{display:flex;flex-direction:column;gap:var(--space-8);list-style:none;margin:0;padding:0}
.footer__links a{
  font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px;color:var(--c-text);
  transition:color var(--dur-base) var(--ease-out);
}
.footer__links a:hover,.footer__links a:focus-visible{color:var(--c-accent)}

.footer__contact{display:flex;flex-direction:column;gap:var(--space-16);list-style:none;margin:0;padding:0}
.footer__contact li{display:flex;gap:var(--space-8);align-items:center}
.footer__contact-address{align-items:flex-start}
.footer__contact img{display:block;width:24px;height:24px;flex:none}
.footer__contact a,.footer__contact address{
  font-family:var(--font-body);font-size:var(--fs-caption);line-height:22px;
  color:var(--c-text);font-style:normal;
  transition:color var(--dur-base) var(--ease-out);
}
.footer__contact a:hover,.footer__contact a:focus-visible{color:var(--c-accent)}

.footer__qr img{display:block;width:146px;height:146px;object-fit:cover}

/* Bottom bar: a half-pixel hairline, then the three groups pushed apart. */
.footer__bottom{
  display:flex;flex-direction:column;gap:var(--space-16);
  border-top:0.5px solid rgba(var(--rgb-white),.4);
  padding:var(--space-24) 0;
}
@media (min-width:1024px){
  .footer__bottom{flex-direction:row;justify-content:space-between;align-items:flex-start;padding-inline:60px}
}
.footer__copyright,.footer__gstin{
  font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--weight-medium);
  line-height:22px;color:var(--c-text);
}
.footer__legal-links{display:flex;gap:var(--space-8);align-items:center;flex-wrap:wrap}
.footer__legal-links a{
  font-family:var(--font-body);font-size:var(--fs-caption);font-weight:var(--weight-medium);
  line-height:22px;color:var(--c-text);
  transition:color var(--dur-base) var(--ease-out);
}
.footer__legal-links a:hover,.footer__legal-links a:focus-visible{color:var(--c-accent)}
/* The rules between the legal links, drawn rather than shipped as an image. */
.footer__legal-links a + a::before{
  content:"";
  display:inline-block;
  width:1px;height:14px;
  margin-right:var(--space-8);
  vertical-align:-2px;
  background:rgba(var(--rgb-white),.4);
}

/* ============================================================
   FLOATING WHATSAPP - the channel the KB says they actually sell on
   ============================================================ */
.wa-float{
  position:fixed;right:var(--space-16);bottom:var(--space-16);
  z-index:var(--z-overlay);
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--space-48);height:var(--space-48);
  background:var(--c-crimson);color:var(--c-text-on-brand);
  border-radius:var(--r-full);
  box-shadow:var(--shadow-lg);
  transition:transform var(--dur-base) var(--ease-out);
}
.wa-float:hover{transform:scale(1.08)}
@media (min-width:1024px){
  .wa-float{right:var(--space-32);bottom:var(--space-32);width:var(--space-56);height:var(--space-56)}
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumbs{
  font-family:var(--font-mono);font-size:var(--fs-caption);
  letter-spacing:var(--tracking-wide);color:var(--c-text-dim);
  display:flex;flex-wrap:wrap;gap:var(--space-8);align-items:center;
}
.breadcrumbs a{color:var(--c-text-muted)}
.breadcrumbs a:hover{color:var(--c-accent)}
.breadcrumbs span[aria-current]{color:var(--c-text)}

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination{display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:center;margin-top:var(--space-64)}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--space-48);height:var(--space-48);
  padding-inline:var(--space-12);
  border:1px solid var(--c-border);border-radius:var(--r-hairline);
  font-family:var(--font-mono);font-size:var(--fs-body);color:var(--c-text-muted);
  transition:border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.pagination .page-numbers:hover{border-color:var(--c-border-strong);color:var(--c-text)}
.pagination .page-numbers.current{background:var(--c-primary);border-color:var(--c-primary);color:var(--c-text-on-brand)}

/* ============================================================
   SCROLL REVEAL - opacity + transform only, never layout
   ============================================================ */
.reveal{opacity:0;transform:translateY(var(--space-32));transition:opacity var(--dur-slower) var(--ease-out),transform var(--dur-slower) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:80ms}
.reveal[data-delay="2"]{transition-delay:160ms}
.reveal[data-delay="3"]{transition-delay:240ms}
.reveal[data-delay="4"]{transition-delay:320ms}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ============================================================
   SCROLL TEXT FILL - colour only, never layout
   A passage starts dim and lights a word at a time as it is scrolled up the viewport.
   Every section heading takes part, plus any passage marked `data-text-fill`;
   `assets/js/text-fill.js` decides which and drives `--fill` per word.

   The words are only dimmed once the script has taken over - `is-filling` is what does
   that - so with no JavaScript, or under reduced motion, the copy reads at full strength.

   The lit end is `currentColor` rather than a fixed white. Inside the `color` property
   itself `currentColor` resolves to the inherited value, so each passage fills up to
   whatever colour it was already painted instead of being dragged towards one.

   The words stay inline. An inline-block per word would be a second thing that could
   change how a heading wraps, and buys nothing - a single word has no space to break at.
   ============================================================ */
.fill-word{color:inherit}
.is-filling .fill-word{color:var(--c-text-dim)}
@supports (color: color-mix(in srgb, red 50%, blue)){
  .is-filling .fill-word{
    color:color-mix(in srgb, currentColor calc(var(--fill, 1) * 100%), var(--c-text-dim));
    transition:color var(--dur-fast) linear;
  }
}
@media (prefers-reduced-motion:reduce){
  .is-filling .fill-word{color:inherit}
}