/* Cedrus Group — single-viewport hero site
   No page scroll. Fully responsive: phone / tablet / laptop / large monitor. */

:root{
  --text-light: #f5f5f5;
  --text-muted: rgba(245,245,245,0.78);
  --text-faint: rgba(245,245,245,0.55);
  --accent: #cda06a; /* warm gold, matches the Giontex SAL signage */
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
}

/* Only the homepage hero is a fixed, non-scrolling single viewport.
   Packaging / Machinery / About Us are normal content pages and need to
   scroll, so the old blanket "overflow:hidden; no page scroll, ever" rule
   is now scoped to body.home (index.html only) instead of every page. */
body.home{
  overflow: hidden;
}

body{
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-light);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hero{
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* accounts for mobile browser chrome */
  overflow: hidden;
}

/* .hero-media holds two layers: a blurred fill (only used on phones, see
   below) and the real sharp photo. On desktop/laptop/tablet the sharp layer
   alone does a normal full-bleed "cover" background, same as before. */

.hero-media{
  position: absolute;
  inset: 0;
}

.hero-media-blur{
  display: none;
}

.hero-media-sharp{
  position: absolute;
  inset: 0;
  /* hero-desktop-v2.jpg (1672x941, ~16:9 — nearly identical to the screen's
     own aspect ratio) replaces the previous desktop/laptop/tablet photo.
     Because its aspect ratio (1.78) is almost exactly 16:9, a cover crop at
     1920x1080 or 1366x768 barely crops it at all (both logos stay dead
     center, untouched). The only real crop happens on 16:10 screens
     (1440x900 etc, aspect 1.6): image is proportionally wider than the
     container there, so ~5.5% gets trimmed off each side — logos (spanning
     roughly 30%-81% of the frame width) still clear that with margin to
     spare. This base rule covers desktop/laptop/tablet; the phone media
     query below overrides it back to the separate mobile crop (hero.jpg). */
  background-image: url('../images/hero-desktop-v2.jpg?v=2');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.15) 55%, rgba(0,0,0,0.05) 100%);
}

.hero-inner{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(16px, 4vw, 48px) clamp(20px, 6vw, 72px);
}

/* ---------- Headline + copy ---------- */

.hero-text{
  max-width: min(640px, 46vw);
  min-width: 260px;
}

.hero-text h1{
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(24px, 3.8vw, 49px);
  line-height: 1.2;
  letter-spacing: 1.5px;
  margin: 0 0 clamp(8px, 1.6vh, 18px) 0;
}

.hero-text h1 .accent{
  color: var(--accent);
}

.hero-copy{
  /* No scroll, ever — matches the rest of the site (html/body also use
     overflow:hidden). This used to be overflow-y:auto as a safety valve,
     but that meant any time the copy text grew even slightly taller than
     max-height, it silently became a scrollable box instead of just
     showing the text — exactly what happened on common scaled Windows
     laptop resolutions (e.g. 1536x864) once the desktop copy font-size
     was increased. overflow:hidden below removes that possibility; the
     max-height values are sized with real headroom so clipping shouldn't
     happen either. */
  overflow: hidden;
  max-height: 28vh;
  padding-right: 6px;
}

.hero-copy p{
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 0.85em 0;
  font-weight: 300;
}

.hero-copy p:last-child{ margin-bottom: 0; }

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

