/* =========================================================================
   IGW Studios — site styles
   -------------------------------------------------------------------------
   Sizes are written as  calc(N * var(--u))  where N is the size in pixels
   on the reference design:
     - desktop & tablet (751px and wider): designed at 1440px wide
     - mobile (750px and narrower):        designed at 390px wide
   --u scales everything with the window, the same way the original Wix
   site did. To make something bigger or smaller, change N.
   ========================================================================= */

@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-18pt-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans SemiBold";
  src: url("../fonts/dm-sans-18pt-semibold.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Syne";
  src: url("../fonts/syne-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --green: #303d30;      /* brand dark green: text, buttons, dark sections */
  --grey: #f5f5f5;       /* light grey panels */
  --white: #ffffff;
  --line: rgba(48, 61, 48, 0.19);
  --u: calc(100vw / 1440);
}
@media (max-width: 750px) {
  :root { --u: calc(100vw / 390); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--green);
  font-family: "DM Sans", Arial, Helvetica, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 400; }
button, input, textarea { font: inherit; color: inherit; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--green); color: var(--white); padding: 10px 16px; border-radius: 6px;
}
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid #116dff; outline-offset: 2px; }
section[id], footer[id] { scroll-margin-top: 20px; }

/* ---------- shared type ---------- */
.h2 {
  font-size: calc(40 * var(--u));
  line-height: 1.2;
  letter-spacing: -0.03em;
}
.body-text { font-size: calc(17.58 * var(--u)); line-height: 1.3; }
.body-text + .body-text { margin-top: calc(22 * var(--u)); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: calc(42 * var(--u));
  min-width: calc(164 * var(--u));
  padding: 0 calc(25 * var(--u));
  border-radius: 300px;
  background: var(--green);
  color: var(--white);
  font-family: "DM Sans SemiBold", "DM Sans", Arial, sans-serif;
  font-size: calc(15 * var(--u));
  white-space: nowrap;
  border: 1px solid var(--green);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.btn:hover { background: var(--white); color: var(--green); }
.btn--section { min-width: calc(176 * var(--u)); }
.btn--form {
  font-family: "Syne", "DM Sans", Arial, sans-serif;
  font-size: calc(17 * var(--u));
  height: calc(44 * var(--u));
  min-width: calc(217 * var(--u));
  border-radius: 100px;
}
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* =========================================================================
   Header
   ========================================================================= */
.site-header { height: calc(136 * var(--u)); position: relative; z-index: 20; }
.header-bar {
  position: absolute;
  left: calc(46 * var(--u)); right: calc(46 * var(--u)); top: calc(28 * var(--u));
  height: calc(108 * var(--u));
  background: var(--grey);
  border-radius: calc(10 * var(--u));
  display: flex; align-items: center;
  padding: 0 calc(34 * var(--u)) 0 calc(44 * var(--u));
}
.logo img { width: calc(102 * var(--u)); height: calc(67 * var(--u)); object-fit: contain; }
.main-nav { margin-left: auto; display: flex; align-items: center; }
.main-nav ul { list-style: none; padding: 0; display: flex; }
.main-nav li a {
  display: block;
  font-size: calc(16.875 * var(--u));
  line-height: 1.3;
  padding: 0 calc(30 * var(--u));
}
.main-nav li a:hover { text-decoration: underline; text-underline-offset: 4px; }
.main-nav .btn { margin-left: calc(38 * var(--u)); }
.menu-toggle, .mobile-menu { display: none; }

/* =========================================================================
   Home — hero
   ========================================================================= */
.hero { padding: calc(138 * var(--u)) calc(56 * var(--u)) calc(58 * var(--u)); }
.hero__kicker {
  font-size: calc(25 * var(--u)); line-height: 1; letter-spacing: -0.03em;
  margin-bottom: calc(24 * var(--u));
}
.hero h1 {
  font-size: min(72px, 5.625vw);
  line-height: 1;
  letter-spacing: -0.03em;
  max-width: calc(948 * var(--u));
}

.strips {
  display: flex; gap: calc(17 * var(--u));
  padding: 0 calc(46 * var(--u)) calc(14 * var(--u));
}
.strips img {
  width: calc(256 * var(--u)); height: calc(708 * var(--u));
  object-fit: cover;
  border-radius: calc(10 * var(--u));
}

/* ---------- intro / case study ---------- */
.intro {
  display: grid;
  grid-template-columns: calc(699 * var(--u)) calc(631 * var(--u));
  column-gap: calc(19 * var(--u));
  padding: calc(67 * var(--u)) calc(46 * var(--u)) 0 calc(45 * var(--u));
}
.intro .h2 { max-width: calc(356 * var(--u)); }

.results {
  display: grid;
  grid-template-columns: calc(645 * var(--u)) calc(645 * var(--u));
  column-gap: calc(60 * var(--u));
  padding: calc(67 * var(--u)) calc(45 * var(--u)) calc(67 * var(--u));
}
.results__head .h2 { line-height: 1; padding-left: 1px; }
.results__head .btn { margin-top: calc(23 * var(--u)); }
.stats {
  display: grid;
  grid-template-columns: calc(309 * var(--u)) calc(309 * var(--u));
  column-gap: calc(28 * var(--u));
  row-gap: calc(28 * var(--u));
  margin-top: calc(93 * var(--u));
}
.stat { padding-bottom: calc(39 * var(--u)); }
.stat__num { font-size: calc(42 * var(--u)); line-height: 1; }
.stat__rule { height: 1px; background: var(--green); margin: calc(15 * var(--u)) 0 calc(15 * var(--u)); }
.stat__desc { font-size: calc(16 * var(--u)); line-height: 1.6; }
.results__photo img {
  width: 100%; height: calc(577 * var(--u));
  object-fit: cover; object-position: 50% 52%;
  border-radius: calc(16 * var(--u));
}

/* ---------- testimonials ---------- */
.testimonials {
  background: var(--grey);
  padding: calc(56 * var(--u)) calc(45 * var(--u)) calc(69 * var(--u));
}
.testimonials .h2 { padding-left: calc(0 * var(--u)); margin-left: -2px; }
.quotes {
  display: grid;
  grid-template-columns: repeat(3, calc(403 * var(--u)));
  column-gap: calc(52 * var(--u));
  margin-top: calc(35 * var(--u));
  padding-left: 2px;
}
.quote blockquote { font-size: calc(17.58 * var(--u)); line-height: 1.3; }
.quote figcaption {
  display: flex; align-items: center; gap: calc(22 * var(--u));
  margin-top: calc(40 * var(--u));
  margin-left: -1px;
}
.quote figcaption img {
  width: calc(62 * var(--u)); height: calc(60 * var(--u));
  border-radius: 50%; object-fit: cover;
}
.quote__name { font-size: calc(16 * var(--u)); font-weight: 700; display: block; line-height: 1.3; }
.quote__org { font-size: calc(14 * var(--u)); display: block; line-height: 1.3; margin-top: 1px; }

/* ---------- "Not luck. Strategy." ---------- */
.proof { background: var(--green); padding: calc(30 * var(--u)) 0 calc(29 * var(--u)); }
.proof img { width: calc(1271 * var(--u)); height: calc(523 * var(--u)); margin: 0 auto; }

/* ---------- about ---------- */
.about {
  display: grid;
  grid-template-columns: calc(520 * var(--u)) calc(739 * var(--u));
  column-gap: calc(76 * var(--u));
  align-items: center;
  padding: calc(67 * var(--u)) calc(45 * var(--u)) calc(68 * var(--u));
}
.about__photo img {
  width: 100%; height: calc(504 * var(--u));
  object-fit: cover; object-position: 46% 10%;
  border-radius: calc(10 * var(--u));
}
.about .h2 { line-height: 1; margin-bottom: calc(30 * var(--u)); }
.about .btn { margin-top: calc(33 * var(--u)); margin-left: 3px; }

/* ---------- packages ---------- */
.packages { padding: 0 calc(45 * var(--u)) 0; }
.packages > .h2 { line-height: 1.1; max-width: calc(585 * var(--u)); }
.package-grid {
  display: grid;
  grid-template-columns: calc(662 * var(--u)) calc(662 * var(--u));
  column-gap: calc(27 * var(--u));
  margin-top: calc(33 * var(--u));
}
.package {
  border-radius: calc(18 * var(--u));
  padding: calc(49 * var(--u)) calc(55 * var(--u)) calc(50 * var(--u)) calc(45 * var(--u));
  background: var(--grey);
  --sep: rgba(48, 61, 48, 0.14);
  --sep-last: rgba(48, 61, 48, 0.14);
}
.package--dark {
  background: var(--green); color: var(--white);
  --sep: rgba(255, 255, 255, 0.16);
  --sep-last: rgba(255, 255, 255, 0.55);
}
.package h3 { font-size: calc(31.96 * var(--u)); line-height: 1; letter-spacing: -0.03em; }
.package__lede { font-size: calc(19.12 * var(--u)); line-height: 1.3; margin-top: calc(16 * var(--u)); }
.package ul { list-style: none; padding: 0; margin-top: calc(15 * var(--u)); }
.package li {
  display: flex; align-items: center;
  height: calc(63.3 * var(--u));
  border-top: 1px solid var(--sep);
  font-size: calc(17.58 * var(--u)); line-height: 1.2;
}
.package li:last-child { border-top-color: var(--sep-last); }
.package li svg {
  width: calc(14 * var(--u)); height: calc(14 * var(--u));
  margin: 0 calc(20 * var(--u)) 0 calc(1 * var(--u)); flex: none;
}
.packages__note { font-size: calc(17.58 * var(--u)); line-height: 1.3; margin-top: calc(31 * var(--u)); }
.packages .btn { margin-top: calc(18 * var(--u)); }

/* ---------- pathway ---------- */
.pathway { padding: calc(68 * var(--u)) calc(56 * var(--u)) calc(63 * var(--u)); }
.pathway > .h2 { line-height: 1.1; max-width: calc(557 * var(--u)); margin-left: 1px; }
.steps {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, calc(307 * var(--u)));
  column-gap: calc(32 * var(--u));
  margin-top: calc(46 * var(--u));
}
.step__num {
  width: calc(50 * var(--u)); height: calc(51 * var(--u));
  border-radius: 50%;
  background: var(--green); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(22 * var(--u)); letter-spacing: -0.01em;
}
.step h3 {
  font-size: calc(31.96 * var(--u)); line-height: 1; letter-spacing: -0.03em;
  margin-top: calc(35 * var(--u));
}
.step p { font-size: calc(17.58 * var(--u)); line-height: 1.3; margin-top: calc(16 * var(--u)); }

