@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=optional');

/*--------------------------------------------------------------
# Harborline — BWG original theme
# Coastal-professional light theme: sea-light backgrounds,
# horizon-line rules, layered wave accents, squared corners.
--------------------------------------------------------------*/

:root {
  --bwg-header-h: 72px;

  /* Design Tokens */
  --primary-color: #0e6377;
  --primary-rgb: 14, 99, 119;
  --secondary-color: #8a5a1c;
  --secondary-rgb: 138, 90, 28;
  --background-color: #f2f8fa;
  --surface-color: #ffffff;
  --surface-border: #d9e6ec;
  --text-color: #3f5560;
  --heading-color: #102a33;
  --contrast-color: #ffffff;

  --accent-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);

  --font-default: 'Public Sans', system-ui, sans-serif;
  --font-heading: 'Fraunces', Georgia, serif;

  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--font-default);
  font-weight: 400;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

a:hover {
  color: var(--heading-color);
}

/* Visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Sections scroll below the sticky header */
section,
.section {
  scroll-margin-top: calc(var(--bwg-header-h) + 16px);
}

/*--------------------------------------------------------------
# Header (deterministic height = --bwg-header-h)
--------------------------------------------------------------*/
.header {
  height: var(--bwg-header-h);
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--surface-border);
  z-index: 1030;
  transition: box-shadow 0.3s ease;
}

body.scrolled .header {
  box-shadow: 0 6px 18px rgba(16, 42, 51, 0.06);
}

.header .logo {
  gap: 10px;
}

.header .logo i {
  font-size: 1.5rem;
  color: var(--primary-color);
  line-height: 1;
}

.header .logo .sitename {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0;
  line-height: 1;
}

.header .btn-getstarted {
  background-color: var(--primary-color);
  color: var(--on-primary, var(--contrast-color));
  border: 1px solid var(--primary-color);
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 0;
  margin-left: 28px;
  display: inline-block;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus-visible {
  background-color: var(--heading-color);
  border-color: var(--heading-color);
  color: var(--on-primary, var(--contrast-color));
}

/*--------------------------------------------------------------
# Nav Menu (desktop) — active state is an underline
--------------------------------------------------------------*/
.navmenu ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 26px;
}

.navmenu a {
  display: inline-block;
  color: var(--text-color);
  font-family: var(--font-default);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.navmenu a:hover {
  color: var(--heading-color);
  border-bottom-color: var(--surface-border);
}

.navmenu a.active {
  color: var(--heading-color);
  border-bottom-color: var(--primary-color);
}

/*--------------------------------------------------------------
# Mobile Nav (logic mirrors donor; main.js toggles
# body.mobile-nav-active and swaps bi-list / bi-x)
--------------------------------------------------------------*/
.mobile-nav-toggle {
  display: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--heading-color);
  padding: 4px;
}

@media (max-width: 1199px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navmenu {
    display: none;
  }

  body.mobile-nav-active .navmenu {
    display: block;
    position: absolute;
    top: 100%;
    left: 12px;
    right: 12px;
    background: var(--surface-color);
    border: 1px solid var(--surface-border);
    border-top: 2px solid var(--primary-color);
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 18px 36px rgba(16, 42, 51, 0.12);
  }

  body.mobile-nav-active .navmenu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  body.mobile-nav-active .navmenu a {
    display: block;
    width: 100%;
    padding: 10px 4px;
    border-bottom: 1px solid var(--surface-border);
  }

  body.mobile-nav-active .navmenu li:last-child a {
    border-bottom: none;
  }

  body.mobile-nav-active .navmenu a.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
  }
}

/*--------------------------------------------------------------
# Sections & Section Titles (horizon-line motif)
--------------------------------------------------------------*/
section,
.section {
  padding: 84px 0;
  background-color: var(--background-color);
}

/* Alternating sea-light / white bands separated by horizon lines */
.about,
.portfolio,
.testimonials {
  background-color: var(--surface-color);
  border-top: 1px solid var(--surface-border);
  border-bottom: 1px solid var(--surface-border);
}