.hero-footer{
  margin-top: clamp(18px, 3vh, 36px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.footer-social{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.footer-social a{
  color: var(--text-light);
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(245,245,245,0.5);
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.footer-social a:hover{
  opacity: 1;
  border-color: var(--accent);
}

.social-sep{
  width: 1px;
  height: 20px;
  background: rgba(245,245,245,0.35);
  display: inline-block;
}

.rule{
  display: none; /* only shown in the stacked mobile layout, see below */
}

.footer-address,
.footer-copyright{
  font-size: clamp(9px, 0.85vw, 11px);
  letter-spacing: 0.4px;
  color: var(--text-faint);
  margin: 0;
  font-weight: 300;
}

.footer-address{
  display: flex;
  align-items: center;
  gap: 6px;
}

.footer-address .pin-icon{
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.9;
}

/* ---------- Large monitors: keep hero from feeling too sparse/wide ---------- */

@media (min-width: 1600px){
  .hero-inner{ padding-left: 6vw; padding-right: 6vw; }
}

/* ---------- Desktop / laptop polish ----------
   Scoped to min-width: 901px specifically (not the shared base rule) so it
   can't bleed into the 700-900px tablet band, which keeps its original
   sizing per instructions. Two things prompted this: the body copy was
   sized too small to read comfortably, and the new sharper source photo
   (hero-desktop-source.jpg, a real higher-resolution shot, not an upscale)
   deserves a bit more spacing/contrast polish than the old compact layout
   gave it. */

@media (min-width: 901px){
  /* Tried true auto-centering first (margin: auto 0 on hero-text, no auto
     margin on the footer) — mathematically clean, but this photo's
     signage sits close enough to the vertical middle of the frame that a
     perfectly centered text block landed right on top of "CEDRUS HOLDINGS
     FZCO" at 1440x900 (verified, not assumed — screenshotted the actual
     overlap). Centering can't dodge that since the sign's position is
     fixed as a % of the image regardless of how the available space is
     split. Back to a fixed margin-top + footer margin-top:auto instead,
     which gives direct, tunable control over how far down the block
     sits — set here to land noticeably higher than the old near-bottom
     position while still clearing the sign at 1366x768 (the tightest
     case) — verified below. */
  .hero-inner{ justify-content: flex-start; padding: clamp(12px, 2vw, 20px) clamp(22px, 6vw, 72px); }

  /* 46vh — nudged down from 44vh (not all the way back to the original
     bottom-pinned position, just partway, per request). 48vh was the
     first attempt but combined with the extra heading-to-copy spacing and
     bigger paragraph font added this round, it pushed the footer 13px
     past the bottom edge at 1366x768 (verified — .hero-footer's own
     bottom edge, not just visually tight). 46vh gives back just enough
     to fit. */
  .hero-text{ margin-top: 45vh; max-width: min(660px, 46vw); }
  .hero-footer{ margin-top: auto; gap: 3px; }

  .hero-text h1{
    font-size: clamp(22px, 3.2vw, 42px);
    margin-bottom: clamp(19px, 1.8vh, 24px);
  }

  /* Real headroom, not a tight fit: the copy's actual rendered height only
     reaches ~229px at this font-size regardless of viewport (font is
     already pinned to its clamp max above ~1476px wide), so 36vh gives a
     comfortable margin everywhere from 1366x768 up — the old 26vh was only
     ~4px short of the real content height at 1536x864, which is what
     triggered the scrollbar there (a very common scaled-Windows-laptop
     resolution). Since max-height is a ceiling, not a fixed size, this
     doesn't change how tall the box actually renders anywhere it already
     fit — it only removes the false ceiling that was clipping/scrolling it. */
  .hero-copy{ max-height: 36vh; }

  .hero-copy p{
    font-size: clamp(14.5px, 1.15vw, 17px);
    line-height: 1.16;
    margin-bottom: 0.2em;
  }

  .footer-social{ gap: 10px; margin-bottom: 2px; }
  .footer-social a{ width: 26px; height: 26px; }

  /* Pulled the dark zone down so it only covers the text block itself
     (which starts ~55-58% up from the bottom at worst — verified across
     1366x768 through 1920x1080) instead of tinting the whole photo. The
     old stops (0.62 at 30%, 0.22 at 58%, still 0.04 all the way to 100%)
     were dimming the sky, roofline and both logos by ~4-28% black even
     though nothing needs to be legible up there — that's why the live
     photo looked duller/flatter than the source image. Now it's fully
     clear by 65% up, so the sky/building/logos render at the source
     photo's real brightness, while the bottom third (where the copy and
     footer sit) stays just as dark as before for legibility. */
  .hero-overlay{
    background:
      linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.68) 20%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.08) 55%, rgba(0,0,0,0) 65%);
  }
}

/* ---------- Tablets ----------
   Tablets share hero.jpg with phones (not hero-desktop-source.jpg above) —
   checked, not assumed: at 768x1024 a cover crop of the wide desktop photo
   only shows ~50% of its width, but the two logos span ~61% of it (29% to
   90%), so no crop position can fit both on that aspect ratio. hero.jpg
   (942x1370, much closer to tablet's own portrait-ish proportions) already
   shows both logos cleanly there — confirmed in an earlier pass for this
   same image when it was still the sole shared hero image. */

@media (max-width: 900px){
  .hero-media-sharp{
    background-image: url('../images/hero.jpg?v=4');
    background-position: 70% 20%;
  }

  .hero-text{ max-width: 70vw; }
  .hero-copy{ max-height: 30vh; }
}

/* ---------- Phones (portrait) ----------
   The image override above (shared with tablet) already applies here too,
   since 700px is a subset of the 900px tablet band above it in the
   cascade. background-position: 70% 20% is unchanged from before: y=20%
   clears the Giontex roundel (irrelevant on phones anyway, since they crop
   this image horizontally only, not vertically); x=70% is what keeps both
   logos in frame — confirmed previously against the narrowest (360x800)
   and widest (428x926) common phone widths. */

@media (max-width: 700px){
  .hero-overlay{
    background:
      linear-gradient(to top, rgba(12,14,18,0.97) 0%, rgba(12,14,18,0.9) 26%, rgba(12,14,18,0.55) 46%, rgba(12,14,18,0.1) 68%, rgba(12,14,18,0) 82%);
  }

  .hero-inner{
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 12px 22px 12px;
    overflow-y: auto;
  }

  .hero-text{ max-width: 100%; min-width: 0; margin-top: 44vh; }
  .hero-text h1{ font-size: clamp(18px, 5.5vw, 24px); letter-spacing: 1px; margin-bottom: 0; }
  .hero-copy{ max-height: none; overflow: visible; padding-right: 0; }
  .hero-copy p{ font-size: clamp(10.5px, 2.8vw, 12px); text-align: center; margin-bottom: 0.4em; line-height: 1.3; }
  /* margin-top: auto (not a fixed value) pins the footer flush to the
     bottom regardless of how much space hero-text's own margin-top above
     consumes — this decouples the headline's push-down distance from the
     footer's position, since with justify-content: flex-end (the previous
     approach) adding margin-top to hero-text didn't move it at all: the
     bottom-anchored group just grew upward by the same amount, cancelling
     the push. */
  .hero-footer{ margin-top: auto; align-items: center; width: 100%; }
  .footer-social{ gap: 10px; margin-bottom: 8px; }
  .footer-social a{ width: 26px; height: 26px; }
  .footer-social a svg{ width: 13px; height: 13px; }
  .footer-address{ font-size: 10.5px; margin-bottom: 4px; }
  .footer-copyright{ font-size: 9px; opacity: 0.8; }

  .rule{
    display: block;
    width: 44px;
    height: 1px;
    background: rgba(205,160,106,0.6);
  }
  .rule-top{ margin: 8px 0 10px; }
  .rule-bottom{ margin: 3px 0 10px; }
}

/* ---------- Short viewports (landscape phones, small laptops) ---------- */

@media (max-height: 480px){
  .hero-text h1{ font-size: clamp(19px, 3.7vh, 27px); margin-bottom: 6px; }
  .hero-copy{ max-height: 40vh; }
  .hero-copy p{ font-size: 10.5px; margin-bottom: 0.5em; }
  .hero-footer{ margin-top: 8px; }
  .footer-social{ margin-bottom: 2px; }
}

/* ==========================================================================
   Site navigation — hamburger icon + full-screen overlay menu.
   Shared markup/behavior across every page (index.html, packaging.html,
   machinery.html, about.html). The button and overlay are both
   position:fixed and placed as the first children of <body> (before .hero
   or .page-hero), so they render above everything with no z-index conflicts
   and are never clipped by an ancestor's overflow:hidden.
   ========================================================================== */

.menu-toggle{
  position: fixed;
  top: clamp(16px, 2.5vw, 30px);
  right: clamp(18px, 4vw, 42px);
  z-index: 100;
  width: 42px;
  height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(245,245,245,0.4);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.menu-toggle:hover{
  border-color: var(--accent);
  background: rgba(0,0,0,0.5);
}

.menu-toggle span{
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text-light);
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.menu-toggle.is-open span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity: 0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

.menu-overlay{
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.menu-overlay.is-open{
  opacity: 1;
  visibility: visible;
}

/* The actual sliding drawer — a child of .menu-overlay, which is now just
   the dim backdrop behind it. Slides in from the right via transform
   (not left/right positioning) so the transition stays on the compositor
   thread instead of triggering layout on every frame. */
.menu-panel{
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(340px, 72vw);
  background: #0b0c0e;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 48px;
  box-shadow: -12px 0 40px rgba(0,0,0,0.35);
  transform: translateX(100%);
  transition: transform 0.35s ease;
}

.menu-overlay.is-open .menu-panel{
  transform: translateX(0);
}

/* No separate close (X) button: the toggle button itself morphs into an X
   via .is-open above, so it doubles as open/close in the same top-right
   spot. A second close button in that same corner was overlapping the
   toggle and stealing its clicks (the toggle's higher z-index, needed so
   it stays clickable above the overlay, put it on top of the close button
   too) — one control is simpler and avoids that entirely. Escape and
   clicking outside the menu panel also close it (see js/menu.js — it
   closes whenever the click target is the overlay itself, i.e. the dim
   backdrop outside .menu-panel, so that logic still holds unchanged). */

.menu-links{
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.menu-links li{ margin: clamp(10px, 2.2vh, 22px) 0; }

.menu-links a{
  display: inline-block;
  color: var(--text-light);
  text-decoration: none;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: clamp(20px, 2.4vw, 26px);
  transition: color 0.2s ease;
}

.menu-links a:hover,
.menu-links a:focus{ color: var(--accent); }

.menu-links a.active{ color: var(--accent); }

/* ---------- Persistent top nav (desktop/laptop only) ----------
   A second, separate nav from the hamburger/slide-panel above — shown at
   900px+ instead of the hamburger (see the media query at the bottom of
   this block), not a replacement for it. The hamburger markup/CSS is
   untouched and still does the same job below 900px. */

.top-nav{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 80;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 22px 48px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0));
}

.top-nav-links{
  display: flex;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-nav-links a{
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.02em;
  padding-bottom: 6px;
  border-bottom: 1px solid transparent;
  opacity: 0.85;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.top-nav-links a:hover{ opacity: 1; }

.top-nav-links a.active{
  opacity: 1;
  color: var(--accent);
  border-bottom-color: currentColor;
}

@media (min-width: 900px){
  .top-nav{ display: flex; }
  .menu-toggle{ display: none; }
}

/* ==========================================================================
   Content pages (Packaging / Machinery / About Us) — a short photo banner
   plus normal scrolling sections below, all on the site's existing dark
   palette (--text-light / --text-muted / --accent) and Jost typeface so
   these read as the same brand as the homepage hero, without carrying the
   homepage's single-viewport / no-scroll constraint.
   ========================================================================== */

.page-hero{
  position: relative;
  width: 100%;
  height: 46vh;
  min-height: 260px;
  overflow: hidden;
}

.page-hero-media{
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-desktop-v2.jpg?v=2');
  background-size: cover;
  background-position: center 30%;
}

.page-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,7,9,0.92) 0%, rgba(6,7,9,0.72) 45%, rgba(6,7,9,0.55) 100%);
}

.page-hero-inner{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: clamp(20px, 4vw, 56px) clamp(20px, 6vw, 72px) clamp(28px, 4vh, 48px);
  max-width: 1400px;
  margin: 0 auto;
}

.page-eyebrow{
  margin: 0 0 8px 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 400;
}

.page-hero-inner h1{
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: clamp(28px, 4.5vw, 54px);
  line-height: 1.15;
}

.page-content{
  /* Subtle depth instead of a flat fill — a hair lighter near the top
     (right under the photo banner), easing down to slightly darker by the
     bottom. Kept intentionally faint (#101114 to #0a0a0c is a tiny range)
     so it reads as depth, not a visible band. */
  background: linear-gradient(180deg, #101114 0%, #0b0c0e 40%, #0a0a0c 100%);
  padding: clamp(40px, 6vh, 80px) clamp(20px, 6vw, 72px);
}

.page-content-inner{
  max-width: 1080px;
  margin: 0 auto;
}

.page-intro{
  font-size: clamp(15px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 300;
  max-width: 760px;
  margin: 0 0 clamp(40px, 8vh, 64px) 0;
}

.feature-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 36px);
  margin: 0 0 clamp(40px, 7vh, 56px) 0;
}

.feature-card{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: clamp(24px, 2.5vw, 32px) clamp(22px, 2.4vw, 30px);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(205,160,106,0.35);
  background: rgba(255,255,255,0.05);
}

.feature-card h3{
  margin: 0 0 10px 0;
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 20px);
  letter-spacing: 0.5px;
  color: var(--text-light);
}

.feature-card h3 .accent-dot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: middle;
  box-shadow: 0 0 0 4px rgba(205,160,106,0.15);
}

.feature-card p{
  margin: 0;
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 300;
}

.page-cta{
  border-top: 1px solid rgba(245,245,245,0.14);
  padding-top: clamp(24px, 3.5vh, 40px);
}

.page-cta p{
  margin: 0;
  font-size: clamp(14px, 1.1vw, 16px);
  color: var(--text-muted);
  font-weight: 300;
}

.page-cta a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--accent);
  color: #111;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 12px 24px;
  border-radius: 999px;
  transition: opacity 0.2s ease;
}

.page-cta a:hover{ opacity: 0.85; }

.site-footer{
  background: #0b0c0e;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: clamp(32px, 4vh, 48px) 20px clamp(28px, 3.5vh, 40px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

@media (max-width: 700px){
  .feature-grid{ grid-template-columns: 1fr; }
  .page-hero{ height: 38vh; min-height: 220px; }
}