/*
Theme Name: Pivotal Counseling Center
*/

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
  /* Brand palette, taken from the logo: near-black, forest green, a little
     brown, and the red / berry / blush hexagons as occasional pops. */
  --ink: #131614;
  --ink-2: #1c211e;
  --green: #12803f;
  --green-bright: #1fa352;
  --green-deep: #0b5a2c;
  --brown: #8a5a3c;
  --brown-logo: #b08565;
  --pop-red: #e4483c;
  --pop-berry: #b5406f;
  --pop-blush: #ec8c9c;

  --accent: var(--green);
  --c1: var(--green);
  --c2: #16654a;
  --c3: var(--brown);
  --c4: #a8366a;
  --c5: #c4402f;

  --font-heading: "Outfit", "Helvetica Neue", sans-serif;
  --font-body: "Nunito Sans", "Helvetica Neue", sans-serif;

  --text-primary: #151816;
  --text-secondary: #4a504c;
  --bg-primary: #fbfaf7;
  --bg-secondary: #f3efe8;
  --border-color: #e4dccf;
  --header-bg: var(--ink);
  --header-nav-bg: #0c0e0d;
  --accent-light: color-mix(in srgb, var(--accent) 28%, #fff);
  --band: var(--ink);
  --header-tint: rgba(10, 12, 11, 0.32);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(19, 22, 20, 0.04), 0 8px 28px rgba(19, 22, 20, 0.07);
}

/* ==========================================================================
   Phosphor Icon Styling
   ========================================================================== */

.ph-duotone {
  font-size: 1.25em;
  --ph-duotone-primary: var(--accent);
  --ph-duotone-secondary: var(--accent-light);
}
.icon-lg { font-size: 2rem; }
.icon-xl { font-size: 2.5rem; }

/* ==========================================================================
   Reset & Base
   ========================================================================== */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

html,
body {
  font-family: var(--font-body);
  line-height: 1.85em;
  color: var(--text-secondary);
  background-color: var(--bg-primary);
}

@media screen and (min-width: 600px) {
  html,
  body {
    font-size: 17px;
  }
}

@media screen and (min-width: 1000px) {
  html,
  body {
    font-size: 17px;
  }
}

@media screen and (max-width: 599px) {
  html,
  body {
    font-size: 15px;
  }
}

body {
  overflow-x: hidden;
}

@media screen and (max-width: 999px) {
  body {
    padding-top: 80px;
  }
}

p {
  line-height: 1.85em;
  margin-bottom: 1.25em;
}

strong,
b {
  font-weight: bold;
}

a {
  color: inherit;
  text-decoration: none;
}

p a {
  text-decoration: underline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  display: block;
}

ol,
ul {
  line-height: 1.85em;
  margin: 0 0 1.25em 1.5em;
}

