/* Company Software (Flask CMS) */
:root{
  --page: #f6f3ee;
  --surface: #ffffff;
  --surface-2: #ebe7df;
  --ink: #17201b;
  --muted: #647067;
  --line: #d9d3c8;
  --teal: #0f766e;
  --teal-dark: #0b4f4a;
  --copper: #a15c27;
  --amber: #f2b84b;
  --dark: #111816;
  --dark-2: #1e2824;
  --shadow: 0 18px 45px rgba(29, 40, 35, .12);
  --radius: 8px;
}

html{ scroll-behavior: smooth; }
html, body{ min-height: 100%; }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--page);
  color: var(--ink);
  letter-spacing: 0;
}

img{ max-width: 100%; }
a{ color: inherit; }
.text-secondary{ color: var(--muted)!important; }
.text-pastel{ color: #f8efdb; }
.text-sky{ color: #9ad7ff; }
.text-teal{ color: var(--teal); }
.text-copper{ color: var(--copper); }

.bg-grid{
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,243,238,.96)),
    repeating-linear-gradient(90deg, rgba(23,32,27,.045) 0, rgba(23,32,27,.045) 1px, transparent 1px, transparent 72px),
    repeating-linear-gradient(0deg, rgba(23,32,27,.035) 0, rgba(23,32,27,.035) 1px, transparent 1px, transparent 72px);
}

.nav-blur{
  background: rgba(246,243,238,.88);
  border-bottom: 1px solid rgba(23,32,27,.11);
  backdrop-filter: blur(16px);
}
.navbar .nav-link{
  color: rgba(23,32,27,.72);
  font-weight: 600;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active{
  color: var(--ink);
}
.brand-mark{
  width: 44px;
  height: 44px;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
}
.brand-copy{
  color: var(--ink);
  font-weight: 800;
  letter-spacing: 0;
}

.btn{
  border-radius: var(--radius);
  font-weight: 700;
}
.btn i{ margin-right: .35rem; }
.btn-accent{
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}
.btn-accent:hover,
.btn-accent:focus{
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: #fff;
}
.btn-ghost-light{
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
}
.btn-ghost-light:hover,
.btn-ghost-light:focus{
  color: #fff;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.8);
}

.eyebrow{
  color: rgba(255,255,255,.78);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow.text-teal{ color: var(--teal); }
.eyebrow.text-copper{ color: var(--copper); }
.section-pad{
  padding: 5rem 0;
}
.section-muted{
  background: var(--surface-2);
}
.section-dark{
  background: var(--dark);
  color: #f5f1e8;
}
.section-contact{
  background: linear-gradient(180deg, var(--page), #e9efe9);
}
.section-head{
  max-width: 760px;
  margin-bottom: 2rem;
}
.section-head.compact{
  max-width: 560px;
}
.section-head h2,
.section-dark h2{
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.02;
  margin-bottom: 1rem;
  font-weight: 800;
}
.section-head p:not(.eyebrow),
.section-dark p:not(.eyebrow){
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 0;
}
.section-dark p:not(.eyebrow){ color: rgba(245,241,232,.7); }

.hero-section{
  position: relative;
  min-height: clamp(650px, 78vh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--dark);
}
.hero-media,
.hero-overlay{
  position: absolute;
  inset: 0;
}
.hero-media{
  background-size: cover;
  background-position: center top;
  transform: scale(1.02);
}
.hero-overlay{
  background:
    linear-gradient(90deg, rgba(11, 20, 16, .95) 0%, rgba(11, 20, 16, .74) 43%, rgba(11, 20, 16, .30) 100%),
    linear-gradient(0deg, rgba(11, 20, 16, .92) 0%, rgba(11, 20, 16, .06) 46%, rgba(11, 20, 16, .28) 100%);
}
.hero-content{
  position: relative;
  z-index: 1;
  color: #fff;
  padding-top: 8rem;
  padding-bottom: 4.5rem;
}
.hero-title{
  max-width: 980px;
  font-size: clamp(3.1rem, 8.4vw, 7.4rem);
  line-height: .88;
  font-weight: 800;
}
.hero-lead{
  max-width: 720px;
  color: rgba(255,255,255,.78);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.hero-metrics{
  display: grid;
  gap: .75rem;
}
.hero-metrics div{
  padding: 1rem;
  border-radius: var(--radius);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
}
.hero-metrics strong{
  display: block;
  font-size: 1.2rem;
}
.hero-metrics span{
  color: rgba(255,255,255,.70);
}

.service-card,
.post-card,
.portfolio-card,
.contact-form,
.empty-state{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.service-card{
  min-height: 100%;
  padding: 1.45rem;
}
.service-card i{
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.4rem;
  border-radius: var(--radius);
  color: var(--teal-dark);
  background: #dfeeea;
  font-size: 1.25rem;
}
.service-card h3,
.process-list h3,
.portfolio-body h3,
.post-body h3,
.post-body h2{
  font-size: 1.1rem;
  font-weight: 800;
  margin-bottom: .55rem;
}
.service-card p,
.portfolio-body p,
.post-body p,
.process-list p{
  color: var(--muted);
  margin-bottom: 0;
}

.portfolio-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.portfolio-card,
.post-card{
  display: block;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.portfolio-card:hover,
.post-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 55px rgba(29, 40, 35, .16);
}
.portfolio-card img{
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  background: var(--surface-2);
}
.portfolio-placeholder{
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 8;
  background: var(--dark-2);
  color: #fff;
  font-size: 2rem;
}
.portfolio-body,
.post-body{
  padding: 1.25rem;
}
.portfolio-body span,
.post-body span{
  display: inline-block;
  margin-bottom: .65rem;
  color: var(--copper);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.process-list{
  display: grid;
  gap: .75rem;
}
.process-list article{
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.72);
}
.process-list span{
  color: var(--teal);
  font-weight: 800;
  font-size: 1.2rem;
}

.value-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
.value-grid div{
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);
}
.value-grid strong,
.value-grid span{
  display: block;
}
.value-grid span{
  color: rgba(245,241,232,.68);
  margin-top: .25rem;
}

.post-card img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface-2);
}
.empty-state{
  padding: 1.5rem;
  color: var(--muted);
}
.contact-form{
  padding: 1.5rem;
}
.contact-aside{
  display: grid;
  gap: .75rem;
  margin-top: 1.25rem;
}
.contact-aside div{
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--muted);
}
.contact-aside i{
  color: var(--teal);
  font-size: 1.25rem;
}

.form-label{
  color: var(--ink);
  font-weight: 700;
}
.form-control,
.form-select,
textarea{
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius);
}
.form-control:focus,
.form-select:focus,
textarea:focus{
  box-shadow: 0 0 0 .25rem rgba(15,118,110,.14);
  border-color: rgba(15,118,110,.55);
  background: #fff;
  color: var(--ink);
}
.form-control::placeholder{ color: rgba(100,112,103,.72); }

