/* ════════════════════════════════════════════════════════
   2026 REFRESH: 40+ YEARS HERO, CLEANER SECTIONS, MOVEMENT
   Loaded after site.css. Animations only run when the
   visitor's device allows motion (see js-motion flag).
   ════════════════════════════════════════════════════════ */

html{overflow-x:clip}

/* ── nav shrinks a little after scrolling ── */
nav{transition:box-shadow .3s}
nav.scrolled{box-shadow:0 6px 24px rgba(15,28,51,.35)}

/* ── hero ── */
.hero-v2{min-height:640px!important;height:auto!important;overflow:hidden}
.hero-v2 .hero-bg-video,.hero-v2 .hero-bg-img{opacity:.3}
.hero-redline{position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--red);transform-origin:top}
.hero-inner{position:relative;z-index:2;padding-top:4rem;padding-bottom:4.5rem;width:100%}
.hero-kicker{font-size:.7rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#7f9fc2;margin-bottom:1.25rem}
.hero-h1{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;margin:0}
.hero-years{font-family:var(--font-serif);font-weight:700;color:#fff;font-size:clamp(6rem,17vw,11.5rem);line-height:.85;letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:inline-flex;align-items:flex-start}
.hero-plus{color:var(--red-light);font-size:.55em;line-height:1;margin-left:.04em}
.hero-years-text{font-family:var(--font-serif);font-weight:700;color:#dbe6f1;font-size:clamp(1.6rem,3.6vw,2.7rem);line-height:1.1;border-left:3px solid var(--red);padding-left:1.2rem}
.hero-rule{width:120px;height:3px;background:var(--red);margin:2rem 0 1.25rem;transform-origin:left}
.hero-tag{font-family:var(--font-mono);font-size:clamp(.85rem,1.6vw,1.05rem);letter-spacing:.08em;text-transform:uppercase;color:#9fb8d2;margin-bottom:2.25rem}
.hero-tag em{font-style:normal;color:#fff}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem}
.hero-scroll{position:absolute;left:50%;bottom:1.25rem;z-index:3;width:26px;height:42px;margin-left:-13px;border:2px solid rgba(255,255,255,.45);border-radius:14px}
.hero-scroll span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff}
@media(max-width:680px){
  .hero-v2{min-height:560px!important}
  .hero-inner{padding-top:2.75rem;padding-bottom:4rem}
  .hero-h1{gap:.9rem}
  .hero-years-text{padding-left:.9rem}
  .hero-scroll{display:none}
}

/* ── buttons: arrow nudge and a shine sweep ── */
.btn{position:relative;overflow:hidden}
.btn-red::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s}
.btn-red:hover::after{transform:translateX(120%)}
.btn-arrow::before{content:"→";float:right;margin-left:.6rem;transition:transform .25s}
.btn-arrow:hover::before{transform:translateX(4px)}
.btn-outline-white:hover{background:#fff;color:var(--navy-dark)}

/* ── stats ── */
.stat-num{font-variant-numeric:tabular-nums}

/* ── capability cards ── */
.cap-card{transition:transform .3s,box-shadow .3s,border-top-color .3s}
.cap-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(15,28,51,.45);border-top-color:var(--red)}
.cap-line{font-size:.92rem;color:var(--text-mid);line-height:1.55;margin-top:.5rem}
.cap-badge{margin-top:1rem;display:inline-block;background:#e8edf5;border:1px solid #b8c8dc;padding:.25rem .6rem;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--navy)}
.spec-strip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:2.25rem;background:var(--navy-dark);border-left:5px solid var(--red)}
.spec-strip div{padding:1.4rem 1.25rem;border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:.25rem}
.spec-strip div:last-child{border-right:0}
.spec-strip b{font-family:var(--font-serif);font-size:clamp(1.3rem,2.2vw,1.75rem);color:#fff;line-height:1.1}
.spec-strip span{font-size:.8rem;color:#8aaac8;line-height:1.4}
@media(max-width:900px){.spec-strip{grid-template-columns:1fr 1fr}.spec-strip div:nth-child(2){border-right:0}.spec-strip div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.08)}}

/* ── portfolio tiles ── */
.portfolio-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.tile-filter{display:flex;flex-wrap:wrap;border:1px solid var(--border)}
.tile-filter button{background:none;border:0;border-right:1px solid var(--border);padding:.6rem 1.1rem;font-family:var(--font-sans);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);cursor:pointer;transition:background .2s,color .2s}
.tile-filter button:last-child{border-right:0}
.tile-filter button[aria-pressed="true"]{background:var(--navy-dark);color:#fff}
.tile-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:1000px){.tile-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.tile-grid{grid-template-columns:1fr 1fr;gap:.6rem}}
.tile{position:relative;margin:0;overflow:hidden;background:var(--white);border:1px solid var(--border);border-top:3px solid var(--navy);transition:border-top-color .3s,box-shadow .3s;display:flex;flex-direction:column}
.tile.is-extra{display:none}
.tile-img{aspect-ratio:1/1;background:var(--light-gray);overflow:hidden;display:flex;align-items:center;justify-content:center}
.tile img{width:100%;height:100%;object-fit:contain;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tile figcaption{padding:.75rem .9rem .85rem;color:var(--navy-dark);display:flex;flex-direction:column;gap:.15rem;border-top:1px solid var(--border-light)}
.tile-seg{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.tile-name{font-weight:700;font-size:.92rem;line-height:1.25}
.tile:hover{border-top-color:var(--red)}
.tile:hover{box-shadow:0 14px 30px -18px rgba(15,28,51,.45)}
.tile:hover img{transform:scale(1.04)}
.tile.is-extra{display:none}
.tile-grid.show-all .tile.is-extra{display:flex}
.tile.is-hidden{display:none!important}
.tile-more{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:1.75rem}
.tile-link{font-size:.88rem;font-weight:600;color:var(--red);text-decoration:none}

/* ── experience ── */
.exp-head{display:flex;align-items:center;gap:2.5rem;margin-bottom:2.5rem;flex-wrap:wrap}
.exp-big{font-family:var(--font-serif);font-weight:700;font-size:clamp(5rem,11vw,8rem);line-height:.9;color:var(--navy-dark);letter-spacing:-.03em;font-variant-numeric:tabular-nums;border-right:3px solid var(--red);padding-right:2.5rem}
.exp-big .count{color:var(--navy-dark)}
@media(max-width:680px){.exp-big{border-right:0;padding-right:0;border-bottom:3px solid var(--red);padding-bottom:.5rem}}
.customer-card{transition:transform .3s,box-shadow .3s}
.customer-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(15,28,51,.45)}

/* ── why band ── */
.why-title{font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2.1rem);font-weight:700;color:#fff;line-height:1.25;margin-bottom:2rem}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.why-grid{grid-template-columns:1fr}}
.why-item{border-top:2px solid rgba(255,255,255,.15);padding-top:1rem;position:relative}
.why-item::before{content:"";position:absolute;left:0;top:-2px;height:2px;width:40px;background:var(--red);transition:width .5s}
.why-item:hover::before{width:100%}
.why-num{display:block;font-family:var(--font-mono);font-size:.7rem;color:#8aaac8;letter-spacing:.1em;margin-bottom:.4rem}
.why-item b{display:block;color:#fff;font-size:1.05rem;margin-bottom:.25rem}
.why-item p{color:#9fb3cc;font-size:.88rem;line-height:1.5}

/* ── FAQ: smooth open ── */
.faq-item summary::after{transition:transform .25s}
.faq-item summary:hover{color:var(--red)}

/* ════════════════════════════════════════════════════════
   MOTION (only when js-motion is set)
   ════════════════════════════════════════════════════════ */
.js-motion .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
@media(min-width:900px){.js-motion .reveal.reveal-right{transform:translateX(40px)}}
.js-motion .reveal.in{opacity:1;transform:none}
.js-motion .reveal .rule,.js-motion .reveal.rule{transform:scaleX(0);transform-origin:left;transition:transform .8s .25s cubic-bezier(.2,.7,.2,1)}
.js-motion .reveal.in .rule{transform:scaleX(1)}
@media (prefers-reduced-motion:no-preference){
  .js-motion .hero-step{animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both}
  .js-motion .hero-step:nth-child(2){animation-delay:.15s}
  .js-motion .hero-step:nth-child(3){animation-delay:.5s}
  .js-motion .hero-step:nth-child(4){animation-delay:.65s}
  .js-motion .hero-step:nth-child(5){animation-delay:.8s}
  .js-motion .hero-rule{animation-name:ruleIn}
  .js-motion .hero-redline{animation:lineIn 1.2s cubic-bezier(.6,0,.2,1) both}
  .js-motion .hero-v2 .hero-bg-img,.js-motion .hero-v2 .hero-bg-video{animation:slowZoom 20s ease-out both}
  .js-motion .hero-scroll span{animation:scrollDot 1.8s ease-in-out infinite}
}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}}
@keyframes ruleIn{from{transform:scaleX(0)}}
@keyframes lineIn{from{transform:scaleY(0)}}
@keyframes slowZoom{from{transform:scale(1.15)}}
@keyframes scrollDot{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* ── factory carousel: whole photo, no cropping ── */
.carousel{background:var(--navy-dark)}
.carousel-track img{object-fit:contain!important;background:var(--navy-dark);height:auto!important;aspect-ratio:4/3}

/* ════════════════════════════════════════════════════════
   PHONES (iPhone and similar, up to 680px wide)
   ════════════════════════════════════════════════════════ */
.m-cta{display:none}
@media(max-width:680px){
  .container{padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right))}
  .nav-inner{padding:0 max(1.25rem,env(safe-area-inset-left));height:56px}
  .logo-main{font-size:.98rem;white-space:nowrap}
  .logo-sub{font-size:.52rem;letter-spacing:.08em}
  .mobile-menu{top:56px}
  .section{padding:3rem 0}
  .section-title{font-size:1.55rem}

  /* hero */
  .hero-v2{min-height:0!important}
  .hero-inner{padding-top:2.25rem;padding-bottom:2.5rem}
  .hero-kicker{font-size:.6rem;letter-spacing:.16em;margin-bottom:.9rem}
  .hero-years{font-size:7.5rem}
  .hero-years-text{font-size:1.55rem}
  .hero-rule{margin:1.4rem 0 1rem}
  .hero-tag{font-size:.78rem;margin-bottom:1.5rem}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{width:100%;text-align:center;padding:.85rem 1rem}
  .btn-arrow::before{display:none}

  /* stats: two columns, the fifth one full width */
  .stat-band{padding:1.5rem 0}
  .stat-item{padding-top:1rem;padding-bottom:1rem}
  .stat-item:last-child{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08)}
  .stat-label{font-size:.75rem}

  /* capabilities */
  .cap-card{padding:1.15rem 1.25rem}
  .spec-strip div{padding:1rem}
  .spec-strip b{font-size:1.15rem}
  .spec-strip span{font-size:.72rem}

  /* portfolio */
  .portfolio-head{margin-bottom:1.25rem}
  .tile-filter{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
  .tile-filter button{padding:.6rem .2rem;font-size:.68rem;letter-spacing:.05em}
  .tile figcaption{padding:.55rem .65rem .65rem}
  .tile-name{font-size:.82rem}
  .tile-more{flex-direction:column;align-items:stretch;gap:1rem;text-align:center}

  /* experience */
  .exp-head{gap:1rem;margin-bottom:1.5rem}
  .exp-big{font-size:4.5rem}

  /* contact + footer: shorter */
  .contact-actions{display:flex;flex-direction:column;gap:.6rem}
  .contact-actions .btn{text-align:center}
  .footer-main{gap:1.5rem;padding-top:2.25rem}
  .footer-main>div:nth-child(2),.footer-main>div:nth-child(3){display:none}

  /* sticky quote bar at the bottom of the screen */
  .m-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;gap:.5rem;padding:.6rem max(1rem,env(safe-area-inset-left)) calc(.6rem + env(safe-area-inset-bottom));background:rgba(15,28,51,.96);border-top:2px solid var(--red);transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  .m-cta.show{transform:none}
  .m-cta a{flex:1;text-align:center;padding:.75rem .5rem;font-size:.78rem}
  .m-cta a.btn-outline-white{flex:0 0 34%}
  body:has(.m-cta){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
}