/* ==========================================================================
   BOLDLEAF International - Main stylesheet
   --------------------------------------------------------------------------
   HOW TO USE THIS FILE
   Every block below has a heading comment. Use search (Ctrl+F) for the
   section number, e.g. "[10]" to jump to the team cards.

   TABLE OF CONTENTS
   [01] Colour palette & global variables   (change colours/fonts HERE)
   [02] Base reset & typography
   [03] Layout helpers (wrap, sections, eyebrow)
   [04] Buttons
   [05] Text selection, focus & form accent colours
   [06] Header & navigation (+ Products dropdown)
   [07] Custom dropdown component (language + form selects)
   [08] Hero slider (3 slides)
   [09] About section
   [10] Team cards (glass design)
   [11] Services sections
   [12] Product cards
   [13] "Why" / numbers block
   [14] Contact section & form
   [15] Footer
   [16] Product page hero & FAQ
   [17] WhatsApp floating button
   [18] Scroll reveal animations
   [19] Responsive (tablet & mobile)
   [20] Reduced motion (accessibility)
   ========================================================================== */


/* ==========================================================================
   [01] COLOUR PALETTE & GLOBAL VARIABLES
   Change a value here and it updates everywhere on the website.
   ========================================================================== */
:root {
  /* ---- Brand palette ---- */
  --color-primary: #584738;      /* Mahogany */
  --color-secondary: #B59E7D;    /* Tobacco  */
  --color-taupe: #AAA396;        /* Mountain */
  --color-stone: #CEC1A8;        /* Sand     */
  --color-ivory: #F1EADA;        /* Vanilla  */

  /* ---- Backgrounds & text ---- */
  --color-background: #F1EADA;
  --color-surface: #FAF6EE;
  --color-text: #2A2118;
  --color-muted: #4F4132;
  --color-border: #CEC1A8;
  --color-dark: #3B2F23;
  --color-deep: #2A2118;
  --color-accent-text: #6A4F33;

  /* ---- Dropdown hover colour (used by EVERY dropdown on the site) ---- */
  --color-hover: #F1EADA;

  /* ---- Text selection colours (when someone highlights text) ---- */
  --selection-bg: #B59E7D;
  --selection-text: #2A2118;

  /* ---- Hero overlay darkness (0 = no overlay, 1 = fully dark) ---- */
  --hero-overlay-rgb: 43, 34, 26; /* overlay colour #2b221a (as R, G, B) */
  --hero-overlay-left: 0.52;     /* darkness on the left, behind the text */
  --hero-overlay-right: 0.14;    /* darkness on the right side            */
  --hero-overlay-bottom: 0.30;   /* darkness along the bottom edge        */

  /* ---- Fonts ---- */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, Arial, sans-serif;
  --font-dropdown: 'Manrope', system-ui, Arial, sans-serif;  /* all dropdowns */

  /* ---- Animation curve ---- */
  --ease: cubic-bezier(.22, .8, .2, 1);
}


/* ==========================================================================
   [02] BASE RESET & TYPOGRAPHY
   ========================================================================== */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}

body {
  margin: 0;
  font: 400 1rem/1.7 var(--sans);
  color: var(--color-text);
  background: var(--color-background);
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--color-accent-text);
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.05;
  margin: 0 0 .5em;
}

h1 {
  font-size: clamp(2.6rem, 7vw, 6rem);
}

h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.8rem);
}

h3 {
  font-size: 1.7rem;
}


/* ==========================================================================
   [03] LAYOUT HELPERS
   ========================================================================== */

/* ---- Centered content container ---- */
.wrap {
  width: min(1180px, 100% - 2.5rem);
  margin-inline: auto;
}

/* ---- Default vertical spacing for every section ---- */
section {
  padding: clamp(4rem, 9vw, 8rem) 0;
}

/* ---- Small uppercase label above headings ---- */
.eyebrow {
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: 1rem;
  display: block;
}

/* ---- Two-column layout (image + text) ---- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

/* ---- Image frame (4:5 portrait by default) ---- */
.frame {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-stone);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Glass frame around the big section photos (About, Export, Quality Assurance) ----
   Same transparent glass as the team cards: rounded glass border, soft reflection,
   and a light sweep + lift on hover. Add class "gframe" next to "frame" to use it. */
.frame.gframe {
  position: relative;
  padding: .4rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    0 0 0 1px rgba(88, 71, 56, .10),
    0 18px 40px rgba(20, 14, 8, .25),
    inset 0 1px 1px rgba(255, 255, 255, .8),
    inset 0 -1px 1px rgba(255, 255, 255, .25);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}

@supports (backdrop-filter: blur(1px)) {
  .frame.gframe {
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-color: rgba(255, 255, 255, .3);
    border-top-color: rgba(255, 255, 255, .8);
    border-left-color: rgba(255, 255, 255, .6);
  }
}

/* the photo itself sits inside the glass with its own rounded corners */
.frame.gframe img {
  display: block;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
  transition: transform 1s var(--ease);
}

/* soft reflection in the top-left corner of the glass */
.frame.gframe::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 45% at 0% 0%, rgba(255, 255, 255, .2), transparent 55%);
}

/* light streak that sweeps across the glass on hover */
.frame.gframe::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 1.1s var(--ease);
}

.frame.gframe:hover {
  transform: translateY(-6px);
  box-shadow:
    0 0 0 1px rgba(88, 71, 56, .12),
    0 28px 55px rgba(20, 14, 8, .32),
    inset 0 1px 1px rgba(255, 255, 255, .9),
    inset 0 -1px 1px rgba(255, 255, 255, .3);
}

.frame.gframe:hover::before {
  transform: translateX(130%);
}

.frame.gframe:hover img {
  transform: scale(1.03);
}


