:root{
  --ink:#0B0C0F;
  --body:#131419;
  --raised:#191B22;
  --raised2:#20222B;
  --gold:#C9A24B;
  --gold2:#ECD08A;
  --gold3:#9A7A33;
  --bone:#F4F1EA;
  --ash:#94948D;
  --ash2:#6F6F69;
  --line:rgba(201,162,75,.24);
  --hair:rgba(255,255,255,.07);
  --script:"Pinyon Script","Brush Script MT",cursive;
  --display:"Cinzel",Georgia,"Times New Roman",serif;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--ui);
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(201,162,75,.10), transparent 60%),
    radial-gradient(140% 90% at 50% 120%, rgba(201,162,75,.05), transparent 55%),
    #060708;
  color:var(--bone);
  min-height:100vh;min-height:100dvh;
  display:flex;align-items:center;justify-content:center;
  padding:26px 16px;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Card shell ---------- */
.c-card{
  width:100%;max-width:410px;
  background:linear-gradient(180deg,#15161C 0%, var(--body) 26%, var(--ink) 100%);
  border:1px solid rgba(255,255,255,.06);
  border-radius:30px;
  overflow:hidden;
  position:relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 40px 90px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(0,0,0,.4);
}
/* thin gold top seam */
.c-card::before{
  content:"";position:absolute;left:18%;right:18%;top:0;height:1px;z-index:5;
  background:linear-gradient(90deg,transparent,var(--gold2),transparent);
  opacity:.55;
}

/* ---------- Hero ---------- */
.c-hero{position:relative;width:100%;aspect-ratio:100/95;overflow:hidden}
.c-hero__img{
  position:absolute;inset:0;
  background-image:url("../images/hero.jpg");
  background-size:cover;
  background-position:center 22%;
  transform-origin:center 30%;
}
/* top + bottom photo grading */
.c-hero__grade{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,9,12,.42) 0%, rgba(8,9,12,0) 16%),
    linear-gradient(180deg, transparent 44%, rgba(11,12,15,.35) 68%, rgba(11,12,15,.85) 88%, var(--body) 100%);
}
/* roofline sweep that carves the photo into the body */
.c-roof{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:16.3%;display:block;z-index:3}
.c-ridge{
  fill:none;stroke:url(#goldgrad);stroke-width:2.2;stroke-linecap:round;
  filter:drop-shadow(0 0 5px rgba(236,208,138,.55));
  stroke-dashoffset:0;
}

/* ---------- Identity ---------- */
.c-id{padding:4px 26px 0;text-align:center;position:relative;z-index:4;margin-top:-6px}
.c-logo{width:158px;height:auto;margin:0 auto;display:block;filter:drop-shadow(0 6px 16px rgba(0,0,0,.6))}
.c-tag{
  font-family:var(--ui);font-weight:600;font-size:.585rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);margin:10px 0 2px;padding-left:.42em;
}
.c-name{
  font-family:var(--script);
  font-size:3.55rem;line-height:.92;font-weight:400;
  margin:6px 0 2px;
  background:linear-gradient(98deg,#8a6d2e 0%, #d6b65f 30%, #f4dca0 47%, #c9a24b 64%, #876a2c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 2px 22px rgba(201,162,75,.18);
  padding:0 .12em .06em;
}
.c-role{
  font-family:var(--ui);font-weight:700;font-size:.685rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--bone);opacity:.9;
  margin-top:2px;
}

/* credential chips */
.c-chips{
  display:flex;flex-wrap:wrap;justify-content:center;gap:7px;
  margin:16px auto 2px;max-width:340px;
}
.c-chip{
  font-family:var(--ui);font-weight:600;font-size:.61rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--gold2);
  border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;background:rgba(201,162,75,.05);
  text-decoration:none;white-space:nowrap;transition:.22s ease;
}
a.c-chip:hover,a.c-chip:focus-visible{
  border-color:var(--gold);color:var(--ink);background:var(--gold2);
}

