@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--bg:#101010;--panel:#191919;--line:#333;--ink:#f5f0e9;--muted:#b5ada3;--gold:#c9aa77}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer}.site-header{height:86px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff1a;position:relative;z-index:2}.brand{font-size:17px;letter-spacing:.24em;font-weight:700}.brand span{color:var(--gold)}nav{display:flex;align-items:center;gap:34px;font-size:13px}nav a{color:#d4cec6}nav a:hover{color:white}.nav-contact{border:1px solid #766a58;padding:13px 18px;border-radius:2px}.hero{min-height:740px;min-height:calc(100svh - 86px);padding:100px 9% 45px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.hero-orbit{position:absolute;width:640px;height:640px;border:1px solid #c9aa772b;border-radius:50%;right:-65px;top:8%;pointer-events:none}.hero-orbit:before,.hero-orbit:after{content:'';position:absolute;border:1px solid #c9aa771f;border-radius:50%;inset:55px}.hero-orbit:after{inset:125px}.eyebrow,.kicker{font-size:11px;letter-spacing:.25em;color:var(--gold);font-weight:700}.dot{display:inline-block;background:var(--gold);width:7px;height:7px;border-radius:50%;margin-right:9px}.hero h1{font-size:clamp(70px,10vw,160px);line-height:.97;letter-spacing:-.075em;margin:40px 0 28px;max-width:1100px;font-weight:500;position:relative}.hero h1 em,h2 em{font-family:'Playfair Display',Georgia,serif;font-weight:500;color:var(--gold);letter-spacing:-.055em}.hero>p{color:var(--muted);max-width:510px;font-size:17px;line-height:1.8;position:relative}.actions{display:flex;gap:14px;margin-top:30px;position:relative}.btn{display:inline-flex;gap:24px;align-items:center;justify-content:space-between;padding:18px 24px;font-size:13px;font-weight:700;min-height:55px}.primary{background:var(--gold);color:#17130f}.outline{border:1px solid #716b62}.hero-bottom{position:absolute;bottom:30px;left:9%;right:9%;display:flex;justify-content:space-between;color:#8e8880;font-size:10px;letter-spacing:.18em}.section{padding:115px 9%;border-top:1px solid #ffffff1c}.section-top{display:flex;justify-content:space-between;align-items:end;gap:30px}.section-top p{color:var(--muted);font-size:14px}.section h2{font-size:clamp(46px,6.5vw,95px);font-weight:500;letter-spacing:-.065em;line-height:1.05;margin:23px 0 50px}.filters{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 34px}.filters button{background:transparent;color:var(--muted);border:1px solid #4b4843;padding:11px 18px;border-radius:30px;font-size:12px}.filters button.active,.filters button:hover{color:#15110b;background:var(--gold);border-color:var(--gold)}.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.project{background:var(--panel);border:1px solid #ffffff17;overflow:hidden}.project-media{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;background:#242424}.project video{object-fit:contain;background:#050505}.project-details{padding:24px}.project-details small{font-size:11px;letter-spacing:.15em;color:var(--gold);text-transform:uppercase}.project-details h3{font-size:26px;font-weight:500;margin:10px 0}.project-details p{color:var(--muted);line-height:1.6;font-size:14px;margin:0}.empty{grid-column:1/-1;padding:90px 20px;text-align:center;border:1px dashed #544b3d}.empty-symbol{font-size:42px;color:var(--gold)}.empty h3{font-size:25px;font-weight:500}.empty p{color:var(--muted)}.services{background:#161616}.service-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#3b3732;border:1px solid #3b3732}.service-grid article{background:#161616;padding:45px}.service-grid span{color:var(--gold);font-size:12px}.service-grid h3{font-size:27px;font-weight:500;margin:24px 0 12px}.service-grid p,.about p,.contact p{color:var(--muted);line-height:1.85;max-width:650px}.about{padding-bottom:150px}.about p{font-size:19px}.contact{background:#201d19}.contact .btn{margin:20px 0}.contact small{display:block;color:#afa79b;font-size:12px}footer{padding:35px 9%;display:flex;gap:25px;justify-content:space-between;font-size:10px;letter-spacing:.12em;color:var(--muted)}@media(max-width:700px){.site-header{height:70px;padding:0 6%}.brand{font-size:13px;letter-spacing:.15em}nav{gap:12px}nav>a:not(.nav-contact){display:none}.nav-contact{padding:10px;font-size:11px}.hero{min-height:690px;padding:100px 7% 100px}.hero-orbit{width:400px;height:400px;right:-220px;top:130px}.hero h1{font-size:clamp(57px,13vw,95px);margin:34px 0 20px}.hero>p{font-size:15px}.actions{flex-direction:column}.btn{width:100%}.hero-bottom{left:7%;right:7%;font-size:8px}.section{padding:75px 7%}.section-top{display:block}.section h2{margin-bottom:35px}.portfolio-grid,.service-grid{grid-template-columns:1fr}.service-grid article{padding:30px}.about p{font-size:16px}footer{padding:25px 7%;flex-wrap:wrap}}

