/* ============================================================
   Chirp Solutions — styles.css
   Identity: "Engraved brass on slate"
   Display: Cormorant Garamond  ·  Body/UI: Karla
   ============================================================ */

:root{
  --ink:        #1B2420;   /* deep oxidized-brass slate (dark sections) */
  --ink-2:      #222d28;   /* slightly lighter slate */
  --paper:      #F3EEE4;   /* warm paper (light sections) */
  --paper-2:    #EAE3D4;
  --brass:      #B08D4F;   /* the engraved line */
  --brass-lt:   #D8BD8A;   /* highlighted brass */
  --sage:       #7C8A78;   /* secondary, ties to "chirp"/nature */
  --char:       #2A2D2A;   /* charcoal text on paper */
  --char-soft:  #555a52;   /* muted body text */
  --line-dark:  rgba(176,141,79,.30);
  --line-light: rgba(42,45,42,.14);

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1140px;
  --r: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body{
  font-family:var(--sans);
  color:var(--char);
  background:var(--ink);
  line-height:1.65;
  font-size:1.0625rem;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--brass); color:var(--ink); padding:.6rem 1rem; border-radius:0 0 var(--r) 0; font-weight:700;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--brass-lt); outline-offset:3px; }

/* ---------- type helpers ---------- */
.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--sage);
  margin-bottom:1.1rem;
}
.eyebrow--brass{ color:var(--brass); }
.eyebrow::before{
  content:""; display:inline-block;
  width:26px; height:1px; background:currentColor;
  vertical-align:middle; margin-right:.7em; opacity:.7;
}

.sec-title{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.05;
  font-size:clamp(1.9rem, 4.2vw, 3rem);
  letter-spacing:-.01em;
}
/* incised look on paper: subtle top highlight, like text cut into the surface */
.incised{
  color:var(--char);
  text-shadow:0 1px 0 rgba(255,255,255,.65);
}
/* engraved look on slate: brass with a cut shadow */
.engraved{
  color:var(--brass-lt);
  text-shadow:0 1px 1px rgba(0,0,0,.55), 0 -1px 0 rgba(216,189,138,.12);
}

.sec-sub{
  margin-top:1rem; max-width:46ch;
  color:var(--char-soft); font-size:1.05rem;
}
.sec-sub--light{ color:rgba(243,238,228,.62); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:.95rem;
  letter-spacing:.02em;
  padding:.95rem 1.7rem; border-radius:var(--r);
  border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--brass{
  background:var(--brass); color:#1c1710;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
}
.btn--brass:hover{ background:var(--brass-lt); transform:translateY(-2px); }
.btn--ghost{
  background:transparent; color:var(--paper);
  border-color:rgba(243,238,228,.32);
}
.btn--ghost:hover{ border-color:var(--brass); color:var(--brass-lt); transform:translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease);
}
.nav.scrolled{
  background:rgba(27,36,32,.85);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line-dark);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }

.brand{ display:inline-flex; align-items:center; gap:.6rem; color:var(--brass); }
.brand__name{
  font-family:var(--serif); font-size:1.8rem; font-weight:600;
  color:var(--paper); letter-spacing:.01em;
}

.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{
  font-size:.9rem; font-weight:600; letter-spacing:.04em;
  color:rgba(243,238,228,.78); position:relative; padding:.3rem 0;
  transition:color .2s var(--ease);
}
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:var(--brass); transition:width .25s var(--ease);
}
.nav__links a:not(.nav__cta):hover{ color:var(--paper); }
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__links a.nav__cta{
  background:var(--brass); color:#1c1710 !important; padding:.7rem;
  border-radius:var(--r); font-weight:700;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.nav__cta:hover{ background:var(--brass-lt); transform:translateY(-1px); }

.nav__toggle{
  display:none; flex-direction:column; gap:5px;
  background:none; border:0; cursor:pointer; padding:8px;
}
.nav__toggle span{ width:24px; height:2px; background:var(--paper); transition:.3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile{
  background:rgba(27,36,32,.97); backdrop-filter:blur(10px);
  border-top:1px solid var(--line-dark);
  display:flex; flex-direction:column;
}
.mobile[hidden]{ display:none; }
.mobile a{
  padding:1rem clamp(20px,5vw,40px); color:var(--paper);
  font-weight:600; border-bottom:1px solid var(--line-dark);
}
.mobile a:last-child{ color:var(--brass-lt); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; background:var(--ink);
  padding:clamp(140px,18vh,200px) 0 clamp(70px,10vh,110px);
  overflow:hidden;
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(120% 80% at 80% 0%, rgba(176,141,79,.16), transparent 55%),
    radial-gradient(90% 70% at 0% 100%, rgba(124,138,120,.12), transparent 60%);
}
.hero__inner{ position:relative; }
.hero__title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(2.7rem, 8vw, 5.4rem); line-height:1.02;
  color:var(--paper); letter-spacing:-.015em;
  text-shadow:0 1px 1px rgba(0,0,0,.4);
}
.hero__title em{ font-style:italic; color:var(--brass-lt); }
.hero__lede{
  margin-top:1.6rem; max-width:64ch;
  color:rgba(243,238,228,.74); font-size:1.15rem;
}
.hero__actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:1rem; }

