/* =====================================================================
   Prestige Group holding page. A cut of the site's Marque language
   (public/css/marque.css in the build): same tokens, type, hero panels,
   spec strip, paper chapter and footer. Self-contained on purpose — the
   holding deploy ships only this folder.
   ===================================================================== */

:root{
  --black:#050607;
  --graphite:#0E1114;
  --steel:#1A1E23;
  --rule:#2A2F35;
  --rule-soft:#1E2228;
  --silver:#9AA3AC;
  --silver-dim:#7E868E;
  --white:#FAFBFB;
  --paper:#F2F3F4;
  --paper-2:#E6E8EA;
  --ink:#121418;
  --ink-soft:#5C6268;
  --paper-rule:#CFD3D6;
  --xenon:#B9C9F2;

  --gut:clamp(20px,5vw,72px);
  --maxw:1520px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--graphite);
  color:var(--white);
  font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.6;font-stretch:100%;font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
::selection{background:var(--xenon);color:var(--black)}
:focus-visible{outline:1px solid var(--xenon);outline-offset:3px}
.paper :focus-visible{outline-color:var(--ink)}
section[id]{scroll-margin-top:0}

.lbl{
  font-size:9px;line-height:1;font-weight:500;font-stretch:100%;
  letter-spacing:.28em;text-transform:uppercase;color:var(--silver-dim);
}
.paper .lbl{color:var(--ink-soft)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;font-stretch:112%}
.disp{font-weight:200;font-stretch:112%;letter-spacing:-.025em;line-height:1.02;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}

/* ── header ─────────────────────────────────────────────────── */
.hd{
  position:absolute;inset:0 0 auto;z-index:20;
  display:flex;align-items:center;gap:20px;
  padding:0 var(--gut);height:74px;
}
@media (min-width:1040px){.hd{height:82px}}
.lockup{
  display:block;text-decoration:none;flex:0 0 auto;
  padding-left:13px;border-left:1px solid rgba(255,255,255,.34);
}
.lockup__name{
  display:block;font-size:clamp(13.5px,1.35vw,16.5px);font-weight:500;font-stretch:120%;
  letter-spacing:.004em;line-height:1.1;white-space:nowrap;
}
.lockup__sub{
  display:block;margin-top:3px;font-size:8.5px;font-weight:500;letter-spacing:.3em;
  text-transform:uppercase;color:var(--silver);line-height:1;
}
.hd__right{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)}

/* status: a xenon pip that breathes, the only moving thing after load */
.status{display:none;align-items:center;gap:11px;margin:0;color:#C9CFD5}
.status i{position:relative;width:5px;height:5px;background:var(--xenon);display:block}
.status i::after{
  content:"";position:absolute;inset:-4px;border:1px solid var(--xenon);opacity:0;
  animation:pip 2.8s var(--ease) 2s infinite;
}
@keyframes pip{0%{opacity:.7;transform:scale(.4)}70%,100%{opacity:0;transform:scale(1.4)}}
@media (min-width:700px){.status{display:flex}}

.act{
  display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 18px;
  border:1px solid rgba(255,255,255,.3);background:rgba(5,6,7,.18);color:var(--white);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.act:hover{background:var(--white);color:var(--black);border-color:var(--white)}
.act--hero{height:52px;padding:0 30px;border-color:rgba(255,255,255,.55);background:transparent}
.act--ink{height:48px;padding:0 28px;border-color:rgba(18,20,24,.35);color:var(--ink);background:transparent}
.act--ink:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.act[disabled]{opacity:.5;cursor:default}

/* ── hero ───────────────────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:var(--black)}

/* Four panels with the composite's proportions; the gaps stand in for its
   white dividers. On load each panel opens from the bottom edge in turn. */
.panels{
  position:absolute;inset:0;display:grid;
  grid-template-columns:404fr 423fr 438fr 389fr;
  gap:clamp(3px,.3vw,5px);
}
.hp{margin:0;position:relative;overflow:hidden;background:var(--black)}
.hp::before{ /* the divider draws in before the panel opens */
  content:"";position:absolute;inset:0 auto 0 calc(-1 * clamp(3px,.3vw,5px));
  width:clamp(3px,.3vw,5px);background:rgba(255,255,255,.5);
  transform:scaleY(0);transform-origin:bottom;
  animation:rule .9s var(--ease) calc(.1s + var(--i) * .12s) forwards;
}
.hp:first-child::before{display:none}
.hp__z{display:block;height:100%;transition:transform 1.4s var(--ease)}
.hp img{
  width:100%;height:100%;object-fit:cover;
  filter:contrast(1.08) brightness(.66);
  transition:filter 1.4s var(--ease);
  clip-path:inset(100% 0 0 0);
  animation:open 1.5s var(--ease) calc(.25s + var(--i) * .14s) forwards;
}
@keyframes open{to{clip-path:inset(0 0 0 0)}}
@keyframes rule{to{transform:scaleY(1)}}
@media (hover:hover) and (pointer:fine){
  .hp:hover .hp__z{transform:scale(1.045)}
  .hp:hover img{filter:contrast(1.08) brightness(.76)}
  .scrim,.hero__body{pointer-events:none}
  .hero__body a,.hero__body button{pointer-events:auto}
}
.scrim{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,6,7,.94) 0%,rgba(5,6,7,.55) 28%,rgba(5,6,7,.05) 62%,rgba(5,6,7,.35) 100%);
}
@media (max-width:759px){
  .panels{grid-template-columns:1fr;gap:0}
  .hp:not(:first-child){display:none}
}