/* ==========================================================================
   [04] BUTTONS
   ========================================================================== */

/* ---- Default button (dark mahogany) ---- */
.btn {
  display: inline-block;
  padding: .9rem 1.6rem;
  background: var(--color-primary);
  color: var(--color-ivory);
  text-decoration: none;
  border: 1px solid var(--color-primary);
  font: 600 .85rem var(--sans);
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .4s var(--ease), transform .4s var(--ease);
}

.btn:hover {
  background: var(--color-deep);
}

/* ---- Outlined "ghost" button ---- */
.btn.ghost {
  background: transparent;
  border-color: var(--color-ivory);
  color: var(--color-ivory);
}

.btn.ghost:hover {
  background: rgba(241, 234, 218, .15);
}

/* ---- Light button used on dark backgrounds (hero, product hero, contact) ---- */
.hero .btn:not(.ghost),
.phero .btn {
  background: var(--color-ivory);
  border-color: var(--color-ivory);
  color: var(--color-deep);
}

.hero .btn:not(.ghost):hover {
  background: var(--color-stone);
}


/* ==========================================================================
   [05] TEXT SELECTION, FOCUS & FORM ACCENT COLOURS
   Replaces the default browser blue with the website palette.
   ========================================================================== */

/* ---- Highlighted (selected) text ---- */
::selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

::-moz-selection {
  background: var(--selection-bg);
  color: var(--selection-text);
}

/* ---- Keyboard focus ring for links/buttons ---- */
:focus-visible {
  outline: 2px solid var(--color-taupe);
  outline-offset: 3px;
}

/* ---- Checkboxes use the palette instead of blue ---- */
input,
select,
textarea {
  accent-color: var(--color-secondary);
  caret-color: var(--color-deep);
}

/* ---- No blue flash when tapping on phones ---- */
a,
button {
  -webkit-tap-highlight-color: rgba(181, 158, 125, .25);
}


/* ==========================================================================
   [06] HEADER & NAVIGATION
   ========================================================================== */

/* ---- Fixed top bar ---- */
header.site {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: .9rem 0;
  transition: background .4s;
  color: var(--color-ivory);
  /* soft shade so the menu stays readable over the lighter hero images */
  background: linear-gradient(180deg, rgba(42, 33, 24, .45), rgba(42, 33, 24, 0));
}

/* ---- Bar becomes solid after scrolling (class added by main.js) ---- */
header.site.solid {
  background: rgba(42, 33, 24, .95);
}

@supports (backdrop-filter: blur(1px)) {
  header.site.solid {
    backdrop-filter: blur(16px) saturate(1.2);
  }
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ---- Logo ---- */
.mark {
  font: 500 1.5rem var(--serif);
  letter-spacing: .14em;
  color: var(--color-ivory);
  text-decoration: none;
}

.mark small {
  font: 500 .6rem var(--sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-left: .5rem;
  color: var(--color-stone);
}

/* ---- Menu list ---- */
nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  align-items: center;
}

nav a {
  color: var(--color-ivory);
  text-decoration: none;
  font-size: .82rem;
  letter-spacing: .06em;
}

nav a:hover {
  color: var(--color-stone);
}

/* ---- "Products" dropdown (appears on hover) ---- */
.dd {
  position: relative;
}

.dd ul {
  position: absolute;
  top: 100%;
  left: -1rem;
  min-width: 220px;
  flex-direction: column;
  align-items: stretch;
  gap: .1rem;
  background: var(--color-deep);
  padding: .4rem;
  border: 1px solid rgba(181, 158, 125, .3);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: .3s var(--ease);
}

.dd:hover ul,
.dd:focus-within ul {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ---- Small downward arrow next to Services and Products (turns upward while the menu is open) ---- */
.dd > a::after {
  content: "";
  display: inline-block;
  width: .36em;
  height: .36em;
  margin-left: .55em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: .85;
  transform: translateY(-.2em) rotate(45deg);
  transition: transform .3s var(--ease);
}

.dd:hover > a::after,
.dd:focus-within > a::after {
  transform: translateY(.02em) rotate(225deg);
}

/* desktop: dropdown is as wide as its longest item, so "Tobacco Quality Assurance & Inspection" stays on one line */
@media (min-width: 901px) {
  .dd ul {
    width: max-content;
  }

  nav .dd ul a {
    white-space: nowrap;
  }
}

/* ---- Items inside the Products dropdown ---- */
nav .dd ul a {
  display: block;
  padding: .6rem .85rem;
  border-radius: 8px;
  font-family: var(--font-dropdown);
  color: var(--color-stone);
  transition: background .25s, color .25s;
}

/* HOVER COLOUR of the Products dropdown (uses --color-hover from [01]) */
nav .dd ul a:hover,
nav .dd ul a:focus-visible {
  background: var(--color-hover);
  color: var(--color-deep);
  outline: none;
}

/* ---- Mobile language icon (hidden on desktop, shown in [19]) ---- */
.lang-m {
  display: none;
}

/* ---- Mobile menu button (hidden on desktop) ---- */
.burger {
  display: none;
  background: none;
  border: 1px solid rgba(241, 234, 218, .5);
  color: var(--color-ivory);
  padding: .45rem .7rem;
  font: inherit;
  cursor: pointer;
}


/* ==========================================================================
   [07] CUSTOM DROPDOWN COMPONENT
   main.js turns every <select> (language + contact form) into this design.
   Structure:  .cs > .cs-btn (the closed box) + .cs-list (the open list)
   ========================================================================== */

/* ---- Original browser <select> is kept hidden (still sends the form data) ---- */
.cs-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.cs {
  position: relative;
  font-family: var(--font-dropdown);
}

/* ---- Closed box (the button you click) ---- */
.cs-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  width: 100%;
  margin: 0;
  background: transparent;
  color: var(--color-ivory);
  border: 1px solid rgba(241, 234, 218, .35);
  font-family: var(--font-dropdown);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background .25s, border-color .25s;
}

.cs-btn:hover {
  background: rgba(241, 234, 218, .1);
}

/* no outline/border change while focused or open */
.cs-btn:focus,
.cs-btn:focus-visible {
  outline: none;
}

.cs-btn:focus-visible,
.cs.open .cs-btn {
  background: rgba(241, 234, 218, .14);
}

/* ---- Small arrow on the right ---- */
.cs-arrow {
  flex: none;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform .3s var(--ease);
  opacity: .8;
}

.cs.open .cs-arrow {
  transform: translateY(25%) rotate(-135deg);
}

/* ---- Globe icon in the language dropdown ---- */
.cs-globe {
  flex: none;
  width: 1rem;
  height: 1rem;
  opacity: .85;
}

.cs-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Variant 1: LANGUAGE dropdown (header + footer) ---- */
.cs-lang {
  display: inline-block;
  width: auto;
}

.cs-lang .cs-btn {
  padding: .45rem .85rem;
  border-radius: 999px;
}

/* ---- Variant 2: FORM dropdowns (inquiry type, product interest) ---- */
.cs-field {
  display: block;
}

.cs-field .cs-btn {
  padding: .75rem;
  color: var(--color-deep);
  border-color: rgba(88, 71, 56, .45);
  background: rgba(255, 255, 255, .22);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  border-radius: 0;
}

.cs-field .cs-btn:hover,
.cs-field .cs-btn:focus-visible,
.cs-field.open .cs-btn {
  background: rgba(255, 255, 255, .34);
}

/* ---- Open list ---- */
.cs-list {
  display: block;          /* keeps the list vertical inside the nav (nav ul is flex) */
  position: absolute;
  z-index: 80;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: min(320px, 60vh);
  overflow: auto;
  margin: 0;
  padding: .35rem;
  list-style: none;
  background: var(--color-deep);
  border: 1px solid rgba(181, 158, 125, .35);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .25s, transform .25s var(--ease), visibility .25s;
}

.cs.open .cs-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* list opens upward when there is no room below (class added by main.js) */
.cs.up .cs-list {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(6px);
}

.cs.up.open .cs-list {
  transform: none;
}

/* language list is right-aligned and slightly wider */
.cs-lang .cs-list {
  left: auto;
  right: 0;
  min-width: 190px;
}

/* ---- One option inside the list ---- */
.cs-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem .8rem;
  border-radius: 8px;
  color: var(--color-stone);
  font-size: .88rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s, color .2s;
}

