/* 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;
  /* home-hero-newphoto-v3.jpg (4096x2256, aspect 1.82, ~16:9). The CEDRUS sign
     spans roughly 8%-28% of the frame width and GIONTEX roughly 78%-95%,
     so on 16:9 screens `cover` barely crops it, and on 16:10 (1440x900,
     aspect 1.6) it trims ~6% off each side — see background-position
     below for how that's kept off the logos. The ≤900px media query
     further down handles tablets/phones separately. */
  background-image: url('../images/home-hero-newphoto-v3.jpg?v=7');
  background-size: cover;
  /* 60% (not center): on 16:10 screens ~12% of the width is trimmed;
     splitting it 60/40 left/right keeps ~1% clear of CEDRUS on the left
     and ~1% clear of GIONTEX's "SAL" on the right, where dead center clips it. */
  background-position: 60% 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);
}

/* Soft dark backdrop behind just the heading (not the whole photo) so the
   gold line keeps contrast against the light stone building. Sits behind
   the text (z-index:-1 inside .hero-inner's stacking context) but above
   the photo/overlay, and fades to nothing at its edges. */
.hero-text h1{ position: relative; width: fit-content; }

.hero-text h1::before{
  content: "";
  position: absolute;
  z-index: -1;
  inset: -22px -44px -20px -40px;
  background: radial-gradient(ellipse closest-side, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.58) 50%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

.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;
  }

  /* The copy sits over the brighter, busier middle of the photo (glass
     windows, trees) where the overlay above is nearly clear and the
     text-shadow below isn't always enough on its own. A solid dark card
     behind just this block guarantees contrast regardless of what's behind
     it. The padding is offset by an equal negative margin on each side so
     the box bleeds beyond the text without changing the text's own
     position or line-wrapping (padding narrows the content width by the
     same amount the negative margin widens the box, netting out to the
     original width) — font size, color and position of the paragraphs
     themselves are untouched. */
  .hero-copy{
    padding: 14px 18px 20px;
    margin: -14px -18px 0 -18px;
    border-radius: 10px;
    background: rgba(6,7,9,0.5);
  }

  .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. */
  /* The home photo is bright (light stone, blue sky), so this stays much
     lighter than the old dark-photo gradient: a modest fade at the bottom
     where the copy/footer sit, clear by ~65% up so the photo renders at
     its real brightness. */
  .hero-overlay{
    background:
      linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.55) 20%, rgba(0,0,0,0.34) 40%, rgba(0,0,0,0.12) 55%, rgba(0,0,0,0) 68%);
  }

  /* Contrast for the copy comes from a soft shadow on the text itself, not
     a heavier overlay, so the photo stays bright behind it. */
  .hero-text h1,
  .hero-copy p,
  .hero-footer{
    text-shadow: 0 1px 3px rgba(0,0,0,0.75), 0 0 14px rgba(0,0,0,0.55);
  }
}

/* ---------- Tablets / phones (portrait) ----------
   These use home-hero-mobile-v2.jpg, a portrait (852x1293, ~2:3) crop made for
   phones, instead of the wide desktop photo. Shown at full width pinned to
   the top (background-size: 100% auto) so both logos (x ~5-29% and ~76-97%,
   y ~17-30% of its height) are always fully in frame and sit above the
   heading. The photo is ~152vw tall. The sharp layer and the blurred layer
   behind it use the exact same image, size and position, so the blur is
   just a soft echo of the same framing (not a different crop); each is
   masked so it dissolves into the near-black base the overlay ends in
   rather than ending on a hard line. */

@media (max-width: 900px){
  .hero-media{ background: #0c0e12; }

  .hero-media-blur{
    display: block;
    position: absolute;
    inset: 0;
    background-image: url('../images/home-hero-mobile-v2.jpg?v=2');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    filter: blur(16px) brightness(0.75);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 105vw, transparent 150vw);
    mask-image: linear-gradient(to bottom, #000 0, #000 105vw, transparent 150vw);
  }

  .hero-media-sharp{
    background-image: url('../images/home-hero-mobile-v2.jpg?v=2');
    background-size: 100% auto;
    background-position: center top;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72vw, transparent 138vw);
    mask-image: linear-gradient(to bottom, #000 0, #000 72vw, transparent 138vw);
  }

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

/* Landscape phones/tablets are wide and short: a full-width portrait photo
   would show only its sky there, so use the wide desktop photo instead
   (cover, same framing as desktop) and drop the blurred echo. */
@media (max-width: 900px) and (orientation: landscape){
  .hero-media-blur{ display: none; }

  .hero-media-sharp{
    background-image: url('../images/home-hero-newphoto-v3.jpg?v=7');
    background-size: cover;
    background-position: 60% center;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---------- Phones (portrait) ----------
   The image/blur layers from the 900px band above already apply here too,
   since 700px is a subset of it in the cascade. */

@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; margin-left: auto; margin-right: auto; }
  .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));
  transition: background 0.25s ease;
}