li {
  margin: 0;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.mt-0 {
  margin-top: 0 !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.small {
  font-size: 90%;
}
.smaller {
  font-size: 80%;
}
.skip-link.screen-reader-text {
  position: absolute;
  left: -9999px;
}
.skip-link.screen-reader-text:focus {
  left: 10px;
  top: 10px;
  z-index: 1000;
  padding: 10px 16px;
  background: #fff;
  color: var(--text-primary);
  border-radius: 4px;
}

/* Readable by screen readers, invisible on screen */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.sub-title {
  font-family: var(--font-body);
  font-weight: 400;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2em;
  margin: 0.6em 0;
  color: var(--text-primary);
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
  margin-top: 0;
}

h1 {
  font-size: 2.75rem;
}
h2 {
  font-size: 2.15rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}

@media screen and (max-width: 999px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
}

/* ==========================================================================
   Accent Color (set via --accent custom property per page)
   ========================================================================== */

section a,
section h2 {
  color: var(--accent);
}

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

blockquote,
blockquote:before {
  color: var(--accent);
}

.site-header .logo img {
  /* The green logo carries its own colour; no white-out filter. */
  display: block;
}

/* ==========================================================================
   Header / Navigation — Desktop (>=1000px)
   ========================================================================== */

@media screen and (min-width: 1000px) {
  .site-header {
    width: 100%;
    background: transparent;
    color: #fff;
    position: relative;
    z-index: 100;
    font-family: var(--font-heading);
  }

  /* Two-row layout with logo spanning both rows */
  /* Content spans the same 840px column as the banner title and body
     text (their 900px boxes minus 30px padding each side). */
  .site-header {
    display: flex;
    align-items: stretch;
    max-width: 840px;
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
  }

  /* Full-width background behind the constrained header */
  .site-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--header-bg);
    border-bottom: 1px solid #ffffff99;
    z-index: -1;
  }

  .site-header .logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 15px 0 0;
    margin-left: -20px;
  }

  .site-header .logo img {
    height: 70px;
    display: block;
  }

  .site-header .logo .small {
    opacity: 0;
  }

  .site-header .info {
    display: none;
  }

  .site-header nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* CTA buttons — top right row */
  .header-cta {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 5px 0 0 0;
    font-size: 12px;
  }

  .header-cta a {
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0 8px;
    font-weight: 400;
    transition: color 150ms;
  }

  .header-cta a:hover {
    color: rgba(255,255,255,0.9);
  }

  .header-cta a[href*="schedule-online"] {
    color: #fff;
    background: var(--green);
    border-radius: 999px;
    padding: 3px 14px;
    margin-top: 4px;
    font-weight: 600;
    transition: background 150ms;
  }

  .header-cta a[href*="schedule-online"]:hover {
    background: var(--green-bright);
  }

  .header-cta a[href*="schedule-online"] .ph-duotone {
    opacity: 1;
  }

  .header-cta .ph-duotone {
    --ph-duotone-primary: var(--accent-light);
    --ph-duotone-secondary: var(--accent);
    opacity: 0.6;
  }

  .header-cta a:hover .ph-duotone {
    opacity: 1;
  }

  .site-header.fixed {
    position: fixed;
    top: 0;
  }

  /* Nav row: below CTA */
  .menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 -7px 0 0;
    font-size: 85%;
    white-space: nowrap;
  }

  .menu > li {
    position: relative;
    display: inline-block;
  }

  /* Mobile-only shortcuts to sub-menu pages (sub-menus are hidden on mobile) */
  .menu > li.mobile {
    display: none;
  }

  .menu > li:hover ul,
  .menu > li:focus-within ul {
    display: block;
  }

  .menu > li > a {
    text-decoration: none;
    padding: 7px 6px;
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    color: rgba(255,255,255,0.85);
    background: none;
    border-radius: 4px;
    margin: 2px 1px;
    transition: color 150ms, background 150ms;
  }

  .menu > li > a .ph-duotone {
    font-size: 1.1em;
    --ph-duotone-primary: var(--accent-light);
    --ph-duotone-secondary: var(--accent);
    opacity: 0.7;
    transition: opacity 150ms;
  }

  .menu > li > a:hover .ph-duotone {
    opacity: 1;
  }

  .menu > li > a.selected {
    color: #fff;
  }
  .menu > li > a:hover {
    color: #fff;
    background: rgba(255,255,255,0.08);
  }

  .menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--header-bg);
    min-width: 200px;
    padding: 10px 0;
    line-height: 1.2em;
    margin: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  }

  .menu .sub-menu li {
    display: block;
    padding: 10px 20px;
  }

  .menu .sub-menu li a {
    color: rgba(255,255,255,0.8);
    transition: color 150ms;
  }

  .menu .sub-menu li a:hover {
    color: var(--green-bright);
  }

  .menu-open,
  .menu-close {
    display: none;
  }

}

/* ==========================================================================
   Header / Navigation — Mobile (<1000px)
   ========================================================================== */

@media screen and (max-width: 999px) {
  .site-header {
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    position: fixed;
    background: var(--header-bg);
    border-bottom: 1px solid #ffffff99;
    color: #fff;
    z-index: 100;
    font-family: var(--font-heading);
  }

  .site-header .info,
  .site-header .header-cta {
    display: none;
  }

  .site-header .logo {
    position: absolute;
    left: 50%;
    top: 5px;
    margin-left: -100px;
  }

  .site-header .logo img {
    height: 70px;
  }

  .site-header .menu-open,
  .site-header .menu-close {
    color: #fff;
    position: absolute;
    right: 10px;
    top: 25px;
    font-size: 30px;
  }

  .phone-button {
    display: block !important;
  }

  .site-header .menu-open {
    display: block;
  }
  .site-header .menu-close {
    display: none;
  }

  .site-header nav {
    display: none;
    position: absolute;
    width: 100%;
    top: 80px;
    left: 0;
    padding: 5px 20px 20px 20px;
    line-height: 1.6em;
    background: var(--header-bg);
  }

  .site-header nav ul {
    margin-bottom: 0;
    line-height: 1.6em;
  }

  .sub-menu {
    display: none;
  }

  .site-header#menu:target {
    display: block;
  }
  .site-header#menu:target nav {
    display: block;
  }
  .site-header#menu:target .menu-open {
    display: none;
  }
  .site-header#menu:target .menu-close {
    display: block;
  }

  .site-header#menu:target .header-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }
  .site-header#menu:target .header-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-height: 48px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: var(--green);
    font-size: 1.05rem;
  }
  .site-header#menu:target .header-cta a[href^="tel"] {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
  }

  /* Hide nav icons on mobile to save space */
  .menu > li > a .ph-duotone {
    display: none;
  }
}

.phone-button {
  display: none;
  position: absolute;
  z-index: 2;
  color: #fff;
  left: 15px;
  top: 25px;
}