/* currently chosen option: small dot on the right */
.cs-opt[aria-selected="true"] {
  color: var(--color-ivory);
  font-weight: 700;
}

.cs-opt[aria-selected="true"]::after {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--color-secondary);
}

/* HOVER COLOUR of every custom dropdown (uses --color-hover from [01]) */
.cs-opt:hover,
.cs-opt.active {
  background: var(--color-hover);
  color: var(--color-deep);
}

/* ---- Fallback: plain <select> if JavaScript is disabled ---- */
select.lang {
  background: var(--color-deep);
  color: var(--color-ivory);
  border: 1px solid rgba(241, 234, 218, .4);
  padding: .35rem .5rem;
  font-family: var(--font-dropdown);
  font-size: .78rem;
  width: auto;
}


/* ==========================================================================
   [08] HERO SLIDER (3 slides)
   ========================================================================== */

/* ---- Full-screen hero container ---- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  background: var(--color-primary);
  color: var(--color-ivory);
  overflow: hidden;
  padding: 0;
}

/* ---- One slide (only the one with class .on is visible) ---- */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s var(--ease), visibility 1s;
}

.slide.on {
  opacity: 1;
  visibility: visible;
}

/* ---- Background image of each slide ---- */
.slide picture {
  position: absolute;
  inset: 0;
  display: block;
}

/* the picture always fills the whole hero; the right file (mobile / iPad / desktop)
   is chosen by the <picture> tag in index.html */
.slide .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: blur(14px);
  transform: scale(1.04);
  transition: filter 1.2s var(--ease), transform 1.4s var(--ease);
}

.slide.on .bg {
  filter: none;
  transform: scale(1);
}

/* ---- Dark overlay on top of the image (LIGHT version) ----
   Make it lighter/darker with the three --hero-overlay-* values in [01]. */
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(var(--hero-overlay-rgb), var(--hero-overlay-left)),
      rgba(var(--hero-overlay-rgb), var(--hero-overlay-right)) 70%),
    linear-gradient(0deg,
      rgba(var(--hero-overlay-rgb), var(--hero-overlay-bottom)),
      transparent 50%);
}

/* ---- Slide text block ---- */
.slide .wrap {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* keeps the text below the fixed header and above the slider controls,
     even when a language has longer headlines */
  padding-top: 6.5rem;
  padding-bottom: 7rem;
  /* subtle shadow keeps the text readable on a lighter overlay */
  text-shadow: 0 2px 22px rgba(42, 33, 24, .55);
}

/* centres the text block vertically when there is room, starts at the top when there is not */
.slide .wrap > :first-child {
  margin-top: auto;
}

.slide .wrap > :last-child {
  margin-bottom: auto;
}

.slide .btn {
  text-shadow: none;
}

.slide h1 {
  max-width: 13ch;
  overflow: hidden;
  /* headline size follows the screen HEIGHT too, so it always fits (any language) */
  font-size: clamp(2.6rem, min(7vw, 8.5vh), 6rem);
  font-size: clamp(2.6rem, min(7vw, 8.5svh), 6rem);
  /* room for letters that hang below the line (g, p, y) so they are never cut */
  padding-bottom: .12em;
  margin-bottom: .38em;
}