/* ---------- Contact rows ---------- */
.c-rows{margin:22px 22px 0;display:flex;flex-direction:column;gap:10px}
.c-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 14px;border-radius:16px;
  background:linear-gradient(180deg,var(--raised),#15161B);
  border:1px solid var(--hair);
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.c-row::after{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold2),var(--gold3));
  transform:scaleY(0);transform-origin:center;transition:transform .25s ease;
}
.c-row:hover,.c-row:focus-visible{
  transform:translateY(-2px);
  border-color:var(--line);
  box-shadow:0 14px 26px -14px rgba(0,0,0,.8), 0 0 0 1px rgba(201,162,75,.08);
}
.c-row:hover::after,.c-row:focus-visible::after{transform:scaleY(1)}
.c-row:active{transform:translateY(0)}
.c-row__ic{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%, rgba(201,162,75,.20), rgba(201,162,75,.05));
  border:1px solid var(--line);color:var(--gold2);
  transition:.22s ease;
}
.c-row:hover .c-row__ic{color:var(--ink);background:linear-gradient(160deg,var(--gold2),var(--gold))}
.c-row__ic svg{width:21px;height:21px}
.c-row__tx{display:flex;flex-direction:column;line-height:1.15;min-width:0;flex:1}
.c-row__lbl{
  font-size:.605rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);font-weight:600;margin-bottom:3px;
}
.c-row__val{font-size:1.04rem;font-weight:700;color:var(--bone);letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-row__val--phone{font-size:1.2rem;letter-spacing:.02em}
.c-row__val span{font-weight:500;color:var(--ash);display:block;font-size:.9rem;letter-spacing:0}
.c-row__go{flex:0 0 auto;color:var(--ash2);transition:.22s ease}
.c-row:hover .c-row__go{color:var(--gold2);transform:translateX(3px)}
.c-row__go svg{width:17px;height:17px;display:block}

/* ---------- Save contact CTA ---------- */
.c-cta{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:calc(100% - 44px);margin:16px 22px 0;
  padding:16px;border:none;cursor:pointer;border-radius:16px;
  font-family:var(--ui);font-weight:700;font-size:.86rem;letter-spacing:.13em;
  text-transform:uppercase;color:#15110a;
  background:linear-gradient(100deg,#9c7a30,#e6c878 30%,#f6e1aa 50%,#cda64d 72%,#9c7a30);
  background-size:220% 100%;background-position:88% 0;
  box-shadow:0 12px 28px -12px rgba(201,162,75,.6), 0 1px 0 rgba(255,255,255,.4) inset;
  transition:background-position .5s ease, transform .18s ease, box-shadow .25s ease;
}
.c-cta:hover{background-position:8% 0;transform:translateY(-2px);
  box-shadow:0 18px 34px -12px rgba(201,162,75,.72), 0 1px 0 rgba(255,255,255,.5) inset}
.c-cta:active{transform:translateY(0)}
.c-cta svg{width:19px;height:19px}
.c-cta__done{display:none}
.c-cta.is-done{background:linear-gradient(100deg,#1f3a26,#2f5a3a);color:var(--bone);
  box-shadow:0 12px 28px -14px rgba(0,0,0,.7)}
.c-cta.is-done .c-cta__main{display:none}
.c-cta.is-done .c-cta__done{display:inline}
.c-cta__hint{
  display:none;margin:10px 22px 0;text-align:center;
  font-size:.66rem;line-height:1.55;letter-spacing:.03em;color:var(--ash);
}
.c-cta__hint.show{display:block}
.c-cta__hint b{color:var(--gold2);font-weight:700}

/* ---------- Connect band ---------- */
.c-divide{display:flex;align-items:center;gap:14px;margin:24px 26px 16px}
.c-divide::before,.c-divide::after{content:"";flex:1;height:1px;background:var(--hair)}
.c-divide span{font-size:.595rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ash);font-weight:600}

.c-soc{display:flex;justify-content:center;gap:13px;margin:0 26px}
.c-soc a{
  width:50px;height:50px;border-radius:50%;
  display:grid;place-items:center;text-decoration:none;
  border:1px solid var(--line);color:var(--bone);
  background:rgba(255,255,255,.02);transition:.22s ease;
  font-family:var(--ui);font-weight:800;font-size:1.25rem;line-height:1;
}
.c-soc a:hover,.c-soc a:focus-visible{
  color:var(--ink);background:linear-gradient(160deg,var(--gold2),var(--gold));
  border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 12px 22px -10px rgba(201,162,75,.5)}
.c-soc svg{width:23px;height:23px}
.c-soc__g{font-family:var(--display);font-weight:700;font-size:1.32rem;padding-bottom:1px}

/* QR */
.c-qr{display:flex;flex-direction:column;align-items:center;margin:22px 26px 0;
  text-decoration:none;color:inherit;cursor:pointer}
.c-qr__tile{
  width:158px;height:158px;border-radius:16px;padding:11px;
  background:var(--bone);border:1px solid var(--line);
  box-shadow:0 14px 30px -16px rgba(0,0,0,.8);
  display:grid;place-items:center;overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.c-qr:hover .c-qr__tile,.c-qr:focus-visible .c-qr__tile{
  transform:translateY(-3px);border-color:var(--gold);
  box-shadow:0 20px 36px -16px rgba(0,0,0,.85), 0 0 0 1px rgba(201,162,75,.18);
}
.c-qr:hover .c-qr__cap,.c-qr:focus-visible .c-qr__cap{color:var(--gold2)}
.c-qr__tile img,.c-qr__tile canvas,.c-qr__tile svg{display:block;width:100%!important;height:100%!important;border-radius:6px}
.c-qr__tile.is-failed{background:var(--raised);border-style:dashed}
.c-qr__cap{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);font-weight:600;margin-top:11px;text-align:center;
}
.c-qr.hide{display:none}

/* ---------- Footer ---------- */
.c-foot{margin:26px 26px 30px;text-align:center}
.c-foot__line{font-size:.66rem;color:var(--ash);letter-spacing:.04em;line-height:1.7}
.c-foot__co{font-family:var(--display);font-weight:600;font-size:.72rem;letter-spacing:.12em;
  color:var(--gold2);text-transform:uppercase;margin-bottom:7px}
.c-foot__id{font-size:.58rem;color:var(--ash2);letter-spacing:.1em;margin-top:9px;text-transform:uppercase}

/* ---------- SVG defs holder ---------- */
.c-defs{position:absolute;width:0;height:0}

/* ---------- Motion ---------- */
.c-ridge{stroke-dashoffset:0}
@media (prefers-reduced-motion: no-preference){
  .c-hero__img{animation:heroIn 1.5s cubic-bezier(.2,.7,.2,1) both}
  .c-ridge{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s ease .35s forwards}
  .c-rise{opacity:0;transform:translateY(16px);
    animation:riseUp .72s cubic-bezier(.2,.7,.2,1) both;animation-delay:var(--d,0s)}
}
@keyframes heroIn{from{transform:scale(1.07);opacity:.35}to{transform:scale(1);opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes riseUp{to{opacity:1;transform:translateY(0)}}

:focus-visible{outline:2px solid var(--gold2);outline-offset:3px}
.c-row:focus-visible{outline-offset:-1px}

@media (max-width:380px){
  .c-name{font-size:3.15rem}
  .c-rows{margin-left:16px;margin-right:16px}
  .c-cta{width:calc(100% - 32px);margin-left:16px;margin-right:16px}
  .c-id{padding-left:18px;padding-right:18px}
}

/* =====================================================================
   ADD-ON SECTIONS
   Ready-made styles for anything you add later (About, Services,
   Reviews, a second button, etc.). Copy a block from the template
   near the bottom of index.html and it will match the card.
   ===================================================================== */
.c-sec{
  margin:22px 22px 0;padding:20px 18px 18px;border-radius:18px;
  background:linear-gradient(180deg,var(--raised),#15161B);
  border:1px solid var(--hair);
}
.c-sec__title{
  font-family:var(--display);font-weight:600;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold2);margin-bottom:12px;
}
.c-sec__body{font-size:.9rem;line-height:1.62;color:var(--bone);opacity:.9}
.c-sec__body p + p{margin-top:10px}
.c-sec__body a{color:var(--gold2)}

/* bullet list with small gold diamonds */
.c-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.c-list li{position:relative;padding-left:20px;font-size:.9rem;line-height:1.45;color:var(--bone)}
.c-list li::before{
  content:"";position:absolute;left:3px;top:.5em;width:7px;height:7px;
  transform:rotate(45deg);background:linear-gradient(135deg,var(--gold2),var(--gold3));
}

/* customer review / quote */
.c-quote{padding:2px 0 0}
.c-quote + .c-quote{margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.c-quote__stars{color:var(--gold);letter-spacing:.18em;font-size:.8rem;margin-bottom:6px}
.c-quote__text{font-size:.92rem;line-height:1.55;color:var(--bone);font-style:italic}
.c-quote__who{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-top:8px;font-weight:600}

/* secondary button (outline gold) */
.c-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin:14px 22px 0;padding:15px 16px;border-radius:16px;
  border:1px solid var(--gold);background:rgba(201,162,75,.06);
  font-family:var(--ui);font-weight:700;font-size:.8rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold2);text-decoration:none;
  transition:transform .18s ease, background .22s ease, color .22s ease;
}
.c-btn:hover,.c-btn:focus-visible{background:var(--gold2);color:var(--ink);transform:translateY(-2px)}
.c-btn svg{width:18px;height:18px}
.c-sec .c-btn{margin:16px 0 0}

@media (max-width:380px){
  .c-sec{margin-left:16px;margin-right:16px}
  .c-btn{margin-left:16px;margin-right:16px}
}