/* ==========================================================
   Ndyanabo Johnson Portfolio — Design System
   Palette inspired by the hills and lakes of Kabale:
   deep pine, brass gold, lake teal, warm parchment
   ========================================================== */

:root{
  --pine:      #16302A;
  --pine-dark: #0E211C;
  --gold:      #C99B3F;
  --gold-soft: #E7C77C;
  --teal:      #3E7C74;
  --cream:     #F6F4EF;
  --ink:       #1C201D;
  --grey:      #6B7570;
  --line:      #E4E0D6;
  --white:     #FFFFFF;

  --font-display: 'Fraunces', serif;
  --font-body: 'Work Sans', sans-serif;

  --radius: 10px;
  --shadow: 0 10px 30px rgba(14,33,28,0.08);
  --shadow-lg: 0 20px 50px rgba(14,33,28,0.16);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--pine-dark);line-height:1.2;margin:0 0 .5em;}
p{margin:0 0 1em;}
.container{width:100%;max-width:1180px;margin:0 auto;padding:0 24px;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5em;
  padding:13px 28px;border-radius:999px;
  font-weight:600;font-size:.95rem;cursor:pointer;border:2px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{background:var(--gold);color:var(--pine-dark);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow);background:var(--gold-soft);}
.btn-outline{border-color:var(--white);color:var(--white);}
.btn-outline:hover{background:var(--white);color:var(--pine-dark);}
.btn-dark{background:var(--pine);color:var(--white);}
.btn-dark:hover{background:var(--pine-dark);transform:translateY(-2px);}
.btn-sm{padding:9px 18px;font-size:.85rem;}

.eyebrow{
  display:inline-block;font-family:var(--font-body);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;font-size:.75rem;color:var(--teal);margin-bottom:.75em;
}

/* ---------- Topbar ---------- */
.topbar{background:var(--pine-dark);color:#cfd8d3;font-size:.82rem;}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;padding:8px 24px;flex-wrap:wrap;gap:6px;}
.topbar-contact a,.topbar-contact span{color:#cfd8d3;margin-right:20px;white-space:nowrap;}
.topbar-contact a:hover{color:var(--gold-soft);}
.topbar-social a{color:#cfd8d3;margin-left:14px;}
.topbar-social a:hover{color:var(--gold-soft);}

/* ---------- Header ---------- */
.site-header{background:var(--white);box-shadow:0 2px 12px rgba(0,0,0,.05);position:sticky;top:0;z-index:100;}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;gap:20px;}
.logo{display:flex;align-items:center;gap:12px;}
.logo-mark{
  width:46px;height:46px;border-radius:50%;background:var(--pine);color:var(--gold-soft);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  flex-shrink:0;
}
.logo-text{display:flex;flex-direction:column;line-height:1.2;}
.logo-text strong{font-family:var(--font-display);font-size:1.15rem;color:var(--pine-dark);}
.logo-text small{font-size:.72rem;color:var(--grey);}

.main-nav ul{display:flex;gap:26px;flex-wrap:wrap;}
.main-nav a{font-weight:600;font-size:.92rem;color:var(--ink);padding:8px 2px;position:relative;}
.main-nav a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--gold);transition:width .25s ease;}
.main-nav a:hover::after,.main-nav a.active::after{width:100%;}
.main-nav a.active{color:var(--pine-dark);}

.header-actions{display:flex;align-items:center;gap:14px;}
.search-form{display:flex;align-items:center;background:var(--cream);border-radius:999px;padding:4px 4px 4px 16px;border:1px solid var(--line);}
.search-form input{border:none;background:transparent;font-family:var(--font-body);font-size:.85rem;width:150px;outline:none;}
.search-form button{border:none;background:var(--pine);color:var(--white);width:32px;height:32px;border-radius:50%;cursor:pointer;}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{width:24px;height:2px;background:var(--pine-dark);}

/* ---------- Hero / Slider ---------- */
/* clamp() keeps the slider tall enough to feel like a hero on every device,
   without ever forcing a phone user to scroll past an oversized image.
   100svh (small viewport height) is used with a 100vh fallback so mobile
   browser address bars don't cause the slide to jump or get cut off. */
