/*
  LeagueCityChristmasLights.com — Home page stylesheet
  Built from the approved home page mockup. Locked design pattern per
  PROJECT-BRIEF.md: brand tokens (imported below), 8px consolidated radius,
  Playfair Display / PT Sans type pairing, hero slider (Home only — every
  interior page uses a single static hero image instead, per owner decision).
*/
@import url('tokens.css');

  @font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/playfair-display-700.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/playfair-display-italic-600.woff2') format('woff2');
  }
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/pt-sans-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/pt-sans-700.woff2') format('woff2');
  }

  /*
    Color tokens live in tokens.css (imported above) -- the locked brand
    palette, contrast-validated against Appendix D. Don't redefine colors
    here; add layout/type tokens only. Dark mode is deliberately not
    implemented -- the project explicitly decided against it (single design,
    kept simple), so this is a one-world stylesheet by choice.
  */
  :root {
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body: 'PT Sans', -apple-system, Segoe UI, Arial, sans-serif;
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-6: 48px;
    --space-8: 64px;
    --space-10: 80px;
    --content-max: 1160px;
    --reading-max: 720px;
    /* Consolidated corner radius -- was inconsistent (3px buttons/fields, 4px
       images/cards, 6-8px form panels). Pill-shaped elements (chips, and the
       future city-service-page buttons) are a deliberate exception, not part
       of this system. */
    --radius: 8px;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--color-background);
    color: var(--color-text-body);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; }
  h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--color-primary);
    text-wrap: balance;
    margin: 0;
  }
  .eyebrow {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    color: var(--color-accent);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
  }
  .wrap {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-3);
  }
  .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-1) var(--space-2);
    z-index: 100;
  }
  .skip-link:focus { left: var(--space-2); top: var(--space-2); }
  :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

  /* ---------- Header ---------- */
  header.site {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border-decorative);
  }
  /*
    Three-zone desktop layout: logo pinned left, nav+CTA centered as a group,
    phone number pinned to the far right edge -- each zone gets an equal 1fr
    track so the center group is genuinely centered on the page, not just
    centered within the leftover space next to the logo.
  */
  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
  }
  .brand { display: flex; align-items: center; gap: 10px; justify-self: start; }
  .brand img { height: 84px; width: auto; }
  .header-center { display: flex; align-items: center; gap: var(--space-4); justify-self: center; }
  nav.primary-nav { display: flex; gap: var(--space-3); }
  nav.primary-nav a {
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--color-text-body);
    padding: 6px 2px;
    border-bottom: 2px solid transparent;
  }
  nav.primary-nav a:hover { border-bottom-color: var(--color-accent); }
  .header-right { display: flex; align-items: center; gap: var(--space-3); justify-self: end; }
  .phone-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary);
    white-space: nowrap;
  }
  .phone-link svg { width: 18px; height: 18px; fill: var(--color-accent); }
  .nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
  }
  .nav-toggle svg { width: 24px; height: 24px; }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border-radius: var(--radius);
    padding: 12px 22px;
    border: none;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
  }
  .btn-accent { background: var(--color-accent); color: var(--color-accent-text); }
  .btn-accent:hover { background: var(--color-accent-hover); }
  .btn-accent:active { transform: translateY(1px); }
  .btn-small { padding: 9px 16px; font-size: 0.85rem; }

  /*
    Hero + form: per the owner's standing rule for lead-gen sites, the primary
    form must be above the fold, not just reachable by scrolling. So the form
    lives directly in the hero (right column on desktop, stacked but still
    early on mobile), with a second full copy further down the page per
    Appendix C's "same form, multiple entry points" guidance.
  */
  .hero {
    position: relative;
    display: flex;
    align-items: center;
    background: #0c0c0c;
    overflow: hidden;
  }
  /*
    Pure-CSS crossfade slider: 6 slides share one keyframe animation, each
    offset by a sixth of the total loop via animation-delay, so they cycle
    into view in sequence without any JS. Respects prefers-reduced-motion by
    freezing on the first slide for anyone who's asked for less motion.

    Each slide's "on" window (8s) is deliberately LONGER than the 5s spacing
    between slides -- that's what creates the overlap. With equal-length,
    back-to-back windows (the first version of this), slide N finished fading
    out at the exact instant slide N+1 started fading in, so there was no
    moment where both were partially visible -- just a flash of the near-black
    hero background between them. Extending each window by the 3s fade
    duration means slide N is still fading out while slide N+1 is already
    fading in, so they cross-dissolve into each other instead.
  */
  .hero-slides { position: absolute; inset: 0; z-index: 0; }
  .hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: heroSlideFade 30s infinite;
  }
  .hero-slide:nth-child(1) { animation-delay: 0s; }
  .hero-slide:nth-child(2) { animation-delay: 5s; }
  .hero-slide:nth-child(3) { animation-delay: 10s; }
  .hero-slide:nth-child(4) { animation-delay: 15s; }
  .hero-slide:nth-child(5) { animation-delay: 20s; }
  .hero-slide:nth-child(6) { animation-delay: 25s; }
  /* Real production images, desktop tier. CSS backgrounds can't use srcset/sizes
     (that's an <img>-only feature) -- media-query swapping is the correct
     equivalent for responsive background images, not a fallback.
     Only slide 1 (the visible one on load, and the actual LCP element) gets its
     background-image set here so the browser fetches it immediately. Slides 2-6
     deliberately do NOT get a background-image in CSS -- if they did, the browser
     would fetch all 6 full-size images concurrently on page load, competing for
     bandwidth with slide 1 and delaying LCP. Their URLs live in data-bg/data-bg-mobile
     attributes instead (see index.php) and get applied via JS after window 'load'. */
  .hero-slide-1 { background-image: url('../img/hero/hero-1-neighborhood-dusk.webp'); }
  @media (max-width: 700px) {
    .hero-slide-1 { background-image: url('../img/hero/hero-1-neighborhood-dusk-mobile.webp'); }
  }
  @keyframes heroSlideFade {
    0%      { opacity: 0; }   /* start of a 3s fade-in */
    10%     { opacity: 1; }   /* fully visible at 3s */
    16.667% { opacity: 1; }   /* holds until 5s (the next slide's delay) */
    26.667% { opacity: 0; }   /* fades out over the next 3s, overlapping the next slide's fade-in */
    100%    { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-slide { animation: none; opacity: 0; }
    .hero-slide:first-child { opacity: 1; }
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg, rgba(10,10,8,0.82) 0%, rgba(10,10,8,0.55) 45%, rgba(10,10,8,0.30) 100%);
  }
  .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--space-8) var(--space-3);
    color: #FAFAF8;
  }

  /*
    Static hero for every interior page (service pillars, matrix pages, etc.) --
    the crossfade slider above is Home-only, per the owner's confirmed rule.
    Same gradient overlay/content layering, just a single background image
    instead of animated slide layers.
  */
  .hero-static {
    background-size: cover;
    background-position: center;
  }

  /* Breadcrumbs -- Appendix B, required once a site has more than one level of hierarchy */
  .breadcrumbs { background: var(--color-neutral-light); border-bottom: 1px solid var(--color-border-decorative); }
  .breadcrumbs .wrap { padding: 10px var(--space-3); display: flex; gap: 8px; align-items: center; overflow-x: auto; white-space: nowrap; font-size: 0.85rem; }
  .breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
  .breadcrumbs a:hover { color: var(--color-accent); }
  .breadcrumbs .sep { color: var(--color-border-functional); }
  .breadcrumbs .current { color: var(--color-primary); font-weight: 700; }

  /* In-content images -- Appendix A: break up body text roughly every 300-500
     words, sized to the content column, not full width. */
  .content-image { max-width: var(--reading-max); margin: var(--space-8) auto; }
  .content-image img { border-radius: var(--radius); width: 100%; height: auto; }
  .content-image figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--color-text-muted); text-align: center; }

  .included-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; max-width: var(--reading-max); margin-left: auto; margin-right: auto; }
  .included-list li { display: flex; gap: 12px; align-items: baseline; font-size: 1.02rem; }
  .included-list li::before { content: "\2014"; color: var(--color-accent); font-weight: 700; }

  .local-callout { background: var(--color-surface); border: 1px solid var(--color-border-decorative); border-radius: var(--radius); padding: var(--space-4); max-width: var(--reading-max); margin: 0 auto; }
  .local-callout h3 { font-size: 1.2rem; margin-bottom: 10px; }
  /*
    Named areas rather than source order, so mobile can reorder to
    intro -> form -> support (form as high as possible, per the above-the-fold
    rule) while desktop keeps intro/support stacked left with form spanning
    the right column -- without needing duplicate markup for each layout.
  */
  .hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    grid-template-rows: auto auto;
    grid-template-areas: "intro form" "support form";
    gap: var(--space-3) var(--space-6);
  }
  .hero-intro { grid-area: intro; align-self: end; }
  .hero-support { grid-area: support; align-self: start; }
  .hero-form-card { grid-area: form; align-self: center; }
  .hero-intro .eyebrow { color: #E8C87A; }
  .hero h1 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 2.9rem);
    line-height: 1.1;
    margin: var(--space-1) 0 var(--space-2);
  }
  .hero p.lede {
    font-size: 1.1rem;
    max-width: 52ch;
    color: #F1F1EC;
    margin: 0 0 var(--space-3);
  }
  .hero-support .phone-link { color: #fff; display: inline-flex; }
  .hero-support .phone-link svg { fill: #E8C87A; }

  .hero-form-card {
    background: var(--color-surface);
    border-radius: var(--radius);
    padding: var(--space-4);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  }
  .hero-form-card h2 {
    font-size: 1.3rem;
    margin-bottom: 4px;
  }
  .hero-form-card > p {
    color: var(--color-text-muted);
    font-size: 0.88rem;
    margin: 0 0 var(--space-2);
  }
  .hero-form-card .btn { width: 100%; margin-top: 4px; }

  /* ---------- Trust strip ---------- */
  .trust-strip {
    background: var(--color-primary);
    color: #F2F2EE;
  }
  .trust-strip .wrap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-2) var(--space-3);
    justify-content: center;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }
  .trust-strip .item { display: flex; align-items: center; gap: 8px; }
  .trust-strip .dot { color: var(--color-accent); }

  /* ---------- Sections ---------- */
  section { padding: var(--space-10) 0; }
  .section-head { max-width: var(--reading-max); margin: 0 auto var(--space-6); text-align: center; }
  .section-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 6px; }
  .section-head p { color: var(--color-text-muted); margin-top: var(--space-2); font-size: 1.05rem; }

  /* ---------- Services grid ---------- */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
  .service-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-decorative);
    border-radius: var(--radius);
    padding: var(--space-3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .service-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(17,17,17,0.08); }
  .service-card img { height: 46px; width: 46px; margin-bottom: var(--space-2); }
  .service-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
  .service-card p { color: var(--color-text-muted); font-size: 0.95rem; margin: 0; }

  /* ---------- About / credibility ---------- */
  .about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    align-items: center;
  }
  .about-split img { border-radius: var(--radius); width: 100%; height: auto; }
  .about-copy .eyebrow { display: block; margin-bottom: 6px; }
  .about-copy h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: var(--space-2); }
  .about-copy p { max-width: 54ch; }
  .about-facts {
    list-style: none;
    padding: 0;
    margin: var(--space-3) 0 0;
    display: grid;
    gap: 10px;
  }
  .about-facts li { display: flex; gap: 10px; align-items: baseline; font-weight: 700; }
  .about-facts li::before { content: "\2014"; color: var(--color-accent); }

  /* ---------- Form fields (used by the hero quote form) ---------- */
  .field { margin-bottom: var(--space-2); }
  .field label {
    display: block;
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 6px;
    color: var(--color-text-body);
  }
  .field input, .field select, .field textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
    padding: 11px 12px;
    border: 1px solid var(--color-border-functional);
    border-radius: var(--radius);
    background: #fff;
    color: var(--color-text-body);
  }
  .field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--color-accent);
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
  .form-foot {
    margin-top: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .form-note { font-size: 0.82rem; color: var(--color-text-muted); margin: var(--space-2) 0 0; }
  .form-phone { text-align: center; margin-top: var(--space-4); font-size: 0.95rem; color: var(--color-text-muted); }
  .form-phone a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
  /* honeypot field: present for spam protection, invisible + skipped by real users (Appendix C) */
  .hp-field { position: absolute; left: -9999px; top: -9999px; }

  /* ---------- Service area ---------- */
  .area-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 780px; margin: 0 auto; }
  .chip {
    background: var(--color-surface);
    border: 1px solid var(--color-border-decorative);
    border-radius: 999px;
    padding: 8px 16px;
    font-weight: 700;
    font-size: 0.9rem;
  }
  .chip.more { background: transparent; border-style: dashed; color: var(--color-text-muted); }

  /* ---------- Footer ---------- */
  footer.site {
    background: var(--color-primary);
    color: #DCDCD8;
    padding: var(--space-8) 0 var(--space-4);
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: var(--space-4);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid rgba(255,255,255,0.14);
  }
  .footer-brand img { height: 60px; width: auto; margin-bottom: var(--space-2); }
  .footer-brand p { color: #B7B7B2; max-width: 34ch; }
  footer.site .phone-link { color: #fff; }
  footer.site .phone-link svg { fill: #E8C87A; }
  .footer-brand .phone-link { margin-top: var(--space-2); }
  footer h4 {
    font-family: var(--font-body);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8rem;
    color: #9C9C96;
    margin: 0 0 var(--space-2);
  }
  footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
  footer a { text-decoration: none; color: #DCDCD8; font-size: 0.95rem; }
  footer a:hover { color: #fff; }
  .footer-legal-note {
    grid-column: 1 / -1;
    color: #8C8C86;
    font-size: 0.82rem;
    margin-top: var(--space-3);
  }
  .footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-3);
    font-size: 0.82rem;
    color: #8C8C86;
  }
  .footer-bottom .legal-links { display: flex; gap: var(--space-2); }
  .footer-bottom a { color: #8C8C86; font-size: 0.82rem; }
  .footer-bottom a:hover { color: #DCDCD8; }

  /* ---------- Cookie consent banner ---------- */
  .cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--color-primary);
    color: #DCDCD8;
    border-top: 1px solid #333;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.3);
    padding: var(--space-3);
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  .cookie-banner.is-visible { transform: translateY(0); }
  .cookie-banner .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .cookie-banner p { margin: 0; font-size: 0.9rem; max-width: 640px; color: #DCDCD8; }
  .cookie-banner a { color: #fff; text-decoration: underline; }
  .cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
  .btn-outline-light {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
  }
  .btn-outline-light:hover { background: rgba(255,255,255,0.12); }

  /* ---------- Photo gallery ---------- */
  .photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }
  .photo-grid button {
    display: block;
    position: relative;
    padding: 0;
    border: none;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    background: var(--color-neutral-light);
  }
  .photo-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.2s ease;
  }
  .photo-grid button:hover img { transform: scale(1.04); }
  .photo-grid button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

  .lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(17,17,17,0.92);
    padding: var(--space-4);
    align-items: center;
    justify-content: center;
  }
  .lightbox.is-open { display: flex; }
  .lightbox img { max-width: 100%; max-height: 85vh; border-radius: var(--radius); }
  .lightbox-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
  .lightbox-close svg { width: 22px; height: 22px; }
  .lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
  .lightbox-nav svg { width: 24px; height: 24px; }
  .lightbox-prev { left: var(--space-3); }
  .lightbox-next { right: var(--space-3); }

  @media (max-width: 880px) {
    /* logo/phone columns must size to their content here, not share a squeezed 1fr -
       an equal-fr track with no minimum can shrink an image below its natural size */
    .header-inner { grid-template-columns: auto 1fr auto; }
    .brand img { height: 60px; }
    .nav-toggle { display: flex; }
    nav.primary-nav {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 60;
      flex-direction: column;
      gap: 0;
      background: var(--color-surface);
      border-bottom: 1px solid var(--color-border-decorative);
      box-shadow: 0 12px 24px rgba(0,0,0,0.15);
      padding: var(--space-2) var(--space-3);
    }
    nav.primary-nav.is-open { display: flex; }
    nav.primary-nav a {
      padding: 14px 4px;
      border-bottom: 1px solid var(--color-border-decorative);
    }
    nav.primary-nav a:last-child { border-bottom: none; }
    .hero-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto;
      grid-template-areas: "intro" "form" "support";
    }
    .hero-content { padding: var(--space-4) var(--space-3) var(--space-6); }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .about-split { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
    .field-row { grid-template-columns: 1fr; }
    .photo-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .services-grid { grid-template-columns: 1fr; }
    .trust-strip .wrap { font-size: 0.78rem; gap: var(--space-2); }
    .cookie-banner .wrap { flex-direction: column; align-items: stretch; text-align: center; }
    .cookie-banner-actions { justify-content: center; }
    .photo-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); }
    .lightbox-nav { width: 40px; height: 40px; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; scroll-behavior: auto !important; }
  }