/* Design decisions, section B (OTX discovery/2026-10-09-design-decisions.md): GLB-07 and GLB-R1 (orange
   buttons), LOC-05 (office pages on phones), PRO-13 and LOC-11 (phone spacing), PRO-R1 (profile
   specialty cards on phones), LST-02 (directory cards on phones), plus the Home headline on laptops.
   Blake's ruling of Oct. 21, 2026: all of these ship. Each rule names its finding ID.

   Load order: this file loads with the other plugin stylesheets, BEFORE Elementor's kit CSS
   (post-7.css), each template's post-<id>.css and the loop CSS printed in the page. A rule here wins
   on specificity, never on source order, so every selector below is more specific than the
   Elementor rule it replaces. Where a rule deliberately stays LESS specific than Elementor's own
   per-element rules, the comment says so.
   EDITOR NOTE: a value set here (phone padding, the headline size, the card layout) outranks the
   matching setting in the Elementor editor on the elements named. Change it here. */

/* ==========================================================================
   GLB-07 and GLB-R1: orange buttons
   ========================================================================== */

/* GLB-07 (option a): white text on the accent orange #FE8C42 measured 2.32:1. Navy #041E42 on the
   same orange is 7.12:1; the News page's Load More (dark ink on orange) was the model.
   GLB-R1 (option a): the kit's hover and focus state emptied the button (transparent fill, orange
   text, 2.07:1 on white), and a clicked button stayed that way while it kept focus. Hover and
   keyboard focus now keep a filled button: a darker orange #EE7629 with the same navy text
   (5.72:1). A mouse click leaves the button as it was. Keyboard focus (:focus-visible only) adds a
   3 px navy ring 2 px out, with a 2 px white halo inside it, so the ring shows on white and cloud
   bands (navy, 16.5:1) and on navy bands (the white halo, 16.5:1).

   Why CSS and not the kit: the orange and the white text live in Site Settings > Buttons (kit 7:
   button_text_color #FFFFFF, hover text = accent, hover fill transparent). A kit edit would also
   repaint every <button> the kit styles (filter buttons, location tabs, map controls), so the change
   is made here, on Elementor buttons only, and Site Settings are untouched. Changing those Site
   Settings later does nothing to the buttons this file covers.
   The body selector matches whichever kit is active (body[class*="elementor-kit-"], the same
   specificity as body.elementor-kit-7), so these rules do not depend on the kit's post ID.

   1. Every Elementor button that takes its colors from the kit. Specificity (0,3,1): above the kit's
      (0,2,0) and (0,3,0) for hover, BELOW Elementor's per-element rules (0,4,0) and (0,5,0), so a
      button with its own colors in the editor (the blue outline buttons, the blue Book Appointment
      on provider cards, Get Directions, Read More) keeps them; they do get the focus ring below.
      Left out by name (they set a transparent fill but no text color, so they rely on the kit's white
      on a dark band): flip-box buttons on the three hub pages; Find a Provider on the Home hero
      (22: 2517b03); Book an Appointment on Why OrthoTexas (281 and its draft 7752: 879cb33); Find
      Your Doctor on Learn About the Unification (4115: 33d694e); the hero template 4662 (306eb5f4).
      Also left out: the header's Get Care Today (14: b72bb4b), a blue text link with an orange
      underline border that takes its hover border from the kit.
      A new button that sets its own background but not its text color gets navy text; set the text
      color on that button in the editor. */