.hero-slider{
  position:relative;overflow:hidden;background:var(--pine-dark);
  height:100vh; height:100svh;
  min-height:460px;
  max-height:760px;
}
.slide{
  position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1s ease;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  display:flex;align-items:center;
}
.slide.active{opacity:1;visibility:visible;z-index:1;}
.slide::before{
  content:'';position:absolute;inset:0;
  /* stronger, more even overlay on small screens keeps text readable
     regardless of how bright/busy the underlying photo is */
  background:linear-gradient(100deg, rgba(14,33,28,.92) 15%, rgba(14,33,28,.65) 60%, rgba(14,33,28,.4) 100%);
}
.slide-content{position:relative;z-index:2;max-width:640px;width:100%;color:var(--white);padding:0 24px;}

/* Text entrance animation: each line drops in from above, staggered,
   whenever a slide becomes the active one. Scoped to .slide-content only
   so it never affects the same classnames used elsewhere on the site. */
@keyframes slideTextIn{
  from{opacity:0; transform:translateY(-26px);}
  to{opacity:1; transform:translateY(0);}
}
.slide-content .eyebrow,
.slide-content h1,
.slide-content p,
.slide-content .slide-actions{
  opacity:0;
}
.slide.active .slide-content .eyebrow{animation:slideTextIn .6s ease forwards; animation-delay:.1s;}
.slide.active .slide-content h1{animation:slideTextIn .7s ease forwards; animation-delay:.25s;}
.slide.active .slide-content p{animation:slideTextIn .7s ease forwards; animation-delay:.4s;}
.slide.active .slide-content .slide-actions{animation:slideTextIn .7s ease forwards; animation-delay:.55s;}

.slide-content .eyebrow{color:var(--gold-soft);}
.slide-content h1{color:var(--white);font-size:clamp(1.9rem,6vw,3.4rem);margin-bottom:.4em;word-wrap:break-word;}
.slide-content h1 em{color:var(--gold-soft);font-style:normal;}
.slide-content p{color:#dfe6e2;font-size:clamp(.95rem,2vw,1.08rem);max-width:520px;}
.slide-actions{display:flex;gap:14px;margin-top:1.4em;flex-wrap:wrap;}
.slide-actions .btn{flex:0 1 auto;}

.slider-nav{position:absolute;bottom:20px;left:0;right:0;z-index:3;display:flex;justify-content:center;gap:8px;padding:0 70px;}
.slider-nav button{
  width:28px;height:6px;border-radius:4px;border:none;background:rgba(255,255,255,.4);cursor:pointer;transition:background .2s;flex-shrink:0;
}
.slider-nav button.active{background:var(--gold);}
.slider-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.08);color:var(--white);display:flex;align-items:center;justify-content:center;
  cursor:pointer;backdrop-filter:blur(4px);transition:background .2s;
}
.slider-arrow:hover{background:rgba(255,255,255,.25);}
.slider-arrow.prev{left:12px;}
.slider-arrow.next{right:12px;}

@media (min-width: 640px){
  .slider-arrow.prev{left:24px;}
  .slider-arrow.next{right:24px;}
}

/* Hill silhouette divider — the signature motif, echoing Kabale's ridgelines */
.hills-divider{line-height:0;position:relative;z-index:2;margin-top:-6px;}
.hills-divider svg{width:100%;height:70px;display:block;fill:var(--cream);}
.hills-divider.flip svg{transform:scaleY(-1);}
.hills-divider.dark svg{fill:var(--pine-dark);}

/* ---------- Sections ---------- */
.section{padding:90px 0;}
.section-tight{padding:60px 0;}
.section-header{max-width:640px;margin:0 auto 50px;text-align:center;}
.section-header p{color:var(--grey);}
.bg-pine{background:var(--pine-dark);color:#dfe6e2;}
.bg-pine h2,.bg-pine h3,.bg-pine h4{color:var(--white);}
.bg-white{background:var(--white);}

/* ---------- About section ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:center;}
.about-photo{position:relative;}
.about-photo img{border-radius:var(--radius);box-shadow:var(--shadow-lg);}
.about-photo .badge{
  position:absolute;bottom:-20px;right:-20px;background:var(--gold);color:var(--pine-dark);
  padding:18px 22px;border-radius:var(--radius);box-shadow:var(--shadow);font-family:var(--font-display);
}
.about-photo .badge strong{display:block;font-size:1.6rem;}
.about-photo .badge span{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.about-list{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:1.4em 0;}
.about-list li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);}
.about-list li i{color:var(--teal);margin-top:4px;}

/* ---------- Services ---------- */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:26px;}
.service-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:transparent;}
.service-icon{
  width:56px;height:56px;border-radius:14px;background:var(--pine);color:var(--gold-soft);
  display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:18px;
}
.service-card h3{font-size:1.1rem;}
.service-card p{color:var(--grey);font-size:.94rem;margin-bottom:0;}