.section-title {
  text-align: center;
  margin-bottom: 56px;
}

.section-title h2 {
  font-size: 2.25rem;
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 18px;
}

/* thin brass horizon rule under each section heading */
.section-title h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  background-color: var(--secondary-color);
}

.section-title p {
  font-size: 1.05rem;
  max-width: 640px;
  margin: 0 auto;
}

/*--------------------------------------------------------------
# Hero — sea-light gradient with layered wave accent
--------------------------------------------------------------*/
.hero {
  position: relative;
  padding: 96px 0 150px 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath fill='%23d9e6ec' fill-opacity='0.6' d='M0,56L80,61.3C160,67,320,77,480,74.7C640,72,800,56,960,50.7C1120,45,1280,51,1360,53.3L1440,56L1440,120L0,120Z'/%3E%3Cpath fill='%23ffffff' d='M0,92L120,86.7C240,81,480,71,720,74.7C960,78,1200,94,1320,101.3L1440,108L1440,120L0,120Z'/%3E%3C/svg%3E") bottom center / 100% 120px no-repeat,
    linear-gradient(180deg, #e8f3f7 0%, var(--background-color) 70%);
}

.hero .subtitle {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--secondary-color);
  border-bottom: 1px solid var(--secondary-color);
  padding-bottom: 6px;
  margin-bottom: 22px;
}

.hero h1 {
  font-size: 3.4rem;
  line-height: 1.12;
  margin-bottom: 22px;
}

.hero .description {
  font-size: 1.12rem;
  max-width: 540px;
  margin-bottom: 34px;
}

.hero .action-group {
  gap: 22px;
  flex-wrap: wrap;
}

.btn-accent {
  background-color: var(--primary-color);
  color: var(--on-primary, var(--contrast-color));
  border: 1px solid var(--primary-color);
  padding: 13px 30px;
  font-weight: 600;
  border-radius: 0;
  display: inline-block;
}

.btn-accent:hover,
.btn-accent:focus-visible {
  background-color: var(--heading-color);
  border-color: var(--heading-color);
  color: var(--on-primary, var(--contrast-color));
}

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--heading-color);
  font-weight: 600;
  border-bottom: 2px solid var(--primary-color);
  padding-bottom: 3px;
}

.btn-text:hover {
  color: var(--primary-color);
}

.hero-visual,
.about-visual {
  text-align: center;
}

.hero-visual svg,
.hero-visual img,
.about-visual svg,
.about-visual img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 991px) {
  .hero {
    padding: 64px 0 130px 0;
  }

  .hero h1 {
    font-size: 2.5rem;
  }

  .section-title h2 {
    font-size: 1.9rem;
  }
}

/*--------------------------------------------------------------
# Cards — squared corners, thin borders
--------------------------------------------------------------*/
.card-line {
  background-color: var(--surface-color);
  border: 1px solid var(--surface-border);
  border-radius: 0;
  padding: 32px;
  height: 100%;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.card-line:hover {
  border-color: rgba(var(--primary-rgb), 0.45);
  box-shadow: 0 14px 30px rgba(16, 42, 51, 0.07);
  transform: translateY(-3px);
}

/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .info-content h2 {
  font-size: 1.9rem;
  margin-bottom: 18px;
}

.about .lead-text {
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.about .check-list {
  list-style: none;
  padding: 0;
  margin: 26px 0 0 0;
}

.about .check-list li {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--surface-border);
}

.about .check-list li:last-child {
  border-bottom: 1px solid var(--surface-border);
}

.about .check-list li i {
  color: var(--primary-color);
  font-size: 1.3rem;
  line-height: 1.4;
}

.about .check-list li h3 {
  font-size: 1.1rem;
  margin: 0 0 4px 0;
}

.about .check-list li span {
  font-size: 0.95rem;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.service-card {
  border-top: 2px solid var(--primary-color);
}

.service-icon {
  font-size: 2rem;
  color: var(--primary-color);
  display: inline-block;
  margin-bottom: 18px;
  line-height: 1;
}

.service-card h3 {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.service-card p {
  margin-bottom: 0;
  font-size: 0.97rem;
}

/*--------------------------------------------------------------
# Portfolio / Work
--------------------------------------------------------------*/
.work-card {
  background-color: var(--surface-color);
  border: 1px solid var(--surface-border);
  height: 100%;
}

.work-card .work-image {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--surface-border);
}

.work-card .work-image svg,
.work-card .work-image img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

.work-card:hover .work-image svg,
.work-card:hover .work-image img {
  transform: scale(1.03);
}

.work-info {
  padding: 22px 24px 26px 24px;
}

.work-meta {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary-color);
  margin-bottom: 6px;
}

.work-info h3 {
  font-size: 1.3rem;
  margin: 0;
}

/*--------------------------------------------------------------
# Why Us / Metrics
--------------------------------------------------------------*/
.metric-card {
  text-align: center;
  padding: 40px 24px;
}

.metric-value {
  font-family: var(--font-heading);
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--primary-color);
  line-height: 1;
  margin-bottom: 14px;
}

