/* ============================================================
   MS TYCHE & CO. LTD — 1:1 rebuild of mstycheco Wix site
   Reference desktop geometry measured on the live site
   (layout width L; anchors: left-fixed / centered / right-fixed)
   Brand purple: #823FFD  (rgb 130,63,253)
   ============================================================ */

:root {
  --purple: #823ffd;
  --black: #000;
  --white: #fff;
  --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: 16px;
  overflow-x: clip; /* the original clips overflowing header nav */
}

img { border: 0; }
a { color: inherit; text-decoration: none; }

/* ---------- decorative primitives ---------- */

/* "+" mark: 20x20 thin cross, centered on its coordinates */
.plus {
  position: absolute;
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  background: var(--black);
}
.plus::before { /* horizontal */
  left: 0; right: 0; top: 50%;
  height: 1px;
}
.plus::after { /* vertical */
  top: 0; bottom: 0; left: 50%;
  width: 1px;
}

/* full-width rule, 110px in from both edges */
.rule {
  position: absolute;
  left: 110px;
  right: 110px;
  border: 0;
  border-top: 1px solid var(--black);
}

/* corner brackets: [   ] */
.bracket {
  position: absolute;
  pointer-events: none;
}
.bracket::before,
.bracket::after {
  content: "";
  position: absolute;
  left: 0;
  width: var(--stub, 24px);
  height: 1px;
  background: var(--black);
}
.bracket::before { top: 0; }
.bracket::after { bottom: 0; }
.bracket { border-left: 1px solid var(--black); }
.bracket.right { border-left: 0; border-right: 1px solid var(--black); }
.bracket.right::before,
.bracket.right::after { left: auto; right: 0; }

/* pill button */
.btn-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border: 1px solid var(--white);
  border-radius: 100px;
  color: var(--black);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 24px;
  cursor: pointer;
  transition: opacity .2s ease;
}
.btn-pill:hover { opacity: .85; }

/* ============================================================
   HEADER  (sticky, white, 174px tall)
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 174px;
  background: var(--white);
  overflow: clip; /* the nav clips at narrow widths, like the original */
}
.site-header .logo {
  position: absolute;
  left: 80px;
  top: 42px;
}
.site-header .logo img {
  display: block;
  width: 145px;
  height: 90px;
  object-fit: cover;
}
/* Nav is anchored at an absolute x on the live site (clips on
   narrow desktop viewports there too) */
.main-nav {
  position: absolute;
  left: 1211px;
  top: 67px;
  display: flex;
  white-space: nowrap;
}
.main-nav a {
  display: block;
  padding: 10px 26px;
  font-size: 16px;
  letter-spacing: 0.8px;
  color: var(--black);
}
.main-nav a + a { margin-left: 8px; }
.main-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.nav-toggle { display: none; }

/* ============================================================
   Desktop section canvas: absolutely positioned children
   ============================================================ */

.canvas { position: relative; width: 100%; }

/* ============================================================
   HERO  (h 1202)
   ============================================================ */

.hero { height: 1202px; background: var(--white); }

/* corner "+" marks */
.hero .plus.tl { left: 20px;  top: 24px; }
.hero .plus.tr { left: calc(100% - 20px); top: 24px; }
.hero .plus.ml { left: 20px;  top: 166px; }
.hero .plus.mr { left: calc(100% - 20px); top: 166px; }
.hero .plus.bl { left: 20px;  top: 1189px; }
.hero .plus.br { left: calc(100% - 20px); top: 1189px; }

/* fitted display headline — scales with viewport exactly like the
   original Wix fitted-text SVG (viewBox 0 0 1225 148) */
.display-title {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
}
.display-title svg {
  display: block;
  width: 100%;
  height: 148.05px; /* fixed component height, like the original */
  overflow: visible;
}
.display-title text {
  font-family: var(--serif);
  font-size: 128.565px;
  font-weight: 400;
  letter-spacing: -0.04em;
  fill: var(--black);
}

