:root{
  --bg:#f6fbff; /* very light */
  --card:#ffffff; /* cards white */
  --surface:#f8f6fb; /* pale surface */
  --muted:#475569; /* darker muted for contrast */
  --accent:#7c3aed; /* purple */
  --accent-2:#9f7aea; /* lighter purple */
  --surface:#f8f6fb; /* pale surface */
  --white:#0b1220; /* primary text color */
  --radius:12px;
  --max-width:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,var(--bg),#eef7ff 60%);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  position:relative; /* create a stacking context for content */
  z-index:1;
}
/* decorative background H */
.bg-mark{
  position:fixed;
  inset:0; /* fill viewport */
  display:block;
  pointer-events:none; /* non-interactive */
  z-index:0; /* behind main content */
  background-image: none;
}
.bg-mark::before{
  content:"H";
  position:absolute;
  left:4vw; /* place on the far left with a small inset */
  top:40%;
  transform:translateY(-50%);
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-weight:900;
  font-size:42vw; /* much larger on desktop */
  line-height:0.95;
  color:rgba(11,18,32,0.035); /* faint */
  letter-spacing:-0.03em;
  user-select:none;
  -webkit-user-select:none;
}
@media (max-width:640px){
  .bg-mark::before{font-size:60vw;left:6vw;top:38%}
}
/* small decorative 's' overlapping bottom-right of the H */
.bg-mark::after{
  content:"s";
  position:absolute;
  /* position relative to the H's left/top: placed near its bottom-right */
  /* move leftward to overlap H more: subtract an extra 12vw */
  left:calc(4vw + 38vw - 12vw);
  top:calc(40% + 18vh);
  transform:translate(-45%,-45%);
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-weight:700;
  font-size:27vw; /* doubled from previous 13.5vw */
  color:rgba(11,18,32,0.055);
  user-select:none;
  -webkit-user-select:none;
  pointer-events:none;
}
@media (max-width:640px){
  /* mobile: nudge left more to overlap H */
  .bg-mark::after{font-size:45vw;left:calc(6vw + 48vw - 14vw);top:calc(38% + 16vh);transform:translate(-50%,-50%)}
}
.container{max-width:var(--max-width);margin:0 auto;padding:1.5rem}
.header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 1rem 2.5rem 1rem 6.5rem;
  min-height: 4.5rem;
}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:800;color:var(--white);text-decoration:none;font-size:1.1rem;padding:.25rem .5rem;border-radius:10px;position:absolute;left:1rem;top:1rem;z-index:5}
.brand .logo-mark{width:26px;height:26px;display:inline-block;position:relative;z-index:6;opacity:1}
.brand .logo-mark svg{width:100%;height:100%;display:block}
/* large, background Hawkscript word placed behind the logo for a minimal look */
.brand .brand-text{
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  font-size: clamp(1.1rem,2.2vw,1.6rem);
  font-weight: 900;
  color: #111;
  letter-spacing: 0.04em;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  z-index: 7;
  pointer-events: auto;
  white-space: nowrap;
}

/* make brand more minimal */
.brand{background:transparent;border:0}
.nav{
  position: static;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: none;
  left: unset;
  top: unset;
  z-index: 4;
}
.nav ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 2.5rem;
}
.nav a{
  color:#0b1220;
  text-decoration:none;
  padding:.4rem .75rem;
  border-radius:999px;
  background:#ffffff;
  border:1px solid rgba(15,23,36,0.12);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.nav a:hover{
  color:#111827;
  background:#ffffff;
  border-color:rgba(15,23,36,0.2);
  transform:translateY(-1px);
  box-shadow:0 10px 24px rgba(0,0,0,0.12);
}
.nav-toggle{display:none;background:transparent;border:0;color:var(--white)}
.hamburger{display:inline-block;width:22px;height:2px;background:var(--white);position:relative}
.hamburger::before,.hamburger::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--white);}
.hamburger::before{top:-7px}.hamburger::after{top:7px}

