/* ==========================================================================
   Components — Bootstrap components dressed in the Jaayo Plast identity.
   Button and card variants use Bootstrap's own --bs-* custom property API,
   so the vendor file stays stock and upgradable.
   ========================================================================== */

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  --bs-btn-padding-y: 0.95rem;
  --bs-btn-padding-x: 1.6rem;
  --bs-btn-font-family: var(--font-data);
  --bs-btn-font-size: 0.8rem;
  --bs-btn-font-weight: 500;
  --bs-btn-border-radius: var(--radius);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-sm {
  --bs-btn-padding-y: 0.7rem;
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-font-size: 0.72rem;
}

/* Micro-interaction: the fill sweeps left to right — the direction sheet
   leaves the extruder. */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-sweep, var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover::before,
.btn:focus-visible::before { transform: scaleX(1); }

.btn__arrow { transition: transform var(--dur-2) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(4px); }

.btn-ink {
  --bs-btn-bg: var(--ink);
  --bs-btn-border-color: var(--ink);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--ink);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent);
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-active-color: #fff;
  --btn-sweep: var(--accent);
}

.btn-accent {
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--ink);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--ink);
  --bs-btn-active-border-color: var(--ink);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-border-color: var(--accent);
  --bs-btn-disabled-color: #fff;
  --btn-sweep: var(--ink);
}

.btn-outline-ink {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--flute);
  --bs-btn-color: var(--ink);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-active-color: #fff;
  --btn-sweep: var(--accent);
}

.btn-outline-paper {
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(255, 255, 255, 0.34);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: transparent;
  --bs-btn-active-border-color: var(--accent);
  --bs-btn-active-color: #fff;
  --btn-sweep: var(--accent);
}

/* Text link with a rib underline that extends on hover */
.link-rib {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-data);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 22px 2px;
  transition: background-size var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease);
}
.link-rib:hover { background-size: 100% 2px; color: var(--accent-dk); }
/* Touch (phones and tablets): a 24px-tall line of micro type is a poor
   target, and these are the in-page calls to action. */