.metric-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

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

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonial-card {
  border-left: 2px solid var(--secondary-color);
}

.testimonial-card > p {
  font-size: 1.03rem;
  line-height: 1.7;
  margin-bottom: 0;
}

.testimonial-user {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--surface-border);
}

.testimonial-user svg,
.testimonial-user img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
}

.testimonial-user h3 {
  font-size: 1rem;
  margin: 0 0 2px 0;
}

.testimonial-user span {
  display: block;
  font-size: 0.83rem;
  color: var(--text-color);
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact-info-block {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 22px;
}

.contact-info-block i {
  font-size: 1.3rem;
  color: var(--primary-color);
  background-color: rgba(var(--primary-rgb), 0.08);
  border: 1px solid var(--surface-border);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.contact-info-block h3 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}

.contact-info-block p {
  margin-bottom: 0;
  font-size: 0.97rem;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  background-color: var(--surface-color);
  border: 1px solid var(--surface-border);
  border-radius: 0;
  color: var(--heading-color);
  font-family: var(--font-default);
  font-size: 0.97rem;
  padding: 12px 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--text-color);
  opacity: 1;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}

.contact-form button[type="submit"] {
  background-color: var(--primary-color);
  color: var(--on-primary, var(--contrast-color));
  border: 1px solid var(--primary-color);
  border-radius: 0;
  padding: 14px 34px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.contact-form button[type="submit"]:hover,
.contact-form button[type="submit"]:focus-visible {
  background-color: var(--heading-color);
  border-color: var(--heading-color);
}

/*--------------------------------------------------------------
# Page Title (inner pages) + Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  padding: 56px 0 44px 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath fill='%23d9e6ec' fill-opacity='0.5' d='M0,28L120,32C240,36,480,44,720,42C960,40,1200,28,1320,22L1440,16L1440,60L0,60Z'/%3E%3C/svg%3E") bottom center / 100% 60px no-repeat,
    linear-gradient(180deg, #e8f3f7 0%, var(--background-color) 100%);
  border-bottom: 1px solid var(--surface-border);
}

.page-title .breadcrumbs,
.page-title .title-wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

.page-title .breadcrumbs .breadcrumb {
  margin-bottom: 18px;
  font-size: 0.88rem;
}

.page-title .breadcrumbs .breadcrumb a {
  color: var(--primary-color);
}

.page-title .breadcrumbs .breadcrumb a:hover {
  color: var(--heading-color);
}

.page-title .breadcrumbs .breadcrumb .current {
  color: var(--text-color);
}

.page-title h1 {
  font-size: 2.4rem;
  margin-bottom: 10px;
}

.page-title .title-wrapper p {
  max-width: 720px;
  margin-bottom: 0;
  font-size: 1.05rem;
}

/*--------------------------------------------------------------
# Starter Section / Details pages
--------------------------------------------------------------*/
.starter-section,
.service-details,
.portfolio-details {
  background-color: var(--surface-color);
}

.starter-section .container p {
  font-size: 1.02rem;
}

.details-aside h3 {
  font-size: 1.2rem;
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--surface-border);
}

