:root{ color-scheme: dark; }

:root{
    --black:#0a0a0a;
    --surface:#141110;
    --line: rgba(246,236,233,0.14);
    --line-strong: rgba(246,236,233,0.28);
    --red:#ea0017;
    --red-deep:#b8000f;
    --cream:#fcf7f3;
    --cream-soft:#a9948e;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--black);
    color:var(--cream);
    font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
    padding-inline:20px;
    padding-block:52px;
    min-height:100%;
    display:flex;
    justify-content:center;
  }

  .card{
    width:100%;
    max-width:420px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:26px;
  }

  .masthead{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
  }
  .eyebrow{
    font-family:"Bodoni Moda", Georgia, serif;
    font-size:11px;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--cream-soft);
    font-weight:500;
  }
  .rule{
    width:34px;
    height:1px;
    background:var(--red);
  }
  .rule.wide{ width:100%; background:var(--line); }

  figure.portrait{
    margin:0;
    width:100%;
    max-width:236px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .frame{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:50%;
    border:1px solid var(--line-strong);
    box-shadow: 0 0 0 1px var(--black), 0 0 0 3px var(--red);
    background:var(--surface);
  }
  .frame img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 34%;
    display:block;
  }
  .frame::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    box-shadow: inset 0 0 34px 8px rgba(0,0,0,0.5);
    pointer-events:none;
  }
  .frame .mark{
    position:absolute;
    right:-2px;
    bottom:-2px;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--red);
    display:flex;
    align-items:center;
    justify-content:center;
    border:2px solid var(--black);
    box-shadow:0 6px 14px -4px rgba(234,0,23,0.7);
  }
  .frame .mark svg{ width:14px; height:14px; }

  figcaption{
    font-family:"Bodoni Moda", Georgia, serif;
    font-style:italic;
    font-size:11.5px;
    letter-spacing:0.02em;
    color:var(--cream-soft);
    text-align:center;
  }

  .identity{
    text-align:center;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  h1{
    margin:0;
    font-family:"Bodoni Moda", Georgia, serif;
    font-weight:600;
    font-size:clamp(34px,10vw,44px);
    line-height:1.02;
    letter-spacing:-0.01em;
    text-wrap:balance;
    color:var(--cream);
  }
  .role{
    margin:0;
    font-family:"Bodoni Moda", Georgia, serif;
    font-style:italic;
    font-size:16px;
    color:var(--cream-soft);
    font-weight:500;
  }
  .role strong{
    color:var(--cream);
    font-weight:600;
    font-style:normal;
  }

  .tagline{
    text-align:center;
    font-size:13.5px;
    line-height:1.6;
    color:var(--cream-soft);
    max-width:300px;
    margin:0;
  }

  .actions{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:11px;
  }
  .action{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:15px 17px;
    text-decoration:none;
    color:var(--cream);
    background:var(--surface);
    border:1px solid var(--line);
    transition:transform 0.15s ease, border-color 0.15s ease;
    font-weight:500;
    font-size:14.5px;
  }
  .action:hover{
    transform:translateY(-2px);
    border-color:var(--red);
  }
  .action:focus-visible{
    outline:2px solid var(--red);
    outline-offset:2px;
  }
  .action .icon{
    width:38px;
    height:38px;
    flex:none;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(234,0,23,0.14);
    color:var(--red);
  }
  .action .icon svg{ width:18px; height:18px; }
  .action .label{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .action .label .k{
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--cream-soft);
    font-weight:600;
  }
  .action .label .v{
    font-size:14.5px;
    color:var(--cream);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .action.primary{
    background:var(--red);
    border-color:var(--red);
  }
  .action.primary .icon{
    background:rgba(255,255,255,0.16);
    color:var(--cream);
  }
  .action.primary .label .k{ color:rgba(255,255,255,0.75); }
  .action.primary .label .v{ color:#fff; }

  footer{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    padding-top:6px;
    width:100%;
  }
  footer .brand img{
    height:15px;
    width:auto;
    display:block;
  }
  footer .agency-line{
    font-size:11.5px;
    color:var(--cream-soft);
    text-align:center;
    max-width:270px;
    line-height:1.55;
  }

/* ==========================================================================
   CONTACT FORM STYLES
   ========================================================================== */
.contact-form-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.form-header {
  text-align: left;
}

.form-header h2 {
  font-family: "Bodoni Moda", Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: var(--cream);
  line-height: 1.1;
}

.form-header h2 em {
  font-style: italic;
  color: var(--red);
}

.form-header p {
  margin: 0;
  font-size: 13.5px;
  color: var(--cream-soft);
  line-height: 1.5;
}

.form-message {
  padding: 14px;
  border-radius: 4px;
  font-size: 14px;
  text-align: center;
}

.form-message.success {
  background: rgba(46, 204, 113, 0.1);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.2);
}

.form-message.error {
  background: rgba(234, 0, 23, 0.1);
  color: var(--red);
  border: 1px solid rgba(234, 0, 23, 0.2);
}

.custom-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-group.half {
  flex: 1;
}

.custom-form label {
  font-family: "Inter", monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream);
  font-weight: 600;
}

.custom-form input[type="text"],
.custom-form input[type="email"],
.custom-form input[type="tel"],
.custom-form select,
.custom-form textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--cream);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color 0.2s;
  border-radius: 0;
  -webkit-appearance: none;
}

.custom-form select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23fcf7f3%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 14px top 50%;
  background-size: 10px auto;
}

.custom-form select option {
  background: var(--surface);
  color: var(--cream);
}

.custom-form input:focus,
.custom-form select:focus,
.custom-form textarea:focus {
  border-color: var(--red);
}

.custom-form input::placeholder,
.custom-form textarea::placeholder {
  color: rgba(246,236,233,0.3);
}

.radio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 4px;
}

@media (min-width: 420px) {
  .radio-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Inter", monospace !important;
  font-size: 10.5px !important;
  color: var(--cream) !important;
  cursor: pointer;
  padding: 14px 12px;
  border: 1px solid var(--line-strong);
  transition: border-color 0.2s, background-color 0.2s;
  text-transform: uppercase;
  background: var(--surface);
}

.radio-label:hover {
  border-color: rgba(246,236,233,0.5);
}

.radio-label input[type="radio"] {
  display: none;
}

.radio-custom {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--cream);
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  background: transparent;
}

.radio-label input[type="radio"]:checked + .radio-custom::after {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--cream);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.radio-label:has(input[type="radio"]:checked) {
  border-color: var(--red);
}

.submit-btn {
  background: var(--red);
  color: white;
  border: none;
  padding: 16px;
  font-family: "Inter", monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  margin-top: 8px;
}

.submit-btn:hover {
  background: var(--red-deep);
}

.submit-btn:active {
  transform: translateY(2px);
}

@media (max-width: 380px) {
  .form-row {
    flex-direction: column;
  }
}