.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;
}

.top-nav-right{
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
}

.top-nav-lang{
  color: #fff;
  opacity: 0.8;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.top-nav-contact{
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.top-nav-contact:hover{ border-color: var(--accent); color: var(--accent); }

@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;
}

/* machinery.html only: swap its final CTA for an "About Us" link on
   desktop/laptop without touching mobile. Both blocks share the same
   .page-cta styling above; only one is ever shown at a time. */
.mach-cta-desktop{ display: none; }

@media (min-width: 701px){
  .mach-cta-mobile{ display: none; }
  .mach-cta-desktop{ display: block; }
}

.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; }
}

/* ==========================================================================
   Packaging page rebuild — new hero / icon strip / product photo grid.
   All classes here are prefixed .pkg- and are entirely separate from
   .page-hero / .feature-grid / .accent-dot above, which about.html and
   machinery.html still use as-is — this section only ever applies to
   packaging.html's markup, nothing shared is touched. */

.pkg-hero{
  position: relative;
  width: 100%;
  height: 54vh;
  min-height: 420px;
  overflow: hidden;
}

.pkg-hero-media{
  position: absolute;
  inset: 0;
  /* This 16:9 photo (1672x941) is a product still-life with the packaging
     items sitting low in the frame (roughly the bottom 55% of the image)
     and decorative background (printing machine, blurred plants) filling
     the top. .pkg-hero's containers are all wider-than-16:9 (`cover` is
     width-constrained, cropping top/bottom, not left/right) at every
     desktop and mobile size tested, so the position that matters is the
     vertical one: "bottom" keeps the crop anchored to the products
     instead of centering into the empty space above them. */
  background-image: url('../images/packaging-hero-newphoto-v2.jpg');
  background-size: cover;
  background-position: center bottom;
}

.pkg-hero-overlay{
  position: absolute;
  inset: 0;
  /* Three layers: a bottom fade into the feature strip's own color (sized
     to only the bottom 14% via its own background-size/position, so it
     doesn't tint the rest of the photo), the left-to-right text backdrop
     (pushed out further than before — was fading clear by 68%, now holds
     visible darkness through ~58% and doesn't fully clear until 78%, so
     the "CEDRUS HOLDINGS FZCO" wall sign the heading overlaps reads as
     part of the dark backdrop instead of competing with the white text),
     and the original bottom-to-top layer for general legibility. */
  background:
    linear-gradient(to top, #17181b 0%, rgba(23,24,27,0) 100%),
    linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.3) 58%, rgba(0,0,0,0) 78%),
    linear-gradient(to top, rgba(6,7,9,0.55) 0%, rgba(6,7,9,0.3) 30%, rgba(6,7,9,0) 55%);
  background-size: 100% 14%, 100% 100%, 100% 100%;
  background-position: bottom, top, top;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.pkg-hero-inner{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* max-width:1400px + margin:0 auto (removed) centered this box, which on
     wide screens meant padding-left barely moved the text relative to the
     actual viewport edge (most of the gap was the centering margin, not
     the padding). Full-width + padding-left alone makes padding-left the
     real, consistent distance from the screen edge at every width — which
     is what "push the text left, ~40-60px from the edge" actually needs.
     The paragraph/heading already have their own max-width/font clamps,
     so nothing stretches oddly without the outer max-width. */
  padding: 5.5vh clamp(20px, 6vw, 72px) clamp(14px, 2vh, 24px) clamp(20px, 3vw, 48px);
}

.pkg-eyebrow{
  margin: 0 0 10px 0;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-size: clamp(12px, 1vw, 14px);
  font-weight: 600;
}

.pkg-hero-heading{
  margin: 0 0 10px 0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.05;
  font-size: clamp(35px, 6.2vw, 74px);
  color: #fff;
}

