/* =========================================================================
   page-clients.css
   合作客戶與專業設備 page  [ne_clients_page]  ·  Direction 2「信任藍帶」
   Self-contained: ne-home.css does not load on this page, so tokens + the
   reused .cta-strip styles are included here, scoped under .ne-clients-page.
   ========================================================================= */
:root{
  --color-primary:#1B67B2; --color-primary-deep:#0F4A85; --color-aux-1:#1A96D5; --color-aux-2:#54C3F1;
  --color-surface:#FFFFFF; --color-bg:#F7FAFC; --color-text:#0F1B2D; --color-text-muted:#4A5567; --color-border:#E5EEF7;
  --shadow-card:0 1px 3px rgba(27,103,178,.06); --shadow-card-hover:0 4px 12px rgba(27,103,178,.10);
  --radius-card:12px; --radius-button:8px; --max-content:1280px;
  --section-pad-y-desktop:100px; --section-pad-y-mobile:60px;
  --font-stack:"Noto Sans TC","PingFang TC","Heiti TC","微軟正黑體",Arial,sans-serif;
}

/* Landing section rhythm — 84/52, matching ne-home.css and ne-about.css.
   Scoped to the wrapper on purpose: --section-pad-y-* is also an
   arden-base-theme :root token (feeding --arden-space-section-y), so
   retuning it at :root here would move theme chrome on this page too. */
.ne-clients-page{
  --section-pad-y-desktop:84px; --section-pad-y-mobile:52px;
}

/* ---- full-bleed: page meta sets layout=unboxed + vertical-padding=none.
   unboxed does NOT clear the theme's horizontal gutter, so zero it here
   (scoped to this page via :has) so section backgrounds reach the edges. ---- */
.arden-main:has(.ne-clients-page){padding-inline:0}
.arden-main:has(.ne-clients-page) > *{margin-block-start:0}

/* ---- shared scaffolding (scoped) ---- */
.ne-clients-page{font-family:var(--font-stack);color:var(--color-text);line-height:1.65;display:flow-root}
.ne-clients-page .inner{max-width:var(--max-content);margin-inline:auto;padding-inline:clamp(20px,4vw,40px)}
.ne-clients-page .eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.08em;font-weight:500;font-size:14px;line-height:1.5;color:var(--color-primary);margin-bottom:12px}
.ne-clients-page .section-title{font-size:clamp(28px,4vw,44px);font-weight:600;line-height:1.25;color:var(--color-text);margin:0 0 16px}
.ne-clients-page .section-subtitle{font-size:clamp(15px,1.5vw,17px);line-height:1.7;color:var(--color-text-muted);margin:0 0 44px;max-width:680px}
.ne-clients-page .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:500;line-height:1.5;border-radius:var(--radius-button);transition:background .2s,color .2s,border-color .2s}

