:root{
    --cream: #FFFAF3;
    --cream-deep: #FFF1DE;
    --ink: #2B2420;
    --ink-soft: #5C5248;
    --orange: #F2731D;
    --orange-deep: #D85E10;
    --sky: #6FB7E0;
    --sky-pale: #DFF0FA;
    --navy: #1F3B4D;
    --gold: #F4A93E;
    --line: rgba(43,36,32,0.10);

     /* Type */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Jost', 'Helvetica Neue', sans-serif;

  /* Motion */
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slide: 850ms;
  --dur-text: 700ms;
  }

  * {
  box-sizing: border-box;
}

.site-footer{
    position: relative;
    background-color: #000;
    background-image: linear-gradient(rgba(0, 0, 0, 0.804), rgba(0, 0, 0, 0.861)), url("../images/footerbg-new.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--cream-deep);
    padding: 0 6vw 0;
    overflow: hidden;
  }
 
  /* torn-paper mountain skyline stitching the footer to the section above */
  .site-footer__skyline{
    display:block; width:100%; height: auto;
    margin-bottom: -2px;
  }
  .site-footer__skyline path{ fill: black; }
 
  /* night sky glow behind the peaks, breathing gently forever */
  .site-footer__glow{
    position:absolute; top: -40px; left: 50%;
    width: 480px; height: 260px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse, rgba(244,169,62,0.22) 0%, rgba(244,169,62,0) 70%);
    animation: sun-breathe 8s ease-in-out infinite;
    pointer-events:none;
  }
  @keyframes sun-breathe{
    0%,100%{ opacity: 0.7; transform: translateX(-50%) scale(1); }
    50%{ opacity: 1; transform: translateX(-50%) scale(1.12); }
  }
 
  /* scattered stars, each twinkling on its own clock */
  .stars{ position:absolute; inset: 0; pointer-events:none; }
  .star{
    position:absolute; border-radius: 50%;
    background: var(--gold);
    animation: twinkle 3.4s ease-in-out infinite;
  }
  @keyframes twinkle{
    0%,100%{ opacity: 0.15; transform: scale(0.8); }
    50%{ opacity: 0.95; transform: scale(1.15); }
  }
 
  .site-footer__inner{ position:relative; max-width: 1240px; margin: 0 auto; padding: 8px 0 0; }
 
  .footer-grid{
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1.3fr;
    gap: 40px;
    padding: 8px 0 48px;

    /* entrance animation — played once the parent page tells us
       this iframe has actually scrolled into view (see footer.js) */
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s var(--ease-premium), transform .9s var(--ease-premium);
  }
  .footer-grid.is-visible{
    opacity: 1;
    transform: translateY(0);
  }
  @media (prefers-reduced-motion: reduce){
    .footer-grid{ transition: none; opacity: 1; transform: none; }
  }
 
  .footer-logo{
    font-family: var(--font-display);
    font-weight: 500;
    font-style: italic;
    font-size: 26px;
    color: var(--cream);
    margin: 0 0 14px;
  }
  .footer-brand p{
    font-size: 14px; line-height: 1.65;
    color: rgba(255,250,243,0.65);
    max-width: 34ch;
    margin: 0 0 22px;
  }
 
  .footer-social{ display:flex; gap: 10px; }
  .footer-social a{
    position: relative;
    display:flex; align-items:center; justify-content:center;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,250,243,0.18);
    color: var(--cream-deep);
    text-decoration:none;
    transition: border-color var(--dur-text) var(--ease-premium), transform var(--dur-text) var(--ease-premium), color var(--dur-text) var(--ease-premium);
  }
  .footer-social a svg{ width:16px; height:16px; }
  .footer-social a:hover{
    border-color: var(--orange);
    color: var(--orange);
    transform: translateY(-3px);
  }
  .footer-social a::after{
    content:"";
    position:absolute; inset:-4px; border-radius:50%;
    border: 1px solid var(--orange);
    opacity:0; transition: opacity var(--dur-text) var(--ease-premium);
    animation: pulse-ring 2.2s ease-out infinite;
  }
  .footer-social a:hover::after{ opacity: 0.55; }
 
  .footer-col h4{
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 6px 0 20px;
  }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap: 13px; }
  .footer-col a{
    color: rgba(255,250,243,0.75);
    text-decoration:none;
    font-size: 14.5px;
    position: relative;
    transition: color var(--dur-text) var(--ease-premium);
  }
  .footer-col a::before{
    content:"";
    position:absolute; left:-14px; top:50%;
    width:5px; height:5px; border-radius:50%;
    background: var(--orange);
    transform: translateY(-50%) scale(0);
    transition: transform var(--dur-text) var(--ease-premium);
  }
  .footer-col a:hover{ color: var(--cream); }
  .footer-col a:hover::before{ transform: translateY(-50%) scale(1); }
 
  .footer-col--wide p{
    font-size: 13.5px; line-height: 1.6;
    color: rgba(255,250,243,0.6);
    margin: 0 0 18px; max-width: 36ch;
  }
 
  .footer-newsletter{
    display:flex; gap: 0;
    border: 1px solid rgba(255,250,243,0.22);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 26px;
    max-width: 340px;
    transition: border-color var(--dur-text) var(--ease-premium);
  }
  .footer-newsletter:focus-within{ border-color: var(--orange); }
  .footer-newsletter input{
    flex:1; min-width:0;
    background: transparent; border: none; outline: none;
    color: var(--cream);
    font-family: var(--font-body); font-size: 13.5px;
    padding: 9px 6px 9px 14px;
  }
  .footer-newsletter input::placeholder{ color: rgba(255,250,243,0.4); }
  .footer-newsletter button{
    display:flex; align-items:center; gap:6px;
    background: var(--orange);
    color: var(--cream);
    border:none; border-radius: 999px;
    padding: 9px 16px;
    font-family: var(--font-body); font-weight:500; font-size: 13px;
    cursor:pointer;
    transition: background var(--dur-text) var(--ease-premium), gap var(--dur-text) var(--ease-premium);
  }
  .footer-newsletter button:hover{ background: var(--orange-deep); gap: 10px; }
  .footer-newsletter button svg{ width:13px; height:13px; }
  .footer-newsletter.is-sent button{ background: var(--navy); border: 1px solid var(--gold); color: var(--gold); }
  .footer-newsletter.is-sent input{ opacity: 0.5; }
  .footer-newsletter.is-sent input::placeholder{ color: rgba(255,250,243,0.4); }
 
  .footer-contact{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .footer-contact li{
    display:flex; align-items:flex-start; gap:9px;
    font-size: 13.5px; color: rgba(255,250,243,0.7); line-height:1.5;
  }
  .footer-contact svg{ width:15px; height:15px; flex-shrink:0; margin-top:2px; color: var(--sky); }
 
  .footer-divider{
    height:0; border-top: 1.5px dashed rgba(255,250,243,0.16);
  }
 
  .footer-bottom{
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
    gap: 16px;
    padding: 22px 0 30px;
    font-size: 12.5px;
    color: rgba(255,250,243,0.55);
  }
  .footer-bottom__links{ display:flex; align-items:center; gap: 18px; }
  .footer-bottom__links a{ color: rgba(255,250,243,0.55); text-decoration:none; transition: color var(--dur-text) var(--ease-premium); }
  .footer-bottom__links a:hover{ color: var(--cream); }
 
  .back-to-top{
    display:flex; align-items:center; justify-content:center;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(255,250,243,0.06);
    border: 1px solid rgba(255,250,243,0.18);
    color: var(--cream-deep);
    cursor:pointer;
    padding: 0;
    font: inherit;
    transition: background var(--dur-text) var(--ease-premium), border-color var(--dur-text) var(--ease-premium), transform var(--dur-text) var(--ease-premium);
  }
  .back-to-top svg{ width:15px; height:15px; animation: bob-up 2s ease-in-out infinite; }
  @keyframes bob-up{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-3px); }
  }
  .back-to-top:hover{ background: var(--orange); border-color: var(--orange); transform: translateY(-3px); }
  .back-to-top:focus-visible{ outline: 2px solid var(--gold); outline-offset: 3px; }
 
  @media (max-width: 900px){
    .footer-grid{ grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  }
  @media (max-width: 560px){
    .footer-grid{ grid-template-columns: 1fr; gap: 34px; }
    .footer-bottom{ flex-direction: column; align-items: flex-start; }
  }
 
  @media (prefers-reduced-motion: reduce){
    .site-footer *{ animation: none !important; }
  }