@font-face { font-family: Montserrat; font-weight: 400; font-display: swap; src: url(fonts/montserrat-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 500; font-display: swap; src: url(fonts/montserrat-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 600; font-display: swap; src: url(fonts/montserrat-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: Montserrat; font-weight: 700; font-display: swap; src: url(fonts/montserrat-latin-700-normal.woff2) format("woff2"); }

:root {
  --deep:  #0d2331;
  --navy:  #314257;
  --teal:  #48acaf;
  --aqua:  #8fd6d8;
  --mist:  #dfecee;
  --text:  #f2f8f9;
  --soft:  #b4cbd1;
  --faint: #98b4bc;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--deep); }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  overflow-x: clip;
}
a { color: var(--aqua); }
svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
:focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; }

/* ------------------------------------------------------------
   The light the glass refracts — fixed, static, cheap
   ------------------------------------------------------------ */
.light { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, #12384a 0%, var(--deep) 60%); }
.light i { position: absolute; border-radius: 50%; filter: blur(48px); }
.light i:nth-child(1) { width: 420px; height: 420px; left: -170px; top: 40px;  background: #33a4a8; opacity: .62; }
.light i:nth-child(2) { width: 380px; height: 380px; right: -190px; top: 320px; background: #4d74a8; opacity: .7; }
.light i:nth-child(3) { width: 360px; height: 360px; left: -120px; bottom: -60px; background: #2a8e8a; opacity: .55; }

/* ------------------------------------------------------------
   Liquid glass
   ------------------------------------------------------------ */
.glass {
  position: relative;
  background:
    linear-gradient(155deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.10) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
          backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255,255,255,.2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),       /* top specular edge */
    inset 0 -1px 0 rgba(255,255,255,.06),
    inset 0 0 22px rgba(143,214,216,.06),       /* faint aqua body */
    0 18px 40px -18px rgba(0,0,0,.55);
}
/* a curved highlight across the upper-left of every glass surface */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,.18), transparent 55%);
  pointer-events: none;
}

/* ------------------------------------------------------------
   Top bar
   ------------------------------------------------------------ */
.bar { display: flex; justify-content: center; padding: max(30px, calc(env(safe-area-inset-top) + 14px)) 16px 0; }
.bar__pill { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 7px; border-radius: 999px; }
.bar__k {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--teal); color: var(--deep);
  font-weight: 700; font-size: 15px;
}
.bar__name { font-weight: 600; font-size: 14px; letter-spacing: .01em; }
.bar__brand { display: block; color: inherit; text-decoration: none; }
.bar__logo { display: block; height: 58px; width: auto; max-width: 82vw; filter: drop-shadow(0 6px 22px rgba(0,0,0,.35)); }
.bar__brand .bar__k { width: 44px; height: 44px; font-size: 22px; }
.bar__brand { display: inline-flex; align-items: center; gap: 12px; }
.bar__brand .bar__name { font-size: 20px; }

.wrap { max-width: 440px; margin: 0 auto; padding: 0 16px 8px; }

/* ------------------------------------------------------------
   Hero card
   ------------------------------------------------------------ */
.hero { text-align: center; padding-top: 30px; }

/* The porthole: a washer door, in liquid glass */
.porthole {
  position: relative;
  width: 150px; height: 150px;
  margin: 0 auto 20px;
  border-radius: 50%;
}
.porthole__rim {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg,
    #e9f2f4, #8ea4ad 12%, #f7fbfc 22%, #6b828c 38%, #d7e3e7 52%, #7d939c 66%, #f2f7f8 80%, #8ea4ad 92%, #e9f2f4);
  box-shadow: 0 22px 50px -14px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.5);
}
.porthole__water {
  position: absolute; inset: 5px; border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, #155e66 0%, #0f3d4c 58%, #0a2a38 100%);
}
/* .porthole__fill carries the water level; its waves carry the churn,
   so the two motions never fight over one transform. */
