/* ============================================================
   CITY PAGES — ETouch Sites
   ------------------------------------------------------------
   The 9 `/web-design/<city>/` landing pages, in the same design
   language as the homepage. The page body itself is generated by
   scripts/build-city-pages.mjs, which pulls the shared blocks
   (nav, pricing, process, contact, CTA, footer) out of index.html
   so the two can never drift apart.

   This file only styles what is unique to a city page.
   ============================================================ */

/* ---------- the city hero: a dark band, not the homepage's disc ---------- */
.city-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, #14171D 0%, #0A0C10 55%, #060709 100%);
  padding:110px 0 88px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.city-hero::after{
  content:'';position:absolute;inset:auto -10% -60% auto;
  width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle, rgba(237,28,36,.16), rgba(237,28,36,0) 68%);
  pointer-events:none;
}
.city-hero .container{position:relative;z-index:2;max-width:var(--maxw);}
.city-hero .eyebrow{color:var(--mmw-red);}
.city-hero .eyebrow::before{background:var(--mmw-red);}
.city-hero .eyebrow::after{background:var(--mmw-red);}

.city-hero h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(34px,5.4vw,62px);line-height:1.04;letter-spacing:-.03em;
  color:#fff;margin:0 0 22px;max-width:16ch;
}
.city-hero__lede{
  font-family:var(--font-body);font-size:18.5px;line-height:1.75;
  color:#A8ADB5;margin:0 0 34px;max-width:62ch;
}
.city-hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px;}
.city-hero__actions .btn--ghost{
  color:#fff;border-color:rgba(255,255,255,.34);background:rgba(255,255,255,.04);
}
.city-hero__actions .btn--ghost:hover{
  border-color:#fff;background:rgba(255,255,255,.10);
}

.city-hero__facts{
  list-style:none;margin:0;padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
}
.city-hero__facts li{display:flex;flex-direction:column;gap:5px;}
.city-hero__facts b{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.02em;color:#fff;
}
.city-hero__facts span{
  font-family:var(--font-body);font-size:13.5px;color:#8A9099;letter-spacing:.03em;
}

/* ---------- editorial blocks ---------- */
.city-editorial{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--mmw-line-soft);
  border:1px solid var(--mmw-line-soft);
  border-radius:var(--radius-lg);overflow:hidden;
}
.city-block{
  background:var(--mmw-white);
  padding:44px 42px 46px;
  transition:background .3s var(--ease);
}
.city-block:hover{background:#FAFAFA;}
.city-block h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,1.9vw,25px);line-height:1.22;letter-spacing:-.02em;
  color:var(--mmw-heading);margin:0 0 16px;
}
.city-block p{
  font-family:var(--font-body);font-size:16.5px;line-height:1.78;
  color:var(--mmw-body);margin:0;
}

/* ---------- service areas ---------- */
.city-areas{
  list-style:none;margin:0 0 34px;padding:0;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;
}
.city-areas li{margin:0;}
.city-areas a{
  display:inline-block;
  font-family:var(--font-body);font-size:15px;font-weight:600;
  letter-spacing:.02em;
  color:var(--mmw-heading);text-decoration:none;
  background:var(--mmw-white);
  border:1px solid rgba(0,0,0,.10);
  padding:11px 20px;border-radius:var(--radius-pill);
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.city-areas a:hover{
  background:var(--mmw-red);color:#fff;border-color:var(--mmw-red);transform:translateY(-2px);
}

.city-also{text-align:center;}
.city-above,
.city-also > span{
  display:block;
  font-family:var(--font-body);font-size:12.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:#8A8A8A;margin-bottom:14px;
}
.city-also__links{
  display:flex;flex-wrap:wrap;gap:9px 22px;justify-content:center;
}
.city-also__links a{
  font-family:var(--font-body);font-size:15px;font-weight:600;
  color:var(--mmw-body);text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.16);
  padding-bottom:2px;
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.city-also__links a:hover{color:var(--mmw-red);border-color:var(--mmw-red);}

/* ---------- FAQ ---------- */
.faq{
  max-width:840px;margin:0 auto;
  display:flex;flex-direction:column;gap:12px;
}
.faq__item{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.faq__item[open]{border-color:rgba(237,28,36,.45);background:rgba(255,255,255,.07);}
.faq__item summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:17.5px;
  color:#fff;padding:20px 56px 20px 24px;position:relative;
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{
  content:'+';position:absolute;right:22px;top:50%;
  transform:translateY(-50%);
  font-size:24px;font-weight:400;color:var(--mmw-red);
  transition:transform .3s var(--ease);
}
.faq__item[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq__a{padding:0 24px 22px;}
.faq__a p{
  font-family:var(--font-body);font-size:16.5px;line-height:1.75;
  color:#A8ADB5;margin:0;max-width:66ch;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .city-hero{padding:80px 0 66px;}
  .city-hero__facts{grid-template-columns:1fr;gap:16px;}
  .city-hero__facts li{flex-direction:row;align-items:baseline;gap:10px;}
  .city-editorial{grid-template-columns:1fr;}
  .city-block{padding:32px 26px 34px;}
}
@media (max-width:640px){
  .city-hero h1{font-size:clamp(28px,8.5vw,38px);}
  .city-hero__lede{font-size:16.5px;}
  .city-areas{gap:8px;}
  .city-areas a{padding:9px 15px;font-size:14px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .faq__item summary::after{transition:none;}
}