.hero__body{position:relative}
.hero__inner{padding-top:120px;padding-bottom:clamp(30px,5vh,52px)}
/* "Coming soon": a framed plate with the breathing pip, the first thing the
   eye meets above the headline */
.soon{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:0 0 clamp(22px,4vh,36px)}
.soon__badge{
  display:inline-flex;align-items:center;gap:14px;margin:0;
  height:44px;padding:0 20px 0 18px;
  border:1px solid rgba(185,201,242,.55);background:rgba(5,6,7,.42);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--white);
  opacity:0;animation:fade 1s var(--ease) .35s forwards;
}
.soon__badge i,.status i{position:relative;width:6px;height:6px;background:var(--xenon);display:block;flex:0 0 auto}
.soon__badge i::after{
  content:"";position:absolute;inset:-5px;border:1px solid var(--xenon);opacity:0;
  animation:pip 2.8s var(--ease) 1.4s infinite;
}
.eyebrow{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin:0}
.eyebrow span{color:#C9CFD5}
.eyebrow i{width:1px;height:9px;background:rgba(255,255,255,.3);display:block}

.hero__h{font-size:clamp(31px,4.6vw,66px);margin:0 0 clamp(26px,4.4vh,42px)}
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask>span{display:block;animation:rise 1.25s var(--ease) both}
.mask:nth-of-type(1)>span{animation-delay:.55s}
.mask:nth-of-type(2)>span{animation-delay:.67s}
.mask:nth-of-type(3)>span{animation-delay:.79s}
.mask:nth-of-type(4)>span{animation-delay:.91s}
@keyframes rise{from{transform:translateY(102%)}to{transform:translateY(0)}}

.hero__h{margin-bottom:clamp(18px,3vh,28px)}
.hero__lede{
  margin:0 0 clamp(28px,4.6vh,44px);max-width:34ch;
  font-size:clamp(17px,1.7vw,22px);font-weight:300;font-stretch:108%;line-height:1.35;color:#D3D8DD;
  opacity:0;animation:fade 1.2s var(--ease) 1.15s forwards;
}
.hero__lede span{display:inline-block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero__act{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero__link{
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:#C9CFD5;
  padding:6px 0;background:linear-gradient(var(--xenon),var(--xenon)) 0 100%/0 1px no-repeat;
  transition:background-size .45s var(--ease),color .3s var(--ease);
}
.hero__link:hover{color:var(--white);background-size:100% 1px}

.strip{position:relative;border-top:1px solid rgba(255,255,255,.22)}
.strip__grid{display:grid;grid-template-columns:repeat(2,1fr)}
.strip__cell{padding:18px 0 clamp(22px,3.4vh,30px) 16px;border-left:1px solid rgba(255,255,255,.14)}
.strip__cell:nth-child(2n+1){border-left:0;padding-left:0}
.strip__n{display:block;font-size:clamp(28px,4.6vw,46px);font-weight:200;line-height:1;letter-spacing:-.03em;margin-bottom:9px}
.strip__n sup{font-size:.4em;font-weight:400;letter-spacing:.02em;vertical-align:.9em;margin-left:.15em;color:var(--silver)}
.strip__cell .lbl{color:#A8B0B8}
.tick{position:absolute;width:9px;height:9px;border:0 solid rgba(255,255,255,.38)}
.tick--tl{top:-1px;left:var(--gut);border-top-width:1px;border-left-width:1px}
.tick--tr{top:-1px;right:var(--gut);border-top-width:1px;border-right-width:1px}
@media (min-width:760px){
  .strip__grid{grid-template-columns:repeat(4,1fr)}
  .strip__cell,.strip__cell:nth-child(2n+1){padding-left:22px;border-left:1px solid rgba(255,255,255,.14)}
  .strip__cell:first-child{border-left:0;padding-left:0}
}

/* ── built around the client ─────────────────────────────── */
.built{background:var(--black);padding-block:clamp(72px,11vh,148px)}
.sechead--dark{border-bottom-color:var(--rule)}
.sechead--dark .sechead__m{color:var(--silver);display:flex;align-items:center;gap:10px}
.pip{width:5px;height:5px;background:var(--xenon);display:block}
.built__lead{
  font-size:clamp(24px,3.2vw,44px);line-height:1.12;max-width:30ch;text-wrap:balance;
  margin:0 0 clamp(44px,7vh,84px);
}
/* the four promises as a spec strip: number, name, one line */
.feat{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--rule)}
.feat li{padding:24px 0 28px;border-bottom:1px solid var(--rule-soft);position:relative}
.feat li::before{ /* xenon bar that draws along the top on hover, like the site nav */
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--xenon);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);
}
.feat li:hover::before{transform:scaleX(1)}
.feat__n{display:block;font-size:11px;color:var(--xenon);letter-spacing:.12em;margin-bottom:clamp(18px,3vh,34px)}
.feat__h{margin:0 0 10px;font-size:clamp(20px,1.9vw,26px);font-weight:300;font-stretch:112%;letter-spacing:-.015em;line-height:1.1}
.feat p{margin:0;font-size:14px;line-height:1.6;color:var(--silver);max-width:34ch}
@media (min-width:640px){
  .feat{grid-template-columns:repeat(2,1fr)}
  .feat li:nth-child(2n){border-left:1px solid var(--rule-soft);padding-left:22px}
}
@media (min-width:1100px){
  .feat{grid-template-columns:repeat(4,1fr)}
  .feat li{border-bottom:0;padding-right:22px}
  .feat li+li{border-left:1px solid var(--rule-soft);padding-left:22px}
}
.built__foot{margin:clamp(34px,5vh,56px) 0 0;color:var(--silver-dim)}

/* ── paper chapter: talk to Manny ──────────────────────────── */
.paper{background:var(--paper);color:var(--ink)}
.talk{padding-block:clamp(72px,11vh,148px)}
.sechead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--paper-rule);
  margin-bottom:clamp(30px,5vh,56px);
}
.sechead__h{font-size:clamp(24px,3.4vw,40px);font-weight:200;font-stretch:110%;letter-spacing:-.025em;margin:0}
.sechead__m{font-size:12px;color:var(--ink-soft);letter-spacing:.02em;margin:0}

