/*
Theme Name: lightevents
Theme URI: https://wordpress.org/themes/ho/
Author: Henry Kweku aMOAH - +233243818256
Email: amoahhenry@gmail.com
Author URI: https://lighteventsgh.com/
Description: The Official Theme for lightevents
Version: 2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Accessibility
3.0 Alignments
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts
   13.5 Pages
   13.6 Footer
14.0 Comments
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/

/*--------------------------------------------------------------
1.0 Normalize
Styles based on Normalize v5.0.0 @link https://github.com/necolas/normalize.css
--------------------------------------------------------------*/


/*!
 * jQuery UI CSS Framework 1.8.23
 *
 * Copyright 2012, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */


/* ===== Reset & Base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  font-size: 1.3em;
  line-height: 1.7;
  color: #333;
  background: #fff;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color .3s ease; }
ul { list-style: none; }
h1, h2, h3, h4, h5 {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.2;
  margin-bottom: 20px;
}
h1 { font-size: 5rem; letter-spacing: 1px; }
h2 { font-size: 3rem; }
h3 { font-size: 2.4rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.3rem; font-weight: 300; letter-spacing: 2px; text-transform: uppercase; }
h6 { font-family: 'Jost', sans-serif; font-size: 1.05rem; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; color: #1a1a1a; }
p  { margin-bottom: 16px; color: #555; }
.container { width: 92%; max-width: 1320px; margin: 0 auto; }

/* ===== Buttons ===== */
.btn-outline {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid #fff;
  color: #fff;
  font-size: .78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.btn-outline:hover { background: #fff; color: #1a1a1a; }
.btn-outline-dark {
  display: inline-block;
  padding: 12px 28px;
  border: 1px solid #1a1a1a;
  color: #1a1a1a;
  font-size: .85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.btn-outline-dark:hover { background: #1a1a1a; color: #fff; }
.btn-dark {
  display: inline-block;
  padding: 14px 36px;
  background: #1a1a1a;
  color: #fff;
  font-size: .85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.btn-dark:hover { background: #b78b5a; }
.link {
  color: #555;
  font-size: .9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid #b78b5a;
  padding-bottom: 2px;
}
.link:hover { color: #1a1a1a; border-color: #1a1a1a; }

/* ===== Top Bar ===== */
.top-bar {
  background: #b2742e;
  color: #fff;
  font-size: .8rem;
  padding: 10px 0;
  letter-spacing: .5px;
}
.top-bar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.top-right span { margin-left: 22px; }
.top-bar a:hover { color: #b78b5a; }

/* ===== Header ===== */
.site-header {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
}
.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

/* Logo (center) */
.logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 4px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
}

/* Side menus */
.nav-side {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav-left  { justify-content: flex-end; }
.nav-right { justify-content: flex-start; }

.nav-side > li { position: relative; }
.nav-side > li > a {
  display: inline-block;
  padding: 12px 16px;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: .5px;
  text-transform: capitalize;
  white-space: nowrap;
}
.nav-side a:hover { color: #b78b5a; }
.caret { font-size: .65rem; margin-left: 4px; }

/* Dropdown (desktop) */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
  z-index: 200;
}
.dropdown.right { left: auto; right: 0; }
.has-dropdown:hover > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.dropdown li { position: relative; }
.dropdown a {
  display: block;
  padding: 11px 22px;
  color: #333;
  font-size: .92rem;
  letter-spacing: .3px;
  text-transform: capitalize;
  white-space: nowrap;
}
.dropdown a:hover { background: #faf6f0; color: #b78b5a; }

/* Sub-dropdown (level 2) */
.dropdown .dropdown.sub {
  top: 0;
  left: 100%;
  transform: translateX(10px);
}
.dropdown .has-dropdown:hover > .dropdown.sub { transform: translateX(0); }
.nav-right .dropdown .dropdown.sub { left: auto; right: 100%; transform: translateX(-10px); }
.nav-right .dropdown .has-dropdown:hover > .dropdown.sub { transform: translateX(0); }

/* ===== Hamburger ===== */
.hamburger {
  display: none;
  background: transparent;
  border: 0;
  width: 38px;
  height: 32px;
  position: relative;
  cursor: pointer;
  padding: 0;
  z-index: 110;
}
.hamburger span {
  display: block;
  position: absolute;
  left: 4px;
  right: 4px;
  height: 2px;
  background: #fff;
  transition: transform .35s ease, top .35s ease, opacity .25s ease;
}
.hamburger span:nth-child(1) { top: 7px; }
.hamburger span:nth-child(2) { top: 15px; }
.hamburger span:nth-child(3) { top: 23px; }
.hamburger.active span:nth-child(1) { top: 15px; transform: rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { top: 15px; transform: rotate(-45deg); }

/* ===== Mobile Nav (hidden on desktop) ===== */
.mobile-nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 320px;
  max-width: 85%;
  height: 100vh;
  background: #1a1a1a;
  padding: 90px 0 30px;
  overflow-y: auto;
  transition: right .4s ease;
  box-shadow: -10px 0 30px rgba(0,0,0,.3);
  z-index: 105;
  display: none;
}
.mobile-nav.open { right: 0; }
.mobile-nav .menu { flex-direction: column; }
.mobile-nav .menu > li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.mobile-nav .menu > li > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  color: #fff;
  font-size: .9rem;
  letter-spacing: .5px;
  text-transform: capitalize;
}
.mobile-nav .menu > li > a:hover { color: #b78b5a; }
.mobile-nav .dropdown {
  position: static;
  background: rgba(255,255,255,0.04);
  box-shadow: none;
  padding: 0;
  opacity: 1;
  visibility: hidden;
  transform: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, visibility 0s linear .4s;
  min-width: 0;
}
.mobile-nav .has-dropdown.open > .dropdown {
  visibility: visible;
  max-height: 1500px;
  transition: max-height .5s ease, visibility 0s;
}
.mobile-nav .dropdown a {
  color: #ccc;
  padding: 12px 36px;
  font-size: .82rem;
  letter-spacing: .3px;
  text-transform: capitalize;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-nav .dropdown a:hover { background: rgba(183,139,90,0.15); color: #b78b5a; }
.mobile-nav .dropdown .dropdown.sub { background: rgba(0,0,0,0.3); }
.mobile-nav .dropdown .dropdown.sub a { padding-left: 52px; }
.mobile-nav .caret { transition: transform .3s ease; }
.mobile-nav .has-dropdown.open > a > .caret { transform: rotate(180deg); }
.mobile-btn {
  display: inline-block;
  margin: 20px 24px;
  border-color: #b78b5a !important;
  color: #b78b5a !important;
}
.mobile-btn:hover { background: #b78b5a !important; color: #fff !important; }

/* ===== Hero / Video Banner ===== */
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: #000;
  color: #fff;
  text-align: center;
}

/* 4 portrait videos side-by-side, no gaps */
.hero-videos {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  width: 100%;
  height: 100%;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Top shade under the menu for legibility on any video */
.hero-top-shade {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 200px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0) 100%);
  z-index: 3;
  pointer-events: none;
}

/* Bottom gradient shade beneath hero text */
.hero-bottom-shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 55%;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 100%);
  z-index: 3;
  pointer-events: none;
}

/* Overall dark overlay so hero text stays readable */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 12vh;
}
.hero h1 { color: #fff; font-size: 6rem; margin-bottom: 30px; }
.hero h5 { color: #fff; line-height: 1.6; }
.hero-tag {
  margin-top: 40px;
  color: #fff;
  letter-spacing: 4px;
  font-size: .85rem;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,0.4);
  display: inline-block;
  padding-top: 14px;
}

/* ===== Inner Page Hero (with videos) ===== */
.page-hero {
  position: relative;
  width: 100%;
  height: 60vh;
  min-height: 420px;
  max-height: 600px;
  overflow: hidden;
  background: #000;
  color: #fff;
  text-align: center;
}
.page-hero .hero-videos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; height: 100%; }
.page-hero .hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero .hero-top-shade,
.page-hero .hero-bottom-shade,
.page-hero .hero-overlay { position: absolute; pointer-events: none; }
.page-hero .hero-top-shade { top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0) 100%); z-index: 3; }
.page-hero .hero-bottom-shade { left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.55) 35%, rgba(0,0,0,0.2) 70%, rgba(0,0,0,0) 100%); z-index: 3; }
.page-hero .hero-overlay { inset: 0; background: rgba(0,0,0,0.15); z-index: 2; }
.page-hero .hero-content {
  position: relative;
  z-index: 4;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 8vh;
}
.page-hero h1 {
    color: #fff;
    font-size: 3rem;
    margin: 0;
    letter-spacing: -2px;
    width: 70%;
}
.page-eyebrow {
  color: #fff;
  letter-spacing: 5px;
  font-size: .8rem;
  text-transform: uppercase;
  margin-bottom: 18px;
  opacity: .9;
}

/* ===== About Sections ===== */
.about-section { padding: 100px 0; background: #fff; }
.about-section.alt { background: #faf6f0; }
.about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.about-inner.reverse .about-image { order: 2; }
.about-image img {
  width: 100%;
  height: 480px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.about-text .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.about-text h3 { font-size: 2.4rem; margin-bottom: 24px; }
.about-text p { color: #555; line-height: 1.8; margin-bottom: 16px; }

/* ===== Value Proposition ===== */
.value-section { padding: 100px 0; background: #fff; text-align: center; }
.value-section .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.value-section h2 { margin-bottom: 60px; }
.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.value-card {
  background: #faf6f0;
  padding: 40px 26px;
  border-radius: 4px;
  text-align: center;
  transition: transform .35s ease, box-shadow .35s ease;
}
.value-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.1); }
.value-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: #b78b5a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px rgba(183,139,90,.25);
}
.value-icon svg { width: 28px; height: 28px; }
.value-card h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 14px;
}
.value-card p { color: #555; font-size: .92rem; }

/* ===== Article / Blog Reading Page ===== */
.article-section { padding: 90px 0; background: #fff; }
.article-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
}
.article-body { color: #333; }
.article-body img {
  width: 100%;
  border-radius: 4px;
  margin: 30px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  font-size: .75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
}
.article-meta li + li { position: relative; padding-left: 18px; }
.article-meta li + li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px;
  background: #b78b5a;
  border-radius: 50%;
  transform: translateY(-50%);
}
.article-body .lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  line-height: 1.6;
  color: #333;
  margin-bottom: 30px;
}
.article-body h2 {
  font-size: 2rem;
  margin: 40px 0 16px;
}
.article-body h3 {
  font-size: 1.5rem;
  margin: 32px 0 12px;
}
.article-body p { font-size: 1rem; line-height: 1.85; color: #444; margin-bottom: 18px; }
.article-body ul { padding-left: 20px; margin: 16px 0 24px; }
.article-body ul li { padding: 6px 0; color: #444; list-style: disc; }
.article-body blockquote {
  border-left: 4px solid #b78b5a;
  padding: 18px 26px;
  margin: 30px 0;
  background: #faf6f0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  line-height: 1.6;
  font-style: italic;
  color: #333;
  border-radius: 0 4px 4px 0;
}
.article-body blockquote cite {
  display: block;
  font-size: .85rem;
  font-style: normal;
  color: #b78b5a;
  margin-top: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Jost', sans-serif;
}

.article-tags {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #ece7df;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.tag-label {
  font-size: .75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  margin-right: 6px;
}
.tag-pill {
  display: inline-block;
  padding: 6px 14px;
  background: #faf6f0;
  border-radius: 30px;
  font-size: .78rem;
  letter-spacing: 1px;
  color: #555;
  transition: background .25s ease, color .25s ease;
}
.tag-pill:hover { background: #b78b5a; color: #fff; }

.author-bio {
  margin-top: 40px;
  padding: 26px;
  background: #faf6f0;
  border-radius: 4px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.author-bio img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
  flex: 0 0 90px;
  box-shadow: none;
}
.author-bio .overline {
  color: #b78b5a;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: .7rem;
  margin-bottom: 6px;
}
.author-bio h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  margin: 0 0 10px;
  text-transform: none;
  letter-spacing: 0;
}
.author-bio p { font-size: .92rem; margin: 0; color: #555; }

.share-row {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #ece7df;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.share-row span {
  font-size: .8rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
}
.share-row a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #faf6f0;
  color: #555;
  transition: background .25s ease, color .25s ease, transform .25s ease;
}
.share-row a:hover { background: #b78b5a; color: #fff; transform: translateY(-2px); }
.share-row svg { width: 16px; height: 16px; }

/* Sidebar */
.article-sidebar { display: flex; flex-direction: column; gap: 26px; position: sticky; top: 30px; }
.side-card {
  background: #faf6f0;
  padding: 26px 24px;
  border-radius: 4px;
}
.side-card h6 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #b78b5a;
  display: inline-block;
}
.side-list { list-style: none; padding: 0; margin: 0; }
.side-list li { padding: 0; }
.side-list a {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #ece7df;
  color: #444;
  font-size: .9rem;
  transition: color .25s ease, padding .25s ease;
}
.side-list a:hover { color: #b78b5a; padding-left: 6px; }
.side-list a span {
  color: #b78b5a;
  font-size: .8rem;
}
.recent-posts { list-style: none; padding: 0; margin: 0; }
.recent-posts li {
  display: flex;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #ece7df;
}
.recent-posts li:last-child { border-bottom: 0; }
.recent-posts img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 70px;
}
.recent-posts .date {
  display: block;
  font-size: .7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}
.recent-posts a {
  color: #1a1a1a;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}
.recent-posts a:hover { color: #b78b5a; }

.cta-card { background: #1a1a1a; color: #fff; }
.cta-card h6 { color: #fff; border-color: #b78b5a; }
.cta-card p { color: #ccc; font-size: .92rem; margin-bottom: 16px; }

/* ===== Process Steps (used on specialty + service) ===== */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  margin-top: 40px;
}
.process-step {
  text-align: center;
  padding: 30px 22px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}
.process-step:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.1); }
.step-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: #b78b5a;
  margin-bottom: 14px;
  line-height: 1;
}
.process-step h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 12px;
}
.process-step p { color: #555; font-size: .9rem; margin: 0; }

/* ===== Specialty Gallery Preview ===== */
.gallery-preview { padding: 100px 0; background: #fff; text-align: center; }
.gallery-preview .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.gallery-preview h2 { margin-bottom: 50px; }
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-tile {
  display: block;
  overflow: hidden;
  border-radius: 4px;
  position: relative;
}
.gallery-tile img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform .6s ease;
}
.gallery-tile:hover img { transform: scale(1.06); }

/* ===== Quote Band ===== */
.quote-band {
  padding: 80px 0;
  background: #1a1a1a;
  color: #fff;
  text-align: center;
}
.quote-band .container { max-width: 800px; }
.quote-symbol {
  font-family: 'Cormorant Garamond', serif;
  font-size: 6rem;
  color: #b78b5a;
  line-height: 1;
  display: block;
  margin-bottom: 10px;
}
.quote-band p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  line-height: 1.6;
  font-style: italic;
  color: #fff;
  margin-bottom: 20px;
}
.quote-band cite {
  font-style: normal;
  font-size: .85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b78b5a;
}

/* ===== Service Page (Sidebar + Main) ===== */
.service-page { padding: 90px 0; background: #fff; }
.service-inner {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}
.service-sidebar { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 30px; }
.service-list { list-style: none; padding: 0; margin: 0; }
.service-list li { padding: 0; }
.service-list a {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid #ece7df;
  color: #444;
  font-size: .92rem;
  transition: color .25s ease, padding .25s ease;
}
.service-list a:hover { color: #b78b5a; padding-left: 6px; }
.service-list li.active a {
  color: #b78b5a;
  font-weight: 500;
  padding-left: 6px;
  border-left: 3px solid #b78b5a;
  padding-left: 12px;
  background: #fff;
}

.service-main h2 { font-size: 2.4rem; margin: 24px 0 18px; }
.service-main h3 { font-size: 1.6rem; margin: 36px 0 16px; }
.service-main .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 4px;
}
.service-main .lead {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  line-height: 1.6;
  color: #333;
  margin-bottom: 24px;
  font-style: italic;
}
.service-main p { color: #444; line-height: 1.85; margin-bottom: 18px; }
.service-main blockquote {
  border-left: 4px solid #b78b5a;
  padding: 18px 26px;
  margin: 30px 0;
  background: #faf6f0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
  color: #333;
  border-radius: 0 4px 4px 0;
}
.service-main blockquote cite {
  display: block;
  font-size: .85rem;
  font-style: normal;
  color: #b78b5a;
  margin-top: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Jost', sans-serif;
}

.service-hero-image {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 30px;
  box-shadow: 0 12px 30px rgba(0,0,0,.1);
}

.check-list { list-style: none; padding: 0; margin: 16px 0 30px; }
.check-list li {
  position: relative;
  padding: 8px 0 8px 32px;
  color: #444;
  border-bottom: 1px solid #ece7df;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: #b78b5a;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .75rem;
  font-weight: bold;
}

/* FAQ accordion */
.faq-item {
  border: 1px solid #ece7df;
  border-radius: 4px;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: #fff;
  transition: box-shadow .25s ease;
}
.faq-item[open] { box-shadow: 0 8px 22px rgba(0,0,0,.06); border-color: #b78b5a; }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  color: #1a1a1a;
  font-size: 1rem;
  padding-right: 30px;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: #b78b5a;
  transition: transform .25s ease;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin: 14px 0 0;
  color: #555;
  font-size: .95rem;
  line-height: 1.7;
}

.service-cta {
  margin-top: 40px;
  padding: 36px;
  background: #faf6f0;
  border-radius: 4px;
  text-align: center;
}
.service-cta h3 { margin-top: 0; }
.btn-cta.dark { border-color: rgba(0,0,0,.6); color: #1a1a1a; }
.btn-cta.dark:hover { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }

/* ===== Contact Info Section ===== */
.contact-info-section { padding: 100px 0; background: #fff; text-align: center; }
.contact-info-section .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.contact-info-section h2 { margin-bottom: 60px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-bottom: 60px;
}
.contact-card {
  background: #faf6f0;
  padding: 40px 26px;
  border-radius: 4px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: #1a1a1a;
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.contact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,.1);
  background: #fff;
}
.contact-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #fff;
  color: #b78b5a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(183,139,90,.25);
}
.contact-icon svg { width: 28px; height: 28px; }
.contact-card h6 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  margin: 0 0 4px;
}
.contact-card p { color: #555; font-size: .95rem; margin: 0; }
.contact-card .link { margin-top: 10px; }

.contact-map {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}

/* ===== Book Us Now Form ===== */
.book-section { padding: 100px 0; background: #faf6f0; }
.book-inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 70px;
  align-items: start;
}
.book-side .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.book-side h2 { font-size: 2.6rem; margin-bottom: 24px; line-height: 1.2; }
.book-side .lead { color: #555; font-size: 1rem; line-height: 1.8; margin-bottom: 30px; }

.book-perks { list-style: none; padding: 0; margin: 0; }
.book-perks li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  color: #333;
  font-size: .95rem;
}
.book-perks .ico {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #b78b5a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
}
.book-perks .ico svg { width: 14px; height: 14px; }

.book-form {
  background: #fff;
  padding: 50px 40px;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.1);
}
.book-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.book-form .field { margin-bottom: 18px; display: flex; flex-direction: column; }
.book-form label {
  font-size: .75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 8px;
  font-weight: 500;
}
.book-form input,
.book-form select,
.book-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e5dfd5;
  border-radius: 3px;
  font-family: 'Jost', sans-serif;
  font-size: .95rem;
  color: #1a1a1a;
  background: #faf8f4;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.book-form input:focus,
.book-form select:focus,
.book-form textarea:focus {
  outline: none;
  border-color: #b78b5a;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(183,139,90,.15);
}
.book-form textarea { resize: vertical; min-height: 120px; }
.form-submit {
  width: 100%;
  justify-content: center;
  margin-top: 10px;
  border: 0;
  cursor: pointer;
  font-family: 'Jost', sans-serif;
}

/* ===== CTA Row ===== */
.cta-row {
  padding: 70px 0;
  background: #1a1a1a;
}
.cta-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
}
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 36px;
  border: 1px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: .85rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.btn-cta:hover { background: #fff; color: #1a1a1a; border-color: #fff; transform: translateY(-3px); }
.btn-cta.primary { background: #b78b5a; border-color: #b78b5a; }
.btn-cta.primary:hover { background: #1a1a1a; color: #fff; border-color: #b78b5a; }
.cta-ico { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.cta-ico svg { width: 20px; height: 20px; }

@media (max-width: 992px) {
  .page-hero h1 { font-size: 3.5rem; }
  .about-inner { grid-template-columns: 1fr; gap: 40px; }
  .about-inner.reverse .about-image { order: 0; }
  .about-image img { height: 360px; }
  .value-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .book-inner { grid-template-columns: 1fr; gap: 40px; }
  .article-inner { grid-template-columns: 1fr; gap: 40px; }
  .article-sidebar { position: static; }
  .service-inner { grid-template-columns: 1fr; gap: 40px; }
  .service-sidebar { position: static; }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .page-hero h1 { font-size: 2.4rem; }
  .page-hero { height: 50vh; min-height: 360px; }
  .about-section, .value-section, .contact-info-section, .book-section { padding: 60px 0; }
  .value-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-row { padding: 50px 0; }
  .btn-cta { padding: 14px 24px; font-size: .75rem; }
  .book-form { padding: 30px 22px; }
  .book-form .row { grid-template-columns: 1fr; gap: 0; }
  .book-side h2 { font-size: 2rem; }
  .process-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-tile img { height: 240px; }
  .article-section, .service-page, .gallery-preview, .quote-band { padding: 60px 0; }
  .author-bio { flex-direction: column; align-items: flex-start; }
  .author-bio img { width: 70px; height: 70px; flex-basis: 70px; }
  .article-body h2 { font-size: 1.6rem; }
  .service-main h2 { font-size: 1.8rem; }
  .quote-band p { font-size: 1.2rem; }
  .quote-symbol { font-size: 4rem; }
}

/* ===== Intro ===== */
.intro { padding: 70px 0; text-align: center; background: #fafafa; }
.intro-inner { /*max-width: 800px;*/ margin: 0 auto; }
.intro h5 { color: #b78b5a; margin-bottom: 30px; }

/* ===== Testimonials Slider ===== */
.testimonials-slider {
  padding: 50px 0;
  background: #faf6f0;
}
.testimonials-slider .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.testimonials-slider h2 {
  font-size: 3rem;
  margin-bottom: 60px;
}

.slider {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 30px 60px rgba(0,0,0,.12);
  background: #fff;
}
.slides {
  position: relative;
  min-height: 480px;
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  opacity: 0;
  visibility: hidden;
  transform: translateX(40px);
  transition: opacity .7s ease, transform .7s ease, visibility 0s linear .7s;
}
.slide.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity .7s ease, transform .7s ease, visibility 0s;
}

.slide-image {
  position: relative;
  overflow: hidden;
}
.slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 8s ease;
}
.slide.active .slide-image img { transform: scale(1); }

.slide-content {
  padding: 60px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fff;
  position: relative;
}
.quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 7rem;
  line-height: 1;
  color: #b78b5a;
  position: absolute;
  top: 20px;
  left: 40px;
  opacity: .25;
}
.quote-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  line-height: 1.7;
  color: #333;
  font-style: italic;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
.author {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto;
}
.author img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #b78b5a;
}
.author h6 {
  margin-bottom: 2px;
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
}
.author span {
  font-size: .8rem;
  color: #b78b5a;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Slider Buttons */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: #1a1a1a;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.slider-btn:hover { background: #b78b5a; color: #fff; transform: translateY(-50%) scale(1.05); }
.slider-btn.prev { left: 20px; }
.slider-btn.next { right: 20px; }

/* Dots */
.slider-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: background .3s ease, transform .3s ease;
}
.dot:hover { background: #fff; }
.dot.active { background: #b78b5a; transform: scale(1.3); }

@media (max-width: 768px) {
  .slides { min-height: 0; }
  .slide {
    grid-template-columns: 1fr;
    position: relative;
    inset: auto;
  }
  .slide:not(.active) { display: none; }
  .slide-image { height: 280px; }
  .slide-content { padding: 50px 30px 70px; }
  .quote-mark { font-size: 5rem; left: 20px; }
  .quote-text { font-size: 1.1rem; }
  .slider-btn { width: 40px; height: 40px; font-size: 1.2rem; }
  .slider-btn.prev { left: 10px; }
  .slider-btn.next { right: 10px; }
}

/* ===== Location ===== */
.location { padding: 120px 0; text-align: center; background: #f5f1ec; }
.location .subtitle {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .85rem;
  margin-bottom: 40px;
}
.map-frame { margin-top: 40px; box-shadow: 0 6px 30px rgba(0,0,0,.12); }

/* ===== Services Slider ===== */
.services-section { padding: 120px 0; text-align: center; background: #fff; overflow: hidden; }
.services-section .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.services-section h3 { margin-bottom: 60px; font-size: 2.8rem; }

.services-slider {
  position: relative;
  width: 100%;
  margin-bottom: 50px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.services-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: serviceScroll 50s linear infinite;
}
.services-slider:hover .services-track { animation-play-state: paused; }

@keyframes serviceScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.service-card {
  background: #fafafa;
  text-align: left;
  width: 360px;
  flex: 0 0 360px;
  padding-bottom: 28px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .35s ease, box-shadow .35s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.service-card img { width: 100%; height: 320px; object-fit: cover; margin-bottom: 20px; }
.service-card .tag {
  display: inline-block;
  margin: 0 24px 10px;
  font-size: .7rem;
  letter-spacing: 2px;
  color: #b78b5a;
  text-transform: uppercase;
}
.service-card h6 {
  margin: 0 24px 10px;
  font-size: 1.15rem;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.service-card p {
  margin: 0 24px;
  font-size: .92rem;
  color: #555;
}
.center-btn { text-align: center; }

/* ===== Developer ===== */
.developer { padding: 50px 0; background: #b2742e; color: #fff; }
.developer h3, .developer h4 { color: #fff; }
.developer p { color: #fff; }
.developer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.dev-image img { width: 100%; height: 540px; object-fit: cover; }
.dev-text .overline {
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.dev-text h4 { margin: 30px 0 16px; }
.developer .btn-outline-dark { border-color: #fff; color: #fff; margin-top: 16px; }
.developer .btn-outline-dark:hover { background: #fff; color: #1a1a1a; }

/* ===== Blog Posts ===== */
.blog-section { padding: 120px 0; background: #f5f1ec; text-align: center; }
.blog-section .overline {
  color: #b78b5a;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: .8rem;
  margin-bottom: 14px;
}
.blog-section h2 { max-width: 700px; margin: 0 auto 60px; }

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.blog-card {
  background: #fff;
  text-align: left;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  transition: transform .35s ease, box-shadow .35s ease;
  display: flex;
  flex-direction: column;
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.blog-image {
  position: relative;
  display: block;
  overflow: hidden;
  height: 240px;
}
.blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.blog-card:hover .blog-image img { transform: scale(1.06); }
.blog-category {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #b78b5a;
  color: #fff;
  padding: 6px 14px;
  font-size: .7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 2px;
}
.blog-body { padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
}
.blog-meta li { padding: 0; }
.blog-meta li + li { position: relative; padding-left: 14px; }
.blog-meta li + li::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px;
  background: #b78b5a;
  border-radius: 50%;
  transform: translateY(-50%);
}
.blog-card h5 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
  margin: 0;
  color: #1a1a1a;
}
.blog-card h5 a { color: inherit; }
.blog-card h5 a:hover { color: #b78b5a; }
.blog-card p { margin: 0; font-size: .92rem; color: #555; flex: 1; }
.blog-card .link { align-self: flex-start; margin-top: 4px; }

.center { text-align: center; }

/* ===== Footer ===== */
.site-footer { background: #111; color: #aaa; padding: 100px 0 0; font-size: .9rem; }
.site-footer h6 { color: #fff; margin-bottom: 20px; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; text-transform: none; letter-spacing: .5px; line-height: 1.6; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px;
}
.foot-col ul li { padding: 4px 0; }
.foot-col .link { color: #b78b5a; display: inline-block; margin-top: 14px; }

/* Contact list with icons */
.contact-list { padding: 0; margin: 0 0 8px; list-style: none; }
.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  color: #ccc;
}
.contact-list .ico {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: #b78b5a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.contact-list .ico svg { width: 18px; height: 18px; }
.contact-list a { color: #ccc; }
.contact-list a:hover { color: #b78b5a; }

/* Social media handle */
.social-handle {
  color: #b78b5a;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  letter-spacing: 1px;
  margin: 0 0 18px;
}

/* Social icon row */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.social li { padding: 0; }
.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #ddd;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.social a:hover {
  background: #b78b5a;
  color: #fff;
  transform: translateY(-3px);
}
.social svg { width: 18px; height: 18px; display: block; }
.footer-bottom { border-top: 1px solid #222; padding: 24px 0; font-size: .8rem; }
.footer-bottom-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.legal { display: flex; gap: 24px; }
.legal a:hover { color: #b78b5a; }

/* ===== Responsive Tweaks ===== */
@media (max-width: 1280px) {
  .nav-side > li > a { padding: 10px 10px; font-size: .9rem; }
  .logo { font-size: 1.7rem; letter-spacing: 3px; }
  .nav-inner { gap: 16px; }
}

@media (max-width: 992px) {
  .desktop-menu { display: none; }
  .hamburger { display: block; }
  .mobile-nav { display: block; }

  /* Pull header into normal flow so the wrapping top bar can't overlap it */
  .site-header {
    position: relative;
    top: 0;
    background: #1a1a1a;
    padding: 14px 0;
  }

  /* Mobile header: logo centered, hamburger on right */
  .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  .nav-inner .logo { grid-column: 2; justify-self: center; }
  .nav-inner .hamburger { grid-column: 3; justify-self: end; }

  h1 { font-size: 3.5rem; }
  .hero h1 { font-size: 4rem; }
  .hero { min-height: 600px; }
  .developer-inner { grid-template-columns: 1fr; gap: 40px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { width: 300px; flex-basis: 300px; }
  .service-card img { height: 260px; }
  .footer-grid { grid-template-columns: 1fr; gap: 40px; }
  .top-bar-inner { justify-content: center; text-align: center; }
  .top-right span { margin: 0 10px; }
}
@media (max-width: 600px) {
  h1 { font-size: 2.6rem; }
  .hero h1 { font-size: 3rem; }
  h2 { font-size: 2rem; }
  .blog-grid { grid-template-columns: 1fr; }
  .intro, .testimonials-slider, .location, .services-section, .developer, .blog-section { padding: 70px 0; }

  /* Compact top bar on mobile so it doesn't dominate */
  .top-bar { font-size: .68rem; padding: 8px 0; }
  .top-bar-inner { gap: 4px; }
  .top-right span { display: inline-block; margin: 0 6px; }

  .logo { font-size: 1.3rem; letter-spacing: 2px; }
  .nav-inner { gap: 10px; }
}