/* ==========================================================================
   WiFi King - the landing page.
   One page, so this is the only stylesheet besides base.css. Built from the
   old per page sheets, which were already namespaced and cannot collide.
   ========================================================================== */

/* ==========================================================================
   WiFi King - home page only.
   Every selector here is namespaced .p-home- so it cannot collide with
   base.css or with another page's stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.p-home-hero {
  position: relative;
  min-height: 88vh;
  min-height: 88svh;
  display: flex;
  align-items: center;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--pitch);
  overflow: hidden;
  isolation: isolate;
}

.p-home-herofx {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.p-home-herofx canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* The fallback when there is no WebGL. Thin diagonal hairlines, which is the
   same idea as the canvas without the motion, so the page still looks like it
   was designed rather than broken. */
.p-home-herofx.hero-static::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    114deg,
    transparent 0 22px,
    rgba(35, 40, 51, 0.85) 22px 23px
  );
  mask-image: radial-gradient(120% 90% at 78% 42%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(120% 90% at 78% 42%, #000 0%, transparent 72%);
}

/* Scrim, so the type stays readable whatever the canvas is doing behind it. */
.p-home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(88% 72% at 12% 62%, rgba(6, 7, 10, 0.93) 0%, rgba(6, 7, 10, 0.5) 46%, transparent 74%),
    linear-gradient(180deg, rgba(6, 7, 10, 0.72) 0%, transparent 26%, transparent 66%, var(--ink) 100%);
}

.p-home-hero-copy { max-width: 54rem; }

/* The measure is set in em so it scales with the headline itself. At 12em the
   line balances into three roughly even lines at every width. */
.p-home-hero h1 {
  font-size: clamp(2.7rem, 6vw, 5.1rem);
  font-weight: 900;
  letter-spacing: -0.042em;
  line-height: 0.94;
  max-width: 12em;
}

.p-home-hero .lead {
  margin-top: 1.5rem;
  max-width: 46ch;
}

.p-home-hero .btn-row { margin-top: 2.25rem; }

/* Three plain facts under the buttons, separated by hairlines. No icons, no
   cards, because they are asides and should not compete with the headline. */
.p-home-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-top: 2.75rem;
  font-family: var(--data);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--mist);
}

.p-home-facts li { display: flex; align-items: center; gap: 1.5rem; }
.p-home-facts li + li::before {
  content: '';
  width: 1px;
  height: 13px;
  background: var(--edge-2);
}
.p-home-facts b { color: var(--gold); font-weight: 700; }

.p-home-cue {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--data);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dusk);
}

.p-home-cue span {
  width: 13px;
  height: 8px;
  background: var(--gold);
  opacity: 0.7;
  clip-path: polygon(50% 100%, 100% 48%, 100% 0, 50% 52%, 0 0, 0 48%);
  animation: p-home-drift 2.6s var(--ease) infinite;
}

@keyframes p-home-drift {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(4px); opacity: 0.9; }
}

@media (max-width: 760px) {
  .p-home-hero { min-height: 78vh; text-align: left; }
  .p-home-hero-copy { max-width: none; }
  .p-home-cue { display: none; }
  .p-home-hero .btn-row .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   The pitch bar. One statement, set like it was signed rather than advertised.
   -------------------------------------------------------------------------- */

.p-home-pitch {
  background: var(--slate);
  border-block: 1px solid var(--edge);
}

.p-home-pitch-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding-block: clamp(2.75rem, 5vw, 4rem);
}

/* The statement carries the section, so the picture sits beside it at a fixed
   size rather than competing for width. */
.p-home-pitch-shot { width: clamp(180px, 20vw, 260px); flex: none; }

@media (max-width: 980px) {
  .p-home-pitch-inner { grid-template-columns: auto 1fr; }
  .p-home-pitch-shot { display: none; }
}

.p-home-pitch-rule {
  width: 3px;
  align-self: stretch;
  min-height: 100%;
  background: var(--metal);
  border-radius: 3px;
}

