/* ===== Rozhyk Charcoal =====
   Every value below was measured off the live Wix site with devtools
   (viewport 2560px). Wix uses fixed px for type and containers, so these
   are the design values and hold at any desktop width.

   Colours   cream #fff6ef · orange #ff521a · ink #1d0e03 · active nav #014b3f
   Fonts     Poppins SemiBold (brand) · Questrial (body 21/29.4 justify)
             Avenir LT (nav, labels, hero) -> licensed by Wix, substituted
             with Nunito Sans, the closest free match
   Vertical  header 106 · hero 1151 · about 377 · band 640 · charcoal 904
             band 640 · packing 786 · contact 669 · footer 92
*/

:root{
  --cream:  #fff6ef;
  --orange: #ff521a;
  --ink:    #1d0e03;
  --green:  #014b3f;   /* the active nav item on Wix */
  --btn:    #323232;

  --avenir:    'Nunito Sans', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --poppins:   'Poppins', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --questrial: 'Questrial', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;

  --header-h: 106px;
  --hero-h:   1151px;
  --band-h:    640px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; scroll-padding-top:var(--header-h); -webkit-text-size-adjust:100% }
body{
  margin:0;
  font-family:var(--questrial);
  font-size:21px;
  line-height:1.4;            /* Wix: 29.4px on 21px */
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; height:auto }
a{ color:inherit; text-decoration:none }
p{ margin:0 0 1.05em }
p:last-child{ margin-bottom:0 }
h1,h2{ margin:0; font-weight:400 }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{ position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--orange); color:#fff; padding:10px 16px; font-size:15px }
.skip-link:focus{ left:12px; top:12px }

/* ---------------- Header ---------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  background:var(--cream);
}
.hwrap{
  height:100%; max-width:1240px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; gap:32px;
}
.brand{ display:flex; flex-direction:column }
.brand-name{
  font-family:var(--poppins); font-weight:600; font-size:28px;
  letter-spacing:.28px; line-height:1.35; color:var(--ink);
}
.brand-tag{
  font-family:var(--poppins); font-weight:600; font-size:19px;
  letter-spacing:.19px; line-height:1.4; color:var(--ink);
  padding-left:100px;              /* Wix indents the tagline to the right */
}

/* Wix sits the menu just right of the brand, not hard against the right
   edge — the auto margin after it pushes the language switch to the end. */
.nav{ display:flex; align-items:center; gap:30px; margin-left:56px; margin-right:auto }
.nav-link{
  font-family:var(--avenir); font-weight:800; font-size:13px;
  line-height:1.4; color:var(--ink); white-space:nowrap;
  transition:color .2s ease;
}
.nav-link:hover{ color:var(--orange) }
.nav-link.is-current{ color:var(--green) }

.header-tools{ display:flex; align-items:center; gap:16px }
.lang{ display:flex; align-items:center; gap:4px }
.lang-btn{
  background:none; border:0; cursor:pointer; padding:4px 2px;
  font-family:var(--avenir); font-weight:800; font-size:13px;
  color:rgba(29,14,3,.42); transition:color .2s ease;
}
.lang-btn:hover{ color:var(--ink) }
.lang-btn.is-active{ color:var(--green) }
.lang-sep{ color:rgba(29,14,3,.28); font-size:12px }

.burger{ display:none; width:40px; height:34px; background:none; border:0; cursor:pointer; padding:7px 5px }
.burger span{ display:block; height:2px; background:var(--ink); margin:6px 0;
  transition:transform .28s ease, opacity .2s ease }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg) }

/* ---------------- Hero ----------------
   Wix serves a deliberately small, blurred render as the backdrop and a
   larger one for the inset card. Reproduced here with a CSS blur, and the
   inset keeps the source aspect (862x518) so the photo is DOWNSCALED in it
   and stays crisp — sharper than the Wix original, which upscaled it 2.4x. */
.hero{
  display:grid; grid-template-columns:50% 50%;
  height:var(--hero-h);
}
.hero-photo{ position:relative; overflow:hidden; background:#3a3632 }
.hero-photo-base,
.hero-photo-inset{
  background-image:url('../images/hero.webp');
  background-repeat:no-repeat; background-size:cover; background-position:center;
}
/* Backdrop blur. Wix's own is far stronger — it stretches a 123x74 blurred
   thumbnail to 1280x1151 — but 4px was chosen deliberately: the photo stays
   readable. Raise this if the 2x stretch of the 640x384 source shows. */
.hero-photo-base{
  position:absolute; inset:0;
  filter:blur(4px) brightness(.94);
  transform:scale(1.03);             /* hides the soft edge the blur creates */
}
.hero-photo-inset{
  position:absolute; left:16.3%; top:18.6%; width:67.3%;
  aspect-ratio:862 / 518;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);
}

.hero-panel{
  background:var(--orange);
  display:grid; place-items:center; padding:60px 40px;
}
.hero-panel-inner{ width:482px; max-width:100%; text-align:center }
.hero-lede{
  font-family:var(--avenir); font-weight:400;
  font-size:34px; line-height:40.8px;
  color:var(--cream); margin:0 0 40px;
}
.btn{
  display:inline-block;
  font-family:var(--avenir); font-weight:800; font-size:13px; line-height:18px;
  color:var(--btn); border:1px solid var(--btn); border-radius:999px;
  padding:13px 37px;
  transition:background .2s ease, color .2s ease;
}
.btn:hover{ background:var(--btn); color:var(--cream) }