.talk__grid{display:grid;gap:clamp(48px,7vh,72px)}
@media (min-width:960px){.talk__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(48px,8vw,120px);align-items:start}}
.talk__copy{max-width:600px}
.talk__lead{font-size:clamp(24px,2.7vw,36px);line-height:1.1;text-wrap:balance;margin-bottom:24px;max-width:19ch}
@media (max-width:959px){.talk__lead{max-width:none}}
.talk__p{font-size:15px;color:var(--ink-soft);max-width:40ch;margin:0}

/* three steps: boxed numbers joined by a hairline with an arrowhead */
.steps{list-style:none;margin:clamp(40px,6vh,56px) 0 0;padding:0;max-width:360px}
.steps li{position:relative;display:grid;grid-template-columns:30px 1fr;column-gap:18px;padding-bottom:30px}
.steps li:last-child{padding-bottom:0}
.steps__n{
  grid-row:1 / span 2;align-self:start;
  display:grid;place-items:center;width:30px;height:30px;
  border:1px solid #B9BEC3;background:var(--paper);
  font-size:10.5px;letter-spacing:.06em;color:var(--ink);position:relative;z-index:1;
}
.steps li::before{ /* the line down to the next number */
  content:"";position:absolute;left:15px;top:30px;bottom:0;width:1px;background:#B9BEC3;
}
.steps li:not(:last-child)::after{ /* arrowhead just above the next box */
  content:"";position:absolute;left:12px;bottom:3px;width:5px;height:5px;
  border-right:1px solid #8E949A;border-bottom:1px solid #8E949A;transform:rotate(45deg);
}
.steps li:last-child::before{bottom:auto;height:8px}
.steps__h{margin:4px 0 6px;font-size:16px;font-weight:500;font-stretch:106%;letter-spacing:-.005em;line-height:1.2}
.steps p{grid-column:2;margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-soft)}

