/* =====================================================================
   LineShift shared design system: lineshift.us + patrickdietz.com
   Family: owner one-pager v02 + partner sheet (brand-kit/one-pager/source)
   Brand: Red #990000 · Blue #1F4E79 · Ink #201E1D · Grey #6B6F73 · Fog #EEF0F2
   Type:  Inter (text) + Inter Display (headlines). Static instances, woff2.
   ===================================================================== */

/* ---------- 1. Fonts ---------- */
@font-face { font-family: "Inter LS"; font-weight: 400; font-display: swap; src: url("../fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter LS"; font-weight: 500; font-display: swap; src: url("../fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter LS"; font-weight: 600; font-display: swap; src: url("../fonts/Inter-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Inter LS"; font-weight: 700; font-display: swap; src: url("../fonts/Inter-Bold.woff2") format("woff2"); }
@font-face { font-family: "Inter Display LS"; font-weight: 700; font-display: swap; src: url("../fonts/InterDisplay-Bold.woff2") format("woff2"); }

/* ---------- 2. Tokens ---------- */
:root {
  /* brand */
  --red: #990000;      --red-300: #C24D4D; --red-400: #AD2626; --red-700: #7A0000;
  --blue: #1F4E79;     --blue-300: #4A7FB0; --blue-400: #2E6699; --blue-700: #163A5C;
  --ink: #201E1D;      --grey: #6B6F73;     --fog: #EEF0F2;      --white: #FFFFFF;
  /* derived neutrals (same as one-pager --rule) */
  --rule: #D5D9DD;     --on-blue-muted: #DCE4EC; --on-blue-faint: #9FB3C8;

  /* type */
  --font-text: "Inter LS", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: "Inter Display LS", "Inter Display", var(--font-text);
  --fs-display: clamp(2.35rem, 1.45rem + 3.3vw, 4.1rem);   /* H1 */
  --fs-h2:      clamp(1.8rem, 1.35rem + 1.7vw, 2.75rem);    /* section heads */
  --fs-h3:      clamp(1.15rem, 1.08rem + .3vw, 1.3rem);     /* card heads */
  --fs-lead:    clamp(1.1rem, 1.03rem + .3vw, 1.28rem);
  --fs-body:    1.0625rem;
  --fs-small:   .9rem;
  --fs-label:   .78rem;
  --lh-tight: 1.08; --lh-head: 1.18; --lh-body: 1.6;
  --track-label: .16em;

  /* space + layout */
  --container: 1200px;
  --gutter: clamp(20px, 5vw, 56px);
  --section: clamp(64px, 8vw, 120px);
  --gap: clamp(20px, 2.4vw, 32px);
  --radius: 4px;
  --header-h: 76px;
  --shadow: 0 1px 2px rgba(32,30,29,.06), 0 8px 24px rgba(32,30,29,.08);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body { margin: 0; font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body);
       color: var(--ink); background: var(--white); font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul[role="list"], .list-reset { list-style: none; padding: 0; }
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--blue-300); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--white); padding: 8px 12px; }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 4. Type ---------- */
.display, h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-display);
               line-height: var(--lh-tight); letter-spacing: -0.022em; color: var(--blue); text-wrap: balance; }
.h2, h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2);
          line-height: var(--lh-head); letter-spacing: -0.018em; color: var(--blue); text-wrap: balance; }
.h3, h3 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; color: var(--ink); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink); max-width: 40em; }
.small { font-size: var(--fs-small); }
.muted { color: var(--grey); }

/* eyebrow: red rule + red caps (one-pager hero) */
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: var(--fs-label); font-weight: 600;
           letter-spacing: var(--track-label); text-transform: uppercase; color: var(--red); }
.eyebrow::before { content: ""; flex: none; width: 30px; height: 3px; background: var(--red); }
/* section label: blue caps + hairline after (one-pager h2) */
.label { display: flex; align-items: center; gap: 14px; font-size: var(--fs-label); font-weight: 700;
         letter-spacing: .14em; text-transform: uppercase; color: var(--blue); }
.label::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.label--short::after { flex: 0 0 48px; }

