﻿/*!
 * Start Bootstrap - Freelancer Bootstrap Theme (https://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see https://www.apache.org/licenses/LICENSE-2.0.
 */
h1,h2,h3,h4,h5,h6 {font-family:Montserrat,Arial,sans-serif;font-weight:700;}
.img-centered {margin:0 auto;}
footer {color:#fff;}

/* Shared site layout. */
:root { --canvas:#fff; --surface:#fff; --line:#dce4eb; --text:#183247; --muted:#536b7e; --brand-blue:#0a6ac9; --brand-blue-dark:#0b488b; }

html { font-size:100%; scroll-behavior:smooth; scroll-padding-top:24px; }
body { background:var(--canvas); color:var(--text); font-family:Lato,Arial,sans-serif; font-size:1rem; overflow-x:visible; }
.site-shell { width:calc(100% - 64px); max-width:1200px; margin-inline:auto; padding:0; min-width:0; }
a { color:var(--brand-blue); }
a:hover,a:focus { color:var(--brand-blue-dark); }
h1,h2,h3 { text-transform:none; }

.site-nav { background:#fff; border-bottom:1px solid var(--line); }
.site-nav-inner { display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:94px; }
.site-nav img { display:block; width:172px; height:auto; }
.site-nav-links { display:flex; align-items:center; gap:24px; font-size:1rem; font-weight:700; }
.site-nav-links a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 4px; color:var(--text); text-decoration:none; }
.site-nav-links a:hover { color:var(--brand-blue); }
#portfolio { padding:0 0 64px; }
.project-toolbar { display:flex; flex-direction:row; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:26px 0 22px; border-top:0; }
.project-toolbar h1 { color:var(--brand-blue); display:flex; align-items:center; gap:12px; font-size:26px; text-transform:uppercase; letter-spacing:0; margin:0; }
.project-total { padding:5px 8px; border:1px solid var(--line); border-radius:6px; font:0.875rem Lato,Arial,sans-serif; color:var(--muted); }
.project-filters { margin-left:auto; display:flex; align-items:center; flex-wrap:wrap; gap:5px; padding:0; background:transparent; border:0; border-radius:0; }
.filter-label { padding:6px 10px; color:var(--muted); font-size:0.875rem; font-weight:700; }
.project-filters[hidden] { display:none; }
.project-filter { appearance:none; border:1px solid transparent; border-radius:999px; background:transparent; color:#35566d; min-height:44px; min-width:44px; padding:9px 14px; font:700 0.9375rem Lato,Arial,sans-serif; cursor:pointer; }
.project-filter:hover { color:var(--brand-blue-dark); background:#edf3f7; border-color:transparent; }
.project-filter[aria-pressed="true"] { color:#fff; background:var(--brand-blue); border-color:var(--brand-blue); }
#portfolio .project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:24px; margin:0; }
#portfolio .project-grid:before,#portfolio .project-grid:after { content:none; }

#portfolio .portfolio-item { float:none; width:auto; min-width:0; padding:0; margin:0; right:auto; display:flex; }
#portfolio .portfolio-item[hidden] { display:none; }
#portfolio .portfolio-link { display:flex; flex-direction:column; width:100%; max-width:none; margin:0; border:0; border-radius:3px; overflow:hidden; background:transparent; color:var(--text); text-decoration:none; transition:none; }
#portfolio .portfolio-link:hover img { filter:brightness(1.06); }
#portfolio .caption { display:none; }
#portfolio picture { display:block; background:#fff; }
#portfolio .portfolio-link img { width:100%; height:auto; aspect-ratio:720/520; object-fit:contain; }
hr.star-primary,hr.star-light { display:none; }
section.success { padding:44px 0 48px; background:#effaf7; color:var(--text); border-top:1px solid var(--line); }
#about .about-layout { display:block; max-width:850px; text-align:center; }
#about .about-heading,#about .about-copy { min-width:0; }
#about .about-copy { max-width:70ch; margin:24px auto 0; overflow-wrap:break-word; }
#about h2 { color:var(--brand-blue); font-size:28px; line-height:1.25; margin:0; letter-spacing:0; text-transform:uppercase; }
#about p { color:#425e73; font-size:16px; line-height:1.75; margin:0 0 14px; }
#about p:last-child { margin:0; }
footer .footer-above { background:var(--brand-blue); padding-top:44px; border-top:1px solid var(--line); }
footer .footer-below { background:var(--brand-blue-dark); border-top:0; color:#fff; padding:20px 0; font-size:0.875rem; }
footer h3 { font-size:20px; text-transform:uppercase; margin:0 0 22px; color:#fff; }
footer p { font-size:17px; line-height:1.8; color:#fff; }
footer .footer-col { margin-bottom:32px; }
footer a:link,footer a:visited { color:#fff; }
footer a:hover,footer a:focus { color:#fff; }
footer p a { display:inline-block; padding:2px 12px; border-radius:999px; text-decoration:none; }
footer p a:hover,footer p a:focus { text-decoration:none; background:rgba(255,255,255,.14); }
footer .btn-social:link,footer .btn-social:visited { display:inline-flex; align-items:center; justify-content:center; width:50px; height:50px; border:2px solid #fff; border-radius:50%; background:transparent; color:#fff; font-size:20px; margin:0; text-decoration:none; }
footer .btn-social:hover,footer .btn-social:focus { color:var(--brand-blue); background:#fff; border-color:#fff; }
footer .btn-social .fa { color:inherit; }
footer .footer-col > br { display:none; }
a:focus-visible,button:focus-visible { outline:3px solid var(--brand-blue)!important; outline-offset:4px; }
.sr-only-focusable:focus { position:fixed; top:8px; left:8px; z-index:10000; padding:12px; color:#0c1926; background:white; }
@media(max-width:1000px) { #portfolio .project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }  #about .about-layout { gap:32px; } }
@media(max-width:767px) { .site-shell { width:calc(100% - 36px); }    .site-nav-inner { min-height:80px; gap:16px; } .site-nav img { width:132px; } .site-nav-links { gap:14px; font-size:1rem; }      .project-toolbar { gap:16px; padding:20px 0; } .project-filters { gap:4px; } .project-filter { font-size:0.9375rem; padding:9px 12px; } #portfolio .project-grid { gap:18px; }   #about .about-layout { grid-template-columns:1fr; gap:24px; } section.success { padding:36px 0; } }
@media(max-width:599px) { #portfolio .project-grid { grid-template-columns:1fr; } #portfolio { padding-bottom:36px; } .project-toolbar { align-items:stretch; } .project-filters { width:100%; } }
@media(max-width:370px) { .site-nav img { width:110px; } .site-nav-links { gap:11px; }   }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } #portfolio .portfolio-link { transition:none; } #portfolio .portfolio-link:hover { transform:none; } }
.project-stage { position:relative; overflow-anchor:none; }
#portfolio .filter-ghost { position:absolute; margin:0; pointer-events:none; z-index:3; transform-origin:top left; }
#portfolio .portfolio-item { transform-origin:top left; }

footer a:focus-visible { outline-color:#fff!important; }
@media(max-width:767px) {   .project-toolbar h1 { font-size:23px; } }
@media(max-width:767px) {
  .site-nav-inner { flex-wrap:wrap; justify-content:center; padding:12px 0; gap:8px; }
  .site-nav-links { flex-wrap:wrap; justify-content:center; }
}
@media(max-width:599px) {
  .site-nav-links { width:100%; gap:8px 18px; }

}
#main-content:focus { outline:none; }

/* Shared wrapped button row for project action links */
#project-details .project-link-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 32px 0 24px;
}

#project-details .project-link-row .btn {
  margin: 0;
}

#project-details .project-hero-image {
  margin-bottom: 30px;
}

#project-details .project-action-note {
  margin-bottom: 16px;
}

#project-details .project-lead,
#project-details .project-copy,
#project-details .project-feature-list,
#project-details .project-legal-note {
  margin-bottom: 40px;
}

#project-details .project-copy {
  font-size: 1rem;
}

#project-details .project-copy p {
  margin: 0 0 16px;
  font-size: inherit;
}

#project-details .project-copy p:last-child {
  margin-bottom: 0;
}

#project-details .project-lead {
  font-weight: 700;
}

#project-details .project-inline-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
}

#project-details .project-inline-actions .btn {
  margin: 0;
}

#project-details .project-feature-list {
  display: inline-block;
  font-size: 1rem;
  line-height: 1.5;
  text-align: left;
}

#project-details .project-feature-list ul {
  margin-bottom: 0;
}

#project-details .project-legal-note {
  margin-top: 0;
}

#project-details .item-details {
  margin-bottom: 0;
}

/* Project enlargement: retain the existing page image size and theme accents. */
#project-details .project-image-link {
  display: block;
  position: relative;
  margin: 0 auto 30px;
  cursor: zoom-in;
}
#project-details .project-image-link .project-hero-image {
  margin-bottom: 0;
}
.project-image-viewer {
  text-align: center;
}
.project-image-viewer .modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.project-image-viewer::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.project-image-viewer .modal-dialog {
  display: inline-block;
  vertical-align: middle;
  width: 90vw;
  max-width: none;
  margin: 0 auto;
}
.project-image-viewer .modal-header {
  position: relative;
  padding: 16px 60px 16px 20px;
  text-align: left;
}
.project-image-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-blue);
  font-size: 28px;
  line-height: 44px;
}
.project-image-close:hover {
  color: #18bc9c;
}
.project-image-viewer .modal-body {
  padding: 16px;
  text-align: center;
}
.project-image-expanded {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(90vh - 180px);
  object-fit: contain;
  margin: 0 auto;
}
.project-image-viewer .modal-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.project-image-viewer .modal-footer .btn {
  margin: 0;
}
@media (max-width: 767px) {
  .project-image-viewer .modal-body {
    padding: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .project-image-viewer.fade,
  .project-image-viewer.fade .modal-dialog {
    transition: none;
  }
}

/* Interior pages share the homepage typography, spacing and controls. */
#main-content {min-height:45vh;}
#main-content > section:not(#portfolio):not(#about) {margin-top:0!important;padding:42px 0 56px;}
#main-content > section > .container {max-width:1120px;width:100%;padding-inline:24px;}
#main-content h1 {color:var(--brand-blue);font-size:clamp(1.75rem,4vw,2.35rem);line-height:1.25;margin:0 0 16px;overflow-wrap:anywhere;}
#portfolio h1 {font-size:26px;margin:0;}
#project-details .project-subtitle {font-size:1.125rem;color:var(--muted);line-height:1.5;margin:0 0 28px;}
p,#project-details .project-copy,#project-details .project-feature-list {font-size:1rem;line-height:1.75;}
#project-details .lead {font-size:1.125rem;line-height:1.65;}
#project-details .project-lead,#project-details .project-copy,#project-details .project-feature-list,#project-details .project-legal-note {margin-bottom:26px;}
#project-details a:not(.btn):not(.project-image-link),#privacy p a {text-decoration:underline;text-underline-offset:3px;}
#project-details .item-details {line-height:1.8;}
#privacy h3 {font-size:1.25rem;line-height:1.4;margin-top:30px;color:var(--brand-blue);}
main {overflow-wrap:break-word;}
.btn {min-height:44px;padding:11px 18px;border-radius:999px;font-size:1rem;white-space:normal;line-height:1.35;}
.btn-primary,.btn-success {background:var(--brand-blue);border-color:var(--brand-blue);color:#fff;}
.btn-primary:hover,.btn-primary:focus,.btn-success:hover,.btn-success:focus {background:var(--brand-blue-dark);border-color:var(--brand-blue-dark);color:#fff;}
.btn-default {background:#fff;border-color:#a9bac8;color:var(--text);}
.btn-default:hover,.btn-default:focus {background:#edf3f7;color:var(--text);border-color:var(--muted);}
.form-control {font-size:1rem;min-height:48px;border:1px solid #8b9fac;border-radius:8px;color:var(--text);box-shadow:none;}
.form-control::placeholder {color:var(--muted);opacity:1;}
textarea.form-control {height:auto;resize:vertical;}
.floating-label-form-group {margin-bottom:18px;}
.floating-label-form-group label {display:block;font-size:1rem;margin-bottom:8px;}
#contact h1 {margin-bottom:30px;}
.help-block {font-size:.9375rem;}
input:focus-visible,textarea:focus-visible,select:focus-visible {outline:3px solid var(--brand-blue);outline-offset:3px;}
.modal-title {font-size:1.125rem;line-height:1.4;}
.modal-body {font-size:1rem;line-height:1.65;}
.modal-body h5 {font-size:1rem;}
.modal-header .close {min-width:44px;min-height:44px;color:var(--text);opacity:1;}
.project-image-close:hover {color:var(--brand-blue-dark);}
@media(max-width:767px) {#main-content > section:not(#portfolio):not(#about) {padding:28px 0 38px;} #portfolio h1 {font-size:23px;} .item-details li {display:block;} }
@media(prefers-reduced-motion:reduce) {.fade,.modal.fade .modal-dialog {transition:none!important;} }

#project-details .project-subtitle {font-family:Montserrat,Arial,sans-serif;font-weight:700;}

/* Contact */
#main-content > .contact-page {background:#f5f8fb;padding:56px 0 64px;}
.contact-layout {display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:64px;align-items:start;max-width:1120px;}
.contact-intro {padding-top:18px;}
.contact-eyebrow {color:var(--muted);font-weight:700;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;}
#contact h1 {font-size:clamp(1.75rem,4vw,2.35rem);letter-spacing:0;margin-bottom:20px;}
.contact-lead {font-size:1.1875rem;line-height:1.65;margin:0 0 32px;max-width:34ch;}
.contact-guidance {padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:22px;}
.contact-guidance h2 {font-size:1.0625rem;line-height:1.5;margin:0 0 10px;}
.contact-guidance p,.contact-small {color:var(--muted);font-size:.9375rem;line-height:1.75;}
.contact-guidance p {margin:0;}
.contact-projects {display:inline-flex;align-items:center;min-height:44px;color:var(--brand-blue);font-weight:700;text-decoration:underline;text-underline-offset:4px;}
.contact-projects:hover {color:var(--brand-blue-dark);}
.contact-card {min-width:0;background:#fff;padding:32px;border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 28px rgba(24,50,71,.04);}
.contact-card h2 {font-size:1.375rem;line-height:1.4;margin:0 0 4px;color:var(--text);}
.contact-form-note {font-size:.875rem;color:var(--muted);margin-bottom:26px;}
.contact-fields {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px;}
.contact-field {min-width:0;}
.contact-field-wide {grid-column:1/-1;}
.contact-field label {display:block;margin:0 0 8px;font-size:.9375rem;font-weight:700;}
.contact-field .form-control {width:100%;padding:12px;min-height:48px;height:auto;background:#fff;}
.contact-field textarea.form-control {min-height:160px;}
.field-hint {font-size:.875rem;line-height:1.5;color:var(--muted);margin:8px 0 0;}
.contact-submit-row {display:flex;align-items:center;gap:20px;margin-top:26px;}
.contact-submit-row .btn {flex-shrink:0;padding:13px 24px;}
.contact-submit-row p {font-size:.875rem;line-height:1.55;color:var(--muted);margin:0;}
.contact-status {padding:14px 16px;border-radius:10px;font-size:.9375rem;line-height:1.6;margin-top:24px;}
.contact-status[hidden] {display:none;}
.contact-status-success {background:#effaf7;color:#165e50;border:1px solid #96c9bd;}
.contact-status-error {background:#fff3f2;color:#983a30;border:1px solid #dba9a3;}
.contact-status:focus {outline:3px solid var(--brand-blue);outline-offset:3px;}
.contact-honeypot {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.contact-noscript {font-size:.9375rem;margin-top:16px;}
@media(max-width:1000px) {.contact-layout {gap:32px;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);} .contact-fields {grid-template-columns:1fr;} .contact-card {padding:26px;}}
@media(max-width:767px) {.contact-layout {grid-template-columns:1fr;gap:26px;max-width:620px;} .contact-intro {padding-top:0;} .contact-lead {max-width:none;margin-bottom:18px;} .contact-guidance {padding:16px 0;margin-bottom:16px;} .contact-card {padding:24px;} .contact-submit-row {flex-wrap:wrap;gap:12px;} }
@media(max-width:370px) {.contact-card {padding:20px;} }

#project-details > .container > .row > .col-lg-8,#privacy > .container > .row > .col-lg-8 {float:none;width:100%;max-width:760px;margin-inline:auto;}
#project-details .project-legal-note {font-family:Lato,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.75;}
.project-unavailable {display:inline-flex;align-items:center;gap:6px;padding:11px 18px;color:var(--muted);font-size:1rem;line-height:1.35;}
.btn-link,.btn-link:visited {color:var(--brand-blue);}
.btn-link:hover,.btn-link:focus {color:var(--brand-blue-dark);}

.mobile-project-filter {display:none;}
@media(max-width:599px) {
  .project-toolbar {flex-wrap:nowrap;align-items:center;gap:12px;}
  #portfolio .project-toolbar h1 {font-size:1.25rem;flex-shrink:0;}
  .project-total,.project-filters {display:none;}
  .mobile-project-filter:not([hidden]) {display:block;margin-left:auto;min-width:0;max-width:180px;flex:1;}
  #project-category {width:100%;min-height:44px;padding:9px 8px;border:1px solid #a9bac8;border-radius:10px;background:#fff;color:var(--text);font:700 .9375rem Lato,Arial,sans-serif;}
}

/* Shared project presentation. */

.showcase-shell {max-width:1120px;}
.showcase-hero {display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:42px;margin-bottom:36px;}
.showcase-art {min-width:0;}
#project-details .showcase-art .project-image-link,#project-details .showcase-art .project-hero-image {margin:0;border-radius:12px;}
.showcase-eyebrow {font-size:.875rem;color:var(--muted);font-weight:700;margin-bottom:10px;}
#project-details .showcase-lead {color:var(--brand-blue-dark);font-size:1.25rem;font-weight:700;line-height:1.5;margin-bottom:18px;}
.showcase-intro > p {line-height:1.7;}
.showcase-actions {display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:22px;}
.showcase-source {display:inline-flex;align-items:center;min-height:44px;font-weight:700;}
#project-details .showcase-version {font-size:.875rem;color:var(--muted);margin:12px 0 0;}
.showcase-features {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.showcase-feature {padding:26px;background:#f0f6fc;border:1px solid #d7e6f4;border-radius:16px;}
.showcase-feature:nth-child(2) {background:#effaf7;border-color:#d4e9e3;}
.showcase-feature:nth-child(3) {background:#f5f7fb;}
.showcase-feature-icon {display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#fff;border-radius:12px;color:var(--brand-blue);font-size:22px;margin-bottom:16px;}
.showcase-feature h2,.showcase-note h2 {font-size:1.125rem;line-height:1.45;color:var(--brand-blue-dark);margin:0 0 12px;}
.showcase-feature p {margin:0 0 12px;}
.showcase-feature p:last-child {margin-bottom:0;}
.showcase-details {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:32px 0;padding:24px 0;border-block:1px solid var(--line);}
.showcase-details dt {font-size:.875rem;color:var(--muted);margin-bottom:6px;}
.showcase-details dd {font-size:1rem;color:var(--text);font-weight:700;}

.showcase-note {border-left:4px solid var(--brand-blue);padding-left:20px;}
.showcase-return {display:flex;justify-content:center;margin-top:32px;padding-top:24px;border-top:1px solid var(--line);}

@media(max-width:900px) {.showcase-hero {gap:26px;grid-template-columns:1fr 1fr;} .showcase-features {gap:14px;} .showcase-feature {padding:20px;} }
@media(max-width:767px) {.showcase-hero {grid-template-columns:1fr;gap:24px;} .showcase-features {grid-template-columns:1fr;} .showcase-details {grid-template-columns:1fr 1fr;}  }

.showcase-features-paired {grid-template-columns:repeat(2,minmax(0,1fr));}
.showcase-features-paired > :last-child:nth-child(odd) {grid-column:1/-1;}
.showcase-demo {padding:24px;background:#f0f6fc;border:1px solid #d7e6f4;border-radius:16px;margin-bottom:28px;}
#project-details .showcase-demo .project-inline-actions {justify-content:flex-start;margin-bottom:0;}
#project-details .showcase-intro .project-copy {margin-bottom:16px;}
.showcase-note > p:last-child {margin-bottom:0;}
@media(max-width:767px) {.showcase-features-paired {grid-template-columns:1fr;}}

/* Consistent project notes and closing navigation. */
#project-details .showcase-note p {font-family:Lato,Arial,sans-serif;font-size:1rem;line-height:1.75;color:var(--text);margin:0 0 12px;}
#project-details .showcase-note p:last-child {margin-bottom:0;}
.showcase-details + .showcase-return {border-top:0;margin-top:0;padding-top:0;}

/* Mouse and keyboard interaction states. */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),.btn:focus:not(:focus-visible) {outline:none!important;box-shadow:none;}
.site-nav-links a:hover,.site-nav-links a:focus,.site-nav-links a:active {text-decoration:none;}
.btn-link:hover,.btn-link:focus,.btn-link:active {text-decoration:none;border-color:transparent;box-shadow:none;}
