/* ===================================================================
   JCW — SAMPLE 3 : "INDUSTRIAL GRID"
   Bold asymmetric grid · hexagon motif · thumbnail slider
   =================================================================== */
:root{
  --white:#fff;--black:#111111;--orange:#F58220;--orange-2:#ff9c47;
  --grey-l:#F7F7F7;--grey-m:#E6E6E6;--graphite:#333333;--muted:#7d7d7d;
  --head:'Poppins',sans-serif;--body:'Inter',sans-serif;
  --ease:cubic-bezier(.16,.84,.34,1);
  --rail:72px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--graphite);background:var(--white);line-height:1.72;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--head);color:var(--black);line-height:1.1;font-weight:700;letter-spacing:-.025em}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrap{width:min(1320px,100% - 8vw);margin-inline:auto}
.jcw-page{margin-left:var(--rail)}
section{padding:118px 0}
.kick{display:inline-flex;align-items:center;gap:11px;font-family:var(--head);font-size:.7rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);margin-bottom:20px}
.kick::before{content:"";width:9px;height:10px;background:var(--orange);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.big{font-size:clamp(2rem,3.7vw,3.2rem)}

/* ---------- BUTTONS ---------- */
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;font-family:var(--head);font-weight:600;font-size:.84rem;letter-spacing:.05em;padding:18px 34px;overflow:hidden;z-index:0;transition:.5s var(--ease);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.btn span{position:relative;z-index:2;text-decoration:none}
.btn::after{content:"";position:absolute;inset:0;z-index:1;transform:translateX(-101%);transition:transform .5s var(--ease)}
.btn:hover::after{transform:translateX(0)}
.b1{background:var(--orange);color:#fff}.b1::after{background:var(--black)}
.b2{background:var(--black);color:#fff}.b2::after{background:var(--orange)}
.b3{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)}.b3::after{background:#fff}.b3:hover{color:var(--black)}
.btn:hover{transform:translateY(-3px)}

/* ---------- LEFT RAIL ---------- */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);background:var(--black);z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 0}
.rail .mark{width:34px;height:38px;background:var(--orange);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:#fff;font-family:var(--head);font-weight:700;font-size:.72rem;letter-spacing:.02em}
.rail .vert{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--head);font-size:.68rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.rail .soc{display:grid;gap:14px}
.rail .soc a{color:rgba(255,255,255,.45);transition:.4s var(--ease)}
.rail .soc a:hover{color:var(--orange);transform:translateY(-3px)}

/* ---------- HEADER ---------- */
.hdr{position:fixed;left:var(--rail);right:0;top:0;z-index:110;transition:.45s var(--ease)}
.hdr .bar{display:flex;align-items:center;justify-content:space-between;height:92px;padding:0 4vw;transition:.45s var(--ease)}
.hdr.stuck{background:#fff;box-shadow:0 8px 34px -18px rgba(0,0,0,.4)}
.hdr.stuck .bar{height:74px}
.hdr .logo img{height:44px;transition:.4s}
.mn{display:flex;gap:4px;list-style:none;align-items:center}
.mn a{display:block;padding:11px 15px;font-family:var(--head);font-size:.84rem;font-weight:500;color:rgba(255,255,255,.88);position:relative;transition:color .35s}
.hdr.stuck .mn a{color:var(--graphite)}
.mn a::before{content:"";position:absolute;left:50%;right:50%;bottom:2px;height:8px;background:var(--orange);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);opacity:0;transition:.4s var(--ease)}
.mn a:hover::before,.mn li.on a::before{opacity:1;left:calc(50% - 4px);right:calc(50% - 4px)}
.mn a:hover,.mn li.on a{color:var(--orange)}
.hr-{display:flex;align-items:center;gap:20px}
.hcall{display:flex;align-items:center;gap:12px;color:#fff}
.hdr.stuck .hcall{color:var(--black)}
.hcall .ic{width:40px;height:44px;background:rgba(245,130,32,.16);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:var(--orange)}
.hcall small{display:block;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;opacity:.6}
.hcall b{font-family:var(--head);font-size:.9rem}
.burger{display:none;flex-direction:column;gap:5px;background:0;border:0;cursor:pointer}
.burger i{width:25px;height:2px;background:#fff;display:block}
.hdr.stuck .burger i{background:var(--black)}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;min-height:700px;background:var(--black);overflow:hidden}
.sl{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease)}
.sl.on{opacity:1}
.sl .im{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.14) translateX(2%);transition:transform 9s linear}
.sl.on .im{transform:scale(1)}
.sl .msk{position:absolute;inset:0;background:linear-gradient(92deg,rgba(9,9,9,.95) 0%,rgba(9,9,9,.8) 38%,rgba(9,9,9,.22) 72%,rgba(9,9,9,.55) 100%)}
/* diagonal orange wedge */
.wedge{position:absolute;left:0;bottom:0;width:46%;height:100%;background:linear-gradient(160deg,rgba(245,130,32,.20),transparent 62%);clip-path:polygon(0 0,72% 0,42% 100%,0 100%);z-index:2;pointer-events:none}
/* hex grid texture */
.hexs{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5}
.hexs i{position:absolute;width:120px;height:134px;border:1px solid rgba(255,255,255,.09);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(26px,-32px) rotate(9deg)}}
.h-in{position:relative;z-index:6;height:100%;display:flex;align-items:center}
.h-copy{max-width:760px;color:#fff}
.h-copy .kick{color:#fff;opacity:.9}
.h-copy .kick::before{background:var(--orange)}
.h-copy h1{color:#fff;font-size:clamp(2.5rem,6.2vw,5.2rem);font-weight:800;letter-spacing:-.035em;margin-bottom:22px;text-transform:uppercase}
.h-copy h1 u{text-decoration:none;color:transparent;-webkit-text-stroke:1.5px var(--orange)}
.h-copy p{color:rgba(255,255,255,.72);font-size:1.05rem;font-weight:300;max-width:520px;margin-bottom:38px}
.h-acts{display:flex;gap:15px;flex-wrap:wrap}
.sl .an{opacity:0;transform:translateX(-38px);transition:.95s var(--ease)}
.sl.on .an{opacity:1;transform:none}
.sl.on .an:nth-child(1){transition-delay:.2s}.sl.on .an:nth-child(2){transition-delay:.34s}
.sl.on .an:nth-child(3){transition-delay:.48s}.sl.on .an:nth-child(4){transition-delay:.62s}

/* thumbnail selector (right) */
.thumbs{position:absolute;right:4vw;top:50%;transform:translateY(-50%);z-index:9;display:grid;gap:14px}
.th{width:110px;height:76px;position:relative;overflow:hidden;cursor:pointer;border:0;padding:0;background:none;filter:grayscale(1) brightness(.55);transition:.55s var(--ease);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.th img{width:100%;height:100%;object-fit:cover}
.th span{position:absolute;left:8px;top:6px;font-family:var(--head);font-size:.66rem;color:#fff;letter-spacing:.14em;z-index:2}
.th.on,.th:hover{filter:none;transform:translateX(-10px) scale(1.04)}
.th.on::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 2px var(--orange);z-index:3}
.th b{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--orange);z-index:4}
.th.on b{animation:grow 7s linear forwards}
@keyframes grow{to{width:100%}}

/* hero bottom bar */
.hbar{position:absolute;left:0;right:0;bottom:0;z-index:9;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(17,17,17,.72);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.12)}
.hb{padding:26px 30px;border-right:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:16px;position:relative;overflow:hidden;transition:.5s var(--ease)}
.hb:last-child{border-right:0}
.hb::before{content:"";position:absolute;inset:0;background:var(--orange);transform:translateY(101%);transition:transform .5s var(--ease)}
.hb:hover::before{transform:translateY(0)}
.hb>*{position:relative;z-index:2}
.hb .hx{width:38px;height:42px;background:rgba(245,130,32,.2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:var(--orange);transition:.5s}
.hb:hover .hx{background:rgba(255,255,255,.22);color:#fff}
.hb b{display:block;font-family:var(--head);color:#fff;font-size:1.6rem;line-height:1}
.hb span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);transition:.4s}
.hb:hover span{color:rgba(255,255,255,.9)}

/* ---------- ABOUT (asymmetric) ---------- */
.abt .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:76px;align-items:center}
.abt-v{position:relative;padding-bottom:60px}
.abt-v .m{clip-path:polygon(50px 0,100% 0,100% calc(100% - 50px),calc(100% - 50px) 100%,0 100%,0 50px);overflow:hidden;aspect-ratio:4/3.3}
.abt-v .m img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.abt-v:hover .m img{transform:scale(1.08)}
.abt-v .s{position:absolute;right:-20px;bottom:0;width:46%;aspect-ratio:4/3;border:10px solid #fff;overflow:hidden;box-shadow:0 30px 60px -28px rgba(0,0,0,.5)}
.abt-v .s img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.abt-v:hover .s img{transform:scale(1.1)}
.abt-v .yr{position:absolute;left:-24px;top:34px;width:104px;height:116px;background:var(--orange);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-content:center;text-align:center;color:#fff;transition:.6s var(--ease)}
.abt-v:hover .yr{transform:rotate(10deg) scale(1.06)}
.abt-v .yr b{font-family:var(--head);font-size:1.9rem;display:block;line-height:1}
.abt-v .yr span{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.abt h2{margin-bottom:22px}
.abt p{color:var(--muted);margin-bottom:18px}
.pill{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 34px}
.pill i{font-style:normal;font-family:var(--head);font-size:.76rem;font-weight:600;letter-spacing:.06em;padding:9px 17px;border:1px solid var(--grey-m);color:var(--graphite);transition:.45s var(--ease);clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.pill i:hover{background:var(--black);color:#fff;border-color:var(--black);transform:translateY(-3px)}

/* ---------- PRODUCT TABS ---------- */
.ptabs{background:var(--grey-l)}
.tabhead{display:flex;gap:0;border-bottom:1px solid var(--grey-m);margin-bottom:56px;flex-wrap:wrap}
.tabhead button{flex:1;min-width:190px;background:none;border:0;cursor:pointer;padding:24px 18px;font-family:var(--head);font-size:.94rem;font-weight:600;color:var(--muted);position:relative;text-align:left;transition:.45s var(--ease)}
.tabhead button small{display:block;font-family:var(--body);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;opacity:.7;margin-top:4px}
.tabhead button::after{content:"";position:absolute;left:0;bottom:-1px;height:3px;width:0;background:var(--orange);transition:width .5s var(--ease)}
.tabhead button:hover{color:var(--black)}
.tabhead button.on{color:var(--black)}
.tabhead button.on::after{width:100%}
.tp{display:none;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.tp.on{display:grid;animation:fade .7s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.tp-img{position:relative;overflow:hidden;aspect-ratio:4/3;clip-path:polygon(46px 0,100% 0,100% calc(100% - 46px),calc(100% - 46px) 100%,0 100%,0 46px)}
.tp-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tp-img:hover img{transform:scale(1.07)}
.tp-img .cf{position:absolute;right:0;top:0;background:var(--orange);color:#fff;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.14em;padding:12px 20px}
.tp h3{font-size:clamp(1.5rem,2.5vw,2.1rem);margin-bottom:16px}
.tp p{color:var(--muted);margin-bottom:26px}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--grey-m);border:1px solid var(--grey-m);margin-bottom:30px}
.spec div{background:#fff;padding:15px 18px;transition:.4s var(--ease)}
.spec div:hover{background:var(--black)}
.spec small{display:block;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);transition:.4s}
.spec b{font-family:var(--head);font-size:.94rem;color:var(--black);transition:.4s}
.spec div:hover small{color:rgba(255,255,255,.55)}.spec div:hover b{color:#fff}

/* ---------- WHY : hex cards ---------- */
.why{background:#fff}
.hexgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hc{border:1px solid var(--grey-m);padding:44px 30px;position:relative;overflow:hidden;transition:.55s var(--ease);clip-path:polygon(26px 0,100% 0,100% calc(100% - 26px),calc(100% - 26px) 100%,0 100%,0 26px)}
.hc::before{content:"";position:absolute;inset:0;background:var(--black);transform:translateY(101%);transition:transform .55s var(--ease);z-index:0}
.hc>*{position:relative;z-index:2}
.hc:hover::before{transform:translateY(0)}
.hc:hover{border-color:var(--black);transform:translateY(-8px)}
.hc .hx{width:56px;height:62px;background:var(--grey-l);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:var(--orange);margin-bottom:24px;transition:.55s var(--ease)}
.hc:hover .hx{background:var(--orange);color:#fff;transform:rotate(-10deg)}
.hc h3{font-size:1.04rem;margin-bottom:10px;transition:color .5s}
.hc p{font-size:.89rem;color:var(--muted);transition:color .5s}
.hc:hover h3{color:#fff}.hc:hover p{color:rgba(255,255,255,.62)}
.hc em{position:absolute;right:20px;bottom:8px;font-style:normal;font-family:var(--head);font-weight:800;font-size:3.6rem;color:var(--grey-l);z-index:1;transition:.55s var(--ease)}
.hc:hover em{color:rgba(255,255,255,.07)}

/* ---------- PROCESS : dark strip ---------- */
.pstrip{background:var(--black);color:rgba(255,255,255,.65)}
.pstrip h2{color:#fff}
.pline{display:grid;grid-template-columns:repeat(7,1fr);margin-top:56px;border-top:1px solid rgba(255,255,255,.14)}
.pstep{padding:34px 16px 30px;border-right:1px solid rgba(255,255,255,.12);position:relative;transition:.5s var(--ease)}
.pstep:last-child{border-right:0}
.pstep::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--orange);transition:width .6s var(--ease)}
.pstep:hover::after{width:100%}
.pstep:hover{background:rgba(255,255,255,.04)}
.pstep b{font-family:var(--head);font-size:.72rem;letter-spacing:.26em;color:var(--orange);display:block;margin-bottom:16px}
.pstep h4{color:#fff;font-size:.94rem;margin-bottom:5px}
.pstep span{font-size:.76rem;color:rgba(255,255,255,.45)}

/* ---------- INDUSTRIES : scroller ---------- */
.iscroll{overflow:hidden;margin-top:50px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.itrack{display:flex;gap:18px;width:max-content;animation:slide 42s linear infinite}
.iscroll:hover .itrack{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ic{width:250px;height:300px;position:relative;overflow:hidden;flex:0 0 auto;background:var(--black);clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
.ic img{width:100%;height:100%;object-fit:cover;opacity:.5;transition:.7s var(--ease)}
.ic:hover img{opacity:.85;transform:scale(1.1)}
.ic .t{position:absolute;left:0;right:0;bottom:0;padding:24px 22px;z-index:2;background:linear-gradient(to top,rgba(10,10,10,.94),transparent)}
.ic .t h4{color:#fff;font-size:1.02rem}
.ic .t span{font-size:.74rem;color:var(--orange);letter-spacing:.14em;text-transform:uppercase}

/* ---------- QUALITY BLOCK ---------- */
.qb{padding:0;display:grid;grid-template-columns:.9fr 1.1fr;align-items:stretch}
.qb-l{background:var(--orange);color:#fff;padding:96px 5vw;display:flex;flex-direction:column;justify-content:center}
.qb-l h2{color:#fff;margin-bottom:20px}
.qb-l>p{color:rgba(255,255,255,.88);margin-bottom:34px;font-weight:300}
.qb-l .kick{color:#fff}.qb-l .kick::before{background:#fff}
.qmet{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.3);margin-bottom:36px}
.qmet div{background:var(--orange);padding:22px 20px;transition:.45s var(--ease)}
.qmet div:hover{background:var(--black)}
.qmet b{font-family:var(--head);font-size:1.7rem;display:block;line-height:1}
.qmet span{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8}
.qb-r{position:relative;overflow:hidden;min-height:560px;background:#000}
.qb-r img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)}
.qb-r:hover img{transform:scale(1.06)}
.qb-r .float{position:absolute;left:40px;bottom:40px;background:#fff;padding:22px 26px;max-width:300px;box-shadow:0 30px 60px -26px rgba(0,0,0,.6);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.qb-r .float b{font-family:var(--head);display:block;color:var(--black);margin-bottom:4px}
.qb-r .float span{font-size:.84rem;color:var(--muted)}

/* ---------- INFRA MOSAIC ---------- */
.mos{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:180px;gap:14px;margin-top:52px}
.mi{position:relative;overflow:hidden;background:var(--grey-l)}
.mi img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.mi::before{content:"";position:absolute;inset:0;background:var(--orange);opacity:0;mix-blend-mode:multiply;transition:opacity .5s;z-index:2}
.mi:hover::before{opacity:.5}
.mi:hover img{transform:scale(1.1)}
.mi span{position:absolute;left:20px;bottom:16px;z-index:3;color:#fff;font-family:var(--head);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(14px);transition:.5s var(--ease)}
.mi:hover span{opacity:1;transform:none}
.m1{grid-column:span 3;grid-row:span 2}.m2{grid-column:span 3}
.m3{grid-column:span 2}.m4{grid-column:span 2}.m5{grid-column:span 2}

/* ---------- CTA ---------- */
.cta2{background:var(--black);position:relative;overflow:hidden;padding:0}
.cta2 .im{position:absolute;inset:0;background:var(--cta-img) center/cover;opacity:.2}
.cta2 .wedge2{position:absolute;right:0;top:0;bottom:0;width:44%;background:var(--orange);clip-path:polygon(28% 0,100% 0,100% 100%,0 100%)}
.cta2 .in{position:relative;z-index:3;padding:96px 0;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap}
.cta2 h2{color:#fff;max-width:640px}
.cta2 p{color:rgba(255,255,255,.66);margin-top:12px}

/* ---------- FOOTER ---------- */
footer{background:#0d0d0d;color:rgba(255,255,255,.6);padding:88px 0 0}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:52px;padding-bottom:62px}
.flogo{height:46px;filter:brightness(0) invert(1);margin-bottom:22px}
footer p{font-size:.89rem}
.fh{font-family:var(--head);color:#fff;font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;margin-bottom:24px;display:flex;align-items:center;gap:9px}
.fh::before{content:"";width:8px;height:9px;background:var(--orange);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.fl{list-style:none;display:grid;gap:12px}
.fl a{font-size:.89rem;transition:.4s var(--ease);display:inline-block}
.fl a:hover{color:var(--orange);transform:translateX(7px)}
.fc div{display:flex;gap:12px;margin-bottom:16px;font-size:.88rem;line-height:1.6}
.fc svg{flex:0 0 17px;margin-top:4px;color:var(--orange)}
.fnl{display:flex;margin-top:20px;background:rgba(255,255,255,.06)}
.fnl input{flex:1;background:transparent;border:0;outline:0;padding:14px 16px;color:#fff;font-family:var(--body);font-size:.86rem}
.fnl button{background:var(--orange);border:0;color:#fff;padding:0 22px;cursor:pointer;font-size:1.05rem;transition:.4s}
.fnl button:hover{background:#fff;color:var(--orange)}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:24px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.81rem}
.fbot a:hover{color:var(--orange)}

/* ---------- REVEAL ---------- */
.rv{opacity:0;transform:translateY(48px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1150px){
  .mn,.hcall{display:none}.burger{display:flex}
  .thumbs{right:auto;left:4vw;top:auto;bottom:150px;transform:none;grid-auto-flow:column}
  .th{width:82px;height:58px}
  .abt .wrap,.tp,.qb{grid-template-columns:1fr;gap:56px}
  .hexgrid{grid-template-columns:1fr 1fr}
  .pline{grid-template-columns:repeat(4,1fr)}
  .pstep{border-bottom:1px solid rgba(255,255,255,.12)}
  .mos{grid-template-columns:repeat(4,1fr)}
  .m1{grid-column:span 4}.m2{grid-column:span 4}.m3,.m4,.m5{grid-column:span 2}
  .fg{grid-template-columns:1fr 1fr}
  .qb-r{min-height:380px}
}
@media(max-width:680px){
  :root{--rail:52px}
  section{padding:76px 0}
  .hbar{grid-template-columns:1fr 1fr}
  .hb{padding:16px 14px;gap:10px}
  .hb b{font-size:1.2rem}
  .hexgrid,.pline,.fg,.spec,.qmet{grid-template-columns:1fr}
  .mos{grid-template-columns:1fr 1fr;grid-auto-rows:150px}
  .m1,.m2{grid-column:span 2}.m3,.m4,.m5{grid-column:span 1}
  .rail .vert{display:none}
  .tabhead button{min-width:50%}
  .qb-l{padding:64px 7vw}
}
/* ===================================================================
   WORDPRESS ADDITIONS — JCW THEME
   Everything below is required by WordPress and was not in the sample.
   =================================================================== */

/* ---------- WP core classes ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;left:12px;top:12px;z-index:9999;background:var(--orange);color:#fff;padding:12px 20px;width:auto;height:auto;clip:auto}
.alignleft{float:left;margin:0 28px 20px 0}
.alignright{float:right;margin:0 0 20px 28px}
.aligncenter{margin-inline:auto;display:block}
.alignwide{width:min(1500px,100% - 8vw);margin-inline:auto}
.alignfull{width:100%;margin-inline:0;max-width:none}
.wp-caption{max-width:100%}
.wp-caption-text,figcaption{font-size:.82rem;color:var(--muted);padding-top:10px}
.sticky,.bypostauthor{display:block}
.wp-block-image img{height:auto}
.admin-bar .hdr{top:32px}
.admin-bar .rail{top:32px}
@media(max-width:782px){.admin-bar .hdr,.admin-bar .rail{top:46px}}

/* ---------- MOBILE MENU ---------- */
.mob{position:fixed;inset:0 0 0 auto;width:min(400px,86vw);background:var(--black);z-index:200;transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;padding:26px 30px;overflow-y:auto}
.mob.open{transform:none}
.mob-x{align-self:flex-end;background:0;border:0;color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;padding:4px 8px;transition:color .3s}
.mob-x:hover{color:var(--orange)}
.mob ul{list-style:none;margin-top:24px}
.mob ul li{border-bottom:1px solid rgba(255,255,255,.1)}
.mob ul a{display:block;padding:16px 4px;font-family:var(--head);font-size:1rem;font-weight:500;color:#fff;transition:.4s var(--ease)}
.mob ul a:hover{color:var(--orange);padding-left:14px}
.mob .sub-menu{margin:0 0 10px 14px}
.mob .sub-menu a{font-size:.88rem;font-weight:400;color:rgba(255,255,255,.65);padding:11px 4px}
.mob-foot{margin-top:auto;padding-top:30px;color:rgba(255,255,255,.55);font-size:.86rem;display:grid;gap:10px}
.mob-foot a:hover{color:var(--orange)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);z-index:190;opacity:0;visibility:hidden;transition:.4s}
.scrim.open{opacity:1;visibility:visible}
body.locked{overflow:hidden}

/* ---------- DESKTOP DROPDOWN ---------- */
.mn li{position:relative}
.mn .sub-menu{position:absolute;top:100%;left:0;min-width:270px;background:#fff;box-shadow:0 26px 54px -22px rgba(0,0,0,.34);padding:10px;list-style:none;opacity:0;visibility:hidden;transform:translateY(14px);transition:.4s var(--ease);border-top:3px solid var(--orange)}
.mn li:hover>.sub-menu{opacity:1;visibility:visible;transform:none}
.mn .sub-menu a{padding:12px 16px;color:var(--graphite);font-size:.84rem;font-weight:400}
.mn .sub-menu a::before{display:none}
.mn .sub-menu a:hover{background:var(--grey-l);color:var(--orange);padding-left:24px}

/* ---------- INNER PAGE HERO ---------- */
.phero{position:relative;min-height:420px;display:flex;align-items:flex-end;background:var(--black);overflow:hidden;padding:0 0 62px}
.phero .pim{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.42;transform:scale(1.06);animation:phz 14s ease-out forwards}
@keyframes phz{to{transform:scale(1)}}
.phero::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(9,9,9,.94),rgba(9,9,9,.5) 70%,rgba(245,130,32,.28))}
.phero .wrap{position:relative;z-index:3;padding-top:150px}
.phero h1{color:#fff;font-size:clamp(2rem,4.4vw,3.5rem);text-transform:uppercase;letter-spacing:-.03em}
.crumb{display:flex;gap:10px;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.6);margin-top:16px;font-family:var(--head);letter-spacing:.08em}
.crumb a{transition:color .35s}
.crumb a:hover{color:var(--orange)}
.crumb span{color:var(--orange)}

/* ---------- FORMS ---------- */
.jform{display:grid;gap:18px}
.jf2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.jform label{display:block;font-family:var(--head);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--black);margin-bottom:9px}
.jform input[type=text],.jform input[type=email],.jform input[type=tel],.jform select,.jform textarea{
  width:100%;border:1px solid var(--grey-m);background:#fff;padding:15px 17px;font-family:var(--body);font-size:.94rem;color:var(--graphite);outline:0;transition:.4s var(--ease)}
.jform textarea{min-height:150px;resize:vertical}
.jform input:focus,.jform select:focus,.jform textarea:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(245,130,32,.13)}
.jform .hp{position:absolute;left:-9999px}
.jnote{font-size:.82rem;color:var(--muted)}
.jmsg{padding:16px 20px;font-size:.9rem;margin-bottom:22px;border-left:3px solid}
.jmsg.ok{background:#f2fbf4;border-color:#2f9e50;color:#1e6b36}
.jmsg.err{background:#fef4f2;border-color:#d9452c;color:#932e1c}
.jform button{border:0;cursor:pointer;font-family:var(--head)}

/* ---------- CONTACT LAYOUT ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1.25fr;gap:60px;align-items:start}
.cinfo{display:grid;gap:2px}
.cinfo .ci{display:flex;gap:16px;padding:22px;border:1px solid var(--grey-m);transition:.45s var(--ease);align-items:flex-start;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.cinfo .ci:hover{background:var(--black);border-color:var(--black);transform:translateX(6px)}
.cinfo .ci svg{flex:0 0 20px;margin-top:4px;color:var(--orange)}
.cinfo .ci b{display:block;font-family:var(--head);font-size:.92rem;color:var(--black);margin-bottom:3px;transition:color .4s}
.cinfo .ci span{font-size:.89rem;color:var(--muted);transition:color .4s}
.cinfo .ci:hover b{color:#fff}
.cinfo .ci:hover span{color:rgba(255,255,255,.7)}
.cmap{margin-top:0;line-height:0;filter:grayscale(1);transition:filter .6s}
.cmap:hover{filter:none}
.cmap iframe{width:100%;height:440px;border:0}

/* ---------- BLOG / ARCHIVE ---------- */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.bcard{border:1px solid var(--grey-m);transition:.5s var(--ease);display:flex;flex-direction:column;clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px)}
.bcard:hover{transform:translateY(-8px);box-shadow:0 30px 58px -28px rgba(0,0,0,.4);border-color:transparent}
.bthumb{aspect-ratio:16/10;overflow:hidden;background:var(--grey-l)}
.bthumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.bcard:hover .bthumb img{transform:scale(1.08)}
.bbody{padding:28px 26px;flex:1;display:flex;flex-direction:column}
.bmeta{font-family:var(--head);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin-bottom:12px}
.bcard h3{font-size:1.1rem;margin-bottom:10px}
.bcard p{font-size:.9rem;color:var(--muted);flex:1}
.bmore{margin-top:18px;font-family:var(--head);font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--black);display:inline-flex;gap:9px;align-items:center;transition:.4s var(--ease)}
.bmore:hover{color:var(--orange);gap:15px}

/* ---------- SINGLE / PAGE CONTENT ---------- */
.entry{max-width:820px}
.entry.wide{max-width:none}
.entry h2{font-size:1.7rem;margin:44px 0 16px}
.entry h3{font-size:1.28rem;margin:34px 0 12px}
.entry h4{font-size:1.06rem;margin:26px 0 10px}
.entry p{margin-bottom:20px}
.entry ul,.entry ol{margin:0 0 22px 22px}
.entry li{margin-bottom:9px}
.entry a{color:var(--orange);text-decoration:underline;text-underline-offset:3px}
.entry a:hover{color:var(--black)}
.entry blockquote{border-left:3px solid var(--orange);padding:6px 0 6px 26px;margin:30px 0;font-size:1.08rem;color:var(--black);font-family:var(--head);font-weight:500}
.entry img{margin:26px 0}
.entry table{width:100%;border-collapse:collapse;margin-bottom:26px;font-size:.92rem}
.entry th,.entry td{border:1px solid var(--grey-m);padding:13px 16px;text-align:left}
.entry th{background:var(--grey-l);font-family:var(--head);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.entry tr:hover td{background:#fffaf5}

/* ---------- PAGINATION ---------- */
.pag{display:flex;gap:9px;justify-content:center;margin-top:56px;flex-wrap:wrap}
.pag a,.pag span{min-width:48px;height:48px;display:grid;place-items:center;border:1px solid var(--grey-m);font-family:var(--head);font-size:.88rem;font-weight:600;transition:.4s var(--ease);padding:0 14px}
.pag a:hover{background:var(--black);color:#fff;border-color:var(--black)}
.pag .current{background:var(--orange);color:#fff;border-color:var(--orange)}

/* ---------- DOWNLOADS / CERTIFICATES ---------- */
.dls{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dl{display:flex;align-items:center;gap:18px;padding:24px 26px;border:1px solid var(--grey-m);transition:.5s var(--ease);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.dl:hover{background:var(--black);border-color:var(--black);transform:translateY(-6px)}
.dl .dic{width:46px;height:52px;flex:0 0 46px;background:rgba(245,130,32,.13);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);display:grid;place-items:center;color:var(--orange);transition:.5s}
.dl:hover .dic{background:var(--orange);color:#fff}
.dl b{display:block;font-family:var(--head);font-size:.95rem;color:var(--black);transition:color .4s}
.dl span{font-size:.8rem;color:var(--muted);transition:color .4s}
.dl:hover b{color:#fff}.dl:hover span{color:rgba(255,255,255,.6)}

/* ---------- 404 / EMPTY ---------- */
.mid{text-align:center;padding:140px 0;max-width:600px;margin-inline:auto}
.mid .code{font-family:var(--head);font-size:clamp(5rem,16vw,11rem);font-weight:800;line-height:1;color:var(--grey-m);letter-spacing:-.05em}
.mid h1{margin:10px 0 14px;font-size:clamp(1.5rem,3vw,2.2rem)}
.mid p{color:var(--muted);margin-bottom:30px}

/* ---------- GUTENBERG PATTERN HELPERS ---------- */
.jcw-band{background:var(--grey-l);padding:70px 8%;clip-path:polygon(40px 0,100% 0,100% calc(100% - 40px),calc(100% - 40px) 100%,0 100%,0 40px)}
.jcw-dark{background:var(--black);color:rgba(255,255,255,.7);padding:70px 8%}
.jcw-dark h2,.jcw-dark h3{color:#fff}
.has-jcw-orange-color{color:var(--orange)!important}
.has-jcw-orange-background-color{background-color:var(--orange)!important}
.has-jcw-black-background-color{background-color:var(--black)!important}
.has-jcw-grey-background-color{background-color:var(--grey-l)!important}

/* ---------- MISC RESPONSIVE ---------- */
@media(max-width:1150px){
  .cgrid{grid-template-columns:1fr;gap:44px}
  .bgrid{grid-template-columns:1fr 1fr}
  .dls{grid-template-columns:1fr 1fr}
  .phero{min-height:340px}
  .phero .wrap{padding-top:130px}
}
@media(max-width:680px){
  .jf2,.bgrid,.dls{grid-template-columns:1fr}
  .cmap iframe{height:320px}
  .entry h2{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ===================================================================
   v1.0.1 FIXES
   1. .page renamed to .jcw-page — WordPress puts a class of "page" on
      <body> for every static page, which made the offset apply twice
      and left a white strip beside the black rail.
   2. Two-state logo instead of a brightness/invert filter, so the
      orange survives on the dark hero.
   3. Header no longer wraps the menu or the phone number.
   =================================================================== */

/* ---------- two-state logo ---------- */
.hdr .logo{position:relative;display:block;line-height:0;flex:0 0 auto}
.hdr .logo img{height:44px;width:auto;display:block;transition:opacity .4s var(--ease),height .4s var(--ease)}
.hdr .logo .logo-dark{position:absolute;left:0;top:0;opacity:0}
.hdr.stuck .logo .logo-light{opacity:0}
.hdr.stuck .logo .logo-dark{opacity:1}
.hdr.stuck .logo img{height:40px}

/* ---------- header: stop things wrapping ---------- */
.hdr .bar{gap:18px}
.mn{flex-wrap:nowrap}
.mn>li{flex:0 0 auto}
.mn a{white-space:nowrap;padding:11px 13px}
.hr-{flex:0 0 auto;white-space:nowrap}
.hcall{white-space:nowrap;flex:0 0 auto}
.hcall b{white-space:nowrap;display:block}
.hcall .ic{flex:0 0 40px}
.hdr .btn{white-space:nowrap;flex:0 0 auto;padding:16px 26px}

/* Show the desktop menu only when there is genuinely room for it.
   Below this the burger takes over — that is why the breakpoint moved
   up from 1150px. */
@media(max-width:1400px){
  .mn a{padding:11px 10px;font-size:.8rem}
  .hdr .bar{padding:0 3vw}
}
@media(max-width:1300px){
  .mn,.hcall{display:none}
  .burger{display:flex}
}
@media(min-width:1301px){
  .burger{display:none}
}

/* ---------- mobile menu: it is the primary nav under 1300px now ---------- */
.mob ul{list-style:none;margin-top:24px}
.mob ul ul{margin:0 0 10px 14px}