/* ============================================================================
   nutcat.io — rebuilt from the live Wix site, 23 Oct 2026.
   Every value below was READ from the published site, not designed:
   the palette and the type ladder are Wix's own --color_N / --font_N theme
   variables, recovered from the page CSS (capture/theme.json).

   ⚠ ONE SUBSTITUTION. The nav used `din-next-w01-light`, a Monotype face
   licensed to Wix that cannot legally come with us. Barlow Light is the
   closest free match (both are geometric DIN-derived grotesques) and is
   visually near-identical at the 16px and 12px the site uses it at.
   `reklamescriptw00-medium` is declared in Wix's theme but never applied to
   any rendered text, so nothing depends on it.
   ========================================================================== */

:root{
  /* Wix palette, resolved */
  --ink:#1f1f1f;          /* --color_11..15 */
  --white:#ffffff;        /* --color_16 */
  --orange:#ff5c00;       /* brand accent, per-element override on the live site */
  --red:#da392b;          /* --color_41 */
  --grey:#727272;         /* --color_6 */
  --grey-light:#b0b0b0;   /* --color_7 */
  --footer-link:#e2e2e2;
  --black:#000000;

  /* Wix type ladder, resolved from --font_0..10 */
  --f-display:80px; --f-h1:50px; --f-h2-bold:40px; --f-h3:34px;
  --f-h4:21px; --f-lead:24px; --f-body:18px; --f-small:16px; --f-tiny:12px;

  --shell:980px;          /* the site's content column */
  --header-h:67px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:normal normal bold var(--f-body)/1.4em 'roboto-thin','Roboto',Arial,sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;   /* as Wix's .wixSiteProperties: thinner text on Macs */
}
img{max-width:100%;display:block;border:0}
a{color:inherit}

/* ---- type ladder, named after what it is rather than Wix's font_N ---- */
.t-display,.t-h1,.t-h2{font-family:'Suez One',serif;font-weight:400;line-height:1.4em;margin:0}
.t-display{font-size:var(--f-display)}
.t-h1{font-size:var(--f-h1)}
.t-h2{font-size:40px}
.t-h3{font-family:'roboto-bold','Roboto',sans-serif;font-weight:400;font-size:var(--f-h3);line-height:1.4em;margin:0}
.t-h4{font-family:'roboto-bold','Roboto',sans-serif;font-weight:400;font-size:var(--f-h4);line-height:1.4em;margin:0}
.t-lead{font-size:var(--f-lead);font-weight:700;line-height:1.4em;margin:0}
.t-body{font-size:var(--f-body);font-weight:700;line-height:1.4em;margin:0}
.t-small{font-size:var(--f-small);font-weight:700;line-height:1.4em;margin:0}
.t-nav{font-family:'Barlow','DIN Next W01 Light',sans-serif;font-weight:300;font-size:var(--f-small);line-height:1.4em}
.u-orange{color:var(--orange)}
.u-white{color:var(--white)}
.u-center{text-align:center}

.shell{max-width:var(--shell);margin:0 auto;padding:0 20px}

/* ---------------------------------------------------------------- header */
.site-head{
  position:sticky;top:0;z-index:50;background:var(--black);
  height:var(--header-h);display:flex;align-items:center;
}
/* measured at 1440: logo at x=99, the About cell ends at x=1340 -> a 100px right gutter */
.site-head__in{width:100%;margin:0;padding:0 100px 0 99px;display:flex;align-items:center;gap:16px}
.site-head__logo{flex:none}
.site-head__logo img{width:147px;height:35px;object-fit:contain}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:0}
/* live menu, measured pixel by pixel at 1440: Home 963-1084, Contact 1085-1217, About 1218-1339.
   The CELL widths are pinned rather than the padding, because the nav face is substituted
   (DIN Next is Wix-licensed) and a different glyph width would otherwise move every divider. */
