:root{--bg:#101a1d;--panel:#19272b;--ink:#f2eee4;--muted:#b7c2bd;--gold:#e9ad70;--line:#ffffff20;--mx:0px;--my:0px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:6px}img{display:block;max-width:100%}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:var(--gold);color:var(--bg);padding:12px}.skip-link:focus{top:10px}.header{height:86px;position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 5%;border-bottom:1px solid var(--line);background:#101a1df2;backdrop-filter:blur(14px)}.brand{font-size:25px;font-weight:900;letter-spacing:-1.5px;white-space:nowrap}.brand span{color:var(--gold)}.brand .brand-dot{font-size:15px;letter-spacing:0;color:var(--muted)}nav{display:flex;gap:27px;font-size:13px;font-weight:700}nav a{padding:10px 0;transition:color .2s}nav a:hover,nav a[aria-current]{color:var(--gold)}.menu-toggle{background:none;border:1px solid var(--line);color:var(--ink);padding:8px 12px}.hero{isolation:isolate;position:relative;min-height:850px;height:100svh;max-height:1150px;overflow:hidden;padding:185px 7% 110px;display:flex;align-items:center}.hero-scenery{position:absolute;inset:-35px;z-index:-4;background:url('../images/coast.svg') center/cover;transform:translate(calc(var(--mx)*-.3),calc(var(--my)*-.3)) scale(1.05);will-change:transform}.hero-people{position:absolute;inset:14% 4% 0 44%;z-index:-2;transform:translate(var(--mx),var(--my));will-change:transform}.hero-people img{position:absolute;bottom:-8%;height:108%;max-width:none;width:65%;object-fit:fill;filter:drop-shadow(-20px 10px 20px #05151b66)}.hero-people .jason{right:25%;transform:rotate(-4deg)}.hero-people .lucia{right:-5%;height:100%;transform:translate(calc(var(--mx)*.35),0) rotate(3deg)}.hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07161be8,transparent 95%),linear-gradient(0deg,var(--bg),transparent 35%)}.hero-content{max-width:780px}.eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:11px;font-weight:700;color:var(--gold);margin:0 0 23px}.eyebrow span{display:inline-block;background:var(--gold);height:7px;width:7px;margin-right:8px;border-radius:50%}h1,h2,h3,p{margin-top:0}h1,h2,h3{line-height:1.05}h1{font-size:clamp(58px,7.2vw,110px);font-weight:900;letter-spacing:-5px;margin-bottom:28px}em{font-style:normal;color:var(--gold)}.hero-description{color:#dddcd0;max-width:420px;font-size:17px;margin-bottom:32px}.button{background:var(--gold);color:#142126;display:inline-flex;gap:40px;align-items:center;padding:16px 22px;font-weight:700;font-size:13px;transition:background .2s,transform .2s}.button:hover{background:#f7c78f;transform:translateY(-3px)}.text-link{display:inline-block;border-bottom:1px solid #ffffff50;padding:8px 0;font-size:13px}.hero-content>.text-link{display:block;width:fit-content;margin-top:18px}.hero-bottom{position:absolute;bottom:28px;left:7%;right:7%;display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:10px;letter-spacing:1px;color:var(--muted)}.hero-bottom span:nth-child(2){max-width:270px;text-align:center;font-size:9px}.section{padding:100px 7%;scroll-margin-top:20px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:45px}.section-heading>p{max-width:340px;font-size:14px;color:var(--muted);margin-bottom:5px}h2{font-size:clamp(38px,5vw,66px);letter-spacing:-2.5px;margin-bottom:0}h2 span{color:var(--gold)}.news{background:#131f23}.news-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:25px}.news-feature,.editorial{padding:45px;border:1px solid var(--line)}.news-feature{background:linear-gradient(120deg,#4a4a37,#1d3438)}.label{display:block;text-transform:uppercase;letter-spacing:2px;font-size:10px;color:var(--gold);margin-bottom:24px}.news h3{font-size:36px;letter-spacing:-1px}.news p{max-width:440px;color:#c5cec8;font-size:14px}.news .muted{color:var(--muted);font-size:12px}.location-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}.location{min-height:380px;position:relative;isolation:isolate;overflow:hidden;background:#253b3b;transition:transform .5s,box-shadow .5s;border:1px solid var(--line)}.location-image{position:absolute;inset:0;z-index:-2;background:url('../images/coast.svg') center/cover;transition:transform .8s}.location:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0b191df5,transparent)}.keys .location-image{background-position:80%;filter:hue-rotate(15deg)}.river .location-image{background-position:0;filter:hue-rotate(40deg) brightness(.7)}.port .location-image{filter:saturate(.5)}.industry .location-image{background-position:10%;filter:sepia(.4)}.mountain .location-image{filter:hue-rotate(160deg) saturate(.4)}.card-number{position:absolute;top:20px;left:22px;font-size:11px;letter-spacing:2px}.location-copy{position:absolute;bottom:45px;left:25px;right:25px}.location h3{font-size:29px;letter-spacing:-1px;margin-bottom:14px}.location p{font-size:12px;margin-bottom:0;color:#d2d9d2}.location .tagline{font-weight:700;color:var(--gold);margin-bottom:8px}.placeholder-tag{position:absolute;right:15px;bottom:12px;font-size:9px;color:#c5c8bc;letter-spacing:1px;text-transform:uppercase}.source-link{display:inline-block;margin-top:25px;font-size:12px;color:var(--muted);text-decoration:underline}.characters{background:#19262a}.character-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.character{height:470px;position:relative;overflow:hidden;background:radial-gradient(ellipse at top right,#7b6850,#243b3c 65%);isolation:isolate}.character img{position:absolute;right:0;bottom:-30%;height:120%;width:70%;z-index:-1}.character>div{position:absolute;bottom:35px;left:30px}.character h3{font-size:65px;letter-spacing:-3px;margin-bottom:10px}.image-note{color:var(--muted);font-size:12px;margin:24px 0 0}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:50px}.guide article{border-top:1px solid var(--line);padding-top:25px}.guide article>span{color:var(--gold);font-size:12px}.guide h3{font-size:23px;margin:20px 0}.guide article p{color:var(--muted);font-size:14px}.guide article a{font-size:13px;color:var(--gold)}.community{text-align:center;background:radial-gradient(ellipse at bottom,#5c4f34,#1c3032 65%);padding-top:105px;padding-bottom:105px}.community p:not(.eyebrow){max-width:550px;margin:25px auto 30px;color:#cbd3cb;font-size:14px}footer{padding:45px 7%;display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line)}footer p,footer>a:last-child{font-size:10px;color:var(--muted);margin:0}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.location:hover{transform:scale(1.05);box-shadow:0 18px 45px #0005;z-index:2}.location:hover .location-image{transform:scale(1.07)}}
@media(min-width:901px){.menu-toggle{display:none}}
@media(max-width:900px){.header{height:74px;flex-wrap:wrap}nav{width:100%;background:#101a1d;gap:10px;flex-wrap:wrap;padding:12px 5%;position:absolute;top:74px;left:0;border-bottom:1px solid var(--line)}nav[hidden]{display:none}.menu-toggle:not([hidden]){display:block}.hero{padding-top:180px;min-height:790px}h1{font-size:75px}.hero-people{left:40%;right:-20%;opacity:.8}.location-grid{grid-template-columns:repeat(2,1fr)}.section{padding:75px 6%}.section-heading{align-items:start}.hero-bottom span:nth-child(2){display:none}.news-feature,.editorial{padding:28px}.guide-grid{gap:22px}footer{flex-wrap:wrap}body:not(.js) .hero{padding-top:240px}}
@media(max-width:600px){h1{font-size:54px;letter-spacing:-2.5px}h2{font-size:40px;letter-spacing:-1.5px}.hero{padding:170px 6% 100px;min-height:780px;max-height:none}.hero-content{align-self:flex-start}.hero-description{font-size:15px;max-width:280px}.hero-people{top:35%;left:24%;right:-15%;opacity:.65}.hero-shade{background:linear-gradient(90deg,#07161be8,#07161b35),linear-gradient(0deg,var(--bg),transparent 55%)}.hero-bottom{left:6%;right:6%;font-size:9px}.eyebrow{font-size:9px;letter-spacing:2px}.section-heading{display:block}.section-heading>p{margin-top:24px}.news-grid,.location-grid,.character-grid,.guide-grid{grid-template-columns:1fr}.location{min-height:390px}.news h3{font-size:30px}.character{height:390px}.character img{bottom:-30%;height:130%}.character h3{font-size:58px}.section{padding:65px 6%}.guide-grid{gap:30px}.community{padding-top:80px;padding-bottom:80px}footer{align-items:start;flex-direction:column}.hero-content>.text-link{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-scenery,.hero-people,.hero-people .lucia{transform:none;will-change:auto}}

/* Hero refinement only. Final photographic/artwork layers await supplied assets. */
.hero {
  padding-inline: 6%;
  background: #17262c;
}
.hero-content { max-width: 840px; }
.hero h1 {
  font-size: clamp(54px, 6.6vw, 106px);
  line-height: .98;
  letter-spacing: -.055em;
  text-shadow: 0 3px 28px #09171b80;
}
.hero h1 > span { display: block; }
.hero-scenery {
  background-position: 62% center;
  transform: translate(calc(var(--mx) * -.3), calc(var(--my) * -.3)) scale(1.06);
}
.hero-people {
  inset: 14% 0 0 43%;
  transform: none;
  will-change: auto;
  pointer-events: none;
}
.hero-people img {
  width: 66%;
  height: 105%;
  bottom: -7%;
  object-fit: contain;
  object-position: center bottom;
  will-change: transform;
}
.hero-people .jason {
  right: 31%;
  transform: translate(calc(var(--mx) * .7), calc(var(--my) * .7));
}
.hero-people .lucia {
  right: -2%;
  height: 100%;
  transform: translate(calc(var(--mx) * 1.1), calc(var(--my) * 1.1));
}
.hero-foreground {
  position: absolute;
  inset: -30px;
  z-index: -1;
  pointer-events: none;
  background-image: var(--hero-foreground-image, none);
  background-size: cover;
  background-position: center bottom;
  transform: translate(calc(var(--mx) * 1.6), calc(var(--my) * 1.6));
  will-change: transform;
}
.hero-shade {
  pointer-events: none;
  background: linear-gradient(90deg, #07161be8, #07161b65 43%, transparent 76%),
              linear-gradient(0deg, var(--bg), transparent 32%);
}
.hero-bottom { left: 6%; right: 6%; }
.hero-bottom span:nth-child(2) {
  max-width: 340px;
  color: #e0ddd0;
}
@media (max-width: 900px) {
  .hero-people { inset: 23% -13% 0 35%; opacity: .85; }
  .hero h1 { font-size: clamp(54px, 8vw, 74px); }
}
@media (max-width: 600px) {
  .hero { min-height: 900px; padding-top: 150px; }
  .hero h1 { font-size: clamp(36px, 8.8vw, 52px); letter-spacing: -.05em; }
  .hero-content { align-self: flex-start; }
  .hero-description { max-width: 310px; }
  .hero-people { inset: 47% -8% 0 4%; opacity: 1; }
  .hero-people img { height: 100%; bottom: -2%; }
  .hero-people .lucia { height: 95%; }
  .hero-shade {
    background: linear-gradient(0deg, var(--bg), transparent 25%),
                linear-gradient(180deg, #07161be8, #07161b90 40%, transparent 65%);
  }
  .hero-bottom { bottom: 18px; flex-wrap: wrap; gap: 8px; }
  .hero-bottom span:nth-child(2) {
    display: block;
    order: 3;
    flex-basis: 100%;
    max-width: none;
    text-align: left;
    font-size: 8px;
  }
  .hero-bottom a { margin-left: auto; }
}
@media (max-width: 900px), (hover: none), (prefers-reduced-motion: reduce) {
  .hero-scenery, .hero-people, .hero-people .jason,
  .hero-people .lucia, .hero-foreground {
    transform: none;
    will-change: auto;
  }
}

/* Approved hero composition: HTML identity, copy and two navigation actions. */
.hero { padding-top: 138px; padding-bottom: 110px; }
.hero-content { width: 100%; max-width: 860px; }
.hero-identity { margin-bottom: clamp(32px, 5vh, 65px); }
.hero-logo { display: inline-block; font-size: 36px; line-height: 1.1; }
.hero-logo .brand-dot { font-size: 19px; }
.hero-slogan { margin: 10px 0 0; color: #e0ddd0; font-size: 14px; }
.hero h1 { margin-bottom: 24px; }
.hero-description { max-width: 390px; margin-bottom: 28px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .button { min-height: 52px; gap: 22px; }
.hero-button-secondary { background: #12252ac9; color: var(--ink); border: 1px solid #f2eee47a; }
.hero-button-secondary:hover { background: #243c41; }
@media (min-width: 901px) {
  .hero-people { inset: 13% -1% 0 45%; }
}
@media (max-width: 900px) {
  .hero { padding-top: 135px; }
  .hero-identity { margin-bottom: 34px; }
}
@media (max-width: 600px) {
  .hero { min-height: 1020px; padding-top: 115px; }
  .hero-logo { font-size: 30px; }
  .hero-slogan { font-size: 13px; }
  .hero-identity { margin-bottom: 36px; }
  .hero-actions { max-width: 330px; gap: 10px; }
  .hero-actions .button { justify-content: space-between; width: 100%; }
  .hero-people { inset: 56% -8% 0 4%; }
}

/* Temporary user-supplied visual references, prepared with image editing. */
.hero-scenery {
  background-image: url('../images/hero/vice-city-reference.png');
  background-position: center;
}
.hero-people .hero-duo {
  right: -5%;
  bottom: 0;
  width: 115%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(-12px 12px 20px #05151b44);
  transform: translate(calc(var(--mx) * .9), calc(var(--my) * .9));
}
.hero-shade {
  background: linear-gradient(90deg, #07161bf2, #07161b99 40%, #07161b10 72%),
              linear-gradient(0deg, var(--bg), transparent 25%);
}
@media (max-width: 900px) {
  .hero-people .hero-duo { transform: none; will-change: auto; }
}
@media (max-width: 600px) {
  .hero-people { inset: 55% 0 5% 0; }
  .hero-people .hero-duo { right: -8%; width: 116%; }
  .hero-scenery { background-position: 57% center; }
  .hero-shade {
    background: linear-gradient(180deg, #07161bf5, #07161bc9 45%, transparent 72%),
                linear-gradient(0deg, var(--bg), transparent 23%);
  }
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .hero-people .hero-duo { transform: none; will-change: auto; }
}
@media (min-width: 901px) {
  .hero-people .hero-duo {
    width: 110%;
    height: 95%;
    right: -8%;
    object-fit: cover;
    object-position: 70% bottom;
  }
}