.pkg-hero-text{
  max-width: 560px;
  margin: 0;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  font-weight: 300;
  color: rgba(255,255,255,0.85);
}

/* Mobile-only duplicate of the hero paragraph (see packaging.html markup
   comment) — hidden on desktop/laptop, shown in the max-width:700px query
   below. */
.pkg-hero-intro{ display: none; }


/* ---------- Product photo grid ---------- */

.pkg-products{
  background: #0a0a0c;
  padding: clamp(20px, 3vh, 36px) clamp(20px, 6vw, 72px);
}

.pkg-products-inner{
  max-width: 1280px;
  margin: 0 auto;
}

.pkg-products-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.pkg-product-card{
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: 14px;
  overflow: hidden;
}

.pkg-product-media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.pkg-product-card:hover .pkg-product-media{ transform: scale(1.05); }

.pkg-product-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 35%, rgba(0,0,0,0) 60%);
}

.pkg-product-text{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 20px 20px 22px;
}

.pkg-product-text h3{
  margin: 0 0 6px 0;
  font-size: clamp(15px, 1.4vw, 18px);
  font-weight: 600;
  color: #fff;
}

.pkg-product-text p{
  margin: 0;
  font-size: clamp(11.5px, 1vw, 13px);
  line-height: 1.45;
  font-weight: 300;
  color: rgba(255,255,255,0.72);
}

.pkg-product-arrow{
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pkg-product-arrow:hover{ background: var(--accent); border-color: var(--accent); color: #111; }

@media (max-width: 900px){
  .pkg-products-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px){
  .pkg-products-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 700px){
  /* Mobile only: match machinery's own .page-hero container height
     (38vh/220px) — shorter than desktop's 54vh/420px, which keeps `cover`
     from scaling the photo up as aggressively on narrow screens. The
     current hero photo (packaging-hero-newphoto-v2.jpg, 16:9) needs no
     separate mobile image or position override: at this shorter height
     it's actually the opposite crop regime from desktop (height- rather
     than width-constrained), so only a modest, harmless horizontal trim
     happens — the same `background-position: center bottom` used on
     desktop works fine here too. */
  .pkg-hero{ height: 38vh; min-height: 220px; }

  /* Restructure the hero to match machinery.html's actual layout, not just
     its type values: on machinery only the eyebrow + H1 live inside the
     hero photo (.page-hero-inner, bottom-anchored via justify-content:
     flex-end), and the paragraph lives in a separate .page-intro section
     below the photo. So on mobile here: keep the heading in the hero and
     anchor it the same way machinery does (same justify-content/
     align-items/padding as .page-hero-inner); hide the in-hero paragraph;
     and reveal .pkg-hero-intro (the duplicate paragraph section added in
     the markup, styled by the shared .page-content/.page-content-inner/
     .page-intro classes so it's pixel-for-pixel the same section type
     machinery uses). The buttons and tagline that used to sit below the
     paragraph here are gone from the markup entirely now (removed on all
     screen sizes), so there's nothing left to hide for them. */
  .pkg-hero-inner{
    justify-content: flex-end;
    align-items: flex-start;
    padding: clamp(20px, 4vw, 56px) clamp(20px, 6vw, 72px) clamp(28px, 4vh, 48px);
  }

  .pkg-hero-heading{
    font-size: 28px;
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: 1.5px;
    color: var(--text-light);
    margin: 0;
  }

  /* Desktop keeps the forced PACKAGING / SOLUTIONS line break (it's the
     intended 2-line display treatment on packaging's own hero); mobile
     matches that behavior for a single-line heading by just hiding the
     one <br> when present, not editing shared markup. */
  .pkg-hero-break{ display: none; }

  /* machinery.html's heading text ("MACHINERY & EQUIPMENT") is longer than
     packaging's and doesn't fit one line at the shared 28px/375px-container
     combo (measured 372px vs the 330px available) — 23px is the largest
     size that stays on one line here (measured 311px), keeping every other
     heading property (weight/line-height/letter-spacing/color) identical
     to packaging's. Scoped to .machinery-page so packaging's own heading
     size is untouched. */
  .machinery-page .pkg-hero-heading{ font-size: 23px; }

  .pkg-hero-text{
    display: none;
  }

  /* .pkg-hero-intro reused .page-content's default top/bottom padding at
     first, but that read as too much empty space above and below the
     paragraph once seen live — tighten both gaps to a smaller, still
     comfortable size instead of matching .page-content's full padding
     (which was really tuned for a section with cards below it, not a
     single line of text). Bottom padding stays 0: .page-intro's own
     (reduced) margin-bottom below is the sole trailing gap before the
     product cards, so it doesn't stack with section padding too. */
  .pkg-hero-intro{
    display: block;
    padding-top: 20px;
    padding-bottom: 0;
  }

  .pkg-hero-intro .page-intro{
    margin-bottom: 24px;
  }

  /* Match machinery's hero-to-section fade exactly: one full-height
     gradient, heaviest (92%) right at the bottom so it blends into the
     dark section below instead of the photo cutting off on a hard edge.
     This replaces packaging's 3-layer desktop overlay (tuned for the
     photo's different desktop text layout) for mobile only. */
  .pkg-hero-overlay{
    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%);
  }
}

/* ==========================================================================
   Nav: "Furniture" placeholder (page doesn't exist yet) — same look as the
   other links, just not clickable.
   ========================================================================== */

.top-nav-links a.nav-soon,
.menu-links a.nav-soon{
  pointer-events: none;
  cursor: default;
}

/* ==========================================================================
   About Us page — hero, two light sections, dark values section.
   Reuses the site's Jost type, --accent gold, and the packaging/machinery
   product-card components (.pkg-products-grid / .pkg-product-*).
   ========================================================================== */

/* Over the hero, the nav uses the site's shared transparent gradient
   (background: linear-gradient(...) from the base .top-nav rule) so it
   blends over the photo exactly like it does on index.html. This page
   scrolls (unlike the homepage) into light/cream sections below the hero
   where white nav links would vanish, so menu.js adds .nav-solid to the
   nav once its bottom edge scrolls past the hero, swapping in a solid dark
   backing for the rest of the scroll. The phone menu button (below 900px,
   not affected by this page's scroll fix since it doesn't sit over the
   hero) keeps its own permanent solid backing. */
body.about-page .top-nav.nav-solid{ background: rgba(16,17,20,0.92); }
body.about-page .menu-toggle{ background: rgba(16,17,20,0.85); }

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

/* gold darkened a touch for small text on the cream background */
.about-eyebrow-deep{ color: #b0803f; }

.about-hero-inner .about-eyebrow{ text-shadow: 0 1px 8px rgba(0,0,0,0.8); }

/* ----- Hero ----- */

.about-hero{
  position: relative;
  width: 100%;
  height: 62vh;
  min-height: 440px;
  overflow: hidden;
}

.about-hero-media{
  position: absolute;
  inset: 0;
  background-image: url('../images/home-hero-newphoto-v3.jpg?v=7');
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}

.about-hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(6,7,9,0.92) 0%, rgba(6,7,9,0.75) 32%, rgba(6,7,9,0.4) 62%, rgba(6,7,9,0.12) 100%);
}

