/* ===== Inner page shared styles ===== */

/* PAGE HERO (dark band at top of every inner page) */
.phero{position:relative;overflow:hidden;padding-top:clamp(140px,20vh,210px);padding-bottom:clamp(60px,9vw,110px)}
.phero .wrap{position:relative;z-index:2}
.phero__title{max-width:18ch;margin:18px 0 22px}
.phero__lede{max-width:52ch;color:var(--tx-light-muted)}
.phero__meta{display:flex;gap:30px;flex-wrap:wrap;margin-top:34px}
.phero__meta div{display:flex;flex-direction:column;gap:2px}
.phero__meta .n{font-family:var(--font-display);font-weight:600;font-size:1.7rem;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.phero__meta .l{font-size:.82rem;color:var(--tx-light-muted);letter-spacing:.04em}

/* SERVICE detail rows */
.srow{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(28px,6vw,80px);
  padding-block:clamp(50px,7vw,92px);border-top:1px solid var(--line-light);align-items:start}
.srow:first-child{border-top:none}
.srow__no{font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,5vw,4rem);line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:14px}
.srow__left h2{margin-bottom:14px}
.srow__tagline{font-weight:600;color:var(--g-purple)}
.srow__right p{color:var(--tx-dark-muted);font-size:1.08rem;margin-bottom:24px;max-width:60ch}
.srow__list{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px}
.srow__list div{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.srow__list .tick{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--grad);
  display:grid;place-items:center;color:#fff;font-size:.7rem;margin-top:2px}
@media(max-width:760px){.srow{grid-template-columns:1fr;gap:18px}.srow__list{grid-template-columns:1fr}}

/* WORK index grid */
.windex{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.wi{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line-light);transition:transform .5s var(--ease),box-shadow .5s;display:block}
.wi:hover{transform:translateY(-6px);box-shadow:0 40px 80px -36px rgba(139,92,214,.4)}
.wi__media{aspect-ratio:16/10;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative;overflow:hidden}
.wi__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 28% 25%,rgba(255,255,255,.28),transparent 55%),
  repeating-linear-gradient(120deg,transparent 0 24px,rgba(0,0,0,.05) 24px 48px)}
.wi__metric{position:absolute;left:24px;bottom:20px;z-index:2;color:#fff;font-family:var(--font-display);
  font-weight:600;font-size:1.7rem;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.wi__body{padding:26px 28px 30px}
.wi__tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.wi__tags span{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  padding:.35em .8em;border-radius:100px;border:1px solid var(--line-light);color:var(--tx-dark-muted)}
.wi__body h3{margin-bottom:8px}
.wi__body p{color:var(--tx-dark-muted)}
.wi__cta{display:inline-block;margin-top:16px;font-weight:700;color:var(--g-purple);transition:transform .4s var(--ease)}
.wi:hover .wi__cta{transform:translateX(5px)}
@media(max-width:680px){.windex{grid-template-columns:1fr}}

/* generic two-col intro */
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,80px);align-items:end;margin-bottom:60px}
.lead-row p{color:var(--tx-dark-muted);font-size:1.15rem}
@media(max-width:760px){.lead-row{grid-template-columns:1fr;gap:18px;align-items:start}}

/* VALUES (about) */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.value{padding:34px 30px;border-radius:var(--r);background:var(--paper-2);border:1px solid var(--line-light);
  transition:transform .5s var(--ease),box-shadow .5s}