/* ---------------- Text sections ---------------- */
.text-section{ padding:36px 40px 44px }

.sec-label{
  font-family:var(--avenir); font-weight:300;
  font-size:14px; line-height:18.6px; letter-spacing:1.4px;
  text-align:center; color:var(--ink);
  width:280px; max-width:100%; margin:0 auto 36px;
  padding-bottom:12px; border-bottom:1px solid var(--ink);
}

.col{ margin:0 auto; text-align:justify; hyphens:auto }
.col-700{ max-width:700px }
.col-760{ max-width:760px }

.options{ margin:1.05em 0; padding-left:1.3em }
.options li{ margin:0 0 1.05em }
.options li:last-child{ margin-bottom:0 }
.options strong{ font-weight:400; color:var(--ink) }
.pallet-note{ margin-top:1.05em }

/* ---------------- Full-width image bands (Wix: 640px) ---------------- */
.band{
  height:var(--band-h);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;    /* the parallax feel of the Wix strips */
}
.band-about{    background-image:url('../images/about.jpg') }
.band-charcoal{ background-image:url('../images/charcoal.png') }

/* ---------------- Packing ---------------- */
.pack-row{
  display:grid; grid-template-columns:673px 1fr 453px;
  gap:56px; align-items:center;
  max-width:2280px; margin:0 auto;
}
.pack-img{ margin:0 }
.pack-img img{ width:100%; object-fit:cover }
.pack-img-left img{ aspect-ratio:673 / 430 }
.pack-img-right img{ aspect-ratio:453 / 669 }

/* ---------------- Contact ---------------- */
.contact{ padding:56px 40px 110px }
.contact-inner{ text-align:center }
.cline{
  display:block; font-family:var(--avenir); font-weight:300;
  font-size:26px; line-height:1.6; color:var(--ink);
  transition:color .2s ease;
}
.cline:hover{ color:var(--orange) }
.cline-sm{ font-size:21px; margin-top:6px }

/* ---------------- Footer (Wix: 92px, orange) ---------------- */
.site-footer{
  height:92px; background:var(--orange);
  display:grid; place-items:center;
  font-family:var(--questrial); font-size:13px; color:var(--cream);
}

/* ---------------- Back to top ---------------- */
.to-top{
  position:fixed; right:20px; bottom:20px; z-index:55;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--orange); color:#fff; font-size:18px;
  box-shadow:0 8px 22px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ transition:none !important; animation:none !important }
}

/* ================ Tablet ================ */
@media (max-width:1400px){
  .pack-row{ grid-template-columns:1fr; gap:40px; max-width:900px }
  .pack-img img{ max-width:673px; margin:0 auto }
  .pack-img-right img{ max-width:453px }
  .pack-text{ order:-1 }
}

@media (max-width:1080px){
  :root{ --hero-h:auto; --band-h:420px }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); padding:6px 40px 20px;
    box-shadow:0 14px 30px rgba(0,0,0,.08);
    transform:translateY(-10px); opacity:0; visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none }
  .nav-link{ padding:16px 0; font-size:15px; border-bottom:1px solid rgba(29,14,3,.1) }
  .nav-link:last-child{ border-bottom:0 }
  .burger{ display:block }

  .hero{ grid-template-columns:1fr; height:auto }
  .hero-photo{ height:56vh; min-height:340px }
  .hero-photo-base{ filter:blur(2px) brightness(.96) }
  .hero-panel{ padding:56px 32px }
  .band{ background-attachment:scroll }
}

/* ================ Phone ================ */
@media (max-width:640px){
  :root{ --header-h:72px; --band-h:280px }
  body{ font-size:17px; line-height:1.55 }

  .hwrap{ padding:0 20px; gap:12px }
  .brand-name{ font-size:17px }
  .brand-tag{ font-size:12.5px; padding-left:0 }
  .nav{ padding:6px 20px 18px }

  .hero-photo{ height:48vh; min-height:280px }
  .hero-photo-inset{ left:8%; width:84% }
  .hero-panel{ padding:40px 22px }
  .hero-lede{ font-size:20px; line-height:1.45; margin-bottom:30px }
  .hero-panel-inner{ width:100% }
  .btn{ padding:13px 30px }

  .text-section{ padding:30px 20px 36px }
  .sec-label{ width:auto; font-size:12.5px; letter-spacing:1.1px; margin-bottom:26px;
    display:inline-block; left:50%; position:relative; transform:translateX(-50%) }
  .col,.col-700,.col-760{ text-align:left; hyphens:none }
  .pack-row{ gap:28px }
  .cline{ font-size:20px }
  .cline-sm{ font-size:17px }
  .contact{ padding-bottom:52px }
  .site-footer{ height:72px }
  .to-top{ right:14px; bottom:14px; width:40px; height:40px }
}