.about-hero-inner{
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(20px, 4vw, 56px) clamp(22px, 6vw, 72px) clamp(32px, 6vh, 64px);
}

.about-hero-heading{
  margin: 0 0 clamp(12px, 2vh, 20px) 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.05;
  font-size: clamp(36px, 6vw, 72px);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}

.about-hero-heading .accent{ color: var(--accent); }

.about-hero-sub{
  margin: 0;
  max-width: 520px;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  font-weight: 300;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

/* ----- Light (cream) sections ----- */

.about-light{
  background: #f3eee5;
  color: #23201c;
}

.about-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding-left: clamp(20px, 6vw, 72px);
  padding-right: clamp(20px, 6vw, 72px);
}

.about-h2{
  margin: 0 0 clamp(20px, 3vh, 30px) 0;
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: 0.3px;
  color: #23201c;
}

.about-h2-light{ color: var(--text-light); }

.about-body{
  margin: 0 0 clamp(24px, 3.5vh, 34px) 0;
  max-width: 560px;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.7;
  font-weight: 300;
  color: #5b544b;
}

.about-btn-outline{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border: 1px solid #23201c;
  border-radius: 999px;
  color: #23201c;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.about-btn-outline:hover{
  background: #23201c;
  color: #f3eee5;
}

/* Who We Are */

.about-who-section{ padding-top: clamp(56px, 9vh, 100px); }

.about-who{
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  align-items: center;
}

.about-who-copy{ padding-right: clamp(24px, 5vw, 64px); }

