:root {
  --tu-navy: #082d63;
  --tu-navy-dark: #041d43;
  --tu-blue: #0c4e9b;
  --tu-gold: #d9a514;
  --tu-gold-deep: #bf8705;
  --tu-gold-light: #ffe7a3;
  --tu-gold-soft: #fff5d5;
  --tu-ink: #10213a;
  --tu-muted: #66758a;
  --tu-surface: #f7f8fb;
  --tu-border: #e4e9f1;
}

html { scroll-behavior: smooth; }
body {
  font-family: "Raleway", sans-serif;
  color: var(--tu-ink);
  background: #fff;
}

/* White brand header */
.navbar {
  min-height: 108px;
  background: #fff;
  border-bottom: 1px solid rgba(8,45,99,.07);
  box-shadow: 0 8px 30px rgba(8,45,99,.05);
}
.navbar .container { max-width: 1320px; }
.navbar-brand img { width: 188px; height: auto; }
.nav-link {
  position: relative;
  padding: .85rem 1.05rem !important;
  font-weight: 700;
  color: var(--tu-ink);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 1.05rem;
  right: 1.05rem;
  bottom: .35rem;
  height: 2px;
  transform: scaleX(0);
  transform-origin: center;
  background: var(--tu-gold);
  transition: transform .2s ease;
}
.nav-link:hover,
.nav-link.active { color: var(--tu-gold-deep); }
.nav-link:hover::after,
.nav-link.active::after { transform: scaleX(1); }