.details-aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.details-aside ul li {
  padding: 9px 0;
  border-bottom: 1px solid var(--surface-border);
  font-size: 0.97rem;
}

.details-aside ul li:last-child {
  border-bottom: none;
}

.details-aside ul li a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  color: var(--text-color);
  font-weight: 500;
}

.details-aside ul li a:hover,
.details-aside ul li a.active {
  color: var(--primary-color);
}

.details-content h2 {
  font-size: 1.7rem;
  margin: 26px 0 14px 0;
}

.details-content svg,
.details-content img {
  max-width: 100%;
  height: auto;
}

/*--------------------------------------------------------------
# Theme Footer (inner pages) — light, horizon-line top rule
--------------------------------------------------------------*/
.footer {
  background-color: var(--surface-color);
  border-top: 1px solid var(--surface-border);
  padding: 56px 0 28px 0;
  font-size: 0.95rem;
  color: var(--text-color);
}

.footer .footer-top {
  padding-bottom: 24px;
}

.footer .sitename {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--heading-color);
}

.footer .logo i {
  font-size: 1.2rem;
  color: var(--primary-color);
  margin-right: 8px;
}

.footer .footer-contact p {
  margin-bottom: 4px;
}

.footer h3 {
  font-size: 1.02rem;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--surface-border);
}

.footer .footer-links ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer .footer-links ul li {
  padding: 4px 0;
}

.footer .footer-links ul a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--text-color);
}

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

.footer .copyright {
  border-top: 1px solid var(--surface-border);
  padding-top: 22px;
  text-align: center;
  font-size: 0.88rem;
}

.footer .copyright p {
  margin-bottom: 0;
}

/* Accessibility: footer social icon links (if present) keep a
   comfortable >= 40px touch target (WCAG 2.2 AA minimum is 24px) */
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: var(--text-color);
  border: 1px solid var(--surface-border);
  margin-right: 8px;
}

.social-links a:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/*--------------------------------------------------------------
# Scroll Top button (rescued by the engine from theme footers)
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  width: 44px;
  height: 44px;
  background-color: var(--primary-color);
  color: var(--on-primary, var(--contrast-color));
  border: 1px solid var(--primary-color);
  border-radius: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.25s ease;
}

.scroll-top i {
  font-size: 1.5rem;
  line-height: 0;
}

.scroll-top:hover,
.scroll-top:focus-visible {
  background-color: var(--heading-color);
  border-color: var(--heading-color);
  color: var(--on-primary, var(--contrast-color));
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Injected Global Footer overrides for Harborline
# (engine appends .spec-site-global-footer; keep AA contrast)
--------------------------------------------------------------*/
.spec-site-global-footer {
  background: #ffffff !important;
  border-top: 1px solid var(--surface-border) !important;
  color: #3f5560 !important;
}

.spec-site-global-footer p,
.spec-site-global-footer span,
.spec-site-global-footer li {
  color: #3f5560 !important;
}

.spec-site-global-footer h1,
.spec-site-global-footer h2,
.spec-site-global-footer h3,
.spec-site-global-footer h4 {
  color: var(--heading-color) !important;
}

.spec-site-global-footer a {
  color: var(--primary-color) !important;
}

.spec-site-global-footer a:hover {
  color: var(--heading-color) !important;
}

/*--------------------------------------------------------------
# Accessibility / QA safety pins
--------------------------------------------------------------*/
/* Keep any animated content fully opaque so text contrast never
   drops below WCAG thresholds (and never stays hidden if scroll
   events do not fire). AOS is not loaded in Harborline, but the
   pin guards content injected with leftover data-aos attributes. */
[data-aos] {
  opacity: 1 !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}