.site-nav a{
  /* line box 6px shorter than the 67px cell: puts the Barlow glyphs on the live DIN glyphs' pixel rows (measured 23 Oct) */
  display:block;padding:0;text-align:center;height:var(--header-h);line-height:calc(var(--header-h) - 6px);color:var(--white);
  text-decoration:none;white-space:nowrap;
}
.site-nav a:nth-child(1){width:122px}
.site-nav a:nth-child(2){width:133px}
.site-nav a:nth-child(3){width:122px}
.site-nav a + a{border-left:1px solid #1f1f1f}
.site-nav a:hover{color:var(--orange)}
.site-nav a[aria-current=page]{color:var(--orange)}
.nav-toggle{display:none;margin-left:auto;background:0;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0}

/* ---------------------------------------------------------------- footer */
.site-foot{background:var(--ink);padding:42px 20px 29px;text-align:center}   /* live: 148px on every page, text at +42 */
/* the live fine print: comp-kq5bobsq, 12px #E2E2E2 at line-height 1.6em, centred on #1F1F1F */
.site-foot__fine{margin:0;font:normal normal bold var(--f-tiny)/1.6em 'roboto-thin','Roboto',Arial,sans-serif;color:var(--footer-link)}
.site-foot__fine a{color:var(--footer-link);text-decoration:underline}   /* live: the three links are underlined */

/* ------------------------------------------------------------ long text */
.prose{max-width:var(--shell);margin:0 auto;padding:60px 20px 80px}
.prose h1{font-family:'Suez One',serif;font-weight:400;font-size:var(--f-h1);line-height:1.4em;margin:0 0 28px}
.prose h2{font-family:'roboto-bold','Roboto',sans-serif;font-weight:400;font-size:var(--f-h3);line-height:1.4em;margin:36px 0 12px;color:var(--red)}
.prose h3{font-family:'roboto-bold','Roboto',sans-serif;font-weight:400;font-size:var(--f-h4);margin:26px 0 10px}
.prose p{font-size:var(--f-small);font-weight:700;line-height:1.6em;margin:0 0 14px}
.prose ul,.prose ol{font-size:var(--f-small);font-weight:700;line-height:1.6em;padding-left:22px;margin:0 0 14px}
.prose li{margin:0 0 6px}
.prose a{color:var(--red)}
.prose--dark{background:var(--ink);color:var(--white)}
.prose--dark h2{color:var(--orange)}

/* ===================== MOBILE — the site has its own phone layout ========= */
@media (max-width:760px){
  :root{--f-display:40px;--f-h1:32px;--f-h3:26px;--f-lead:20px;--f-body:16px;--header-h:16.875vw}   /* live phone header: 54px */
  .site-head__in{padding:0 6.25vw}
  .site-head__logo img{width:40.625vw;height:9.6875vw}
  .site-nav a + a{border-left:0}
  /* live phone footer: 9px fine print at 1.6em, 14px over / 21px under, on the 320 canvas */
  .site-foot{padding:4.375vw 6.25vw 7.0313vw}
  .site-foot__fine{font-size:2.8125vw}

  /* ---- the live phone menu, measured on Wix's 320 canvas (1px = 0.3125vw) ----
     Closed: a staggered white "≡" in a 50x50 box at x260 y2 — top 13px from the left, middle
     26px, bottom 13px from the right, all 3px. Open: a FULL-SCREEN #FF5C00 overlay over the
     header too, a black X in the same box, items at x20 from y72, 24px on a 56px line. */
  .nav-toggle{display:block;position:absolute;z-index:101;top:0.625vw;left:81.25vw;width:15.625vw;height:15.625vw;
    margin:0;padding:0;background:transparent;border:0}
  .nav-toggle span{position:absolute;display:block;height:0.9375vw;margin:0;background:#fff;border-radius:.46875vw;   /* live: 1.5px rounded ends */
   
    transition:transform .2s ease,opacity .2s ease,background-color .2s ease}
  .nav-toggle span:nth-child(1){left:3.75vw;top:4.53vw;width:4.0625vw}
  .nav-toggle span:nth-child(2){left:3.75vw;top:7.34vw;width:8.125vw}
  .nav-toggle span:nth-child(3){left:7.8125vw;top:10.16vw;width:4.0625vw}
  .nav-toggle[aria-expanded=true] span{background:#000;left:3.75vw;width:8.125vw;top:7.34vw}
  .nav-toggle[aria-expanded=true] span:nth-child(1){transform:rotate(45deg)}
  .nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded=true] span:nth-child(3){transform:rotate(-45deg)}
  .site-nav{position:fixed;inset:0;z-index:100;background:#ff5c00;margin:0;padding:22.5vw 0 0;
    flex-direction:column;align-items:flex-start;gap:0;display:none}
  .site-nav.open{display:flex}
  .site-nav a,.site-nav a:nth-child(n){width:auto;height:auto;padding:0 9.375vw;text-align:left;border:0;   /* live label glyphs start at x30 */
    font:normal normal bold 7.5vw/17.5vw 'roboto-thin','Roboto',Arial,sans-serif;color:#000}
  .site-nav a[aria-current=page]{color:#fff}
  .prose{padding:36px 16px 56px}
  .prose p,.prose ul,.prose ol{font-size:16px}
}

/* ------------------------------------------------- entrance animations (live site's own timings) */
@keyframes motion-floatIn{0%{opacity:0;animation-timing-function:step-end}
  0.0001%{opacity:0;transform:translate(var(--motion-translate-x),var(--motion-translate-y)) rotate(var(--comp-rotate-z,0deg))}
  100%{opacity:var(--comp-opacity,1);transform:translate(0,0) rotate(var(--comp-rotate-z,0deg))}}
@keyframes motion-slideIn{0%{opacity:0;animation-timing-function:step-end}
  0.0001%{opacity:var(--comp-opacity,1);transform:rotate(var(--comp-rotate-z,0deg)) translate(var(--motion-translate-x,-100%),var(--motion-translate-y,0%));
    clip-path:var(--motion-clip-start,polygon(0% 0%,100% 0%,100% 0%,0% 0%))}
  100%{transform:rotate(var(--comp-rotate-z,0deg)) translate(0px,0px);clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%)}}
@keyframes motion-fadeIn{0%{opacity:0}100%{opacity:var(--comp-opacity,1)}}
@keyframes motion-growIn{0.0001%{transform:translate(var(--motion-translate-x),var(--motion-translate-y)) rotate(var(--comp-rotate-z,0deg)) scale(var(--motion-scale))}
  100%{transform:translate(0px,0px) rotate(var(--comp-rotate-z,0deg)) scale(1)}}
@keyframes motion-tiltInRotate{0%{animation-timing-function:step-end;transform:perspective(800px)}
  0.0001%{transform:perspective(800px) translateZ(calc((var(--motion-height,200px) / 2) * -1)) rotateX(-90deg) translateZ(calc(var(--motion-height,200px) / 2)) rotate(var(--comp-rotate-z,0deg))}
  100%{transform:perspective(800px) translateZ(calc((var(--motion-height,200px) / 2) * -1)) rotateX(0deg) translateZ(calc(var(--motion-height,200px) / 2)) rotate(var(--comp-rotate-z,0deg))}}
@keyframes motion-tiltInClip{0.0001%{clip-path:var(--motion-clip-start,polygon(0% 0%,100% 0%,100% 0%,0% 0%));transform:rotateZ(var(--motion-rotate-z))}
  100%{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);transform:rotateZ(0deg)}}
/* live: the desktop menu slides down on load; the phone hamburger slides + fades in. Once per visit: not when
   arriving from another page of the site (html.nav-seen, set in the page head) */
@media (min-width:761px){.js-motion:not(.nav-seen) .site-nav:not([data-motion-enter="done"]){
  animation:motion-slideIn 1200ms 1ms cubic-bezier(0.645,0.045,0.355,1) backwards 1 paused;
  --motion-clip-start:polygon(0% 0%,100% 0%,100% 0%,0% 0%);--motion-translate-x:0%;--motion-translate-y:-100%}}
@media (max-width:760px){.js-motion:not(.nav-seen) .nav-toggle:not([data-motion-enter="done"]){
  animation:motion-slideIn 1200ms 1ms cubic-bezier(0.645,0.045,0.355,1) backwards 1 paused,motion-fadeIn 1200ms 1ms cubic-bezier(0.645,0.045,0.355,1) backwards 1 paused;
  --motion-clip-start:polygon(0% 0%,100% 0%,100% 80%,0% 80%);--motion-translate-x:0%;--motion-translate-y:-100%}}

/* desktop header fade (Wix "HeaderFadeOut"): 0.2 s ease-in out, 0.2 s back; no clicks once faded */
@media (min-width:761px){
  .site-head.is-faded{opacity:0;transition:all .2s ease-in}
  .site-head.is-faded.is-gone{pointer-events:none}
  .site-head.is-back{opacity:1;transition:all .2s}
}
/* phone header hides to the top (Wix HeaderHideToTop): 0.2 s ease-in up, 0.2 s back */
@media (max-width:760px){
  .site-head.is-up{transform:translateY(-100%);transition:all .2s ease-in}
  .site-head.is-back{transition:all .2s}
}

/* phone back-to-top button (Wix BackToTopButton): 44px on the 320 canvas, 30 from the right, 110 from the bottom
   (Wix: bottom 55 inside a layer that adds a 55 margin);
   shows once you are more than 512px down, then fades out 3 s later */
.btt{display:none}
@media (max-width:760px){
  .btt{display:flex;position:fixed;right:9.375vw;bottom:34.375vw;width:13.75vw;height:13.75vw;cursor:pointer;
    opacity:0;visibility:hidden;transition:visibility 0s .5s,opacity .5s}
  .btt svg{overflow:visible}
  .btt.is-on{opacity:1;visibility:visible;z-index:100000;transition-delay:0s}
}

/* page locked while the phone menu is open (as live) */
.menu-open body{overflow:hidden}

/* keyboard "Skip to Main Content" (Wix's own): invisible until focused, then a white pill under the header */
.skip{position:absolute;z-index:9999;top:60px;left:50%;transform:translateX(-50%);box-sizing:border-box;height:40px;padding:0 24px;
  display:flex;align-items:center;border:2px solid #116dff;border-radius:24px;background:#fff;color:#116dff;
  font:14px Helvetica,Arial,sans-serif;text-decoration:none;white-space:nowrap}
.skip:not(:focus){opacity:0;height:0;padding:0;border:0;overflow:hidden;pointer-events:none}   /* live: opacity 0, 0 high */
main:focus{outline:0}