:root {
  --bg:#0c0c0d;
  --panel:#161617;
  --gold:#ffc34a;
  --muted:#b4b2ad;
  --line:#30302d;
  --bs-body-color:#f5f3ef}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--bg);
  color:#f5f3ef;
  font:16px/1.65 Arial,Helvetica,sans-serif}
a {
  color:inherit;
  text-decoration:none}
img {
  max-width:100%;
  display:block}
button {
  font:inherit}
h1,h2,h3,h4,h5,p {
  margin:0 0 18px}
h1,h2,h3,h4,h5 {
  line-height:1.15;
  letter-spacing:-.035em}
h1 {
  font-size:clamp(44px,5.6vw,78px);
  font-weight:800;
  margin-top:24px}
h1 em {
  font-style:normal;
  color:var(--gold)}
h2 {
  font-size:clamp(32px,3.5vw,46px)}
h2 span {
  color:var(--gold)}
h3 {
  font-size:24px}
h4 {
  font-size:22px}
h5 {
  font-size:20px}
p {
  color:var(--muted)}
.container {
  max-width:1240px;
  margin:auto;
  padding:0 32px}
.row {
  display:flex;
  flex-wrap:wrap;
  margin:0 -16px;
  row-gap:32px}
.row>[class*=col-] {
  padding:0 16px;
  width:100%}
.d-flex {
  display:flex}
.flex-wrap {
  flex-wrap:wrap}
.align-items-center {
  align-items:center}
.align-items-start {
  align-items:flex-start}
.gap-2 {
  gap:10px}
.gap-3 {
  gap:16px}
.mt-2 {
  margin-top:14px}
.mt-3 {
  margin-top:20px}
.mt-4 {
  margin-top:28px}
.mb-0 {
  margin-bottom:0}
.text-center {
  text-align:center}
.mx-auto {
  margin-left:auto;
  margin-right:auto}
.section-padding {
  padding:100px 0}
.section-kicker,.eyebrow,.mini-label,.follow-label {
  color:var(--gold);
  font-size:11px;
  letter-spacing:2px;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:20px}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px}
.eyebrow span {
  width:7px;
  height:7px;
  background:var(--gold);
  border-radius:50%}
.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:#0c0c0df2;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)}
.navbar>.container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  width:100%}
.navbar {
  padding:18px 0}
.brand-logo {
  width:44px;
  height:44px;
  border-radius:10px}
.brand-name {
  font-size:24px;
  font-weight:800;
  letter-spacing:-1px}
.brand-name span,.footer strong span {
  color:var(--gold)}
.navbar-nav {
  display:flex;
  align-items:center;
  gap:24px;
  list-style:none;
  margin:0;
  padding:0}
.nav-link {
  font-size:13px;
  color:#c7c5bf}
.nav-link:hover {
  color:var(--gold)}
.navbar-toggler {
  display:none;
  color:var(--gold);
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 12px;
  font-size:25px}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 20px;
  border-radius:7px;
  font-size:13px;
  font-weight:700;
  line-height:1.5;
  transition:background .2s,transform .2s;
  border:1px solid transparent}
.btn:hover {
  transform:translateY(-2px)}