.about-stats{
  border-left: 1px solid rgba(35,32,28,0.18);
  padding-left: clamp(28px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 3.5vh, 34px);
}

.about-stat{ display: flex; flex-direction: column; gap: 6px; }

.about-stat-num{
  font-size: clamp(36px, 3.6vw, 48px);
  font-weight: 400;
  line-height: 1.1;
  color: #b0803f;
}

.about-stat-num-text{ font-size: clamp(24px, 2.4vw, 32px); }

.about-stat-label{
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 500;
  color: #8a847a;
}

/* What We Do — same product-card component as packaging/machinery, 3-up */

.about-what-section{
  margin-top: -1px; /* hides a subpixel seam between the two cream sections */
  padding-top: clamp(48px, 8vh, 88px);
  padding-bottom: clamp(56px, 9vh, 100px);
}

.pkg-products-grid.about-cards{
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.pkg-product-link{
  display: inline-block;
  margin-top: 10px;
  font-size: clamp(12px, 1vw, 13px);
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--accent);
  text-decoration: none;
}

a.pkg-product-link:hover{ text-decoration: underline; }
.pkg-product-link.is-disabled{ cursor: default; }

/* Our Values */

.about-dark{
  background: linear-gradient(180deg, #101114 0%, #0b0c0e 40%, #0a0a0c 100%);
  padding: clamp(56px, 9vh, 100px) 0;
}

.about-values{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(8px, 2vh, 20px);
}

.about-value{
  padding: 0 clamp(18px, 2.4vw, 32px);
  border-left: 1px solid rgba(255,255,255,0.12);
}

.about-value:first-child{ border-left: none; padding-left: 0; }

.about-value-icon{
  display: block;
  width: 44px;
  height: 44px;
  color: var(--accent);
  margin-bottom: 18px;
}

.about-value h4{
  margin: 0 0 8px 0;
  font-size: clamp(15px, 1.25vw, 17px);
  font-weight: 500;
  color: var(--text-light);
}

.about-value p{
  margin: 0;
  font-size: clamp(13px, 1vw, 14px);
  line-height: 1.6;
  font-weight: 300;
  color: var(--text-muted);
}

/* ----- About page: desktop/laptop density pass -----
   The first build used its own, larger type scale and section padding —
   noticeably taller/roomier than packaging.html/machinery.html, which run
   54vh hero / clamp(20-36px,3-9vh,36-100px) section padding and a 4-across
   product grid. These overrides bring About back to that same density on
   desktop only (min-width:901px, matching the site's existing desktop-only
   breakpoint elsewhere in this file); mobile keeps the original, larger
   values untouched below. */

@media (min-width: 901px){
  /* Taller than a plain 40vh so the top of the (cover-cropped) photo clears
     the fixed nav bar — at 40vh the nav's opaque dark strip was overlapping
     the top of both wall logos. The extra height shows more of the source
     photo's sky/roofline above the logos instead of cropping it away, which
     pushes the logos down clear of the nav with some breathing room. */
  .about-hero{ height: 48vh; min-height: 400px; }

  /* about-hero-wide.jpg (4096x1365, ~3:1) was shot/cropped for a wide
     banner in the first place, close to this container's own shape at
     common desktop widths — so back to a plain `cover` fill instead of
     the letterboxed `contain` used for the previous (taller, ~1.8:1)
     photo. No background-color fallback needed either, since cover always
     fills the box with no letterbox bars to mask. Scoped here (not the
     shared base rule), so the mobile/tablet hero below 901px keeps its
     own photo/crop untouched. */
  .about-hero-media{
    background-image: url('../images/about-hero-wide.jpg');
    background-size: cover;
    background-position: center;
  }

  /* #f3eee5 (the base/mobile value) was reading close to stark white next
     to the rest of the page — no other light/cream section exists
     elsewhere on the site to literally reuse, so this is a warmer, more
     visibly beige variant of that same color, desktop only. */
  .about-light{ background: #ede4d2; }

  /* Lighter than the base/mobile overlay so the (now wider, less zoomed)
     photo reads brighter, while staying dark enough low down for the
     heading. Scoped here, not edited on the shared base rule, so mobile's
     overlay is untouched. */
  .about-hero-overlay{
    background: linear-gradient(to top, rgba(6,7,9,0.78) 0%, rgba(6,7,9,0.55) 28%, rgba(6,7,9,0.24) 52%, rgba(6,7,9,0.06) 80%);
  }

  /* The eyebrow sits over a lighter, busier part of the photo now that the
     overlay is lighter there. A text-shadow alone wasn't quite enough, so
     this adds a small local scrim positioned just behind that one line
     (not the whole photo) — a tight radial fade so it doesn't read as a
     visible box, just extra contrast right behind the label. */
  .about-hero-inner .about-eyebrow{
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.85);
  }

  .about-hero-inner .about-eyebrow::before{
    content: "";
    position: absolute;
    z-index: -1;
    inset: -8px -16px;
    background: radial-gradient(ellipse closest-side, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.32) 60%, rgba(0,0,0,0) 100%);
    pointer-events: none;
  }

  .about-hero-inner{ padding: clamp(12px, 2vw, 20px) clamp(22px, 6vw, 72px) clamp(20px, 3vh, 32px); }

  .about-hero-heading{
    font-size: clamp(30px, 5vw, 58px);
    margin-bottom: clamp(10px, 1.5vh, 16px);
  }

  .about-hero-sub{ font-size: clamp(14px, 1.1vw, 16px); }

  .about-who-section{ padding-top: clamp(40px, 6vh, 64px); }

  .about-h2{
    font-size: clamp(22px, 2.4vw, 32px);
    margin-bottom: clamp(14px, 2vh, 20px);
  }

  .about-body{
    font-size: clamp(14px, 1.05vw, 15.5px);
    margin-bottom: clamp(18px, 2.5vh, 24px);
  }

  .about-stats{ gap: clamp(16px, 2.5vh, 24px); }

  .about-stat-num{ font-size: clamp(28px, 2.6vw, 36px); }

  .about-what-section{
    padding-top: clamp(36px, 5.5vh, 56px);
    padding-bottom: clamp(40px, 6vh, 64px);
  }

  /* Reusing the 4-column packaging/machinery card grid at 3 columns made
     each card noticeably wider (and, via its aspect-ratio, taller) than
     the 4-up cards on those pages. Capping the grid's own width keeps each
     card close to that same ~320px card width instead of stretching to
     fill the full about-inner column. */
  .pkg-products-grid.about-cards{
    max-width: 960px;
    margin: 0 auto;
    gap: clamp(14px, 1.6vw, 22px);
  }

  .about-dark{ padding: clamp(40px, 6vh, 64px) 0; }

  .about-values{ margin-top: clamp(6px, 1.5vh, 14px); }

  .about-value{ padding: 0 clamp(14px, 1.8vw, 24px); }

  .about-value-icon{
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
  }

  .about-value h4{ font-size: clamp(14px, 1.1vw, 15px); }
  .about-value p{ font-size: clamp(12px, 0.9vw, 13px); }
}

