:root{--cream:#fff9f1;--navy:#071d43;--primary:#153a5e;--muted:#41637c;--peach:#fce7dc;--gold:#cc8c27;--row-radius:16px;font-family:"Nunito Sans",Arial,sans-serif;color:var(--navy);background:var(--cream);color-scheme:light}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:5px}svg{display:block}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.device{width:100%;margin:auto}.device-screen{position:relative}.device-status{display:none}
.connect-card{position:relative;isolation:isolate;overflow:hidden;padding-bottom:max(24px,env(safe-area-inset-bottom));background:var(--cream);min-height:100svh}
.background-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.portrait-zone{height:clamp(220px,63vw,252px);position:relative;overflow:hidden;margin-top:max(10px,env(safe-area-inset-top))}
.portrait{position:absolute;width:74%;max-width:292px;height:auto;left:50%;bottom:-43px;transform:translateX(-50%);object-fit:contain}
.identity{text-align:center;padding:0 18px;position:relative;margin-top:12px}
.identity h1{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(36px,10.7vw,43px);font-weight:600;line-height:1.06;margin:0 0 6px;letter-spacing:-.5px}
.professional-title{font-size:clamp(14px,4vw,16px);line-height:1.45;margin:0;font-weight:400;text-wrap:balance}
.location{margin:3px 0 0;font-size:16px;line-height:1.5;color:var(--muted)}
.contact-list{display:flex;flex-direction:column;gap:10px;margin:24px 18px 0}
.contact-row{display:flex;align-items:center;gap:20px;min-height:60px;padding:12px 18px;border:1.2px solid var(--navy);border-radius:var(--row-radius);background:var(--cream);font-size:20px;font-weight:700;line-height:1.4}
.contact-row.primary{background:var(--primary);border-color:var(--primary);color:white;min-height:66px}
.brand{width:32px;height:32px;flex:0 0 32px}.brand svg{width:100%;height:100%}.linkedin{background:white;border-radius:5px;color:var(--primary)}.linkedin svg{fill:currentColor}.whatsapp{color:#06aa3f}.viber{color:#8636eb}
.chevron{width:23px;height:23px;margin-left:auto;flex:0 0 23px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.website-section{margin:18px 18px 0;padding-top:17px;border-top:1px solid #edc8a6}
.website-row{display:flex;align-items:center;gap:18px;padding:13px 18px;border-radius:var(--row-radius);min-height:74px;background:var(--peach)}
.globe{width:36px;height:36px;flex:0 0 36px;fill:none;stroke:var(--gold);stroke-width:1.5}.website-copy{display:flex;flex-direction:column;min-width:0}.website-copy strong{font-size:20px;line-height:1.4;font-weight:700}.website-copy>span{font-size:16px;color:var(--muted);line-height:1.35}
.external-arrow{margin-left:auto;width:25px;height:25px;flex:0 0 25px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
dialog{max-width:calc(100% - 36px);width:350px;padding:28px;border:1px solid #edc8a6;border-radius:20px;background:var(--cream);color:var(--navy);box-shadow:0 16px 60px #071d4330}dialog::backdrop{background:#071d4360}dialog h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;margin:0 0 12px}dialog p{font-size:16px;line-height:1.5}.dialog-close{position:absolute;right:12px;top:10px;border:0;background:transparent;color:var(--navy);font-size:28px;width:40px;height:40px}#copy-number{width:100%;min-height:48px;border:0;border-radius:12px;background:var(--primary);color:white;font-weight:700}.phone-number{font-weight:700}#copy-feedback{margin:12px 0 0;min-height:24px;font-size:14px}
@media(min-width:768px){body{padding:32px;background:#f4f0e9;min-height:100vh;display:flex;align-items:flex-start;justify-content:center}.device{width:414px;padding:10px;background:#091524;border-radius:49px;box-shadow:0 24px 65px #182b4420,0 3px 8px #182b4410;flex:none;border:1px solid #253648}.device-screen{border-radius:38px;overflow:hidden;background:var(--cream)}.device-status{height:42px;padding:12px 25px 0;display:flex;align-items:center;justify-content:space-between;position:relative;color:#071d43;font-size:16px;font-weight:700}.device-island{position:absolute;width:85px;height:18px;left:50%;top:9px;transform:translateX(-50%);background:#091524;border-radius:20px}.status-icons{display:flex;align-items:center;gap:4px}.status-icons svg{width:17px;height:17px}.status-icons svg:last-child{width:23px}.connect-card{min-height:790px}.portrait-zone{height:240px;margin-top:0}.identity h1{font-size:43px}.professional-title{font-size:16px}}
@media(min-width:600px) and (max-width:767px){.device{max-width:430px}}
@media(max-width:350px){.contact-list{margin-top:20px;gap:9px}.contact-row{gap:16px;padding-inline:16px;font-size:19px}.website-row{gap:13px;padding-inline:16px}.website-copy strong{font-size:18px}.identity{padding-inline:12px}.identity h1{font-size:36px}.professional-title{font-size:14px}.portrait-zone{height:218px}.portrait{width:80%;bottom:-38px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep every contact within the available mobile viewport; shrink the portrait first. */
@media (max-width:767px) {
  html,body{height:100%;overscroll-behavior-y:none}
  .device,.device-screen{height:100%;min-height:0}
  .connect-card{
    height:100svh;height:100dvh;min-height:0;
    display:grid;grid-template-rows:minmax(0,1fr) auto auto auto;
    padding-top:max(8px,env(safe-area-inset-top));
    padding-bottom:max(12px,env(safe-area-inset-bottom));
    padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  }
  .portrait-zone{height:100%;min-height:0;max-height:252px;margin-top:0;align-self:end}
  .portrait{height:calc(100% + 40px);width:auto;max-height:292px;max-width:82%;bottom:-40px}
  .identity{margin-top:clamp(6px,1.3dvh,12px);padding-inline:12px}
  .identity h1{font-size:clamp(32px,5.2dvh,43px);margin-bottom:clamp(3px,.7dvh,6px)}
  .professional-title{font-size:clamp(13px,2dvh,16px);line-height:1.3}
  .location{font-size:clamp(13px,2dvh,16px);line-height:1.35;margin-top:3px}
  .contact-list{margin:clamp(10px,2.6dvh,24px) clamp(14px,4.6vw,18px) 0;gap:clamp(6px,1.2dvh,10px)}
  .contact-row,.contact-row.primary{
    height:clamp(44px,7.5dvh,60px);min-height:44px;
    padding:5px 16px;gap:clamp(14px,4.7vw,20px);font-size:clamp(17px,2.5dvh,20px)
  }
  .brand{width:clamp(26px,4dvh,32px);height:clamp(26px,4dvh,32px);flex-basis:clamp(26px,4dvh,32px)}
  .website-section{
    margin:clamp(10px,2dvh,18px) clamp(14px,4.6vw,18px) 0;
    padding-top:clamp(9px,1.8dvh,17px)
  }
  .website-row{height:clamp(56px,8.8dvh,74px);min-height:56px;padding:6px 16px;gap:14px}
  .website-copy strong{font-size:clamp(17px,2.5dvh,20px);line-height:1.3}
  .website-copy>span{font-size:clamp(13px,2dvh,16px)}
  .globe{width:30px;height:30px;flex-basis:30px}
}
/* A wide, short phone uses two columns so the photo and all four channels still fit. */
@media (max-height:500px) and (max-width:950px) and (orientation:landscape) {
  html,body{height:100%;overscroll-behavior-y:none}
  body{padding:0;display:block;background:var(--cream)}
  .device{width:100%;max-width:none;height:100%;padding:0;border:0;border-radius:0;box-shadow:none;background:var(--cream)}
  .device-screen{height:100%;border-radius:0}.device-status{display:none}
  .connect-card{height:100svh;height:100dvh;min-height:0;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
    column-gap:16px;padding:max(8px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .portrait-zone{grid-column:1;grid-row:1;height:100%;min-height:0;max-height:none;margin:0}
  .portrait{height:calc(100% + 32px);width:auto;max-height:240px;max-width:90%;bottom:-32px}
  .identity{grid-column:1;grid-row:2;margin:4px 0 0;padding:0}
  .identity h1{font-size:30px;margin-bottom:3px}
  .professional-title{font-size:12px;line-height:1.25}.location{font-size:12px;line-height:1.25}
  .contact-list{grid-column:2;grid-row:1;margin:0;gap:6px;align-self:center}
  .contact-row,.contact-row.primary{height:44px;min-height:44px;padding:5px 12px;gap:12px;font-size:17px}
  .brand{width:26px;height:26px;flex-basis:26px}
  .website-section{grid-column:2;grid-row:2;margin:6px 0 0;padding-top:6px}
  .website-row{height:52px;min-height:52px;padding:5px 12px;gap:10px}
  .website-copy strong{font-size:16px;line-height:1.3}.website-copy>span{font-size:12px}
  .globe{width:26px;height:26px;flex-basis:26px}
}