/* =========================================
   KARAOULIS.COM — Shared Stylesheet
   Palette: #3d3d3d (nav/dark), #4a4a4a (mid), #5a5a5a (light-dark), #c0392b (red accent), #fff (text)
   ========================================= */

   @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');

   /* ── Reset ── */
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   
   :root {
     --nav-bg:    #3a3a3a;
     --dark:      #464646;
     --mid:       #555555;
     --light-bg:  #e8e5e0;
     --red:       #c0392b;
     --red-hover: #a93226;
     --white:     #ffffff;
     --off-white: #f0ede8;
     --text-muted:#b0b0b0;
     --border:    rgba(255,255,255,0.12);
     --ff-display:'Cormorant Garamond', Georgia, serif;
     --ff-body:   'Inter', system-ui, sans-serif;
     --transition: 0.3s ease;
     --max-w:     1200px;
   }
   
   html { scroll-behavior: smooth; }
   
   body {
     font-family: var(--ff-body);
     background: var(--dark);
     color: var(--white);
     line-height: 1.6;
     font-size: 16px;
     -webkit-font-smoothing: antialiased;
   }
   
   a { color: inherit; text-decoration: none; }
   img { display: block; max-width: 100%; }
   
   /* ── Typography ── */
   h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 400; line-height: 1.15; }
   
   /* ── Navigation ── */
   .nav {
     position: fixed;
     top: 0; left: 0; right: 0;
     z-index: 1000;
     background: var(--nav-bg);
     height: 90px;
     display: flex;
     align-items: center;
     padding: 0 48px;
     border-bottom: 1px solid var(--border);
     transition: box-shadow var(--transition);
   }
   .nav.scrolled { box-shadow: 0 4px 30px rgba(0,0,0,0.4); }
   
   .nav-logo {
     display: flex;
     align-items: center;
     gap: 0;
     flex-shrink: 0;
   }
   .nav-logo img { height: 68px; width: auto; }
   
   .nav-links {
     display: flex;
     align-items: center;
     gap: 36px;
     margin-left: auto;
     list-style: none;
   }
   .nav-links a {
     font-family: var(--ff-body);
     font-size: 14px;
     font-weight: 400;
     letter-spacing: 0.04em;
     color: var(--white);
     opacity: 0.85;
     transition: opacity var(--transition), color var(--transition);
     position: relative;
   }
   .nav-links a::after {
     content: '';
     position: absolute;
     bottom: -4px; left: 0; right: 0;
     height: 1px;
     background: var(--red);
     transform: scaleX(0);
     transition: transform var(--transition);
     transform-origin: left;
   }
   .nav-links a:hover { opacity: 1; color: var(--white); }
   .nav-links a:hover::after { transform: scaleX(1); }
   .nav-links a.active { color: var(--red); opacity: 1; }
   .nav-links a.active::after { transform: scaleX(1); }
   
   /* Hamburger */
   .nav-toggle {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     margin-left: auto;
     padding: 8px;
     background: none;
     border: none;
     outline: none;
     -webkit-appearance: none;
     appearance: none;
     border-radius: 0;
   }
   .nav-toggle span {
     width: 24px; height: 2px;
     background: var(--white);
     border-radius: 2px;
     transition: var(--transition);
     display: block;
   }
   
   /* ── Buttons ── */
   .btn {
     display: inline-block;
     padding: 14px 32px;
     font-family: var(--ff-body);
     font-size: 13px;
     font-weight: 500;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     cursor: pointer;
     transition: all var(--transition);
     border-radius: 0;
   }
   .btn-outline {
     border: 1.5px solid var(--red);
     color: var(--red);
     background: transparent;
   }
   .btn-outline:hover {
     background: var(--red);
     color: var(--white);
   }
   .btn-solid {
     background: var(--red);
     color: var(--white);
     border: 1.5px solid var(--red);
   }
   .btn-solid:hover {
     background: var(--red-hover);
     border-color: var(--red-hover);
   }
   
   /* ── Section Labels ── */
   .section-label {
     font-family: var(--ff-body);
     font-size: 11px;
     font-weight: 600;
     letter-spacing: 0.25em;
     text-transform: uppercase;
     color: var(--red);
     margin-bottom: 32px;
   }
   
   /* ── Footer ── */
   .footer {
     background: var(--nav-bg);
     padding: 80px 48px 48px;
   }
   .footer-inner {
     max-width: var(--max-w);
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: start;
   }
   .footer-left {}
   .footer-social {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
     margin-bottom: 40px;
   }
   .footer-social a {
     width: 44px; height: 44px;
     border-radius: 50%;
     background: rgba(255,255,255,0.1);
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 18px;
     transition: background var(--transition), transform var(--transition);
     color: var(--white);
     border: 1px solid rgba(255,255,255,0.15);
   }
   .footer-social a:hover { background: var(--red); transform: translateY(-2px); border-color: var(--red); }
   .footer-links { list-style: none; margin-bottom: 40px; }
   .footer-links li { margin-bottom: 8px; }
   .footer-links a {
     font-size: 13px;
     color: var(--text-muted);
     transition: color var(--transition);
     border-bottom: 1px solid transparent;
   }
   .footer-links a:hover { color: var(--white); border-bottom-color: var(--red); }
   .footer-credit {
     font-size: 12px;
     color: var(--text-muted);
     margin-top: 8px;
   }
   .footer-credit a { color: var(--white); }
   
   .footer-right {}
   .footer-contact-info {
     margin-bottom: 40px;
   }
   .footer-contact-info a {
     display: block;
     font-family: var(--ff-display);
     font-size: clamp(22px, 2.5vw, 32px);
     font-weight: 400;
     color: var(--white);
     line-height: 1.4;
     transition: color var(--transition);
   }
   .footer-contact-info a:hover { color: var(--red); }
   
   /* Subscribe widget */
   .footer-subscribe {
     background: var(--off-white);
     padding: 36px;
     border-radius: 2px;
   }
   .footer-subscribe label {
     display: block;
     font-size: 14px;
     font-weight: 600;
     color: #333;
     margin-bottom: 14px;
   }
   .footer-subscribe label span { color: var(--red); }
   .footer-subscribe input[type="email"] {
     width: 100%;
     padding: 14px 16px;
     border: 1px solid #ccc;
     background: var(--white);
     font-size: 14px;
     font-family: var(--ff-body);
     margin-bottom: 6px;
     outline: none;
     transition: border-color var(--transition);
     border-radius: 2px;
   }
   .footer-subscribe input[type="email"]:focus { border-color: var(--red); }
   .footer-subscribe .hint {
     font-size: 11px;
     color: #888;
     margin-bottom: 16px;
   }
   .footer-subscribe .checkbox-row {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     margin-bottom: 6px;
   }
   .footer-subscribe .checkbox-row input { margin-top: 3px; flex-shrink: 0; accent-color: var(--red); }
   .footer-subscribe .checkbox-row span { font-size: 12px; color: #444; line-height: 1.5; }
   .footer-subscribe .unsubscribe-note { font-size: 11px; color: #888; margin-bottom: 20px; }
   .footer-subscribe .btn-sub {
     background: var(--red);
     color: var(--white);
     border: none;
     padding: 13px 28px;
     font-family: var(--ff-body);
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     cursor: pointer;
     transition: background var(--transition);
     border-radius: 2px;
   }
   .footer-subscribe .btn-sub:hover { background: var(--red-hover); }
   
   /* ── Page offset for fixed nav ── */
   .page-top { padding-top: 90px; }

   /* ── Section divider accent ── */
   .section-divider-accent {
     height: 3px;
     background: var(--red);
     border: none;
     margin: 0;
   }
   
   /* ── Divider ── */
   .divider {
     border: none;
     border-top: 1px solid var(--border);
     margin: 0;
   }
   
   /* ── Utility ── */
   .container { max-width: var(--max-w); margin: 0 auto; padding: 0 48px; }
   .text-red { color: var(--red); }
   
   /* ── Animations ── */
   @keyframes fadeUp {
     from { opacity: 0; transform: translateY(48px); }
     to   { opacity: 1; transform: translateY(0); }
   }
   .fade-up {
     opacity: 0;
     transform: translateY(56px);
     transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
                 transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
     will-change: opacity, transform;
   }
   .fade-up.visible { opacity: 1; transform: translateY(0); }
   
   /* ── Responsive ── */
   @media (max-width: 900px) {
     .nav { padding: 0 24px; }
     .nav-links { display: none; flex-direction: column; position: absolute; top: 90px; left: 0; right: 0; background: var(--nav-bg); padding: 24px; gap: 20px; border-bottom: 1px solid var(--border); z-index: 999; }
     .nav-links.open { display: flex; }
     .nav-toggle { display: flex; }
     .container { padding: 0 24px; }
     .footer { padding: 60px 24px 40px; }
     .footer-inner { grid-template-columns: 1fr; gap: 48px; }
   }

   @media (max-width: 640px) {
     .footer-contact-info a {
       font-size: clamp(16px, 5vw, 22px);
       word-break: break-word;
     }
     .footer-subscribe { padding: 28px 24px; }
     .footer-social { gap: 8px; }
     .footer-social a { width: 38px; height: 38px; font-size: 15px; }
   }

   @media (max-width: 480px) {
     .nav { height: 72px; }
     .nav-logo svg { width: 100px; height: 50px; }
     .page-top { padding-top: 72px; }
     .nav-links { top: 72px; }
     .btn { padding: 12px 22px; font-size: 12px; }
     .footer { padding: 48px 20px 32px; }
   }