/* ---------- Cards (articles/plugins/documents/gallery reused patterns) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:28px;}
.card{background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column;}
.card-img{aspect-ratio:16/10;overflow:hidden;background:var(--line);}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.card:hover .card-img img{transform:scale(1.06);}
.card-body{padding:22px;flex:1;display:flex;flex-direction:column;}
.card-tag{display:inline-block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);margin-bottom:8px;}
.card-body h3{font-size:1.08rem;margin-bottom:8px;}
.card-body p{color:var(--grey);font-size:.92rem;flex:1;}
.card-meta{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--grey);margin-top:14px;padding-top:14px;border-top:1px solid var(--line);}

.empty-state{text-align:center;padding:60px 24px;color:var(--grey);}
.empty-state i{font-size:2.4rem;color:var(--line);margin-bottom:14px;}

/* ---------- Star ratings (read-only display, WordPress.org style) ---------- */
.star-rating{display:inline-flex;gap:2px;color:var(--gold);font-size:.85rem;margin:8px 0 2px;}
.rating-count{display:block;font-size:.78rem;color:var(--grey);margin-bottom:10px;}
.card-body .star-rating{margin-top:4px;}

/* ---------- Interactive star picker (rating submission form) ---------- */
.rate-box{margin-top:46px;padding-top:30px;border-top:1px solid var(--line);}
.star-select-form{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.star-select{display:inline-flex;flex-direction:row-reverse;gap:4px;font-size:1.6rem;}
.star-select input{position:absolute;opacity:0;width:0;height:0;}
.star-select label{color:var(--line);cursor:pointer;transition:color .15s ease;}
.star-select input:checked ~ label,
.star-select label:hover,
.star-select label:hover ~ label{color:var(--gold);}

/* ---------- Plugin detail page ---------- */
.plugin-detail-top{display:grid;grid-template-columns:260px 1fr;gap:30px;align-items:start;margin-bottom:36px;}
.plugin-detail-top img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;}
.plugin-usage-count{color:var(--grey);font-size:.92rem;margin:10px 0 18px;}
.plugin-usage-count strong{color:var(--pine-dark);}
@media (max-width:640px){
  .plugin-detail-top{grid-template-columns:1fr;}
}

/* ---------- Certifications ---------- */
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;}
.cert-card{display:flex;gap:16px;align-items:center;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:20px;}
.cert-card img{width:56px;height:56px;object-fit:contain;border-radius:8px;flex-shrink:0;}
.cert-icon{width:56px;height:56px;border-radius:50%;background:var(--pine);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.cert-card h4{margin:0 0 3px;font-size:1rem;font-family:var(--font-body);font-weight:700;}
.cert-card p{margin:0 0 4px;font-size:.85rem;color:var(--grey);}
.cert-card a{font-size:.8rem;font-weight:600;color:var(--teal);}

/* ---------- Testimonials ---------- */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.testimonial-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:28px;}
.testimonial-stars{color:var(--gold-soft);letter-spacing:2px;margin-bottom:12px;}
.testimonial-message{font-family:var(--font-display);font-size:1.05rem;font-style:italic;color:#eef1ee;line-height:1.6;}
.testimonial-author{display:flex;align-items:center;gap:12px;margin-top:18px;}
.testimonial-author img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.testimonial-avatar{width:44px;height:44px;border-radius:50%;background:var(--gold);color:var(--pine-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-display);}
.testimonial-author strong{display:block;color:var(--white);font-size:.92rem;}
.testimonial-author span{font-size:.8rem;color:#b9c4bf;}

/* Compact testimonial strip (used on Home) */
.testimonial-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.testimonial-mini{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:22px;}
.testimonial-mini .testimonial-stars{color:var(--gold);}
.testimonial-mini p{font-size:.92rem;color:var(--ink);font-style:italic;margin:8px 0 14px;}
.testimonial-mini .testimonial-author strong{color:var(--pine-dark);}
.testimonial-mini .testimonial-author span{color:var(--grey);}

/* ---------- Case studies (Services page) ---------- */
.case-study-grid{display:grid;gap:26px;}
.case-study{
  display:grid;grid-template-columns:280px 1fr;gap:0;background:var(--white);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
}
.case-study img{width:100%;height:100%;object-fit:cover;min-height:220px;}
.case-study-body{padding:26px 28px;}
.case-study-body .card-tag{margin-bottom:6px;}
.case-study-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:14px;}
.case-study-col h5{margin:0 0 6px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);}
.case-study-col p{font-size:.88rem;color:var(--grey);margin:0;}
@media (max-width:760px){
  .case-study{grid-template-columns:1fr;}
  .case-study img{min-height:180px;}
  .case-study-cols{grid-template-columns:1fr;}
}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:26px;align-items:stretch;}
.pricing-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 28px;display:flex;flex-direction:column;position:relative;
}
.pricing-card.featured{border-color:var(--gold);box-shadow:var(--shadow-lg);transform:translateY(-8px);}
.pricing-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--pine-dark);
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 16px;border-radius:999px;}
.pricing-card h3{font-size:1.15rem;margin-bottom:4px;}
.pricing-card .pricing-desc{color:var(--grey);font-size:.88rem;margin-bottom:18px;}
.pricing-price{font-family:var(--font-display);font-size:2.1rem;color:var(--pine-dark);margin-bottom:2px;}
.pricing-period{color:var(--grey);font-size:.82rem;margin-bottom:20px;display:block;}
.pricing-features{margin-bottom:26px;flex:1;}
.pricing-features li{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin-bottom:10px;}
.pricing-features i{color:var(--teal);margin-top:3px;}