.porthole__fill { position: absolute; inset: 0; will-change: transform; }
.porthole__fill::before,
.porthole__fill::after {
  content: ""; position: absolute;
  left: -30%; right: -30%; height: 160%;
  border-radius: 42%;
  will-change: transform;
  animation: churn 14s linear infinite;
}
.porthole__fill::before {
  top: 34%;
  background: rgba(72,172,175,.55);
}
.porthole__fill::after {
  top: 44%;
  border-radius: 45%;
  background: rgba(143,214,216,.35);
  animation-duration: 9s;
  animation-direction: reverse;
}
.porthole__glass {
  position: absolute; inset: 5px; border-radius: 50%;
  background:
    radial-gradient(70% 45% at 34% 20%, rgba(255,255,255,.42), transparent 60%),
    radial-gradient(40% 25% at 70% 86%, rgba(255,255,255,.14), transparent 70%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 8px 18px rgba(255,255,255,.18),
    inset 0 -14px 26px rgba(0,0,0,.35);
}
.porthole__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 40px; font-weight: 700; letter-spacing: -.02em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(13,35,49,.55);
}
@keyframes churn { to { transform: rotate(360deg); } }

.hero__name {
  margin: 0;
  font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -.01em;
  text-wrap: balance;
}
.hero__role { margin: 5px 0 0; color: var(--aqua); font-weight: 600; font-size: 14.5px; }
.hero__co   { margin: 3px 0 24px; color: var(--soft); font-size: 13px; font-weight: 500; }

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.save {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 0 22px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 600;
  color: var(--deep);
  text-decoration: none; cursor: pointer;
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 52%),
    linear-gradient(180deg, #7fd0d2, var(--teal));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 6px rgba(13,35,49,.18),
    0 14px 30px -10px rgba(72,172,175,.75);
}

.ghost {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 999px;
  border: 1px solid rgba(143,214,216,.45);
  color: var(--text); text-decoration: none; font-weight: 600;
  background: rgba(143,214,216,.06);
}

.dial { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 26px 0 26px; }
.dial a {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--soft); text-decoration: none;
  font-size: 12px; font-weight: 600;
}
.dial__btn {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text);
}

/* ------------------------------------------------------------
   Sheets
   ------------------------------------------------------------ */
.sheet {
  border-radius: 28px;
  padding: 24px 20px;
  margin-top: 16px;
  text-align: left;
}
.sheet h2 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.sheet__lead { margin: 0 0 20px; color: var(--soft); font-size: 14px; }

.details { padding: 4px 20px; margin-top: 0; }
.details > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 14px 0;
}
.details > div + div { border-top: 1px solid rgba(255,255,255,.1); }
.details dt { color: var(--faint); font-size: 13px; font-weight: 500; }
.details dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.details a { color: var(--text); text-decoration: none; }

/* ------------------------------------------------------------
   Form
   ------------------------------------------------------------ */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; }
.field > span { font-size: 13px; font-weight: 600; color: var(--mist); }
.field i { font-style: normal; font-weight: 500; color: var(--faint); margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px;
  font: inherit; font-size: 16px;               /* 16px stops iOS zooming in */
  color: var(--text);
  background: rgba(8,26,37,.35);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 13px 16px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  -webkit-appearance: none; appearance: none;
}
.field input::placeholder { color: #6f8a93; }
.field select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--aqua) 50%),
    linear-gradient(135deg, var(--aqua) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 17px) 52%;
  background-size: 5px 5px; background-repeat: no-repeat;
  padding-right: 44px;
}
.field select option { background: var(--deep); color: var(--text); }
.field textarea { resize: vertical; min-height: 92px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(143,214,216,.7);
  background-color: rgba(8,26,37,.5);
  box-shadow: 0 0 0 4px rgba(72,172,175,.22);
}
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; color: var(--soft); line-height: 1.45; }
.consent input { width: 20px; height: 20px; margin: 0; accent-color: var(--teal); flex: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  border-radius: 16px; padding: 12px 16px; margin-bottom: 16px;
  background: rgba(214,92,92,.16); border: 1px solid rgba(240,140,140,.35);
  color: #ffd9d9; font-size: 13.5px;
}
.alert p { margin: 2px 0; }

