/* ==========================================================================
   AE CONNECT  |  Product Category Page stylesheet
   --------------------------------------------------------------------------
   Paired with template-category.php. Everything is scoped to .aec-cat so it
   cannot leak into the Netlink theme or any Elementor page.

   INSTALL
     1. Upload to /wp-content/themes/netlink-child/assets/aec-category.css
     2. Enqueue it from functions.php, see functions-snippet.php

   Brand palette
     #00B1F0 primary   |  #0096D6 blue     |  #0090C6 mid
     #036E97 deep      |  #272727 black    |  #F2F9FC light
   ========================================================================== */

/* ==========================================================================
   AE CONNECT  |  Product Category Page  |  v7
   Redesigned: Hero, Trust Bar, About, Applications, Why Us + Industries, CTA
   Unchanged:  Products, Selection Guide, Reviews, FAQ, Contact, Related
   ========================================================================== */

/* --------------------------------------------------------------------------
   Netlink page title banner.

   The theme prints its own title bar with the page name and a breadcrumb
   above the content, which duplicates our hero and adds a second H1.

   This rule is deliberately NOT scoped to .aec-cat, because the banner is the
   theme's markup and sits outside our wrapper. It is scoped instead to the
   body class WordPress adds for our templates, so no other page is affected.
   -------------------------------------------------------------------------- */
.page-template-template-category .main-title-section-wrapper,
.page-template-template-home .main-title-section-wrapper{display:none}

.aec-cat{
  --primary:  #00B1F0;
  --blue:     #0096D6;
  --blue-mid: #0090C6;
  --deep:     #036E97;
  --black:    #272727;
  --light:    #F2F9FC;
  --navy:     #102A43;
  --navy-2:   #050D18;
  --white:    #FFFFFF;

  --grad:     linear-gradient(120deg,#00b1f0,#0090c6 60%,#036e97);
  --grad-rev: linear-gradient(120deg,#036e97,#0090c6 45%,#00b1f0);

  --body-c: #4A4A4A;
  --muted:  #6E7681;
  --line:   #E4EDF2;

  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-xs:   clamp(.75rem,.72rem + .13vw,.813rem);
  --fs-sm:   clamp(.813rem,.79rem + .13vw,.875rem);
  --fs-base: clamp(.875rem,.85rem + .15vw,.938rem);
  --fs-md:   clamp(.938rem,.9rem + .2vw,1rem);
  --fs-lg:   clamp(1rem,.94rem + .28vw,1.125rem);
  --fs-eb:   clamp(.875rem,.84rem + .18vw,1rem);
  --fs-h4:   clamp(1.063rem,1.01rem + .26vw,1.188rem);
  --fs-h3:   clamp(1.25rem,1.1rem + .74vw,1.625rem);
  --fs-h2:   clamp(1.5rem,1.15rem + 1.75vw,2.188rem);
  --fs-h1:   clamp(1.875rem,1.42rem + 2.3vw,2.625rem);

  --sec-y:  clamp(3rem,1.9rem + 4.6vw,5.5rem);
  --gutter: clamp(1.125rem,.7rem + 1.8vw,2rem);
  --gap:    clamp(1rem,.8rem + .95vw,1.375rem);

  --r:8px; --r-md:10px; --r-lg:20px;
  --ease:.25s ease;
  --container:1300px;
}

.aec-cat *,.aec-cat *::before,.aec-cat *::after{box-sizing:border-box;margin:0;padding:0}

.aec-cat{font-family:var(--font);font-size:var(--fs-md);line-height:1.7;color:var(--body-c);background:var(--white);-webkit-font-smoothing:antialiased}
.aec-cat img{max-width:100%;height:auto;display:block}
.aec-cat ul{list-style:none}
.aec-cat a{text-decoration:none;color:var(--deep);transition:color var(--ease)}
.aec-cat a:hover{color:var(--primary)}
.aec-cat a:focus-visible,.aec-cat button:focus-visible,.aec-cat input:focus-visible,.aec-cat textarea:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.aec-cat *,.aec-cat *::before,.aec-cat *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec-y)}
.bg-white{background:var(--white)}
.bg-light{background:var(--light)}
.bg-navy{background:var(--navy);color:#fff}
.min0{min-width:0}

.aec-cat h1,.aec-cat h2,.aec-cat h3,.aec-cat h4{color:var(--black);font-weight:700;line-height:1.25}
.aec-cat h1{font-size:var(--fs-h1);line-height:1.16}
.aec-cat h2{font-size:var(--fs-h2);line-height:1.2}
.aec-cat h3{font-size:var(--fs-h3)}
.aec-cat h4{font-size:var(--fs-h4)}
.cy{color:var(--primary)}

.eb{display:block;font-size:var(--fs-eb);font-weight:600;text-transform:uppercase;color:var(--primary);margin-bottom:.65rem}
.head{text-align:center;max-width:52rem;margin:0 auto clamp(2.25rem,1.4rem + 3vw,3.5rem)}

.grid{display:grid;gap:var(--gap)}
.g-4{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.g-5{grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr))}
.split{display:grid;gap:clamp(2rem,1.2rem + 3vw,3.75rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));align-items:center}
.split-top{align-items:start}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font);
  font-size:var(--fs-sm);font-weight:700;line-height:1.2;text-transform:uppercase;
  padding:.75rem 1.35rem;border-radius:var(--r);border:2px solid transparent;cursor:pointer;
  transition:all var(--ease);min-height:44px}
