/* Current visual refinements and page-specific overrides.
 * This file loads last. Keep rule order: later refinements override earlier ones.
 * Common edits: .lead controls introductory text width; .eyebrow controls labels;
 * #about .about-portrait controls headshot width; .service-examples > .collapsing
 * controls expand/collapse duration; the final media block styles the mobile menu.
 * Bootstrap breakpoints: md 768px, lg 992px, xl 1200px, xxl 1400px.
 */
/* Refreshed layout using the existing colorscheme.css palette.
   Complete replacement for css/refresh.css; no base palette overrides. */
:root {
  --accent: var(--link-text-color);
  --accent-soft: var(--header-background-color);
  --surface: var(--main-background-color);
  --panel: var(--main-background-color);
  --muted: var(--body-text-color);
  --rule: #cacaca;
}

body {
  line-height: 1.5;
  letter-spacing: .005em;
}

h1,h2,h3 {
  line-height: 1.2;
  letter-spacing: -.025em;
  font-weight: 700 !important;
  color: var(--body-text-color);
}

p {
  margin-bottom: 1rem;
}

a {
  text-underline-offset: .2em;
}

a: hover {
  text-decoration: underline;
}

.border-top,.border {
  border-color: var(--rule)!important;
}

.content-heading {
  text-align: left;
  padding-top: 2.5rem;
  padding-bottom: 1.75rem;
  margin: 0;
  font-size: clamp(2rem,4vw,2.8rem);
}

.content-text,.portfolio-text {
  line-height: 1.4;
  padding-bottom: .75rem;
}

.content-heading + .content-text {
  color: var(--muted);
  font-size: 1.125em;
}

.site-navbar {
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 3px 15px #00000008;
  padding: .45rem 0;
}

#sticky-menu.is-stuck {
  opacity: 1;
  box-shadow: 0 4px 18px #00000018;
}

#main-menu .nav-link {
  border-radius: .5rem;
  font-weight: 600;
  margin: .1rem .2rem;
  padding-top: .65rem;
  padding-bottom: .65rem;
  transition: background-color .15s;
}

#main-menu .nav-link:hover {
  background: var(--main-menu-page-hover-background-color);
  text-decoration: none;
}

#main-menu li.currentpage > a:hover {
  background: var(--main-menu-current-page-hover-background-color);
}

.site-navbar .navbar-toggler {
  padding: .35rem .8rem;
}

.btn {
  border-radius: .55rem;
  font-weight: 600;
  padding: .7rem 1.15rem;
  line-height: 1.45;
  white-space: normal;
}

.btn-lg {
  font-size: 1rem;
  padding: .9rem 1.3rem;
}

.btn-sm {
  font-size: .875rem;
  padding: .5rem .9rem;
}

.btn-primary {
  --bs-btn-bg: var(--link-text-color);
  --bs-btn-border-color: var(--link-text-color);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--link-hover-focus-text-color);
  --bs-btn-hover-border-color: var(--link-hover-focus-text-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--link-hover-focus-text-color);
  --bs-btn-active-border-color: var(--link-hover-focus-text-color);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--link-text-color);
  --bs-btn-hover-border-color: var(--link-text-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--link-hover-focus-text-color);
  --bs-btn-active-border-color: var(--link-hover-focus-text-color);
}

.btn:hover {
  text-decoration: none;
}

.home-hero {
  background: var(--main-background-color);
  border-bottom: 1px solid var(--rule);
}

.home-hero .display-4 {
  font-size: clamp(2.5rem,4.5vw,4rem);
  line-height: 1.12;
}

.home-hero h1 span {
  color: var(--body-text-color);
}

/* Introductory paragraphs: about.html uses Bootstrap mw-100 to override this width. */
.lead {
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 54ch;
  color: var(--muted);
}

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--accent);
  margin-bottom: 1rem;
}

.hero-note {
  font-size: .875rem;
  color: var(--muted);
}