/* ---- page hero (light top band) ---- */
.ne-clients-page .clients-hero{background:linear-gradient(180deg,var(--color-surface) 0%,var(--color-bg) 100%);padding-block:0 clamp(50px,6vw,86px);border-bottom:1px solid var(--color-border)}
.ne-clients-page .ne-breadcrumb ol{display:flex;gap:8px;list-style:none;margin:0;padding:0;font-size:13px;color:var(--color-text-muted);justify-content:center}
.ne-clients-page .ne-breadcrumb li{display:flex;gap:8px;align-items:center}
.ne-clients-page .ne-breadcrumb li+li::before{content:"/";color:#b6c2d0}
.ne-clients-page .ne-breadcrumb a{color:var(--color-primary);text-decoration:none}
.ne-clients-page .clients-hero__inner{text-align:center;max-width:800px;margin:0 auto}
.ne-clients-page .clients-hero__title{font-size:clamp(34px,5vw,56px);font-weight:700;line-height:1.12;letter-spacing:-.012em;color:var(--color-text);margin:10px 0 16px;text-wrap:balance}
.ne-clients-page .clients-hero__subtitle{font-size:clamp(15px,1.5vw,17px);line-height:1.85;color:var(--color-text-muted);max-width:60ch;margin:0 auto}

/* ---- 合作客戶 navy trust band ---- */
.ne-clients-page .clients-band{position:relative;overflow:hidden;color:#fff;padding-block:var(--section-pad-y-desktop);
  background:radial-gradient(120% 120% at 85% -12%,rgba(84,195,241,.16),transparent 55%),linear-gradient(140deg,#0F1B2D 0%,#0F4A85 100%)}
.ne-clients-page .clients-band__head{text-align:center;max-width:720px;margin:0 auto 48px}
.ne-clients-page .clients-band .eyebrow{color:var(--color-aux-2)}
.ne-clients-page .clients-band__title{font-size:clamp(30px,4.4vw,50px);font-weight:700;line-height:1.2;color:#fff;margin:0 0 14px;letter-spacing:-.01em}
.ne-clients-page .clients-band__sub{font-size:clamp(15px,1.5vw,17px);line-height:1.7;color:rgba(255,255,255,.82);margin:0}
.ne-clients-page .clients-band__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ne-clients-page .clients-card{background:#fff;border-radius:16px;height:140px;display:flex;align-items:center;justify-content:center;padding:24px;
  box-shadow:0 16px 34px -18px rgba(0,8,20,.6);transition:transform .22s ease,box-shadow .22s ease}
.ne-clients-page .clients-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -18px rgba(0,8,20,.7)}
.ne-clients-page .clients-card img{max-width:80%;max-height:64px;object-fit:contain;display:block}
.ne-clients-page .clients-band__foot{text-align:center;margin:30px 0 0;font-size:13.5px;color:rgba(255,255,255,.66)}

/* ---- 專業設備 (placeholder) ---- */
.ne-clients-page .equip-sec{background:#fff;padding-block:var(--section-pad-y-desktop)}
.ne-clients-page .equip-sec__note{display:inline-block;background:rgba(27,103,178,.05);border:1px solid var(--color-border);border-radius:10px;padding:12px 16px;font-size:13.5px;color:var(--color-text-muted);margin:0 0 32px;max-width:700px}
.ne-clients-page .equip-sec__grid{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:18px}
.ne-clients-page .equip-tile{flex:1 1 calc(33.333% - 12px);max-width:calc(33.333% - 12px)}
.ne-clients-page .equip-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#fff;border:1px dashed #cdd8e4;border-radius:var(--radius-card);padding:28px 18px;min-height:176px}
.ne-clients-page .equip-tile img{height:80px;width:auto;max-width:100%;object-fit:contain;object-position:center}
.ne-clients-page .equip-tile__mark{width:54px;height:54px;border-radius:14px;background:#E7EEF6;color:#9aa8b8;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px}
.ne-clients-page .equip-tile__lab{font-size:11.5px;color:#9aa8b8;letter-spacing:.08em;text-transform:uppercase}

/* ---- reused final CTA (.cta-strip) — values mirror ne-home.css ---- */
.ne-clients-page .cta-strip{
  background-image:linear-gradient(90deg,rgba(3,32,63,.92) 0%,rgba(5,77,145,.78) 43%,rgba(2,38,76,.48) 100%),linear-gradient(180deg,rgba(2,24,48,.12) 0%,rgba(2,24,48,.32) 100%),url('/wp-content/plugins/ne-cleaning-landing/assets/cta-banner-pc-20260527-v1.webp');
  background-size:cover;background-position:center;background-repeat:no-repeat;color:#fff;padding-block:62px;position:relative;overflow:hidden;min-height:264px}
.ne-clients-page .cta-strip__inner{position:relative;z-index:1;text-align:center;min-height:140px;display:grid;align-items:center}
.ne-clients-page .cta-strip__decor{display:none}
.ne-clients-page .cta-strip__body{position:relative;z-index:2;max-width:640px;margin:0 auto}
.ne-clients-page .cta-strip__title{font-size:clamp(28px,3.5vw,40px);font-weight:600;line-height:1.3;margin:0 0 14px;color:#fff}
.ne-clients-page .cta-strip__subtitle{font-size:17px;opacity:.92;margin:0 0 28px}
.ne-clients-page .cta-strip__buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.ne-clients-page .cta-strip__btn-primary{background:#fff;color:var(--color-primary);min-width:200px;padding:15px 34px;font-weight:600}
.ne-clients-page .cta-strip__btn-primary:hover{background:var(--color-bg);color:var(--color-primary-deep)}
.ne-clients-page .cta-strip__btn-phone{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.5);min-width:220px;padding:13.5px 30px;font-weight:500}
.ne-clients-page .cta-strip__btn-phone:hover{background:rgba(255,255,255,.1);color:#fff}

/* ---- responsive ---- */
@media (max-width:1024px){
  .ne-clients-page .clients-band__grid{grid-template-columns:repeat(2,1fr)}
  .ne-clients-page .equip-tile{max-width:calc(50% - 9px)}
}
@media (max-width:768px){
  .ne-clients-page .clients-band,.ne-clients-page .equip-sec{padding-block:var(--section-pad-y-mobile)}
}
@media (max-width:600px){
  .ne-clients-page .clients-band__grid{grid-template-columns:1fr}
  .ne-clients-page .equip-tile{max-width:100%;flex-basis:100%}
  .ne-clients-page .cta-strip__buttons{flex-direction:column;align-items:center}
  .ne-clients-page .cta-strip__buttons .btn{width:min(100%,260px)}
}