@media (max-width: 991.98px) {
  .link-rib { padding-top: 0.45rem; padding-bottom: 0.5rem; background-position: 0 calc(100% - 0.35rem); }
}
.section--ink .link-rib,
.section--deep .link-rib { color: #fff; }
.section--ink .link-rib:hover,
.section--deep .link-rib:hover { color: #f8b79a; }

/* ---- Navbar -------------------------------------------------------------- */

.site-header {
  --bs-navbar-padding-y: 0;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1030;
  min-height: var(--header-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.site-header.is-stuck {
  background: rgba(237, 240, 236, 0.86);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--flute);
}

/* Fixed icon sizes for inline SVGs. */
.ico-13 { width: 13px; height: 13px; }
.ico-15 { width: 15px; height: 15px; }
.ico-16 { width: 16px; height: 16px; }

.navbar-brand { padding: 0; }
.navbar-brand img { height: 58px; width: auto; aspect-ratio: 293 / 64; }
/* The xl container is 1140px, and at 1366px the nav gap (1vw) has grown enough
   that a 64px mark pushes the quote button onto a second line. Full size only
   once the container steps up to 1320px at xxl. */
@media (min-width: 1400px) { .navbar-brand img { height: 64px; } }

.site-header .navbar-nav { gap: clamp(0.2rem, 1vw, 0.9rem); }

.site-header .nav-link {
  --bs-nav-link-color: var(--ink-2);
  --bs-nav-link-hover-color: var(--ink);
  position: relative;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.55rem 0.15rem;
}
.site-header .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.site-header .nav-link:hover::after,
.site-header .nav-link.active::after { transform: scaleX(1); }
.site-header .nav-link.active { color: var(--ink); font-weight: 600; }

/* Products submenu — opens on hover and on keyboard focus, so it needs no JS
   and "Products" itself stays a plain link to the full range. */
.site-header .has-sub { position: relative; }
.site-header .has-sub > .nav-link { padding-right: 0.95rem; }
.site-header .has-sub > .nav-link::before {
  content: "";
  position: absolute;
  right: 0.1rem;
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.site-header .has-sub:hover > .nav-link::before,
.site-header .has-sub:focus-within > .nav-link::before { transform: translateY(-20%) rotate(225deg); }

.nav-sub {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  width: 680px;
  padding: 1.5rem 1.6rem 1.1rem;
  background: var(--resin);
  border: 1px solid var(--flute);
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out),
    visibility 0s linear var(--dur-2);
}
/* Bridges the gap under the link so the pointer can travel into the panel. */
.nav-sub::before {
  content: "";
  position: absolute;
  inset: -1rem 0 100% 0;
}
.site-header .has-sub:hover > .nav-sub,
.site-header .has-sub:focus-within > .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.nav-sub__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr 1fr 1fr;
  gap: 1.4rem;
}
.nav-sub__label {
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-dk);
}
.nav-sub ul { list-style: none; margin: 0; padding: 0; }
.nav-sub__link {
  display: block;
  padding: 0.3rem 0;
  font-size: 0.88rem;
  line-height: 1.3;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-out);
}
.nav-sub__link:hover,
.nav-sub__link:focus-visible { color: var(--accent-dk); }
.nav-sub__all {
  display: inline-block;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  width: 100%;
  border-top: 1px solid var(--flute-soft);
  font-family: var(--font-data);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.nav-sub__all:hover { color: var(--accent-dk); }

/* Hamburger — three ribs, because of course */
.navbar-toggler {
  --bs-navbar-toggler-border-color: var(--flute);
  --bs-navbar-toggler-border-radius: var(--radius);
  --bs-navbar-toggler-focus-width: 3px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 11px;
}
.navbar-toggler span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
}
.navbar-toggler[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggler[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-toggler[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Offcanvas mobile menu — built for thumbs, not a scaled-down navbar -- */

.offcanvas.mobile-menu {
  --bs-offcanvas-bg: var(--resin);
  --bs-offcanvas-border-color: var(--flute);
  --bs-offcanvas-width: min(420px, 88vw);
  --bs-offcanvas-padding-x: var(--gutter);
  --bs-offcanvas-padding-y: 1.5rem;
}
.mobile-menu .offcanvas-header { border-bottom: 1px solid var(--flute-soft); }
.mobile-menu__brand img { height: 44px; width: auto; aspect-ratio: 201 / 44; display: block; }
.mobile-menu .offcanvas-body { display: flex; flex-direction: column; }

.mobile-menu .nav-link {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--flute-soft);
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mobile-menu .nav-link.active { color: var(--accent-dk); }

/* Products row: the link and its submenu toggle share one ruled line. */
.mobile-menu__row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--flute-soft);
}
.mobile-menu__row .nav-link { flex: 1; border-bottom: 0; }
.mobile-menu__toggle {
  position: relative;
  width: 3rem;
  flex: none;
  border: 0;
  background: transparent;
}
.mobile-menu__toggle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translate(-50%, -70%) rotate(45deg);
  transition: transform var(--dur-2) var(--ease-out);
}
.mobile-menu__toggle[aria-expanded="true"]::before { transform: translate(-50%, -30%) rotate(225deg); }
.mobile-menu__sub {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0 0.6rem 1rem;
  border-bottom: 1px solid var(--flute-soft);
}
.mobile-menu__sub a {
  display: block;
  padding: 0.5rem 0;
  font-size: 1rem;
  color: var(--ink-2);
  text-decoration: none;
}
.mobile-menu__sub a:hover { color: var(--accent-dk); }
.mobile-menu__foot { margin-top: auto; padding-top: 1.5rem; display: grid; gap: 1rem; }
.mobile-menu__foot a { font-family: var(--font-data); font-size: 0.9rem; color: var(--ink-2); }

/* ---- Cut-edge card -------------------------------------------------------
   The top edge shows the sheet's flute in section, so a card reads as a cut
   piece of material rather than a generic panel. */

.card {
  --bs-card-bg: var(--paper);
  --bs-card-border-color: var(--flute);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-inner-border-radius: var(--radius-lg);
  --bs-card-spacer-y: 1.35rem;
  --bs-card-spacer-x: 1.35rem;
  height: 100%;
  overflow: hidden;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease);
}