.card {
  background: var(--panel);
  color: var(--body-text-color);
  border-color: var(--rule);
  border-radius: 1rem;
  overflow: hidden;
}

.hero-work {
  max-width: 470px;
  margin: auto;
}

.hero-work img {
  border-radius: 0;
}

.preview-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 12px 16px;
  background: var(--panel);
  color: var(--muted);
}

.preview-toolbar > span:not(:last-child) {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule);
}

.section-space {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.section-title {
  font-size: clamp(1.8rem,3vw,2.5rem);
  max-width: 24ch;
  margin-bottom: 1rem;
}

.section-intro {
  max-width: 65ch;
  color: var(--muted);
}

.service-card {
  border-top: 3px solid var(--accent);
  box-shadow: 0 8px 24px #00000006;
}

.service-card p {
  color: var(--muted);
}

.service-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-card .card-link {
  margin-top: auto;
  font-weight: 600;
  color: var(--accent);
}

.service-number {
  color: var(--accent);
  font-size: .875rem;
  font-weight: 700;
}

.contact-panel {
  background: var(--accent-soft);
  border: 1px solid var(--rule);
  border-radius: 1rem;
  margin: 1rem 0 2rem;
}

.contact-panel p {
  color: var(--muted);
}

.contact-phone {
  color: var(--accent);
  font-weight: 700;
  text-align: center;
  font-size: 1.25rem;
}

.portfolio-card h2 a {
  color: var(--accent);
}

.portfolio-card p {
  line-height: 1.5;
}

.site-footer {
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.8;
}

.site-footer h2 {
  letter-spacing: 0;
}

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

.footer-brand {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--body-text-color);
  letter-spacing: -.025em;
}

.footer-links li {
  margin-bottom: .5rem;
}

.footer-phone {
  font-size: 1.25rem;
  font-weight: 700;
}

#footer-box {
  text-align: left;
  font-size: .8rem;
  font-weight: 400;
  color: var(--muted);
  padding-bottom: 0;
}

.faq-accordion {
  --bs-accordion-bg: var(--panel);
  --bs-accordion-color: var(--body-text-color);
  --bs-accordion-border-color: var(--rule);
  --bs-accordion-btn-color: var(--body-text-color);
  --bs-accordion-active-color: var(--accent);
  --bs-accordion-active-bg: var(--accent-soft);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem #00000040;
  --bs-accordion-border-radius: .75rem;
  --bs-accordion-inner-border-radius: .75rem;
  margin: 1.5rem 0;
}

.accordion-button {
  font-weight: 600;
  line-height: 1.5;
  padding: 1.25rem;
  font-size: 1rem;
  letter-spacing: 0;
}

.accordion-body {
  line-height: 1.8;
  color: var(--muted);
}

#buttons_top,#buttons_bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .5rem;
  margin: 1rem 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 1100;
  background: var(--panel);
  color: var(--accent);
  padding: .75rem;
  border: 2px solid currentColor;
  border-radius: .5rem;
}

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

#softr-back-to-top-button {
  width: 46px;
  height: 46px;
  background: var(--panel);
  color: var(--accent);
  border-color: var(--rule);
  box-shadow: 0 4px 15px #0002;
  font-size: 1.5rem;
  opacity: 1;
}

@media(min-width:768px) {
  .site-navbar {
    padding: .5rem 0;
  }
  .home-hero .container {
    padding-top: 4rem!important;
    padding-bottom: 4rem!important;
  }
}

@media(min-width:1400px) {
  body {
    font-size: 18px;
  }
}

@media(max-width:767.98px) {
  .hero-work {
    transform: none;
  }
  .section-space {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
  .site-footer {
    font-size: .9rem;
  }
  .content-heading {
    padding-top: 2rem;
  }
  #softr-back-to-top-button {
    right: 16px;
    bottom: 16px;
  }
}

