/* ------------------------------------------------------------------
   Vishudha Property Consultancy, shared brand.

   Navy and gold, taken from the firm's own printed material. Loaded by
   the landing page and the form page, so both look like one website.
   ------------------------------------------------------------------ */

:root {
  --navy: #12233f;
  --navy-deep: #0b1729;
  --navy-soft: #1d3557;
  --gold: #c8a24a;
  --gold-deep: #a5822f;
  --gold-wash: #f7f1e2;

  --ink: #16202e;
  --mid: #57616f;
  --soft: #8b95a3;
  --line: #d8dde4;
  --line-2: #e9edf1;
  --paper: #ffffff;
  --shell: #f4f6f8;

  --green: #1d7a4d;
  --red: #b03a2e;

  --serif: "Georgia", "Times New Roman", serif;
  --sans: "Segoe UI", Arial, system-ui, sans-serif;

  --wrap: 1240px;
  --wrap-wide: 1560px;   /* the form page, which needs the room */
  --head-height: 92px;   /* the sticky header, used to offset anchor jumps */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* A grid or flex child will not shrink below its content unless it is told
   it may. Without this, one long word or one wide button pushes the whole
   page sideways on a phone. */
.wrap > *, .hero .wrap > *, .foot-grid > *, .form-shell > * { min-width: 0; }
img, canvas, svg { max-width: 100%; height: auto; }

a { color: var(--navy-soft); }

/* ---------------------------------------------------------------- header */
.top-bar {
  background: var(--navy-deep);
  color: #c3cddc;
  font-size: 12.5px;
}
.top-bar .wrap {
  display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center;
  padding-top: 7px; padding-bottom: 7px;
}
.top-bar a { color: #e7ecf3; text-decoration: none; }
.top-bar a:hover { color: var(--gold); }
.top-bar .right { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
@media (max-width: 700px) { .top-bar .right { display: none; } }

.site-head {
  background: var(--navy);
  color: #fff;
  position: sticky; top: 0; z-index: 40;
  border-bottom: 3px solid var(--gold);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 16px;
  padding-top: 12px; padding-bottom: 12px;
}
.brand {
  display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff;
  min-width: 0;   /* so the name may wrap rather than widen the header */
}
.brand > span:last-child { min-width: 0; }
.brand .name { overflow-wrap: break-word; }
.brand .glyph {
  width: 46px; height: 46px; flex: none;
  border: 2px solid var(--gold); color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 24px; line-height: 1;
}
.brand .name { font-family: var(--serif); font-size: 21px; letter-spacing: 0.01em; display: block; }
.brand .name b { color: var(--gold); font-weight: normal; }
.brand .tag {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.19em; color: #a8b6c9;
}
@media (max-width: 560px) {
  .brand .glyph { width: 38px; height: 38px; font-size: 20px; }
  .brand .name { font-size: 17px; }
  .brand .tag { font-size: 9px; letter-spacing: 0.13em; }
}

.head-nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.head-nav a.link { color: #d7dfea; text-decoration: none; font-size: 14px; }
.head-nav a.link:hover { color: var(--gold); }
@media (max-width: 980px) { .head-nav .link { display: none; } }

/* ------------------------------------------------------------------
   Buttons. Gold with dark navy lettering, which is what carries the
   contrast. The a.btn selectors are deliberate, so a link inside a
   coloured bar cannot quietly steal the text colour back.
   ------------------------------------------------------------------ */
.btn, a.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: bold; letter-spacing: 0.01em;
  padding: 12px 26px; border: 2px solid var(--gold);
  background: var(--gold); color: var(--navy-deep);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.12s ease, box-shadow 0.15s ease;
}
.btn:hover, a.btn:hover {
  background: #dcb85f; border-color: #dcb85f; color: var(--navy-deep);
  box-shadow: 0 6px 18px -8px rgba(200, 162, 74, 0.75);
  transform: translateY(-1px);
}
.btn:active, a.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible, a.btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.btn.ghost, a.btn.ghost {
  background: transparent; color: var(--gold); border-color: var(--gold);
}
.btn.ghost:hover, a.btn.ghost:hover {
  background: var(--gold); color: var(--navy-deep); border-color: var(--gold);
}

.btn.navy, a.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.navy:hover, a.btn.navy:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }

.btn.small, a.btn.small { font-size: 13.5px; padding: 10px 18px; }
.btn.wide, a.btn.wide { display: block; width: 100%; text-align: center; }

/* ---------------------------------------------------------------- footer */
.site-foot { background: var(--navy-deep); color: #b8c4d4; font-size: 13.5px; }
.site-foot .wrap { padding-top: 34px; padding-bottom: 26px; }
.foot-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1.2fr; gap: 30px;
}
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr; gap: 22px; } }
.site-foot h4 {
  color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(200, 162, 74, 0.35);
}
.site-foot a { color: #dbe3ed; text-decoration: none; }
.site-foot a:hover { color: var(--gold); }
.site-foot p { margin: 0 0 7px; }
.foot-note {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 12px; color: #8b9aae;
}

/* ---------------------------------------------------------------- shared bits */
.eyebrow {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--gold-deep); font-weight: bold;
}
.rule { width: 54px; height: 3px; background: var(--gold); margin: 14px 0 18px; }
.rule.centre { margin-left: auto; margin-right: auto; }