.btn-cy{background:var(--primary);color:#fff;border-color:var(--primary)}
.btn-cy:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.btn-out{background:transparent;color:var(--deep);border-color:var(--primary)}
.btn-out:hover{background:var(--primary);color:#fff}
.btn-w{background:#fff;color:var(--deep);border-color:#fff}
.btn-w:hover{background:var(--light);color:var(--deep)}
.btn-wo{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-wo:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}
.btn-full{width:100%}
.btns{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}

/* ============================== BREADCRUMB ============================= */
.crumb{border-bottom:1px solid var(--line);padding-block:.8rem;background:var(--white)}
.crumb ol{display:flex;flex-wrap:wrap;gap:.45rem;font-size:var(--fs-xs);align-items:center}
.crumb li{display:flex;align-items:center;gap:.45rem;color:var(--muted)}
.crumb li:not(:last-child)::after{content:'/';color:#C9D6DE}
.crumb a{color:var(--muted)}
.crumb .aec-cat a:hover{color:var(--primary)}
.crumb li[aria-current]{color:var(--black);font-weight:600}

/* ==========================================================================
   1  HERO
   Full bleed product image on the right, dark content panel on the left, and
   a white spec bar that overlaps the bottom edge into the next section.
   ========================================================================== */
.hero{position:relative;background:var(--navy-2);overflow:hidden;
  padding-bottom:clamp(3rem,2rem + 4vw,4.5rem)}

/* Real img element rather than a CSS background, so the image always loads,
   carries alt text and can be sized with object-fit.
   Change --media-w freely. The readability wash below is measured against
   the hero, not the image, so the text stays legible at any image width. */
.hero{--media-w:80%}
.hero-media{position:absolute;top:0;right:0;bottom:0;width:var(--media-w);z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;display:block}

.hero::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    var(--navy-2) 0%, rgba(5,13,24,.97) 26%, rgba(5,13,24,.82) 42%,
    rgba(5,13,24,.45) 58%, rgba(5,13,24,.12) 74%, rgba(5,13,24,0) 88%)}

.hero-panel{position:relative;z-index:2;max-width:min(56%,42rem);
  display:flex;flex-direction:column;justify-content:center;
  min-height:clamp(21rem,17rem + 15vw,32rem);
  padding-block:clamp(2.75rem,1.8rem + 4vw,4.5rem)}

.hero-kicker{display:inline-flex;align-items:center;gap:.55rem;align-self:flex-start;
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);border:1px solid rgba(0,177,240,.4);background:rgba(0,177,240,.1);
  padding:.4rem .9rem;border-radius:999px;margin-bottom:1.35rem}

.hero h1{color:#fff;margin-bottom:1.15rem}
.hero h1::after{content:'';display:block;width:4.5rem;height:4px;background:var(--primary);margin-top:1.15rem;border-radius:2px}
.hero-sub{font-size:var(--fs-lg);color:rgba(255,255,255,.9);line-height:1.65;margin-bottom:1.75rem;max-width:32rem}

.made{position:absolute;top:clamp(1rem,2.5vw,2rem);right:clamp(1rem,2.5vw,2rem);z-index:3;width:clamp(4rem,8vw,6.25rem);opacity:.95}

/* Spec bar overlapping the hero bottom edge */
.specbar{position:relative;z-index:4;margin-top:clamp(-3rem,-2rem - 4vw,-4.5rem);
  background:var(--white);border-radius:var(--r-md);box-shadow:0 12px 40px rgba(5,13,24,.18);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));overflow:hidden}