.done { text-align: center; padding: 8px 0; }
.done__drop {
  width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.5), rgba(143,214,216,.25) 45%, rgba(72,172,175,.35));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 10px 26px -8px rgba(72,172,175,.7);
}
.done__drop svg { width: 30px; height: 30px; fill: #fff; }
.done p { color: var(--soft); font-size: 14px; margin: 6px 0 20px; }

/* ------------------------------------------------------------
   What we make
   ------------------------------------------------------------ */
.range { list-style: none; margin: 0 0 18px; padding: 0; }
.range li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 14px 0;
}
.range li + li { border-top: 1px solid rgba(255,255,255,.1); }
.range__name { font-weight: 600; font-size: 15px; display: grid; gap: 2px; }
.range__name small { font-size: 12.5px; font-weight: 500; color: var(--faint); }

.for { margin: 0 0 20px; color: var(--soft); font-size: 13.5px; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.foot {
  max-width: 440px; margin: 0 auto;
  text-align: center; color: var(--faint); font-size: 11.5px;
  padding: 18px 24px max(30px, env(safe-area-inset-bottom));
}
.foot p { margin: 2px 0; }

/* ------------------------------------------------------------
   Fallbacks
   ------------------------------------------------------------ */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(30,58,74,.92); }
}

/* ------------------------------------------------------------
   Home buttons, form page
   ------------------------------------------------------------ */
.stack { display: grid; gap: 12px; }
.pill {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px; border-radius: 999px;
  color: var(--text); text-decoration: none;
  font-weight: 600; font-size: 15.5px;
}
.pill svg { color: var(--aqua); }

.wrap--form { padding-top: 22px; }
.back {
  display: inline-flex; align-items: center; gap: 4px;
  margin: 0 0 4px -6px; padding: 8px 10px 8px 4px;
  color: var(--soft); text-decoration: none; font-weight: 600; font-size: 14px;
}
.back svg { width: 20px; height: 20px; }

/* entrance timing — classes rather than inline styles, which the CSP blocks */
.d0 { --d: 0s; }    .d1 { --d: .95s; }  .d2 { --d: 1.05s; } .d3 { --d: 1.15s; }
.d4 { --d: 1.23s; } .d5 { --d: 1.32s; } .d6 { --d: 1.38s; } .d7 { --d: 1.44s; }
.d8 { --d: 1.50s; } .d9 { --d: 1.58s; }
/* the form page has no porthole, so it starts at once */
.wrap--form .d1 { --d: .05s; } .wrap--form .d2 { --d: .12s; }

/* ------------------------------------------------------------
   Opening sequence — one moment: the door closes, the drum fills,
   the name surfaces. Transform and opacity only, so it stays on
   the GPU and smooth on low-end phones.
   ------------------------------------------------------------ */
:root { --ease: cubic-bezier(.22, .9, .24, 1); }

.porthole__rim     { animation: door-close 1s var(--ease) both; }
.porthole__water,
.porthole__glass   { animation: door-glass .8s var(--ease) .12s both; }
.porthole__fill    { animation: fill 1.9s var(--ease) .35s both; }
.porthole__initials{ animation: surface .9s var(--ease) 1.05s both; }

.in { animation: settle .8s var(--ease) both; animation-delay: var(--d, 0s); }

/* one specular pass across the main button, once the page has settled */
.save--shine { overflow: hidden; isolation: isolate; }
.save--shine::after {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 1.4s var(--ease) 2s both;
  pointer-events: none;
}