/* ---------- 5. Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .7); }
.section--fog { background: var(--fog); }
.section--rule { border-top: 1px solid var(--rule); }
.stack > * + * { margin-top: var(--stack, 20px); }
.section-head { display: grid; gap: 18px; max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.split--wide-right { grid-template-columns: .8fr 1.2fr; }
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* ---------- 6. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px;
       padding: 0 24px; border: 2px solid transparent; border-radius: var(--radius);
       font: 600 1rem/1 var(--font-text); letter-spacing: .005em; text-decoration: none; cursor: pointer;
       transition: background-color .15s, color .15s, border-color .15s; white-space: nowrap; }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-700); color: var(--white); }
.btn--secondary { background: transparent; color: var(--blue); border-color: var(--blue); }
.btn--secondary:hover { background: var(--blue); color: var(--white); }
.btn--light { background: var(--white); color: var(--blue); }
.btn--light:hover { background: var(--fog); color: var(--blue-700); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: .94rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--blue); text-decoration: none; }
.link-arrow::after { content: "→"; transition: transform .15s; }
.link-arrow:hover::after { transform: translateX(3px); }

/* ---------- 7. Header + nav ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96);
               backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--rule); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); flex: none; }
.brand img { height: 40px; width: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 500; white-space: nowrap; padding-block: 6px; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }
.ext::after { content: "↗"; font-size: .8em; margin-left: 3px; color: var(--grey); }

/* combined lockup (patrickdietz.com): name | LineShift lockup */
.lockup-combined { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
.lockup-combined .name { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.015em; color: var(--ink); line-height: 1; white-space: nowrap; }
.lockup-combined .divider { width: 1px; height: 32px; background: var(--rule); }
.lockup-combined img { height: 30px; width: auto; }
.lockup-combined a { display: inline-flex; align-items: center; text-decoration: none; }
.lockup-combined a.name:hover { color: var(--red); }

/* CSS-only mobile menu */
.menu { display: none; position: relative; }
.menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
                font-weight: 600; font-size: .95rem; color: var(--ink); padding: 10px 12px; border: 1px solid var(--rule); border-radius: var(--radius); }
.menu summary::-webkit-details-marker { display: none; }
.menu .bars { width: 18px; height: 12px; background: linear-gradient(var(--ink) 0 0) top/100% 2px no-repeat, linear-gradient(var(--ink) 0 0) center/100% 2px no-repeat, linear-gradient(var(--ink) 0 0) bottom/100% 2px no-repeat; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); width: min(86vw, 320px); background: var(--white);
              border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 10px 18px 18px; display: grid; }
.menu-panel a:not(.btn) { padding: 12px 0; border-bottom: 1px solid var(--fog); color: var(--ink); text-decoration: none; font-weight: 500; }
.menu-panel .btn { margin-top: 14px; }

/* ---------- 8. Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 104px) clamp(64px, 8vw, 112px); }
.hero .split { align-items: center; grid-template-columns: 1.12fr .88fr; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy .btn-row { margin-top: 10px; }
.hero-steps { position: absolute; z-index: 0; pointer-events: none; right: -6vw; top: 50%; width: min(56vw, 820px); transform: translateY(-50%); opacity: 1; }
.hero .container { position: relative; z-index: 1; }

/* ---------- 9. Writer-copy placeholder ---------- */
.wc { position: relative; display: grid; gap: 9px; padding: 14px 16px 16px; border: 1px dashed #B8BEC4; border-radius: var(--radius);
      background: repeating-linear-gradient(-45deg, rgba(107,111,115,.035) 0 8px, transparent 8px 16px), var(--fog); max-width: 40em; }
.wc__tag { display: flex; justify-content: space-between; gap: 12px; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--grey); }
.wc__tag b { font-weight: 700; color: #4F5357; white-space: nowrap; }
.wc__tag { flex-wrap: wrap; }
.wc i { display: block; height: 9px; border-radius: 2px; background: #D3D7DB; width: var(--w, 100%); }
.wc--lg i { height: 11px; }
.wc--on-dark { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.35); }
.wc--on-dark .wc__tag, .wc--on-dark .wc__tag b { color: var(--on-blue-muted); }
.wc--on-dark i { background: rgba(255,255,255,.22); }

/* ---------- 10. Cards + patterns ---------- */
.card { background: var(--white); border-top: 3px solid var(--blue); padding: 24px 24px 26px; display: grid; gap: 12px; align-content: start; }
.section--fog .card { box-shadow: 0 1px 0 var(--rule); }
.card--red { border-top-color: var(--red); }
.card .kicker { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); line-height: .95; letter-spacing: -0.03em; color: var(--red); }

/* five areas (one-pager "What buyers look at") */
.areas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 clamp(14px, 1.6vw, 22px); counter-reset: area; }
.area { border-top: 3px solid var(--blue); padding-top: 14px; display: grid; grid-template-columns: 1.4em 1fr; gap: 4px; align-items: baseline; }
.area .n { font-weight: 700; color: var(--red); }
.area .t { font-weight: 600; line-height: 1.35; }
.note { font-size: var(--fs-small); color: var(--grey); }

