/* ==========================================================================
   WHO WE ARE  (standalone page)
   Reuses tokens + .ev-eyebrow / .ev-btn / .ev-accent from base.css and the
   .ev-purpose / .ev-mv / .ev-know section patterns from home.css.
   Section titles use the shared .ev-word scroll colour-reveal (see main.js).
   Sections: 1 Hero · 2 Beyond Software (flip cards) · 3 Why Us ·
             4 How We Operate (rotating tabs) · 5 The Evoteq Narrative · 6 CTA
   ========================================================================== */

/* shared: two-column section head (title left, lead right) */
.ev-wwa-head{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:start;}
.ev-wwa-head__lead{margin:0;font-size:clamp(17px,1.35vw,21px);line-height:1.7;}
.ev-wwa-head__lead p{margin:0 0 1em;}
.ev-wwa-head__lead p:last-child{margin-bottom:0;}

/* ---------- 1. HERO ---------- */
.ev-wwahero{background:var(--cream);padding-top:calc(var(--header-h) + clamp(34px,5.5vw,80px));padding-bottom:clamp(52px,6.5vw,100px);}
.ev-wwahero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,80px);align-items:center;}
.ev-wwahero__title{font-size:clamp(36px,4.6vw,64px);line-height:1.04;color:var(--red-deep);margin:24px 0 0;letter-spacing:-.02em;}
.ev-wwahero__title .ev-accent{color:var(--red-bright);}
.ev-wwahero__body{position:relative;}
.ev-wwahero__body p{margin:0 0 1.1em;font-size:clamp(17px,1.35vw,21px);line-height:1.7;color:var(--grey);}
.ev-wwahero__body p:last-child{margin-bottom:0;}

