:root{
  --fs-xs: clamp(0.9rem, 0.85rem + 0.3vw, 1.1rem);
  --fs-sm: clamp(1rem , 0.95rem + 0.6vw, 1.3rem);
  --fs-md: clamp(1.3rem, 1.25rem + 1vw, 1.8rem);
  --fs-lg: clamp(2.2rem, 2rem   + 2vw, 3.5rem);
  --fs-xl: clamp(3.5rem, 2.5rem + 6vw, 6rem);
}

/* Base typography colours */
body            { font-size: var(--fs-sm); }
.section-title h2,
.header .nav-inner ul li a { font-size: var(--fs-lg); }

.name_a { 
  font-size: var(--fs-xl); 
  line-height: 1.1; 
  text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
  color:#fff; /* brighter cyan for mobile */
}
h1              { font-size: var(--fs-lg); }
h2              { font-size: var(--fs-md); }
h3              { font-size: var(--fs-sm); }

.subtitle{ color:#e0e0e0; }

/* Buttons brighter */
.btn{
  font-size: var(--fs-xs);
  background-color: rgba(255,255,255,0.35);
  color:#fff;
  border-color: rgba(255,255,255,0.55);
}
.btn::before{ background-color:#fff; }
.btn:hover{ color:#001a33; }

/* ------------ Breakpoints -------------------- */
@media (max-width: 991px){
  .container{ padding:0 20px; }
  .home-text,.home-img{ width:100%; }
  .home-img{ order:1; } /* ensure image below text/buttons */
  .home-img .img-box{ max-width:300px; }
  .portfolio-item{ width:calc(50% - 30px); }
}

@media (max-width: 767px){
  .row, .row.align-items-center{ flex-direction:column; }
  .about-img, .about-text, .contact-form, .contact-info{ width:100%; }
  .about-text{ margin-top:1.5rem; }
  .portfolio-item{ width:calc(100% - 30px); }
  .btn{ padding:10px 22px; }

  /* Re‑order elements in Home: image last */
  .home-wrap{ display:flex; flex-direction:column; }
  .home-wrap img{ order:2; }
  .home-wrap > div{ order:1; }
}

@media (max-width: 575px){
  html{ font-size:17px; }
  .name_a{ font-size: var(--fs-lg); }
  .header .nav-toggler{ width:44px;height:44px; }
  .avatar{ max-width:220px; }
}

/* Global helpers */
img{ width:100%; height:auto; }
.btn, .header .nav-toggler{ min-height:44px; }