/* key facts as spec rows */
.facts{margin:clamp(44px,6vh,56px) 0 0;border-top:1px solid var(--paper-rule)}
.facts div{display:grid;grid-template-columns:126px 1fr;align-items:baseline;gap:16px;padding:15px 0;border-bottom:1px solid var(--paper-rule)}
.facts dt{margin:0}
.facts dd{margin:0;font-size:14.5px;color:var(--ink)}
@media (max-width:420px){.facts div{grid-template-columns:96px 1fr}}

/* the inquiry card: a framed plate with corner ticks, like the site's map frame */
.card{
  position:relative;background:#F6F7F7;border:1px solid var(--paper-rule);
  padding:clamp(24px,2.6vw,36px);
}
.card__tk{position:absolute;width:10px;height:10px;border:0 solid var(--ink)}
.card__tk--tl{top:-2px;left:-2px;border-top-width:1px;border-left-width:1px}
.card__tk--tr{top:-2px;right:-2px;border-top-width:1px;border-right-width:1px}
.card__tk--bl{bottom:-2px;left:-2px;border-bottom-width:1px;border-left-width:1px}
.card__tk--br{bottom:-2px;right:-2px;border-bottom-width:1px;border-right-width:1px}
.card__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:6px 0 18px;border-bottom:1px solid var(--ink);
}
.card__to{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-soft)}
.card__to i{width:5px;height:5px;background:var(--ink);display:block}