.btn-brand {
  background: linear-gradient(135deg, #e8b62b, var(--tu-gold));
  border: 1px solid var(--tu-gold);
  color: var(--tu-navy-dark);
  font-weight: 800;
  border-radius: .8rem;
  padding: .9rem 1.45rem;
  box-shadow: 0 12px 26px rgba(191,135,5,.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn-brand:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #f0c344, #c99209);
  border-color: #c99209;
  color: var(--tu-navy-dark);
  box-shadow: 0 16px 32px rgba(191,135,5,.25);
}
.btn-outline-brand {
  border: 1px solid rgba(4,29,67,.45);
  color: var(--tu-navy-dark);
  font-weight: 800;
  border-radius: .8rem;
  padding: .9rem 1.45rem;
  background: rgba(255,255,255,.12);
}
.btn-outline-brand:hover {
  background: var(--tu-navy-dark);
  border-color: var(--tu-navy-dark);
  color: #fff;
}

/* Gold identity hero */
.hero {
  position: relative;
  padding: 10rem 0 6.5rem;
  color: var(--tu-navy-dark);
  background:
    radial-gradient(circle at 23% 18%, rgba(255,255,255,.58), transparent 22%),
    radial-gradient(circle at 78% 22%, rgba(255,241,171,.48), transparent 26%),
    linear-gradient(120deg, #efbd2e 0%, #f7cf55 48%, #d99b0b 100%);
  overflow: hidden;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
}
.hero::before { width: 560px; height: 560px; left: -350px; top: 90px; }
.hero::after { width: 420px; height: 420px; right: -250px; bottom: -210px; }
.hero .container { position: relative; z-index: 1; max-width: 1320px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(4,29,67,.18);
  background: rgba(4,29,67,.13);
  color: var(--tu-navy-dark);
  padding: .58rem .95rem;
  border-radius: 999px;
  font-size: .9rem;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(94,61,0,.11);
}
.hero h1 {
  max-width: 720px;
  font-size: clamp(3rem, 6vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.055em;
  color: var(--tu-navy-dark);
}
.hero .accent { color: #fff; text-shadow: 0 8px 24px rgba(80,50,0,.12); }
.hero p {
  color: rgba(4,29,67,.83);
  max-width: 680px;
  font-weight: 500;
}
.hero-card {
  position: relative;
  border: 1px solid rgba(4,29,67,.15);
  border-radius: 1.8rem;
  padding: 1.2rem;
  background: rgba(255,255,255,.23);
  box-shadow: 0 34px 70px rgba(74,45,0,.20);
  backdrop-filter: blur(8px);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: 10% -7% -10% 12%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  filter: blur(4px);
}
.hero-card img {
  border-radius: 1.25rem;
  background: rgba(255,255,255,.96);
  padding: 1.5rem;
}

.section-kicker {
  color: var(--tu-gold-deep);
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .8rem;
}
.section-title { font-weight: 800; letter-spacing: -.03em; color: var(--tu-navy-dark); }
.section-copy { color: var(--tu-muted); }

.service-card {
  height: 100%;
  border: 1px solid var(--tu-border);
  border-radius: 1.25rem;
  padding: 1.6rem;
  background: #fff;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 55px rgba(8,45,99,.12);
  border-color: rgba(217,165,20,.5);
}
.icon-box {
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  color: var(--tu-gold-deep);
  background: linear-gradient(145deg, var(--tu-gold-soft), #fff0b5);
}
.icon-box svg { width: 27px; height: 27px; }

.soft-section { background: var(--tu-surface); }
.feature-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.35rem; }
.feature-check {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: rgba(217,165,20,.18);
  color: var(--tu-gold-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.process-card {
  border-left: 3px solid var(--tu-gold);
  background: #fff;
  border-radius: 0 1rem 1rem 0;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 12px 32px rgba(8,45,99,.07);
}
.process-no { color: var(--tu-gold-deep); font-weight: 900; letter-spacing: .08em; }
.metric { padding: 1.25rem 0; }
.metric strong { display: block; font-size: 2rem; color: var(--tu-navy); }
.metric span { color: var(--tu-muted); font-size: .92rem; }

.cta-panel {
  background: linear-gradient(135deg, var(--tu-navy-dark), var(--tu-blue));
  color: #fff;
  border-radius: 1.6rem;
  padding: clamp(2rem, 5vw, 4rem);
  box-shadow: 0 28px 70px rgba(8,45,99,.22);
}
.cta-panel p { color: rgba(255,255,255,.75); }

footer { background: #061a38; color: rgba(255,255,255,.7); }
footer a { color: rgba(255,255,255,.72); text-decoration: none; }
footer a:hover { color: #fff; }
footer .footer-title { color: #fff; font-weight: 800; }
footer .footer-logo { width: 170px; filter: brightness(0) invert(1); }

@media (max-width: 991.98px) {
  .navbar { min-height: 86px; }
  .navbar-collapse { background: #fff; padding: 1rem; margin-top: .8rem; border-radius: 1rem; box-shadow: 0 20px 50px rgba(8,45,99,.12); }
  .hero { padding-top: 8.5rem; text-align: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .hero-card { max-width: 620px; margin: 1rem auto 0; }
}

/* Compact six-column services showcase */
.services-showcase {
  padding: 3.2rem 0 4.2rem;
  background: #fff;
}
.services-showcase .container {
  max-width: 1380px;
}
.services-heading {
  max-width: 760px;
  margin-bottom: 2rem;
}
.services-kicker {
  display: inline-block;
  position: relative;
  margin-bottom: .9rem;
  color: var(--tu-gold-deep);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.services-kicker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -.5rem;
  width: 34px;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--tu-gold);
}
.services-heading h2 {
  margin: 0;
  color: var(--tu-navy-dark);
  font-size: clamp(1.85rem, 3vw, 2.75rem);
  font-weight: 850;
  letter-spacing: -.045em;
}
.services-grid > div {
  display: flex;
}
.service-tile {
  width: 100%;
  min-height: 285px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.75rem 1.1rem 1.2rem;
  text-align: center;
  background: #fff;
  border: 1px solid #e9edf3;
  border-radius: .8rem;
  box-shadow: 0 10px 28px rgba(8,45,99,.035);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(217,165,20,.42);
  box-shadow: 0 18px 42px rgba(8,45,99,.10);
}
.service-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  color: var(--tu-gold-deep);
}
.service-icon svg {
  width: 44px;
  height: 44px;
  fill: currentColor;
}
.service-tile h3 {
  min-height: 2.7rem;
  margin: 0 0 .65rem;
  color: #111827;
  font-size: 1rem;
  line-height: 1.18;
  font-weight: 800;
}
.service-tile p {
  margin: 0;
  color: #667085;
  font-size: .82rem;
  line-height: 1.55;
}
.service-link {
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  margin-top: auto;
  border: 1px solid var(--tu-navy);
  border-radius: 50%;
  color: var(--tu-navy);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.service-link:hover {
  background: var(--tu-navy);
  color: #fff;
  transform: translateX(2px);
}
@media (max-width: 1199.98px) {
  .service-tile { min-height: 270px; }
}
@media (max-width: 575.98px) {
  .services-showcase { padding: 2.7rem 0 3.4rem; }
  .service-tile { min-height: 250px; }
}

/* Final hero visual, CTA and black footer refinements */
.hero-card {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}
.hero-card::before { display: none; }
.hero-card .hero-visual {
  display: block;
  width: 100%;
  border-radius: 0;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 28px 34px rgba(74,45,0,.22));
  mix-blend-mode: multiply;
}

.cta-section {
  padding: 4.5rem 0;
  background: linear-gradient(180deg, #fff 0%, #f7f9fc 100%);
}
.cta-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #082d63 0%, #0c4e9b 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 2rem;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  box-shadow: 0 30px 80px rgba(8,45,99,.22);
}
.cta-panel::before {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -130px;
  top: -190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,182,43,.28), transparent 68%);
}
.cta-panel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: 3px;
  background: linear-gradient(90deg, var(--tu-gold), transparent);
}
.cta-panel .row { position: relative; z-index: 1; }
.cta-panel .section-kicker {
  color: #ffd84f !important;
  letter-spacing: .12em;
}
.cta-panel h2 {
  max-width: 720px;
  color: #fff;
  letter-spacing: -.035em;
}
.cta-panel p {
  max-width: 790px;
  color: rgba(255,255,255,.78);
  line-height: 1.8;
}
.cta-panel .btn-brand {
  min-width: 260px;
  padding: 1.1rem 1.6rem;
  border-radius: 1rem;
  box-shadow: 0 16px 34px rgba(217,165,20,.27);
}

.site-footer {
  position: relative;
  background: #041d43;
  color: rgba(255,255,255,.68);
  border-top: 3px solid var(--tu-gold);
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 18% 0%, rgba(217,165,20,.08), transparent 28%);
}
.site-footer .container { position: relative; z-index: 1; }
.site-footer a {
  color: rgba(255,255,255,.72);
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.site-footer a:hover { color: var(--tu-gold); }
.site-footer .footer-title {
  color: #fff;
  font-weight: 800;
}
.site-footer .footer-logo {
  width: 190px;
  filter: none;
}
.footer-bottom {
  border-top: 1px solid rgba(217,165,20,.42);
  color: rgba(255,255,255,.56);
}

@media (max-width: 991.98px) {
  .hero-card .hero-visual { max-width: 720px; margin: 0 auto; }
  .cta-panel { text-align: center; }
  .cta-panel h2,
  .cta-panel p { margin-left: auto; margin-right: auto; }
  .cta-panel .col-lg-4 { text-align: center !important; }
}

@media (max-width: 575.98px) {
  .cta-section { padding: 3rem 0; }
  .cta-panel { border-radius: 1.35rem; }
  .cta-panel .btn-brand { min-width: 0; width: 100%; }
}


/* Featured work */
.portfolio-section {
  padding: 1.5rem 0 4rem;
  background: #fff;
}
.portfolio-section .container { max-width: 1320px; }
.portfolio-all-link {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  color: var(--tu-navy-dark);
  font-weight: 800;
  text-decoration: none;
}
.portfolio-all-link span,
.portfolio-link span { transition: transform .2s ease; }
.portfolio-all-link:hover,
.portfolio-link:hover { color: var(--tu-gold-deep); }
.portfolio-all-link:hover span,
.portfolio-link:hover span { transform: translateX(4px); }
.portfolio-card {
  overflow: hidden;
  border: 1px solid var(--tu-border);
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: 0 14px 36px rgba(8,45,99,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.portfolio-card:hover {
  transform: translateY(-8px);
  border-color: rgba(217,165,20,.45);
  box-shadow: 0 24px 58px rgba(8,45,99,.13);
}
.portfolio-media {
  min-height: 260px;
  display: grid;
  place-items: center;
  padding: 2rem;
  overflow: hidden;
}
.portfolio-media img {
  width: 100%;
  max-width: 330px;
  max-height: 220px;
  object-fit: contain;
  transition: transform .35s ease;
}
.portfolio-card:hover .portfolio-media img { transform: scale(1.035); }
.portfolio-media-web {
  background: linear-gradient(145deg, #fff6d9 0%, #f5c84f 100%);
}
.portfolio-media-brand {
  background: linear-gradient(145deg, #eef3fa 0%, #dbe5f4 100%);
}
.portfolio-media-campaign {
  background: linear-gradient(145deg, #082d63 0%, #0c4e9b 100%);
}
.portfolio-media-campaign img { filter: drop-shadow(0 12px 24px rgba(0,0,0,.16)); }
.portfolio-content { padding: 1.65rem; }
.portfolio-meta {
  margin-bottom: .65rem;
  color: var(--tu-gold-deep);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.portfolio-content h3 {
  margin-bottom: .8rem;
  color: var(--tu-navy-dark);
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -.025em;
}
.portfolio-content p {
  min-height: 74px;
  margin-bottom: 1.15rem;
  color: var(--tu-muted);
  line-height: 1.7;
}
.portfolio-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--tu-navy-dark);
  font-weight: 800;
  text-decoration: none;
}
@media (max-width: 991.98px) {
  .portfolio-section { padding-top: .5rem; }
  .portfolio-media { min-height: 240px; }
  .portfolio-content p { min-height: 0; }
}

/* Storytelling homepage: why, testimonials and FAQ */
.why-section {
  padding: 2rem 0 4.5rem;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
}
.why-section .container,
.testimonials-section .container,
.home-faq .container { max-width: 1320px; }
.why-visual-wrap {
  position: relative;
  padding: 2rem;
  border-radius: 2rem;
  background: linear-gradient(145deg, var(--tu-gold-soft), #fff);
  overflow: hidden;
}
.why-visual-wrap::after {
  content: "";
  position: absolute;
  width: 210px;
  height: 210px;
  right: -80px;
  bottom: -90px;
  border-radius: 50%;
  background: rgba(217,165,20,.18);
}
.why-visual { position: relative; z-index: 1; }
.why-card {
  position: relative;
  padding: 1.65rem;
  border: 1px solid var(--tu-border);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 14px 36px rgba(8,45,99,.055);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.why-card:hover {
  transform: translateY(-6px);
  border-color: rgba(217,165,20,.48);
  box-shadow: 0 24px 55px rgba(8,45,99,.11);
}
.why-number {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--tu-gold-deep);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.why-card h3 { color: var(--tu-navy-dark); font-size: 1.18rem; font-weight: 850; }
.why-card p { margin: 0; color: var(--tu-muted); line-height: 1.7; }
.stats-strip {
  overflow: hidden;
  border: 1px solid rgba(217,165,20,.28);
  border-radius: 1.35rem;
  background: var(--tu-navy-dark);
  box-shadow: 0 22px 50px rgba(8,45,99,.15);
}
.stat-item { padding: 1.7rem 1rem; border-right: 1px solid rgba(255,255,255,.12); }
.stat-item:last-child { border-right: 0; }
.stat-item strong { display: block; color: var(--tu-gold); font-size: 1.9rem; }
.stat-item span { color: rgba(255,255,255,.72); font-size: .86rem; }
.testimonials-section { padding: 2rem 0 4.5rem; background: #f7f9fc; }
.testimonial-note { color: var(--tu-muted); font-size: .88rem; }
.testimonial-card {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--tu-border);
  border-radius: 1.35rem;
  background: #fff;
  box-shadow: 0 15px 38px rgba(8,45,99,.055);
}
.quote-mark { color: var(--tu-gold); font-family: Georgia, serif; font-size: 4rem; line-height: .7; }
.testimonial-card > p { color: var(--tu-ink); font-size: 1.03rem; line-height: 1.8; }
.testimonial-person { padding-top: 1rem; border-top: 1px solid var(--tu-border); }
.testimonial-person strong { display: block; color: var(--tu-navy-dark); }
.testimonial-person span { color: var(--tu-muted); font-size: .86rem; }
.home-faq { padding: 2rem 0 4rem; background: #fff; }
.home-faq .accordion-item { border: 0; border-bottom: 1px solid var(--tu-border); }
.home-faq .accordion-button {
  padding: 1.35rem 0;
  color: var(--tu-navy-dark);
  background: transparent;
  font-weight: 800;
  box-shadow: none;
}
.home-faq .accordion-button:not(.collapsed) { color: var(--tu-gold-deep); }
.home-faq .accordion-button::after { filter: none; }
.home-faq .accordion-body { padding: 0 0 1.35rem; color: var(--tu-muted); line-height: 1.75; }
@media (max-width: 991.98px) {
  .stat-item:nth-child(2) { border-right: 0; }
  .stat-item:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 575.98px) {
  .why-section, .testimonials-section, .home-faq { padding-top: 1rem; padding-bottom: 3rem; }
  .stat-item { padding: 1.35rem .6rem; }
  .stat-item strong { font-size: 1.45rem; }
  .stat-item span { font-size: .74rem; }
}

/* Services page */
.services-page-hero {
  position: relative;
  padding: 10.5rem 0 6.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.62), transparent 24%),
    radial-gradient(circle at 90% 75%, rgba(255,245,194,.55), transparent 28%),
    linear-gradient(120deg, #efbd2e 0%, #f7cf55 48%, #d99b0b 100%);
}
.services-page-hero::before {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -210px;
  top: -190px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
}
.services-page-hero .container { position: relative; z-index: 1; max-width: 1320px; }
.services-page-badge {
  display: inline-flex;
  margin-bottom: 1.3rem;
  padding: .58rem .95rem;
  color: var(--tu-navy-dark);
  background: rgba(4,29,67,.11);
  border: 1px solid rgba(4,29,67,.16);
  border-radius: 999px;
  font-size: .84rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.services-page-hero h1 {
  max-width: 800px;
  margin: 0;
  color: var(--tu-navy-dark);
  font-size: clamp(3rem, 6vw, 5.35rem);
  line-height: .99;
  letter-spacing: -.055em;
  font-weight: 850;
}
.services-page-hero h1 span { color: #fff; text-shadow: 0 9px 28px rgba(93,58,0,.14); }
.services-page-hero p {
  max-width: 700px;
  margin-top: 1.5rem;
  color: rgba(4,29,67,.82);
  font-size: 1.08rem;
  line-height: 1.8;
}
.services-hero-visual {
  position: relative;
  min-height: 420px;
  padding: 2rem;
}
.visual-window {
  position: absolute;
  inset: 2.5rem 1rem 2rem 2rem;
  padding: 1.35rem;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(4,29,67,.12);
  border-radius: 1.8rem;
  box-shadow: 0 32px 80px rgba(74,45,0,.22);
  transform: rotate(-4deg);
}
.visual-window-bar { display: flex; gap: .45rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tu-border); }
.visual-window-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--tu-gold); }
.visual-chart { height: 180px; display: flex; align-items: flex-end; gap: .7rem; padding: 2rem 1rem 1rem; }
.visual-chart i { flex: 1; border-radius: .55rem .55rem .2rem .2rem; background: linear-gradient(180deg, var(--tu-gold), var(--tu-gold-deep)); }
.visual-chart i:nth-child(1){height:36%}.visual-chart i:nth-child(2){height:55%}.visual-chart i:nth-child(3){height:44%}.visual-chart i:nth-child(4){height:74%}.visual-chart i:nth-child(5){height:92%}
.visual-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .65rem; }
.visual-grid b { height: 48px; border-radius: .65rem; background: var(--tu-surface); }
.visual-float {
  position: absolute;
  padding: .72rem 1rem;
  color: #fff;
  background: var(--tu-navy-dark);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: .8rem;
  box-shadow: 0 14px 30px rgba(4,29,67,.2);
  font-size: .82rem;
  font-weight: 850;
}
.visual-float-a { left: 0; top: 2.2rem; }
.visual-float-b { right: 0; top: 8rem; }
.visual-float-c { left: 1rem; bottom: 2.4rem; background: #fff; color: var(--tu-navy-dark); }
.services-intro .container, .service-detail-list .container, .services-process .container, .services-faq .container { max-width: 1240px; }
.service-detail-row { padding: 5.8rem 0; border-top: 1px solid var(--tu-border); }
.service-detail-row:first-child { border-top: 0; }
.service-detail-row h2 { margin: .4rem 0 1rem; color: var(--tu-navy-dark); font-size: clamp(2rem,4vw,3.2rem); font-weight: 850; letter-spacing: -.04em; }
.service-detail-row p { max-width: 600px; color: var(--tu-muted); font-size: 1.04rem; line-height: 1.8; }
.service-number { color: var(--tu-gold-deep); font-size: .8rem; font-weight: 950; letter-spacing: .16em; }
.service-feature-list { display: grid; gap: .8rem; margin: 1.45rem 0 1.65rem; padding: 0; list-style: none; }
.service-feature-list li { position: relative; padding-left: 2rem; color: var(--tu-ink); font-weight: 650; }
.service-feature-list li::before { content: "✓"; position: absolute; left: 0; top: -.12rem; width: 1.35rem; height: 1.35rem; display: grid; place-items: center; color: var(--tu-navy-dark); background: var(--tu-gold-soft); border-radius: 50%; font-size: .78rem; font-weight: 950; }
.service-link { display: inline-flex; align-items: center; gap: .65rem; color: var(--tu-navy); text-decoration: none; font-weight: 850; }
.service-link span { color: var(--tu-gold-deep); font-size: 1.35rem; transition: transform .2s ease; }
.service-link:hover { color: var(--tu-gold-deep); }
.service-link:hover span { transform: translateX(5px); }
.service-visual {
  position: relative;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(8,45,99,.09);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 80% 12%, rgba(255,255,255,.9), transparent 22%),
    linear-gradient(145deg, #fff6dc, #f2bd31);
  box-shadow: 0 30px 70px rgba(8,45,99,.12);
}
.visual-icon { position: absolute; left: 1.5rem; top: 1.5rem; z-index: 3; width: 52px; height: 52px; display: grid; place-items: center; color: #fff; background: var(--tu-navy-dark); border-radius: 1rem; font-weight: 900; }
.campaign-card { position: absolute; left: 13%; right: 12%; top: 22%; padding: 1.6rem; background: #fff; border-radius: 1.4rem; box-shadow: 0 24px 55px rgba(8,45,99,.18); transform: rotate(-3deg); }
.campaign-card span { display:block;color:var(--tu-muted);font-weight:700}.campaign-card strong{display:block;margin:.35rem 0 1.25rem;color:var(--tu-navy-dark);font-size:3rem}.campaign-card div{height:115px;display:flex;align-items:flex-end;gap:.65rem}.campaign-card i{flex:1;border-radius:.45rem .45rem .15rem .15rem;background:var(--tu-gold)}.campaign-card i:nth-child(1){height:35%}.campaign-card i:nth-child(2){height:50%}.campaign-card i:nth-child(3){height:42%}.campaign-card i:nth-child(4){height:78%}.campaign-card i:nth-child(5){height:96%}
.campaign-badge,.brand-tag,.business-label { position:absolute;right:7%;bottom:8%;padding:.8rem 1rem;color:#fff;background:var(--tu-navy-dark);border-radius:.8rem;font-weight:850;box-shadow:0 15px 35px rgba(4,29,67,.2) }
.social-phone { position:absolute;left:31%;top:11%;width:38%;height:76%;padding:1rem;background:#fff;border:8px solid var(--tu-navy-dark);border-radius:2.2rem;box-shadow:0 25px 55px rgba(8,45,99,.22);transform:rotate(4deg) }.social-post{height:57%;border-radius:1rem;background:linear-gradient(145deg,var(--tu-gold-soft),var(--tu-gold))}.social-lines{display:grid;gap:.55rem;margin-top:1rem}.social-lines i{height:9px;border-radius:999px;background:#e7ebf1}.social-lines i:nth-child(2){width:76%}.social-lines i:nth-child(3){width:54%}.social-heart,.social-comment{position:absolute;padding:.7rem .95rem;background:#fff;border-radius:.8rem;box-shadow:0 14px 30px rgba(8,45,99,.15);font-weight:850}.social-heart{left:8%;bottom:20%;color:#bd7400}.social-comment{right:5%;top:24%;color:var(--tu-navy)}
.brand-board { position:absolute;inset:13% 10% 12%;display:grid;grid-template-columns:1.2fr 1fr;grid-template-rows:1fr 1fr;gap:1rem;padding:1.4rem;background:#fff;border-radius:1.5rem;box-shadow:0 24px 55px rgba(8,45,99,.18);transform:rotate(-2deg) }.brand-logo-shape{grid-row:1/3;display:grid;place-items:center;color:#fff;background:var(--tu-navy-dark);border-radius:1.2rem;font-size:6rem;font-weight:900}.brand-colors{display:flex;gap:.6rem;align-items:center;justify-content:center}.brand-colors i{width:42px;height:42px;border-radius:50%;background:var(--tu-gold)}.brand-colors i:nth-child(2){background:var(--tu-navy)}.brand-colors i:nth-child(3){background:#f1f2f5}.brand-type{display:grid;place-items:center;color:var(--tu-navy-dark);background:var(--tu-surface);border-radius:1rem;font-size:2.8rem;font-weight:900}
.web-browser{position:absolute;left:8%;right:17%;top:16%;bottom:15%;padding:1rem;background:#fff;border-radius:1.3rem;box-shadow:0 24px 55px rgba(8,45,99,.18);transform:rotate(-2deg)}.browser-bar{height:18px;border-radius:999px;background:#eef1f5}.browser-hero{height:45%;margin-top:1rem;border-radius:.9rem;background:linear-gradient(125deg,var(--tu-navy-dark),var(--tu-blue))}.browser-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-top:.8rem}.browser-cards i{height:55px;border-radius:.65rem;background:var(--tu-gold-soft)}.web-mobile{position:absolute;right:6%;bottom:7%;width:25%;height:55%;padding:.7rem;background:#fff;border:7px solid var(--tu-navy-dark);border-radius:1.6rem;box-shadow:0 18px 40px rgba(8,45,99,.2);transform:rotate(5deg)}.web-mobile div{height:53%;border-radius:.7rem;background:var(--tu-gold)}.web-mobile i{display:block;height:8px;margin-top:.65rem;border-radius:999px;background:#e5e9ef}.web-mobile i:last-child{width:65%}
.server-stack{position:absolute;left:14%;top:21%;width:58%;display:grid;gap:1rem}.server-stack i{height:72px;border-radius:1rem;background:var(--tu-navy-dark);box-shadow:0 14px 30px rgba(4,29,67,.16)}.server-stack i::before{content:"";display:block;width:46%;height:10px;margin:1.9rem 0 0 1.5rem;border-radius:999px;background:var(--tu-gold)}.uptime-ring{position:absolute;right:6%;top:17%;width:145px;height:145px;display:grid;place-content:center;text-align:center;background:#fff;border:13px solid var(--tu-gold);border-radius:50%;box-shadow:0 18px 38px rgba(8,45,99,.16)}.uptime-ring strong{color:var(--tu-navy-dark);font-size:1.8rem}.uptime-ring span{color:var(--tu-muted);font-size:.8rem;font-weight:800}.shield-mark{position:absolute;right:15%;bottom:12%;width:70px;height:70px;display:grid;place-items:center;color:#fff;background:var(--tu-navy);border-radius:1.3rem 1.3rem 2.2rem 2.2rem;font-size:2rem;font-weight:900}
.business-map{position:absolute;inset:13% 10% 15%;background:#fff;border-radius:1.6rem;box-shadow:0 24px 55px rgba(8,45,99,.18)}.business-map::before,.business-map::after{content:"";position:absolute;left:14%;right:14%;top:50%;height:3px;background:#e5e9ef;transform:rotate(-16deg)}.business-map::after{transform:rotate(21deg)}.business-map span{position:absolute;z-index:2;width:34px;height:34px;border:8px solid var(--tu-navy);background:var(--tu-gold);border-radius:50%}.business-map span:nth-child(1){left:12%;top:24%}.business-map span:nth-child(2){left:44%;top:54%}.business-map span:nth-child(3){right:11%;top:20%}.business-map span:nth-child(4){right:18%;bottom:14%}.business-map i{position:absolute;z-index:1;height:5px;background:var(--tu-gold);border-radius:999px;transform-origin:left center}.business-map i:nth-of-type(1){left:18%;top:31%;width:39%;transform:rotate(30deg)}.business-map i:nth-of-type(2){left:48%;top:57%;width:43%;transform:rotate(-32deg)}.business-map i:nth-of-type(3){left:49%;top:61%;width:35%;transform:rotate(21deg)}.business-arrow{position:absolute;right:8%;top:7%;color:var(--tu-navy-dark);font-size:5rem;font-weight:900}
.services-process { background: var(--tu-surface); }
.services-process-heading { max-width: 720px; }
.services-process-card { height:100%;padding:1.7rem;background:#fff;border:1px solid var(--tu-border);border-radius:1.25rem;box-shadow:0 15px 38px rgba(8,45,99,.06) }.services-process-card span{display:inline-grid;width:45px;height:45px;place-items:center;color:var(--tu-navy-dark);background:var(--tu-gold-soft);border-radius:.8rem;font-weight:900}.services-process-card h3{margin:1.3rem 0 .7rem;color:var(--tu-navy-dark);font-size:1.25rem;font-weight:850}.services-process-card p{margin:0;color:var(--tu-muted);line-height:1.7}
.services-accordion .accordion-item { margin-bottom: .85rem; overflow: hidden; border: 1px solid var(--tu-border); border-radius: 1rem; }
.services-accordion .accordion-button { padding: 1.2rem 1.35rem; color: var(--tu-navy-dark); background: #fff; box-shadow: none; font-weight: 800; }
.services-accordion .accordion-button:not(.collapsed) { color: var(--tu-navy-dark); background: var(--tu-gold-soft); }
.services-accordion .accordion-button:focus { box-shadow: none; }
.services-accordion .accordion-body { color: var(--tu-muted); line-height: 1.75; }
.services-final-cta p { max-width: 700px; }
@media (max-width: 991.98px) {
  .services-page-hero { padding-top: 8.5rem; text-align: center; }
  .services-page-hero p { margin-left:auto;margin-right:auto }
  .services-page-hero .d-flex { justify-content:center }
  .services-hero-visual { max-width:620px;min-height:370px;margin:0 auto }
  .service-detail-row { padding: 4rem 0; }
  .service-visual { min-height: 390px; }
}
@media (max-width: 575.98px) {
  .services-page-hero h1 { font-size: 2.75rem; }
  .services-hero-visual { min-height: 310px; padding: 0; }
  .visual-window { inset: 1.5rem .6rem 1rem; }
  .visual-float-b { right: .25rem; }
  .service-visual { min-height: 320px; border-radius: 1.4rem; }
  .campaign-card { left: 8%; right: 8%; top: 22%; }
  .social-phone { left: 28%; width: 46%; }
  .uptime-ring { width: 112px; height: 112px; border-width: 10px; }
  .uptime-ring strong { font-size: 1.35rem; }
}


/* Services page image patch v2 */
body[data-page="services"] main { overflow: hidden; }
.services-page-hero { padding-top: 11rem; }
.services-hero-image-wrap { position: relative; display: flex; align-items: center; justify-content: center; min-height: 430px; }
.services-hero-image { display: block; width: 100%; max-width: 660px; height: auto; border-radius: 2rem; box-shadow: 0 32px 80px rgba(74,45,0,.22); }
.service-image-card { display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; box-shadow: none; }
.service-image-card img { display: block; width: 100%; height: auto; border-radius: 2rem; box-shadow: 0 30px 70px rgba(8,45,99,.12); }
@media (max-width: 991.98px) {
  .services-page-hero { padding-top: 10rem; }
  .services-hero-image-wrap { min-height: auto; margin-top: 1rem; }
  .services-hero-image { max-width: 620px; }
  .service-image-card { min-height: auto; }
}
@media (max-width: 575.98px) {
  .services-page-hero { padding-top: 8.75rem; }
  .services-hero-image, .service-image-card img { border-radius: 1.25rem; }
}


/* Service detail CTA button fix */
.service-detail-row .service-link {
  width: auto;
  height: auto;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-top: .75rem;
  padding: .85rem 1.25rem;
  border: 1px solid var(--tu-navy);
  border-radius: .85rem;
  color: var(--tu-navy-dark);
  background: #fff;
  font-size: .95rem;
  line-height: 1.2;
  white-space: normal;
  text-align: left;
  box-shadow: 0 10px 24px rgba(8,45,99,.07);
}
.service-detail-row .service-link span {
  flex: 0 0 auto;
  color: var(--tu-gold-deep);
}
.service-detail-row .service-link:hover {
  color: var(--tu-navy-dark);
  background: var(--tu-gold);
  border-color: var(--tu-gold);
  transform: translateY(-2px);
}
.service-detail-row .service-link:hover span {
  color: var(--tu-navy-dark);
  transform: translateX(4px);
}
@media (max-width: 575.98px) {
  .service-detail-row .service-link { width: 100%; }
}

/* Our Work page */
.work-hero {
  position: relative;
  padding: 11rem 0 6.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.34), transparent 22%),
    linear-gradient(120deg, #efbd2e 0%, #f7cf55 50%, #d99b0b 100%);
}
.work-hero::after {
  content: "";
  position: absolute;
  right: -130px;
  bottom: -240px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 50%;
}
.work-hero .container { position: relative; z-index: 1; max-width: 1240px; }
.work-badge {
  display: inline-flex;
  margin-bottom: 1.2rem;
  padding: .58rem .95rem;
  color: var(--tu-navy-dark);
  background: rgba(4,29,67,.1);
  border: 1px solid rgba(4,29,67,.15);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.work-hero h1 {
  max-width: 880px;
  margin: 0;
  color: var(--tu-navy-dark);
  font-size: clamp(3rem, 6vw, 5.2rem);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 850;
}
.work-hero h1 span { color: #fff; }
.work-hero p { margin: 0; color: rgba(4,29,67,.82); font-size: 1.08rem; line-height: 1.8; }
.work-intro .container, .work-grid .container, .work-value .container { max-width: 1240px; }
.project-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--tu-border);
  border-radius: 1.5rem;
  box-shadow: 0 18px 45px rgba(8,45,99,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.project-card:hover { transform: translateY(-6px); box-shadow: 0 28px 60px rgba(8,45,99,.14); }
.project-media { position: relative; display: block; overflow: hidden; background: var(--tu-surface); }
.project-media img { display: block; width: 100%; aspect-ratio: 12/7.6; object-fit: cover; transition: transform .45s ease; }
.project-card:hover .project-media img { transform: scale(1.025); }
.project-credit {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: .55rem .85rem;
  color: #fff;
  background: rgba(4,29,67,.92);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .06em;
}
.project-body { padding: 1.65rem; }
.project-meta { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; color: var(--tu-gold-deep); font-size: .76rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.project-body h2 { margin: 0 0 .8rem; color: var(--tu-navy-dark); font-size: 2rem; font-weight: 850; letter-spacing: -.035em; }
.project-body p { margin: 0; color: var(--tu-muted); line-height: 1.75; }
.project-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.35rem 0; }
.project-tags span { padding: .48rem .72rem; color: var(--tu-navy-dark); background: var(--tu-gold-soft); border-radius: 999px; font-size: .75rem; font-weight: 850; }
.project-link { display: inline-flex; align-items: center; gap: .55rem; color: var(--tu-navy-dark); text-decoration: none; font-weight: 900; }
.project-link span { color: var(--tu-gold-deep); font-size: 1.15rem; transition: transform .2s ease; }
.project-link:hover { color: var(--tu-gold-deep); }
.project-link:hover span { transform: translate(3px,-3px); }
.work-value-panel { padding: 3.5rem; color: #fff; background: var(--tu-navy-dark); border-radius: 1.8rem; box-shadow: 0 25px 60px rgba(4,29,67,.18); }
.work-value-panel > .row > div:first-child > span { color: var(--tu-gold); font-size: .8rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.work-value-panel h2 { max-width: 750px; margin: .65rem 0 1rem; font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 850; letter-spacing: -.04em; }
.work-value-panel p { max-width: 720px; margin: 0; color: rgba(255,255,255,.75); line-height: 1.75; }
@media (max-width: 991.98px) {
  .work-hero { padding-top: 9.5rem; }
  .work-hero p { max-width: 700px; }
  .work-value-panel { padding: 2.3rem; }
}
@media (max-width: 575.98px) {
  .work-hero { padding-top: 8.5rem; padding-bottom: 4.5rem; }
  .work-hero h1 { font-size: 2.75rem; }
  .project-body { padding: 1.3rem; }
  .project-meta { flex-direction: column; gap: .35rem; }
  .project-body h2 { font-size: 1.65rem; }
  .work-value-panel { padding: 1.7rem; border-radius: 1.3rem; }
}
/* Contact page FAQ */
.contact-faq {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
}

.contact-faq .underline::after {
  background: var(--tu-gold);
}

.contact-accordion .accordion-item {
  margin-bottom: .9rem;
  overflow: hidden;
  border: 1px solid var(--tu-border);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 10px 28px rgba(8,45,99,.045);
}

.contact-accordion .accordion-button {
  padding: 1.25rem 1.4rem;
  color: var(--tu-navy-dark);
  background: #fff;
  font-weight: 800;
  box-shadow: none;
}

.contact-accordion .accordion-button:not(.collapsed) {
  color: var(--tu-navy-dark);
  background: var(--tu-gold-soft);
}

.contact-accordion .accordion-button:focus {
  border-color: transparent;
  box-shadow: none;
}

.contact-accordion .accordion-button::after {
  filter: none;
}

.contact-accordion .accordion-body {
  padding: 1.25rem 1.4rem 1.4rem;
  color: var(--tu-muted);
  line-height: 1.75;