@keyframes door-close {
  from { opacity: 0; transform: scale(.78) rotate(-38deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes door-glass {
  from { opacity: 0; transform: scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes fill {
  from { transform: translateY(78%); }
  to   { transform: none; }
}
@keyframes surface {
  from { opacity: 0; transform: translateY(10px) scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes settle {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes shine {
  to { transform: translateX(120%); }
}

/* the opening sequence plays once; buttons and the churn stay smooth after */


/* ------------------------------------------------------------
   Press — glass gives under the finger, lights up, springs back.
   Fast in (80 ms), elastic out (overshoot on release).
   ------------------------------------------------------------ */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); }
a, button { -webkit-tap-highlight-color: transparent; }

.save, .pill, .ghost, .dial__btn, .back {
  transition:
    transform .5s var(--spring),
    filter .35s var(--ease),
    box-shadow .35s var(--ease),
    background-color .35s var(--ease),
    border-color .35s var(--ease);
  will-change: transform;
}

/* Main teal button: squeeze, brighten, the glow tightens */
.save:active {
  transform: scale(.955);
  filter: brightness(1.1) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 0 18px rgba(255,255,255,.35),
    0 6px 16px -8px rgba(72,172,175,.9);
  transition-duration: .08s;
}

/* Glass pill and round glass buttons: light pools inside the glass */
.pill:active,
.dial a:active .dial__btn {
  border-color: rgba(143,214,216,.65);
  background-color: rgba(143,214,216,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 0 26px rgba(143,214,216,.42),
    0 8px 20px -10px rgba(0,0,0,.5);
  transition-duration: .08s;
}
.pill:active { transform: scale(.955); }
.dial a:active .dial__btn { transform: scale(.88); }
.dial a:active { color: var(--text); }

.ghost:active {
  transform: scale(.955);
  background-color: rgba(143,214,216,.18);
  border-color: rgba(143,214,216,.8);
  transition-duration: .08s;
}
.back:active { transform: translateX(-3px); transition-duration: .08s; }

/* Mouse users get a gentle lift on hover */
@media (hover: hover) {
  .save:hover  { filter: brightness(1.05); }
  .pill:hover, .dial a:hover .dial__btn { background-color: rgba(143,214,216,.08); border-color: rgba(143,214,216,.4); }
}

@media (prefers-reduced-motion: reduce) {
  .porthole__rim, .porthole__water, .porthole__glass, .porthole__fill,
  .porthole__initials, .in, .save--shine::after { animation: none; }
  .porthole__fill::before, .porthole__fill::after { animation: none; }
  .save--shine::after { display: none; }
  .save, .pill, .ghost, .dial__btn, .back { transition-timing-function: ease-out; transition-duration: .15s; }
}

/* ------------------------------------------------------------
   Shared details (leads.php)
   ------------------------------------------------------------ */
.leads__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.leads__head h2 { margin: 0; }
.leads__count {
  min-width: 36px; height: 36px; padding: 0 10px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(143,214,216,.16); color: var(--aqua); font-weight: 700;
}
.leads { list-style: none; margin: 18px 0; padding: 0; }
.lead { padding: 16px 0; }
.lead + .lead { border-top: 1px solid rgba(255,255,255,.1); }
.lead__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lead__top strong { font-size: 16px; }
.lead__top time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.lead__co { margin: 3px 0 0; color: var(--soft); font-size: 13.5px; }
.lead__note { margin: 8px 0 0; font-size: 13.5px; color: var(--mist); background: rgba(8,26,37,.3); border-radius: 12px; padding: 10px 12px; }
.lead__acts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 13.5px; font-weight: 600; }
.lead__acts a { color: var(--aqua); text-decoration: none; overflow-wrap: anywhere; }

.lead__via {
  display: inline-block; margin: 6px 0 0; padding: 2px 10px; border-radius: 999px;
  background: rgba(143,214,216,.14); color: var(--aqua); font-size: 11.5px; font-weight: 600;
}
.porthole__k { width: 58px; height: auto; display: block; filter: drop-shadow(0 2px 10px rgba(13,35,49,.5)); }
.nf { text-align: center; }
.nf .sheet__lead { margin-bottom: 22px; }