/* nothing inside the slide may be squeezed: this is what cut the headline off */
.slide .wrap > * {
  flex-shrink: 0;
}

@media (max-height: 700px) and (min-width: 601px) {
  .slide .wrap {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
}

.slide h1 span {
  display: block;
  transform: translateY(105%);
  transition: transform 1.1s var(--ease) .25s;
}

.slide.on h1 span {
  transform: none;
}

.slide .eyebrow,
.slide p,
.slide .cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.slide.on .eyebrow {
  opacity: 1;
  transform: none;
  transition-delay: .1s;
}

.slide.on p {
  opacity: 1;
  transform: none;
  transition-delay: .7s;
}

.slide.on .cta {
  opacity: 1;
  transform: none;
  transition-delay: .95s;
}

.slide p {
  max-width: 46ch;
  color: var(--color-ivory);
  font-size: 1.05rem;
}

.slide .eyebrow {
  color: var(--color-ivory);
}

.cta {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

/* ---- Slider controls (prev / progress bars / next) ----
   Sits left of the WhatsApp button on desktop (see [17]). */
.ctrl {
  position: absolute;
  z-index: 5;
  bottom: 2rem;
  right: max(6.5rem, calc((100% - 1180px) / 2));
  display: flex;
  gap: .6rem;
  align-items: center;
  padding: .5rem .8rem;
  background: rgba(59, 47, 35, .7);
  border: 1px solid rgba(241, 234, 218, .25);
}

@supports (backdrop-filter: blur(1px)) {
  .ctrl {
    background: rgba(88, 71, 56, .28);
    backdrop-filter: blur(14px) saturate(1.3);
    box-shadow: inset 0 1px 0 rgba(241, 234, 218, .18), 0 10px 30px rgba(0, 0, 0, .25);
    border-radius: 14px;
  }
}

.ctrl button {
  background: none;
  border: 0;
  color: var(--color-ivory);
  cursor: pointer;
  font-size: 1.2rem;
  padding: .3rem .6rem;
}

/* ---- Progress bars ---- */
.dots {
  display: flex;
  gap: .4rem;
}

.dots i {
  width: 34px;
  height: 2px;
  background: rgba(241, 234, 218, .35);
  position: relative;
  overflow: hidden;
}

.dots i.on::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-ivory);
  transform-origin: left;
  animation: fill var(--ms, 8s) linear forwards;
}

@keyframes fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: none;
  }
}

.paused .dots i.on::after {
  animation-play-state: paused;
}


/* ==========================================================================
   [09] ABOUT SECTION
   ========================================================================== */

/* the team stage touches the bottom edge of the About section */
#about {
  padding-bottom: 0;
}


/* ==========================================================================
   [10] TEAM CARDS - REAL GLASS DESIGN
   A coloured "stage" sits behind the cards so the frosted glass has
   something to blur - that is what makes it look like real glass.
   ========================================================================== */

/* ---- Coloured stage behind the glass cards ---- */
.team-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  background: var(--color-primary);
}

/* leaf artwork + soft colour glows behind the glass */
.team-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgba(241, 234, 218, .55), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(181, 158, 125, .75), transparent 42%),
    radial-gradient(circle at 55% 50%, rgba(206, 193, 168, .35), transparent 45%),
    url(../images/leather-skin.webp) center / cover no-repeat;
}

/* ---- Grid holding the 4 cards ---- */
.team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

/* ---- One glass card (shared with the product cards in [12]) ---- */
.tc,
.card {
  position: relative;
  overflow: hidden;
  padding: .85rem;
  border-radius: 24px;
  /* fallback for browsers without blur support: clear glass */
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .45);
}

.tc {
  color: var(--color-deep);
}

@supports (backdrop-filter: blur(1px)) {

  .tc,
  .card {
    /* fully transparent glass: almost no tint, nothing added to the colours behind it */
    background: rgba(255, 255, 255, .03);
    /* only a light blur so the texture behind stays visible through the glass */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    /* bright top/left edges, softer bottom/right = light hitting the glass edge */
    border-color: rgba(255, 255, 255, .22);
    border-top-color: rgba(255, 255, 255, .7);
    border-left-color: rgba(255, 255, 255, .5);
    box-shadow:
      0 18px 40px rgba(20, 14, 8, .25),
      inset 0 1px 1px rgba(255, 255, 255, .7),
      inset 0 -1px 1px rgba(255, 255, 255, .15);
  }
}

/* soft reflection in the top-left corner of the glass */
.tc::after,
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 50% at 0% 0%, rgba(255, 255, 255, .16), transparent 55%);
}

/* light streak that sweeps across the glass on hover */
.tc::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 1.1s var(--ease);
}

.tc:hover::before,
.card:hover::before {
  transform: translateX(130%);
}

/* lift effect on hover (also works with the scroll-reveal class) */
.tc,
.card,
.js .team .tc.rv,
.js .cards .card.rv {
  transition: opacity .9s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}

.js .team .tc.rv.in:hover,
.js .cards .card.rv.in:hover,
.tc:hover,
.card:hover {
  transform: translateY(-6px);
}

/* ---- Photo area inside the card ---- */
.tf {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

/* initials shown until a real photo is uploaded */
.ti {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 300 4rem var(--serif);
  color: rgba(255, 255, 255, .85);
}

.tf picture,
.tf img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tf img {
  transition: transform 1s var(--ease);
}

.tc:hover .tf img {
  transform: scale(1.04);
}

/* ---- Name + role under the photo ---- */
.tb {
  position: relative;
  z-index: 2;
  padding: 1rem .5rem .5rem;
}

.tb b,
.tb span {
  text-shadow: 0 1px 8px rgba(255, 255, 255, .35);
}

.tb b {
  display: block;
  font: 500 1.4rem var(--serif);
  color: var(--color-deep);
}

.tb span {
  display: block;
  margin-top: .25rem;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--color-deep);
  opacity: .85;
}


