/* Hadi Parvizi — brand site. Palette: deep ink, ivory, slate, luminous teal. */
@font-face{font-family:"Jost";src:url(../assets/fonts/jost-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{
  --ink-0:#050A0F;        /* hero base, behind the cloud */
  --ink:#101B24;          /* deep sections */
  --panel:#15232E;
  --line:rgba(143,161,174,.18);
  --slate:#64727D;
  --slate-lt:#8FA1AE;
  --pale:#7E8E9A;
  --ivory:#F2EFE9;
  --teal:#29C2B2;
  --teal-lt:#62E9D9;
  --display:"Jost",Futura,"Century Gothic","Avenir Next","Trebuchet MS",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{
  background:var(--ink-0);
  color:var(--ivory);
  font-family:var(--display);
  font-weight:300;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--teal-lt)}
:focus-visible{outline:2px solid var(--teal-lt);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:var(--ink-0);padding:10px 16px;z-index:50}
.skip:focus{left:12px;top:12px}

/* ---- fluid cloud, fixed behind the opening ---- */
#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:-2;background:var(--ink-0)}
.bg-fade{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(5,10,15,.40) 0%,rgba(5,10,15,.16) 55%,rgba(5,10,15,0) 100%)}

/* ---- navigation ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,44px);transition:background .4s ease,border-color .4s ease;border-bottom:1px solid transparent}
.nav.stuck{background:rgba(5,10,15,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.nav-mark{display:block;line-height:0}
.nav-mark svg{display:block}
.nav nav{display:flex;gap:clamp(12px,2.2vw,30px);align-items:center}
.nav nav a{color:var(--slate-lt);text-decoration:none;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.nav nav a:hover{color:var(--ivory)}
.nav nav a.nav-cta{color:var(--teal-lt);border:1px solid var(--teal);padding:8px 14px}
.nav nav a.nav-cta:hover{background:var(--teal);color:var(--ink-0)}
@media (max-width:860px){.nav nav a:not(.nav-cta){display:none}}

/* ---- hero ---- */
.hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:88px 24px 56px;text-align:center;position:relative;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.gridwrap{width:min(600px,92vw);aspect-ratio:27/13;margin-bottom:6px;position:relative}
.gridwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the monogram: strands converge, then one heavy line leaves as the P */
.logo{position:absolute;left:50%;top:50%;height:92%;aspect-ratio:1/1;transform:translate(-50%,-50%);overflow:visible;filter:drop-shadow(0 6px 28px rgba(0,0,0,.55))}
.logo .stem{fill:var(--ivory);transform-box:fill-box;transform-origin:50% 50%}
.logo .s{fill:none;stroke:var(--slate-lt);stroke-width:2.4;stroke-linecap:round;opacity:var(--o);stroke-dasharray:1;stroke-dashoffset:0}
.logo .mid{fill:none;stroke:var(--teal);stroke-width:5;stroke-dasharray:1;stroke-dashoffset:0}
.logo .bowl{fill:none;stroke:var(--teal);stroke-width:18;stroke-dasharray:1;stroke-dashoffset:0}
.logo .dot{fill:var(--ink-0)}
.js .logo.wait .stem{transform:scaleY(0)}
.js .logo.wait .s,.js .logo.wait .mid,.js .logo.wait .bowl{stroke-dashoffset:1}
.js .logo.wait .dot{opacity:0}
.js .logo.draw .stem{animation:stemUp .8s cubic-bezier(.2,.7,.2,1) both}
.js .logo.draw .s{animation:drawIn 1.1s ease-out both;animation-delay:calc(.55s + var(--i) * .07s)}
.js .logo.draw .mid{animation:drawIn .9s ease-out .9s both}
.js .logo.draw .dot{animation:dotIn .35s ease-out 1.9s both}
.js .logo.draw .bowl{animation:drawIn 1.05s cubic-bezier(.6,0,.2,1) 2.05s both,glow 1.2s ease 2.9s both}
@keyframes stemUp{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes drawIn{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dotIn{from{opacity:0}to{opacity:1}}
@keyframes glow{0%{stroke:var(--teal-lt)}100%{stroke:var(--teal)}}
.js .reveal{opacity:0;transform:translateY(10px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.on{opacity:1;transform:none}
.name{font-size:clamp(27px,4.8vw,44px);letter-spacing:.30em;margin-top:16px;white-space:nowrap;font-weight:300}
.name .lt{opacity:0;display:inline-block;transition:opacity .7s ease,color .7s ease}
.name .hot{color:var(--ivory);font-weight:600}
.name .hot.on{opacity:1;animation:hotflash 1.1s ease}
.name .cold{color:var(--pale);font-weight:300}
.name .cold.on{opacity:1}
.name .gap{display:inline-block;width:.9em}
@keyframes hotflash{0%{color:var(--teal-lt)}60%{color:var(--teal-lt)}100%{color:var(--ivory)}}
.role{margin-top:16px;font-size:clamp(12.5px,1.6vw,15px);letter-spacing:.18em;color:var(--slate-lt);text-transform:uppercase}
.slogan{margin-top:14px;font-size:clamp(17px,2.6vw,23px);letter-spacing:.06em;color:var(--teal-lt);font-weight:500}
.figures{margin-top:36px;display:flex;gap:clamp(28px,6vw,72px);justify-content:center;flex-wrap:wrap}
.fig{min-width:120px}
.fig .n{font-family:var(--mono);font-size:clamp(22px,3.4vw,30px);color:var(--ivory);font-weight:600}
.fig .l{margin-top:6px;font-size:12.5px;color:var(--slate-lt);letter-spacing:.06em;line-height:1.45}
.regions{margin-top:30px;font-size:12px;color:var(--slate-lt);letter-spacing:.14em;text-transform:uppercase;max-width:760px}
.cta{margin-top:32px;display:inline-block;padding:13px 30px;border:1px solid var(--teal);color:var(--teal-lt);background:none;
  text-decoration:none;letter-spacing:.14em;font-size:13.5px;font-family:var(--display);cursor:pointer;
  transition:background .3s ease,color .3s ease;text-shadow:none}
.cta:hover{background:var(--teal);color:var(--ink-0)}
.replay{position:absolute;bottom:18px;right:22px;background:none;border:none;color:var(--slate);font-family:var(--display);
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:8px}
.replay:hover{color:var(--slate-lt)}
@media (max-width:430px){.name{letter-spacing:.18em}}

/* ---- sections ---- */
.band{padding:clamp(72px,10vw,128px) 0;position:relative}
.band#thesis{background:linear-gradient(180deg,rgba(5,10,15,0) 0%,rgba(16,27,36,.78) 22%,var(--ink) 100%)}
.band.solid{background:var(--ink)}
.band.solid + .band.solid{border-top:1px solid var(--line)}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}
.wrap.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,84px);align-items:start}
@media (max-width:860px){.wrap.two{grid-template-columns:1fr}}
.eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);margin-bottom:18px}
h2{font-size:clamp(24px,3.4vw,36px);font-weight:400;letter-spacing:.02em;line-height:1.25;margin-bottom:22px;max-width:22ch}
h3{font-weight:500;letter-spacing:.04em}
p{max-width:64ch}
p + p{margin-top:14px}
.lead{font-size:clamp(16.5px,1.7vw,19px);color:var(--ivory)}
.lead.narrow{color:var(--slate-lt);font-size:16px;margin-bottom:8px}
.band p:not(.lead):not(.eyebrow){color:#C9D2D8}
.num{font-family:var(--mono);color:var(--teal-lt);font-weight:600}
.fine{font-size:12.5px;color:var(--slate-lt) !important;margin-top:18px}

/* S-curve */
.scurve{margin:0}
.scurve canvas{width:100%;aspect-ratio:5/4;display:block;border:1px solid var(--line);background:rgba(5,10,15,.55)}
.scurve figcaption{font-size:12.5px;color:var(--slate-lt);margin-top:12px;line-height:1.55;max-width:60ch}

/* method */
.method{margin-top:clamp(56px,8vw,96px)}
.method-line{font-size:clamp(26px,4.4vw,48px);font-weight:300;letter-spacing:.08em;color:var(--ivory)}
.method-sub{color:var(--slate-lt) !important;margin-top:10px}
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:36px;border-top:1px solid var(--line)}
.steps li{counter-increment:s;padding:26px 28px 6px 0;position:relative}
.steps li + li{padding-left:28px;border-left:1px solid var(--line)}
.steps li::before{content:counter(s);font-family:var(--mono);color:var(--teal);font-size:13px;display:block;margin-bottom:10px}
.steps h4{font-size:19px;font-weight:500;letter-spacing:.06em;margin-bottom:8px}
@media (max-width:860px){.steps{grid-template-columns:1fr}.steps li + li{padding-left:0;border-left:none;border-top:1px solid var(--line)}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:20px}
.pillars article{background:var(--ink);padding:clamp(24px,3vw,38px)}
.pillars h3{font-size:20px;margin-bottom:10px}
.pillars .proof{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);color:var(--slate-lt) !important;font-size:14.5px}
@media (max-width:720px){.pillars{grid-template-columns:1fr}}