/* phase cards (LEAD) */
.phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.phase { display: grid; gap: 14px; align-content: start; padding: 0 0 4px; }
.phase .tile { width: 56px; height: 56px; display: grid; place-items: center; color: var(--white); font: 700 1.6rem/1 var(--font-display); }
.phase:nth-child(1) .tile { background: var(--red-300); } .phase:nth-child(2) .tile { background: var(--red-400); }
.phase:nth-child(3) .tile { background: var(--red); }     .phase:nth-child(4) .tile { background: var(--red-700); }
.phase .deliv { display: flex; gap: 8px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule); font-size: var(--fs-small); }
.phase .deliv span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.phase .deliv b { color: var(--ink); }
/* LAND loop chips */
.loop { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 0; align-items: stretch; border: 1px solid var(--rule); background: var(--white); }
.loop > * { padding: 18px 20px; }
.loop .loop-head { background: var(--blue); color: var(--white); display: grid; align-content: center; gap: 2px; min-width: 210px; }
.loop .loop-head b { font: 700 1.15rem/1.2 var(--font-display); }
.loop .loop-head span { font-size: var(--fs-small); color: var(--on-blue-muted); }
.chip { display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; align-items: center; border-left: 1px solid var(--rule); }
.chip .l { grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-weight: 700; }
.chip:nth-child(2) .l { background: var(--blue-700); } .chip:nth-child(3) .l { background: var(--blue-400); }
.chip:nth-child(4) .l { background: var(--blue); }     .chip:nth-child(5) .l { background: var(--blue-300); }
.chip b { font-weight: 700; line-height: 1.2; } .chip span { font-size: .85rem; color: var(--grey); }

/* fog panel (one-pager referral panel) */
.panel { background: var(--fog); padding: clamp(28px, 4vw, 56px); display: grid; gap: 28px; }
.panel--split { grid-template-columns: .9fr 1.1fr; align-items: start; gap: clamp(28px, 5vw, 72px); }

/* framed figure */
.figure { background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow); }
.figure img { width: 100%; }
.figure figcaption { padding: 12px 16px; border-top: 1px solid var(--rule); font-size: .82rem; color: var(--grey); display: flex; justify-content: space-between; gap: 12px; }

/* stat / credential row */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.stat { border-left: 3px solid var(--red); padding: 4px 0 4px 18px; display: grid; gap: 6px; align-content: start; }
.stat b { font: 700 clamp(1.6rem, 1.3rem + 1vw, 2.2rem)/1 var(--font-display); color: var(--blue); letter-spacing: -0.02em; }
.stat span { font-size: var(--fs-small); color: var(--ink); line-height: 1.45; }
.creds { display: flex; flex-wrap: wrap; gap: 10px 26px; padding-top: 20px; border-top: 1px solid var(--rule); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.creds li { display: flex; align-items: center; gap: 10px; }
.creds li::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }

/* ---------- 11. CTA band (every LineShift page ends here) ---------- */
.cta-band { background: var(--blue); color: var(--white); padding-block: clamp(56px, 7vw, 96px); position: relative; overflow: hidden; }
.cta-band h2 { color: var(--white); }
.cta-band .lead, .cta-band p { color: var(--on-blue-muted); }
.cta-band .inner { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(24px, 4vw, 56px); align-items: center; position: relative; z-index: 1; }
.cta-band .portrait { width: 132px; height: 132px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 3px solid rgba(255,255,255,.9); }
.cta-band .who { font-size: var(--fs-small); color: var(--on-blue-muted); }
.cta-band .who b { color: var(--white); }
.cta-band .tag { font-size: var(--fs-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--on-blue-faint); }

/* ---------- 12. Footer ---------- */
.site-footer { background: var(--fog); padding-block: 56px 28px; font-size: var(--fs-small); }
.site-footer .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--gap); }
.site-footer h4 { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--red); }
.site-footer .brand img { height: 36px; }
.site-footer .tagline { margin-top: 14px; font-weight: 600; letter-spacing: .08em; color: var(--blue); }
.site-footer .legal { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 16px; color: var(--grey); font-size: .82rem; }

/* ---------- 13. Mockup-only annotations (remove for production) ---------- */
.mock-flag { background: var(--ink); color: var(--white); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 7px 12px; }