/* ==========================================================================
   [11] SERVICES SECTIONS
   ========================================================================== */
.svc {
  background: var(--color-primary);
  color: var(--color-ivory);
}

.svc ul {
  padding-left: 1.1rem;
}

/* light version (second service block) */
.svc.light {
  background: var(--color-stone);
  color: var(--color-deep);
}

.svc a.btn.ghost {
  color: inherit;
  border-color: currentColor;
}

.svc:not(.light) .eyebrow {
  color: var(--color-stone);
}

/* sub-heading under a service title (Quality Assurance block) */
.svc h3.sub {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  font-style: italic;
  font-weight: 500;
  margin: 0 0 1rem;
}

/* note about inspection reports */
.svc .note {
  font-size: .88rem;
  line-height: 1.65;
  margin: 1.4rem 0;
  padding: .9rem 1.1rem;
  border-left: 2px solid var(--color-secondary);
  background: rgba(88, 71, 56, .08);
}

.svc .note strong {
  letter-spacing: .04em;
}

/* closing statement */
.svc blockquote {
  margin: 1.6rem 0 1.8rem;
  padding: 1.2rem 0 0;
  border-top: 1px solid rgba(88, 71, 56, .35);
  font: italic 400 clamp(1.25rem, 2vw, 1.5rem) / 1.4 var(--serif);
}


/* ==========================================================================
   [12] PRODUCT CARDS
   ========================================================================== */
/* ---- Section background: brown leather picture (the glass cards sit on top) ---- */
#products {
  color: var(--color-ivory);
  background:
    linear-gradient(rgba(42, 33, 24, .2), rgba(42, 33, 24, .2)),
    url("../images/leather-brown.webp") center / cover no-repeat;
}

#products .eyebrow {
  color: var(--color-stone);
}

#products h2,
#products .wrap > p {
  text-shadow: 0 2px 18px rgba(42, 33, 24, .45);
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
  align-items: stretch;
}

/* glass look comes from the shared rules in [10]; this block is the card layout */
.card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color-ivory);
}

/* 4:5 picture inside the glass */
.card .frame {
  border-radius: 16px;
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

.card img {
  transition: transform 1.2s var(--ease);
}

.card:hover img,
.card:focus-visible img {
  transform: scale(1.06);
}

/* text block: label, title, description, link (link always sits at the bottom) */
.card em,
.card h3,
.card p,
.card .go {
  position: relative;
  z-index: 2;
  margin-left: .55rem;
  margin-right: .55rem;
  text-shadow: 0 1px 12px rgba(42, 33, 24, .4);
}

.card em {
  display: block;
  margin-top: 1.25rem;
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--color-stone);
}

.card h3 {
  margin-top: .35rem;
  margin-bottom: .7rem;
  font-size: 1.85rem;
  color: var(--color-ivory);
}

.card p {
  flex: 1;
  margin-top: 0;
  margin-bottom: 1.4rem;
  font-size: .94rem;
  line-height: 1.65;
  color: var(--color-ivory);
  opacity: .95;
}

/* "Discover Product" link styled as a small outlined button */
.card .go {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .6rem;
  padding: .55rem 1.1rem;
  border: 1px solid rgba(241, 234, 218, .6);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: var(--color-ivory);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
  text-decoration: none;
  text-shadow: none;
  transition: background .3s var(--ease), color .3s var(--ease);
}

.card .go::after {
  content: "\2192";
  transition: transform .3s var(--ease);
}

.card:hover .go,
.card:focus-visible .go {
  background: var(--color-ivory);
  color: var(--color-deep);
}

.card:hover .go::after {
  transform: translateX(4px);
}


/* ==========================================================================
   [13] "WHY" / NUMBERS BLOCK
   ========================================================================== */
.why {
  background: var(--color-surface);
}

.pr {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 3rem;
}

.pr div {
  border-top: 1px solid var(--color-taupe);
  padding-top: 1rem;
}

.pr b {
  font: 300 2.4rem var(--serif);
  color: var(--color-accent-text);
}


/* ==========================================================================
   [14] CONTACT SECTION & FORM
   ========================================================================== */
/* background: leather picture in the colour #f5d2a5 (assets/images/leather-f5d2a5.jpg) */
.contact {
  background: #f5d2a5 url("../images/leather-f5d2a5.jpg") center / cover no-repeat;
  color: var(--color-deep);
}

.contact .eyebrow {
  color: var(--color-accent-text);
}

.contact .btn {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-ivory);
}

.contact .btn:hover {
  background: var(--color-deep);
}

/* ---- Contact details (phone + email) under the intro text in the contact section ---- */
.cinfo {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: .9rem;
  max-width: 30rem;
}

.cinfo a {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .95rem 1.1rem;
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(88, 71, 56, .28);
  border-radius: 16px;
  color: var(--color-deep);
  text-decoration: none;
  transition: background .25s, border-color .25s, transform .25s var(--ease);
}

.cinfo a:hover,
.cinfo a:focus-visible {
  background: rgba(255, 255, 255, .75);
  border-color: var(--color-primary);
  transform: translateY(-2px);
}

.cinfo-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-ivory);
}

.cinfo-text {
  min-width: 0;
  display: grid;
  gap: .15rem;
}

.cinfo-text small {
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  font-weight: 600;
}

