/* ---------------------------------------------------------------
   Chip + Kim Real Estate Group — digital card
   The portrait is lit from behind and dissolves into the ground.
   The brand's orange "+" is the only colour and the only connector.
   --------------------------------------------------------------- */

@font-face{font-family:Fraunces;src:url(fonts/fraunces-var.woff2) format('woff2-variations');
  font-weight:100 900;font-display:swap}
@font-face{font-family:Jost;src:url(fonts/jost-var.woff2) format('woff2-variations');
  font-weight:100 900;font-display:swap}

:root{
  --ink:#0A0908; --ink-2:#1B1510;
  --ember:#F48B3E; --ember-hi:#FFC089; --ember-lo:#D9701F;
  --bone:#F7F4EF; --bone-2:rgba(247,244,239,.68); --bone-3:rgba(247,244,239,.44);
  --hair:rgba(247,244,239,.13);
  --plate:480px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  overflow-x:hidden;               /* the key light is meant to bleed off the edges */
  margin:0; background:var(--ink); color:var(--bone);
  font-family:Jost,'Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100dvh;
  background-image:
    radial-gradient(120% 60% at 50% 0%, #241B13 0%, rgba(36,27,19,0) 62%),
    linear-gradient(180deg,#100C09 0%, var(--ink) 46%, #070605 100%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:6px}

.plate{max-width:var(--plate);margin:0 auto;padding:0 20px 46px}

/* --- brand mark ------------------------------------------------ */
.mark{width:132px;margin:22px auto 0;opacity:.94}

/* --- the stage: key light + dissolving portrait ----------------- */
.stage{position:relative;margin-top:4px}
.stage::before{
  content:"";position:absolute;inset:-4% -20% 14% -20%;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 50% at 50% 40%,
    rgba(244,139,62,.36) 0%, rgba(244,139,62,.10) 46%, rgba(244,139,62,0) 72%);
}
.portrait{position:relative;z-index:1;width:100%;height:auto}

/* --- identity --------------------------------------------------- */
.identity{position:relative;z-index:2;text-align:center;margin-top:-34px}
.name{
  margin:0;font-family:Fraunces,Georgia,serif;font-variation-settings:'opsz' 96;
  font-weight:600;font-size:clamp(32px,10.4vw,46px);line-height:1;letter-spacing:-.018em;
  text-shadow:0 2px 24px rgba(0,0,0,.7);
}
.of{margin:11px 0 0;font-size:16px;font-weight:400;letter-spacing:.05em;color:var(--bone-2)}
.of em{font-style:normal;font-weight:500;color:var(--ember)}

.rule{display:flex;align-items:center;gap:13px;margin:16px 0 0}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:var(--hair)}
.rule i{font-style:normal;color:var(--ember);font-size:15px;line-height:1}

.tagline{margin:13px 0 0;font-size:10px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone-3)}

/* --- brokerage + licence --------------------------------------- */
.cred{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:19px}
.cred img{width:78px;opacity:.9}
.cred .bar{width:1px;height:36px;background:var(--hair)}
.cred .txt{text-align:left}
.cred b{display:block;font-size:11.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-2)}
.cred span{display:block;margin-top:4px;font-size:11.5px;font-weight:300;
  letter-spacing:.1em;color:var(--bone-3)}

/* --- the one obvious tap ---------------------------------------- */
.save{
  display:flex;align-items:center;justify-content:center;gap:12px;
  width:100%;min-height:64px;margin-top:22px;padding:0 18px;border:0;border-radius:14px;
  font-family:Jost;font-size:15px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#251405;cursor:pointer;
  background:linear-gradient(180deg,var(--ember-hi) 0%,var(--ember) 46%,var(--ember-lo) 100%);
  box-shadow:0 12px 32px -10px rgba(244,139,62,.55),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s ease, box-shadow .18s ease;
}
.save svg{width:21px;height:21px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.save:hover{box-shadow:0 16px 40px -10px rgba(244,139,62,.68),inset 0 1px 0 rgba(255,255,255,.55)}
.save:active{transform:translateY(1px)}
.save-note{margin:11px 0 0;text-align:center;font-size:12px;font-weight:300;
  letter-spacing:.05em;color:var(--bone-3)}

/* --- call / text / email / web ---------------------------------- */
.acts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:20px}
.act{display:flex;flex-direction:column;align-items:center;gap:9px;padding:8px 0;border-radius:14px}
.act i{width:54px;height:54px;border-radius:50%;border:1px solid var(--hair);
  display:grid;place-items:center;background:rgba(247,244,239,.03);
  transition:border-color .18s ease,background .18s ease}