.p-home-pitch p {
  font-family: var(--display);
  font-size: clamp(1.35rem, 2.7vw, 2rem);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.028em;
  color: var(--chalk);
  max-width: 46ch;
}

.p-home-pitch p b { color: var(--gold); font-weight: 700; }

.p-home-pitch-by {
  margin-top: 1.35rem;
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}

@media (max-width: 620px) {
  .p-home-pitch-inner { grid-template-columns: 1fr; }
  .p-home-pitch-rule { width: 46px; height: 3px; min-height: 0; }
}

/* --------------------------------------------------------------------------
   Why WiFi King
   -------------------------------------------------------------------------- */

.p-home-why-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold-line);
  border-radius: 11px;
  background: var(--gold-dim);
  color: var(--gold);
  margin-bottom: 1.15rem;
}

.p-home-why-card h3 { margin-bottom: 0.6rem; }
.p-home-why-card p { color: var(--mist); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   Packages
   -------------------------------------------------------------------------- */

.p-home-pack-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--edge);
}

.p-home-pack-head h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: -0.03em;
}

.p-home-pack-head p { color: var(--mist); font-size: 0.92rem; max-width: 52ch; margin-top: .35rem; }

.p-home-tier {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.p-home-tier-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.p-home-tier-speed { display: flex; align-items: baseline; }

.p-home-tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--edge);
}

.p-home-tier-price small {
  font-size: 0.76rem;
  color: var(--mist);
  font-family: var(--body);
}

.p-home-tier-note { color: var(--mist); font-size: 0.9rem; flex: 1; }

.p-home-tier-meta {
  font-family: var(--data);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--dusk);
  text-transform: uppercase;
}

.p-home-tier-pop { border-color: var(--gold-line); }
.p-home-tier-pop .p-home-tier-price { border-top-color: var(--gold-line); }

.p-home-tier .btn { margin-top: auto; }

/* The router. A picture of the thing, and one honest sentence about it. */
.p-home-router {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--slate);
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  align-items: center;
}

.p-home-router-shot { aspect-ratio: 3 / 2; }

.p-home-router-line {
  color: var(--pearl);
  max-width: 62ch;
  font-size: 0.98rem;
}

.p-home-router-line b { color: var(--gold); font-weight: 700; }

@media (max-width: 700px) {
  .p-home-router { grid-template-columns: 1fr; }
  .p-home-router-shot { aspect-ratio: 16 / 9; }
}

.p-home-morelink {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-sm);
  background: var(--slate);
}

.p-home-morelink p { font-size: 0.92rem; color: var(--mist); }
.p-home-morelink b { color: var(--chalk); }

/* --------------------------------------------------------------------------
   Coverage teaser
   -------------------------------------------------------------------------- */

.p-home-cover { display: grid; grid-template-columns: 1fr 1.25fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }

@media (max-width: 900px) { .p-home-cover { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   How it works. The one place on the site where numbering earns its keep,
   because this genuinely is a sequence.
   -------------------------------------------------------------------------- */

.p-home-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
  position: relative;
}

/* The hairline that runs through the step numbers. */
.p-home-steps::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold-line), var(--edge) 70%, transparent);
}

.p-home-step { position: relative; padding-top: 3.25rem; }

.p-home-step-no {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: var(--ink);
  color: var(--gold);
  font-family: var(--data);
  font-size: 0.78rem;
  font-weight: 700;
}

.p-home-step h3 { font-size: 1.12rem; margin-bottom: 0.5rem; }
.p-home-step p { color: var(--mist); font-size: 0.92rem; }
.p-home-step .tag-quiet { margin-top: 0.85rem; }