.cinfo-text strong {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-deep);
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .cinfo-icon {
    width: 40px;
    height: 40px;
  }

  .cinfo-text strong {
    font-size: 1rem;
  }
}


/* ---- Glass panel around the form: fully transparent glass (same as the cards) ---- */
.glass {
  position: relative;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .45);
}

@supports (backdrop-filter: blur(1px)) {
  .glass {
    background: rgba(255, 255, 255, .03);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 24px;
    border-color: rgba(255, 255, 255, .22);
    border-top-color: rgba(255, 255, 255, .7);
    border-left-color: rgba(255, 255, 255, .5);
    box-shadow:
      0 18px 40px rgba(20, 14, 8, .25),
      inset 0 1px 1px rgba(255, 255, 255, .7),
      inset 0 -1px 1px rgba(255, 255, 255, .15);
  }
}

/* soft reflection in the top-left corner of the glass */
.glass::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 40% at 0% 0%, rgba(255, 255, 255, .16), transparent 55%);
}

/* ---- Form grid (2 columns, .full = full width) ---- */
form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

form .full {
  grid-column: 1 / -1;
}

label {
  display: block;
  font-size: .8rem;
  margin-bottom: .3rem;
}

/* ---- Text fields ---- */
input,
select,
textarea {
  width: 100%;
  padding: .75rem;
  background: rgba(255, 255, 255, .22);
  color: var(--color-deep);
  border: 1px solid rgba(88, 71, 56, .45);
  font: inherit;
}

/* WHEN CLICKED: no white border / outline. The border stays exactly the
   same; only a very soft background change shows the field is active. */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
  outline: none;
  border-color: rgba(88, 71, 56, .45);
  background: rgba(255, 255, 255, .34);
  box-shadow: none;
}

/* checkbox keeps a small palette-coloured focus ring for keyboard users */
.chk input:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
  background: transparent;
}

/* browser auto-fill would turn fields yellow/blue: keep palette colours */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--color-deep);
  caret-color: var(--color-deep);
  -webkit-box-shadow: 0 0 0 1000px #f6dcb8 inset;
  transition: background-color 9999s ease-out 0s;
}

/* ---- Validation error colour ---- */
input.bad,
textarea.bad,
select.bad,
.cs-field.bad .cs-btn {
  border-color: #b3402a;
}

/* ---- Hidden anti-spam field (do not remove) ---- */
.hp {
  position: absolute;
  left: -9999px;
}

/* ---- Status message under the button ---- */
#st {
  min-height: 1.5rem;
  font-size: .9rem;
}

/* ---- Consent checkbox row ---- */
.chk {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
}

.chk input {
  width: auto;
  margin-top: .3rem;
}

.chk a {
  color: var(--color-primary);
}


/* ==========================================================================
   [15] FOOTER
   ========================================================================== */
/* Footer layout: 4 columns on desktop (brand | Explore | Products | Get in touch),
   2 on tablet, 1 on phones (the grid rules for those sizes are in section [19]). */
footer {
  background: var(--color-deep);
  color: var(--color-stone);
  padding: 4.5rem 0 2rem;
  border-top: 1px solid rgba(181, 158, 125, .3);
  font-size: .92rem;
}

footer .g {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2.5rem 3rem;
  align-items: start;
}

/* every column starts at the same top line */
footer .fcol > :first-child {
  margin-top: 0;
}

footer a {
  color: var(--color-stone);
  display: block;
  text-decoration: none;
  margin: .55rem 0;
  transition: color .25s;
}

footer a:hover {
  color: var(--color-ivory);
}

footer a.mark {
  color: var(--color-ivory);
  display: inline;
  margin: 0;
}

/* the two services listed under "Services": pushed to the right so they read as its children */
footer a.fsub {
  margin: .4rem 0 .4rem 1.1rem;
  font-size: .94em;
  line-height: 1.45;
}

/* brand column: tagline wraps at a comfortable width */
footer .fbrand p {
  margin: 1rem 0 0;
  max-width: 21rem;
  line-height: 1.65;
}

/* ---- Column headings (Explore / Products / Get in touch) ---- */
footer .fh {
  margin: 0 0 1.15rem;
  padding-bottom: .8rem;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-ivory);
  border-bottom: 1px solid rgba(181, 158, 125, .3);
}

/* ---- Get in touch: phone + email stacked vertically with icons ---- */
footer .fcontact ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

footer .fcontact a {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0;
  overflow-wrap: anywhere;
}

footer .fc-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(181, 158, 125, .45);
  color: var(--color-secondary);
  transition: background .25s, color .25s, border-color .25s;
}

footer .fcontact a:hover .fc-icon {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-deep);
}

/* ---- Bottom bar: copyright left, language dropdown right ---- */
footer .fbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(181, 158, 125, .3);
}

footer .fbar .n {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 52rem;
  font-size: .8rem;
  line-height: 1.7;
}

footer .flang {
  flex: 0 0 auto;
}

footer .flang .cs-lang {
  margin: 0;
}

/* the language list opens UPWARD (a hidden list below the button made the page
   scroll past the footer) and lines up with the right edge of the button */
footer .cs .cs-list {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(6px);
}

footer .flang .cs-lang .cs-list {
  left: auto;
  right: 0;
}

footer .cs.open .cs-list {
  transform: none;
}

/* ---- "Made with love by ..." credit, centred at the very bottom ---- */
footer .credit {
  margin: 1.75rem 0 0;
  text-align: center;
  font-size: .8rem;
  color: var(--color-stone);
}

footer .credit .heart {
  display: inline-block;
  vertical-align: -2px;
  margin: 0 .2rem;
  color: #e0475b;
}