.card-flute { position: relative; }
.card-flute::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  z-index: 3;
  background-image: repeating-linear-gradient(90deg, var(--flute) 0 1px, transparent 1px 7px);
  background-color: var(--resin-deep);
  transition: background-color var(--dur-2) var(--ease);
}
a.card:hover,
.card-flute:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--ink);
}
.card-flute:hover::before { background-color: var(--accent); }

/* The dashed "ask us" card that closes a card grid: an outline, not a panel. */
.card.card-flute--cta {
  justify-content: center;
  align-items: flex-start;
  padding: 1.6rem;
  background: transparent;
  border-style: dashed;
}
.card-flute--cta .card-title { margin-bottom: 0.6rem; }
.card-flute--cta .card-text { margin-bottom: 1.2rem; }

a.card { text-decoration: none; color: inherit; }

.card-flute__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--resin-deep);
}
.card-flute__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out), opacity var(--dur-2) var(--ease);
}
.card:hover .card-flute__media img { transform: scale(1.045); }

/* Second image cross-fades in on hover where one exists */
.card-flute__media img.card-flute__alt { position: absolute; inset: 0; opacity: 0; }
.card:hover .card-flute__media img.card-flute__alt { opacity: 1; }

.card-kicker {
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  margin-bottom: 0.4rem;
}
.card-title { font-size: 1.12rem; margin-bottom: 0.5rem; }
.card-text { font-size: 0.94rem; color: var(--ink-2); line-height: 1.55; }

.card--dashed { border-style: dashed; background: transparent; }
.card--dashed:hover { transform: none; box-shadow: none; border-color: var(--ink); }

/* ---- Spec tile ----------------------------------------------------------- */

.spec-tile {
  display: flex;
  gap: 1rem;
  height: 100%;
  padding: 1.4rem;
  background: var(--paper);
  border: 1px solid var(--flute);
  border-radius: var(--radius);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease-out);
}
.spec-tile:hover { border-color: var(--ink); transform: translateY(-3px); }
.spec-tile__icon { flex-shrink: 0; width: 46px; height: 46px; object-fit: contain; }
.spec-tile h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.spec-tile p { font-size: 0.88rem; color: var(--ink-2); line-height: 1.5; margin: 0; }

/* ---- Stat / counter ------------------------------------------------------ */

.stat-row {
  display: grid;
  gap: 1px;
  background: var(--flute);
  border: 1px solid var(--flute);
  border-radius: var(--radius-lg);
  overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}
/* Four stats in the md container would fit three to a line and strand the
   fourth, so they sit two by two until all four fit across. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .stat-row:has(> .stat:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
.stat { background: var(--paper); padding: 1.6rem 1.35rem; display: flex; flex-direction: column; gap: 0.3rem; }
.stat__value {
  font-family: var(--font-display);
  font-stretch: 112%;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.stat__unit { font-size: 0.55em; color: var(--ink-3); margin-left: 0.15em; }
.stat__label {
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.section--ink .stat,
.section--deep .stat { background: transparent; }
.section--ink .stat-row,
.section--deep .stat-row { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.2); }
.section--ink .stat__value,
.section--deep .stat__value { color: #fff; }
.section--ink .stat__label,
.section--deep .stat__label { color: rgba(255, 255, 255, 0.7); }
.section--ink .stat__unit,
.section--deep .stat__unit { color: rgba(255, 255, 255, 0.55); }

/* ---- Badge --------------------------------------------------------------- */

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--flute);
  border-radius: var(--radius-pill);
  font-family: var(--font-data);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper);
}
.badge-pill--accent { border-color: var(--accent); color: var(--accent-dk); }

/* ---- Breadcrumb ---------------------------------------------------------- */

.breadcrumb {
  --bs-breadcrumb-divider-color: var(--ink-3);
  --bs-breadcrumb-item-active-color: var(--ink-3);
  --bs-breadcrumb-margin-bottom: 0;
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* the link's tap padding makes its crumb taller than the plain-text ones;
     baseline alignment keeps every crumb, and its divider, on one line of text */
  align-items: baseline;
}
.breadcrumb-item { display: flex; align-items: baseline; }
/* Micro type, so the link needs padding to become a target a thumb can hit. */
.breadcrumb a {
  color: var(--ink-3);
  text-decoration: none;
  display: inline-block;
  padding: 0.55rem 0;
}
.breadcrumb a:hover { color: var(--accent-dk); }