.value:hover{transform:translateY(-6px);box-shadow:0 30px 60px -32px rgba(139,92,214,.3)}
.value__ic{width:50px;height:50px;border-radius:14px;background:var(--grad);display:grid;place-items:center;
  color:#fff;font-size:1.4rem;margin-bottom:20px}
.value h3{margin-bottom:10px}
.value p{color:var(--tx-dark-muted)}
@media(max-width:820px){.values{grid-template-columns:1fr}}

/* TEAM */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.member{border-radius:var(--r);overflow:hidden;background:var(--paper-2);border:1px solid var(--line-light);
  transition:transform .5s var(--ease)}
.member:hover{transform:translateY(-6px)}
.member__ph{aspect-ratio:1;background:linear-gradient(135deg,var(--c1,#E456A0),var(--c2,#4F89E8));position:relative}
.member__ph::after{content:attr(data-initials);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:2.4rem;color:rgba(255,255,255,.92)}
.member__body{padding:18px 20px 22px}
.member__body strong{display:block;font-family:var(--font-display);font-weight:600;font-size:1.1rem}
.member__body span{color:var(--tx-dark-muted);font-size:.9rem}
@media(max-width:820px){.team{grid-template-columns:1fr 1fr}}

/* BLOG list */
.blog-feat{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line-light);margin-bottom:46px;background:var(--paper-2)}
.blog-feat__media{background:linear-gradient(135deg,#E456A0,#4F89E8);min-height:320px;position:relative}
.blog-feat__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(circle at 30% 30%,rgba(255,255,255,.28),transparent 55%)}
.blog-feat__body{padding:clamp(30px,4vw,54px);display:flex;flex-direction:column;justify-content:center;gap:16px}
.blog-feat__body h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.blog-feat__body p{color:var(--tx-dark-muted)}
@media(max-width:760px){.blog-feat{grid-template-columns:1fr}.blog-feat__media{min-height:200px}}

.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post{display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;background:var(--paper-2);
  border:1px solid var(--line-light);transition:transform .5s var(--ease),box-shadow .5s}
.post:hover{transform:translateY(-6px);box-shadow:0 30px 60px -32px rgba(139,92,214,.3)}
.post__media{aspect-ratio:16/9;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative}
.post__media::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 55%)}
.post__body{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post__cat{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g-purple)}
.post__body h3{font-size:1.2rem;line-height:1.2}
.post__meta{margin-top:auto;font-size:.82rem;color:var(--tx-dark-muted);display:flex;gap:12px}
@media(max-width:860px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.posts{grid-template-columns:1fr}}

/* CONTACT */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,6vw,80px);align-items:start}
.contact-info{display:flex;flex-direction:column;gap:30px}
.contact-info .ci{display:flex;flex-direction:column;gap:4px}
.contact-info .ci small{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-dark-muted);font-weight:700}
.contact-info .ci a,.contact-info .ci span{font-family:var(--font-display);font-size:1.3rem;font-weight:500}
.contact-info .ci a:hover{color:var(--g-purple)}
.contact-info .ci a.ci__wa{align-self:flex-start;color:#fff;font-family:var(--font-body);font-size:.98rem;margin-top:2px}
.contact-info .ci a.ci__wa:hover{color:#fff}
.socials{display:flex;gap:12px;margin-top:6px}
.socials a{width:46px;height:46px;border-radius:50%;border:1px solid var(--line-light);display:grid;place-items:center;
  font-weight:700;font-size:.8rem;transition:.35s var(--ease)}
.socials a:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-3px)}
.form{background:var(--paper-2);border:1px solid var(--line-light);border-radius:var(--r-lg);padding:clamp(28px,4vw,44px);
  display:flex;flex-direction:column;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:700;font-size:.86rem;letter-spacing:.02em}
.field input,.field textarea,.field select{font-family:inherit;font-size:1rem;padding:14px 16px;border-radius:12px;
  border:1.5px solid var(--line-light);background:#fff;color:var(--ink);transition:border-color .3s,box-shadow .3s}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--g-purple);
  box-shadow:0 0 0 4px rgba(139,92,214,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:480px){.field-row{grid-template-columns:1fr}}

/* CTA reuse on inner pages already in home.css (.cta) — ensure available */
.cta{position:relative;overflow:hidden;padding-block:clamp(90px,13vw,170px)}
.cta__inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.cta__inner h2{max-width:18ch}
.cta__inner .lede{max-width:48ch;color:var(--tx-light-muted)}
.cta__btn{margin-top:10px;font-size:1.05rem;padding:1.1em 1.9em}