.specbar div{padding:1.5rem 1.35rem;border-right:1px solid var(--line);text-align:center}
.specbar div:last-child{border-right:none}
.specbar b{display:block;font-size:clamp(1.25rem,1rem + 1.1vw,1.75rem);font-weight:800;color:var(--primary);line-height:1.1}
.specbar span{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-top:.4rem}

/* ==========================================================================
   2  TRUST BAR  (redesigned)
   Two clearly separated groups on one line: certifications, then company
   figures. Hairline dividers instead of eight items floating in a row.
   ========================================================================== */
.trustbar{padding-block:clamp(2rem,1.4rem + 2.4vw,3rem)}
.trustrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:clamp(1.5rem,1rem + 2vw,3rem);align-items:center}
.tgroup{min-width:0}
.tlabel{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.tcerts{display:flex;flex-wrap:wrap;gap:1.25rem 1.75rem;align-items:center}
.tcert{display:flex;align-items:center;gap:.55rem}
.tcert i{color:var(--primary);font-size:1.35rem}
.tcert span{font-size:var(--fs-sm);font-weight:600;color:var(--black);white-space:nowrap}
.tnums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(50%,6rem),1fr));gap:1rem}
.tnum{padding-left:.9rem;border-left:3px solid var(--primary)}
.tnum b{display:block;font-size:clamp(1.125rem,.95rem + .8vw,1.5rem);font-weight:800;color:var(--black);line-height:1.1;font-variant-numeric:tabular-nums}
.tnum span{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:600;margin-top:.15rem}

/* ==========================================================================
   3  ABOUT  (redesigned)
   Centred heading, body in two columns, then a borderless USP grid built
   from hairlines rather than eight separate boxes.
   ========================================================================== */
/* Image left, content right. Grid rather than auto-fit so the image column
   stays the narrower of the two on desktop. */
.about{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,1.2rem + 3vw,4rem);align-items:center}

.about-media{position:relative;border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;background:var(--white)}
.about-media::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:var(--grad);z-index:2}
.about-frame{aspect-ratio:4/3;background:var(--light);display:grid;place-items:center;
  padding:clamp(1.5rem,1rem + 2.4vw,3rem)}
.about-frame img{width:100%;height:100%;object-fit:contain}
.about-media figcaption{padding:.95rem 1.25rem;border-top:1px solid var(--line);
  font-size:var(--fs-base);color:var(--muted);text-align:center;background:var(--white)}
.about-media figcaption b{color:var(--black);font-weight:700}

.about-lead{font-size:var(--fs-md);line-height:1.75;margin-top:1.15rem;max-width:34rem}

/* Vertical step list with a connector running down the left of the numbers */
.steps{display:flex;flex-direction:column;gap:1.35rem;margin-top:clamp(1.75rem,1.3rem + 1.8vw,2.25rem)}
.step{position:relative;display:flex;gap:1.15rem;align-items:flex-start}
.step-n{flex-shrink:0;width:2.5rem;aspect-ratio:1;border-radius:50%;
  background:var(--white);border:2px solid var(--primary);color:var(--deep);
  display:grid;place-items:center;font-size:var(--fs-base);font-weight:800;
  position:relative;z-index:2}
