/* ===========================================================
   Citrustack — global styles & interactions
   Base look lives in inline styles on the markup (preserved
   exactly from the original design). This file holds the
   global resets, keyframes, hover/focus states, and the
   responsive navigation behavior.
   =========================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;}

@keyframes ctk-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes ctk-fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
::selection{background:#FFD9B8;color:#1A1410;}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation:none !important;}
}

/* --- Accessible focus outline (keyboard users) --- */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:3px solid #FF7A1A;outline-offset:2px;border-radius:6px;
}

/* --- Skip link --- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:#1A1410;color:#fff;padding:12px 18px;border-radius:0 0 10px 0;
  font-family:'Space Grotesk',sans-serif;font-weight:700;text-decoration:none;
}
.skip-link:focus{left:0;}

/* ===========================================================
   Header / navigation
   =========================================================== */
.site-header{box-shadow:0 1px 0 rgba(239,231,221,.9);transition:box-shadow .25s;}
.site-header.scrolled{box-shadow:0 10px 30px -16px rgba(26,20,16,.28);}

.nav-link{transition:color .2s;}
.nav-link:hover{color:#E8540A;}

/* desktop vs mobile nav: original switched at <= 860px */
.nav-desktop{display:flex;}
.nav-toggle{display:none;}
.mobile-menu{display:none;}
.mobile-menu.open{display:flex;}

@media (max-width:860px){
  .nav-desktop{display:none;}
  .nav-toggle{display:grid;}
}

/* ===========================================================
   Buttons & links — hover states (from style-hover)
   =========================================================== */
.btn-primary{transition:transform .2s,box-shadow .2s;}
.btn-primary:hover{transform:translateY(-2px);}

.btn-cta-sm{transition:transform .2s,box-shadow .2s;}
.btn-cta-sm:hover{transform:translateY(-1px);box-shadow:0 12px 26px -8px rgba(255,106,26,.85);}

.btn-ghost{transition:border-color .2s,color .2s;}
.btn-ghost:hover{border-color:#FF7A1A;color:#E8540A;}

.footer-link{transition:color .2s;}
.footer-link:hover{color:#fff;}

.social-link{transition:background .2s;}
.social-link:hover{background:#FF7A1A;}

/* ===========================================================
   Cards — hover lift (from style-hover)
   =========================================================== */
.card-lift{transition:transform .25s,box-shadow .25s,border-color .25s;}
.card-lift:hover{transform:translateY(-4px);border-color:#FFD3AE;box-shadow:0 24px 44px -24px rgba(232,84,10,.3);}

.work-card{transition:transform .25s,box-shadow .25s;}
.work-card:hover{transform:translateY(-4px);box-shadow:0 26px 48px -26px rgba(26,20,16,.3);}

/* ===========================================================
   Form fields — focus state (from style-focus)
   =========================================================== */
.field{transition:border-color .2s,box-shadow .2s,background .2s;}
.field:focus{border-color:#FF7A1A;background:#fff;box-shadow:0 0 0 3px rgba(255,122,26,.13);}