/* Undo the optional logo effects from the alternate-palette stylesheets. */
.headerlogo {
  filter: none;
  mix-blend-mode: normal;
}

.btn-primary,.btn-outline-primary {
  --bs-btn-focus-shadow-rgb: 0,0,255;
}

/* Home-page portfolio update — October 22, 2026. */
#home .hero-work {
  max-width: 100%;
}

.hero-portfolio-message p:last-child {
  font-size: .95rem;
}

@media(min-width:992px) {
  #home .eyebrow,#about .eyebrow {
    font-size: .875rem;
    letter-spacing: .11em;
  }
}

@media(min-width:1200px) {
  #home .eyebrow,#about .eyebrow {
    font-size: 1rem;
  }
}

@media(min-width:1400px) {
  #home .eyebrow,#about .eyebrow {
    font-size: 1.1rem;
  }
}

/* About photo maximum width. The image scales down on narrower screens. */
#about .about-portrait {
  max-width: 240px;
}

/* Simplified home preview and four service categories. */
.hero-portfolio-title {
  max-width: 100%;
  margin: 0 0 .75rem;
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
}

.hero-portfolio-label {
  display: block;
  margin-bottom: .15rem;
  font-size: .85em;
  font-weight: 400;
}

#home-portfolio-name {
  display: block;
  font-weight: 600;
}

#home .hero-work {
  border-radius: 1.25rem;
  overflow: hidden;
}

#home-portfolio-carousel .carousel-inner {
  border-radius: inherit;
}

.service-card-heading {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.service-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  color: var(--accent);
}

.service-icon svg {
  display: block;
  width: 2.75rem;
  height: 2.75rem;
}

.service-section-heading {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.service-jump-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1rem 0 2.5rem;
}

.service-section {
  scroll-margin-top: 6.5rem;
}

.service-description {
  max-width: none;
  width: 100%;
}

.service-description li {
  margin-bottom: .6rem;
  line-height: 1.6;
}

.service-examples {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
}

.service-examples summary {
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--accent);
  padding: .5rem 0;
}

.service-examples summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.service-examples .solutions-text {
  line-height: 1.45;
}

@media(min-width:992px) {
  .hero-portfolio-title {
    font-size: 1.1rem;
  }
}

@media(max-width:767.98px) {
  .service-section-heading {
    align-items: flex-start;
  }
  .service-section {
    scroll-margin-top: 5.5rem;
  }
  .service-section-heading h2 {
    font-size: 1.5rem;
  }
}

/* Light-only site, complete screenshot previews, and compact navigation. */
#home .hero-work .carousel-item img {
  object-fit: contain;
  object-position: center top;
  background: var(--panel);
}

.site-navbar {
  padding: 0;
  min-height: 44px;
}

#main-menu .nav-link {
  font-size: 1rem;
  line-height: 1.25;
  padding: .5625rem .875rem;
  margin: .125rem .2rem;
}

.site-navbar .navbar-toggler {
  min-height: 44px;
  padding: .25rem .8rem;
  font-size: 1rem;
  line-height: 1.25;
}

@media(min-width:768px) {
  .site-navbar {
    padding: 0;
    min-height: 44px;
  }
}

/* All home preview images retain the 970 x 832 design ratio. */
#home .hero-work .carousel-inner {
  aspect-ratio: 970 / 832;
}

#home .hero-work .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 970 / 832;
  object-fit: contain;
  object-position: center;
  background: var(--panel);
}

/* Option 1: single-chevron scroll-to-top button. */
#softr-back-to-top-button {
  padding: 0;
  line-height: 1;
}

#softr-back-to-top-button:not([hidden]) {
  display: grid;
  place-items: center;
}

#softr-back-to-top-button svg {
  display: block;
  width: 24px;
  height: 24px;
}

/* Keep each headline phrase on one line; size relative to its actual column. */
.hero-copy {
  container-type: inline-size;
}

