/*
Theme Name: Hexamed Saudi Arabia
Theme URI: https://hexamed-ksa.com
Author: Hexamed
Description: Classic theme for Hexamed Saudi Arabia, built as a sibling of hexamedfzc.com. No page builder, no external dependencies beyond Google Fonts. Design tokens and component classes mirror the group's own hx- design layer.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hexamed-ksa
*/

/* ===== tokens — taken from the group's own stylesheet ===== */
:root{
  /* Palette sampled directly from the official logo (brand/hexamed-ksa-logo.pdf),
     reconciled with the FZC token structure. Decorative fills use the brand blues;
     text and buttons use darkened variants so every pair clears 4.5:1. */
  --ink-deep:#060C37; --ink:#091056; --ink-2:#0E2373; --head:#060C37;
  --body:#4E6274; --blue:#3E87D9; --blue-2:#57BBF5; --blue-3:#57BBF5;
  --blue-btn:#2166C0; --blue-txt:#1F62B8;
  --sky:#E9F3FB; --paper:#F4F7FA; --line:#E1EBF3; --white:#fff;
  --sand:#C9A961;
  --pad:clamp(80px,9vw,138px);
  --wrap:1240px;
  --ease:cubic-bezier(.22,.65,.25,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{font-family:Montserrat,system-ui,-apple-system,sans-serif;color:var(--body);background:var(--white);
  font-size:clamp(15px,1.15vw,17px);line-height:1.8;font-weight:400;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--blue);color:#fff}

/* ===== type ===== */
.hx-h1,.hx-h2,h1,h2{font-weight:200;letter-spacing:.2em;text-transform:uppercase;color:var(--head);line-height:1.24}
.hx-h1{font-size:clamp(27px,5.1vw,60px);color:#fff}
.hx-h2{font-size:clamp(30px,3.4vw,46px)}
h3,.hx-h3{font-size:clamp(15px,1.3vw,18px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--head);line-height:1.5}
.hx-eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--blue-txt);margin-bottom:20px}
.hx-sec--ink .hx-eyebrow,.hx-hero .hx-eyebrow{color:var(--blue-3)}
.hx-lead{font-size:clamp(16px,1.3vw,18.5px);font-weight:300;line-height:1.85}
.hx-rule{width:56px;height:2px;background:var(--blue);margin:26px 0}
.hx-rule--c{margin:26px auto}
.hx-center{text-align:center}
.hx-sig{font-weight:300;font-style:italic;color:var(--blue)}

/* ===== skip link + focus ===== */
.hx-skip{position:absolute;left:0;top:0;transform:translateY(-200%);z-index:2000;background:var(--blue);color:#fff;
  padding:12px 22px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.hx-skip:focus{transform:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue-2);outline-offset:3px;border-radius:2px}

/* ===== layout ===== */
.hx-wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.hx-sec{padding:var(--pad) 0;position:relative}
.hx-sec--paper{background:var(--paper)}
.hx-sec--white{background:var(--white)}
.hx-sec--ink{background:var(--ink);color:#B9CBDD}
.hx-sec--ink .hx-h2,.hx-sec--ink h3{color:#fff}
.hx-sec__head{max-width:720px;margin:0 auto 64px;text-align:center}
.hx-sec__head .hx-h2{margin-bottom:22px}
.hx-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,88px);align-items:center}
.hx-grid{display:grid;gap:26px}
.hx-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hx-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hx-p+.hx-p{margin-top:18px}

/* ===== buttons ===== */
.hx-btn{display:inline-flex;align-items:center;gap:12px;font-size:11px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;padding:17px 40px;border:1px solid transparent;border-radius:999px;
  transition:.35s var(--ease);cursor:pointer;white-space:nowrap}
.hx-btn span{transition:transform .35s var(--ease)}
.hx-btn:hover span{transform:translateX(5px)}
.hx-btn--pri{background:var(--blue-btn);color:#fff;border-color:var(--blue-btn);box-shadow:0 14px 34px -12px rgba(33,102,192,.7)}
.hx-btn--pri:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.hx-btn--ghost{border-color:rgba(255,255,255,.42);color:#fff}
.hx-btn--ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.hx-btn--dark{border-color:var(--line);color:var(--head)}
.hx-btn--dark:hover{border-color:var(--blue);color:var(--blue-txt)}
.hx-btn--white{background:#fff;color:var(--ink);border-color:#fff}
.hx-btn--white:hover{background:var(--sky)}

/* ===== header ===== */
.hx-head{position:fixed;inset:0 0 auto;z-index:900;transition:.4s var(--ease);border-bottom:1px solid transparent}
/* The header is fixed, so the WordPress admin bar sits on top of it and clipped
   the crown of the hexagon for anyone logged in. Drop the header below the bar,
   and give the lockup a little breathing room above it either way. */
.admin-bar .hx-head{top:32px}
@media screen and (max-width:782px){.admin-bar .hx-head{top:46px}}
.hx-head.is-stuck{background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-bottom-color:var(--line);
  box-shadow:0 10px 40px -28px rgba(8,25,42,.6)}
.hx-head__in{display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:96px;padding-top:8px}
/* The official lockup, both variants inline. The header is transparent over the
   hero and solid white once stuck, so it swaps between two separately drawn files
   rather than filtering one. */
.hx-logo{display:flex;align-items:center;flex:none}
.hx-logo img{height:52px;width:auto}
.hx-logo .hx-mark{width:47px;height:52px;flex:none}
.hx-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.hx-lockup{height:52px;width:auto;display:block;flex:none}
.hx-lockup--colour{display:none}
.is-stuck .hx-lockup--white{display:none}
.is-stuck .hx-lockup--colour{display:block}
.hx-logo--foot .hx-lockup{height:60px}
.hx-drawer .hx-lockup--colour{display:none}
.hx-nav{display:flex;gap:32px;align-items:center}
.hx-nav a{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.82);
  padding:8px 0;position:relative;transition:color .3s}
.hx-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--blue-3);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.hx-nav a:hover,.hx-nav .current-menu-item>a{color:#fff}
.hx-nav .current-menu-item>a::after{transform:scaleX(1)}
.is-stuck .hx-nav a{color:#41586E}
.is-stuck .hx-nav a:hover,.is-stuck .hx-nav .current-menu-item>a{color:var(--blue-txt)}
.hx-head__cta{display:inline-flex}
.hx-burger{display:none;flex-direction:column;gap:5px;padding:10px;border:0;background:none;cursor:pointer}
.hx-burger span{width:24px;height:1.5px;background:#fff;display:block;transition:.3s}
.is-stuck .hx-burger span{background:var(--ink)}
.hx-drawer{position:fixed;inset:0;z-index:890;background:rgba(6,20,35,.98);backdrop-filter:blur(16px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  opacity:0;pointer-events:none;transition:.4s var(--ease)}
.hx-drawer.is-open{opacity:1;pointer-events:auto}
.hx-drawer a{font-size:15px;font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:#fff;padding:14px 0}
body.hx-locked{overflow:hidden}
.hx-open .hx-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg);background:#fff}
.hx-open .hx-burger span:nth-child(2){opacity:0}
.hx-open .hx-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);background:#fff}

/* ===== hero ===== */
.hx-hero{position:relative;min-height:clamp(580px,100vh,880px);min-height:clamp(580px,100svh,880px);display:flex;align-items:center;overflow:hidden;background:var(--ink)}
.hx-hero__scrim{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:radial-gradient(120% 80% at 15% 20%,rgba(62,135,217,.36),transparent 60%),
             radial-gradient(90% 60% at 85% 90%,rgba(87,187,245,.16),transparent 65%),
             linear-gradient(180deg,rgba(6,12,55,.35) 0%,rgba(6,12,55,.88) 100%)}
.hx-hero__lattice{position:absolute;inset:0;z-index:2;opacity:.42;pointer-events:none}
.hx-hero__nodes{position:absolute;inset:0;z-index:3;pointer-events:none}
.hx-node{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--blue-3);
  box-shadow:0 0 12px 3px rgba(87,187,245,.5);animation:hxTwinkle 5s ease-in-out infinite}
@keyframes hxTwinkle{0%,100%{opacity:.2;transform:scale(.75)}50%{opacity:1;transform:scale(1.2)}}
.hx-hero__in{position:relative;z-index:4;padding:150px 0 90px;max-width:920px}
.hx-hero__sub{color:#A9BDD4;max-width:620px;margin:28px 0 44px;font-size:clamp(16px,1.3vw,18.5px);font-weight:300}
.hx-hero__btns{display:flex;gap:16px;flex-wrap:wrap}
.hx-hero--sub{min-height:0}
.hx-hero--sub .hx-hero__in{padding:190px 0 96px}

/* ===== stat strip ===== */
.hx-stats{background:var(--ink-2);padding:64px 0;position:relative;z-index:3;border-top:1px solid rgba(255,255,255,.07)}
.hx-stats__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.09)}
.hx-stat{text-align:center;padding:24px 16px;background:var(--ink-2)}
.hx-stat b{display:block;font-size:clamp(28px,3.2vw,40px);font-weight:200;letter-spacing:.04em;color:#fff;line-height:1}
.hx-stat b em{font-style:normal;color:var(--sand)}
.hx-stat span{display:block;margin-top:12px;font-size:10.5px;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:#8CA6C0}

/* ===== cards (divisions) ===== */
.hx-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:8px}
.hx-card{position:relative;border-radius:20px;overflow:hidden;background:var(--ink);min-height:460px;
  display:flex;align-items:flex-end;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.hx-card__bg{position:absolute;inset:0;background:linear-gradient(165deg,var(--ink-2),var(--ink-deep));z-index:0}
/* The scrim sits ON TOP of the photograph, so the copy keeps its contrast no
   matter what the image behind it is doing. */
.hx-card__bg::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(6,12,55,.52) 0%,rgba(6,12,55,.82) 34%,rgba(6,12,55,.96) 62%,rgba(6,12,55,.98) 100%),
             radial-gradient(90% 60% at 80% 0%,rgba(62,135,217,.26),transparent 62%)}
.hx-card__in{position:relative;z-index:2;padding:40px 34px}
.hx-card__num{font-size:12px;font-weight:600;letter-spacing:.28em;color:var(--blue-3);display:block;margin-bottom:16px}
.hx-card h3{color:#fff;margin-bottom:14px}
.hx-card p{color:#A9BDD4;font-size:15px}
.hx-card__more{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-size:11px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue-3)}
.hx-card:hover{transform:translateY(-8px);box-shadow:0 40px 70px -40px rgba(6,20,35,.8)}

/* ===== tiles (portfolio) ===== */
.hx-tile{background:#fff;border:1px solid var(--line);border-radius:16px;padding:38px 30px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s}
.hx-tile:hover{transform:translateY(-7px);border-color:#C6DCEF;box-shadow:0 30px 60px -38px rgba(8,25,42,.45)}
.hx-tile__ico{width:50px;height:55px;background:linear-gradient(155deg,var(--blue),var(--ink-2));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:grid;place-items:center;margin-bottom:24px;transition:transform .5s var(--ease)}
.hx-tile:hover .hx-tile__ico{transform:translateY(-3px) rotate(-6deg)}
.hx-tile__ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.5}
.hx-tile h3{margin-bottom:12px}
.hx-tile p{font-size:15px}

/* ===== brands ===== */
.hx-brands{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.hx-brand{border:1px solid var(--line);border-radius:16px;padding:40px;background:#fff;transition:.45s var(--ease)}
.hx-brand:hover{transform:translateY(-6px);box-shadow:0 30px 60px -38px rgba(8,25,42,.4)}
.hx-brand h3{margin-bottom:8px}
.hx-brand .hx-brand__sub{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--blue-txt)}
.hx-brand p{margin-top:20px;font-size:15px}
.hx-brand ul{margin-top:18px;list-style:none}
.hx-brand li{display:flex;gap:13px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.hx-brand li::before{content:"";width:9px;height:10px;flex:none;background:var(--blue);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* ===== items (why us) ===== */
.hx-item{border-top:1px solid var(--line);padding-top:30px;position:relative}
.hx-sec--ink .hx-item{border-color:rgba(255,255,255,.14)}
.hx-item__n{font-size:11px;font-weight:600;letter-spacing:.24em;color:var(--blue-txt);display:block;margin-bottom:16px}
.hx-sec--ink .hx-item__n{color:var(--blue-3)}
.hx-item h3{margin-bottom:12px}
.hx-item p{font-size:15px}

/* ===== figure / badge ===== */
.hx-figure{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#fff;padding:14px}
.hx-figure__in{position:relative;aspect-ratio:4/3.4;border-radius:12px;overflow:hidden;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--ink-2),var(--ink-deep))}
/* Centred so it never collides with the badge sitting in the bottom-left corner. */
.hx-figure__in .hx-ph{position:relative;z-index:2;text-align:center;font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:#7E9BB8;padding:0 18px;max-width:80%}
.hx-figure__badge{position:absolute;left:14px;bottom:14px;background:var(--blue);color:#fff;padding:22px 30px;border-radius:12px}
.hx-figure__badge b{display:block;font-size:26px;font-weight:200;letter-spacing:.05em}
.hx-figure__badge span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;opacity:.92}

/* ===== CTA band ===== */
.hx-cta{position:relative;overflow:hidden;background:var(--ink);text-align:center;padding:var(--pad) 0}
/* over a photograph the CTA copy still has to clear 4.5:1, so the scrim is
   opaque in the middle where the type sits and lighter at the edges. */
.hx-cta__bg{position:absolute;inset:0;z-index:1;
  background:radial-gradient(72% 66% at 50% 50%,rgba(6,12,55,.90),rgba(6,12,55,.62) 74%,rgba(6,12,55,.5) 100%),
             radial-gradient(80% 60% at 50% 0%,rgba(62,135,217,.30),transparent 65%)}
.hx-cta__in{position:relative;z-index:3}
.hx-cta .hx-h2{color:#fff}
.hx-cta p{color:#A9BDD4;max-width:620px;margin:24px auto 42px}

/* ===== contact ===== */
.hx-contact{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,80px);align-items:start}
.hx-cbox{display:flex;gap:22px;padding:28px 0;border-bottom:1px solid var(--line)}
.hx-cbox:first-of-type{border-top:1px solid var(--line);margin-top:34px}
.hx-cbox__ico{width:44px;height:44px;border-radius:11px;background:var(--sky);display:grid;place-items:center;flex:none}
.hx-cbox__ico svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.5}
.hx-cbox h3{margin-bottom:6px}
.hx-cbox p{font-size:15px}
.hx-cbox a{color:var(--blue-txt)}
.hx-note{font-size:14px;font-style:italic;color:#6D8299}

/* ===== footer ===== */
.hx-foot{background:var(--ink-deep);color:#8CA6C0;padding:86px 0 34px;font-size:15px}
.hx-foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1.3fr;gap:64px}
.hx-foot h4{color:#fff;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;margin-bottom:24px}
.hx-foot ul{list-style:none}
.hx-foot li{margin-bottom:12px}
.hx-foot a{transition:color .3s}
.hx-foot a:hover{color:var(--blue-3)}
.hx-foot__tag{font-size:15px;font-weight:300;letter-spacing:.14em;text-transform:uppercase;color:#C3D6E8;margin:22px 0 16px}
.hx-foot__bot{margin-top:66px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:#6D8AA6}

/* ===== reveal ===== */
.hx-rev{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.hx-rev.is-in{opacity:1;transform:none}

/* ===== editor content (page.php fallback) ===== */
.hx-page{padding:var(--pad) 0}
.hx-page h2,.hx-page h3{margin:34px 0 14px}
.hx-page p{margin-bottom:16px}
.hx-page ul,.hx-page ol{margin:0 0 16px 20px}
.hx-page img{border-radius:12px;margin:18px 0}

/* ===== 404 ===== */
.hx-404{min-height:70vh;display:grid;place-items:center;text-align:center;background:var(--ink);color:#A9BDD4}
.hx-404 .hx-h2{color:#fff;margin-bottom:20px}


.hx-sec,.hx-cta,.hx-figure__in{overflow:clip}

/* ===== honeycomb — the logo's own geometry, reused as a design element ===== */
.hx-comb{position:absolute;pointer-events:none;opacity:.055;color:var(--blue);z-index:0}
.hx-comb svg{width:100%;height:auto;display:block}
.hx-sec--ink .hx-comb,.hx-cta .hx-comb,.hx-hero .hx-comb{opacity:.13;color:var(--blue-3)}
.hx-comb--tr{right:-70px;top:-50px;width:300px}
.hx-comb--bl{left:-80px;bottom:-60px;width:340px}

/* honeycomb section divider */
.hx-divider{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px}
.hx-divider::before,.hx-divider::after{content:"";height:1px;flex:1;max-width:170px;background:var(--line)}
.hx-sec--ink .hx-divider::before,.hx-sec--ink .hx-divider::after{background:rgba(255,255,255,.16)}
.hx-divider svg{width:36px;height:auto;color:var(--blue);flex:none}
.hx-sec--ink .hx-divider svg{color:var(--blue-3)}

/* hexagon marker, replacing the rotated square in lists */
.hx-hexmark{width:9px;height:10px;flex:none;background:var(--blue);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hx-sec--ink .hx-hexmark{background:var(--blue-3)}

/* ===== depth =============================================================
   Cards tilt toward the pointer (--rx/--ry come from site.js), carry two
   shadows — a wide ambient one and a tight contact one — and catch a light
   edge along the top face. Soft and layered, never bevelled. */
.hx-cards,.hx-brands,.hx-grid{perspective:1500px}
.hx-card{transform-style:preserve-3d;will-change:transform;
  transform:translateY(var(--lift,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.hx-card:hover{--lift:-10px;
  box-shadow:0 4px 12px -4px rgba(6,12,55,.55),0 46px 80px -44px rgba(6,12,55,.9)}
.hx-card__edge{position:absolute;inset:0 0 auto;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:.7}
[data-tilt]{transform-style:preserve-3d;
  transform:translateY(var(--lift,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
[data-tilt].is-tilting{transition:box-shadow .5s var(--ease)}
.hx-card__glow{position:absolute;inset:auto -30% -45% -30%;height:75%;z-index:1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(87,187,245,.34),transparent 70%);
  opacity:0;transition:opacity .55s var(--ease)}
.hx-card:hover .hx-card__glow{opacity:1}

/* tiles pick up a faint honeycomb on hover */
.hx-tile{position:relative;overflow:hidden}
.hx-tile .hx-comb{opacity:0;transition:opacity .5s var(--ease);right:-58px;top:-48px;width:190px}
.hx-tile:hover .hx-comb{opacity:.085}

/* ===== hero depth =========================================================
   Four hexagon plates at four depths, a real photograph underneath, a gradient
   mesh over that, and the logo's own honeycomb as the focal geometry. Each
   layer moves a different amount against pointer and scroll (--px/--py are set
   by site.js), which is what separates them into planes. */
.hx-hero__photo{position:absolute;inset:0;z-index:0;overflow:hidden;display:block}
.hx-hero__photo img{width:100%;height:100%;object-fit:cover;display:block;
  opacity:.5;mix-blend-mode:screen;transform:scale(1.06)}
.hx-hero__mesh{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 46% at 18% 22%,rgba(62,135,217,.42),transparent 70%),
    radial-gradient(46% 42% at 84% 26%,rgba(87,187,245,.26),transparent 72%),
    radial-gradient(70% 60% at 62% 96%,rgba(14,35,115,.72),transparent 74%)}

.hx-hero__deco{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hx-plate{position:absolute;display:block;width:var(--w);height:calc(var(--w)*1.11);
  left:var(--x);top:var(--y);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(155deg,rgba(140,196,246,.20),rgba(62,135,217,.03) 62%);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.55);
  transform:translate3d(var(--px,0),var(--py,0),0);
  animation:hxFloat 22s ease-in-out infinite alternate}
.hx-plate::after{content:"";position:absolute;inset:1px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(155deg,rgba(6,12,55,.42),rgba(6,12,55,.02))}
@keyframes hxFloat{from{transform:translate3d(var(--px,0),calc(var(--py,0px) - 14px),0)}
                   to{transform:translate3d(var(--px,0),calc(var(--py,0px) + 16px),0)}}

.hx-hero__comb{position:absolute;z-index:2;right:-4%;top:14%;width:min(46vw,620px);
  pointer-events:none;color:var(--blue-3);opacity:.22;
  transform:translate3d(var(--px,0),var(--py,0),0);
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.hx-hero__comb svg{width:100%;height:auto;display:block}

/* figure panels get the honeycomb as a watermark */
.hx-figure__in{position:relative}
.hx-figure__in .hx-comb{opacity:.14;color:var(--blue-3);right:-40px;bottom:-40px;top:auto;width:210px}


/* ===== product shot — hexagon-masked, floated over the brand colours =====
   Built to hold a real product photograph on a transparent background. Until the
   manufacturer supplies one (see IMAGE-CREDITS.md) it shows a styled placeholder,
   never a stock or invented image. */
.hx-hexshot{position:relative;display:grid;place-items:center;padding:26px;isolation:isolate}
.hx-hexshot__bg{position:absolute;inset:0;z-index:0;border-radius:22px;
  background:radial-gradient(70% 60% at 30% 25%,rgba(87,187,245,.22),transparent 65%),
             linear-gradient(160deg,var(--ink-2),var(--ink-deep))}
.hx-hexshot .hx-comb{opacity:.16;color:var(--blue-3);right:-30px;top:-30px;width:200px;z-index:1}
.hx-hexshot__hex{position:relative;z-index:2;width:min(340px,86%);aspect-ratio:1/1.1;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.02));
  display:grid;place-items:center;text-align:center;padding:22px;
  border:1px solid rgba(87,187,245,.18)}
.hx-hexshot__hex img{width:100%;height:100%;object-fit:contain;display:block}
.hx-hexshot__ph{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:#93AECD;line-height:1.9}
.hx-hexshot__cap{position:relative;z-index:2;margin-top:18px;font-size:10.5px;font-weight:600;
  letter-spacing:.24em;text-transform:uppercase;color:var(--blue-3)}

/* ===== responsive ===== */
@media(max-width:1080px){
  .hx-cards,.hx-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hx-nav,.hx-head__cta{display:none}
  .hx-burger{display:flex}
  .hx-split,.hx-contact,.hx-foot__grid{grid-template-columns:1fr;gap:44px}
  .hx-grid--3{grid-template-columns:1fr}
  .hx-stats__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-hero__in{padding:130px 0 80px}
  .hx-hero--sub .hx-hero__in{padding:150px 0 76px}
}
@media(max-width:680px){
  .hx-cards,.hx-grid--4,.hx-brands{grid-template-columns:1fr}
  .hx-wrap{padding:0 22px}
  .hx-card{min-height:380px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hx-rev{opacity:1;transform:none;transition:none}
  .hx-node{animation:none}
  .hx-plate{animation:none;transform:none}
  .hx-tile:hover .hx-tile__ico{transform:none}
  [data-tilt],.hx-card{transform:none!important}
  .hx-figure__img,.hx-card__img,.hx-hexshot__img,.hx-brand__shot{transition:none;transform:none!important}
  .hx-hero__comb{transform:none}
  .hx-card:hover{transform:none}
  .hx-btn,.hx-card,.hx-tile,.hx-brand{transition:none}
}


/* ===== photography =======================================================
   Every photograph here was re-hosted from Salim's own hexamedfzc.com library.
   WebP first with a JPEG/PNG fallback (see hexksa_photo()), lazy-loaded below
   the fold, and given real alt text. */
.hx-photo{display:block;width:100%;height:auto}
picture{display:block}

.hx-backdrop,.hx-hero__photo,.hx-cta__photo{position:absolute;inset:0;z-index:0;overflow:hidden;display:block}
.hx-cta__photo img{width:100%;height:100%;object-fit:cover;opacity:.55;
  mix-blend-mode:luminosity;transform:scale(1.08)}

/* the "who we are" / capability figures now hold a real photograph */
.hx-figure{transform-style:preserve-3d}
.hx-figure.has-photo .hx-figure__in{display:block;background:var(--ink)}
.hx-figure__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.hx-figure.has-photo:hover .hx-figure__img{transform:scale(1.045)}
.hx-figure__sheen{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(150deg,rgba(255,255,255,.16),transparent 42%),
             linear-gradient(0deg,rgba(6,12,55,.36),transparent 46%)}
.hx-figure.has-photo{box-shadow:0 6px 16px -8px rgba(8,25,42,.35),0 44px 80px -50px rgba(8,25,42,.6)}

/* hexagon-masked product shots floating over the brand gradient */
/* scenic photography fills the hexagon; product cut-outs float inside it */
.hx-hexshot.is-cover .hx-hexshot__hex{padding:0;background:none;border:0}
.hx-hexshot.is-cover picture{width:100%;height:100%}
.hx-hexshot.is-cover .hx-hexshot__img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1s var(--ease)}
.hx-hexshot.is-cover:hover .hx-hexshot__img{transform:scale(1.06)}

.hx-hexshot.is-cutout .hx-hexshot__hex{
  background:linear-gradient(155deg,rgba(255,255,255,.10),rgba(255,255,255,.015));
  border:1px solid rgba(87,187,245,.20);padding:12%}
.hx-hexshot.is-cutout .hx-hexshot__img{width:100%;height:auto;object-fit:contain;display:block;
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.5));transition:transform .7s var(--ease)}
.hx-hexshot.is-cutout:hover .hx-hexshot__img{transform:translateY(-7px) scale(1.04)}

/* capability cards: photograph, then gradient, then type */
.hx-card__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:.8;transition:opacity .6s var(--ease),transform 1.2s var(--ease)}
.hx-card:hover .hx-card__img{opacity:1;transform:scale(1.05)}
.hx-card__bg{isolation:isolate}
.hx-card__bg picture{position:absolute;inset:0;z-index:1}

/* a product cut-out lifting out of its brand card */
.hx-brand{transform-style:preserve-3d}
.hx-brand.has-shot{position:relative}
.hx-brand__shot{position:absolute;right:-18px;top:-42px;width:172px;z-index:3;
  pointer-events:none;transition:transform .6s var(--ease)}
.hx-brand__shot img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 26px 30px rgba(8,25,42,.34))}
.hx-brand.has-shot:hover .hx-brand__shot{transform:translateY(-8px) rotate(-2deg)}
.hx-brand.has-shot h3{padding-right:150px}

.hx-stat__plus{font-style:normal;color:var(--sand);font-size:clamp(28px,3.2vw,40px);
  font-weight:200;line-height:1}
.hx-stat b{display:inline-block}

@media (max-width:900px){
  .hx-brand__shot{width:124px;right:-8px;top:-30px}
  .hx-brand.has-shot h3{padding-right:106px}
  .hx-hero__comb{width:78vw;right:-22%;top:auto;bottom:-6%;opacity:.12}
  .hx-lockup{height:44px}
  .hx-logo--foot .hx-lockup{height:52px}
}


/* ===== product shot strip — the three Jalupro cartons =====================
   Real photography supplied by Salim, 27 Aug 2026. Shown at a size that
   respects it rather than squeezed into a thumbnail row. */
.hx-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3.4vw,52px);align-items:end;margin-top:46px}
.hx-shot{margin:0;text-align:center}
.hx-shot__img{width:100%;height:auto;display:block;
  filter:drop-shadow(0 20px 26px rgba(8,25,42,.26));
  transition:transform .55s var(--ease)}
.hx-shot:hover .hx-shot__img{transform:translateY(-7px) scale(1.03)}
.hx-shot figcaption{margin-top:14px;font-size:10px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--blue-txt)}
.hx-sec--ink .hx-shot figcaption{color:var(--blue-3)}
.hx-brand .hx-shots{margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
@media (max-width:620px){.hx-shots{grid-template-columns:1fr;gap:32px}}