body[class*="elementor-kit-"] .elementor-element .elementor-button:where(:not(.elementor-flip-box__button, .elementor-element-2517b03 *, .elementor-element-879cb33 *, .elementor-element-33d694e *, .elementor-element-306eb5f4 *, .elementor-element-b72bb4b *)) {
	color: #041E42;
}
body[class*="elementor-kit-"] .elementor-element .elementor-button:where(:not(.elementor-flip-box__button, .elementor-element-2517b03 *, .elementor-element-879cb33 *, .elementor-element-33d694e *, .elementor-element-306eb5f4 *, .elementor-element-b72bb4b *)):where(:focus) {
	background-color: var(--e-global-color-accent, #FE8C42);
	border-color: var(--e-global-color-accent, #FE8C42);
	color: #041E42;
}
body[class*="elementor-kit-"] .elementor-element .elementor-button:where(:not(.elementor-flip-box__button, .elementor-element-2517b03 *, .elementor-element-879cb33 *, .elementor-element-33d694e *, .elementor-element-306eb5f4 *, .elementor-element-b72bb4b *)):where(:hover, :focus-visible) {
	background-color: #EE7629;
	border-color: #EE7629;
	color: #041E42;
}
body[class*="elementor-kit-"] .elementor-element .elementor-button:where(:not(.elementor-flip-box__button, .elementor-element-2517b03 *, .elementor-element-879cb33 *, .elementor-element-33d694e *, .elementor-element-306eb5f4 *, .elementor-element-b72bb4b *)):where(:focus-visible) {
	outline: 3px solid #041E42;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #FFFFFF;
}
/* Icons in those buttons (the down arrow on the profile specialty cards' Learn More, the Load More
   arrow) follow the text color. */
body[class*="elementor-kit-"] .elementor-element .elementor-button:where(:not(.elementor-flip-box__button, .elementor-element-2517b03 *, .elementor-element-879cb33 *, .elementor-element-33d694e *, .elementor-element-306eb5f4 *, .elementor-element-b72bb4b *)) svg {
	fill: currentColor;
}

/* 2. Orange buttons whose orange is set on the button itself (Elementor per-element rules, 0,4,0),
   so rule 1 cannot reach their fill or text:
   - pillar template 7099: Book Appointment in the hero (otxp0003) and the closing band (otxp0049)
     carry their own white text;
   - Why OrthoTexas (281; draft 7752), Medical Records (2012), Employment Opportunities (2136), Bill
     Pay (2180) and Book Appointment (2242) set the orange fill on the button, so the darker hover
     fill needs the element's own selector;
   - Load More on Locations (303: 8462d22) sets its own hover text, near-white #F4F6FC.
   Rule 1 already turns the text navy on all of these except 7099's two. */
body .elementor-7099 .elementor-element.elementor-element-otxp0003 .elementor-button,
body .elementor-7099 .elementor-element.elementor-element-otxp0049 .elementor-button {
	color: #041E42;
	fill: #041E42;
}
body .elementor-7099 .elementor-element.elementor-element-otxp0003 .elementor-button:focus,
body .elementor-7099 .elementor-element.elementor-element-otxp0049 .elementor-button:focus,
body .elementor-303 .elementor-element.elementor-element-8462d22 .elementor-button:focus,
body .elementor-2136 .elementor-element.elementor-element-630493a .elementor-button:focus {
	background-color: #FE8C42;
	border-color: #FE8C42;
	color: #041E42;
}
body .elementor-7099 .elementor-element.elementor-element-otxp0003 .elementor-button:is(:hover, :focus-visible),
body .elementor-7099 .elementor-element.elementor-element-otxp0049 .elementor-button:is(:hover, :focus-visible),
body .elementor-303 .elementor-element.elementor-element-8462d22 .elementor-button:is(:hover, :focus-visible),
body :is(.elementor-281, .elementor-7752) .elementor-element:is(.elementor-element-39c5003, .elementor-element-493de17, .elementor-element-630493a, .elementor-element-5ebb91d) .elementor-button:is(:hover, :focus-visible),
body .elementor-2012 .elementor-element.elementor-element-338a2d0 .elementor-button:is(:hover, :focus-visible),
body .elementor-2136 .elementor-element:is(.elementor-element-39c5003, .elementor-element-630493a) .elementor-button:is(:hover, :focus-visible),
body .elementor-2180 .elementor-element.elementor-element-39c5003 .elementor-button:is(:hover, :focus-visible),
body .elementor-2242 .elementor-element.elementor-element-39c5003 .elementor-button:is(:hover, :focus-visible) {
	background-color: #EE7629;
	border-color: #EE7629;
	color: #041E42;
	fill: #041E42;
}

/* 2b. Card buttons inside loop grids. A loop grid's own Load More text color is printed as
   `.elementor-<doc> .elementor-element.elementor-element-<loop> .elementor-button` (0,4,0), so it
   also paints every button inside the grid's cards: white text and an orange hover text on the
   orange Learn More of the provider cards in an office's "Our Providers in" band (1982: 519d9ed)
   and of the resource cards on Resources (526: 0019896), and on any loop grid that sets one later.
   The two orange card buttons, provider card 556 (e00afd2) and resource card 392 (11faf5f), are
   named here; the blue card buttons keep their own colors. */
body[class*="elementor-kit-"] .elementor-widget-loop-grid :is(.elementor-556 .elementor-element-e00afd2, .elementor-392 .elementor-element-11faf5f) .elementor-button {
	color: #041E42;
	fill: #041E42;
}
body[class*="elementor-kit-"] .elementor-widget-loop-grid :is(.elementor-556 .elementor-element-e00afd2, .elementor-392 .elementor-element-11faf5f) .elementor-button:focus {
	background-color: var(--e-global-color-accent, #FE8C42);
	border-color: var(--e-global-color-accent, #FE8C42);
	color: #041E42;
}
body[class*="elementor-kit-"] .elementor-widget-loop-grid :is(.elementor-556 .elementor-element-e00afd2, .elementor-392 .elementor-element-11faf5f) .elementor-button:is(:hover, :focus-visible) {
	background-color: #EE7629;
	border-color: #EE7629;
	color: #041E42;
	fill: #041E42;
}

/* 3. Load More under loop grids (Resources 526: 0019896; a location's provider band 1982: 519d9ed;
   News 7121 and its topics; the pillar and Home loops whenever they page). Some loop grids carry
   their own white text and an orange hover text (0,4,0 and 0,5,0); on archives
   includes/archive-pagination.php gives the link color:inherit (dark ink #222E3F, the GLB-07 model).
   One navy for all of them, and the same hover, focus and ring as rule 1. */
body[class*="elementor-kit-"] .elementor-element.elementor-widget-loop-grid .e-loop__load-more .elementor-button {
	color: #041E42;
	fill: #041E42;
}
body[class*="elementor-kit-"] .elementor-element.elementor-widget-loop-grid .e-loop__load-more .elementor-button:focus {
	background-color: var(--e-global-color-accent, #FE8C42);
	border-color: var(--e-global-color-accent, #FE8C42);
	color: #041E42;
}
body[class*="elementor-kit-"] .elementor-element.elementor-widget-loop-grid .e-loop__load-more .elementor-button:is(:hover, :focus-visible) {
	background-color: #EE7629;
	border-color: #EE7629;
	color: #041E42;
	fill: #041E42;
}
body[class*="elementor-kit-"] .elementor-element.elementor-widget-loop-grid .e-loop__load-more .elementor-button:focus-visible {
	outline: 3px solid #041E42;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #FFFFFF;
}

/* 4. The pillar specialists button, "Find a <pillar> Specialist" (pillar-render.php, .otx-btn-primary
   in pillar.css: white on orange, hollow on hover), and the four practice landing pages' closing-band
   button (A1, fixes-articles.css batch 3: white with #075D9B text until GLB-07 was ruled; its
   checklist says to switch it to the orange with the ruled text). */
.otx-pillar .otx-btn.otx-btn-primary {
	color: #041E42;
}
.otx-pillar .otx-btn.otx-btn-primary:is(:hover, :focus-visible) {
	background: #EE7629;
	border-color: #EE7629;
	color: #041E42;
}
.otx-pillar .otx-btn.otx-btn-primary:focus-visible {
	outline: 3px solid #041E42;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #FFFFFF;
}
/* fixes-articles.css sets this button's text with !important, so these do too (same declarations,
   one class more, later file). On the navy band the white halo carries the focus ring. */
body .otx-landing-body .otx-content .otx-cta-block.otx-cta-banner .otx-cta-button {
	border-color: #FE8C42;
	background: #FE8C42;
	color: #041E42 !important;
}
body .otx-landing-body .otx-content .otx-cta-block.otx-cta-banner .otx-cta-button:is(:hover, :focus-visible) {
	border-color: #EE7629;
	background: #EE7629;
	color: #041E42 !important;
}
body .otx-landing-body .otx-content .otx-cta-block.otx-cta-banner .otx-cta-button:focus-visible {
	outline: 3px solid #FFFFFF;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px #041E42;
}

/* 5. The search form's Search button (404 and search results: WordPress's input.search-submit, which
   the kit paints orange with white text and empties on hover). */
body[class*="elementor-kit-"] .search-form input.search-submit {
	color: #041E42;
}
body[class*="elementor-kit-"] .search-form input.search-submit:focus {
	background-color: var(--e-global-color-accent, #FE8C42);
	border-color: var(--e-global-color-accent, #FE8C42);
	color: #041E42;
}
body[class*="elementor-kit-"] .search-form input.search-submit:is(:hover, :focus-visible) {
	background-color: #EE7629;
	border-color: #EE7629;
	color: #041E42;
}
body[class*="elementor-kit-"] .search-form input.search-submit:focus-visible {
	outline: 3px solid #041E42;
	outline-offset: 2px;
}

/* 6. Same kit leak on two navy buttons (not orange, found with GLB-R1): the directory Filter buttons
   (.otx-af-btn) and the Locations ZIP Search (.otx-locfilter__submit) turn blue on hover, as
   pillar.css intends, but the kit also turned their text orange (1.9:1 on the blue). White stays
   white (5.4:1 on the blue). */
.otx-pillar .otx-af-btn:is(:hover, :focus),
.otx-pillar .otx-locfilter__submit:is(:hover, :focus) {
	color: #FFFFFF;
}

/* ==========================================================================
   Phones (767 px and below)
   ========================================================================== */
@media (max-width: 767px) {

	/* ----------------------------------------------------------------------
	   LOC-05: office pages (template 1982) show the address, hours and phone before the map. The row
	   bacb670 (details 7aa007c, then map 8ade242 in the markup) was set to column-reverse on phones,
	   which drew the 500 px map first and put the phone number two to three screens down. Column
	   order follows the markup; tablets and desktop keep the side-by-side row. 40 px between the
	   Request Appointment button and the map (was 20 px).
	   ---------------------------------------------------------------------- */
	.elementor-1982 .elementor-element.elementor-element-bacb670.e-con {
		--flex-direction: column;
		--row-gap: 40px;
	}

	/* ----------------------------------------------------------------------
	   PRO-13 and LOC-11: one phone spacing on profiles (348), Home (22), About Us (1943) and office
	   pages (1982). Sections had 100 px top and bottom (200-230 px of white between two sections)
	   and side gutters of 10, 20, 30 and 40 px from block to block. Now 60 px top and bottom, and
	   every block's content starts 20 px from the screen edge.
	   The shared rule is the theme's .container-padding (style.css: 100 px 30 px on every width);
	   it is scoped here to these four page types only. Listings, articles, landing pages, pillars
	   and hub pages keep their own phone spacing.
	   ---------------------------------------------------------------------- */
	body .elementor-348 .container-padding > .e-con-inner,
	body .elementor-22 .container-padding > .e-con-inner,
	body .elementor-1943 .container-padding > .e-con-inner,
	body .elementor-1982 .container-padding > .e-con-inner {
		padding: 60px 20px;
	}
	/* Sections whose columns add Elementor's default 10 px: 10 px here, so the content lands on 20. */
	body .elementor-348 .elementor-element-017a302.container-padding > .e-con-inner,
	body .elementor-22 .elementor-element-d22103a.container-padding > .e-con-inner,
	body .elementor-22 .elementor-element-75adf14.container-padding > .e-con-inner {
		padding-left: 10px;
		padding-right: 10px;
	}
	/* The Home "center of everything" icon columns (dc68fec) nest a second 10 px. */
	.elementor-22 .elementor-element.elementor-element-dc68fec.e-con {
		--padding-left: 0px;
		--padding-right: 0px;
	}

	/* Profile (348). Hero text column 03bd523: 30 px plus its blocks' 10 px; 10 px plus 10 px now.
	   The bottom of the navy hero: 60 px (was 80). */
	.elementor-348 .elementor-element.elementor-element-03bd523.e-con {
		--padding-left: 10px;
		--padding-right: 10px;
		--padding-bottom: 60px;
	}
	/* The quote band 847e6e3 held its card 10 px from the edge; 20 now. */
	.elementor-348 .elementor-element.elementor-element-847e6e3.e-con {
		--padding-left: 20px;
		--padding-right: 20px;
	}
	/* Credential accordions 8e9d256: the accordions' own 10 px plus 10 = 20; 40 px under them (the
	   audit's value; the next section adds its own 60). */
	.elementor-348 .elementor-element.elementor-element-8e9d256.e-con {
		--padding-left: 10px;
		--padding-right: 10px;
		--padding-bottom: 40px;
	}
	/* Office tab section 78d67ab (not a .container-padding section): 60 px and 20 px like the rest. */
	.elementor-348 .elementor-element.elementor-element-78d67ab.e-con {
		--padding-left: 20px;
		--padding-right: 20px;
		--padding-bottom: 60px;
	}
	/* The [provider_locations] block's own 40 px bottom margin (theme style.css) came on top of it. */
	.elementor-348 #location .provider-locations {
		margin-bottom: 0;
	}
	/* Videos (#videos, 101134f): the [provider_videos] grid kept the theme's own 40 px 20 px padding
	   inside the section's, so the videos sat 40 px in with 100 px under them. */
	.elementor-348 #videos .provider-videos-section {
		padding: 0;
	}
	/* Resources: the cards (92b342f, under the #resources heading band) had 100 px above them, 30 px
	   sides and the theme's 100 px under the grid. */
	.elementor-348 .elementor-element.elementor-element-92b342f.e-con {
		--padding-top: 60px;
		--padding-left: 20px;
		--padding-right: 20px;
	}
	.elementor-348 .elementor-element-92b342f .resource-category-section {
		margin-bottom: 60px;
	}
	/* Care team (348, loop 1e35ded) and an office's provider cards (1982, loop 519d9ed): the theme's
	   .centered-loop grid has 350 px minimum columns, wider than a phone's content box, so the cards
	   hung 13 px from the screen edge at 375 px (and past it on narrower phones). One column that
	   fits the box. */
	.elementor-348 .centered-loop .elementor-loop-container.elementor-grid,
	.elementor-1982 .centered-loop .elementor-loop-container.elementor-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Home (22). Hero text column ac25260 and the patient story column 401c204: 80 px 30 px
	   (Elementor's tablet value) to 60 px 20 px. */
	.elementor-22 .elementor-element.elementor-element-ac25260.e-con,
	.elementor-22 .elementor-element.elementor-element-401c204.e-con {
		--padding-top: 60px;
		--padding-bottom: 60px;
		--padding-left: 20px;
		--padding-right: 20px;
	}
	/* The embedded Locations finder (template 303 in 2b73bb1): its own sections are already on a
	   20 px gutter (LOC-06, fixes-chrome.css); 2b73bb1 added 10 more. On Home only, 60 px above and
	   below it; /locations/ keeps its own values. */
	.elementor-22 .elementor-element.elementor-element-2b73bb1.e-con {
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 0px;
		--padding-right: 0px;
	}
	.elementor-22 .elementor-303 .elementor-element.elementor-element-505c737.e-con {
		--padding-top: 60px;
	}
	.elementor-22 .elementor-303 .elementor-element.elementor-element-541a35a.e-con {
		--padding-bottom: 60px;
	}

	/* Office pages (1982). Hero 602b0b8: 30 px plus its blocks' 10 px to 20 px for all of them. The
	   "Our Providers in" band 6c00ec6 added 10 px outside the shared 20. */
	.elementor-1982 .elementor-element.elementor-element-602b0b8.e-con {
		--padding-left: 20px;
		--padding-right: 20px;
	}
	.elementor-1982 .elementor-element-602b0b8 .elementor-element:is(.elementor-element-1f54e21, .elementor-element-c38de2d, .elementor-element-7b47fce).e-con {
		--padding-left: 0px;
		--padding-right: 0px;
	}
	.elementor-1982 .elementor-element.elementor-element-6c00ec6.e-con {
		--padding-left: 0px;
		--padding-right: 0px;
	}

	/* ----------------------------------------------------------------------
	   PRO-R1: compact specialty cards on profiles (template 348, #specialties; cards 2671 for
	   services and 6959 for treatment areas, used only there). Each card was 460-485 px tall: 40 px
	   padding, a 55 px icon with a 40 px gap, the title, four to seven lines of text and the button.
	   Now 24 px padding, a 40 px icon with a 16 px gap, three lines of description (the full text is
	   one tap away on Learn More, and stays in the page for screen readers) and a smaller button.
	   ---------------------------------------------------------------------- */
	.elementor-348 #specialties .elementor-element:is(.elementor-element-f8e9ecd, .elementor-element-ta0c001).e-con {
		--padding-top: 24px;
		--padding-bottom: 24px;
		--padding-left: 24px;
		--padding-right: 24px;
		--gap: 12px 12px;
		--row-gap: 12px;
	}
	/* 4 px plus the card's 12 px gap = 16 px under the icon (was 40 plus 20). */
	.elementor-348 #specialties .elementor-element:is(.elementor-element-9112d7f, .elementor-element-ta0c002).elementor-widget {
		margin-bottom: 4px;
	}
	.elementor-348 #specialties .elementor-element:is(.elementor-element-9112d7f, .elementor-element-ta0c002) img {
		width: 40px;
		height: 40px;
		object-fit: contain;
		object-position: left center;
	}
	.elementor-348 #specialties .elementor-element:is(.elementor-element-1ea0026, .elementor-element-ta0c004).elementor-widget {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}
	.elementor-348 #specialties .elementor-element:is(.elementor-element-1ea0026, .elementor-element-ta0c004) p {
		margin-bottom: 0;
	}
	.elementor-348 #specialties .elementor-element:is(.elementor-element-bf2123f, .elementor-element-ta0c005) .elementor-button {
		padding: 11px 18px;
		font-size: 15px;
	}

	/* ----------------------------------------------------------------------
	   LST-02: compact directory cards on phones, Find a Provider (551, loop fd1724a) and Physical
	   Therapists (3529, loop 51d4eb4) only. The card (template 556) is also used on office pages,
	   the Home and pillar loops and the profile team band; those keep the full card.
	   The 295 px square photo above the text becomes a 110 px square beside it (88 px under 360 px),
	   the text wraps beside the photo, and the buttons run under both, side by side where they fit.
	   Every card and every line of it stays; nothing is paged or hidden. The two directories also
	   take the one 20 px phone gutter (PRO-13): the filter bar and the cards were at 40 px while
	   the intro above them was at 20 (LST-09); all three line up on 20 now.
	   ---------------------------------------------------------------------- */
	/* Gutters: the card grid (3062110, 8bb19cc) and the filter bar (5b6eb29, 407da40; LST-10 in
	   fixes-listings.css set 10 px outside plus 30 px inside on both, so they line up). */
	body .elementor-551 .elementor-element.elementor-element-3062110.e-con,
	body .elementor-3529 .elementor-element.elementor-element-8bb19cc.e-con,
	body .elementor-551 .elementor-element.elementor-element-5b6eb29.e-con,
	body .elementor-3529 .elementor-element.elementor-element-407da40.e-con {
		--padding-left: 0px;
		--padding-right: 0px;
	}
	body .elementor-551 .elementor-element-3062110.container-padding > .e-con-inner,
	body .elementor-3529 .elementor-element-8bb19cc.container-padding > .e-con-inner,
	body .elementor-551 .elementor-element.elementor-element-5b6eb29.e-con > .e-con-inner,
	body .elementor-3529 .elementor-element.elementor-element-407da40.e-con > .e-con-inner {
		padding-left: 20px;
		padding-right: 20px;
	}
	/* 20 px between cards (was 30). */
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4).elementor-widget-loop-grid {
		--grid-row-gap: 20px;
	}
	/* The card: a block box, so the photo can float and the text wrap beside it. */
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-4f96b03.e-con > .e-con-inner {
		display: block;
		padding: 16px;
	}
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-d4b2677.e-con {
		--width: 110px;
		width: 110px;
		float: left;
		margin: 0 14px 14px 0;
	}
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-4e786f6 img {
		display: block;
		width: 110px;
		height: 110px;
		max-height: none;
		object-fit: cover;
		object-position: 50% 20%;
		border-radius: 12px;
	}
	/* The text column: a plain block, so its rows sit beside the photo (each row is a flex box,
	   which keeps clear of the float) and the button row can clear it. */
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-cef9712.e-con {
		--display: block;
		display: block;
		--padding-top: 0px;
		--padding-bottom: 0px;
		--padding-left: 0px;
		--padding-right: 0px;
	}
	/* Elementor gives each row width:100% (--width), which would push it under the photo. */
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element-cef9712 > .elementor-element.e-con {
		--width: auto;
		width: auto;
	}
	/* Name and credentials (LST-04's wrapping row): when the credentials wrap under a long name, they
	   follow on the next line instead of 10 px further down. */
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-196290f.e-con {
		margin-bottom: 6px;
		--row-gap: 0px;
		row-gap: 0px;
	}
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-62af489.elementor-widget {
		line-height: 1.25;
	}
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-8c04719.elementor-widget {
		margin-bottom: 6px;
		font-size: 16px;
		line-height: 1.35;
	}
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-f00cf2a.e-con {
		font-size: 16px;
		line-height: 1.35;
	}
	/* Buttons: under the photo and the text, full card width, side by side where both fit (from
	   about 340 px), one per row below that. */
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.otx-card-actions.e-con {
		clear: left;
		margin-top: 14px;
		--gap: 10px 10px;
		--row-gap: 10px;
		--column-gap: 10px;
	}
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .e-con.otx-card-actions > .elementor-element.elementor-widget {
		flex: 1 1 auto;
	}
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .e-con.otx-card-actions .elementor-element .elementor-button {
		width: 100%;
		justify-content: center;
		padding: 12px 14px;
		font-size: 15px;
		white-space: nowrap;
	}
}

/* LST-02 on the narrowest phones (under 360 px): an 88 px photo leaves the text room to wrap. */
@media (max-width: 359px) {
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-d4b2677.e-con {
		--width: 88px;
		width: 88px;
	}
	:is(.elementor-551 .elementor-element-fd1724a, .elementor-3529 .elementor-element-51d4eb4) .elementor-556 .elementor-element.elementor-element-4e786f6 img {
		width: 88px;
		height: 88px;
	}
}

/* ==========================================================================
   Home headline on laptops (page 22, heading 1e94ea9)
   ========================================================================== */

/* Daniel Goldberg's headline (Oct. 12, 2026; audit/02-design/daniel-hero-swap-2026-10-12.png), trimmed
   on Oct. 21 when the stats icons took over "70+ physicians and 20+ locations". At the approved 48 px
   in the 50% hero column it still runs 8 lines at 1280 and 1366 px and 11 at 1025, so Book
   Appointment and Find a Provider sit 771 px down, below the first screen of a 1280 x 720 or
   1366 x 768 laptop. His words are unchanged. The size scales with the window from 36 px (up to
   about 1470 px) to the approved 48 px at 1920 px and up. It never drops below 36 px, the size of the
   section H2s on Home, so the H1 is never the smaller heading. The lines open to 1.1 (they were set
   solid, 1.0, which crowds a headline of five or more lines). Tablets and phones keep the kit's
   sizes (48 and 36 px). */
@media (min-width: 1025px) {
	.elementor-22 .elementor-element.elementor-element-1e94ea9.elementor-widget .elementor-heading-title {
		font-size: clamp(36px, calc(2.656vw - 3px), 48px);
		line-height: 1.1;
	}
}

/* Narrow laptops (1025-1279 px): the hero text column (ac25260) keeps 40 px top and bottom but its
   side padding goes from 80 to 48 px, so the headline wraps to 7 lines instead of 8 and the buttons
   end inside a 1025 x 768 screen. 1280 px and up keep the design's 80 px. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.elementor-22 .elementor-element.elementor-element-ac25260.e-con {
		--padding-left: 48px;
		--padding-right: 48px;
	}
}

/* Home stats icons (stats row otxh001, under the headline on the navy hero). Blake, Oct. 22: the
   pale circles with teal line art suit a white band but pulled the eye on navy, so the icons are now
   white line art with nothing behind them (assets/icons/physicians-doctor.svg, locations-map-pin.svg,
   goal-target.svg; only this row uses them). Each file is cropped to its drawing, all three on the
   same 28-unit height, so the row sets the height and the width follows: 28 px (the drawing at its
   own scale, 2 px lines) and 24 px on phones. The left edge of each icon lines up with its label.
   This replaces the image widgets' own widths (48 px, 40 px on phones), so the selector carries five
   classes to outrank Elementor's per-element rule. */
.elementor-22 .otx-home-stats .elementor-element.elementor-widget.elementor-widget-image img {
	width: auto;
	height: 28px;
}
@media (max-width: 767px) {
	.elementor-22 .otx-home-stats .elementor-element.elementor-widget.elementor-widget-image img {
		height: 24px;
	}
}
/* From 768 px up each label sits to the right of its icon, centered on it, so the row reads in one line
   (Blake, Oct. 23). The three items (otxh010, otxh020, otxh030) were columns, icon over label;
   Elementor's per-item rule (0,3,0) sets that, so this selector carries five classes. The widgets' width
   goes back to their content (Elementor sizes a column item's widgets at 100%), and the icon widget keeps
   its own size (in a row it would shrink to nothing: its image is capped at 100% of a width that comes
   from the image). Phones keep the icon over the label: side by side the three need about 352 px at
   390 px wide, where the row has 350 px, so they would not fit on one line. */
.elementor-22 .otx-home-stats .elementor-element.elementor-widget.elementor-widget-image img {
	max-width: none;
}
@media (min-width: 768px) {
	.elementor-22 .otx-home-stats .elementor-element.otx-home-stat.e-con {
		--flex-direction: row;
		--flex-wrap: nowrap;
		--align-items: center;
		--gap: 10px;
		--column-gap: 10px;
		--row-gap: 10px;
		--container-widget-width: auto;
	}
	.elementor-22 .otx-home-stats .otx-home-stat > .elementor-element.elementor-widget.elementor-widget-image {
		flex: 0 0 auto;
		width: auto;
	}
}

/* ==========================================================================
   Find a Provider intro (template 551, text-editor 56e47b9)
   ========================================================================== */

/* Daniel Goldberg (Oct. 21 build): the intro's first sentence is bold. In Gibson 700 at 18 px that is
   six heavy lines under the weight-800 H1 on a phone, so it competed with the heading. Semibold (600,
   loaded) keeps it set apart. Every width. */
.elementor-551 .elementor-element.elementor-element-56e47b9 strong {
	font-weight: 600;
}

/* ==========================================================================
   Provider card photos (Providers Loop 556, widget 4e786f6), Blake, Oct. 29: from 768 px up the card
   shows an 800 x 800 crop in a shorter box (about 410 x 300 at 1440 px), centered, so the top of each
   head was cut off. Fill the box and pin the photo to its top so the whole head shows. Phones keep the
   110 px square from LST-02 above.
   ========================================================================== */
@media (min-width: 768px) {
	.elementor-556 .elementor-element.elementor-element-4e786f6 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 50% 0;
	}
}