/* ============================================================
   SECTION SHELLS
   ============================================================ */
.section{ padding:clamp(70px,11vw,120px) 0; position:relative; }
.section--paper{ background:var(--paper); color:var(--char); }
.section--slate{ background:var(--ink); color:var(--paper); }
.section--about{ background:var(--ink-2); color:var(--paper); }

/* hairline dividers between alternating sections */
.section--paper + .section--slate,
.section--slate + .section--paper,
.section--paper + .section--about{ }

.sec-head{ max-width:62ch; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
#work .sec-head{ max-width:80ch; }
#work .sec-head .sec-sub{ max-width:66ch; }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow::before{ display:none; }
.sec-head--center .sec-sub{ margin-inline:auto; }

/* ============================================================
   MATERIALS
   ============================================================ */
.materials{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(4, 1fr);
}
.mat{
  background:#fff;
  border:1px solid var(--line-light);
  border-radius:var(--r);
  padding:1.4rem;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.mat:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(42,45,42,.5); }
.mat__sample{
  height:120px; border-radius:var(--r); margin-bottom:1.1rem;
  background:var(--swatch);
  position:relative; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18);
}
/* engraved monogram catching light on each sample */
.mat__sample::after{
  content:"C"; position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:var(--serif); font-size:3.4rem; font-weight:600;
  color:rgba(255,255,255,.10);
  text-shadow:0 1px 0 rgba(255,255,255,.18), 0 -1px 1px rgba(0,0,0,.4);
}
.mat__sample[data-grain="wood"]{ background-image:repeating-linear-gradient(92deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px); }
.mat__sample[data-grain="slate"]{ background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px); background-size:7px 7px; }
.mat__sample[data-grain="metal"]{ background-image:linear-gradient(100deg, rgba(255,255,255,.22), transparent 35%, rgba(255,255,255,.12) 60%, transparent); }
.mat__sample[data-grain="glass"]{ background-image:linear-gradient(120deg, rgba(255,255,255,.30), transparent 45%); }
.mat__name{ font-family:var(--serif); font-size:1.5rem; font-weight:600; margin-bottom:.35rem; }
.mat__desc{ font-size:.95rem; color:var(--char-soft); }

/* ============================================================
   PROCESS / STEPS  (numbered = a real sequence)
   ============================================================ */
.steps{
  list-style:none; display:grid; gap:1.5rem;
  grid-template-columns:repeat(4, 1fr);
  counter-reset:step;
}
.step{
  border-top:2px solid var(--brass);
  padding-top:1.3rem;
}
.step__num{
  font-family:var(--serif); font-size:2.4rem; font-weight:600;
  color:var(--brass); display:block; line-height:1; margin-bottom:.6rem;
}
.step__title{ font-family:var(--serif); font-size:1.4rem; font-weight:600; margin-bottom:.4rem; color:var(--char); }
.step__desc{ font-size:.96rem; color:var(--char-soft); }

/* ============================================================
   ABOUT
   ============================================================ */
