/* Touch Of Wellness Chiropractic
 * ---------------------------------------------------------------------------
 * Every value in the token block below was READ OFF THE CAPTURE, not chosen.
 * The old site is a Beaver Builder layout, and Beaver Builder publishes its own
 * global type scale as custom properties — so this is not an interpretation of
 * the design, it is the design's own numbers.
 *
 * The rule for this rebuild (Gerek, 2026-09-08): be precise with the design,
 * looking at what exists rather than eyeballing it. Do not carry a value from
 * one page to the next assuming it repeats. Measure the page in front of you.
 * ------------------------------------------------------------------------- */

/* THE MOST IMPORTANT LINE IN THIS FILE.
 *
 * The old site's theme sets a 10px root, so its entire type scale is expressed
 * in rem against 10 — h1 is `5rem`, meaning 50px, not 80px. Leave this at the
 * browser default of 16px and every heading on every page renders 60% too
 * large, while each individual number still looks correct in the stylesheet.
 * Measured from bb-theme's own CSS: html{font-size:10px}. */
html {
	font-size: 10px;
	-webkit-text-size-adjust: 100%;
}

:root {
	/* --- Brand, by how much the old site actually uses it ------------------ */
	--tow-maroon: #9a2817;          /* 499 occurrences — the dominant colour  */
	--tow-maroon-dark: #8e1c0b;     /* 95  — hover and darker partner         */
	--tow-gold: #eaca80;            /* 388 — the second brand colour          */
	--tow-gold-dark: #debe74;       /* 95  — the gold's own darker partner    */
	--tow-blush: #e3c6c5;           /* 65  — warm tint used behind sections   */
	--tow-white: #ffffff;
	--tow-black: #000000;
	--tow-ink-soft: #333333;
	--tow-rule: #e6e6e6;
	--tow-wash: #f2f2f2;            /* the pale band behind several rows      */

	/* --- Type, verbatim from --fl-global-* -------------------------------- */
	--tow-font-body: Lexend, sans-serif;
	--tow-font-heading: Lexend, sans-serif;
	--tow-font-script: Tangerine, cursive;   /* accents only                  */

	--tow-text-color: #000000;
	--tow-text-weight: 400;
	--tow-text-size: 20px;
	--tow-text-size-medium: 20px;
	--tow-text-size-responsive: 18px;

	--tow-h1-weight: 700;
	--tow-h1-size: 5rem;
	--tow-h1-size-medium: 2.8rem;
	--tow-h1-size-responsive: 2.8rem;

	--tow-h2-weight: 700;
	--tow-h2-size: 3.8rem;
	--tow-h2-size-medium: 2.4rem;
	--tow-h2-size-responsive: 2.4rem;

	--tow-h3-weight: 700;
	--tow-h3-size: 2.2rem;

	--tow-h4-weight: 700;

	/* OFF-WHITE, not #fff. Measured on all eight buttons of the homepage: the
	   seven in the page body are rgb(250,250,250) and only the header's is a
	   true 255. Each Beaver Builder button module carries its own colour, and
	   the header's module is the one that differs -- so the exception lives on
	   .tow-header__cta, not here. A five-point difference no geometry diff can
	   ever see. */
	--tow-button-color: rgb(250, 250, 250);
	/* BEAVER BUILDER'S INHERITED TEXT COLOUR, and it is not only the forms.
	   On the original every .fl-col-content computes to this grey and
	   individual modules override to black where they want it -- so a page
	   that sets nothing, like the privacy policy, renders its whole body in
	   it. This was named for the contact form, which was simply the first
	   place it turned up. */
	--tow-grey: rgb(117, 117, 117);
	/* The DOT Physicals button and the symptom pages' "next step" button. */
	--tow-blue: rgb(43, 123, 185);
	--tow-button-color-header: rgb(255, 255, 255);
}

/* The back-to-top arrow comes from the itv-back-to-top must-use plugin, which
 * every clone inherits. Recolour it here — never by editing the plugin. */
.to-top {
	--to-top-ink: var(--tow-white);
	--to-top-surface: var(--tow-maroon);
	--to-top-border: var(--tow-maroon-dark);
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--tow-white);
	color: var(--tow-text-color);
	font-family: var(--tow-font-body);
	font-size: var(--tow-text-size);
	font-weight: var(--tow-text-weight);
	/* 1.45, MEASURED, not the 1.6 that looked right. It shows up as 29px on the
	   20px body text and 14.5px on the 10px contact line — two independent
	   confirmations of the same ratio. At 1.6 every block of text on the site
	   is a little too tall, and the error compounds down a long page. */
	line-height: 1.45;
	/* NO font-smoothing here. The original leaves text at the browser default
	   (`auto`, 674 of 682 elements on its homepage); only its icon-font glyphs
	   are antialiased. `antialiased` on body drew every white-on-colour button
	   label visibly thinner on a Mac while its computed weight still read 400,
	   which is why the type pass called it identical. */
}

/* THE PAGE CLIPS SIDEWAYS, as the original does: its theme sets
   `body { overflow-x: hidden }`. Several rows hang photographs past their
   container -- the homepage's reaches x1550 at a 1440 window -- and on the
   original nothing scrolls. Here the homepage scrolled sideways at desktop
   width until this was added. On body, not html: body's overflow passes up to
   the window, so no element becomes a scroll container. */
/* The original clips sideways on the root as well as the body. */
html { overflow-x: hidden; }

body { overflow-x: hidden; }

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* VERTICAL-ALIGN: MIDDLE ON IMAGES, which the original's theme sets and the
   browser does not. Left at the default `baseline`, an inline image sits on
   the text baseline and the line box keeps room for the descender underneath
   it -- 7px at this site's 29px line-height.

   Verified on the original rather than assumed: its images compute to
   `middle`, ours computed to `baseline`. It cost 7px under each of the five
   images in one article, 35px in total, with every one of that article's 128
   blocks already matching to the pixel.

   Deliberately NOT applied to svg: this theme's icons set their own alignment,
   and the infobox glyphs sit on the baseline on purpose. */
img { vertical-align: middle; }

/* NO TOP MARGIN ON A PARAGRAPH. The browser default is 1em, which at this
   site's 20px body text is a full 20px, and the original's theme resets it to
   zero.

   IT HID FOR EIGHT PAGES because every component here sets `margin: 0 0 20px`
   on its own paragraphs, so the default never applied to anything that was
   being measured. The first content the theme does NOT style -- the 97
   imported articles, which bring their own stylesheet -- showed it at once:
   the gold answer panel came out 936 against 916, one 20px margin above its
   first paragraph.

   A default that every caller happens to override is invisible until
   something arrives that does not override it. */
p {
	margin-top: 0;
	margin-bottom: 20px;
}

/* NO LINK ON THIS SITE IS UNDERLINED. Counted on the original rather than
   assumed: 71 anchors on the homepage and 60 on sciatica-relief, every one
   `text-decoration: none`. The browser default is underline, so leaving this
   out underlined every link on every page -- and it went unnoticed for two
   sessions because the only links on the finished homepage are buttons,
   which cancel the underline themselves. The first page with body links in
   its copy showed it immediately. */
a {
	color: var(--tow-maroon);
	text-decoration: none;
}

/* AND THEY UNDERLINE ON HOVER. The original leaves the browser's own behaviour
   alone for links in copy -- checked by forcing the hovered state and reading
   it back on every anchor of every page. Buttons and the two menus do not, and
   have to say so, because they would otherwise inherit this. */
/* BOLD IS BOLD, as the original's theme stylesheet says (`b,strong{font-weight:
   bold}` in bb-theme's base.min.css). Without it the browser's own `bolder`
   applies, and inside the articles' 300-weight text `bolder` is only 400 -- a
   narrower word, so paragraphs broke onto fewer lines than the original's. */
b, strong { font-weight: bold; }

a:hover,
a:focus { text-decoration: underline; }

.tow-button:hover,
.tow-button:focus,
.tow-nav__list a:hover,
.tow-nav__list a:focus,
.tow-footer__list a:hover,
.tow-footer__list a:focus,
.tow-social a:hover,
.tow-social a:focus,
/* The header's phone number and address are plain text on the original and
   tappable links here -- a deliberate improvement for phones. Suppressing the
   underline keeps them looking identical; the pointer cursor is the only thing
   that gives them away, and that is Gerek's call to keep or drop. */
.tow-header__contact a:hover,
.tow-header__contact a:focus { text-decoration: none; }

/* NOR DO THE CARD COMPONENTS. A link in copy underlines on hover; the same link
   inside one of the plugin's info-box cards does not, and the two sit on the
   same page -- shockwave's "Dr. Karen" in a paragraph underlines where its
   "Cold Laser" in a tool card does not. Listed rather than guessed: this is
   every card link that differed across the twenty-one pages. */
.tow-ac-item__text a:hover,
.tow-ac-item__text a:focus,
.tow-card-post a:hover,
.tow-card-post a:focus,
.tow-pagination a:hover,
.tow-pagination a:focus,
.tow-cc-tool__title a:hover,
.tow-cc-tool__title a:focus,
.tow-cc-special__title a:hover,
.tow-cc-special__title a:focus,
.tow-cl-cell__text a:hover,
.tow-cl-cell__text a:focus,
.tow-cl-tool__title a:hover,
.tow-cl-tool__title a:focus,
.tow-np-tcard__title a:hover,
.tow-np-tcard__title a:focus,
.tow-sw-tool__title a:hover,
.tow-sw-tool__title a:focus,
.tow-cl-fit__text a:hover,
.tow-cl-fit__text a:focus { text-decoration: none; }

/* The pagination's own hover is a pale ground, not an underline. */
.tow-pagination a:hover,
.tow-pagination a:focus { background-color: rgb(245, 245, 245); }

/* HEADINGS CARRY 20px ABOVE AND 10px BELOW, which is the original theme's
   default, not zero. Probed on the live site rather than assumed: a bare
   h1, h2 and h3 injected into its page all compute to `20px / 10px`, and
   the same probe here computed `0 / 0`.

   Every component in this theme states its own heading margins, so the
   reset was invisible for nine pages. The imported articles do not: their
   own stylesheet sets an h1 margin-BOTTOM and a padding-top and leaves the
   top margin to the theme. With it at zero the article's h1 stopped
   pushing the container down, and the page came out 20px short. */
h1, h2, h3, h4, h5, h6 {
	margin: 20px 0 10px;
	font-family: var(--tow-font-heading);
	/* -0.8px ON EVERY HEADING ON THE SITE. Measured on nine of them, from the
	   hero's title to each split row's — all -0.8, while body text is normal.
	   It had been missing since the first row and cost nothing visible until
	   row 7, whose title is 514 wide in a 524 box: without the negative
	   tracking it wrapped to two lines and the row grew 42px. A global error
	   stays invisible until one element sits on a threshold. */
	letter-spacing: -0.8px;
	/* 1.4, MEASURED. A default heading on the original is 53.2px on a 38px
	   font. 1.1 is what individual heading modules set when they want it
	   tight — the hero's and the "Meet Dr. Karen" title both do — and taking
	   that for the site-wide default made every other heading 11px short. */
	line-height: 1.4;
}

h1 { font-size: var(--tow-h1-size); font-weight: var(--tow-h1-weight); }
h2 { font-size: var(--tow-h2-size); font-weight: var(--tow-h2-weight); }
h3 { font-size: var(--tow-h3-size); font-weight: var(--tow-h3-weight); }
h4 { font-weight: var(--tow-h4-weight); }

/* Beaver Builder's four tiers, and this site uses all of them. NOTE that these
 * are the SITE-WIDE defaults only: every row on the old site picks its own
 * breakpoint through its fl-visible-* classes, and several rows here switch at
 * 801px or 450px instead. Read the classes on the row you are building. */
/* h1 and h2 step down at 992, NOT 1200 -- Beaver Builder's global rule is
   `@media (max-width: 992px) { .fl-builder-content h1 { font-size: 2.8rem } }`.
   Only 1200 changes letter-spacing, on the content wrapper. */
@media (max-width: 992px) {
	body { font-size: var(--tow-text-size-medium); }
	h1 { font-size: var(--tow-h1-size-medium); }
	h2 { font-size: var(--tow-h2-size-medium); }
}

@media (max-width: 768px) {
	body { font-size: var(--tow-text-size-responsive); }
	h1 { font-size: var(--tow-h1-size-responsive); }
	h2 { font-size: var(--tow-h2-size-responsive); }
}

/* Wide content must scroll inside itself rather than pushing the page sideways. */
.tow-scroll-x {
	overflow-x: auto;
}

/* --- Skip link ------------------------------------------------------------ */

.tow-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 20px;
	background: var(--tow-maroon);
	color: var(--tow-white);
}

.tow-skip-link:focus {
	left: 0;
}

/* ===========================================================================
 * HEADER  —  node jrbe2ntxvdyu, #header-container
 *
 * Every value here came out of that row's generated layout CSS via
 * migration/spec_row.py. Where a number looks arbitrary it is because it IS
 * arbitrary — it is what the client's site does.
 * ======================================================================== */

.tow-header {
	background-color: var(--tow-black);   /* row bg #000000 */
	position: relative;
	z-index: 2000;                        /* the row sets this explicitly */
	/* The page builder puts the site's text weight on the header's and footer's
	   own wrappers, so an article's `body { font-weight: 300 }` stops there. Ours
	   inherited it: the footer's copyright line was lighter, narrower, and wrapped
	   onto one line fewer on a phone. */
	font-weight: var(--tow-text-weight);
}

.tow-header__inner {
	max-width: 1400px;                    /* .fl-row-content max-width */
	margin-inline: auto;
	padding: 0;                           /* the row has zero padding at base */
	display: flex;
	/* flex-start, NOT center. Beaver Builder columns fill the row's height and
	   their contents flow from the top; each module's own top margin is what
	   positions it. Centring here moved the contact line 15px down and took
	   the whole header with it. */
	align-items: flex-start;
}

/* Column widths, verbatim: 20% / 65% / 15%. They total 100%.
 *
 * THE 20px INSIDE EACH ONE IS BEAVER BUILDER'S DEFAULT MODULE MARGIN, and it
 * is the single most consequential thing on this page. Every module sits in
 * 20px of margin on all four sides unless the layout CSS overrides it. Without
 * it the logo renders 280 wide instead of 240, the header is 100 tall instead
 * of 110, and every x position is 20px out — which reads as "close enough"
 * and is not. */
.tow-header__logo   { width: 20%; display: block; padding: 30px 20px 20px; }
.tow-header__middle { width: 65%; }
.tow-header__cta    { width: 15%; }

/* 240px at a 1440 viewport: the 280px column less the module's own margins.
   The image's natural size is 451x113; it is scaled, not cropped. */
.tow-header__logo img { display: block; width: 100%; height: auto; }

/* The contact line: Montserrat 400 10px with 2.7px of tracking, centred, white.
   The 2.7px is not a rounding of 3 — it is the value in the stylesheet. */
.tow-header__contact {
	margin: 0;
	color: var(--tow-white);
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 2.7px;
	/* NO line-height HERE, and none on any box above it: the contact line takes
	   the body's 1.45 by inheritance. The original's node rule never sets one, so
	   an article that says `p { line-height: 1.5 }` -- or `body { line-height: 1.5 }`
	   -- makes its contact line 15px and the header half a pixel taller (a whole
	   pixel on a phone, where it wraps). Set here, or on the column, either rule
	   was blocked; inherited from the body, both reach it, as on the original. */
	text-align: center;
	margin: 20px 20px 0;    /* BB module margin, bottom overridden to 0 */
	padding-bottom: 10px;   /* the <p> inside carries margin-bottom: 10px */
	box-sizing: content-box;
}

.tow-header__contact a {
	color: inherit;
	text-decoration: none;
}

/* The menu: Montserrat 400 16px, line-height 1, 14px/10px link padding. */
.tow-nav {
	text-align: center;
	/* BB module margin, top zeroed. The 20 at the foot is real: at 1440 the logo
	   column is taller and hides it, but at 1100, where the menu wraps to two
	   lines, it is what makes the header 152.5. */
	margin: 0 20px 20px;
}

.tow-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
	/* inline-flex, not flex: the <ul> on the original is shrink-to-fit and
	   centred inside its module (774 wide in an 870 module), not stretched. */
	display: inline-flex;
	/* WRAPS below about 1170: at 1100 the seven items take two centred lines
	   rather than squeezing onto one and running out of their column. */
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	font-family: Montserrat, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1;
}

/* A 1px TRANSPARENT separator between top-level items, at 769px and up. It
   draws nothing, and it is 6px of the menu's 774px width — the six borders
   between seven items. Invisible and load-bearing. */
@media (min-width: 769px) {
	.tow-nav__list > li { border-left: 1px solid transparent; }
	.tow-nav__list > li:first-child { border-left: none; }
}

/* BEAVER BUILDER'S CLEARFIX, and it moves things. Its menu lists carry an empty
   ::before and ::after, and inside a flex list an empty pseudo-element is a
   flex ITEM -- the first one. A list takes its baseline from its first item;
   an empty item has no text, so the baseline is synthesised from its box, which
   `align-items: center` puts halfway down the list. That is what sets how far
   the list sits below the top of its line: 4px on the footer menu at 1440, 5 at
   900, 1.5 on a phone. Without it the footer measured 4px short at every width,
   which a `min-height: 40px` had been hiding at desktop. Suspected first as a
   font difference -- ruled out: both sites load the same Lexend and put an empty
   line's baseline in the same place. */
.tow-nav__list::before,
.tow-nav__list::after,
.tow-footer__list::before,
.tow-footer__list::after {
	content: "";
	display: table;
}

.tow-nav__list a {
	display: block;
	padding: 14px 10px;
	color: var(--tow-white);
	text-decoration: none;
}

/* THE MENU'S TYPE MUST SURVIVE AN ARTICLE'S CSS. Ten articles carry unscoped
   rules such as `li { font-size: 20px; line-height: 1.5; font-weight: 300 }`.
   The original's menu sets its own type on its own elements, so it is untouched;
   ours set it on the <ul> and let the items inherit, so those articles grew the
   menu to 20px Lexend and the header by 12px. Inheriting explicitly, with a
   class in the selector, keeps the list's values in the items. */
.tow-nav__list li,
.tow-footer__list li {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* THE CURRENT PAGE'S ITEM IS GOLD, AND SO IS A HOVERED ONE. An earlier note here
   said the original's menu links do not change on hover. That came from a probe
   that copied every :hover rule to the END of the page's CSS, where it could
   beat rules that a real hover never beats -- and, the other way round, hid the
   original's own hover colour. Re-read with the hover rules rewritten in place,
   the original's menu links turn gold. */
.tow-nav__list .current-menu-item > a,
.tow-nav__list a:hover,
.tow-nav__list a:focus {
	color: var(--tow-gold);
}

/* THE DROPDOWN CARET, and it is not decoration — it is 118px of menu width.
 *
 * Each parent item on the original is a grid of `1fr 14px` with 14px of
 * padding-right, so it renders 29px wider than its link. Four of the seven top
 * level items have one. Without them the menu measured 656 wide against the
 * original's 774, and the whole nav sat 78px too far right. */
.tow-nav__list > .menu-item-has-children > a {
	padding-right: 38px;    /* 10 base + 14 toggle + 14 container padding */
	position: relative;
}

.tow-nav__list > .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	right: 17px;
	top: 50%;
	width: 9px;
	height: 9px;
	margin: -5px -5px 0 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform-origin: right bottom;
	transform: translateX(-5px) rotate(45deg);
}

/* THE ARROW FLIPS WHEN YOU HOVER THE ITEM, as the original's toggle does
   (matrix(-1, 0, 0, -1, 0, 0) -- a half turn). The original turns a 14x44 box
   about its middle; ours is a 9x9 chevron pinned by its bottom-right corner, so
   the half turn is written about that corner with the offset either side of it
   -- translate in, turn, translate back -- which pivots it on its own centre
   and leaves it exactly where it was. */
.tow-nav__list > .menu-item-has-children:hover > a::after,
.tow-nav__list > .menu-item-has-children:focus-within > a::after {
	transform: translateX(-5px) rotate(45deg) translate(-4.5px, -4.5px) rotate(180deg) translate(4.5px, 4.5px);
}

/* SUBMENUS: A ROUNDED CARD, MODELLED ON MOMMA'S CHIRO (Gerek, 2026-09-21).
   A DELIBERATE DEPARTURE from the original, whose square 5px-padded panel took
   the width of its parent item, so "About Dr. Karen" wrapped a word to a line.
   Now: 240px minimum, no wrapping, 14px corners, a soft drop shadow, each item a
   rounded row that fills with a maroon tint on hover, and a short fade-and-rise
   on opening. Black text going maroon on hover is kept from the original. */
.tow-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: grid;
	gap: 2px;
	min-width: 240px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
	margin: 0;
	padding: 10px;
	list-style: none;
	text-align: left;
	background-color: var(--tow-white);
	border-radius: 14px;
	box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.tow-nav__list li { position: relative; }

.tow-nav__list li:hover > .sub-menu,
.tow-nav__list li:focus-within > .sub-menu {
	visibility: visible;
	opacity: 1;
	transform: none;
}

.tow-nav__list .sub-menu a {
	padding: 11px 14px;
	border-radius: 8px;
	color: var(--tow-black);
	line-height: 1.25;
	white-space: nowrap;
	transition: background-color .12s ease, color .12s ease;
}

.tow-nav__list .sub-menu > li > a:hover,
.tow-nav__list .sub-menu > li > a:focus,
.tow-nav__list .sub-menu > li.current-menu-item > a {
	color: var(--tow-maroon);
	background-color: rgb(247, 236, 234);   /* the maroon at 8% on white */
}

/* The CTA button: maroon on a 1px #8e1c0b border, fully rounded, 16px.
   On hover it inverts to gold with black text and a #debe74 border. */
.tow-button {
	display: inline-block;
	padding: 12px 24px;     /* measured, not 14 */
	background: var(--tow-maroon);
	border: 1px solid var(--tow-maroon-dark);
	border-radius: 100px;
	color: var(--tow-button-color);
	font-family: var(--tow-font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 18px;      /* NOT inherited — the button sets its own */
	text-decoration: none;
	/* No nowrap: the original's buttons may wrap, and at 1201-1340 the header's
	   does. Removed and re-measured on 21 pages at 15 widths with no change
	   anywhere else. */
}

/* The calendar glyph after the label. Its 20.8px box, not the 18px
   line-height, is what sets the button's 21px content height. */
.tow-button__icon {
	display: inline-block;
	vertical-align: middle;
	width: 13.25px;
	height: 20.8px;
	fill: currentColor;
	/* 12.48px, measured as the actual distance from the label's right edge to
	   the glyph's left edge on the original — not deduced from the markup.
	   Reproducing it as whitespace was the obvious move and it was WRONG: one
	   space at this font size is ~4.4px, so the button came out 8px narrow.
	   The original's spacing comes from the icon font's own side bearing,
	   which an SVG extracted from that font does not carry. */
	margin-left: 12.48px;
}

.tow-button:hover,
.tow-button:focus {
	background-color: var(--tow-gold);
	border-color: var(--tow-gold-dark);
	color: var(--tow-black);
}

.tow-header__cta { text-align: right; }
/* The only #fff button on the site -- see --tow-button-color above. */
.tow-header__cta .tow-button { color: var(--tow-button-color-header); }

/* NOT QUITE WHITE BELOW 993. The original swaps in a separate button module for
   tablet and another for phone, and each was given its own near-white label:
   rgb(250,250,250) at 769-992 and rgb(252,252,252) at 768 and below. Measured
   on the live header at 820 and 390; desktop stays pure white. */
@media (max-width: 992px) {
	.tow-header__cta .tow-button { color: rgb(250, 250, 250); }
}
@media (max-width: 768px) {
	.tow-header__cta .tow-button { color: rgb(252, 252, 252); }
}

/* HOVERED, THE HEADER BUTTON'S LABEL GOES BLACK like every other button's. The
   white label rule above sits later in the file with the same specificity as
   `.tow-button:hover`, so it silently kept the label white on the gold hover
   background at every width. The first hover probe could not see it (see the
   note on the menu). One more class and the hover wins wherever it is. */
.tow-header__cta .tow-button:hover,
.tow-header__cta .tow-button:focus { color: var(--tow-black); }
/* A BUTTON WITH AN ICON CENTRES ITS LABEL; the plain path buttons do not. On the
   original this label is `vertical-align: middle`, which sits it 1.8px lower in
   the button at 1440 and makes the wrapped two-line button at 1100 66.98 tall,
   not 65.19. Tried on every button first and it was wrong: the path buttons
   keep their label on the baseline, and middle made them 1.75px taller. */
.tow-header__cta .tow-button__text { vertical-align: middle; }
.tow-header__cta .tow-button { margin-top: 30px; }

/* THE LABEL MAY WRAP AT EVERY WIDTH, not only at 1200 and below. Between 1201
   and about 1340 the column is narrower than the 200.8px one-line button, so the
   original's calendar glyph drops to a second line and the button is 66.98 tall.
   Held on one line by the nowrap on .tow-button, ours stayed 47.19. */
.tow-header__cta .tow-button { white-space: normal; }

/* ...AND THE BUTTON MODULE KEEPS 20px BELOW IT. Invisible at 1440, where the
   menu column is the tallest thing in the header; at 1280-1320 the wrapped
   button is, and this 20px is what makes the original's header 116.98 to our
   108.5. Desktop tier only: the tablet and phone headers are laid out by other
   rules and measured exact without it. Checked at 18 widths from 1920 to 390. */
@media (min-width: 993px) {
	.tow-header__cta { padding-bottom: 20px; }
}

.tow-nav__toggle { display: none; }

/* THE HEADER SWITCHES AT 992px, NOT 768.
   Its desktop columns carry fl-visible-desktop/large and its mobile columns
   carry fl-visible-medium/mobile, and the boundary between those two tiers is
   992/993. Several ROWS further down this site switch at 768 instead — read the
   classes on the row you are building rather than assuming one breakpoint. */
@media (max-width: 1200px) {
	.tow-header__cta { text-align: left; }
}

/* 769-992: THE TABLET HEADER. Beaver Builder swaps in a second set of columns:
   logo and button side by side at 50% each, then the contact line and the menu
   full width. The menu is STILL the full horizontal one here; the three-bar
   button only takes over at 768. */
@media (max-width: 992px) {
	.tow-header__inner  { flex-wrap: wrap; }
	.tow-header__logo   { width: 50%; padding: 20px 20px 0; }
	.tow-header__logo img { width: 250px; margin-inline: auto; }
	.tow-header__cta    { width: 50%; text-align: center; }
	.tow-header__middle { width: 100%; order: 3; }

	/* The menu sits in a box pulled up 8px, and that box is a column with a 10px
	   gap before a second box that is empty at this width: 88 - 8 + 10, then 10
	   of margin. */
	.tow-nav { margin: -8px 20px 20px; }
	.tow-nav__list a { padding: 14px; }
	/* This menu's submenu toggle is 40 wide, not the desktop menu's 14. */
	.tow-nav__list > .menu-item-has-children > a { padding-right: 54px; }
	.tow-nav__list > .menu-item-has-children > a::after { right: 16px; }
}

/* Beaver Builder's button rule changes line-height at 991, one pixel inside the
   992 tier, and the glyph after the label follows it: 1.2 x 20.8 = 24.96. An
   icon-font glyph's line box is its line-height; an SVG's is its own height, so
   the SVG carries the difference as margin. */
@media (max-width: 991px) {
	.tow-header__cta .tow-button { line-height: 1.2; }
	.tow-header__cta .tow-button__icon { margin-block: 2.08px; }
}

/* 768 and below: THE PHONE HEADER. The logo alone, centred in a column capped at
   400; the contact line; then one row with the button on the left and the
   three-bar menu on the right in a box 20% wide.
   It reaches to 992 now, NOT 768: the tablet header below (600-992, Gerek's
   redesign, 2026-09-21) is built on its three-bar menu and in-flow list, and
   re-lays out only the boxes. Under 600 this is still the original's phone
   header, measured exact. */
@media (max-width: 992px) {
	.tow-header__inner { padding-bottom: 20px; }

	/* The 1px at the foot is the empty column beside it: the tablet button is
	   hidden at this width and Beaver Builder's column keeps a 1px minimum. */
	.tow-header__logo {
		width: 100%;
		max-width: 400px;
		margin-inline: auto;
		padding: 10px 20px 1px;
	}

	/* The middle column dissolves so its two children can share a row with the
	   button. */
	.tow-header__middle { display: contents; }

	.tow-header__contact {
		order: 1;
		width: calc(100% - 40px);
		margin: 10px 20px 5px;
	}

	.tow-header__cta {
		order: 2;
		width: auto;
		margin: 0 0 10px 20px;
		text-align: left;
	}

	.tow-header__cta .tow-button { margin-top: 0; padding-top: 8px; padding-bottom: 8px; }

	/* The menu dissolves as well: its button joins the row, and its list becomes a
	   full-width line of its own beneath. That is where the original's list
	   opens -- in the flow, pushing the page down, the header growing 309px at
	   768 -- not floating over the page. */
	.tow-nav { display: contents; }

	/* The button sits at the left edge of a box 20% of the row wide, 20px in
	   from the right. Its right margin is that box less the button itself
	   (a 1.4em icon and 28px of padding), plus the 20. */
	.tow-nav__toggle {
		order: 3;
		display: block;
		margin: -5px calc((100% - 40px) * 0.2 + 20px - 1.4em - 28px) 10px auto;
		padding: 14px;
		background: transparent;
		border: 0;
		color: var(--tow-white);
		font-size: 16px;
		line-height: 19.2px;
		cursor: pointer;
	}

	.tow-nav__toggle-icon {
		display: block;
		width: 1.4em;
		height: 1.4em;
		fill: currentColor;
	}

	.tow-nav__toggle:hover,
	.tow-nav__toggle[aria-expanded="true"] { color: var(--tow-gold); }

	/* THE OPENED MENU: A ROUNDED PANEL, modelled on Momma's Chiro like the
	   desktop dropdown (Gerek, 2026-09-21). It still opens in the flow, pushing
	   the page down, as the original's does; what changed is how it reads. The
	   original's was a bare right-aligned list of white words on the black
	   header. Now a dark card with left-aligned rows that highlight on touch,
	   the current page in gold, and each submenu an indented group behind a
	   gold rule, opened by tapping its parent (see nav.js). */
	.tow-nav__list {
		order: 4;
		display: none;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 2px;
		width: calc(100% - 40px);
		margin: 4px 20px 0;
		padding: 8px;
		text-align: left;
		background-color: rgb(24, 24, 24);
		border: 1px solid rgb(48, 48, 48);
		border-radius: 14px;
		font-size: 17px;
	}

	.tow-nav[data-open="true"] .tow-nav__list { display: flex; }

	.tow-nav__list a,
	.tow-nav__list > .menu-item-has-children > a {
		padding: 13px 16px;
		border-radius: 10px;
		line-height: 1.25;
		transition: background-color .12s ease, color .12s ease;
	}

	/* Room for the caret on the right of a parent row. */
	.tow-nav__list > .menu-item-has-children > a { padding-right: 48px; }
	.tow-nav__list > .menu-item-has-children > a::after { right: 22px; }

	.tow-nav__list a:hover,
	.tow-nav__list a:focus-visible { background-color: rgba(255, 255, 255, 0.08); }

	/* The current page: a gold tint, and a 3px gold bar down its left edge so it
	   reads at a glance (Gerek, 2026-09-21). */
	.tow-nav__list .current-menu-item > a {
		background-color: rgba(234, 202, 128, 0.12);
		box-shadow: inset 3px 0 0 var(--tow-gold);
	}

	/* THE CARET FOLLOWS THE TAP, not the hover. A touch screen keeps :hover on
	   whatever was last touched, so the hover flip would leave a closed group
	   showing an open arrow. */
	.tow-nav__list > .menu-item-has-children:hover > a::after,
	.tow-nav__list > .menu-item-has-children:focus-within > a::after {
		transform: translateX(-5px) rotate(45deg);
	}
	.tow-nav__list > .menu-item-has-children.is-open > a::after {
		transform: translateX(-5px) rotate(45deg) translate(-4.5px, -4.5px) rotate(180deg) translate(4.5px, 4.5px);
	}

	.tow-nav__list .sub-menu {
		position: static;
		display: none;
		gap: 2px;
		min-width: 0;
		visibility: visible;
		opacity: 1;
		transform: none;
		transition: none;
		margin: 2px 0 6px 16px;
		padding: 0 0 0 10px;
		background-color: transparent;
		border-left: 2px solid rgba(234, 202, 128, 0.55);
		border-radius: 0;
		box-shadow: none;
	}

	.tow-nav__list li.is-open > .sub-menu { display: grid; }

	.tow-nav__list .sub-menu a {
		padding: 11px 14px;
		color: var(--tow-white);
		font-size: 16px;
		white-space: normal;
	}

	.tow-nav__list .sub-menu > li > a:hover,
	.tow-nav__list .sub-menu > li > a:focus-visible {
		color: var(--tow-white);
		background-color: rgba(255, 255, 255, 0.08);
	}

	.tow-nav__list .sub-menu > li > a:focus:not(:focus-visible) { background-color: transparent; color: var(--tow-white); }

	.tow-nav__list .sub-menu > li.current-menu-item > a {
		color: var(--tow-gold);
		background-color: rgba(234, 202, 128, 0.12);
		box-shadow: inset 3px 0 0 var(--tow-gold);
	}
}

/* 600-992: THE TABLET HEADER. A DELIBERATE DEPARTURE from the original, asked
   for by Gerek on 2026-09-21 after reading it on an iPad: the logo was small,
   the contact line was 10px and had a row to itself, and the menu button sat
   20% in from the right edge. Now two rows: the logo, larger and centred; then
   the button, the phone and address between it and the menu, and the menu flush
   right. One row fewer, so the header is shorter with a bigger logo.
   Built on the phone header above (three-bar menu, list opening in the flow);
   only the placement changes, so the open menu behaves exactly as on a phone. */
@media (min-width: 600px) and (max-width: 992px) {
	.tow-header__inner {
		display: grid;
		grid-template-columns: auto 1fr auto;
		align-items: center;
		column-gap: 16px;
		row-gap: 10px;
		padding: 14px 20px;
	}

	.tow-header__logo {
		grid-column: 1 / -1;
		grid-row: 1;
		justify-self: center;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	.tow-header__logo img { width: 300px; }

	.tow-header__cta {
		grid-column: 1;
		grid-row: 2;
		width: auto;
		margin: 0;
	}

	/* Phone on the first line, address on the second: the separator goes and
	   each link takes its own line. 13px with 1.5px tracking, not 10px and 2.7:
	   legible at arm's length, and the address still fits on one line at 744
	   (iPad mini), balancing onto two where the middle is narrower. */
	.tow-header__contact {
		grid-column: 2;
		grid-row: 2;
		width: auto;
		margin: 0;
		padding: 0;
		font-size: 13px;
		letter-spacing: 1.5px;
		line-height: 1.45;
	}

	.tow-header__contact > span { display: none; }
	.tow-header__contact a { display: block; }
	/* When the address has to wrap, it breaks after "Suite A," and nowhere else. */
	.tow-header__addr { display: inline-block; }

	/* Flush right: the icon's right edge on the 20px gutter, the 14px of padding
	   around it kept as the tap target and allowed into the gutter. */
	.tow-nav__toggle {
		grid-column: 3;
		grid-row: 2;
		margin: 0 -14px 0 0;
	}

	.tow-nav__list {
		grid-column: 1 / -1;
		grid-row: 3;
		width: auto;
		margin: 4px 0 0;
	}
}

/* ===========================================================================
 * FOOTER  —  node wbvcu2hitjz9, #footer-container
 * ======================================================================== */

.tow-footer {
	font-weight: var(--tow-text-weight);   /* see .tow-header */
	background-color: var(--tow-maroon);   /* row bg #9a2817 */
	padding: 20px 20px 40px;               /* measured: 40 at the foot, 20 elsewhere */
	color: var(--tow-white);
	text-align: center;
}

/* 1200, NOT 1400. The header row sets max-width 1400 explicitly; the footer row
   sets nothing and falls back to Beaver Builder's global default of 1200. This
   is exactly the value the method warns about carrying from one row to the
   next because it "obviously" repeats. It does not. */
.tow-footer__inner {
	max-width: 1200px;
	margin-inline: auto;
}

/* The logo is 350px WIDE HERE, against its natural 451 in the header. Same
   file, two sizes — this is set on the module, not on the image. */
.tow-footer__logo {
	/* BLOCK, not inline-block. As an inline-block this anchor sat on the
	   parent's 29px text baseline, which pushed everything below it 27px down
	   — the social row started at 165 against the original's 138. Beaver
	   Builder's photo module is a block div with line-height 0 and the image
	   centred inside it, so that is what this is. */
	/* flow-root rather than block, so a margin on the image stays INSIDE this box
	   instead of merging with the box's own 10px. Nothing on our pages gives the
	   image a margin, but some articles ship `img { margin-bottom: 20px }`: the
	   original's photo module keeps that 20 and its footer grows 20; merging, ours
	   grew 10. */
	display: flow-root;
	margin: 20px 20px 10px;
	line-height: 0;
}

.tow-footer__logo img {
	display: block;
	width: 350px;
	height: auto;
	margin-inline: auto;
}

/* One Beaver Builder module. flow-root so the child's margins are contained
   instead of collapsing into the previous module's. Used everywhere a column
   stacks modules — this is structural, not styling. */
.tow-module,
.tow-footer__module { display: flow-root; }

/* Social icons: 40px, gold, white on hover, no gap between them —
   `.fl-icon-group .fl-icon { margin: 0 }` on the original. */
.tow-social {
	margin: 20px 20px 10px;
	padding: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	/* 52px pitch on 40px icons — 12px between them. The layout CSS says
	   `.fl-icon-group .fl-icon { margin: 0 }`, so the space comes from the
	   inline whitespace between the spans in the original's markup. Reproduced
	   as a real gap rather than by relying on whitespace. */
	gap: 12px;
}

.tow-social li { margin: 0; }

.tow-social a {
	display: block;
	color: var(--tow-gold);
}

.tow-social a:hover,
.tow-social a:focus { color: var(--tow-white); }

.tow-social__icon {
	display: block;
	width: 40px;
	height: 40px;
	fill: currentColor;
}

/* Footer menu: white, gold on hover, 16px with 10px padding all round,
   dropping to 14px at 992. */
/* NO MIN-HEIGHT. This used to carry `min-height: 40px`, the height at 1440 --
   and it was a prop: the original's box is 40 at 1440, 39 at 900 and 36.5 on a
   phone, because it is an inline-flex list sitting in a line of text and the
   line's own height changes with the body font. The list is inline-flex here
   too, so the line box does the same. */
.tow-footer__nav { margin: 10px 20px 20px; }

.tow-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: inline-flex;   /* shrink-to-fit and centred, like the header's */
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;    /* see the clearfix note in the header section */
	font-size: 16px;
	line-height: 1;
}

.tow-footer__list > li { display: block; }

.tow-footer__list a {
	display: block;
	padding: 10px;
	color: var(--tow-white);
	text-decoration: none;
}

.tow-footer__list .current-menu-item > a,
.tow-footer__list a:hover,
.tow-footer__list a:focus { color: var(--tow-gold); }   /* gold on hover and keyboard focus, measured in place */

/* The copyright block: 16px on a line-height of 2 — the generous leading is
   what gives the three lines their spacing, not margins. */
.tow-footer__legal {
	margin: 0 20px;
	font-size: 16px;
	/* A RATIO: 32px at 16px and 28px at the 14px it drops to at 992. It was a
	   fixed 32px here, which was right only at desktop width. */
	line-height: 2;
	color: var(--tow-white);
	/* flow-root so the last paragraph's bottom margin is CONTAINED rather than
	   collapsing out through the block's bottom edge. Without it this block
	   measures 116 against the original's 136 — the paragraphs sit in
	   identical positions and only the container's height differs, which is
	   what makes margin collapsing so easy to misread as a spacing bug. */
	display: flow-root;
}

.tow-footer__legal p {
	margin: 0 0 20px;
	/* Same protection as the menu items: an article's `p { font-size: 20px }`
	   must not reach the copyright lines. Its `color: #000 !important` does reach
	   them on the original too, and ours matches that -- no rule here can or
	   should outrank it. */
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

/* The third paragraph is empty and its own bottom margin is NOT part of the
   block. Containing every margin would overshoot by 20. */
.tow-footer__legal p:last-child { margin-bottom: 0; }

/* NOT UNDERLINED. An earlier session gave the credit link an explicit
   underline; the original has none. Checked directly on the live footer:
   rgb(255,255,255), weight 400, text-decoration none. The footer has been
   signed off as pixel-exact since it was built, which is exactly how a
   style that changes no geometry survives. */
.tow-footer__legal a {
	/* White, stated -- not inherited. On the ten articles whose CSS turns every
	   <p> black, the original's credit link stays white because it carries its
	   own colour; inheriting, ours went black with its paragraph. */
	color: var(--tow-white);
}

/* The credit link underlines on hover -- the browser's own behaviour, which the
   original never turns off and ours had. */
.tow-footer__legal a:hover,
.tow-footer__legal a:focus { text-decoration: underline; }

/* A 1px TRANSPARENT divider between the two items, as on the header menu: left
   of the second item from 769 up, above it below that. It draws nothing and it
   is why the list is 234.22 wide, not 233.22, even at desktop width. */
@media (min-width: 769px) {
	.tow-footer__list > li + li { border-left: 1px solid transparent; }
}

@media (max-width: 992px) {
	.tow-footer__list  { font-size: 14px; }
	.tow-footer__legal { font-size: 14px; }
}

/* Beaver Builder takes every row's side padding away at 768. */
@media (max-width: 768px) {
	.tow-footer { padding-left: 0; padding-right: 0; }
	.tow-footer__nav { margin-top: 20px; }
	.tow-footer__list > li + li { border-top: 1px solid transparent; }
}

/* Visually hidden, but read aloud. The social links are icons only. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ===========================================================================
 * HOMEPAGE ROW 1 — hero. #hero-section, node vgwtp4z6f3h2.
 * ======================================================================== */

.tow-hero {
	background-repeat: no-repeat;
	background-position: center center;
	background-attachment: scroll;
	background-size: cover;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
	color: var(--tow-white);
	/* A "custom height" row: min-height, and flex so the content centres
	   vertically inside whatever height the row ends up with. */
	min-height: 600px;
	display: flex;
	/* 20 EITHER SIDE, not none. At 1440 the 1200 container is narrower than the
	   room available, so the padding is invisible and I read it as 0; at 1100
	   the content is 1060, which is 1100 less the two 20s. The phone widths drop
	   it to 0 again, below. */
	padding: 60px 20px 20px;
}

.tow-hero__inner {
	/* 1200 again, NOT 1400. Like the footer, this row sets no max-width and
	   falls back to the builder's global default. Two of the three containers
	   measured on this site so far are 1200 and one is 1400; there is no
	   site-wide value to carry. */
	max-width: 1200px;
	width: 100%;
	margin-inline: auto;
	display: flex;
	/* stretch, not center: the columns fill the row on the original (both are
	   772 tall in a 772 inner) and each module's own margin does the spacing. */
	align-items: stretch;
}

.tow-hero__col    { width: 70%; }
.tow-hero__spacer { width: 30%; }

/* REMOVED: .tow-hero a { color: var(--tow-white) }. The THIRD row-level
   anchor rule whose only target was the button, and the third to get it
   wrong -- .tow-hero, .tow-split--dismissed and .tow-split--family all had
   one. Checked on the original: the hero contains exactly one anchor, the
   button, at rgb(250,250,250). At 0,1,1 the rule also outranked
   .tow-button's own colour, so it won silently.

   THE PATTERN, for the twenty pages still to build: a `<row> a { color }`
   rule is almost always a guess about links that row does not have. Count
   the anchors on the original before writing one. */

/* The <h1> is three spans and only the middle one uses the heading's own size. */
.tow-hero__title {
	margin: 20px;   /* BB's default module margin, all four sides */
	font-family: var(--tow-font-heading);
	font-weight: 700;
	font-size: 5rem;
	text-align: left;
}

/* THE LINE-HEIGHT GOES ON THE SPANS, NOT JUST THE h1, AND THAT IS THE WHOLE
 * POINT OF `em` HERE.
 *
 * `line-height: 1.1em` on the h1 computes once, against the h1's own 50px, and
 * inherits DOWN AS THE LENGTH 55px. So the 90px script span got a 55px line
 * box and rendered 44px short. The original applies the rule to the spans as
 * well — `:where(a, q, p, span)` — so each one resolves 1.1em against its own
 * size. Setting it here as a unitless 1.1 would work too, but em is what the
 * original says. */
.tow-hero__title,
.tow-hero__title span { line-height: 1.1em; }

/* Block, like the other two. Its rect is the full column on the original, not
   the width of its text. */
.tow-hero__title .main-title { display: block; }

.tow-hero__title .sub-label {
	display: block;
	font-size: 2.4rem;
	font-weight: 400;
	letter-spacing: 3px;
	padding-bottom: 32px;
}

.tow-hero__title .text-highlight {
	display: block;
	/* Tangerine at 9rem — 90px against the heading's 50. This one span is the
	   entire reason the site loads a script face. */
	font-family: var(--tow-font-script);
	font-weight: 400;
	font-size: 9rem;
	letter-spacing: 1px;
	padding-top: 50px;
}

.tow-hero__lead   { margin: 20px; display: flow-root; }
.tow-hero__lead p { margin: 0 0 20px; }

.tow-hero__cta { margin: 0 0 20px 20px; }

/* The hero's button is bigger than the header's: 20px type on 14/32 padding
   against 16px on 12/24. Same shape, different size — do not share a rule.
   It also does NOT take the header button's 18px line-height: this row sets
   none, so the label keeps its natural line box. */
/* Its line-height is still 18px, inherited from .tow-button — I had assumed a
   bigger button would take a bigger line box and it does not. */
.tow-button--lg {
	padding: 14px 32px;
	font-size: 20px;
}

/* The glyph is NOT a scaled copy of the header's. Measured on the original:
   16.55 x 32.5 at a 26px font-size, against 13.25 x 20.8 at 16px in the
   header — 1.96 tall against 1.57. Expressing it in em got the height wrong.
   Both sets of numbers are measured, neither is derived from the other. */
/* HEIGHT IS THE ICON'S FONT-SIZE, NOT ITS MEASURED RECT.
 *
 * The original's <i> reports a 32.5px rect because that is its FONT BOX at a
 * 26px font-size. What it contributes to the line — and therefore to the
 * button's height — is its line-height, which Foundation Icons sets to 1, so
 * 26px. Giving the SVG the 32.5 made it an inline-block 32.5 tall and the
 * button came out 7px too tall.
 *
 * The header's icon works the same way and happened to be right already: its
 * 20.8px height is that icon's font-size. Same rule, stated once here. */
.tow-button--lg .tow-button__icon {
	/* IN EM, BECAUSE THE ORIGINAL'S GLYPH SCALES WITH THE LABEL. Its icon
	   font-size is 1.3em of the button's, so when a tablet or phone drops the
	   label to 16px the glyph goes from 26 to 20.8 tall. Written in pixels it
	   stayed 26 and the button came out 52 tall against 47.19. 16.55 at 20px is
	   0.8275em; the 13.6 gap is 8px of margin plus a 0.28em space. */
	width: 0.8275em;
	height: 1.3em;
	margin-left: calc(8px + 0.28em);
}

/* THE FONT AWESOME GLYPHS ARE A DIFFERENT SHAPE FROM THE FOUNDATION ONES.
 *
 * "Get Directions" uses fa-map-marker-alt, not the calendar. Measured on the
 * original: 19.5 x 26 against the calendar's 16.55 x 26 at the same 26px
 * font-size, because the pin's viewBox is 384x512 and the calendar's is
 * narrower. Same height, three pixels wider -- and the button is 237.01 wide
 * because of it. Do not share the calendar's width.
 *
 * THE 13.6px GAP IS TWO THINGS ADDED TOGETHER, and it is the same on both.
 * Beaver Builder's .fl-button-icon-after carries margin-left: 8px, and the
 * source has a real space between </span> and <i>, which at 20px Lexend is
 * 5.6px. 8 + 5.6 = 13.6. The header's 12.48px is the identical sum at 16px
 * type: 8 + 4.48. That is why neither number can be derived from the other by
 * scaling -- only the 5.6 half scales with the font. */
.tow-button--lg .tow-button__icon--fa {
	width: 0.975em;   /* 19.5 at 20px: the pin's 384/512 viewBox at 1.3em */
}

/* A button that carries an icon centres its label vertically on the original;
   a plain one does not. See the header button's note. */
.tow-button:has(.tow-button__icon) .tow-button__text { vertical-align: middle; }

.tow-hero__blurb   { margin: 100px 20px 0; display: flow-root; }

/* The original's trailing HTML module: no content, 20px margins, 40px of
   column. See the comment in front-page.php. */
.tow-module--empty { margin: 20px; height: 0; }
.tow-hero__blurb p { margin: 0 0 20px; font-weight: 400; }

/* THE HERO'S BREAKPOINTS ARE ITS OWN. The row switches its background position
   and min-height at 992, its type at 992 and 768, and the title's two special
   spans at 801 and 450 — custom widths that exist nowhere else on the site. */
@media (max-width: 1200px) {
	.tow-hero__title { margin-top: 20px; }
	.tow-hero__blurb p { font-size: 19px; }
}

@media (max-width: 992px) {
	.tow-hero { min-height: 485px; padding-bottom: 0; background-position: left center; }
	.tow-hero__inner { flex-wrap: wrap; }
	.tow-hero__col    { width: 100%; margin-bottom: 20px; }
	.tow-hero__spacer { display: none; }
	/* margin 0 on all four sides cost this row 20px: the original zeroes only
	   the top and the left, and the heading's 20px bottom margin is the gap
	   above the lead. */
	.tow-hero__title  { margin: 0 20px 20px 0; font-size: 4rem; text-align: center; }
	.tow-hero__lead   { margin-top: 0; margin-left: 0; text-align: center; }
	.tow-hero__cta    { margin: 30px 0 0; text-align: center; }
	.tow-hero__blurb  { text-align: center; }
	.tow-button--lg   { padding-top: 12px; padding-bottom: 12px; font-size: 1.6rem; }
}

@media (max-width: 768px) {
	.tow-hero { padding: 50px 0 0; background-position: left center; }
	.tow-hero__title { margin-left: 20px; font-size: 3.8rem; }
	.tow-hero__lead  { margin-left: 20px; letter-spacing: 0; }
	.tow-hero__cta   { margin: 10px 0 0 20px; }
	.tow-hero__blurb { margin-top: 100px; letter-spacing: 0; }
}

/* THE SAME 991 RULE THE HEADER BUTTON NEEDED, for the same reason. Beaver
   Builder drops the button's line-height to 1.2 one pixel inside the 992 tier.
   An icon-font glyph's line box is that line-height -- 1.2 x 20.8 = 24.96 -- but
   an SVG's line box is its own 20.8px height, so the SVG has to carry the
   4.16px difference as margin or the button comes out 3.76px short. Global,
   because every --lg button with a glyph has it; verified on contact too. */
/* THE CALENDAR ONLY, NOT THE MAP PIN. Measured at 768: the calendar button is
   50.95 tall and the "Get Directions" one 47.19, so the two icon fonts set
   different line boxes and only Foundation's needs the packing. Applying it to
   both would have made the map-marker buttons -- row 10's location card and the
   whole contact page -- 4.16px too tall. */
@media (max-width: 991px) {
	.tow-button--lg .tow-button__icon:not(.tow-button__icon--fa) { margin-block: 2.08px; }
}

/* 801 and 450, not 768 and 480. Read off this row, and they apply to the two
   special spans only. */
@media screen and (max-width: 801px) {
	.tow-hero__title .text-highlight { font-size: 6rem; }
	.tow-hero__title .sub-label      { font-size: 2rem; }
}

@media screen and (max-width: 450px) {
	.tow-hero__title .text-highlight { font-size: 4.2rem; }
	.tow-hero__title .sub-label      { font-size: 1.4rem; letter-spacing: 2px; }
}

/* ===========================================================================
 * Shared row scaffolding.
 *
 * Most rows on this site are the same shape: a full-width band with vertical
 * padding, holding a centred 1200px container. The two things that vary — the
 * padding and the container width — are set per row, because on this site they
 * genuinely do vary.
 * ======================================================================== */

.tow-row__inner {
	max-width: 1200px;
	margin-inline: auto;
	/* Flex column for the same reason as .tow-offer__inner: it is what makes an
	   auto inline margin on a child shrink-wrap instead of stretch. */
	display: flex;
	flex-direction: column;
}

/* ===========================================================================
 * HOMEPAGE ROW 2 — "This Might Sound Familiar". node nhbyx5rd1fog.
 * ======================================================================== */

/* 20 either side, invisible at 1440 behind the 1200 container and not at 1100. */
.tow-familiar { padding: 60px 20px; }

.tow-familiar__title {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 3.8rem;
	text-align: center;
}

/* A Beaver Builder "box" module: a flex column with a real gap, capped and
   centred. The 50px gap is what separates the copy from the script line —
   neither block carries a margin for it. */
/* margin 20px: BB's module default. The horizontal 155px the original reports
   is just `margin-inline: auto` resolving inside the 1200 container. */
.tow-familiar__box {
	margin: 20px auto;
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 890px;
	margin-inline: auto;
}

.tow-familiar__copy { text-align: center; }
.tow-familiar__copy p { margin: 0 0 20px; }

/* 7rem of Tangerine — the same .text-highlight treatment as the hero's third
   line, at a different size. The script face is a recurring device on this
   site, not a one-off. */
.tow-familiar__punch {
	text-align: center;
	font-family: var(--tow-font-script);
	font-weight: 400;
	font-size: 7rem;
}

.tow-familiar__punch p { margin: 0 0 20px; }

/* Row 2 on a tablet and a phone: the script line steps 70 - 60 - 50 - 45, and
   at 45 it takes a 1.2em line where every wider size uses the body's 1.45. */
@media (max-width: 1200px) {
	.tow-familiar__punch { font-size: 6rem; }
}

@media (max-width: 992px) {
	.tow-familiar { padding: 60px 20px 40px; }
	.tow-familiar__title { font-size: 3.4rem; }
	.tow-familiar__punch { font-size: 5rem; }
}

@media (max-width: 768px) {
	.tow-familiar { padding: 30px 20px 40px; }
	.tow-familiar__title { font-size: 2.4rem; }
	.tow-familiar__copy { letter-spacing: 0; }
	.tow-familiar__punch { font-size: 4.5rem; line-height: 1.2em; letter-spacing: 0; }
}

/* ===========================================================================
 * HOMEPAGE ROW 3 — "Meet Dr. Karen Hannah". node nz7i25y1gdqr.
 * ======================================================================== */

.tow-meet {
	background-color: var(--tow-wash);          /* #f2f2f2 */
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
	padding: 60px 20px 0;                       /* nothing at the bottom */
}

.tow-meet__inner {
	display: flex;
	/* row, EXPLICITLY. .tow-row__inner sets flex-direction: column so that auto
	   inline margins can shrink-wrap a child, and this two-column row has to
	   opt back out of it. Inheriting the column direction stacked the text
	   above the photo and made the row 721px taller. */
	flex-direction: row;
	align-items: stretch;
}

/* COLUMN CONTENT IS A FLEX COLUMN, AND ITS ALIGNMENT IS PER COLUMN.
 *
 * Beaver Builder makes every .fl-col-content a flex column, but the
 * justify-content is set on the column itself and it genuinely varies. Measured
 * on this homepage:
 *
 *     hero left column   center
 *     row 2              normal (default)
 *     row 3 both columns flex-end
 *     row 4 both columns flex-start
 *
 * "Columns are bottom-aligned" was what row 3 looked like on its own, and
 * applying it to row 4 put that row's entire left column 237px too low. The
 * default here is flex-start; anything else is opted into per row.
 *
 * What this DOES mean in general: a column's slack does not always fall below
 * its content. Where it falls is a value to read, not to assume. */
.tow-col-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/* Row 3 is one of the two that opts into bottom alignment. */
.tow-meet__text > .tow-col-content,
.tow-meet__photo > .tow-col-content { justify-content: flex-end; }

/* The 80px is on the column's CONTENT, not the column. */
.tow-meet__text > .tow-col-content { margin-bottom: 80px; }

/* 55 / 45, and the text column carries an 80px bottom margin on its own
   content — which is what gives the row its lower breathing space, since the
   row itself has zero bottom padding. */
/* The columns are flex boxes themselves so .tow-col-content can take the
   remaining height with `flex: 1`. Using `height: 100%` instead made the text
   column's content 100% PLUS its own 80px bottom margin — taller than the
   column — and since the content is bottom-aligned, everything in it sat 87px
   too low. */
.tow-meet__text,
.tow-meet__photo { display: flex; flex-direction: column; }

.tow-meet__text  { width: 55%; }
.tow-meet__photo { width: 45%; text-align: center; }

.tow-meet__title {
	margin: 20px;
	color: var(--tow-maroon);
	font-family: var(--tow-font-heading);
	font-weight: 700;
	line-height: 1.1em;
	text-align: left;
}

.tow-meet__copy   { margin: 20px; display: flow-root; }
.tow-meet__copy p { margin: 0 0 20px; }

.tow-meet__cta { margin: 30px 0 20px 20px; }

/* The only button on the page that capitalises its label. */
.tow-button--caps { text-transform: capitalize; }

/* 150% OF THE MODULE, NOT OF THE COLUMN — and the difference is 60px.
 *
 * The photo module carries the usual 20px side margins, so inside a 540px
 * column the image's containing block is 500 and 150% of that is 750. Applied
 * to the bare column it resolves to 810, which is 60 too wide and, once the
 * aspect ratio does its work, 64 too tall. */
/* line-height 0, the same trap the footer logo had: an image in a normal line
   box adds ~7px of descender space beneath itself, and the column carried it
   straight into the row's height. */
.tow-meet__photo .tow-module { margin: 20px 20px 0; line-height: 0; }

.tow-meet__photo img {
	display: block;
	width: 150%;
	max-width: 150%;
	height: auto;
}

/* Row 3 on a tablet and a phone. */
@media (max-width: 992px) {
	.tow-meet__inner { flex-wrap: wrap; }
	.tow-meet__text,
	.tow-meet__photo { width: 100%; }
	/* The 80 under the text column becomes 20, like every other column here. */
	.tow-meet__text > .tow-col-content { margin-bottom: 20px; }
	.tow-meet__title { margin: 0 20px 20px 0; font-size: 3.4rem; text-align: center; }
	.tow-meet__copy { margin: 0 20px 20px; }
	.tow-meet__cta { margin: 30px 0 0; text-align: center; }
	/* 50 ABOVE THE PHOTOGRAPH AT BOTH WIDTHS. The phone rule that says 20 is
	   written one class weaker than the tablet rule that says 50, so it never
	   wins -- measured 50 at 768 as well. */
	.tow-meet__photo .tow-module { margin-top: 50px; }
	/* 70% of 70%, the module's pair of widths, centred. */
	.tow-meet__photo img { width: 49%; max-width: 49%; margin-inline: auto; }
}

@media (max-width: 768px) {
	.tow-meet { padding: 60px 0 0; }
	.tow-meet__title { margin-left: 20px; font-size: 2.4rem; }
	.tow-meet__copy { letter-spacing: 0; }
	.tow-meet__cta { margin: 10px 15px 0; }
	.tow-meet__cta .tow-button { padding-right: 12px; padding-left: 12px; font-size: 1.5rem; }
}

/* ===========================================================================
 * HOMEPAGE ROW 4 — "A Different Kind of Chiropractic Office". node ujhmdk7la824.
 * ======================================================================== */

.tow-different {
	background-color: var(--tow-white);
	background-repeat: no-repeat;
	background-position: left bottom;   /* not centre — the photo anchors bottom-left */
	background-attachment: scroll;
	background-size: cover;
	padding: 60px 20px;
	color: var(--tow-white);
}

/* The row explicitly zeroes letter-spacing on its paragraphs. */
.tow-different p { letter-spacing: 0; }

.tow-different__inner { display: flex; flex-direction: row; align-items: stretch; }

.tow-different__text,
.tow-different__boxes { display: flex; flex-direction: column; width: 50%; }

/* 40px of padding on the COLUMN CONTENT, pushing the two halves apart —
   one on each inner edge, so 80px between them in total. */
.tow-different__text  > .tow-col-content { padding-right: 40px; }
.tow-different__boxes > .tow-col-content { padding-left: 40px; }

.tow-different__title {
	margin: 20px 20px 0;    /* the heading zeroes its bottom margin */
	color: var(--tow-white);
	font-family: var(--tow-font-heading);
	font-weight: 700;
	line-height: 1.1em;
	text-align: left;
}

.tow-different__lead,
.tow-different__copy {
	margin: 20px 20px 20px;
	display: flow-root;
	color: var(--tow-white);
}

.tow-different__lead p,
.tow-different__copy p { margin: 0 0 20px; }

/* --- The Ultimate Addons info box ---------------------------------------
 *
 * MEASURED FROM THE RENDERED PAGE, NOT FROM spec_row.
 *
 * spec_row reads the per-page layout CSS Beaver Builder generates, which holds
 * the overrides an editor set — the 45px image, the 10px title margin, the
 * border radius. It does NOT contain the plugin's own base stylesheet, and
 * that is where this module's type lives: a 28px/700 title on a 1.2 line
 * height, and a paragraph carrying 10px of bottom padding as well as its
 * margin. Taking the inherited 20px/1.45 made each box 90px short and the row
 * 237px short.
 *
 * Whenever a row uses a plugin module rather than a core one, the layout CSS
 * is half the answer. */

/* The module itself has no margin — the boxes stack flush, 238 apiece. The
   20px inset is on the module CONTENT. */
.tow-different__boxes .tow-module { margin: 0; }

/* Row 4's cards are on a photograph: white. */
.tow-different__boxes .tow-infobox__title,
.tow-different__boxes .tow-infobox__text { color: var(--tow-white); }

.tow-infobox {
	margin: 20px;
	text-align: center;
	border-radius: 12px;
	display: flow-root;
}

.tow-infobox__media { margin: 5px 0 0; line-height: 0; }

.tow-infobox__media img {
	display: inline;
	width: 45px;
	height: auto;
}

/* The info box title is a <p>, and the plugin leaves its tracking normal —
   the -0.8px above does not reach it. Stated rather than left to chance. */
.tow-infobox__title {
	margin: 10px 0 20px;
	font-family: var(--tow-font-heading);
	letter-spacing: normal;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

/* NO COLOUR ON THE BASE MODULE. Row 4's cards sit on a photograph and are
   white; row 5's sit on a white row and are maroon. The shared rule carried
   row 4's colour because row 4 was built first, and row 5's cards fell back
   through `inherit` to the body's black — visible, but the wrong colour.
   A geometry diff cannot see this: x/y/w/h were exact throughout. Colour has
   to be compared as a value, which is what the check beside this now does. */
.tow-infobox__text { margin: 10px 0 0; }

/* 20px of margin AND 10px of padding under the paragraph. Both are real: the
   padding is inside the box's height, the margin is what the flow-root keeps. */
.tow-infobox__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* Row 4 on a tablet and a phone. The two columns stay side by side at 900 --
   50/50, as they are on a desktop -- and only stack at 768, each capped at 400
   and centred. */
@media (max-width: 992px) {
	.tow-different { padding: 60px 20px 40px; background-position: center center; }
	/* 40 above the heading at BOTH narrow widths: the phone rule that says 20 is
	   a class weaker than this one. */
	.tow-different__title { margin: 40px 20px 0; font-size: 3rem; }
}

@media (max-width: 768px) {
	.tow-different { padding: 30px 20px 40px; }
	.tow-different__inner { flex-wrap: wrap; }
	.tow-different__text,
	.tow-different__boxes { width: 100%; max-width: 400px; margin-inline: auto; }
	.tow-different__text > .tow-col-content { padding-right: 0; }
	.tow-different__boxes > .tow-col-content { padding-left: 0; }
	.tow-different__title { font-size: 2.4rem; text-align: center; }
	.tow-different__lead,
	.tow-different__copy { text-align: center; }
	.tow-different__boxes .tow-infobox { margin: 20px; padding: 15px 10px 20px; }
	/* Only the first TWO cards drop their bottom margin; the third keeps its 20,
	   which is the whole of the row's last 20px. */
	.tow-different__boxes .tow-module:not(:last-child) .tow-infobox { margin-bottom: 0; }
	.tow-different__boxes .tow-infobox__title { font-size: 1.8rem; letter-spacing: 0; }
}

/* ===========================================================================
 * HOMEPAGE ROW 5 — "What We Offer". node tq9y8fpleu0n.
 *
 * A THIRD container width. The header is 1400, most rows fall back to 1200,
 * and this one sets 1500. Three different values on one page: there is no
 * site-wide container to carry.
 * ======================================================================== */

/* 20px of side padding: at a 1440 viewport the 1500 cap never binds, and what
   actually sets the container to 1400 is the row's own side padding. */
.tow-offer { padding: 60px 20px; }

.tow-offer__inner {
	max-width: 1500px;
	margin-inline: auto;
	/* A flex column, so `margin-inline: auto` on the box below SHRINK-WRAPS it
	   rather than stretching it. In flexbox an auto inline margin absorbs the
	   free space and centres the item at its own width — which is why the same
	   box module is 890 wide in row 2, where its content overflows the cap, and
	   601 here, where it does not. */
	display: flex;
	flex-direction: column;
}

.tow-offer__title {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 3.8rem;
	text-align: center;
}

/* The same box module as row 2: flex column, 50px gap, capped at 890, centred. */
.tow-offer__box {
	margin: 20px auto;
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 890px;
}

.tow-offer__intro { text-align: center; }
.tow-offer__intro p { margin: 0 0 20px; }

/* Two groups: four across, then a spacer + three + a spacer. */
.tow-offer__group { display: flex; }

.tow-offer__spacer { width: 12.5%; }

.tow-offer__col {
	width: 25%;
	display: flex;
	flex-direction: column;
}

/* --- The service info box -----------------------------------------------
   Same module as row 4 with different type: a 2.4rem/700 title on 1.2, 2rem
   text, and a 50px image rather than 45. Two of the seven use a Font Awesome
   glyph at 40px in maroon instead of a photo. */

/* flow-root, NOT block. `display: block` here silently cancelled the
   `display: flow-root` on .tow-infobox, so the media's 5px top margin and the
   paragraph's 20px bottom margin both collapsed out — 25px per card. An <a>
   defaults to inline, so it needs a display value; it just needs the right
   one. */
.tow-infobox--service {
	display: flow-root;
	color: var(--tow-maroon);
	text-decoration: none;
}

.tow-infobox--service .tow-infobox__media img { width: 50px; }

/* Row 5's cards are on white: maroon, the same as the row's heading. */
.tow-infobox--service .tow-infobox__title {
	color: var(--tow-maroon);
	font-size: 2.4rem;
	font-weight: 700;
	line-height: 1.2em;
}

.tow-infobox--service .tow-infobox__text {
	color: var(--tow-maroon);
	font-size: 2rem;
}

/* HEIGHT 40, WIDTH AUTO. The icon font sizes these by height, so a narrow
   glyph stays narrow: fa-bolt has a 320x512 viewBox and renders 25 wide at 40
   tall. Forcing a 40x40 box would stretch it. */
.tow-infobox__icon {
	display: inline-block;
	width: auto;
	height: 40px;
	fill: var(--tow-maroon);
}

/* THE ICON CARDS ARE 2px TALLER THAN THEIR GLYPH, and the photo cards are not.
   A photo is a block in a line-height:0 wrapper, so its box is its height; the
   glyph is an inline-block sitting on a baseline, and the line keeps the
   strut's descender underneath it -- 42 against 40 at 20px/29, and 42.09 at
   18px/26.1. Invisible at 1440, where the cards sit side by side and a taller
   neighbour sets the row; worth 4.19px of the row once they stack.

   MEASURED, not derived: 42 where the body type is 20px and 42.09 where it is
   18. Letting the line-height do it instead put the glyph on a baseline of its
   own and came out 47. */
.tow-infobox__media:has(.tow-infobox__icon) { height: 42px; }

@media (max-width: 768px) {
	.tow-infobox__media:has(.tow-infobox__icon) { height: 42.09px; }
}

/* Row 5's closing button — full width, centred. Its module margin is
   30px 0 20px 20px, not the default 20 all round: 30 at the top, nothing on
   the right. That asymmetry is 10px of the row. */
.tow-offer__cta { margin: 30px 0 20px 20px; text-align: center; }

/* Row 5 on a tablet and a phone. The first group goes to thirds with the fourth
   card wrapping at half width; the second group's five columns -- two of them
   the 1px spacers -- go to halves. */
@media (max-width: 992px) {
	.tow-offer { padding: 60px 20px 80px; }
	.tow-offer__title { font-size: 3.4rem; }
	.tow-offer__group { flex-wrap: wrap; }
	.tow-offer__group--a .tow-offer__col { width: 33%; }
	.tow-offer__group--a .tow-offer__col:nth-child(4) { width: 50%; }
	.tow-offer__group--b .tow-offer__col { width: 50%; }
	/* A spacer alone on its line contributes its own 1px to the row. */
	.tow-offer__spacer { width: 50%; height: 1px; }
	.tow-offer__cta { margin: 30px 0 0; }
}

@media (max-width: 768px) {
	.tow-offer { padding: 30px 20px 40px; }
	.tow-offer__title { font-size: 2.4rem; }
	.tow-offer__intro { letter-spacing: 0; }
	.tow-offer__group--a .tow-offer__col,
	.tow-offer__group--a .tow-offer__col:nth-child(4),
	.tow-offer__group--b .tow-offer__col,
	.tow-offer__spacer { width: 100%; }
	.tow-offer__col .tow-infobox { margin-bottom: 0; padding: 15px 10px 20px; }
	.tow-infobox--service .tow-infobox__title { font-size: 1.8rem; letter-spacing: 0; }
	.tow-infobox--service .tow-infobox__text { font-size: 16px; letter-spacing: 0; }
	.tow-offer__cta { margin: 10px 15px 0; }
	.tow-offer__cta .tow-button { padding-right: 12px; padding-left: 12px; font-size: 1.5rem; }
}

/* ===========================================================================
 * HOMEPAGE ROWS 6, 7, 8 — the split rows.
 *
 * One shape, three variations: a 600px-minimum band with a photo on one side
 * and a heading, paragraph and button on the other. Each row sets its own
 * split, its own side, and its own colour.
 * ======================================================================== */

.tow-split {
	min-height: 600px;
	padding: 60px 20px;
	display: flex;
	background-repeat: no-repeat;
	background-position: center bottom;   /* bottom, not centre */
	background-attachment: scroll;
	background-size: cover;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.tow-split__inner {
	width: 100%;
	flex-direction: row;
	align-items: stretch;
}

.tow-split__text,
.tow-split__photo,
.tow-split__spacer { display: flex; flex-direction: column; }

/* CENTRE — the fourth alignment value on this page, after normal, flex-start
   and flex-end. It made no difference in rows 6 and 8, where the content fills
   the column, and 92px of difference in row 7, where it does not. Two rows
   agreeing is not evidence of a rule. */
.tow-split__text > .tow-col-content,
.tow-split__photo > .tow-col-content { justify-content: center; }

.tow-split__title {
	margin: 20px;
	font-family: var(--tow-font-heading);
	font-weight: 700;
	font-size: 3.8rem;
	text-align: left;
}

/* Same trick as the hero: the em line-height has to be on the spans, or the
   6rem script line inherits the 3.8rem title's computed length. */
.tow-split__title,
.tow-split__title span { line-height: 1.1em; }

.tow-split__title .main-title { display: block; }

.tow-split__title .text-highlight {
	display: block;
	font-family: var(--tow-font-script);
	font-weight: 400;
	font-size: 6rem;
	letter-spacing: 1px;
	padding-top: 50px;
}

.tow-split__copy   { margin: 20px; display: flow-root; }
.tow-split__copy p { margin: 0 0 20px; }

/* capitalize: these buttons title-case their labels, so "Learn about
   neuropathy care" renders as "Learn About Neuropathy Care" — 8px wider. */
.tow-split__cta { margin: 30px 0 20px 20px; text-align: left; }
.tow-split__cta .tow-button { text-transform: capitalize; }

.tow-split__photo .tow-module { margin: 20px; line-height: 0; }
.tow-split__photo img { display: block; width: 100%; height: auto; }

/* --- Row 6: photo left, white text on it, 40 / 60 --- */
.tow-split--dismissed { color: var(--tow-white); }
.tow-split--dismissed .tow-split__spacer { width: 40%; }
.tow-split--dismissed .tow-split__text   { width: 60%; }
/* REMOVED: .tow-split--dismissed a { color: var(--tow-white) }. Row 6 has
   exactly one anchor -- the button -- and on the original it is
   rgb(250,250,250), not #fff. The rule had no other target. */

/* --- Row 7: a real <img> on the right, on white, 47 / 53 --- */
.tow-split--family {
	background-color: var(--tow-white);
	color: var(--tow-black);
}
/* Row 7's script line sets its own 1.2em line-height where rows 6 and 8 use
   the shared 1.1 — 72px against 66. */
.tow-split--family .tow-split__title .text-highlight { line-height: 1.2em; }

/* AND ITS OWN THREE SIZES, at this page's odd widths. Rows 6 and 8 hold 6rem
   at every width; row 7 goes 6 - 5.5 - 6 - 4.5, which is the only reason its
   heading is 12px taller at 1100 and 36 at 390. */
@media screen and (max-width: 1201px) {
	.tow-split--family .tow-split__title .text-highlight { font-size: 5.5rem; }
}

@media screen and (max-width: 801px) {
	.tow-split--family .tow-split__title .text-highlight { font-size: 6rem; }
}

@media screen and (max-width: 450px) {
	.tow-split--family .tow-split__title .text-highlight { font-size: 4.5rem; }
}

.tow-split--family .tow-split__text  { width: 47%; }
.tow-split--family .tow-split__photo { width: 53%; }
/* REMOVED: .tow-split--family a { color: var(--tow-black) }. Row 7 also has
   exactly one anchor -- the button -- so this rule was painting black text
   on a maroon button. The original is rgb(250,250,250). Checked against the
   live page: rows 6, 7 and 8 contain no link but their button. */

/* --- Row 8: photo left, 49.92 / 50.08 —— not 50/50, and reproduced as written.
   The row sets white and the heading and copy both override back to black. --- */
.tow-split--dot { color: var(--tow-white); }
.tow-split--dot .tow-split__spacer { width: 49.92%; }
.tow-split--dot .tow-split__text   { width: 50.08%; }
.tow-split--dot .tow-split__title,
.tow-split--dot .tow-split__copy { color: var(--tow-black); }
/* ROW 8'S BUTTON IS BLUE, AND ITS BORDER IS GREY. Every other button on the
   page is maroon on #8e1c0b, so this one inherited the wrong colour entirely
   and measured 48 x 327.92 -- exact -- the whole time. A geometry diff has no
   opinion about colour. Measured: background rgb(43,123,185), border
   rgb(151,151,151). */
/* BLUE UNDERNEATH, RED ON TOP -- and only the red shows. The original paints
   this one button with a gradient over its blue background colour, so it
   renders like every other button on the page while measuring as blue. Reading
   the colour alone said blue, and that is what we shipped. */
.tow-split--dot .tow-button {
	background-color: var(--tow-blue);
	background-image: linear-gradient(90deg, rgb(229, 30, 14) 0%, rgb(154, 40, 23) 100%);
	border-color: rgb(151, 151, 151);
}

/* Hovered, the gradient goes flat gold and the border does NOT move -- the
   shared button rule changes both, and this one only changes the gradient. */
.tow-split--dot .tow-button:hover,
.tow-split--dot .tow-button:focus {
	background-color: var(--tow-blue);
	background-image: linear-gradient(90deg, rgb(234, 202, 128) 0%, rgb(234, 202, 128) 100%);
	border-color: rgb(151, 151, 151);
}

/* Rows 6, 7 and 8 on a tablet and a phone. The three share their type and
   button rules; what differs is which column disappears and, in row 7, the
   order the two end up in. */
@media (max-width: 992px) {
	.tow-split { min-height: 421px; }
	.tow-split__text > .tow-col-content { margin-bottom: 20px; }
	.tow-split__title { margin: 0 20px 20px 0; font-size: 3rem; }
	.tow-split__copy { margin: 0 20px 20px 0; }
	.tow-split__cta { margin: 30px 0 0; }

	.tow-split--dismissed,
	.tow-split--dot { background-position: 36% 0; }

	/* Row 7 stacks -- and its photograph's column, not its text's, is the one
	   that carries the 20 underneath. */
	.tow-split--family { padding-bottom: 0; }
	.tow-split--family .tow-split__inner { flex-wrap: wrap; }
	.tow-split--family .tow-split__text,
	.tow-split--family .tow-split__photo { width: 100%; }
	.tow-split--family .tow-split__text > .tow-col-content { margin-bottom: 0; }
	.tow-split--family .tow-split__photo > .tow-col-content { margin-bottom: 20px; }
	/* 60 above the photograph at both narrow widths -- the phone's 20 is written
	   a class weaker and never wins. 85% of 85%. */
	.tow-split--family .tow-split__photo .tow-module { margin-top: 60px; }
	.tow-split--family .tow-split__photo img { width: 72.25%; margin-inline: auto; }
	.tow-split--family .tow-split__cta { text-align: center; }
}

@media (max-width: 768px) {
	.tow-split__title { margin-left: 20px; font-size: 2.4rem; text-align: center; }
	.tow-split__copy { margin-left: 20px; letter-spacing: 0; }
	.tow-split__cta { margin: 10px 15px 0; text-align: center; }
	.tow-split__cta .tow-button { padding-right: 12px; padding-left: 12px; font-size: 1.5rem; }

	/* Rows 6 and 8 drop the column their photograph sat behind. */
	.tow-split--dismissed,
	.tow-split--dot { padding: 50px 0 20px; background-position: right center; }
	.tow-split--dismissed .tow-split__spacer,
	.tow-split--dot .tow-split__spacer { display: none; }
	.tow-split--dismissed .tow-split__text,
	.tow-split--dot .tow-split__text { width: 100%; }

	/* Row 7 puts its photograph ABOVE the text on a phone, the reverse of the
	   order it stacks in at 900. */
	.tow-split--family { padding: 50px 0 60px; }
	.tow-split--family .tow-split__photo { order: -1; }
	.tow-split--family .tow-split__photo img { width: 100%; }
}

/* ===========================================================================
 * HOMEPAGE ROW 9 — "Trusted In Morton Since 2010". node eq0j2cxyzrfd.
 * ======================================================================== */

.tow-trusted {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	padding: 20px 20px 40px;   /* 20 top, 40 bottom — not a symmetrical row */
}

.tow-trusted__title {
	margin: 20px;
	font-family: var(--tow-font-heading);
	font-weight: 700;
	font-size: 7rem;        /* 70px — the largest heading on the page */
	line-height: 1.1em;
	text-align: center;
}

/* THE WHOLE LINE IS TANGERINE, not Lexend, and a row height cannot see it:
   the script span takes the same 1.1em line box, so at 1440 the row measured
   exact with the wrong typeface in it. It shows up the moment the line has to
   wrap -- 519 wide in Tangerine against 885 in Lexend, which is one line at
   900 against two. */
/* BLOCK, like the hero's script span. Left inline it shares a line box with the
   heading's Lexend strut, the two faces sit on the same baseline with different
   metrics, and the line grows by about a ninth of the type size -- 8px at 70,
   7 at 60, 4 at 38. As a block the script face sets the line on its own. */
.tow-trusted__title .text-highlight {
	display: block;
	font-family: var(--tow-font-script);
	font-weight: 400;
	letter-spacing: 1px;
}

/* 90% APPLIED TWICE, AND IT COMPOUNDS.
   Beaver Builder's photo module sets `width: 90%` on BOTH .fl-photo-content
   and the img inside it, so 1160 becomes 1044 becomes 940 — 81% overall, not
   90%. Reading it as one 90% makes the picture 104px too wide.
   The source file is only 765px naturally, so it is being scaled UP. */
.tow-trusted__photo { margin: 0 20px; text-align: center; line-height: 0; }
.tow-trusted__photo .tow-photo__content { width: 90%; margin-inline: auto; }
.tow-trusted__photo img { display: block; width: 90%; height: auto; margin-inline: auto; }

.tow-trusted__box {
	margin: 20px auto;
	display: flex;
	flex-direction: column;
	gap: 10px;              /* 10, where the other box modules use 50 */
	max-width: 890px;
}

.tow-trusted__copy { text-align: center; }
.tow-trusted__copy p { margin: 0 0 20px; }

/* Row 9 on a tablet and a phone. Its heading goes 70 - 60 - 60 - 38, and the
   photograph's compounded 90% becomes a plain 100% on a phone. */
@media (max-width: 1200px) {
	.tow-trusted__title { font-size: 6rem; }
}

@media (max-width: 992px) {
	.tow-trusted { padding: 60px 20px 40px; }
	.tow-trusted__title { margin: 0 20px 20px 0; }
}

@media (max-width: 768px) {
	.tow-trusted { padding: 30px 20px 40px; }
	.tow-trusted__title { margin-left: 20px; font-size: 3.8rem; }
	.tow-trusted__copy { letter-spacing: 0; }
	.tow-trusted__photo .tow-photo__content,
	.tow-trusted__photo img { width: 100%; }
}

/* Five U+2606 characters, 40px, cream. Not an icon font. */
.tow-rating { text-align: center; }
.tow-rating__stars i {
	display: inline-block;
	position: relative;
	font-style: normal;
	font-size: 40px;
	color: #efecdc;
}

/* THE STARS ARE BLACK. PowerPack lays a solid U+2605 in black over each cream
   outline star (`i:not(.pp-star-empty)::before { content: "★" }`, absolute,
   overflow hidden). The outline alone read as five white stars. */
.tow-rating__stars i::before {
	content: "\2605";
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #000;
}

/* ===========================================================================
 * HOMEPAGE ROW 10 — "Your First Visit". node fgoclbhs3krt.
 * ======================================================================== */

.tow-visit {
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
	padding: 60px 20px;
}

.tow-visit__title {
	margin: 20px 20px 0;    /* the heading zeroes its bottom margin */
	color: var(--tow-maroon);
	font-size: 3.8rem;
	text-align: center;
}

.tow-visit__intro   { margin: 0 20px; text-align: center; }
.tow-visit__intro p { margin: 0 0 20px; }

/* The pale panels. Two of the values here are unusual enough to be worth
   naming: the corner radius is 20px and the shadow is a 12px blur at 21%
   opacity — softer and larger than anything else on the site. */
/* 20px below by default. Only the FIRST card carries 30 — measured module
   margins are 20/200/30 on card one and 20/200/20 on the other two. */
.tow-card {
	margin: 20px auto;
	max-width: 800px;
	display: flex;
	flex-direction: row;
	gap: 50px;
	padding: 30px 40px;
	background-color: var(--tow-wash);
	border-radius: 20px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.21);
}

/* 180px HARD, so the labels line up down the page however long the copy runs. */
/* flow-root, so each paragraph's 20px bottom margin stays inside the card.
   Without it every card was 20px short and the row 184. */
.tow-visit .tow-module:nth-of-type(3) .tow-card { margin-bottom: 30px; }

/* THE LABEL IS CENTRED IN THE CARD AND SHRINK-WRAPPED, and as a flow-root it
   was neither: its text sat at the top of the 180px column and ran the full
   180 wide. Invisible in the row's height, because the card stretches both
   columns to the taller one -- the same blind spot the location card's button
   hid in. */
.tow-card__label {
	flex: 0 0 180px;
	max-width: 180px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

/* margin-bottom 20 on both paragraphs. They are flex items so the margin is
   already contained — zeroing it simply removed 20px from every card. */
.tow-card__label p { margin: 0 0 20px; font-weight: 700; text-align: left; }

.tow-card__body   { flex: 1; display: flow-root; }
.tow-card__body p { margin: 0 0 20px; font-size: 1.9rem; text-align: left; }

/* The icon module is 97 tall on the original: a 40px glyph in a 57px line box
   with 20px margins above and below. The line box is what makes up the
   difference — an inline-block icon on its own would be 47. */
.tow-visit__arrow {
	margin: 20px;
	text-align: center;
	line-height: 57px;
}

.tow-visit__arrow .tow-infobox__icon {
	fill: var(--tow-maroon);
	height: 40px;
	vertical-align: middle;
}

/* The second heading in this row, same style as the first. */
.tow-visit__ready { margin: 20px 20px 0; }

/* margin-top 10, not 20: this block sits closer to its heading than a default
   module would. */
.tow-visit__close   { margin: 10px 20px 0; text-align: center; }
.tow-visit__close p { margin: 0 0 20px; }

/* The button module is 106 tall: a 48px button with 29px of margin either
   side. Not the default 20. */
/* Measured on the original's fl-node-fm4in02xc17g, NOT symmetrical:
   margin-top 30, margin-right 0, margin-bottom 20, margin-left 20.
   The 0 on the right is load-bearing -- the button is centred inside a
   1180px content box that starts 20px in, so it lands at x=603.76, ten
   pixels LEFT of the row's true centre. Symmetrical 29px margins gave a
   114px module against the original's 106, which was the last 8px of
   row 10. The button itself was already exact at 252.48 x 56. */
.tow-visit__cta { margin: 30px 0 20px 20px; text-align: center; }

/* This card has its own everything: margins of 40/120/20 rather than the
   cards' 20/auto, padding of 40x48 rather than 30x40, and a 10px gap rather
   than 50. It is 960 wide and 495 tall — 40 + 415 + 40. */
/* 80% OF THE CONTAINER, CENTRED -- not a fixed 120px margin. They are the same
   960 at 1440 and nothing alike below it: 848 at 1100, 688 at 900. */
/* DARK, LIKE THE CONTACT PAGE'S -- they are the same card. It inherited
   .tow-card's pale wash, a 20px radius and a shadow, and a geometry diff cannot
   see any of that: #232323 against #f2f2f2, with white text on it. */
.tow-card--location {
	background-color: #232323;
	border-radius: 28px;
	box-shadow: none;
	color: var(--tow-white);
	flex-direction: row;
	align-items: normal;
	width: 80%;
	margin: 40px auto 20px;
	max-width: none;
	padding: 40px 48px;
	gap: 10px;
}

/* 55% AND 45%, AND THE GAP MAKES THEM NOT QUITE THAT. The two add up to the
   full content box, so the 10px gap has to come out of them, and flexbox takes
   it in proportion to their inner widths -- the text's 40px of padding is why
   it gives up 5.28 and the photograph 4.72. That is the whole explanation for
   469.92 / 384.08 at 1440, 408.36 / 333.64 at 1100 and 320.42 / 261.58 at 900.
   Fixed 470 and 384 are right only at 1440. */
.tow-location__photo {
	flex: 0 1 auto;
	width: 45%;
	min-width: 0;
	display: flex;
	line-height: 0;
}

/* The same compounding 90% as row 9's photo: 384 becomes 346 becomes 311. */
.tow-location__photo .tow-photo__content { width: 90%; margin-inline: auto; }
.tow-location__photo img { display: block; width: 90%; height: auto; margin-inline: auto; }
/* The text side is its own flex column with a 10px gap and 40px of padding on
   its right — not a plain block. Its three parts are a 24px/700 title, the
   copy, and the button block. */
.tow-location__text {
	flex: 0 1 auto;
	width: 55%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 40px;
}

.tow-location__text p { margin: 0 0 20px; }
.tow-location__title { font-weight: 700; font-size: 24px; line-height: 1.45; }

/* THE TEXT SIDE HAS THREE FLEX CHILDREN, NOT FOUR — AND THAT WAS A 20px BUG
 * THAT SURVIVED THE HOMEPAGE BEING SIGNED OFF AS EXACT.
 *
 * On the original the two body paragraphs are ONE rich-text module, 185 tall,
 * so the column's 10px gap falls between the title, the copy and the button —
 * three times — not between the paragraphs as well. Written as four separate
 * <p> flex children, an extra 10px gap appeared inside the copy.
 *
 * And the button module carries margin-top 30, which was missing entirely.
 * Together: -30 + 10 = the button landing 20px too high, on the homepage AND
 * on the contact page.
 *
 * WHY NOTHING CAUGHT IT. The card is `align-items: normal`, so both columns
 * stretch to the taller one — the photo on the homepage, the form on contact.
 * The text column therefore has slack at the bottom that absorbs any error
 * inside it. Row 10 measured 1809.47 against 1809.56 with the button 20px out
 * of place, and the contact row measured 849.59 against 849.59 with the same
 * error. A SECTION HEIGHT CANNOT SEE A MISPLACEMENT INSIDE A STRETCHED
 * COLUMN. Measure a column's own children against the original's, not just
 * the row.
 *
 * The wrapper is a flex item, so it establishes its own formatting context and
 * the paragraphs' 20px margins stay inside it: 87 + 20 + 58 + 20 = 185. */
.tow-location__copy { display: flow-root; }
/* The selector has to outrank `.tow-location__text p`, which is 0,1,1 and
   would otherwise keep its `margin: 0 0 20px` no matter how late this rule
   sits. The SECOND time specificity has bitten on this build. */
.tow-location__text .tow-location__cta { margin: 30px 0 20px; }

/* Row 10 on a tablet and a phone. The three step cards turn from a label
   beside its copy into a label above it, and the location card stacks its
   photograph under its text. */
@media (max-width: 992px) {
	.tow-visit { padding: 60px 20px 40px; }
	.tow-visit__title,
	.tow-visit__ready { font-size: 3.4rem; }
	.tow-visit__cta { margin: 30px 0 0; }
	/* The location photograph's compounded 90% becomes a plain 100% here. */
	.tow-location__photo .tow-photo__content,
	.tow-location__photo img { width: 100%; }
	.tow-location__text .tow-location__cta { margin: 30px 0 0; }
}

@media (max-width: 768px) {
	.tow-visit { padding: 30px 20px 40px; }
	.tow-visit__title,
	.tow-visit__ready { font-size: 2.4rem; }
	.tow-visit__intro,
	.tow-visit__close { letter-spacing: 0; }

	.tow-card { flex-direction: column; align-items: center; gap: 0; padding: 30px 20px; }
	.tow-card__label { flex: none; width: 100%; max-width: 100%; }
	.tow-card__body { width: 100%; }
	/* The first card's 30 below becomes 20, like the other two. */
	.tow-visit .tow-module:nth-of-type(3) .tow-card { margin-bottom: 20px; }

	.tow-visit__cta { margin: 10px 0 40px 20px; }

	.tow-card--location {
		flex-direction: column;
		gap: 50px;
		width: 100%;
		margin: 20px 0;
		padding: 40px 25px;
	}

	.tow-location__photo,
	.tow-location__text { flex: none; width: 100%; }
	.tow-location__text { gap: 5px; padding-right: 0; }
	.tow-location__text .tow-location__cta { margin: 10px 0 0 20px; }
}

/* ===========================================================================
 * THE CONTACT PAGE — one row, node rs963pkuw2qt, post 87.
 *
 * Measured on the original at 1440px. Row 849.59 tall on 60px of top padding
 * and 80px of bottom, in the same 1200px container as every other row.
 *
 * The dark card IS the homepage's location card with a form where the photo
 * goes: same 960 width, same 40/48 padding, same 10px gap, same ~470px text
 * column, same copy. So it extends .tow-card--location rather than restating
 * measurements that are already recorded there.
 * ======================================================================== */

.tow-contact {
	padding-top: 60px;
	/* 20px AT THE SIDES, as every Beaver Builder row has. Invisible at 1440,
	   where the 1200 container is narrower than the window anyway; at 1100 its
	   absence put the heading and the card 20px left of the original's. */
	padding-right: 20px;
	padding-left: 20px;
	padding-bottom: 80px;
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

/* 5rem is 50px against this site's 10px root, and 1.1em computes ONCE against
   that 50 and inherits down as a 55px length -- the trap recorded in the
   method doc. Every heading on this site tracks -0.8px. */
.tow-contact__title {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: center;
}

/* 78 tall: two 29px lines plus the paragraph's own 20px bottom margin, which
   is inside the box rather than collapsing out of it. */
.tow-contact__intro {
	margin: 20px 20px 0;
	color: var(--tow-black);
	text-align: center;
}

.tow-contact__intro p { margin: 0 0 20px; }

/* #232323 on a 28px radius, and NO shadow -- .tow-card's box-shadow belongs to
   the pale cards and has to be turned off here, not merely overpainted. */
.tow-card--contact {
	background-color: #232323;
	border-radius: 28px;
	box-shadow: none;
	color: var(--tow-white);
	/* 10% EITHER SIDE, not 120px: 120 at 1440, 106 at 1100, 86 at 900. The
	   homepage card's fixed 120 matched at 1440 and nowhere narrower. */
	margin-right: 10%;
	margin-left: 10%;
}

/* 55 / 45, written as the original writes them. The rendered result is
   469.91 / 384.09 rather than a clean 55% of 864, because a flex item's
   min-width is auto and the form side will not shrink below its content.
   Reproducing the RULE gets that behaviour for free; reproducing the computed
   number would have hard-coded one viewport's answer. */
.tow-card--contact .tow-location__text { flex: 0 1 55%; }

.tow-contact__formside {
	flex: 0 1 45%;
	display: flex;
}

/* THE FORM DOES NOT FILL ITS COLUMN, AND I COULD NOT DERIVE WHY.
 *
 * On the original the form side is 384.09 wide and the form inside it is
 * 359.98, leaving 24.11px of dark card showing on the right. The form module
 * is a flex item at `flex: 0 1 auto` with no width and no margin, so its width
 * is Beaver Builder's intrinsic sizing of Beaver Builder's own markup -- which
 * is exactly the markup this rebuild does not carry across. I could not
 * establish which rule produces the 359.98, and I am not going to pretend I
 * did.
 *
 * So it is PINNED AS MEASURED rather than derived. That is safe at the large
 * tier, where the card is a fixed 960 wide and the 45% side is therefore
 * always 384.09. It is a constant that would have to be re-measured if the
 * card's width ever changed.
 *
 * Left to fill, the fields are 24px wider than the original's -- a visible
 * difference in a side-by-side, not a rounding one. */
/* ...AND NOW IT IS DERIVED. The form is a flex item with no width, so it is
   as wide as its widest line: the "Your message" label (inline-block, 10px
   margin) followed by a text field at its default intrinsic width. That is
   148 + 10 + 202 = 360 with 20px labels, and 133.2 + 10 + 202 = 345.2 on a
   phone, where the labels are 18px -- which is exactly what the original
   measures at both. The pin matched only at the large tier. */
.tow-form { width: auto; }

/* 68 tall for a text field: a 29px label, its 5px bottom margin, and a 34px
   input. The input is 100% wide, which is what pushes it below the
   inline-block label instead of alongside it. */
.tow-form__group { margin: 0 0 10px; }

.tow-form__group label {
	display: inline-block;
	margin: 0 10px 5px 0;
	color: var(--tow-grey);
	/* THE BODY SIZE, NOT A FIXED 20px. 20/29 at desktop and 18/26.1 on a phone,
	   as the page's text is. Fixed, the three labels were 2.9px too tall each on a
	   phone -- the card 8.72 too tall -- and the form 14px too wide. */
	font-weight: 700;
}

.tow-form__group input,
.tow-form__group textarea {
	display: inline-block;
	box-sizing: border-box;
	width: 100%;
	padding: 6px 12px;
	background-color: rgb(252, 252, 252);
	border: 1px solid rgb(230, 230, 230);
	border-radius: 4px;
	color: var(--tow-grey);
	font-family: var(--tow-font-body);
	font-size: 14px;
	line-height: 20px;
	/* The original's fields are Bootstrap .form-control, which eases every change
	   over 0.15s. Nothing on them changes today, so this shows only if a state
	   is ever added -- but then it should ease the same way. */
	transition: all 0.15s ease-in-out;
}

.tow-form__group textarea { height: 130px; resize: vertical; }

/* THE ORIGINAL'S ERRORS ARE display:none AND REVEALED BY BEAVER BUILDER'S OWN
   JAVASCRIPT. Ours are rendered by PHP only when a field actually failed, so
   the default render matches and there is no script to carry across. Same
   size, same colour, same words. */
.tow-form__error {
	display: block;
	margin-top: 2px;
	color: rgb(221, 68, 32);
	font-size: 12px;
	font-weight: 100;
	line-height: 17.4px;
}

.tow-form__error--general { margin: 0 0 10px; }

/* THE CONFIRMATION PANEL (2026-09-22). It stands where the form was, so it has
   to answer the three questions a bold "Message Sent!" left open: did a person
   get it, when will they reply, and what do I do if it cannot wait. */
.tow-form__success {
	margin: 0;
	padding: 34px 30px 30px;
	background-color: var(--tow-white);
	border: 1px solid var(--tow-rule);
	border-radius: 16px;
	/* COLOURS STATED, NOT INHERITED. This panel stands inside the dark contact
	   card, whose text is white -- inherited, the message was white on a pale
	   panel and all but invisible. Caught in a render before anyone saw it. */
	color: var(--tow-text-color);
	text-align: center;
}
.tow-form__successmark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 0 16px;
	background-color: var(--tow-maroon);
	border-radius: 50%;
}
.tow-form__successmark svg { width: 30px; height: 30px; fill: var(--tow-white); }
.tow-form__successtitle {
	margin: 0 0 12px;
	color: var(--tow-maroon);
	font-size: 26px;
	line-height: 1.3;
}
.tow-form__successtext { margin: 0 0 12px; color: var(--tow-text-color); font-size: 18px; line-height: 1.5; }
.tow-form__successtext a { color: var(--tow-maroon); font-weight: 700; }
.tow-form__successcta { margin: 22px 0 0; }

@media (max-width: 599px) {
	.tow-form__success { padding: 26px 20px 24px; }
	.tow-form__successtitle { font-size: 22px; }
	.tow-form__successtext { font-size: 17px; }
}

/* NOT THE SITE'S MAROON PILL. The submit is Beaver Builder's own default
   button, which the editor never restyled: rgb(229,30,14) on a rgb(217,18,2)
   border at a 4px radius, 18px type on a 21.6 line height. 93.91 x 39.59.
   It looks out of place next to every other button on the site and it is
   reproduced exactly as found -- raised at handover, not silently improved. */
.tow-form__submit {
	padding: 8px 24px;
	background-color: rgb(229, 30, 14);
	border: 1px solid rgb(217, 18, 2);
	border-radius: 4px;
	color: var(--tow-white);
	font-family: var(--tow-font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 21.6px;
	cursor: pointer;
}

/* --- THE CONTACT PAGE BELOW 1440. --- */
@media (max-width: 992px) {
	.tow-contact { padding-bottom: 40px; }
	.tow-contact__title { margin: 0 20px 20px 0; font-size: 4rem; }
	.tow-contact .tow-location__text .tow-location__cta { margin-bottom: 0; }
	.tow-contact .tow-location__cta .tow-button { padding-top: 12px; padding-bottom: 12px; font-size: 1.6rem; }
}

/* On a phone the card stacks: text over form, 50 apart, 25px in at the sides;
   the text column tightens to 5px gaps and the button moves 20px in. */
@media (max-width: 768px) {
	.tow-contact { padding-top: 30px; }
	.tow-contact__title { margin-left: 20px; font-size: 3.8rem; text-align: center; }
	.tow-card--contact {
		flex-direction: column;
		gap: 50px;
		margin: 20px 0;
		padding: 40px 25px;
	}
	.tow-card--contact .tow-location__text,
	.tow-contact__formside { flex: none; width: 100%; }
	.tow-card--contact .tow-location__text { gap: 5px; padding-right: 0; }
	.tow-contact .tow-location__text .tow-location__cta { margin: 10px 0 0 20px; }
}

/* ===========================================================================
 * THE SYMPTOM PAGES — one layout, four pages.
 *
 * headaches-tmj, sciatica-relief, sleep-recovery-relief and
 * stress-mental-clarity are the same Beaver Builder design with four sets of
 * copy. Measured on sciatica-relief at 1440.
 *
 *   row 1  hero        600.00
 *   row 2  section A   796.19
 *   row 3  section B   697.19
 *   row 4  faq         629.98
 *   row 5  next step   448.20
 *
 * EVERY COLUMN CONTAINER IS A FLEX COLUMN, matching the original's
 * .fl-col-content. Two consequences that the numbers depend on:
 *   - margins do NOT collapse, so the FAQ's h2 margin-bottom 20 and its first
 *     h3's margin-top 20 really do add to 40;
 *   - a child with `margin-inline: auto` shrink-wraps instead of stretching,
 *     which is the only reason the centred intros are 564.16 and 848.80 wide.
 * ======================================================================== */

/* --- Row 1, the hero. A `fl-row-custom-height` row: the min-height and the
   centring live on the WRAPPER, not the section. 600 tall holding 390 of
   content, so the column starts at y105 -- 60 of padding plus 45 of slack. --- */
.tow-shero {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.tow-shero__wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 600px;
	padding: 60px 20px;
}

.tow-shero__inner {
	display: flex;
	width: 100%;
	max-width: 1200px;
}

/* THE SPLIT IS PER PAGE, and it is not decorative. The right column is empty --
   it exists to keep the heading off the photo -- so its width decides how wide
   the h1 and the intro are, and therefore how many lines they run to.
   sciatica-relief is 70/30; headaches-tmj, sleep-recovery-relief and
   stress-mental-clarity are all 65/35. Building all four at 70 made stress's
   intro one line shorter and its hero 29px short. */
.tow-shero__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tow-shero--70 .tow-shero__col    { width: 70%; }
.tow-shero--70 .tow-shero__spacer { width: 30%; }
.tow-shero--65 .tow-shero__col    { width: 65%; }
.tow-shero--65 .tow-shero__spacer { width: 35%; }

.tow-shero__title {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: left;
}

/* INSURANCE-BILLING'S HERO CARRIES A TEXT SHADOW and the symptom pages' heroes
   do not: 1px 1px 12px at 10% under the heading and the line below it. */
.tow-shero--light .tow-shero__title,
.tow-shero--light .tow-shero__intro { text-shadow: 1px 1px 12px rgba(0, 0, 0, 0.1); }

/* AND HEADACHES-TMJ'S HERO TYPE IS WHITE where the other three symptom pages'
   is black -- its photograph is the dark one. Measured per page, not assumed
   from the template they share. */
.tow-main--headaches-tmj .tow-shero__title,
.tow-main--headaches-tmj .tow-shero__intro { color: var(--tow-white); }

/* A NEGATIVE BOTTOM MARGIN, and it is in the original's layout CSS: -20px.
   With the empty module's +20 top margin below it the two cancel exactly, so
   the font-import module sits flush against the intro. flow-root is what keeps
   the paragraph's own 20px bottom margin INSIDE this box -- 165 tall, not 145. */
.tow-shero__intro {
	display: flow-root;
	margin: 20px 20px -20px;
}

.tow-shero__intro p { margin: 0 0 20px; }

/* --- Rows 2 and 3. Identical but for the row padding. ---
   Three of the four pages give the second row a 10px bottom; sciatica-relief
   alone has none, which is worth exactly 10px of row height and nothing else. */
.tow-sym--first  { padding: 40px 20px 10px; }
.tow-sym--second { padding: 0 20px 10px; }
.tow-sym--second.tow-sym--flush { padding: 0 20px; }

.tow-sym__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

/* 3.8rem is 38px, and this heading takes the site's DEFAULT 1.4 line-height --
   53.2 -- not the 1.1 the hero and the FAQ title use. Two lines, 106.4. */
.tow-sym__title {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

/* THE AUTO INLINE MARGIN IS THE WHOLE POINT. As a flex item this shrink-wraps
   to its own max-content -- 564.16 on row 2, 848.80 on row 3, set by whichever
   paragraph is longest -- instead of stretching to 1200. Wrap it in anything
   and the wrapper becomes the flex item and the behaviour vanishes. */
.tow-sym__intro {
	display: flex;
	flex-direction: column;
	gap: 50px;
	/* THE SHRINK-WRAP IS CAPPED AT 890. On sciatica-relief every intro came in
	   under it, so the cap was invisible and got left out; sleep-recovery-relief
	   and stress-mental-clarity both have one that hits it exactly, and without
	   the cap they ran wide and finished a line short. */
	margin: 20px auto;
	max-width: 890px;
}

.tow-sym__introtext { text-align: center; color: var(--tow-black); }
.tow-sym__introtext p { margin: 0 0 20px; }

/* gap 40 AND space-between are both set on the original, and space-between
   wins: two 45% cards in a 1160 box leave 116px between them, not 40. */
/* align-items: start, NOT the flex default of stretch. The cards carry no
   background, so a stretched empty box looks identical -- and that is exactly
   the shape of container that hid a 20px error in the location card. Match it. */
.tow-sym__cards {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin: 0 0 20px;
	padding: 40px 20px;
	border-radius: 28px;
}

.tow-sym__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 45%;
}

.tow-sym__cardtitle {
	margin: 0;
	color: var(--tow-maroon);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
}

/* The two internal links in these cards are INDISTINGUISHABLE from the copy
   on the original -- black, weight 400, no underline. Body links elsewhere
   on the site genuinely are maroon (the homepage's service list), so this is
   a local override, not a change to the site default. */
.tow-sym__cardbody { color: var(--tow-black); text-align: left; }
.tow-sym__cardbody a { color: inherit; }
.tow-sym__cardbody p { margin: 0 0 20px; }

/* --- Row 4, the FAQ. --- */
.tow-faq {
	padding: 50px 20px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.tow-faq__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* 92 / 8, and the wide column carries 40px of padding on its right. That is
   what makes the headings 1024 wide rather than 1064: 1104 - 40 of column
   padding - 40 of module margins. */
.tow-faq__col {
	display: flex;
	flex-direction: column;
	width: 92%;
	padding-right: 40px;
}

.tow-faq__spacer { width: 8%; }

/* THIS heading is 1.1em where rows 2 and 3 use 1.4 -- 41.8 against 53.2 on the
   same 38px type. Same tag, same size, different line-height, one row apart. */
.tow-faq__title {
	margin: 20px;
	color: var(--tow-black);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-faq__q {
	margin: 0 20px 8px;
	color: var(--tow-maroon);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
}

/* Only the FIRST question carries a top margin. In a flex column it does not
   collapse into the title's 20px bottom margin, so the two add to 40. */
.tow-faq__q:first-of-type { margin-top: 20px; }

/* THE ANSWER KEEPS ITS PARAGRAPH'S 20px BOTTOM MARGIN. Each answer is 78 tall
   on the original -- two 29px lines plus that margin -- and it stays inside
   the box because the box is a flex item, which establishes its own
   formatting context. Setting it to 0 made every answer 58 and the row 60
   short across three of them. */
.tow-faq__a { margin: 0 20px 12px; color: var(--tow-black); }
.tow-faq__a p { margin: 0 0 20px; }

/* --- Row 5, "Your Next Step". White on a black texture. --- */
.tow-next {
	padding: 60px 20px 40px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	color: var(--tow-white);
}

.tow-next__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-next__title {
	margin: 20px 20px 12px;
	color: var(--tow-white);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

/* Shrink-wrapped to 735 by the same auto inline margin as the section intros. */
.tow-next__box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	/* Same again, at 850. headaches-tmj and stress-mental-clarity both hit it. */
	margin: 0 auto 20px;
	max-width: 850px;
}

.tow-next__intro { text-align: center; }
.tow-next__intro p { margin: 0 0 20px; }

/* The button module's own 10px bottom margin — 64 against the button's 54. */
.tow-next__btn { margin-bottom: 10px; text-align: center; }

/* Same again: 49 tall, being one 29px line plus the paragraph's 20px margin. */
.tow-next__note { margin-top: 12px; text-align: center; }
.tow-next__note p { margin: 0 0 20px; }

/* A THIRD BUTTON STYLE, and it is nothing like the other two. Blue on a 2px
   BLACK border at a 50px radius, 16px type UPPERCASED, and a label colour of
   rgb(235,234,234) — neither the header's #fff nor the body buttons'
   rgb(250,250,250). 360.71 x 54: 18 of line-height, 32 of padding, 4 of
   border. */
.tow-button--path {
	/* WRAPS when its column is narrower than its label, as Beaver Builder's
	   buttons do: on a phone insurance-billing's 13px label takes two lines in
	   350px. Kept on one line it ran 70px off the side of the page. */
	white-space: normal;
	padding: 16px 40px;
	background: var(--tow-blue);
	border: 2px solid var(--tow-black);
	border-radius: 50px;
	color: rgb(235, 234, 234);
	font-size: 16px;
	/* 600, not the 400 every other button uses, and 1.6px of tracking on top.
	   Between them they are 46px of the button's 360.71 width -- the label alone
	   is 276.71 wide where an untracked 400 gives 230.64. */
	font-weight: 600;
	/* 0.1em, as the original writes it -- 1.6px at 16px. Written as 1.6px it
	   stayed 1.6 when a phone layout drops the label to 12px, where the original
	   tracks at 1.2: the 12px button was 360.72 wide against 291.53. */
	letter-spacing: 0.1em;
	line-height: 18px;
	text-transform: uppercase;
}

/* EVERY BUTTON'S LINE-HEIGHT BECOMES 1.2 AT 991 -- Beaver Builder's global
   `a.fl-button { line-height: 1.2 }`, one pixel inside the 992 tier. It is what
   makes the 54px path button 55.19 on a tablet or phone. */
@media (max-width: 991px) {
	.tow-button { line-height: 1.2; }
}
/* THE BUTTON IS RED, NOT BLUE. Every original page that uses this button sets
   a background-image over the blue background-color, in its own layout CSS:
   linear-gradient(90deg, #FF1A1A, #8B0000) at rest, #E01515 -> #7A0000 on
   hover. A background-image paints over the colour, and at background-size
   auto from 0 0 it covers the whole pill -- so the blue never shows. It was
   built blue for eight pages because only background-color was measured, and
   no geometry check can see a colour: the gradient changes nothing's size.
   Verified present on all eight originals: insurance-billing, patient-reviews,
   what-to-expect, about-morton-chiropractor, cold-laser-therapy,
   shockwave-therapy, acupuncture-morton, and all four symptom pages. Not on the
   homepage, which does not use this class. */
.tow-button--path {
	background-image: linear-gradient(90deg, #ff1a1a 0%, #8b0000 100%);
	/* AND A SHADOW, on every page's button, from a rule written ".fl-node-X a"
	   in each page's layout CSS: 0 2px 8px rgba(0,0,0,.4) with a faint inset
	   highlight along the top. A first scan looked only for selectors
	   containing "a.fl-button", found none, and wrongly concluded there was no
	   shadow -- the rule never names the class. Present on all fourteen
	   originals that use this button; absent on the homepage. */
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

/* HOVERED, ONLY THE GRADIENT AND THE LABEL MOVE. The shared button rule takes
   every button to gold and black, and this one keeps its blue ground and black
   border and goes to white text over a darker red. */
.tow-button--path:hover,
.tow-button--path:focus {
	background-color: var(--tow-blue);
	background-image: linear-gradient(90deg, #e01515 0%, #7a0000 100%);
	border-color: var(--tow-black);
	color: rgb(255, 255, 255);
}

/* ---------------------------------------------------------------------------
 * THE SYMPTOM PAGES BELOW 1440.
 *
 * Scoped to .tow-main--symptom: the hero, FAQ and next-step components appear
 * on other pages whose phone layouts differ. The four pages share every rule
 * here except a handful -- section paddings, three heading margins, one button
 * size -- which follow per page, by slug, AFTER the shared rules of each tier so
 * they win.
 *
 * Measured against sciatica-relief with migration/measure_responsive.mjs, and
 * the per-page values read off all four pages' layout CSS with node ids
 * stripped so the rules could be lined up.
 * ------------------------------------------------------------------------ */

@media (max-width: 1200px) {
	.tow-main .tow-faq { padding-bottom: 60px; }
}

@media (max-width: 992px) {
	/* The hero keeps a 485 minimum and centres its content in it. The empty
	   right-hand column goes; the text column is full width with 20 below it. */
	.tow-main .tow-shero { background-position: 0 50%; }
	.tow-main .tow-shero__wrap { min-height: 485px; padding-bottom: 0; }
	.tow-main .tow-shero__col { width: 100%; margin-bottom: 20px; }
	.tow-main .tow-shero__spacer { display: none; }
	.tow-main .tow-shero__title { margin: 0 20px 20px 0; font-size: 4rem; }
	.tow-main .tow-shero__intro { margin-top: 0; margin-left: 0; }

	.tow-main--symptom .tow-sym--first { padding: 30px 20px 0; }
	.tow-main--symptom .tow-sym--second,
	.tow-main--symptom .tow-sym--second.tow-sym--flush { padding: 0 20px; }
	.tow-main--symptom .tow-sym__title { font-size: 3.4rem; }
	.tow-main--symptom .tow-sym--second .tow-sym__title { margin-top: 0; }
	/* Two 50% cards and a 40px gap in 860: flex shrinks each to 410. */
	.tow-main--symptom .tow-sym__cards { padding-left: 0; padding-right: 0; }
	.tow-main--symptom .tow-sym__card { width: 50%; }

	.tow-main .tow-faq { padding: 20px 20px 30px; }
	.tow-main .tow-faq__col { width: 100%; }
	.tow-main .tow-faq__spacer { display: none; }
	.tow-main .tow-faq__title { margin: 40px 20px 0; font-size: 3rem; }

	.tow-main--symptom .tow-next { padding: 40px 40px 30px; }
	.tow-main--symptom .tow-next__title { font-size: 3.4rem; }
}

@media (max-width: 992px) {
	.tow-main--headaches-tmj .tow-sym--first,
	.tow-main--sleep-recovery-relief .tow-sym--first,
	.tow-main--stress-mental-clarity .tow-sym--first { padding: 60px 30px 0; }
	.tow-main--headaches-tmj .tow-sym--second,
	.tow-main--sleep-recovery-relief .tow-sym--second,
	.tow-main--stress-mental-clarity .tow-sym--second { padding: 0 30px; }
	/* sciatica-relief alone pulls its second intro up 20. Its phone rule says
	   +20, but the tablet rule's selector is more specific and wins there too. */
	.tow-main--sciatica-relief .tow-sym--second .tow-sym__introtext { margin-bottom: -20px; }
	.tow-main--sciatica-relief .tow-faq,
	.tow-main--what-to-expect .tow-faq { padding: 20px 40px 30px; }
}

@media (max-width: 768px) {
	.tow-main .tow-shero__wrap { padding: 50px 0 0; }
	.tow-main .tow-shero__title { margin-left: 20px; font-size: 3.8rem; text-align: center; }
	.tow-main .tow-shero__intro { margin-left: 20px; text-align: center; }

	.tow-main--symptom .tow-sym--first { padding: 30px 20px 10px; }
	.tow-main--symptom .tow-sym--second,
	.tow-main--symptom .tow-sym--second.tow-sym--flush { padding: 0 20px 10px; }
	.tow-main--symptom .tow-sym__title { margin-bottom: 0; font-size: 2.4rem; }
	.tow-main--symptom .tow-sym--first .tow-sym__introtext { margin-bottom: -20px; }
	.tow-main--symptom .tow-sym__cards { flex-direction: column; gap: 50px; padding-left: 10px; padding-right: 10px; }
	.tow-main--symptom .tow-sym__card { width: 100%; }
	.tow-main--symptom .tow-sym__cardtitle { font-size: 2rem; }
	.tow-main--symptom .tow-sym__card:last-child .tow-sym__cardbody { margin-bottom: -20px; }

	.tow-main .tow-faq { padding: 30px 20px 20px; }
	.tow-main .tow-faq__col { padding-right: 0; }
	.tow-main .tow-faq__title { margin: 20px 20px 30px; font-size: 2.4rem; text-align: center; }
	.tow-main .tow-faq__q { font-size: 2rem; }

	.tow-main--symptom .tow-next { padding: 40px 20px 25px; }
	.tow-main--symptom .tow-next__title { font-size: 2.4rem; }
	.tow-main--symptom .tow-next .tow-button--path { font-size: 12px; }
	.tow-main--symptom .tow-next__note { font-size: 1.6rem; }
}

@media (max-width: 768px) {
	.tow-main--headaches-tmj .tow-sym--second .tow-sym__cardtitle,
	.tow-main--sleep-recovery-relief .tow-sym--second .tow-sym__cardtitle,
	.tow-main--stress-mental-clarity .tow-sym--second .tow-sym__cardtitle { margin-top: -20px; }
	.tow-main--sciatica-relief .tow-faq { padding: 30px 12px 20px; }
	.tow-main--headaches-tmj .tow-next__title { margin-bottom: 0; }
	.tow-main--stress-mental-clarity .tow-next__title { margin-bottom: 20px; }
	.tow-main--headaches-tmj .tow-next__intro { margin-top: 20px; }
	.tow-main--sleep-recovery-relief .tow-next__intro { margin-top: 10px; }
	.tow-main--headaches-tmj .tow-next .tow-button--path { font-size: 14px; }
}


/* ===========================================================================
 * BOOK APPOINTMENT — one row, node lwaohqz9j67k, and it is an iframe.
 *
 * Measured on the original at 1440: the row is 1000 tall on a min-height of
 * 1000, padded 60/20, on #f7f9fc. The iframe is 1440 x 1000 and absolutely
 * positioned 30px down, so the module holding it is 1160 x 0 -- out of flow,
 * contributing only its own 20px margins.
 *
 * THE 30px OVERHANG OVER THE FOOTER IS THE ORIGINAL'S. `top: 30px` and
 * `height: 100%` of a 1000px row together put the bottom edge 30px past the
 * row. Reproduced, not corrected.
 * ======================================================================== */

.tow-book {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 1000px;
	padding: 60px 20px;
	background-color: #f7f9fc;
	/* The iframe's containing block. Without this it would position against the
	   viewport and follow the reader down the page. */
	position: relative;
}

.tow-book__inner {
	width: 100%;
	max-width: 1200px;
}

.tow-book__module { margin: 20px; }

#sked-portal {
	position: absolute;
	top: 30px;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
}

/* ===========================================================================
 * LEGAL & PRIVACY POLICY — two rows, nodes y58nspr6fjo4 and t1n0he7rv4qp.
 *
 * Measured on the original at 1440: title row 253.00, body row 7205.51.
 *
 * The column is a FLEX COLUMN and every module is a direct child with
 * `margin: 20px`. Flex containers do not collapse margins, so consecutive
 * modules sit 40 apart rather than 20 — across 52 modules that is roughly a
 * thousand pixels of page height, and it is the single number this page
 * depends on.
 * ======================================================================== */

.tow-legal { padding: 20px; }

.tow-legal__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-legal__inner > * { margin: 20px; }

/* 6rem is 60px against the 10px root, on the site's default 1.4 — 84 tall. */
.tow-legal__title {
	color: var(--tow-black);
	font-size: 6rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-legal__meta { color: var(--tow-grey); text-align: center; }

/* THE ONE LINK ON THIS PAGE IS THE BROWSER'S OWN BLUE on the original -- a bare
   URL in the pasted copy that nothing ever styled. Ours painted it maroon with
   every other link on the site. */
.tow-legal__inner a { color: rgb(0, 0, 255); }

/* And red when hovered -- the browser's own visited/hover pair, left alone. */
.tow-legal__inner a:hover,
.tow-legal__inner a:focus { color: rgb(255, 0, 0); }
.tow-legal__meta p { margin: 0 0 20px; }

.tow-legal__h2 {
	color: var(--tow-black);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: left;
}

/* BLACK, not the maroon the symptom pages give their h3s. Same tag, same size,
   different colour on a different page. */
.tow-legal__h3 {
	color: var(--tow-black);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
}

/* The body copy here is the inherited grey, rgb(117,117,117) — NOT the black
   the other pages set. */
.tow-legal__text { color: var(--tow-grey); text-align: left; }
.tow-legal__text p { margin: 0 0 20px; }
/* 10px below a list, not the 20 a paragraph gets, and 20px of indent rather
   than the browser's 40. That margin is worth exactly 10px per list and this
   page has six of them -- the whole of a 60px overshoot. */
.tow-legal__text ul { margin: 0 0 10px; padding: 0 0 0 20px; }
.tow-legal__text li { margin: 0; }

/* --- THE PRIVACY POLICY BELOW 1440. ---
   The section headings set no size of their own on the original, so at 992
   they take Beaver Builder's global h2, 2.4rem. On a phone every one is 30px,
   and three of them -- sections 1, 2 and 6, and only those -- also set a
   line-height of 1. The title is 40px on a line-height of 1. */
@media (max-width: 992px) {
	.tow-legal__h2 { font-size: 2.4rem; }
}

@media (max-width: 768px) {
	.tow-legal { padding-right: 0; padding-left: 0; }
	.tow-legal__title { font-size: 40px; line-height: 1; }
	.tow-legal__h2 { font-size: 30px; }
	.tow-legal--body .tow-legal__h2:nth-of-type(1),
	.tow-legal--body .tow-legal__h2:nth-of-type(2),
	.tow-legal--body .tow-legal__h2:nth-of-type(6) { line-height: 1; }
}

/* ===========================================================================
 * THE ARTICLES LISTING at /articles/ — home.php, node qhal1u7fspgz.
 *
 * Measured on the original at 1440: row 2901.88 on padding 40/20/20, in a
 * 1300px container rather than the 1200 the rest of the site uses.
 *
 *   h1     x90 y170.13, 1260 x 55
 *   grid   x175 y285.13, 1090 x 2560.88 — three 350px columns, 20px gutters
 *   card   350 x 620.22
 *   pager  x90 y2846, 1260 x 126
 *
 * THE FIRST READING OF THIS PAGE SAID TWO COLUMNS AT 720 WIDE, and it was a
 * perfectly coherent answer. Beaver Builder's post-grid script had not
 * finished laying out. Re-read a scripted layout after it settles.
 * ======================================================================== */

.tow-articles { padding: 40px 20px 20px; }

/* 1300, not the site's usual 1200. */
.tow-articles__inner {
	display: flex;
	flex-direction: column;
	max-width: 1300px;
	margin-inline: auto;
}

.tow-articles__title {
	margin: 20px 20px 40px;
	color: var(--tow-black);
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-articles__module { margin: 20px; }

/* EVERY CARD IS THE HEIGHT OF THE TALLEST ON THE PAGE, not of its own row.
   The original does that in JavaScript -- its text blocks run from 360 to 428
   and every card renders 620.22. `grid-auto-rows: 1fr` is the CSS equivalent:
   all auto rows take the height of the largest, so the tallest card sets every
   card, with no script.

   The grid shrink-wraps to its three 350px columns (1090) and centres itself
   in the 1260 content box -- 85px either side. */
.tow-articles__grid {
	display: grid;
	grid-template-columns: repeat(3, 350px);
	grid-auto-rows: 1fr;
	/* COLUMN GAP ONLY. The row spacing is a 20px bottom MARGIN on each card,
	   including the last row -- which is why the original's grid is 2560.88 and
	   not 2540.88. A row-gap would have left the final row flush and the block
	   20px short. The margin sits inside the 1fr track, so the track is 640.22
	   and the card stretches to 620.22 inside it. */
	column-gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* AS MANY 350px COLUMNS AS FIT, CENTRED -- which is what Beaver Builder's post
   grid does with its fixed 350px cards: three at 1440, two at 1100, 900 and
   768, one on a phone. `repeat(3, 350px)` was right only at desktop and ran
   off the page below it. auto-fill needs a definite width to count against,
   so the grid now spans its box and centres its tracks instead of
   shrink-wrapping to them; at 1440 the result is identical, 85px either side. */
.tow-articles__grid {
	grid-template-columns: repeat(auto-fill, 350px);
	/* SAFE centre: when the 350px column is wider than the phone (371-389) the
	   original's grid is a block with auto margins, which stop at zero and leave
	   it flush left, 21px in. Plain `center` split the overflow both ways and put
	   every card 7.5px left at 375. */
	justify-content: safe center;
}

.tow-card-post {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	margin-bottom: 20px;
	background-color: #f2f2f2;
	border: 1px solid rgb(230, 230, 230);
	border-radius: 15px;
}

/* THE IMAGE'S HEIGHT COMES FROM ITS width/height ATTRIBUTES, not from the
   loaded file: 348 wide at 300x164 is 190.23 whether or not it decodes. Do not
   replace this with a fixed height -- the aspect ratio is per image. */
/* The image is display:block, so it makes no line box and needs no line-height
   of its own: inherit what the original inherits (29px, 26.1 on a phone) and
   centre as it does, so the computed style matches and not only the rectangle. */
.tow-card-post__image { text-align: center; }
.tow-card-post__image img { display: block; width: 100%; height: auto; }

.tow-card-post__text {
	padding: 30px;
	color: var(--tow-grey);
	font-size: 14px;
	line-height: 22px;
	text-align: center;
}

/* 24px on a 24px line-height -- tight, and it is what makes a three-line title
   72 rather than 100. The heading is black; the link inside it is maroon. */
.tow-card-post__title {
	margin: 0 0 10px;
	color: var(--tow-black);
	font-size: 24px;
	font-weight: 700;
	line-height: 24px;
	/* -0.8px, measured on the original's card titles at every width. It was
	   `normal` here, and a title that fits in three lines at -0.8 takes four
	   without it -- which the post-order difference on this page had hidden. */
	letter-spacing: -0.8px;
}

.tow-card-post__title a { color: var(--tow-maroon); }

.tow-card-post__meta {
	padding: 0 0 10px;
	color: #3d3d3d;
	font-size: 14px;
	line-height: 22px;
}

.tow-card-post__content {
	color: var(--tow-black);
	font-size: 16px;
	line-height: 22px;
}

.tow-card-post__content p { margin: 0 0 20px; }

.tow-card-post__more {
	display: inline-block;
	margin-top: 10px;
	color: var(--tow-black);
}

/* --- Pagination. The numbers are inline-blocks separated by real whitespace,
   which is 5.6px at 20px type -- the same side-bearing arithmetic as the
   button icons. --- */
.tow-pagination { padding: 40px 0; }

.tow-pagination ul {
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.tow-pagination li { display: inline-block; }

/* SCOPED TO THE ITEMS, because the <ul> ALSO carries .page-numbers. Written as
   `.tow-pagination .page-numbers` it styled the list itself as well: a bordered
   238x58 box with 5px below it, which made the pager 143 tall against 126. The
   list and its links sharing a class name is WordPress's markup, not a mistake
   in ours. */
.tow-pagination li > .page-numbers {
	display: inline-block;
	margin-bottom: 5px;
	padding: 5px 10px;
	border: 1px solid rgb(230, 230, 230);
	color: var(--tow-black);
	/* THE PAGE'S TEXT SIZE, inherited: 20/29 at desktop, 18/26.1 on a phone.
	   Fixed at 20/29 the pager was 126 tall on a phone against 123.09. */
	text-align: center;
}

.tow-pagination li > .current { background-color: rgb(245, 245, 245); }

/* --- THE ARTICLES LISTING BELOW 1440. --- */
@media (max-width: 992px) {
	.tow-articles__title { margin-top: 0; margin-left: 0; font-size: 4rem; }
}

@media (max-width: 768px) {
	.tow-articles { padding-right: 0; padding-left: 0; }
	.tow-articles__title { margin: 0 20px 20px; font-size: 3.8rem; text-align: center; }
}

/* The post grid's own rule: below 370 a card fills the column. */
@media screen and (max-width: 370px) {
	.tow-articles__grid { grid-template-columns: 100%; }
}

/* ===========================================================================
 * A SINGLE ARTICLE — single.php. 97 of them.
 *
 * THE POSTS STYLE THEMSELVES. Each one's post_content carries its own <style>
 * block and an .itv-aeo-container wrapper, including its own responsive rules
 * at 1199, 992 and 768. Nothing here should set type, colour or spacing inside
 * the article — this is the chrome and only the chrome.
 *
 * Measured on the original at 1440: header 110.13, content row 17165.91 on
 * 20px padding in a 1200 container with the article at 1160, an EMPTY 41px
 * spacer row, then the footer.
 * ======================================================================== */

.tow-post__row { padding: 20px; }

.tow-post__inner {
	max-width: 1200px;
	margin-inline: auto;
}

/* THE CLEARFIX, NOT flow-root, AND THE DIFFERENCE IS 20px.
 *
 * Beaver Builder wraps every module in the classic
 * `::before, ::after { content: " "; display: table }` pair. Both do the same
 * containment job as flow-root -- but the ::before is a table box holding a
 * space, and it RENDERS: on the original it is 20px tall, sitting between the
 * module's top edge and the article. flow-root contains the margins and
 * occupies nothing, which left this page 20px short with all 128 of the
 * article's own blocks already matching to the pixel.
 *
 * Reproduced as the same construct rather than padded to fit, so the browser
 * arrives at the 20 the same way the original's does. */
.tow-post__module {
	margin: 20px;
}

.tow-post__module::before,
.tow-post__module::after {
	content: " ";
	display: table;
}

.tow-post__module::after { clear: both; }

/* AN EMPTY ROW, REPRODUCED. Beaver Builder leaves one between the article and
   the footer: 20px of padding, a 1px column, 20px more. 41px of real page. */
.tow-post__spacer { padding: 20px; }
.tow-post__spacerinner { height: 1px; }

/* THE ARTICLES' OWN CSS IS UNSCOPED, so heading defaults must be as strong as
   the original's. Ten articles (the systems-biology batch) ship rules such as
   `h2 { font-size: 50px }` with no wrapper. On the original the page builder's
   global rules are written `.fl-builder-content h2` -- one class stronger -- so
   they win and those headings are 38px Lexend. Ours were plain `h2`, lost to
   the article's rule, and came out 50px Bebas. Same selectors' strength here,
   loaded before the article's <style>, so the 87 articles that scope their own
   rules (`.itv-aeo-container h2`) still win exactly as they do on the original. */
.tow-post__module h1, .tow-post__module h1 a, .tow-post__module h1 span,
.tow-post__module h2, .tow-post__module h2 a, .tow-post__module h2 span,
.tow-post__module h3, .tow-post__module h3 a, .tow-post__module h3 span,
.tow-post__module h4, .tow-post__module h4 a, .tow-post__module h4 span,
.tow-post__module h5, .tow-post__module h5 a, .tow-post__module h5 span,
.tow-post__module h6, .tow-post__module h6 a, .tow-post__module h6 span { color: rgb(0, 0, 0); }
.tow-post__module h1, .tow-post__module h2, .tow-post__module h3,
.tow-post__module h4, .tow-post__module h5, .tow-post__module h6 { font-family: Lexend, sans-serif; font-weight: 700; letter-spacing: -0.8px; }
.tow-post__module h1 { font-size: 5rem; }
.tow-post__module h2 { font-size: 3.8rem; }
.tow-post__module h3 { font-size: 2.2rem; }
@media (max-width: 992px) {
	.tow-post__module h1 { font-size: 2.8rem; }
	.tow-post__module h2 { font-size: 2.4rem; }
}

/* THE ARTICLE'S WRAPPER CARRIES THE SITE'S TEXT SETTINGS, as the page builder's
   `.fl-builder-content:not(.fl-builder-empty)` does on the original: black,
   Lexend, 400, 20px (18 at 768), letter-spacing 0 below 1200. Being on a box
   between <body> and the article, they stop an article's `body { font-weight:
   300 }` from reaching its paragraphs -- which on the original therefore render
   at 400, and on ours rendered at 300, one line shorter wherever a line was near
   full. Rules the article writes on its own elements still win, as they should. */
.tow-post {
	color: #000000;
	font-family: Lexend, sans-serif;
	font-weight: 400;
	font-size: 20px;
}
@media (max-width: 1200px) { .tow-post { letter-spacing: 0px; } }
@media (max-width: 768px)  { .tow-post { font-size: 18px; } }

/* LISTS IN AN ARTICLE START FROM THE OLD THEME'S RESET, not the browser's:
   Bootstrap 5's `padding-left: 2rem` (20px here) and Bootstrap 3's
   `margin-bottom: 10px`, both loaded on the original. With the browser's 40px
   indent a list's text was 20px narrower and wrapped a line sooner. The
   wrapper is inside :where(), so an article's own list rules still win. */
/* :is(), not :where(), on the list itself: the original's reset is a plain
   `ul, ol` rule with an element's weight, and ours needs that weight too -- at
   zero weight our own site-wide list rule beat it and the contents box's list
   lost its 10px, 2px short with its borders. */
:where(.tow-post__module) :is(ul, ol) { margin-top: 0; margin-bottom: 10px; padding-left: 2rem; }

/* A DIVIDER IS THE OLD THEME'S: no height, a single 1px #eee top line, 20px above
   and below (Bootstrap 3), at Bootstrap 5's 25% opacity. The browser's own <hr>
   is a 2px inset line -- 1px taller and a different grey. :where() so an article's
   `.tow-article hr { ... }` still wins, as it does on the original. */
:where(.tow-post__module) hr {
	box-sizing: content-box;
	height: 0;
	margin: 20px 0;
	border: 0;
	border-top: 1px solid #eee;
	color: inherit;
	opacity: 0.25;
}

/* EVERY PARAGRAPH IN AN ARTICLE KEEPS 20px BELOW IT, whatever the article says.
   The original's global CSS on every page ends `p { margin-bottom: 20px
   !important }`, so an article's own `.tow-direct-answer p:last-child {
   margin-bottom: 0 }` loses and its answer box is 20px taller -- which is why
   "Last Updated" sat 20px high on ours in about twenty articles. Wrapped in
   :where() so it keeps the original's plain `p` specificity: an article's own
   !important rule with a class (`.last-updated { margin-bottom: 100px
   !important }`) still beats it, exactly as on the original. */
:where(.tow-post__module) p { margin-bottom: 20px !important; }

/* On a phone the article module loses its side margins: at 390 the original's
   h1 starts 20px in and is 350 wide -- the row's padding only. */
@media (max-width: 768px) {
	.tow-post__module { margin-right: 0; margin-left: 0; }
}

/* ===========================================================================
 * WHAT TO EXPECT — four content rows.
 *
 * hero 562.92, steps 1281.16, faq 845.78, cta 434.19.
 *
 * The FAQ row is identical in shape to the symptom pages' -- 92/8 columns, a
 * 40px right padding on the wide one, a 1.1em heading, the same 20/8/12 rhythm
 * -- so it reuses .tow-faq outright rather than restating any of it.
 * ======================================================================== */

.tow-wte-hero {
	min-height: 400px;
	padding: 40px 20px 0;
	background-color: #f2f2f2;
}

.tow-wte-hero__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* 738 / 462. THE TEXT COLUMN IS BOTTOM-ALIGNED -- justify-content: flex-end --
   so its block sits against the foot of the photo beside it rather than the
   top. That is what puts the h1 at y196.9 in a column that starts at 40. */
/* 80px OF BOTTOM PADDING ON THE COLUMN, and it is the whole reason the heading
   sits where it does. With justify-content: flex-end the block sits against
   the foot of the column's CONTENT box, which that padding lifts 80px off the
   floor -- h1 at y196.92 rather than 276.93.
 *
 * NOTHING IN THE ROW HEIGHT COULD SHOW THIS. The photo column is the taller of
 * the two and sets the row, so all six rows on this page measured within
 * 0.02px with the heading 80px out of place. The same shape of error as the
 * location card's button. Diff the column's own children. */
.tow-wte-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 61.5%;
	padding-bottom: 80px;
}

.tow-wte-hero__photo {
	width: 38.5%;
	/* BOTTOM-ALIGNED LIKE THE TEXT COLUMN: the row's column group aligns both to
	   the foot. At 1440 the photo column is the taller and nothing moves; at 1100
	   the text is taller and the photo sits 11.3px down, against the foot. */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* THE 20px MODULE MARGIN IS PADDING ON THE COLUMN, not a margin on the image.
   As a margin the image still computed `width: 100%` of the full 462 column
   and rendered 462 x 550.6 against the original's 422 x 502.9 -- a percentage
   width resolves against the containing block, which a sibling margin does not
   shrink. Padding the column moves the containing block instead.

   line-height: 0 so the inline image does not gain a line box taller than
   itself -- the same trap as every other photo module on this site. */
.tow-wte-hero__photo {
	box-sizing: border-box;
	padding: 20px 20px 0;
	line-height: 0;
}

.tow-wte-hero__photo figure { margin: 0; }
.tow-wte-hero__photo img { display: block; width: 100%; height: auto; }

.tow-wte-hero__title {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: left;
}

/* The same negative bottom margin as the symptom heroes: -20 against the empty
   module's +20, so the two cancel exactly. */
.tow-wte-hero__intro {
	display: flow-root;
	margin: 20px 20px -20px;
	color: var(--tow-black);
}

.tow-wte-hero__intro p { margin: 0 0 20px; }

/* --- Row 2, the three-step path. --- */
.tow-wte-steps { padding: 40px 20px 10px; }

.tow-wte-steps__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

/* 750 wide, centred, a flex column on a 20px gap. */
.tow-wte-steps__lead {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 750px;
	margin: 20px auto;
}

.tow-wte-steps__h2 {
	margin: 0;
	color: var(--tow-black);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

/* 80 above and 20 below on the second heading only. */
.tow-wte-steps__h2--second { margin: 80px 0 20px; }

.tow-wte-steps__text { color: var(--tow-black); text-align: center; }
.tow-wte-steps__text p { margin: 0 0 20px; }

/* A NEGATIVE TOP MARGIN THAT CANCELS THE COLUMN'S GAP. Three of these blocks
   carry margin-top: -20 against the 20px flex gap above them, so they sit
   flush against the block before. Written as "no gap" instead, the row is 60
   short across the three. */
.tow-wte-steps__lead > .tow-wte-steps__text + .tow-wte-steps__text,
.tow-wte-steps__lead > .tow-wte-steps__h2--second + .tow-wte-steps__text { margin-top: -20px; }

.tow-wte-steps__reject { color: var(--tow-maroon); }

.tow-wte-steps__cards {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 40px;
	margin: 0 0 20px;
	padding: 40px 20px;
	border-radius: 28px;
}

/* Three 360s and two 40px gaps make exactly 1160, so `flex: 1` gives each card
   360 and space-between has nothing left to distribute. A PERCENTAGE would
   resolve against the 1160 CONTENT box and give 348 -- the box has 20px of
   side padding, so 30% of the padding box is not 30% of the row. */
.tow-wte-step {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.tow-wte-step__title {
	margin: 0;
	color: var(--tow-maroon);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
}

/* THE STEP BADGE IS A TABLE-CELL, not an inline-block. That is what makes it
   shrink to its text and sit on its own line above the name without a float or
   a wrapper: 94.58 x 38.8 on 4px/15px of padding. */
.tow-wte-step__badge {
	display: table-cell;
	padding: 4px 15px;
	background-color: rgb(151, 40, 27);
	border-radius: 10px;
	color: var(--tow-white);
}

.tow-wte-step__name {
	display: block;
	padding: 10px 0 0;
	color: var(--tow-maroon);
}

.tow-wte-step__body { color: var(--tow-black); text-align: left; }
.tow-wte-step__body p { margin: 0 0 20px; }

/* --- Row 4, "Start Your Care Path". --- */
.tow-wte-cta {
	padding: 60px 20px 40px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	color: var(--tow-white);
}

.tow-wte-cta__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-wte-cta__title {
	margin: 20px;
	color: var(--tow-white);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

/* 850 EXACTLY, not a shrink-to-fit capped at 850. The original's box is 1200
   less 175 either side and its copy happens to exceed 850, so the cap binds.
   Ours would shrink-wrap to whatever the sentence measures -- a different
   number for different words -- so the width is stated outright. */
.tow-wte-cta__box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 850px;
	max-width: 100%;
	margin: 0 auto 20px;
}

/* 20 ABOVE AND 10 BELOW, not 0 and 30. Both add to the same 84, which is why
   the note under it and the row's height always matched -- and why the button
   sat 20px high at every width, desktop included, with nothing to show it
   until each element was compared on its own. */
.tow-wte-cta__btn { margin: 20px 0 10px; text-align: center; }

.tow-wte-cta__note { margin-top: 20px; text-align: center; }
.tow-wte-cta__note p { margin: 0 0 20px; }

/* --- WHAT TO EXPECT BELOW 1440. --- */
@media (max-width: 992px) {
	.tow-wte-hero { min-height: 485px; padding-bottom: 0; }
	.tow-wte-hero__inner { flex-wrap: wrap; }
	.tow-wte-hero__text { width: 100%; margin-bottom: 20px; padding-bottom: 0; }
	.tow-wte-hero__title { margin: 0 20px 20px 0; font-size: 4rem; text-align: center; }
	.tow-wte-hero__intro { margin: 0 20px -30px 0; text-align: center; }
	/* The photo stacks under the text; its box and the picture are each 70%. */
	.tow-wte-hero__photo { width: 100%; padding-top: 0; }
	.tow-wte-hero__photo img { width: 49%; margin-inline: auto; }

	.tow-wte-steps { padding: 60px 30px 0; }
	.tow-wte-steps__h2 { font-size: 3.4rem; }
	.tow-wte-steps__cards { padding-left: 0; padding-right: 0; }

	.tow-wte-cta { padding: 40px 40px 30px; }
	.tow-wte-cta__title { font-size: 3.4rem; }
}

@media (max-width: 768px) {
	.tow-wte-hero { padding: 50px 0 0; }
	.tow-wte-hero__title { margin-left: 20px; font-size: 3.8rem; }
	.tow-wte-hero__intro { margin-bottom: -20px; margin-left: 20px; }
	/* A small column, capped at 400 and centred; the photo is 90% of 90%. */
	.tow-wte-hero__photo { max-width: 400px; margin-inline: auto; }
	.tow-wte-hero__photo img { width: 81%; }

	.tow-wte-steps { padding: 30px 20px 10px; }
	.tow-wte-steps__h2 { font-size: 2.4rem; }
	.tow-wte-steps__text { margin-bottom: -20px; }
	.tow-wte-steps__lead > .tow-wte-steps__text + .tow-wte-steps__text,
	.tow-wte-steps__lead > .tow-wte-steps__h2--second + .tow-wte-steps__text { margin-top: 20px; }
	.tow-wte-steps__h2--second { margin: 20px 0 0; }
	.tow-wte-steps__cards { flex-direction: column; gap: 50px; padding-left: 10px; padding-right: 10px; }
	.tow-wte-step { flex: none; width: 100%; }
	.tow-wte-step__title { font-size: 2rem; }

	.tow-wte-cta { padding: 40px 20px 25px; }
	.tow-wte-cta__title { margin-bottom: 0; font-size: 2.4rem; }
	.tow-wte-cta__btn { margin-bottom: 0; }
	.tow-wte-cta .tow-button--path { font-size: 12px; }
}

/* ===========================================================================
 * INSURANCE & BILLING — four rows. See docs/spec-insurance-billing.md.
 *
 * hero 600.00, black box 515.20, billing 1040.71, next step 448.20.
 *
 * The hero is .tow-shero --65 with a colour swap, and the closing row is
 * .tow-next verbatim. Only rows 2 and 3 are new.
 * ======================================================================== */

/* The hero's type is WHITE on this page and black on the symptom pages. Same
   component, one modifier. */
.tow-shero--light .tow-shero__title,
.tow-shero--light .tow-shero__intro { color: var(--tow-white); }

/* --- Row 2, the black box. --- */
.tow-ib-black {
	padding: 40px 20px 30px;
	background-color: #232323;
}

.tow-ib-black__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

/* The same 750 centred column as what-to-expect's lead. */
.tow-ib-black__box {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 750px;
	margin: 20px auto;
}

.tow-ib-black__h2 {
	margin: 0;
	color: var(--tow-white);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-ib-black__text { color: var(--tow-white); text-align: center; }
.tow-ib-black__text p { margin: 0 0 20px; }

/* Two blocks cancel the column's 20px gap with a -20 top margin, the same
   trick as what-to-expect. */
.tow-ib-black__box > .tow-ib-black__text + .tow-ib-black__text { margin-top: -20px; }

/* "Sound familiar?" is the ONLY 700-weight body text on the page, and it is
   rgb(229,30,14) -- a red used nowhere else except the contact form's submit. */
.tow-ib-black__alarm { color: rgb(229, 30, 14); font-weight: 700; }

/* --- Row 3, the billing section. --- */
.tow-ib-main {
	padding: 30px 20px;
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: cover;
}

.tow-ib-main__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-ib-main__h2 {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

/* The pale logo panel: 900 wide inside 1200, on a 20px radius. */
.tow-ib-logo {
	max-width: 900px;
	margin: 20px auto;
	background-color: rgb(245, 245, 245);
	border-radius: 20px;
}

.tow-ib-logo__row {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: center;
	gap: 50px;
}

/* 180 + 50 + 670 = 900. The mark itself renders 180 x 35.02 from a 1110x216
   file -- the height comes from the aspect ratio, so it does not depend on the
   image decoding. */
.tow-ib-logo__mark {
	display: flex;
	align-items: center;
	flex: 0 0 180px;
	line-height: 0;
}

.tow-ib-logo__mark img { display: block; width: 100%; height: auto; }

/* 19px on a 27.55 line -- the only 19px text anywhere on this site. */
.tow-ib-logo__text {
	/* 0 1, NOT 0 0: it shrinks. 670 at desktop, where 180 + 50 + 670 is exactly
	   the panel; 610 at 900, where the panel is 860. */
	flex: 0 1 670px;
	margin-bottom: -20px;
	color: var(--tow-black);
	font-size: 19px;
	line-height: 27.55px;
	text-align: left;
}

.tow-ib-logo__text p { margin: 0 0 20px; }

/* flow-root so the paragraph's own 20px bottom margin stays INSIDE the block:
   900 x 78 around a 58px paragraph, not 900 x 58 with the margin collapsed
   out. */
.tow-ib-main__lead {
	display: flow-root;
	max-width: 900px;
	margin: 20px auto;
	color: var(--tow-black);
	text-align: center;
}

.tow-ib-main__lead p { margin: 0 0 20px; }

/* Two columns of 600, each holding a 540 card 20px in from its left edge. */
.tow-ib-cards { display: flex; flex-direction: row; }

/* THE COLUMN IS PADDED 20 / 20 / 10, and that padding is 30px of the group's
   height. Measured: the column is 314.66 tall around a 244.66 card -- 20 of
   padding, the card's own 20px margins either side, and 10 more at the foot. */
.tow-ib-col {
	box-sizing: border-box;
	width: 50%;
	padding: 20px 20px 10px;
}

/* THE 20px BELOW THE LIST IS THE LAST ITEM'S OWN MARGIN, contained. Each <li>
   carries margin-bottom: 20 and the last one's escapes the <ul> -- the list
   measures 170.47 either way. flow-root catches it inside the card and that IS
   the 20; adding padding as well counted it twice and every card came out 20
   tall. Nothing here needs a bottom padding. */
.tow-ib-card {
	display: flow-root;
	/* THE COLUMN LESS 60, not a fixed 540: 20 of column padding either side and
	   20 of margin on the right. 540 at desktop, 470 at 1100, 370 at 900. Fixed
	   at 540 the cards were too wide below 1200 and a list wrapped a line short. */
	margin: 20px 20px 20px 0;
	border-radius: 20px;
}

/* The title row. Without a mark it is just the heading; with one, a 30x30
   inline-block sits 20px to its left. The FILE is 105x105 and the module
   renders it at 30 -- do not size it from the source. */
.tow-ib-card__head--icon { white-space: nowrap; }

.tow-ib-card__icon {
	display: inline-block;
	width: 30px;
	margin-right: 20px;
	vertical-align: top;
	line-height: 0;
}

.tow-ib-card__icon img { display: block; width: 30px; height: 30px; }

.tow-ib-card__titlewrap {
	display: inline-block;
	vertical-align: middle;
	white-space: normal;
}

/* A NEGATIVE 5px TOP MARGIN, and it is real: it is what makes the first card
   244.66 rather than 249.66. */
.tow-ib-card__title {
	display: inline-block;
	margin: -5px 0 10px;
	color: var(--tow-maroon);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	vertical-align: middle;
}

/* The two cards that carry a mark have BLACK titles; the two without are
   maroon. Same module, different colour, one row apart. */
.tow-ib-card__head--icon .tow-ib-card__title { color: var(--tow-black); }

/* A title without a mark is a plain block the full width of the card, as on
   the original; only a title beside a mark is an inline-block. */
.tow-ib-card__head:not(.tow-ib-card__head--icon) .tow-ib-card__titlewrap,
.tow-ib-card__head:not(.tow-ib-card__head--icon) .tow-ib-card__title { display: block; }

/* ...AND THE HEAD CONTAINS THE TITLE'S MARGINS. As a block, the title's 10px
   bottom margin and the list's 10px top margin met and collapsed into one, and
   each plain card came out 10 short. As an inline-block it had kept both. */
.tow-ib-card__head { display: flow-root; }

/* 10 ABOVE THE LIST, AND 20 WHEN THE TITLE CARRIES A MARK. The heading's own
   10px bottom margin is inside the head, so this is the gap on top of it: the
   two plain cards sit 10 below their title and the two with a mark sit 20.
   That single 10px difference is the whole of why the original's cards are
   244.66 and 254.66 with identical heads and identical lists. */
.tow-ib-card__text { margin-top: 10px; color: var(--tow-black); }

.tow-ib-card__head--icon + .tow-ib-card__text { margin-top: 20px; }

/* NO BOTTOM MARGIN ON THE LIST. The 20px below the text is the card's own
   padding; giving the list a margin as well double-counts it and every card
   comes out 10 tall. */
.tow-ib-card__text ul {
	margin: 0;
	padding: 0 0 0 20px;
	font-size: 18px;
	line-height: 26.1px;
	list-style: disc;
}

.tow-ib-card__text li { margin: 0 0 20px; }

/* ---------------------------------------------------------------------------
 * INSURANCE & BILLING BELOW 1440. Scoped to the page: the black box is shared
 * with dot-physicals and the next-step row with three other pages, and each
 * page sets its own phone values. The hero's rules are the symptom pages'
 * exactly and live with .tow-shero.
 * ------------------------------------------------------------------------ */
@media (max-width: 992px) {
	.tow-main--insurance-billing .tow-ib-black { padding: 40px 30px 20px; }
	.tow-main--insurance-billing .tow-ib-black__h2 { font-size: 3.4rem; }

	.tow-main--insurance-billing .tow-ib-main { padding: 30px 20px 40px; }
	.tow-main--insurance-billing .tow-ib-main__h2 { font-size: 3.4rem; }
	.tow-main--insurance-billing .tow-ib-logo { padding: 0 10px; }
	.tow-main--insurance-billing .tow-ib-card__title { font-size: 2.4rem; }
	.tow-main--insurance-billing .tow-ib-cards + .tow-ib-cards .tow-ib-col { padding-top: 0; }

	.tow-main--insurance-billing .tow-next { padding: 40px 40px 30px; }
	.tow-main--insurance-billing .tow-next__title { font-size: 3.4rem; }
}

@media (max-width: 768px) {
	.tow-main--insurance-billing .tow-ib-black { padding: 20px 20px 30px; }
	.tow-main--insurance-billing .tow-ib-black__h2 { font-size: 2.4rem; }
	.tow-main--insurance-billing .tow-ib-black__text { margin-bottom: -20px; }
	.tow-main--insurance-billing .tow-ib-black__box > .tow-ib-black__text + .tow-ib-black__text { margin-top: 20px; }

	.tow-main--insurance-billing .tow-ib-main__h2 { font-size: 2.3rem; }
	.tow-main--insurance-billing .tow-ib-logo { margin-bottom: 0; }
	.tow-main--insurance-billing .tow-ib-logo__row { flex-direction: column; align-items: center; gap: 0; }
	.tow-main--insurance-billing .tow-ib-logo__mark { flex: none; width: 100%; justify-content: center; }
	/* 85% of 85%: the photo box and the picture inside it are each 85%. */
	.tow-main--insurance-billing .tow-ib-logo__mark img { width: 72.25%; }
	.tow-main--insurance-billing .tow-ib-logo__text { flex: none; width: 100%; margin: 30px 0 20px; text-align: center; }
	.tow-main--insurance-billing .tow-ib-main__lead { margin: 0 auto 20px; padding: 0 20px; font-size: 20px; }

	.tow-main--insurance-billing .tow-ib-cards { flex-direction: column; }
	.tow-main--insurance-billing .tow-ib-col { width: 100%; max-width: 400px; margin-inline: auto; padding: 20px 0 0; }
	.tow-main--insurance-billing .tow-ib-cards + .tow-ib-cards .tow-ib-col { padding-top: 0; }
	.tow-main--insurance-billing .tow-ib-col:nth-child(2) { margin-bottom: 40px; }
	.tow-main--insurance-billing .tow-ib-card { width: 100%; margin: 0; padding: 15px 10px 20px; text-align: left; }
	.tow-main--insurance-billing .tow-ib-card__icon,
	.tow-main--insurance-billing .tow-ib-card__icon img { width: 24px; height: 24px; }
	/* The info box's own phone rule for a title beside a mark. */
	.tow-main--insurance-billing .tow-ib-card__head--icon .tow-ib-card__titlewrap { width: calc(100% - 49px); }
	/* The builder drops the titles' -0.8px tracking on phones: 16px on "Who This
	   Page Is For". Earlier written off as an invisible difference; it was a rule. */
	.tow-main--insurance-billing .tow-ib-card__title { letter-spacing: 0; }

	.tow-main--insurance-billing .tow-next { padding: 40px 20px 25px; }
	.tow-main--insurance-billing .tow-next__title { margin-bottom: 0; font-size: 2.4rem; }
	.tow-main--insurance-billing .tow-next__intro { margin-top: 20px; }
	.tow-main--insurance-billing .tow-next .tow-button--path { font-size: 13px; }
	.tow-main--insurance-billing .tow-next__note { font-size: 1.6rem; }
}

/* ===========================================================================
 * PATIENT REVIEWS — four rows.
 * hero 738.00, situations 911.36, why 466.20, next step 517.20.
 * ======================================================================== */

.tow-pr-hero {
	min-height: 600px;
	padding: 60px 20px 80px;
	background-color: #f2f2f2;
}

/* A PLAIN BLOCK, NOT A FLEX COLUMN. The two boxes sit 20px apart, not 40 --
   their 20px margins COLLAPSE into one, which only happens outside a flex
   container. Made flex, this row grows 20px. */
.tow-pr-hero__inner {
	max-width: 1200px;
	margin-inline: auto;
}

/* align-items: center is what shrink-wraps the maroon line to 599.7 and
   centres it inside the 800 block. */
.tow-pr-hero__lead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	max-width: 800px;
	margin: 20px auto;
}

.tow-pr-hero__title {
	margin: 0;
	color: var(--tow-black);
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-pr-hero__intro,
.tow-pr-hero__note,
.tow-pr-hero__body { margin-bottom: -20px; color: var(--tow-black); text-align: center; }

.tow-pr-hero__intro p,
.tow-pr-hero__note p,
.tow-pr-hero__body p { margin: 0 0 20px; }

.tow-pr-hero__note { color: var(--tow-maroon); }

/* 200 + 20 + 760 + 20 + 200 = 1200, vertically centred. */
.tow-pr-hero__band {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	margin: 20px 0;
}

.tow-pr-hero__pic { flex: 0 0 200px; line-height: 0; }
.tow-pr-hero__pic figure { margin: 0; }
.tow-pr-hero__pic img { display: block; width: 100%; height: auto; }

.tow-pr-hero__mid {
	display: flex;
	/* 0 1, NOT 0 0: it gives way. 760 at desktop, where 200 + 20 + 760 + 20 + 200
	   fills the 1200; 620 at 1100. Rigid, the band ran 140px off the page. */
	flex: 0 1 760px;
	flex-direction: column;
	gap: 20px;
}

/* --- Row 2, "Find Your Situation". --- */
.tow-pr-situations { padding: 40px 20px 10px; }

.tow-pr-situations__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

/* Shrink-wrapped to its heading — 359.5, not the full 1200. */
.tow-pr-situations__lead {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 20px auto;
}

.tow-pr-situations__h2 {
	margin: 0;
	color: var(--tow-black);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

/* gap 32, NOT the 40 the other card rows use. Three 365.3s and two 32s make
   1159.9 in a 1160 box, so space-between has nothing to distribute. */
.tow-pr-cards {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
	gap: 32px;
	margin: 0 0 20px;
	padding: 40px 20px;
	border-radius: 28px;
}

.tow-pr-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* THE HEADING IS NARROWER THAN ITS CARD BY A RIGHT MARGIN: 60px on the first
   two and 150 on the third, so each title wraps where the original's does. */
.tow-pr-card__title {
	margin: 0 60px 0 0;
	color: var(--tow-maroon);
	font-size: 2.2rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
}

.tow-pr-card__title--narrow { margin-right: 150px; }

/* A 50px CIRCLE WITH A 2px BORDER AND NO FILL. The number is centred by flex,
   and the border is rgb(192,57,43) where the numeral itself is rgb(151,40,27)
   -- two different reds, 3px apart in the file and not the same value. */
.tow-pr-card__badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 2px solid rgb(192, 57, 43);
	border-radius: 50%;
	color: rgb(151, 40, 27);
	letter-spacing: -2px;     /* the numeral's own; it had inherited the title's -0.8 */
}

.tow-pr-card__name {
	display: block;
	padding: 10px 0 0;
	color: rgb(151, 40, 27);
}

/* The quote block: 21px in either side, 43 above and 33 below. Measured, and
   the odd numbers are the original's. */
/* A PALE PANEL, 12px inside its module top and bottom -- 308.56 in a 332.56.
   The geometry pass could not see it, because the quote inside was in exactly
   the right place on no background at all. The 43/21/33 padding I had read off
   the text is the same inset written without the border and the 12: 1 + 30 top,
   1 + 20 either side. The bottom border is what keeps the last paragraph's 20px
   margin inside the panel. */
.tow-pr-card__quote {
	display: block;
	margin: 12px 0;
	/* 20 at the foot: on the original that space is the last paragraph's own
	   margin, which their panel keeps and ours lets go. Padding puts it back in
	   the same place -- the panel paints 308.56 either way. */
	padding: 30px 20px 20px;
	border: 1px solid rgb(242, 242, 242);
	border-radius: 20px;
	background-color: rgb(242, 242, 242);
}

.tow-pr-card__mark { display: block; margin-top: 5px; line-height: 0; }
.tow-pr-card__mark img { display: inline; width: 20px; height: auto; }

.tow-pr-card__quotetext { margin-top: 20px; color: var(--tow-black); }
/* The last paragraph's 20px margin ESCAPES the text block on the original --
   the block measures 214, which is 155 + 20 + 39 and no more. This box has a
   bottom padding, which would otherwise catch it and add 20. */
.tow-pr-card__quotetext p { margin: 0 0 20px; padding: 0 0 10px; }
.tow-pr-card__quotetext p:last-child { margin-bottom: 0; }

/* flow-root, so the closing paragraph's own 20px bottom margin stays inside the
   block. Six lines of 29 is 174; the original's block is 194, and the 20 is
   that margin. Left to collapse out, every card is 20 short and the row with
   them. */
.tow-pr-card__after {
	display: flow-root;
	color: var(--tow-black);
	text-align: left;
}

.tow-pr-card__after p { margin: 0 0 20px; }

/* --- Row 3, "Why These Stories Matter". --- */
.tow-pr-why {
	padding: 40px 20px 30px;
	background-color: #232323;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.tow-pr-why__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-pr-why__box {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 850px;
	margin: 20px auto;
}

/* BLACK TEXT, on a row whose own background is #232323. The photo behind it is
   what makes that legible. Reproduced as measured -- it is not a mistake in
   this rebuild, and a colour check on the row alone would call it one. */
.tow-pr-why__h2 {
	margin: 0;
	color: var(--tow-black);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-pr-why__text { color: var(--tow-black); text-align: center; }
.tow-pr-why__text p { margin: 0 0 20px; }

/* --- PATIENT REVIEWS BELOW 1440. --- */
@media (max-width: 1200px) {
	/* The lead box drops its 800 cap and fills the row, and the heading gains a
	   20px top margin -- which the tablet rule below takes away again. */
	.tow-pr-hero__lead { width: 100%; max-width: none; }
	.tow-pr-hero__title { margin-top: 20px; }
}

@media (max-width: 992px) {
	.tow-pr-hero { min-height: 485px; padding-top: 40px; padding-bottom: 40px; }
	.tow-pr-hero__lead { width: 90%; }
	.tow-pr-hero__title { margin: 0 0 20px; font-size: 4rem; }
	/* The photo / text / photo band stacks into one centred column. */
	.tow-pr-hero__band { flex-direction: column; padding: 0 15px; }
	.tow-pr-hero__pic { display: flex; flex-direction: column; justify-content: center; flex: 0 0 150px; width: 200px; min-height: 0; }
	.tow-pr-hero__pic:first-child { flex-basis: 135px; }
	.tow-pr-hero__pic > * { flex-shrink: 0; }
	.tow-pr-hero__mid { flex: none; width: 100%; }

	.tow-pr-situations { padding: 60px 30px 0; }
	.tow-pr-situations__h2 { font-size: 3.4rem; }
	/* One card per row, full width, titles centred. */
	.tow-pr-cards { flex-direction: column; padding-left: 0; padding-right: 0; }
	.tow-pr-card { flex: 1 0 auto; width: 100%; }
	.tow-pr-card__title,
	.tow-pr-card__title--narrow { margin-right: 0; text-align: center; }

	.tow-pr-why { padding: 40px 30px 20px; }
	.tow-pr-why__h2 { font-size: 3.4rem; }

	.tow-main--patient-reviews .tow-next { padding: 40px 40px 30px; }
	.tow-main--patient-reviews .tow-next__title { font-size: 3.4rem; }
	/* 20px, and it STAYS 20 on a phone: this page's note sets its own size. */
	.tow-main--patient-reviews .tow-next__note { font-size: 20px; }
}

/* 801, the badge's own breakpoint: below it the numbered circle centres. */
@media screen and (max-width: 801px) {
	.tow-pr-card__badge { margin: 0 auto; }
}

@media (max-width: 768px) {
	.tow-pr-hero__pic:first-child { flex-basis: 150px; }
	.tow-pr-hero { padding: 20px 0 30px; }
	.tow-pr-hero__lead { width: 100%; padding: 0 15px; }
	.tow-pr-hero__title { font-size: 3.8rem; }
	.tow-pr-hero__body { margin-bottom: -10px; }

	.tow-pr-situations { padding: 30px 20px 10px; }
	.tow-pr-situations__h2 { margin-bottom: -20px; font-size: 2.4rem; }
	.tow-pr-cards { gap: 50px; padding-left: 10px; padding-right: 10px; }
	.tow-pr-card__title { font-size: 2rem; }
	.tow-pr-card__after { text-align: center; }

	.tow-pr-why { padding: 20px 20px 30px; }
	.tow-pr-why__h2 { font-size: 2.4rem; }
	.tow-pr-why__text { margin-bottom: -20px; }

	.tow-main--patient-reviews .tow-next { padding: 40px 20px 25px; }
	.tow-main--patient-reviews .tow-next__title { margin-bottom: 0; font-size: 2.4rem; }
	.tow-main--patient-reviews .tow-next__intro { margin-top: 20px; }
}

/* ===========================================================================
 * OUR TEAM — six rows: a hero, four identical bios, and a closing pair.
 * 521.00, 470.00 x 4, 454.59.
 * ======================================================================== */

.tow-team-hero {
	padding: 20px 20px 0;
	background-repeat: no-repeat;
	background-position: 0 20%;
	background-size: cover;
	box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.tow-team-hero__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* THE 501 IS THIS COLUMN'S OWN 80px BOTTOM MARGIN under 421 of content -- the
   same shape as the About hero, where an unexplained height turned out to be a
   margin. It was written here as a min-height on the wrapper with a note
   saying nothing in the markup produced it. Something did. */
.tow-team-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 45.17%;
	margin-bottom: 80px;
}

.tow-team-hero__spacer { width: 54.83%; }

.tow-team-hero__title {
	margin: 20px;
	color: var(--tow-black);
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-team-hero__intro { margin: 20px; color: var(--tow-black); }
.tow-team-hero__intro p { margin: 0 0 20px; }

/* --- The four bios. Identical but for which side the portrait sits. --- */
/* ONLY TWO OF THE FOUR BIO ROWS ARE DARK. The first and third sit on the
   photograph and carry white text; the second sits on the pale wash and the
   fourth on nothing at all, both in black. Painting all four white was
   invisible to every geometry check on this page. */
.tow-team-bio {
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	color: var(--tow-black);
}

.tow-team-bio--photo {
	color: var(--tow-white);
	/* PER LAYER: the photograph covers and does not repeat; the flat maroon
	   beneath it keeps its own size, origin and repeat. */
	background-size: cover, auto;
	background-position: 50% 50%, 0 0;
	background-repeat: no-repeat, repeat;
}
.tow-team-bio--wash { background-color: rgb(242, 242, 242); }

.tow-team-bio__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* The right-hand rows put the TEXT first in the markup, as the original does,
   and on phones stack the portrait above it again (column-reverse below). */

/* The 30/20/20/20 is the photo MODULE's margin, so it sits on this box and the
   picture fills what is left, capped at 300. */
.tow-team-bio__photo { width: 30%; padding: 30px 20px 20px; line-height: 0; }

/* THE MARGIN GOES ON THE IMAGE, because tow_image() returns a bare <img> and
   not a <figure>. Written as `figure { margin }` the rule matched nothing at
   all, the portrait column collapsed to the 300px picture, and all four bio
   rows came out 50 short -- exactly the 30 + 20 that was missing.
 *
 * A 30px TOP against 20 on the other three sides: the portrait sits 10px lower
 * than the heading beside it.
 *
 * 300 x 300 on a 15px radius whatever the source measures -- the files here
 * are 680, 300 and 1000 square and every one renders 300. */
/* 100% OF ITS BOX, CAPPED AT 300 and square: 278 at 1100, 218 on tablet. On
   the right-hand rows it sits at the box's RIGHT edge, 40px in from the column's
   left at 1440 where the old fixed margins put it 20. */
.tow-team-bio__photo img {
	display: block;
	width: 100%;
	max-width: 300px;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 15px;
	object-fit: cover;
}

.tow-team-bio--right .tow-team-bio__photo img { margin-left: auto; }

.tow-team-bio__text {
	display: flex;
	flex-direction: column;
	width: 70%;
}

.tow-team-bio__name {
	margin: 20px;
	/* inherit: only the two photograph rows are white. */
	color: inherit;
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-team-bio__body { margin: 0 20px 20px; color: inherit; text-align: left; }
.tow-team-bio__body p { margin: 0 0 20px; }

/* --- The closing pair. --- */
.tow-team-close {
	padding: 50px 20px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

/* 998, NOT the 1200 every other row on this site uses. */
/* 40px of padding on the right, as every text column with its content pulled
   in on this site has: the headings are 918 wide at 1440, not 958. */
.tow-team-close__inner {
	display: flex;
	flex-direction: column;
	max-width: 998px;
	margin-inline: auto;
	padding-right: 40px;
}

/* 1.1em here, where the bios' headings take the site's default 1.4 -- 41.8
   against 53.2 on identical 38px type. */
.tow-team-close__h2 {
	margin: 20px;
	color: var(--tow-black);
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-team-close__h2--second { margin-top: 60px; }

.tow-team-close__text {
	margin: 0 20px 12px;
	color: var(--tow-black);
	text-align: center;
}

.tow-team-close__text p { margin: 0 0 20px; }

/* The body links on this page are BLACK, not the site's maroon, and not
   underlined despite the utility classes the copy was pasted with. */
.tow-team-hero__intro a,
.tow-team-close__text a { color: inherit; }

/* --- Our team, tablet and phone. Each value is the original's builder
   setting for that node at that breakpoint (specs/our-team). --- */
@media (max-width: 1200px) {
	.tow-team-close { padding-bottom: 60px; }
	.tow-team-close__h2--second { margin-top: 20px; }
}

@media (max-width: 992px) {
	.tow-team-hero__text { margin-bottom: 20px; }
	.tow-team-hero__title { margin: 0 20px 20px 0; font-size: 24px; }
	.tow-team-hero__intro { margin: 0 20px 20px 0; }

	.tow-team-bio { padding: 60px 20px 40px; }
	.tow-team-bio__name { font-size: 3.4rem; }

	.tow-team-close { padding: 20px 20px 30px; }
	.tow-team-close__h2,
	.tow-team-close__h2--second { margin: 40px 20px 0; font-size: 30px; text-align: left; }
	.tow-team-close__text { text-align: left; }
}

@media (max-width: 768px) {
	.tow-team-hero { padding: 0; }
	.tow-team-hero__inner { flex-wrap: wrap; justify-content: center; }
	.tow-team-hero__text { width: 100%; max-width: 400px; }
	/* The empty desktop column wraps under the text, 1px tall. */
	.tow-team-hero__spacer { width: 100%; height: 1px; }
	.tow-team-hero__title { margin-left: 20px; font-size: 28px; text-align: center; }
	.tow-team-hero__intro { margin-left: 20px; text-align: center; }

	.tow-team-bio { padding: 30px 20px 40px; }
	.tow-team-bio__inner { flex-direction: column; align-items: center; }
	.tow-team-bio--right .tow-team-bio__inner { flex-direction: column-reverse; }
	.tow-team-bio__photo { width: 100%; max-width: 400px; }
	.tow-team-bio__photo { padding-top: 20px; }
	.tow-team-bio__text { width: 100%; }
	.tow-team-bio__name { font-size: 2.4rem; }

	.tow-team-close { padding: 30px 20px 20px; }
	.tow-team-close__inner { padding-right: 0; }
	.tow-team-close__h2,
	.tow-team-close__h2--second { margin: 20px 20px 30px; font-size: 24px; text-align: center; }
}

/* ===========================================================================
 * ABOUT DR. KAREN — six rows. See docs/spec-about-morton-chiropractor.md.
 * 686.00, 768.08, 1367.47, 950.73, 807.08, 878.19.
 *
 * The most intricate page on this site: a 70px display line, a photo given a
 * NEGATIVE 200px margin so it overflows its column, a heading rendered at
 * 20px, three type sizes that appear nowhere else, and one row on a 1090
 * container where the rest of the site uses 1200.
 * ======================================================================== */

.tow-ab-hero { padding: 20px 20px 0; box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1); }

.tow-ab-hero__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* 660 / 540. BOTH columns are bottom-aligned; the 80px of slack under the text
   is that column's own bottom MARGIN, not empty space above a top-aligned
   column, and it is what makes the group 666 (586 of content plus 80). This
   row was held at 686 by a min-height on the wrapper, which made it measure
   right while four things inside it were wrong. */
.tow-ab-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 55%;
	margin-bottom: 80px;
}

/* 70px of Tangerine on a 77 line, as a BLOCK with 30 of padding above it --
   not the inline run of 50px Lexend it renders as when nothing claims it. The
   page-wide .text-highlight rule is the homepage hero's and does not reach
   here. */
.tow-ab-hero__title .text-highlight {
	display: block;
	padding-top: 30px;
	font-family: var(--tow-font-script);
	font-size: 70px;
	font-weight: 400;
	line-height: 77px;
	letter-spacing: -0.8px;
}

.tow-ab-hero__photo {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 45%;
	line-height: 0;
}

.tow-ab-hero__pic { margin: 20px 20px 0; }

/* 525 WIDE IN A 500 BOX. The picture overhangs its module by 25px on the
   right; constrained to 500 it also loses 27 of height. */
.tow-ab-hero__photo img {
	display: block;
	width: 105%;
	max-width: none;
	height: auto;
}

.tow-ab-hero__title {
	margin: 20px;
	color: var(--tow-black);
	font-size: 5rem;
	font-weight: 700;
	line-height: 1.1em;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-ab-hero__intro { margin: 20px; color: var(--tow-black); }
.tow-ab-hero__intro p { margin: 0 0 20px; }

/* --- Row 2, why. --- */
.tow-ab-why { padding: 60px 20px; background-color: #f4f4f4; }

.tow-ab-why__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-ab-why__h2,
.tow-ab-bg__h2,
.tow-ab-care__h2,
.tow-ab-built__h2,
.tow-ab-comm__h2 {
	margin: 20px;
	font-size: 3.8rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-ab-why__h2, .tow-ab-bg__h2 { color: var(--tow-black); }
.tow-ab-care__h2, .tow-ab-built__h2 { color: var(--tow-white); }
.tow-ab-comm__h2 { color: var(--tow-maroon); }

/* gap 50, not the 20 most centred columns on this site use. */
.tow-ab-why__box {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 890px;
	margin: 20px auto;
}

.tow-ab-why__text { color: var(--tow-black); text-align: center; }
.tow-ab-why__text p { margin: 0 0 20px; }

/* 22px/700 on a 31.9 line -- a size used only here and on row 3. */
.tow-ab-why__pull {
	color: var(--tow-maroon);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

.tow-ab-why__pull p { margin: 0 0 20px; }

/* THE TEXT IS TALLER THAN THE CARD IT SITS IN: 138 inside 128, via a -10px
   bottom margin on the text. Reproduced, not corrected. */
.tow-ab-why__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 58%;
	margin-inline: auto;
	border-left: 5px solid var(--tow-maroon);
	background: var(--tow-white);
	border-radius: 12px;
}

.tow-ab-why__cardtext {
	margin-bottom: -10px;
	padding: 30px;
	color: var(--tow-black);
	text-align: left;
}

.tow-ab-why__cardtext p { margin: 0 0 20px; }

/* --- Row 3, background. --- */
.tow-ab-bg { padding: 60px 20px; background-color: var(--tow-white); }

.tow-ab-bg__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-ab-bg__h2 { margin: 20px 20px 10px; }

/* gap 0 -- the two display lines sit flush. */
.tow-ab-bg__lead {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-width: 890px;
	margin: 20px auto;
}

.tow-ab-bg__lead1 {
	color: var(--tow-black);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

/* 70px ON A 101.5 LINE. The largest type on the site outside the homepage
   hero's script span, and it is a PARAGRAPH, not a heading. */
/* ONE LINE, and it OVERFLOWS its 890px box rather than wrapping. Measured at
   101.5 tall on the original -- exactly one 70px line -- where the sentence is
   far wider than 890. Allowed to wrap it becomes two lines and the row grows
   101.5. */
/* TANGERINE, asked for at 300 (it renders 400), and it wraps normally: in the
   script face the sentence fits one line at every width but a phone's. Set in
   Lexend it had needed nowrap to stay on one line, and overflowed its box on
   tablet. */
.tow-ab-bg__lead2 {
	color: var(--tow-black);
	font-family: var(--tow-font-script);
	font-size: 70px;
	font-weight: 300;
	line-height: 1.45;
	text-align: center;
}

.tow-ab-bg__lead1 p, .tow-ab-bg__lead2 p { margin: 0 0 20px; }

.tow-ab-bg__cols { display: flex; flex-direction: row; }

/* 40px of padding on the INSIDE edge of each column: the cards are 560 in a
   600 column and the aside 540 with a 20px right margin on top of that. The
   left column is padded right, the right column left. */
/* THE COLUMNS ARE FLEX, NOT BLOCK, and the group is bottom-aligned. As blocks
   the cards' facing 20px margins collapsed to 20 instead of standing at 40,
   and the left column -- which is what sets this row's height -- came out
   881.89 against the original's 919. In flex nothing collapses. The right
   column's content is only 791.61, so flex-end leaves 127.39 of slack above
   the portrait: that gap is the group's alignment, not anything in the
   markup. */
.tow-ab-bg__col {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 50%;
	padding-right: 40px;
}

.tow-ab-bg__cols > .tow-ab-bg__col:last-child {
	padding-right: 0;
	padding-left: 40px;
}

/* A NEGATIVE 200px RIGHT MARGIN, so a 760px picture overflows its 600px
   column. That overflow is the design; without it the portrait is 200 narrow. */
/* 40px in from its column: the figure starts at x760 in a column that starts
   at 720. */
/* The MODULE carries the -200 margin and the picture fills it: 760 at 1440,
   and from 1200 down, with the margin gone, simply its column. */
.tow-ab-bg__photo { margin: 20px -200px 0 0; line-height: 0; }

.tow-ab-bg__photo img {
	display: block;
	width: 100%;
	height: auto;
}

/* flow-root, so the paragraph's 20px margin stays inside: 165, not 145. */
.tow-ab-bg__aside {
	display: flow-root;
	margin: 20px 20px 20px 0;
	color: var(--tow-black);
}

.tow-ab-bg__aside p { margin: 0 0 20px; }

/* --- The info-box cards, shared by rows 3 and 5. --- */
.tow-ab-card,
.tow-ab-built__card {
	display: flow-root;
	margin: 20px 0;
	border-radius: 20px;
}

/* THE TEXT INSIDE A TITLELESS CARD IS INSET 118px ON ITS RIGHT. Measured: the
   card is 560 and its content 442. The two cards that carry a title are inset
   40 instead. Both are the module's own padding, not ours. */
/* 25 below the text, and the paragraph itself carries 10 of bottom padding --
   both are the module's, measured on a card that is 316 around a 271px
   paragraph. */
/* The two untitled cards are an ICON BESIDE THE TEXT: a Font Awesome paw on
   the first (24px, and 4px further in), a 30px picture on the last, each a
   top-aligned inline-block with the text beside it 54 or 60px narrower. The
   old 118px right padding was that shape seen at 1440. */
.tow-ab-bg__col .tow-ab-card { padding: 20px 40px 0 20px; }
/* The paw card is GREY with a 4px MAROON rule down its left -- paint the 1440
   build never had, and no height could show. */
.tow-ab-bg__col .tow-ab-card--paw { border-left: 4px solid var(--tow-maroon); background: rgb(243, 244, 246); }
.tow-ab-bg__col .tow-ab-card p { padding-bottom: 10px; }
.tow-ab-card__mark { display: inline-block; margin: 5px 10px 0 0; vertical-align: top; line-height: 0; }
.tow-ab-card__svg { display: block; width: 24px; height: 24px; fill: var(--tow-maroon); }
.tow-ab-card__mark img { display: block; width: 30px; height: auto; }
.tow-ab-card__body { display: inline-block; width: calc(100% - 60px); vertical-align: top; }
.tow-ab-card--paw .tow-ab-card__body { width: calc(100% - 54px); }
.tow-ab-card__body .tow-ab-card__text { margin-top: 5px; }
/* The right column's closing card has NO top margin -- 0 0 20px, where every
   other card on the row is 20 0. */
.tow-ab-bg__col .tow-ab-card--last { margin: 0 0 20px; }
/* Row 3's three cards are PAINTED, 12px round: grey with a maroon rule (paw),
   grey (certifications), and GREEN with white type (Bushido Billing). */
.tow-ab-bg__col .tow-ab-card { border-radius: 12px; }
.tow-ab-bg__col .tow-ab-card--has-title { background: rgb(243, 244, 246); }
.tow-ab-bg__col .tow-ab-card--last { background: rgb(103, 194, 142); }
.tow-ab-bg__col .tow-ab-card--last .tow-ab-card__text { color: var(--tow-white); }

/* ROW 3's TITLED CARD IS NOT ROW 5's, though they share every class. Its title
   is 20px on a 24px line with a 10/20 margin and no padding, where row 5's is
   22 on 31.9; its mark sits 10px from the title, not 20, and is 30 x 27.32 --
   a 168x153 file, not a square one; its list items are 10 apart, not 20; and
   the card is padded 20 all round with 40 on the right, not 0/118/25/0.
   Reusing row 5's card here made it 320.89 against 318. */
.tow-ab-bg__col .tow-ab-card--has-title { padding: 20px 40px 20px 20px; }

.tow-ab-bg__col .tow-ab-card--has-title .tow-ab-card__icon {
	margin-right: 10px;
	vertical-align: middle;
}

.tow-ab-bg__col .tow-ab-card--has-title .tow-ab-card__title {
	margin: 10px 0 20px;
	padding: 0;
	font-size: 20px;
	line-height: 24px;
	color: var(--tow-black);
}

.tow-ab-bg__col .tow-ab-card--has-title .tow-ab-card__text { margin-top: 20px; }
.tow-ab-bg__col .tow-ab-card--has-title .tow-ab-card__text li { margin-bottom: 10px; }
.tow-ab-bg__col .tow-ab-card--has-title .tow-ab-card__titlewrap { width: calc(100% - 60px); }

.tow-ab-card__head--icon { white-space: nowrap; }

.tow-ab-card__icon {
	display: inline-block;
	margin-right: 20px;
	vertical-align: top;
	line-height: 0;
}

/* AUTO height, not 30. Row 5's marks are 105x105 so a square was invisibly
   right there; row 3's is 168x153 and rendered 30 x 27.32. */
.tow-ab-card__icon img { display: block; width: 30px; height: auto; }

.tow-ab-card__titlewrap {
	display: inline-block;
	vertical-align: middle;
	white-space: normal;
}

/* 22px ON A 31.9 LINE, NOT insurance-billing's 28 on 39.2. Same module, same
   markup, different page. The list under it is 20px on 29 where that page's is
   18 on 26.1. Reusing the other page's numbers made every card here 79 short. */
.tow-ab-card__title {
	display: inline-block;
	margin: 0 0 20px;
	color: var(--tow-maroon);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: normal;
	vertical-align: middle;
}

.tow-ab-card__text { color: var(--tow-black); }
.tow-ab-card__text p { margin: 0 0 20px; }

/* The BODY's size, not a literal 20/29: on phones the original's lists drop
   to 18/26.1 with everything else, and the literal cost 5.81px a two-line item. */
.tow-ab-card__text ul {
	margin: 0 0 10px;
	padding: 0 0 0 20px;
	list-style: disc;
}

.tow-ab-card__text li { margin: 0 0 20px; }

/* --- Row 4, how care works. --- */
.tow-ab-care {
	padding: 60px 20px;
	/* PER LAYER, like our-team's bio rows: the photograph covers and does not
	   repeat, and the flat maroon composited under it keeps its own size,
	   origin and repeat. */
	background-repeat: no-repeat, repeat;
	background-position: 50% 50%, 0 0;
	background-size: cover, auto;
	color: var(--tow-white);
}

.tow-ab-care__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

/* FLEX, gap 50 -- with one child the gap never shows, but the flex context is
   what makes the text below contain its paragraph's 20px margin (49, not 29)
   and so makes this box 69 rather than 49. */
.tow-ab-care__intro {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin: 20px auto;
}
.tow-ab-care__introtext { margin-bottom: 20px; text-align: center; }
.tow-ab-care__introtext p { margin: 0 0 20px; }

.tow-ab-care__cards { display: flex; flex-direction: row; }
.tow-ab-care__col { width: 33.333%; }

.tow-ab-care__card {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 20px;
}

.tow-ab-care__top { display: flex; flex-direction: column; gap: 10px; }
.tow-ab-care__pic { line-height: 0; }
/* An 80px square, centred -- not a card-wide box with the picture contained in it. */
.tow-ab-care__pic img { display: block; width: 80px; height: auto; margin-inline: auto; }

/* 24px/700 on 34.8. */
.tow-ab-care__title {
	margin-top: 10px;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

.tow-ab-care__title p { margin: 0 0 20px; }

/* The white note card. 17px/400 on a 24.65 line -- the only 17px text on the
   site -- and its text hangs 30px BELOW the card via a negative margin. */
.tow-ab-care__note {
	display: flex;
	flex-direction: row;
	gap: 10px;
	padding: 20px 20px 30px;
	background: var(--tow-white);
	border-radius: 12px;
}

.tow-ab-care__notetext {
	margin-bottom: -30px;
	color: var(--tow-maroon);
	font-size: 17px;
	line-height: 1.45;
	text-align: center;
}

.tow-ab-care__notetext p { margin: 0 0 20px; }

/* THE WHOLE PULL QUOTE IS TANGERINE, not just its marks: the module carries
   .text-highlight, so it is 48px of script on a 57.6 line with 2px of
   tracking. Set in Lexend the sentence measured 1068.3 where the original is
   1039.17 and wrapped onto a second line. */
.tow-ab-care__quote {
	margin: 20px;
	font-family: var(--tow-font-script);
	font-size: 48px;
	font-weight: 300;
	letter-spacing: 2px;
	line-height: 1.2;
	text-align: center;
}

.tow-ab-care__quote p { margin: 0 0 20px; }

/* THE QUOTE MARKS ARE 80px OF TANGERINE, not 48px of Lexend, and they are what
   makes this one-line paragraph 96 tall rather than 57.6. Left as body text
   they were wide enough to push the sentence onto a second line, which cost
   the row 19.19 -- very nearly cancelling the 20 the intro box was missing, so
   the row read only 0.81 short while two elements were wrong. The three
   non-breaking spaces inside each mark are the original's too. */
.tow-ab-care__quote .quotes {
	font-family: var(--tow-font-script);
	font-size: 80px;
	font-weight: 300;
	line-height: 96px;
}

/* --- Row 5, built for. 1090 container, NOT 1200. --- */
.tow-ab-built { padding: 60px 20px 120px; background-color: #232323; }

.tow-ab-built__inner {
	display: flex;
	flex-direction: column;
	max-width: 1090px;
	margin-inline: auto;
}

.tow-ab-built__h2 { margin: 20px 20px 40px; }

.tow-ab-built__cols { display: flex; flex-direction: row; }

/* 21px ALL ROUND, not just on the left. The card sits 41px into a 513.9
   column -- 21 of column padding plus its own 20px margin -- and the same 41
   below it. The top and bottom 21 are 42px of the row. */
/* A GREEN card and a PINK one, each with a 1px tinted border -- 1 + 20 is the
   21px the card sits in by. Their type is black. */
.tow-ab-built__col {
	box-sizing: border-box;
	width: 50%;
	padding: 20px;
	border: 1px solid rgb(180, 227, 205);
	border-radius: 12px;
	background: rgb(240, 253, 244);
}

.tow-ab-built__col:last-child { border-color: rgb(227, 198, 197); background: rgb(254, 242, 242); }

/* THE PAINTED PANEL IS 525 WIDE, NOT 545: it is inset 20 on its inner edge, and
   the two shrink to make room for it. The 20 used to sit on the card inside,
   where it moved the text correctly and left the colour covering the full
   column -- 20px of green and pink that should not have been there. */
.tow-ab-built__col:first-child { margin-right: 20px; }
.tow-ab-built__col:last-child { margin-left: 20px; }

/* 20px below the list, on top of the list's own 10. */
/* 10px below the list, on top of the list's own 10. */
/* No bottom padding: the 10 it once had stood in for the 10px gap above the
   text, and with the gap in place it counted twice. */
.tow-ab-built__card { padding: 0 40px 0 0; }
.tow-ab-built__card .tow-ab-card__title,
.tow-ab-built__card .tow-ab-card__text { color: var(--tow-black); }
/* Row 5's title FILLS a wrap 50px short of the card, where row 3's shrinks. */
.tow-ab-built__card .tow-ab-card__titlewrap { width: calc(100% - 50px); }
.tow-ab-built__card .tow-ab-card__title { display: block; }
.tow-ab-built__card .tow-ab-card__text { margin-top: 10px; }
.tow-ab-built__card .tow-ab-card__text p { padding-bottom: 10px; }

/* --- Row 6, community. --- */
.tow-ab-comm {
	padding: 60px 20px 120px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.tow-ab-comm__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-ab-comm__lead {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 750px;
	margin: 20px auto;
}

.tow-ab-comm__leadtext {
	color: var(--tow-maroon);
	font-weight: 700;
	text-align: center;
}

.tow-ab-comm__leadtext p { margin: 0 0 20px; }

.tow-ab-comm__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	max-width: 82%;
	margin: 20px auto;
	background: var(--tow-white);
	border-radius: 12px;
}

.tow-ab-comm__cardtext {
	padding: 30px 30px 10px;
	color: var(--tow-maroon);
	text-align: center;
}

.tow-ab-comm__cardtext p { margin: 0 0 20px; }

.tow-ab-comm__next {
	display: flex;
	flex-direction: column;
	gap: 30px;
	/* SHRINK-WRAPPED to its widest line and centred -- which is why the closing
	   sentence fills the line to the pixel. The old 218.688 margins were that
	   width seen at 1440. */
	margin: 20px auto;
}

/* A HEADING RENDERED AT BODY SIZE: 20px/700 on a 28px line, where every other
   h2 on this page is 38 on 53.2. */
.tow-ab-comm__nexth2 {
	margin: 0;
	color: var(--tow-maroon);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -0.8px;   /* measured at 390, 820 and 1440; was `normal` */
	text-align: center;
}

.tow-ab-comm__nexttext { color: var(--tow-maroon); text-align: center; }
.tow-ab-comm__nexttext p { margin: 0 0 20px; }

/* The button MODULE is 94 tall around a 54px anchor -- 40 of it ABOVE. */
.tow-ab-comm__btn { padding-top: 40px; text-align: center; }

/* Body links on this page are BLACK and not underlined, as on our-team. */
.tow-ab-hero__intro a,
.tow-ab-bg__aside a { color: inherit; }

/* --- About, tablet and phone. Each value is the original's builder setting
   for that node at that breakpoint (specs/about-morton-chiropractor). --- */
@media (max-width: 1200px) {
	.tow-ab-bg__photo { margin: 0; }
	.tow-ab-care__quote { font-size: 45px; }
}

@media (max-width: 992px) {
	.tow-ab-hero__text { margin-bottom: 20px; }
	.tow-ab-hero__title { margin: 0 20px 20px 0; font-size: 24px; }
	.tow-ab-hero__intro { margin: 0 20px 20px 0; }

	.tow-ab-why,
	.tow-ab-bg,
	.tow-ab-care,
	.tow-ab-built,
	.tow-ab-comm { padding-top: 60px; padding-bottom: 40px; }
	.tow-ab-why__h2,
	.tow-ab-care__h2,
	.tow-ab-built__h2,
	.tow-ab-comm__h2 { font-size: 3.4rem; }
	.tow-ab-bg__h2 { font-size: 32px; }

	.tow-ab-bg__lead1 { font-size: 20px; }
	.tow-ab-bg__lead2 { font-size: 58px; }
	.tow-ab-bg__cols { flex-wrap: wrap; }
	.tow-ab-bg__col { width: 100%; }

	.tow-ab-care__pic img { width: 54px; }
	.tow-ab-care__col:nth-child(odd) .tow-ab-care__title { font-size: 18px; }
	.tow-ab-care__col:nth-child(2) .tow-ab-care__title { font-size: 16px; }
	.tow-ab-care__notetext { font-size: 16px; }
	.tow-ab-care__col:nth-child(2) .tow-ab-care__note { padding-bottom: 10px; }
	.tow-ab-care__col:nth-child(2) .tow-ab-care__notetext { margin-bottom: 0; }
	.tow-ab-care__quote { font-size: 40px; }
}

@media screen and (max-width: 801px) {
	.tow-ab-hero__title .text-highlight { font-size: 45px; line-height: 49.5px; }
	.tow-ab-care__quote .quotes { font-size: 30px; line-height: 1.2; }
}

@media (max-width: 768px) {
	.tow-ab-hero { padding: 0; }
	.tow-ab-hero__inner { flex-wrap: wrap; }
	.tow-ab-hero__text { width: 100%; }
	.tow-ab-hero__photo { width: 100%; max-width: 400px; margin-inline: auto; }
	.tow-ab-hero__title { margin-left: 20px; font-size: 28px; }
	.tow-ab-hero__intro { margin-left: 20px; }

	.tow-ab-why,
	.tow-ab-bg,
	.tow-ab-care,
	.tow-ab-built,
	.tow-ab-comm { padding: 30px 20px 40px; }
	.tow-ab-why__h2,
	.tow-ab-bg__h2,
	.tow-ab-care__h2,
	.tow-ab-built__h2,
	.tow-ab-comm__h2 { font-size: 2.4rem; }
	.tow-ab-why__card { max-width: 100%; }
	.tow-ab-why__cardtext { margin-bottom: -20px; padding: 20px 15px; }

	.tow-ab-bg__lead { gap: 10px; }
	.tow-ab-bg__lead1 { font-size: 16px; }
	.tow-ab-bg__lead2 { font-size: 45px; line-height: 54px; white-space: normal; }
	.tow-ab-bg__col,
	.tow-ab-bg__cols > .tow-ab-bg__col:last-child { padding: 0; }
	.tow-ab-bg__col .tow-ab-card { padding: 20px 10px 0; }
	.tow-ab-bg__col .tow-ab-card--paw { padding: 25px 10px 0; }
	.tow-ab-card__mark img { width: 24px; }
	.tow-ab-card__body { width: calc(100% - 49px); }
	.tow-ab-bg__col .tow-ab-card--has-title { padding: 15px 10px 20px; }
	.tow-ab-bg__col .tow-ab-card--has-title .tow-ab-card__icon img { width: 24px; }
	.tow-ab-bg__col .tow-ab-card--has-title .tow-ab-card__titlewrap { width: calc(100% - 49px); }

	.tow-ab-care__cards { flex-wrap: wrap; }
	.tow-ab-care__col { width: 100%; max-width: 400px; margin-inline: auto; }
	.tow-ab-care__col:nth-child(2) { margin-top: 40px; margin-bottom: 40px; }
	.tow-ab-care__col:nth-child(n) .tow-ab-care__title { font-size: 16px; }
	.tow-ab-care__col:nth-child(1) .tow-ab-care__note { padding-bottom: 0; }
	.tow-ab-care__col:nth-child(1) .tow-ab-care__notetext { margin-bottom: 0; }
	.tow-ab-care__col:nth-child(3) .tow-ab-care__notetext { margin-bottom: -25px; }
	.tow-ab-care__quote { font-size: 38px; line-height: 45.6px; letter-spacing: 0; }

	.tow-ab-built__h2 { margin-bottom: 20px; }
	.tow-ab-built__cols { flex-wrap: wrap; justify-content: center; }
	.tow-ab-built__col { width: 100%; max-width: 400px; }
	/* Stacked and centred, so the inner-edge inset goes away. */
	.tow-ab-built__col:first-child { margin-right: 0; margin-bottom: 40px; padding: 20px 0 0; }
	.tow-ab-built__col:last-child { margin-left: 0; padding: 20px 0; }
	.tow-ab-built__col:first-child .tow-ab-built__card { margin: 0 0 20px; padding: 15px 10px 0; }
	.tow-ab-built__col:last-child .tow-ab-built__card { margin: 0 0 -10px; padding: 15px 10px 0; }
	.tow-ab-built__card .tow-ab-card__icon img { width: 24px; }
	.tow-ab-built__card .tow-ab-card__titlewrap { width: calc(100% - 49px); }
	.tow-ab-built__card .tow-ab-card__title { font-size: 20px; }

	.tow-ab-comm__card { max-width: 100%; justify-content: start; }
	.tow-ab-comm__cardtext { width: 100%; margin-bottom: -10px; padding: 20px 15px; }
	.tow-ab-comm__nexth2 { font-size: 24px; }
	.tow-ab-comm__btn { padding-top: 20px; }
	.tow-ab-comm .tow-button--path { font-size: 14px; }
}

@media screen and (max-width: 450px) {
	.tow-ab-hero__title .text-highlight { font-size: 40px; line-height: 44px; }
	.tow-ab-hero__photo img { max-width: 100%; }
}

/* ===========================================================================
 * COLD LASER THERAPY — six rows, node 206itrewjnq3 down to 7zq9jcr15d82.
 * 600.00, 862.20, 887.59, 1019.28, 709.09, 406.20.
 *
 * Built from docs/spec-cold-laser-therapy.md. Per docs/survey-remaining-seven.md
 * shockwave-therapy is these six rows in the same order with the same three
 * odd container widths, so these classes are meant to serve both.
 *
 * THE THREE ODD CONTAINERS ARE MARGINS, NOT WIDTHS: 1268 is `0 66px` in 1400,
 * 1400 is no margin at all, 1090 is `0 155px`. Written as margins because a
 * rounded max-width cost this build a row on the About page.
 * ======================================================================== */

/* --- Row 1, hero (600). The min-height is the ORIGINAL ROW's own
       fl-row-custom-height setting, not a prop. --- */
.tow-cl-hero {
	display: flex;
	min-height: 600px;
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.tow-cl-hero__inner {
	display: flex;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

/* 840 / 360. Both columns are centred vertically; the right one is empty. */
.tow-cl-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 70%;
}

.tow-cl-hero__spacer { width: 30%; }

/* THREE BLOCK SPANS, NOT A LINE: a 24px label tracked at 3px, a 50px title,
   and 90px of Tangerine. 48.4 + 55 + 129 = 232.4. */
.tow-cl-hero__title {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 50px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-cl-hero__title .sub-label {
	display: block;
	padding: 0 0 22px;
	font-size: 24px;
	font-weight: 400;
	line-height: 26.4px;
	letter-spacing: 3px;
}

.tow-cl-hero__title .main-title {
	display: block;
	font-size: 50px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: -0.8px;
}

.tow-cl-hero__title .text-highlight {
	display: block;
	padding: 30px 0 0;
	font-family: var(--tow-font-script);
	font-size: 90px;
	font-weight: 400;
	line-height: 99px;
	letter-spacing: 1px;
}

/* A NEGATIVE 20 at the foot, which is what leaves the empty font module
   sitting flush under it. */
.tow-cl-hero__intro { margin: 20px 20px -20px; color: var(--tow-black); }
.tow-cl-hero__intro p { margin: 0 0 20px; }

/* --- Row 2, "Pain Pills Hide the Problem" (862.20), container 1268. --- */
.tow-cl-pills {
	padding: 40px 20px 60px;
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: cover;
}

.tow-cl-pills__inner {
	display: flex;
	flex-direction: column;
	max-width: 1268px;
	margin-inline: auto;
}

.tow-cl-pills__h2 {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;   /* the literal, not 1.4 -- 38 x 1.4 renders 53.19 */
	letter-spacing: -0.8px;
	text-align: center;
}

/* 800 x 149.64 on its own photograph, with a RED border that is 1px top and
   bottom and 3px at the sides. */
.tow-cl-claim {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
	max-width: 800px;
	margin: 20px auto 30px;
	padding: 20px 40px 10px;
	border: solid rgb(229, 30, 14);
	border-width: 1px 3px;
	border-radius: 20px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.21);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.tow-cl-claim__row {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 50px;
}

.tow-cl-claim__mark {
	display: flex;
	flex: none;
	line-height: 0;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100px;
}

/* The picture hangs 10px above its cell. */
.tow-cl-claim__mark img { display: block; width: 70px; height: auto; margin: -10px 0 0; }

/* 19px/400 on a 27.55 line -- the size insurance-billing's logo strip uses and
   nothing else on the site does. */
/* Not a width: the row's leftover after the mark, the gap and the 195 margin. */
.tow-cl-claim__text {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0 195px -5px 0;
	color: var(--tow-white);
	font-size: 19px;
	line-height: 27.55px;
}

.tow-cl-claim__text p { margin: 0 0 20px; }

/* 28px of radius on a TRANSPARENT box with no border and no shadow. The radius
   is on nothing visible, and it is still the original's. */
.tow-cl-explain {
	display: flex;
	align-items: center;
	gap: 40px;
	width: 80%;
	margin: 0 auto 20px;
	padding: 40px 48px;
	border-radius: 28px;
}

/* 45% and 55%, and together with the 40 gap they overflow, so both shrink in
   proportion to their content widths -- which is where 394.45 comes from. */
.tow-cl-explain__pic { display: flex; flex: 0 1 auto; gap: 10px; width: 45%; line-height: 0; }
.tow-cl-explain__pic img { display: block; width: 100%; height: auto; border-radius: 16px; }

.tow-cl-explain__side {
	display: flex;
	flex: 0 1 auto;
	flex-direction: column;
	width: 55%;
	min-width: 0;
	gap: 10px;
	padding: 0 40px 0 0;
}

.tow-cl-explain__box { border-radius: 12px; }
.tow-cl-explain__icon { display: block; margin-top: 5px; line-height: 0; }
.tow-cl-explain__icon img { display: block; width: 50px; height: auto; }

.tow-cl-explain__title {
	margin: 10px 0 20px;
	color: var(--tow-maroon);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
}

.tow-cl-explain__body { margin: 0 0 20px; padding: 0 0 10px; color: var(--tow-black); }

/* 60px of Tangerine on an 87 line. */
.tow-cl-pills__script {
	margin: 20px 20px -20px;
	color: var(--tow-black);
	font-family: var(--tow-font-script);
	font-size: 60px;
	line-height: 87px;
	text-align: center;
}

/* The paragraph is 87 and its module 107: the 20px margin is the module's own
   height, not space below it. */
.tow-cl-pills__script p { margin: 0 0 20px; }

/* --- Row 3, "Why Dr. Karen's Background Changes the Result" (887.59). --- */
.tow-cl-bkg {
	padding: 50px 20px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.tow-cl-bkg__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* 717 / 483. */
.tow-cl-bkg__col {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 59.75%;
	padding-right: 40px;
}

.tow-cl-bkg__spacer { box-sizing: border-box; width: 40.25%; padding-left: 40px; }

/* 38/700 on a 41.8 LINE and LEFT-aligned, where every other h2 on this page is
   centred on 53.2. */
.tow-cl-bkg__h2 {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 38px;
	font-weight: 700;
	line-height: 41.8px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-cl-bkg__lead { margin: 0 20px 20px; color: var(--tow-black); }
.tow-cl-bkg__lead p { margin: 0 0 20px; }

/* A MAROON panel inset 20 from the left of an outer box that has no paint of
   its own -- the outer box is what carries the 135.406 right margin. */
.tow-cl-bkg__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 80%;
	margin: 0 0 20px;
}

.tow-cl-bkg__panelbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-left: 20px;
	padding: 20px 20px 10px;
	background: var(--tow-maroon);
	/* 20px corners -- the geometry pass cannot see a radius */
	border-radius: 20px;
}

.tow-cl-bkg__paneltext { margin: 0 0 -10px; color: var(--tow-white); }
.tow-cl-bkg__paneltext p { margin: 0 0 20px; }

.tow-cl-bkg__close { margin: 20px; color: var(--tow-black); }
.tow-cl-bkg__close p { margin: 0 0 20px; }

/* --- Row 4, "How It Works Inside Your Body" (1019.28), container 1400. --- */
.tow-cl-how {
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	color: var(--tow-white);
}

.tow-cl-how__inner {
	display: flex;
	flex-direction: column;
	max-width: 1400px;
	margin-inline: auto;
}

.tow-cl-how__h2 {
	margin: 20px;
	color: var(--tow-white);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;   /* the literal, not 1.4 -- 38 x 1.4 renders 53.19 */
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-cl-how__lead {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 890px;
	margin: 20px auto;
}

.tow-cl-how__leadtext { text-align: center; }
.tow-cl-how__leadtext p { margin: 0 0 20px; }

/* 33.33 / 33.34 / 33.33 -- the middle column really is 0.14 wider. */
.tow-cl-cells { display: flex; }
.tow-cl-cells__col { width: 33.33%; }
.tow-cl-cells__col:nth-child(2) { width: 33.34%; }

/* flow-root: the picture's 5px top margin and the last paragraph's 20px bottom
   margin are INSIDE this card on the original -- 202.48 around 177.48 of
   content. As a plain block both escaped and every card was 25 short. */
.tow-cl-cell {
	display: flow-root;
	margin: 20px;
	border-radius: 12px;
	text-align: center;
}
.tow-cl-cell__pic { margin: 5px 0 0; line-height: 0; }
.tow-cl-cell__pic img { display: block; width: 80px; height: auto; margin-inline: auto; }

.tow-cl-cell__title {
	margin: 10px 0 20px;
	color: var(--tow-white);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: normal;
}

.tow-cl-cell__text p { margin: 0 0 20px; padding: 0 0 10px; }

.tow-cl-how__band { display: flex; flex-direction: column; }

/* Inline-blocks, middle-aligned: the icon, then a wrap 80px short of the box
   holding a shrink-wrapped title. The wrap's own body line is what puts the
   title 1.24px low on phones, so it has to exist. */
.tow-cl-how__badge { width: 40%; margin: 20px auto; text-align: left; }

.tow-cl-how__badgeicon { display: inline-block; margin-right: 10px; vertical-align: middle; line-height: 0; }
.tow-cl-how__badgeicon img { display: block; width: 50px; height: auto; }
.tow-cl-how__badgewrap { display: inline-block; width: calc(100% - 80px); vertical-align: middle; }

/* An h3 at 30/700 on 36 -- the only 30px type on the page. */
.tow-cl-how__badgetitle {
	display: inline-block;
	margin: 0;
	vertical-align: middle;
	color: var(--tow-white);
	font-size: 30px;
	font-weight: 700;
	line-height: 36px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-cl-how__bandtext {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 890px;
	margin: 0 auto 20px;
	text-align: center;
}

.tow-cl-how__bandtext p { margin: 0 0 20px; }

/* Three WHITE cards, each with a 3px maroon top border. */
.tow-cl-tools { display: flex; }
/* THE THREE PANELS ARE ONE HEIGHT, the tallest of them -- equal-height columns
   on the original. As plain blocks the middle one stood 29px short, and no row
   height could see it: the column around it was already the right height. */
.tow-cl-tools__col { display: flex; flex-direction: column; width: 33.33%; }
.tow-cl-tools__col:nth-child(2) { width: 33.34%; }

.tow-cl-tool {
	/* flow-root for the same reason as .tow-cl-cell: the text's bottom margin
	   belongs inside the white card. */
	display: flow-root;
	margin: 0 10px;
	padding-bottom: 20px;
	border-top: 3px solid var(--tow-maroon);
	border-radius: 20px;
	background: var(--tow-white);
	flex: 1;
}

.tow-cl-tool__head { margin: 20px 20px 0; }
/* -20 cancels the paragraph's 20; the space under the text is the card's padding. */
.tow-cl-tool__text { margin: 0 20px -20px; }

.tow-cl-tool__icon { display: inline-block; margin-right: 10px; vertical-align: middle; line-height: 0; }
.tow-cl-tool__icon--30 img { display: block; width: 30px; height: auto; }
.tow-cl-tool__icon--35 img { display: block; width: 35px; height: auto; }
.tow-cl-tool__titlewrap { display: inline-block; width: calc(100% - 60px); vertical-align: middle; }
.tow-cl-tool__icon--35 + .tow-cl-tool__titlewrap { width: calc(100% - 65px); }

/* 400 WEIGHT, where every other title on this page is 700. */
.tow-cl-tool__title {
	display: inline-block;
	margin: 0 0 20px;
	vertical-align: middle;
	color: var(--tow-black);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
	text-align: left;
}

.tow-cl-tool__text p { margin: 0 0 20px; padding: 0 0 10px; color: var(--tow-black); text-align: left; }

/* --- Row 5, "Is This Right for You?" (709.09), container 1090. --- */
.tow-cl-fit { padding: 50px 20px 90px; }

.tow-cl-fit__inner {
	display: flex;
	flex-direction: column;
	max-width: 1090px;
	margin-inline: auto;
}

.tow-cl-fit__h2 {
	margin: 20px 20px 40px;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;   /* the literal, not 1.4 -- 38 x 1.4 renders 53.19 */
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-cl-fit__cols { display: flex; }
.tow-cl-fit__col { width: 50%; }

/* A GREEN card and a PINK one -- the only tinted panels on the site. */
.tow-cl-fit__card {
	padding: 20px;
	border: 1px solid;
	border-radius: 12px;
	height: 100%;
	box-sizing: border-box;
}

.tow-cl-fit__col--yes .tow-cl-fit__card { margin: 0 20px 0 0; border-color: rgb(180, 227, 205); background: rgb(240, 253, 244); }
.tow-cl-fit__col--no  .tow-cl-fit__card { margin: 0 0 0 20px; border-color: rgb(227, 198, 197); background: rgb(254, 242, 242); }

.tow-cl-fit__box {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 20px 0;
	padding: 0 40px 0 0;
	border-radius: 20px;
}

/* TOP, where the title wrap beside it is middle. */
.tow-cl-fit__icon { display: inline-block; margin-right: 20px; vertical-align: top; line-height: 0; }
.tow-cl-fit__icon img { display: block; width: 30px; height: auto; }
.tow-cl-fit__head,
.tow-cl-fit__text { width: 100%; }
.tow-cl-fit__titlewrap { display: inline-block; width: calc(100% - 50px); vertical-align: middle; }

.tow-cl-fit__title {
	margin: 0 0 20px;
	color: var(--tow-black);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: normal;
}

.tow-cl-fit__text ul { margin: 0 0 10px; padding: 0 0 0 20px; list-style: disc; }
.tow-cl-fit__text li { margin: 0 0 20px; color: var(--tow-black); }

/* --- Row 6, "Find Out If Cold Laser Fits" (406.20). --- */
.tow-cl-cta {
	padding: 60px 20px 40px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.tow-cl-cta__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-cl-cta__h2 {
	margin: 20px 20px 0;
	color: var(--tow-white);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;   /* the literal, not 1.4 -- 38 x 1.4 renders 53.19 */
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-cl-cta__box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 850px;
	margin: 0 auto 20px;
}

.tow-cl-cta__text { margin: 12px 0 0; color: var(--tow-white); text-align: center; }
.tow-cl-cta__text p { margin: 0 0 20px; }

.tow-cl-cta__btn { margin: 0 0 10px; text-align: center; }

/* --- Cold laser, tablet and phone. Each value is the original's builder
   setting for that node at that breakpoint (specs/cold-laser-therapy). --- */
@media (max-width: 1200px) {
	.tow-cl-bkg { padding-bottom: 60px; }
	.tow-cl-bkg__panel { width: 100%; }
}

@media (max-width: 992px) {
	.tow-cl-hero { min-height: 485px; padding: 60px 20px 0; background-position: left center; }
	.tow-cl-hero__inner { flex-direction: column; justify-content: center; }
	.tow-cl-hero__text { width: auto; margin-bottom: 20px; }
	/* The empty desktop column stacks under the text, 1px tall, on tablet. */
	.tow-cl-hero__spacer { width: auto; height: 1px; }
	.tow-cl-hero__title { margin: 0 20px 20px 0; font-size: 40px; line-height: 44px; }
	.tow-cl-hero__title .main-title { font-size: 40px; line-height: 44px; }
	.tow-cl-hero__intro { margin-top: 0; margin-left: 0; }

	.tow-cl-pills { padding: 60px 20px 40px; }
	.tow-cl-pills__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-cl-claim__row { gap: 20px; }
	.tow-cl-claim__text { margin-right: 130px; }
	.tow-cl-explain { flex-direction: column; padding: 40px 0; }
	.tow-cl-explain__pic { width: 50%; }
	.tow-cl-pills__script { font-size: 55px; line-height: 79.75px; }

	.tow-cl-bkg { padding: 20px 40px 30px; }
	.tow-cl-bkg__col { width: 100%; }
	.tow-cl-bkg__spacer { display: none; }
	.tow-cl-bkg__h2 { margin: 40px 20px 0; font-size: 30px; line-height: 33px; text-align: center; }
	.tow-cl-bkg__lead { margin-top: 30px; text-align: center; }
	.tow-cl-bkg__panel { margin-bottom: 0; }
	.tow-cl-bkg__close { margin-top: 40px; text-align: center; }

	.tow-cl-how { padding: 60px 20px 80px; }
	.tow-cl-how__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-cl-how__badge { width: 70%; }
	/* The builder's medium column width: 33%, not a third. */
	.tow-cl-cells__col,
	.tow-cl-cells__col:nth-child(2),
	.tow-cl-tools__col,
	.tow-cl-tools__col:nth-child(2) { width: 33%; }
	.tow-cl-tool__head { margin-top: 10px; }
	.tow-cl-tools__col:nth-child(1) .tow-cl-tool { padding-bottom: 10px; }
	.tow-cl-tools__col:nth-child(n+2) .tow-cl-tool { padding-bottom: 0; }

	.tow-cl-fit { padding: 60px 20px 40px; }
	.tow-cl-fit__h2 { font-size: 34px; line-height: 47.6px; }

	.tow-cl-cta { padding: 40px 40px 30px; }
	.tow-cl-cta__h2 { font-size: 34px; line-height: 47.6px; }
}

@media screen and (max-width: 801px) {
	.tow-cl-hero__title .sub-label { font-size: 20px; line-height: 22px; }
	.tow-cl-hero__title .text-highlight { font-size: 70px; line-height: 77px; }
}

@media (max-width: 768px) {
	.tow-cl-hero { padding: 50px 0 0; }
	.tow-cl-hero__spacer { display: none; }
	.tow-cl-hero__title { margin-left: 20px; font-size: 38px; line-height: 41.8px; text-align: center; }
	.tow-cl-hero__title .main-title { font-size: 38px; line-height: 41.8px; }
	.tow-cl-hero__intro { margin-left: 20px; text-align: center; }

	.tow-cl-pills { padding: 30px 20px 40px; }
	.tow-cl-pills__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-cl-claim { align-items: center; margin-bottom: 20px; padding: 20px 20px 10px; border-width: 2px 5px; }
	.tow-cl-claim__row { flex-direction: column; gap: 0; }
	.tow-cl-claim__mark { width: auto; }
	.tow-cl-claim__mark img { margin-top: 20px; }
	.tow-cl-claim__text { margin: 20px 0; text-align: center; }
	.tow-cl-explain { gap: 50px; width: 100%; padding: 40px 25px; }
	.tow-cl-explain__pic { width: 100%; }
	.tow-cl-explain__pic img { margin-bottom: -30px; }
	.tow-cl-explain__side { gap: 5px; width: 100%; padding-right: 0; }
	.tow-cl-explain__box { padding: 15px 10px 0; }
	.tow-cl-explain__title { font-size: 18px; }
	.tow-cl-explain__body { margin-bottom: 0; font-size: 16px; }
	.tow-cl-pills__script { margin: 20px 10px; font-size: 38px; line-height: 45.6px; }

	.tow-cl-bkg { padding: 30px 20px 50px; }
	.tow-cl-bkg__col { padding-right: 0; }
	.tow-cl-bkg__h2 { margin-top: 20px; font-size: 24px; line-height: 26.4px; }
	.tow-cl-bkg__lead { margin-top: 50px; }
	.tow-cl-bkg__close { margin: 10px 20px; }

	.tow-cl-how { padding: 30px 20px 40px; }
	.tow-cl-how__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-cl-cells,
	.tow-cl-tools { flex-direction: column; }
	.tow-cl-cells__col,
	.tow-cl-cells__col:nth-child(2),
	.tow-cl-tools__col,
	.tow-cl-tools__col:nth-child(2) { width: auto; }
	.tow-cl-cell { margin-bottom: 0; padding: 15px 10px 20px; }
	.tow-cl-cell__title { font-size: 18px; }
	.tow-cl-cell__text { font-size: 16px; }
	.tow-cl-how__badge { width: 100%; padding: 15px 10px 20px; }
	.tow-cl-how__badgetitle { font-size: 18px; line-height: 21.6px; letter-spacing: 0; }
	.tow-cl-tools__col:nth-child(n) .tow-cl-tool { margin: 0; padding-bottom: 20px; }
	.tow-cl-tools__col:nth-child(2) .tow-cl-tool { margin: 20px 0; }
	.tow-cl-tool__head { margin: 25px 30px 0; }
	.tow-cl-tool__text { margin: 0 30px -20px; font-size: 16px; }
	.tow-cl-tool__title { font-size: 18px; }

	.tow-cl-fit { padding: 30px 20px 40px; }
	.tow-cl-fit__h2 { margin-bottom: 20px; font-size: 24px; line-height: 33.6px; }
	.tow-cl-fit__cols { flex-direction: column; align-items: center; }
	.tow-cl-fit__col { width: 100%; max-width: 400px; }
	.tow-cl-fit__card { height: auto; }
	.tow-cl-fit__col--yes .tow-cl-fit__card { margin: 0 0 40px; padding: 20px 0 0; }
	.tow-cl-fit__col--no .tow-cl-fit__card { margin: 0; padding: 20px 0; }
	.tow-cl-fit__col--yes .tow-cl-fit__box { margin: 0 0 20px; }
	.tow-cl-fit__col--no .tow-cl-fit__box { margin: 0 0 -10px; }
	.tow-cl-fit__box { padding: 15px 10px 0; }
	.tow-cl-fit__icon img { width: 24px; }
	.tow-cl-fit__titlewrap { width: calc(100% - 49px); }
	.tow-cl-fit__title { font-size: 20px; }

	.tow-cl-cta { padding: 40px 20px 25px; }
	.tow-cl-cta__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-cl-cta__text { font-size: 16px; }
	.tow-cl-cta .tow-button--path { font-size: 14px; }
}

@media screen and (max-width: 450px) {
	.tow-cl-hero__title .sub-label { font-size: 14px; line-height: 15.4px; letter-spacing: 2px; }
	.tow-cl-hero__title .text-highlight { font-size: 38px; line-height: 41.8px; }
}

/* ===========================================================================
 * SHOCKWAVE THERAPY — six rows, node nke5t30i8vbx down to 1h3cmnolx2r8.
 * 706.41, 804.63, 1168.00, 1245.23, 1011.38, 524.19.
 *
 * Shares a six-row SHELL with cold-laser-therapy and almost nothing else: both
 * text columns are on the RIGHT here, row 2 has no closing script line, row 3
 * gains a heading and a full-width panel, row 4 has five groups with a FOUR-
 * column band on WHITE in BLACK type, and row 5's card title is 28/700 with a
 * negative 5px top margin where cold laser's is a 22/700 prefix. Its own
 * classes on purpose — reusing another page's cards has cost this build twice.
 * ======================================================================== */

/* --- Row 1, hero (706.41). THE TEXT IS ON THE RIGHT. --- */
.tow-sw-hero {
	display: flex;
	min-height: 600px;
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: cover;
}

.tow-sw-hero__inner {
	display: flex;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-sw-hero__spacer { width: 45%; }

.tow-sw-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 55%;
}

/* ONE span, not cold laser's three: a 24px label tracked at 3px with 22 of
   padding under it, then two plain 50px lines. 48.4 + 110 = 158.41. */
.tow-sw-hero__title {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 50px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-sw-hero__title .sub-label {
	display: block;
	padding: 0 0 22px;
	font-size: 24px;
	font-weight: 400;
	line-height: 26.4px;
	letter-spacing: 3px;
}

.tow-sw-hero__intro { margin: 20px 20px -20px; color: var(--tow-black); }
.tow-sw-hero__intro p { margin: 0 0 20px; }

/* The WHOLE paragraph is 60px Tangerine on an 87 line; the .text-highlight
   span inside it is inline and inherits. */
.tow-sw-hero__script {
	margin: 20px 20px -20px;
	color: var(--tow-black);
	font-family: var(--tow-font-script);
	font-size: 60px;
	font-weight: 400;
	line-height: 87px;
}

.tow-sw-hero__script p { margin: 0 0 20px; }

/* --- Row 2, "Why Your Injury Stopped Healing" (804.63), container 1268. --- */
/* padding-bottom is 0, not 60: this page has no closing script line here. */
.tow-sw-why { padding: 40px 20px 0; }

.tow-sw-why__inner {
	display: flex;
	flex-direction: column;
	max-width: 1268px;
	margin-inline: auto;
}

.tow-sw-why__h2 {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: center;
}

/* 994 wide with a 3px red border on ALL FOUR sides -- cold laser's equivalent
   is 800 with 1px top and bottom. */
.tow-sw-claim {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
	max-width: 994px;
	margin: 20px auto 30px;
	padding: 20px 40px 10px;
	border: 3px solid rgb(229, 30, 14);
	border-radius: 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	/* the soft 21% shadow every panel of this shape carries */
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.21);
}

.tow-sw-claim__row {
	display: flex;
	align-items: stretch;
	justify-content: start;
	gap: 50px;
}

/* A 60px FLEX-BASIS holding a 70px picture: it overhangs by 10 on the left.
   On tablet the row turns into a column and the same 60 becomes its height. */
.tow-sw-claim__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 60px;
	gap: 10px;
	min-width: 0;
	min-height: 0;
	line-height: 0;
}

/* flex: none, or the 60px cell squeezes the 70px picture to 60. */
.tow-sw-claim__mark img { display: block; flex: none; width: 70px; max-width: none; height: auto; margin: -10px 0 0; }

/* Not the remainder of the row: max-width 52% of it, which is 472.16 here.
   Left to fill, the text wrapped to fewer lines and the box came out short. */
.tow-sw-claim__cell { display: flex; flex-direction: column; gap: 10px; max-width: 52%; }

.tow-sw-claim__text {
	margin: 0 0 -5px;
	color: var(--tow-white);
	font-size: 19px;
	line-height: 27.55px;
}

.tow-sw-claim__text p { margin: 0 0 20px; }

/* 28px of radius, transparent, padded 20 at the top and 40 at the foot with
   NOTHING at the sides. */
.tow-sw-scar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 40px;
	width: 80%;
	margin: 0 auto 20px;
	padding: 20px 0 40px;
	border-radius: 28px;
}

/* 22px/700 on a 24.2 line -- a heading at barely more than body size. */
.tow-sw-scar__h3 {
	margin: 0;
	color: var(--tow-maroon);
	font-size: 22px;
	font-weight: 700;
	line-height: 24.2px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-sw-scar__text { margin: 0 0 -20px; color: rgb(26, 26, 26); text-align: center; }

/* THE LAST LINE OF THE THREE IS BLACK where the others are #1a1a1a. One
   paragraph, one shade apart -- and the only way to know is to compare them. */
.tow-sw-scar__text--last { color: var(--tow-black); }

/* The closing line is 50px TANGERINE on a 72.5 line, not body text. */
.tow-sw-scar__text--last {
	font-family: var(--tow-font-script);
	font-size: 50px;
	font-weight: 400;
	line-height: 72.5px;
	letter-spacing: 2px;      /* 2px on desktop and tablet; normal on a phone */
}
.tow-sw-scar__text p { margin: 0 0 20px; }

/* --- Row 3, "Why Dr. Karen Applies Shockwave Differently" (1168). --- */
.tow-sw-bkg {
	padding: 50px 20px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.tow-sw-bkg__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-sw-bkg__cols { display: flex; }
.tow-sw-bkg__spacer { box-sizing: border-box; width: 50%; padding-left: 40px; }

.tow-sw-bkg__col {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 50%;
	padding-right: 40px;
}

.tow-sw-bkg__h2 {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 38px;
	font-weight: 700;
	line-height: 41.8px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-sw-bkg__lead { margin: 0 20px; color: var(--tow-black); }
.tow-sw-bkg__lead p { margin: 0 0 20px; }

.tow-sw-bkg__h3 {
	margin: 10px 20px 40px;
	color: var(--tow-black);
	font-size: 22px;
	font-weight: 700;
	line-height: 24.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

/* The same shape as cold laser's row-3 panel: an outer box with no paint
   around a MAROON one inset 20 from its left. */
.tow-sw-bkg__panel { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }

.tow-sw-bkg__panelbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-left: 20px;
	padding: 20px 20px 10px;
	background: var(--tow-maroon);
	border-radius: 20px;
}

/* A 28px LINE, not the body's 29 -- and 25.2px on phones, written as px: as
   the ratio 1.4 Chrome rounds each phone line a sixty-fourth short. Three paragraphs of 4, 5 and 7 lines came
   out 4, 5 and 7 pixels tall respectively -- 16 across the panel. */
.tow-sw-bkg__paneltext { margin: 0 0 -10px; color: var(--tow-white); line-height: 28px; }
.tow-sw-bkg__paneltext p { margin: 0 0 20px; }

/* A full-width WHITE panel below the columns. Cold laser has no equivalent. */
.tow-sw-bkg__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 40px 0 20px;
	padding: 20px;
	border-radius: 20px;
	background: var(--tow-white);
	/* its own shadow, at 13% and offset a pixel each way -- not the 21% every other panel uses */
	box-shadow: 1px 1px 12px 0 rgba(5, 5, 5, 0.13);
}

/* 50px TANGERINE on a 60px line. As body text this panel was 62 short. */
.tow-sw-bkg__notetext {
	margin: 0 0 -20px;
	color: var(--tow-black);
	font-family: var(--tow-font-script);
	font-size: 50px;
	font-weight: 400;
	line-height: 60px;
	letter-spacing: 2px;
	text-align: center;
}
.tow-sw-bkg__notetext p { margin: 0 0 20px; }

/* --- Row 4, "How It Works Inside Your Body" (1245.23), 1400, WHITE. --- */
/* On WHITE in BLACK type, where cold laser's equivalent row is a photograph in
   white. Only the h2 and the "One Tool" h3 are maroon. */
.tow-sw-how { padding: 60px 20px; background-color: var(--tow-white); }

.tow-sw-how__inner {
	display: flex;
	flex-direction: column;
	max-width: 1400px;
	margin-inline: auto;
}

.tow-sw-how__h2 {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-sw-how__lead {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 890px;
	margin: 20px auto;
}

.tow-sw-how__leadtext { color: var(--tow-black); text-align: center; }
.tow-sw-how__leadtext p { margin: 0 0 20px; }

.tow-sw-how__leadh3 {
	margin: 0;
	color: var(--tow-black);
	font-size: 30px;
	font-weight: 700;
	line-height: 42px;
	letter-spacing: -0.8px;
	text-align: center;
}

/* FOUR columns of 350, not cold laser's three of 466. */
.tow-sw-does { display: flex; }
.tow-sw-does__col { width: 25%; }

.tow-sw-cell { display: flow-root; margin: 20px; text-align: center; }
.tow-sw-cell__pic { margin: 5px 0 0; line-height: 0; }
.tow-sw-cell__pic img { display: block; width: 100px; height: auto; margin-inline: auto; }

.tow-sw-cell__title {
	margin: 10px 0 20px;
	color: var(--tow-black);
	font-size: 24px;
	font-weight: 700;
	line-height: 28.8px;
	letter-spacing: normal;
}

.tow-sw-cell__text p { margin: 0 0 20px; padding: 0 0 10px; color: var(--tow-black); }

.tow-sw-how__band { display: flex; flex-direction: column; }

/* A 40% COLUMN, its title centred in it. */
.tow-sw-how__badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 40%;
	margin: 20px auto;
}

.tow-sw-how__badgetitle {
	margin: 50px 0 0;
	color: var(--tow-maroon);
	font-size: 30px;
	font-weight: 700;
	line-height: 42px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-sw-how__bandtext {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 890px;
	margin: 0 auto 20px;
	color: var(--tow-black);
	text-align: center;
}

/* BOLD: at 1440 the old side margins hid it by forcing the width. */
.tow-sw-how__bandtext p { margin: 0 0 20px; font-weight: 700; }

/* Three cards on #f4f4f4 -- NOT white -- each with a 3px maroon top border. */
.tow-sw-tools { display: flex; }
.tow-sw-tools__col { display: flex; width: 33.33%; }
.tow-sw-tools__col:nth-child(2) { width: 33.34%; }

.tow-sw-tool {
	display: flow-root;
	margin: 0 10px;
	width: 100%;
	padding-bottom: 20px;
	border-top: 3px solid var(--tow-maroon);
	border-radius: 20px;
	background: #f4f4f4;
}

/* A FLEX row, which is the only arrangement that gets all three cards right.
   As inline-blocks, card 2's title was long enough to push the mark onto its
   own line; adding nowrap fixed that but then let card 3's title shrink-wrap
   against the FULL head width rather than the space left beside its mark, so
   it sat on one line where the original's takes two. In flex the title gets
   the remainder by construction, and being a flex item it keeps its own 10/20
   margins inside -- 58.8 for one line, 87.59 for two. */
.tow-sw-tool__head {
	display: flex;
	align-items: center;
	margin: 20px 20px 0;
}
/* -20 cancels the paragraph's 20; the space under the text is the card's padding. */
.tow-sw-tool__text { margin: 0 20px -20px; }

.tow-sw-tool__icon { display: block; flex: none; margin-right: 10px; line-height: 0; }
.tow-sw-tool__icon--30 img { display: block; width: 30px; height: auto; }
.tow-sw-tool__icon--35 img { display: block; width: 35px; height: auto; }
/* The original's title wrap is 60px short of the head (65 beside the 35px mark). */
.tow-sw-tool__titlewrap { min-width: 0; max-width: calc(100% - 60px); }
.tow-sw-tool__icon--35 + .tow-sw-tool__titlewrap { max-width: calc(100% - 65px); }

/* 700 weight, where cold laser's equivalent titles are 400. */
.tow-sw-tool__title {
	margin: 10px 0 20px;
	color: var(--tow-black);
	font-size: 24px;
	font-weight: 700;
	line-height: 28.8px;
	letter-spacing: normal;
	text-align: left;
}

.tow-sw-tool__text p { margin: 0 0 20px; padding: 0 0 10px; color: var(--tow-black); text-align: left; }

.tow-sw-how__close { margin: 50px 20px 0; color: var(--tow-black); text-align: center; }
.tow-sw-how__close p { margin: 0 0 20px; }

/* --- Row 5, "Is Shockwave Right for You?" (1011.38), container 1090. --- */
.tow-sw-fit { padding: 50px 20px 90px; background-color: #f2f2f2; }

.tow-sw-fit__inner {
	display: flex;
	flex-direction: column;
	max-width: 1090px;
	margin-inline: auto;
}

.tow-sw-fit__h2 {
	margin: 20px 20px 40px;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-sw-fit__cols { display: flex; }
.tow-sw-fit__col { width: 50%; }

.tow-sw-fit__card {
	box-sizing: border-box;
	height: 100%;
	padding: 20px;
	border: 1px solid;
	border-radius: 12px;
}

.tow-sw-fit__col--yes .tow-sw-fit__card { margin: 0 20px 0 0; border-color: rgb(180, 227, 205); background: rgb(240, 253, 244); }
.tow-sw-fit__col--no  .tow-sw-fit__card { margin: 0 0 0 20px; border-color: rgb(227, 198, 197); background: rgb(254, 242, 242); }

.tow-sw-fit__box {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 20px 0;
	padding: 0 40px 0 0;
	border-radius: 20px;
}

/* TOP, where the title wrap beside it is middle. */
.tow-sw-fit__icon { display: inline-block; margin-right: 20px; vertical-align: top; line-height: 0; }
.tow-sw-fit__icon img { display: block; width: 30px; height: auto; }
.tow-sw-fit__head,
.tow-sw-fit__text { width: 100%; }
.tow-sw-fit__titlewrap { display: inline-block; width: calc(100% - 50px); vertical-align: middle; }

/* 28/700 on a 39.2 line with a NEGATIVE 5px top margin -- insurance-billing's
   card title, not cold laser's 22/700 prefix. */
.tow-sw-fit__title {
	display: inline-block;
	margin: -5px 0 10px;
	vertical-align: middle;
	color: var(--tow-black);
	font-size: 28px;
	font-weight: 700;
	line-height: 39.2px;
	letter-spacing: -0.8px;
}

.tow-sw-fit__text { color: var(--tow-black); }
.tow-sw-fit__text p { margin: 0 0 20px; padding: 0 0 10px; }
.tow-sw-fit__text ul { margin: 0 0 10px; padding: 0 0 0 20px; list-style: disc; }
.tow-sw-fit__text li { margin: 0 0 20px; }

/* --- Row 6, "Request a Shockwave Consultation" (524.19). --- */
.tow-sw-cta {
	padding: 60px 20px 40px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.tow-sw-cta__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-sw-cta__h2 {
	margin: 20px 20px 0;
	color: var(--tow-white);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-sw-cta__box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 950px;
	margin: 20px auto;
}

.tow-sw-cta__text { margin: 12px 0 0; color: var(--tow-white); text-align: center; }
.tow-sw-cta__text p { margin: 0 0 20px; }
/* The button MODULE is 64 around a 54px anchor. */
.tow-sw-cta__btn { margin: 0 0 10px; text-align: center; }

/* --- Shockwave, tablet and phone. Each value is the original's builder
   setting for that node at that breakpoint (specs/shockwave-therapy). --- */
@media (max-width: 1200px) {
	.tow-sw-hero { background-position: center center; }
	.tow-sw-hero__title { margin-top: 0; }
	.tow-sw-scar__h3 { margin: 20px 0; }
	.tow-sw-bkg { padding-bottom: 60px; }
	.tow-sw-bkg__h3 { margin-top: 20px; margin-bottom: 20px; }
}

@media (max-width: 992px) {
	.tow-sw-hero { min-height: 400px; padding: 50px 20px 40px; background-position: right center; }
	.tow-sw-hero__inner { flex-direction: column; justify-content: center; }
	.tow-sw-hero__spacer { display: none; }
	.tow-sw-hero__text { width: auto; margin-bottom: 20px; }
	.tow-sw-hero__title { margin: 0 20px 20px 0; font-size: 40px; line-height: 44px; }
	.tow-sw-hero__intro,
	.tow-sw-hero__script { margin: 0 20px -20px 0; }

	.tow-sw-why { padding: 30px 20px 0; }
	.tow-sw-why__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-sw-claim__row { flex-direction: column; gap: 20px; }
	.tow-sw-claim__mark { align-self: flex-start; padding-top: 20px; }
	.tow-sw-claim__mark img { width: 50px; }
	.tow-sw-claim__cell { max-width: 91%; }
	.tow-sw-claim__text { margin-right: 130px; }
	.tow-sw-scar { gap: 20px; }
	.tow-sw-scar__h3 { margin: 0 0 0 20px; font-size: 30px; line-height: 33px; }
	.tow-sw-scar__text:not(.tow-sw-scar__text--last) { margin-top: 10px; }
	.tow-sw-scar__text--last { font-size: 45px; line-height: 65.25px; }

	.tow-sw-bkg { padding: 20px 40px 30px; background-position: right center; }
	.tow-sw-bkg__spacer { display: none; }
	.tow-sw-bkg__col { width: 100%; }
	.tow-sw-bkg__h2 { margin: 40px 20px 0; font-size: 30px; line-height: 33px; text-align: center; }
	.tow-sw-bkg__lead { margin-top: 30px; text-align: center; }
	.tow-sw-bkg__h3 { margin: 40px 20px; font-size: 30px; line-height: 33px; text-align: center; }
	.tow-sw-bkg__panel { margin-bottom: 0; }
	.tow-sw-bkg__notetext { font-size: 34px; line-height: 40.8px; }

	.tow-sw-how { padding: 60px 20px 80px; }
	.tow-sw-how__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-sw-tools { flex-wrap: wrap; }
	/* FLOATS, as the original's column group is here -- not a wrapping flex row.
	   The fourth step drops to a second line and, being a float, tucks in beside
	   the first step (29px taller than the other two) instead of starting a clean
	   line: 257px across and 29px higher at 820. */
	.tow-sw-does { display: flow-root; }
	.tow-sw-does__col { float: left; width: 33%; }
	.tow-sw-how__badge { width: 70%; }
	.tow-sw-tools__col,
	.tow-sw-tools__col:nth-child(2) { width: 50%; }
	.tow-sw-tools__col:nth-child(-n+2) .tow-sw-tool { margin-bottom: 40px; }
	.tow-sw-tool__head { margin-top: 10px; }
	.tow-sw-tools__col:nth-child(1) .tow-sw-tool { padding-bottom: 10px; }
	.tow-sw-tools__col:nth-child(n+2) .tow-sw-tool { padding-bottom: 0; }

	.tow-sw-fit { padding: 60px 20px 40px; }
	.tow-sw-fit__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-sw-fit__title { font-size: 24px; line-height: 33.6px; }

	.tow-sw-cta { padding: 40px 40px 30px; }
	.tow-sw-cta__h2 { font-size: 34px; line-height: 47.6px; }
}

@media (min-width: 769px) and (max-width: 992px) {
	/* A column the original shows only on tablet: empty, 1px tall. */
	.tow-sw-hero__inner::before { content: ""; height: 1px; }
}

@media screen and (max-width: 801px) {
	.tow-sw-hero__title .sub-label { font-size: 20px; line-height: 22px; }
}

@media (max-width: 768px) {
	.tow-sw-hero { padding: 50px 0 0; }
	.tow-sw-hero__title { margin-left: 20px; font-size: 38px; line-height: 41.8px; text-align: center; }
	.tow-sw-hero__intro { margin-left: 20px; text-align: center; }
	.tow-sw-hero__script { margin: 20px; font-size: 50px; line-height: 60px; text-align: center; }

	.tow-sw-why { padding: 30px 20px 0; }
	.tow-sw-why__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-sw-claim { align-items: center; margin-bottom: 20px; padding: 20px 20px 10px; }
	.tow-sw-claim__row { gap: 0; }
	.tow-sw-claim__mark { align-self: stretch; padding-top: 0; }
	.tow-sw-claim__mark img { margin-top: 0; }
	.tow-sw-claim__cell { max-width: 100%; }
	.tow-sw-claim__text { margin: 20px 0 -10px; text-align: center; }
	.tow-sw-scar { gap: 0; width: 100%; padding: 20px 25px 40px; }
	.tow-sw-scar__h3 { margin-top: 20px; font-size: 24px; line-height: 26.4px; }
	.tow-sw-scar__text:not(.tow-sw-scar__text--last) { margin: 20px 0; }
	.tow-sw-scar__text--last { font-size: 35px; line-height: 42px; letter-spacing: normal; }

	.tow-sw-bkg { padding: 30px 20px 50px; }
	.tow-sw-bkg__col { padding-right: 0; }
	.tow-sw-bkg__h2 { margin-top: 20px; font-size: 24px; line-height: 26.4px; }
	.tow-sw-bkg__lead { margin-top: 50px; }
	.tow-sw-bkg__h3 { margin-top: 20px; font-size: 24px; line-height: 26.4px; }
	.tow-sw-bkg__paneltext { line-height: 25.2px; }
	.tow-sw-bkg__panel { align-items: center; gap: 0; }
	.tow-sw-bkg__panelbox { align-self: stretch; margin-left: 0; }
	.tow-sw-bkg__note { margin-top: 20px; }
	.tow-sw-bkg__notetext { font-size: 30px; line-height: 42px; letter-spacing: 1px; }

	.tow-sw-how { padding: 30px 20px 40px; }
	.tow-sw-how__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-sw-how__leadh3 { font-size: 22px; line-height: 30.8px; }
	.tow-sw-does { display: flex; }
	.tow-sw-does__col { float: none; }
	.tow-sw-does,
	.tow-sw-tools { flex-direction: column; }
	.tow-sw-does__col,
	.tow-sw-tools__col,
	.tow-sw-tools__col:nth-child(2) { width: auto; }
	.tow-sw-cell { margin-bottom: 0; padding: 15px 10px 20px; }
	.tow-sw-cell__title { font-size: 18px; line-height: 21.6px; }
	.tow-sw-cell__text { font-size: 16px; }
	.tow-sw-how__badge { width: 100%; }
	.tow-sw-how__badgetitle { margin-top: 20px; font-size: 22px; line-height: 30.8px; }
	.tow-sw-tools__col:nth-child(n) .tow-sw-tool { margin: 0 0 20px; padding-bottom: 20px; }
	.tow-sw-tools__col:nth-child(2) .tow-sw-tool { margin: 20px 0 40px; }
	.tow-sw-tool__head { margin: 25px 30px 0; }
	.tow-sw-tool__text { margin: 0 30px -20px; font-size: 16px; }
	.tow-sw-tool__title { font-size: 18px; line-height: 21.6px; }
	.tow-sw-how__close { margin-top: 20px; }

	.tow-sw-fit { padding: 30px 20px 40px; }
	.tow-sw-fit__h2 { margin-bottom: 20px; font-size: 24px; line-height: 33.6px; }
	.tow-sw-fit__cols { flex-direction: column; align-items: center; }
	.tow-sw-fit__col { width: 100%; max-width: 400px; }
	.tow-sw-fit__card { height: auto; }
	.tow-sw-fit__col--yes .tow-sw-fit__card { margin: 0 0 40px; padding: 20px 0 0; }
	.tow-sw-fit__col--no .tow-sw-fit__card { margin: 0; padding: 20px 0; }
	.tow-sw-fit__col--yes .tow-sw-fit__box { margin: 0 0 20px; }
	.tow-sw-fit__col--no .tow-sw-fit__box { margin: 0 0 -10px; }
	.tow-sw-fit__box { padding: 15px 10px 0; }
	.tow-sw-fit__icon img { width: 24px; }
	.tow-sw-fit__titlewrap { width: calc(100% - 49px); }
	.tow-sw-fit__title { font-size: 22px; line-height: 30.8px; letter-spacing: 0; }

	.tow-sw-cta { padding: 40px 20px 25px; }
	.tow-sw-cta__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-sw-cta__text { font-size: 16px; }
	.tow-sw-cta .tow-button--path { font-size: 14px; }
}

@media screen and (max-width: 450px) {
	.tow-sw-hero__title .sub-label { font-size: 14px; line-height: 15.4px; letter-spacing: 2px; }
}

/* ===========================================================================
 * ACUPUNCTURE — six rows, node qgxs5o4vprz0 down to 5s96juiotp3v.
 * 600.00, 713.20, 736.80, 789.43, 785.39, 477.20.
 *
 * Built from docs/spec-acupuncture-morton.md. Row 6 is .tow-next unchanged.
 * Literal line-heights throughout, not ratios -- the lesson of cold laser.
 * ======================================================================== */

/* --- Row 1, hero (600). Text on the LEFT, 660 / 540. --- */
.tow-ac-hero {
	display: flex;
	min-height: 600px;
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 0 50%;
	background-size: cover;
}

.tow-ac-hero__inner {
	display: flex;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-ac-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 55%;
}

.tow-ac-hero__spacer { width: 45%; }

.tow-ac-hero__title {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 50px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-ac-hero__title .sub-label {
	display: block;
	padding: 0 0 22px;
	font-size: 24px;
	font-weight: 400;
	line-height: 26.4px;
	letter-spacing: 3px;
}

.tow-ac-hero__intro { margin: 20px 20px -20px; color: var(--tow-black); }
.tow-ac-hero__intro p { margin: 0 0 20px; }

/* THE PARAGRAPH IS 62px LEXEND on an 89.9 line and only the span inside it is
   Tangerine. The two faces' different ascents stretch the line box to 97.9 --
   the original's number, and it should fall out of the same two fonts here. */
.tow-ac-hero__script {
	margin: 20px 20px -20px;
	color: var(--tow-black);
	font-size: 62px;
	line-height: 89.9px;
}

.tow-ac-hero__script p { margin: 0 0 20px; }

.tow-ac-hero__script .text-highlight {
	font-family: var(--tow-font-script);
	font-size: 62px;
	font-weight: 400;
	line-height: 89.9px;
}

/* --- Row 2, "The Pain Loop" (713.20). The photo column sets the height. --- */
.tow-ac-loop { padding: 40px 20px; background-color: var(--tow-white); }

.tow-ac-loop__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* 480 / 720. */
.tow-ac-loop__pic {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 40%;
}

.tow-ac-loop__photo { margin: 20px 0 0; line-height: 0; text-align: center; }
/* 90% of 90%: the photo box and the image are each set to 90%. */
.tow-ac-loop__photo img { display: inline-block; width: 81%; height: auto; }

.tow-ac-loop__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 60%;
	padding-right: 40px;
}

.tow-ac-loop__h2 {
	margin: 20px;
	color: var(--tow-maroon);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-ac-loop__box {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 10px 0 0;
	border-radius: 20px;
}

.tow-ac-loop__text { margin: 0 20px; color: var(--tow-black); }
.tow-ac-loop__text p { margin: 0 0 20px; }

/* --- Row 3, "The Training Behind the Needle" (736.80). WHITE type. --- */
.tow-ac-train {
	padding: 50px 20px 60px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1);
}

.tow-ac-train__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* 717 / 483. */
.tow-ac-train__col {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 59.75%;
	padding-right: 40px;
}

.tow-ac-train__spacer { box-sizing: border-box; width: 40.25%; padding-left: 40px; }

.tow-ac-train__h2 {
	margin: 20px;
	color: var(--tow-white);
	font-size: 38px;
	font-weight: 700;
	line-height: 41.8px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-ac-train__text { margin: 0 20px -10px; color: var(--tow-white); }
.tow-ac-train__text p { margin: 0 0 20px; }
.tow-ac-train__text a { color: inherit; }

/* --- Row 4, "How It Fits Your Care" (789.43), container 1300. --- */
.tow-ac-fits { padding: 80px 20px 90px; }

.tow-ac-fits__inner {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 1300px;
	margin-inline: auto;
}

/* 520 / 780, each column's content inset 10 either side. */
.tow-ac-fits__pair { display: flex; }
.tow-ac-fits__lcol { display: flex; width: 40%; }
.tow-ac-fits__rcol { display: flex; width: 60%; }

.tow-ac-fits__lead {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0 10px;
	border-radius: 20px;
}

/* AN EMPTY WHITE PANEL beside each text block. It carries nothing. */
.tow-ac-fits__panel {
	flex: 1;
	margin: 0 10px;
	padding: 0 10px;
	border-radius: 20px;
	background: var(--tow-white);
}

.tow-ac-fits__h2 {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-ac-fits__intro { margin: 20px 20px -20px; color: var(--tow-black); text-align: left; }
.tow-ac-fits__intro p { margin: 0 0 20px; }

/* 185 of text in a 165 column -- the -20 lets it hang out of the bottom. */
.tow-ac-fits__close { margin: 0 20px -20px; color: var(--tow-black); text-align: left; }
.tow-ac-fits__close p { margin: 0 0 20px; }

.tow-ac-fits__spacer { height: 60px; }

.tow-ac-cards { display: flex; }
.tow-ac-cards__col { display: flex; flex: 1; }

/* #f2f2f2 with a 5px maroon top rule. */
.tow-ac-card {
	flex: 1;
	margin: 0 10px;
	padding: 0 10px;
	border-top: 5px solid var(--tow-maroon);
	border-radius: 20px;
	background: #f2f2f2;
}

/* flow-root holds the picture's 5 on top and the paragraph's 20 underneath;
   inside, the title's 20 and the text's -10 collapse to a 10px gap. */
.tow-ac-card__body { display: flow-root; margin: 20px 20px 0; }
.tow-ac-card__pic { margin: 5px 0 0; line-height: 0; }
.tow-ac-card__pic img { display: block; width: 50px; height: auto; }

.tow-ac-card__title {
	margin: 10px 0 20px;
	color: var(--tow-maroon);
	font-size: 24px;
	font-weight: 700;
	line-height: 28.8px;
	letter-spacing: normal;
	text-align: left;
}

.tow-ac-card__text { margin: -10px 0 0; color: var(--tow-maroon); text-align: left; }
.tow-ac-card__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* --- Row 5, "Built For" / "Not Designed For" (785.39). --- */
.tow-ac-built { padding: 40px 20px 60px; background-color: #f2f2f2; }

.tow-ac-built__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-ac-built__row { display: flex; }

/* 720 / 480 for the headed groups, 600 / 600 for the pairs of items. Every
   column is centred vertically, so the shorter item in a pair sits in the
   middle of the taller one's height. */
.tow-ac-built__wide,
.tow-ac-built__half {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding-right: 40px;
}

.tow-ac-built__wide { width: 60%; }
.tow-ac-built__half { width: 50%; }
.tow-ac-built__narrow { box-sizing: border-box; width: 40%; padding-left: 40px; }

.tow-ac-built__box {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 20px 0 0;
	border-radius: 20px;
}

.tow-ac-built__h2 {
	margin: 0;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

/* Grey, with a 4px MAROON rule down the left and maroon type. flow-root keeps
   the text's 5px top margin inside; its -20 foot cancels the paragraph's 20. */
.tow-ac-item {
	display: flow-root;
	box-sizing: border-box;
	width: 100%;
	padding: 0 15px;
	border-left: 4px solid var(--tow-maroon);
	background: rgb(243, 244, 246);
	color: var(--tow-maroon);
	text-align: left;
}

.tow-ac-item__text { margin: 5px 0 -20px; }
.tow-ac-item__text p { margin: 0 0 20px; padding: 0 0 10px; }
.tow-ac-item a { color: inherit; }

.tow-ac-built__h3 {
	margin: 40px 0 0;
	color: var(--tow-maroon);
	font-size: 28px;
	font-weight: 700;
	line-height: 39.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-ac-built__not { margin: 10px 40px 0 0; color: var(--tow-black); }
.tow-ac-built__not p { margin: 0 0 20px; }

/* --- Acupuncture, tablet and phone. Each value is the original's builder
   setting for that node at that breakpoint (specs/acupuncture-morton). --- */
@media (max-width: 1200px) {
	.tow-ac-train { background-position: 70% 0%; }
	.tow-ac-train__text { margin-bottom: 0; }
}

@media (max-width: 992px) {
	.tow-ac-hero { min-height: 400px; padding: 50px 20px 40px; background-position: left center; }
	.tow-ac-hero__inner { flex-direction: column; justify-content: center; }
	.tow-ac-hero__text { width: auto; margin-bottom: 20px; }
	.tow-ac-hero__spacer { display: none; }
	.tow-ac-hero__title { margin: 0 20px 20px 0; font-size: 40px; line-height: 44px; }
	.tow-ac-hero__intro,
	.tow-ac-hero__script { margin: 0 20px -20px 0; }

	.tow-ac-loop { padding: 60px 20px 40px; }
	.tow-ac-loop__inner { flex-direction: column; }
	.tow-ac-loop__pic,
	.tow-ac-loop__col { width: auto; }
	.tow-ac-loop__photo img { width: 25%; }
	.tow-ac-loop__h2 { font-size: 32px; line-height: 44.8px; text-align: center; }
	.tow-ac-loop__box { align-items: center; gap: 0; }

	.tow-ac-train { padding: 20px 20px 30px; background-position: left center; }
	.tow-ac-train__col { width: 100%; padding-right: 0; }
	.tow-ac-train__spacer { display: none; }
	.tow-ac-train__h2 { margin: 40px 20px 0; font-size: 30px; line-height: 33px; text-align: center; }
	.tow-ac-train__text { margin-top: 30px; text-align: center; }

	.tow-ac-fits { padding: 60px 20px 80px; }
	.tow-ac-fits__rcol { display: none; }
	.tow-ac-fits__pair:first-child .tow-ac-fits__lcol { width: 60%; }
	.tow-ac-fits__pair:last-child .tow-ac-fits__lcol { width: 70%; }
	.tow-ac-fits__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-ac-fits__spacer:nth-child(2) { height: 70px; }
	.tow-ac-cards { flex-wrap: wrap; }
	.tow-ac-cards__col { flex: 0 0 50%; }
	.tow-ac-cards__col:nth-child(3) { flex-basis: 100%; }
	.tow-ac-cards__col:nth-child(-n+2) .tow-ac-card { margin-bottom: 20px; }
	.tow-ac-cards__col:nth-child(3) .tow-ac-card { margin-top: 20px; }

	.tow-ac-built { padding: 20px 20px 40px; }
	.tow-ac-built__row { flex-direction: column; }
	.tow-ac-built__wide,
	.tow-ac-built__half { width: auto; }
	.tow-ac-built__narrow { display: none; }
	.tow-ac-built__h2 { font-size: 34px; line-height: 47.6px; }

	.tow-main--acupuncture-morton .tow-next { padding: 40px 40px 30px; }
	.tow-main--acupuncture-morton .tow-next__title { font-size: 3.4rem; }
}

/* Two columns the original shows only on tablet: a 1px one above the hero
   text, and the empty half beside "Fibromyalgia" (a box holding a separator). */
@media (min-width: 769px) and (max-width: 992px) {
	.tow-ac-hero__inner::before { content: ""; height: 1px; }
	.tow-ac-built__half:empty { min-height: 21px; }
}

@media screen and (max-width: 801px) {
	.tow-ac-hero__title .sub-label { font-size: 20px; line-height: 22px; }
}

@media (max-width: 768px) {
	.tow-ac-hero { padding: 50px 0 0; }
	.tow-ac-hero__title { margin-left: 20px; font-size: 38px; line-height: 41.8px; text-align: center; }
	.tow-ac-hero__intro { margin-left: 20px; text-align: center; }
	.tow-ac-hero__script { margin: 20px; font-size: 50px; line-height: 50px; text-align: center; }
	.tow-ac-hero__script .text-highlight { font-size: 50px; line-height: 50px; }

	.tow-ac-loop { padding: 30px 20px 40px; }
	.tow-ac-loop__pic { padding: 20px; }
	.tow-ac-loop__photo { margin: 0 20px; }
	.tow-ac-loop__photo img { width: 81%; }
	.tow-ac-loop__col { padding-right: 0; }
	.tow-ac-loop__h2 { margin-top: 0; font-size: 22px; line-height: 30.8px; }
	.tow-ac-loop__text { width: 100%; margin: 0; }

	.tow-ac-train { padding: 30px 20px 50px; }
	.tow-ac-train__h2 { margin-top: 20px; font-size: 24px; line-height: 26.4px; }
	.tow-ac-train__text { margin: 20px 10px -20px; }

	.tow-ac-fits { padding: 30px 20px 40px; }
	.tow-ac-fits__pair:first-child .tow-ac-fits__lcol,
	.tow-ac-fits__pair:last-child .tow-ac-fits__lcol { width: 100%; }
	.tow-ac-fits__lead { margin: 0; }
	.tow-ac-fits__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-ac-fits__close { margin-bottom: 20px; }
	.tow-ac-fits__spacer:nth-child(2) { height: 20px; }
	.tow-ac-cards__col { flex-basis: 100%; }
	.tow-ac-card { margin: 0 0 10px; padding: 0; }
	.tow-ac-cards__col:nth-child(-n+2) .tow-ac-card { margin-bottom: 10px; }
	.tow-ac-cards__col:nth-child(n+2) .tow-ac-card { margin-top: 20px; }
	.tow-ac-card__body { margin: 15px 30px 0; }
	.tow-ac-card__title { font-size: 18px; line-height: 21.6px; }
	.tow-ac-card__text { font-size: 16px; }

	.tow-ac-built__wide,
	.tow-ac-built__half { padding-right: 0; }
	.tow-ac-built__half:empty { display: none; }
	.tow-ac-built__h2 { width: 100%; font-size: 24px; line-height: 33.6px; }
	.tow-ac-built__h3 { width: 100%; margin-top: 20px; font-size: 24px; line-height: 33.6px; }
	.tow-ac-item { padding: 8px 10px 0; }
	.tow-ac-built__not { width: 100%; margin-right: 0; }

	.tow-main--acupuncture-morton .tow-next { padding: 40px 20px 25px; }
	.tow-main--acupuncture-morton .tow-next__title { margin: 20px 10px 0; font-size: 2.4rem; }
	.tow-main--acupuncture-morton .tow-next__intro { margin-top: 20px; }
	.tow-main--acupuncture-morton .tow-next .tow-button--path { font-size: 12px; }
	.tow-main--acupuncture-morton .tow-next__note { font-size: 1.6rem; }
}

@media screen and (max-width: 450px) {
	.tow-ac-hero__title .sub-label { font-size: 14px; line-height: 15.4px; letter-spacing: 2px; }
}

/* ===========================================================================
 * NEUROPATHY TREATMENT — five rows, node 4urig3db7q9m down to zr81i9latf07.
 * 918.00, 1165.10, 1075.89, 1308.18, 600.00.
 *
 * Built from docs/spec-neuropathy-treatment.md. Literal line-heights.
 * ======================================================================== */

/* The row-2 arrows: a TWO-GLYPH subset of the original's Ultimate-Icons font
   (U+E97E arrow-right2 on desktop, U+E97A arrow-down2 on tablet and phone),
   552 bytes, with the original's vertical metrics unchanged -- so the glyphs
   land where the original's do by construction. */
@font-face {
	font-family: "tow-ua-arrow";
	src: url("../fonts/tow-ua-arrow.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* --- Row 1, hero (918). A centred 920 column, not a split. --- */
.tow-np-hero {
	display: flex;
	min-height: 600px;
	padding: 30px 20px 60px;
	background-color: var(--tow-white);
}

.tow-np-hero__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-np-hero__box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: 100%;
	max-width: 920px;
	margin: 20px auto;
}

.tow-np-hero__font { height: 0; }

.tow-np-hero__title {
	margin: 0;
	color: var(--tow-black);
	font-size: 50px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: -0.8px;
	text-align: center;
}

/* 90px of Tangerine on a 99 line, a block with 30 of padding above. */
.tow-np-hero__title .text-highlight {
	display: block;
	padding: 30px 0 0;
	font-family: var(--tow-font-script);
	font-size: 90px;
	font-weight: 400;
	line-height: 99px;
	letter-spacing: 1px;
}

.tow-np-hero__intro {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 800px;
}

.tow-np-hero__lead { margin: 0 0 -20px; color: var(--tow-black); text-align: center; }
.tow-np-hero__lead p { margin: 0 0 20px; }

/* 28px/400 on a 40.6 line, MAROON -- a size used nowhere else. */
.tow-np-hero__uses {
	margin: 20px 0 -20px;
	color: var(--tow-maroon);
	font-size: 28px;
	line-height: 40.6px;
	text-align: center;
}

.tow-np-hero__uses p { margin: 0 0 20px; }

/* Five 160px cards, space-between with a 30 gap: 5 x 160 + 4 x 30 = 920. */
.tow-np-uses {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	width: 100%;
	/* Never narrower than its five pictures and four gaps. At 820 that is 722 in
	   a 702 box: the original spills 10px out of EACH side, centred by its
	   parent; squeezed to 702, ours spilled 20 out of the right only. */
	min-width: min-content;
}

/* 100% each, shrinking together to 160 -- and on tablet each stops at its
   longest word, which is why the five come out different widths there. */
.tow-np-use { display: flex; flex-direction: column; width: 100%; }

/* flow-root holds the picture's 5 above and the title's 20 below. */
.tow-np-use__body { display: flow-root; border-radius: 12px; }
.tow-np-use__pic { margin: 5px 0 0; line-height: 0; }
.tow-np-use__pic img { display: block; width: 250px; max-width: 100%; height: auto; margin-inline: auto; }

.tow-np-use__title {
	margin: 10px 0 20px;
	color: var(--tow-maroon);
	font-size: 24px;
	font-weight: 700;
	line-height: 28.8px;
	letter-spacing: normal;
	text-align: center;
}

.tow-np-hero__goal { width: 100%; margin: 0 0 -20px; color: var(--tow-black); text-align: center; }
.tow-np-hero__goal p { margin: 0 0 20px; }

/* --- Row 2, "Unexplained Doesn't Mean Crazy" (1165.10). WHITE type. --- */
.tow-np-mystery {
	padding: 60px 20px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.tow-np-mystery__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-np-mystery__h2 {
	margin: 20px 20px 0;
	color: var(--tow-white);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-np-mystery__intro { margin: 20px; color: var(--tow-white); text-align: center; }
.tow-np-mystery__intro p { margin: 0 0 20px; }

.tow-np-pair {
	display: flex;
	flex-direction: column;
	gap: 50px;
	margin: 20px auto;
}

/* The cards are sized by their titles: 347.94 + 60 and 316.13 + 60, with the
   100px arrow between on 20px gaps -- 924.07, the box to the pixel. */
.tow-np-pair__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.tow-np-pair__card {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 20px 30px;
	border-radius: 20px;
	background: #f2f2f2;
}

/* The RATIO, not 31.9px: Chrome rounds the two a sixty-fourth of a pixel
   apart per line, which on two-line phone titles came to 0.03 a card. */
.tow-np-pair__title {
	color: var(--tow-maroon);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
}

.tow-np-pair__title p { margin: 0 0 20px; }
.tow-np-pair__pic { line-height: 0; text-align: center; }
.tow-np-pair__pic img { display: inline-block; width: 300px; max-width: 100%; height: auto; }

/* 107 around a 100px inline-block: the other 7 is the 29px line it sits on.
   The glyph's span is a TABLE-CELL on the original, and that is what puts the
   inline-block's baseline where it is -- as a plain block the module came out
   101, and since it is centred in a 370.91 row the arrow sat 3px low. */
.tow-np-pair__arrow { font-size: 20px; line-height: 29px; text-align: center; }
.tow-np-pair__arrowwrap { display: inline-block; width: 100px; height: 100px; }
.tow-np-pair__arrowcell { display: table-cell; width: 100px; height: 100px; vertical-align: middle; }

.tow-np-pair__arrowicon {
	display: block;
	width: 100px;
	height: 100px;
	color: var(--tow-white);
	font-family: "tow-ua-arrow";
	font-size: 100px;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased; /* the original's icon fonts are */
	line-height: 100px;
	text-align: center;
}

.tow-np-pair__arrowicon::before { content: "\e97e"; }

.tow-np-mystery__box {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
	max-width: 890px;
	margin: 40px auto 20px;
}

/* A WHITE card with a 5px maroon rule down the left. */
.tow-np-mystery__note {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 68%;
	margin: 0 auto;
	border-left: 5px solid var(--tow-maroon);
	border-radius: 12px;
	background: var(--tow-white);
}

.tow-np-mystery__notetext { margin: 0 0 -10px; padding: 30px; color: var(--tow-black); text-align: left; }
.tow-np-mystery__notetext p { margin: 0 0 20px; }

.tow-np-mystery__body { color: var(--tow-white); text-align: center; }
.tow-np-mystery__body p { margin: 0 0 20px; }

/* --- Row 3, "Why Dr. Karen" (1075.89). 420 / 780, both BOTTOM-aligned. --- */
.tow-np-why { padding: 60px 20px; background-color: var(--tow-white); }

.tow-np-why__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-np-why__cols { display: flex; }

.tow-np-why__pic {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 35%;
	padding-right: 20px;
}

.tow-np-why__photo { margin: 20px 20px 0; line-height: 0; }
.tow-np-why__photo img { display: block; width: 100%; height: auto; margin-inline: auto; }

.tow-np-why__col {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 65%;
	padding-right: 40px;
}

.tow-np-why__h2 {
	margin: 20px 20px 10px;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-np-why__lead { margin: 20px 20px 0; color: var(--tow-black); text-align: left; }
.tow-np-why__lead p { margin: 0 0 20px; }
.tow-np-why__lead a { color: inherit; }

.tow-np-why__creds {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 20px 0;
	border-radius: 20px;
}

.tow-np-cred {
	align-self: stretch;
	margin: 0 0 0 20px;
	white-space: nowrap;
}

/* A 24px inline-block with a 5px top margin beside a 664px text block that is
   top-aligned. The icon's own offset is set from the original's measurement. */
.tow-np-cred__icon {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 5px 12px 0 0;
	vertical-align: top;
}

/* The glyph is 30px of advance in a 24px box and overflows to the RIGHT:
   measured on the original, Chrome starts an overflowing centred run at the
   box's left edge. It sits 6px below the text's top where its wrapper sits at
   5 -- the 24px box is baseline-aligned on a 29px line. */
.tow-np-cred__svg {
	position: absolute;
	top: 1px;
	left: 0;
	width: 30px;
	height: 24px;
	fill: var(--tow-maroon);
}

.tow-np-cred__text {
	display: inline-block;
	width: calc(100% - 56px);
	vertical-align: top;
	color: var(--tow-black);
	text-align: left;
	white-space: normal;
}

.tow-np-cred__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* #f2f2f2 with a 5px maroon rule down the left. */
.tow-np-why__grey {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 95%;
	margin: 0 auto 20px;
	border-left: 5px solid var(--tow-maroon);
	border-radius: 12px;
	background: #f2f2f2;
}

.tow-np-why__greytext { margin: 0 0 -10px; padding: 30px; color: var(--tow-black); text-align: left; }
.tow-np-why__greytext p { margin: 0 0 20px; }

.tow-np-why__laser { margin: 20px 20px 0; color: var(--tow-black); text-align: left; }
.tow-np-why__laser p { margin: 0 0 20px; }

.tow-np-why__script {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 40px auto 0;
}

/* 70px Tangerine on a 101.5 line, the paragraph asking for weight 300 --
   which, with only 400 and 700 loaded on either site, renders as 400. */
.tow-np-why__scripttext {
	margin: 30px 0 0;
	color: var(--tow-black);
	font-family: var(--tow-font-script);
	font-size: 70px;
	line-height: 101.5px;
	text-align: center;
}

.tow-np-why__scripttext p { margin: 0 0 20px; font-weight: 300; }

/* --- Row 4, "Three Tools. One Goal." (1308.18). --- */
.tow-np-tools {
	padding: 60px 20px 80px;
	background-color: var(--tow-white);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.tow-np-tools__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-np-tools__h2,
.tow-np-tools__fith2 {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-np-tools__h2 .highlight { color: var(--tow-maroon); text-decoration: underline; }

.tow-np-tools__intro { margin: 20px; color: var(--tow-black); text-align: center; }
.tow-np-tools__intro p { margin: 0 0 20px; }

.tow-np-tools__cards { display: flex; }
.tow-np-tools__col { display: flex; width: 33.33%; }
.tow-np-tools__col:nth-child(2) { width: 33.34%; }

/* #f4f4f4 with a 3px maroon top rule. */
.tow-np-tcard {
	flex: 1;
	margin: 0 10px;
	border-top: 3px solid var(--tow-maroon);
	border-radius: 20px;
	background: #f4f4f4;
}

.tow-np-tcard__body { display: flow-root; margin: 20px; }
.tow-np-tcard__head { white-space: nowrap; }

/* BOTH middle-aligned: the mark sits 21.08 down beside a two-line title. */
.tow-np-tcard__mark {
	display: inline-block;
	margin: 0 10px 0 0;
	vertical-align: middle;
	line-height: 0;
}

.tow-np-tcard__mark img { display: block; width: 50px; height: auto; }

.tow-np-tcard__titlewrap {
	display: inline-block;
	width: calc(100% - 80px);
	vertical-align: middle;
	white-space: normal;
}

.tow-np-tcard__title {
	display: inline-block;
	margin: 10px 0 20px;
	color: var(--tow-black);
	font-size: 24px;
	font-weight: 700;
	line-height: 28.8px;
	letter-spacing: normal;
	text-align: left;
}

.tow-np-tcard__title a { color: inherit; }

.tow-np-tcard__text { margin: 0 0 -20px; color: var(--tow-black); text-align: left; }
.tow-np-tcard__text p { margin: 0 0 20px; padding: 0 0 10px; }

.tow-np-tools__together { margin: 40px 20px 20px; color: var(--tow-black); text-align: center; }
.tow-np-tools__together p { margin: 0 0 20px; }

.tow-np-tools__fitintro { margin: 20px 20px 40px; color: var(--tow-black); text-align: center; }
.tow-np-tools__fitintro p { margin: 0 0 20px; }

.tow-np-fit { display: flex; }
.tow-np-fit__col { display: flex; width: 50%; }

.tow-np-fit__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	box-sizing: border-box;
	padding: 20px;
	border: 1px solid;
	border-radius: 12px;
}

.tow-np-fit__col--yes .tow-np-fit__card { margin: 0 20px 0 0; border-color: rgb(180, 227, 205); background: rgb(240, 253, 244); }
.tow-np-fit__col--no  .tow-np-fit__card { margin: 0 0 0 20px; border-color: rgb(227, 198, 197); background: rgb(254, 242, 242); }

.tow-np-fit__box {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 20px 0;
	border-radius: 20px;
}

.tow-np-fit__module { align-self: stretch; padding: 0 40px 0 0; }
.tow-np-fit__body { display: flow-root; }
.tow-np-fit__head { white-space: nowrap; }

.tow-np-fit__icon {
	display: inline-block;
	margin: 0 20px 0 0;
	vertical-align: top;
	line-height: 0;
}

.tow-np-fit__icon img { display: block; width: 30px; height: auto; }

.tow-np-fit__titlewrap {
	display: inline-block;
	width: calc(100% - 50px);
	vertical-align: middle;
	white-space: normal;
}

/* 28/700 on 39.2 with a NEGATIVE 5px top margin -- insurance-billing's title. */
.tow-np-fit__title {
	display: inline-block;
	margin: -5px 0 10px;
	color: var(--tow-black);
	font-size: 28px;
	font-weight: 700;
	line-height: 39.2px;
	letter-spacing: -0.8px;
	vertical-align: middle;
}

.tow-np-fit__text { margin: 10px 0 0; color: var(--tow-black); text-align: left; }
.tow-np-fit__text ul { margin: 0 0 10px; padding: 0 0 0 20px; list-style: disc; }
.tow-np-fit__text li { margin: 0 0 20px; }
.tow-np-fit__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* --- Row 5, "Request a Neuropathy Consultation" (600). --- */
.tow-np-cta {
	display: flex;
	min-height: 600px;
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: cover;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.tow-np-cta__inner {
	display: flex;
	align-items: center;   /* the column is content-sized and centred, as the original's is */
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-np-cta__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 70%;
}

.tow-np-cta__spacer { width: 30%; }

.tow-np-cta__h2 {
	margin: 20px;
	color: var(--tow-white);
	font-size: 38px;
	font-weight: 700;
	line-height: 41.8px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-np-cta__text { margin: 20px; color: var(--tow-white); text-align: left; }
.tow-np-cta__text p { margin: 0 0 20px; }

/* LEFT-aligned, where every other page's path button is centred. */
.tow-np-cta__btn { margin: 0 20px 10px; text-align: left; }

/* --- Neuropathy, tablet and phone. Each value is the original's builder
   setting for that node at that breakpoint (specs/neuropathy-treatment). --- */
@media (max-width: 1200px) {
	.tow-np-hero__title { margin-top: 20px; }
	.tow-np-cta { background-position: center bottom; }
}

@media (max-width: 992px) {
	.tow-np-hero { min-height: 485px; padding-top: 0; padding-bottom: 30px; }
	.tow-np-hero__box { width: 90%; }
	.tow-np-hero__title { margin: 0 0 20px; font-size: 40px; line-height: 44px; }
	.tow-np-hero__uses { margin-top: 0; }

	.tow-np-mystery { padding: 60px 20px 40px; }
	.tow-np-mystery__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-np-pair__row { flex-direction: column; }
	/* The original hides its right-arrow module here and shows a down-arrow one. */
	.tow-np-pair__arrowicon::before { content: "\e97a"; }
	.tow-np-mystery__note { max-width: 80%; }

	.tow-np-why { padding: 60px 20px 40px; }
	/* The photo column drops BELOW the text. */
	.tow-np-why__cols { flex-direction: column-reverse; }
	.tow-np-why__pic,
	.tow-np-why__col { width: auto; }
	.tow-np-why__photo img { width: 36%; }
	.tow-np-why__h2 { font-size: 32px; line-height: 44.8px; }
	.tow-np-why__grey { max-width: 80%; }
	.tow-np-why__scripttext { font-size: 50px; line-height: 60px; }

	.tow-np-tools { padding: 60px 20px 80px; }
	.tow-np-tools__h2,
	.tow-np-tools__fith2 { font-size: 34px; line-height: 47.6px; }
	.tow-np-tools__cards { flex-wrap: wrap; }
	.tow-np-tools__col,
	.tow-np-tools__col:nth-child(2) { width: 50%; }
	.tow-np-tools__col:nth-child(-n+2) .tow-np-tcard { margin-bottom: 40px; }
	.tow-np-tools__col:nth-child(1) .tow-np-tcard__body { margin: 10px 20px; }
	.tow-np-tools__col:nth-child(n+2) .tow-np-tcard__body { margin: 10px 20px 0; }
	.tow-np-fit__title { font-size: 24px; line-height: 33.6px; }

	.tow-np-cta { min-height: 421px; background-position: 36% 0%; }
	.tow-np-cta__col { margin-bottom: 20px; }
	.tow-np-cta__h2 { margin: 0 20px 20px 0; font-size: 30px; line-height: 33px; }
	.tow-np-cta__text { margin: 0 20px 20px 0; }
	.tow-np-cta__btn { margin-left: 0; }
}

@media screen and (max-width: 801px) {
	.tow-np-hero__title .text-highlight { font-size: 60px; line-height: 66px; }
}

@media (max-width: 768px) {
	.tow-np-hero { padding: 20px 0 30px; }
	.tow-np-hero__box { width: 100%; padding: 0 15px; }
	.tow-np-hero__title { font-size: 38px; line-height: 41.8px; }
	.tow-np-hero__uses { margin-top: 30px; }
	.tow-np-uses { flex-wrap: wrap; gap: 0; margin-top: -20px; }
	.tow-np-use__body { padding: 15px 10px 20px; }
	.tow-np-use__title { font-size: 18px; line-height: 21.6px; }

	.tow-np-mystery { padding: 30px 20px 40px; }
	.tow-np-mystery__h2 { margin-right: 10px; margin-left: 10px; font-size: 24px; line-height: 33.6px; }
	.tow-np-pair__card { width: 80%; max-width: 80%; }
	.tow-np-pair__row > .tow-np-pair__card:first-child { padding: 20px; }
	.tow-np-pair__pic img { width: 250px; }
	.tow-np-pair__arrow { font-size: 18px; line-height: 26.1px; }
	.tow-np-pair__arrowwrap,
	.tow-np-pair__arrowcell,
	.tow-np-pair__arrowicon { width: 70px; height: 70px; }
	.tow-np-pair__arrowicon { font-size: 70px; line-height: 70px; }
	.tow-np-mystery__box { margin-top: 20px; }
	.tow-np-mystery__note { max-width: 100%; }
	.tow-np-mystery__notetext { margin-bottom: -20px; padding: 20px 15px; }

	.tow-np-why { padding: 30px 20px 40px; }
	.tow-np-why__pic { align-self: center; width: 100%; max-width: 400px; padding-right: 0; }
	.tow-np-why__photo img { width: 64%; }
	.tow-np-why__col { padding-right: 0; }
	.tow-np-why__h2 { font-size: 24px; line-height: 33.6px; text-align: center; }
	.tow-np-why__lead { margin-bottom: -20px; font-size: 16px; }
	.tow-np-cred { padding: 25px 10px 0; }
	.tow-np-why__grey { max-width: 100%; }
	.tow-np-why__greytext { margin-bottom: -20px; padding: 20px 15px; }
	.tow-np-why__laser { font-size: 16px; }
	.tow-np-why__script { margin-top: 20px; }
	.tow-np-why__scripttext { margin-top: 20px; font-size: 38px; line-height: 53.2px; }

	.tow-np-tools { padding: 30px 20px 60px; }
	.tow-np-tools__h2,
	.tow-np-tools__fith2 { font-size: 24px; line-height: 33.6px; }
	.tow-np-tools__col,
	.tow-np-tools__col:nth-child(2) { width: 100%; }
	.tow-np-tools__col:nth-child(n) .tow-np-tcard { margin: 0 0 20px; }
	.tow-np-tools__col:nth-child(2) .tow-np-tcard { margin: 20px 0 40px; }
	.tow-np-tools__col:nth-child(n) .tow-np-tcard__body { margin: 25px 30px 20px; }
	.tow-np-tcard__title { font-size: 18px; line-height: 21.6px; }
	.tow-np-tcard__text { font-size: 16px; }
	.tow-np-tools__together { margin-top: 20px; }
	.tow-np-tools__fitintro { margin-bottom: 20px; }
	.tow-np-fit { flex-direction: column; align-items: center; }
	.tow-np-fit__col { width: 100%; max-width: 400px; }
	.tow-np-fit__col--yes .tow-np-fit__card { margin: 0 0 40px; padding: 20px 0 0; }
	.tow-np-fit__col--no .tow-np-fit__card { margin: 0; padding: 20px 0; }
	.tow-np-fit__col--yes .tow-np-fit__box { margin: 0 0 20px; }
	.tow-np-fit__col--no .tow-np-fit__box { margin: 0 0 -10px; }
	.tow-np-fit__module { padding: 15px 10px 0; }
	.tow-np-fit__icon img { width: 24px; }
	.tow-np-fit__titlewrap { width: calc(100% - 49px); }
	.tow-np-fit__title { font-size: 22px; line-height: 30.8px; letter-spacing: 0; }

	.tow-np-cta { padding: 50px 0 20px; background-position: left center; }
	.tow-np-cta__inner { flex-direction: column; align-items: stretch; justify-content: center; }
	.tow-np-cta__col { width: auto; }
	.tow-np-cta__spacer { display: none; }
	.tow-np-cta__h2 { margin-left: 20px; font-size: 24px; line-height: 26.4px; text-align: center; }
	.tow-np-cta__text { margin-left: 20px; }
	.tow-np-cta__btn { margin-left: 20px; text-align: center; }
	.tow-np-cta .tow-button--path { font-size: 14px; }
}

@media screen and (max-width: 450px) {
	.tow-np-hero__title .text-highlight { font-size: 36px; line-height: 39.6px; }
}

/* ===========================================================================
 * DOT PHYSICALS — eight rows, node 53kifo6d4x12 down to ltfbpw6uy25v.
 * 644.00, 158.00, 515.19, 895.19, 1324.56, 568.75, 760.19, 354.14.
 *
 * Built from docs/spec-dot-physicals-morton.md. Row 3 is .tow-ib-black.
 * ======================================================================== */

/* The call button's phone: a one-glyph subset of the original's Ultimate-Icons
   font (U+E922, tablet), metrics unchanged. Separate from tow-ua-arrow so the
   verified neuropathy font is left untouched. */
@font-face {
	font-family: "tow-ua-tablet";
	src: url("../fonts/tow-ua-tablet.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* --- Row 1, hero (644). --- */
.tow-dot-hero {
	display: flex;
	align-items: center;
	min-height: 600px;
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.tow-dot-hero__inner {
	display: flex;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-dot-hero__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 70%;
}

.tow-dot-hero__spacer { width: 30%; }

.tow-dot-hero__title {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 50px;
	font-weight: 700;
	line-height: 55px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-dot-hero__intro { margin: 20px 20px 0; color: var(--tow-black); }
.tow-dot-hero__intro p { margin: 0 0 20px; }

/* NO FIXED HEIGHT. The original gives this strip and the fees strip below it
   height: 100% and width: 100%. In a column 524 tall that makes each one 524
   before flex-shrink; the heading and intro cannot shrink below their text, so
   the two strips absorb the whole 946 overflow between them, 473 each, and land
   at 524 - 473 = 51. That is where the 51 comes from, and reproducing the rule
   rather than the number is what keeps it true. width: 100% plus a 20px margin
   makes it 840 in an 840 column -- it overhangs, invisibly. */
.tow-dot-hero__points {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 30px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 20px;
}

.tow-dot-point { display: flex; gap: 5px; }
.tow-dot-point__pic { flex: none; }
/* line-height 0, as the original's .fl-photo: with it the module is 53 around a
   35px picture, which the -4 margin turns into a 49px item. */
.tow-dot-point__pic { margin: -4px 0 0; line-height: 0; text-align: center; }
.tow-dot-point__picwrap { display: inline-block; }
.tow-dot-point__pic img { width: 35px; height: auto; vertical-align: middle; }
.tow-dot-point__text { color: var(--tow-black); }
.tow-dot-point__text p { margin: 0 0 20px; }

/* The same height: 100% mechanism as the points strip. Its pill has 53px of
   content and is stretched to the strip's 51, overflowing by 2 -- as on the
   original. */
.tow-dot-hero__fees {
	display: flex;
	flex-grow: 0;
	gap: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0 0 30px;
	padding: 0 0 0 20px;
}

.tow-dot-hero__pill {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	margin: 0 auto 0 0;
	padding: 8px 20px 12px;
	border: 2px solid var(--tow-maroon);
	border-radius: 20px;
}

.tow-dot-hero__pilltext { margin: 0 0 -20px; color: var(--tow-maroon); }
.tow-dot-hero__pilltext p { margin: 0 0 20px; }

/* --- Row 2, lead-in (158). --- */
.tow-dot-intro { padding: 30px 20px; background-color: var(--tow-white); }

.tow-dot-intro__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-dot-intro__box {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
	max-width: 900px;
	margin: 20px auto;
}

.tow-dot-intro__text { margin: 0 0 -20px; color: var(--tow-maroon); text-align: center; }
.tow-dot-intro__text p { margin: 0 0 20px; }

/* --- Row 3: .tow-ib-black with the original's photograph behind it. --- */
.tow-ib-black--photo {
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

/* --- Row 4, "Why Touch of Wellness Does DOT Exams" (895.19). --- */
.tow-dot-why { padding: 40px 20px 0; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15); }

.tow-dot-why__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

/* 660 / 540, BOTH bottom-aligned; the 80 under the text is its own margin. */
.tow-dot-why__text {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 55%;
	margin-bottom: 80px;
}

/* 38/700 on a 45.6 line -- not 53.2, not 41.8 -- with 150 of right margin. */
.tow-dot-why__h2 {
	margin: 20px 150px 20px 20px;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 45.6px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-dot-why__body { margin: 20px 20px 0; color: var(--tow-black); }
.tow-dot-why__body p { margin: 0 0 20px; }
.tow-dot-why__body a { color: inherit; }

.tow-dot-why__pic {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 45%;
}

/* 125% OF ITS BOX -- 625 in 500 at 1440: the portrait overhangs. */
.tow-dot-why__photo { margin: 20px 20px 0; line-height: 0; }
.tow-dot-why__photo img { display: block; width: 125%; max-width: none; height: auto; }

/* --- Row 5, "What the Exam Covers" (1324.56). --- */
.tow-dot-exam {
	padding: 40px 20px 60px;
	background-color: #f2f2f2;
	background-repeat: no-repeat;
	background-position: 0 100%;   /* LEFT-BOTTOM, not centred */
	background-size: cover;
}

.tow-dot-exam__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-dot-exam__row { display: flex; }

.tow-dot-exam__wide,
.tow-dot-exam__half,
.tow-dot-exam__widest {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	padding-right: 40px;
}

.tow-dot-exam__wide { width: 66.67%; }
.tow-dot-exam__narrow { box-sizing: border-box; width: 33.33%; padding-left: 40px; }
.tow-dot-exam__half { width: 50%; }
.tow-dot-exam__widest { width: 79.17%; }
.tow-dot-exam__slim { width: 20.83%; }

.tow-dot-exam__box {
	display: flex;
	/* It GROWS into its column, as the original's box module does (flex 1 1
	   auto). Otherwise the column's justify-content:center centres a short box:
	   "Hearing" sat 14.5px low at 1024, where its neighbour is a line taller. */
	flex: 1 1 auto;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 20px 0 0;
	border-radius: 20px;
}

.tow-dot-exam__h2 {
	margin: 0;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-dot-exam__lead { margin: 10px 40px 0 0; color: var(--tow-black); }
.tow-dot-exam__lead p { margin: 0 0 20px; }

/* A 4px maroon rule and maroon type, on NO background -- acupuncture's item
   without its grey. */
.tow-dot-item {
	display: flow-root;
	box-sizing: border-box;
	width: 100%;
	padding: 0 15px;
	border-left: 4px solid var(--tow-maroon);
	color: var(--tow-maroon);
	text-align: left;
}

.tow-dot-item__text { margin: 5px 0 -20px; }
.tow-dot-item__text p { margin: 0 0 20px; padding: 0 0 10px; }

.tow-dot-exam__flag { margin: 40px 0 0; color: var(--tow-black); }
.tow-dot-exam__flag p { margin: 0 0 20px; }

.tow-dot-exam__h3 {
	margin: 20px 0 0;
	color: var(--tow-maroon);
	font-size: 28px;
	font-weight: 700;
	line-height: 39.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-dot-exam__list { margin: 10px 40px 0 0; color: var(--tow-black); }
.tow-dot-exam__list ul { margin: 0 0 10px; padding: 0 0 0 20px; list-style: disc; }
.tow-dot-exam__list li { margin: 0; }

.tow-dot-exam__trap { margin: 10px 40px 0 0; color: var(--tow-black); }
.tow-dot-exam__trap p { margin: 0 0 20px; }
.tow-dot-exam__trap a { color: inherit; }

/* --- Row 6, built for / not designed for (568.75). --- */
.tow-dot-fit { padding: 30px 20px; }

.tow-dot-fit__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-dot-fit__cols { display: flex; }
.tow-dot-fit__col { display: flex; width: 50%; }

/* Transparent, with a radius on nothing visible -- the original's. BOTH columns
   carry the 20px right margin. */
.tow-dot-fit__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-start;
	margin: 0 20px 0 0;
	padding: 20px 20px 10px;
	border-radius: 12px;
}

.tow-dot-fit__box {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 20px 0;
	border-radius: 20px;
}

.tow-dot-fit__body { display: flow-root; align-self: stretch; }
.tow-dot-fit__head { white-space: nowrap; }

.tow-dot-fit__icon {
	display: inline-block;
	margin: 0 20px 0 0;
	vertical-align: top;
	line-height: 0;
}

.tow-dot-fit__icon img { display: block; width: 30px; height: auto; }

.tow-dot-fit__titlewrap {
	display: inline-block;
	width: calc(100% - 50px);
	vertical-align: middle;
	white-space: normal;
}

.tow-dot-fit__title {
	display: inline-block;
	margin: -5px 0 10px;
	color: var(--tow-black);
	font-size: 28px;
	font-weight: 700;
	line-height: 39.2px;
	letter-spacing: -0.8px;
	vertical-align: middle;
}

/* 18px on a 26.1 line -- smaller than the page's body type. */
.tow-dot-fit__text { margin: 20px 0 0; color: var(--tow-black); text-align: left; }

.tow-dot-fit__text ul {
	margin: 0 0 10px;
	padding: 0 0 0 20px;
	font-size: 18px;
	line-height: 26.1px;
	list-style: disc;
}

.tow-dot-fit__text li { margin: 0 0 20px; }

.tow-dot-fit__note {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
	max-width: 900px;
	margin: 20px auto;
}

.tow-dot-fit__notetext { color: var(--tow-maroon); text-align: center; }
.tow-dot-fit__notetext p { margin: 0 0 20px; }

/* --- Row 7, "After Your Exam" (760.19). MAROON. --- */
.tow-dot-after {
	padding: 50px 20px 120px;
	background-color: var(--tow-maroon);
	color: var(--tow-white);
}

.tow-dot-after__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-dot-after__top,
.tow-dot-after__bottom { display: flex; }

.tow-dot-after__lead {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 55%;
	border-radius: 20px;
}

.tow-dot-after__statscol,
.tow-dot-after__gridcol {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 45%;
	padding: 0 10px;
	border-radius: 20px;
}

.tow-dot-after__h2 {
	margin: 20px 20px 10px;
	color: var(--tow-white);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-dot-after__text { margin: 0 20px -20px; color: var(--tow-white); text-align: left; }
.tow-dot-after__text p { margin: 0 0 20px; }

.tow-dot-after__stats {
	display: flex;
	justify-content: start;
	gap: 80px;
	margin: 20px;
}

.tow-dot-stat { display: flex; flex-direction: column; gap: 0; }

/* "No" is 38px/700 on a 55.1 line; the phrase under it 20/700. */
.tow-dot-stat__big { margin: 0 0 -10px; font-size: 38px; font-weight: 700; line-height: 55.1px; }
.tow-dot-stat__big p { margin: 0 0 20px; }
.tow-dot-stat__small { margin: -20px 0 0; font-weight: 700; }
.tow-dot-stat__small p { margin: 0 0 20px; }

.tow-dot-after__spacer { height: 60px; }

/* flex: 0 0 320px in its column -- the original's own rule -- with width: 100%
   on top of 10px side margins, so it is 520 in a 520 column. The cards wrap and
   their second line overflows the 320 by 58.28 into the row's bottom padding:
   the original's layout, not a fault in this one. */
.tow-dot-after__grid {
	display: flex;
	flex: 0 0 320px;
	flex-wrap: wrap;
	gap: 10px;
	box-sizing: border-box;
	width: 100%;
	min-height: 0;
	margin: 20px 10px;
}

.tow-dot-card {
	display: flex;
	flex: 0 0 45%;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	box-sizing: border-box;
	min-height: 130px;
	padding: 15px;
	border-radius: 10px;
	background: var(--tow-white);
}

.tow-dot-card__text { margin: 0 0 -10px; color: var(--tow-maroon); text-align: left; }
.tow-dot-card__text p { margin: 0 0 20px; }
.tow-dot-card__pic { line-height: 0; }
.tow-dot-card__pic--nudge { margin-top: 1px; }
.tow-dot-card__pic img { display: block; width: 60px; height: auto; margin-left: auto; }

.tow-dot-after__schedcol { display: flex; width: 55%; }

.tow-dot-after__sched {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: center;
	margin: 10px 10px 0;
	padding: 0 10px;
	border-radius: 20px;
}

.tow-dot-after__pillbox {
	display: flex;
	gap: 0;
	margin: 30px 0;
	padding: 0 0 0 20px;
}

.tow-dot-after__pill {
	display: flex;
	flex-direction: column;
	margin: 0 auto 0 0;
	padding: 12px 20px;
	border: 1px solid var(--tow-white);
	border-radius: 20px;
}

.tow-dot-after__pilltext { margin: 0 0 -20px; }
.tow-dot-after__pilltext p { margin: 0 0 20px; }

/* --- Row 8, the call button (354.14). --- */
.tow-dot-call {
	padding: 60px 20px 40px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.tow-dot-call__inner {
	display: flex;
	flex-direction: column;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-dot-call__box {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 742px;
	margin: 0 auto 20px;
}

.tow-dot-call__btn { margin: 0 0 10px; text-align: center; }
.tow-dot-call__text { margin: 12px 0 0; color: var(--tow-white); text-align: center; }
.tow-dot-call__text p { margin: 0 0 20px; }

/* --- DOT physicals, tablet and phone. Each value is the original's builder
   setting for that node at that breakpoint (specs/dot-physicals-morton). --- */
@media (max-width: 992px) {
	.tow-dot-hero { min-height: 485px; padding-bottom: 0; background-position: left center; }
	/* WRAPPED, as the builder's column groups are, not a column: a column wraps
	   into a line and is stretched to it, which gives the two strips' height:
	   100% something definite to resolve against. Stacked as a flex column the
	   strips kept their content heights instead of sharing the space. */
	.tow-dot-hero__inner { flex-wrap: wrap; }
	.tow-dot-hero__col { width: 100%; margin-bottom: 20px; }
	/* The empty desktop column wraps under the text, 1px tall, on tablet. */
	.tow-dot-hero__spacer { width: 100%; height: 1px; }
	.tow-dot-hero__title { margin: 0 20px 20px 0; font-size: 40px; line-height: 44px; }
	.tow-dot-hero__intro { margin: 0 20px 0 0; }
	.tow-dot-hero__points { margin-left: 0; }
	.tow-dot-hero__pilltext { margin-bottom: -40px; }

	.tow-dot-intro { padding: 30px 20px 40px; }

	.tow-main--dot-physicals-morton .tow-ib-black { padding: 40px 30px 20px; }
	.tow-main--dot-physicals-morton .tow-ib-black__h2 { font-size: 3.4rem; }

	.tow-dot-why__inner { flex-direction: column; }
	.tow-dot-why__text { width: auto; margin-bottom: 20px; }
	.tow-dot-why__pic { width: auto; }
	.tow-dot-why__h2 { margin: 0 0 20px; font-size: 34px; line-height: 40.8px; text-align: center; }
	.tow-dot-why__body { margin: 0 20px; }
	.tow-dot-why__photo { margin-top: 30px; }
	/* 70% of 70%. */
	.tow-dot-why__photo img { width: 49%; max-width: 100%; margin-inline: auto; }

	.tow-dot-exam { padding: 20px 20px 40px; background-position: left center; }
	.tow-dot-exam__row { flex-direction: column; }
	.tow-dot-exam__wide,
	.tow-dot-exam__half,
	.tow-dot-exam__widest { width: auto; }
	.tow-dot-exam__narrow,
	.tow-dot-exam__slim { display: none; }
	.tow-dot-exam__h2 { font-size: 34px; line-height: 47.6px; }

	.tow-dot-fit { padding: 30px 20px 40px; }
	.tow-dot-fit__card { padding-top: 0; }
	.tow-dot-fit__title { font-size: 24px; line-height: 33.6px; }

	.tow-dot-after { padding: 60px 20px 80px; }
	.tow-dot-after__lead,
	.tow-dot-after__statscol { width: 50%; }
	.tow-dot-after__h2 { font-size: 34px; line-height: 47.6px; }
	/* Wrapped, for the same reason as the hero: the grid's flex-basis resolves
	   against its column's stretched height. */
	.tow-dot-after__bottom { flex-wrap: wrap; }
	.tow-dot-after__gridcol,
	.tow-dot-after__schedcol { width: 100%; }
	.tow-dot-after__grid { flex-basis: 380px; }
	.tow-dot-after__sched { margin-top: 20px; }

	.tow-dot-call { padding: 40px 40px 30px; }
}

@media (max-width: 768px) {
	.tow-dot-hero { min-height: 200px; padding: 50px 0 0; }
	.tow-dot-hero__spacer { display: none; }
	.tow-dot-hero__title { margin-left: 20px; font-size: 38px; line-height: 41.8px; text-align: center; }
	.tow-dot-hero__intro { margin: 0 20px -20px; text-align: center; }
	.tow-dot-hero__points { flex-wrap: wrap; justify-content: center; gap: 20px; max-width: 90%; margin: 20px auto; padding: 0 4px; }
	.tow-dot-point { flex-grow: 1; justify-content: center; gap: 8px; width: 100%; }
	.tow-dot-point__pic { margin-top: -2px; }
	.tow-dot-point__pic img { width: 30px; }
	.tow-dot-point:nth-child(-n+2) .tow-dot-point__text { margin-bottom: -20px; }
	.tow-dot-hero__fees { margin: 20px 0 0; padding: 20px 20px 0; }
	.tow-dot-hero__pill { align-items: center; justify-content: center; width: 100%; height: 50%; margin: 0; padding: 8px 20px 30px; }
	.tow-dot-hero__pilltext { font-size: 20px; text-align: center; }
	.tow-dot-hero .tow-module--empty { display: none; }

	.tow-dot-intro { padding: 40px 20px 0; }
	.tow-dot-intro__box { align-items: center; margin: 0 0 20px; padding: 0 20px; }
	.tow-dot-intro__text { margin-bottom: 20px; font-size: 20px; }

	.tow-main--dot-physicals-morton .tow-ib-black { padding: 20px 20px 30px; }
	.tow-main--dot-physicals-morton .tow-ib-black__h2 { font-size: 2.4rem; }
	.tow-main--dot-physicals-morton .tow-ib-black__text { margin-bottom: -20px; }

	.tow-dot-why { padding: 60px 0 0; }
	.tow-dot-why__h2 { margin-bottom: 30px; font-size: 24px; line-height: 28.8px; }
	.tow-dot-why__photo { margin-top: 10px; }
	/* 90% of 90%. */
	.tow-dot-why__photo img { width: 81%; }

	.tow-dot-exam__wide,
	.tow-dot-exam__half,
	.tow-dot-exam__widest { padding-right: 0; }
	.tow-dot-exam__box > * { width: 100%; }
	.tow-dot-exam__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-dot-exam__lead,
	.tow-dot-exam__list,
	.tow-dot-exam__trap { margin-right: 20px; }
	.tow-dot-item { padding: 8px 10px 0; }
	/* The original shows "General physical" on desktop and tablet only. */
	.tow-dot-exam__row:nth-child(4) .tow-dot-exam__half:last-child { display: none; }
	.tow-dot-exam__flag { margin-top: 20px; }
	.tow-dot-exam__h3 { font-size: 24px; line-height: 33.6px; }

	.tow-dot-fit__cols { flex-direction: column; align-items: center; }
	.tow-dot-fit__col { width: 100%; max-width: 400px; }
	.tow-dot-fit__card { margin: 0; padding: 0; }
	.tow-dot-fit__col:last-child .tow-dot-fit__card { margin-bottom: 40px; }
	.tow-dot-fit__box { margin: 0 0 20px; }
	.tow-dot-fit__body { padding: 15px 10px 0; }
	.tow-dot-fit__icon img { width: 24px; }
	.tow-dot-fit__titlewrap { width: calc(100% - 49px); }
	.tow-dot-fit__title { letter-spacing: 0; }
	.tow-dot-fit__note { align-items: center; margin: 0 0 20px; padding: 0 20px; }
	.tow-dot-fit__notetext { font-size: 20px; }

	.tow-dot-after { padding: 30px 20px 40px; }
	.tow-dot-after__top { flex-wrap: wrap; }
	.tow-dot-after__lead,
	.tow-dot-after__statscol { width: 100%; }
	.tow-dot-after__statscol,
	.tow-dot-after__gridcol { padding: 0; }
	.tow-dot-after__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-dot-after__lead .tow-dot-after__text { margin-bottom: 20px; }
	.tow-dot-after__stats { gap: 0; margin: 0 20px 20px; }
	.tow-dot-stat { width: 50%; }
	.tow-dot-stat__big { margin-bottom: -20px; font-size: 28px; line-height: 40.6px; }
	.tow-dot-stat__small { margin-top: 0; }
	.tow-dot-after__gridcol { margin-bottom: 10px; }
	.tow-dot-after__grid { flex-basis: 100%; margin: 0 0 20px; }
	.tow-dot-card { flex-basis: 100%; gap: 0; }
	.tow-dot-card__text { margin: 0 20px 0 0; }
	.tow-dot-card__pic { margin-top: -20px; }
	.tow-dot-after__sched { margin: 30px 0 0; padding: 0; }
	.tow-dot-after__h2--sched { margin-top: 0; }
	.tow-dot-after__text--sched { margin-bottom: 0; }
	.tow-dot-after__text--sched:last-child { margin-bottom: 20px; }
	.tow-dot-after__pillbox { margin: 0 0 20px; }
	.tow-dot-after__pilltext { font-size: 16px; }

	.tow-dot-call { padding: 50px 20px 10px; }
	.tow-dot-call__text { font-size: 16px; }
	.tow-dot-call .tow-button--path { font-size: 14px; }
}

/* The path button with a shadow, a phone glyph and a second line. */
/* The shadow it had here is now on .tow-button--path itself, where every page's
   button needs it. */
.tow-button--call { text-align: center; }

/* 1.3em, not 20.8px: on the original the glyph scales with the button's text,
   which drops to 14px on phones. */
.tow-button--call__icon {
	margin: 0 8px 0 0;
	font-family: "tow-ua-tablet";
	font-size: 1.3em;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased; /* the original's icon fonts are */
	line-height: 1;
	vertical-align: middle;
}

.tow-button--call__icon::before { content: "\e922"; }
.tow-button--call .tow-button__text { vertical-align: middle; }

/* The button's own size and line: 16/18 on desktop, 16/19.2 below 992,
   14/16.8 on phones. */
.tow-button--call__sub {
	display: block;
	color: #fff;
	font-size: inherit;
	font-weight: 600;
	line-height: inherit;
}

/* ===========================================================================
 * ANIMAL CHIROPRACTIC — eight rows, node j4xi7g1s2paq down to ap1ein0y96ku.
 * 600.00, 561.78, 780.30, 294.00, 1058.39, 1220.45, 1365.45, 369.25.
 *
 * Built from docs/spec-animal-chiropractic.md. Literal line-heights.
 * ======================================================================== */

/* --- Row 1, hero (600). --- */
.tow-an-hero {
	display: flex;
	align-items: center;
	min-height: 600px;
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.tow-an-hero__inner { display: flex; width: 100%; max-width: 1200px; margin-inline: auto; }
.tow-an-hero__text { display: flex; flex-direction: column; justify-content: center; width: 70%; }
.tow-an-hero__spacer { width: 30%; }

/* 43px on 47.3 -- a title size used on no other page -- over a BLOCK of 69px
   Tangerine with 20 of padding above. */
.tow-an-hero__title {
	margin: 20px;
	color: var(--tow-black);
	font-size: 43px;
	font-weight: 700;
	line-height: 47.3px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-an-hero__title .main-title { display: block; }

.tow-an-hero__title .text-highlight {
	display: block;
	padding: 20px 0 0;
	font-family: var(--tow-font-script);
	font-size: 69px;
	font-weight: 400;
	line-height: 75.9px;
	letter-spacing: 1px;
}

.tow-an-hero__intro { margin: 20px; color: var(--tow-black); }
.tow-an-hero__intro p { margin: 0 0 20px; }
.tow-an-hero__intro a { color: inherit; }

/* --- Row 2, the lead-in (561.78). 1400 wide, columns TOP-aligned. --- */
.tow-an-intro { padding: 60px 20px; background-color: #f4f4f4; box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1); }
.tow-an-intro__inner { max-width: 1400px; margin-inline: auto; }
.tow-an-intro__cols { display: flex; align-items: flex-start; }

/* 25.04 / 49.92 / 25.04 of 1400. The middle column is a FLEX column, as every
   Beaver Builder column is: as a block it let the text's last paragraph margin
   escape, came out 347 against 367, and put the button 20px high -- invisible to
   the row, whose height the taller photograph sets. */
.tow-an-intro__side { width: 25.04%; }
.tow-an-intro__mid { display: flex; flex-direction: column; width: 49.92%; }

/* margin 0 -20px: each photograph is 40 wider than its column and reaches the
   viewport's edge. */
.tow-an-intro__photo { margin: 0 -20px; line-height: 0; }
.tow-an-intro__photo img { display: block; width: 100%; max-width: none; height: auto; }

.tow-an-intro__text { margin: 20px 0; color: var(--tow-maroon); text-align: center; }
.tow-an-intro__text p { margin: 0 0 20px; }
.tow-an-intro__btn { margin: 0 20px 10px; text-align: center; }

/* --- Row 3, "Why Dr. Karen" (780.30). Text on the RIGHT. --- */
.tow-an-why {
	display: flex;
	align-items: center;
	min-height: 600px;
	padding: 60px 20px;
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: cover;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
}

.tow-an-why__inner { display: flex; width: 100%; max-width: 1200px; margin-inline: auto; }
.tow-an-why__spacer { width: 40%; }
.tow-an-why__col { display: flex; flex-direction: column; justify-content: center; width: 60%; }

.tow-an-why__h2 {
	margin: 20px;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 41.8px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-an-why__h2 .main-title { display: block; }

.tow-an-why__h2 .text-highlight {
	display: block;
	padding: 30px 0 0;
	font-family: var(--tow-font-script);
	font-size: 55px;
	font-weight: 400;
	line-height: 60.5px;
	letter-spacing: 2px;
}

.tow-an-why__lead { margin: 10px 20px 0; color: var(--tow-black); }
.tow-an-why__lead p { margin: 0 0 20px; }

.tow-an-cred { margin: 0 20px; white-space: nowrap; }
.tow-an-cred--first { margin-top: 20px; }

/* A 30px box, the glyph centred in it when narrower (award) and overflowing
   right from its left edge when wider (graduation cap) -- exactly what the
   original's 30px text-align:center icon does. BLACK here, not maroon. */
.tow-an-cred__icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin: 5px 16px 0 0;
	line-height: 0;
	text-align: center;
	vertical-align: top;
}

.tow-an-cred__svg { display: inline-block; width: auto; height: 30px; vertical-align: top; fill: var(--tow-black); }

/* 66 = the 30px icon box, its 16px gap, and the 20 the original leaves after:
   614 in the 680 column at 1440, 496 at 900, 662 on a phone. */
.tow-an-cred__text {
	display: inline-block;
	width: calc(100% - 66px);
	color: var(--tow-black);
	text-align: left;
	vertical-align: top;
	white-space: normal;
}

.tow-an-cred__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* --- Row 4, the script line (294). --- */
.tow-an-quote {
	padding: 60px 20px 40px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.tow-an-quote__inner { display: flex; flex-direction: column; max-width: 1200px; margin-inline: auto; }

.tow-an-quote__text {
	margin: 0 20px;
	color: var(--tow-white);
	font-family: var(--tow-font-script);
	font-size: 60px;
	line-height: 87px;
	letter-spacing: 1.8px;
	text-align: center;
}

.tow-an-quote__text p { margin: 0 0 20px; font-weight: 300; }

/* --- Row 5, "Is Your Animal a Candidate?" (1058.39), container 1090. --- */
.tow-an-fit { padding: 60px 20px 120px; background-color: var(--tow-white); }

.tow-an-fit__inner {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	max-width: 1090px;
	margin-inline: auto;
}

/* 850 wide, centred: the 120px margins at 1440 are what is left over, and they
   become 105 at 1100, 5 at 900 and 0 on a phone all by themselves. */
.tow-an-fit__head {
	display: flex;
	box-sizing: border-box;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	max-width: 850px;
	margin: 20px auto;
}

.tow-an-fit__h2 {
	margin: 0;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: center;
}

.tow-an-fit__lead { margin: 12px 0 30px; color: var(--tow-black); text-align: center; }
.tow-an-fit__lead p { margin: 0 0 20px; }

.tow-an-fit__cols { display: flex; }
.tow-an-fit__col { display: flex; width: 50%; }

.tow-an-fit__card {
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: flex-start;
	border: 1px solid;
	border-radius: 12px;
}

/* The two cards are padded DIFFERENTLY: 20/20/10 on the left, 20 all round on
   the right. */
.tow-an-fit__card--yes { margin: 0 20px 0 0; padding: 20px 20px 10px; border-color: rgb(180, 227, 205); background: rgb(240, 253, 244); }
.tow-an-fit__card--no  { margin: 0 0 0 20px; padding: 20px; border-color: rgb(227, 198, 197); background: rgb(254, 242, 242); }

.tow-an-fit__box {
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 10px;
	margin: 20px 0;
	border-radius: 20px;
}

/* flex: 1 1 auto on the original -- it fills its card. */
.tow-an-fit__box--grow { flex: 1 1 auto; }

.tow-an-fit__module { box-sizing: border-box; align-self: stretch; padding: 0 20px 0 0; }
.tow-an-fit__module--wide { padding-right: 40px; }
.tow-an-fit__body { display: flow-root; }
.tow-an-fit__titlehead { white-space: nowrap; }

.tow-an-fit__mark { display: inline-block; margin: 0 20px 0 0; line-height: 0; vertical-align: top; }
.tow-an-fit__mark img { display: block; width: 30px; height: auto; }

.tow-an-fit__titlewrap { display: inline-block; width: calc(100% - 50px); vertical-align: middle; white-space: normal; }

/* "Built For" has a -5px top margin; "Not Designed For", on the same page, none. */
.tow-an-fit__title {
	display: inline-block;
	margin: -5px 0 10px;
	color: var(--tow-black);
	font-size: 28px;
	font-weight: 700;
	line-height: 39.2px;
	letter-spacing: -0.8px;
	vertical-align: middle;
}

.tow-an-fit__titlewrap--no .tow-an-fit__title { margin: 0 0 10px; }

.tow-an-animal { white-space: nowrap; }

/* 24px animal glyphs in GREEN, 1px below their wrapper's top. */
.tow-an-animal__icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	margin: 5px 20px 0 0;
	line-height: 0;
	text-align: center;
	vertical-align: top;
}

.tow-an-animal__svg {
	position: relative;
	top: 1px;
	display: inline-block;
	width: auto;
	height: 24px;
	vertical-align: top;
	fill: rgb(103, 194, 142);
}

.tow-an-animal__text { display: inline-block; width: calc(100% - 44px); vertical-align: top; white-space: normal; }
.tow-an-animal__textin { margin: 5px 0 -20px; color: var(--tow-black); text-align: left; }
.tow-an-animal__textin p { margin: 0 0 20px; padding: 0 0 10px; }

.tow-an-fit__text { margin: 10px 0 0; color: var(--tow-black); text-align: left; }
.tow-an-fit__text ul { margin: 0 0 10px; padding: 0 0 0 20px; list-style: disc; }
.tow-an-fit__text li { margin: 0 0 20px; }
.tow-an-fit__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* --- Row 6, "Veterinary Referral Required" (1220.45). --- */
.tow-an-refer { padding: 60px 20px; background-color: #f4f4f4; box-shadow: inset 0 4px 20px 0 rgba(0, 0, 0, 0.1); }
.tow-an-refer__inner { display: flex; flex-direction: column; max-width: 1200px; margin-inline: auto; }
.tow-an-refer__top { display: flex; }

.tow-an-refer__lcol {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 50%;
	padding-right: 40px;
}

.tow-an-refer__rcol { box-sizing: border-box; width: 50%; padding-left: 40px; }

.tow-an-refer__h2 {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 41.8px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-an-refer__text { margin: 20px; color: var(--tow-black); }
.tow-an-refer__text p { margin: 0 0 20px; }

/* Four columns, TOP-aligned. */
.tow-an-steps { display: flex; align-items: flex-start; }
.tow-an-steps__col { width: 25%; }

/* flow-root keeps the arrow's 5 above and the text's 20 below inside. */
.tow-an-step { display: flow-root; margin: 20px; }
.tow-an-step__pic { margin: 5px 0 0; line-height: 0; }
/* 250 where the column allows it, the column's own width where it does not:
   225 at 1100, 165 at 900. */
.tow-an-step__pic img { display: block; width: 250px; max-width: 100%; height: auto; }

/* 18px/700 on 26.1 -- bold small type used only for these steps. */
.tow-an-step__text { margin: 12px 0 0; color: var(--tow-black); font-size: 18px; font-weight: 700; line-height: 26.1px; text-align: left; }
.tow-an-step__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* THE PHONE'S OWN STEPS. At 768 and below the original hides the four cards
   above and shows these four rows instead, each with a tall thin arrow (20x105)
   beside 20px text -- larger type than the cards it replaces. Hidden above 768.
   Each row hangs below its own box: -40 on the first, -20 on the rest. */
.tow-an-mobsteps { display: none; flex-direction: column; gap: 10px; margin: 20px; }
.tow-an-mobstep__in { margin: 0 0 -20px; padding: 15px 10px 20px; white-space: nowrap; }
.tow-an-mobstep:first-child .tow-an-mobstep__in { margin-bottom: -40px; }

.tow-an-mobstep__pic { display: inline-block; width: 20px; margin: 5px 15px 0 0; line-height: 0; vertical-align: top; }
.tow-an-mobstep__pic img { display: block; width: 20px; height: auto; }

/* 55 = the 20px arrow, its 15px gap and 20 after. The original nests the
   margin-top inside a second wrapper; on an inline-block aligned to the top of
   the line the margin box is what the line measures, so one element does it. */
.tow-an-mobstep__text {
	display: inline-block;
	width: calc(100% - 55px);
	color: var(--tow-black);
	font-size: 20px;
	line-height: 29px;
	text-align: left;
	vertical-align: top;
	white-space: normal;
}

.tow-an-mobstep:nth-child(2) .tow-an-mobstep__text,
.tow-an-mobstep:nth-child(3) .tow-an-mobstep__text { margin-top: 10px; }
.tow-an-mobstep:nth-child(4) .tow-an-mobstep__text { margin-top: -5px; }
.tow-an-mobstep__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* Flush under the steps: the original's -30 top margin meets a +30 escaping
   the group above in block flow and resolves to 0. */
.tow-an-refer__note { display: flex; flex-direction: column; gap: 10px; margin: 0 120px 20px; }

.tow-an-refer__notebox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 20px 10px;
	border-radius: 20px;
	background: var(--tow-maroon);
}

.tow-an-refer__notetext { margin: 0 0 -10px; color: var(--tow-white); text-align: center; }
.tow-an-refer__notetext p { margin: 0 0 20px; }

/* A flex column, so the text keeps its last paragraph's 20px margin: 176, not
   156. As a block it cost this row exactly 20. */
.tow-an-refer__where { display: flex; flex-direction: column; }
.tow-an-refer__wheretext { margin: 79px 20px 20px; color: var(--tow-black); }
.tow-an-refer__wheretext p { margin: 0 0 20px; }
.tow-an-refer__wheretext a { color: inherit; }
.tow-an-refer__btn { margin: 0 20px 50px; text-align: center; }

/* --- Row 7, "Why Waiting Makes It Worse" (1365.45). --- */
.tow-an-wait { padding: 60px 20px; background-color: var(--tow-white); }
.tow-an-wait__inner { display: flex; flex-direction: column; max-width: 1200px; margin-inline: auto; }
.tow-an-wait__top,
.tow-an-wait__bottom { display: flex; }

/* 600 / 600, BOTH bottom-aligned; the photograph's column is padded LEFT. */
.tow-an-wait__pic {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 50%;
	padding-left: 40px;
}

.tow-an-wait__photo { margin: 20px 0 0; line-height: 0; }
/* The module's full width -- 560 at 1440, 490 at 1100 -- not a fixed 560. */
.tow-an-wait__photo img { display: block; width: 100%; height: auto; }

.tow-an-wait__col {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 50%;
	padding-right: 40px;
}

.tow-an-wait__h2 {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 38px;
	font-weight: 700;
	line-height: 53.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

.tow-an-wait__box { display: flex; flex-direction: column; align-items: start; gap: 10px; margin: 10px 0 0; border-radius: 20px; }
.tow-an-wait__box--pull { margin-top: -20px; }

/* Each point hangs 20 below its box: module content 186, module 166. */
.tow-an-point { align-self: stretch; margin: 0 0 -20px; }
.tow-an-point__in { box-sizing: border-box; padding: 20px 40px 20px 20px; border-radius: 12px; white-space: nowrap; }
.tow-an-point__pic { display: inline-block; margin: 5px 10px 0 0; line-height: 0; vertical-align: top; }
.tow-an-point__pic img { display: block; width: 35px; height: auto; }

/* 100% minus 65: the picture, its 10 gap, and a further 20 the original leaves. */
.tow-an-point__text { display: inline-block; width: calc(100% - 65px); color: var(--tow-black); text-align: left; vertical-align: top; white-space: normal; }
.tow-an-point__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* 36px/700 on 43.2 -- a heading size used nowhere else. */
.tow-an-point__title {
	margin: 0;
	color: var(--tow-black);
	font-size: 36px;
	font-weight: 700;
	line-height: 43.2px;
	letter-spacing: -0.8px;
	text-align: left;
}

/* Grey quote with a 4px maroon rule. */
.tow-an-quote2 { margin: 0 20px; }
.tow-an-quote2--indent { align-self: stretch; margin: 0 0 0 20px; }

.tow-an-quote2__in {
	display: flow-root;
	padding: 20px 15px 0;
	border-left: 4px solid var(--tow-maroon);
	border-radius: 12px;
	background: rgb(243, 244, 246);
}

.tow-an-quote2__text { margin: 5px 0 0; color: var(--tow-black); text-align: left; }
.tow-an-quote2__text p { margin: 0 0 20px; padding: 0 0 10px; }

.tow-an-wait__lcol {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 60%;
	padding-right: 40px;
}

.tow-an-wait__hbox { display: flex; flex-direction: column; align-items: start; gap: 10px; margin: 20px 0 0; border-radius: 20px; }
.tow-an-wait__household { align-self: stretch; margin: 0 20px; color: var(--tow-black); }
.tow-an-wait__household p { margin: 0 0 20px; }
.tow-an-wait__household a { color: inherit; }

.tow-an-wait__rcol {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	width: 40%;
	padding-left: 40px;
}

.tow-an-wait__photo2 { margin: 20px 20px 0; line-height: 0; }
.tow-an-wait__photo2 img { display: block; width: 100%; height: auto; }

/* --- Row 8, the closing line and button (369.25). --- */
.tow-an-cta {
	padding: 60px 20px 40px;
	background-color: #f4f4f4;
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

.tow-an-cta__inner { display: flex; flex-direction: column; max-width: 1200px; margin-inline: auto; }

.tow-an-cta__script {
	margin: 0 20px;
	color: var(--tow-white);
	font-family: var(--tow-font-script);
	font-size: 65px;
	line-height: 94.25px;
	letter-spacing: 1.8px;
	text-align: center;
}

.tow-an-cta__script p { margin: 0 0 20px; font-weight: 300; }
/* Shrink-wrapped by its auto margins: the closing line's own width, 700.05 at
   20px and 560.03 at 16, which is where the 249.977 came from. */
.tow-an-cta__box { display: flex; flex-direction: column; gap: 10px; margin: 0 auto 20px; }
.tow-an-cta__btn { margin: 0 0 10px; text-align: center; }
.tow-an-cta__text { margin: 12px 0 0; color: var(--tow-white); font-weight: 700; text-align: center; }
.tow-an-cta__text p { margin: 0 0 20px; }

/* --- Animal chiropractic, tablet and phone. Each value is the original's
   builder setting for that node at that breakpoint. The two script spans switch
   at 1201, 801 and 450 -- this page's own widths, not the site's. --- */
@media screen and (max-width: 1201px) {
	.tow-an-hero__title .text-highlight { font-size: 58px; line-height: 63.8px; }
}

@media (max-width: 1200px) {
	.tow-an-hero__title { font-size: 38px; line-height: 41.8px; }
	.tow-an-quote__text { font-size: 50px; line-height: 72.5px; }
	/* Full width from here down; the 120px margins are the desktop row's. */
	.tow-an-refer__note { margin: 0 0 20px; }
	.tow-an-cta__script { font-size: 60px; line-height: 87px; }
}

@media (max-width: 992px) {
	/* Row 1. The hero's columns do NOT stack here -- they stay 70/30 and only
	   the spacer's disappearance at 768 ends that. */
	.tow-an-hero { min-height: 485px; padding-bottom: 0; background-position: left center; }
	.tow-an-hero__text { margin-bottom: 20px; }
	.tow-an-hero__title { margin: 0 20px 20px 0; font-size: 40px; line-height: 44px; }
	.tow-an-hero__intro { margin: 0 20px 20px 0; }

	.tow-an-intro { padding: 40px; }

	/* Row 3. The spacer narrows to 30% and the text takes the other 70. */
	.tow-an-why { min-height: 421px; padding-bottom: 20px; background-position: 53% 0; }
	.tow-an-why__spacer { width: 30%; }
	.tow-an-why__col { width: 70%; margin-bottom: 20px; }
	.tow-an-why__h2 { margin: 0 20px 20px 0; font-size: 30px; line-height: 33px; }
	.tow-an-why__lead { margin: 0 20px 0 0; }

	.tow-an-quote { padding: 40px 40px 30px; }
	.tow-an-quote__text { font-size: 50px; line-height: 60px; }

	.tow-an-fit { padding: 60px 20px 40px; }
	.tow-an-fit__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-an-fit__title { font-size: 24px; line-height: 33.6px; }

	.tow-an-refer { padding: 20px 40px 70px; }
	/* WRAPPED, as the builder's column groups are: the empty right-hand column
	   drops under the text and keeps the 1px minimum height a column has. */
	.tow-an-refer__top { flex-wrap: wrap; }
	.tow-an-refer__lcol { width: 100%; }
	.tow-an-refer__rcol { width: 100%; height: 1px; padding: 0; }
	.tow-an-refer__h2 { margin: 40px 20px 0; font-size: 30px; line-height: 33px; }
	.tow-an-step__text { font-size: 16px; line-height: 23.2px; }
	.tow-an-refer__note { margin-bottom: 0; }

	.tow-an-wait { padding: 60px 20px 40px; }
	.tow-an-wait__top,
	.tow-an-wait__bottom { flex-wrap: wrap; }
	.tow-an-wait__pic,
	.tow-an-wait__col,
	.tow-an-wait__lcol,
	.tow-an-wait__rcol { width: 100%; }
	/* The portrait hangs 200px off the left edge, and 60% of 60% wide -- the
	   original sizes the wrapper AND the image, one inside the other. */
	.tow-an-wait__photo { margin-left: -200px; }
	.tow-an-wait__photo img { width: 36%; margin-inline: auto; }
	.tow-an-wait__h2 { font-size: 32px; line-height: 44.8px; }
	/* 75% of 75%. */
	.tow-an-wait__photo2 img { width: 56.25%; margin-inline: auto; }

	.tow-an-cta { padding: 40px 40px 30px; }
	.tow-an-cta__script { font-size: 43px; line-height: 51.6px; }
}

@media screen and (max-width: 801px) {
	.tow-an-hero__title .text-highlight { font-size: 45px; line-height: 49.5px; }
	.tow-an-why__h2 .text-highlight { padding-top: 20px; font-size: 45px; line-height: 49.5px; }
}

@media (max-width: 768px) {
	/* Rows 1 and 3 lose their side padding entirely here; the type inside keeps
	   its own 20px margins. */
	.tow-an-hero { padding: 50px 0 0; }
	.tow-an-hero__text { width: 100%; }
	.tow-an-hero__spacer { display: none; }
	.tow-an-hero__title { margin: 0 20px 20px; font-size: 38px; line-height: 41.8px; text-align: center; }
	.tow-an-hero__intro { margin: 0 20px; letter-spacing: 0; text-align: center; }

	.tow-an-intro { padding: 30px 20px 40px; }
	.tow-an-intro__cols { flex-wrap: wrap; }
	.tow-an-intro__side,
	.tow-an-intro__mid { width: 100%; max-width: 400px; margin-inline: auto; }
	/* They no longer overhang: 20 in on each side, like everything else. */
	.tow-an-intro__photo { margin: 0 20px; }
	.tow-an-intro__btn .tow-button { font-size: 18px; }

	.tow-an-why { padding: 50px 0 12px; background-position: right center; }
	.tow-an-why__spacer { display: none; }
	.tow-an-why__col { width: 100%; }
	.tow-an-why__h2 { margin: 0 20px 20px; font-size: 24px; line-height: 26.4px; text-align: center; }
	.tow-an-why__lead { margin: 0 20px; letter-spacing: 0; }

	.tow-an-quote { padding: 40px 20px 25px; }
	.tow-an-quote__text { margin: 0; font-size: 32px; line-height: 44.8px; letter-spacing: 1px; }

	.tow-an-fit { padding: 20px 20px 40px; }
	.tow-an-fit__h2 { font-size: 24px; line-height: 33.6px; }
	.tow-an-fit__lead { margin: 12px 0 20px; font-size: 16px; line-height: 23.2px; letter-spacing: 0; }
	/* The two cards stack, each capped at 400 and centred, and lose their side
	   padding -- the boxes inside now run the full width of the card. */
	.tow-an-fit__cols { flex-wrap: wrap; }
	.tow-an-fit__col { width: 100%; max-width: 400px; margin-inline: auto; }
	.tow-an-fit__card--yes { margin: 0 0 40px; padding: 20px 0 0; }
	.tow-an-fit__card--no { margin: 0; padding: 20px 0; }
	.tow-an-fit__box { margin: 0 0 20px; }
	.tow-an-fit__box--grow { margin: 0 0 -10px; }
	.tow-an-fit__module,
	.tow-an-fit__module--wide { padding: 0; }
	.tow-an-fit__module > .tow-an-fit__titlehead,
	.tow-an-fit__module > .tow-an-animal,
	.tow-an-fit__body { margin-bottom: -20px; padding: 15px 10px 20px; }
	.tow-an-fit__mark img { width: 24px; }
	.tow-an-fit__titlewrap { width: calc(100% - 49px); }
	.tow-an-fit__title { letter-spacing: 0; }

	.tow-an-refer { padding: 30px 20px 50px; }
	.tow-an-refer__rcol { display: none; }
	.tow-an-refer__lcol { padding-right: 0; }
	.tow-an-refer__h2 { margin: 20px 20px 0; font-size: 24px; line-height: 26.4px; text-align: center; }
	.tow-an-refer__text { letter-spacing: 0; text-align: center; }
	/* The four cards give way to the phone's own stack. */
	.tow-an-steps { display: none; }
	.tow-an-mobsteps { display: flex; }
	.tow-an-refer__wheretext { margin: 20px; }
	.tow-an-refer__btn { margin: 0 20px 20px; }

	.tow-an-wait { padding: 30px 20px 40px; }
	.tow-an-wait__pic { padding-left: 0; }
	.tow-an-wait__photo { margin-left: -100px; }
	/* 80% of 80%. */
	.tow-an-wait__photo img { width: 64%; }
	.tow-an-wait__col { max-width: 400px; margin-inline: auto; padding-right: 0; }
	.tow-an-wait__h2 { font-size: 24px; line-height: 33.6px; text-align: center; }
	.tow-an-point__in { padding: 15px 10px 20px; }
	.tow-an-point__pic img { width: 24px; }
	.tow-an-point__text { width: calc(100% - 49px); letter-spacing: 0; }
	/* The second point hangs 40 below its box here, not 20. */
	.tow-an-wait__col .tow-an-wait__box:nth-child(4) .tow-an-point { margin-bottom: -40px; }
	.tow-an-wait__box--pull { margin-top: 20px; }
	.tow-an-quote2__in { padding: 25px 10px 0; }

	.tow-an-wait__lcol { padding-right: 0; }
	.tow-an-wait__rcol { max-width: 400px; margin-inline: auto; padding-left: 0; }
	.tow-an-wait__photo2 { margin-top: 40px; }
	.tow-an-wait__photo2 img { width: 100%; }
	/* The household paragraph is a full column wide AND indented 20: it runs off
	   the right edge on the original, which is why the row overflows. */
	.tow-an-wait__household { align-self: start; width: 100%; }
	/* Its own point keeps the 35px mark the others lose. */
	.tow-an-wait__hbox .tow-an-point__pic img { width: 35px; }
	.tow-an-wait__hbox .tow-an-point__text { width: calc(100% - 60px); }
	.tow-an-point__title { font-size: 28px; line-height: 33.6px; letter-spacing: 0; }

	.tow-an-cta { padding: 40px 20px 25px; }
	.tow-an-cta__script { margin: 0; font-size: 38px; line-height: 53.2px; letter-spacing: 1.2px; }
	.tow-an-cta__text { font-size: 16px; line-height: 23.2px; letter-spacing: 0; }
}

@media screen and (max-width: 450px) {
	.tow-an-hero__title .text-highlight { font-size: 40px; line-height: 44px; }
	.tow-an-why__h2 .text-highlight { font-size: 28px; line-height: 30.8px; }
}

/* ===========================================================================
 * CHIROPRACTIC CARE — seven rows, node agi6xo8btrkf down to aut9yerjf7bk.
 * 868.00, 893.16, 754.77, 626.42, 534.36, 966.39, 511.56.
 *
 * Built from docs/spec-chiropractic-care.md.
 *
 * EVERY COLUMN AND EVERY ROW INNER HERE IS A FLEX COLUMN, as every Beaver
 * Builder column is. Row 6 is the case that needs it: its table module's 20px
 * bottom margin and the closing line's 60px top margin sit next to each other,
 * and in a block they would collapse to 60 where the original keeps 80. The
 * animal page lost 20px twice to exactly this.
 * ======================================================================== */

.tow-cc-hero__inner,
.tow-cc-eff__inner,
.tow-cc-why__inner,
.tow-cc-tools__inner,
.tow-cc-spec__inner,
.tow-cc-hurt__inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin-inline: auto;
}

.tow-cc-hero__inner,
.tow-cc-eff__inner,
.tow-cc-why__inner,
.tow-cc-hurt__inner { max-width: 1200px; }

.tow-cc-tools__inner,
.tow-cc-spec__inner { max-width: 1400px; }

/* --- Row 1, hero (868). 720 / 480, then the button on a row of its own. --- */
.tow-cc-hero {
	padding: 40px 20px 60px;
	background-color: var(--tow-white);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.tow-cc-hero__cols { display: flex; }

.tow-cc-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 60%;
	padding-right: 40px;
}

.tow-cc-hero__spacer { width: 40%; padding-left: 40px; }

/* A BOX MODULE: a flex column that does NOT stretch its children, 10px apart.
   Its 20px top margin is what makes the column 644 around a 624 box. */
.tow-cc-hero__box,
.tow-cc-lead__box,
.tow-cc-fix__box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.tow-cc-hero__box { margin-top: 20px; }

/* TWO DIFFERENT TEXT SHADOWS, and only in this row: 1px 1px 16px at .23 on the
   title, 0 1px 16px at .22 on the two paragraphs, none on the callouts. Found
   by matching rules to the elements; the layout-CSS dump missed the paragraph
   one because its selector ends `*:not(b, strong)`. */
.tow-cc-hero__title {
	margin: 0;
	color: var(--tow-black);
	font-size: 50px;
	line-height: 1.4;
	text-align: left;
	text-shadow: 1px 1px 16px rgba(0, 0, 0, 0.23);
}

.tow-cc-hero__intro {
	margin-right: 20px;
	color: var(--tow-black);
	text-shadow: 0 1px 16px rgba(0, 0, 0, 0.22);
}

.tow-cc-hero__intro--second { margin: 20px 40px 0 0; }
.tow-cc-hero__intro p { margin: 0 0 20px; }

/* The pale callout. 20 + 5 + 39 + 12 = 76: the text's -8 bottom margin and its
   paragraph's 20 collapse to 12, which the box keeps. */
.tow-cc-callout {
	width: 100%;
	padding: 20px 15px 0;
	background: #f3f4f6;
	border-left: 4px solid var(--tow-maroon);
	border-radius: 15px;
}

.tow-cc-callout__text { margin: 5px 0 -8px; color: var(--tow-maroon); text-align: left; }
.tow-cc-callout__text p { margin: 0 0 20px; padding: 0 0 10px; }

.tow-cc-hero__btn { margin: 60px 20px 10px; text-align: center; }

/* --- Shared by rows 2 and 6: a heading and a line in a 60.75% column. --- */
.tow-cc-lead { display: flex; }

.tow-cc-lead__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 60.75%;
	padding-right: 40px;
}

.tow-cc-lead__spacer { width: 39.25%; padding-left: 40px; }
.tow-cc-lead__box { margin-top: 20px; }

.tow-cc-lead__h2 {
	margin: 0;
	color: var(--tow-black);
	font-size: 40px;
	line-height: 1.4;
	text-align: left;
}

.tow-cc-lead__text { margin-right: 20px; color: var(--tow-black); }
.tow-cc-lead__text p { margin: 0 0 20px; }

.tow-cc-lead__h2--light,
.tow-cc-lead__text--light { color: var(--tow-white); }

/* --- Row 2, "Efficiency Without the Rush" (893.16). --- */
.tow-cc-eff {
	padding: 40px 20px 60px;
	background-color: var(--tow-white);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}

.tow-cc-eff__cards { display: flex; }

.tow-cc-eff__col {
	display: flex;
	flex-direction: column;
	width: 50%;
}

.tow-cc-eff__col--left { padding-right: 20px; }
.tow-cc-eff__col--right { padding-left: 20px; }

/* A box module holding one info box whose content is pulled 20 LEFT and 20 UP
   from its foot: the card is 580 wide, what is inside it is 600. The left
   column's two cards then move -20 and +20, which cancel: 143.2 x 2 = 286.4. */
.tow-cc-feature { display: flow-root; width: 100%; }
.tow-cc-feature--up { margin-bottom: -20px; }
.tow-cc-feature--down { margin-top: 20px; }

.tow-cc-feature__inner {
	display: flex;
	align-items: flex-start;
	margin: 0 0 -20px -20px;
	padding: 20px 40px 0 20px;
}

/* The only difference between the three: 40, 20 and 0 on the right. */
.tow-cc-feature--r20 .tow-cc-feature__inner { padding-right: 20px; }
.tow-cc-feature--r0 .tow-cc-feature__inner { padding-right: 0; }

.tow-cc-feature__mark {
	flex: none;
	width: 35px;
	margin: 5px 10px 0 0;
	line-height: 0;
}

.tow-cc-feature__mark img { display: block; width: 35px; height: auto; }

/* The plugin's own rule, `calc(100% - 65px)`: 475, 495 and 515. */
.tow-cc-feature__content { width: calc(100% - 65px); }

/* 36px, and the plugin's 8px bottom margin loses to the theme's 20. */
.tow-cc-feature__title {
	margin: 0 0 20px;
	color: var(--tow-maroon);
	font-size: 36px;
	font-weight: 700;
	/* 1.2EM, NOT 1.2, as the plugin writes it. The em resolves to a literal
	   43.2px and renders 43.2; the bare ratio rendered 43.19, and two cards
	   stacked put row 2 0.03 short. */
	line-height: 1.2em;
}

.tow-cc-feature__text { margin-top: -8px; color: var(--tow-maroon); }
.tow-cc-feature__text p { margin: 0 0 20px; padding: 0 0 10px; }

.tow-cc-eff__table { margin: 50px 20px 20px; }

/* THE COMPARISON TABLE — the client's own pasted <style>, scoped. Its type is
   the page's Lexend, because the paste set no font of its own. */
.tow-cc-compare {
	width: 100%;
	overflow-x: auto;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	margin: 0 auto;
}

.tow-cc-compare table {
	width: 100%;
	border-collapse: collapse;
	min-width: 520px;
	background: transparent;
	border-radius: 12px;
	overflow: hidden;
}

.tow-cc-compare thead th {
	padding: 18px 20px;
	font-size: 15px;
	font-weight: 700;
	text-align: left;
	color: #fff;
}

.tow-cc-compare th.col-feature { background: #2d2d2d; width: 22%; }
.tow-cc-compare th.col-bad { background: #2d2d2d; width: 39%; }
.tow-cc-compare th.col-good { background: #a83232; width: 39%; }
.tow-cc-compare tbody tr { border-bottom: 1px solid #e8e8e8; }
.tow-cc-compare tbody tr:last-child { border-bottom: none; }

.tow-cc-compare tbody td {
	padding: 16px 20px;
	font-size: 15px;
	vertical-align: middle;
	line-height: 1.4;
}

.tow-cc-compare td.col-feature { background: #fff; color: #222; font-weight: 500; border-right: 1px solid #e8e8e8; }
.tow-cc-compare td.col-bad { background: #fff; color: #cc3333; border-right: 1px solid #e8e8e8; }
.tow-cc-compare td.col-good { background: #fdf0f0; color: #222; }

.tow-cc-compare .icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 700;
	margin-right: 10px;
	flex-shrink: 0;
}

.tow-cc-compare .icon-bad { background: #ffe0e0; color: #cc3333; }
.tow-cc-compare .icon-good { background: #d4edda; color: #2e7d32; }
.tow-cc-compare .cell-inner { display: flex; align-items: center; }

/* The paste's own phone layout, carried with it. */
@media (max-width: 600px) {
	.tow-cc-compare { overflow-x: visible; border-radius: 10px; box-shadow: none; }
	.tow-cc-compare table { min-width: unset; display: block; }
	.tow-cc-compare thead { display: none; }
	.tow-cc-compare tbody { display: block; }
	.tow-cc-compare tbody tr { display: block; border: 1px solid #e0e0e0; border-radius: 10px; margin-bottom: 14px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); }
	.tow-cc-compare tbody tr:last-child { border-bottom: 1px solid #e0e0e0; }
	.tow-cc-compare tbody td { display: block; padding: 12px 16px; border-right: none; border-bottom: 1px solid #e8e8e8; font-size: 14px; }
	.tow-cc-compare tbody td:last-child { border-bottom: none; }
	.tow-cc-compare td.col-feature { background: #2d2d2d; color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.3px; }
	/* EVERY cell loses its right border here, not just the middle one. Written
	   on `tbody td` alone it lost to the desktop rules, which name the classes
	   and therefore outrank it. */
	.tow-cc-compare td.col-feature,
	.tow-cc-compare td.col-bad,
	.tow-cc-compare td.col-good { border-right: none; }
	.tow-cc-compare td.col-bad::before { content: 'Standard "Crack-and-Go": '; font-weight: 600; color: #999; font-size: 11px; display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
	.tow-cc-compare td.col-good::before { content: 'Touch of Wellness Model: '; font-weight: 600; color: #a83232; font-size: 11px; display: block; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
}

/* --- Row 3, "Why Dr. Karen Built This Practice" (754.77). --- */
.tow-cc-why {
	display: flex;
	align-items: center;
	min-height: 600px;
	padding: 40px 20px 0;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.15);
	/* THE PHOTO OVERHANGS THE PAGE: its module's -160px right margin puts the
	   picture's edge at x1480. The original's html and body are overflow
	   hidden, so nothing scrolls; this theme's are not, so the row clips its
	   own x axis. `clip`, not `hidden`, so the y axis stays visible. */
	overflow-x: clip;
}

.tow-cc-why__cols { display: flex; }

.tow-cc-why__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 70%;
}

.tow-cc-why__spacer { width: 30%; }

.tow-cc-why__h2 {
	margin: 0 20px;
	color: var(--tow-black);
	font-size: 40px;
	line-height: 1.4;
	text-align: left;
}

.tow-cc-why__body { margin: 20px 20px -20px; color: var(--tow-black); }
.tow-cc-why__body p { margin: 0 0 20px; }

/* -270 up into the text above and -160 out past the container. Relative, as
   on the original, which is what paints it over the paragraphs it overlaps. */
.tow-cc-why__photo {
	position: relative;
	margin: -270px -160px 0 20px;
	line-height: 0;
}

.tow-cc-why__photobox { display: block; width: 1000px; margin-left: auto; }
.tow-cc-why__photobox img { display: block; width: 1000px; height: auto; }

/* --- Row 4, "Our Toolkit" (626.42), container 1400. --- */
.tow-cc-tools {
	padding: 80px 20px 90px;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
}

.tow-cc-tools__group { display: flex; }

/* GROW 1, as Beaver Builder's equal-height columns are (`flex: 1 1 auto`).
   Invisible wherever a column's width is a whole number; here 33.33% of 1400
   floors to 466.609 and leaves 2/64 of a pixel over, which the original hands
   to the second and third columns: 466.609 / 466.766 / 466.625. Without it
   they stayed 466.609 / 466.75 / 466.609 and every card sat up to 0.02 off. */
.tow-cc-tools__col { display: flex; flex-grow: 1; width: 33.33%; }

/* The 33.34 column moves: second in the top row, third in the bottom one. */
.tow-cc-tools__group--a .tow-cc-tools__col:nth-child(2),
.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(3) { width: 33.34%; }

.tow-cc-tools__cell {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	margin: 0 10px;
	border-radius: 20px;
}

.tow-cc-tools__cell--card { padding: 0 10px; background: var(--tow-white); }

/* The bottom row's second and third cards start 10 lower, and stretch to the
   foot: 197.23 beside the first card's 207.23. */
.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(n+2) .tow-cc-tools__cell { margin-top: 10px; }

.tow-cc-tools__h2 {
	margin: 20px 20px 0;
	color: var(--tow-white);
	font-size: 38px;
	line-height: 1.4;
	text-align: left;
}

.tow-cc-tools__intro { margin: 0 20px -20px; color: var(--tow-white); }
.tow-cc-tools__intro p { margin: 0 0 20px; }

.tow-cc-tools__gap { height: 20px; margin: 20px; }

.tow-cc-tool { display: flow-root; margin: 20px 20px 0; }
.tow-cc-tool__media { margin-top: 5px; line-height: 0; }
.tow-cc-tool__media img { display: block; width: 50px; height: auto; }

.tow-cc-tool__title {
	margin: 10px 0 20px;
	color: var(--tow-maroon);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2em;
}

.tow-cc-tool__text { margin-top: -10px; color: var(--tow-maroon); }
.tow-cc-tool__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* --- Row 5, "Specialty Care" (534.36), container 1400. NO BACKGROUND OF ITS
       OWN: on the original the white of the post article shows through. --- */
.tow-cc-spec {
	padding: 40px 20px 30px;
	box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.1);
}

.tow-cc-spec__lead { display: flex; flex-direction: column; }

.tow-cc-spec__h2 {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 38px;
	line-height: 1.4;
	text-align: center;
}

/* A box with max-width 890 and auto inline margins, inside a flex column --
   where auto margins shrink it to its content: 362.05 wide, centred. */
.tow-cc-spec__box {
	display: flex;
	flex-direction: column;
	gap: 50px;
	max-width: 890px;
	margin: 20px auto;
}

.tow-cc-spec__sub { margin-top: -10px; color: var(--tow-black); text-align: center; }
.tow-cc-spec__sub p { margin: 0 0 20px; }

.tow-cc-spec__cards { display: flex; }
.tow-cc-spec__col { width: 33.33%; }
.tow-cc-spec__col:nth-child(2) { width: 33.34%; }

.tow-cc-special { display: flow-root; margin: 20px; text-align: center; }
.tow-cc-special__media { margin-top: 5px; line-height: 0; }
.tow-cc-special__media img { display: block; width: 180px; height: auto; margin-inline: auto; }

.tow-cc-special__title {
	margin: 10px 0 0;
	color: var(--tow-maroon);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2em;
}

.tow-cc-special__text { margin-top: 10px; color: var(--tow-maroon); }
.tow-cc-special__text p { margin: 0 0 20px; padding: 0 0 10px; }

/* --- Row 6, "What's Hurting?" (966.39). --- */
.tow-cc-hurt {
	padding: 40px 20px 60px;
	background: #232323;
}

.tow-cc-hurt__cards { display: flex; }

.tow-cc-hurt__col {
	display: flex;
	flex-direction: column;
	width: 50%;
}

.tow-cc-hurt__col--left { padding-right: 20px; }
.tow-cc-hurt__col--right { padding-left: 20px; }

/* 20 + 39 + 27.55 + 20 = 106.55: the label is 49 pulled up 10, the line under
   it 47.55 pulled up 20. */
/* BOTH CARDS IN A COLUMN ARE THE SAME HEIGHT: height:100% AND min-height:0,
   TOGETHER. The original (its own 36-layout.css) gives each card height:100%,
   which as a column flex item asks for the whole column; both overflow and
   shrink equally to exactly half, 144.235 each at 320. But a flex item may not
   shrink below its content unless its min-height is 0 -- and Beaver Builder's
   modules carry min-height:0. Put min-height:auto back on the original's cards
   and they break exactly as ours did (157.28 / 131.19).

   Four earlier attempts tried height:100% without min-height:0 and each measured
   as no change. It was found by switching the ORIGINAL's rules off one at a time
   in the browser and seeing which one moved the numbers -- not by reasoning about
   which one should. Only visible at 320, where one label wraps; identical at
   every other width, measured. */
.tow-cc-hurtcard {
	display: flex;
	height: 100%;
	min-height: 0;
	flex-direction: column;
	align-items: flex-start;
	margin: 20px 0;
	padding: 20px 30px;
	background: var(--tow-wash);
	border-radius: 20px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.21);
}

/* A box inside the card holding both lines. It stretches to the card here and
   shrink-wraps on a phone, where the card centres it. */
.tow-cc-hurtcard__in { display: flex; flex-direction: column; align-items: flex-start; }

.tow-cc-hurtcard__label { margin-bottom: -10px; color: var(--tow-maroon); font-weight: 700; text-align: left; }
.tow-cc-hurtcard__label p { margin: 0 0 20px; }

/* 19px -- the site's one other 19px text is on insurance-billing. */
.tow-cc-hurtcard__desc { margin-bottom: -20px; color: var(--tow-black); font-size: 19px; text-align: left; }
.tow-cc-hurtcard__desc p { margin: 0 0 20px; }

.tow-cc-hurt__table { margin: 50px 0 20px; }

/* THE SYMPTOMS TABLE — pasted like the first, but this one DOES set a font:
   the system stack, not Lexend. */
.tow-cc-symptoms {
	width: 100%;
	overflow-x: auto;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.tow-cc-symptoms table {
	width: 100%;
	border-collapse: collapse;
	min-width: 480px;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.tow-cc-symptoms thead th {
	padding: 16px 22px;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	color: #fff;
	background: #8b2e2e;
}

.tow-cc-symptoms th:first-child { width: 33%; }
.tow-cc-symptoms th:nth-child(2) { width: 33%; }
.tow-cc-symptoms th:last-child { width: 34%; }
.tow-cc-symptoms tbody tr { border-bottom: 1px solid #efefef; }
.tow-cc-symptoms tbody tr:last-child { border-bottom: none; }

.tow-cc-symptoms tbody td {
	padding: 15px 22px;
	font-size: 15px;
	vertical-align: middle;
	line-height: 1.4;
}

.tow-cc-symptoms td:first-child { color: #1a1a1a; font-weight: 400; }
.tow-cc-symptoms td:nth-child(2) { color: #c0392b; font-weight: 500; }
.tow-cc-symptoms td:last-child { color: #1a1a1a; }

@media (max-width: 580px) {
	.tow-cc-symptoms { overflow-x: visible; border-radius: 10px; box-shadow: none; }
	.tow-cc-symptoms table { display: block; min-width: unset; }
	.tow-cc-symptoms thead { display: none; }
	.tow-cc-symptoms tbody { display: block; }
	.tow-cc-symptoms tbody tr { display: block; border: 1px solid #e0e0e0; border-radius: 10px; margin-bottom: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); }
	.tow-cc-symptoms tbody tr:last-child { border-bottom: 1px solid #e0e0e0; }
	.tow-cc-symptoms tbody td { display: block; padding: 11px 16px; border-bottom: 1px solid #efefef; font-size: 14px; }
	.tow-cc-symptoms tbody td:last-child { border-bottom: none; }
	.tow-cc-symptoms td:first-child { background: #8b2e2e; color: #fff; font-weight: 700; font-size: 14px; }
	.tow-cc-symptoms td:nth-child(2)::before { content: 'It could be: '; font-weight: 600; color: #999; font-size: 11px; display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
	.tow-cc-symptoms td:last-child::before { content: 'Recommended Start: '; font-weight: 600; color: #999; font-size: 11px; display: block; margin-bottom: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
}

.tow-cc-hurt__foot { margin: 60px 20px 0; color: var(--tow-white); text-align: center; }
.tow-cc-hurt__foot p { margin: 0 0 20px; }

/* --- Row 7, "You've dealt with this long enough" (511.56). 480 / 720. --- */
.tow-cc-fix {
	padding: 60px 20px;
	background: var(--tow-white);
}

.tow-cc-fix__inner {
	display: flex;
	max-width: 1200px;
	margin-inline: auto;
}

.tow-cc-fix__photocol,
.tow-cc-fix__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tow-cc-fix__photocol { width: 40%; }
.tow-cc-fix__text { width: 60%; padding-right: 40px; }

/* 90% TWICE, as the module writes it: the photo box is 90% of 480 and the
   picture 90% of that. 388.8 x 371.56. */
.tow-cc-fix__photo { margin: 20px 0 0; line-height: 0; }
.tow-cc-fix__photobox { display: block; width: 90%; margin-inline: auto; }
.tow-cc-fix__photobox img { display: block; width: 90%; height: auto; margin-inline: auto; }

.tow-cc-fix__h2 {
	margin: 20px 20px 0;
	color: var(--tow-black);
	font-size: 38px;
	line-height: 1.4;
	text-align: left;
}

.tow-cc-fix__box { margin-top: 10px; }
.tow-cc-fix__intro { margin: 0 20px; color: var(--tow-black); }
.tow-cc-fix__intro p { margin: 0 0 20px; }
.tow-cc-fix__btn { margin: 0 0 10px 20px; text-align: center; }

/* --- Chiropractic care, tablet and phone. Each value is the original's builder
   setting for that node at that breakpoint. Three blocks only -- this page has
   no 801 or 450 rules of its own. The two pasted tables bring their own phone
   layouts at 600 and 580, above. --- */
@media (max-width: 1200px) {
	/* The photograph stops overhanging: 800 wide, pulled up 180 and out 30. */
	.tow-cc-why__photo { margin: -180px -30px 0 20px; }
	.tow-cc-why__photobox,
	.tow-cc-why__photobox img { width: 800px; max-width: 100%; }
	/* The cards stop carrying a bottom margin; only the next card's top shows. */
	.tow-cc-hurtcard { margin-bottom: 0; }
}

@media (max-width: 992px) {
	/* Row 1. The empty right-hand column goes, the text takes the width, and
	   the column's 40px right padding stays until 768. */
	.tow-cc-hero { padding: 20px 20px 40px; background-position: left center; }
	.tow-cc-hero__text { width: 100%; }
	.tow-cc-hero__spacer { display: none; }
	.tow-cc-hero__title { font-size: 38px; }
	.tow-cc-hero__btn { margin-top: 50px; }

	/* Rows 2 and 6 share this lead-in. */
	.tow-cc-lead__col { width: 100%; }
	.tow-cc-lead__spacer { display: none; }
	.tow-cc-lead__h2 { font-size: 38px; text-align: center; }

	.tow-cc-eff { padding: 20px 20px 40px; background-position: left center; }
	/* WRAPPED, as the builder's column groups are: the right-hand card drops
	   under the left pair and loses the 20px that separated them. */
	.tow-cc-eff__cards { flex-wrap: wrap; }
	.tow-cc-eff__col { width: 100%; }
	.tow-cc-eff__col--right { padding-left: 0; }

	.tow-cc-why { min-height: 485px; padding-bottom: 0; background-position: left center; }
	.tow-cc-why__text { width: 100%; margin-bottom: 20px; }
	.tow-cc-why__spacer { display: none; }
	.tow-cc-why__h2 { font-size: 38px; text-align: center; }
	.tow-cc-why__body { margin: 0 20px -20px 0; }
	.tow-cc-why__photo { margin: 0 0 0 20px; }

	.tow-cc-tools { padding: 60px 20px 80px; }
	/* Two cards to a line, the third full width under them. */
	.tow-cc-tools__group { flex-wrap: wrap; }
	.tow-cc-tools__group--a .tow-cc-tools__col:nth-child(-n+2),
	.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(-n+2) { width: 50%; }
	.tow-cc-tools__group--a .tow-cc-tools__col:nth-child(3),
	.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(3) { width: 100%; }
	.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(2) .tow-cc-tools__cell { margin-top: 0; }
	.tow-cc-tools__group--a .tow-cc-tools__col:nth-child(3) .tow-cc-tools__cell,
	.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(3) .tow-cc-tools__cell { margin-top: 30px; }
	.tow-cc-tools__h2 { font-size: 34px; }

	.tow-cc-spec { padding: 60px 20px 80px; }
	.tow-cc-spec__h2 { font-size: 34px; }
	.tow-cc-spec__cards { flex-wrap: wrap; }
	.tow-cc-spec__cards .tow-cc-spec__col:nth-child(-n+2) { width: 50%; }
	.tow-cc-spec__cards .tow-cc-spec__col:nth-child(3) { width: 100%; }
	/* The last card alone hangs 20 BELOW its box at this width -- measured, and
	   worth the note: written as 0 it made the row exactly 20 too tall. */
	.tow-cc-spec__col:nth-child(3) .tow-cc-special { margin-bottom: -20px; }

	.tow-cc-hurt { padding: 20px 20px 40px; }
	.tow-cc-hurt__cards { flex-wrap: wrap; }
	.tow-cc-hurt__col { width: 100%; }
	.tow-cc-hurt__col--right { padding-left: 0; }

	.tow-cc-fix { padding: 60px 20px 40px; }
	.tow-cc-fix__inner { flex-wrap: wrap; }
	.tow-cc-fix__photocol,
	.tow-cc-fix__text { width: 100%; }
	/* 60% of 60%, the pair of widths the module writes. */
	.tow-cc-fix__photobox,
	.tow-cc-fix__photobox img { width: 60%; }
	.tow-cc-fix__h2 { font-size: 32px; text-align: center; }
	.tow-cc-fix__box { align-items: center; justify-content: center; gap: 0; }
	.tow-cc-fix__btn { margin: 20px 0 30px 20px; }
}

@media (max-width: 768px) {
	/* Every column loses its side padding here, and every box inside one takes
	   the full width -- which is why several blocks keep a 20px left margin and
	   run 20px off the right edge, exactly as the original does. */
	.tow-cc-hero__text { padding-right: 0; }
	.tow-cc-hero__box > * { width: 100%; }
	.tow-cc-hero__title { font-size: 24px; text-align: center; }
	.tow-cc-hero__intro { letter-spacing: 0; }
	.tow-cc-callout { padding: 8px 10px 0; }

	.tow-cc-lead__col { padding-right: 0; }
	.tow-cc-lead__box > * { width: 100%; }
	.tow-cc-lead__h2 { font-size: 24px; }
	.tow-cc-lead__text { letter-spacing: 0; }
	.tow-cc-lead__text--light { text-align: center; }

	.tow-cc-eff { padding: 20px 20px 40px; }
	.tow-cc-eff__col--left { padding-right: 0; }
	.tow-cc-eff__col--right { width: 100%; max-width: 400px; margin-inline: auto; }
	/* The card's content stops being pulled 20 LEFT and is pushed 20 right. */
	.tow-cc-feature__inner,
	.tow-cc-feature--r20 .tow-cc-feature__inner,
	.tow-cc-feature--r0 .tow-cc-feature__inner { margin: 0 0 -20px 20px; padding: 15px 10px 20px; }
	.tow-cc-feature--up { margin-bottom: -30px; }
	.tow-cc-feature__content { width: calc(100% - 60px); }
	.tow-cc-feature__title { font-size: 28px; }
	.tow-cc-eff__table { margin: 20px; }

	/* This row alone loses its side padding here: its own builder rule sets only
	   the top and bottom, so the mobile reset takes the sides to 0 and the type
	   inside runs on its own 20px margins. */
	.tow-cc-why { padding: 50px 0 0; background-position: left center; }
	.tow-cc-why__h2 { font-size: 24px; }
	.tow-cc-why__body { margin: 20px 20px 0; letter-spacing: 0; text-align: center; }

	.tow-cc-tools { padding: 30px 20px 40px; }
	.tow-cc-tools__group--a .tow-cc-tools__col:nth-child(-n+2),
	.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(-n+2) { width: 100%; }
	.tow-cc-tools__cell { margin-inline: 0; }
	.tow-cc-tools__cell--card { padding: 0; }
	.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(1) .tow-cc-tools__cell { margin-bottom: 10px; }
	.tow-cc-tools__group--b .tow-cc-tools__col:nth-child(2) .tow-cc-tools__cell { margin-top: 30px; }
	.tow-cc-tools__h2 { font-size: 24px; }
	.tow-cc-tools__intro { margin-bottom: 20px; letter-spacing: 0; }
	.tow-cc-tool { padding: 15px 10px 20px; }
	.tow-cc-tool__title { font-size: 18px; }
	/* The Specialty Care titles lose the h3's -0.8 tracking on a phone. */
	.tow-cc-special__title { letter-spacing: normal; }
	.tow-cc-tool__text { font-size: 16px; }

	.tow-cc-spec { padding: 30px 20px 40px; }
	.tow-cc-spec__h2 { font-size: 24px; }
	.tow-cc-spec__sub { margin-top: 20px; letter-spacing: 0; }
	.tow-cc-spec__cards .tow-cc-spec__col:nth-child(-n+2) { width: 100%; }
	.tow-cc-special,
	.tow-cc-spec__col:nth-child(3) .tow-cc-special { margin: 20px 20px 0; padding: 15px 10px 20px; }
	.tow-cc-special__title { font-size: 18px; }
	.tow-cc-special__text { font-size: 16px; }

	.tow-cc-hurt__col--left { padding-right: 0; }
	.tow-cc-hurt__col--right { width: 100%; max-width: 400px; margin-inline: auto; }
	/* The card centres its inner box and drops its bottom padding. */
	.tow-cc-hurtcard { align-items: center; padding: 20px 20px 0; }
	.tow-cc-hurtcard__label { margin-bottom: 0; }
	.tow-cc-hurtcard__desc { margin: -10px 0 0; }
	.tow-cc-hurt__table { margin: 20px 0; }
	.tow-cc-hurt__foot { margin: 20px 20px 0; letter-spacing: 0; }

	.tow-cc-fix { padding: 30px 20px 40px; }
	.tow-cc-fix__photocol { padding: 20px; }
	.tow-cc-fix__photo { margin: 20px 20px 0; }
	.tow-cc-fix__photobox,
	.tow-cc-fix__photobox img { width: 100%; }
	.tow-cc-fix__text { padding-right: 0; }
	.tow-cc-fix__h2 { font-size: 22px; }
	.tow-cc-fix__box > * { width: 100%; }
	/* ...except the button, which the original keeps one level deeper: a 280
	   block holding a 260 content box with a 20px left margin. Give it the
	   width:100% of its siblings and the margin pushes it out of the box
	   instead of narrowing it, the overflow gets centred back 10px, and at 320
	   the label no longer has to wrap -- a one-line button 4.7px past the
	   row's edge where the original has a two-line button inside it. The two
	   errors cancel for a centred single line, which is why 390 looked right. */
	.tow-cc-fix__btn { align-self: stretch; width: auto; }
	.tow-cc-fix__intro { letter-spacing: 0; }
}

/* ==========================================================================
   PRINT -- the original's own rules, copied verbatim.

   The original loads Beaver Builder's theme stylesheet, which carries Bootstrap
   3's print block. When a visitor prints a page it turns every colour black,
   drops every background and shadow, underlines links and prints each link's
   address in brackets after it. That last part is most of the difference: the
   addresses wrap the menu and footer onto extra lines, which is why a printed
   page of ours measured 140 to 300px shorter before this block existed.

   Nothing in it is Beaver Builder structure, so it applies to our markup as-is.
   .navbar, .btn, .label and .table match nothing here and are kept only so the
   block stays a faithful copy.
   ========================================================================== */
@media print {
	*, *:before, *:after { color: #000 !important; text-shadow: none !important; background: transparent !important; -webkit-box-shadow: none !important; box-shadow: none !important; }
	a, a:visited { text-decoration: underline; }
	a[href]:after { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group; }
	tr, img { page-break-inside: avoid; }
	img { max-width: 100% !important; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }
	.navbar { display: none; }
	.btn > .caret, .dropup > .btn > .caret { border-top-color: #000 !important; }
	.label { border: 1px solid #000; }
	.table { border-collapse: collapse !important; }
	.table td, .table th { background-color: #fff !important; }
	.table-bordered th, .table-bordered td { border: 1px solid #ddd !important; }
}

/* The ChiropracticResults box sits outside the original's page wrapper, so it
   inherits the BODY's font there -- the theme's Helvetica stack, not Lexend. Its
   "View full profile" link measured 245.89 wide in Helvetica and 267.42 in ours. */
#cr-outcomes-widget { font-family: Helvetica, Verdana, Arial, sans-serif; }

/* LINK COLOURS THAT DO NOT FOLLOW THE SITE'S RED. Found by a colour sweep over
   every painted element on the 21 pages at 1440, 1024, 820 and 390 -- the first
   colour pass read only row-level boxes and could not see an inline link.
   - Insurance: both links sit in modules whose rule is `* { color: #fff }`, so
     they are white like the text around them.
   - Cold laser, "Not Designed For": no module rule at all, so the old theme's
     default link blue, rgb(43,123,185), shows through.
   - Patient reviews: the reviewer's name has its own rgb(151,40,27). */
.tow-ib-black__text a,
.tow-main--insurance-billing .tow-next__note a { color: var(--tow-white); }
.tow-cl-fit__text a { color: rgb(43, 123, 185); }
.tow-pr-card__who { color: rgb(151, 40, 27); }
/* Cold laser's four tool cards: the title links are black at every width on the
   original, not red. (Missed at first because the same words are a menu item.) */
.tow-cl-tool__title a { color: rgb(0, 0, 0); }
/* Patient reviews: the links in the hero copy and under each story are black on
   the original (their modules colour everything inside), not red. */
.tow-pr-hero__body a,
.tow-pr-card__after a { color: rgb(0, 0, 0); }
/* Shockwave: the two links in the white-on-dark credentials panel are white. */
.tow-sw-bkg__paneltext a { color: var(--tow-white); }
/* Shockwave: the tool-card title links and the "Dr. Karen" link in the lead are
   black on the original. Found by a link-only comparison of all 853 links. */
.tow-sw-tool__title a,
.tow-sw-bkg__lead a { color: rgb(0, 0, 0); }
/* Animal, "Where Dr. Karen practises": the text centres at 768 and below on the
   original. Its box is the same size either way, so no geometry check could see
   it; found by comparing text-align on 11,078 text elements at 15 widths. */
@media (max-width: 768px) {
	.tow-an-refer__wheretext { text-align: center; }
}
/* ...and the "Chiropractic Care" link closing the How It Works band, black too. */
.tow-sw-how__bandtext a { color: rgb(0, 0, 0); }

/* ===========================================================================
 * THE ARTICLES INDEX AND CATEGORY PAGES -- redesigned 2026-09-21 (Gerek) on the
 * house pattern of bushidobilling, hbchiropractic and itechvalet. See
 * inc/articles.php for the shape. Everything here is new: none of it is
 * measured off the original, whose post grid this replaces.
 * ======================================================================== */

/* The title band: the site's near-black, a gold rule, white type. */
.tow-art-band {
	padding: 70px 20px 60px;
	background-color: #232323;
	color: var(--tow-white);
	text-align: center;
}
.tow-art-band__inner { max-width: 900px; margin-inline: auto; }
.tow-art-band__title {
	margin: 0;
	color: var(--tow-white);
	font-size: 56px;
	line-height: 1.15;
}
.tow-art-band__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 22px auto 0;
	background-color: var(--tow-gold);
}
.tow-art-band__lead,
.tow-art-band__lead p { margin: 22px 0 0; font-size: 20px; line-height: 1.5; }
/* The way back, on a category page: top left of the band's 1200 column, above
   the centred title. */
.tow-main--category .tow-art-band { padding-top: 30px; }
.tow-main--category .tow-art-band__inner { max-width: 1200px; }
.tow-art-band__back { margin: 0 0 30px; font-size: 16px; text-align: left; }
.tow-art-band__back a { color: var(--tow-gold); font-weight: 700; text-decoration: none; }
.tow-art-band__back a:hover,
.tow-art-band__back a:focus { text-decoration: underline; }

/* One section per category, alternating white and the site's pale wash so the
   bands read as separate. */
.tow-art-sec { padding: 70px 20px; background-color: var(--tow-white); }
.tow-art-sec:nth-of-type(odd) { background-color: var(--tow-wash); }
.tow-art-sec__inner { max-width: 1200px; margin-inline: auto; }
.tow-art-sec__head { margin: 0 0 36px; text-align: center; }
.tow-art-sec__title { margin: 0; color: var(--tow-maroon); font-size: 38px; line-height: 1.2; }
.tow-art-sec__title a { color: inherit; text-decoration: none; }
.tow-art-sec__title a:hover,
.tow-art-sec__title a:focus { text-decoration: underline; text-underline-offset: 6px; }
.tow-art-sec__title::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	margin: 16px auto 0;
	background-color: var(--tow-gold);
}
.tow-art-sec__lead { max-width: 780px; margin: 16px auto 0; font-size: 18px; line-height: 1.5; }
.tow-art-sec__more { margin: 40px 0 0; text-align: center; }
.tow-art-empty { margin: 0; font-size: 20px; text-align: center; }

/* The grid: three, two below 993, one below 600. Six cards and twelve a page
   always end on a full row at three and at two. */
.tow-art-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 992px) {
	.tow-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.tow-art-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The card: one link, a white panel with rounded corners and a soft shadow,
   lifting a little on hover with the title turning maroon. */
.tow-art-card { display: flex; min-width: 0; }
.tow-art-card__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden;
	background-color: var(--tow-white);
	border-radius: 15px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.07);
	color: var(--tow-black);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.tow-art-card__link:hover,
.tow-art-card__link:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 16px 36px rgba(0, 0, 0, 0.12);
}
.tow-art-card__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--tow-blush);
}
.tow-art-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.tow-art-card__link:hover .tow-art-card__img { transform: scale(1.04); }
.tow-art-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 22px 22px 24px;
}
.tow-art-card__title {
	margin: 0;
	color: var(--tow-black);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.3px;
	transition: color .2s ease;
}
.tow-art-card__link:hover .tow-art-card__title,
.tow-art-card__link:focus-visible .tow-art-card__title { color: var(--tow-maroon); }
.tow-art-card__date { color: var(--tow-grey); font-size: 14px; line-height: 1.4; }
.tow-art-card__excerpt { flex: 1; font-size: 16px; line-height: 1.55; }
.tow-art-card__more { color: var(--tow-maroon); font-size: 16px; font-weight: 700; }
.tow-art-card__link:hover .tow-art-card__more { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
	.tow-art-card__link,
	.tow-art-card__img { transition: none; }
	.tow-art-card__link:hover,
	.tow-art-card__link:focus-visible { transform: none; }
	.tow-art-card__link:hover .tow-art-card__img { transform: none; }
}

/* Numbered pages: 44px boxes, the current one filled maroon. */
.tow-art-pager { margin: 48px 0 0; }
.tow-art-pager .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
.tow-art-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--tow-rule);
	border-radius: 8px;
	background-color: var(--tow-white);
	color: var(--tow-black);
	font-size: 16px;
	text-decoration: none;
}
.tow-art-pager a.page-numbers:hover,
.tow-art-pager a.page-numbers:focus { border-color: var(--tow-maroon); color: var(--tow-maroon); }
.tow-art-pager .page-numbers.current {
	border-color: var(--tow-maroon);
	background-color: var(--tow-maroon);
	color: var(--tow-white);
}
.tow-art-pager .page-numbers.dots { border-color: transparent; background: none; }

@media (max-width: 599px) {
	.tow-art-band { padding: 50px 20px 44px; }
	.tow-art-band__title { font-size: 40px; }
	.tow-art-band__lead,
	.tow-art-band__lead p { font-size: 18px; }
	.tow-art-sec { padding: 50px 20px; }
	.tow-art-sec__title { font-size: 30px; }
	.tow-art-sec__head { margin-bottom: 28px; }
	.tow-art-card__title { font-size: 20px; }
}

/* ===========================================================================
 * TABLET FIXES, 600-992 -- Gerek's iPad review, 2026-09-21. Deliberate
 * departures from the original; see docs/decisions-for-gerek.md A7.
 * ======================================================================== */
@media (min-width: 600px) and (max-width: 992px) {
	/* THE DOT ROW'S TRUCK GOES. The photograph is a truck on its left half and
	   transparent on its right; on a tablet the text runs the full width, so
	   wherever the photo sits the cab and its mirror land behind the words. The
	   image is set inline, hence the !important. The section shows white. */
	.tow-split--dot { background-image: none !important; }

	/* THE MAP IS A THUMBNAIL, NOT A PAGE. The image is 3:4 portrait, and full
	   width on a tablet it stood about 1000px tall. Cropped to 16:9 around the
	   pin, which sits 46% across and 36% down the picture. */
	.tow-location__photo img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
		object-position: 46% 36%;
	}
}

/* ABOUT: "Built For / Not Built For" full width on a tablet (Gerek, 2026-09-21).
   From 600 to 768 the two cards stack, and the original caps each at 400px,
   so on an upright iPad they sat in a narrow column down the middle. Now they
   fill the row, with 20px more room inside each. From 769 they sit side by
   side and already fill it. */
@media (min-width: 600px) and (max-width: 768px) {
	.tow-ab-built__col { max-width: none; }
	.tow-ab-built__col:first-child .tow-ab-built__card,
	.tow-ab-built__col:last-child .tow-ab-built__card { padding-left: 20px; padding-right: 20px; }
}

/* OUR TEAM: THE HERO STACKS ON A TABLET AND A PHONE (Gerek, 2026-09-21). On a
   phone the photo did not show at all. The team photo is
   2560x930 with all five people in its right half. Covering a hero made tall
   by the tablet text, it showed one sliver of one person beside the words.
   Now the text sits on its own on the photo's pale grey, and the photo runs
   full width underneath, scaled to 180% of the row and pinned right so the
   whole team is in frame (the visible slice is 44-100% across, the team
   49-94%). Its height is that scale: 1.8 x 930 / 2560 = 65.39% of the width.
   A fade over its top edge hides the seam between the grey and the picture;
   the row's inset shadow goes, or the fade cuts it off in a visible step. */
@media (max-width: 992px) {
	.tow-team-hero {
		position: relative;
		padding: 40px 20px 65.39vw;
		box-shadow: none;
		background-color: rgb(246, 246, 246);
		background-size: 180% auto;
		background-position: right bottom;
	}
	.tow-team-hero::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(65.39vw - 100px);
		height: 100px;
		background: linear-gradient(rgb(246, 246, 246), rgba(246, 246, 246, 0));
		pointer-events: none;
	}
	.tow-team-hero__inner { position: relative; z-index: 1; justify-content: center; }
	.tow-team-hero__spacer { display: none; }
	.tow-team-hero__text { width: 100%; max-width: 640px; margin-bottom: 20px; }
	.tow-team-hero__title,
	.tow-team-hero__intro { margin-left: 20px; text-align: center; }
}

/* TEXT CARDS FULL WIDTH ON AN UPRIGHT TABLET (Gerek, 2026-09-21, first on About's
   "Built For / Not Built For"). From 600 to 768 the original stacks these
   columns and caps each at 400px, centred -- a narrow strip down an iPad, and
   uneven where only one of two columns carries the cap. Every text-card column
   with that cap goes full width here. Photographs keep theirs, and so do the
   homepage and About, which Gerek signed off as they are. */
@media (min-width: 600px) and (max-width: 768px) {
	.tow-cc-eff__col--right,
	.tow-cc-hurt__col--right,
	.tow-cl-fit__col,
	.tow-sw-fit__col,
	.tow-np-fit__col,
	.tow-dot-fit__col,
	.tow-an-fit__col,
	.tow-an-intro__mid,
	.tow-an-wait__col,
	.tow-an-wait__rcol { max-width: none; margin-inline: 0; }
	/* Its column now full width, Why Waiting's second photograph would be too:
	   held at 60%, centred. */
	.tow-an-wait__photo2 img { width: 60%; }

	/* Chiropractic Care's "What's Hurting" cards, now full width: each card's
	   two lines centre on their own, not as a left-aligned pair. */
	.tow-cc-hurtcard__in { align-items: center; }
	.tow-cc-hurtcard__label,
	.tow-cc-hurtcard__desc { text-align: center; }
}

/* NEUROPATHY, "She uses:" -- THREE OVER TWO ON A TABLET (Gerek, 2026-09-21).
   From 600 to 768 the five stacked one to a row, a long column of pictures;
   from 769 they squeezed into one row that overran it. Three across, then two
   centred under them. */
@media (min-width: 600px) and (max-width: 992px) {
	.tow-np-uses {
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 24px;   /* each card already carries 20px under its title */
		min-width: 0;
		margin-top: 0;
	}
	.tow-np-use { width: calc((100% - 48px) / 3); }
}

/* THE OPENED MENU IS BIGGER ON A TABLET (Gerek, 2026-09-21): 17px rows were
   hard to hit with a finger on an iPad. Top level 21px and submenu 19px, with
   taller rows -- 54px and 48px targets, up from 45 and 40. */
@media (min-width: 600px) and (max-width: 992px) {
	.tow-nav__list { font-size: 21px; }
	.tow-nav__list a,
	.tow-nav__list > .menu-item-has-children > a { padding-top: 15px; padding-bottom: 15px; }
	.tow-nav__list .sub-menu a { padding-top: 13px; padding-bottom: 13px; font-size: 19px; }
}

/* ACUPUNCTURE, "the pain loop" photograph a quarter smaller on an upright tablet
   (Gerek, 2026-09-21): 81% of the width -- about 570px on an iPad mini --
   becomes 60%. Above 768 it is already 25%; on a phone it keeps 81%. */
@media (min-width: 600px) and (max-width: 768px) {
	.tow-ac-loop__photo img { width: 60%; }
}

/* THE SYMPTOM PAGES' HEROES STACK ON A TABLET AND A PHONE, as Our Team's does
   (Gerek, 2026-09-21, for Back Pain & Sciatica and Headaches & TMJ; Sleep and
   Stress share the template and follow). Below 993 the original slides its
   photograph to the left edge and the subject -- in the right half of every
   one of these pictures -- leaves the frame. Now the heading and intro sit on
   the photograph's own backdrop colour, and the photograph runs full width
   underneath at 200%, pinned right, so its right half (the subject) fills the
   row. Its height is that scale: 2 x its height / 2560, per page. A fade over
   its top edge hides the seam. */
@media (max-width: 992px) {
	.tow-main--sciatica-relief         { --tow-sh-bg: rgb(217, 226, 230); --tow-sh-h: 68.52vw; }
	.tow-main--headaches-tmj           { --tow-sh-bg: rgb(64, 90, 103);   --tow-sh-h: 73.98vw; }
	.tow-main--sleep-recovery-relief   { --tow-sh-bg: rgb(255, 255, 255); --tow-sh-h: 68.28vw; }
	.tow-main--stress-mental-clarity   { --tow-sh-bg: rgb(246, 246, 246); --tow-sh-h: 73.05vw; }
	.tow-main--insurance-billing       { --tow-sh-bg: rgb(188, 203, 217); --tow-sh-h: 76.64vw; }

	.tow-main--symptom .tow-shero,
	.tow-main--insurance-billing .tow-shero {
		position: relative;
		background-color: var(--tow-sh-bg);
		background-size: 200% auto;
		background-position: right bottom;
	}
	.tow-main--symptom .tow-shero::before,
	.tow-main--insurance-billing .tow-shero::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(var(--tow-sh-h) - 100px);
		height: 100px;
		background: linear-gradient(var(--tow-sh-bg), transparent);
		pointer-events: none;
	}
	.tow-main--symptom .tow-shero__wrap,
	.tow-main--insurance-billing .tow-shero__wrap {
		position: relative;
		z-index: 1;
		min-height: 0;
		padding: 40px 20px calc(var(--tow-sh-h) + 10px);
	}

	/* INSURANCE & BILLING (Gerek, 2026-09-21) takes the same stack. Its type is
	   white on the desktop photograph; on the photograph's pale blue-grey alone
	   white did not read, so here it is black, without the shadow. */
	.tow-main--insurance-billing .tow-shero__title,
	.tow-main--insurance-billing .tow-shero__intro { color: var(--tow-black); text-shadow: none; }
}

/* ANIMAL CARE: THE HERO STACKS BELOW 993, like the symptom pages' (Gerek,
   2026-09-21). The dog and horse are in the right half of a 2560x1000 picture
   that the original slid to its left edge. Text on the picture's near-white,
   the picture full width beneath at 200%, pinned right: 2 x 1000 / 2560 =
   78.13% of the width. */
@media (max-width: 992px) {
	.tow-an-hero {
		position: relative;
		display: block;
		min-height: 0;
		padding: 40px 0 calc(78.13vw + 10px);
		background-color: rgb(251, 251, 251);
		background-size: 200% auto;
		background-position: right bottom;
		box-shadow: none;
	}
	.tow-an-hero::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(78.13vw - 100px);
		height: 100px;
		background: linear-gradient(rgb(251, 251, 251), rgba(251, 251, 251, 0));
		pointer-events: none;
	}
	.tow-an-hero__inner { position: relative; z-index: 1; }
	.tow-an-hero__text { width: 100%; }
	.tow-an-hero__spacer { display: none; }
	.tow-an-hero__title,
	.tow-an-hero__intro { margin-left: 20px; text-align: center; }
}

/* WHAT TO EXPECT: EVEN GAPS BETWEEN THE STACKED STEPS (Gerek, 2026-09-21). Step
   2's empty last paragraph (see the template) gave it an extra line and 20px
   where the steps stack, so 2 to 3 was wider than 1 to 2. */
@media (max-width: 992px) {
	.tow-wte-step__blank { display: none; }
}

/* INSURANCE & BILLING'S COLUMNS FULL WIDTH ON A TABLET AND A WIDE PHONE (Gerek,
   2026-09-21): "What That Means for You", "How It Works", "Who This Page Is
   For", "Not Built For". The original caps them at 400px from 768 down, which
   left a narrow strip on an iPad and margins on a 430px phone. */
@media (max-width: 768px) {
	.tow-main--insurance-billing .tow-ib-col { max-width: none; margin-inline: 0; }
}

/* ===========================================================================
 * PHONE FIXES, under 600 -- Gerek's phone review of the homepage, 2026-09-21.
 * Deliberate departures from the original; see docs/decisions-for-gerek.md A8.
 * ======================================================================== */
@media (max-width: 599px) {
	/* Dr. Karen's photograph at 250px (it was 49% of the width, 171 on a 390
	   phone), never wider than the screen. */
	.tow-meet__photo img { width: 250px; max-width: 100%; }

	/* WHAT WE OFFER: 90px between one card's text and the next card's icon came
	   from five stacked margins and paddings. Now 22px either side of a hairline
	   rule, 75% wide and centred, in the row's maroon at a quarter strength. */
	.tow-offer__col .tow-infobox--service {
		position: relative;
		margin-top: 0;
		padding: 22px 10px;
	}
	.tow-offer__col .tow-infobox--service::before {
		content: "";
		position: absolute;
		top: 0;
		left: 12.5%;
		width: 75%;
		height: 1px;
		background-color: rgba(154, 40, 23, 0.25);
	}
	.tow-offer__group--a .tow-offer__col:first-child .tow-infobox--service { padding-top: 10px; }
	.tow-offer__group--a .tow-offer__col:first-child .tow-infobox--service::before { content: none; }
	.tow-offer__col .tow-infobox__text p { margin-bottom: 0; padding-bottom: 0; }

	/* CARE FOR YOUR WHOLE FAMILY: the photographs go below the button, not above
	   the heading, with 50px between the two. */
	.tow-split--family .tow-split__photo { order: 0; }
	.tow-split--family .tow-split__photo .tow-module { margin-top: 50px; }

	/* SHOCKWAVE, "How It Works Inside Your Body" (Gerek, 2026-09-21): the same
	   treatment as the homepage's What We Offer. "What It Does to Your Body"
	   had 90px between one item's text and the next picture, from five stacked
	   margins and paddings; now 22px either side of a 75% maroon hairline, and
	   each title sits 10px over its text rather than 20. The tool cards below
	   were 40 and 60px apart; now an even 16. */
	.tow-sw-does__col .tow-sw-cell {
		position: relative;
		margin-top: 0;
		padding: 22px 10px;
	}
	.tow-sw-does__col .tow-sw-cell::before {
		content: "";
		position: absolute;
		top: 0;
		left: 12.5%;
		width: 75%;
		height: 1px;
		background-color: rgba(154, 40, 23, 0.25);
	}
	.tow-sw-does__col:first-child .tow-sw-cell { padding-top: 10px; }
	.tow-sw-does__col:first-child .tow-sw-cell::before { content: none; }
	.tow-sw-does__col .tow-sw-cell__title { margin-bottom: 10px; }
	.tow-sw-does__col .tow-sw-cell__text p { margin-bottom: 0; padding-bottom: 0; }
	.tow-sw-tools__col:nth-child(n) .tow-sw-tool { margin: 0 0 16px; }   /* :nth-child(n) to match the 768 rules it replaces */

	/* COLD LASER, "How It Works Inside Your Body": the same as Shockwave's. */
	.tow-cl-cells__col .tow-cl-cell {
		position: relative;
		margin-top: 0;
		padding: 22px 10px;
	}
	/* GOLD, NOT MAROON: this row is near-black, and the maroon hairline the white
	   rows use could not be seen on it (Gerek). The brand gold at half strength,
	   as in the dark menu panel. */
	.tow-cl-cells__col .tow-cl-cell::before {
		content: "";
		position: absolute;
		top: 0;
		left: 12.5%;
		width: 75%;
		height: 1px;
		background-color: rgba(234, 202, 128, 0.5);
	}
	.tow-cl-cells__col:first-child .tow-cl-cell { padding-top: 10px; }
	.tow-cl-cells__col:first-child .tow-cl-cell::before { content: none; }
	.tow-cl-cells__col .tow-cl-cell__title { margin-bottom: 10px; }
	.tow-cl-cells__col .tow-cl-cell__text p { margin-bottom: 0; padding-bottom: 0; }
	.tow-cl-tools__col:nth-child(n) .tow-cl-tool { margin: 0 0 16px; }

	/* The map as a thumbnail, as on a tablet: 3:4 and 400 tall becomes 16:9. */
	.tow-location__photo img {
		aspect-ratio: 16 / 9;
		object-fit: cover;
		object-position: 46% 36%;
	}
}

/* ==== TABLET TYPE (generated by migration/tablet_type.py -- do not edit by hand) ==== */
/* See migration/tablet_type.py for what this is and why. Body -> 24,
   headings x1.25 (x1.4 from the phone tier), small text +2/+3px, script
   accents unchanged, px line-heights scaled with their text. 600-992. */
@media (min-width: 600px) and (max-width: 992px) {
	body { font-size: 24px; }
	h1 { font-size: 56px; }
	h2 { font-size: 48px; }
	h3 { font-size: 26px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	body { font-size: 24px; }
	h1 { font-size: 35px; }
	h2 { font-size: 30px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	body { font-size: 24px; }
	h1 { font-size: 39px; }
	h2 { font-size: 34px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-button { font-size: 18px; line-height: 20.25px; }
	.tow-footer__list { font-size: 18px; }
	.tow-footer__legal { font-size: 18px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-footer__list { font-size: 16px; }
	.tow-footer__legal { font-size: 16px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-hero__title { font-size: 56px; }
	.tow-hero__title .sub-label { font-size: 30px; }
	.tow-button--lg { font-size: 24px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 1200px) {
	.tow-hero__blurb p { font-size: 23px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-hero__title { font-size: 50px; }
	.tow-button--lg { font-size: 18px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-hero__title { font-size: 53px; }
}
@media screen and (max-width: 801px) and (min-width: 600px) and (max-width: 992px) {
	.tow-hero__title .sub-label { font-size: 27px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-familiar__title { font-size: 48px; }
	.tow-familiar__punch { font-size: 78px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 1200px) {
	.tow-familiar__punch { font-size: 68px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-familiar__title { font-size: 42px; }
	.tow-familiar__punch { font-size: 58px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-familiar__title { font-size: 34px; }
	.tow-familiar__punch { font-size: 55px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-meet__title { font-size: 42px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-meet__title { font-size: 34px; }
	.tow-meet__cta .tow-button { font-size: 18px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-infobox__title { font-size: 35px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-different__title { font-size: 38px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-different__title { font-size: 34px; }
	.tow-different__boxes .tow-infobox__title { font-size: 24px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-offer__title { font-size: 48px; }
	.tow-infobox--service .tow-infobox__title { font-size: 30px; }
	.tow-infobox--service .tow-infobox__text { font-size: 24px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-offer__title { font-size: 42px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-offer__title { font-size: 34px; }
	.tow-infobox--service .tow-infobox__title { font-size: 24px; }
	.tow-infobox--service .tow-infobox__text { font-size: 19px; }
	.tow-offer__cta .tow-button { font-size: 18px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-split__title { font-size: 48px; }
	.tow-split__title .text-highlight { font-size: 68px; }
}
@media screen and (max-width: 1201px) and (min-width: 600px) and (max-width: 992px) {
	.tow-split--family .tow-split__title .text-highlight { font-size: 63px; }
}
@media screen and (max-width: 801px) and (min-width: 600px) and (max-width: 992px) {
	.tow-split--family .tow-split__title .text-highlight { font-size: 70px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-split__title { font-size: 38px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-split__title { font-size: 34px; }
	.tow-split__cta .tow-button { font-size: 18px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-trusted__title { font-size: 53px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-rating__stars i { font-size: 50px; }
	.tow-visit__title { font-size: 48px; }
	.tow-card__body p { font-size: 23px; }
	.tow-visit__arrow { line-height: 68.4px; }
	.tow-location__title { font-size: 30px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-visit__title,
	.tow-visit__ready { font-size: 42px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-visit__title,
	.tow-visit__ready { font-size: 34px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-contact__title { font-size: 56px; }
	.tow-form__group input,
.tow-form__group textarea { font-size: 16px; line-height: 22.86px; }
	.tow-form__error { font-size: 14px; line-height: 20.3px; }
	.tow-form__successtitle { font-size: 32px; }
	.tow-form__successtext { font-size: 22px; }
	.tow-form__submit { font-size: 22px; line-height: 26.4px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-contact__title { font-size: 50px; }
	.tow-contact .tow-location__cta .tow-button { font-size: 18px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-contact__title { font-size: 53px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-shero__title { font-size: 56px; }
	.tow-sym__title { font-size: 48px; }
	.tow-sym__cardtitle { font-size: 26px; }
	.tow-faq__title { font-size: 48px; }
	.tow-faq__q { font-size: 26px; }
	.tow-next__title { font-size: 48px; }
	.tow-button--path { font-size: 18px; line-height: 20.25px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-main .tow-shero__title { font-size: 50px; }
	.tow-main--symptom .tow-sym__title { font-size: 42px; }
	.tow-main .tow-faq__title { font-size: 38px; }
	.tow-main--symptom .tow-next__title { font-size: 42px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-main .tow-shero__title { font-size: 53px; }
	.tow-main--symptom .tow-sym__title { font-size: 34px; }
	.tow-main--symptom .tow-sym__cardtitle { font-size: 27px; }
	.tow-main .tow-faq__title { font-size: 34px; }
	.tow-main .tow-faq__q { font-size: 27px; }
	.tow-main--symptom .tow-next__title { font-size: 34px; }
	.tow-main--symptom .tow-next .tow-button--path { font-size: 15px; }
	.tow-main--symptom .tow-next__note { font-size: 19px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-main--headaches-tmj .tow-next .tow-button--path { font-size: 17px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-legal__h2 { font-size: 48px; }
	.tow-legal__h3 { font-size: 26px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-legal__h2 { font-size: 30px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-legal__title { font-size: 56px; }
	.tow-legal__h2 { font-size: 42px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-articles__title { font-size: 56px; }
	.tow-card-post__text { font-size: 16px; line-height: 25.14px; }
	.tow-card-post__title { font-size: 30px; line-height: 30px; }
	.tow-card-post__meta { font-size: 16px; line-height: 25.14px; }
	.tow-card-post__content { font-size: 18px; line-height: 24.75px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-articles__title { font-size: 50px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-articles__title { font-size: 53px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-post__module h1 { font-size: 56px; }
	.tow-post__module h2 { font-size: 48px; }
	.tow-post__module h3 { font-size: 26px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-post__module h1 { font-size: 35px; }
	.tow-post__module h2 { font-size: 30px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-post { font-size: 24px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-post { font-size: 24px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-wte-hero__title { font-size: 56px; }
	.tow-wte-steps__h2 { font-size: 48px; }
	.tow-wte-step__title { font-size: 26px; }
	.tow-wte-cta__title { font-size: 48px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-wte-hero__title { font-size: 50px; }
	.tow-wte-steps__h2 { font-size: 42px; }
	.tow-wte-cta__title { font-size: 42px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-wte-hero__title { font-size: 53px; }
	.tow-wte-steps__h2 { font-size: 34px; }
	.tow-wte-step__title { font-size: 27px; }
	.tow-wte-cta__title { font-size: 34px; }
	.tow-wte-cta .tow-button--path { font-size: 15px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-ib-black__h2 { font-size: 48px; }
	.tow-ib-main__h2 { font-size: 48px; }
	.tow-ib-logo__text { font-size: 23px; line-height: 33.35px; }
	.tow-ib-card__title { font-size: 35px; }
	.tow-ib-card__text ul { font-size: 22px; line-height: 31.9px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-main--insurance-billing .tow-ib-black__h2 { font-size: 42px; }
	.tow-main--insurance-billing .tow-ib-main__h2 { font-size: 42px; }
	.tow-main--insurance-billing .tow-ib-card__title { font-size: 30px; }
	.tow-main--insurance-billing .tow-next__title { font-size: 42px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-main--insurance-billing .tow-ib-black__h2 { font-size: 34px; }
	.tow-main--insurance-billing .tow-ib-main__h2 { font-size: 31px; }
	.tow-main--insurance-billing .tow-ib-main__lead { font-size: 27px; }
	.tow-main--insurance-billing .tow-next__title { font-size: 34px; }
	.tow-main--insurance-billing .tow-next .tow-button--path { font-size: 16px; }
	.tow-main--insurance-billing .tow-next__note { font-size: 19px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-pr-hero__title { font-size: 56px; }
	.tow-pr-situations__h2 { font-size: 48px; }
	.tow-pr-card__title { font-size: 26px; }
	.tow-pr-why__h2 { font-size: 48px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-pr-hero__title { font-size: 50px; }
	.tow-pr-situations__h2 { font-size: 42px; }
	.tow-pr-why__h2 { font-size: 42px; }
	.tow-main--patient-reviews .tow-next__title { font-size: 42px; }
	.tow-main--patient-reviews .tow-next__note { font-size: 24px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-pr-hero__title { font-size: 53px; }
	.tow-pr-situations__h2 { font-size: 34px; }
	.tow-pr-card__title { font-size: 27px; }
	.tow-pr-why__h2 { font-size: 34px; }
	.tow-main--patient-reviews .tow-next__title { font-size: 34px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-team-hero__title { font-size: 56px; }
	.tow-team-bio__name { font-size: 48px; }
	.tow-team-close__h2 { font-size: 48px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-team-hero__title { font-size: 30px; }
	.tow-team-bio__name { font-size: 42px; }
	.tow-team-close__h2,
	.tow-team-close__h2--second { font-size: 38px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-team-hero__title { font-size: 39px; }
	.tow-team-bio__name { font-size: 34px; }
	.tow-team-close__h2,
	.tow-team-close__h2--second { font-size: 34px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-ab-hero__title { font-size: 56px; }
	.tow-ab-why__h2,
.tow-ab-bg__h2,
.tow-ab-care__h2,
.tow-ab-built__h2,
.tow-ab-comm__h2 { font-size: 48px; }
	.tow-ab-why__pull { font-size: 26px; }
	.tow-ab-bg__lead1 { font-size: 26px; }
	.tow-ab-bg__lead2 { font-size: 78px; }
	.tow-ab-bg__col .tow-ab-card--has-title .tow-ab-card__title { font-size: 24px; line-height: 28.8px; }
	.tow-ab-card__title { font-size: 26px; }
	.tow-ab-care__title { font-size: 30px; }
	.tow-ab-care__notetext { font-size: 19px; }
	.tow-ab-care__quote { font-size: 56px; }
	.tow-ab-care__quote .quotes { font-size: 88px; line-height: 105.6px; }
	.tow-ab-comm__nexth2 { font-size: 24px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 1200px) {
	.tow-ab-care__quote { font-size: 53px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-ab-hero__title { font-size: 30px; }
	.tow-ab-why__h2,
	.tow-ab-care__h2,
	.tow-ab-built__h2,
	.tow-ab-comm__h2 { font-size: 42px; }
	.tow-ab-bg__h2 { font-size: 40px; }
	.tow-ab-bg__lead1 { font-size: 24px; }
	.tow-ab-bg__lead2 { font-size: 66px; }
	.tow-ab-care__col:nth-child(odd) .tow-ab-care__title { font-size: 22px; }
	.tow-ab-care__col:nth-child(2) .tow-ab-care__title { font-size: 18px; }
	.tow-ab-care__notetext { font-size: 18px; }
	.tow-ab-care__quote { font-size: 48px; }
}
@media screen and (max-width: 801px) and (min-width: 600px) and (max-width: 992px) {
	.tow-ab-care__quote .quotes { font-size: 40px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-ab-hero__title { font-size: 39px; }
	.tow-ab-why__h2,
	.tow-ab-bg__h2,
	.tow-ab-care__h2,
	.tow-ab-built__h2,
	.tow-ab-comm__h2 { font-size: 34px; }
	.tow-ab-bg__lead1 { font-size: 19px; }
	.tow-ab-bg__lead2 { font-size: 55px; line-height: 66px; }
	.tow-ab-care__col:nth-child(n) .tow-ab-care__title { font-size: 19px; }
	.tow-ab-care__quote { font-size: 48px; line-height: 57.6px; }
	.tow-ab-built__card .tow-ab-card__title { font-size: 27px; }
	.tow-ab-comm__nexth2 { font-size: 34px; }
	.tow-ab-comm .tow-button--path { font-size: 17px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-cl-hero__title { font-size: 56px; line-height: 61.6px; }
	.tow-cl-hero__title .sub-label { font-size: 30px; line-height: 33px; }
	.tow-cl-hero__title .main-title { font-size: 56px; line-height: 61.6px; }
	.tow-cl-pills__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-cl-claim__text { font-size: 23px; line-height: 33.35px; }
	.tow-cl-explain__title { font-size: 30px; }
	.tow-cl-pills__script { font-size: 68px; line-height: 98.6px; }
	.tow-cl-bkg__h2 { font-size: 48px; line-height: 52.8px; }
	.tow-cl-how__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-cl-cell__title { font-size: 30px; }
	.tow-cl-how__badgetitle { font-size: 38px; line-height: 45.6px; }
	.tow-cl-tool__title { font-size: 30px; }
	.tow-cl-fit__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-cl-fit__title { font-size: 26px; }
	.tow-cl-cta__h2 { font-size: 48px; line-height: 67.2px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-cl-hero__title { font-size: 50px; line-height: 55px; }
	.tow-cl-hero__title .main-title { font-size: 50px; line-height: 55px; }
	.tow-cl-pills__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-cl-pills__script { font-size: 63px; line-height: 91.35px; }
	.tow-cl-bkg__h2 { font-size: 38px; line-height: 41.8px; }
	.tow-cl-how__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-cl-fit__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-cl-cta__h2 { font-size: 42px; line-height: 58.8px; }
}
@media screen and (max-width: 801px) and (min-width: 600px) and (max-width: 992px) {
	.tow-cl-hero__title .sub-label { font-size: 27px; line-height: 29.7px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-cl-hero__title { font-size: 53px; line-height: 58.3px; }
	.tow-cl-hero__title .main-title { font-size: 53px; line-height: 58.3px; }
	.tow-cl-pills__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-cl-explain__title { font-size: 24px; }
	.tow-cl-explain__body { font-size: 19px; }
	.tow-cl-pills__script { font-size: 48px; line-height: 57.6px; }
	.tow-cl-bkg__h2 { font-size: 34px; line-height: 37.4px; }
	.tow-cl-how__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-cl-cell__title { font-size: 24px; }
	.tow-cl-cell__text { font-size: 19px; }
	.tow-cl-how__badgetitle { font-size: 24px; line-height: 28.8px; }
	.tow-cl-tool__text { font-size: 19px; }
	.tow-cl-tool__title { font-size: 24px; }
	.tow-cl-fit__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-cl-fit__title { font-size: 27px; }
	.tow-cl-cta__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-cl-cta__text { font-size: 19px; }
	.tow-cl-cta .tow-button--path { font-size: 17px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-sw-hero__title { font-size: 56px; line-height: 61.6px; }
	.tow-sw-hero__title .sub-label { font-size: 30px; line-height: 33px; }
	.tow-sw-why__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-sw-claim__text { font-size: 23px; line-height: 33.35px; }
	.tow-sw-scar__h3 { font-size: 26px; line-height: 28.6px; }
	.tow-sw-scar__text--last { font-size: 58px; line-height: 84.1px; }
	.tow-sw-bkg__h2 { font-size: 48px; line-height: 52.8px; }
	.tow-sw-bkg__h3 { font-size: 26px; line-height: 28.6px; }
	.tow-sw-bkg__paneltext { line-height: 33.6px; }
	.tow-sw-bkg__notetext { font-size: 58px; line-height: 69.6px; }
	.tow-sw-how__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-sw-how__leadh3 { font-size: 38px; line-height: 53.2px; }
	.tow-sw-cell__title { font-size: 30px; line-height: 36px; }
	.tow-sw-how__badgetitle { font-size: 38px; line-height: 53.2px; }
	.tow-sw-tool__title { font-size: 30px; line-height: 36px; }
	.tow-sw-fit__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-sw-fit__title { font-size: 35px; line-height: 49px; }
	.tow-sw-cta__h2 { font-size: 48px; line-height: 67.2px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-sw-hero__title { font-size: 50px; line-height: 55px; }
	.tow-sw-why__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-sw-scar__h3 { font-size: 38px; line-height: 41.8px; }
	.tow-sw-scar__text--last { font-size: 53px; line-height: 76.85px; }
	.tow-sw-bkg__h2 { font-size: 38px; line-height: 41.8px; }
	.tow-sw-bkg__h3 { font-size: 38px; line-height: 41.8px; }
	.tow-sw-bkg__notetext { font-size: 42px; line-height: 50.4px; }
	.tow-sw-how__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-sw-fit__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-sw-fit__title { font-size: 30px; line-height: 42px; }
	.tow-sw-cta__h2 { font-size: 42px; line-height: 58.8px; }
}
@media screen and (max-width: 801px) and (min-width: 600px) and (max-width: 992px) {
	.tow-sw-hero__title .sub-label { font-size: 27px; line-height: 29.7px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-sw-hero__title { font-size: 53px; line-height: 58.3px; }
	.tow-sw-why__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-sw-scar__h3 { font-size: 34px; line-height: 37.4px; }
	.tow-sw-scar__text--last { font-size: 45px; line-height: 54px; }
	.tow-sw-bkg__h2 { font-size: 34px; line-height: 37.4px; }
	.tow-sw-bkg__h3 { font-size: 34px; line-height: 37.4px; }
	.tow-sw-bkg__paneltext { line-height: 30.24px; }
	.tow-sw-bkg__notetext { font-size: 40px; line-height: 56px; }
	.tow-sw-how__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-sw-how__leadh3 { font-size: 29px; line-height: 40.6px; }
	.tow-sw-cell__title { font-size: 24px; line-height: 28.8px; }
	.tow-sw-cell__text { font-size: 19px; }
	.tow-sw-how__badgetitle { font-size: 29px; line-height: 40.6px; }
	.tow-sw-tool__text { font-size: 19px; }
	.tow-sw-tool__title { font-size: 24px; line-height: 28.8px; }
	.tow-sw-fit__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-sw-fit__title { font-size: 29px; line-height: 40.6px; }
	.tow-sw-cta__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-sw-cta__text { font-size: 19px; }
	.tow-sw-cta .tow-button--path { font-size: 17px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-ac-hero__title { font-size: 56px; line-height: 61.6px; }
	.tow-ac-hero__title .sub-label { font-size: 30px; line-height: 33px; }
	.tow-ac-loop__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-ac-train__h2 { font-size: 48px; line-height: 52.8px; }
	.tow-ac-fits__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-ac-card__title { font-size: 30px; line-height: 36px; }
	.tow-ac-built__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-ac-built__h3 { font-size: 35px; line-height: 49px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-ac-hero__title { font-size: 50px; line-height: 55px; }
	.tow-ac-loop__h2 { font-size: 40px; line-height: 56px; }
	.tow-ac-train__h2 { font-size: 38px; line-height: 41.8px; }
	.tow-ac-fits__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-ac-built__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-main--acupuncture-morton .tow-next__title { font-size: 42px; }
}
@media screen and (max-width: 801px) and (min-width: 600px) and (max-width: 992px) {
	.tow-ac-hero__title .sub-label { font-size: 27px; line-height: 29.7px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-ac-hero__title { font-size: 53px; line-height: 58.3px; }
	.tow-ac-hero__script { font-size: 56px; line-height: 56px; }
	.tow-ac-loop__h2 { font-size: 29px; line-height: 40.6px; }
	.tow-ac-train__h2 { font-size: 34px; line-height: 37.4px; }
	.tow-ac-fits__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-ac-card__title { font-size: 24px; line-height: 28.8px; }
	.tow-ac-card__text { font-size: 19px; }
	.tow-ac-built__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-ac-built__h3 { font-size: 34px; line-height: 47.6px; }
	.tow-main--acupuncture-morton .tow-next__title { font-size: 34px; }
	.tow-main--acupuncture-morton .tow-next .tow-button--path { font-size: 15px; }
	.tow-main--acupuncture-morton .tow-next__note { font-size: 19px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-np-hero__title { font-size: 56px; line-height: 61.6px; }
	.tow-np-hero__uses { font-size: 35px; line-height: 50.75px; }
	.tow-np-use__title { font-size: 30px; line-height: 36px; }
	.tow-np-mystery__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-np-pair__title { font-size: 26px; }
	.tow-np-pair__arrow { font-size: 24px; line-height: 34.8px; }
	.tow-np-why__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-np-why__scripttext { font-size: 78px; line-height: 113.1px; }
	.tow-np-tools__h2,
.tow-np-tools__fith2 { font-size: 48px; line-height: 67.2px; }
	.tow-np-tcard__title { font-size: 30px; line-height: 36px; }
	.tow-np-fit__title { font-size: 35px; line-height: 49px; }
	.tow-np-cta__h2 { font-size: 48px; line-height: 52.8px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-np-hero__title { font-size: 50px; line-height: 55px; }
	.tow-np-mystery__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-np-why__h2 { font-size: 40px; line-height: 56px; }
	.tow-np-why__scripttext { font-size: 58px; line-height: 69.6px; }
	.tow-np-tools__h2,
	.tow-np-tools__fith2 { font-size: 42px; line-height: 58.8px; }
	.tow-np-fit__title { font-size: 30px; line-height: 42px; }
	.tow-np-cta__h2 { font-size: 38px; line-height: 41.8px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-np-hero__title { font-size: 53px; line-height: 58.3px; }
	.tow-np-use__title { font-size: 24px; line-height: 28.8px; }
	.tow-np-mystery__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-np-pair__arrow { font-size: 24px; line-height: 34.8px; }
	.tow-np-why__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-np-why__lead { font-size: 19px; }
	.tow-np-why__laser { font-size: 19px; }
	.tow-np-why__scripttext { font-size: 48px; line-height: 67.2px; }
	.tow-np-tools__h2,
	.tow-np-tools__fith2 { font-size: 34px; line-height: 47.6px; }
	.tow-np-tcard__title { font-size: 24px; line-height: 28.8px; }
	.tow-np-tcard__text { font-size: 19px; }
	.tow-np-fit__title { font-size: 29px; line-height: 40.6px; }
	.tow-np-cta__h2 { font-size: 34px; line-height: 37.4px; }
	.tow-np-cta .tow-button--path { font-size: 17px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-dot-hero__title { font-size: 56px; line-height: 61.6px; }
	.tow-dot-why__h2 { font-size: 48px; line-height: 57.6px; }
	.tow-dot-exam__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-dot-exam__h3 { font-size: 35px; line-height: 49px; }
	.tow-dot-fit__title { font-size: 35px; line-height: 49px; }
	.tow-dot-fit__text ul { font-size: 22px; line-height: 31.9px; }
	.tow-dot-after__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-dot-stat__big { font-size: 48px; line-height: 69.6px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-dot-hero__title { font-size: 50px; line-height: 55px; }
	.tow-main--dot-physicals-morton .tow-ib-black__h2 { font-size: 42px; }
	.tow-dot-why__h2 { font-size: 42px; line-height: 50.4px; }
	.tow-dot-exam__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-dot-fit__title { font-size: 30px; line-height: 42px; }
	.tow-dot-after__h2 { font-size: 42px; line-height: 58.8px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-dot-hero__title { font-size: 53px; line-height: 58.3px; }
	.tow-dot-hero__pilltext { font-size: 27px; }
	.tow-dot-intro__text { font-size: 27px; }
	.tow-main--dot-physicals-morton .tow-ib-black__h2 { font-size: 34px; }
	.tow-dot-why__h2 { font-size: 34px; line-height: 40.8px; }
	.tow-dot-exam__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-dot-exam__h3 { font-size: 34px; line-height: 47.6px; }
	.tow-dot-fit__notetext { font-size: 27px; }
	.tow-dot-after__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-dot-stat__big { font-size: 39px; line-height: 56.55px; }
	.tow-dot-after__pilltext { font-size: 19px; }
	.tow-dot-call__text { font-size: 19px; }
	.tow-dot-call .tow-button--path { font-size: 17px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-an-hero__title { font-size: 54px; line-height: 59.4px; }
	.tow-an-why__h2 { font-size: 48px; line-height: 52.8px; }
	.tow-an-why__h2 .text-highlight { font-size: 63px; line-height: 69.3px; }
	.tow-an-quote__text { font-size: 68px; line-height: 98.6px; }
	.tow-an-fit__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-an-fit__title { font-size: 35px; line-height: 49px; }
	.tow-an-refer__h2 { font-size: 48px; line-height: 52.8px; }
	.tow-an-step__text { font-size: 22px; line-height: 31.9px; }
	.tow-an-mobstep__text { font-size: 24px; line-height: 34.8px; }
	.tow-an-wait__h2 { font-size: 48px; line-height: 67.2px; }
	.tow-an-point__title { font-size: 45px; line-height: 54px; }
	.tow-an-cta__script { font-size: 73px; line-height: 105.85px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 1200px) {
	.tow-an-hero__title { font-size: 48px; line-height: 52.8px; }
	.tow-an-quote__text { font-size: 58px; line-height: 84.1px; }
	.tow-an-cta__script { font-size: 68px; line-height: 98.6px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-an-hero__title { font-size: 50px; line-height: 55px; }
	.tow-an-why__h2 { font-size: 38px; line-height: 41.8px; }
	.tow-an-quote__text { font-size: 58px; line-height: 69.6px; }
	.tow-an-fit__h2 { font-size: 42px; line-height: 58.8px; }
	.tow-an-fit__title { font-size: 30px; line-height: 42px; }
	.tow-an-refer__h2 { font-size: 38px; line-height: 41.8px; }
	.tow-an-step__text { font-size: 18px; line-height: 26.1px; }
	.tow-an-wait__h2 { font-size: 40px; line-height: 56px; }
	.tow-an-cta__script { font-size: 51px; line-height: 61.2px; }
}
@media screen and (max-width: 801px) and (min-width: 600px) and (max-width: 992px) {
	.tow-an-why__h2 .text-highlight { font-size: 55px; line-height: 60.5px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-an-hero__title { font-size: 53px; line-height: 58.3px; }
	.tow-an-intro__btn .tow-button { font-size: 24px; }
	.tow-an-why__h2 { font-size: 34px; line-height: 37.4px; }
	.tow-an-quote__text { font-size: 42px; line-height: 58.8px; }
	.tow-an-fit__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-an-fit__lead { font-size: 19px; line-height: 27.55px; }
	.tow-an-refer__h2 { font-size: 34px; line-height: 37.4px; }
	.tow-an-wait__h2 { font-size: 34px; line-height: 47.6px; }
	.tow-an-point__title { font-size: 39px; line-height: 46.8px; }
	.tow-an-cta__script { font-size: 48px; line-height: 67.2px; }
	.tow-an-cta__text { font-size: 19px; line-height: 27.55px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-cc-hero__title { font-size: 56px; }
	.tow-cc-lead__h2 { font-size: 50px; }
	.tow-cc-feature__title { font-size: 45px; }
	.tow-cc-compare thead th { font-size: 17px; }
	.tow-cc-compare tbody td { font-size: 17px; }
	.tow-cc-compare .icon { font-size: 14px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 600px) {
	.tow-cc-compare tbody td { font-size: 17px; }
	.tow-cc-compare td.col-feature { font-size: 17px; }
	.tow-cc-compare td.col-bad::before { font-size: 14px; }
	.tow-cc-compare td.col-good::before { font-size: 14px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-cc-why__h2 { font-size: 50px; }
	.tow-cc-tools__h2 { font-size: 48px; }
	.tow-cc-tool__title { font-size: 30px; }
	.tow-cc-spec__h2 { font-size: 48px; }
	.tow-cc-special__title { font-size: 30px; }
	.tow-cc-hurtcard__desc { font-size: 23px; }
	.tow-cc-symptoms thead th { font-size: 16px; }
	.tow-cc-symptoms tbody td { font-size: 17px; }
	.tow-cc-fix__h2 { font-size: 48px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 992px) {
	.tow-cc-hero__title { font-size: 48px; }
	.tow-cc-lead__h2 { font-size: 48px; }
	.tow-cc-why__h2 { font-size: 48px; }
	.tow-cc-tools__h2 { font-size: 42px; }
	.tow-cc-spec__h2 { font-size: 42px; }
	.tow-cc-fix__h2 { font-size: 40px; }
}
@media (min-width: 600px) and (max-width: 992px) and (max-width: 768px) {
	.tow-cc-hero__title { font-size: 34px; }
	.tow-cc-lead__h2 { font-size: 34px; }
	.tow-cc-feature__title { font-size: 39px; }
	.tow-cc-why__h2 { font-size: 34px; }
	.tow-cc-tools__h2 { font-size: 34px; }
	.tow-cc-tool__title { font-size: 24px; }
	.tow-cc-tool__text { font-size: 19px; }
	.tow-cc-spec__h2 { font-size: 34px; }
	.tow-cc-special__title { font-size: 24px; }
	.tow-cc-special__text { font-size: 19px; }
	.tow-cc-fix__h2 { font-size: 29px; }
}
@media (min-width: 600px) and (max-width: 992px) {
	.tow-art-band__lead,
.tow-art-band__lead p { font-size: 24px; }
	.tow-art-band__back { font-size: 18px; }
	.tow-art-sec__title { font-size: 48px; }
	.tow-art-sec__lead { font-size: 22px; }
	.tow-art-empty { font-size: 24px; }
	.tow-art-card__title { font-size: 26px; }
	.tow-art-card__date { font-size: 16px; }
	.tow-art-card__excerpt { font-size: 18px; }
	.tow-art-card__more { font-size: 18px; }
	.tow-art-pager .page-numbers { font-size: 18px; }
}
/* ==== END TABLET TYPE ==== */

/* ===========================================================================
 * HAND-SET TABLET SIZES -- after the generated block, so they win over it,
 * and never scaled by it (migration/tablet_type.py keeps this section).
 * ======================================================================== */

/* CHIROPRACTIC CARE, "Efficiency Without the Rush" on a tablet: the three
   features line up, and the titles come down from 39px (the tablet type scale
   applied to the phone's 28) to 32, sitting 8px over their bold label rather
   than 20. */
@media (min-width: 600px) and (max-width: 992px) {
	.tow-cc-feature__title { margin-bottom: 8px; font-size: 32px; }
}

/* ARTICLE CARD TITLES ON A TABLET: 23px, not the generated 26 -- in a two-up
   card of about 340px the scaled title ran to five lines. */
@media (min-width: 600px) and (max-width: 992px) {
	.tow-art-card__title { font-size: 23px; }
}