/* ============================================================
   HIRE ME — contact options, message form, price calculator
   Dark theme with the red accent, like Home.
   ============================================================ */

/* ---------- hero ---------- */
.hhero { padding-top: calc(var(--nav-h) + clamp(18px, 4vh, 56px)); padding-bottom: clamp(18px, 3.2vh, 40px); }
.hhero__title {
  display: flex; flex-direction: column;
  margin-top: 12px;
  font-size: clamp(40px, min(5.4vw, 8.4vh), 96px); font-weight: 800;
  line-height: 0.9; letter-spacing: -0.035em; text-transform: uppercase;
}
.hhero__accent { color: var(--accent); font-weight: 200; font-style: italic; letter-spacing: -0.02em; padding-left: clamp(0px, 8vw, 150px); }
.hhero__lede { margin-top: clamp(12px, 2vh, 22px); max-width: 44ch; font-size: clamp(14px, 1.1vw, 17px); font-weight: 300; line-height: 1.6; color: var(--fg-dim); }

/* ---------- ways to reach me ---------- */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ways--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.way {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: clamp(14px, 2.2vh, 26px) clamp(16px, 1.6vw, 26px) clamp(14px, 2.2vh, 24px) 0;
  border-bottom: 1px solid var(--line);
}
.way + .way { padding-left: clamp(16px, 1.6vw, 26px); border-left: 1px solid var(--line); }
.way__label { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-dim); }
.way__value { font-size: clamp(16px, 1.35vw, 21px); font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; transition: color 0.4s; }
.way__go { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-dim); transition: color 0.4s; }
.way__go i { font-style: normal; transition: transform 0.5s var(--ease-out); }
.way::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-out); }
.way + .way::after { left: clamp(16px, 1.6vw, 26px); }
.way:hover .way__value { color: var(--accent); }
.way:hover .way__go { color: var(--fg); }
.way:hover .way__go i { transform: translate(3px, -3px); }
.way:hover::after { transform: scaleX(1); }
@media (max-width: 760px) {
  .ways, .ways--2 { grid-template-columns: 1fr; }
  .way, .way + .way { padding-left: 0; border-left: 0; }
  .way + .way::after { left: 0; }
}

/* ---------- message ---------- */
.write { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 70px); padding-block: clamp(22px, 4vh, 52px) clamp(70px, 8vw, 120px); }
.write__title { font-size: clamp(24px, 2.3vw, 36px); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }
.write__note { margin-top: 10px; font-size: 13px; color: var(--fg-dim); }
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vh, 20px) 24px; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field--wide { grid-column: 1 / -1; }
.field > span { font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fg-dim); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 8px 0;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--fg);
  font: inherit; font-size: 16px; font-weight: 400;
  transition: border-color 0.4s;
}
.field textarea { resize: vertical; min-height: 78px; line-height: 1.55; }
.field select { -webkit-appearance: none; appearance: none; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f4efe9' stroke-opacity='.6' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 26px; }
.field select option { background: #1a1a1a; color: var(--fg); }
.field input::placeholder, .field textarea::placeholder { color: rgba(244, 239, 233, 0.32); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--accent); }
.send {
  grid-column: 1 / -1; justify-self: start;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 14px;
  height: 48px; padding: 0 24px 0 28px;
  border-radius: 99px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.send::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--salmon); transform: translateY(101%); transition: transform 0.6s var(--ease-out); }
.send i { font-style: normal; font-size: 16px; transition: transform 0.6s var(--ease-out); }
.send:hover::before, .send:focus-visible::before { transform: none; }
.send:hover i { transform: translateX(6px); }
@media (max-width: 860px) {
  .write { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
  .send { justify-self: stretch; justify-content: center; }
}

/* ---------- price calculator ---------- */
.calc { padding-bottom: clamp(80px, 9vw, 140px); }
.calc__head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.calc__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(54px, 6.2vw, 110px); line-height: 0.84; text-transform: uppercase; }
.calc__note { max-width: 52ch; font-size: 14px; color: var(--fg-dim); }
.calc__currency { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 20px; }
.currencies { display: inline-flex; gap: 6px; }
.currency-btn {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--fg-dim);
  transition: background-color 0.4s, color 0.4s, border-color 0.4s;
}
.currency-btn:hover { border-color: var(--fg); color: var(--fg); }
.currency-btn.active { background: var(--fg); border-color: var(--fg); color: var(--ink); }
.calc__rate { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); }
.calc__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.est {
  display: flex; flex-direction: column;
  padding: clamp(20px, 2vw, 30px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(244, 239, 233, 0.025);
}
.est--wide { grid-column: 1 / -1; }
.est__title { font-size: clamp(17px, 1.35vw, 21px); font-weight: 700; letter-spacing: -0.01em; }
.est__q { margin-top: 6px; margin-bottom: 20px; max-width: 60ch; font-size: 14px; line-height: 1.6; color: var(--fg-dim); }
.est__q span { color: var(--fg); font-weight: 600; }
.est__scale { display: flex; justify-content: space-between; margin-top: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-dim); }
.est__inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; }
.est__out { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; }
.est__out span { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-dim); }
.est__out b { font-family: var(--font-display); font-weight: 400; font-size: clamp(38px, 3.4vw, 56px); line-height: 0.85; color: var(--fg); }
.est input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 99px;
  background: linear-gradient(to right, var(--accent) var(--fill, 0%), rgba(244, 239, 233, 0.14) var(--fill, 0%));
  cursor: pointer;
}
.est input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--fg); border: 4px solid var(--accent); }
.est input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--fg); border: 4px solid var(--accent); }
@media (max-width: 760px) {
  .calc__grid, .est__inputs { grid-template-columns: 1fr; }
}

/* ---------- WhatsApp chat ---------- */
.wa { position: fixed; z-index: 60; right: max(18px, env(safe-area-inset-right)); bottom: calc(18px + var(--bnav-h, 0px) + env(safe-area-inset-bottom)); }
.wa__bubble {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1f1f1f; color: #25d366;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7);
  transition: transform 0.5s var(--ease-out), background-color 0.4s;
}
.wa__bubble svg { width: 24px; height: 24px; }
.wa__bubble:hover { transform: scale(1.06); background: #262626; }
.wa__panel {
  position: absolute; right: 0; bottom: 68px; width: min(290px, calc(100vw - 36px));
  padding: 20px;
  border: 1px solid var(--line); border-radius: 20px;
  background: #1a1a1a;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.7);
}
.wa__title { font-weight: 700; }
.wa__text { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--fg-dim); }
.wa__open { display: block; margin-top: 16px; padding: 12px; border-radius: 99px; background: #25d366; color: #0b1a10; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* room for the display letters inside the line-reveal masks */
.calc__title .line, .write__title .line, .hhero__title .line { padding-bottom: 0.12em; margin-bottom: -0.12em; }