/* =====================================================================
   monss.co — hand-authored stylesheet (1:1 with the Gatsby/Tailwind build).
   Part A: Tailwind 2.2.7 preflight (modern-normalize + base), verbatim.
   ===================================================================== */
/*! tailwindcss v2.2.7 | MIT License | https://tailwindcss.com */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=submit],button{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:Graphik,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{color:inherit;line-height:inherit;padding:0}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}

/* Part B: nav link cascade + .container (verbatim from the build). */
nav a{color:rgba(107,114,128,var(--tw-text-opacity));font-size:1.125rem;font-weight:500;line-height:1.75rem}nav a,nav a:hover{--tw-text-opacity:1}nav a:hover{color:rgba(17,24,39,var(--tw-text-opacity))}nav a.active{--tw-text-opacity:1;color:rgba(0,0,0,var(--tw-text-opacity));font-size:1.125rem;font-weight:500;line-height:1.75rem}nav a.active:hover{--tw-text-opacity:1;color:rgba(17,24,39,var(--tw-text-opacity))}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}

/* Part C: @font-face william (self-hosted woff2). */
@font-face{font-family:william;font-style:normal;font-weight:400;src:url(/assets/fonts/WilliamRegular-Italic.woff2) format("woff2")}

/* Part D: semantic component rules (added per step). */

/* ---------------------------------------------------------------------------
   Step 2 — layout shell, header, footer.
   Values mirror the Tailwind utilities each element had in the Gatsby build.
   Breakpoints: sm 640, md 768, lg 1024, xl 1280 (mobile-first).
   --------------------------------------------------------------------------- */

/* shared helpers kept as utilities (central layout primitives) */
.mx-auto { margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }

/* Layout wrapper (flex flex-col h-screen justify-between) */
.layout { display: flex; flex-direction: column; height: 100vh; justify-content: space-between; }
.main { flex-grow: 1; }

/* ---- Header ---- */
.site-header { color: rgb(75, 85, 99); z-index: 20;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); }
.site-header__bar { position: relative; z-index: 10; background-color: #fff; }
.site-header__inner { position: relative; padding: 1rem 1rem; }

.nav { position: relative; display: flex; align-items: center; justify-content: space-between; }
.nav__brand-wrap { display: flex; align-items: center; flex-grow: 1; flex-shrink: 0; }
.nav__brand-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }

.brand { display: flex; align-items: center; font-weight: 500; color: rgb(17, 24, 39); }
.brand__name { font-size: 1.875rem; line-height: 2.25rem; }

.nav__toggle { margin-right: -0.5rem; display: flex; align-items: center; }
.menu-btn { background-color: #fff; border-radius: 0.375rem; padding: 0.5rem;
  display: inline-flex; align-items: center; justify-content: center; color: rgb(156, 163, 175); }
.menu-btn:hover { color: rgb(107, 114, 128); background-color: rgb(243, 244, 246); }
.icon--6 { width: 1.5rem; height: 1.5rem; }
.icon--5 { width: 1.25rem; height: 1.25rem; }

.nav__links { display: none; }

/* ---- Mobile menu panel (closed by default) ---- */
.menu-panel { position: absolute; top: 0; left: 0; right: 0; padding: 0.5rem; display: none;
  transform: matrix(1, 0, 0, 1, 0, 0); transform-origin: top right;
  transition-duration: .15s; transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; }
.menu-panel.is-open { display: block; }
.menu-panel__card { border-radius: 0.5rem; background-color: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06); }
.menu-panel__head { padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem;
  display: flex; align-items: center; justify-content: space-between; }
.menu-panel__close-wrap { margin-right: -0.5rem; }
.menu-panel__links { padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.5rem; padding-bottom: 0.75rem; }
.menu-panel__links > a + a { margin-top: 0.25rem; }
.menu-link { display: block; padding: 0.5rem 0.75rem; border-radius: 0.375rem;
  font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: rgb(55, 65, 81); }
.menu-link:hover { color: rgb(17, 24, 39); background-color: rgb(249, 250, 251); }