/* [ Personalized Digital Marketing ] */
.hero-label {
  position: absolute;
  top: 191px;
  left: 50%;
  transform: translateX(-50%);
  width: 378px;
  height: 50px;
}
.hero-label .bracket { top: 0; height: 50px; }
.hero-label .bracket.left { left: 0; }
.hero-label .bracket.right { right: 0; }
.hero-label p {
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  text-align: center;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 20.8px;
  white-space: pre;
}

/* purple band: from x=20 to the middle of the page */
.hero-band {
  position: absolute;
  left: 20px;
  right: 50%;
  top: 549px;
  height: 626px;
  background: var(--purple);
}
.hero-band h3 {
  position: absolute;
  left: 21px;
  top: 19px;
  width: 445px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 41.6px;
  letter-spacing: -0.96px;
  color: var(--white);
}
.hero-band .btn-pill {
  position: absolute;
  left: 21px;
  top: 79px;
  width: 332px;
  height: 83px;
}

/* phone photo, centered on the right half, overlapping the band */
.hero-phone {
  position: absolute;
  left: calc(75% - 255px);
  top: 492px;
  width: 490px;
  height: 683px;
  object-fit: cover;
}

/* ============================================================
   ABOUT  (h 834)
   ============================================================ */

.about { height: 834px; background: var(--white); }
.about h2 {
  position: absolute;
  left: 110px;
  top: 112px;
  width: 940px;
  white-space: nowrap;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 80px;
  line-height: 80px;
  letter-spacing: -4px;
}
.about .rule { top: 210px; }
.about .plus.m1 { left: 120px; top: 285px; }
.about .plus.m2 { left: 120px; top: 572px; }
.about p {
  position: absolute;
  left: calc(11.76% + 88px);
  width: 860px;
  max-width: calc(100% - 11.76% - 198px);
  font-size: 39px;
  line-height: 58.5px;
}
.about p.p1 { top: 263px; }
.about p.p2 { top: 556px; }

/* ============================================================
   PHOTO STRIPS  (full-bleed bands, image shown at natural size,
   centered — hidden on mobile, as on the original)
   ============================================================ */

.strip {
  height: 509px;
  background: var(--white);
  overflow: hidden;
}
.strip img {
  display: block;
  margin: 0 auto;
  width: auto;
  height: 509px;
}

/* ============================================================
   SERVICES  (h 1096)
   ============================================================ */

.services { height: 1096px; background: var(--white); margin-top: 24px; }
.services h2 {
  position: absolute;
  left: 110px;
  top: 84px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 100px;
  line-height: 100px;
  letter-spacing: -5px;
}
.services .rule { top: 214px; }

.svc {
  position: absolute;
  width: 228px;
}
.svc.c1 { left: calc(50% + 2.5px); }
.svc.c2 { left: calc(50% + 262.5px); }
.svc.r1 { top: 278px; height: 395px; }
.svc.r2 { top: 673px; height: 400px; }

.svc h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 32px;
  line-height: 41.6px;
  letter-spacing: -0.96px;
}
.svc .meta {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
}
.svc.r1 .meta { top: 152px; }
.svc.r2 .meta { top: 193px; }
.svc .meta .plus {
  position: relative;
  transform: none;
  flex: none;
  margin-right: 10px;
}
.svc .meta .num {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 20.8px;
  white-space: pre;
}
.svc .desc {
  position: absolute;
  left: 0;
  width: 228px;
  font-size: 16px;
  line-height: 24px;
}
.svc.r1 .desc { top: 181px; }
.svc.r2 .desc { top: 223px; }

/* ============================================================
   DOT FIELD  (full-bleed purple, 12 x 11 white dots)
   ============================================================ */

.dots {
  height: 1209px;
  background: var(--purple);
}
.dots svg {
  position: absolute;
  left: 50%;
  margin-left: -490px;
  top: 565px;
  width: 980px;
  height: 450px;
  display: block;
}

/* ============================================================
   RESULTS / TESTIMONIALS  (h 1182)
   ============================================================ */

