.button, a.button {
  display: inline-block; padding: .65rem .9rem; border-radius: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  color: var(--ink); text-decoration: none;
}
.button:hover { background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04)); }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow); }

.tag { display: inline-block; padding: .25rem .5rem; border-radius: 999px; border: 1px solid var(--border); font-size: .8rem; color: var(--ink-dim); }

.region-content .region__inner {
  grid-template-columns: 1fr;
  align-items: stretch;
  display: grid;
  gap: 2rem;
}

/* Pillar card appearance */
/* =========================================================
   THE THREE PILLARS — works with:
   .views-element-container > .js-view-dom-id-XXXX > .views-row > .pillar-card
   ========================================================= */

/* Grid on the container that holds all .views-row (the class is dynamic) */
.views-element-container .pillars-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;                  /* mobile: stacked */
}


.views-element-container .services-list {
  gap: 1rem;
  display: grid;
}

/* Tablet: 2 columns */
@media (min-width: 640px) {
  .views-element-container .pillars-list {
    grid-template-columns: repeat(2, 1fr);
  }
  .views-element-container .services-list {
    column-gap: 1.5rem;
    display: grid;
    gap: .23rem;
    grid-template-columns: repeat(1, 1fr);
  }

  .region-content .region__inner {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

/* Desktop: 3 columns */
@media (min-width: 960px) {
  .views-element-container .pillars-list {
    grid-template-columns: repeat(3, 1fr);
  }

  .views-element-container .services-list {
    gap: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  /*.region-content .region__inner {*/
  /*  grid-template-columns: repeat(2, minmax(0, 1fr));*/
  /*}*/
}

/* Each row */
.views-element-container .views-row {
  min-width: 0;                                /* prevent overflow in grid */
}

/* Pillar card look */
.views-element-container .views-row .pillar-card, .views-element-container .services-list .views-row {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: 0.25s ease;
  height: 100%;
  box-sizing: border-box;
}

.views-element-container .views-row .pillar-card:hover, .views-element-container .services-list .views-row:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

/* Title + icon inline (icon on the left, part of the title) */
.views-element-container .views-row .pillar-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink);
}

.views-element-container .views-row .pillar-title i {
  font-size: 1.6rem;       /* matches your icon-md nicely for headings */
  line-height: 1;
  color: var(--accent);
  flex-shrink: 0;
}

/* Body copy + list reset */
.views-element-container .views-row .pillar-body {
  color: var(--ink-dim);
  font-size: 1rem;
  line-height: 1.55;
}

/* Pillar inline bullet list */
.pillar-body ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;         /* allow wrapping if needed */
  gap: 0.05rem 0.75rem;    /* space between items */
  list-style: none;        /* remove default bullets */
}

.pillar-body ul li {
  position: relative;
  padding-left: 1rem;      /* space for custom bullet */
  /*white-space: nowrap;     !* keep each item on one line *!*/
  font-size: 1rem;
  color: var(--ink-dim);
}

/* Custom bullet */
.pillar-body ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);    /* same blue as your icon */
  font-size: 1.2rem;
  line-height: 1;
}


/* Optional hint line */
.views-element-container .views-row .pillar-hint {
  color: var(--ink-dim);
  font-size: .95rem;
  opacity: .9;
}

.views-element-container .services-list .views-row {
  min-width: auto;
}

.views-element-container .services-list .views-row .views-field-body .field-content p {
  margin: 0;
}

.views-element-container .views-row .pillar-title h4, .views-element-container .services-list .views-row .views-field-title h4 {
  margin-block-start: 0.25rem;
  margin-block-end: 0.75rem;
}

/* Slightly larger spacing on bigger screens */
@media (min-width: 768px) {
  .views-element-container .views-row .pillar-card, .views-element-container .services-list .views-row {
    padding: 2rem;
  }
  .views-element-container .views-row .pillar-title, .views-element-container .services-list .views-row .views-field-title {
    font-size: 1.45rem;
  }
}

/* ============================
   CONTACT SECTION LAYOUT
   ============================ */
.contact-section {
  margin-top: 3rem;
  background-color: var(--bg-darker);
}

/* Header: title + subtitle (from Contact Header region) */
.contact-header {
  margin-bottom: 1.5rem;
}

.contact-header .block h2,
.contact-header h2 {
  margin: 0 0 .5rem 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--ink);
}

