:root{
  --bg:#ffffff;
  --text:#222;
  --muted:#666;
  --dark:#111;
  --accent:#ffd400; /* lightning yellow */
  --accent-2:#ff5e00;
  --container:1100px;
  --radius:10px;
}
/* Reset browser outer margins/padding */
html, body {
  margin: 0;
  padding: 0;
}

/* (nice-to-have) box-sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}
body{background:var(--bg); color:var(--text); font-family:'Montserrat',sans-serif;}
.container{max-width:var(--container); margin-inline:auto; padding:0 1.25rem;}
.section{padding:4rem 0;}
h1,h2{color:var(--dark);}
.btn{display:inline-block; padding:.75rem 1.25rem; border-radius:6px; background:var(--accent-2); color:#fff; text-decoration:none; font-weight:600;}
.btn:hover{opacity:.95;}
.btn-ghost{background:transparent; border:2px solid #fff; color:#fff;}
.btn-small{padding:.5rem .9rem; font-size:.9rem}
.btn-yellow{ background:var(--accent); color:#111; font-weight:800; }
.btn-yellow:hover{ filter:brightness(.95); }


/* accessibility */
.skip-link{position:absolute; left:-9999px; top:auto;}
.skip-link:focus{left:1rem; top:1rem; background:#fff; padding:.5rem 1rem; z-index:2000;}

/* Header */
.site-header{position:sticky; top:0; z-index:1000; background:#111; color:#fff;}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px;}
.logo{display:flex; align-items:center; gap:.35rem; text-decoration:none; color:#fff;}
.logo-text{font-weight:800; letter-spacing:.5px;}
.logo-bolt{color:var(--accent); transform:rotate(-15deg); font-size:1.1em; line-height:1;}
.logo-tag{margin-left:.5rem; font-weight:600; opacity:.9; font-size:.95rem;}
.nav { position: relative; }
.nav .nav-links{display:flex; gap:1.25rem; align-items:center; display: none;}
.nav a{color:#fff; text-decoration:none;}
.nav-toggle { display: inline-block; }
.nav[data-open="true"] .nav-links{
  display:flex;
  position:absolute; right:1rem; top:64px;
  background:#111; padding:1rem; border-radius:10px;
  flex-direction:column; gap:.9rem; width:min(85vw, 320px);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* HERO LAYOUT */
.hero{
  position:relative;
  min-height:78vh;
  display:grid;
  align-items:end;          /* anchor near bottom for energy */
  padding-bottom:6vh;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 65%;  /* keep surfer in frame; tweak as needed */
  display:block;
}

/* contrast: vertical + lateral gradients for readability */
.hero-overlay{
  position:absolute; inset:0;
   background:
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.52) 62%, rgba(0,0,0,.68) 100%),
    linear-gradient(90deg,  rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 85%);
}

/* content card (subtle glass) */
.hero-card{
  max-width:680px;
  color:#fff;
  background:rgba(0,0,0,.36);
  backdrop-filter:blur(6px);
  border-radius:10px;
  padding:1rem 1.25rem;
}
.hero-card h1{
  margin:0 0 .4rem;
  font-size:clamp(2rem, 4vw + .5rem, 3.25rem);
  line-height:1.1;
  color:#fff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.6), 0 8px 24px rgba(0,0,0,.35);
}
@supports (-webkit-text-stroke: 1px black){
  .hero-card h1{ -webkit-text-stroke: .6px rgba(0,0,0,.35); }
}

.hero-card p{
  margin:0 0 1rem;
  color:#eaeaea !important;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
}

.hero-ctas{ display:flex; gap:.75rem; }

.badge{
  display:inline-block;
  margin-bottom:.55rem;
  background:rgba(255,212,0,.98);
  color:#111; font-weight:800; font-size:.8rem;
  padding:.25rem .6rem; border-radius:999px;
}

/* scroll hint */
.scroll-cue{
  position:absolute; left:50%; bottom:1rem; transform:translateX(-50%);
  background:transparent; border:0; color:#fff; font-size:1.5rem; opacity:.85; cursor:pointer;
}

/* ghost button on dark images */
.btn-ghost{ background:transparent; border:2px solid #fff; color:#fff; }
.btn-ghost:hover{ background:rgba(255,255,255,.08); }

/* Portfolio */
.portfolio h2, .services h2, .about h2, .contact h2{margin-bottom:1.25rem; text-align:left;}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem;}
.grid img{width:100%; height:auto; border-radius:8px;}

/* Services */
.services{background:#f7f7f7;}
.service-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem;}
.service{background:#fff; border-radius:8px; padding:1rem; box-shadow:0 2px 8px rgba(0,0,0,.05);}
.section-cta{margin-top:1rem;}

/* About */
.about-wrapper{display:flex; gap:1.25rem; align-items:flex-start; flex-wrap:wrap;}
.about-text{flex:2; max-width:720px; line-height:1.7; text-align:left;}
.about-text p{margin-bottom:1.1em;}
.about-photo{flex:1; max-width:260px;}
.about-photo img{width:100%; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15);}

/* Contact */
.contact-form{display:flex; flex-direction:column; gap:1rem;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
.contact input, .contact textarea, .contact select{
  width:100%; padding:.75rem; border:1px solid #ddd; border-radius:6px; font:inherit;
}
.form-note{color:var(--muted); font-size:.9rem;}
.site-footer{background:#111; color:#fff; padding:2rem 0;}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.footer-inner a{color:#fff;}

@media (min-width: 821px){
  .nav-toggle { display: none; }
  .nav .nav-links{
    display:flex !important;       /* force desktop row */
    position: static;
    flex-direction: row;
    gap:1.25rem;
    background: transparent;
    padding:0;
    box-shadow:none;
  }
}

/* Mobile */
@media (max-width: 820px){
  .hero{min-height:60vh;}
  .hero-text h1{font-size:2.1rem;}
  .nav-toggle{
    display:inline-block; background:#222; color:#fff;
    border:1px solid #333; border-radius:6px; padding:.5rem .8rem;
    font-weight:700;
  }
  .nav-links{ display:none; }

  /* show as a panel when open */
  .nav[data-open="true"] .nav-links{
    display:flex; position:absolute; right:1rem; top:64px;
    background:#111; padding:1rem; border-radius:10px;
    flex-direction:column; gap:.9rem; width:min(85vw, 320px);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
  }
  .nav[data-open="true"] .nav-links a{ padding:.3rem 0; }
  .form-row{grid-template-columns:1fr;}
  
  .about-wrapper{ flex-direction:column; align-items:stretch; }
  .about-photo{ max-width: 70%; margin: .5rem auto 0; }
}
.sticky-cta{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:999;
  background:#ff5e00; color:#fff; text-align:center; padding:.9rem;
  font-weight:800; text-decoration:none; box-shadow:0 -8px 24px rgba(0,0,0,.25);
}
@media (max-width:820px){ .sticky-cta{ display:block; } }
.form-note.success{
  background:#e8f7ee;
  border:1px solid #b6e2c6;
  color:#0a7a28;
  padding:.6rem .75rem;
  border-radius:6px;
  margin-top:.5rem;
}
/* hide helper */
.is-hidden { display: none !important; }

/* success panel */
.success-panel{
  background:#e8f7ee;
  border:1px solid #b6e2c6;
  border-radius:12px;
  padding:2rem 1.5rem;
  text-align:center;
  color:#0a7a28;
  max-width:720px;
  margin:1rem auto 0;
}
.success-panel h3{
  margin:.25rem 0 .5rem;
  font-size:clamp(1.5rem, 2.6vw + .6rem, 2rem);
  line-height:1.2;
  color:#0a7a28;
}
.success-panel p{
  color:#16693a;
  margin:0 auto 1rem;
  max-width:46ch;
}
.success-actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.success-icon{
  width:64px; height:64px; line-height:64px;
  margin:0 auto .5rem; border-radius:50%;
  background:#1fb86a; color:#fff; font-weight:800;
  font-size:2rem; box-shadow:0 6px 16px rgba(0,0,0,.12);
}

/* dark-mode friendly tweak */
@media (prefers-color-scheme: dark){
  .success-panel{
    background:#13321f; border-color:#2b5f41; color:#d9ffe9;
  }
  .success-panel h3{ color:#eafff3; }
  .success-panel p{ color:#c5f2d5; }
}
/* Clean success panel */
.success-panel{
  background:#122f24;              /* deep green, not pure black */
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:clamp(1.25rem, 4vw, 2.25rem);
  text-align:center;
  color:#eaf7f0;
  max-width:min(820px, 92vw);
  margin:1.5rem auto 0;
  box-shadow:0 10px 28px rgba(0,0,0,.18);
}
.success-panel h3{
  margin:.35rem 0 .45rem;
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(1.4rem, 2.6vw, 2rem);
  line-height:1.2;
  color:#fff;
}
.success-panel p{
  margin:0 auto 1.25rem;
  max-width:52ch;
  color:#cfe6de;
  font-size:clamp(1rem, 1.2vw, 1.1rem);
}
.success-panel a{
  color:#fff;                      /* make email link white */
  text-decoration-color:rgba(255,255,255,.45);
  text-underline-offset:3px;
}

/* Icon badge */
.success-icon{
  width:clamp(56px, 8vw, 84px);
  height:clamp(56px, 8vw, 84px);
  margin:0 auto .75rem;
  border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 30% 30%, #24c77a, #0fb36a);
  box-shadow:0 12px 28px rgba(36,199,122,.35);
  position:relative;
}
.success-icon::after{
  content:""; position:absolute; inset:-6px; border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  opacity:.28; pointer-events:none;
}
.success-icon svg{ width:44%; height:44%; fill:#fff; }

/* Buttons */
.success-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.success-actions .btn{
  border-radius:12px;
  padding:.9rem 1.15rem;
  font-weight:800;
}
.success-actions .btn-ghost{
  background:transparent;
  border:2px solid rgba(255,255,255,.6);
  color:#fff;
}
.success-actions .btn-ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:#fff;
}

/* Light-mode tweak (in case) */
@media (prefers-color-scheme: light){
  .success-panel{ background:#f2fbf6; border-color:#bfe6cf; color:#0a7a28; }
  .success-panel h3{ color:#0a7a28; }
  .success-panel p{ color:#16693a; }
  .success-icon{ box-shadow:0 10px 20px rgba(15,179,106,.24); }
}
.alert{border-radius:10px;padding:.9rem 1rem;margin:.75rem 0;font-weight:600;}
.alert.error{background:#fde8e8;border:1px solid #f5bcbc;color:#8a1f1f;}
@media (prefers-color-scheme: dark){
  .alert.error{background:#3a1111;border-color:#7a3f3f;color:#ffcdcd;}
}

.field-error{border-color:#e05252 !important; box-shadow:0 0 0 2px rgba(224,82,82,.15);}