/* form as a spec sheet: hairline cells, label above, value below */
.form{display:grid;grid-template-columns:1fr 1fr;align-content:start}
.field{grid-column:1/-1;border-bottom:1px solid var(--paper-rule);padding:20px 0 14px;margin:0;min-width:0}
.field--half{grid-column:span 1}
.field--half+.field--half{border-left:1px solid var(--paper-rule);padding-left:20px}
@media (max-width:559px){
  .field--half{grid-column:1/-1}
  .field--half+.field--half{border-left:0;padding-left:0}
}
.field .lbl{display:block;margin-bottom:12px}
.field em{font-style:normal;letter-spacing:.12em;opacity:.7;margin-left:6px}
.field input,.field textarea{
  display:block;width:100%;border:0;background:none;padding:2px 0;
  font-size:17px;font-stretch:106%;color:var(--ink);border-radius:0;
}
.field textarea{resize:vertical;min-height:96px;line-height:1.5}
.field input:focus,.field textarea:focus{outline:0}
.field:focus-within{border-bottom-color:var(--ink)}
.field ::placeholder{color:#9AA0A6}

/* interest tiles: icon top-left, word bottom-left */
fieldset.opts{border:0;border-bottom:1px solid var(--paper-rule);padding-bottom:12px}
.opts legend{float:left;width:100%;margin-bottom:16px;padding:0}
.opts__row{clear:both;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media (min-width:560px){.opts__row{grid-template-columns:repeat(4,1fr)}}
.opts label{position:relative;cursor:pointer;display:block}
.opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opts span{
  display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;
  height:76px;padding:13px 12px 12px;
  border:1px solid rgba(18,20,24,.2);background:#EEF0F1;font-size:13.5px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.opts svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.opts label:hover span{border-color:var(--ink)}
.opts input:checked+span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.opts input:focus-visible+span{outline:1px solid var(--ink);outline-offset:3px}

.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{grid-column:1/-1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding-top:24px}
.send{
  display:inline-flex;align-items:center;gap:18px;height:52px;padding:0 26px;
  border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;
  font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease);
}
.send svg{width:14px;height:9px;fill:none;stroke:currentColor;stroke-width:1;transition:transform .4s var(--ease)}
.send:hover{background:transparent;color:var(--ink)}
.send:hover svg{transform:translateX(4px)}
.send[disabled]{opacity:.55;cursor:default}
.form__msg{margin:0;font-size:13px;color:var(--ink-soft);max-width:40ch}
.form__msg.err{color:#8A2E2E}
.form.sent .field,.form.sent fieldset{opacity:.45;pointer-events:none}

/* ── footer ─────────────────────────────────────────────────── */
.ft{background:var(--black);padding-top:clamp(56px,8vh,96px);padding-bottom:clamp(48px,8vh,96px)}
.ft__top{display:grid;gap:clamp(34px,5vh,54px)}
@media (min-width:880px){.ft__top{grid-template-columns:2fr 1fr 1fr;gap:clamp(30px,4vw,64px)}}
.ft__mark{padding-left:16px;border-left:1px solid var(--rule)}
.ft__name{display:block;font-size:clamp(26px,6.4vw,52px);font-weight:200;font-stretch:124%;letter-spacing:-.022em;line-height:1}
.ft__sub{display:block;margin-top:10px;font-size:9.5px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--silver)}
.ft__est{display:block;margin-top:18px;font-size:11.5px;color:var(--silver-dim);letter-spacing:.06em}
.ft__col h3{margin:0 0 16px}
.ft__col ul{list-style:none;margin:0;padding:0}
.ft__col li{margin-bottom:11px;font-size:14px;color:var(--silver-dim)}
.ft__col a{color:#C2C8CE;text-decoration:none;transition:color .3s var(--ease)}
.ft__col a:hover{color:var(--white)}
.ft__broker{
  margin-top:clamp(40px,6vh,72px);padding-top:26px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;
}
.ft__broker p{margin:0;font-size:12.5px;line-height:1.6;color:var(--silver);max-width:60ch}
.ft__broker b{font-weight:500;color:#C2C8CE}
.exp{
  display:block;flex:0 0 auto;width:88px;aspect-ratio:40.6/21.2;background:#C2C8CE;
  -webkit-mask:url("/assets/brand/exp-realty.svg") center/contain no-repeat;
  mask:url("/assets/brand/exp-realty.svg") center/contain no-repeat;
  transition:background .3s var(--ease);
}
.exp:hover{background:var(--white)}
.ft__bot{
  margin-top:22px;padding-top:24px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;
  font-size:11.5px;color:var(--silver-dim);letter-spacing:.03em;
}
.ft__bot p{margin:0}
.ft__bot a{color:inherit}
.ft__bot .sp{flex:1}
/* studio credit, as on proshieldsecure.com: the full-colour mark + one line */
.credit{margin-top:clamp(40px,6vh,64px);text-align:center}
.credit a{
  display:inline-flex;align-items:center;gap:11px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--silver-dim);text-decoration:none;transition:color .3s var(--ease);
}
.credit img{width:22px;height:22px;flex:none;opacity:.9}
.credit b{font-weight:400;color:#C2C8CE;transition:color .3s var(--ease)}
.credit a:hover b{color:var(--white)}
.eho{display:flex;align-items:center;gap:9px}
.eho svg{width:17px;height:17px;stroke:var(--silver-dim);fill:none;stroke-width:1}

/* ── motion off ─────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hp img{clip-path:none;animation:none}
  .hp::before{transform:none;animation:none}
  .mask>span{animation:none}
  .hero__lede{animation:none;opacity:1}
  .status i::after,.soon__badge i::after{animation:none}
  .soon__badge{animation:none;opacity:1}
  *{transition-duration:.001ms!important}
}