@media (max-width: 900px) {
  .p-home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-home-steps::before { display: none; }
}
@media (max-width: 560px) {
  .p-home-steps { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Closing call to action
   -------------------------------------------------------------------------- */

.p-home-close { background: var(--pitch); border-top: 1px solid var(--edge); text-align: center; }

.p-home-close-num {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-block: 1.75rem;
  font-family: var(--data);
  font-weight: 700;
  font-size: clamp(1.9rem, 5.5vw, 3.1rem);
  letter-spacing: -0.045em;
  color: var(--chalk);
  transition: color var(--fast) var(--ease);
}

.p-home-close-num:hover { color: var(--gold-hi); }

.p-home-close .btn-row { justify-content: center; }

.p-home-close-hours {
  margin-top: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--data);
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist);
}

/* --------------------------------------------------------------------------
   What the line is for. Picture and a short piece of copy, side by side.
   -------------------------------------------------------------------------- */

.p-home-usefor {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (max-width: 900px) {
  .p-home-usefor { grid-template-columns: 1fr; }
}

/* ==========================================================================
   WiFi King - fibre page only. Every selector is namespaced .p-fibre-.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page head
   -------------------------------------------------------------------------- */

.p-fibre-head {
  position: relative;
  background: var(--pitch);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  isolation: isolate;
}

/* A quiet nod to the hero canvas without running WebGL on every page: a few
   still strands drawn in CSS, with one gold run through them. */
.p-fibre-head::before {
  content: '';
  position: absolute;
  inset: -20% -10%;
  z-index: -1;
  background-image:
    repeating-linear-gradient(97deg, transparent 0 26px, rgba(35, 40, 51, 0.9) 26px 27px);
  mask-image: radial-gradient(110% 80% at 82% 30%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(110% 80% at 82% 30%, #000 0%, transparent 70%);
}

.p-fibre-head h1 { max-width: 13em; }
.p-fibre-head .lead { margin-top: 1.35rem; }
.p-fibre-head .btn-row { margin-top: 2rem; }

/* --------------------------------------------------------------------------
   What fibre is
   -------------------------------------------------------------------------- */

.p-fibre-explain { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 820px) { .p-fibre-explain { grid-template-columns: 1fr; } }

.p-fibre-explain h3 { margin-bottom: 0.55rem; font-size: 1.1rem; }
.p-fibre-explain p { color: var(--mist); font-size: 0.94rem; }

/* --------------------------------------------------------------------------
   The speed picker. An instrument, not a slider widget.
   -------------------------------------------------------------------------- */

.p-fibre-picker {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--slate), var(--ink));
  overflow: hidden;
}

.p-fibre-fs { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Readout */
.p-fibre-readout {
  display: grid;
  grid-template-columns: auto 1px 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.p-fibre-readout-sep { background: var(--edge); align-self: stretch; }

.p-fibre-readout-speed { display: flex; align-items: baseline; gap: 0.1rem; }

.p-fibre-big {
  font-family: var(--data);
  font-weight: 700;
  font-size: clamp(3.6rem, 9vw, 6.2rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}

.p-fibre-readout-unit {
  font-family: var(--data);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist);
  margin-top: 0.75rem;
}

.p-fibre-readout .signal { margin-top: 1rem; }

.p-fibre-readout-right { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }

.p-fibre-readout-money { display: flex; align-items: baseline; gap: 0.5rem; }

.p-fibre-readout-money .figure-price { font-size: clamp(1.9rem, 4vw, 2.5rem); }
.p-fibre-readout-money small { color: var(--mist); font-size: 0.8rem; }

.p-fibre-readout-note { color: var(--pearl); max-width: 40ch; min-height: 3em; }

@media (max-width: 780px) {
  .p-fibre-readout { grid-template-columns: 1fr; gap: 1.35rem; }
  .p-fibre-readout-sep { height: 1px; width: 100%; }
  .p-fibre-readout-note { min-height: 0; }
}

/* Track. Eleven notches, one per package. */
.p-fibre-track {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  border-top: 1px solid var(--edge);
  background: var(--pitch);
}

.p-fibre-notch {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.3rem;
  padding: 1rem 0.25rem 0.9rem;
  border-left: 1px solid var(--edge);
  cursor: pointer;
  position: relative;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  min-height: 84px;
}

.p-fibre-notch:first-of-type { border-left: 0; }

/* The tick above each notch, scaled to the speed. This is the instrument part:
   the track itself shows you the shape of the range before you touch it. */
.p-fibre-notch::before {
  content: '';
  width: 2px;
  border-radius: 2px;
  background: var(--edge-2);
  height: var(--tick, 8px);
  margin-bottom: 0.35rem;
  transition: background-color var(--fast) var(--ease);
}

.p-fibre-notch-speed {
  font-family: var(--data);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--pearl);
  line-height: 1;
}

.p-fibre-notch-price {
  font-family: var(--data);
  font-size: 0.66rem;
  color: var(--dusk);
  line-height: 1;
}

.p-fibre-notch:hover { background: rgba(255, 255, 255, 0.03); }
.p-fibre-notch:hover::before { background: var(--gold-deep); }

.p-fibre-radio:checked + .p-fibre-notch { background: var(--gold-dim); }
.p-fibre-radio:checked + .p-fibre-notch::before { background: var(--gold); }
.p-fibre-radio:checked + .p-fibre-notch .p-fibre-notch-speed { color: var(--gold-hi); }
.p-fibre-radio:checked + .p-fibre-notch .p-fibre-notch-price { color: var(--gold); }

.p-fibre-radio:focus-visible + .p-fibre-notch {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

@media (max-width: 900px) {
  .p-fibre-track { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .p-fibre-notch { border-top: 1px solid var(--edge); }
}

@media (max-width: 520px) {
  .p-fibre-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .p-fibre-notch { min-height: 72px; }
}

.p-fibre-hint {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--dusk);
  text-align: center;
}

/* --------------------------------------------------------------------------
   The full price table. Real table markup, because this is what Google reads.
   -------------------------------------------------------------------------- */

.p-fibre-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}

.p-fibre-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  text-align: left;
}

.p-fibre-table caption {
  text-align: left;
  padding: 1.1rem 1.25rem;
  color: var(--mist);
  font-size: var(--t-small);
  border-bottom: 1px solid var(--edge);
}

.p-fibre-table th,
.p-fibre-table td { padding: 0.95rem 1.25rem; border-bottom: 1px solid var(--edge); }

.p-fibre-table thead th {
  font-family: var(--data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--pitch);
  white-space: nowrap;
}

.p-fibre-table tbody tr:last-child th,
.p-fibre-table tbody tr:last-child td { border-bottom: 0; }

.p-fibre-table tbody tr { transition: background-color var(--fast) var(--ease); }
.p-fibre-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.p-fibre-table tbody th {
  font-family: var(--data);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--chalk);
  white-space: nowrap;
}

