
:root {
  --c-primary:#1B3A5C;
  --c-accent:#ED8936;
  --c-bg:oklch(98% 0.008 211.4);
  --c-surface:oklch(96% 0.012 211.4);
  --c-ink:oklch(18% 0.015 211.4);
  --c-ink-soft:oklch(38% 0.012 211.4);
  --c-border:oklch(90% 0.01 211.4);
  --c-primary-soft:oklch(94% 0.02 211.4);
  --round-btn:6px;
  --container:1200px;
  --gap:clamp(2rem, 5vw, 5rem);
}
* {
  box-sizing:border-box;
  margin:0;
  padding:0
}
html {
  scroll-behavior:smooth
}
body {
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  font-weight:400;
  line-height:1.6;
  color:var(--c-ink);
  background:var(--c-bg);
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img {
  max-width:100%;
  height:auto;
  display:block
}
a {
  color:var(--c-primary);
  text-decoration:none
}
a:hover {
  text-decoration:underline
}
.frame {
  max-width:var(--container);
  margin:0 auto;
  padding:0 clamp(1rem,3vw,2rem)
}
h1,h2,h3,h4 {
  font-weight:800;
  line-height:1.15;
  color:var(--c-ink);
  letter-spacing:-0.01em
}
h1 {
  font-size:clamp(2.2rem,5vw,3.8rem)
}
h2 {
  font-size:clamp(1.7rem,3.5vw,2.6rem);
  margin-bottom:1rem
}
h3 {
  font-size:clamp(1.2rem,2vw,1.4rem);
  font-weight:700
}
p {
  margin-bottom:1rem;
  color:var(--c-ink-soft)
}
.lead {
  font-size:1.15rem;
  color:var(--c-ink-soft)
}
/* header — base */
.masthead {
  position:sticky;
  top:0;
  z-index:50;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-border)
}
.page-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0
}
.brand {
  font-weight:800;
  font-size:1.2rem;
  color:var(--c-ink)
}
.nav-desktop {
  display:flex;
  gap:1.8rem;
  align-items:center
}
.nav-desktop a {
  color:var(--c-ink-soft);
  font-weight:500
}
.nav-desktop a:hover {
  color:var(--c-ink);
  text-decoration:none
}
.nav-icon {
  display:none;
  background:none;
  border:0;
  cursor:pointer;
  width:32px;
  height:32px;
  flex-direction:column;
  justify-content:space-around;
  padding:6px
}
.nav-icon span {
  display:block;
  height:2px;
  background:var(--c-ink);
  width:100%
}
.nav-mobile {
  display:none;
  flex-direction:column;
  padding:1rem;
  border-top:1px solid var(--c-border)
}
.nav-mobile a {
  padding:0.6rem 0;
  color:var(--c-ink)
}
.nav-mobile.is-open {
  display:flex
}
@media(max-width:820px) {
  .nav-desktop {
  display:none
}
.nav-icon {
  display:flex
}

}
/* header — centeredLogo variant */
.header-centered .nav-top {
  display:flex;
  justify-content:center;
  padding:1.1rem 0 0.6rem;
  position:relative
}
.header-centered .brand-center {
  font-size:1.4rem
}
.header-centered .nav-top .nav-icon {
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%)
}
.header-centered .nav-below {
  justify-content:center;
  padding:0.4rem 0 1rem;
  gap:2rem
}
@media(max-width:820px) {
  .header-centered .nav-below {
  display:none
}

}
/* header — minimal variant — no extra rules needed, uses base */