/* ----- About page: tablet + mobile ----- */

@media (max-width: 900px){
  .about-values{ grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .about-value:nth-child(3){ border-left: none; padding-left: 0; }
}

@media (max-width: 700px){
  /* Was 76vh/520px — nearly a full phone screen before any content below
     it showed at all. Roughly half the viewport instead, with the
     heading/padding sized down to match (the base, desktop-oriented
     values were tuned for the taller box and left too little breathing
     room here) — checked against real screenshots, not just computed. */
  .about-hero{ height: 50vh; min-height: 360px; }

  .about-hero-inner{ padding: clamp(16px, 4vw, 28px) clamp(20px, 6vw, 32px) clamp(18px, 4vh, 28px); }

  .about-hero-heading{
    font-size: clamp(26px, 8vw, 38px);
    margin-bottom: clamp(8px, 1.5vh, 12px);
  }

  .about-hero-sub{ font-size: 14px; line-height: 1.45; }

  .about-hero-media{
    background-image: url('../images/home-hero-mobile-v2.jpg?v=2');
    background-position: center top;
  }

  .about-who{ grid-template-columns: 1fr; }
  .about-who-copy{ padding-right: 0; }

  .about-stats{
    border-left: none;
    border-top: 1px solid rgba(35,32,28,0.18);
    padding-left: 0;
    padding-top: 32px;
    margin-top: 40px;
  }

  .pkg-products-grid.about-cards{ grid-template-columns: 1fr; }

  .about-values{ grid-template-columns: 1fr; row-gap: 0; }

  .about-value,
  .about-value:nth-child(3){
    border-left: none;
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,0.12);
  }

  .about-value:first-child{ border-top: none; padding-top: 8px; }
}