/* ---------- FAQ ---------- */
.faq { padding: calc(32 * var(--u)) calc(42 * var(--u)) calc(100 * var(--u)); }
.faq .h2 { font-size: 40px; }
.faq__list { margin-top: calc(12 * var(--u)); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: calc(40 * var(--u)) 0;
  font-size: 20px; line-height: 24px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 15px; height: 15px; flex: none; margin-right: 8px; transition: transform .25s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq__answer {
  font-size: calc(17.58 * var(--u)); line-height: 1.5;
  padding: 0 calc(60 * var(--u)) calc(40 * var(--u)) 0;
  max-width: 900px;
}
.faq__answer p + p { margin-top: 1em; }
.faq__answer a { text-decoration: underline; }

/* ---------- forms (contact + newsletter) ---------- */
.contact {
  background: var(--grey);
  display: grid;
  grid-template-columns: calc(486 * var(--u)) calc(751 * var(--u));
  column-gap: calc(94 * var(--u));
  padding: calc(42 * var(--u)) calc(64 * var(--u)) calc(24 * var(--u)) calc(45 * var(--u));
}
.contact__kicker { display: none; }
.contact .h2 { max-width: calc(378 * var(--u)); }
.form { padding-top: calc(12 * var(--u)); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(51 * var(--u)); }
.field { margin-bottom: calc(48 * var(--u)); }
.field > label:not(.check), .field > legend, .fieldset-label {
  display: block; padding: 0;
  font-size: calc(16 * var(--u)); line-height: calc(20 * var(--u));
  margin-bottom: calc(8 * var(--u));
}
.req { margin-left: 3px; }
.field input[type="text"], .field input[type="email"], .field textarea {
  display: block; width: 100%;
  height: calc(41 * var(--u));
  border: 0; border-bottom: 1px solid var(--green);
  background: transparent; border-radius: 0;
  padding: 0;
  font-size: calc(16 * var(--u));
  outline-offset: 4px;
}
.field textarea { height: calc(92 * var(--u)); resize: none; padding-top: 8px; }
fieldset.field { border: 0; padding: 0; margin-left: 0; margin-right: 0; min-width: 0; }
.check {
  display: flex; align-items: flex-start; gap: calc(12 * var(--u));
  font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u));
  cursor: pointer;
}
.check + .check { margin-top: calc(12 * var(--u)); }
.check input {
  appearance: none; -webkit-appearance: none; flex: none;
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  min-width: 12px; min-height: 12px;
  margin: calc(4 * var(--u)) 0 0;
  border: 1px solid var(--green); border-radius: 0; background: transparent;
  display: grid; place-content: center; cursor: pointer;
}
.check input::before {
  content: ""; width: 70%; height: 70%;
  background: var(--green);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0); transition: transform .12s;
}
.check input:checked::before { transform: scale(1); }
.check--newsletter { margin-top: calc(1 * var(--u)); margin-bottom: calc(74 * var(--u)); padding-right: calc(36 * var(--u)); }
.field.is-invalid input[type="text"], .field.is-invalid input[type="email"] { border-bottom-color: #c0392b; }
.field-error { color: #c0392b; font-size: 14px; margin-top: 6px; display: none; }
.field.is-invalid .field-error { display: block; }
.form-status { margin-top: 16px; font-size: 16px; line-height: 1.5; }
.form-status:empty { display: none; }
.form-status.is-error { color: #c0392b; }
.hp { position: absolute; left: -9999px; }

.form-success {
  font-size: calc(22 * var(--u)); line-height: 1.4; padding: calc(40 * var(--u)) 0;
}

/* newsletter band (blog + posts) */
.newsletter {
  background: var(--grey);
  display: grid;
  grid-template-columns: calc(447 * var(--u)) calc(674 * var(--u));
  column-gap: calc(210 * var(--u));
  padding: calc(56 * var(--u)) calc(24 * var(--u)) calc(74 * var(--u)) calc(45 * var(--u));
}
.newsletter__lede { font-size: calc(18.38 * var(--u)); line-height: 1.3; margin-top: calc(22 * var(--u)); }
.newsletter .form { padding-top: calc(18 * var(--u)); }
.newsletter .field { margin-bottom: calc(49 * var(--u)); }
.newsletter .check--newsletter { margin-bottom: calc(50 * var(--u)); }

/* =========================================================================
   Footer
   ========================================================================= */
.site-footer { background: var(--green); color: var(--white); padding-top: calc(67 * var(--u)); overflow: hidden; }
.footer-cols {
  display: grid;
  grid-template-columns: calc(665 * var(--u)) calc(237 * var(--u)) calc(277 * var(--u)) calc(110 * var(--u));
  column-gap: calc(20 * var(--u));
  padding: 0 calc(45 * var(--u));
  min-height: calc(106 * var(--u));
}
.footer-tagline { font-size: calc(15 * var(--u)); line-height: 1.3; max-width: calc(460 * var(--u)); margin-left: calc(40 * var(--u)); }
.footer-col h2 {
  font-size: calc(20.25 * var(--u)); line-height: 1; letter-spacing: -0.01em;
  margin-bottom: calc(18 * var(--u));
}
.footer-col a { font-size: calc(15 * var(--u)); line-height: 1; display: inline-block; padding: 2px 0; }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-contact h2 { margin-top: 1px; }
.social { display: flex; gap: calc(10 * var(--u)); list-style: none; padding: 0; margin-top: calc(-0 * var(--u)); }
.social a { display: block; padding: 0; }
.social svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); display: block; }
.wordmark {
  font-family: "DM Sans SemiBold", "DM Sans", Arial, sans-serif;
  font-size: calc(213.75 * var(--u));
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  margin-top: calc(31 * var(--u));
}

/* =========================================================================
   Blog index
   ========================================================================= */
.blog { padding: calc(20 * var(--u)) calc(164 * var(--u)) calc(42 * var(--u)); }
.blog h1 { font-size: calc(32 * var(--u)); line-height: 1.3; color: #000; padding: calc(20 * var(--u)) 0 0; }
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, calc(349.5 * var(--u)));
  column-gap: calc(32 * var(--u));
  row-gap: calc(32 * var(--u));
  margin-top: calc(40 * var(--u));
}
.post-card { display: flex; flex-direction: column; background: var(--white); min-height: calc(533 * var(--u)); }
.post-card__img { aspect-ratio: 349 / 183; overflow: hidden; }
.post-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.post-card:hover .post-card__img img { transform: scale(1.03); }
.post-card__body { padding: calc(28 * var(--u)) calc(25 * var(--u)) calc(24 * var(--u)); }
.post-card h2 { font-size: calc(22 * var(--u)); line-height: 1.4; }
.post-card:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
.post-card p {
  font-size: calc(16 * var(--u)); line-height: 1.5; margin-top: calc(11 * var(--u));
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================================================
   Blog post
   ========================================================================= */
.post-wrap { padding: calc(40 * var(--u)) calc(250 * var(--u)) calc(41 * var(--u)); }
.post {
  border: 1px solid rgba(245, 245, 245, 0.75);
  padding: calc(79 * var(--u)) calc(100 * var(--u)) calc(60 * var(--u));
}
.post h1 { font-size: calc(40 * var(--u)); line-height: 1.4; }
.post__cover { margin-top: calc(34 * var(--u)); }
.post__cover img { width: 100%; aspect-ratio: 740 / 389; object-fit: cover; }
.post__body { margin-top: calc(27 * var(--u)); }
.post__body p { font-size: calc(18 * var(--u)); line-height: 1.5; margin-bottom: calc(30 * var(--u)); }
.post__body h2 { font-size: calc(22 * var(--u)); line-height: 1.4; margin: calc(56 * var(--u)) 0 calc(30 * var(--u)); }
.post__body h2:first-of-type { margin-top: calc(29 * var(--u)); }
.post__body strong { font-weight: 700; }
.share {
  display: flex; gap: calc(14 * var(--u)); align-items: center;
  border-top: 1px solid rgba(48, 61, 48, 0.2);
  margin-top: calc(19 * var(--u)); padding-top: calc(16 * var(--u));
}
.share a, .share button {
  display: grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer;
  width: calc(36 * var(--u)); height: calc(36 * var(--u)); min-width: 30px; min-height: 30px;
}
.share svg { width: 16px; height: 16px; }
.share__copied { font-size: 14px; opacity: 0; transition: opacity .2s; }
.share__copied.is-visible { opacity: 1; }
.related { margin-top: calc(30 * var(--u)); }
.related__head { display: flex; justify-content: space-between; align-items: baseline; }
.related__head h2 { font-size: calc(18 * var(--u)); line-height: 1.5; }
.related__head a { font-size: calc(14 * var(--u)); }
.related__head a:hover { text-decoration: underline; }
.related .post-grid { margin-top: calc(20 * var(--u)); grid-template-columns: repeat(3, calc(291 * var(--u))); }
.related .post-card { min-height: 0; border: 1px solid rgba(245, 245, 245, 0.75); }
.related .post-card__body { padding: calc(24 * var(--u)) calc(24 * var(--u)) calc(30 * var(--u)); }
.related .post-card h2 {
  font-size: calc(18 * var(--u)); line-height: 1.33;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* =========================================================================
   Terms & policies
   ========================================================================= */
.legal { padding: calc(58 * var(--u)) calc(179 * var(--u)) calc(80 * var(--u)) calc(72 * var(--u)); }
.legal h1 { font-size: calc(40 * var(--u)); line-height: 1.3; margin-bottom: calc(19 * var(--u)); }
.legal .privacy h1 { margin-top: calc(40 * var(--u)); }
.legal p, .legal li { font-size: calc(17.58 * var(--u)); line-height: 1.3; }
.legal p { margin-bottom: calc(23 * var(--u)); }
.legal h2 { font-size: calc(17.58 * var(--u)); line-height: 1.3; margin-bottom: calc(23 * var(--u)); }
.legal ul { padding-left: calc(32 * var(--u)); margin: calc(-23 * var(--u)) 0 calc(23 * var(--u)); }
.legal .privacy p, .legal .privacy li, .legal .privacy h2 { font-size: calc(16 * var(--u)); line-height: 1.5; }
.legal .privacy h3 { font-size: calc(16 * var(--u)); line-height: 1.5; font-weight: 400; margin-bottom: calc(24 * var(--u)); }
.legal .privacy ul { margin-top: 0; }
.legal a { text-decoration: underline; }

/* 404 */
.not-found { padding: calc(120 * var(--u)) calc(56 * var(--u)) calc(160 * var(--u)); }
.not-found p { font-size: calc(20 * var(--u)); margin: calc(20 * var(--u)) 0 calc(32 * var(--u)); }

/* =========================================================================
   Tablet (751–1000px): desktop layout, scaled, with readable text
   ========================================================================= */
@media (min-width: 751px) and (max-width: 1000px) {
  .main-nav li a { font-size: 13px; padding: 0 14px; }
  .body-text, .quote blockquote, .package li, .step p, .packages__note, .faq__answer { font-size: 13px; }
  .stat__desc, .quote__org, .field > label:not(.check), .check, .field > legend, .fieldset-label { font-size: 12px; line-height: 1.5; }
  .faq .h2 { font-size: 28px; }
  .faq summary { font-size: 15px; }
  .btn { font-size: 12px; }
}

/* =========================================================================
   Mobile (750px and narrower) — values are px on a 390px-wide screen
   ========================================================================= */
@media (max-width: 750px) {
  .h2 { font-size: calc(28 * var(--u)); line-height: 1.3; }
  .body-text { font-size: calc(14 * var(--u)); line-height: 1.3; }
  .body-text + .body-text { margin-top: calc(18 * var(--u)); }
  .btn { height: calc(42 * var(--u)); min-width: calc(155 * var(--u)); font-size: calc(13 * var(--u)); padding: 0 calc(20 * var(--u)); }

  /* header + menu */
  .site-header { height: calc(100 * var(--u)); }
  .header-bar {
    left: 0; right: 0; top: 0; height: calc(100 * var(--u)); border-radius: 0;
    padding: 0 calc(20 * var(--u));
  }
  .logo img { width: calc(65 * var(--u)); height: calc(41 * var(--u)); }
  .main-nav { display: none; }
  .menu-toggle {
    display: grid; place-items: center; margin-left: auto;
    width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin-right: calc(-4 * var(--u));
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .menu-toggle svg { width: calc(35 * var(--u)); height: calc(18 * var(--u)); }
  .mobile-menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 50;
    background: var(--grey);
    padding: calc(30 * var(--u)) calc(20 * var(--u)) calc(40 * var(--u));
    transform: translateY(-100%); visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .mobile-menu.is-open { transform: none; visibility: visible; transition: transform .3s ease; }
  .mobile-menu__top { display: flex; justify-content: space-between; align-items: center; }
  .mobile-menu__close {
    width: calc(44 * var(--u)); height: calc(44 * var(--u)); background: none; border: 0; cursor: pointer;
    display: grid; place-items: center; margin-right: calc(-4 * var(--u));
  }
  .mobile-menu__close svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .mobile-menu ul { list-style: none; padding: 0; margin-top: calc(60 * var(--u)); }
  .mobile-menu li a { display: block; font-size: calc(35 * var(--u)); line-height: 1.6; letter-spacing: -0.03em; }
  .mobile-menu .btn { margin-top: auto; align-self: flex-start; }
  body.menu-open { overflow: hidden; }

  /* hero */
  .hero { padding: calc(71 * var(--u)) calc(15 * var(--u)) calc(15 * var(--u)); }
  .hero__kicker { font-size: calc(14 * var(--u)); margin-bottom: calc(15 * var(--u)); }
  .hero h1 { font-size: calc(35 * var(--u)); line-height: 1.1; max-width: none; }
  .strips { gap: calc(5 * var(--u)); padding: 0 calc(15 * var(--u)) calc(4 * var(--u)); }
  .strips img { width: calc(68 * var(--u)); height: calc(238 * var(--u)); border-radius: calc(4 * var(--u)); }

  .intro { grid-template-columns: 1fr; padding: calc(50 * var(--u)) calc(15 * var(--u)) 0; }
  .intro .h2 { max-width: calc(251 * var(--u)); margin-bottom: calc(20 * var(--u)); }

  .results { grid-template-columns: 1fr; padding: calc(50 * var(--u)) calc(15 * var(--u)) calc(50 * var(--u)); }
  .results__photo { order: -1; margin-bottom: calc(40 * var(--u)); }
  .results__photo img { height: calc(200 * var(--u)); border-radius: calc(8 * var(--u)); }
  .results__head .h2 { line-height: 1; }
  .results__head .btn { margin-top: calc(16 * var(--u)); margin-left: 1px; }
  .stats { grid-template-columns: 1fr 1fr; column-gap: calc(28 * var(--u)); row-gap: calc(28 * var(--u)); margin-top: calc(40 * var(--u)); }
  .stat { padding-bottom: 0; }
  .stat__num { font-size: calc(28 * var(--u)); }
  .stat__rule { margin: calc(15 * var(--u)) 0 calc(15 * var(--u)); }
  .stat__desc { font-size: calc(14 * var(--u)); padding-right: calc(24 * var(--u)); }

  .testimonials { padding: calc(36 * var(--u)) calc(15 * var(--u)) calc(46 * var(--u)); }
  .testimonials .h2 { margin-left: -1px; }
  .quotes { grid-template-columns: 1fr; row-gap: calc(56 * var(--u)); margin-top: calc(31 * var(--u)); padding: 0; }
  .quote blockquote { font-size: calc(14 * var(--u)); }
  .quote figcaption { margin-top: calc(20 * var(--u)); gap: calc(20 * var(--u)); margin-left: 0; }
  .quote__name { font-size: calc(14 * var(--u)); }
  .quote__org { font-size: calc(14 * var(--u)); }

  .proof { padding: calc(13 * var(--u)) 0 calc(14 * var(--u)); }
  .proof img { width: calc(377 * var(--u)); height: calc(155 * var(--u)); }

  .about { grid-template-columns: 1fr; padding: calc(60 * var(--u)) calc(15 * var(--u)) calc(5 * var(--u)); }
  .about__photo img { height: calc(266 * var(--u)); border-radius: calc(8 * var(--u)); }
  .about__text { margin-top: calc(24 * var(--u)); }
  .about .h2 { margin-bottom: calc(26 * var(--u)); }
  .about .btn { margin-top: calc(26 * var(--u)); margin-left: 1px; }

  .packages { padding: calc(64 * var(--u)) calc(15 * var(--u)) 0; }
  .packages > .h2 { line-height: 1.1; max-width: none; }
  .package-grid { grid-template-columns: 1fr; row-gap: calc(10 * var(--u)); margin-top: calc(31 * var(--u)); }
  .package { border-radius: calc(10 * var(--u)); padding: calc(26 * var(--u)) calc(24 * var(--u)) calc(24 * var(--u)); }
  .package h3 { font-size: calc(28 * var(--u)); }
  .package__lede { font-size: calc(14 * var(--u)); margin-top: calc(10 * var(--u)); }
  .package ul { margin-top: calc(20 * var(--u)); }
  .package li { height: auto; min-height: calc(52.5 * var(--u)); font-size: calc(14 * var(--u)); padding: calc(10 * var(--u)) 0; }
  .package li svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin-right: calc(14 * var(--u)); }
  .packages__note { font-size: calc(14 * var(--u)); margin-top: calc(21 * var(--u)); max-width: calc(268 * var(--u)); }
  .packages .btn { margin-top: calc(16 * var(--u)); }

  .pathway { padding: calc(1 * var(--u)) calc(15 * var(--u)) calc(59 * var(--u)); margin-top: calc(76 * var(--u)); }
  .pathway > .h2 { line-height: 1.1; max-width: calc(331 * var(--u)); margin-left: 0; }
  .steps { grid-template-columns: 1fr; row-gap: calc(40 * var(--u)); margin-top: calc(39 * var(--u)); }
  .step__num { width: calc(44 * var(--u)); height: calc(44 * var(--u)); font-size: calc(19 * var(--u)); }
  .step h3 { font-size: calc(28 * var(--u)); margin-top: calc(20 * var(--u)); }
  .step p { font-size: calc(14 * var(--u)); margin-top: calc(10 * var(--u)); max-width: calc(327 * var(--u)); }

  .faq { padding: calc(32 * var(--u)) calc(35 * var(--u)) calc(53 * var(--u)); }
  .faq .h2 { font-size: calc(28 * var(--u)); line-height: 1.2; }
  .faq__list { margin-top: calc(12 * var(--u)); }
  .faq summary { font-size: calc(14 * var(--u)); line-height: 1.4; padding: calc(38 * var(--u)) 0; }
  .faq summary svg { width: 12px; height: 12px; margin-right: 0; }
  .faq__answer { font-size: calc(14 * var(--u)); padding: 0 0 calc(30 * var(--u)); }

  .contact { grid-template-columns: 1fr; padding: calc(52 * var(--u)) calc(11 * var(--u)) calc(200 * var(--u)) calc(15 * var(--u)); }
  .contact__kicker { display: block; font-size: calc(14 * var(--u)); line-height: 1; margin-bottom: calc(11 * var(--u)); }
  .contact .h2 { max-width: calc(234 * var(--u)); }
  .form { padding-top: calc(34 * var(--u)); padding-left: 1px; }
  .form__row { column-gap: calc(1 * var(--u)); grid-template-columns: 179fr 184fr; }
  .form__row .field:first-child { padding-right: 0; }
  .field { margin-bottom: calc(33 * var(--u)); }
  .field > label:not(.check), .field > legend, .fieldset-label { font-size: calc(14 * var(--u)); line-height: calc(17 * var(--u)); margin-bottom: calc(8 * var(--u)); }
  .field input[type="text"], .field input[type="email"] { height: calc(34 * var(--u)); font-size: 16px; }
  .field textarea { font-size: 16px; }
  .check { font-size: calc(14 * var(--u)); line-height: calc(24 * var(--u)); gap: calc(12 * var(--u)); }
  .check input { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
  .check--newsletter { line-height: calc(21 * var(--u)); margin-bottom: calc(56 * var(--u)); padding-right: 0; }
  .btn--form { height: calc(41 * var(--u)); min-width: calc(119 * var(--u)); font-size: calc(14 * var(--u)); }
  .form-success { font-size: calc(18 * var(--u)); }

  .newsletter { grid-template-columns: 1fr; padding: calc(40 * var(--u)) calc(15 * var(--u)) calc(56 * var(--u)); }
  .newsletter__lede { font-size: calc(16 * var(--u)); margin-top: calc(18 * var(--u)); }
  .newsletter .form { padding-top: calc(40 * var(--u)); }
  .newsletter .field { margin-bottom: calc(40 * var(--u)); }
  .newsletter .btn--form { width: 100%; }

  /* footer */
  .site-footer { padding-top: calc(38 * var(--u)); }
  .footer-cols { grid-template-columns: 1fr; row-gap: calc(30 * var(--u)); padding: 0 calc(15 * var(--u)); }
  .footer-tagline { font-size: calc(14 * var(--u)); line-height: 1.6; max-width: calc(284 * var(--u)); margin-left: 0; }
  .footer-col h2 { font-size: calc(17 * var(--u)); margin-bottom: calc(18 * var(--u)); }
  .footer-col a { font-size: calc(14 * var(--u)); }
  .footer-follow h2 { font-size: calc(16 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .footer-contact { margin-top: calc(11 * var(--u)); }
  .footer-follow { margin-top: calc(28 * var(--u)); }
  .social { gap: calc(10 * var(--u)); }
  .wordmark { font-size: calc(57.9 * var(--u)); line-height: 1.05; margin-top: calc(48 * var(--u)); padding-bottom: calc(22 * var(--u)); }

  /* blog */
  .blog { padding: calc(20 * var(--u)) calc(15 * var(--u)) calc(40 * var(--u)); }
  .blog h1 { font-size: calc(32 * var(--u)); }
  .post-grid, .related .post-grid { grid-template-columns: 1fr; row-gap: calc(24 * var(--u)); margin-top: calc(24 * var(--u)); }
  .post-card { min-height: 0; border: 1px solid #eee; }
  .post-card__body { padding: calc(20 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); }
  .post-card h2 { font-size: calc(20 * var(--u)); }
  .post-card p { font-size: calc(15 * var(--u)); }

  /* post */
  .post-wrap { padding: calc(10 * var(--u)) 0 calc(40 * var(--u)); }
  .post { border: 0; padding: calc(20 * var(--u)) calc(15 * var(--u)) 0; }
  .post h1 { font-size: calc(28 * var(--u)); line-height: 1.3; }
  .post__cover { margin: calc(24 * var(--u)) calc(-15 * var(--u)) 0; }
  .post__body { margin-top: calc(24 * var(--u)); }
  .post__body p { font-size: calc(16 * var(--u)); line-height: 1.6; margin-bottom: calc(20 * var(--u)); }
  .post__body h2 { font-size: calc(20 * var(--u)); margin: calc(36 * var(--u)) 0 calc(14 * var(--u)); }
  .post__body h2:first-of-type { margin-top: calc(20 * var(--u)); }
  .share { margin-top: calc(10 * var(--u)); }
  .related { padding: 0 calc(15 * var(--u)); margin-top: calc(30 * var(--u)); }
  .related__head h2 { font-size: calc(18 * var(--u)); }
  .related__head a { font-size: calc(14 * var(--u)); }
  .related .post-card h2 { font-size: calc(18 * var(--u)); }

  /* legal */
  .legal { padding: calc(40 * var(--u)) calc(15 * var(--u)) calc(60 * var(--u)); }
  .legal h1 { font-size: calc(28 * var(--u)); }
  .legal p, .legal li, .legal h2 { font-size: calc(14 * var(--u)); line-height: 1.5; }
  .legal .privacy p, .legal .privacy li, .legal .privacy h2, .legal .privacy h3 { font-size: calc(14 * var(--u)); }
  .legal p, .legal h2 { margin-bottom: calc(16 * var(--u)); }
  .legal ul { padding-left: calc(22 * var(--u)); margin: calc(-16 * var(--u)) 0 calc(16 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}