.step:not(:last-child)::after{content:'';position:absolute;left:1.19rem;top:2.75rem;
  bottom:-1.35rem;width:2px;background:var(--line);z-index:1}
.step b{display:block;font-size:var(--fs-md);font-weight:700;color:var(--black);margin-bottom:.2rem}
.step span{display:block;font-size:var(--fs-base);color:var(--body-c);line-height:1.65}

/* ==========================================================================
   5  APPLICATIONS  (redesigned)
   Sticky heading on the left, applications as hairline separated rows on
   the right. Replaces the eight bordered tiles.
   ========================================================================== */
/* Editorial grid. A hairline rule tops each cell and picks up the brand
   colour on hover. */
.appgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
  gap:clamp(1.5rem,1.1rem + 1.6vw,2.25rem)}
.appcard{padding-top:1.35rem;border-top:2px solid var(--line);transition:border-color var(--ease)}
.appcard:hover{border-top-color:var(--primary)}
.appcard > i{color:var(--primary);font-size:1.5rem;display:block;margin-bottom:.9rem}
.appcard h4{margin-bottom:.45rem;line-height:1.35}
.appcard > p{font-size:var(--fs-base);line-height:1.7;color:var(--body-c)}

/* ==========================================================================
   7  WHY US + INDUSTRIES  (redesigned)
   Four grouped capability blocks on navy instead of a bare tick list,
   then industries as a single pill row.
   ========================================================================== */
.whygrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--gap)}
.whycard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);padding:1.75rem 1.5rem;transition:all var(--ease)}
.whycard:hover{background:rgba(255,255,255,.11);border-color:rgba(0,177,240,.45)}
.whycard i{color:var(--primary);font-size:1.6rem;display:block;margin-bottom:1rem}
.whycard h4{color:#fff;margin-bottom:.75rem}
.whycard ul{display:flex;flex-direction:column;gap:.4rem}
.whycard li{display:flex;gap:.55rem;font-size:var(--fs-base);color:rgba(255,255,255,.82);line-height:1.55}
.whycard li i{color:var(--primary);font-size:.65rem;margin:.5rem 0 0;display:block;flex-shrink:0}

.indrow{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:clamp(2.25rem,1.5rem + 2.6vw,3.25rem)}
.indpill{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.05);
  font-size:var(--fs-sm);font-weight:600;color:#fff;transition:all var(--ease)}
.indpill i{color:var(--primary);font-size:.95rem}
.indpill:hover{background:rgba(0,177,240,.16);border-color:var(--primary)}

/* ==========================================================================
   10  CTA  (redesigned)
   Brand gradient band, split left and right instead of centred.
   ========================================================================== */
.ctaband{background:var(--grad-rev);position:relative;overflow:hidden;isolation:isolate}
.ctaband::before{content:'';position:absolute;inset:0;z-index:-1;
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 1px,transparent 1px);background-size:30px 30px}
.ctagrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));
  gap:clamp(1.5rem,1rem + 2.4vw,2.75rem);align-items:center}
.ctaband h2{color:#fff;margin-bottom:.65rem}
.ctaband p{color:rgba(255,255,255,.88);font-size:var(--fs-lg);line-height:1.65}
.ctaband .btns{justify-content:flex-end}

/* ==========================================================================
   4  PRODUCTS  (unchanged)
   ========================================================================== */
.prod{background:var(--white);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:all var(--ease);height:100%}
.prod:hover{box-shadow:0 12px 32px rgba(16,42,67,.10);transform:translateY(-4px)}
.prod-img{aspect-ratio:4/3;background:var(--white);display:grid;place-items:center;padding:1.5rem;overflow:hidden}
.prod-img img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease}
.prod:hover .prod-img img{transform:scale(1.05)}
.prod-b{padding:0 1.5rem 1.75rem;flex:1;display:flex;flex-direction:column}
.prod-sku{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:.4rem}
.prod-b h3{font-size:var(--fs-h4);margin-bottom:.65rem;line-height:1.35}
.prod-b h3 a{color:var(--black)}
.prod-b h3 .aec-cat a:hover{color:var(--primary)}
.prod-b > p{font-size:var(--fs-base);line-height:1.7;margin-bottom:1rem}
.prod-sp{margin-bottom:1.35rem;flex:1;border-top:1px solid var(--line)}
.prod-sp li{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-base);padding:.5rem 0;border-bottom:1px solid var(--line)}
.prod-sp li:last-child{border-bottom:none}
.prod-sp dt{color:var(--muted)}
.prod-sp dd{color:var(--black);font-weight:600;text-align:right}

