/* M2 Consulting Group — shared stylesheet. Desktop is a fixed 980px layout (as on the old Wix site); below 980px the mobile layout applies. */

@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-garamond.woff2) format("woff2"); }
@font-face { font-family: "Josefin Sans"; font-weight: 300; font-display: swap; src: url(/fonts/josefin-sans.woff2) format("woff2"); }
@font-face { font-family: "Josefin Slab"; font-weight: 400; font-display: swap; src: url(/fonts/josefin-slab.woff2) format("woff2"); }
@font-face { font-family: "Bree Serif"; font-weight: 400; font-display: swap; src: url(/fonts/bree-serif.woff2) format("woff2"); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #000; font: 16px/1.4 Helvetica, Arial, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
.wrap { width: 980px; margin: 0 auto; position: relative; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 20; background: #fff; padding: 8px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: #fff; height: 77px; }
.site-header nav { display: flex; gap: 8px; padding-top: 16px; }
.site-header nav a { height: 44px; font: 600 18px/42px "Cormorant Garamond", Georgia, serif; letter-spacing: .9px; text-align: center; text-decoration: none; border-top: 1px solid transparent; border-bottom: 1px solid transparent; }
.site-header nav a:nth-child(1) { width: 145px; }
.site-header nav a:nth-child(2) { width: 139px; }
.site-header nav a:nth-child(3) { width: 160px; }
.site-header nav a:nth-child(4) { width: 141px; }
.site-header nav a:hover, .site-header nav a[aria-current] { border-color: #000; }
.menu-cb, .menu-btn { display: none; }

/* ---------- Footer ---------- */
.site-footer { width: 980px; height: 360px; margin: 10px auto 0; display: flex;
  background:
    radial-gradient(circle at 3.675% 6.94%, #4D6001 0%, 11.55%, rgba(77,96,1,0) 35%),
    radial-gradient(circle at 92.967% 9.554%, #FAAA63 0%, 17.5%, rgba(250,170,99,0) 35%),
    radial-gradient(circle at 95.207% 90.482%, #C9C6FF 0%, 34.1%, rgba(201,198,255,0) 55%),
    radial-gradient(circle at 4.313% 93.346%, #97B49D 0%, 29.9%, rgba(151,180,157,0) 65%),
    radial-gradient(circle at 46.556% 11.504%, rgba(214,222,72,.99) 0%, 25%, rgba(214,222,72,0) 50%),
    radial-gradient(circle at 51.121% 89.987%, #93C3FF 0%, 42%, rgba(147,195,255,0) 70%),
    #fff; }
.panel { display: flex; flex-direction: column; align-items: center; }
.panel-email { width: 329px; background: rgba(240,240,240,.8); color: #000; }
.panel-call { width: 325px; background: rgba(206,124,126,.8); color: #fff; }
.panel-social { width: 326px; background: rgba(4,81,132,.8); color: #fff; }
.panel .icon { height: 195px; display: flex; align-items: flex-end; gap: 8px; }
.panel .icon svg { display: block; fill: currentColor; }
.panel-email .icon svg { width: 65px; height: 52px; margin-bottom: 3px; fill: #4d4d4d; }
.panel-call .icon svg { width: 66px; height: 67px; margin-bottom: 7px; }
.panel-social .icon img { width: 61px; height: 61px; }
.panel .label { margin-top: 30px; font: italic 400 16px/18px "Bree Serif", Georgia, serif; letter-spacing: 1.6px; }
.panel-social .label { letter-spacing: .8px; }
.quickbar { display: none; }

/* ---------- Home ---------- */
.hero { height: 660px; background: url(/images/d0c8112b1d5a417eb69b8bcd49e77d7b.jpg) center / cover no-repeat; overflow: hidden; }
.hero .wrap { height: 100%; }
.hero-box { position: absolute; z-index: 1; left: 20px; top: 127px; width: 460px; height: 405px; padding: 50px 55px 0; background: #000; color: #fff; }
.hero-box h1 { font: 700 25px/33.75px Helvetica, Arial, sans-serif; text-transform: uppercase; margin-bottom: 25px; }
.hero-box p { font-size: 14px; line-height: 26.25px; margin-bottom: 30px; }
.btn-white { display: inline-block; min-width: 113px; height: 45px; padding: 0 19px; border: 1px solid #000; background: #fff; color: #000; font-size: 14px; line-height: 43px; text-align: center; text-decoration: none; }
.hero-logo { position: absolute; left: 475px; top: 34px; width: 560px; max-width: none; height: 540px; border: 5px solid #595959; object-fit: cover; }

/* ---------- About ---------- */
.about, .meet { font-family: "Josefin Sans", "Century Gothic", sans-serif; font-weight: 300; line-height: 22.4px; }
.about { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 20px 0 11px; }
.about-logo { width: 165px; height: 160px; object-fit: cover; }
.about .tagline { font-size: 15px; line-height: 21px; margin-top: 33px; }
.about h1 { font-size: 38px; line-height: 53.2px; font-weight: 300; margin: 37px 0 26px; }
.about .copy { width: 740px; }
.about .copy p + p { margin-top: 26px; }
.meet { padding: 72px 0 31px; }
.meet h2 { font-size: 56px; line-height: 70px; font-weight: 300; margin-left: 52px; }
.meet-cols { display: flex; margin-top: 16px; }
.meet-photos { width: 454px; padding-left: 63px; }
.meet-photos img { width: 321px; object-fit: cover; }
.meet-photos img:first-child { height: 409px; }
.meet-photos img + img { height: 426px; margin: 30px 0 0 -3px; }
.meet-copy { width: 490px; padding-top: 29px; }
.meet-copy p + p { margin-top: 7px; }
.meet-copy p.gap { margin-top: 30px; }

/* ---------- Portfolio listing ---------- */
.partners { padding: 44px 40px 49px; text-align: center; }
.partners h1 { font: 400 35px/35px "Josefin Slab", Georgia, serif; }
.partners .intro { font: 300 20px/28px "Josefin Sans", "Century Gothic", sans-serif; width: 700px; max-width: 100%; margin: 26px auto 0; }
.partners-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 78px; }
.partners-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* ---------- Events listing ---------- */
.events { background: url(/images/a6e1bb8d93704b859a65ba5d3dd3645a.jpg) center / cover no-repeat; padding: 20px 20px 20px; }
.events h1 { font: 700 36px/54px Helvetica, Arial, sans-serif; text-align: center; padding: 20px 0 40px; }
.event-card { width: 660px; max-width: 100%; margin: 0 auto; border: 1px solid #e8e6e6; background: #fff; text-align: center; padding-bottom: 32px; }
.event-card > img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #0057e1; }
.event-card .title { display: block; font-size: 26px; line-height: 31.2px; margin: 32px 32px 4px; text-decoration: none; }
.event-card .title:hover { color: #0057e1; }
.event-card .when span + span::before { content: "|"; margin: 0 9px; }
.event-card details { margin-top: 17px; }
.event-card summary { display: inline-block; cursor: pointer; text-decoration: underline; list-style: none; }
.event-card summary::-webkit-details-marker { display: none; }
.event-card details div { margin: 16px 32px 0; }
.btn-blue { display: block; width: 160px; height: 42px; margin: 32px auto 0; background: #0057e1; color: #fff; line-height: 42px; text-align: center; text-decoration: none; }

/* ---------- Portfolio detail ---------- */
.project { padding: 0 40px; }
.project-top { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
.project h1 { font: 700 60px/72px Helvetica, Arial, sans-serif; margin: 60px 0 12px; }
.project dt { font: 700 24px/33.6px Helvetica, Arial, sans-serif; padding-top: 14px; }
.project dd { font-size: 20px; line-height: 28px; padding: 6px 0 12px; }
.project-desc { font-size: 20px; line-height: 28px; padding: 72px 0 12px; }
.project-hero { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-top: 48px; }
.gallery { display: flex; gap: 40px; margin: 60px 0 40px; }
.gallery .col { flex: 1; display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.gallery img { width: 100%; height: auto; }
.project-nav { display: flex; justify-content: space-between; align-items: center; height: 45px; margin-bottom: 50px; font-size: 18px; }
.project-nav a { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.project-nav a:hover { text-decoration: underline; }
.project-nav .next { margin-left: auto; }
.project-nav svg { width: 18px; height: 18px; }
.project-nav .prev svg { transform: rotate(90deg); }
.project-nav .next svg { transform: rotate(-90deg); }

/* ---------- Event detail ---------- */
.event-top { background: linear-gradient(rgba(0,87,225,.1), rgba(0,87,225,.1)) no-repeat; background-size: 100% calc(100% - 276px); text-align: center; padding-top: 65px; }
.event-col { width: 843px; margin: 0 auto; }
.event-top h1 { font: 700 60px/72px Helvetica, Arial, sans-serif; }
.event-top .when { font-size: 18px; line-height: 25.2px; margin-top: 24px; }
.event-top .when span + span::before { content: "|"; margin: 0 10px; }
.event-top .summary { width: 560px; max-width: 100%; margin: 18px auto 0; line-height: 24px; }
.event-col hr { border: 0; border-top: 1px solid rgba(0,0,0,.2); margin: 41px 0 43px; }
.event-top .reg { line-height: 24px; padding-bottom: 60px; }
.event-banner { width: 979px; height: 552px; object-fit: cover; margin: 0 auto; background: #c8e0fe; }
.event-body { padding-bottom: 46px; }
.event-body h2 { font: 700 30px/39px Helvetica, Arial, sans-serif; margin: 50px 0 15px; }
.event-body .tl p { line-height: 22.4px; margin-bottom: 5px; }
.event-body h2.guests-h { margin: 41px 0 26px; }
.guests { display: flex; align-items: center; color: #0057e1; }
.guests i { width: 56px; height: 56px; margin-right: -14px; border-radius: 50%; border: 2px solid #fff; background: #d8d8d8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Ccircle cx='28' cy='22' r='10' fill='%23999'/%3E%3Cpath d='M8 56c0-13 9-20 20-20s20 7 20 20z' fill='%23999'/%3E%3C/svg%3E") center / cover; }
.guests span { margin-left: 26px; }
.event-body hr { margin: 30px 0 -8px; }
.rich { line-height: 24px; }
.rich h3 { font: 700 24px/36px Helvetica, Arial, sans-serif; text-align: center; }
.rich figure { width: 325px; margin: 0 auto; }
.rich figure img { width: 325px; height: 325px; object-fit: cover; }
.rich .more { display: none; }
#more:checked ~ .more { display: block; }
.more-btn { display: inline-block; margin-top: 36px; color: #0057e1; cursor: pointer; line-height: 22.4px; }
.more-btn .less, #more:checked ~ .more-btn .show { display: none; }
#more:checked ~ .more-btn .less { display: inline; }
#more { position: absolute; opacity: 0; }
#more:focus-visible ~ .more-btn { outline: 2px solid #0057e1; }
.event-map { display: block; width: 979px; max-width: 100%; height: 314px; margin: 42px auto 0; border: 0; filter: grayscale(1); }
.event-body h2.share-h { margin: 60px 0 26px; }
.share { display: flex; gap: 30px; }
.share svg { display: block; width: 19px; height: 16px; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 120px 20px; }
.notfound h1 { font: 700 36px/54px Helvetica, Arial, sans-serif; margin-bottom: 16px; }

/* ---------- Mobile ---------- */
@media (max-width: 979px) {
  body { padding-bottom: 72px; }
  .wrap, .site-footer, .event-col, .about .copy { width: auto; }

  .site-header { height: 64px; }
  .menu-btn { display: block; position: absolute; right: 16px; top: 12px; width: 40px; height: 40px; padding: 9px 6px; cursor: pointer; }
  .menu-btn span, .menu-btn::before, .menu-btn::after { content: ""; display: block; height: 2px; background: #000; margin-bottom: 8px; }
  .menu-cb { display: block; position: absolute; right: 16px; top: 12px; width: 40px; height: 40px; opacity: 0; }
  .menu-cb:focus-visible + .menu-btn { outline: 2px solid #000; }
  .site-header nav { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; padding: 8px 0 16px; background: #fff; border-bottom: 1px solid #000; }
  .menu-cb:checked ~ nav { display: flex; }
  .site-header nav a:nth-child(n) { width: auto; height: 48px; line-height: 46px; margin: 0 24px; font-size: 20px; }

  .site-footer { height: auto; flex-direction: column; margin-top: 24px; }
  .panel:nth-child(n) { width: auto; height: 245px; }
  .panel .icon { height: 135px; }
  .panel .icon svg, .panel-social .icon img { transform: scale(1.25); transform-origin: bottom; }
  .panel-social .icon { gap: 24px; }
  .panel .label { font-size: 20px; margin-top: 28px; }
  .quickbar { display: flex; position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; height: 72px; background: #fff; box-shadow: 0 -1px 4px rgba(0,0,0,.15); }
  .quickbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 15px; text-decoration: none; }
  .quickbar a + a { border-left: 1px solid #eee; }
  .quickbar svg { width: 24px; height: 24px; }

  .hero { height: auto; padding: 24px; }
  .hero .wrap { display: flex; flex-direction: column; }
  .hero-logo { position: static; order: -1; width: 100%; max-width: 100%; height: auto; aspect-ratio: 560 / 540; }
  .hero-box { position: static; width: auto; height: auto; padding: 14px 12px 36px; text-align: center; }
  .hero-box h1 { font-size: 22px; line-height: 32px; text-align: left; margin-bottom: 8px; }
  .hero-box p { font-size: 16px; line-height: 32px; text-align: left; margin-bottom: 24px; }
  .btn-white { min-width: 196px; height: 52px; line-height: 50px; font-size: 16px; }

  .about { padding: 48px 20px 0; }
  .about-logo { order: 1; width: 110px; height: 107px; margin-top: 24px; }
  .about .tagline { margin-top: 0; }
  .about h1 { font-size: 30px; line-height: 46px; margin: 28px 0 22px; }
  .meet { padding: 16px 20px 24px; }
  .meet h2 { font-size: 34px; line-height: 44px; margin: 0; text-align: center; }
  .meet-cols { display: block; }
  .meet-photos { width: auto; padding: 0; }
  .meet-photos img:nth-child(n) { width: 270px; height: auto; margin: 12px auto 0; }
  .meet-copy { width: auto; padding-top: 20px; font-size: 17px; line-height: 27px; }

  .partners { padding: 60px 24px 24px; }
  .partners .intro { font-size: 18px; margin-top: 20px; }
  .partners-grid { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }

  .events { padding: 24px; }
  .events h1 { font-size: 34px; padding: 4px 0 20px; }
  .event-card { text-align: left; padding: 0 28px 28px; }
  .event-card > img { width: calc(100% + 56px); max-width: none; margin: 0 -28px; }
  .event-card .title { font-size: 24px; line-height: 36px; margin: 24px 0 0; }
  .event-card .when { font-size: 20px; }
  .event-card .when span + span { display: none; }
  .event-card summary { font-size: 20px; }
  .event-card details div { margin: 12px 0 0; }
  .btn-blue { width: 100%; height: 52px; line-height: 52px; font-size: 20px; }

  .project { padding: 0 20px; }
  .project-top { display: block; }
  .project h1 { font-size: 36px; line-height: 44px; margin-top: 40px; }
  .project dt { font-size: 20px; line-height: 28px; }
  .project dd, .project-desc { font-size: 16px; line-height: 24px; }
  .project-desc { padding-top: 24px; }
  .project-hero { margin-top: 32px; }
  .gallery { flex-direction: column; gap: 20px; margin: 20px 0 32px; }
  .gallery .col { display: contents; }
  .project-nav { font-size: 16px; }

  .event-top { display: flex; flex-direction: column; padding: 0; }
  .event-top .event-col { padding: 24px 20px 0; min-width: 0; max-width: 100%; }
  .event-top .summary { width: auto; }
  .event-top h1 { font-size: 32px; line-height: 40px; }
  .event-top .when { font-size: 16px; }
  .event-top .reg { padding-bottom: 28px; }
  .event-banner { order: -1; width: 100%; height: auto; aspect-ratio: 979 / 552; }
  .event-top { background-size: 100% 100%; }
  .event-body { padding: 0 20px 32px; }
  .event-body h2 { font-size: 24px; line-height: 32px; margin-top: 36px; }
  .rich h3 { font-size: 20px; line-height: 30px; }
  .rich figure, .rich figure img { width: 100%; max-width: 325px; height: auto; aspect-ratio: 1; }
  .event-map { width: 100%; }
}