/* ---------- Newsletter box ---------- */
.newsletter-box{
  background:var(--pine-dark);color:#dfe6e2;border-radius:var(--radius);padding:40px 32px;
  text-align:center;max-width:640px;margin:0 auto;
}
.newsletter-box h3{color:var(--white);}
.newsletter-form{display:flex;gap:10px;max-width:420px;margin:18px auto 0;flex-wrap:wrap;justify-content:center;}
.newsletter-form input{flex:1;min-width:200px;padding:12px 16px;border-radius:999px;border:none;font-family:var(--font-body);font-size:.9rem;}
.newsletter-form button{border-radius:999px;}

/* ---------- Floating WhatsApp button ---------- */
.whatsapp-float{
  position:fixed;bottom:24px;right:24px;z-index:500;
  width:58px;height:58px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.6rem;
  box-shadow:0 8px 20px rgba(0,0,0,.25);transition:transform .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08);}
@media (max-width:560px){
  .whatsapp-float{width:52px;height:52px;font-size:1.4rem;bottom:16px;right:16px;}
}

/* ---------- Gallery (styled like a photo wall) ---------- */
.filter-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:40px;}
.filter-pills button{
  padding:8px 20px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s ease;
}
.filter-pills button.active,.filter-pills button:hover{background:var(--pine);color:var(--white);border-color:var(--pine);}
.gallery-wall{
  columns:4 240px;column-gap:16px;
}
.gallery-item{
  break-inside:avoid;margin-bottom:16px;border-radius:var(--radius);overflow:hidden;position:relative;cursor:pointer;
  box-shadow:var(--shadow);
}
.gallery-item img{width:100%;display:block;transition:transform .4s ease;}
.gallery-item:hover img{transform:scale(1.05);}
.gallery-caption{
  position:absolute;left:0;right:0;bottom:0;padding:16px 14px 12px;
  background:linear-gradient(to top, rgba(14,33,28,.9), transparent);color:var(--white);
  font-size:.85rem;font-weight:600;opacity:0;transition:opacity .25s ease;
}
.gallery-item:hover .gallery-caption{opacity:1;}
.lightbox{position:fixed;inset:0;background:rgba(14,33,28,.92);z-index:1000;display:none;align-items:center;justify-content:center;padding:40px;}
.lightbox.open{display:flex;}
.lightbox img{max-width:90vw;max-height:85vh;border-radius:8px;}
.lightbox-close{position:absolute;top:24px;right:32px;color:var(--white);font-size:2rem;background:none;border:none;cursor:pointer;}