.btn-primary,.btn-light {
  background:var(--gold);
  color:#171307}
.btn-primary:hover,.btn-light:hover {
  background:#ffd780}
.btn-outline-dark {
  border-color:#555249;
  color:#eee9df;
  background:transparent}
.btn-outline-dark:hover {
  background:#24221c}
.hero-section {
  padding:76px 0 66px;
  background:radial-gradient(ellipse at 85% 35%,#50300f33,transparent 65%)}
.hero-copy {
  max-width:590px;
  font-size:17px;
  line-height:1.8}
.hero-note {
  font-size:12px;
  color:#96938d}
.follow-label {
  margin-top:34px;
  margin-bottom:12px;
  color:#a4a099}
.social-links {
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.social-links a {
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #39352c;
  border-radius:6px;
  padding:8px 10px;
  font-size:11px;
  color:#d9d5cc;
  background:#151410}
.social-links a>span:first-child {
  font-size:16px;
  color:var(--gold);
  font-weight:bold}
.social-links a:hover {
  border-color:var(--gold);
  background:#2a2113}
.external {
  color:#a29a8d}
.brand-art {
  border:1px solid #4c3820;
  border-radius:14px;
  overflow:hidden;
  background:#100f0c;
  box-shadow:0 20px 80px #0006;
  transform:rotate(1deg)}
.brand-art img {
  width:100%;
  height:auto}
.art-caption {
  padding:30px}
.art-caption span {
  display:block;
  font-size:10px;
  letter-spacing:2px;
  color:var(--gold);
  margin-bottom:16px}
.art-caption strong {
  font-size:28px;
  line-height:1.25;
  letter-spacing:-1px}
.trust-strip {
  border-block:1px solid var(--line);
  padding:26px 0;
  background:#131313;
  font-size:12px}
.trust-items {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-around;
  gap:16px;
  color:#d2c8b4}
.trust-items span:before {
  content:'✦';
  color:var(--gold);
  margin-right:10px}
.lead {
  font-size:20px}
.point {
  display:flex;
  gap:14px}
.point p {
  font-size:14px}
.point i {
  color:var(--gold)}
.services-section {
  background:#111112;
  border-block:1px solid var(--line)}
.section-heading {
  max-width:630px}
.service-card {
  height:100%;
  padding:32px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#171718;
  position:relative}
.service-card p {
  font-size:14px}
.service-card a {
  font-size:13px;
  color:var(--gold)}
.service-icon {
  font-size:25px;
  color:var(--gold);
  margin-bottom:30px}
.service-no {
  position:absolute;
  right:28px;
  top:29px;
  color:#80786b;
  font-size:12px}
.service-card.featured {
  border-color:#72562a;
  background:linear-gradient(140deg,#302414,#171718)}
.process-item {
  display:flex;
  gap:28px;
  border-bottom:1px solid var(--line);
  padding:24px 0}
.process-item:first-child {
  padding-top:0}
.process-item p {
  font-size:14px;
  margin-bottom:0}
.process-number {
  color:var(--gold);
  font-size:14px}
.statement-box {
  padding:55px;
  border:1px solid #604721;
  border-radius:12px;
  background:radial-gradient(at top right,#5b3c19,#191713 65%)}
.statement-mark {
  font-size:70px;
  color:var(--gold);
  height:70px}
.contact-details {
  display:grid;
  gap:15px;
  font-size:14px}
.contact-details a {
  overflow-wrap:anywhere}
.contact-card {
  padding:38px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel)}
.contact-card-top {
  font-size:11px;
  color:var(--gold);
  letter-spacing:2px;
  margin-bottom:30px}
.footer {
  border-top:1px solid var(--line);
  padding:36px 0 28px;
  background:#080808;
  font-size:12px;
  color:#aaa69e}
.footer-logo {
  width:40px;
  height:40px;
  border-radius:8px}
.footer strong {
  font-size:22px;
  color:white}
.footer-social {
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid #242321;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px}
.footer-social p {
  margin:0}
.videos-section {
  border-bottom:1px solid var(--line)}
.video-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px}
.video-heading h2 {
  max-width:600px}
.video-heading>.btn {
  flex-shrink:0}
.channel-card {
  display:flex;
  align-items:center;
  gap:28px;
  padding:32px;
  margin-top:22px;
  border:1px solid #554126;
  border-radius:10px;
  background:linear-gradient(110deg,#251c10,#141414)}
.channel-card p {
  margin:0}
.channel-arrow {
  margin-left:auto;
  color:var(--gold);
  font-size:30px}
.play-mark {
  display:grid;
  place-items:center;
  flex-shrink:0;
  width:74px;
  height:74px;
  background:var(--gold);
  color:#171307;
  border-radius:50%;
  font-size:24px}
.channel-card .section-kicker {
  margin-bottom:12px}
.video-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px}
.video-card {
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--panel)}
.video-card img {
  aspect-ratio:16/9;
  object-fit:cover;
  width:100%}
.video-card h3 {
  padding:20px;
  margin:0;
  font-size:20px}
.video-card p {
  padding:0 20px 20px;
  margin:0;
  font-size:13px;
  color:var(--gold)}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:100;
  background:var(--gold);
  color:black;
  padding:12px}
.skip-link:focus {
  top:12px}
:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:5px}

@media(min-width:768px) {
  .row>.col-md-6 {
  width:50%}
.text-md-end {
  text-align:right}
}

@media(min-width:992px) {
  .row>.col-lg-4 {
  width:33.333%}
.row>.col-lg-5 {
  width:41.666%}
.row>.col-lg-7 {
  width:58.333%}
.row>.col-lg-8 {
  width:66.666%}
}

@media(max-width:1100px) {
  .navbar-nav {
  gap:14px}
.navbar-nav .btn {
  padding:10px}
.brand-name {
  font-size:21px}
}

@media(max-width:991px) {
  .navbar-toggler {
  display:block}
.navbar>.container {
  flex-wrap:wrap}
.navbar-collapse {
  display:none;
  width:100%}
.navbar-collapse.show {
  display:block}
.navbar-nav {
  align-items:stretch;
  flex-direction:column;
  padding:15px 0}
.nav-link {
  display:block;
  padding:8px}
.hero-section {
  padding-top:46px}
.brand-art {
  transform:none;
  max-width:650px;
  margin:12px auto 0}
.video-heading {
  align-items:flex-start;
  flex-direction:column;
  gap:10px}
.footer-social {
  flex-direction:column;
  align-items:flex-start}
.section-padding {
  padding:65px 0}
}

@media(max-width:600px) {
  .container {
  padding:0 20px}
.hero-copy {
  font-size:16px}
.hero-section h1 {
  font-size:48px}
.hero-section .btn {
  width:100%}
.section-padding {
  padding:50px 0}
.statement-box,.contact-card {
  padding:28px}
.channel-card {
  align-items:flex-start;
  padding:22px;
  gap:18px;
  flex-wrap:wrap}
.play-mark {
  width:48px;
  height:48px;
  font-size:18px}
.channel-card>div {
  flex:1;
  min-width:170px}
.channel-arrow {
  display:none}
.channel-card h3 {
  font-size:21px}
.video-grid {
  grid-template-columns:1fr}
.trust-items {
  justify-content:flex-start}
.art-caption {
  padding:22px}
.art-caption strong {
  font-size:25px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
* {
  transition:none!important}
}

[hidden] {
  display:none!important}

/* Readability and interaction refinements */
.social-links {
  gap:12px}

.social-links a {
  min-height:50px;
  padding:12px 17px;
  font-size:14px;
  font-weight:600;
  gap:11px;
  border-radius:9px;
  transition:background .18s,border-color .18s,transform .18s}

.social-links a>span:first-child {
  font-size:22px;
  min-width:23px;
  text-align:center;
  line-height:1}

.social-links a:hover {
  background:#302511;
  border-color:var(--gold);
  transform:translateY(-2px)}

.btn-primary,.btn-light,.btn-primary:hover,.btn-light:hover,.btn-primary:focus-visible,.btn-light:focus-visible {
  color:#000;
  font-weight:800}

.btn {
  min-height:48px;
  font-size:14px;
  gap:9px}

.navbar-nav .btn {
  font-size:13px}

.line-icon {
  display:inline-block;
  flex-shrink:0;
  width:22px;
  height:22px;
  vertical-align:middle}

.point>.line-icon {
  color:var(--gold);
  margin-top:2px}

.service-icon .line-icon {
  width:30px;
  height:30px}

.hero-note {
  display:flex;
  align-items:center;
  gap:8px}

.hero-note .line-icon {
  width:17px;
  height:17px;
  color:var(--gold)}

.contact-details a {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:44px}

.contact-details .line-icon {
  color:var(--gold)}

.service-card {
  transition:border-color .2s,background .2s}

.service-card:hover {
  border-color:#8e6d33}

.service-card a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-weight:600;
  text-underline-offset:5px}

.service-card a:hover {
  text-decoration:underline}

.footer-social {
  flex-wrap:wrap}
.footer-social .social-links {
  justify-content:flex-start}

.channel-card:hover {
  border-color:var(--gold)}

@media(max-width:600px) {
  .social-links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:100%;
  gap:10px}
.social-links a {
  font-size:14px;
  padding:12px;
  min-height:52px}
.social-links a:last-child {
  grid-column:1/-1;
  justify-content:center}
.hero-note {
  align-items:flex-start}
.footer-social {
  gap:18px}
}


/* Larger supporting text and clear yellow-button labels. */
.section-kicker,.eyebrow,.mini-label,.follow-label {
  font-size:13px;
  letter-spacing:1.4px}

.nav-link {
  font-size:15px}

.hero-note,.trust-strip,.footer {
  font-size:14px}

.art-caption span,.contact-card-top {
  font-size:13px;
  letter-spacing:1.4px}

.point p,.service-card p,.process-item p,.contact-details,.video-card p {
  font-size:16px}

.service-card a,.navbar-nav .btn {
  font-size:15px}

.btn,.social-links a {
  font-size:16px}

.btn-primary,.btn-light,.btn-primary:visited,.btn-light:visited,
.btn-primary:hover,.btn-light:hover,.btn-primary:active,.btn-light:active,
.btn-primary:focus,.btn-light:focus,
.btn-primary *,.btn-light * {
  color:#000!important;
  -webkit-text-fill-color:#000!important;
  font-weight:800}

@media(max-width:600px) {
  .social-links a {
  font-size:16px}
.section-kicker,.eyebrow,.follow-label {
  letter-spacing:1px}
}


/* Responsive finishing: content stays legible from 320px to wide desktops. */
.row>[class*=col-] {
  min-width:0}

.navbar-brand {
  flex-shrink:0}

.brand-art img {
  height:auto;
  aspect-ratio:1672/941}

.btn {
  white-space:normal;
  text-align:center;
  max-width:100%}

.video-card {
  min-width:0}

.video-card h3 {
  overflow-wrap:anywhere}

.social-links a {
  white-space:nowrap}

.nav-link.active {
  color:var(--gold)}

@media(min-width:768px) and (max-width:991px) {
  .video-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:992px) and (max-width:1199px) {
  
 .navbar-toggler {
  display:block}
.navbar>.container {
  flex-wrap:wrap}

 .navbar-collapse {
  display:none;
  width:100%}
.navbar-collapse.show {
  display:block}

 .navbar-nav {
  align-items:stretch;
  flex-direction:column;
  padding:15px 0;
  gap:12px}

 .nav-link {
  display:block;
  padding:8px}
.navbar-nav .btn {
  width:100%}

 .hero-section .row>.col-lg-7 {
  width:55%}
.hero-section .row>.col-lg-5 {
  width:45%}

 h1 {
  font-size:60px}
.art-caption strong {
  font-size:24px}

 .video-heading {
  flex-wrap:wrap}

}

@media(max-width:1199px) {
  .navbar-collapse {
  max-height:calc(100dvh - 100px);
  overflow-y:auto}
html {
  scroll-padding-top:96px}
}

@media(min-width:1200px) {
  .navbar-collapse {
  display:block}
}

@media(max-width:767px) {
  .video-grid {
  grid-template-columns:minmax(0,1fr)}
.video-heading {
  width:100%}
.video-heading>.btn {
  flex-shrink:1}
}

@media(max-width:374px) {
  
 .container {
  padding:0 16px}
.hero-section h1 {
  font-size:42px}

 .brand-name {
  font-size:20px}
.navbar>.container {
  gap:12px}

 .social-links a {
  padding:11px 8px;
  gap:7px;
  font-size:15px}

 .eyebrow {
  font-size:12px;
  letter-spacing:.7px}
.contact-card,.statement-box {
  padding:22px}

}

@media(prefers-reduced-motion:reduce) {
  * {
  scroll-behavior:auto!important;
  transition:none!important}
}