/* buttons */
.click-btn {
  display:inline-block;
  padding:0.85rem 1.5rem;
  border-radius:var(--round-btn);
  font-weight:600;
  text-align:center;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, background .15s ease;
  font-size:1rem;
  text-decoration:none
}
.click-btn:hover {
  text-decoration:none;
  transform:translateY(-1px)
}
.btn-sm {
  padding:0.55rem 1rem;
  font-size:0.92rem
}
.main-btn {
  background:var(--c-primary);
  color:#fff
}
.main-btn:hover {
  background:var(--c-ink)
}
.btn-ghost {
  background:transparent;
  color:var(--c-ink);
  border-color:var(--c-border)
}
.btn-ghost:hover {
  background:var(--c-surface)
}
.btn-link {
  color:var(--c-primary);
  font-weight:600
}
/* hero — split (default) */
.hero {
  padding:clamp(3rem,8vw,6rem) 0
}
.hero-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:var(--gap);
  align-items:center
}
.hero-text h1 {
  margin-bottom:1.2rem
}
.hero-text .lead {
  margin-bottom:2rem;
  font-size:1.2rem
}
.hero-ctas {
  display:flex;
  gap:0.8rem;
  flex-wrap:wrap
}
.hero-ctas.center {
  justify-content:center
}
.hero-img img {
  width:100%;
  border-radius:8px;
  aspect-ratio:4/3;
  object-fit:cover
}
@media(max-width:820px) {
  .hero-grid {
  grid-template-columns:1fr
}

}
/* hero — centered variant */
.hero-centered {
  padding:clamp(4rem,10vw,8rem) 0;
  text-align:center
}
.hero-centered h1 {
  max-width:900px;
  margin:0 auto 1.4rem;
  font-size:clamp(2.4rem,6vw,4.4rem)
}
.hero-centered .lead-center {
  max-width:680px;
  margin:0 auto 2.2rem;
  font-size:1.25rem
}
/* hero — stacked variant */
.hero-stacked {
  padding:clamp(3rem,7vw,5rem) 0 0
}
.hero-stacked .hero-text-stacked {
  max-width:820px;
  margin-bottom:3rem
}
.hero-stacked .hero-text-stacked h1 {
  margin-bottom:1.2rem
}
.hero-stacked .hero-text-stacked .lead {
  margin-bottom:2rem;
  font-size:1.2rem
}
.hero-img-wide img {
  width:100%;
  border-radius:10px;
  aspect-ratio:21/9;
  object-fit:cover
}
/* sections */
.area {
  padding:clamp(3rem,7vw,5.5rem) 0
}
.block-title {
  margin-bottom:2.5rem;
  max-width:680px
}
.two-col {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:center
}
.two-col .col-img img {
  border-radius:8px;
  aspect-ratio:4/3;
  object-fit:cover
}
.two-col-reverse .col-img {
  order:1
}
.two-col-reverse .col-text {
  order:2
}
@media(max-width:820px) {
  .two-col {
  grid-template-columns:1fr
}
.two-col-reverse .col-img,.two-col-reverse .col-text {
  order:initial
}

}
/* about — base */
.checklist {
  list-style:none;
  margin-top:1.2rem
}
.checklist li {
  padding:0.5rem 0 0.5rem 1.6rem;
  position:relative;
  color:var(--c-ink)
}
.checklist li::before {
  content:'';
  position:absolute;
  left:0;
  top:0.95rem;
  width:8px;
  height:8px;
  background:var(--c-primary);
  border-radius:50%
}
/* about — fullwidthStatement variant */
.about-statement {
  text-align:left;
  background:var(--c-surface)
}
.about-statement .about-eyebrow {
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:0.85rem;
  color:var(--c-primary);
  font-weight:700;
  margin-bottom:1.5rem
}
.about-statement-text {
  font-size:clamp(1.4rem,2.8vw,2.2rem);
  line-height:1.35;
  color:var(--c-ink);
  font-weight:500;
  max-width:1000px;
  margin-bottom:2rem
}
.about-rest {
  max-width:760px;
  margin-top:1.5rem
}
.checklist-3col {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:0.4rem 2rem;
  margin-top:2rem
}
/* services — alternating (default) */
.solutions-list {
  display:flex;
  flex-direction:column;
  gap:clamp(3rem,5vw,4rem)
}
.service-item {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:center
}
.service-item.right .service-text {
  order:2
}
.service-item.right .service-img {
  order:1
}
.service-num {
  font-size:0.9rem;
  color:var(--c-primary);
  font-weight:700;
  letter-spacing:0.08em;
  margin-bottom:0.6rem
}
.service-img img {
  border-radius:8px;
  aspect-ratio:4/3;
  object-fit:cover
}
@media(max-width:820px) {
  .service-item {
  grid-template-columns:1fr
}
.service-item.right .service-text,.service-item.right .service-img {
  order:initial
}

}
/* services — numberedList variant */
.services-numbered-list {
  list-style:none;
  counter-reset:none;
  display:flex;
  flex-direction:column
}
.services-numbered-list .capability-row {
  display:grid;
  grid-template-columns:90px 1fr auto;
  gap:2rem;
  align-items:center;
  padding:2rem 0;
  border-bottom:1px solid var(--c-border)
}
.services-numbered-list .capability-row:last-child {
  border-bottom:0
}
.service-num-big {
  font-size:clamp(2rem,3vw,2.6rem);
  font-weight:800;
  color:var(--c-primary);
  line-height:1
}
.service-row-text h3 {
  margin-bottom:0.4rem
}
.service-row-text p {
  margin-bottom:0
}
.service-row-cta {
  color:var(--c-primary);
  font-weight:600;
  white-space:nowrap
}
@media(max-width:760px) {
  .services-numbered-list .capability-row {
  grid-template-columns:60px 1fr;
  gap:1rem
}
.service-row-cta {
  grid-column:1 / -1;
  margin-top:0.6rem
}

}
/* services — iconGrid variant */
.services-icongrid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2rem
}
.service-card {
  background:var(--c-surface);
  padding:2rem;
  border-radius:10px;
  border:1px solid var(--c-border)
}
.service-icon {
  font-size:1.8rem;
  color:var(--c-primary);
  margin-bottom:1rem;
  line-height:1
}
.service-card h3 {
  margin-bottom:0.6rem
}
.service-card p {
  margin-bottom:1rem
}
/* stats */
.stats {
  background:var(--c-surface)
}
.stats-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:2rem;
  text-align:center
}
.stat-num {
  font-size:clamp(2.2rem,4vw,3rem);
  font-weight:800;
  color:var(--c-primary);
  line-height:1
}
.data-label {
  margin-top:0.5rem;
  color:var(--c-ink-soft);
  font-size:0.95rem
}
/* portfolio */
.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem
}
.portfolio-item .portfolio-img img {
  border-radius:8px;
  aspect-ratio:4/3;
  object-fit:cover;
  margin-bottom:1rem
}
.portfolio-item h3 {
  margin-bottom:0.4rem
}
/* testimonials */
.testimonials {
  background:var(--c-surface)
}
.testimonials-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem
}
.testimonial {
  background:var(--c-bg);
  padding:1.8rem;
  border-radius:8px;
  border:1px solid var(--c-border)
}
.testimonial p {
  font-size:1.05rem;
  color:var(--c-ink);
  margin-bottom:1rem
}
.testimonial footer {
  display:flex;
  flex-direction:column;
  gap:0.2rem;
  font-size:0.9rem
}
.testimonial footer strong {
  color:var(--c-ink)
}
.testimonial footer span {
  color:var(--c-ink-soft)
}
/* team */
.team-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:2rem
}
.team-photo img {
  border-radius:8px;
  aspect-ratio:1;
  object-fit:cover;
  margin-bottom:1rem
}
.staff-role {
  color:var(--c-primary);
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:0.4rem
}
.team-bio {
  font-size:0.92rem
}
/* posts/blog/news */
.posts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem
}
.story-card {
  background:var(--c-surface);
  border-radius:8px;
  overflow:hidden;
  border:1px solid var(--c-border)
}
.post-img img {
  aspect-ratio:16/10;
  object-fit:cover
}
.entry-body {
  padding:1.4rem
}
.entry-body time {
  font-size:0.85rem;
  color:var(--c-ink-soft);
  display:block;
  margin-bottom:0.4rem
}
/* faq */
.faq-wrap {
  max-width:780px
}
.help-list {
  margin-top:1.5rem
}
.help-item {
  border-bottom:1px solid var(--c-border);
  padding:1rem 0
}
.help-item summary {
  font-weight:600;
  cursor:pointer;
  font-size:1.05rem;
  color:var(--c-ink);
  list-style:none;
  padding-right:2rem;
  position:relative
}
.help-item summary::-webkit-details-marker {
  display:none
}
.help-item summary::after {
  content:'+';
  position:absolute;
  right:0;
  top:0;
  font-size:1.4rem;
  color:var(--c-primary);
  transition:transform .2s
}
.help-item[open] summary::after {
  content:'−'
}
.ask-body {
  padding-top:0.8rem;
  color:var(--c-ink-soft)
}
/* contact */
.contact-list {
  list-style:none;
  margin-top:1.5rem
}
.contact-list li {
  padding:0.7rem 0;
  border-bottom:1px solid var(--c-border);
  display:grid;
  grid-template-columns:100px 1fr;
  gap:1rem;
  align-items:center
}
.contact-list li span:first-child {
  color:var(--c-ink-soft);
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:0.05em
}
.reach-form {
  background:var(--c-surface);
  padding:2rem;
  border-radius:8px;
  display:flex;
  flex-direction:column;
  gap:1rem;
  border:1px solid var(--c-border)
}
.reach-form label {
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  font-size:0.9rem;
  color:var(--c-ink-soft);
  font-weight:500
}
.reach-form input,.reach-form textarea {
  padding:0.75rem;
  border:1px solid var(--c-border);
  border-radius:6px;
  font:inherit;
  background:var(--c-bg);
  color:var(--c-ink)
}
.reach-form input:focus,.reach-form textarea:focus {
  outline:2px solid var(--c-primary);
  outline-offset:1px
}
.form-status {
  font-size:0.9rem;
  color:var(--c-primary)
}
/* footer */
.footer {
  background:var(--c-ink);
  color:#e9eaec;
  padding:clamp(3rem,5vw,4rem) 0 1.5rem;
  margin-top:2rem
}
.footer a {
  color:#cfd2d6
}
.footer a:hover {
  color:#fff;
  text-decoration:none
}
.footer h4 {
  color:#fff;
  font-size:0.95rem;
  margin-bottom:0.9rem;
  letter-spacing:0.02em
}
.footer ul {
  list-style:none
}
.footer ul li {
  padding:0.25rem 0
}
.footer-brand {
  font-size:1.2rem;
  font-weight:800;
  color:#fff;
  margin-bottom:0.6rem
}
.footer-tag {
  color:#a8acb3;
  font-size:0.92rem
}
.footer-grid-3 {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr;
  gap:2.5rem
}
.footer-grid-4 {
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:2rem
}
@media(max-width:760px) {
  .footer-grid-3,.footer-grid-4 {
  grid-template-columns:1fr;
  gap:2rem
}

}
.foot-end {
  margin-top:2.5rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:0.88rem;
  color:#a8acb3;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem
}
.foot-end nav {
  display:flex;
  gap:1.2rem
}
.newsletter {
  display:flex;
  gap:0.5rem;
  margin-top:0.6rem
}
.newsletter input {
  flex:1;
  padding:0.6rem;
  border:1px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.05);
  color:#fff;
  border-radius:6px
}
.newsletter button {
  padding:0.6rem 1rem;
  background:var(--c-primary);
  color:#fff;
  border:0;
  border-radius:6px;
  font-weight:600;
  cursor:pointer
}
.footer-centered .footer-cta {
  text-align:center;
  padding:2rem 0 3rem
}
.footer-centered .footer-cta h2 {
  color:#fff;
  margin-bottom:0.8rem
}
.footer-centered .footer-cta p {
  color:#a8acb3;
  margin-bottom:1.5rem
}
/* fade-in */
.appear {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .6s ease, transform .6s ease
}
.appear.in-view {
  opacity:1;
  transform:none
}
@media (prefers-reduced-motion: reduce) {
  .appear {
  opacity:1;
  transform:none;
  transition:none
}
html {
  scroll-behavior:auto
}

}