/* domains */
.domains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:20px}
.domain{position:relative;overflow:hidden;border:1px solid var(--line);padding:clamp(26px,3.4vw,44px);background:var(--panel);min-height:340px}
.domain > *:not(.tex):not(.tex-img){position:relative}
.domain .tex{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.domain h3{font-size:26px;font-weight:400;letter-spacing:.1em;margin-bottom:12px}
.domain ul{margin-top:18px;list-style:none}
.domain li{padding:12px 0 12px 20px;border-top:1px solid var(--line);position:relative;color:#C9D2D8;font-size:15.5px;line-height:1.55}
.domain li::before{content:"";position:absolute;left:0;top:21px;width:8px;height:8px;background:var(--teal)}
.aiband{margin-top:24px;border:1px solid var(--teal);padding:clamp(24px,3vw,40px);background:linear-gradient(90deg,rgba(41,194,178,.10),rgba(41,194,178,.02))}
.aiband h3{font-size:20px;margin-bottom:10px;color:var(--teal-lt)}
.aiband p{max-width:92ch}
.aiband-note{color:var(--slate-lt) !important;font-size:15px}
@media (max-width:860px){.domains{grid-template-columns:1fr}}

/* cases */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:34px}
.cases article{border-top:2px solid var(--teal);padding-top:18px}
.cases .tag{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-lt) !important}
.cases h3{font-size:18.5px;margin:8px 0 14px;line-height:1.35}
.cases dt{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-top:12px}
.cases dd{color:#C9D2D8;font-size:15px;line-height:1.55}
@media (max-width:960px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cases{grid-template-columns:1fr}}

/* worked with */
.strip{list-style:none;display:flex;flex-wrap:wrap;gap:10px 12px;margin-top:26px}
.strip li{border:1px solid var(--line);padding:9px 16px;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--ivory)}
.globe-row{align-items:center}
.globe-wrap{width:min(440px,100%);aspect-ratio:1/1;margin-inline:auto}
.globe-wrap canvas{width:100%;height:100%;display:block;cursor:grab}

