/* ==========================================================================
   ASGT website styles
   --------------------------------------------------------------------------
   1.  Design tokens (colours, fonts, spacing)
   2.  Base elements
   3.  Layout helpers and buttons
   4.  Site header and navigation
   5.  Hero and beam demo
   6.  Section scaffolding
   7.  About, vision and mission, philosophy
   8.  Cards, principles and services
   9.  Products (tabs and panels)
   10. Process steps and security
   11. FAQ
   12. Brand promise
   13. Contact band and form
   14. Footer
   15. Reduced motion
   ========================================================================== */


/* 1. Design tokens
   ========================================================================== */
:root {
  color-scheme: light;

  /* Brand palette */
  --brand: #6b3cff;
  --brand-dark: #3f1fb5;
  --tint: #f1ecff;
  --tint-soft: #f9f7ff;
  --line: #e2d9fb;
  --ink: #221c4d;
  --ink-muted: #665f8f;

  /* Accents */
  --highlight: #ffc83d;
  --mint: #1cc7b0;
  --pink: #ff4f8b;

  --gradient: linear-gradient(135deg, #7f4dff 0%, #6b3cff 50%, #9b3dff 100%);

  /* Typography */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Horizontal page padding */
  --gutter: clamp(1.1rem, 4vw, 3rem);

  /* Keep content clear of the notch and home bar on phones */
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}


/* 2. Base elements
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: inherit;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* room for the sticky header when jumping to anchors */
}

body {
  margin: 0;
  font: 400 1.0625rem/1.65 var(--font);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--brand);
}

:focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: 3px;
  border-radius: 6px;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

p {
  margin: 0 0 1em;
}


/* 3. Layout helpers and buttons
   ========================================================================== */
.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: var(--brand-dark);
  color: #fff;
}

.skip-link:focus {
  top: 1rem;
}

.btn {
  display: inline-block;
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--brand);
  border-radius: 999px;
  font: 600 1rem var(--font);
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}