/* ---- Footer ---- */
.footer { background-color: #191919; color: #fff; padding-top: 2.5rem; }
.footer__pad { padding: 1.25rem; }
.footer__cols { display: flex; flex-direction: column; gap: 2rem; }
.footer__cols > div + div { margin-top: 2rem; }
.footer__col { flex: 1 1 0%; }
.footer__heading { opacity: 0.4; font-size: 1.125rem; line-height: 1.75rem; }
.footer__link { font-size: 1.125rem; line-height: 1.75rem; opacity: 0.8; }
.footer__link:hover { opacity: 1; text-decoration: underline; }
.footer__link--ul { text-decoration: underline; }
.footer__link--ul:hover { opacity: 1; }

.footer__divide { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.footer__divide > * + * { border-top-width: 1px; border-color: #fff; }
.footer__bottom { display: flex; flex-direction: column-reverse; justify-content: space-between;
  align-items: flex-end; gap: 0.5rem; }
.footer__bottom > * + * { margin-top: 0.5rem; }
.footer__copy { font-size: 0.875rem; line-height: 1.25rem; }
.footer__social { display: inline-flex; margin-top: 1rem; justify-content: center; }
.footer__social-link:hover { color: rgb(107, 114, 128); }
.footer__social-link--sp { margin-left: 0.75rem; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-end; }
.footer__spacer { margin-top: 1.25rem; }

/* ===== Breakpoints ===== */
@media (min-width: 640px) {
  .site-header__inner { padding-left: 1.5rem; padding-right: 1.5rem; }
  .nav { height: 2.5rem; }
  .footer__social { margin-left: auto; margin-top: 0; justify-content: flex-start; }
}
@media (min-width: 768px) {
  .site-header__bar { padding-bottom: 2rem; }
  .site-header__inner { padding-top: 2rem; padding-bottom: 0; }
  .nav__brand-row { width: auto; }
  .nav__toggle { display: none; }
  .nav__links { display: block; margin-left: 2.5rem; padding-right: 1rem; }
  .nav__links > a + a { margin-left: 2rem; }
  .menu-panel { display: none; }
  .footer__cols { flex-direction: row; }
  .footer__cols > div + div { margin-top: 0; }
  .footer__bottom { flex-direction: row; }
  .footer__bottom > * + * { margin-top: 0; }
}
@media (min-width: 1024px) {
  .site-header__inner { padding-left: 2rem; padding-right: 2rem; }
  .nav__brand-wrap { flex-grow: 0; }
}

/* ---------------------------------------------------------------------------
   Step 3 — responsive images (gatsby-image parity).
   Wrapper max-width/height and spacer padding-bottom are inline (per image).
   Fade: placeholder 1 -> 0 and real 0 -> 1 on load (.is-loaded), 500ms.
   --------------------------------------------------------------------------- */
.gimg { position: relative; overflow: hidden; }
.gimg__spacer { width: 100%; }
.gimg__ph, .gimg__img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.gimg__ph { opacity: 1; transition-delay: 500ms; }
.gimg__img { opacity: 0; transition: opacity 500ms; }
.gimg.is-loaded .gimg__ph { opacity: 0; }
.gimg.is-loaded .gimg__img { opacity: 1; }

/* ---------------------------------------------------------------------------
   Step 4 — home page sections. Values mirror the Tailwind utilities per element.
   --------------------------------------------------------------------------- */
.m-auto { margin: auto; }
.italic { font-style: italic; }
.font-william { font-family: william; }
.font-bold { font-weight: 700; }

/* Button */
.btn { font-size: 1.125rem; line-height: 1.75rem; height: 4rem; background-color: #000;
  border: 4px solid #000; color: #fff; padding: 0.5rem 2.5rem; margin-right: 0.25rem;
  transition-duration: .3s; transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; }
.btn:hover { background-color: #fff; color: #000; }

/* Home wrapper */
.home { display: flex; flex-direction: column; min-height: 100%; }

/* Landing */
.landing { padding: 1.25rem; padding-bottom: 2.5rem; }
.landing__title { font-size: 2.25rem; line-height: 2.5rem; font-weight: 600; }
.landing__row { display: flex; flex-direction: column; justify-content: space-between; padding-top: 1.25rem; }
.landing__media { flex: 1 1 0%; }
.landing__copy { width: 100%; font-size: 1.125rem; line-height: 2.5rem; color: rgba(0,0,0,.75); margin-top: 1.25rem; }
.landing__lead { font-size: 1.5rem; line-height: 2rem; margin-bottom: 2.5rem; }
.landing__cta { margin-top: 1rem; }

/* Who we are */
.who { min-height: 100vh; position: relative; display: flex; }
.who__center { margin-top: auto; margin-bottom: auto; }
.who__eyebrow { text-align: center; font-size: .875rem; line-height: 1.25rem; opacity: .5; margin: 1.25rem; text-transform: capitalize; }
.who__box { width: 66.666667%; margin: auto; }
.who__text { text-align: left; font-size: 1.5rem; line-height: 2rem; }
.who__bar { position: absolute; bottom: 0; left: 0; height: 10rem; width: 0.75rem; background-color: #000; }

/* Services */
.services { background-color: #191919; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.services__inner { padding: 1.25rem; display: flex; flex-wrap: wrap; color: #fff; }
.services__inner > * + * { margin-top: 2.5rem; }
.services__col { width: 100%; }
.services__h { padding-top: 0.75rem; padding-bottom: 0.75rem; text-transform: uppercase; }
.services__list > * + * { border-top-width: 1px; border-color: rgba(255,255,255,.7); }
.services__item { font-size: 1.25rem; line-height: 1.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.services__spacer { width: 25%; }

/* Carousel section (placeholder; filled in Step 5) */
.carousel-section { margin-top: 5rem; margin-bottom: 5rem; }
.carousel-pad { padding: 1.25rem; -webkit-user-select: none; user-select: none; }

/* Results */
.results { background-color: #191919; color: #fff; }
.results__pad { padding: 1.25rem; }
.results__title { font-size: 3rem; line-height: 1; max-width: 32rem; padding-top: 5rem; padding-bottom: 5rem; }
.results__row { display: flex; flex-direction: column; }
.results__box { padding: 2.5rem 1.25rem; }
.results__box--1 { background-color: #1f2937; }
.results__box--2 { background-color: #374151; }
.results__box--3 { background-color: #4b5563; }
.results__box--4 { background-color: #6b7280; }
.results__time { padding: 1.25rem; }

/* Hire Us / Careers */
.hire-section { padding: 1.25rem; }
.hireus { padding-top: 5rem; padding-bottom: 5rem; }
.hireus > * + * { border-top-width: 1px; }
.hireus__block { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.section-title { font-size: 3rem; line-height: 1; max-width: 28rem; }
.hireus__callouts { display: flex; flex-direction: column; justify-content: space-between; }
.hireus__cta { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.callout { flex: 1 1 0%; }
.callout__title { font-weight: 400; opacity: .5; font-size: 1.875rem; line-height: 2.25rem; padding-top: 1.25rem; }
.callout__sub { max-width: 24rem; padding-top: 1rem; padding-bottom: 1rem; font-size: 1.125rem; line-height: 2.5rem; color: rgba(0,0,0,.8); }
.careers { padding-bottom: 5rem; }
.careers > * + * { border-top-width: 1px; }
.careers__block { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.careers__callouts { display: flex; flex-direction: column; }
.careers__cta { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.careers__link { font-size: 1.5rem; line-height: 2rem; padding-top: 1.25rem; padding-bottom: 1.25rem; text-decoration: underline; }
.careers__link:hover { color: #065f46; }

/* Next step */
.next-step { background-color: #191919; height: calc(100vh / 3); color: #fff; display: flex; }
.next-step__pad { margin: auto; padding: 1.25rem; }
.next-step__eyebrow { color: #fff; font-size: .875rem; line-height: 1.25rem; opacity: .5; }
.next-step__title { font-size: 2.25rem; line-height: 2.5rem; }
.next-step__link { text-decoration: underline; }

/* ===== Home breakpoints ===== */
@media (min-width: 640px) {
  .services__col { width: 50%; }
}
@media (min-width: 768px) {
  .landing__title { font-size: 4.5rem; line-height: 1; }
  .landing { padding-top: 5rem; }
  .landing__row { flex-direction: row; padding-top: 2.5rem; }
  .landing__copy { width: 40%; margin-left: 3rem; margin-top: 0; }
  .landing__lead { font-size: 2.25rem; line-height: 2.5rem; }
  .landing__cta { margin-top: 2.5rem; }
  .who { min-height: 90vh; }
  .who__text { text-align: center; line-height: 1.625; font-size: 2.25rem; }
  .who__bar { bottom: 2.5rem; }
  .carousel-pad { max-width: 768px; margin-left: auto; margin-right: auto; }
  .services__inner { gap: 2.5rem; }
  .services__inner > * + * { margin-top: 0; }
  .results__row { flex-direction: row; }
  .results__row > * + * { border-left-width: 1px; }
  .results__col--1 { width: 16.666667%; }
  .results__col--2 { width: 25%; }
  .results__col--3 { width: 33.333333%; }
  .results__col--4 { width: 50%; }
  .next-step__eyebrow { font-size: 1rem; line-height: 1.5rem; }
  .next-step__title { font-size: 4.5rem; line-height: 1; }
  .next-step__link { font-size: 1.25rem; line-height: 1.75rem; }
}
@media (min-width: 1024px) {
  .landing { padding-top: 10rem; padding-bottom: 10rem; }
  .landing__row { padding-top: 5rem; }
  .landing__copy { font-size: 1.5rem; line-height: 2rem; }
  .who { min-height: 60vh; display: block; }
  .carousel-pad { max-width: 1024px; }
  .services__col { width: 40%; padding-left: 1.25rem; padding-right: 1.25rem; }
  .results__col--1 { width: 8.333333%; }
  .results__col--2 { width: 16.666667%; }
  .results__col--3 { width: 25%; }
  .hireus__callouts { flex-direction: row; }
  .careers__callouts { flex-direction: row; }
  .callout__sub { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1280px) {
  .landing__title { font-size: 8rem; line-height: 1; }
  .landing__copy { width: 33.333333%; }
  .carousel-pad { max-width: 1280px; }
}

/* ---------------------------------------------------------------------------
   Step 5 — carousel (vanilla replica of the Swiper case-study carousel).
   --------------------------------------------------------------------------- */
.gimg--contain .gimg__img, .gimg--contain .gimg__ph { object-fit: contain; }

.carousel { position: relative; }
.carousel__viewport { overflow: hidden; }
.carousel__track { display: flex; transition: transform 300ms; will-change: transform; }
.carousel__slide { flex: 0 0 100%; width: 100%; }

.case { position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; }
.case--liveworks { opacity: 1; }
.case__inner { position: relative; height: 90vh; margin-bottom: 0; }
.case__inner--dark { color: #000; }
.case__inner--light { color: #fff; }
.case__box { position: absolute; bottom: 2.5rem; padding: 1.25rem; }
.case__logo { width: 50px; }
.case__title { font-size: 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.case__sub { font-weight: 300; font-size: 1.25rem; line-height: 1.75rem; }

.carousel__bullets { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; z-index: 10; line-height: 0; }
.carousel__bullet { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #000; opacity: 0.2; margin: 0 4px; cursor: pointer; }
.carousel__bullet.is-active { background: #007aff; opacity: 1; }

.carousel__arrow { position: absolute; top: 0; bottom: 0; z-index: 10; padding: 1.25rem; cursor: pointer; display: flex; align-items: center; }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__arrow-inner { display: none; }

@media (min-width: 768px) {
  .case__inner { height: 50vh; padding: 5rem; width: 50%; }
  .carousel__arrow-inner { display: block; }
}

/* ---------------------------------------------------------------------------
   Step 6 — about / services / ventures / privacy / 404, skills, faq, forms.
   --------------------------------------------------------------------------- */
.flex-1 { flex: 1 1 0%; }
.h-96 { height: 24rem; }
.eyebrow { font-weight: 200; }
.page-lead { font-weight: 300; font-size: 1.875rem; line-height: 1.25; max-width: 42rem; padding-bottom: 2.5rem; }

/* Difference */
.difference { flex: 1 1 0%; max-width: 24rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.difference > * + * { border-top-width: 2px; }
.difference__num { padding-top: 0.5rem; }
.difference__title { font-weight: 500; font-size: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; line-height: 2; }
.difference__sub { line-height: 2; }
.difference__opt { font-size: 1.125rem; font-weight: 300; }

/* About */
.about-why { padding: 1.25rem; display: flex; flex-direction: row; }
.about-diff { padding: 1.25rem; display: flex; flex-direction: column; justify-content: space-between; margin-top: 2.5rem; margin-bottom: 2.5rem; gap: 2rem; }
.story { background-color: #191919; color: #fff; padding-top: 6rem; }
.story__inner { padding: 1.25rem; display: flex; flex-direction: column-reverse; }
.story__text { flex: 1 1 0%; padding-right: 0.75rem; }
.story__title { font-size: 3.75rem; line-height: 1; }
.story__body { max-width: 28rem; padding-top: 2.5rem; padding-bottom: 2.5rem; font-size: 1.25rem; letter-spacing: 0.025em; line-height: 2; }
.story__imgs { flex: 1 1 0%; display: flex; flex-direction: row; gap: 2rem; }
.m-img { display: none; flex: 1 0 0%; object-fit: cover; height: 24rem; }
.m-img--summer { margin-bottom: 10rem; }
.m-img--winter { margin-top: -5rem; }
.m-img--spring { margin-bottom: -5rem; }
.monss-name { padding: 1.25rem; margin-top: 5rem; margin-bottom: 5rem; }
.monss-name__row { display: flex; flex-direction: column; margin-bottom: 3rem; align-content: space-around; }
.monss-name__q { flex: 1 1 0%; padding-right: 0.75rem; align-self: flex-start; }
.monss-name__title { font-weight: 200; font-size: 3.75rem; line-height: 1; max-width: 24rem; margin-left: auto; margin-top: auto; }
.monss-name__a { flex: 1 1 0%; }
.monss-name__lead { padding-top: 1.25rem; padding-bottom: 1.25rem; max-width: 28rem; font-size: 1.5rem; line-height: 2rem; }
.monss-name__body { max-width: 28rem; font-size: 1.25rem; line-height: 1.75rem; }

/* Privacy */
.privacy { padding: 1.25rem; min-height: 100vh; }
.privacy__body { font-size: 1.125rem; line-height: 2.5rem; color: rgba(0,0,0,.75); max-width: 65ch; }
.privacy__link { text-decoration: underline; color: #000; }

/* 404 */
.notfound { padding: 1.25rem; display: flex; height: 100vh; }
.notfound__center { margin: auto; }
.notfound__big { font-size: 1.5rem; line-height: 2rem; }
.notfound__mid { font-size: 1.25rem; line-height: 1.75rem; }
.notfound__home { font-size: 1.875rem; line-height: 2.25rem; text-decoration: underline; }
.notfound__contact { opacity: 0.8; padding-top: 2.5rem; }

/* Services */
.svc-intro { padding: 1.25rem; display: flex; flex-direction: row; padding-top: 2.5rem; }
.svc-intro__body { max-width: 65ch; font-size: 1.125rem; line-height: 2.5rem; color: rgba(0,0,0,.75); }
.mockups { display: flex; justify-content: center; gap: 1rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.mockups > * + * { margin-left: 1rem; }
.mk { flex: 1 1 0%; object-fit: cover; height: 24rem; }
.mk--1 { display: none; flex: 1 0 0%; }
.mk--2 { margin-top: 2.5rem; margin-bottom: 2.5rem; }
.mk--3 { margin-top: -1.25rem; margin-bottom: -1.25rem; }
.mk--4 { display: none; margin-top: 1.25rem; }
.svc-gap { padding: 2.5rem; }
.svc-project { padding: 1.25rem; }
.svc-project__pad { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.svc-project__bar { height: 2rem; width: 5rem; background-color: #000; }
.svc-project__text { font-size: 1.125rem; line-height: 1.75rem; }
.svc-project__link { padding-top: 0.75rem; padding-bottom: 0.75rem; text-decoration: underline; font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; }
.svc-faq-wrap { padding-bottom: 8rem; }

/* Skills */
.skills { background-color: #191919; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.skills__h { color: #fff; padding-left: 1.25rem; padding-right: 1.25rem; font-size: 1.875rem; line-height: 1.25; }
.skills__list { padding: 1.25rem; display: flex; flex-direction: column; gap: 3.5rem; }
.skills__list > * + * { border-top-width: 2px; border-color: #fff; margin-top: 3.5rem; }
.skill { color: #fff; }
.skill__title { font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.skill__row { display: flex; flex-direction: column; gap: 2.5rem; margin-top: 1.25rem; margin-bottom: 1.25rem; justify-content: space-evenly; }
.skill__pad { display: none; flex: 1 1 0%; }
.skill__desc { flex: 1 1 0%; font-size: 1.25rem; line-height: 1.75rem; max-width: 20rem; }
.skill__opts { flex: 1 1 0%; }
.skill__opts > * + * { border-top-width: 1px; border-color: #fff; }
.skill__opt { font-size: 1.25rem; line-height: 1.75rem; padding-top: 1rem; padding-bottom: 1rem; }

/* FAQ */
.faq { background-color: rgb(243,244,246); padding-top: 2.5rem; }
.faq__wrap { margin-left: auto; margin-right: auto; max-width: 72rem; }
.faq__inner { padding: 0.5rem; background-color: rgb(243,244,246); border-radius: 0.25rem; }
.faq__cols { display: flex; flex-direction: column; }
.faq__intro { padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; }
.faq__title { font-size: 1.875rem; line-height: 2.25rem; }
.faq__title-em { font-weight: 500; }
.faq__q1 { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.faq__q2 { margin-bottom: 0.5rem; }
.faq__hint { font-size: 0.75rem; line-height: 1rem; color: rgb(75,85,99); }
.faq__items { padding: 1rem; }
.faq-item { margin-bottom: 0.5rem; -webkit-user-select: none; user-select: none; }
.faq-item__q { font-weight: 500; border-radius: 0.125rem; font-size: 1.125rem; line-height: 1.75rem; padding: 0.75rem 0.5rem; display: flex; color: rgb(31,41,55); flex-direction: row-reverse; margin-top: 0.5rem; cursor: pointer; background-color: #fff; }
.faq-item__q-text { flex: 1 1 auto; }
.faq-item__icon { padding-left: 0.5rem; padding-right: 0.5rem; margin-top: 0.25rem; }
.faq-item__chevron-up { width: 1.25rem; height: 1.25rem; display: none; }
.faq-item__chevron-down { width: 1.25rem; height: 1.25rem; display: block; }
.faq-item__a { padding: 1.25rem; text-align: justify; color: rgb(31,41,55); margin-bottom: 1.25rem; background-color: #fff; display: none; }
.faq-item.is-open .faq-item__chevron-up { display: block; }
.faq-item.is-open .faq-item__chevron-down { display: none; }
.faq-item.is-open .faq-item__a { display: block; }

/* Ventures */
.vt-hero { padding: 1.25rem; display: flex; flex-direction: column; justify-content: center; gap: 2.5rem; padding-top: 2.5rem; padding-bottom: 2.5rem; }
.vt-hero > * + * { margin-top: 2.5rem; margin-left: 2.5rem; }
.vt-hero__media { flex: 1 1 0%; position: relative; }
.vt-hero__img { z-index: 0; }
.vt-hero__tag { z-index: 10; padding: 0.75rem; position: absolute; font-size: 1.5rem; line-height: 2rem; font-weight: 800; letter-spacing: 0.1em; }
.vt-hero__tag--ventures { top: 0; left: 0; background-color: #000; color: #fff; }
.vt-hero__tag--monss { left: 0; bottom: 0; background-color: #fff; color: #fff; }
.vt-hero__copy { flex: 1 1 0%; padding-top: 3.5rem; padding-bottom: 3.5rem; }
.vt-hero__title { font-size: 2.25rem; line-height: 1.25; max-width: 65ch; }
.vt-hero__body { max-width: 28rem; font-size: 1.25rem; line-height: 1.75rem; padding-top: 1rem; padding-bottom: 1rem; }
.vt-look { color: #fff; background-color: #191919; opacity: 0.95; padding-top: 6rem; padding-bottom: 6rem; }
.vt-look__inner { padding: 1.25rem; margin-top: 2.5rem; margin-bottom: 2.5rem; }
.vt-look__title { font-size: 2.25rem; line-height: 1.25; max-width: 42rem; padding-bottom: 2.5rem; flex: 1 1 0%; }
.vt-look__grid { display: flex; flex-direction: column; gap: 2.5rem; flex: 1 1 0%; }
.vt-look__grid > * + * { margin-top: 2.5rem; }
.vt-grit { padding: 2.5rem; background-color: rgb(229,231,235); margin-top: 5rem; margin-bottom: 5rem; }
.vt-grit__inner { max-width: 65ch; margin-left: auto; margin-right: auto; }
.vt-grit__title { font-size: 2.25rem; line-height: 1.25; max-width: 42rem; padding-bottom: 2.5rem; }
.vt-grit__body { font-size: 1.25rem; line-height: 1.75rem; }
.vt-grit__offer { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.vt-grit__offer-title { padding-top: 1.25rem; padding-bottom: 1.25rem; font-size: 1.875rem; line-height: 2.25rem; }
.vt-grit__lists { display: flex; flex-direction: column; }
.vt-grit__list { line-height: 2; font-size: 1.25rem; }
.vt-grit__fine { font-size: 0.75rem; line-height: 1rem; }
.vt-form { padding: 1.25rem; max-width: 65ch; margin-left: auto; margin-right: auto; margin-bottom: 5rem; }

/* Forms */
.form { width: 100%; }
.form__title { font-size: 2.25rem; line-height: 2.5rem; padding-top: 1.25rem; padding-bottom: 0.75rem; }
.form__title--semibold { font-weight: 600; }
.form__sub { font-size: 1.5rem; line-height: 2rem; padding-bottom: 2.5rem; }
.form__sub--light { font-weight: 200; }
.form__row { display: flex; flex-wrap: wrap; margin-left: -0.75rem; margin-right: -0.75rem; margin-bottom: 1.5rem; }
.field { padding-left: 0.75rem; padding-right: 0.75rem; width: 100%; }
.field--half-first { margin-bottom: 1.5rem; }
.field--full { }
.field--half-mb { margin-bottom: 1.5rem; }
.field--area { padding-left: 0.75rem; padding-right: 0.75rem; width: 100%; }
.field__label { display: block; letter-spacing: 0.025em; color: #000; font-size: 1rem; line-height: 1.5rem; }
.field__label--area { padding-bottom: 0.5rem; }
.field__input { -webkit-appearance: none; appearance: none; display: block; width: 100%; color: rgb(55,65,81); border-style: solid; border-width: 0; border-color: rgb(55,65,81); border-bottom-width: 2px; padding-top: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 0.75rem; line-height: 1.25; }
.field__input:focus { outline: none; border-color: rgb(245,158,11); }
.field__area { -webkit-appearance: none; appearance: none; display: block; width: 100%; background-color: #fff; color: rgb(55,65,81); border: 2px solid rgb(55,65,81); padding: 0.75rem 1rem; margin-bottom: 0.75rem; line-height: 1.25; height: 12rem; resize: vertical; }
.field__area:focus { outline: none; background-color: #fff; }
.field__select { width: 100%; padding: 0.5rem; box-shadow: inset 0 0 0 1px #000; margin-top: 0.75rem; }
.field__err { color: rgb(239,68,68); font-size: 0.75rem; line-height: 1rem; font-style: italic; display: none; }
.field__err.is-shown { display: block; }
.form__submit-row { }
.form__submit-col { }
.btn--medium { font-weight: 500; }
.form__error-msg { padding-top: 1.25rem; padding-bottom: 1.25rem; color: rgb(239,68,68); font-size: 1rem; line-height: 1.5rem; font-style: italic; display: none; }
.form__error-msg.is-shown { display: block; }

/* ===== Step 6 breakpoints ===== */
@media (min-width: 768px) {
  .about-why { padding-top: 2.5rem; }
  .svc-intro { padding-top: 2.5rem; }
  .page-lead { font-size: 3.75rem; line-height: 1; }
  .privacy { height: 70vh; }
  .notfound__big { font-size: 4.5rem; line-height: 1; }
  .notfound__mid { font-size: 3rem; line-height: 1; }
  .notfound__home { font-size: 6rem; line-height: 1; }
  .mockups { gap: 2rem; padding-top: 5rem; padding-bottom: 5rem; }
  .mockups > * + * { margin-left: 2rem; }
  .mk--1, .mk--4 { display: block; }
  .m-img { display: block; }
  .skills__h { font-weight: 300; font-size: 3rem; line-height: 1; }
  .skills__list > * + * { margin-top: 0; }
  .skill__row { flex-direction: row; gap: 5rem; }
  .faq__cols { flex-direction: row; }
  .faq__intro { width: 33.333333%; }
  .faq__items-wrap { width: 66.666667%; }
  .story__title { }
  .vt-hero { gap: 2rem; }
  .vt-hero__copy { padding-top: 0; padding-bottom: 0; }
  .vt-hero__title { font-weight: 300; font-size: 3.75rem; line-height: 1; }
  .vt-look__title { font-weight: 300; font-size: 3.75rem; line-height: 1; }
  .vt-grit__title { font-size: 3.75rem; line-height: 1; }
  .vt-grit__offer { margin-left: 8rem; padding: 2.5rem; }
  .vt-grit__lists { flex-direction: row; gap: 2rem; }
  .field--half-first { width: 50%; margin-bottom: 0; }
  .field--half { width: 50%; }
  .field--half-mb { width: 50%; }
  .form__submit-row { display: flex; align-items: center; }
  .form__submit-col { width: 33.333333%; }
}
@media (min-width: 1024px) {
  .about-diff { flex-direction: row; }
  .difference { padding-top: 0; padding-bottom: 0; }
  .story { padding-top: 7rem; }
  .story__inner { flex-direction: row; }
  .monss-name__row { flex-direction: row; padding: 8rem; }
  .monss-name__q { align-self: center; }
  .svc-intro__body { font-size: 1.5rem; line-height: 2rem; }
  .privacy__body { font-size: 1.5rem; line-height: 2rem; }
  .skill__pad { display: block; flex: 1 1 0%; }
  .vt-hero { flex-direction: row; padding-top: 5rem; padding-bottom: 5rem; }
  .vt-look__grid { flex-direction: row; }
  .vt-look__grid > * + * { margin-top: 0; margin-left: 2.5rem; }
}

/* ---------------------------------------------------------------------------
   Step 7 — contact page + sidebar, form success/hidden states.
   --------------------------------------------------------------------------- */
.contact { padding: 1.25rem; }
.contact__row { display: flex; flex-direction: column; }
.sidebar { width: 100%; padding-top: 4rem; padding-bottom: 4rem; }
.sidebar__img { margin-top: 3rem; }
.sidebar__block { padding-top: 2rem; padding-bottom: 2rem; }
.sidebar__q { font-size: 1.25rem; line-height: 1.75rem; }
.sidebar__link { font-weight: 700; font-size: 1.125rem; line-height: 1.75rem; text-decoration: underline;
  transition-duration: .3s; transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; }
.sidebar__link:hover { text-decoration: none; color: rgb(245,158,11); }

.form.is-hidden { display: none; }
.form__thanks { font-size: 1.5rem; line-height: 2rem; padding-bottom: 2.5rem; }
.form__thanks--light { font-weight: 200; }

@media (min-width: 768px) {
  .contact__row { flex-direction: row; }
  .contact__form { width: 75%; }
  .contact__side { width: 25%; }
  .sidebar { padding-left: 5rem; }
}