/* Page layout for the portfolio: composes tg.css components into the Telegraph section order */

.is-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}

/* 01 hero */
.hero__eyebrow{display:inline-block;letter-spacing:.08em;font-size:11px;max-width:420px;margin:0 auto;line-height:1.7;color:var(--tg-fg-dim);text-shadow:0 0 12px #000,0 0 4px #000}

/* 02 trajectory: illustration pinned top-right, masked into the dark */
.illo--angel{right:-10%;top:-6%;width:360px;height:360px;opacity:.32}
.illo--angel img{-webkit-mask-image:radial-gradient(circle at 30% 30%,#000 0%,#000 40%,transparent 75%);mask-image:radial-gradient(circle at 30% 30%,#000 0%,#000 40%,transparent 75%)}
@media (min-width:640px){.illo--angel{width:460px;height:460px}}
.trajectory .tg-h2{margin-bottom:64px}
@media (min-width:768px){.trajectory .tg-h2{margin-bottom:80px}}
.trajectory .tg-node__text{max-width:260px}

/* 03 scope: warrior top-right, flipped, full opacity like the reference */
.illo--warrior{right:0;top:0;width:420px;height:420px;opacity:1}
.illo--warrior img{-webkit-mask-image:radial-gradient(circle at 70% 30%,#000 0%,#000 40%,transparent 75%);mask-image:radial-gradient(circle at 70% 30%,#000 0%,#000 40%,transparent 75%)}
@media (min-width:640px){.illo--warrior{width:520px;height:520px}}
.scope .tg-h2--big{max-width:820px;margin-bottom:20px}
@media (min-width:640px){.scope .tg-h2--big{margin-bottom:28px}}
.scope__intro{max-width:820px;margin-bottom:48px;font-size:13.5px;line-height:1.8;color:var(--tg-fg-dim)}
@media (min-width:640px){.scope__intro{margin-bottom:64px;font-size:14px}}
.scope__diagram{margin:0 auto;max-width:var(--tg-content-narrow)}
.scope__diagram>.tg-eyebrow{margin-bottom:16px;letter-spacing:.14em;font-size:10px}
@media (min-width:640px){.scope__diagram>.tg-eyebrow{margin-bottom:24px;font-size:11px;letter-spacing:.2em}}

/* 04 work: framed container with terminal cards */
.work .tg-framed__bg{left:auto;right:0;width:60%;background-position:center right;opacity:.8;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 32%,#000 100%)}
@media (max-width:767px){.work .tg-framed__bg{width:100%;opacity:.35;-webkit-mask-image:none;mask-image:none}}
.work{padding:80px 0 40px}
@media (min-width:768px){.work{padding:80px 32px 40px}}
.work__head{max-width:560px;margin:0 auto 48px;text-align:center}
@media (min-width:768px){.work__head{margin:0 auto 80px}}
.work__head .tg-h2{margin-bottom:14px}
@media (min-width:1024px){.work__head .tg-h2{min-height:82px}}
.work__grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:start}
@media (min-width:768px){.work__grid{grid-template-columns:1fr 1fr;gap:28px}}
@media (min-width:1024px){.work__grid{gap:36px}}
.case{display:flex;flex-direction:column;min-height:100%}
.case .tg-term__body{display:flex;flex-direction:column;gap:12px;padding:22px 22px 18px}
.case__title{position:relative;font-size:15px;font-weight:500;color:var(--tg-fg-bright);line-height:1.5}
.case__meta{position:relative;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tg-fg-faint);line-height:1.6}
.case__thumb{position:relative;width:100%;aspect-ratio:16/9;height:auto;margin:4px 0}
.case__thumb--img{border:1px solid var(--tg-line-soft);overflow:hidden;background:#050505;display:flex;align-items:center;justify-content:center}
.case__thumb--img img{width:100%;height:100%;object-fit:contain;display:block}
.case__res{position:relative;font-size:14px;line-height:1.6;color:var(--tg-fg-bright)}
.case__res-badge{display:inline-block;margin-right:10px;vertical-align:1px;border:1px solid var(--tg-line-strong);border-radius:var(--tg-radius-sm);padding:3px 7px;font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tg-fg-dim)}
.case__foot{position:relative;margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.case__foot .tg-caption{font-size:10.5px}
@media (max-width:720px){.case__thumb.tg-ph{height:auto!important;aspect-ratio:16/9}}

/* 05 impact: cave illustration on the right, gradient from the left */
.impact{min-height:820px}
.impact__bg{position:absolute;inset:0;z-index:0;background-repeat:no-repeat;background-position:140% center;background-size:auto 100%;opacity:.6;overflow:hidden}
.impact__shade{pointer-events:none;position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.65) 35%,rgba(0,0,0,.15) 70%,rgba(0,0,0,0) 100%)}
.impact__wrap{position:relative;z-index:10;margin:0 auto;display:flex;min-height:560px;max-width:var(--tg-content);align-items:center;padding:48px 4px}
@media (min-width:768px){.impact__wrap{padding:100px 32px}}
.impact__inner{display:flex;width:100%;max-width:860px;flex-direction:column;gap:28px;padding:16px}
@media (min-width:768px){.impact__inner{padding:16px 24px}}
.impact__head{max-width:520px;margin-bottom:16px}
.impact__head .tg-h2{margin-bottom:16px;line-height:1.3;letter-spacing:.01em}
.impact__head .tg-lead{max-width:520px;line-height:1.8}

/* 06 contact: access illustration on the right, text left */
.contact{min-height:520px;padding:64px 0}
@media (min-width:1024px){.contact{padding:128px 0}}
.contact__bg{display:none;position:absolute;top:0;bottom:0;right:0;z-index:0;width:58%;background-repeat:no-repeat;background-position:35% center;background-size:cover;opacity:.8;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%)}
@media (min-width:768px){.contact__bg{display:block}}
.contact__wrap{position:relative;z-index:10;margin:0 auto;display:flex;min-height:520px;max-width:var(--tg-content);align-items:center;padding:48px 16px}
@media (min-width:768px){.contact__wrap{padding:80px 56px}}
.contact__inner{max-width:540px}
.contact__inner .tg-h2{margin-bottom:20px;line-height:1.35}
.contact__inner .tg-lead{margin-bottom:20px}
.contact__chips{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
.contact__inner .tg-btn-row{margin-top:28px}
.contact__direct{margin-top:18px;display:block}

/* footer */
.tg-footer .tg-footer__row{color:var(--tg-fg)}