.btn--primary {
  background: var(--gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 12px 26px -12px #6b3cffcc;
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -12px #6b3cffcc;
  filter: brightness(1.06);
}

.btn--secondary {
  background: #fff;
  color: var(--brand);
}

.btn--secondary:hover {
  background: var(--tint);
  transform: translateY(-2px);
}

.btn[disabled] {
  opacity: 0.7;
  cursor: progress;
  transform: none;
}

.pill {
  display: inline-block;
  margin-bottom: 0.8rem;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
  background: var(--tint);
  color: var(--brand-dark);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Small uppercase label above a heading or statement */
.eyebrow {
  display: block;
  margin-bottom: 0.9rem;
  font: 700 0.78rem var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand);
}


/* 4. Site header and navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: #fffffff2;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 70px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font: 800 1.5rem var(--font);
  color: var(--brand-dark);
  text-decoration: none;
}

.brand img {
  height: 40px;
  width: auto;
}

.brand small {
  display: block;
  font: 500 0.7rem var(--font);
  color: var(--ink-muted);
}

.site-nav__link {
  margin-left: 1.35rem;
  font-size: 0.97rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--brand);
}

.site-nav .btn {
  margin-left: 1.6rem;
  padding: 0.55rem 1.1rem;
}

/* On narrow screens only the call-to-action button stays in the header */
@media (max-width: 1040px) {
  .site-nav__link { display: none; }
  .site-nav .btn { margin: 0; }
}


/* 5. Hero and beam demo
   ========================================================================== */
.hero {
  padding: clamp(3rem, 6vw, 5rem) 0;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(700px 380px at 12% 8%, #c9f4ee99, transparent 70%),
    radial-gradient(700px 380px at 90% 0%, #ffd3e4aa, transparent 70%),
    radial-gradient(900px 420px at 50% -10%, #d8ccff, transparent 70%),
    linear-gradient(180deg, var(--tint) 0, #fff 100%);
}

.hero h1 span {
  display: inline-block;
}

.hero h1 .highlight {
  background: linear-gradient(
    transparent 62%,
    var(--highlight) 62%,
    var(--highlight) 92%,
    transparent 92%
  );
}

.hero__lead {
  max-width: 720px;
  margin: 1.4rem auto 2rem;
  font-size: 1.25rem;
  color: var(--ink);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
}

/* Entrance animation, staggered with --2 to --5 */
.hero .reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: rise 0.7s ease-out forwards;
}

.hero .reveal--2 { animation-delay: 0.18s; }
.hero .reveal--3 { animation-delay: 0.34s; }
.hero .reveal--4 { animation-delay: 0.5s; }
.hero .reveal--5 { animation-delay: 0.7s; }

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* Interactive beam demo */
.beam-demo {
  max-width: 880px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  padding: 1.2rem 1.4rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 36px 70px -34px #6b3cff80;
  text-align: left;
}

.beam-demo__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.3rem;
}

.beam-demo__header strong {
  font: 600 1.05rem var(--font);
  color: var(--brand-dark);
}

.beam-demo__header span {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

.beam-demo svg {
  display: block;
  width: 100%;
  height: auto;
}

.beam-demo svg text {
  font-family: var(--font);
}

.beam-demo input[type="range"] {
  width: 100%;
  accent-color: var(--brand);
}

.beam-demo__readout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 0.8rem;
  text-align: center;
}

.beam-demo__readout div {
  padding: 0.5rem;
  border-radius: 14px;
  background: var(--tint);
  font-size: 0.8rem;
  color: var(--ink-muted);
}

.beam-demo__readout strong {
  display: block;
  font: 800 1.2rem var(--font);
  color: var(--brand-dark);
}

/* The beam and its supports draw themselves on load */
.beam-line,
.beam-supports {
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: draw 1.3s 0.3s ease-out forwards;
}

.beam-supports {
  animation-delay: 0.9s;
}

@keyframes draw {
  to { stroke-dashoffset: 0; }
}


/* 6. Section scaffolding
   ========================================================================== */
section {
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.section--alt {
  background: var(--tint-soft);
}

.section-heading {
  max-width: 760px;
  margin: 0 auto clamp(2rem, 4vw, 3.2rem);
  text-align: center;
}

.section-heading p {
  margin: 1rem 0 0;
  font-size: 1.15rem;
  color: var(--ink-muted);
}


/* 7. About, vision and mission, philosophy
   ========================================================================== */

/* About */
.about {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  align-items: start;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.about__text p {
  font-size: 1.08rem;
  color: var(--ink);
}

.about__text p:last-child {
  margin-bottom: 0;
}

.portfolio-card {
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--tint);
}

.portfolio-card h3 {
  margin-bottom: 0.6rem;
}

.portfolio-card p {
  margin: 0 0 1rem;
  color: var(--ink);
}

.portfolio-card a {
  font-weight: 600;
  text-decoration: none;
}

.portfolio-card a:hover {
  text-decoration: underline;
}

.closing-statement {
  max-width: 820px;
  margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
  padding-top: clamp(1.8rem, 4vw, 2.6rem);
  border-top: 1px solid var(--line);
  text-align: center;
}

.closing-statement p {
  margin: 0 0 1rem;
  font: 600 clamp(1.2rem, 2.4vw, 1.55rem) / 1.4 var(--font);
  letter-spacing: -0.01em;
  color: var(--brand-dark);
  text-wrap: balance;
}

.closing-statement .closing-statement__motto {
  margin: 0;
  font: 400 0.98rem var(--font);
  letter-spacing: 0;
  color: var(--ink-muted);
}

.closing-statement__motto strong {
  font-weight: 700;
  color: var(--brand);
}

/* Vision and mission */
.vision-mission {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.vm-card {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: 26px;
  background: #fff;
}

.vm-card--vision {
  border-color: transparent;
  color: #fff;
  box-shadow: 0 30px 60px -36px #6b3cffcc;
  background:
    radial-gradient(420px 260px at 100% 0%, #ff4f8b44, transparent 70%),
    linear-gradient(125deg, #4a22d6, #6b3cff 55%, #8d4dff);
}

.vm-card--vision .eyebrow {
  color: #d8ccff;
}

.vm-card__statement {
  margin: 0;
  font: 600 clamp(1.15rem, 2vw, 1.4rem) / 1.5 var(--font);
  letter-spacing: -0.01em;
  color: var(--brand-dark);
}

.vm-card--vision .vm-card__statement {
  color: #fff;
}

.vm-card__note {
  margin: 1.3rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  color: var(--ink-muted);
}

/* Philosophy and purpose */
.philosophy {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.philosophy h2 {
  margin: 0 0 1.2rem;
}

.philosophy p {
  font-size: 1.08rem;
  color: var(--ink);
}

.philosophy .philosophy__approach {
  margin-bottom: 0;
  font-weight: 600;
  color: var(--brand-dark);
}

.purpose-card {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--tint);
}

.purpose-card p {
  margin: 0;
  font: 600 1.2rem / 1.5 var(--font);
  letter-spacing: -0.01em;
  color: var(--brand-dark);
}

@media (max-width: 860px) {
  .about,
  .vision-mission,
  .philosophy {
    grid-template-columns: 1fr;
  }
}


/* 8. Cards, principles and services
   ========================================================================== */

/* Three coloured principle cards */
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.principle {
  padding: 1.6rem;
  border-radius: 22px;
  background: var(--tint);
}

.principle:nth-child(2) { background: #ffe9f1; }
.principle:nth-child(3) { background: #d9f7f2; }

.principle h3 {
  margin-bottom: 0.5rem;
}

.principle p {
  margin: 0;
  color: var(--ink);
}

@media (max-width: 860px) {
  .principles { grid-template-columns: 1fr; }
}

/* Reusable card grid (core values and services) */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  transition: 0.2s;
}

.card:hover {
  border-color: #6b3cff55;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -24px #6b3cff80;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1rem;
  border-radius: 14px;
  background: #e6deff;
  font: 800 1rem var(--font);
  color: var(--brand);
}

/* Icons rotate through violet, pink and teal */
.card:nth-child(3n + 2) .card__icon { background: #ffe3ee; color: #d6246e; }
.card:nth-child(3n) .card__icon     { background: #d3f5ef; color: #0f8a79; }

.card h3 {
  margin-bottom: 0.5rem;
}

.card p {
  margin: 0 0 0.7rem;
  font-size: 0.97rem;
  color: var(--ink-muted);
}

.card__tags {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--brand);
}

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

@media (max-width: 600px) {
  .card-grid { grid-template-columns: 1fr; }
}


/* 9. Products (tabs and panels)
   ========================================================================== */
.tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1.6rem;
}

.tab {
  padding: 0.7rem 1.4rem;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: 600 1rem var(--font);
  color: var(--ink);
  cursor: pointer;
}

.tab[aria-selected="true"] {
  border-color: transparent;
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 10px 22px -12px #6b3cffcc;
}

.product {
  display: none;
  grid-template-columns: 1.15fr 0.85fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.2rem, 3vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 60px -40px #6b3cff80;
}

.product.is-active {
  display: grid;
  animation: rise 0.5s ease-out;
}

.product h3 {
  margin-bottom: 0.4rem;
  font-size: 2rem;
}

.product__summary {
  font-size: 1.08rem;
  color: var(--ink);
}

.product__screenshot {
  border: 1px solid var(--line);
  border-radius: 14px;
}

.product__thumbs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
  margin-top: 0.8rem;
}

.product__thumbs--centered {
  align-items: center;
}

.product__phone {
  max-width: 150px;
  border: 5px solid #ddd3fa;
  border-radius: 22px;
}

.facts {
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

.facts strong {
  margin-right: 0.4rem;
  font-weight: 600;
  color: var(--brand-dark);
}

.modules {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.8rem 0 1.2rem;
  padding: 0;
  list-style: none;
}

.modules li {
  padding: 0.15rem 0.6rem;
  border-radius: 8px;
  background: var(--tint);
  font-size: 0.83rem;
}

@media (max-width: 900px) {
  .product.is-active { grid-template-columns: 1fr; }
}


/* 10. Process steps and security
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.steps li {
  position: relative;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 0.8rem;
  border-radius: 50%;
  background: var(--gradient);
  font: 800 1rem var(--font);
  color: #fff;
  box-shadow: 0 8px 16px -8px #6b3cffcc;
}

.steps strong {
  display: block;
  margin-bottom: 0.3rem;
  font: 600 1.1rem var(--font);
  color: var(--brand-dark);
}

.steps span {
  font-size: 0.93rem;
  color: var(--ink-muted);
}

.steps--four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 860px) {
  .steps,
  .steps--four { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .steps:not(.steps--four) { grid-template-columns: 1fr; }
}

.security-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
}

.security-item {
  padding: 1.3rem;
  border-radius: 18px;
  background: var(--tint);
}

.security-item h3 {
  margin-bottom: 0.3rem;
  font-size: 1.08rem;
}

.security-item p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
}

.section-note {
  margin: 1.6rem 0 0;
  text-align: center;
  font-weight: 500;
  color: var(--ink);
}

@media (max-width: 860px) {
  .security-grid { grid-template-columns: 1fr; }
}


/* 11. FAQ
   ========================================================================== */
.faq {
  max-width: 820px;
  margin: 0 auto;
}

.faq details {
  margin-bottom: 0.7rem;
  padding: 0 1.3rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
  font: 600 1.08rem var(--font);
  color: var(--brand-dark);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  color: var(--brand);
}

.faq details[open] summary::after {
  content: "\2013"; /* en dash */
}

.faq details p {
  margin: 0 0 1.1rem;
  color: var(--ink-muted);
}


/* 12. Brand promise
   ========================================================================== */
.promise {
  max-width: 860px;
  text-align: center;
}

.promise h2 {
  margin: 0 0 1rem;
}

.promise__text {
  max-width: 680px;
  margin: 0 auto 2rem;
  font-size: 1.15rem;
  color: var(--ink-muted);
}

.motto-card {
  padding: clamp(2rem, 5vw, 3.2rem);
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(520px 260px at 0% 0%, #c9f4ee88, transparent 70%),
    radial-gradient(520px 260px at 100% 100%, #ffd3e4aa, transparent 70%),
    var(--tint-soft);
}

.motto-card small {
  display: block;
  margin-bottom: 1rem;
  font: 700 0.78rem var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Gradient text */
.motto-card strong {
  display: block;
  font: 800 clamp(2rem, 5vw, 3.4rem) / 1.1 var(--font);
  letter-spacing: -0.025em;
  color: var(--brand);
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.motto-card span {
  display: block;
  margin-top: 1.2rem;
  font-size: 1.1rem;
  color: var(--ink);
}


/* 13. Contact band and form
   ========================================================================== */
.contact-band {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 5vw, 3.5rem);
  border-radius: 30px;
  color: #fff;
  background:
    radial-gradient(520px 300px at 100% 0%, #ff4f8b55, transparent 70%),
    radial-gradient(520px 300px at 0% 100%, #c13cff55, transparent 70%),
    linear-gradient(125deg, #4a22d6, #6b3cff 50%, #8d4dff);
}

/* Left-hand column: light text on the violet background */
.contact-band__info h2 {
  color: #fff;
}

.contact-band__info p {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #f1ecff;
}

.contact-band__info .contact-band__location {
  margin-top: 1.4rem;
  font-size: 1rem;
}

.contact-details {
  display: grid;
  gap: 1.2rem;
  margin: 1.6rem 0 0;
}

.contact-details dt {
  margin-bottom: 0.3rem;
  font: 700 0.78rem var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d8ccff;
}

.contact-details dd {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #fff;
}

.contact-details address {
  font-style: normal;
}

.contact-details a {
  font-weight: 600;
  color: #fff;
}

/* Enquiry form */
.contact-form {
  display: grid;
  gap: 0.9rem;
  padding: 1.4rem;
  border-radius: 22px;
  background: #fff;
  color: var(--ink);
}

.contact-form label {
  display: grid;
  gap: 0.3rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--tint-soft);
  font: 400 1rem var(--font);
  color: var(--ink);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px #6b3cff22;
}

/* Honeypot field: hidden from people, visible to simple bots */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

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

.form-status--pending { color: var(--ink-muted); }
.form-status--success { color: #0b6b5d; }
.form-status--error   { color: #b4234f; }

.form-status a {
  color: inherit;
  font-weight: 700;
}

.form-note {
  color: var(--ink-muted);
}

@media (max-width: 860px) {
  .contact-band { grid-template-columns: 1fr; }
}


/* 14. Footer
   ========================================================================== */
.site-footer {
  padding: 2rem 0;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}

.site-footer__inner a {
  margin-right: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}

.site-footer__address,
.site-footer__motto {
  display: block;
  margin-top: 0.3rem;
}

.site-footer__motto {
  font-weight: 600;
  color: var(--brand-dark);
}


/* 15. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .beam-line,
  .beam-supports {
    animation: none;
    stroke-dashoffset: 0;
  }

  .hero .reveal {
    animation: none;
    opacity: 1;
    transform: none;
  }
}