/* ==========================================================================
   Content Sections
   ========================================================================== */

section.entry-content,
aside {
  display: block;
  position: relative;
}

section.entry-content > *,
aside > * {
  padding: 0 30px;
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 1000px) {
  section.entry-content > div,
  aside > div {
    width: 900px;
  }
}

@media screen and (max-width: 999px) {
  section.entry-content > div,
  aside > div {
    padding: 0 20px;
  }
}

@media screen and (min-width: 1000px) {
  .mobile {
    display: none;
  }
}

.desktop {
  display: none;
}

@media screen and (min-width: 1000px) {
  .desktop {
    display: block;
  }
}

/* ==========================================================================
   Banner
   ========================================================================== */

.banner {
  color: #fff;
  overflow: hidden;
  padding: 36px 0 40px 0;
  position: relative;
  background:
    radial-gradient(ellipse 75% 160% at 100% 0%, color-mix(in srgb, var(--accent) 80%, transparent), transparent 75%),
    var(--ink);
  margin-bottom: 56px;
}

@media screen and (max-width: 999px) {
  .banner {
    margin-bottom: 32px;
  }
}


.banner > * {
  padding: 0 30px;
  margin: 0 auto;
  position: relative;
}

@media screen and (min-width: 1000px) {
  .banner > * {
    width: 900px;
  }
}

@media screen and (max-width: 999px) {
  .banner > * {
    padding: 0 20px;
  }
  .banner {
    padding: 24px 0 28px 0;
  }
}

.banner h1 {
  line-height: 1.15em;
  font-size: 3.25rem;
  margin: 0;
  color: #fff;
}

@media screen and (max-width: 999px) {
  .banner h1 {
    font-size: 2rem;
  }
}

.banner .sub-title {
  color: rgba(255,255,255,0.78);
  font-size: 1.1rem;
  margin-top: 0.75em;
  max-width: 44em;
}

.banner .sub-title a {
  color: #fff;
}

.banner h2 {
  color: #fff;
  font-size: 1.25rem;
  line-height: 150%;
  margin: 0 0 1em 0;
}

@media screen and (max-width: 999px) {
  .banner h2 {
    font-size: 1rem;
  }
}

