/* SEO services page (/services/seo/).
   Not a Squarespace grid: built from Gabe's vocabulary (Epilogue, --v sizes, orange #ff5e1a, black / white / grey
   section rhythm, square photos and orange blocks that overlap, the hand-drawn circle and underline, paper sheets).
   Reveal motion comes from main.js (.gm-wrap > *); the services index is switched by main.js ([data-tabs]). */

/* Gabe keeps sections tight top to bottom and wide side to side */
.seo .sx-wrap { max-width: 1760px; }
.sx { padding: 5.5vw 0; }
.sx h2 { line-height: 1.034; letter-spacing: -.05em; font-weight: 500; }
.sx h3 { line-height: 1.08; letter-spacing: -.045em; font-weight: 500; }
.sx p, .sx li { line-height: 1.5; letter-spacing: var(--ls-p); }
.sx h1, .sx h2, .sx h3, .sx p { margin: 0; }
.sx a:not(.gm-btn) { text-decoration: underline; text-underline-offset: .15em; }
.sx-dark .gm-btn:hover, .sx-dark .gm-btn:focus-visible, .sx-photo .gm-btn:hover, .sx-photo .gm-btn:focus-visible { background: #fff; color: #000; }
.sx-stack { display: grid; gap: 1.1rem; align-content: start; justify-items: start; }
.sx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 6vw; align-items: start; margin-bottom: 4.5vw; }
.sx-fine { font-size: 14px; opacity: .65; margin-top: 2.5rem !important; }
/* A sheet of paper laid over an orange block (Gabe's checklist keepsake) */
.sx-paper { position: relative; background: #fffdf9; color: #000; padding: 28px 30px 24px; display: grid; gap: 14px; transform: rotate(-1.2deg); box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 24px 50px -22px rgba(60, 40, 20, .45); }
.sx-paper-title { font-weight: 500; letter-spacing: -.03em; font-size: calc(.4 * var(--u) + 1rem); line-height: 1.2; }
.sx-paper-note { font-size: 13px; line-height: 1.45; opacity: .6; }

/* Hero: copy left; photo, orange block and our own keyword map overlapping on the right */
main.seo > .sx-hero:first-child { padding: calc(var(--header-h) + 2.5vw) 0 4vw; }
/* Copy and collage share a bottom line: the Book a call button sits level with the foot of the keyword map */
.sx-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4vw; align-items: end; }
.sx-hero h1 { line-height: .99; letter-spacing: -.05em; font-weight: 500; margin-bottom: 1.6rem; }
.sx-hero-copy p + p { margin-top: 1rem; }
.sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 2rem; }
.sx-actions .gm-btn { padding: 17px 30px; font-size: 14px; }
.sx-hero-art { position: relative; container-type: inline-size; aspect-ratio: 1 / .86; }
.sx-block { position: absolute; left: 0; top: 14%; width: 34%; height: 58%; background: var(--accent); }
.sx-hero-photo { position: absolute; right: 0; top: 0; width: 82%; height: 78%; object-fit: cover; object-position: 50% 50%; }
.sx-mapcard { position: absolute; left: 6%; bottom: 0; width: 60%; background: #000; color: #fff; padding: 4.2cqw 4.4cqw 3.6cqw; }
.sx-mapcard-title { font-size: max(12px, 2.3cqw); font-weight: 500; letter-spacing: -.02em; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sx-mapcard-title span { opacity: .55; font-weight: 400; }
.sx-mapcard ul { list-style: none; margin: 2.4cqw 0 0; padding: 0; }
.sx-mapcard li { display: flex; justify-content: space-between; gap: 12px; padding: 1.4cqw 0; border-top: 1px solid rgba(255, 255, 255, .22); font-size: max(12px, 2.1cqw); }
.sx-mapcard li b { font-weight: 500; color: var(--accent); }
.sx-mapcard li span { opacity: .75; text-align: right; }
.sx-mapcard-note { margin-top: 1.6cqw !important; font-size: max(11px, 1.8cqw); opacity: .6; }
/* The hidden jump links only mark where the sticky bar appears */
.seo .sx-jumps { padding: 0; height: 1px; }

/* The problem: three big statements, the trouble underlined by hand */
.sx-symptoms { list-style: none; margin: 0; padding: 0; }
/* The intro and the three rows share one column line, so every right-hand paragraph starts on the same edge */
#the-problem .sx-split, .sx-symptoms li { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 6vw; }
.sx-symptoms li { display: grid; row-gap: 1rem; align-items: center; padding: 2.4vw 0; border-top: 1px solid rgba(255, 255, 255, .25); }
.sx-symptoms li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .25); }
.sx-symptoms h3 { line-height: 1.02; }
.sx-symptoms p { opacity: .7; }