/* standing */
.plain{list-style:none;margin-top:6px}
.plain li{padding:12px 0;border-top:1px solid var(--line);color:#C9D2D8}
.plain li:last-child{border-bottom:1px solid var(--line)}
.metrics{margin-top:22px;color:var(--slate-lt) !important;letter-spacing:.06em}
.pubs-h{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--teal);font-weight:300;margin-bottom:18px}
.pubs{list-style:none}
.pubs li{padding:13px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:#C9D2D8}
.pubs li span{display:block;font-size:12.5px;color:var(--slate-lt);margin-top:3px}
.pubs a{color:var(--ivory);text-decoration:none;background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 1px no-repeat;transition:background-size .35s ease}
.pubs a:hover{background-size:100% 1px;color:var(--teal-lt)}

/* form */
.form{display:grid;gap:8px}
.form label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate-lt);margin-top:10px}
.form input,.form textarea{background:rgba(5,10,15,.6);border:1px solid var(--line);color:var(--ivory);font:inherit;font-size:16px;padding:12px 14px;border-radius:0;width:100%}
.form input:focus,.form textarea:focus{border-color:var(--teal);outline:none}
.form .bad{border-color:#E08A6B}
.form .hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.solid-cta{margin-top:18px;justify-self:start}
.form-note{font-size:13px;color:var(--slate-lt) !important;margin-top:10px}

/* footer */
.foot{position:relative;background:var(--ink-0);border-top:1px solid var(--line);min-height:min(62vh,520px);display:flex;align-items:flex-end;overflow:hidden}
.foot-img{position:absolute;top:0;bottom:0;right:max(0px,calc(50% - 720px));width:min(70%,900px);
  background:url(../assets/london.jpg) 30% center/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 40%,#000 85%,transparent 100%);mask-image:linear-gradient(to right,transparent 0%,#000 40%,#000 85%,transparent 100%)}
.foot-img::after{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(41,194,178,.14),rgba(5,10,15,.35)),
  repeating-linear-gradient(0deg,rgba(5,10,15,.30) 0 1px,transparent 1px 16px),
  repeating-linear-gradient(90deg,rgba(5,10,15,.30) 0 1px,transparent 1px 16px)}
.foot-in{position:relative;padding:72px 0 44px;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.foot-name{letter-spacing:.30em;font-size:clamp(18px,2.4vw,26px);color:var(--ivory);margin-top:18px}
.foot-place{letter-spacing:.28em;text-transform:uppercase;font-size:13px;color:var(--teal-lt);margin-top:6px}
.foot p{color:var(--slate-lt)}
.foot .fine a{color:var(--slate-lt)}
@media (max-width:860px){.foot-img{width:100%;right:0;opacity:.6}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{transition:none}
  .name .lt{transition:none;animation:none}
  .js .logo.draw .stem,.js .logo.draw .s,.js .logo.draw .mid,.js .logo.draw .dot,.js .logo.draw .bowl{animation:none}
  .nav,.cta,.pubs a{transition:none}
}
@media (max-width:430px){.role{letter-spacing:.1em;font-size:11.5px}}

/* ---- conversation: graded portrait as the band's background ---- */
.band.convo{padding-top:0}
.portrait-band{position:relative;min-height:min(84vh,760px);display:flex;align-items:center;background:var(--ink-0);overflow:hidden;border-bottom:1px solid var(--line)}
.portrait-img{position:absolute;top:0;bottom:0;right:max(0px,calc(50% - 640px));width:min(56%,640px);
  background:url(../assets/portrait.jpg) center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 45%,#000 80%,transparent 100%),linear-gradient(to top,transparent 0%,#000 22%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0%,#000 45%,#000 80%,transparent 100%),linear-gradient(to top,transparent 0%,#000 22%);
  mask-composite:intersect}
/* the monogram's pixel grid, laid over the photograph */
.portrait-img::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(rgba(41,194,178,.16),rgba(41,194,178,.05)),
    repeating-linear-gradient(0deg,rgba(5,10,15,.30) 0 1px,transparent 1px 16px),
    repeating-linear-gradient(90deg,rgba(5,10,15,.30) 0 1px,transparent 1px 16px)}
.portrait-band .wrap{position:relative}
.portrait-band h2{max-width:16ch;font-size:clamp(28px,4vw,46px);text-shadow:0 2px 24px rgba(0,0,0,.6)}
.portrait-band .lead{max-width:34ch;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.convo-body{padding-top:clamp(48px,7vw,84px)}
@media (max-width:860px){
  .portrait-band{min-height:0;padding:0 0 48px;flex-direction:column;align-items:stretch}
  .portrait-img{position:relative;right:auto;width:100%;height:92vw;max-height:520px;
    -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 30%);mask-image:linear-gradient(to top,transparent 0%,#000 30%)}
  .portrait-band .wrap{margin-top:-20px}
}

/* ---- real subsurface work as backgrounds, graded with the site filter ---- */
.method-band{position:relative;margin-top:clamp(56px,8vw,96px);padding:clamp(56px,8vw,110px) 0 clamp(40px,5vw,64px);overflow:hidden;background:var(--ink-0);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.method-band .method{margin-top:0;position:relative}
.method-img{position:absolute;inset:0;background:url(../assets/simulation.jpg) right center/cover no-repeat;opacity:.9;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.35) 30%,#000 62%)}
.method-img::after{content:"";position:absolute;inset:0;background:
  linear-gradient(to top,rgba(5,10,15,.92) 0%,rgba(5,10,15,.25) 55%,rgba(5,10,15,.35) 100%),
  repeating-linear-gradient(0deg,rgba(5,10,15,.28) 0 1px,transparent 1px 16px),
  repeating-linear-gradient(90deg,rgba(5,10,15,.28) 0 1px,transparent 1px 16px)}
.method-band .method-line,.method-band .method-sub,.method-band .steps{text-shadow:0 2px 18px rgba(0,0,0,.8)}
.method-band .steps{margin-top:clamp(120px,22vw,300px);background:rgba(5,10,15,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.method-band .steps li{padding-left:24px}
.img-cap{position:relative;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--slate-lt) !important;text-align:right;margin-top:18px;max-width:none}
.band#thesis{padding-bottom:0}
.domain .tex-img{position:absolute;inset:0;background:url(../assets/fracture.jpg) 70% center/cover no-repeat;opacity:.4;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 70%);mask-image:linear-gradient(to right,transparent 0%,#000 70%)}
.band.has-dusk{padding-top:0}
.dusk{height:clamp(220px,34vw,420px);background:url(../assets/dusk.jpg) center 40%/cover no-repeat;position:relative;margin-bottom:-120px;
  -webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent 100%);mask-image:linear-gradient(to bottom,#000 35%,transparent 100%)}
.dusk::after{content:"";position:absolute;inset:0;background:
  linear-gradient(rgba(41,194,178,.10),rgba(16,27,36,.45)),
  repeating-linear-gradient(0deg,rgba(5,10,15,.25) 0 1px,transparent 1px 16px),
  repeating-linear-gradient(90deg,rgba(5,10,15,.25) 0 1px,transparent 1px 16px)}
.has-dusk .wrap{position:relative;text-shadow:0 2px 18px rgba(0,0,0,.65)}
.has-dusk .cases{text-shadow:none}
.band.has-log{position:relative;overflow:hidden}
.logstrip{position:absolute;top:0;bottom:0;right:max(12px,calc(50% - 760px));width:96px;background:url(../assets/imagelog.jpg) center top/100% auto repeat-y;opacity:.2;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%)}
.has-log .wrap{position:relative}
@media (max-width:1360px){.logstrip{display:none}}
@media (max-width:860px){.method-img{opacity:.55;-webkit-mask-image:none;mask-image:none}.method-band .steps{margin-top:40vw}}

/* ---- hero: the portrait as a transparent layer beneath everything else ---- */
.hero-portrait{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(../assets/portrait.jpg) center 18%/auto 118% no-repeat;opacity:.15;mix-blend-mode:screen;filter:blur(1.2px) contrast(.9);
  -webkit-mask-image:radial-gradient(ellipse 46% 62% at 50% 46%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 46% 62% at 50% 46%,#000 35%,transparent 100%)}
@media (max-width:860px){.hero-portrait{background-size:auto 100%;opacity:.13}}

/* ---- contact area: a gathering, vaguely visible, its pixels switching off and on ---- */
.band.convo{padding-bottom:0}
.convo-lower{position:relative;overflow:hidden;padding-bottom:clamp(72px,10vw,128px)}
.convo-bg{position:absolute;inset:0;background:url(../assets/gathering.jpg) center 35%/cover no-repeat;opacity:.5;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 78%,transparent 100%)}
.convo-bg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.convo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,27,36,.45) 0%,rgba(16,27,36,.2) 42%,rgba(16,27,36,.6) 56%,rgba(16,27,36,.66) 100%)}
.convo-lower .convo-body{position:relative}
.convo-lower .form input,.convo-lower .form textarea{background:rgba(5,10,15,.78)}
@media (max-width:860px){.convo-bg{opacity:.26}.convo-bg::after{background:rgba(16,27,36,.6)}}