footer .credit a {
  display: inline;
  margin: 0;
  color: var(--color-ivory);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* tablet: brand on its own full-width row, the three link columns evenly below it */
@media (max-width: 900px) {
  footer .fbrand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  footer .wrap > .g {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.25rem 2rem;
  }
}

/* phone: single column, bottom bar stacks */
@media (max-width: 600px) {
  footer {
    padding-top: 3rem;
  }

  footer .g {
    gap: 2rem;
  }

  footer .fbar {
    flex-direction: column;
    gap: 1.25rem;
  }

  /* the language button sits on the LEFT on phones, so its list must open to the right of that edge
     (it used to be anchored to the right edge and half of it went off the screen) */
  footer .flang .cs-lang .cs-list {
    left: 0;
    right: auto;
    max-width: calc(100vw - 2rem);
  }
}


/* ==========================================================================
   [16] PRODUCT PAGE HERO & FAQ
   ========================================================================== */

/* ---- Hero banner of a product page ---- */
.phero {
  position: relative;
  min-height: 70svh;
  display: flex;
  align-items: flex-end;
  color: var(--color-ivory);
  background: var(--color-primary);
  padding: 8rem 0 4rem;
  overflow: hidden;
}

.phero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* overlay of the product hero */
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(42, 33, 24, .8), rgba(42, 33, 24, .2));
}

.phero .wrap {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 22px rgba(42, 33, 24, .55);
}

.phero p {
  max-width: 52ch;
}

.phero .eyebrow {
  color: var(--color-stone);
}

/* breadcrumb (Home / Products / ...) */
.crumb {
  font-size: .78rem;
  margin-bottom: 1rem;
}

.crumb a {
  color: var(--color-stone);
}

/* ---- FAQ accordions ---- */
details {
  border-top: 1px solid var(--color-border);
  padding: 1rem 0;
}

details:last-of-type {
  border-bottom: 1px solid var(--color-border);
}

summary {
  cursor: pointer;
  font: 500 1.35rem var(--serif);
}

/* two-column checklist */
.chk2 {
  columns: 2;
  padding-left: 1.1rem;
}


/* ==========================================================================
   [17] WHATSAPP FLOATING BUTTON
   Fixed at the bottom-right corner of every page.
   The phone number is NOT here - set it in assets/js/main.js (WHATSAPP_NUMBER).
   Animation: two soft pulse rings, then about 6 seconds of calm, repeating.
   It never moves the page and never blocks text.
   ========================================================================== */

/* ---- Link wrapper (fixed position) ---- */
.wa {
  position: fixed;
  right: max(1.25rem, env(safe-area-inset-right));
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  /* fades in 2.5 seconds after the page loads, so it never startles */
  opacity: 0;
  animation: wa-in .8s var(--ease) 2.5s forwards;
}

/* ---- Round green button ---- */
.wa-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(42, 33, 24, .35);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  animation: wa-nudge 9s ease-in-out 4s infinite;
}

.wa-icon svg {
  width: 32px;
  height: 32px;
}

/* ---- Pulse ring behind the button ---- */
.wa-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  opacity: 0;
  animation: wa-ring 9s ease-out 4s infinite;
}

/* ---- Text bubble that slides out on hover (uses palette colours) ---- */
.wa-label {
  order: -1;
  padding: .55rem .9rem;
  border-radius: 999px;
  background: var(--color-ivory);
  color: var(--color-deep);
  font: 600 .8rem var(--sans);
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(42, 33, 24, .25);
  opacity: 0;
  transform: translateX(10px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

.wa:hover .wa-label,
.wa:focus-visible .wa-label {
  opacity: 1;
  transform: none;
}

.wa:hover .wa-icon,
.wa:focus-visible .wa-icon {
  transform: scale(1.07);
  box-shadow: 0 12px 28px rgba(42, 33, 24, .45);
  animation-play-state: paused;
}

.wa:hover .wa-icon::before {
  animation-play-state: paused;
}

.wa:focus-visible {
  outline: none;
}

.wa:focus-visible .wa-icon {
  outline: 2px solid var(--color-ivory);
  outline-offset: 3px;
}

@keyframes wa-in {
  to {
    opacity: 1;
  }
}

/* two gentle pulses (0-30%), then rest (30-100%) */
@keyframes wa-ring {
  0% {
    transform: scale(1);
    opacity: .5;
  }

  14% {
    transform: scale(1.65);
    opacity: 0;
  }

  16% {
    transform: scale(1);
    opacity: .5;
  }

  30%,
  100% {
    transform: scale(1.65);
    opacity: 0;
  }
}

/* tiny size "breath" of the button in sync with the pulses */
@keyframes wa-nudge {

  0%,
  16%,
  32%,
  100% {
    transform: scale(1);
  }

  8%,
  24% {
    transform: scale(1.06);
  }
}

/* never print the button */
@media print {
  .wa {
    display: none;
  }
}


/* ==========================================================================
   [18] SCROLL REVEAL ANIMATIONS
   Elements with class "rv" / "clip" fade in when scrolled into view.
   (Only active when JavaScript is running - class "js" is on <html>.)
   ========================================================================== */
.js .rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.js .rv.in {
  opacity: 1;
  transform: none;
}

.js .clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.2s var(--ease);
}

.js .clip.in {
  clip-path: inset(0);
}

/* glass frames: reveal the same way, but never clip the glass shadow or hover lift */
.js .frame.gframe.clip {
  transition: clip-path 1.2s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}

.js .frame.gframe.clip.in {
  clip-path: inset(-80px round 18px);
}


/* ==========================================================================
   [19] RESPONSIVE
   ========================================================================== */

/* ---- Tablet and below (900px) ---- */
@media (max-width: 900px) {

  /* hamburger button appears */
  .burger {
    display: block;
    position: relative;
    z-index: 60;
  }

  /* language icon (globe) sits in the header bar, left of the hamburger.
     Tap it and the full language list opens. */
  .lang-m {
    display: block;
    margin-left: auto;
    position: relative;
    z-index: 60;
  }

  /* the language dropdown inside the slide-down menu is replaced by the icon */
  .lang-d {
    display: none;
  }

  .lang-m .cs-lang .cs-btn {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }

  .lang-m .cs-label,
  .lang-m .cs-arrow {
    display: none;
  }

  .lang-m .cs-globe {
    width: 1.2rem;
    height: 1.2rem;
    opacity: 1;
  }

  /* menu becomes a full-width panel sliding from the top */
  nav {
    position: fixed;
    inset: 0 0 auto;
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    background: var(--color-deep);
    padding: 5rem 1.5rem 2rem;
    transform: translateY(-100%);
    transition: transform .5s var(--ease);
    visibility: hidden;
  }

  nav.open {
    transform: none;
    visibility: visible;
  }

  nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  /* Products submenu is always expanded on mobile */
  .dd ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: 0;
    box-shadow: none;
    padding: .4rem 0 0 1rem;
    background: transparent;
  }

  /* grids */
  .cards,
  .pr,
  footer .g,
  .team {
    grid-template-columns: 1fr 1fr;
  }

  .split {
    grid-template-columns: 1fr !important;
  }

  .card:nth-child(2) {
    margin-top: 0;
  }
}

