/* ==========================================================================
   Jolly Industries — jollyindustries.net
   Built to Jolly Industries Brand Identity Guidelines
   Colour: #00295f 65% / #004aad 25% / #72afff 10%
   Type:   Montserrat (headlines) · Inter (body) · Roboto Mono (technical)
   Rule:   45deg/90deg angular geometry only. No curves, no rounded containers.
   ========================================================================== */
:root{
  /* primary — dominant 65% */
  --navy:#00295f;
  /* secondary — functional 25% */
  --blue:#004aad;
  /* accent — contrast catalyst 10% */
  --sky:#72afff;
  /* supporting neutrals */
  --surface:#f4f7fb;
  --rule:#dde4ef;
  --body-col:#475569;
  --tech-col:#334155;
  --white:#ffffff;

  --display:'Montserrat',sans-serif;
  --body:'Inter',sans-serif;
  --mono:'Roboto Mono',monospace;

  --wrap:1180px;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--white);color:var(--body-col);font-family:var(--body);font-weight:400;font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ---------- Platform A type tiers ---------- */
h1{font-family:var(--display);font-weight:900;text-transform:uppercase;color:var(--navy);
   font-size:clamp(28px,4.4vw,42px);line-height:1.08;letter-spacing:-.01em}
h2{font-family:var(--display);font-weight:700;color:var(--navy);
   font-size:clamp(22px,2.9vw,28px);line-height:1.2;margin:14px 0 12px}
h3{font-family:var(--display);font-weight:700;color:var(--navy);font-size:18px;line-height:1.3}
.tech,.eyebrow,.mono{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--tech-col)}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);display:flex;align-items:center;gap:12px}
.eyebrow::after{content:"";height:1px;flex:1;background:var(--rule)}
.lede{max-width:66ch;font-size:16px}
/* industrial whitespace ratio: min 20% active whitespace */
section{padding-block:clamp(68px,9vw,112px);border-top:1px solid var(--rule)}

.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:10px 16px;z-index:99}
.skip:focus{left:12px;top:12px}

/* ---------- Material Symbols ---------- */
.ms{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;line-height:1;
  letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;direction:ltr;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;font-size:20px;flex:none}

/* ---------- triangle motif ---------- */
.tri{flex:none}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:80px}
/* clear space = cap-height of the J lettermark, all four sides; min screen width 120px */
.brand{display:block;padding:14px;margin:-14px}
.brand img{width:172px;height:auto}
@media(max-width:420px){.brand img{width:132px}}
nav ul{display:flex;gap:26px;list-style:none}
nav a{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--navy);padding-block:6px;border-bottom:2px solid transparent}
nav a:hover{border-color:var(--blue)}
nav a[aria-current="page"]{border-color:var(--blue);color:var(--blue)}
.menu-btn{display:none;background:none;border:1px solid var(--rule);color:var(--navy);padding:7px 9px;cursor:pointer;line-height:0}
.menu-btn .ms{font-size:24px}
@media(max-width:880px){
  nav{position:absolute;left:0;right:0;top:80px;background:var(--white);border-bottom:1px solid var(--rule);display:none}
  nav.open{display:block}
  nav ul{flex-direction:column;gap:0;padding:8px var(--pad) 20px}
  nav a{display:block;padding:14px 0;border-bottom:1px solid var(--rule)}
  .menu-btn{display:block}
}

/* ---------- angular section divider (45deg, per Graphic Execution Rule) ---------- */
.on-navy{background:var(--navy);color:var(--white);border-top:none;position:relative;overflow:hidden}
.on-navy h1,.on-navy h2,.on-navy h3{color:var(--white)}
.on-navy .lede,.on-navy p{color:#c8d7e8}
.on-navy .eyebrow{color:var(--sky)}
.on-navy .eyebrow::after{background:rgba(255,255,255,.22)}
.on-navy .wrap{position:relative;z-index:1}
.corner-tri{position:absolute;left:0;bottom:0;width:min(46vw,520px);height:min(46vw,520px);opacity:.14;z-index:0}

/* ---------- hero ---------- */
.hero{padding-block:clamp(64px,8vw,104px)}
.hero .grid2{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,5vw,60px);align-items:center}
@media(max-width:940px){.hero .grid2{grid-template-columns:1fr}}
.hero h1{color:var(--white);margin:18px 0 18px}
.hero h1 em{font-style:normal;color:var(--sky)}
.hero p{max-width:54ch}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ---------- buttons ---------- */
.btn{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;padding:15px 26px;display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--blue);background:var(--blue);color:var(--white);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.btn:hover{background:var(--navy);border-color:var(--navy)}
.btn .ms{font-size:18px}
.btn.accent{background:var(--sky);border-color:var(--sky);color:var(--navy)}
.btn.accent:hover{background:transparent;color:var(--sky)}
.btn.ghost{background:transparent;border-color:rgba(255,255,255,.32);color:var(--white)}
.btn.ghost:hover{border-color:var(--sky);color:var(--sky);background:transparent}

/* ---------- data plate ---------- */
.plate{background:var(--white);border:1px solid var(--rule);padding:26px 24px;position:relative;overflow:hidden}
.plate .plate-tri{position:absolute;left:0;bottom:0;width:110px;height:110px;opacity:.1}
.plate .np-title{position:relative;font-family:var(--display);font-weight:900;font-size:14px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--navy);text-align:center;margin-bottom:3px}
.np-sub{position:relative;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;text-align:center;color:var(--blue);margin-bottom:16px}
.np-rows{position:relative;border-top:2px solid var(--navy)}
.np-rows div{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-weight:500;
  font-size:13px;padding:9px 2px;border-bottom:1px solid var(--rule)}