/* ---------- Documents list ---------- */
.doc-list{display:flex;flex-direction:column;gap:14px;}
.doc-row{
  display:flex;align-items:center;gap:18px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 22px;transition:box-shadow .2s ease;
}
.doc-row:hover{box-shadow:var(--shadow);}
.doc-icon{width:48px;height:48px;border-radius:10px;background:var(--cream);color:var(--pine);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.doc-info{flex:1;}
.doc-info h4{margin:0 0 3px;font-size:1rem;font-family:var(--font-body);font-weight:700;}
.doc-info p{margin:0;font-size:.85rem;color:var(--grey);}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;}
.contact-info-card{background:var(--pine-dark);color:#dfe6e2;border-radius:var(--radius);padding:40px 32px;}
.contact-info-card h3{color:var(--white);}
.contact-info-item{display:flex;gap:14px;margin-bottom:24px;align-items:flex-start;}
.contact-info-item i{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--gold-soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.contact-info-item strong{display:block;color:var(--white);margin-bottom:2px;}
.contact-form{background:var(--white);border-radius:var(--radius);padding:40px 34px;box-shadow:var(--shadow);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-weight:600;font-size:.85rem;margin-bottom:6px;}
.form-group input,.form-group textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:8px;font-family:var(--font-body);
  font-size:.95rem;background:var(--cream);transition:border-color .2s ease;
}
.form-group input:focus,.form-group textarea:focus{border-color:var(--teal);outline:none;background:var(--white);}
.alert{padding:14px 18px;border-radius:8px;margin-bottom:20px;font-size:.9rem;font-weight:500;}
.alert-success{background:#e4f3ea;color:#1f5c3d;}
.alert-error{background:#fbe7e4;color:#a3352a;}

/* ---------- Footer ---------- */
.site-footer{background:var(--pine-dark);color:#b9c4bf;position:relative;padding-top:6px;}
.footer-hills svg{width:100%;height:60px;fill:var(--cream);display:block;}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:40px;padding:50px 24px 30px;}
.footer-col h4{color:var(--white);font-size:1rem;margin-bottom:18px;}
.footer-logo{margin-bottom:14px;}
.footer-slogan{font-size:.9rem;max-width:280px;}
.footer-links li{margin-bottom:10px;}
.footer-links a{font-size:.9rem;transition:color .2s;}
.footer-links a:hover{color:var(--gold-soft);}
.footer-contact li{display:flex;gap:10px;margin-bottom:14px;font-size:.9rem;align-items:flex-start;}
.footer-contact i{color:var(--gold-soft);margin-top:3px;}
.footer-contact a:hover{color:var(--gold-soft);}
.footer-social{display:flex;justify-content:center;gap:14px;padding:10px 24px 30px;}
.footer-social a{
  width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;transition:all .2s ease;
}
.footer-social a:hover{background:var(--gold);color:var(--pine-dark);border-color:var(--gold);}
.footer-copy{text-align:center;border-top:1px solid rgba(255,255,255,.1);padding:20px 24px;font-size:.82rem;}

/* ---------- Page banner (interior pages) ---------- */
.page-banner{background:var(--pine-dark);color:var(--white);padding:70px 0 50px;text-align:center;position:relative;}
.page-banner h1{color:var(--white);margin-bottom:.3em;}
.page-banner .breadcrumb{color:var(--gold-soft);font-size:.85rem;font-weight:600;}
.page-banner .breadcrumb a{color:#dfe6e2;}

/* ---------- Responsive ---------- */

/* Tablet (e.g. iPad portrait) */
@media (max-width: 980px){
  .about-grid,.contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;text-align:left;}
  .gallery-wall{columns:3 200px;}
  .hero-slider{height:75vh; height:75svh; min-height:440px;}
}

/* Small tablet / large phone */
@media (max-width: 860px){
  .main-nav{
    position:fixed;top:0;right:0;height:100vh;width:280px;background:var(--white);
    transform:translateX(100%);transition:transform .3s ease;box-shadow:var(--shadow-lg);
    padding:100px 30px;z-index:200;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav ul{flex-direction:column;gap:20px;}
  .nav-toggle{display:flex;}
  .search-form{display:none;}
  .topbar-contact span{display:none;}
  .form-row{grid-template-columns:1fr;}
  .about-list{grid-template-columns:1fr;}
  .gallery-wall{columns:2 160px;}
}

/* Phones */
@media (max-width: 560px){
  .header-inner{padding:12px 16px;}
  .logo-text small{display:none;}
  .hero-slider{height:100vh; height:100svh; min-height:420px; max-height:640px;}
  .slide-content{padding:0 20px;}
  .slide-content p{max-width:none;}
  .slide-actions .btn{width:100%;justify-content:center;}
  /* Arrows crowd the text on narrow screens — dots remain for navigation */
  .slider-arrow{display:none;}
  .slider-nav{padding:0 16px;bottom:16px;}
  .gallery-wall{columns:1;}
}

/* Short/landscape phones — cap height so the slide never forces a scroll before content is visible */
@media (max-height: 480px) and (orientation: landscape){
  .hero-slider{height:100vh; height:100svh; min-height:340px; max-height:520px;}
  .slide-actions{margin-top:.8em;}
}