/* ==========================================================================
   Profile About (template 348), Blake, Oct. 29: Honors & Awards, Education and Certifications sit under
   the provider's name (tools/staged/z-oct29-profile-about.php moved row 8e9d256 into the left column
   799a1e9), stacked one per line. The bio shows three more lines before Read More (assets/js/custom-jquery.js).
   On phones the bio comes before the accordions.
   ========================================================================== */
.elementor-348 .elementor-element.elementor-element-8e9d256.e-con,
.elementor-348 .elementor-element.elementor-element-8e9d256.e-con > .e-con-inner {
	--flex-direction: column;
	flex-direction: column;
	--padding-top: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-right: 0px;
	padding: 0;
	--gap: 12px;
	--row-gap: 12px;
	gap: 12px;
	max-width: none;
	margin: 0;
}
.elementor-348 .elementor-element.elementor-element-8e9d256.e-con {
	margin-top: 32px;
	width: 100%;
}
.elementor-348 .elementor-element-8e9d256 > .e-con-inner > .e-con,
.elementor-348 .elementor-element-8e9d256 > .e-con {
	--width: 100%;
	width: 100%;
	flex: 0 0 auto;
	height: auto;
	--padding-top: 0px;
	--padding-bottom: 0px;
}
@media (min-width: 768px) {
	.elementor-348 .elementor-element.elementor-element-799a1e9.e-con {
		padding-right: 40px;
	}
}
@media (min-width: 1025px) {
	.elementor-348 .elementor-element.elementor-element-799a1e9.e-con {
		padding-right: 60px;
	}
}
/* The bio preview: three lines past the excerpt, faded at the foot until Read More. */
.bio-read-more-content.otx-bio-preview {
	opacity: 1;
	transition: max-height .4s;
}
.bio-read-more-content.otx-bio-preview:not(.active) {
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
	mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
@media (max-width: 767px) {
	.elementor-348 .elementor-element.elementor-element-017a302.e-con > .e-con-inner {
		flex-direction: column;
	}
	.elementor-348 .elementor-element.elementor-element-799a1e9.e-con {
		display: contents;
	}
	.elementor-348 .elementor-element-f1c4aac { order: 1; }
	.elementor-348 .elementor-element-2adaad0 { order: 2; }
	.elementor-348 .elementor-element.elementor-element-8e9d256.e-con { order: 3; }
}