/* ---- Forms ---------------------------------------------------------------- */

.form-label {
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.45rem;
}
.form-label .req { color: var(--accent, #e8541f); margin-left: 0.15em; }
.form-control,
.form-select {
  --bs-border-color: var(--flute);
  padding: 0.85rem 1rem;
  background-color: var(--paper);
  border-radius: var(--radius);
  font-size: 0.96rem;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}
textarea.form-control { min-height: 130px; resize: vertical; }

.invalid-feedback { font-size: 0.8rem; }
.form-text { font-size: 0.85rem; color: var(--ink-3); }
/* "…or call us on +91 …" — the number is a tel: link, so give it a target. */
.form-text a { display: inline-block; padding-block: 0.35rem; }

.btn .spinner-border { --bs-spinner-width: 0.9rem; --bs-spinner-height: 0.9rem; border-width: 2px; }

.form-success {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--deep);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(14, 79, 69, 0.07);
  color: var(--deep);
  font-size: 0.94rem;
  margin-bottom: 1.25rem;
}

.form-error {
  display: flex;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid #d93025;
  border-left-width: 3px;
  border-radius: var(--radius);
  background: rgba(217, 48, 37, 0.08);
  color: #a51d24;
  font-size: 0.94rem;
  margin-bottom: 1.25rem;
}

/* ---- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  padding-top: clamp(3.5rem, 6vw, 5.5rem);
}
.site-footer h4 {
  color: #fff;
  font-family: var(--font-data);
  font-size: var(--t-micro);
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.site-footer a:hover { color: #fff; }

.footer__brand img {
  height: 58px;
  width: auto;
  aspect-ratio: 266 / 58;
  margin-bottom: 1.25rem;
  /* Knock the two-colour mark out to solid white for the dark footer. */
  filter: brightness(0) invert(1);
}
.footer__brand p { font-size: 0.94rem; max-width: 34ch; }

.footer__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.footer__list a {
  font-size: 0.93rem;
  display: inline-block;
  padding: 0.3rem 0;
  transition: padding-left var(--dur-1) var(--ease);
}
.footer__list a:hover { padding-left: 5px; }

.footer__contact { display: grid; gap: 0.9rem; font-size: 0.93rem; }
.footer__contact a { display: inline-block; padding: 0.25rem 0; }
.footer__phones { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.75rem; }
.footer__phones a + a::before {
  content: "/";
  margin-right: 0.75rem;
  color: rgba(255, 255, 255, 0.35);
}
.footer__contact .label {
  display: block;
  font-family: var(--font-data);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 0.2rem;
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-block: 1.4rem;
  font-family: var(--font-data);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.62);
}

/* ---- Back to top ----------------------------------------------------------
   An ink square in the .btn-ink manner, fading in once the visitor is a
   screen down. Its border doubles as a reading gauge: an accent stroke runs
   clockwise around the edge as the page is scrolled, closing the square at
   the foot. Hover gets the house sweep — accent fill, left to right. */

.to-top {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 1020;
  display: grid;
  place-items: center;
  width: 48px;  /* the ring rects in footer.html are drawn to this size and radius */
  height: 48px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity var(--dur-2) var(--ease),
    transform var(--dur-2) var(--ease),
    visibility 0s linear var(--dur-2);
}
.to-top.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
.to-top:hover,
.to-top:focus-visible { color: #fff; }

.to-top::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.to-top:hover::before,
.to-top:focus-visible::before { transform: scaleX(1); }

.to-top__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.to-top__ring rect {
  fill: none;
  stroke-width: 2;
}
.to-top__track { stroke: rgba(255, 255, 255, 0.16); }
.to-top__progress {
  stroke: var(--accent);
  stroke-dasharray: 100;
  stroke-dashoffset: calc(100 - var(--progress, 0) * 100);
  transition: stroke var(--dur-2) var(--ease);
}
/* On the accent fill the gauge would vanish — draw it in ink instead. */
.to-top:hover .to-top__progress,
.to-top:focus-visible .to-top__progress { stroke: var(--ink); }

.to-top__icon {
  width: 16px;
  height: 16px;
  transition: transform var(--dur-2) var(--ease-out);
}
.to-top:hover .to-top__icon { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top::before,
  .to-top__icon { transition: none; }
}