.p-fibre-table .p-fibre-cell-price {
  font-family: var(--data);
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}

.p-fibre-table .p-fibre-cell-note { color: var(--mist); font-size: 0.88rem; min-width: 260px; }

.p-fibre-row-pop { background: var(--gold-dim); }
.p-fibre-row-pop:hover { background: var(--gold-dim); }

/* --------------------------------------------------------------------------
   Fibre next to LTE
   -------------------------------------------------------------------------- */

.p-fibre-vs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2.5vw, 1.75rem); }

@media (max-width: 760px) { .p-fibre-vs { grid-template-columns: 1fr; } }

.p-fibre-vs h3 { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.p-fibre-vs dl { margin: 0; }

/* ==========================================================================
   WiFi King - contact and thank you pages. Namespaced .p-contact-.
   ========================================================================== */

.p-contact-head {
  background: var(--pitch);
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--edge);
}

.p-contact-head h1 { max-width: 15em; }
.p-contact-head .lead { margin-top: 1.2rem; }

.p-contact-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

@media (max-width: 940px) { .p-contact-layout { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   The form
   -------------------------------------------------------------------------- */

.p-contact-form {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--slate), var(--ink));
  padding: clamp(1.4rem, 3vw, 2.25rem);
}

.p-contact-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

@media (max-width: 560px) { .p-contact-pair { grid-template-columns: 1fr; } }

