/* ============================================================
   CAESAR'S ANGELS — GLOBAL DESIGN SYSTEM v6
   Heritage Olive Scheme: #9FAA89 · Saffron #E07B00 · Charcoal #2B2A27
   ============================================================ */
   @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Outfit:wght@300;400;500;600&family=Playfair+Display:ital,wght@1,300;1,400&display=swap');

   :root {
     --void:       #9FAA89;   /* Heritage Olive — main page background */
     --deep:       #8A9675;   /* deeper olive — nav, footer */
     --base:       #A8B492;   /* section alternates */
     --surface:    #B3BE9E;   /* card backgrounds */
     --raised:     #BBC6A6;   /* hover states */
     --smoke:      #7D8A6A;   /* borders/dividers */
   
     --forest-1:   #3D6B30;   /* deep forest — primary accent on light bg */
     --forest-2:   #4F7A42;   /* mid forest */
     --forest-3:   #617F55;   /* muted forest */
     --sage:       #4A6B3A;   /* dark sage — readable on mint */
     --mint:       #9FAA89;   /* same as void */
   
     --gold:       #E07B00;   /* Deep Saffron — vibrant on Heritage Olive */
     --label:      #A0522D;   /* Burnt Sienna — s-label text, readable at small size */
     --gold-hi:    #F28C1A;   /* brighter saffron on hover */
     --gold-lo:    #A05800;
   
     --text-1:     #2B2A27;   /* Soft Charcoal — headings */
     --text-2:     #36332E;   /* Warm Graphite — body text */
     --text-3:     #4B463F;   /* Dark Tongue — captions */
   
     --border-1:   rgba(43,42,39,0.12);
     --border-2:   rgba(43,42,39,0.22);
     --border-g:   rgba(224,123,0,0.30);
   
     --font-disp:  'Bebas Neue', 'Cormorant Garamond', Georgia, serif;
     --font-serif: 'Cormorant Garamond', Georgia, serif;
     --font-body:  'Outfit', system-ui, sans-serif;
     --font-ital:  'Playfair Display', Georgia, serif;
   
     --ease-out:   cubic-bezier(0.16,1,0.3,1);
     --ease-spr:   cubic-bezier(0.34,1.56,0.64,1);
   
     --nav-h:      72px;
     --gutter:     clamp(1.4rem, 5vw, 4rem);
     --max-w:      1400px;
   }
   
   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
   body {
     font-family: var(--font-body);
     font-weight: 300; font-size: 1rem; line-height: 1.75;
     color: var(--text-1); background: var(--void);
     overflow-x: hidden; -webkit-font-smoothing: antialiased; cursor: none;
   }
   body.is-loading { overflow: hidden; }
   img, video, iframe { max-width: 100%; display: block; }
   a { color: inherit; text-decoration: none; }
   button { font-family: var(--font-body); cursor: none; border: none; background: none; padding: 0; }
   ul, ol { list-style: none; }
   input, textarea, select { font-family: var(--font-body); }
   
   /* ── Cursor ── */
   .cursor-dot {
     position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%;
     background: var(--gold); pointer-events: none; z-index: 9999;
     transform: translate(-50%,-50%);
     box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
     transition: width 100ms, height 100ms, opacity 200ms;
   }
   .cursor-dot.big { width: 16px; height: 16px; }
   @media (hover:none) and (pointer:coarse) {
     .cursor-dot { display: none !important; }
     body, button { cursor: auto; } a, button { cursor: pointer; }
   }
   
   /* ── Loader ── */
   #loader {
     position: fixed; inset: 0; z-index: 5000; background: var(--void);
     display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 20px;
     transition: opacity 700ms var(--ease-out);
   }
   #loader.out  { opacity: 0; pointer-events: none; }
   #loader.gone { display: none; }
   .loader-logo {
     height: clamp(18px, 2.2vw, 26px); width: auto;
     /* Left-to-right reveal: clip-path wipes the logo from left */
     clip-path: inset(0 100% 0 0);
     animation: ldr-reveal 2200ms 600ms cubic-bezier(0.4,0,0.2,1) forwards;
   }
   @keyframes ldr-reveal {
     0%   { clip-path: inset(0 100% 0 0); }
     100% { clip-path: inset(0 0% 0 0); }
   }
   /* Keep loader-bar in HTML for compatibility but make it invisible */
   .loader-bar { display: none; }
   
   /* ── Nav ── */
   .site-nav {
     position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 500;
     padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between;
     transition: background 400ms, border-color 400ms; border-bottom: 1px solid transparent;
   }
   .site-nav.scrolled {
     background: rgba(138,150,117,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
     border-color: var(--border-1);
   }
   .nav-logo-img { height: clamp(13px, 1.8vw, 20px); width: auto; display: block; opacity: 0.9; transition: opacity 250ms; }
   .nav-logo-img:hover { opacity: 1; }
   .nav-links { display: flex; align-items: center; gap: clamp(1.5rem, 2.5vw, 2.5rem); }
   .nav-links a { font-size: clamp(0.58rem, 0.8vw, 0.68rem); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-2); transition: color 250ms; }
   .nav-links a:hover, .nav-links a.active { color: var(--text-1); }
   .nav-cta { font-size: clamp(0.58rem, 0.8vw, 0.65rem) !important; color: var(--label) !important; border: none; padding: 0; transition: color 250ms !important; }
   .nav-cta:hover { color: var(--gold) !important; }
   .nav-burger { display: none; flex-direction: column; gap: 5px; padding: 4px; cursor: none; }
   .nav-burger span { display: block; width: 20px; height: 1px; background: var(--text-2); transition: transform 300ms, opacity 300ms; }
   .nav-burger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); background: var(--text-1); }
   .nav-burger.open span:nth-child(2) { opacity: 0; }
   
   /* ── Mobile drawer ── */
   .drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 510; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
   .drawer-overlay.show { display: block; }
   .mobile-drawer {
     position: fixed; top: 0; right: 0; width: min(340px, 100vw); height: 100dvh;
     background: rgba(159,170,137,0.99); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
     border-left: 1px solid var(--border-1); z-index: 520; transform: translateX(100%);
     transition: transform 500ms var(--ease-out); display: flex; flex-direction: column;
     padding: clamp(1.2rem, 4vw, 2rem);
   }
   .mobile-drawer.open { transform: translateX(0); }
   .mobile-drawer__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: clamp(2rem, 8vw, 3.5rem); }
   .drawer-logo-img { height: 15px; width: auto; }
   .mobile-drawer__close { font-size: 1rem; color: var(--text-3); cursor: none; transition: color 200ms; }
   .mobile-drawer__close:hover { color: var(--text-1); }
   .mobile-drawer__links { display: flex; flex-direction: column; flex: 1; }
   .mobile-drawer__link {
     display: flex; align-items: center; gap: 1rem; padding: clamp(0.85rem, 3vw, 1.15rem) 0;
     border-bottom: 1px solid var(--border-1); font-family: var(--font-body);
     font-size: clamp(0.65rem, 2.5vw, 0.78rem); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
     color: var(--text-2); transition: color 250ms, padding-left 250ms;
   }
   .mobile-drawer__link:hover { color: var(--text-1); padding-left: 0.5rem; }
   .mobile-drawer__num { font-family: var(--font-body); font-size: 0.58rem; font-weight: 400; letter-spacing: 0.2em; color: var(--gold); }
   .mobile-drawer__footer { padding-top: 1.4rem; border-top: 1px solid var(--border-1); }
   .mobile-drawer__tagline { font-family: var(--font-ital); font-style: italic; font-weight: 300; font-size: 0.75rem; line-height: 1.75; color: var(--text-3); }
   
   /* ── Page wrapper ── */
   .page-wrap { padding-top: var(--nav-h); }
   .section { padding: clamp(4rem, 8vw, 8rem) var(--gutter); }
   .section--sm { padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter); }
   .section-inner { max-width: var(--max-w); margin: 0 auto; }
   
   /* ── Labels & headings ── */
   .s-label { display: block; font-family: var(--font-body); font-size: clamp(0.58rem, 0.8vw, 0.65rem); font-weight: 400; letter-spacing: 0.28em; text-transform: uppercase; color: var(--label); margin-bottom: 1.25rem; }
   .h-display { font-family: var(--font-disp); font-size: clamp(3.5rem, 8vw, 8rem); font-weight: 400; line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; }
   .h-xl      { font-family: var(--font-disp); font-size: clamp(2.8rem, 6vw, 6rem); font-weight: 400; line-height: 0.92; letter-spacing: 0.02em; text-transform: uppercase; }
   .h-lg      { font-family: var(--font-disp); font-size: clamp(2rem, 4vw, 4.2rem); font-weight: 400; line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; }
   .h-md      { font-family: var(--font-disp); font-size: clamp(1.6rem, 2.8vw, 3rem); font-weight: 400; line-height: 1.0; letter-spacing: 0.02em; text-transform: uppercase; }
   .h-serif   { font-family: var(--font-serif); font-size: clamp(1.8rem, 3.5vw, 3.6rem); font-weight: 300; line-height: 1.0; }
   .body-lg { font-family: var(--font-body); font-size: clamp(0.95rem, 1.2vw, 1.05rem); font-weight: 300; color: var(--text-2); line-height: 1.9; }
   .body-sm { font-family: var(--font-body); font-size: clamp(0.8rem, 1vw, 0.88rem); font-weight: 300; color: var(--text-2); line-height: 1.85; }
   .hero-gold { color: var(--gold) !important; }
   
   /* ── Buttons — NO boxes, text + arrow only ── */
   .btn-gold {
     display: inline-flex; align-items: center; gap: 0.6em; padding: 0;
     font-size: clamp(0.6rem, 0.85vw, 0.68rem); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
     color: var(--label); background: none; border: none; transition: color 250ms, gap 280ms; cursor: none;
   }
   .btn-gold:hover { color: var(--gold); gap: 0.9em; }
   .btn-outline {
     display: inline-flex; align-items: center; gap: 0.6em; padding: 0;
     font-size: clamp(0.6rem, 0.85vw, 0.68rem); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase;
     color: var(--text-1); background: none; border: none; transition: color 250ms, gap 280ms; cursor: none;
   }
   .btn-outline:hover { color: var(--label); gap: 0.9em; }
   .t-link { font-size: clamp(0.6rem, 0.85vw, 0.68rem); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--label); transition: letter-spacing 280ms var(--ease-out), color 250ms; }
   .t-link:hover { letter-spacing: 0.3em; color: var(--gold); }
   
   /* ── Reveal animations ── */
   [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
   [data-reveal].on { opacity: 1; transform: none; }
   [data-stagger] > * { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
   [data-stagger].on > *:nth-child(1) { transition-delay: 0ms; }
   [data-stagger].on > *:nth-child(2) { transition-delay: 90ms; }
   [data-stagger].on > *:nth-child(3) { transition-delay: 180ms; }
   [data-stagger].on > *:nth-child(4) { transition-delay: 270ms; }
   [data-stagger].on > *:nth-child(5) { transition-delay: 360ms; }
   [data-stagger].on > * { opacity: 1; transform: none; }
   
   .img-zoom { overflow: hidden; }
   .img-zoom img { transition: transform 900ms var(--ease-out); }
   .img-zoom:hover img { transform: scale(1.04); }
   
   .grain {
     position: absolute; inset: 0; pointer-events: none; z-index: 2; opacity: 0.025;
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
     background-size: 160px;
   }
   
   /* ── Footer ── */
   .site-footer { background: var(--deep); border-top: 1px solid var(--border-1); padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); }
   .site-footer__inner { max-width: var(--max-w); margin: 0 auto; }
   .site-footer__top { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 5rem); padding-bottom: clamp(2rem, 4vw, 3.5rem); border-bottom: 1px solid var(--border-1); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
   .footer-brand__logo { height: clamp(11px, 1.4vw, 16px); width: auto; margin-bottom: 1.25rem; }
   .footer-brand__tagline { font-family: var(--font-ital); font-style: italic; font-weight: 300; font-size: 0.88rem; line-height: 1.75; color: var(--text-3); }
   .footer-col__title { font-size: 0.6rem; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase; color: var(--label); margin-bottom: 1rem; display: block; }
   .footer-col a { display: block; font-size: 0.82rem; font-weight: 300; color: var(--text-3); margin-bottom: 0.6rem; transition: color 250ms; }
   .footer-col a:hover { color: var(--text-1); }
   .footer-social { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.5rem; align-items: center; }
   .footer-social__link { display: flex; align-items: center; justify-content: center; color: var(--text-3); transition: color 250ms; cursor: none; text-decoration: none; }
   .footer-social__link:hover { color: var(--gold); }
   .footer-social__link svg { width: 18px; height: 18px; fill: currentColor; display: block; }
   .site-footer__bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.62rem; font-weight: 300; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-3); }
   
   /* ── Forms ── */
   .form-group { display: flex; flex-direction: column; gap: 0.5rem; }
   .form-label { font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--label); font-weight: 400; }
   .form-input, .form-textarea { background: transparent; border: none; border-bottom: 1px solid var(--border-2); padding: 0.8rem 0; color: var(--text-1); font-family: var(--font-body); font-size: 0.92rem; font-weight: 300; width: 100%; outline: none; transition: border-color 250ms; }
   .form-input:focus, .form-textarea:focus { border-color: var(--forest-1); }
   .form-input::placeholder, .form-textarea::placeholder { color: var(--text-3); }
   .form-textarea { resize: vertical; min-height: 90px; }
   .form-select { cursor: none; background: var(--surface); padding: 0.75rem; border: 1px solid var(--border-2); color: var(--text-1); font-family: var(--font-body); font-size: 0.9rem; font-weight: 300; width: 100%; outline: none; transition: border-color 250ms; }
   .form-select:focus { border-color: var(--forest-1); }
   .form-select option { background: var(--surface); }
   
   /* ── Scrollbar & selection ── */
   ::-webkit-scrollbar { width: 2px; }
   ::-webkit-scrollbar-track { background: var(--void); }
   ::-webkit-scrollbar-thumb { background: var(--forest-2); }
   ::-webkit-scrollbar-thumb:hover { background: var(--forest-1); }
   ::selection { background: rgba(67,96,50,0.35); color: var(--sage); }
   
   /* ── Responsive ── */
   @media (max-width: 900px) { .site-footer__top { grid-template-columns: 1fr auto; gap: clamp(1.5rem,4vw,3rem); } }
   @media (max-width: 768px) { .nav-links { display: none; } .nav-burger { display: flex; } }
   @media (max-width: 600px) { .site-footer__top { grid-template-columns: 1fr; gap: 1.75rem; } .site-footer__bottom { flex-direction: column; gap: 0.75rem; text-align: center; } }
   @media (prefers-reduced-motion:reduce) {
     *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
     [data-reveal], [data-stagger] > * { opacity: 1; transform: none; }
   }
   
   /* ── Social bar — slim icon strip at page bottom ── */
   .social-bar {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 1.75rem;
     padding: 1.75rem var(--gutter);
     border-top: 1px solid var(--border-1);
     background: var(--deep);
   }
   
   .social-bar__link {
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--text-3);
     transition: color 250ms, transform 200ms;
     cursor: none;
     text-decoration: none;
   }
   
   .social-bar__link svg {
     width: 20px;
     height: 20px;
     fill: currentColor;
     display: block;
   }
   
   .social-bar__link:hover {
     transform: scale(1.15);
   }
   
   /* Brand colours on hover */
   .social-bar__link:first-child:hover { color: #E1306C; }  /* Instagram pink */
   .social-bar__link--yt:hover         { color: #FF0000; }  /* YouTube red */
   
   /* Touch devices — larger tap targets */
   @media (hover: none) and (pointer: coarse) {
     .social-bar { padding: 1.5rem var(--gutter); gap: 2.5rem; cursor: auto; }
     .social-bar__link { min-width: 44px; min-height: 44px; cursor: pointer; }
     .social-bar__link svg { width: 22px; height: 22px; }
   }
   
   @media (max-width: 480px) {
     .social-bar { gap: 2rem; padding: 1.25rem var(--gutter); }
   }
   
   /* ── Footer social brand hover colours ── */
   .footer-social__link:hover         { color: #E1306C; }  /* Instagram */
   .footer-social__link--yt:hover     { color: #FF0000; }  /* YouTube */