.results { height: 1182px; background: var(--white); }
.results h2 {
  position: absolute;
  left: 110px;
  top: 84px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 100px;
  line-height: 100px;
  letter-spacing: -5px;
}
.results .rule.d1 { top: 360px; }
.results .rule.d2 { top: 636px; }
.results .rule.d3 { top: 923px; }
.results .who {
  position: absolute;
  left: 183px;
  width: 404px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 20.8px;
}
.results .who.w1 { top: 380px; }
.results .who.w2 { top: 656px; }
.results .who.w3 { top: 943px; }
.results blockquote {
  position: absolute;
  left: calc(50% + 4.5px);
  width: 485px;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 41.6px;
  letter-spacing: -0.96px;
}
.results blockquote.q1 { top: 380px; }
.results blockquote.q2 { top: 656px; }
.results blockquote.q3 { top: 943px; }

/* ============================================================
   CONTACT  (h 750)
   ============================================================ */

.contact { height: 750px; background: var(--white); }

/* giant heading sits behind the purple card, exactly like the
   original page (the card is placed over it) */
.contact .giant {
  position: absolute;
  left: 0;
  right: 0;
  top: 269px;
  text-align: center;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 100px;
  line-height: 100px;
  letter-spacing: -5px;
  z-index: 0;
}

.form-wrap {
  position: absolute;
  left: 50%;
  margin-left: -340px;
  top: 269px;
  width: 680px;
  height: 416px;
  z-index: 1;
}
/* corner brackets around the card */
.form-wrap .bracket { height: 24px; }
.form-wrap .bracket.tl { left: -24px; top: -24px; border-bottom: 0; }
.form-wrap .bracket.tl::after { display: none; }
.form-wrap .bracket.tr { right: -24px; top: -24px; }
.form-wrap .bracket.tr::after { display: none; }
.form-wrap .bracket.bl { left: -24px; bottom: -38px; }
.form-wrap .bracket.bl::before { display: none; }
.form-wrap .bracket.br { right: -24px; bottom: -38px; }
.form-wrap .bracket.br::before { display: none; }

.form-card {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--purple);
  border-radius: 20px;
  color: var(--white);
}
.form-card .field {
  position: absolute;
}
.form-card label {
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
}
.form-card input,
.form-card textarea,
.form-card select {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--white);
  caret-color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  border-radius: 0;
}
.form-card input { height: 40px; margin-top: 9px; }
.form-card textarea { height: 74px; margin-top: 17px; resize: none; }

.field.fname { left: 21px;  top: 21px;  width: 294px; }
.field.lname { left: 352px; top: 21px;  width: 294px; }
.field.email { left: 21px;  top: 115px; width: 294px; }
.field.phone { left: 352px; top: 115px; width: 294px; }
.field.msg   { left: 21px;  top: 208px; width: 637px; }

.phone-row { display: flex; align-items: flex-end; }
.phone-row select {
  width: 46px;
  height: 40px;
  margin-top: 9px;
  flex: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='white' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
  cursor: pointer;
}
.phone-row select option { color: #000; }
.phone-row input { flex: 1; }

.form-card .btn-pill.submit {
  position: absolute;
  left: 21px;
  top: 352px;
  width: 638px;
  height: 43px;
}
.form-msg {
  position: absolute;
  left: 21px;
  top: 398px;
  width: 638px;
  text-align: center;
  font-size: 14px;
  color: var(--white);
  min-height: 18px;
}

/* ============================================================
   FOOTER  (h 673)
   ============================================================ */

.site-footer {
  position: relative;
  height: 673px;
  background: var(--white);
}
.site-footer .rule { top: 80px; }
.site-footer .foot-logo {
  position: absolute;
  left: 148px;
  top: 108px;
}
.site-footer .foot-logo img {
  display: block;
  width: 272px;
  height: 170px;
  object-fit: cover;
}
.foot-col {
  position: absolute;
  left: calc(100% - 336px);
  width: 205px;
  font-size: 16px;
  line-height: 24px;
}
.foot-col.addr { top: 126px; }
.foot-col.links {
  top: 487px;
  font-family: var(--mono);
  line-height: 20.8px;
  width: 224px;
}
.foot-col.links p { margin: 0; }
.foot-col a:hover { text-decoration: underline; }
.foot-col .mail { margin-top: 8px; }
.foot-col .tel { margin-top: 14px; }
.copyright {
  position: absolute;
  left: 148px;
  top: 508px;
  width: 310px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 20.8px;
}
.copyright a { text-decoration: underline; }

/* ============================================================
   PRIVACY POLICY PAGE
   ============================================================ */

.privacy-main {
  max-width: 1001px;
  margin: 0 auto;
  padding: 70px 28px 120px;
}
.privacy-main h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 100px;
  line-height: 100px;
  letter-spacing: -5px;
  margin: 0 0 340px;
  text-align: center;
}
.privacy-main p {
  font-size: 16px;
  line-height: 24px;
  margin: 0;
}
.privacy-main p.gap { margin-top: 24px; }
.privacy-main p.ind { padding-left: 29px; }