.hero{padding:4rem 0}
.hero-inner{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center}
.hero h1{font-size:2rem;margin:0 0 .5rem}
.lead{color:var(--muted);margin:0 0 1rem}
.hero-media img{width:100%;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,.6)}
.hero-ctas{display:flex;gap:.75rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:10px;text-decoration:none;color:var(--white);border:1px solid transparent;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 6px 20px rgba(124,58,237,.12)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--white)}

.section{padding:3rem 0}
.section-title{font-size:1.25rem;margin:0 0 .25rem}
.section-sub{color:var(--muted);margin:0 0 1rem}
.section-panel{position:relative;z-index:2}
.panel-compact{
  padding:.85rem 1rem !important;
  border-radius:10px !important;
}
.panel-compact .section-title{margin:0 0 .15rem}
.panel-compact .section-sub{margin:0}
.panel-over-space + .cards{margin-top:1rem}
.panel-over-space + .testimonials-grid{margin-top:1rem}
/* spacing between header panel and contact form panel */
.panel-over-space + .form-over-space{margin-top:1rem}
.panel-over-space .section-title{color:#0b1220}
.panel-over-space .section-sub{color:#334155}
.panel-over-space + .cards{margin-top:1rem}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{background:var(--card);padding:1rem;border-radius:12px;border:1px solid rgba(0,0,0,0.6);color:var(--white)}
.card h3{margin:0 0 .5rem}

/* White panels that sit above the starry background for readability */
.card-over-space{
  position:relative;
  z-index:2;
  background:#ffffff !important;
  color:#0b1220;
  border:1px solid rgba(15,23,36,0.18);
  box-shadow:0 12px 36px rgba(0,0,0,0.18);
}

/* Hero content panel */
.panel-over-space{
  position:relative;
  z-index:2;
  background:#ffffff;
  color:#0b1220;
  border:1px solid rgba(15,23,36,0.16);
  border-radius:12px;
  padding:1.25rem;
  box-shadow:0 14px 40px rgba(0,0,0,0.16);
}
.panel-over-space .lead,
.panel-over-space .section-sub{
  color:#334155; /* darker subtitle on white */
}
.panel-over-space h1,.panel-over-space h2,.panel-over-space h3{color:#0b1220}
.panel-over-space .btn.ghost{border-color:rgba(15,23,36,0.25);color:#0b1220}

/* Improve subtitle readability globally a bit */
.section-sub{color:#94a3b8}
.lead{color:#94a3b8}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.project{background:var(--card);border-radius:12px;overflow:hidden}
.project figcaption{padding:.75rem;color:var(--muted);display:flex;flex-direction:column;gap:.25rem;border-top:1px solid rgba(0,0,0,0.06)}
.project img{width:100%;height:160px;object-fit:cover;display:block}
.project figcaption{padding:.75rem;color:var(--muted);display:flex;flex-direction:column;gap:.25rem}

.testimonials-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.testimonial{background:linear-gradient(180deg,rgba(0,0,0,0.02),transparent);padding:1rem;border-radius:12px;border:1px solid rgba(0,0,0,0.6)}

.contact-form{max-width:700px}
.form-row{display:flex;flex-direction:column;margin-bottom:1rem}
label{font-size:.9rem;margin-bottom:.4rem;color:var(--muted)}
input,textarea{background:transparent;border:1px solid rgba(0,0,0,0.6);padding:.6rem .75rem;border-radius:8px;color:var(--white)}
input:focus,textarea:focus{outline:none;box-shadow:0 0 0 6px rgba(124,58,237,0.08);border-color:var(--accent)}
.form-actions{display:flex;gap:.75rem;align-items:center}

/* Form panel above the background */
.form-over-space{
  position:relative;
  z-index:2;
  background:#ffffff;
  color:#0b1220;
  border:1px solid rgba(15,23,36,0.18);
  border-radius:12px;
  padding:1.25rem;
  box-shadow:0 14px 40px rgba(0,0,0,0.18);
}
.form-over-space input,
.form-over-space textarea{
  background:#ffffff;
  color:#0b1220;
  border:1px solid rgba(15,23,36,0.2);
}
.form-over-space .btn.primary{
  color:#fff;
}
.form-over-space .btn.ghost{
  border-color:rgba(15,23,36,0.25);
  color:#0b1220;
}

/* Prominent call strip placed at the top of the contact section */
.contact-call-strip{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:.75rem 1rem;border-radius:12px;margin:1rem 0 1.25rem;box-shadow:0 8px 30px rgba(124,58,237,0.12);border:1px solid rgba(0,0,0,0.6);}
.contact-call-strip{padding:.5rem .85rem;margin:.5rem 0 1rem;border-radius:10px}
.contact-call-link{color:#fff;font-weight:800;text-decoration:none;font-size:1rem;display:inline-flex;align-items:center;gap:.6rem}
.contact-call-link strong{font-weight:900}
.contact-call-link:focus{outline:3px solid rgba(255,255,255,0.15);outline-offset:3px}

@media (max-width:640px){
  .contact-call-strip{padding:.5rem .7rem;font-size:.95rem;margin:.5rem 0}
  .contact-call-link{font-size:.98rem}
}

/* Phone icon styling + subtle pulse animation */
.phone-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex:0 0 20px}
.phone-icon svg{display:block;width:100%;height:100%;transform-origin:center}
.phone-icon.pulse{animation:phone-pulse 1.6s infinite ease-in-out}
.contact-call-link:hover .phone-icon svg{animation:phone-pulse 1.6s infinite ease-in-out}

@keyframes phone-pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.12)}
  100%{transform:scale(1)}
}

/* Reduce empty space: ensure tight line height inside call-text */
.call-text{line-height:1;display:inline-block}

/* Top call bar (moved to page top) */
.top-call-bar{background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 6px 20px rgba(124,58,237,0.12);border-bottom:1px solid rgba(0,0,0,0.06);position:relative;z-index:6}
.top-call-inner{display:flex;align-items:center;justify-content:flex-start;padding:.3rem 1rem;max-width:var(--max-width);margin:0 auto}
.top-call{color:#fff;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;gap:.55rem;padding:.2rem .5rem;border-radius:8px}
.top-call .phone-icon{width:18px;height:18px;flex:0 0 18px}
.top-call .call-text{font-size:.98rem}

/* Make top bar visually attached to the header */
.site-header{margin-top:0}

@media (max-width:640px){
  .top-call-inner{padding:.2rem .8rem}
  .top-call .call-text{font-size:.95rem}
}

.site-footer{border-top:1px solid rgba(15,23,36,0.06);padding:1rem 0;margin-top:2rem;background:transparent}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-nav a{color:var(--muted);text-decoration:none;margin-left:1rem}

.toast{position:fixed;right:1rem;bottom:1rem;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:.65rem .9rem;border-radius:10px;display:none;box-shadow:0 10px 30px rgba(124,58,237,0.18);border:1px solid rgba(0,0,0,0.6)}

/* CTA section removed */

/* Responsive */
@media (max-width:980px){
  :root{--max-width:900px}
  .hero-inner{grid-template-columns:1fr;}
  .hero-media{order:2}
  .hero-content{order:1}
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .nav{display:none}
  .nav-toggle{display:block}
  .header-inner{gap:.5rem}
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .testimonials-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;gap:.5rem}
  .brand .brand-text{display:none} /* keep logo mark only on very small screens */
}

  /* header call button */
  .call-btn{
    display: inline-block;
    padding: .5rem .75rem;
    border-radius: 10px;
    background: linear-gradient(90deg,var(--accent),var(--accent-2));
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    margin-left: auto;
    margin-right: 0;
    border: 2px solid rgba(0,0,0,0.8);
    position: relative;
    z-index: 5;
  }
  .call-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(124,58,237,0.12)}

  @media (max-width:640px){
    .call-btn{display:inline-block} /* show on small screens */
  }

  /* modal styles removed */

/* Nav open state */
.nav.open{position:absolute;left:0;right:0;top:76px;background:linear-gradient(180deg,var(--surface),var(--bg));padding:1rem;border-top:1px solid rgba(255,255,255,0.02)}
.nav.open ul{flex-direction:column;gap:.5rem}

/* Make sure main content sits above the background mark */
main{position:relative;z-index:1}
.site-header, .site-footer{position:relative;z-index:2}

/* Fixed starry space background behind everything */
.space-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background: radial-gradient(140vw 120vh at 96% 50%, rgba(7,13,27,0.96) 0%, rgba(7,13,27,0.88) 36%, rgba(7,13,27,0.62) 58%, rgba(7,13,27,0.36) 70%, rgba(7,13,27,0.0) 78%);
}
.space-bg::before,.space-bg::after{content:"";position:absolute;inset:0;display:block}
/* small twinkling stars */
.space-bg::before{width:2px;height:2px;background:#fff;border-radius:50%;
  box-shadow:
    6vw 10vh 0 0 #fff,
    12vw 20vh 0 0 #e8ecff,
    4vw 34vh 0 0 #f7f7ff,
    16vw 26vh 0 0 #ffffff,
    7vw 44vh 0 0 #eef,
    20vw 14vh 0 0 #fff,
    22vw 38vh 0 0 #e8ecff,
    14vw 64vh 0 0 #fff,
    5vw 76vh 0 0 #f7f7ff,
    18vw 84vh 0 0 #fff,
    9vw 92vh 0 0 #fff,
    3vw 58vh 0 0 #eef,
    21vw 54vh 0 0 #fff,
    24vw 68vh 0 0 #f7f7ff,
    30vw 24vh 0 0 #fff,
    32vw 48vh 0 0 #e8ecff,
    36vw 14vh 0 0 #fff,
    40vw 32vh 0 0 #fff,
    34vw 72vh 0 0 #eef,
    42vw 86vh 0 0 #fff;
  filter: drop-shadow(0 0 6px rgba(160,140,255,.55)) drop-shadow(0 0 12px rgba(124,58,237,.35));
  animation: twinkle1 6s ease-in-out infinite;
}
/* larger glowing stars */
.space-bg::after{width:3px;height:3px;background:#c8b6ff;border-radius:50%;
  box-shadow:
    8vw 24vh 0 0 #c8b6ff,
    16vw 14vh 0 0 #d9ccff,
    26vw 30vh 0 0 #e6dbff,
    20vw 60vh 0 0 #d9ccff,
    34vw 48vh 0 0 #c8b6ff,
    26vw 78vh 0 0 #e6dbff,
    12vw 92vh 0 0 #d9ccff,
    38vw 68vh 0 0 #c8b6ff,
    28vw 8vh  0 0 #e6dbff,
    42vw 40vh 0 0 #d9ccff;
  filter: drop-shadow(0 0 10px rgba(200,160,255,.6)) drop-shadow(0 0 18px rgba(124,58,237,.35));
  animation: twinkle2 9s ease-in-out infinite;
}

@keyframes twinkle1{0%{opacity:.6;transform:scale(.98)}50%{opacity:1;transform:scale(1.04)}100%{opacity:.6;transform:scale(.98)}}
@keyframes twinkle2{0%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}100%{opacity:.55;transform:scale(.96)}}

/* Feather mark: fixed on right over the darkest region */
.feather-mark{position:fixed;top:12vh;right:8vw;width:220px;height:660px;z-index:0;pointer-events:none;opacity:.95;
  background:url('assets/feather.svg?v=20251002') center/contain no-repeat;
  transform: rotate(-90deg) translate3d(0,0,0);
  transform-origin:center;
  will-change: transform;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.22)) drop-shadow(0 10px 28px rgba(124,58,237,.12));
  animation: featherDrift 12s ease-in-out infinite;
}
@media (max-width: 980px){.feather-mark{right:6vw;top:10vh;width:160px;height:480px;opacity:.9}}
@media (max-width: 640px){.feather-mark{display:none}}
@keyframes featherDrift{
  0%  {transform: rotate(-90deg) translate3d(0, 0, 0)}
  25% {transform: rotate(-90deg) translate3d(-12px, -12px, 0)}
  50% {transform: rotate(-90deg) translate3d(0, -24px, 0)}
  75% {transform: rotate(-90deg) translate3d(12px, -12px, 0)}
  100%{transform: rotate(-90deg) translate3d(0, 0, 0)}
}