.contact-header .block p,
.contact-header p {
  margin: 0;
  color: var(--ink-dim);
  font-size: .98rem;
}

/* Outer card that wraps both columns */
.contact-shell {
/* TODO */
}

/* Two-column grid inside the shell */
.contact-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr; /* mobile: stacked */
}

.contact-left, .contact-right {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

/* Desktop: two columns */
@media (min-width: 960px) {
  .contact-grid {
    grid-template-columns: 1fr 1.3fr; /* left info, right form */
    gap: 2rem;
  }
}

/* Make blocks fill height nicely inside the shell */
.contact-left .region,
.contact-right .region {
  height: 100%;
}

/* Optional: subtle card look on each inner column */
.contact-left .region__inner,
.contact-right .region__inner {
  height: 100%;
  background: rgba(0,0,0,0.02); /* adjust for your dark theme if needed */
  border-radius: 14px;
  padding: 1rem 1.25rem;
}

/* ============================
   CONTACT INFO LIST (LEFT)
   ============================ */

.contact-title {
  margin: 0 0 .75rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}

.contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .75rem;
}

.contact-list li {
  display: grid;
  grid-template-columns: 24px auto;
  align-items: flex-start;
  gap: .6rem;
  color: var(--ink-dim);
}

.contact-list i {
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent);
  margin-top: .2rem;
}

.contact-list a {
  color: var(--ink);
  text-decoration: none;
}
.contact-list a:hover {
  text-decoration: underline;
}

/* ============================
   FORM SIDE (RIGHT)
   ============================ */

/* Tidy up default contact form labels & fields inside this section */
.contact-right form .form-item {
  margin-bottom: .9rem;
}

.contact-right form label {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: .25rem;
}

.contact-right form input,
.contact-right form textarea {
  width: 95%;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,0.15);
  padding: .6rem .75rem;
  color: var(--ink);
  margin: .25rem 0;
}

.contact-right form textarea {
  min-height: 150px;
}

.contact-right form input:focus,
.contact-right form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Submit button can reuse your .button styles; override if needed */
.contact-right form input[type="submit"],
.contact-right form button[type="submit"] {
  width: 100%;
  margin-top: .75rem;
}

/* =============================
   NUMBERS / METRICS STRIP
   markup:
   <div class="numbers-area">
     <div class="views-row"> ... </div>
     <div class="views-row"> ... </div>
     <div class="views-row"> ... </div>
     <footer>...</footer>
   </div>
   ============================= */

.numbers-area {
  margin: 1rem 0;
  padding: 1rem 1.25rem 1.25rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  /*background: var(--card);           !* adjust if you want lighter *!*/
  box-shadow: var(--shadow);

  display: grid;
  grid-template-columns: 1fr;        /* mobile: stacked cards */
  gap: 1.25rem;
}

/* 3 cards side by side on tablet/desktop */
@media (min-width: 768px) {
  .numbers-area {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    padding: 1.5rem 1.75rem 1.75rem;
  }

  .section-padding { padding: 1.5rem 3rem; }
}

/* Each metric card */
.numbers-area .views-row {
  background: var(--card);   /* inner card; tweak for your theme */
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  padding: 1rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
}

/* Big number */
.numbers-area .views-field-title .field-content {
  display: block;
  font-size: 1.4rem;        /* bump to 2.1rem if you want more punch */
  font-weight: 700;
  color: var(--ink);
}

/* Label under number */
.numbers-area .views-field-body .field-content,
.numbers-area .views-field-body .field-content p {
  margin: 0;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--ink-dim);
}

/* Footer text (full width under the cards) */
.numbers-area footer {
  grid-column: 1 / -1;      /* span all columns */
  margin-top: .25rem;
  text-align: center;
  font-size: .95rem;
  color: var(--ink-dim);
}

@media (min-width: 960px) {
  .numbers-area .views-field-title .field-content {
    font-size: 1.7rem;
  }

  .numbers-area .views-field-body .field-content p {
    font-size: 0.95rem;
  }
  .numbers-area .views-row {
    padding: 1.5rem 1.25rem;
    gap: .35rem;
  }

  .region, .contact-shell {
    max-width: 1240px;
    margin: 0 auto;
  }
}

.footer-bottom {
  text-align: center;
  padding: 1.5rem 0;
  font-size: .9rem;
  color: var(--ink-dim);
}