/* ---- Small phones (480px): header logo stacks so the language icon + menu button always fit ---- */
@media (max-width: 480px) {
  header.site .mark {
    line-height: 1.1;
  }

  header.site .mark small {
    display: block;
    margin: .25rem 0 0;
  }
}

/* ---- Phone (600px) ---- */
@media (max-width: 600px) {

  .cards,
  .pr,
  .team,
  footer .g,
  form {
    grid-template-columns: 1fr;
  }

  .chk2 {
    columns: 1;
  }

  /* more room under the hero text for the slider controls on phones */
  .slide .wrap {
    padding-bottom: 9.5rem;
  }

  /* slider controls move above the WhatsApp button */
  .ctrl {
    left: 1rem;
    right: 1rem;
    bottom: 5.5rem;
    justify-content: space-between;
  }

  .wa-icon {
    width: 54px;
    height: 54px;
  }

  /* label bubble is not needed on touch screens */
  .wa-label {
    display: none;
  }
}


/* ---- Hero fit on short phones (kept last so it wins over the rules above) ---- */
/* small phones: slightly tighter hero so the text, buttons and slider controls all fit */
@media (max-width: 600px) and (max-height: 720px) {
  .slide .wrap {
    padding-top: 5rem;
    padding-bottom: 6.5rem;
  }

  .slide h1 {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }

  .slide p {
    font-size: .95rem;
    line-height: 1.55;
  }

  .slide .cta {
    margin-top: 1rem;
    gap: .6rem;
  }

  .slide .btn {
    padding: .7rem 1.2rem;
  }
}

/* shorter phones: slider controls sit beside the WhatsApp button instead of above it */
@media (max-width: 600px) and (max-height: 820px) {
  .ctrl {
    left: 1rem;
    right: 5rem;
    bottom: 1.25rem;
  }

  .slide .wrap {
    padding-bottom: 6.5rem;
  }
}

/* very small phones (e.g. 320x568) */
@media (max-width: 600px) and (max-height: 600px) {
  .slide .wrap {
    padding-top: 4.5rem;
  }

  .slide h1 {
    font-size: 1.9rem;
  }

  .slide p {
    font-size: .88rem;
    line-height: 1.45;
  }

  .slide .eyebrow {
    font-size: .68rem;
    margin-bottom: .6rem;
  }
}

/* ==========================================================================
   [20] REDUCED MOTION
   People who turn off animations in their device settings get none.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }

  .js .rv,
  .js .clip,
  .slide .eyebrow,
  .slide p,
  .slide .cta {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .slide h1 span {
    transform: none !important;
  }

  .slide .bg {
    filter: none !important;
    transform: none !important;
  }

  /* WhatsApp button must stay visible even with animations off */
  .wa {
    opacity: 1 !important;
  }
}

/* ---- Success / failure popup after sending the inquiry ---- */
.bl-popup {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(40, 30, 22, .65);
}

.bl-popup-card {
  width: 100%;
  max-width: 26rem;
  padding: 2rem 1.75rem;
  text-align: center;
  background: #F1EADA;
  color: #3b2f24;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.bl-popup-card h3 {
  margin: .9rem 0 .5rem;
  font-size: 1.35rem;
}

.bl-popup-card p {
  margin: 0 0 1.4rem;
  line-height: 1.5;
}

.bl-popup-icon {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
}

.bl-popup.is-ok .bl-popup-icon {
  background: #3f7d4e;
}

.bl-popup.is-fail .bl-popup-icon {
  background: #b3402f;
}


/* ---- Product page heading: typing animation (letters are shown one by one by main.js, section [13]) ---- */
/* the heading stays hidden for a split second until main.js is ready; if main.js fails, the "js" class is removed and the heading shows normally */
.js .phero h1:not(.typing) {
  visibility: hidden;
}

/* every letter keeps its place in the layout, so the text never jumps while typing */
.tw-c {
  position: relative;
  opacity: 0;
}

.tw-c.on {
  opacity: 1;
}

/* blinking typing cursor after the last typed letter */
.tw-c.cur::after {
  content: "";
  position: absolute;
  left: 100%;
  top: .14em;
  width: 2px;
  height: .8em;
  margin-left: 3px;
  background: currentColor;
  animation: twBlink 1s steps(1) infinite;
}

@keyframes twBlink {
  50% {
    opacity: 0;
  }
}