:root{
  --clr-primary:#124644;  /* green */
  --clr-dark:#0e2d2c;
  --clr-accent:#327880;
  --clr-gold:#d6b14d;     /* “orange” */
  --clr-bg:#0c2322;
  --clr-text:#e9f3f2;
  --clr-gold-strong:#caa33d;
  --container:1200px;
  --radius-2xl:1.25rem;
  --shadow-soft:0 10px 30px rgba(0,0,0,.25);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--clr-text);
  background:linear-gradient(120deg,var(--clr-dark) 0%, var(--clr-primary) 60%, var(--clr-accent) 100%);
  scroll-behavior:smooth;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible { outline: 3px solid var(--clr-gold); outline-offset: 3px; }
.container{width:min(100%,var(--container));margin-inline:auto;padding-inline:1rem}
.btn{display:inline-block;padding:.85rem 1.1rem;border-radius:999px;border:2px solid transparent;font-weight:600;transition:.25s transform,.25s background,.25s border-color,.25s color}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--clr-gold);color:#1a1a1a}
.btn-primary:hover{filter:brightness(1.05); transform:translateY(-1px);}
.btn-outline{border-color:var(--clr-gold);color:var(--clr-text)}
.btn-outline:hover{background:rgba(214,177,77,.15); transform:translateY(-1px);}
.section{padding:clamp(3rem,6vw,5rem) 0}
.section-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin:0 0 1rem 0}
.section-sub{opacity:.85;margin:0 0 2rem 0;max-width:60ch}
.card{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  border-radius:var(--radius-2xl);
  box-shadow:var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 40px rgba(0,0,0,.35); }
.pad{padding:1.25rem}