/* ---------- 14. Responsive ---------- */
@media (max-width: 1100px) {
  .nav--collapsible { display: none; }
  .menu { display: block; }
  .phases { grid-template-columns: repeat(2, 1fr); }
  .loop { grid-template-columns: repeat(2, 1fr); }
  .loop .loop-head { grid-column: 1 / -1; min-width: 0; }
  .chip { border-top: 1px solid var(--rule); }
  .chip:nth-child(2n) { border-left: 0; }
  .areas { grid-template-columns: repeat(3, 1fr); gap: 24px clamp(14px, 1.6vw, 22px); }
}
@media (max-width: 860px) {
  .hero .split { grid-template-columns: 1fr; }
  :root { --header-h: 64px; }
  .split, .split--wide-right, .panel--split { grid-template-columns: 1fr; }
  .grid-3, .grid-4, .stats { grid-template-columns: repeat(2, 1fr); }
  .cta-band .inner { grid-template-columns: 1fr; justify-items: start; }
  .cta-band .portrait { width: 96px; height: 96px; }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .site-footer .cols > :first-child { grid-column: 1 / -1; }
  .hero-steps { width: 120vw; right: -60vw; top: 6%; transform: none; opacity: .7; }
  .brand img { height: 34px; }
  .lockup-combined .name { font-size: 1.25rem; }
  .lockup-combined img { height: 24px; }
}
@media (max-width: 560px) {
  :root { --fs-body: 1rem; }
  .grid-2, .grid-3, .grid-4, .phases { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .areas { grid-template-columns: 1fr; gap: 0; }
  .area { padding: 12px 0; border-top-width: 2px; }
  .loop { grid-template-columns: 1fr; }
  .chip { border-left: 0; }
  .btn-row .btn { width: 100%; }
  .site-footer .legal { flex-direction: column; }
  .lockup-combined { gap: 10px; }
  .lockup-combined .divider { height: 24px; }
  .lockup-combined img { height: 20px; }
  .lockup-combined .name { font-size: 1.1rem; }
  .menu summary .txt { display: none; }
  .doc-mock { width: min(86%, 320px) !important; aspect-ratio: 8.5/11.5 !important; }
  .doc-mock img { height: 20px !important; }
  .phase { grid-template-columns: 48px 1fr; gap: 10px 16px; }
  .phase .tile { width: 48px; height: 48px; font-size: 1.35rem; grid-row: span 3; }
  .hero .split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- 15. patrickdietz.com additions ---------- */
.display--md { font-size: clamp(2.2rem, 1.5rem + 2.5vw, 3.45rem); }
.portrait-frame { position: relative; justify-self: end; width: min(100%, 440px); padding: 0 0 28px 28px; }
.portrait-frame img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 20%; background: var(--fog); }
.portrait-frame .mark { position: absolute; z-index: 2; left: 0; bottom: 0; width: 112px; padding: 16px; background: var(--white); box-shadow: var(--shadow); }
.portrait-frame::before, .offset::before { content: ""; position: absolute; z-index: 0; right: -28px; top: -28px; width: 72%; height: 62%; background: var(--fog); }
.offset { position: relative; }
.offset > * { position: relative; z-index: 1; }
.quote { font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.28 var(--font-display); letter-spacing: -0.015em; color: var(--blue); border-left: 4px solid var(--red); padding-left: clamp(18px, 2.4vw, 32px); text-wrap: balance; }
.cta-band--simple .inner { grid-template-columns: 1fr auto; }
.newsletter { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px, 3vw, 40px); align-items: center; padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px); background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--red); }
.newsletter .nl-name { font: 700 1.35rem/1.1 var(--font-display); color: var(--blue); letter-spacing: -.01em; white-space: nowrap; }
.newsletter .nl-name small { display: block; margin-top: 6px; font: 600 .72rem/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
@media (max-width: 860px) {
  .portrait-frame { justify-self: start; width: min(100%, 360px); }
  .portrait-frame::before, .offset::before { right: -14px; top: -14px; }
  .cta-band--simple .inner { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 1fr; }
}

/* ---------- 16. Inner-page patterns ---------- */
.page-hero { padding-block: clamp(48px, 6vw, 88px) clamp(40px, 5vw, 72px); border-bottom: 1px solid var(--rule); }
.page-hero .hero-copy { max-width: 52rem; }
.page-hero--split .container { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.crumb { font-size: .82rem; color: var(--grey); }
.crumb a { color: var(--grey); text-decoration: none; } .crumb a:hover { color: var(--red); }

/* full-width framed visual */
.figure--hero { box-shadow: 0 2px 4px rgba(32,30,29,.05), 0 18px 48px rgba(32,30,29,.10); }

/* detailed step rows (LEAD) */
.step-rows { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.step-row { display: grid; grid-template-columns: 72px 1.1fr 2fr 1fr; gap: clamp(16px, 3vw, 40px); align-items: start; padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--rule); }
.step-row .tile { width: 64px; height: 64px; display: grid; place-items: center; color: var(--white); font: 700 1.8rem/1 var(--font-display); }
.step-row h3 { font-size: 1.35rem; } .step-row .sub { font-size: var(--fs-small); color: var(--grey); margin-top: 4px; }
.step-row .out { border-left: 3px solid var(--red); padding-left: 14px; }
.step-row .out span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.step-row .out b { font-size: 1.05rem; }
.t-red-300 { background: var(--red-300); } .t-red-400 { background: var(--red-400); } .t-red { background: var(--red); } .t-red-700 { background: var(--red-700); }
.t-blue-700 { background: var(--blue-700); } .t-blue-400 { background: var(--blue-400); } .t-blue { background: var(--blue); } .t-blue-300 { background: var(--blue-300); }

/* LAND phase cards with day ranges */
.land-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.land-card { background: var(--white); border-top: 4px solid var(--blue); padding: 24px; display: grid; gap: 12px; align-content: start; }
.land-card .top { display: flex; align-items: center; gap: 12px; }
.land-card .l { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--white); font-weight: 700; flex: none; }
.land-card .days { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-400); }
.handoff { display: flex; align-items: center; gap: 16px; margin: clamp(32px, 4vw, 48px) 0; font-weight: 700; color: var(--red); }
.handoff::before, .handoff::after { content: ""; height: 2px; background: var(--red); flex: 1; }


