/* ============================================================
   EAST MESA SERVICES  |  style.css
   One stylesheet for the whole site. Edit colors below.
   ============================================================ */

:root{
  --ink:#22303A;        /* monsoon slate, main text */
  --paper:#FBF9F4;      /* warm white background */
  --sand:#F0E9DB;       /* alternate section background */
  --marigold:#E08A2E;   /* accent, buttons and links */
  --marigold-dk:#B96F1F;
  --agave:#5F7161;      /* secondary green */
  --line:#DCD2C0;       /* borders */
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:"Public Sans",system-ui,-apple-system,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:17px;
}

h1,h2,h3{
  font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  line-height:1.08;
  letter-spacing:-0.01em;
  font-weight:800;
}

a{color:var(--marigold-dk)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid var(--marigold);outline-offset:2px;border-radius:4px;
}

.wrap{max-width:1060px;margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
header.site{
  position:sticky;top:0;z-index:50;
  background:rgba(251,249,244,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:-0.01em}
.brand span{color:var(--marigold-dk)}
.call-btn{
  display:inline-block;background:var(--ink);color:#fff;text-decoration:none;
  padding:9px 16px;border-radius:999px;font-weight:700;font-size:.92rem;white-space:nowrap;
}
.call-btn:hover{background:#0f1b23}

/* ---------- hero ---------- */
.hero{padding:72px 0 56px}
.eyebrow{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--agave);margin-bottom:14px;
}
.hero h1{font-size:clamp(2.4rem,6.5vw,4.2rem);max-width:14ch}
.hero h1 em{font-style:normal;color:var(--marigold-dk)}
.hero p.lede{max-width:52ch;margin:20px 0 28px;font-size:1.12rem}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  padding:14px 24px;border-radius:999px;font-size:1rem;border:2px solid var(--ink);
}
.btn.solid{background:var(--marigold);border-color:var(--marigold);color:var(--ink)}
.btn.solid:hover{background:var(--marigold-dk);border-color:var(--marigold-dk);color:#fff}
.btn.ghost{color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}

/* ---------- honest stat strip ---------- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--sand)}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0 22px}
.strip .cell{padding:18px 14px;text-align:center;border-left:1px solid var(--line);font-size:.92rem;font-weight:600}
.strip .cell:first-child{border-left:none}
@media (max-width:720px){
  .strip .wrap{grid-template-columns:repeat(2,1fr)}
  .strip .cell:nth-child(3){border-left:none}
  .strip .cell{border-top:1px solid var(--line)}
  .strip .cell:nth-child(-n+2){border-top:none}
}

/* ---------- sections ---------- */
section{padding:64px 0}
section h2{font-size:clamp(1.7rem,4vw,2.4rem);margin-bottom:12px}
section .section-sub{max-width:56ch;margin-bottom:34px;color:#42525E}
.alt{background:var(--sand)}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step .num{
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.9rem;
  color:var(--paper);background:var(--agave);display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:999px;margin-bottom:14px;
}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{font-size:.97rem}

/* ---------- trade tickets ---------- */
.tickets{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){.tickets{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.tickets{grid-template-columns:1fr}}
.ticket{
  position:relative;display:block;text-decoration:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:20px 20px 20px 30px;transition:transform .12s ease,border-color .12s ease;
}
.ticket:hover{transform:translateY(-3px);border-color:var(--marigold)}
@media (prefers-reduced-motion:reduce){.ticket{transition:none}.ticket:hover{transform:none}}
/* perforated work-order edge */
.ticket::before{
  content:"";position:absolute;left:9px;top:10px;bottom:10px;width:0;
  border-left:2px dashed var(--line);
}
.ticket h3{font-size:1.08rem;margin-bottom:6px}
.ticket p{font-size:.9rem;color:#42525E}
.ticket .go{display:inline-block;margin-top:10px;font-weight:700;font-size:.85rem;color:var(--marigold-dk)}

/* ---------- founder note ---------- */
.founder{display:grid;grid-template-columns:1fr;gap:10px;max-width:62ch}
.founder p{margin-bottom:14px}
.sig{font-family:"Bricolage Grotesque",sans-serif;font-weight:800}

/* ---------- form ---------- */
.form-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;max-width:640px;
}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.form-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.full{grid-column:1 / -1}
label{font-weight:700;font-size:.9rem}
input,select,textarea{
  font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);width:100%;
}
textarea{min-height:110px;resize:vertical}
.submit{
  margin-top:18px;width:100%;cursor:pointer;
  background:var(--marigold);border:none;border-radius:999px;
  padding:15px;font:inherit;font-weight:800;font-size:1.05rem;color:var(--ink);
}
.submit:hover{background:var(--marigold-dk);color:#fff}
.form-note{font-size:.85rem;color:#5A6772;margin-top:12px}

/* ---------- service page ---------- */
.svc-hero{padding:60px 0 30px}
.svc-hero h1{font-size:clamp(2rem,5.5vw,3.2rem)}
.svc-body{padding:10px 0 30px}
.svc-body p{max-width:62ch;margin-bottom:16px}
.svc-cta{padding:20px 0 70px}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:#DCE4E9;padding:44px 0;font-size:.92rem}
footer.site a{color:#F3C179}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{color:#fff;margin-bottom:10px;font-size:1rem}
footer.site ul{list-style:none}
footer.site li{margin-bottom:6px}
.legal{margin-top:26px;color:#9DB0BC;font-size:.82rem}


/* ---------- photographic hero ---------- */
.hero{
  background:
    linear-gradient(100deg, rgba(18,26,33,.92) 0%, rgba(18,26,33,.62) 55%, rgba(18,26,33,.30) 100%),
    url('images/hero.webp') center/cover no-repeat;
  color:#fff;padding:96px 0 120px;
}
.svc-hero{color:#fff;padding:72px 0 88px;background-size:cover;background-position:center}
.hero h1,.svc-hero h1{color:#fff}
.hero h1 em{color:#F3B25F}
.hero p.lede{color:#EFE7DA}
.hero .eyebrow,.svc-hero .eyebrow{color:#F3C179}
.hero .btn.ghost{color:#fff;border-color:#fff}
.hero .btn.ghost:hover{background:#fff;color:var(--ink)}
header.site{background:rgba(27,37,45,.94);border-bottom:1px solid rgba(255,255,255,.1)}
.brand{color:#fff}
.brand span{color:#F3B25F}
.call-btn{background:var(--marigold);color:var(--ink)}
.call-btn:hover{background:var(--marigold-dk);color:#fff}
section.hero,section.svc-hero{width:100%}

/* photo trade cards */
.ticket{padding:0;overflow:hidden}
.ticket::before{display:none}
.ticket img{width:100%;height:150px;object-fit:cover;display:block}
.ticket .tbody{padding:16px 18px 18px}


/* ============================================================
   BRAND REFRESH  |  neon logo era
   Dark header + footer, warm gold accents, more breathing room.
   ============================================================ */

:root{
  --night:#0E0B10;      /* neon wall black */
  --night-2:#171320;    /* raised dark surface */
  --glow:#F5A524;       /* neon gold */
  --glow-soft:#FFC96B;
}

/* ---------- header with the sign ---------- */
header.site{
  background:rgba(14,11,16,.92);
  border-bottom:1px solid rgba(245,165,36,.22);
}
header.site .wrap{height:76px}
.brand{display:flex;align-items:center;line-height:0}
.brand img{
  height:46px;width:auto;display:block;
  filter:drop-shadow(0 0 14px rgba(245,165,36,.35));
}
@media (max-width:520px){
  header.site .wrap{height:66px}
  .brand img{height:36px}
  .call-btn{padding:8px 13px;font-size:.85rem}
}
.call-btn{background:var(--glow);color:#1A1206;font-weight:800}
.call-btn:hover{background:var(--glow-soft);color:#1A1206}

/* ---------- hero ---------- */
.hero{
  background:
    linear-gradient(100deg, rgba(14,11,16,.90) 0%, rgba(14,11,16,.66) 52%, rgba(14,11,16,.34) 100%),
    url('images/hero.webp') center/cover no-repeat;
  padding:112px 0 124px;
}
.hero h1 em{color:var(--glow)}
.hero .eyebrow,.svc-hero .eyebrow{color:var(--glow-soft)}
.hero p.lede{color:#E8E2D8;font-size:1.16rem;max-width:54ch}
.btn.solid{background:var(--glow);border-color:var(--glow);color:#1A1206}
.btn.solid:hover{background:var(--glow-soft);border-color:var(--glow-soft);color:#1A1206}

/* ---------- trust strip ---------- */
.strip{background:var(--night-2);border-color:rgba(245,165,36,.18)}
.strip .cell{color:#F1EAE0;border-left-color:rgba(255,255,255,.10);padding:20px 14px}
@media (max-width:720px){.strip .cell{border-top-color:rgba(255,255,255,.10)}}

/* ---------- rhythm ---------- */
section{padding:84px 0}
section h2{margin-bottom:14px}
.section-sub{font-size:1.02rem}
.step{border-radius:var(--radius)}
.step .num{background:var(--glow);color:#1A1206;font-size:1rem}

/* gold rule under section headings on light sections */
section h2::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--glow),rgba(245,165,36,0));
  margin-top:14px;
}
.hero h1::after,.svc-hero h1::after{display:none}

/* ---------- trade cards ---------- */
.ticket{border-radius:14px}
.ticket img{height:168px}
.ticket:hover{border-color:var(--glow);box-shadow:0 10px 28px rgba(14,11,16,.10)}
.ticket .go{color:var(--marigold-dk)}

/* ---------- service pages ---------- */
.svc-hero{padding:96px 0 104px;background-size:cover;background-position:center}
.svc-tag{color:#E8E2D8;max-width:46ch;margin-top:14px;font-size:1.08rem}
.svc-body{padding:64px 22px 18px}
.svc-body h2{
  font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  font-size:clamp(1.4rem,3vw,1.85rem);font-weight:800;
  margin:44px 0 14px;max-width:24ch;
}
.svc-body h2:first-child{margin-top:0}
.svc-body h2::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--glow),rgba(245,165,36,0));margin-top:14px;
}
.svc-body p{max-width:64ch;margin-bottom:18px}

.checks{list-style:none;max-width:64ch;margin:6px 0 8px}
.checks li{
  position:relative;padding-left:34px;margin-bottom:13px;font-size:1rem;
}
.checks li::before{
  content:"";position:absolute;left:0;top:.42em;width:18px;height:10px;
  border-left:3px solid var(--glow);border-bottom:3px solid var(--glow);
  transform:rotate(-45deg);border-radius:2px;
}

.expect{list-style:none;max-width:64ch;margin:8px 0 4px}
.expect li{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.expect .n{
  flex:0 0 auto;width:32px;height:32px;border-radius:999px;
  background:var(--glow);color:#1A1206;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.95rem;
  display:inline-flex;align-items:center;justify-content:center;
}
.expect p{margin:0;padding-top:3px}

.svc-cta{padding:56px 22px 96px;border-top:1px solid var(--line);margin-top:56px}
.cta-head{font-size:clamp(1.5rem,3.4vw,2rem);margin-bottom:12px}
.cta-head::after{
  content:"";display:block;width:52px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--glow),rgba(245,165,36,0));margin-top:14px;
}

/* ---------- form ---------- */
.form-card{box-shadow:0 12px 34px rgba(14,11,16,.07)}
.submit{background:var(--glow);color:#1A1206}
.submit:hover{background:var(--glow-soft);color:#1A1206}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-color:var(--glow)}

/* ---------- footer ---------- */
footer.site{background:var(--night);color:#CFC7BD;padding:56px 0 40px}
footer.site a{color:var(--glow-soft)}
.foot-logo{height:52px;width:auto;display:block;margin-bottom:16px;
  filter:drop-shadow(0 0 14px rgba(245,165,36,.30));}
footer.site h4{color:#fff}
.legal{color:#8E8579;border-top:1px solid rgba(255,255,255,.09);padding-top:22px;margin-top:34px}


/* ---------- header navigation ---------- */
header.site .wrap{gap:16px}
.brand{margin-right:auto}
.nav{display:flex;align-items:center;gap:6px}
.nav-link{
  color:#EDE6DC;text-decoration:none;font-weight:700;font-size:.94rem;
  padding:9px 12px;border-radius:999px;white-space:nowrap;
}
.nav-link:hover{color:var(--glow);background:rgba(245,165,36,.10)}

.drop{position:relative}
.drop summary{
  list-style:none;cursor:pointer;color:#EDE6DC;font-weight:700;font-size:.94rem;
  padding:9px 12px;border-radius:999px;white-space:nowrap;user-select:none;
}
.drop summary::-webkit-details-marker{display:none}
.drop summary::after{
  content:"";display:inline-block;margin-left:7px;vertical-align:2px;
  width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);
}
.drop summary:hover{color:var(--glow);background:rgba(245,165,36,.10)}
.drop[open] summary{color:var(--glow);background:rgba(245,165,36,.12)}
.drop .menu{
  position:absolute;top:calc(100% + 12px);left:0;z-index:60;
  background:var(--night-2);border:1px solid rgba(245,165,36,.26);
  border-radius:12px;padding:8px;min-width:220px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:grid;gap:2px;
}
.drop .menu a{
  display:block;padding:9px 12px;border-radius:8px;
  color:#EDE6DC;text-decoration:none;font-size:.94rem;font-weight:600;
}
.drop .menu a:hover{background:rgba(245,165,36,.14);color:var(--glow)}

@media (max-width:860px){
  .nav-link{display:none}
}
@media (max-width:520px){
  header.site .wrap{gap:8px}
  .drop summary{padding:8px 10px;font-size:.88rem}
  .drop .menu{min-width:200px}
}

/* ---------- FAQ ---------- */
.faq{max-width:64ch;border-top:1px solid var(--line)}
.faq-item{position:relative;border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-family:"Bricolage Grotesque","Public Sans",sans-serif;
  font-weight:800;font-size:1.04rem;line-height:1.35;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;right:6px;top:24px;
  width:9px;height:9px;border-right:2.5px solid var(--glow);border-bottom:2.5px solid var(--glow);
  transform:rotate(45deg);transition:transform .15s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg);top:27px}
.faq-item summary:hover{color:var(--marigold-dk)}
.faq-item p{padding:0 0 20px;margin:0;max-width:100%}
@media (prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}}