/* What we do: six services. Wide screens list the names on the left and show the picked one's real work on the right;
   phones open them in place, one at a time. */
.sx-index { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(6, auto) 1fr; column-gap: 6vw; align-items: start; }
.sx-acc-h { grid-column: 1; margin: 0 !important; line-height: 1.1; }
.sx-acc-h button {
  display: flex; align-items: center; width: 100%; margin: 0; padding: .42em 0; border: 0; border-bottom: 1px solid rgba(0, 0, 0, .14);
  background: none; cursor: default; text-align: left; color: rgba(0, 0, 0, .3); scroll-margin-top: calc(var(--hdr-now, 0px) + 12px);
  font: 500 min(calc(1.2 * var(--u) + 1rem), calc(1.2vw + 1rem))/1.1 'Epilogue', sans-serif; letter-spacing: -.045em; transition: color .2s;
}
/* On wide screens the list reads as a list, not links: no arrow or pointer, just a small orange square on the one showing */
.sx-acc-h button::before { content: ""; flex: none; width: 0; height: .3em; margin-right: 0; background: var(--accent); transition: width .25s ease, margin-right .25s ease; }
.sx-acc-h button:hover, .sx-acc-h button:focus-visible { color: #000; outline: none; }
.sx-acc-h button:focus-visible::before { width: .3em; margin-right: .4em; }
.sx-acc-h button[aria-expanded="true"] { color: #000; }
.sx-acc-h button[aria-expanded="true"]::before { width: .3em; margin-right: .4em; }
.sx-index-cta { grid-column: 1; grid-row: 7; justify-self: start; margin-top: 30px; }
.sx-panel { grid-column: 2; grid-row: 1 / -1; display: grid; gap: 1rem; align-content: start; }
.sx-panel[hidden] { display: none; }
.sx-index.is-tabs .sx-panel { animation: sx-in .45s ease; }
@keyframes sx-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sx-includes { font-size: 14px; opacity: .6; max-width: 620px; }
.sx-panel > p:not(.sx-includes) { max-width: 640px; }
/* The stage: grey, an orange block in the corner, the work sample laid over it */
.sx-art { position: relative; display: grid; place-items: center; min-height: clamp(300px, 27vw, 460px); padding: 9% 10%; background: var(--grey); overflow: hidden; margin-bottom: .6rem; }
.sx-art::before { content: ""; position: absolute; left: 0; top: 0; width: 38%; height: 56%; background: var(--accent); }
.sx-art > * { position: relative; width: min(100%, 520px); }
/* Punch list on a ruled notepad: pen checks in the margin, done items struck through by hand */
.sx-pad {
  position: relative; color: #000; padding: 34px 26px 22px 64px; transform: rotate(-1.4deg);
  background-color: #fffdf9;
  background-image: linear-gradient(90deg, transparent 47px, rgba(255, 94, 26, .6) 47px 48px, transparent 48px),
    repeating-linear-gradient(to bottom, transparent 0 33px, rgba(70, 110, 160, .2) 33px 34px);
  box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 24px 50px -22px rgba(60, 40, 20, .45);
}
.sx-pad .gm-tape { top: -12px; }
.sx-pad-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 12px; line-height: 34px; }
.sx-pad-head b { font-size: 23px; font-weight: 600; letter-spacing: -.035em; }
.sx-pad-head span { font-size: 13px; opacity: .55; }
.sx-pad-items { list-style: none; margin: 0; padding: 0; }
.sx-pad-items li { position: relative; font-size: 16px; line-height: 34px; letter-spacing: -.02em; }
.sx-pad-items li::before { content: ""; position: absolute; left: -52px; top: 5px; width: 30px; height: 24px; background: center / contain no-repeat; }
.sx-pad-items li.done::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M3 13 C 6 15, 9 18, 11 21 C 15 13, 21 6, 28 2' fill='none' stroke='%23ff5e1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sx-pad-items li.open::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M8 4 C 13 3, 19 3, 23 4 C 24 9, 23 15, 23 20 C 17 21, 12 20, 7 20 C 6 15, 7 9, 8 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
.sx-pad-items s { text-decoration: none; color: rgba(0, 0, 0, .5); -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C 40 3, 80 7, 120 4 C 150 2, 180 6, 198 4' fill='none' stroke='%23ff5e1a' stroke-width='2.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left 58% / 100% 9px no-repeat; }
.sx-pad-flag { font-style: italic; font-size: 14px; color: var(--accent); white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sx-group { display: grid; gap: 8px; }
.sx-group p { font-size: 17px; letter-spacing: -.02em; padding-left: 14px; border-left: 3px solid var(--accent); }
.sx-group-to { font-size: 17px; letter-spacing: -.02em; }
.sx-group-to span { color: var(--accent); }
.sx-group-to b { font-weight: 500; }
.sx-paper--ink { background: #000; color: #fff; transform: rotate(1deg); }
.sx-paper--ink code { font: 400 15px/1.8 ui-monospace, Consolas, monospace; color: #fff; overflow-wrap: anywhere; }
.sx-paper--ink .hl { padding: .3em .5em; }
.sx-title-tag { font-size: calc(.5 * var(--u) + 1rem); letter-spacing: -.03em; line-height: 1.4; padding: 6px 0; }
.sx-title-tag .hl { padding: .3em .6em .32em; margin: 0 -.3em 0 -.45em; }
.sx-brief { display: grid; grid-template-columns: 100px 1fr; margin: 0; }
.sx-brief dt, .sx-brief dd { margin: 0; padding: 8px 0; border-top: 1px solid rgba(0, 0, 0, .12); }
.sx-brief dt { font: 500 12px/1.6 'Space Grotesk', sans-serif; letter-spacing: .04em; opacity: .55; }
.sx-brief dd { font-size: 15px; line-height: 1.4; letter-spacing: -.02em; }
.sx-shot { margin: 0; width: min(100%, 400px) !important; transform: rotate(1.2deg); box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 24px 50px -22px rgba(60, 40, 20, .45); }
.sx-shot img { width: 100%; height: auto; }
/* Ring around the outlined service area on AJILA's profile map */
.sx-shot-ring { position: absolute; left: 57%; top: 5%; width: 23%; height: 29%; padding: 0; margin: 0; }
.sx-shot-label { position: absolute; left: 66%; top: 34%; background: var(--accent); color: #fff; font: 500 12px/1 'Space Grotesk', sans-serif; letter-spacing: .04em; padding: 6px 9px; }

/* Search to inquiry: one customer's path as four equal cards on a straight orange band.
   Desktop shows all four in a row; tablets and phones swipe through them. */
.sx-journey { --gap: 3vw; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.sx-j { position: relative; display: grid; gap: 10px; align-content: start; }
.sx-j h3 { margin-top: 18px !important; }
.sx-j > p { opacity: .72; max-width: 320px; }
.sx-j h3 .hl { padding: .06em .25em .12em; margin: 0 -.25em; }
/* The band runs card to card behind the row, starting and ending at the middle of the outer cards */
.sx-j-art { position: relative; aspect-ratio: 4 / 5; }
.sx-j-art::before { content: ""; position: absolute; top: 22%; height: 56%; left: calc(var(--gap) / -2 - 1px); right: calc(var(--gap) / -2 - 1px); background: var(--accent); }
.sx-j:first-child .sx-j-art::before { left: 50%; }
.sx-j:last-child .sx-j-art::before { right: 50%; }
/* Hand-drawn arrow in each gap, on the band */
.sx-j + .sx-j .sx-j-art::after {
  content: ""; position: absolute; z-index: 2; top: 50%; left: calc(var(--gap) / -2); width: min(2.4vw, 40px); height: min(1.8vw, 30px); transform: translate(-50%, -50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Cpath d='M4 26 C 18 8, 38 6, 53 19' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M42 11 L 54 19 L 41 26' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sx-card { position: absolute; inset: 0; margin: 0; background: #fffdf9; overflow: hidden; box-shadow: 0 1px 1px rgba(60, 40, 20, .08), 0 24px 50px -24px rgba(60, 40, 20, .45); }
/* 1. The search */
.sx-search-card { display: grid; align-content: center; gap: 16px; padding: 10% 9%; }
.sx-search { display: flex; align-items: center; gap: 8px; border: 1.5px solid #000; border-radius: 300px; padding: 9px 14px; font-size: 14px; line-height: 1.2; letter-spacing: -.02em; }
.sx-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-search svg { flex: none; width: 16px; height: 16px; fill: none; stroke: #000; stroke-width: 2.2; stroke-linecap: round; }
.sx-result { display: grid; gap: 2px; padding-left: 4px; }
.sx-result b { font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: -.02em; }
.sx-result:not(.sx-result--faint) b { color: var(--accent); }
.sx-result span { font-size: 12px; opacity: .55; }
.sx-result--faint { opacity: .4; }
/* 2. The page */
.sx-page-card { display: flex; flex-direction: column; container-type: inline-size; background: #fff; }
.sx-page-card .sx-page-bar { display: flex; align-items: center; gap: 1.6cqw; padding: 2.8cqw 3.6cqw; background: #ebe7df; }
.sx-page-bar i { flex: none; width: 2.3cqw; height: 2.3cqw; border-radius: 50%; background: rgba(0, 0, 0, .2); }
.sx-page-card .sx-page-bar span { flex: 1; min-width: 0; margin-left: 2cqw; padding: 1.2cqw 3cqw; border-radius: 300px; background: #fff; font-size: 3.4cqw; line-height: 1.2; color: rgba(0, 0, 0, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-page-nav { display: flex; align-items: center; gap: 3.6cqw; padding: 3.4cqw 4.6cqw; border-bottom: 1px solid rgba(0, 0, 0, .08); font-size: 3.4cqw; line-height: 1.1; white-space: nowrap; }
.sx-page-nav b { margin-right: auto; font-weight: 600; font-size: 4.2cqw; letter-spacing: -.03em; line-height: 1; }
.sx-page-nav b em { display: block; font-style: normal; font-weight: 400; font-size: 3.2cqw; letter-spacing: .02em; opacity: .6; }
.sx-page-nav span { opacity: .7; }
.sx-page-nav i { font-style: normal; padding: 1.6cqw 3cqw; border-radius: 300px; border: 1px solid #000; font-weight: 500; }
.sx-page-card .sx-page-hero { position: relative; flex: 1; min-height: 0; display: flex; }
.sx-page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sx-page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, .45) 50%, rgba(0, 0, 0, 0) 78%); }
.sx-page-copy { position: relative; z-index: 1; align-self: flex-end; padding: 0 5.5cqw 6cqw; color: #fff; }
.sx-page-card .sx-page-crumb { font-size: 3.2cqw; opacity: .8; margin-bottom: 1.8cqw; }
.sx-page-card .sx-page-h { font-size: 7.4cqw; font-weight: 500; line-height: 1.02; letter-spacing: -.04em; }
.sx-page-card .sx-page-sub { margin-top: 2.2cqw; font-size: 3.7cqw; line-height: 1.35; opacity: .9; }
.sx-page-card .sx-page-btn { display: inline-block; margin-top: 4cqw; background: var(--accent); color: #fff; border-radius: 300px; padding: 2.6cqw 4.4cqw; font: 500 3.5cqw/1 'Space Grotesk', sans-serif; letter-spacing: .05em; text-transform: uppercase; }
/* 3. The work */
.sx-photo-card img { width: 100%; height: 100%; object-fit: cover; }
/* 4. The call */
.sx-call-card { background: #000; color: #fff; display: grid; align-content: center; justify-items: center; gap: 6px; padding: 10%; text-align: center; }
.sx-call-status { font-size: 13px; opacity: .6; }
.sx-call-name { font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.sx-call-from { font-size: 13px; opacity: .6; }
.sx-call-btn { display: grid; place-items: center; width: 58px; height: 58px; margin-top: 22px; border-radius: 50%; background: var(--accent); }
.sx-call-btn svg { width: 24px; height: 24px; fill: #fff; }
/* Steps arrive one after another as they scroll in */
.sx-journey.rv, .sx-timeline.rv { opacity: 1; transform: none; }
.sx-journey.rv > li, .sx-timeline.rv > li { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; transition-delay: calc(var(--i) * .16s); }
.sx-journey.rv.in > li, .sx-timeline.rv.in > li { opacity: 1; transform: none; }

/* Research: steps beside the worksheet, each ticked like a punch list */
.sx-research { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4rem 6vw; align-items: center; }
.sx-research-copy { display: grid; gap: 1.1rem; }
.sx-steps { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sx-steps li { position: relative; padding-left: 36px; font-size: calc(.36 * var(--u) + 1rem); }
.sx-steps li::before { content: ""; position: absolute; left: 0; top: .15em; width: 24px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 24'%3E%3Cpath d='M3 13 C 6 15, 9 18, 11 21 C 15 13, 21 6, 28 2' fill='none' stroke='%23ff5e1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sx-steps strong { font-weight: 500; }

/* Worksheet: a taped sheet on a second sheet, marker strokes for demand, pen circles and a margin note */
.sx-sheet { position: relative; margin: 0; padding: 7% 0 0 7%; }
.sx-sheet-block { position: absolute; left: 0; top: 0; width: 46%; height: 52%; background: var(--accent); }
.sx-sheet-paper {
  position: relative; background: #fffdf9; padding: 42px 34px 26px; transform: rotate(.8deg);
  box-shadow: 14px 16px 0 -2px #efe7da, 14px 16px 2px -1px rgba(60, 40, 20, .12), 0 1px 1px rgba(60, 40, 20, .08), 0 24px 50px -22px rgba(60, 40, 20, .45);
}
.sx-sheet-paper .gm-tape { top: -12px; }
.sx-sheet-paper .sx-tape-2 { top: auto; bottom: -12px; left: auto; right: -24px; width: 90px; transform: rotate(-38deg); }
.sx-sheet-title { font-weight: 500; letter-spacing: -.03em; font-size: calc(.5 * var(--u) + 1rem); margin-bottom: 18px !important; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; }
.sx-sheet-title span { font-size: 13px; font-weight: 400; letter-spacing: -.01em; opacity: .55; }
.sx-sheet table { width: 100%; border-collapse: collapse; font-size: 15px; letter-spacing: -.01em; }
.sx-sheet thead th { text-align: left; font-size: 13px; font-weight: 500; opacity: .55; padding: 0 6px 8px; border-bottom: 2px solid #000; }
.sx-sheet td { padding: 9px 6px; border-bottom: 1px dashed rgba(0, 0, 0, .22); vertical-align: middle; }
.sx-sheet td:nth-child(2) { width: 30%; }
.sx-sheet td:nth-child(3), .sx-sheet thead th:nth-child(3) { text-align: right; white-space: nowrap; }
/* A marker stroke, a little uneven, sized to demand */
.sx-bar { display: block; width: var(--w); height: 10px; background: var(--accent); opacity: .85; border-radius: 3px 9px 4px 8px / 6px 3px 7px 4px; transform: rotate(-.8deg) skewX(-10deg); }
.sx-owner th { text-align: left; font-size: 14px; font-weight: 500; color: var(--accent); padding: 20px 6px 4px; }
.sx-sheet td .hl { padding: .25em .55em .3em; margin: 0 -.3em; }
.sx-pen-row td { border-bottom: 0; padding-top: 10px; }
.sx-pen { position: relative; display: inline-block; padding-left: 30px; font-style: italic; font-size: 15px; color: var(--accent); }
.sx-pen::before { content: ""; position: absolute; left: 2px; top: -10px; width: 20px; height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M12 24 C 6 18, 6 10, 10 3' fill='none' stroke='%23ff5e1a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M4 8 L 10 2 L 15 9' fill='none' stroke='%23ff5e1a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sx-sheet figcaption { margin: 34px 0 0; font-size: 14px; line-height: 1.5; letter-spacing: -.01em; max-width: 560px; }
.sx-sheet figcaption strong { font-weight: 500; }
.sx-sheet figcaption span { opacity: .55; }

/* Process: four big verbs, each closed with an orange full stop */
/* Each step spans a shared heading row and text row, so every description starts on the same line;
   one-line verbs sit on the baseline of a two-line one */
.sx-timeline { list-style: none; margin: 4.5vw 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 14px 3vw; }
.sx-timeline li { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 14px; justify-items: start; }
/* Desktop: five one-line steps (Measure and Refine split) so every title and description lines up; below 1200px
   they read as four steps with "Measure and refine." (Sam, round 2, 2026-10-29) */
.sx-timeline h3 { align-self: start; }
@media (min-width: 1200px) {
  .sx-timeline { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: min(2.4vw, 36px); }
  .sx-timeline .sx-narrow { display: none; }
}
@media (max-width: 1199px) { .sx-timeline .sx-wide-only { display: none; } }
/* Who we are: the full copy on tablet and desktop, the short version on phones (Sam, round 2, 2026-10-29) */
@media (min-width: 768px) { .sx-who .sx-narrow { display: none; } }
@media (max-width: 767px) { .sx-who .sx-wide { display: none; } }
.sx-timeline h3 span:not(.sx-narrow) { color: var(--accent); }
.sx-timeline p { opacity: .75; }

/* Before / after on our own site, drawn as hand-made loops */
.sx-ba { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 6vw; }
.sx-loops { margin: 0; display: grid; gap: 1.4rem; align-content: start; }
.sx-loops svg { width: 100%; height: auto; overflow: visible; }
.sx-loop { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sx-loops text { font-family: 'Epilogue', sans-serif; font-size: 22px; letter-spacing: -.02em; fill: #000; }
.sx-loops .sx-loop-big { font-size: 32px; font-weight: 500; fill: var(--accent); letter-spacing: -.04em; }
.sx-loops .sx-loop-key { font-weight: 500; fill: var(--accent); }
.sx-loops figcaption { font-size: 15px; line-height: 1.55; letter-spacing: -.01em; opacity: .75; max-width: 560px; }

/* Who we are: two square portraits overlapping an orange block */
.sx-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem 6vw; align-items: center; }
.sx-duo { position: relative; aspect-ratio: 1 / .82; }
.sx-duo-block { position: absolute; left: 10%; top: 54%; width: 34%; height: 40%; background: var(--accent); }
.sx-duo-sam { position: absolute; left: 0; top: 0; width: 52%; height: 70%; object-fit: cover; object-position: 50% 22%; }
.sx-duo-gabe { position: absolute; right: 0; bottom: 0; width: 52%; height: 70%; object-fit: cover; object-position: 54% 40%; }
.sx-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sx-people li { padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .2); }
.sx-people a { font-weight: 500; }

/* Contractor band: copy on black, the crew photo flush to the right edge */
.sx-photo { padding: 0; }
.sx-flush { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(80vh, 760px); }
.sx-flush-copy { align-self: center; justify-self: end; width: min(100%, 800px); padding: 6vw 5vw 6vw var(--sqs-site-gutter); }
.sx-flush img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.sx-flush-copy .gm-btn { margin-top: .6rem; }

/* FAQ */
.sx-faq { max-width: 1200px; }
.sx-faq h2 { text-align: center; margin-bottom: 3.5vw; }
.sx-faq .acc-desc { padding-bottom: 26px; }

/* Contact */
.sx-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3rem 6vw; align-items: start; }

/* Tablets */
@media (max-width: 1199px) {
  .sx-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4vw; }
  .sx-timeline li:nth-child(n+3) { margin-top: 26px; }
  /* Research stacked: the worksheet comes right after the intro, then the steps that explain it */
  .sx-research { display: flex; flex-direction: column; align-items: stretch; gap: 1.1rem; }
  .sx-research-copy { display: contents; }
  .sx-sheet { margin: 1.2rem 0 1.4rem; }
  .sx-steps { order: 1; margin-top: 0; }
  .sx-sheet { max-width: 760px; }
  .sx-index { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 4vw; }
  .sx-ba { grid-template-columns: minmax(0, 1fr); }
  .sx-loops svg { max-width: 720px; }
  /* Tablets: the path becomes a swipe row, two cards and a peek of the third */
  .sx-journey { --gap: 22px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--sqs-site-gutter)); padding: 0 var(--sqs-site-gutter) 10px; scroll-padding: 0 var(--sqs-site-gutter); }
  .sx-journey::-webkit-scrollbar { display: none; }
  .sx-j { flex: 0 0 40%; scroll-snap-align: start; }
  .sx-j + .sx-j .sx-j-art::after { width: 22px; height: 16px; }
  .sx-journey + .swipe-dots { display: flex; }
}
/* Small tablets: the collage sits under the copy, wide enough for the keyword map to read */
@media (min-width: 768px) and (max-width: 1023px) {
  .sx-hero-grid { grid-template-columns: 1fr; gap: 6vw; }
  .sx-hero-art { width: min(100%, 680px); }
}

/* Phones */
@media (max-width: 767px) {
  .sx { padding: 56px 0; }
  main.seo > .sx-hero:first-child { padding: calc(var(--header-h) + 20px) 0 48px; }
  .sx-split, #the-problem .sx-split, .sx-hero-grid, .sx-who, .sx-contact, .sx-symptoms li, .sx-index { grid-template-columns: minmax(0, 1fr); }
  .sx-split { margin-bottom: 36px; }
  .sx-hero-grid { gap: 36px; }
  .sx-hero-art { aspect-ratio: auto; display: grid; }
  .sx-hero-photo { position: relative; width: 88%; height: auto; aspect-ratio: 4 / 3; justify-self: end; }
  .sx-block { top: 8%; width: 40%; height: 48%; }
  .sx-mapcard { position: relative; left: auto; bottom: auto; width: 92%; margin-top: -48px; padding: 18px 18px 16px; }
  .sx-mapcard-title, .sx-mapcard li { font-size: 13px; }
  .sx-mapcard ul { margin-top: 10px; }
  .sx-mapcard li { padding: 7px 0; }
  .sx-mapcard-note { font-size: 12px; margin-top: 8px !important; }
  .sx-symptoms li { padding: 26px 0; gap: 10px; }
  /* Phones: the services open in place, one at a time, like an accordion */
  .sx-index { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .sx-acc-h, .sx-panel, .sx-index-cta { grid-column: 1; grid-row: auto; }
  .sx-acc-h button { color: #000; font-size: 24px; padding: 18px 0; cursor: pointer; }
  .sx-acc-h button::before, .sx-acc-h button[aria-expanded="true"]::before { display: none; }
  .sx-acc-h button::after { content: "+"; margin-left: auto; color: var(--accent); font-size: 28px; line-height: .8; font-weight: 400; }
  .sx-acc-h button[aria-expanded="true"]::after { content: "\2013"; }
  .sx-panel { padding: 8px 0 30px; }
  .sx-index-cta { margin-top: 30px; }
  .sx-art { min-height: 0; padding: 40px 22px; }
  .sx-paper { padding: 22px 20px 18px; }
  .sx-timeline { grid-template-columns: 1fr; }
  .sx-timeline li:nth-child(n+2) { margin-top: 18px; }
  .sx-pad { padding: 34px 14px 18px 56px; }
  .sx-pad-items li::before { left: -50px; }
  /* Phones: the path becomes a swipe, one card and a peek of the next */
  .sx-journey { --gap: 16px; margin: 0 calc(-1 * var(--sqs-mobile-site-gutter)); padding: 0 var(--sqs-mobile-site-gutter) 10px; scroll-padding: 0 var(--sqs-mobile-site-gutter); }
  .sx-j { flex-basis: 76%; }
  .sx-sheet { padding: 22px 0 0 18px; }
  .sx-sheet-paper { padding: 32px 16px 20px; box-shadow: 8px 10px 0 -2px #efe7da, 0 24px 50px -22px rgba(60, 40, 20, .45); }
  .sx-sheet-paper .sx-tape-2 { right: -8px; }
  .sx-pen { font-size: 14px; }
  .sx-sheet table { font-size: 13px; }
  .sx-sheet td { padding: 8px 4px; }
  .sx-loops text { font-size: 24px; }
  .sx-loops .sx-loop-big { font-size: 34px; }
  .sx-timeline { margin-top: 36px; }
  .sx-art:has(.sx-paper--ink) { padding: 36px 10px; }
  .sx-paper--ink { padding: 20px 14px 16px; }
  .sx-paper--ink code { font-size: 11.5px; }
  .sx-paper--ink .hl { white-space: nowrap; padding: .35em .45em; }
  .sx-duo { aspect-ratio: 1 / .9; }
  .sx-flush { grid-template-columns: 1fr; min-height: 0; }
  .sx-flush img { aspect-ratio: 4 / 3; height: auto; }
  .sx-flush-copy { order: 2; justify-self: stretch; width: auto; padding: 48px var(--sqs-mobile-site-gutter) 56px; }
  .sx-faq h2 { text-align: left; margin-bottom: 24px; }
}

/* Contractors band into the FAQ: two black sections in a row, so trim the doubled space on tablets and phones (Sam, 2026-10-28) */
@media (max-width: 1199px) {
  .sx-flush { min-height: min(64vh, 600px); }
  .sx-flush-copy { padding-bottom: 40px; }
  #questions { padding-top: 24px; }
}
@media (max-width: 767px) {
  #contractors { padding-bottom: 0; }
  .sx-flush { min-height: 0; }
  .sx-flush-copy { padding-bottom: 40px; }
  #questions { padding-top: 24px; }
}