/* entry offers (Diagnostic / Retainer) */
.offer { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: start; }
.offer .num { grid-row: span 3; }

/* callout */
.callout { border-left: 4px solid var(--blue); background: var(--fog); padding: 18px 22px; font-size: var(--fs-small); line-height: 1.55; }
.callout--red { border-left-color: var(--red); }
.callout b { color: var(--ink); }

/* Buyer Risk Score readiness view (illustrative, no data) */
.readiness { background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px); display: grid; gap: 16px; }
.readiness .rv-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.readiness .rv-head b { font: 700 1.45rem/1.1 var(--font-display); color: var(--blue); }
.readiness .rv-row { display: grid; grid-template-columns: 1.4em 1fr 42%; gap: 10px; align-items: center; font-weight: 600; font-size: .98rem; }
.readiness .rv-row .n { color: var(--red); font-weight: 700; }
.readiness .track { height: 12px; background: repeating-linear-gradient(90deg, var(--fog) 0 calc(20% - 3px), transparent calc(20% - 3px) 20%); }
.readiness .scale { display: grid; grid-template-columns: 1.4em 1fr 42%; gap: 10px; font-size: .72rem; color: var(--grey); letter-spacing: .04em; }
.readiness .scale span:last-child { display: flex; justify-content: space-between; }
.stamp { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); border: 1px solid var(--rule); padding: 4px 8px; }

/* area detail rows */
.area-rows { display: grid; border-top: 2px solid var(--blue); }
.area-row { display: grid; grid-template-columns: 64px 1fr 1.6fr; gap: clamp(16px, 3vw, 40px); padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.area-row .num { font-size: 2.2rem; }
.area-row h3 { font-size: 1.3rem; }

/* deliverables */
.deliverables { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.deliverable { border-top: 3px solid var(--blue); padding-top: 16px; display: grid; gap: 6px; align-content: start; }
.deliverable b { font-size: 1.1rem; } .deliverable span { color: var(--grey); font-size: var(--fs-small); }

/* AS9100 phase table */
.phase-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.phase-table th { text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); padding: 0 16px 12px 0; border-bottom: 2px solid var(--blue); vertical-align: bottom; }
.phase-table td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.phase-table .pn { width: 54px; }
.phase-table .pn span { width: 34px; height: 34px; border-radius: 50%; background: var(--blue); color: var(--white); display: grid; place-items: center; font-weight: 700; }
.phase-table .name { font-weight: 700; font-size: 1.08rem; white-space: nowrap; }
.phase-table .what { color: var(--grey); }
.phase-table .dur { white-space: nowrap; font-weight: 600; width: 130px; }
.phase-table .dur.iso { color: var(--blue-300); } .phase-table .dur.scratch { color: var(--blue); }
.phase-table tr.gate td { background: rgba(153,0,0,.035); }
.phase-table .bracket { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.phase-table tfoot td { border-bottom: 0; font-weight: 700; color: var(--ink); padding-top: 20px; }
.gate-card { display: grid; grid-template-columns: 56px 1fr; gap: 18px; align-items: start; border: 2px solid var(--red); padding: 24px; background: var(--white); }
.gate-card .diamond { width: 38px; height: 38px; margin: 8px; background: var(--red); transform: rotate(45deg); display: grid; place-items: center; }
.gate-card .diamond span { transform: rotate(-45deg); color: var(--white); font-weight: 800; }
.gate-card b { font: 700 1.35rem/1.2 var(--font-display); color: var(--red); }

/* tick list (when to call) */
.ticks { list-style: none; padding: 0; margin: 0; display: grid; }
.ticks li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 1.08rem; }
.ticks li::before { content: ""; width: 16px; height: 3px; background: var(--red); margin-top: .7em; }

/* booking + forms */
.embed-ph { min-height: 560px; border: 2px dashed #B8BEC4; background: repeating-linear-gradient(-45deg, rgba(107,111,115,.035) 0 10px, transparent 10px 20px), var(--fog); display: grid; place-items: center; text-align: center; padding: 32px; }
.embed-ph .cal { width: 76px; height: 70px; margin: 0 auto 18px; border: 3px solid var(--blue); border-top-width: 14px; border-radius: 4px; background: repeating-linear-gradient(90deg, transparent 0 14px, var(--rule) 14px 16px), var(--white); }
.embed-ph b { display: block; font: 700 1.5rem/1.2 var(--font-display); color: var(--blue); }
.embed-ph span { display: block; margin-top: 8px; color: var(--grey); font-size: var(--fs-small); }
.form { display: grid; gap: 18px; background: var(--white); border: 1px solid var(--rule); padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow); }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .85rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid #C3C8CD; border-radius: var(--radius); background: var(--white); color: var(--ink); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue-300); border-color: var(--blue-300); }
.form .tbd { font-size: .78rem; color: var(--grey); }
.contact-list { display: grid; gap: 0; border-top: 2px solid var(--blue); }
.contact-list a, .contact-list div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.contact-list span { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); padding-top: 4px; }
.contact-list a:hover { color: var(--red); }