/* ==========================================================================
   6  SELECTION TABLE  (unchanged)
   ========================================================================== */
.tbl-wrap{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--white)}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
.tbl thead th{background:var(--light);text-align:left;font-size:var(--fs-xs);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--black);padding:.95rem 1.1rem;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:1rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.65}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--light)}
.tbl .w{font-weight:700;color:var(--primary);white-space:nowrap}
.tbl .m{font-weight:600;color:var(--black);white-space:nowrap}
.just{text-align:justify;hyphens:auto}

/* ==========================================================================
   8  REVIEWS  (unchanged)
   ========================================================================== */
.rev{background:var(--light);border-radius:var(--r-md);padding:1.5rem;text-align:center;display:flex;flex-direction:column;height:100%}
.rev-av{width:3.5rem;aspect-ratio:1;border-radius:50%;margin:-3rem auto .75rem;background:var(--white);
  border:3px solid var(--white);display:grid;place-items:center;font-weight:700;color:var(--deep);box-shadow:0 2px 8px rgba(16,42,67,.12)}
.rev b{display:block;font-size:var(--fs-md);color:var(--black)}
.rev time{display:block;font-size:var(--fs-xs);color:var(--muted);margin:.15rem 0 .5rem}
.rev .st{color:#F5A623;font-size:.85rem;letter-spacing:.1em;margin-bottom:.75rem}
.rev p{font-size:var(--fs-base);line-height:1.7}
.rev-row{margin-top:3rem}

/* ==========================================================================
   9  FAQ  (unchanged)
   ========================================================================== */
.faq{max-width:56rem;margin-inline:auto;display:flex;flex-direction:column;gap:.7rem}
.faq-i{border-radius:var(--r-md);overflow:hidden;background:var(--white);box-shadow:0 1px 3px rgba(16,42,67,.06)}
.faq-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;padding:1.35rem;
  background:var(--white);border:none;text-align:left;font-family:var(--font);font-size:var(--fs-md);
  font-weight:600;color:var(--black);cursor:pointer;transition:all var(--ease);min-height:60px}