.page-hero,
.article-shell{
  padding: 5.5rem 0 4rem;
}
.page-hero h1,
.article-head h1{
  max-width: 900px;
  font-size: clamp(2.35rem, 6vw, 5rem);
  line-height: .95;
  font-weight: 800;
  margin: .75rem 0 1rem;
}
.page-hero p:not(.eyebrow),
.article-head p{
  max-width: 720px;
  color: var(--muted);
  font-size: 1.15rem;
}
.back-link{
  display: inline-flex;
  gap: .4rem;
  align-items: center;
  color: var(--teal-dark);
  font-weight: 800;
  text-decoration: none;
}
.back-link:hover{ text-decoration: underline; }
.article-head{
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.article-cover{
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  margin-bottom: 1.5rem;
}
.article-content{
  max-width: 850px;
  padding: 2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.site-footer{
  background: var(--dark);
  color: rgba(245,241,232,.72);
  padding: 3.5rem 0 2rem;
}
.footer-brand{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  margin-bottom: .75rem;
}
.footer-brand img{
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
}
.footer-links{
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-links a{
  color: rgba(245,241,232,.72);
  text-decoration: none;
  font-weight: 700;
}
.footer-links a:hover{ color: #fff; }
.footer-bottom{
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .9rem;
}

.flash-toast-container{ z-index: 2000; }
.flash-toast{
  min-width: 320px;
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}

/* Compatibility utilities used by admin templates */
.glass{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  border-radius: var(--radius);
}
.card-soft{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
}
.cover-preview-thumb{
  width: 220px;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.16);
  display: block;
}

/* Rendered markdown */
.prose{
  color: var(--ink);
  line-height: 1.72;
}
.prose h1,
.prose h2,
.prose h3{
  margin-top: 1.4rem;
  margin-bottom: .75rem;
  font-weight: 800;
}
.prose a{
  color: var(--teal-dark);
  font-weight: 700;
}
.prose pre{
  background: #17201b;
  color: #f6f3ee;
  padding: 1rem;
  border-radius: var(--radius);
  overflow-x: auto;
}
.prose code{
  background: rgba(23,32,27,.08);
  padding: .12rem .35rem;
  border-radius: 6px;
}
.prose table{
  width: 100%;
}
.prose th,
.prose td{
  border: 1px solid var(--line);
  padding: .65rem;
}

/* Admin dark theme */
.admin-ui{
  background: #0b0f19;
  color: #f8efdb;
}
.admin-ui.bg-grid{
  background: #0b0f19;
}
.admin-ui .nav-blur{
  background: rgba(11,15,25,.72);
  border-bottom-color: rgba(255,255,255,.10);
}
.admin-ui .brand-mark{
  display: grid;
  place-items: center;
  color: #0b0f19;
  background: #6ee7ff;
  font-weight: 800;
}
.admin-ui .form-label,
.admin-ui .form-check-label,
.admin-ui .brand-copy{
  color: #f8efdb;
}
.admin-ui .text-secondary{
  color: #c1cbe0!important;
}
.admin-ui .table-dark{
  --bs-table-color: #f8efdb;
  --bs-table-hover-color: #f8efdb;
}
.admin-ui .table-dark th,
.admin-ui .table-dark td{
  color: #f8efdb;
}
.admin-ui .table-dark .text-secondary{
  color: #c1cbe0!important;
}
.admin-ui .content-table-wrap{
  overflow: visible;
}
.admin-ui .content-actions-dropdown .dropdown-menu{
  z-index: 1080;
}
.admin-ui .form-control,
.admin-ui .form-select,
.admin-ui textarea{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #f8efdb;
}
.admin-ui .form-control:focus,
.admin-ui .form-select:focus,
.admin-ui textarea:focus{
  box-shadow: 0 0 0 .25rem rgba(110,231,255,.15);
  border-color: rgba(110,231,255,.40);
  background: rgba(255,255,255,.08);
  color: #f8efdb;
}
.admin-ui .prose{
  color: #f8efdb;
}
.admin-ui .prose pre{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
}
.admin-ui .prose code{
  background: rgba(0,0,0,.28);
}
.admin-ui .prose th,
.admin-ui .prose td{
  border-color: rgba(255,255,255,.12);
}

/* SimpleMDE theme tweak */
.editor-toolbar,
.CodeMirror{
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.CodeMirror,
.CodeMirror-scroll{
  color: #f8efdb !important;
}

@media (max-width: 991.98px){
  .hero-section{
    min-height: 680px;
  }
  .hero-overlay{
    background:
      linear-gradient(90deg, rgba(11,20,16,.94), rgba(11,20,16,.72)),
      linear-gradient(0deg, rgba(11,20,16,.92), rgba(11,20,16,.08));
  }
  .portfolio-grid,
  .value-grid{
    grid-template-columns: 1fr;
  }
  .footer-links{
    justify-content: flex-start;
  }
}

@media (max-width: 575.98px){
  .section-pad{
    padding: 3.5rem 0;
  }
  .hero-section{
    min-height: 660px;
  }
  .hero-content{
    padding-top: 6rem;
    padding-bottom: 3rem;
  }
  .hero-title{
    font-size: clamp(2.8rem, 17vw, 4rem);
  }
  .hero-metrics{
    grid-template-columns: 1fr;
  }
  .process-list article{
    grid-template-columns: 44px 1fr;
  }
  .article-content,
  .contact-form{
    padding: 1.15rem;
  }
  .flash-toast{
    min-width: 0;
    width: calc(100vw - 2rem);
  }
}