/* ============================================================
   MOBILE  (the original hides the strips + dot field and stacks
   everything in a single column)
   ============================================================ */

@media (max-width: 750px) {

  .site-header { height: 102px; }
  .site-header .logo {
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
  }
  .site-header .logo img { width: 100px; height: 62px; }

  .nav-toggle {
    display: block;
    position: absolute;
    right: 16px;
    top: 38px;
    width: 32px;
    height: 26px;
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    background: var(--black);
    margin: 5px 0;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .main-nav {
    position: fixed;
    inset: 102px 0 auto 0;
    left: 0;
    top: 102px;
    display: none;
    flex-direction: column;
    background: var(--white);
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    z-index: 49;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 18px 20px; margin: 0 !important; }

  /* hero */
  .hero { height: auto; padding-bottom: 60px; }
  .hero .plus { display: none; }
  .display-title { position: relative; left: 0; right: 0; top: 0; margin: 47px 28px 0; }
  .hero-label {
    position: relative;
    top: 0;
    left: 50%;
    margin: 28px 0 40px;
    width: 300px;
    height: 44px;
  }
  .hero-label .bracket { height: 44px; --stub: 18px; }
  .hero-label p { font-size: 13px; top: 13px; }
  .hero-band {
    position: relative;
    left: 0;
    right: auto;
    top: 0;
    width: 100%;
    height: 228px;
  }
  .hero-band h3 {
    left: 20px;
    top: 24px;
    width: 280px;
    font-size: 24px;
    line-height: 31px;
    letter-spacing: -0.7px;
  }
  .hero-band .btn-pill {
    left: 20px;
    top: 110px;
    width: 240px;
    height: 62px;
  }
  .hero-phone {
    position: relative;
    display: block;
    left: 0;
    top: 0;
    margin: 40px auto 0;
    width: calc(100% - 40px);
    max-width: 280px;
    height: auto;
    aspect-ratio: 490 / 683;
  }

  /* about */
  .about { height: auto; padding: 24px 20px 90px; }
  .about h2 {
    position: relative;
    left: 0; top: 0;
    width: auto;
    font-size: 32px;
    line-height: 36px;
    letter-spacing: -1.6px;
  }
  .about .rule { position: relative; left: 0; right: 0; top: 0; margin: 18px 0 30px; }
  .about .plus { display: none; }
  .about p {
    position: relative;
    left: 0; top: 0 !important;
    width: auto;
    max-width: none;
    font-size: 21px;
    line-height: 31.5px;
  }
  .about p.p2 { margin-top: 28px; }

  /* hidden on the original mobile layout */
  .strip, .dots { display: none; }

  /* services */
  .services { height: auto; padding: 20px 20px 60px; }
  .services h2 {
    position: relative;
    left: 0; top: 0;
    font-size: 37px;
    line-height: 40px;
    letter-spacing: -1.85px;
  }
  .services .rule { position: relative; left: 0; right: 0; top: 0; margin: 16px 0 46px; }
  .svc {
    position: relative;
    left: 0 !important;
    top: 0 !important;
    width: 100%;
    height: auto !important;
    margin-bottom: 44px;
  }
  .svc h4 { font-size: 22px; line-height: 28.6px; letter-spacing: -0.66px; }
  .svc .meta { position: relative; top: 0 !important; margin-top: 14px; }
  .svc .desc { position: relative; top: 0 !important; width: 100%; margin-top: 10px; font-size: 15px; line-height: 22px; }

  /* results */
  .results { height: auto; padding: 20px 20px 40px; }
  .results h2 {
    position: relative;
    left: 0; top: 0;
    font-size: 38px;
    line-height: 41px;
    letter-spacing: -1.9px;
  }
  .results .rule { position: relative; left: 0; right: 0; top: 0 !important; margin: 40px 0 20px; }
  .results .who {
    position: relative;
    left: 0; top: 0 !important;
    width: auto;
    font-size: 14px;
  }
  .results blockquote {
    position: relative;
    left: 0; top: 0 !important;
    width: auto;
    margin-top: 12px;
    font-size: 21px;
    line-height: 27.3px;
    letter-spacing: -0.63px;
  }

  /* contact */
  .contact { height: auto; padding: 40px 20px 70px; }
  .contact .giant {
    position: relative;
    top: 0;
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -1.8px;
    margin-bottom: 24px;
    z-index: 0;
  }
  .form-wrap {
    position: relative;
    left: 0;
    margin-left: 0;
    top: 0;
    width: 100%;
    height: auto;
  }
  .form-wrap .bracket { display: none; }
  .form-card { height: auto; padding: 20px 20px 24px; }
  .form-card .field {
    position: relative;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    margin-bottom: 18px;
  }
  .form-card .btn-pill.submit {
    position: relative;
    left: 0; top: 0;
    width: 100%;
    height: 43px;
    margin-top: 6px;
  }
  .form-msg { position: relative; left: 0; top: 0; width: 100%; margin-top: 10px; }

  /* footer */
  .site-footer { height: auto; padding: 0 20px 50px; }
  .site-footer .rule { position: relative; left: 0; right: 0; top: 0; margin: 0 0 36px; }
  .site-footer .foot-logo { position: relative; left: 0; top: 0; }
  .site-footer .foot-logo img { width: 180px; height: 112px; }
  .foot-col { position: relative; left: 0; right: auto; width: auto; }
  .foot-col.addr { top: 0; margin-top: 30px; }
  .foot-col.links { top: 0; margin-top: 34px; }
  .copyright { position: relative; left: 0; top: 0; margin-top: 40px; }

  /* privacy */
  .privacy-main { padding: 30px 20px 80px; }
  .privacy-main h1 {
    font-size: 44px;
    line-height: 48px;
    letter-spacing: -2.2px;
    margin-bottom: 60px;
  }
}

/* medium desktop safety: keep the fixed-position desktop layout
   from breaking below the 980 grid */
@media (min-width: 751px) and (max-width: 1080px) {
  .about p { max-width: calc(100% - 260px); }
}

/* 751-1024px (tablet landscape / small laptop): the fixed desktop
   layout needs at least the 980 grid — lay out at 1000px and allow
   horizontal scrolling instead of clipping content out of reach */
@media (min-width: 751px) and (max-width: 1024px) {
  html { overflow-x: auto; }
  body { min-width: 1000px; overflow-x: visible; }
}

/* ============================================================
   Rifiniture di dettaglio (design originale invariato)
   ============================================================ */

/* menu sempre visibile: ancorato al bordo destro, nella stessa
   posizione del layout originale alla larghezza di progetto (1440) */
@media (min-width: 751px) {
  .main-nav { left: auto; right: 10px; }
  /* titolo contatti visibile sopra la card, come le altre sezioni */
  .contact .giant { top: 84px; }
}

/* campi form visibili: sottolineatura bianca + focus */
.form-card input,
.form-card textarea,
.form-card select {
  border-bottom: 1px solid rgba(255, 255, 255, .65);
  transition: border-color .2s ease;
}
.form-card input:focus,
.form-card textarea:focus,
.form-card select:focus { border-bottom-color: #fff; }

/* hover a inversione sui bottoni pill */
.btn-pill { transition: background .2s ease, color .2s ease, border-color .2s ease; }
.btn-pill:hover { opacity: 1; background: transparent; border-color: #fff; color: #fff; }

/* mobile: headline senza spazio morto sopra/sotto */
@media (max-width: 750px) {
  .display-title svg { height: auto; aspect-ratio: 1225 / 148.05; }
  .hero-label { margin-top: 34px; }
}