.footer-copy {
  margin-bottom: .5rem;
}

.footer-links {
  margin-top: .25rem;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
}

.footer-links a {
  color: var(--ink-dim);
  font-size: .9rem;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--accent);
}

/* ============================
   ABOUT VIEW (page-about)
   ============================ */

.view-page-about {
  /*max-width: 960px;*/
  margin: 0 auto;
  display: grid;
  gap: 2.5rem;
}

/* ----- Row 1: Hero / intro ----- */
.view-page-about .views-row:first-child {
  /* nothing special needed for layout here */
}

.view-page-about .views-row:first-child .views-field-title .field-content {
  margin: 0 0 .4rem 0;
  font-size: 2.0rem;          /* big headline */
  font-weight: 700;
  color: var(--ink);
}

.view-page-about .views-row:first-child .views-field-field-subtitle .field-content {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink-dim);
}

.view-page-about .views-row:first-child .views-field-body .field-content {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-dim);
}

.view-page-about .views-row:first-child .views-field-body .field-content p {
  margin: 0 0 .75rem 0;
}

/* ----- Row 2: About Me ----- */
.view-page-about .views-row:nth-child(2) {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow);
}

/* "About Me" title */
.view-page-about .views-row:nth-child(2) .views-field-title .field-content {
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
}

/* Body paragraphs */
.view-page-about .views-row:nth-child(2) .views-field-body .field-content {
  font-size: .98rem;
  line-height: 1.7;
  color: var(--ink-dim);
}

.view-page-about .views-row:nth-child(2) .views-field-body .field-content p {
  margin: 0 0 1rem 0;
}

.view-page-about .views-row:nth-child(2) .views-field-body .field-content p:last-child {
  margin-bottom: 0;
}

/* Small screen spacing tweaks */
@media (max-width: 640px) {
  .view-page-about .views-row:nth-child(2) {
    padding: 1.5rem 1.25rem;
  }
}

/* ============================
   Pillar expandable details
   ============================ */

.pillar-details {
  margin-top: 1.5rem;
  overflow: hidden;

  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);

  transition:
          max-height 0.45s ease,
          opacity 0.35s ease,
          transform 0.35s ease;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.pillar-details.is-open {
  max-height: 800px; /* large enough for content */
  opacity: 1;
  transform: translateY(0);
}

.pillar-details__inner {
  padding: 1.75rem 2rem;
  color: var(--ink-dim);
}

.pillar-details__inner h4 {
  margin-top: 0;
  color: var(--ink);
  font-size: 1.2rem;
}

.pillar-card {
  cursor: pointer;
}

.pillar-card:hover {
  transform: translateY(-2px);
}
.pillar-card.is-active {
  outline: 2px solid var(--accent);
}

/* Make the details panel span full width of the grid */
.pillars-list > footer {
  grid-column: 1 / -1;   /* span all columns */
}

/* Safety: also apply directly to pillar-details */
.pillars-list .pillar-details {
  grid-column: 1 / -1;
}

/* Arrow indicator */
.pillar-card::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin: .75rem auto 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid var(--ink-dim);
  opacity: .6;
  transition: transform .3s ease, opacity .3s ease;
}

/* Active arrow */
.pillar-card.is-active::after {
  transform: rotate(180deg);
  opacity: 1;
  border-top-color: var(--accent);
}


/* ============================
   Pillar details overlay (ALL screens)
   ============================ */

.pillar-details[hidden] {
  display: none !important;
}

.pillar-details {
  position: fixed;
  inset: 0;
  z-index: 9999;

  background: rgba(10, 15, 30, 0.92);
  backdrop-filter: blur(8px);

  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease;
}

.pillar-details.is-open {
  opacity: 1;
  transform: translateY(0);
}

/* Top bar inside overlay */
.pillar-details__close {
  align-self: flex-end;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  padding: .4rem .75rem;
  margin: 1rem 1rem 0;
  border-radius: 12px;
  cursor: pointer;
}

.pillar-details__close:hover {
  border-color: var(--accent);
}

/* Inner content */
.pillar-details__inner {
  width: min(960px, 80%);
  margin: 1rem auto 1.5rem;
  padding: 1.5rem 1.75rem;

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: var(--shadow);

  overflow: auto;
  color: var(--ink-dim);
}

/* Prevent background scroll when overlay open */
body.pillar-overlay-open {
  overflow: hidden;
}