.faq-q:hover{background:var(--light)}
.faq-q[aria-expanded="true"]{background:var(--navy);color:#fff}
.faq-q i{font-size:.85rem;color:var(--muted);transition:transform var(--ease),color var(--ease);flex-shrink:0}
.faq-q[aria-expanded="true"] i{transform:rotate(90deg);color:var(--primary)}
.faq-a{padding:1.35rem;font-size:var(--fs-base);line-height:1.8;border-top:1px solid var(--line)}
.faq-a[hidden]{display:none}
.faq-a ul{margin-top:.75rem;display:flex;flex-direction:column;gap:.4rem}
.faq-a ul li{display:flex;align-items:flex-start;gap:.6rem}
.faq-a ul li i{color:var(--primary);font-size:.7rem;margin-top:.5rem;flex-shrink:0}

/* ==========================================================================
   11  CONTACT  (unchanged)
   ========================================================================== */
.cinfo{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}
.citem{display:flex;gap:.85rem;align-items:flex-start;font-size:var(--fs-md)}
.citem i{color:var(--primary);font-size:1.05rem;width:1.4rem;text-align:center;margin-top:.2rem;flex-shrink:0}
.citem a,.citem span{color:var(--black);line-height:1.6}
.citem .aec-cat a:hover{color:var(--primary)}
.soc{display:flex;gap:.5rem;margin-top:1.5rem}
.soc a{width:2.35rem;aspect-ratio:1;border-radius:var(--r);background:var(--primary);color:#fff;display:grid;place-items:center;font-size:.9rem;transition:background var(--ease)}
.soc a:hover{background:var(--deep);color:#fff}
.form{background:var(--light);border-radius:var(--r-md);padding:clamp(1.5rem,1.1rem + 1.6vw,2.25rem)}
.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:.9rem}
.fd{display:flex;flex-direction:column;gap:.3rem}
.fd.full{grid-column:1/-1}
.fd label{font-size:var(--fs-xs);font-weight:600;color:var(--black)}
.fd input,.fd textarea{font-family:var(--font);font-size:var(--fs-base);color:var(--black);padding:.75rem .9rem;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);transition:border-color var(--ease);min-height:46px;width:100%}
.fd input:focus,.fd textarea:focus{border-color:var(--primary);outline:none}
.fd textarea{min-height:106px;resize:vertical}

/* ==========================================================================
   12  RELATED  (unchanged)
   ========================================================================== */
.rel{background:var(--light);border-top:1px solid var(--line);padding-block:1.75rem}
.rel-in{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
.rel-in > b{font-size:var(--fs-base);color:var(--black)}
.pill{display:inline-block;padding:.42rem 1rem;background:var(--white);border:1px solid var(--primary);
  border-radius:999px;font-size:var(--fs-base);font-weight:600;color:var(--deep);transition:all var(--ease)}
.pill:hover{background:var(--primary);color:#fff}

/* ============================== BREAKPOINTS ============================ */
@media (max-width:1366px){.aec-cat{--container:1140px}}

@media (max-width:1024px){
  .hero{padding-bottom:clamp(2.5rem,2rem + 3vw,3.5rem);--media-w:100%}
  /* Image spans the full width and sits behind the text under a stronger wash */
  .hero::after{background:linear-gradient(180deg,
    rgba(5,13,24,.9) 0%, rgba(5,13,24,.86) 45%, rgba(5,13,24,.94) 100%)}
  .hero-panel{max-width:100%;min-height:0;padding-block:clamp(2.75rem,2rem + 3vw,3.75rem)}
  .ctaband .btns{justify-content:flex-start}
  /* Image stacks above the content */
  .about{grid-template-columns:1fr}
  .about-frame{aspect-ratio:16/9}
}

@media (max-width:767px){
  .btns{width:100%}
  .btns .btn{flex:1 1 auto}
  .head{text-align:left}
  .rel-in > b{width:100%;margin-bottom:.2rem}
  .made{width:3.5rem;top:.9rem;right:.9rem}
  .specbar{margin-top:clamp(-2.5rem,-2rem - 2vw,-3rem)}
  .specbar div{border-right:none;border-bottom:1px solid var(--line);padding:1.15rem}
  .specbar div:last-child{border-bottom:none}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl tr{display:block;border-bottom:1px solid var(--line);padding:.9rem 1.1rem}
  .tbl tr:last-child{border-bottom:none}
  .tbl td{display:flex;gap:.75rem;border:none;padding:.25rem 0}
  .tbl td::before{content:attr(data-l);font-weight:600;color:var(--muted);min-width:6.5rem;flex-shrink:0}
  .indrow{justify-content:flex-start}
}

@media (max-width:480px){
  .btns{flex-direction:column}
  .btn{width:100%}
  .prod-img{aspect-ratio:16/10}
  .prod-sp li{flex-direction:column;gap:.05rem}
  .prod-sp dd{text-align:left}
  .about-frame{aspect-ratio:4/3;padding:1.25rem}
  br{display:none}
}

@media (max-width:360px){:root{--gutter:1rem}}

@media (max-height:480px) and (orientation:landscape){
  .hero-panel{padding-block:2rem}
  .sec{padding-block:2.5rem}
}

@media print{
  .hero-media,.btn,.rel,.form,.ctaband,.soc,.specbar{display:none!important}
  .hero,.bg-navy{background:none!important;color:#000!important}
  .hero::after,.about-media::before{display:none!important}
  .hero h1,.hero-sub,.whycard h4,.whycard li,.indpill{color:#000!important}
  .about{grid-template-columns:1fr!important}
  .faq-a[hidden]{display:block!important}
}