:root{
  --ink:#0e1418;
  --ink-soft:#5a6570;
  --blue:#134a72;
  --line:#e2e7ec;
  --bg:#f4f6f8;
  --paper:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

.page{
  min-height:100svh;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(20px,4vw,60px);
  position:relative;
  overflow:hidden;
}

/* Blueprint grid background */
.grid-bg{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(19,74,114,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,74,114,.06) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);
          mask-image:radial-gradient(ellipse at center,#000 25%,transparent 75%);
  pointer-events:none;
  z-index:0;
}

/* Card */
.card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:640px;
  background:var(--paper);
  padding:clamp(32px,5vw,56px);
  border:1px solid var(--line);
  border-radius:3px;
  box-shadow:0 24px 60px -30px rgba(10,47,74,.25),0 6px 16px -8px rgba(10,47,74,.08);
}

/* Monogram */
.monogram{
  position:absolute;
  top:clamp(24px,3vw,32px);
  right:clamp(24px,3vw,32px);
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--blue);
  color:var(--blue);
  font-weight:500;
  font-size:15px;
  letter-spacing:.08em;
}

.eyebrow{
  margin:0 0 18px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--blue);
  padding-right:60px;
}

h1{
  margin:0;
  font-weight:300;
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--ink);
  padding-right:60px;
}

.accent{
  width:56px;
  height:2px;
  background:var(--blue);
  margin:clamp(22px,3vw,32px) 0 clamp(28px,3.5vw,38px);
}

/* Contact list */
.contact{
  font-style:normal;
  display:block;
}

.row{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.row:first-child{padding-top:0}
.row:last-child{padding-bottom:0;border-bottom:none}

.icon{
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin-top:2px;
}
.icon svg{
  width:22px;
  height:22px;
  display:block;
  stroke:var(--blue);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.text{
  flex:1 1 auto;
  min-width:0;
  display:block;
}

.label{
  display:block;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:2px;
}

.value{
  display:block;
  font-size:clamp(15px,1.4vw,17px);
  font-weight:400;
  color:var(--ink);
  text-decoration:none;
  line-height:1.4;
}

a.value{
  border-bottom:1px solid transparent;
  transition:border-color .18s ease,color .18s ease;
  display:inline;
}
a.value:hover,
a.value:focus-visible{
  color:var(--blue);
  border-bottom-color:var(--blue);
  outline:none;
}

.email{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Footer */
.foot{
  position:absolute;
  bottom:clamp(16px,2.5vw,26px);
  left:0;
  right:0;
  margin:0;
  text-align:center;
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:.6;
  z-index:1;
}

@media (max-width:520px){
  .card{padding:32px 24px}
  .monogram{width:40px;height:40px;font-size:13px;top:20px;right:20px}
  .eyebrow{padding-right:52px}
  h1{padding-right:52px}
  .row{gap:14px}
  .icon,.icon svg{width:20px;height:20px}
  .value{font-size:15px}
  .foot{font-size:9.5px}
}