/* ===== Cesar Araujo — Hair Artistry =====
   Base styles extracted from the Claude Design source, plus an
   image-placeholder layer and a responsive layer (the source was
   desktop-only). Component styling lives inline in index.html. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:#0a1c17;overflow-x:hidden}
::selection{background:#c9a875;color:#0a1c17}
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:#08160f}
::-webkit-scrollbar-thumb{background:#1d4538;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:#2a5a49}

@keyframes ca-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}
@keyframes ca-fade{from{opacity:0}to{opacity:1}}
@keyframes ca-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes ca-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ca-draw{from{width:0}to{width:100%}}

/* Nav links hover polish */
.ca-navlink:hover{opacity:1 !important}

/* ===== Image slots / portrait placeholders =====
   Each image area shows a faint gold "CA" monogram on emerald.
   When a real photo exists at the referenced path it covers the
   placeholder; a missing photo simply reveals the monogram. */
.ca-img{position:relative;overflow:hidden;background:linear-gradient(135deg,#0c241d,#08160f)}
.ca-img > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1}
.ca-img__mono{
  position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-weight:300;letter-spacing:8px;
  font-size:clamp(54px,10vw,120px);color:rgba(201,168,117,.14);
  pointer-events:none;user-select:none
}

/* ===== Responsive layer =====
   The source markup styles layout with inline `grid-template-columns`
   and `padding`, so these overrides target those inline values by
   substring and use !important to win over the inline declarations. */
@media (max-width:980px){
  /* two-column content grids -> single column */
  [style*="grid-template-columns:1.15fr .85fr"],
  [style*="grid-template-columns:.9fr 1.1fr"],
  [style*="grid-template-columns:0.92fr 1.08fr"]{
    grid-template-columns:1fr !important;
    gap:48px !important;
  }
  /* contact: form below copy */
  [style*="grid-template-columns:1fr 1fr;gap:80px"]{
    grid-template-columns:1fr !important;
    gap:54px !important;
  }
  /* signature feature image sits above its copy */
  [style*="grid-template-columns:0.92fr 1.08fr"] .ca-img{min-height:300px !important}
}

@media (max-width:760px){
  /* service card pairs + 3-up galleries/quotes -> single column */
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important}

  /* hide the inline nav links; keep the logo + Book button */
  .ca-navlink{display:none !important}

  /* trim the generous section side padding */
  [style*="padding:26px 48px"]{padding-left:20px !important;padding-right:20px !important}
  [style*="padding:140px 48px 80px"]{padding-left:20px !important;padding-right:20px !important;padding-top:120px !important}
  [style*="padding:130px 48px"]{padding-left:20px !important;padding-right:20px !important}
  [style*="padding:120px 48px"]{padding-left:20px !important;padding-right:20px !important}
  [style*="padding:50px 48px"]{padding-left:20px !important;padding-right:20px !important}

  /* hero portrait can grow a little on phones */
  #ca-hero-portrait{width:min(320px,72vw) !important}
}

@media (max-width:520px){
  /* let the hero portrait breathe full-width under the headline */
  #ca-hero-portrait{width:min(360px,82vw) !important}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1 !important;transform:none !important}
  [style*="animation:ca-marquee"]{animation:none !important}
}