:root{
  --bg:#1426ff;
  --fg:#fff;
  --wrap:min(1200px,92vw);
  --accent:#F7FF3A;
  --underline:#ffffff;
  --underline-h:2px; --underline-offset:4px;
  --underline-speed:320ms; --underline-ease:cubic-bezier(.25,.8,.25,1);
  --pre1:#ec983b; --pre2:#e02125; --pre3:#20cdd2; --pre4:#efc7d3;
  --sketch-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8'%3E%3Cpath d='M2 6 Q40 2 80 6 T198 6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.45 'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  /* ⭐ WHITE DOTS PATTERN - Adjust opacity here (0.4 = 40% visible) */
  background-image:radial-gradient(circle, rgba(255,255,255,0.4) 1.5px, transparent 1.5px);
  /* ⭐ DOT SPACING - Change 40px to make dots closer/further apart */
  background-size:40px 40px;
  background-position:0 0;
}
#preloader{position:fixed;inset:0;z-index:9999;background:var(--pre1);display:grid;place-items:center;overflow:hidden}
#preloader .pre-bg.pre-1{position:absolute;inset:0;background:var(--pre1)}
#preloader .wobble-container{position:relative;display:flex;align-items:center;justify-content:center}
#preloader .wobble-x{animation:wobbleX 1.8s ease-in-out infinite alternate}
#preloader .wobble-y{animation:wobbleY 1.4s ease-in-out infinite alternate}
#preloader .globe{width:min(18vmin,180px);height:auto;opacity:.9}
#preloader .smile{position:absolute;width:min(18vmin,180px);user-select:none;pointer-events:none}
@keyframes wobbleX{from{transform:translateX(-10px)}to{transform:translateX(20px)}}
@keyframes wobbleY{from{transform:translateY(-12px)}to{transform:translateY(18px)}}
#preloader .panel{position:absolute;left:0;right:0;bottom:0;height:100%;transform:translateY(100%);z-index:1}
#preloader .p2{background:var(--pre2);z-index:2}
#preloader .p3{background:var(--pre3);z-index:3}
#preloader .p4{background:var(--pre4);z-index:4}
.hero{width:100%;max-width:100vw;margin:0;height:100vh;display:flex;flex-direction:column;padding:min(6vw,60px) min(8vw,80px);position:relative;overflow:hidden}
.hero-content{display:grid;grid-template-columns:1fr;gap:0;flex:1;align-items:flex-start;max-width:1400px;margin:0 auto;width:100%;position:relative;padding-top:0}
.headline{margin:0;font-weight:700;padding:0;position:relative;z-index:2}
.headline span{
  display:block;
  /* FIX 1: Fluid scaling font size for responsiveness */
  font-size: clamp(50px, 8vw, 118px); 
  line-height:1.1;
  transform:translateY(24px) skewY(3deg);
  opacity:0;
  animation:line-in 850ms cubic-bezier(.2,.9,.2,1) forwards;
  /* FIX 2: Prevents wrapping on desktop/tablet views */
  white-space: nowrap; 
}
.headline span:nth-child(1){animation-delay:0ms}
.headline span:nth-child(2){animation-delay:120ms}
.headline span:nth-child(3){animation-delay:220ms}
.headline span:nth-child(4){animation-delay:320ms}
@keyframes line-in{0%{transform:translateY(24px) skewY(3deg);opacity:0}60%{transform:translateY(-2px) skewY(0deg);opacity:1}100%{transform:translateY(0) skewY(0);opacity:1}}
.intro.has-trail{position:relative;z-index:2;width:100%;height:auto;display:flex;align-items:flex-start;justify-content:flex-start;padding-top:0}
#trail{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1}
#tileBursts{position:absolute;inset:0;pointer-events:none}
.cursor-globe{position:fixed;left:50%;top:50%;width:56px;height:auto;opacity:.16;transform:translate(-50%,-50%);pointer-events:none;z-index:2;transition:transform .08s linear}
.links{display:flex;gap:20px;flex-wrap:wrap}
.links a{color:var(--fg);text-decoration:none;position:relative;display:inline-block;padding-bottom:calc(var(--underline-h)+var(--underline-offset))}
.hover-underline::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--underline-h);background:var(--underline);transform:scaleX(0);transform-origin:left center;transition:transform var(--underline-speed) var(--underline-ease)}
.hover-underline:hover::after,.hover-underline:focus-visible::after{transform:scaleX(1)}
.sketch{background-image:var(--sketch-url);background-repeat:no-repeat;background-position:left calc(100% - 2px);background-size:0 8px;transition:background-size .28s ease-out}
.sketch:hover{background-size:200px 8px}
.contact-toggle{text-align:center;margin:0 auto;position:absolute;bottom:40px;left:50%;transform:translateX(-50%);font-size:clamp(24px,3vw,40px);color:var(--fg);text-decoration:none;padding:100px;cursor:pointer;display:block;width:fit-content;z-index:10}
.contact-toggle-text{position:relative;padding-bottom:6px}
.contact-toggle-text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s var(--underline-ease)}
.contact-toggle:hover .contact-toggle-text::after{transform:scaleX(1)}

/* CONTACT PANEL: Height and container grid setup */
.contact-panel{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:auto;
  max-height: none; 
  background:#000;
  color:#FFFF00;
  transform:translateY(100%);
  transition:transform 520ms cubic-bezier(.2,.9,.2,1);
  z-index:40;
  border-top:1px solid rgba(255,255,255,.06);
  padding:40px 0; 
  overflow-y: hidden; 
}
.contact-panel.open{transform:translateY(0%)}