.act svg{width:21px;height:21px;stroke:var(--bone);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .18s ease}
.act span{font-size:9.5px;font-weight:400;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bone-3);transition:color .18s ease}
.act:hover i,.act:focus-visible i{border-color:rgba(244,139,62,.6);background:rgba(244,139,62,.1)}
.act:hover svg,.act:focus-visible svg{stroke:var(--ember)}
.act:hover span,.act:focus-visible span{color:var(--bone-2)}

/* --- reciprocal introduction ------------------------------------ */
.swap{margin-top:34px;padding:21px 19px 19px;border:1px solid var(--hair);border-radius:18px;
  background:rgba(247,244,239,.022)}
.swap h2{margin:0;font-family:Fraunces,Georgia,serif;font-variation-settings:'opsz' 36;
  font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--bone)}
.swap p{margin:7px 0 16px;font-size:12.5px;font-weight:300;line-height:1.5;color:var(--bone-3)}
.swap label{display:block;font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3);margin:0 0 6px}
.field{margin-bottom:13px}
.swap input{
  width:100%;height:48px;padding:0 14px;border-radius:11px;
  border:1px solid var(--hair);background:rgba(10,9,8,.55);color:var(--bone);
  font-family:Jost;font-size:16px;font-weight:400;   /* 16px keeps iOS from zooming */
  transition:border-color .18s ease}
.swap input::placeholder{color:rgba(247,244,239,.26)}
.swap input:focus{outline:none;border-color:rgba(244,139,62,.6)}
.swap button{
  width:100%;min-height:52px;margin-top:4px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(244,139,62,.5);background:rgba(244,139,62,.1);color:var(--ember);
  font-family:Jost;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  transition:background .18s ease}
.swap button:hover{background:rgba(244,139,62,.18)}

/* --- the other half of the team ---------------------------------- */
.meet{display:flex;align-items:center;gap:14px;margin-top:30px;padding:13px 18px 13px 13px;
  border:1px solid var(--hair);border-radius:999px;transition:border-color .18s ease}
.meet:hover{border-color:rgba(244,139,62,.45)}
.meet img{width:46px;height:46px;border-radius:50%;flex:none}
.meet .t{flex:1;min-width:0}
.meet .t b{display:block;font-family:Fraunces,Georgia,serif;font-variation-settings:'opsz' 30;
  font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--bone)}
.meet .t span{display:block;margin-top:2px;font-size:9.5px;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bone-3)}
.meet svg{width:17px;height:17px;flex:none;stroke:var(--ember);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

/* --- footer ------------------------------------------------------ */
.foot{margin-top:34px;text-align:center}
.foot a{font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone-2);border-bottom:1px solid var(--hair);padding-bottom:3px}
.foot a:hover{color:var(--ember);border-color:rgba(244,139,62,.5)}
.foot p{margin:19px 0 0;font-size:10px;font-weight:300;letter-spacing:.1em;line-height:1.7;
  color:rgba(247,244,239,.28)}

/* --- desktop ------------------------------------------------------ */
@media (min-width:900px){
  body{display:grid;place-items:center;padding:36px 0}
  .plate{width:var(--plate)}
  .mark{margin-top:0}
}

/* --- entrance ------------------------------------------------------ */
@keyframes rise{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
@keyframes bloom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.r{opacity:0;animation:rise .72s cubic-bezier(.22,.68,.36,1) forwards;animation-delay:var(--d,0s)}
.d1{--d:.30s}.d2{--d:.38s}.d3{--d:.44s}.d4{--d:.48s}.d5{--d:.54s}
.d6{--d:.60s}.d7{--d:.64s}.d8{--d:.70s}.d9{--d:.76s}.d10{--d:.82s}.d11{--d:.88s}
.stage::before{opacity:0;animation:bloom 1.1s ease-out .1s forwards}
.portrait{opacity:0;animation:rise .82s cubic-bezier(.22,.68,.36,1) .16s forwards}
@media (prefers-reduced-motion:reduce){
  .r,.portrait,.stage::before{animation:none;opacity:1;transform:none}
  *{transition:none!important}
}