.p-contact-req { color: var(--gold); font-weight: 700; }

.p-contact-submit { margin-top: 0.5rem; }

.p-contact-after {
  margin-top: 1.1rem;
  font-size: 0.82rem;
  color: var(--dusk);
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.p-contact-after .pulse { margin-top: 0.42rem; }

/* --------------------------------------------------------------------------
   The panel beside it. Ordered the way a person actually wants to reach you.
   -------------------------------------------------------------------------- */

.p-contact-panel { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 1rem; }

@media (max-width: 940px) { .p-contact-panel { position: static; } }

.p-contact-way {
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 1.35rem 1.4rem;
  background: var(--slate);
  transition: border-color var(--fast) var(--ease);
}

.p-contact-way:hover { border-color: var(--edge-2); }

.p-contact-way-lead { border-color: rgba(37, 211, 102, 0.35); background: rgba(37, 211, 102, 0.06); }

.p-contact-way h2,
.p-contact-way h3 {
  font-family: var(--data);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}

.p-contact-way-lead h3 { color: #8df3b4; }

.p-contact-num {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--data);
  font-weight: 700;
  font-size: clamp(1.25rem, 3.2vw, 1.6rem);
  letter-spacing: -0.035em;
  color: var(--chalk);
  transition: color var(--fast) var(--ease);
}

.p-contact-num:hover { color: var(--gold-hi); }

.p-contact-copy {
  margin-top: 0.75rem;
  background: none;
  border: 1px solid var(--edge-2);
  border-radius: 7px;
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-family: var(--data);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.p-contact-copy:hover { border-color: var(--gold-line); color: var(--gold-hi); }

.p-contact-way p { font-size: 0.9rem; color: var(--mist); margin-top: 0.5rem; }
.p-contact-way a.p-contact-mail { color: var(--pearl); word-break: break-word; }
.p-contact-way a.p-contact-mail:hover { color: var(--gold-hi); }

.p-contact-who {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  border: 1px solid var(--gold-line);
  background: var(--gold-dim);
  border-radius: var(--radius);
  padding: 1.2rem 1.35rem;
}

.p-contact-who svg { flex: none; color: var(--gold); margin-top: 0.15rem; }
.p-contact-who p { font-size: 0.9rem; color: var(--pearl); }
.p-contact-who b { color: var(--chalk); }

/* --------------------------------------------------------------------------
   Thank you page
   -------------------------------------------------------------------------- */

.p-contact-thanks { padding-block: clamp(4rem, 10vw, 8rem); text-align: center; }

.p-contact-tick {
  width: 68px;
  height: 68px;
  margin: 0 auto 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  background: var(--gold-dim);
  color: var(--gold);
}

.p-contact-thanks .btn-row { justify-content: center; margin-top: 2rem; }

.p-contact-next {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--edge);
}

/* --------------------------------------------------------------------------
   How it works. Heading and picture side by side above the four steps.
   -------------------------------------------------------------------------- */

.p-home-howhead {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (max-width: 900px) {
  .p-home-howhead { grid-template-columns: 1fr; }
  .p-home-howhead .shot { display: none; }
}

/* --------------------------------------------------------------------------
   404. The only other page on the site, so its handful of rules live here.
   -------------------------------------------------------------------------- */

.p-inner-lost { text-align: center; padding-block: clamp(4.5rem, 11vw, 9rem); }
.p-inner-lost .lead { margin-inline: auto; margin-top: 1.2rem; }
.p-inner-lost-links { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: left; }

.p-inner-lost-link {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  color: var(--chalk);
}

.p-inner-lost-link:hover { color: var(--gold-hi); }

.p-inner-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-weight: 700;
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  letter-spacing: -0.04em;
  color: var(--chalk);
}

.p-inner-phone:hover { color: var(--gold-hi); }

.p-inner-cta-note {
  margin-top: 1.25rem;
  font-size: 0.82rem;
}