/* The three floating hexagons from the logo, as a quiet colour pop. */
.banner:after {
  content: "";
  position: absolute;
  right: calc((100% - 840px) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 57px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='20 4 72 82'%3E%3Cpath fill='%23e4483c' d='M78 4l14 8v16l-14 8-14-8V12z'/%3E%3Cpath fill='%23b5406f' d='M30 30l10 6v12l-10 6-10-6V36z'/%3E%3Cpath fill='%23ec8c9c' d='M58 58l12 7v14l-12 7-12-7V65z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.9;
  pointer-events: none;
}

/* Keep long titles clear of the hexagons */
@media screen and (min-width: 1000px) {
  .banner h1 {
    padding-right: 80px;
  }
}

@media screen and (max-width: 999px) {
  .banner:after {
    width: 29px;
    height: 33px;
    top: 14px;
    right: 27px;
    transform: none;
    opacity: 0.6;
  }
  .banner h1 {
    padding-right: 40px;
  }
}

/* ==========================================================================
   Blockquote
   ========================================================================== */

blockquote {
  position: relative;
  line-height: 1.85em;
  border: none;
  border-left: 4px solid var(--accent);
  padding: 1.5rem 1.5rem 1.5rem 2rem;
  font-size: 120%;
  margin: 0 0 1.25em 0;
  background: var(--bg-secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-primary);
}

@media screen and (max-width: 999px) {
  blockquote {
    padding: 1.25rem 1rem 0.75rem 1.5rem;
    font-size: 100%;
  }
}

blockquote:before {
  content: "\201C";
  font-weight: bold;
  font-size: 300%;
  position: absolute;
  left: 10px;
  top: 10px;
  line-height: 1;
}

/* ==========================================================================
   Buttons & CTA
   ========================================================================== */

.call-to-action {
  text-align: center;
  margin: 100px 0;
}

.btn {
  padding: 14px 30px;
  color: #fff;
  border-radius: 999px;
  text-decoration: none;
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 150ms, box-shadow 150ms, background-color 150ms;
}

.btn:hover {
  background-color: color-mix(in srgb, var(--accent) 82%, #000);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 30%, transparent);
}

.btn .ph-duotone {
  vertical-align: -0.15em;
}

/* ==========================================================================
   Post Thumbnail
   ========================================================================== */

.post-thumbnail {
  position: relative;
  padding: 0 0 20px 0;
}

@media screen and (min-width: 1000px) {
  .post-thumbnail {
    float: right;
    width: 40%;
    padding: 0 0 20px 30px;
  }

  .post-thumbnail iframe {
    width: 344px;
    height: 220px;
  }
}

.post-thumbnail img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
}

/* ==========================================================================
   Blog List
   ========================================================================== */

ul.blog-list {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.blog-list > li {
  display: block;
  position: relative;
  padding: 10px 10px 16px;
  margin: 0;
  background: #fff;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border-color);
  transition: transform 150ms, box-shadow 150ms;
}

ul.blog-list > li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

ul.blog-list .photo {
  position: relative;
  display: block;
}

ul.blog-list .photo img {
  max-width: 100%;
  border-radius: 6px;
  border-radius: var(--radius);
}

ul.blog-list .title {
  font-size: 110%;
  margin: 0.4em 0;
  display: block;
  font-weight: 500;
  font-family: var(--font-heading);
  text-decoration: none;
  line-height: 1.3em;
  color: var(--text-primary);
  padding: 0 6px;
}

@media screen and (min-width: 1000px) {
  ul.blog-list li {
    width: calc(33.333% - 10px);
  }
}


/* ==========================================================================
   Hero Section (Homepage)
   ========================================================================== */

.hero {
  /* Office photo, unfiltered. background-color is the fallback if the image
     fails, so the hero is never light-on-light. */
  background-color: var(--band);
  background-image: url("/assets/uploads/friends-hiking-celebrating-1024x576.jpg");
  background-image: image-set(url("/assets/uploads/friends-hiking-celebrating-1024x576.webp") type("image/webp"), url("/assets/uploads/friends-hiking-celebrating-1024x576.jpg") type("image/jpeg"));
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  text-align: center;
  padding: 110px 30px 120px;
  position: relative;
  overflow: hidden;
}

.hero > div {
  /* The copy sits on its own black panel rather than tinting the whole
     photo, so the room stays fully visible around it. Width is 700px of
     text plus the panel's side padding, so the headline keeps the
     single-line measure it had before the panel existed. */
  max-width: 788px;
  margin: 0 auto;
  position: relative;
  background: rgba(19, 22, 20, 0.78);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 50px 44px 54px;
  border-radius: 24px;
  border-top: 4px solid var(--green);
}

.hero h1 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 3.4rem;
  color: #fff;
  margin: 0 0 0.5em;
  line-height: 1.15;
}

.hero-subtitle {
  color: rgba(255,255,255,0.9);
  font-size: 1.2rem;
  line-height: 1.7;
  margin-bottom: 2em;
}

.hero-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-actions .btn {
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  line-height: 1;
}

.hero-actions .btn .ph-duotone {
  line-height: 1;
}

.btn-outline {
  background: transparent !important;
  border: 2px solid rgba(255,255,255,0.85);
  color: #fff;
  box-shadow: none !important;
}

.btn-outline:hover {
  background: rgba(255,255,255,0.15) !important;
}

@media screen and (max-width: 999px) {
  .hero {
    padding: 50px 20px 80px;
  }
  .hero h1 {
    font-size: 2.25rem;
  }
  .hero-subtitle {
    font-size: 1rem;
  }
  .hero > div {
    padding: 32px 24px 36px;
  }
}

@media screen and (min-width: 1000px) {
  /* Larger source image for the bigger area. */
  .hero {
    background-image: url("/assets/uploads/friends-hiking-celebrating-2048x1152.jpg");
    background-image: image-set(url("/assets/uploads/friends-hiking-celebrating-2048x1152.webp") type("image/webp"), url("/assets/uploads/friends-hiking-celebrating-2048x1152.jpg") type("image/jpeg"));
  }
}

/* ==========================================================================
   Trust Grid
   ========================================================================== */

.trust-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media screen and (min-width: 700px) {
  .trust-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Icon sits in a hexagon, echoing the logo mark. */
.trust-card .icon-xl {
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 80px;
  font-size: 2rem;
  margin-bottom: 1rem;
  background: var(--green);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.trust-card:nth-child(2) .icon-xl { background: var(--ink); }
.trust-card:nth-child(3) .icon-xl { background: var(--brown); }

.trust-card h3 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 0.5em;
}

.trust-card p {
  font-size: 0.95rem;
  margin-bottom: 0;
}

/* ==========================================================================
   Homepage
   ========================================================================== */

.home-page {
  padding-bottom: 0;
  --band: var(--ink);
}

@media screen and (max-width: 999px) {
  .home-page .banner {
    margin-bottom: 40px;
  }
}

/* Larger section heading. The class beats the global h2 rules at every
   breakpoint, so the mobile size is set here rather than in the
   max-width query. Add .section-title to the other home-page h2s to
   bring them up to match. */
.home-page .section-title {
  font-size: 2.35rem;
  line-height: 1.2;
}

@media screen and (min-width: 1000px) {
  .home-page .section-title {
    font-size: 3.5rem;
  }
}

.home-page .services {
  background-size: cover;
  background-repeat: no-repeat;
}



.home-page .services > div {
  padding: 0;
}

.home-page .services [class*="box-"] {
  position: relative;
  margin-bottom: 30px;
  z-index: 2;
  background-color: #fff;
  border-radius: calc(var(--radius) + 4px);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform 200ms, box-shadow 200ms;
}

.home-page .services [class*="box-"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

@media screen and (max-width: 999px) {
  .home-page .services [class*="box-"] {
    margin: 0 15px;
  }
}

.home-page .services .services-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 15px;
}

@media screen and (min-width: 768px) {
  .home-page .services .services-row {
    flex-direction: row;
    gap: 30px;
    padding: 0;
  }
  .home-page .services .services-row [class*="box-"] {
    flex: 1;
    margin-bottom: 0;
  }
  .home-page .services .services-row + .services-row {
    margin-top: 30px;
  }
}

.home-page .services h3 {
  font-weight: 500;
  line-height: 1.1em;
  font-size: 1.75rem;
  margin-bottom: 0;
  padding: 24px 20px;
  text-align: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
}

.home-page .services h3 .ph-duotone {
  --ph-duotone-primary: rgba(255,255,255,0.9);
  --ph-duotone-secondary: rgba(255,255,255,0.5);
  font-size: 1.3em;
}

.home-page .services h3 a {
  text-decoration: none;
  color: #fff;
}

.home-page .services p {
  padding: 15px 30px 24px 30px;
  color: var(--text-secondary);
}

@media screen and (max-width: 999px) {
  .home-page .services p {
    padding: 10px 15px 20px 15px;
  }
}

.home-page .services p > a {
  font-weight: bold;
}
.home-page .services p > a:hover {
  text-decoration: underline;
}

/* Homepage service box colors */
.home-page .services .box-1 {
  --box-color: var(--green);
  --box-link: var(--green);
}
.home-page .services .box-2 {
  --box-color: var(--ink);
  --box-link: var(--green);
}
.home-page .services .box-3 { --box-color: var(--c4); }
.home-page .services .box-4 { --box-color: var(--brown); }
.home-page .services .box-5 { --box-color: var(--c5); }
.home-page .services .box-6 { --box-color: var(--c2); }

.home-page .services [class*="box-"] h3 {
  background-color: var(--box-color);
  justify-content: flex-start;
  padding: 26px 30px;
}
.home-page .services .box-2 h3 .ph-duotone {
  color: var(--pop-blush);
}
.home-page .services [class*="box-"] p {
  padding-top: 22px;
}
.home-page .services [class*="box-"] p a {
  color: var(--box-link, var(--box-color));
}

.home-page .blog {
  padding: 60px 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  background: var(--ink);
  color: rgba(255,255,255,0.75);
  border-top: 3px solid var(--green);
  margin-top: 80px;
}

footer > div {
  text-align: center;
}

footer .call-to-action {
  margin: 0;
  padding: 56px 20px 32px;
}

footer .call-to-action .btn {
  background: var(--green);
  margin: 6px 4px;
}

footer .call-to-action .btn[href^="tel"] {
  background: transparent;
  border: 2px solid rgba(255,255,255,0.7);
}

@media screen and (min-width: 1000px) {
  footer > div > div {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

footer > div > div > div {
  padding: 5px 10px;
}
footer .footer-locations {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 48px;
  padding: 0 20px 32px;
}
footer .footer-locations address {
  font-style: normal;
  line-height: 1.6;
}
footer .footer-locations a {
  color: #fff;
}
footer .footer-locations address > a:first-child {
  font-family: var(--font-heading);
  font-weight: 600;
}
footer .social-media {
  background-color: transparent;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 10px 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

footer .social-media > div {
  margin: 10px;
}

footer .social-media a {
  transition: opacity 150ms;
}
footer .social-media a:hover {
  opacity: 0.8;
}

footer .social-media a:hover {
  color: #fff;
}

footer .social-media .ph-duotone {
  font-size: 2rem;
  vertical-align: middle;
  color: var(--green-bright);
}

footer .social-media img {
  border-radius: 6px;
}

footer .footer-legal {
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 20px 20px 32px;
  font-size: 0.9rem;
}
footer .footer-legal p {
  margin: 0;
}
footer .footer-legal a {
  color: #fff;
}
footer .footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.form-crisis-note {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.taglines {
  list-style: none;
  padding: 0;
}
.taglines li {
  margin-bottom: 0.75em;
}

.entry-content address {
  font-style: normal;
  margin-bottom: 1em;
}
.entry-content address a {
  text-decoration: underline;
}

/* ==========================================================================
   WordPress Block Styles (retained for content compatibility)
   ========================================================================== */

.wp-block-gallery {
  margin: 0;
}

@media (min-width: 600px) {
  .wp-block-column:not(:first-child) {
    margin-left: 0;
  }
  .wp-block-column:not(:last-child) {
    margin-right: 32px;
  }
}

@media only screen and (max-width: 799px) {
  .wp-block-columns {
    display: block;
  }

  .has-2-columns .wp-block-column,
  .has-3-columns .wp-block-column,
  .has-4-columns .wp-block-column,
  .has-5-columns .wp-block-column,
  .has-6-columns .wp-block-column {
    width: 100%;
  }
}

/* ==========================================================================
   Staff Picker
   ========================================================================== */

.staff-wrapper.show .staff {
  opacity: 1;
}

.staff-picker .staff {
  opacity: 0.5;
  transition: opacity 100ms;
}

.staff-picker .staff:after {
  display: block;
  content: " ";
  clear: both;
}

.staff-picker .staff a {
  position: relative;
  padding: 5px;
  display: block;
  text-align: center;
  border-radius: 8px;
  transition: background 150ms;
}

.staff-picker .staff a:hover {
  background: var(--bg-secondary);
}

.staff-picker .staff img {
  max-width: 100%;
  width: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
}

.staff-picker .selections > div {
  margin-bottom: 15px;
}

@media screen and (min-width: 1000px) {
  .staff-picker .selections {
    display: flex;
    gap: 20px;
  }
  .staff-picker .selections > div {
    flex: 1;
  }
}
.staff-picker select {
  width: 100%;
}

.staff-picker h3 {
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.25;
  margin: 0.5em 0 0.75em;
}

.staff-picker label {
  font-weight: bold;
}
.staff-picker .staff {
  margin: 30px 0;
}
.staff-picker .headshot {
  position: relative;
}

.staff-picker .limit,
.staff-picker .banner-tag {
  position: absolute;
  z-index: 1;
  width: 100%;
  left: 0;
  bottom: 0;
  text-align: center;
  color: #fff;
  background: rgba(19, 22, 20, 0.82);
  padding: 0.5em 0;
  border-radius: 0 0 6px 6px;
  font-family: var(--font-heading);
  font-size: 85%;
}

.staff-picker .language-tag {
  display: block;
  margin: -0.5em 0 0.75em;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 0.9rem;
  line-height: 1.3;
}

@media (min-width: 420px) {
  /* Flex rather than floats, so a card with an extra line (like a language
     tag) makes its row taller instead of snagging the next row. */
  .staff-picker .staff {
    display: flex;
    flex-wrap: wrap;
  }
  .staff-picker .staff:after {
    display: none;
  }
  .staff-picker .staff a {
    width: 50%;
  }
}

@media (min-width: 600px) {
  .staff-picker .staff a {
    width: 33%;
  }
}

@media (min-width: 800px) {
  .staff-picker .staff a {
    width: 24%;
  }
  .staff-picker .limit,
  .staff-picker .banner-tag {
    font-size: 80%;
  }
  .staff-picker h3 {
    font-size: 1.15rem;
  }
}

/* ==========================================================================
   Forms
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="url"],
input[type="password"],
select,
textarea {
  width: 100%;
  border: 1px solid #c9c0b3;
  padding: 10px 14px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-primary);
  background: #fff;
  transition: border-color 150ms, box-shadow 150ms;
  box-sizing: border-box;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* WPForms layout */
.wpforms-container {
  max-width: 600px;
}

.wpforms-field {
  margin-bottom: 18px;
}

.wpforms-field-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

.wpforms-field-sublabel {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-secondary);
}

.wpforms-required-label {
  color: var(--accent);
}

/* Split name fields */
.wpforms-field-row {
  display: flex;
  gap: 12px;
}

.wpforms-field-row-block {
  flex: 1;
}

/* Honeypot — keep hidden */
.wpforms-field-hp {
  display: none !important;
}

/* Submit button */
.wpforms-submit {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 150ms;
}

.wpforms-submit:hover {
  opacity: 0.85;
}

/* Select dropdown arrow */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234a504c' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Responsive: stack split fields on small screens */
@media screen and (max-width: 500px) {
  .wpforms-field-row {
    flex-direction: column;
    gap: 18px;
  }
}


.wp-block {
  max-width: 1050px;
}

/* ==========================================================================
   Contact Page
   ========================================================================== */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.contact-layout .wpforms-container {
  max-width: none;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.contact-card {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 20px 24px;
}

.contact-card h3 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.contact-card p {
  margin: 0;
  font-size: 18px;
}

.contact-card a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.contact-card p + p {
  margin-top: 8px;
}

@media screen and (max-width: 799px) {
  .contact-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ==========================================================================
   Location Pages
   ========================================================================== */

.location-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 2rem;
}

.location-detail .location-card {
  background: var(--bg-secondary);
  border-radius: var(--radius);
  padding: 20px 24px;
}

.location-detail .location-card h2 {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.location-detail .location-card p {
  margin: 0;
  line-height: 1.7;
}

.location-detail .location-card a {
  color: var(--green-deep);
  text-decoration: none;
  font-weight: 600;
}

.location-map {
  margin-bottom: 2.5rem;
}

.location-map iframe {
  border-radius: 8px;
  display: block;
}

.location-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 2.5rem;
}

.location-gallery figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 8px;
}

.location-gallery-two {
  grid-template-columns: repeat(2, 1fr);
}

.location-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media screen and (max-width: 599px) {
  .location-detail {
    grid-template-columns: 1fr;
  }

  .location-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Content Layout
   ========================================================================== */

/* Staff page width — narrower for comfortable reading */
.parent-pageid-38 .banner > * {
  max-width: 900px;
}

.parent-pageid-38 .entry-content > div {
  width: auto;
  max-width: 900px;
  padding: 0 20px;
}

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

/* Responsive iframes (YouTube embeds) */
.su-u-responsive-media-yes {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.su-u-responsive-media-yes iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Multi-column layout */
@media (min-width: 800px) {
  .content-row {
    display: flex;
    gap: 2rem;
  }

  .col-full {
    width: 100%;
  }

  .col-two-thirds {
    width: 66.6%;
  }

  .col-one-third {
    width: 33.3%;
  }

  .col-half {
    width: 50%;
  }
}

/* Staff sidebar */
.staff-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  line-height: 1.6;
}

.sidebar-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.staff-sidebar h3 {
  font-size: 105%;
  font-weight: 600;
  margin: 0 0 0.6em 0;
  color: var(--accent);
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--accent);
}

.staff-sidebar h5 {
  font-size: inherit;
  font-weight: normal;
  line-height: 1.6;
  margin: 0;
}

.staff-sidebar p {
  margin-bottom: 0.4em;
  font-size: 0.9em;
}

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

@media (min-width: 800px) {
  .staff-sidebar {
    font-size: 90%;
    margin-top: 0;
  }
}

@media (max-width: 799px) {
  .staff-sidebar {
    margin-top: 1.5rem;
  }
}

/* CTA center */
.cta-center {
  text-align: center;
  margin: 0.5rem 0;
}

.btn-lg {
  padding: 15px 50px;
  font-size: 1.1em;
  font-weight: 600;
}

@media (max-width: 799px) {
  .btn-lg {
    display: block;
    text-align: center;
    padding: 15px 20px;
  }
}

/* Specialties */
.specialties ul {
  margin-bottom: 0;
}

@media (max-width: 799px) {
  .specialties.content-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
  }
  .specialties .col-one-third {
    width: 50%;
  }
}

/* ==========================================================================
   Alignment
   ========================================================================== */

@media (max-width: 400px) {
  .alignright {
    display: block;
    width: 100%;
  }
}

@media (min-width: 401px) {
  .alignright {
    float: right;
    margin: 15px;
  }
}

/* ==========================================================================
   WordPress Block Compatibility (minimal retained styles)
   ========================================================================== */

.wp-block-embed {
  overflow-wrap: break-word;
}
.wp-block-embed iframe {
  max-width: 100%;
}
.wp-block-embed__wrapper {
  position: relative;
}

.wp-embed-responsive .wp-has-aspect-ratio .wp-block-embed__wrapper:before {
  content: "";
  display: block;
  padding-top: 50%;
}

.wp-embed-responsive .wp-has-aspect-ratio iframe {
  bottom: 0;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}

.wp-embed-responsive .wp-embed-aspect-16-9 .wp-block-embed__wrapper:before {
  padding-top: 56.25%;
}
.wp-embed-responsive .wp-embed-aspect-4-3 .wp-block-embed__wrapper:before {
  padding-top: 75%;
}

/* Services grid */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

.services-grid a {
  display: block;
  padding: 0.9rem 1.25rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.05em;
  transition: background 150ms, border-color 150ms, transform 150ms;
}

.services-grid a:hover {
  background: var(--bg-primary);
  border-color: var(--accent);
  transform: translateX(2px);
}

@media (min-width: 600px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Specialties list (services page) */
.specialties-list {
  columns: 2;
  column-gap: 2rem;
}

@media (min-width: 600px) {
  .specialties-list {
    columns: 3;
  }
}

/* Locations grid */
.locations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  max-width: 1050px;
  margin: 0 auto;
  padding: 0 1rem;
}

.locations-grid .location-card iframe {
  display: block;
  width: 100%;
  height: 250px;
  border: 0;
  border-radius: 8px;
}

@media (min-width: 768px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   Career / Job Listings
   ========================================================================== */

.job-listings {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (min-width: 600px) {
  .job-listings {
    grid-template-columns: repeat(2, 1fr);
  }
}

.job-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.job-card h3 {
  font-size: 115%;
  font-weight: 600;
  margin: 0 0 0.6em 0;
  color: var(--accent);
}

.job-card p {
  font-size: 0.95em;
  margin-bottom: 0.6em;
}

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

.career-cta {
  background: var(--ink);
  border-left: 6px solid var(--accent);
  color: #fff;
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  text-align: center;
  margin: 2rem 0;
}

.career-cta p {
  margin-bottom: 0.3em;
  color: #fff;
}

.career-cta a {
  color: #fff;
  font-weight: bold;
  text-decoration: underline;
}

/* ==========================================================================
   Mobile Responsive Clip-Path Adjustments
   ========================================================================== */


/* ==========================================================================
   Grief & Loss Page
   ========================================================================== */

.grief-types {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 24px;
  margin: 1.5em 0 0;
}

@media screen and (min-width: 600px) {
  .grief-types {
    grid-template-columns: 1fr 1fr;
  }
}

.grief-types li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 1.05rem;
}

.grief-types li .ph-duotone {
  font-size: 1.4em;
  color: var(--accent);
  flex-shrink: 0;
}

.grief-intro {
  align-items: center;
  padding-bottom: 3rem;
}

@media (max-width: 799px) {
  .grief-photo {
    margin-top: 1.5rem;
  }
}

.grief-photo {
  margin: 0;
}

.grief-photo img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 30%;
}

.grief-video-section {
  background: var(--bg-secondary);
}

.grief-video-section h2 {
  text-align: center;
  margin-bottom: 1.5em;
}

.grief-therapists-section h2 {
  text-align: center;
  margin-bottom: 1em;
}

.grief-therapists-section > div > p:last-child {
  text-align: center;
  color: var(--text-secondary);
}


/* Minds Matter partner card */
.minds-matter-partner {
  font-size: 0.85em;
  line-height: 1.5;
}

.minds-matter-partner img {
  float: left;
  width: 64px;
  height: auto;
  margin: 0 0.75rem 0.5rem 0;
}

.minds-matter-partner p:last-child {
  margin-bottom: 0;
}

@media (max-width: 799px) {
  .minds-matter-partner {
    margin-top: 1rem;
  }
}

/* Minds Matter topic and speaker grids */
.topic-grid {
  margin-bottom: 2.5rem;
}

@media (min-width: 700px) {
  .topic-grid {
    columns: 2;
    column-gap: 1.25rem;
  }
}

.topic-card,
.speaker-card {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.topic-card {
  break-inside: avoid;
  margin-bottom: 1.25rem;
}

.topic-card h3 {
  font-size: 1.05em;
  margin: 0 0 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
}

.topic-card ul {
  margin: 0;
  padding-left: 1.1em;
  font-size: 0.92em;
  line-height: 1.5;
}

.topic-card li + li {
  margin-top: 0.35em;
}

.speaker-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

@media (min-width: 700px) {
  .speaker-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.speaker-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 1rem;
  align-items: start;
}

.speaker-card img {
  grid-row: span 3;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 50%;
}

.speaker-card h3 {
  font-size: 1.05em;
  margin: 0 0 0.4em;
}

.speaker-card p {
  font-size: 0.9em;
  line-height: 1.55;
  margin: 0 0 0.6em;
}

.speaker-card a {
  font-weight: 600;
  font-size: 0.95em;
}

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

  .speaker-card img {
    width: 80px;
    height: 80px;
    grid-row: span 1;
  }

  .speaker-card p,
  .speaker-card a {
    grid-column: 1 / -1;
  }
}

/* Minds Matter request form: pair short fields on wider screens */
.mm-form {
  max-width: 760px;
}

@media (min-width: 600px) {
  .mm-form .wpforms-field-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }

  .mm-form .wpforms-field {
    grid-column: 1 / -1;
  }

  .mm-form .wpforms-field.mm-half {
    grid-column: auto;
  }
}

/* Form error message */
.form-error {
  background: color-mix(in srgb, var(--pop-red) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--pop-red) 45%, #fff);
  color: #9b2a20;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

/* Photos on service pages. Tall photos float beside the opening text;
   wide photos span the content column. */
.page-photo {
  margin: 0 0 1.5rem;
}

.page-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.page-photo-wide {
  clear: both;
  margin: 2rem 0;
}

@media (min-width: 700px) {
  .page-photo-tall {
    float: right;
    width: 38%;
    max-width: 380px;
    margin: 0.35rem 0 1.5rem 2rem;
  }
}

/* Row of call-to-action buttons inside page content */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1.5rem 0;
}

/* Outlined button for light backgrounds */
.btn.btn-secondary {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
  padding: 12px 28px;
}

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

/* Closing "reach out to us" line at the end of a blog post */
.entry-content .post-cta {
  font-weight: 700;
}