x-dc { display: none !important; }

/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("./assets/fonts/archivo-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("./assets/fonts/archivo-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("./assets/fonts/archivo-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("./assets/fonts/archivo-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("./assets/fonts/archivo-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("./assets/fonts/archivo-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-400-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-400-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-500-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-500-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-500-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./assets/fonts/ibm-plex-mono-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("./assets/fonts/newsreader-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("./assets/fonts/newsreader-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 500;
  font-display: swap;
  src: url("./assets/fonts/newsreader-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Footer finale. All layout and motion rules stay within this component. */
.hk-footer {
  position: relative;
  isolation: isolate;
  background: #141617;
  color: #F7F3EA;
  border-top: 1px solid #8B7039;
  padding: clamp(48px, 6vw, 88px) 0 0;
  overflow: clip;
  view-timeline-name: --hk-footer-depth;
  view-timeline-axis: block;
}
.hk-footer-inner { max-width: 1320px; margin: auto; padding: 0 clamp(18px, 4vw, 44px); }
.hk-footer-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; }
.hk-footer-label {
  font: 500 10px/1.5 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #D9AE55;
}
.hk-footer-label { margin: 0 0 28px; display: flex; gap: 12px; align-items: center; }
.hk-footer-marker { width: 7px; height: 7px; background: #D9AE55; transform: rotate(45deg); flex: none; }
.hk-footer-heading {
  margin: 0; font-family: Archivo, sans-serif; font-size: clamp(52px, 7vw, 100px);
  font-weight: 900; line-height: .94; letter-spacing: -.045em;
}
.hk-footer-heading > span { color: #D9AE55; }
.hk-footer-invite { max-width: 350px; justify-self: end; width: 100%; }
.hk-footer-invite > p { margin: 0 0 24px; max-width: 30ch; font-size: 17px; line-height: 1.6; color: #D1D0C8; }
.hk-footer a { color: #F7F3EA; text-decoration: none; }
.hk-footer a:hover { color: #D9AE55; }
.hk-footer-contacts { display: grid; gap: 10px; }
.hk-footer a.hk-footer-contact {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 76px; padding: 14px 16px 14px 18px; border: 1px solid rgb(217 174 85 / 38%); border-radius: 3px;
  background: linear-gradient(112deg, rgb(247 243 234 / 8%), rgb(184 138 42 / 7%)); color: #F7F3EA;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%), 0 10px 30px rgb(0 0 0 / 14%);
  transition: transform 260ms cubic-bezier(.22,.61,.36,1), border-color 220ms ease, background-color 220ms ease, box-shadow 260ms ease;
}
.hk-footer-contact::before {
  content: ''; position: absolute; inset: -70% 30% -70% -30%; pointer-events: none;
  background: radial-gradient(circle, rgb(217 174 85 / 15%), transparent 66%); opacity: .5;
  transition: transform 420ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease;
}
.hk-footer-contact > * { position: relative; z-index: 1; }
.hk-footer-contact-kind { display: block; margin-bottom: 5px; color: #D9AE55; font: 500 9px/1.2 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.hk-footer-contact-value { display: block; font-size: clamp(14px, 1.25vw, 16px); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; }
.hk-footer-contact-mark {
  display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid rgb(217 174 85 / 42%); border-radius: 50%;
  background: rgb(217 174 85 / 8%); transition: transform 260ms cubic-bezier(.22,.61,.36,1), background-color 220ms ease;
}
.hk-footer-contact-mark .hk-arrow { width: 15px; height: 12px; }
.hk-footer a.hk-footer-contact:focus-visible { outline: 2px solid #D9AE55; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .hk-footer a.hk-footer-contact:hover { color: #F7F3EA; transform: translateY(-3px); border-color: rgb(217 174 85 / 76%); background-color: rgb(217 174 85 / 6%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 11%), 0 14px 34px rgb(0 0 0 / 24%), 0 0 28px rgb(184 138 42 / 9%); }
  .hk-footer-contact:hover::before { transform: translateX(18%); opacity: .9; }
  .hk-footer-contact:hover .hk-footer-contact-mark { transform: translateX(2px); background: rgb(217 174 85 / 16%); }
}
.hk-footer a.hk-footer-contact:active { transform: translateY(1px) scale(.99); transition-duration: 90ms; }
.hk-footer-details {
  margin-top: clamp(40px, 5vw, 72px); padding: 22px 0 10px;
  border-top: 1px solid rgb(217 174 85 / 24%);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center;
}
.hk-footer-nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
.hk-footer-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13px; font-weight: 600; position: relative;
}
.hk-footer-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px;
  background: #D9AE55; transform: scaleX(0); transform-origin: left;
  transition: transform 240ms cubic-bezier(.22,.61,.36,1);
}
.hk-footer-nav a:hover::after, .hk-footer-nav a:focus-visible::after { transform: scaleX(1); }
.hk-footer-details > p { width: 100%; max-width: 350px; justify-self: end; margin: 0; font-size: 12px; line-height: 1.7; color: #B9BBB4; }
.hk-footer-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px;
  padding-top: 16px; color: #A9ABA5; font: 400 10px/1.6 'IBM Plex Mono', monospace;
}
.hk-footer-meta p { margin: 0; }
.hk-footer-meta a { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; margin-left: auto; }
.hk-footer .hk-footer-up { transform: rotate(-90deg); width: 16px; height: 16px; }
.hk-footer-signature { padding-top: clamp(48px, 6vw, 86px); }
.hk-footer-socials {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding: 0 12%; margin-bottom: -20px;
}
.hk-footer a.hk-footer-social {
  --tile-turn: -9deg; --tile-y: 14px;
  --tile-hover-bg: #A33468; --tile-hover-ink: #F7F3EA; --tile-hover-edge: #CF7A9D;
  display: grid; place-items: center; flex: 0 0 auto;
  width: clamp(60px, 8.4vw, 120px); aspect-ratio: 1; border-radius: 18%;
  background: #F7F3EA; color: #17191A; border: 1px solid #F7F3EA;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 6px 0 rgb(0 0 0 / 26%), 0 14px 24px rgb(0 0 0 / 16%);
  transform: translateY(var(--tile-y)) rotate(var(--tile-turn));
  transition: transform 420ms cubic-bezier(.22,.61,.36,1), background-color 280ms ease, color 280ms ease, border-color 280ms ease;
}
.hk-footer .hk-footer-social:nth-child(2) { --tile-turn: 7deg; --tile-y: -18px; --tile-hover-bg: #202A2B; --tile-hover-ink: #9DD8D1; --tile-hover-edge: #698E8A; background: #B88A2A; border-color: #D9AE55; }
.hk-footer .hk-footer-social:nth-child(3) { --tile-turn: -6deg; --tile-y: 6px; --tile-hover-bg: #285DB3; --tile-hover-edge: #779DD5; background: #232526; color: #F7F3EA; border-color: #7B7C73; }
.hk-footer .hk-footer-social:nth-child(4) { --tile-turn: 10deg; --tile-y: -12px; --tile-hover-bg: #17191A; --tile-hover-edge: #D9AE55; }
.hk-footer-social svg { width: 46%; height: 46%; transition: transform 420ms cubic-bezier(.22,.61,.36,1); }
.hk-footer-social:focus-visible { outline: 2px solid #D9AE55; outline-offset: 7px; }
.hk-footer a.hk-footer-social:focus-visible { background: var(--tile-hover-bg); color: var(--tile-hover-ink); border-color: var(--tile-hover-edge); }
@media (hover: hover) and (pointer: fine) {
  .hk-footer a.hk-footer-social:hover { background: var(--tile-hover-bg); color: var(--tile-hover-ink); border-color: var(--tile-hover-edge); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hk-footer .hk-footer-social:hover, .hk-footer .hk-footer-social:focus-visible {
    transform: translateY(calc(var(--tile-y) - 10px)) rotate(0deg) scale(1.04);
  }
  .hk-footer-social:is(:hover, :focus-visible) svg { transform: translateY(-1px) scale(1.06); }
}
@media (prefers-reduced-motion: no-preference) {
  .hk-footer .hk-footer-social:active { transform: translateY(var(--tile-y)) rotate(0deg) scale(.96); transition-duration: 120ms; }
}
.hk-footer-mask {
  overflow: clip;
  opacity: .56;
  /* The stationary mask dissolves the moving letters, not the whole footer. */
  height: 12.7vw;
  mask-image: linear-gradient(178.5deg, #000 22%, rgb(0 0 0 / .95) 42%, rgb(0 0 0 / .55) 66%, transparent 96%);
}
.hk-footer-wordmark {
  display: block; width: 112%; max-width: none; height: auto; margin-left: -4%;
}
@keyframes hk-footer-rise {
  from { transform: translateY(32%); opacity: .45; }
  to { transform: translateY(0); opacity: 1; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hk-footer-wordmark {
      animation: hk-footer-rise linear both;
      animation-timeline: --hk-footer-depth;
      animation-range: entry 45% entry 100%;
    }
  }
}
@media (max-width: 767px) {
  .hk-footer-top, .hk-footer-details { grid-template-columns: 1fr; gap: 30px; }
  .hk-footer-heading { font-size: clamp(54px, 12.8vw, 88px); }
  .hk-footer-label { font-size: 9px; margin-bottom: 24px; letter-spacing: .12em; }
  .hk-footer-invite, .hk-footer-details > p { max-width: none; justify-self: start; }
  .hk-footer-invite > p { font-size: 16px; max-width: 34ch; margin-bottom: 20px; }
  .hk-footer-nav { gap: 0 22px; }
  .hk-footer-details { gap: 16px; padding: 18px 0 12px; }
  .hk-footer-meta { gap: 8px 20px; }
  .hk-footer-meta p:nth-child(2) { order: 3; flex-basis: 100%; max-width: 32ch; }
  .hk-footer-signature { padding-top: 54px; }
  .hk-footer-socials { padding: 0 7%; gap: 16px; margin-bottom: 0; }
  .hk-footer a.hk-footer-social { width: clamp(52px, 15vw, 90px); }
  .hk-footer .hk-footer-social:nth-child(2) { --tile-y: -12px; }
  .hk-footer-mask { height: 13.8vw; }
  .hk-footer-wordmark { margin-left: -3%; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-footer-wordmark { animation: none; }
  .hk-footer a.hk-footer-social { transition: none; }
  .hk-footer a.hk-footer-contact, .hk-footer-contact::before, .hk-footer-contact-mark { transition: none; }
  .hk-footer-social svg { transition: none; }
  .hk-footer-nav a::after { transition: none; }
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin:0; background:#F7F3EA; color:#17191A; font-family:Archivo, Helvetica, Arial, sans-serif; overflow-x:hidden; }
  * { box-sizing: border-box; }
  button, input, textarea, select { font-family: inherit; }
  a { color:#17191A; } a:hover { color:#7A5D18; }
  *:focus-visible { outline: 2px solid #17191A; outline-offset: 3px; }
  @media (max-width: 899px) {
    #collection, #puffer, #quality, #process { padding-top: 44px !important; padding-bottom: 44px !important; }
    #faq { padding-top: 36px !important; padding-bottom: 36px !important; }
    #quote { padding-bottom: 56px !important; }
    #quote > div > div { padding-top: 36px !important; }
    footer:not(.hk-footer) { padding-top: 36px !important; }
    [data-m="body"], [data-m="body"] p, [data-m="body"] span { font-size: 1rem !important; line-height: 1.55 !important; }
    [data-m="wq"] p { font-size: 1rem !important; line-height: 1.5 !important; }
    [data-m="col"] p, [data-m="col"] li { font-size: 1rem !important; line-height: 1.55 !important; }
    [data-m="col"] a { display: inline-block !important; padding: 10px 0 !important; }
    #quote label { font-size: 1rem !important; }
    #quote dd { font-size: 1rem !important; }
    [data-m="hide"] { display: none !important; }
    [data-m="full"] { width: 100% !important; flex: 1 1 100% !important; }
    [data-m="tap"] { min-height: 44px !important; padding: 10px 0 !important; }
    [data-m="cap"] { flex-direction: column !important; gap: 2px !important; }
    [data-m="macro"] figcaption { font-size: 11px !important; }
  }
  @keyframes hkTick { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
  @keyframes hkFade { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

/* Interaction finish. Dimensions, type and the original palette stay in the template. */
:root {
  --hk-ease: cubic-bezier(.22, .61, .36, 1);
  --hk-gold: #B88A2A;
}

/* Let the existing sticky header follow the full page, beyond the runtime's 100vh host. */
#dc-root, #dc-root > .sc-host {
  height: auto !important;
  min-height: 100%;
}
header[data-screen-label="Header"] {
  transition: box-shadow 220ms ease;
}
header[data-scrolled="true"] {
  box-shadow: 0 4px 18px rgb(23 25 26 / 7%);
}
header nav a {
  position: relative;
  border-bottom-color: transparent !important;
}
header nav a::after {
  content: "";
  position: absolute;
  inset: auto 2px -1px;
  height: 1px;
  background: var(--hk-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms var(--hk-ease);
}
header nav a:focus-visible::after { transform: scaleX(1); }

/* Important declarations here override only the export's inline transition/background. */
.hk-button {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
    box-shadow 200ms ease, translate 200ms var(--hk-ease), scale 120ms ease !important;
}
button.hk-button.hk-button-gold {
  background-image: linear-gradient(180deg, rgb(255 249 224 / 13%), transparent 55%, rgb(72 47 8 / 7%)) !important;
  box-shadow: inset 0 1px 0 rgb(255 249 224 / 25%), inset 0 -1px 0 rgb(72 47 8 / 17%);
}
.hk-button:active:not(:disabled) {
  translate: 0 1px;
  scale: .985;
}
.hk-button-gold:focus-visible {
  outline: 2px solid #7A5D18;
  outline-offset: 4px;
}
#puffer :focus-visible, footer :focus-visible {
  outline-color: #D9AE55;
}
/* HAKRYX directional mark: one custom, forward-leaning editorial stroke; currentColor
   keeps every instance in its existing context. Icon boxes replace glyph advances. */
.hk-arrow {
  --hk-arrow-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none'%3E%3Cpath d='M1.5 11.25L26.5 8.75M18.5 2.6L26.5 8.75L20 16.5' stroke='%23000' stroke-width='1.65' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  vertical-align: -.12em;
  background: currentColor;
  -webkit-mask: var(--hk-arrow-art) center / contain no-repeat;
  mask: var(--hk-arrow-art) center / contain no-repeat;
  pointer-events: none;
  transition: translate 200ms var(--hk-ease);
}
/* Button variant: level shaft and mirrored head, with weight balanced to CTA type. */
button .hk-arrow {
  --hk-arrow-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20' fill='none'%3E%3Cpath d='M2 10H25.5M17.75 3.5L25.5 10L17.75 16.5' stroke='%23000' stroke-width='2.1' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
}
.hk-arrow--back { rotate: 180deg; }
/* Only the hero quote and Continue: a single outline avoids overlapping stroke tips. */
.hk-arrow.hk-arrow--cta {
  --hk-arrow-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 20'%3E%3Cpath d='M1.5 8.3H20.2L15.8 3.9L18.2 1.5L26.7 10L18.2 18.5L15.8 16.1L20.2 11.7H1.5Z'/%3E%3C/svg%3E");
}
.hk-arrow--after { margin-inline-start: .25em; }
.hk-arrow--product { width: 1.1em; }
@media (forced-colors: active) {
  .hk-arrow { forced-color-adjust: none; background: ButtonText; }
}
#hero [aria-roledescription="carousel"] button {
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, scale 160ms var(--hk-ease) !important;
}
#hero [aria-roledescription="carousel"] button:active { scale: .95; }

/* A faint light falloff gives the existing charcoal panel depth. */
#puffer {
  background-image: radial-gradient(ellipse at 85% 0%, rgb(247 243 234 / 5%), transparent 65%) !important;
  box-shadow: inset 0 1px 0 rgb(217 174 85 / 18%);
}
.hk-puffer-actions {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: clamp(20px, 2.6vw, 28px);
}
.hk-puffer-actions .hk-button-gold { flex: 1 1 240px; }
.hk-puffer-learn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid rgb(247 243 234 / 38%);
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(247 243 234 / 14%), rgb(247 243 234 / 9%));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 12%), 0 5px 18px rgb(0 0 0 / 10%);
  color: #F7F3EA;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 140ms ease;
}
.hk-puffer-learn:hover { border-color: rgb(247 243 234 / 68%); background: linear-gradient(180deg, rgb(247 243 234 / 18%), rgb(247 243 234 / 12%)); color: #F7F3EA; box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 7px 22px rgb(0 0 0 / 14%); }
.hk-puffer-learn:active { transform: translateY(1px) scale(.99); box-shadow: inset 0 1px 3px rgb(0 0 0 / 15%); }
@media (max-width: 899px) {
  .hk-puffer-actions { flex-direction: column; max-width: 340px; }
  .hk-puffer-actions .hk-button-gold, .hk-puffer-learn { flex: none; width: 100%; max-width: none !important; }
}

#collection [role="tab"], #quote button[aria-pressed] {
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}
#collection [role="tab"][aria-selected="true"] {
  box-shadow: inset 0 -2px 0 var(--hk-gold);
}
#quote button[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgb(184 138 42 / 45%);
}
#quote input, #quote textarea {
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}
#quote input:focus-visible, #quote textarea:focus-visible {
  box-shadow: 0 0 0 3px rgb(184 138 42 / 12%);
}
#faq button[aria-expanded] {
  transition: color 160ms ease;
}
#faq button[aria-expanded="true"] { color: #7A5D18 !important; }
#faq button[aria-expanded] > span {
  transition: color 160ms ease, scale 160ms var(--hk-ease);
}
#faq [role="region"] > p { animation: hkAnswer 180ms var(--hk-ease); }
@keyframes hkAnswer {
  from { opacity: .45; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  header nav a:hover::after { transform: scaleX(1); }
  .hk-button:hover:not(:active):not(:disabled) {
    translate: 0 -1px;
    box-shadow: 0 4px 10px rgb(23 25 26 / 12%);
  }
  button.hk-button.hk-button-gold:hover:not(:active):not(:disabled) {
    box-shadow: inset 0 1px 0 rgb(255 249 224 / 35%), inset 0 -1px 0 rgb(72 47 8 / 15%), 0 4px 10px rgb(23 25 26 / 14%);
  }
  #hero .hk-button:hover [aria-hidden="true"] { translate: 3px 0; }
  :is(.hk-button, #faq a, #hero [aria-roledescription="carousel"] button):hover .hk-arrow { translate: 2px 0; }
  :is(.hk-button, #hero [aria-roledescription="carousel"] button):hover .hk-arrow--back { translate: -2px 0; }
  #hero [aria-roledescription="carousel"] button:hover {
    box-shadow: 0 3px 10px rgb(23 25 26 / 12%);
  }
  #collection [role="tab"]:hover, #quote button[aria-pressed]:hover {
    border-color: var(--hk-gold) !important;
  }
  #faq button[aria-expanded]:hover { color: #7A5D18 !important; }
  #faq button[aria-expanded]:hover > span { scale: 1.12; }
}

@media (prefers-reduced-motion: reduce) {
  .hk-button, #hero .hk-button [aria-hidden="true"], #hero [aria-roledescription="carousel"] button,
  #collection [role="tab"], #quote button[aria-pressed], #quote input, #quote textarea {
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
  #faq [role="region"] > p { animation: none; }
  #faq button[aria-expanded] > span { scale: none; }
  .hk-arrow { transition: none !important; translate: none !important; }
}
@media print {
  header[data-screen-label="Header"] { position: static !important; box-shadow: none; }
}

/* V2: product-led storytelling and a shorter, more reassuring path to a quote. */
html { scroll-padding-top: 96px; }
#quote input, #quote-products, #quote-success { scroll-margin-top: 100px; }
#process { scroll-margin-top: 90px; }
[data-screen-label="Mobile menu"] { overflow-y: auto; overscroll-behavior: contain; }
header a[aria-label="HAKRYX home"] { min-height: 44px; }
.hk-product-figure { margin: 0; min-width: 0; }
.hk-product-stage {
  position: relative;
  aspect-ratio: 5 / 4;
  background: #ECEAE1;
  border: 1px solid #E0DED4;
  overflow: hidden;
}
.hk-product-stage img, .hk-puffer-product img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.hk-product-stage img { padding: 26px 6px 12px; }
.hk-product-edition {
  position: absolute;
  top: 16px;
  left: 18px;
  font: 500 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7A5D18;
}
.hk-product-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font: 500 10px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5A5C59;
}
.hk-puffer-product { aspect-ratio: 4 / 5; background: #ECEAE1; overflow: hidden; }
.hk-direct-email, .hk-direct-phone { width: fit-content; padding: 12px 0; font-size: 1rem; text-underline-offset: 4px; }
.hk-direct-phone { margin-top: -8px; }
.hk-optional-details { border-block: 1px solid #D8D6CB; }
.hk-optional-details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 700;
}
.hk-optional-details summary::-webkit-details-marker { display: none; }
.hk-optional-details summary span { color: #6A6C68; font-weight: 400; font-size: 13px; }
.hk-optional-details summary::after { content: '+'; margin-left: auto; font-size: 22px; font-weight: 400; color: #7A5D18; }
.hk-optional-details[open] summary::after { content: '−'; }
.hk-optional-fields { display: grid; gap: 20px; padding: 6px 0 20px; }
.hk-selection-status { margin: 0; color: #7A5D18; font: 500 12px/1.5 'IBM Plex Mono', monospace; }
.hk-file-field { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 18px; min-width: 0; }
.hk-file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.hk-file-picker { position: relative; display: inline-flex; }
.hk-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.hk-file-picker:focus-within .hk-file-trigger { outline: 2px solid #17191A; outline-offset: 3px; }
.hk-file-remove {
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: #3C3E3D;
  font-size: .875rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.hk-file-feedback { flex: 1 1 260px; min-width: 0; }
.hk-file-list { list-style: none; padding: 0; margin: 8px 0 0; }
.hk-file-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #D8D6CB; }
.hk-file-list li > span { min-width: 0; overflow-wrap: anywhere; font: 400 12px/1.45 'IBM Plex Mono', monospace; }
.hk-file-list small { display: block; color: #6A6C68; font: inherit; }
.hk-file-list button { flex-shrink: 0; }
.hk-file-feedback p { margin: 0; overflow-wrap: anywhere; font: 400 12px/1.45 'IBM Plex Mono', monospace; color: #6A6C68; }
.hk-file-feedback p[role="alert"] { margin-top: 5px; color: #8E1E23; font-weight: 500; }
.hk-form-card { min-width: 0; }
.hk-form-card dd { overflow-wrap: anywhere; }
.hk-form-card button:disabled { opacity: .8; }
.hk-submit-error { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; padding: 14px; border: 1px solid #D2B47A; background: #F8F2E5; color: #3C3E3D; }
.hk-submit-error > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #B88A2A; color: #17191A; font-weight: 900; }
.hk-submit-error strong { display: block; margin: 1px 0 4px; color: #17191A; font-size: 14px; }
.hk-submit-error p { margin: 0; font: 400 12.5px/1.5 'IBM Plex Mono', monospace; color: #5A5040; }
.hk-submit-success { display: flex; flex-direction: column; align-items: center; padding: clamp(14px,2.4vw,24px) clamp(24px,4vw,42px) clamp(20px,3vw,30px); overflow: hidden; background: #F7F3EA; text-align: center; }
.hk-success-art { position: relative; overflow: hidden; width: min(100%,360px); aspect-ratio: 5 / 6; background: #F7F3EA; }
.hk-success-art picture, .hk-success-art img { display: block; width: 100%; height: 100%; }
.hk-success-art img { object-fit: cover; object-position: center 48%; }
.hk-success-copy { width: 100%; max-width: 650px; padding-top: clamp(22px,3vw,30px); }
.hk-success-kicker { margin: 0 0 10px; color: #7A5D18; font: 500 10px/1.2 'IBM Plex Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.hk-success-copy h3 { margin: 0 0 14px; font-size: clamp(1.6rem,4vw,2.25rem); line-height: 1.08; letter-spacing: -.025em; }
.hk-success-copy > p:not(.hk-success-kicker) { margin: 0 auto 20px; max-width: 46ch; line-height: 1.6; color: #3C3E3D; }
.hk-success-copy a { color: inherit; font-weight: 700; text-decoration-color: #B88A2A; text-underline-offset: 3px; }
.hk-success-copy button { min-height: 50px; padding: 0 20px; border: 0; border-radius: 2px; background: #B88A2A; color: #17191A; font: inherit; font-weight: 700; cursor: pointer; }
.hk-quote-bar { visibility: visible; }
.hk-quote-bar[aria-hidden="true"] { visibility: hidden; }
@media (max-width: 899px) {
  html { scroll-padding-top: 80px; }
  #quote input, #quote-products, #quote-success { scroll-margin-top: 80px; }
  .hk-product-stage { aspect-ratio: 5 / 4; max-height: 460px; }
  .hk-product-stage img { padding: 24px 8px 4px; }
  .hk-quote-reassurance { margin-top: 20px !important; }
  .hk-quote-reassurance li { padding: 10px 0 !important; gap: 12px !important; }
  .hk-form-card form { padding: 20px 16px !important; }
  .hk-submit-success { padding: 12px 16px 20px; }
  .hk-success-art { width: min(100%,300px); }
  .hk-success-copy { padding-top: 20px; }
  .hk-select-all-hint { white-space: normal !important; max-width: 64px; text-align: right; line-height: 1.4 !important; }
  footer [data-m="col"] > div:nth-child(2) ul { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px !important; }
}
@media (max-width: 359px) {
  #collection [role="tab"] { font-size: 13px !important; padding-inline: 4px !important; }
  .hk-quote-bar > div { gap: 8px !important; padding-inline: 12px !important; }
  .hk-quote-bar p { font-size: 12px !important; }
}

/* Motion only: no changes to the hero or restored Quality / Process compositions. */
.hk-follow-label { pointer-events: none; }
#hero .hk-follow-label { display: inline-flex; align-items: center; gap: inherit; }
.hk-continue-label { display: inline-flex; align-items: center; gap: 12px; }
[data-hk-follow].hk-touch-pressed {
  translate: 0 1px;
  scale: .985;
  box-shadow: inset 0 2px 4px rgb(72 47 8 / 20%), inset 0 1px 0 rgb(255 249 224 / 12%);
}

/* Primary CTAs only. The native button/hit area never moves; its decorative
   face and backing do. Without JS, on touch, and with reduced motion: original buttons. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  .hk-follow-enabled [data-hk-follow] {
    position: relative;
    isolation: isolate;
    background: transparent !important;
    box-shadow: none !important;
    translate: none !important;
    scale: none !important;
  }
  .hk-follow-enabled [data-hk-follow]::before,
  .hk-follow-enabled [data-hk-follow]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
  }
  .hk-follow-enabled [data-hk-follow]::before {
    z-index: -2;
    background: #17191A;
    opacity: var(--hk-back-alpha, 0);
    transform: translate3d(var(--hk-back-x, 0px), var(--hk-back-y, 0px), 0);
  }
  .hk-follow-enabled #puffer [data-hk-follow]::before { background: #F7F3EA; }
  .hk-follow-enabled .hk-footer [data-hk-follow]::before { background: #F7F3EA; }
  .hk-follow-enabled .hk-continue-follow::before { background: #B88A2A; }
  .hk-follow-enabled [data-hk-follow]::after {
    z-index: -1;
    background: #B88A2A linear-gradient(180deg, rgb(255 249 224 / 13%), transparent 55%, rgb(72 47 8 / 7%));
    box-shadow: inset 0 1px 0 rgb(255 249 224 / 25%), inset 0 -1px 0 rgb(72 47 8 / 17%);
    transition: background-color 180ms ease, box-shadow 180ms ease;
  }
  .hk-follow-enabled [data-hk-follow] .hk-follow-label { display: inline-block; }
  .hk-follow-enabled #hero .hk-follow-label { display: inline-flex; }
  .hk-follow-enabled [data-hk-follow]::after,
  .hk-follow-enabled [data-hk-follow] .hk-follow-label {
    transform: translate3d(var(--hk-face-x, 0px), var(--hk-face-y, 0px), 0) scale(var(--hk-face-scale, 1));
  }
  .hk-follow-enabled [data-hk-follow]:hover::after {
    background-color: #D9AE55;
    box-shadow: inset 0 0 0 1px rgb(23 25 26 / 28%), inset 0 2px 0 rgb(255 249 224 / 24%);
  }
  .hk-follow-enabled .hk-continue-follow::after { background-color: #17191A; }
  .hk-follow-enabled .hk-continue-follow:hover::after { background-color: #2B2E30; }
  .hk-follow-enabled .hk-continue-follow .hk-continue-label { display: inline-flex; }
  .hk-follow-enabled [data-hk-follow]:active::after {
    box-shadow: inset 0 1px 3px rgb(72 47 8 / 24%);
  }
  .hk-follow-enabled [data-hk-follow].hk-follow-moving::before,
  .hk-follow-enabled [data-hk-follow].hk-follow-moving::after,
  .hk-follow-enabled [data-hk-follow].hk-follow-moving .hk-follow-label { will-change: transform; }
}

.hk-follow-label.hk-follow-inline { display: inline-flex; align-items: center; justify-content: center; gap: inherit; }
.hk-follow-enabled [data-hk-follow] .hk-follow-label.hk-follow-inline { display: inline-flex; }
.hk-follow-enabled a[data-hk-follow] { transform: none !important; }
[data-hk-follow] .hk-follow-inline svg { transition: translate 200ms cubic-bezier(.22,.61,.36,1); }
@media (hover: hover) and (pointer: fine) {
  [data-hk-follow]:hover .hk-follow-inline svg { translate: 2px 0; }
}
@media (prefers-reduced-motion: reduce) {
  [data-hk-follow] .hk-follow-inline svg { transition: none; translate: none; }
}

.hk-product-stage img, .hk-puffer-product img {
  transition: transform 420ms var(--hk-ease);
}
/* Editorial photographs fill the existing frames without changing their geometry. */
.hk-product-stage img.hk-editorial-product { padding: 0; object-fit: cover; }
.hk-editorial-photo { display: block; width: 100%; height: auto; object-fit: cover; background: #ECEAE1; }

/* Desktop-only progressive enhancement. Native cursor stays until the first mouse move. */
.hk-cursor { display: none; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.hk-cursor-on, html.hk-cursor-on * { cursor: none !important; }
  .hk-cursor[data-visible="true"] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
  }
  .hk-cursor *, .hk-cursor { pointer-events: none !important; }
  .hk-cursor__point, .hk-cursor__ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    will-change: transform;
  }
  .hk-cursor i { position: absolute; display: block; border-radius: 50%; }
  .hk-cursor__point i {
    width: 6px;
    height: 6px;
    left: -3px;
    top: -3px;
    background: #17191A;
    box-shadow: 0 0 0 1px rgb(247 243 234 / 90%);
    transition: transform 140ms ease;
  }
  .hk-cursor__ring i {
    width: 34px;
    height: 34px;
    left: -17px;
    top: -17px;
    border: 1px solid rgb(23 25 26 / 55%);
    box-shadow: 0 0 0 1px rgb(247 243 234 / 45%);
    opacity: .75;
    transition: transform 200ms var(--hk-ease), border-color 160ms ease, opacity 160ms ease;
  }
  .hk-cursor[data-mode="action"] .hk-cursor__ring i { transform: scale(1.35); border-color: #B88A2A; opacity: 1; }
  .hk-cursor[data-mode="product"] .hk-cursor__ring i { transform: scale(1.55); border-color: #B88A2A; opacity: .85; }
  .hk-cursor[data-mode="action"] .hk-cursor__point i { transform: scale(.8); }
  .hk-cursor[data-pressed="true"] .hk-cursor__ring i { transform: scale(1.05); }
  .hk-cursor[data-pressed="true"] .hk-cursor__point i { transform: scale(.65); }
}
header button[aria-label="Menu"] > span:last-child {
  transform-origin: right;
  transition: transform 180ms var(--hk-ease);
}
[data-screen-label="Mobile menu"] nav a > span {
  transition: translate 180ms var(--hk-ease);
}
header button[aria-label="Menu"], button[aria-label="Close menu"] {
  transition: scale 120ms ease;
}
header button[aria-label="Menu"]:active, button[aria-label="Close menu"]:active {
  scale: .94;
}
:where(header, #collection, #puffer, #quote, footer, .hk-quote-bar) .hk-button-gold:active:not(:disabled) {
  box-shadow: inset 0 2px 4px rgb(72 47 8 / 20%), inset 0 1px 0 rgb(255 249 224 / 12%);
}
.hk-optional-details summary::after {
  transition: transform 180ms var(--hk-ease);
}
@media (hover: hover) and (pointer: fine) {
  .hk-product-figure:hover .hk-product-stage img,
  #puffer figure:hover .hk-puffer-product img { transform: translateY(-3px) scale(1.012); }
  header button[aria-label="Menu"]:hover > span:last-child { transform: scaleX(1.54); }
  [data-screen-label="Mobile menu"] nav a:hover > span { translate: 3px 0; }
  .hk-optional-details summary:hover::after { transform: rotate(90deg); }
  .hk-optional-details[open] summary:hover::after { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hk-product-stage img, .hk-puffer-product img,
  header button[aria-label="Menu"] > span:last-child,
  [data-screen-label="Mobile menu"] nav a > span,
  header button[aria-label="Menu"], button[aria-label="Close menu"],
  .hk-optional-details summary::after {
    transition: none !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
}