/* TWILIGHT AUTO MEDIA RATIO START */

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}

.project {
    min-width: 0;
    overflow: hidden;
}

.project-media {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    background: #101010;
}

.project video {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
}

@media (max-width: 700px) {
    .portfolio-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* TWILIGHT AUTO MEDIA RATIO END */

/* TWILIGHT BRANDING V1 */

:root {
  --bg: #11101b;
  --panel: #1b1723;
  --line: #443449;
  --ink: #f5e4ca;
  --muted: #c0b2bd;
  --gold: #d5a365;
}

body {
  background: var(--bg);
  color: var(--ink);
}

.site-header {
  background: rgba(17, 16, 27, .96);
  border-bottom: 1px solid rgba(213, 163, 101, .22);
}

.brand {
  color: #f5e4ca;
}

.brand span {
  color: #d5a365;
}

.hero {
  background:
    radial-gradient(ellipse at 85% 25%,
      rgba(117, 46, 102, .24), transparent 55%),
    radial-gradient(ellipse at 10% 90%,
      rgba(185, 80, 72, .12), transparent 55%),
    #11101b;
}

.hero-orbit,
.hero-orbit::before,
.hero-orbit::after {
  border-color: rgba(213, 163, 101, .18);
}

.hero h1 em,
.section h2 em {
  color: #d5a365;
}

.primary {
  background: linear-gradient(135deg, #f1cf9a, #c58a47);
  color: #17111a;
}

.project {
  background: #1b1723;
  border-color: rgba(213, 163, 101, .15);
}

.project-media {
  background: #100d16;
}

.services {
  background: #17131e;
}

.contact {
  background: linear-gradient(135deg, #241829, #17111b);
}

.twilight-brand-showcase {
  padding: 65px 9%;
  background: #100d16;
  border-top: 1px solid rgba(213, 163, 101, .18);
  border-bottom: 1px solid rgba(213, 163, 101, .18);
}

.twilight-brand-showcase img {
  display: block;
  width: 100%;
  max-width: 1100px;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
}

@media (max-width: 700px) {
  .twilight-brand-showcase {
    padding: 25px 4%;
  }
}

/* TWILIGHT INTEGRATED HERO V1 */

.hero {
  position: relative;
  min-height: min(850px, calc(100svh - 86px));
  padding: 90px 6% 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.hero .eyebrow,
.hero h1,
.hero > p,
.hero .actions {
  position: relative;
  z-index: 2;
  max-width: 49%;
}

.hero h1 {
  font-size: clamp(60px, 6.5vw, 112px);
  line-height: 1.02;
  margin: 30px 0;
}

.hero > p {
  max-width: 470px;
}

.twilight-hero-logo {
  position: absolute;
  right: 4%;
  top: 50%;
  transform: translateY(-50%);
  width: 46%;
  z-index: 1;
}

.twilight-hero-logo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 20px 80px rgba(0,0,0,.28);
}

.hero-bottom {
  z-index: 2;
}

@media (max-width: 800px) {
  .hero {
    min-height: auto;
    padding: 45px 7% 90px;
    display: flex;
    flex-direction: column;
  }

  .twilight-hero-logo {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    order: -1;
    margin-bottom: 35px;
  }

  .twilight-hero-logo img {
    border-radius: 8px;
  }

  .hero .eyebrow,
  .hero h1,
  .hero > p,
  .hero .actions {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(48px, 11vw, 82px);
    margin: 22px 0;
  }

  .hero-bottom {
    bottom: 25px;
  }
}

/* TWILIGHT HERO BLEND V2 START */

/* Blend the logo into the hero */
.hero {
    background:
      radial-gradient(ellipse at 73% 46%,
        rgba(99, 40, 78, .30), transparent 62%),
      linear-gradient(120deg, #11101b, #1a1220 65%, #11101b);
}

.twilight-hero-logo {
    right: 1%;
    width: 51%;
    opacity: .96;
    pointer-events: none;
}

.twilight-hero-logo img {
    border-radius: 0;
    box-shadow: none;
    -webkit-mask-image:
      radial-gradient(ellipse 69% 65% at center,
        #000 45%, transparent 100%);
    mask-image:
      radial-gradient(ellipse 69% 65% at center,
        #000 45%, transparent 100%);
}

/* Compact portfolio cards */
.portfolio-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.project {
    border-radius: 10px;
}

.project-media {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    background: #100d16;
}

.project video {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
}

.project-details {
    padding: 18px;
}

.project-details h3 {
    font-size: 21px;
}

/* Tablet */
@media (max-width: 1000px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 700px) {
    .twilight-hero-logo {
        width: 100%;
        right: auto;
        opacity: 1;
        margin-bottom: 15px;
    }

    .twilight-hero-logo img {
        -webkit-mask-image:
          radial-gradient(ellipse 78% 72% at center,
            #000 55%, transparent 100%);
        mask-image:
          radial-gradient(ellipse 78% 72% at center,
            #000 55%, transparent 100%);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .project-media,
    .project video {
        max-height: 300px;
    }

    .project-details {
        padding: 12px;
    }

    .project-details h3 {
        font-size: 16px;
    }

    .project-details p {
        font-size: 12px;
    }
}

@media (max-width: 390px) {
    .portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* TWILIGHT HERO BLEND V2 END */

/* TWILIGHT FINISH V3 START */

/* Unified midnight background */
.hero {
  background:
    radial-gradient(
      ellipse at 72% 48%,
      rgba(92, 35, 79, .22) 0%,
      rgba(32, 19, 39, .12) 45%,
      transparent 75%
    ),
    linear-gradient(
      115deg,
      #11101b 0%,
      #17111e 50%,
      #0d0c13 100%
    );
}

/* Stronger feathered edges */
.twilight-hero-logo {
  right: -2%;
  width: 55%;
  opacity: .93;
  overflow: visible;
}

.twilight-hero-logo img {
  width: 100%;
  border: none;
  border-radius: 0;
  box-shadow: none;

  -webkit-mask-image:
    radial-gradient(
      ellipse 65% 57% at 50% 50%,
      #000 25%,
      rgba(0,0,0,.96) 43%,
      rgba(0,0,0,.72) 59%,
      rgba(0,0,0,.32) 75%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse 65% 57% at 50% 50%,
      #000 25%,
      rgba(0,0,0,.96) 43%,
      rgba(0,0,0,.72) 59%,
      rgba(0,0,0,.32) 75%,
      transparent 100%
    );
}

/* Portrait videos: no artificial landscape frame */
.project video.project-media {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 420px;
  aspect-ratio: auto;
  object-fit: contain;
  margin: 0 auto;
  background: transparent;
}

/* Match card background to surrounding media */
.project {
  background: #1b1723;
  overflow: hidden;
}

.project-details {
  background: #1b1723;
}

/* Mobile refinements */
@media (max-width: 800px) {
  .twilight-hero-logo {
    right: auto;
    width: 100%;
    opacity: 1;
  }

  .twilight-hero-logo img {
    -webkit-mask-image:
      radial-gradient(
        ellipse 72% 62% at center,
        #000 36%,
        rgba(0,0,0,.7) 60%,
        transparent 100%
      );

    mask-image:
      radial-gradient(
        ellipse 72% 62% at center,
        #000 36%,
        rgba(0,0,0,.7) 60%,
        transparent 100%
      );
  }

  .project video.project-media {
    max-height: 300px;
  }
}

/* TWILIGHT FINISH V3 END */

/* TWILIGHT PORTFOLIO V4 */

.portfolio-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1150px;
  margin: 0 auto;
}

.project {
  width: 100%;
  min-width: 0;
  border-radius: 12px;
}

.project video.project-media {
  display: block;
  max-height: 480px;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}

.portfolio-view-all {
  text-align: center;
  margin-top: 45px;
}

.portfolio-view-all a {
  display: inline-block;
  padding: 17px 35px;
  background: linear-gradient(135deg, #f1cf9a, #c58a47);
  color: #17111a;
  font-weight: 700;
  font-size: 13px;
  border-radius: 4px;
}

body[data-page="portfolio"] .work {
  min-height: 80vh;
  padding-top: 90px;
}

@media(max-width:900px) {
  .portfolio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:600px) {
  .portfolio-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .project video.project-media {
    max-height: 440px;
  }
}

/* END TWILIGHT PORTFOLIO V4 */

/* TWILIGHT OVERHAUL V5 START */

:root {
  --bg: #100d18;
  --panel: #1c1524;
  --ink: #fff0dc;
  --muted: #c8b6c5;
  --gold: #e3ad6b;
}

/* Richer overall atmosphere */
body {
  background: #100d18;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.site-header {
  background: rgba(16, 13, 24, .96);
  border-bottom: 1px solid rgba(227,173,107,.22);
}

.brand {
  color: #fff0dc;
  transition: letter-spacing .3s ease;
}

.brand:hover {
  letter-spacing: .28em;
}

.brand span {
  color: #e3ad6b;
}

/* Cinematic hero */
.hero {
  background:
    radial-gradient(
      ellipse at 77% 38%,
      rgba(154, 53, 105, .24) 0%,
      transparent 53%
    ),
    radial-gradient(
      ellipse at 17% 85%,
      rgba(212, 101, 55, .12) 0%,
      transparent 55%
    ),
    linear-gradient(115deg, #100d18 0%, #241427 58%, #100d18 100%);
}

.hero h1 {
  color: #fff0dc;
  text-shadow: 0 12px 45px rgba(0,0,0,.20);
}

.hero h1 em {
  color: #e7ad65;
  text-shadow: 0 0 50px rgba(227,173,107,.15);
}

.hero .eyebrow {
  color: #e3ad6b;
}

/* Integrate the logo into the hero */
.twilight-hero-logo {
  width: 57%;
  right: -4%;
  opacity: 1;
  filter: saturate(1.15) contrast(1.06);
}

.twilight-hero-logo img {
  border-radius: 0;
  box-shadow: none;
  -webkit-mask-image:
    radial-gradient(
      ellipse 66% 61% at center,
      black 32%,
      rgba(0,0,0,.85) 53%,
      rgba(0,0,0,.36) 75%,
      transparent 100%
    );
  mask-image:
    radial-gradient(
      ellipse 66% 61% at center,
      black 32%,
      rgba(0,0,0,.85) 53%,
      rgba(0,0,0,.36) 75%,
      transparent 100%
    );
}

/* Premium buttons */
.btn,
.portfolio-view-all a {
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

.btn:hover,
.portfolio-view-all a:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(227,173,107,.20);
}

.primary,
.portfolio-view-all a {
  background: linear-gradient(135deg, #f5d39f, #cb8c49);
  color: #181019;
}

/* Section treatments */
.section {
  border-top: 1px solid rgba(227,173,107,.12);
}

.section h2 {
  color: #fff0dc;
}

.section h2 em {
  color: #e3ad6b;
}

.work {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(100,42,88,.13), transparent 65%),
    #100d18;
}

/* Portfolio cards */
.portfolio-grid {
  gap: 22px;
}

.project {
  background: #1c1524;
  border: 1px solid rgba(227,173,107,.16);
  border-radius: 14px;
  overflow: hidden;
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.project:hover {
  transform: translateY(-5px);
  border-color: rgba(227,173,107,.55);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}

.project-details {
  background: #1c1524;
  padding: 22px;
}

.project-details h3 {
  color: #fff0dc;
}

.project-details small {
  color: #e3ad6b;
}

/* Service cards */
.services {
  background: linear-gradient(160deg, #1b1424, #100d18);
}

.service-grid article {
  background: #1b1424;
  transition: background .25s ease;
}

.service-grid article:hover {
  background: #2a1b30;
}

.service-grid h3 {
  color: #fff0dc;
}

/* About and contact */
.about {
  background:
    radial-gradient(ellipse at 90% 50%,
      rgba(122,44,89,.16), transparent 60%),
    #100d18;
}

.contact {
  background:
    radial-gradient(ellipse at 75% 40%,
      rgba(180,79,70,.20), transparent 60%),
    linear-gradient(130deg, #2b182d, #17101c);
}

/* Page entry animation */
@keyframes twilight-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero h1,
.hero > p,
.hero .actions {
  animation: twilight-rise .7s ease both;
}

.hero > p {
  animation-delay: .12s;
}

.hero .actions {
  animation-delay: .2s;
}

/* Portfolio page */
body[data-page="portfolio"] .work {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(154,53,105,.16), transparent 55%),
    #100d18;
}

/* Mobile adjustments */
@media(max-width:800px) {
  .hero {
    padding: 45px 7% 95px;
  }

  .twilight-hero-logo {
    width: 100%;
    right: auto;
    filter: saturate(1.08);
  }

  .hero h1 {
    font-size: clamp(48px, 11vw, 80px);
  }

  .project-details {
    padding: 16px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .hero h1,
  .hero > p,
  .hero .actions {
    animation: none;
  }

  .project,
  .btn,
  .portfolio-view-all a {
    transition: none;
  }
}

/* TWILIGHT OVERHAUL V5 END */

/* TWILIGHT SUNSET HERO V1 */

body[data-page="home"] .hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 86px);

  background-image:
    linear-gradient(
      90deg,
      rgba(8, 9, 19, .78) 0%,
      rgba(8, 9, 19, .52) 38%,
      rgba(8, 9, 19, .14) 75%,
      rgba(8, 9, 19, .06) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8, 9, 19, .55) 0%,
      transparent 38%
    ),
    url('/assets/highlands-hero.jpg');

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

body[data-page="home"] .hero-orbit,
body[data-page="home"] .twilight-hero-logo {
  display: none !important;
}

body[data-page="home"] .hero h1 {
  color: #fff2e3;
  max-width: 850px;
  text-shadow: 0 5px 30px rgba(0,0,0,.35);
}

body[data-page="home"] .hero h1 em {
  color: #f4bd7d;
}

body[data-page="home"] .hero > p {
  color: #f7e9df;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}

body[data-page="home"] .hero .eyebrow {
  color: #ffd19a;
}

body[data-page="home"] .hero-bottom {
  color: #f4dfcf;
}

@media (max-width:700px) {
  body[data-page="home"] .hero {
    min-height: calc(100svh - 70px);

    background-image:
      linear-gradient(
        0deg,
        rgba(8,9,19,.85) 0%,
        rgba(8,9,19,.43) 55%,
        rgba(8,9,19,.16) 100%
      ),
      url('/assets/highlands-hero.jpg');

    background-position: 55% center;
  }

  body[data-page="home"] .hero h1 {
    font-size: clamp(52px, 12vw, 85px);
  }
}

/* END TWILIGHT SUNSET HERO V1 */

/* TWILIGHT HERO BLEND V2 */

body[data-page="home"] .hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #100d18 !important;
}

/* Photograph with soft blended edges */
body[data-page="home"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-image: url('/assets/highlands-hero.jpg');
  background-repeat: no-repeat;
  background-position: center 55%;
  background-size: cover;

  opacity: 0.78;

  -webkit-mask-image: radial-gradient(
    ellipse 85% 85% at center,
    black 35%,
    rgba(0,0,0,.85) 55%,
    rgba(0,0,0,.4) 78%,
    transparent 100%
  );

  mask-image: radial-gradient(
    ellipse 85% 85% at center,
    black 35%,
    rgba(0,0,0,.85) 55%,
    rgba(0,0,0,.4) 78%,
    transparent 100%
  );
}

/* Dark overlay behind the text */
body[data-page="home"] .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    90deg,
    rgba(9,8,18,.62) 0%,
    rgba(9,8,18,.32) 35%,
    transparent 75%
  );
}

/* Keep the text and buttons above the background */
body[data-page="home"] .hero > * {
  position: relative;
  z-index: 1;
}

/* Mobile composition */
@media(max-width:700px) {
  body[data-page="home"] .hero::before {
    background-position: 52% center;
    opacity: .7;

    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,.65),
      black 25%,
      black 65%,
      transparent 100%
    );

    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,.65),
      black 25%,
      black 65%,
      transparent 100%
    );
  }

  body[data-page="home"] .hero::after {
    background: linear-gradient(
      0deg,
      rgba(9,8,18,.85),
      rgba(9,8,18,.22) 80%
    );
  }
}

/* END TWILIGHT HERO BLEND V2 */