.approval-strip {
  background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.approval-strip .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px 26px; padding-top: 16px; padding-bottom: 16px;
}
.approval-strip .badge {
  border: 1px solid var(--line); padding: 7px 16px; font-weight: bold; font-size: 13px;
  color: var(--navy); letter-spacing: 0.04em; background: #fbfcfd;
}
.approval-strip .said { font-size: 13px; color: var(--mid); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 10px; top: 10px; z-index: 100; background: #fff; color: var(--navy);
  padding: 10px 16px; border: 2px solid var(--gold);
}

/* Motion, kept gentle and switched off for anyone who asks for that. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; scroll-behavior: auto !important; }
}

/* Smooth scrolling, and anchors that stop below the sticky header rather
   than underneath it. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-height) + 12px);
  -webkit-text-size-adjust: 100%;
}
body { overflow-x: hidden; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------
   Phones and small tablets.

   The header keeps the name and one button, the tagline steps aside,
   and a bar pinned to the bottom of the screen carries the two things
   a visitor actually wants, register and call.
   ------------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --head-height: 74px; }

  .wrap { padding-left: 16px; padding-right: 16px; }

  .top-bar { font-size: 11.5px; }
  .top-bar .wrap { padding-top: 6px; padding-bottom: 6px; justify-content: center; }

  .site-head .wrap { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  .brand .glyph { width: 34px; height: 34px; font-size: 18px; border-width: 1px; }
  .brand .name { font-size: 15px; line-height: 1.2; }
  .brand .tag { display: none; }
  .head-nav { gap: 10px; flex: none; }
  .head-nav .btn { font-size: 12.5px; padding: 9px 12px; border-width: 1px; white-space: nowrap; }

  /* The header button is dropped in favour of the pinned bar at the
     bottom, which is easier to reach with a thumb anyway. */
  .site-head .head-nav .btn.hide-phone { display: none; }

  .approval-strip .wrap { gap: 8px 10px; padding-top: 13px; padding-bottom: 13px; }
  .approval-strip .badge { padding: 6px 11px; font-size: 11.5px; }
  .approval-strip .said { display: none; }

  .site-foot .wrap { padding-top: 26px; padding-bottom: 26px; }
  .foot-note { gap: 6px 16px; }

  /* Room for the pinned bar, so the footer is never hidden behind it. */
  body.has-dock { padding-bottom: 74px; }
}

/* The pinned bar itself. Shown on phones only. */
.dock { display: none; }
@media (max-width: 760px) {
  .dock {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--navy-deep); border-top: 2px solid var(--gold);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .dock .btn { padding: 12px 8px; text-align: center; font-size: 14px; }
}

/* Very small phones, 360px and under. */
@media (max-width: 380px) {
  .brand .name { font-size: 14.5px; }
  .brand .glyph { width: 32px; height: 32px; font-size: 17px; }
  .head-nav .btn { font-size: 11.5px; padding: 8px 10px; }
  .dock .btn { font-size: 13px; letter-spacing: 0; }
}

/* ------------------------------------------------------------------
   The firm's logo.

   The white lettered version sits straight on the navy, no box behind it.
   The version as supplied, dark lettering, is kept for the printed report
   where the paper is white.
   ------------------------------------------------------------------ */
.brand-logo { height: 58px; width: auto; max-width: 100%; display: block; flex: none; }
.brand-logo.foot { height: 50px; margin-bottom: 16px; }

@media (max-width: 980px) { .brand-logo { height: 50px; } }
@media (max-width: 620px) { .brand-logo { height: 42px; } }
@media (max-width: 380px) { .brand-logo { height: 36px; } }