/* Skip link */
.skip-link{ position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden; }
.skip-link:focus{ left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:#fff; color:#111; border-radius:.5rem; }

/* Header (gold bg, green text) */
header{
  position:sticky;top:0;z-index:50;
  background:var(--clr-gold);
  color:var(--clr-primary);
  border-bottom:1px solid rgba(0,0,0,.12);
  backdrop-filter:none;
}
.nav{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;
  padding:.6rem 0;
}
.brand{display:flex;align-items:center;gap:.75rem}
.brand img{width:42px;height:42px;object-fit:contain}
.brand .name{font-weight:800;letter-spacing:.3px;color:#083130}
.brand .tag{font-size:.8rem;opacity:.8;color:#083130}
.navlinks{display:flex;align-items:center;justify-content:center;gap:.25rem}
.navlinks a{
  position:relative;padding:.55rem .85rem;border-radius:999px;
  color:var(--clr-primary);font-weight:600;
  transition:.25s transform, .25s color, .25s background;
}
.navlinks a::after{
  content:"";position:absolute;left:12%;right:12%;bottom:.35rem;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:.25s transform;opacity:.7;
}
.navlinks a:hover{color:#083130;background:rgba(18,70,68,.08);transform:translateY(-1px)}
.navlinks a:hover::after{transform:scaleX(1)}
.burger{
  display:none;flex-direction:column;gap:5px;border:0;background:transparent;cursor:pointer;
  align-items:center;justify-content:center;justify-self:end; /* push fully right */
}
.burger span{width:26px;height:2px;background:var(--clr-primary)}

/* Mobile menu (robust: max-height + delayed interactivity) */
.mobile-menu{
  background:linear-gradient(180deg,var(--clr-gold), var(--clr-gold-strong));
  border-bottom:1px solid rgba(0,0,0,.12);
  max-height:0;
  opacity:0;
  overflow:hidden;
  pointer-events:none;                  /* not interactive by default */
  transition:max-height .35s ease, opacity .25s ease;
}
.mobile-menu.show{
  opacity:1;
  max-height:70vh;                      /* tall enough for small phones */
}
/* becomes clickable a moment after opening */
.mobile-menu.ready{ pointer-events:auto; }

.mobile-menu a{
  display:block; text-align:center; padding:.8rem 1rem; font-weight:700; color:var(--clr-primary);
  border-radius:.75rem; margin:.15rem auto; width:100%; max-width:480px;
  transition:.2s background,.2s transform;
}
.mobile-menu a:hover{ background:rgba(18,70,68,.12); transform:translateY(-1px); }

/* Festive banner spacing + responsive layout */
#festiveBanner{ padding-top:.9rem; padding-bottom:.4rem; }
.festive-banner{ display:grid; grid-auto-flow:column; align-items:center; justify-content:center; gap:.75rem; background:rgba(255,255,255,.12); }
.festive-emoji{ font-size:1.6rem; }
@media (max-width: 720px){
  .festive-banner{ grid-auto-flow:row; text-align:center; }
  .festive-emoji{ font-size:2rem; }
}
@media (min-width: 721px){
  .festive-emoji{ font-size:2rem; }
}

/* Starry sky + moon (behind content) */
.sky{ position:fixed; inset:0; z-index:0; pointer-events:none; }
#moon{
  position:absolute; top:6vh; right:6vw; width:min(18vw,180px); aspect-ratio:1/1; border-radius:50%;
  background:
    radial-gradient(60% 60% at 40% 40%, #fff9, transparent 60%),
    radial-gradient(circle at 50% 50%, #f4f0e6, #d6b14d33 70%, transparent 72%);
  box-shadow:0 0 30px 8px rgba(214,177,77,.25), 0 0 120px 24px rgba(214,177,77,.15);
  animation:moonFloat 18s ease-in-out infinite;
}
@keyframes moonFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.star{ position:absolute; background:#fff; border-radius:50%; opacity:.85; box-shadow:0 0 6px 2px rgba(255,255,255,.35); }
.star.twinkle{ animation:twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle{ 0%,100%{opacity:.25} 50%{opacity:.95} }

/* Hero */
.hero{position:relative}
.hero-wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.05;margin:.25rem 0 .75rem 0}
.hero .lead{font-size:clamp(1rem,1.7vw,1.15rem);opacity:.9;margin:0 0 1.2rem 0}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:rgba(50,120,128,.35);border:1px solid rgba(255,255,255,.12);padding:.4rem .8rem;border-radius:999px;font-weight:600}
.hero-art{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius-2xl)}
.glow{
  position:absolute;top:50%;left:50%;width:140%;height:140%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:-1;
  background:radial-gradient(circle at 30% 30%, rgba(214,177,77,.35), transparent 45%), radial-gradient(circle at 80% 30%, rgba(50,120,128,.35), transparent 55%);
}
.hero .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.75rem}
.badge-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.badge{font-size:.8rem;opacity:.9;border:1px solid rgba(255,255,255,.15);padding:.35rem .6rem;border-radius:999px;transition:.2s transform,.2s background}
.badge:hover{transform:translateY(-2px);background:rgba(255,255,255,.18)}

/* Services */
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.service{padding:1.25rem}
.service h3{margin:.5rem 0 .25rem 0}
.service p{opacity:.9}
.icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:rgba(214,177,77,.12);border:1px solid rgba(214,177,77,.25)}

/* Portfolio */
.portfolio .grid-3{grid-template-columns:repeat(3,1fr)}
.work{overflow:hidden}
.work img{aspect-ratio:16/10;object-fit:cover;border-top-left-radius:var(--radius-2xl);border-top-right-radius:var(--radius-2xl)}
.work .meta{padding:1rem}
.work-head{display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.chip{font-size:.75rem;padding:.25rem .6rem;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}

/* Process */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.step{padding:1.25rem;text-align:center}
.step .num{width:38px;height:38px;margin:0 auto .5rem auto;border-radius:999px;background:var(--clr-gold);color:#1b1b1b;font-weight:800;display:grid;place-items:center}

/* Contact */
form{display:grid;gap:.75rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

/* Inputs with brand-aligned contrast */
input,textarea,select{
  width:100%;padding:.9rem;border-radius:.9rem;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(18,70,68,.14);
  color:var(--clr-text)
}
textarea{min-height:140px}

/* Select polish (arrow + states) */
select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:
    linear-gradient(transparent,transparent),
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23124644' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .8rem center;
  background-size:18px;
}
select:focus{outline:3px solid var(--clr-gold); outline-offset:2px; border-color:var(--clr-gold);}
select option{color:#0c2322; background:#ffffff;} /* dropdown list legible */

.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:1.25rem}
.contact-aside{border-left:1px solid rgba(255,255,255,.12);padding-left:1rem}
.socials{display:flex;gap:.5rem;margin-top:.5rem}
.muted{opacity:.8;margin-top:1rem}

/* Footer (gold bg, green text) */
footer{border-top:1px solid rgba(0,0,0,.12);padding:2rem 0;background:var(--clr-gold);color:var(--clr-primary)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem}
.footer-links{display:flex;flex-direction:column}
.footer-links a{padding:.3rem 0;font-weight:600;color:var(--clr-primary);border-radius:.5rem;transition:.25s background,.25s transform}
.footer-links a:hover{background:rgba(18,70,68,.12);transform:translateX(4px)}
.credits{opacity:.9;font-size:.9rem;margin-top:.5rem;color:#083130}

/* Utilities */
.mt-0{margin-top:0}
.center{text-align:center}
.accent{color:var(--clr-gold)}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);margin:2.5rem 0}

/* Peacock + Feathers (festive) */
.peacock{position:absolute;right:-18px;bottom:-18px;width:min(22vw,180px);z-index:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.feather-field{position:fixed;inset:0;pointer-events:none;z-index:5}
.feather, .feather-eye{position:absolute;opacity:0;will-change:transform,opacity;}
.feather{width:32px;aspect-ratio:1/3;border-radius:999px}
.feather-eye{width:14px;height:14px;border-radius:999px;}
@keyframes drift{
  0%{ transform:translateY(-10vh) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.65; }
  50%{ transform:translateY(50vh) translateX(6vw) rotate(120deg); }
  100%{ transform:translateY(110vh) translateX(-6vw) rotate(240deg); opacity:0; }
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}

/* Responsive */
@media (max-width: 980px){
  .hero-wrap{grid-template-columns:1fr}
  .portfolio .grid-3{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .contact-card{grid-template-columns:1fr}
  .contact-aside{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem}
  .footer-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 720px){
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .navlinks{display:none}
  .burger{display:flex}
  .two{grid-template-columns:1fr}
  .portfolio .grid-3{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  footer .brand{align-items:center}
  footer nav a{padding:.4rem 0}
}