@media (max-width: 1100px) {
  .step-row { grid-template-columns: 64px 1fr 1fr; } .step-row .out { grid-column: 2 / -1; }
  .land-cards, .deliverables { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .page-hero--split .container { grid-template-columns: 1fr; }
  .step-row { grid-template-columns: 56px 1fr; } .step-row > :nth-child(n+3) { grid-column: 2; }
  .area-row { grid-template-columns: 48px 1fr; } .area-row > :nth-child(3) { grid-column: 2; }
  .phase-table thead { display: none; } .phase-table tr { display: grid; grid-template-columns: 48px 1fr 1fr; gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
  .phase-table td { border: 0; padding: 0; } .phase-table .what { grid-column: 2 / -1; } .phase-table td.pn { grid-row: span 3; }
  .form .row2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .land-cards, .deliverables { grid-template-columns: 1fr; } }

/* 17. Polish */
.gate-card .wc__tag b { font: 700 .72rem/1.3 var(--font-body, inherit); color: #4F5357; }
.phase-table .bracket { white-space: nowrap; }
.offer { grid-template-columns: 3.2rem 1fr; }
.itar-note { margin-top: 20px; padding-left: 14px; border-left: 3px solid var(--red); font-size: 1rem; color: var(--ink); }
.form { width: 100%; }
.wc--h { padding-bottom: 14px; }
.wc--h i { height: 22px; }
.pending { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 8px; border-radius: 3px; background: #FFF4D6; border: 1px solid #E0A526; color: #8A5A00; font: 700 .66rem/1.2 "Inter LS", sans-serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }

/* 18. Writer-copy pass (v261008-1036) */
h1, h2, h3, .lead, .quote, .pullquote blockquote { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
.pending { margin-left: 10px; letter-spacing: .08em; }
.eyebrow .pending, .label .pending { margin-left: 12px; }
.step-row--3 { grid-template-columns: 72px 1fr 2fr 1fr; align-items: center; }
.step-row--3 p { color: var(--ink); font-size: 1.05rem; line-height: 1.55; }
.terms { margin: 0; border-top: 2px solid var(--blue); display: grid; }
.terms > div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--rule); }
.terms dt { font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); padding-top: 3px; }
.terms dd { margin: 0; font-size: 1.05rem; color: var(--ink); }
.faq { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.faq > div { border-top: 3px solid var(--blue); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.deliverables--3 { grid-template-columns: repeat(3, 1fr); }
.gate-title { font: 700 clamp(1.35rem, 1.1rem + .8vw, 1.75rem)/1.2 var(--font-display); color: var(--red); letter-spacing: -.01em; }
.gate-card p { color: var(--ink); }
.ways .card { gap: 10px; }
.ways .best { font-size: var(--fs-small); color: var(--grey); border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 4px; }
.ways .best b { color: var(--ink); }
.partner-dl { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; margin-top: clamp(36px, 4vw, 56px); padding-top: clamp(28px, 3vw, 40px); border-top: 1px solid var(--rule); }
.partner-dl .btn-row { align-items: center; }
.sheet-thumb { width: 104px; aspect-ratio: 8.5/11; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 12px 10px; display: grid; align-content: start; gap: 6px; position: relative; flex: none; }
.sheet-thumb img { width: 60px; height: auto; margin-bottom: 4px; }
.sheet-thumb i { display: block; height: 4px; background: #DCE0E4; width: var(--w, 100%); }
.sheet-thumb span { position: absolute; bottom: 8px; left: 10px; font-size: .55rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.newsletter--check { grid-template-columns: auto 1fr auto; }
.form .confirm { font-size: var(--fs-small); color: var(--ink); background: var(--fog); padding: 12px 14px; }
.form .confirm span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
.contact-list div p { margin: 0; }
.contact-list div a { color: inherit; }
.cta-band .cta-body { color: var(--on-blue-muted); font-size: 1.05rem; line-height: 1.55; max-width: 38rem; }
/* Signature pull-quote (lineshift.us home) */
.pullquote { padding-block: clamp(56px, 7vw, 104px); background: var(--white); border-top: 1px solid var(--rule); }
.pullquote figure { max-width: 64rem; margin: 0 auto; display: grid; gap: clamp(18px, 2vw, 26px); }
.pullquote figure::before { content: ""; width: 56px; height: 4px; background: var(--red); }
.pullquote blockquote { margin: 0; font: 700 clamp(1.75rem, 1.05rem + 2.6vw, 3.1rem)/1.14 var(--font-display); letter-spacing: -.022em; color: #201E1D; }
.pullquote blockquote::before { content: "“"; color: var(--red); margin-right: .04em; }
.pullquote blockquote::after { content: "”"; color: var(--red); margin-left: .02em; }
.pullquote figcaption { font-size: 1rem; font-weight: 600; color: #6B6F73; letter-spacing: .01em; }
.pullquote figcaption b { color: #6B6F73; font-weight: 700; }
@media (max-width: 1100px) { .step-row--3 { grid-template-columns: 64px 1fr 1fr; } .faq { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) {
  .step-row--3 { grid-template-columns: 56px 1fr; } .step-row--3 > :nth-child(n+3) { grid-column: 2; }
  .faq, .deliverables--3 { grid-template-columns: 1fr; }
  .terms > div { grid-template-columns: 1fr; gap: 6px; }
  .newsletter--check { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .pullquote blockquote { font-size: 1.65rem; line-height: 1.18; } }
/* 19. Render-check fixes */
@media (min-width: 561px) { .phase { grid-template-rows: auto auto 1fr auto; align-content: stretch; } .phase .deliv { align-self: end; } }
.pullquote figure { margin: 0; }
.stack > .ticks { margin-top: var(--stack, 20px); }
.card > .pending, .offer > .pending { justify-self: start; margin-left: 0; }
.offer .num { grid-row: span 4; }
.embed-ph span.pending, .form .confirm span.pending { display: inline-block; width: auto; margin: 0 0 0 8px; font-size: .66rem; color: #8A5A00; letter-spacing: .08em; }
.embed-ph p span.pending { margin: 0; }
.contact-list div a { display: inline; border: 0; padding: 0; font: inherit; color: inherit; }
.ticks--2 { grid-template-columns: 1fr 1fr; column-gap: var(--gap); border-top: 2px solid var(--blue); }
.readiness .rv-row, .readiness .scale { grid-template-columns: 1.4em 1fr 36%; }
@media (max-width: 860px) { .ticks--2 { grid-template-columns: 1fr; } }
x-nw { display: contents; white-space: nowrap; }
.ticks li { display: block; position: relative; padding-left: 40px; }
.ticks li::before { position: absolute; left: 0; top: calc(18px + .05em); margin-top: .7em; }
.eyebrow:has(.pending), .label:has(.pending) { flex-wrap: wrap; row-gap: 8px; }
/* 20. Newsletter page */
.nl-cover { background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow); padding: 34px 34px 26px; display: grid; gap: 14px; align-content: start; }
.nl-cover img { width: 140px; height: auto; margin-bottom: 8px; }
.nl-cover b { font: 700 2.1rem/1.05 var(--font-display); color: var(--blue); letter-spacing: -.02em; margin-bottom: 10px; }
.nl-cover i { display: block; height: 8px; background: #DCE0E4; width: var(--w, 100%); }
.nl-cover .foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; font-size: .72rem; color: var(--grey); }
.issues .issue-card { background: var(--white); border-top: 3px solid var(--blue); padding: 24px; display: grid; gap: 10px; text-decoration: none; color: inherit; min-height: 210px; align-content: start; }
.issue-card .kicker { font-size: var(--fs-label); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.issue-card i { display: block; height: 14px; background: #D5D9DD; width: var(--w, 100%); }
.issue-card i.sub { height: 8px; background: #E3E6E9; }
.issue-card .from { margin-top: auto; padding-top: 14px; font-size: .74rem; color: var(--grey); }
.card > .num + p { margin-top: 2px; font-size: 1.08rem; }

/* 21. Preview deploy (261008) */
.preview-bar { display: flex; justify-content: center; align-items: center; gap: 10px; background: var(--ink); color: rgba(255,255,255,.78); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; line-height: 1.3; text-align: center; flex-wrap: wrap; }
.preview-bar b { background: #E0A526; color: var(--ink); padding: 2px 7px; border-radius: 2px; letter-spacing: .12em; }
.page-hero .btn-row { margin-top: 28px; }
.btn--lg { padding: 18px 30px; font-size: 1.08rem; }
.booking-frame { border: 1px solid var(--rule); border-top: 3px solid var(--blue); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.booking-frame iframe { display: block; width: 100%; height: 820px; border: 0; }
.direct { display: grid; gap: 14px; justify-items: stretch; padding: clamp(24px, 3vw, 36px); box-shadow: var(--shadow); border-top: 3px solid var(--red); }
.direct .btn { justify-content: space-between; }
.phase-table td:last-child, .phase-table th:last-child { width: 130px; }
@media (max-width: 760px) { .phase-table tr { grid-template-columns: 48px 1fr; } .phase-table td.pn { grid-row: span 2; } .booking-frame iframe { height: 900px; } }
.notfound { padding-block: clamp(72px, 10vw, 140px); border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.notfound .container { display: grid; gap: 18px; justify-items: start; max-width: 64rem; }
.notfound .code { font: 700 clamp(5rem, 3rem + 8vw, 10rem)/.9 var(--font-display); color: var(--fog); letter-spacing: -.04em; margin-bottom: -8px; }
.notfound .btn-row { margin-top: 12px; }
.loop--desc .chip { align-items: start; align-content: start; padding: 22px 20px 24px; }
.chip .desc, .land-card .desc { grid-column: 1 / -1; margin-top: 12px; font-size: var(--fs-small); line-height: 1.55; color: var(--ink); }
.land-card .desc { margin-top: 0; }
.ring-turns { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; margin-top: 28px; }
.ring-turns .lead { max-width: 52rem; }
@media (max-width: 760px) { .ring-turns { grid-template-columns: 1fr; gap: 10px; } }
.booking { display: grid; gap: 18px; justify-items: start; } .booking-frame { width: 100%; }
.section .split:has(> .booking) { grid-template-columns: 1fr !important; gap: clamp(48px, 6vw, 80px); }
.split > .booking + aside { display: grid; grid-template-columns: .8fr 1.2fr; column-gap: clamp(32px, 6vw, 88px); row-gap: 26px; align-items: start; }
.split > .booking + aside > :first-child { grid-row: span 2; }
.split > .booking + aside > :not(:first-child) { grid-column: 2; margin: 0; }
@media (max-width: 860px) { .split > .booking + aside { grid-template-columns: 1fr; } .split > .booking + aside > :not(:first-child) { grid-column: 1; } }
.direct .confirm { font-size: var(--fs-small); color: var(--ink); background: var(--fog); padding: 12px 14px; margin-top: 6px; }
.direct .confirm > span:first-child { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); margin-bottom: 4px; }
.btn-row > .pending { margin-left: 0; }
.card--feature { grid-template-columns: minmax(0, .8fr) minmax(0, 2.2fr); gap: 14px clamp(28px, 5vw, 72px); align-items: start; padding: clamp(28px, 3.5vw, 44px); border-top-color: var(--red); box-shadow: var(--shadow); }
.card--feature h3 { font: 700 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--font-display); color: var(--blue); letter-spacing: -.015em; }
.card--feature .lead { margin: 0; color: var(--ink); }
@media (max-width: 760px) { .card--feature { grid-template-columns: 1fr; } }
.ways.grid-3 { align-items: stretch; }
.check-note { font-size: var(--fs-small); line-height: 1.45; color: var(--grey); max-width: 26rem; }
.card > .check-note { display: block; margin-top: 10px; }
.newsletter--check > .btn-row { flex-direction: column; align-items: stretch !important; gap: 10px; }
.newsletter--check .check-note { max-width: 18rem; }
#subscribe { scroll-margin-top: 96px; }
.beehiiv-embed { flex: 1 1 100%; width: 100%; max-width: 600px; margin-top: 14px; background: var(--white); border: 1px solid var(--rule); border-top: 3px solid var(--red); overflow: hidden; }
.newsletter .beehiiv-embed, .newsletter--check > .btn-row .beehiiv-embed { margin-top: 0; }
.btn-row > .check-note--lead { flex-basis: 100%; max-width: 36rem; }
.newsletter:has(.beehiiv-embed) { grid-template-columns: auto 1fr minmax(0, 440px); }
.newsletter > .beehiiv-embed, .newsletter--check > .btn-row { width: 100%; }
/* /book/ only: trim beehiiv's built-in top/bottom white padding inside our clipped container (header stays visible) */
.newsletter--check .beehiiv-embed iframe { display: block; margin-top: -64px; margin-bottom: -64px; }
.newsletter .beehiiv-embed { border: 0; }
@media (max-width: 860px) { .newsletter:has(.beehiiv-embed) { grid-template-columns: 1fr; } }
/* beehiiv's theme pads the form 80px per side; widen the iframe into our container's hidden overflow so only that white padding is trimmed */
.beehiiv-embed iframe { width: calc(100% + 120px) !important; max-width: none !important; margin-left: -60px; }
@media (max-width: 760px) { .beehiiv-embed { max-width: none; } }
@media (max-width: 1100px) and (min-width: 761px) { .ways.grid-3 { grid-template-columns: repeat(2, 1fr); } }