.about{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.about__media{ display:flex; }
.about__plate{
  width:100%; aspect-ratio:4/3;
  border:1px solid var(--line-dark); border-radius:var(--r);
  background:
    linear-gradient(150deg, rgba(176,141,79,.10), transparent 60%),
    var(--ink);
  box-shadow:inset 0 0 0 6px rgba(176,141,79,.10), 0 30px 60px -40px rgba(0,0,0,.7);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem;
  color:var(--brass);
}
.about__plate-text{
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:var(--brass-lt); text-align:center; line-height:1.4;
}
.about__copy p{ color:rgba(243,238,228,.78); margin-top:1rem; }
.about__copy .eyebrow{ color:var(--brass); }
.about__copy .sec-title{ color:var(--paper); text-shadow:0 1px 1px rgba(0,0,0,.4); }
.about__pull{
  font-family:var(--serif); font-style:italic;
  font-size:1.3rem !important; color:var(--brass-lt) !important;
  border-left:2px solid var(--brass); padding-left:1.2rem; margin-top:1.6rem !important;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.stories{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.quote{
  background:rgba(243,238,228,.04);
  border:1px solid var(--line-dark);
  border-radius:var(--r);
  padding:1.8rem 1.6rem;
  position:relative;
}
.quote::before{
  content:"\201C"; font-family:var(--serif);
  font-size:3.5rem; line-height:0; color:var(--brass);
  position:absolute; top:1.4rem; left:1.2rem; opacity:.4;
}
.quote blockquote{
  font-family:var(--serif); font-size:1.22rem; line-height:1.5;
  color:var(--paper); margin-top:1.2rem;
}
.quote figcaption{ margin-top:1.1rem; font-size:.85rem; font-weight:700; letter-spacing:.05em; color:var(--brass-lt); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.contact__intro p{ color:var(--char-soft); margin-top:1rem; }
.contact__list{ list-style:none; margin-top:1.6rem; display:grid; gap:.7rem; }
.contact__list li{ position:relative; padding-left:1.6rem; color:var(--char); font-weight:500; }
.contact__list li::before{
  content:"✦"; position:absolute; left:0; color:var(--brass); font-size:.85rem; top:.2rem;
}

.form{ background:#fff; border:1px solid var(--line-light); border-radius:var(--r); padding:clamp(1.4rem,3vw,2rem); }
.field{ margin-bottom:1.1rem; }
.field label{ display:block; font-size:.82rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--char-soft); margin-bottom:.4rem; }
.field input, .field textarea{
  width:100%; font-family:var(--sans); font-size:1rem; color:var(--char);
  background:var(--paper); border:1px solid var(--line-light); border-radius:var(--r);
  padding:.8rem .9rem; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--brass);
  box-shadow:0 0 0 3px rgba(176,141,79,.18);
}
.field textarea{ resize:vertical; }
.field--hp{ position:absolute; left:-9999px; height:0; overflow:hidden; }
.form .btn{ width:100%; margin-top:.3rem; }
.form__status{ margin-top:1rem; font-weight:600; font-size:.95rem; min-height:1.2em; }
.form__status.ok{ color:#3f7d4f; }
.form__status.err{ color:#b1442f; }
.form__fallback{ margin-top:1rem; font-size:.9rem; color:var(--char-soft); }
.form__fallback a{ color:var(--brass); font-weight:600; border-bottom:1px solid var(--line-light); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); border-top:1px solid var(--line-dark); padding:3rem 0; }
.footer__inner{ display:flex; flex-direction:column; align-items:center; gap:.9rem; text-align:center; }
.brand--footer .brand__name{ font-size:1.25rem; }
.footer__tag{ color:rgba(243,238,228,.6); font-size:.95rem; }
.footer__copy{ color:rgba(243,238,228,.38); font-size:.82rem; }

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:.08s; }
.reveal:nth-child(3){ transition-delay:.16s; }
.reveal:nth-child(4){ transition-delay:.24s; }
.reveal:nth-child(5){ transition-delay:.32s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px){
  .materials{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .stories{ grid-template-columns:1fr; }
  .about{ grid-template-columns:1fr; }
  .about__media{ order:2; max-width:420px; }
  .contact{ grid-template-columns:1fr; }
}

@media (max-width: 720px){
  .nav__links{ display:none; }
  .nav__toggle{ display:flex; }
  .materials{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .hero__bird{ width:90px; }
}