.np-rows span:first-child{letter-spacing:.06em;text-transform:uppercase;color:var(--body-col);font-weight:400}
.np-rows span:last-child{color:var(--tech-col)}

/* ---------- certification strip (marks horizontally adjacent to the logo) ---------- */
.certstrip{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.certstrip .cs-logo{width:150px}
.certstrip .cs-marks{display:flex;align-items:center;gap:14px}
.certstrip .cs-marks img{width:46px;height:46px;object-fit:contain;background:var(--white);padding:3px}
.certstrip .cs-rule{width:1px;height:42px;background:rgba(255,255,255,.24)}

/* ---------- product cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin-top:44px}
.card{background:var(--white);display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/3;background:var(--surface);overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.03);transition:transform .5s ease}
.card:hover .ph img{transform:scale(1.04)}
.card .cbody{padding:24px 22px 26px;display:flex;flex-direction:column;gap:9px;flex:1;position:relative}
/* 45deg notch — angular transition per Graphic Execution Rule */
.card .cbody::before{content:"";position:absolute;left:0;bottom:0;width:0;height:0;
  border-left:36px solid var(--surface);border-top:36px solid transparent}
.card .tag{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--blue);display:flex;align-items:center;gap:8px}
.card .tag .ms{font-size:18px}
.specs{list-style:none;font-family:var(--mono);font-weight:400;font-size:12px;color:var(--tech-col);
  margin-top:auto;padding-top:14px;border-top:1px solid var(--rule);position:relative}
.specs li{padding:5px 0;display:flex;gap:9px;align-items:center}
.specs li::before{font-family:'Material Symbols Outlined';content:"check";font-size:16px;color:var(--blue);flex:none;
  -webkit-font-feature-settings:'liga';font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 20}

/* ---------- units ---------- */
.units{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px;margin-top:44px}
.unit{border-top:3px solid var(--navy);padding-top:18px}
.unit .no{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.16em;color:var(--blue);
  display:flex;align-items:center;gap:7px}
.unit .no .ms{font-size:17px}
.unit h3{margin:6px 0 2px}
.unit .loc{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--tech-col);margin-bottom:10px}

/* ---------- standards ---------- */
.stamps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:20px;margin-top:44px}
.stamp{border:1px solid rgba(255,255,255,.18);padding:24px;display:flex;gap:16px;align-items:flex-start;background:rgba(255,255,255,.03)}
.stamp img{width:60px;height:60px;object-fit:contain;flex:none;background:var(--white);padding:4px}
.stamp h3{font-size:16px;display:flex;align-items:center;gap:8px}
.stamp h3 .ms{font-size:20px;color:var(--sky)}
.stamp p{font-size:14px;margin-top:6px}
.note{margin-top:28px;font-family:var(--mono);font-weight:400;font-size:12px}

/* ---------- about ---------- */
.about{background:var(--surface)}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,220px));gap:26px;margin-top:44px}
.person img{aspect-ratio:3/4;object-fit:cover;width:100%;filter:saturate(.8) contrast(1.03)}
.person h3{margin-top:14px;font-size:17px}
.person span{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}

/* ---------- contact ---------- */
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);margin-top:44px}
@media(max-width:880px){.cgrid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--body-col)}
.field input,.field textarea{font-family:var(--body);font-size:15px;padding:12px;border:1px solid var(--rule);
  background:var(--white);color:var(--tech-col)}
.field input:focus,.field textarea:focus{border-color:var(--blue)}
.field textarea{min-height:124px;resize:vertical}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.two{grid-template-columns:1fr}}
.info dl{border-top:2px solid var(--navy)}
.info .row{display:grid;grid-template-columns:126px 1fr;gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.info dt{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--body-col);display:flex;align-items:center;gap:7px}
.info dt .ms{font-size:17px;color:var(--blue)}
.info dd{color:var(--tech-col)}
.info dd a{text-decoration:none;border-bottom:1px solid var(--sky)}

/* ---------- page header ---------- */
.pagehead{padding-block:clamp(54px,7vw,86px)}
.pagehead h1{margin:16px 0 14px}
.crumbs{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sky);margin-bottom:6px}
.crumbs a{text-decoration:none;opacity:.75}
.crumbs a:hover{opacity:1}

/* ---------- cta band ---------- */
.cta-band{background:var(--surface);text-align:center}
.cta-band h2{margin-top:0}
.cta-band .lede{margin-inline:auto}
.cta-band .actions{justify-content:center}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding-block:clamp(80px,14vw,160px)}
.notfound .code{font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.24em;color:var(--blue)}
.notfound h1{margin:14px 0 14px}
.notfound .lede{margin-inline:auto}

/* ---------- footer ---------- */
footer{background:var(--navy);color:#c8d7e8;padding-block:46px;font-size:13px;position:relative;overflow:hidden}
footer .wrap{position:relative;z-index:1}
footer .frow{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
footer .fbot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16)}
footer a{color:#ffffff;text-decoration:none;margin-left:20px}
footer a:hover{color:var(--sky)}
footer .ftech{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.08em;color:#94a3b8}