/* AYD shared stylesheet — used by every page (index.html, about/, services/, work/, contact/) */

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Manrope',sans-serif; background:#F4EFE5; color:#1B1A18; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }

/* ---------- animations ---------- */
@keyframes aydBob { 0%,100%{ transform:translateY(0) rotate(-1.1deg);} 50%{ transform:translateY(-7px) rotate(1.3deg);} }
@keyframes aydWaveA { from{ transform:translateX(0);} to{ transform:translateX(-80px);} }
@keyframes aydWaveB { from{ transform:translateX(0);} to{ transform:translateX(80px);} }
@keyframes aydDrift { 0%{ transform:translateX(-6px); opacity:0;} 25%{ opacity:.9;} 75%{ opacity:.9;} 100%{ transform:translateX(34px); opacity:0;} }
@keyframes aydShimmer { 0%,100%{ opacity:.82;} 50%{ opacity:1;} }
@keyframes aydFade { from{ transform:translateY(12px); opacity:0;} to{ transform:translateY(0); opacity:1;} }
@keyframes aydHalo { 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:.8; transform:scale(1.05);} }
@keyframes aydDrop { from{ opacity:0; transform:translateY(-8px);} to{ opacity:1; transform:translateY(0);} }
@keyframes aydLoopTri { 0%{ opacity:0; transform:translate(-70px,-50px);} 8%,80%{ opacity:1; transform:translate(0,0);} 92%,100%{ opacity:0; transform:translate(-70px,-50px);} }
@keyframes aydLoopAxe { 0%,8%{ opacity:0; transform:translate(70px,-60px);} 16%,80%{ opacity:1; transform:translate(0,0);} 92%,100%{ opacity:0; transform:translate(70px,-60px);} }
@keyframes aydLoopHull { 0%,16%{ opacity:0; transform:translate(-90px,30px);} 26%,80%{ opacity:1; transform:translate(0,0);} 92%,100%{ opacity:0; transform:translate(-90px,30px);} }
@keyframes aydItemLoopA { 0%{ opacity:0; transform:translateY(10px);} 8%,80%{ opacity:1; transform:translateY(0);} 92%,100%{ opacity:0; transform:translateY(10px);} }
@keyframes aydItemLoopY { 0%,8%{ opacity:0; transform:translateY(10px);} 16%,80%{ opacity:1; transform:translateY(0);} 92%,100%{ opacity:0; transform:translateY(10px);} }
@keyframes aydItemLoopD { 0%,16%{ opacity:0; transform:translateY(10px);} 26%,80%{ opacity:1; transform:translateY(0);} 92%,100%{ opacity:0; transform:translateY(10px);} }
@keyframes aydItemIn { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.ayd-mark-triangle { animation:aydLoopTri 6s ease-in-out infinite; }
.ayd-mark-axe { animation:aydLoopAxe 6s ease-in-out infinite; }
.ayd-mark-hull { animation:aydLoopHull 6s ease-in-out infinite; }
.ayd-mark-glow { filter:drop-shadow(0 0 12px rgba(218,192,145,0.9)); }
.ayd-story-items > div:nth-child(1) { animation:aydItemLoopA 6s ease-in-out infinite; }
.ayd-story-items > div:nth-child(2) { animation:aydItemLoopY 6s ease-in-out infinite; }
.ayd-story-items > div:nth-child(3) { animation:aydItemLoopD 6s ease-in-out infinite; }
.ayd-page-enter { animation:aydFade 0.5s ease; }

/* ---------- responsive grids ---------- */
.ayd-grid-3 { grid-template-columns:repeat(3,1fr); }
.ayd-grid-2 { grid-template-columns:repeat(2,1fr); }
.ayd-grid-story { grid-template-columns:0.9fr 1.1fr; }
.ayd-grid-about { grid-template-columns:0.8fr 1.2fr; }
.ayd-grid-footer { grid-template-columns:1.4fr 1fr 1fr; }
.ayd-hamburger { display:none; }

/* ---------- card strips: auto-scroll + hover-pause on desktop, plain swipe on mobile ---------- */
@keyframes aydMarquee { from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ayd-marquee-wrap { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.ayd-marquee-track { display:flex; gap:1.25rem; width:max-content; animation:aydMarquee 26s linear infinite; }
.ayd-marquee-track-slow { animation-duration:70s; }
.ayd-marquee-wrap:hover .ayd-marquee-track { animation-play-state:paused; }

@media (max-width:768px) {
  .ayd-marquee-wrap {
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  .ayd-marquee-wrap::-webkit-scrollbar { display:none; }
  .ayd-marquee-track { animation:none !important; }
  .ayd-marquee-track > * { scroll-snap-align:start; }
  .ayd-marquee-duplicate { display:none !important; }
}

/* ---------- nav ---------- */
.ayd-nav { position:sticky; top:0; z-index:100; height:66px; background:rgba(27,26,24,0.97); backdrop-filter:blur(8px); border-bottom:3px solid #C8A876; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(1.25rem,4vw,3rem); }
.ayd-logo { display:flex; align-items:center; gap:0.6rem; text-decoration:none; }
.ayd-logo span { font-weight:800; font-size:1.05rem; letter-spacing:0.16em; color:#F4EFE5; }
.ayd-nav-links { display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.1rem); }
.ayd-nav-links > a, .ayd-services-item > a { text-decoration:none; font-size:0.86rem; font-weight:500; letter-spacing:0.01em; color:rgba(244,239,229,0.72); }
.ayd-nav-links > a:hover, .ayd-nav-links > a.ayd-active, .ayd-services-item > a:hover, .ayd-services-item > a.ayd-active { color:#C8A876; }
.ayd-nav-cta { font-size:0.82rem !important; font-weight:700 !important; color:#1B1A18 !important; background:#C8A876; padding:0.55rem 1.15rem; border-radius:100px; }
.ayd-nav-cta:hover { background:#DAC091; }
.ayd-services-item { position:relative; }
.ayd-services-chevron { transition:transform .15s ease; }
.ayd-services-flyout { display:none; position:absolute; top:100%; left:50%; transform:translateX(-50%); width:300px; padding-top:14px; }
.ayd-services-item:hover .ayd-services-flyout { display:block; }
.ayd-flyout-panel { position:relative; background:#211F1C; border:1px solid rgba(200,168,118,0.25); border-radius:14px; padding:0.6rem; box-shadow:0 24px 50px rgba(0,0,0,0.4); animation:aydDrop 0.22s ease; }
.ayd-flyout-arrow { position:absolute; top:-6px; left:50%; transform:translateX(-50%) rotate(45deg); width:12px; height:12px; background:#211F1C; border-left:1px solid rgba(200,168,118,0.25); border-top:1px solid rgba(200,168,118,0.25); }
.ayd-flyout-label { padding:0.5rem 0.7rem 0.3rem; font-size:0.62rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#B8965E; }
.ayd-flyout-divider { height:1px; background:rgba(200,168,118,0.18); margin:0.4rem 0.3rem; }
.ayd-flyout-item { display:block; padding:0.55rem 0.7rem; border-radius:9px; text-decoration:none; }
.ayd-flyout-item:hover { background:rgba(200,168,118,0.12); }
.ayd-flyout-item span { font-size:0.82rem; font-weight:600; color:#F4EFE5; }
.ayd-flyout-item.ayd-flyout-cta span { font-size:0.8rem; font-weight:700; color:#C8A876; }

@media (max-width:768px) {
  .ayd-grid-3, .ayd-grid-2, .ayd-grid-story, .ayd-grid-about, .ayd-grid-footer {
    grid-template-columns:1fr !important;
  }
  .ayd-hamburger { display:flex !important; }
  .ayd-services-flyout { display:none !important; }
  .ayd-services-chevron { display:none !important; }
  .ayd-nav-links { display:none !important; }
  .ayd-nav-links.ayd-nav-open {
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    gap:0 !important;
    position:absolute;
    top:66px; left:0; right:0;
    background:#1B1A18;
    border-bottom:3px solid #C8A876;
    padding:0.5rem clamp(1.25rem,4vw,3rem) 1.25rem;
  }
  .ayd-nav-links.ayd-nav-open > a, .ayd-nav-links.ayd-nav-open > div {
    width:100%;
    padding:0.85rem 0;
  }
}

/* ---------- buttons ---------- */
.ayd-btn-gold { display:inline-flex; align-items:center; gap:0.45rem; background:#C8A876; color:#1B1A18; font-weight:700; font-size:0.9rem; padding:0.85rem 1.7rem; border-radius:9px; text-decoration:none; border:2px solid #C8A876; }
.ayd-btn-gold:hover { background:#DAC091; border-color:#DAC091; }
.ayd-btn-outline-dark { display:inline-flex; align-items:center; color:#F4EFE5; font-weight:700; font-size:0.9rem; padding:0.85rem 1.7rem; border-radius:9px; text-decoration:none; border:2px solid rgba(200,168,118,0.5); }
.ayd-btn-outline-dark:hover { border-color:#C8A876; }
.ayd-cta-row { display:flex; gap:0.8rem; flex-wrap:wrap; justify-content:center; }
.ayd-link-gold { color:#8a6d3f; text-decoration:none; font-weight:700; font-size:0.85rem; }
.ayd-link-gold:hover { color:#1B1A18; }

/* ---------- footer ---------- */
.ayd-footer-link { text-decoration:none; font-size:0.85rem; color:rgba(244,239,229,0.7); }
.ayd-footer-link:hover { color:#C8A876; }

/* ---------- chat widget ---------- */
#aydChatToggle { position:fixed; right:1.5rem; bottom:1.5rem; z-index:200; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; background:#C8A876; box-shadow:0 8px 24px rgba(27,26,24,0.25); display:flex; align-items:center; justify-content:center; }
#aydChatToggle:hover { background:#DAC091; }
#aydChatPanel { position:fixed; right:1.5rem; bottom:5.5rem; z-index:200; width:340px; max-width:calc(100vw - 2rem); height:460px; max-height:calc(100vh - 8rem); background:#FBF8F1; border:1px solid #E0D5C0; border-radius:16px; box-shadow:0 24px 60px rgba(27,26,24,0.28); display:none; flex-direction:column; overflow:hidden; }
#aydChatPanel.ayd-chat-open { display:flex; }
#aydChatHeader { background:#1B1A18; color:#F4EFE5; font-weight:700; font-size:0.92rem; padding:0.9rem 1.1rem; display:flex; align-items:center; justify-content:space-between; border-bottom:3px solid #C8A876; flex-shrink:0; }
#aydChatClose { background:none; border:none; color:#F4EFE5; font-size:1.3rem; line-height:1; cursor:pointer; padding:0; }
#aydChatMessages { flex:1; overflow-y:auto; padding:1rem; display:flex; flex-direction:column; gap:0.6rem; }
.ayd-chat-msg { max-width:82%; font-size:0.86rem; line-height:1.5; padding:0.6rem 0.85rem; border-radius:12px; white-space:pre-wrap; opacity:1; transition:opacity 0.4s ease; }
.ayd-chat-msg-fading { opacity:0; }
.ayd-chat-msg-user { align-self:flex-end; background:#C8A876; color:#1B1A18; }
.ayd-chat-msg-assistant { align-self:flex-start; background:#FFFFFF; border:1px solid #E0D5C0; color:#1B1A18; }
#aydChatInputRow { display:flex; gap:0.5rem; padding:0.8rem; border-top:1px solid #E0D5C0; flex-shrink:0; }
#aydChatInput { flex:1; font-family:inherit; font-size:0.86rem; padding:0.6rem 0.75rem; border:1px solid #E0D5C0; border-radius:9px; background:#FFFFFF; color:#1B1A18; }
#aydChatSend { font-family:inherit; font-weight:700; font-size:0.84rem; color:#1B1A18; background:#C8A876; border:none; border-radius:9px; padding:0.6rem 1rem; cursor:pointer; }
#aydChatSend:hover { background:#DAC091; }
#aydChatSend:disabled { opacity:0.6; cursor:default; }

@media (max-width:480px) {
  #aydChatPanel { right:1rem; left:1rem; bottom:5rem; width:auto; max-width:none; height:min(70vh,520px); }
  #aydChatToggle { right:1rem; bottom:1rem; }
}

/* ---------- cards ---------- */
.ayd-service-card { text-decoration:none; background:#FFFFFF; border:1px solid #E0D5C0; border-radius:14px; padding:1.6rem; display:flex; flex-direction:column; gap:0.85rem; box-shadow:0 2px 10px rgba(27,26,24,0.05); transition:transform .2s, box-shadow .2s; color:inherit; }
.ayd-service-card:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(27,26,24,0.1); }
.ayd-contact-row { display:flex; align-items:center; gap:1rem; text-decoration:none; background:#FFFFFF; border:1px solid #E0D5C0; border-radius:12px; padding:1rem 1.2rem; }
.ayd-contact-row:hover { border-color:#C8A876; }