/* ---------- 2. BEYOND SOFTWARE ---------- */
.ev-bs{position:relative;isolation:isolate;overflow:hidden;background:var(--red-deep) url(../img/topo-bg.png) center/cover no-repeat;background-attachment:fixed;}
.ev-bs>.ev-container{position:relative;z-index:1;}
.ev-bs .ev-eyebrow{color:#fff;border-color:rgba(255,255,255,.5);}
.ev-bs__title{color:#fff;font-size:clamp(32px,4.2vw,56px);line-height:1.05;margin:0;max-width:15ch;}
.ev-bs__lead{color:#fff;}
.ev-bs__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);margin-top:clamp(34px,4.5vw,64px);}

.ev-flip{position:relative;min-height:clamp(230px,25vw,320px);border:1px solid rgba(255,255,255,.20);border-radius:20px;background:rgba(255,255,255,.045);padding:clamp(30px,3.4vw,50px);overflow:hidden;transition:background .5s var(--ease),border-color .5s var(--ease);}
.ev-flip__label{display:flex;align-items:center;justify-content:center;height:100%;margin:0;font-family:var(--fh);font-weight:600;font-size:clamp(32px,3.8vw,54px);color:#fff;text-align:center;transition:opacity .45s var(--ease),transform .5s var(--ease);}
.ev-flip__text{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(30px,3.4vw,50px);margin:0;font-size:clamp(16px,1.25vw,20px);line-height:1.6;color:rgba(255,255,255,.9);text-align:center;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .5s var(--ease);}
.ev-flip__plus{position:absolute;right:clamp(20px,2vw,28px);bottom:clamp(20px,2vw,28px);width:36px;height:36px;border-radius:50%;background:var(--red-bright);display:grid;place-items:center;color:#fff;transition:transform .5s var(--ease);z-index:2;}
.ev-flip__plus svg{width:17px;height:17px;}
.ev-flip:hover,.ev-flip:focus-within{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.4);}
.ev-flip:hover .ev-flip__label,.ev-flip:focus-within .ev-flip__label{opacity:0;transform:translateY(-12px);}
.ev-flip:hover .ev-flip__text,.ev-flip:focus-within .ev-flip__text{opacity:1;transform:translateY(0);}
.ev-flip:hover .ev-flip__plus,.ev-flip:focus-within .ev-flip__plus{transform:rotate(45deg);}

/* ---------- 3. WHY US ---------- */
.ev-why{background:var(--cream);}
.ev-why__title{font-size:clamp(28px,3.4vw,46px);line-height:1.08;color:var(--red-deep);margin:0;}
.ev-why__title .ev-accent{color:var(--red-bright);}
.ev-why__lead{color:var(--grey);}
.ev-why__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(34px,4.5vw,60px);}
.ev-whycard{position:relative;border:1px solid var(--light-grey);border-radius:20px;background:var(--white);padding:clamp(28px,2.8vw,44px);transition:background .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);}
.ev-whycard__icon{width:62px;height:62px;border-radius:50%;background:var(--pale);color:var(--red-bright);display:grid;place-items:center;margin-bottom:clamp(22px,2.4vw,34px);transition:background .45s var(--ease),color .45s var(--ease);}
.ev-whycard__icon svg{width:28px;height:28px;}
.ev-whycard__title{font-size:clamp(20px,1.65vw,26px);line-height:1.2;color:var(--red-deep);margin:0 0 15px;transition:color .45s var(--ease);}
.ev-whycard__text{margin:0;font-size:clamp(15px,1.1vw,17px);line-height:1.65;color:var(--grey);transition:color .45s var(--ease);}
.ev-whycard__text b,.ev-whycard__text strong{color:var(--red-deep);transition:color .45s var(--ease);}
.ev-whycard:hover{background:var(--red-deep);border-color:var(--red-deep);transform:translateY(-6px);box-shadow:0 34px 60px -34px rgba(95,15,38,.65);}
.ev-whycard:hover .ev-whycard__icon{background:var(--red-bright);color:#fff;}
.ev-whycard:hover .ev-whycard__title{color:#fff;}
.ev-whycard:hover .ev-whycard__text{color:rgba(255,255,255,.82);}
.ev-whycard:hover .ev-whycard__text b,.ev-whycard:hover .ev-whycard__text strong{color:#fff;}

/* ---------- 4. HOW WE OPERATE ---------- */
.ev-op{position:relative;isolation:isolate;overflow:hidden;background:var(--red-deep) url(../img/topo-bg.png) center/cover no-repeat;background-attachment:fixed;}
.ev-op>.ev-container{position:relative;z-index:1;}
.ev-op .ev-eyebrow{color:#fff;border-color:rgba(255,255,255,.5);}
.ev-op__title{color:#fff;font-size:clamp(28px,3.4vw,46px);line-height:1.08;margin:0;}
.ev-op__title .ev-accent{color:var(--red-bright);}
.ev-op__lead{color:rgba(255,255,255,.82);}
/* layout: full-width card (text flows wide → shorter card), tab pills in a row below */
.ev-op__body{margin-top:clamp(34px,4.5vw,58px);}
.ev-op__stage{position:relative;min-height:clamp(220px,19vw,280px);}
.ev-oppanel{position:absolute;inset:0;background:var(--pale);border-radius:26px;padding:clamp(34px,3.2vw,56px);opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility .55s;box-shadow:0 40px 80px -46px rgba(0,0,0,.55);}
.ev-oppanel.is-active{opacity:1;visibility:visible;transform:translateY(0);position:relative;}
.ev-oppanel__mark{position:absolute;top:clamp(28px,3vw,44px);right:clamp(28px,3vw,44px);width:56px;height:56px;}
.ev-oppanel__mark img{width:56px;height:56px;object-fit:contain;}
.ev-oppanel__title{font-size:clamp(24px,2.4vw,38px);line-height:1.14;color:var(--red-deep);margin:0 0 clamp(16px,2vw,26px);padding-right:72px;}
.ev-oppanel__copy{max-width:none;}
.ev-oppanel__text{margin:0 0 1em;font-size:clamp(16px,1.25vw,19px);line-height:1.7;color:var(--charcoal);}
.ev-oppanel__text:last-child{margin-bottom:0;}
.ev-op__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:clamp(20px,2.6vw,34px);}
.ev-optab{font-family:var(--fh);font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.8);background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:13px 24px;line-height:1;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);}
.ev-optab:hover{border-color:rgba(255,255,255,.6);color:#fff;}
.ev-optab.is-active{background:#fff;color:var(--red-deep);border-color:#fff;}

/* ---------- 5. THE EVOTEQ NARRATIVE ---------- */
.ev-narr{background:var(--cream);text-align:center;}
.ev-narr__inner{max-width:940px;margin-inline:auto;}
.ev-narr .ev-eyebrow{margin-bottom:26px;}
.ev-narr__title{font-size:clamp(30px,3.6vw,50px);line-height:1.1;color:var(--red-deep);margin:0 0 clamp(26px,3vw,42px);}
.ev-narr__title .ev-accent{color:var(--red-bright);}
.ev-narr__body{max-width:800px;margin-inline:auto;}
.ev-narr__body p{margin:0 0 1.15em;font-size:clamp(16px,1.3vw,20px);line-height:1.75;color:var(--grey);}
.ev-narr__body p:last-child{margin-bottom:0;}

/* ---------- RESPONSIVE ---------- */
/* tablet: 3-up why cards → 2-up */
@media (max-width:1024px){
  .ev-why__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:900px){
  /* stack the two-column heads (title over lead) */
  .ev-wwa-head,.ev-wwahero__grid{grid-template-columns:1fr;gap:clamp(22px,4vw,34px);align-items:start;}
  .ev-bs__grid{grid-template-columns:1fr;}
  .ev-flip__label{transform:none;}
  /* touch: no hover — show text stacked under label on mobile */
  .ev-flip{min-height:0;}
  .ev-flip__text{position:static;inset:auto;opacity:1;transform:none;padding:0;margin-top:16px;text-align:left;display:block;}
  .ev-flip__label{height:auto;justify-content:flex-start;text-align:left;margin-bottom:6px;}
  .ev-flip__plus{display:none;}
  /* auto-rotate card stacks: show only the active panel, no absolute overlay */
  .ev-op__stage{min-height:0;}
  .ev-oppanel{position:relative;opacity:1;visibility:visible;transform:none;}
  .ev-oppanel:not(.is-active){display:none;}
  .ev-oppanel__title{padding-right:56px;}
}
/* mobile: keep the parallax but render the pattern full-width (sharp, zoomed out, tiled) */
@media (max-width:768px){
  .ev-bs,.ev-op{background-attachment:fixed;background-size:100% auto;background-repeat:repeat;}
}
/* phones: single-column cards + tighter padding */
@media (max-width:640px){
  .ev-why__grid{grid-template-columns:1fr;}
  .ev-whycard{padding:clamp(22px,6vw,30px);}
  .ev-flip{padding:26px 22px;}
  .ev-oppanel{padding:28px 22px;border-radius:20px;}
  .ev-oppanel__mark,.ev-oppanel__mark img{width:44px;height:44px;}
  .ev-oppanel__title{padding-right:44px;}
  .ev-optab{padding:11px 18px;font-size:11.5px;letter-spacing:.04em;}
}