.home-hero .hero-copy .display-4 {
  font-size: clamp(1rem,3vw,3.5rem);
  font-size: clamp(1rem,7.4cqw,4rem);
}

.hero-headline-line {
  display: block;
  white-space: nowrap;
}

/* Reduce the active highlight by 6px without changing the navigation's height. */
@media(min-width:768px) {
  #main-menu .nav-link {
    padding-top: .375rem;
    padding-bottom: .375rem;
    margin-top: .3125rem;
    margin-bottom: .3125rem;
  }
}

/* Equal-height navigation states with a distinct, softer hover treatment. */
#main-menu .navbar-nav .nav-link:hover, #main-menu .navbar-nav .nav-link:focus-visible {
  background: #e5e5ff;
  color: #17175e;
  text-decoration: none;
}

#main-menu .navbar-nav li.currentpage > .nav-link {
  background: var(--main-menu-current-page-background-color);
  color: var(--main-menu-current-page-text-color);
}

#main-menu .navbar-nav li.currentpage > .nav-link:hover, #main-menu .navbar-nav li.currentpage > .nav-link:focus-visible {
  background: #0000cc;
  color: #fff;
}

/* Services examples use Bootstrap Collapse with a 0.75-second slide. */
.service-examples-toggle {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .5rem 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.service-examples-toggle::before {
  content: '';
  display: block;
  width: .55rem;
  height: .55rem;
  flex-shrink: 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .2s ease;
}

.service-examples-toggle[aria-expanded="true"]::before {
  transform: rotate(45deg);
}

.service-examples-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* Duration applies to BOTH expanding and collapsing; .75s = 0.75 seconds. */
.service-examples > .collapsing {
  transition: height .75s ease;
}

@media(prefers-reduced-motion:reduce) {
  .service-examples > .collapsing,.service-examples-toggle::before {
    transition: none!important;
  }
}

/* Avoid a negative row gutter pulling the divider toward the service cards. */
#home .home-experience {
  margin-top: 0;
}

@media(max-width:991.98px) {
  #home .home-experience > div + div {
    margin-top: 2rem;
  }
}

/* Mobile menu option 1: clean white dropdown with a soft active-page marker. */
@media(max-width:767.98px) {
  .site-navbar .navbar-toggler {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    text-align: left;
  }
  .site-navbar .navbar-toggler:focus {
    box-shadow: none;
  }
  .site-navbar .navbar-toggler:focus-visible {
    outline: 2px solid #17175e;
    outline-offset: -4px;
  }
  .mobile-menu-close {
    margin-left: auto;
    font-size: 1.5rem;
    line-height: 1;
    visibility: hidden;
  }
  .navbar-toggler[aria-expanded="true"] .mobile-menu-close {
    visibility: visible;
  }
  #main-menu {
    background: #fff;
    border-top: 1px solid #dedeee;
    border-bottom: 1px solid #dedeee;
  }
  #main-menu .navbar-nav {
    width: 100%;
    padding: .625rem .75rem;
  }
  #main-menu .navbar-nav .nav-link {
    min-height: 44px;
    margin: 2px 0;
    padding: 10px 16px;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    color: #17175e;
    border-radius: .375rem;
  }
  #main-menu .navbar-nav .nav-link:hover {
    background: #929293;
    color: #fff;
    outline: none;
    box-shadow: inset 3px 0 0 #000;
  }  
  #main-menu .navbar-nav .nav-link:focus-visible {
    outline: 2px solid #0000ff;
    outline-offset: -2px;
    background: #d6e6ff;
    color: #102d64;
  }
  #main-menu .navbar-nav li.currentpage > .nav-link, #main-menu .navbar-nav li.currentpage > .nav-link:hover, #main-menu .navbar-nav li.currentpage > .nav-link:focus-visible {
    background: #e5e5ff;
    color: #0000ff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 #0000ff;
  }
}