/* Gia Counselling — holding page
   Values replicated from design-reference/Main.dc.html */

:root {
  --grad-top: #B9A0DC;
  --grad-mid: #DCCFF0;
  --ink: #2E1A45;        /* headline, hover */
  --brand: #3B2257;      /* logo, rules */
  --body: #3D3350;       /* paragraph text */
  --link: #4A2C6B;
  --font-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Great Vibes', 'Brush Script MT', cursive;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a { color: var(--link); }
a:hover { color: var(--ink); }

.page {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(180deg, var(--grad-top) 0%, var(--grad-mid) 45%, #FFFFFF 100%);
  font-family: var(--font-sans);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
  padding: 64px 24px 40px;
}

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

.hero {
  width: 100%;
  max-width: 1240px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 40px;
}

.brand {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  color: var(--brand);
}

.brand-script {
  font-family: var(--font-script);
  font-size: clamp(88px, 18vw, 132px);
  line-height: 1;
}

.brand-sub {
  font-family: var(--font-sans);
  font-weight: 200;
  font-size: clamp(26px, 5vw, 38px);
  letter-spacing: 0.18em;
}

.rule {
  width: 64px;
  height: 1px;
  background: var(--brand);
  opacity: 0.4;
}

.headline {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  line-height: 1.3;
  color: var(--ink);
}

.lead {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.1rem, 3vw, 1.25rem);
  line-height: 1.6;
  color: var(--body);
}

/* ---------- Email + copy ---------- */

.contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

a.email {
  font-weight: 400;
  font-size: clamp(1.1rem, 4vw, 1.35rem);
  letter-spacing: 0.04em;
  padding: 4px 0;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
  overflow-wrap: anywhere;
}

a.email:hover,
a.email:focus-visible {
  border-bottom-color: var(--ink);
}

button.copy {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--link);
  transition: background .2s, color .2s;
}

button.copy:hover,
button.copy:focus-visible {
  background: rgba(74, 44, 107, 0.1);
  color: var(--ink);
}

button.copy:focus-visible,
a.email:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

.icon-check { display: none; }
button.copy.is-copied .icon-copy { display: none; }
button.copy.is-copied .icon-check { display: block; }

.copy-status {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--body);
}

.copy-status:empty { display: none; }

/* ---------- Footer ---------- */

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.rule--footer { margin-bottom: 20px; }

.accredit {
  margin: 0;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: var(--body);
}

.logos {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px 56px;
}

.logo-bacp { height: 52px; width: auto; }
.logo-ncps { height: 76px; width: auto; }

@media (prefers-reduced-motion: reduce) {
  a.email, button.copy { transition: none; }
}