/* ══════════════════════════════════════ */
/* ══ GPT POST-PROCESS FIXES ══ */
/* ══════════════════════════════════════ */

html{overflow-x:hidden}
body{overflow-x:hidden;margin:0;padding:0}
a,button{transition:all 0.3s ease}
input,textarea,select,button{font-family:inherit}
input,textarea,select{
  width:100%;
  padding:.75rem;
  border-radius:var(--round-btn);
  box-sizing:border-box;
  border:1px solid var(--c-border);
  background:var(--c-surface);
  color:var(--c-ink);
}
input:focus,textarea:focus,select:focus{outline:2px solid color-mix(in srgb, var(--c-primary) 20%, transparent); outline-offset:2px}

/* Desktop fixes */
@media (min-width:769px){
  .nav-icon{display:none !important}
  .primary-nav{display:flex;gap:1.5rem;align-items:center}
  .hero{
    min-height:70vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
  }
  .hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
  .banner-overlay{position:absolute;inset:0;z-index:1}
  .showcase-text{position:relative;z-index:2;text-align:center;color:#fff}
  .frame{max-width:1200px;margin:0 auto;padding:0 2rem}
  .services-grid,.actors-grid,.stats-grid,.news-grid,.contact-cards{
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  }
  /* Make cards equal height */
  .block-item,.card-item{display:flex;flex-direction:column;height:100%}
  .cards-grid > *{align-self:stretch}
}

/* Mobile / Tablet fixes */
@media (max-width:768px){
  .primary-nav{display:none}
  .primary-nav.active{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;
    background:rgba(0,0,0,0.95);
    z-index:9999;
    justify-content:center;
    align-items:center;
    gap:2rem;
  }
  .primary-nav.active a{color:#fff;font-size:1.5rem}
  .nav-icon{display:flex !important}
  .hdr-inner{flex-wrap:nowrap}
  .showcase-text{padding:0 1rem}
  .showcase-text h1{font-size:clamp(1.6rem,6vw,2.4rem)}
  .hero-cta,.hero-ctas{display:flex;flex-direction:column;gap:.75rem;align-items:center}
  .hero-cta a,.hero-ctas a,.hero-cta button,.hero-ctas button{
    width:80%;
    max-width:280px;
    text-align:center;
  }
  .services-grid,.actors-grid,.stats-grid,.news-grid,.contact-cards{
    grid-template-columns:1fr !important;
  }
  .frame{padding:0 1rem;width:100%;box-sizing:border-box}
  section{padding:3rem 0}
  h2{font-size:clamp(1.3rem,5vw,1.8rem)}
  .footer-inner{grid-template-columns:1fr !important;text-align:center}
  img{max-width:100%;height:auto}
  *{max-width:100vw;overflow-wrap:break-word}
}

/* Small screens */
@media (max-width:480px){
  body{font-size:.95rem}
  .hero{min-height:60vh}
  .showcase-text h1{font-size:1.5rem}
  section{padding:2rem 0}
}

/* Remove AI-style decorative lines/dots/etc */
h1::after,h2::after,h3::after,h4::after,
h1::before,h2::before,h3::before,h4::before,
.block-title::after,.block-title::before,
.part-header::after,.part-header::before,
.heading-line,.title-underline,.title-decoration,
.area-line,.heading-divider,.dots,.dotted-divider,
.heading-dots,.title-dots,
.section-subtitle + .divider,.subtitle + .divider{
  content:none !important;
  display:none !important;
  border:none !important;
  background:none !important;
  height:0 !important;
  width:0 !important;
}

/* Remove empty decorative elements */
hr.decorative,hr.divider,hr.area-line{display:none !important}
span.dot-separator,span.dots,span.decoration{display:none !important}