/* Desktop/Tablet Grid (12 Columns) */
.contact-container{
  max-width:1400px;
  margin:0 auto;
  padding:0 80px;
  height:100%;
  display: grid; 
  grid-template-columns: repeat(12, 1fr); 
  width: 100%;
  gap: 0; 
}

/* Desktop Contact Top (Grid Row) */
.contact-top {
    grid-column: 1 / -1; 
    display: grid;
    grid-template-columns: subgrid; 
    align-items: flex-start;
    margin-bottom: 40px;
    font-size: 16px;
    font-weight: 400;
}

/* Desktop Grid Placement */
/* 1. Sydney, Australia (Grid Column 8) */
.contact-location-top{
  color:#FFFF00;
  grid-column: 8 / span 2; 
  text-align: left;
}
/* 3. Close Button (Grid Column 12) */
.contact-close{
  color:#FFFF00;
  text-decoration:none;
  cursor:pointer;
  font-size:16px;
  grid-column: 12 / span 1; 
  text-align: right;
}
.contact-close:hover{opacity:.8}

/* 2. Social Links (Grid Column 10) */
.contact-links{
  grid-column: 10 / span 2; 
  display:flex;
  flex-direction:column;
  gap:4px;
  align-items: flex-start; 
}
/* FIX: Removed extra colon from color property */
.contact-links a{color:#FFFF00;text-decoration:none;font-size:clamp(20px,2.2vw,28px);font-weight:500}
.contact-links a:hover{opacity:.8}

/* Ensure contact-main spans 12 columns */
.contact-main{
  grid-column: 1 / -1; 
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  margin-top:-20px;
}
.contact-email-wrapper{flex:1;text-align:left;order:-1}
.contact-email{
  font-size: clamp(36px, 6vw, 80px); 
  font-weight:700;
  line-height:1.15;
  letter-spacing:-0.02em;
  font-style:italic;
  display:block;
}
.contact-location-bottom{display:none}
.email-link{color:inherit;text-decoration:none;cursor:pointer}
.email-line{display:block;position:relative;width:fit-content}
.email-line-1{margin-bottom:clamp(8px,1vw,12px)}
.contact-email .fran{color:#00FF00}
.contact-email .at{color:#FFA500}
.contact-email .justfran{color:#00FF00}
.contact-email .dot-com{color:#FA8072}
.email-line::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:clamp(10px,1.4vw,16px);background:linear-gradient(90deg,#FF6B9D 0%,#C44569 20%,#FFA07A 40%,#FFD93D 60%,#6BCF7F 80%,#4ECDC4 100%);border-radius:999px;transform:scaleX(0);transform-origin:left;transition:transform 0.8s cubic-bezier(.25,.8,.25,1);opacity:0}
.contact-email-wrapper:hover .email-line::after{transform:scaleX(1);opacity:1}
.contact-email-wrapper:hover .email-line-2::after{transition-delay:0.1s}
#emailFx .char{display:inline-block}

/* *** MOBILE MEDIA QUERY (max-width: 480px) *** */
@media (max-width: 480px){
  body{
    background-size:30px 30px;
  }
  .hero{padding:20px}
  .hero-content{align-items:flex-start;padding-top:0}
  .intro.has-trail{position:relative;width:100%;height:auto;min-height:60vh;display:flex;align-items:flex-start}
  .headline{width:100%;max-width:100%}
  .headline span{
    font-size:15vw !important;
    line-height:0.9 !important;
    letter-spacing:-0.03em !important;
    word-spacing: normal !important; 
    display:block !important; 
    text-align: left;
    white-space: normal !important;
  }
  .contact-toggle{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);margin:0;padding:20px;font-size:clamp(20px,5vw,28px);z-index:15}
  .contact-panel{height:auto;max-height:none;min-height:100vh;padding:20px 0; overflow-y: auto;}
  
  /* FIX 1: Mobile 4-Column Grid Setup */
  .contact-container{
    padding:0 20px;
    height:100%;
    display:grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; 
    justify-content:flex-start;
  }

  /* Reset parent containers for proper mobile grid flow */
  .contact-top {
      grid-column: 1 / -1; 
      display: contents; 
      margin-bottom: 0; 
  }
  .contact-main {
      grid-column: 1 / -1; 
      display: contents; 
      margin-top: 0;
      gap: 0;
  }

  /* FIX 2: Mobile Placement & Styling */
  
  /* Close Button - Top right corner (implicitly column 4) */
  .contact-close{
    grid-column: 4 / 5; 
    text-align: right;
    order: 1; 
    font-size: 14px;
    padding-top: 10px; 
  }

  /* Email Wrapper - Spans all 4 columns */
  .contact-email-wrapper {
      grid-column: 1 / -1;
      order: 2; 
      margin-bottom: 20px;
  }
  .contact-email{font-size:clamp(56px,14vw,96px);line-height:1.1}

  /* Social Links - Bottom left (Column 1, spans 1 column) */
  .contact-links{
    grid-column: 1 / 2;
    order: 3;
    align-items: flex-start;
    margin-left:0;
    margin-bottom:0;
  }
  .contact-links a{font-size:clamp(16px,4vw,20px);font-weight:500;line-height:1.2}

  /* Location (Bottom) - Column 3, spans 2 columns, aligned right */
  .contact-location-bottom{
    display:block;
    color:#FFFF00;
    font-size:clamp(16px,4vw,20px);
    font-weight:500;
    grid-column: 3 / 5; 
    order: 3;
    text-align: right;
  }
  
  /* Remove desktop-only elements/styles */
  .contact-location-top{display:none}
}