/* The One Box - base/desktop styles. Mobile deviations go in responsive.css (max-width only). */

/*
Header (Figma Navigation 731:244). Layout, colours, logo and the Donate
button are Salient Theme Options; only the parts Salient has no option
for are here.
- Side padding: Salient's full-width header uses
  `#header-outer[data-full-width=true] header>.container { padding: 0 28px }`
  (css/build/style.css). Left padding is 0 and the logo column is the 139px
  yellow block with the logo centred, so it stays centred while Salient
  shrinks it on scroll (Theme Options logo shrink 19px: 63px -> 44px).
  Right padding: see Donate pill.
- Yellow/500 block behind the logo: 139px wide, full bar height (Figma
  731:233). Pseudo-element so it follows Salient's shrink-on-scroll height.
*/
body #header-outer[data-full-width=true] header > .container {
	padding-left: 0;
	padding-right: 37px; /* Donate pill ends 37px from the edge (Figma) */
}
/* Logo column = the 139px yellow block, logo centred in it at any size, so
   Salient's shrink/grow animation stays centred with no padding to animate. */
#header-outer header#top .row > .col.span_3 {
	width: 139px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
/* Yellow block as part of the header's own background (not a pseudo-element),
   so it always spans the full bar height - including Salient's shrink-on-scroll
   transition and trackpad overscroll, where a ::before can lag in Safari.
   Salient's Header Background colour (Warm Cream) stays underneath. */
/* #header-space is Salient's in-flow spacer under the fixed header, painted in the
   header colour. Scrolling back up it slides into view before the shrunk header
   has grown back, so it needs the same yellow column or a cream band shows. */
#header-outer,
#header-space {
	background-image: linear-gradient(to right, #FEBC00 0, #FEBC00 139px, transparent 139px); /* Yellow/500 = Extra Color #1 */
	background-repeat: no-repeat;
}
#header-outer header#top {
	position: relative;
	z-index: 1;
}

/*
Donate pill (Figma Button 720:144: 44px tall, 18px padding around a fixed
93px text box = 129px wide, Off White text, ends 37px from the edge).
The menu item uses Salient's own menu-item Link Style "Button" + Accent
Color (nectar_menu_options menu_item_link_link_style = button_accent-color,
plus "Persist In Mobile Header" so it also shows in the mobile bar). Salient
writes per-item rules to uploads/salient/menu-dynamic.css, keyed on
.menu-item-<ID> (IDs differ per environment): transparent 24px side borders
+ a:before/after at left:-24px, width:calc(100% + 48px). Overridden here by
the style class (+#top to outrank) only where Figma differs: side borders
37.5px -> 129px wide. Desktop only (Salient's own min-width:1000px block).
*/
@media only screen and (min-width: 1000px) {
	body #header-outer #top nav > ul > li[class*="menu-item-btn-style-button_accent-color"] > a {
		border-left-width: 37.5px;
		border-right-width: 37.5px;
	}
	body #header-outer #top nav > ul > li[class*="menu-item-btn-style-button_accent-color"] > a:before,
	body #header-outer #top nav > ul > li[class*="menu-item-btn-style-button_accent-color"] > a:after {
		left: -37.5px;
		width: calc(100% + 75px);
	}
	/* Get Involved -> pill gap: Salient spacing gives 40px, Figma 53px. */
	body #header-outer #top nav > ul > li[class*="menu-item-btn-style-button_accent-color"] {
		margin-left: 13px;
	}
}
/* Off White label. Salient forces #fff with `#header-outer #top nav .menu-item-<ID> > a
   {color:#fff!important}` (menu-dynamic.css, 2 IDs + 1 class); this has 2 IDs + 3 attrs. */
body #header-outer[data-has-menu][data-format] #top nav li[class*="menu-item-btn-style-button_accent-color"] > a,
body #header-outer[data-has-menu][data-format] #top nav li[class*="menu-item-btn-style-button_accent-color"] > a:hover,
body #header-outer[data-has-menu][data-format] #top .mobile-header li[class*="menu-item-btn-style-button_accent-color"] > a,
body #header-outer[data-has-menu][data-format] #top .mobile-header li[class*="menu-item-btn-style-button_accent-color"] > a:hover {
	color: #FFFAF5 !important;
}

/*
Footer: 6 fixed columns (Figma Footer 1396:788, updated 2026-10-12). Salient's
span_X grid stops at 4 columns, so the child partial override uses these flex
columns. Widths from Figma: brand 180, About 136, Our Programs 149, Our Impact
136, Get Involved 180, Get in touch 220; gap 40px.
*/
#footer-outer #footer-widgets .tob-footer-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 40px;
	margin: 0;
}
#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col {
	flex: 0 1 180px; /* Figma widths; shrink below ~1300px so the row never overflows */
	min-width: 0;
	width: auto;
	margin: 0;
	padding: 0;
}
#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col-2,
#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col-4 {
	flex-basis: 136px;
}
#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col-3 {
	flex-basis: 150px; /* Figma 149; "The Schools Program" renders at 149.0px and would wrap */
}
#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col-5 {
	flex-basis: 220px;
}

/*
Footer content (Figma Footer 1162:12094). Colours are Salient Theme Options
(Footer > custom colour scheme); type, spacing and the social circles are
here because Salient has no footer-specific options for them.
Footer content uses Salient's global .container like page content (Theme
Options: max width 1440, padding 96), full-width background (user: "content
of the footer needs to behave like content, not full width, but full bg").
Figma: padding 72 top / 40 bottom, column heading -> list 16px, link gap
12px, Montserrat Regular 14/20.
*/
#footer-outer #footer-widgets {
	padding-top: 72px;
	padding-bottom: 40px;
}
#footer-outer #footer-widgets .tob-footer-row,
#footer-outer #footer-widgets .tob-footer-row > .tob-footer-col {
	padding-top: 0;
	padding-bottom: 0;
}
/* Salient's .row / .container clearfix pseudo-elements (content:" "; display:table)
   would act as flex items and add a phantom first gap. */
#footer-outer #footer-widgets .tob-footer-row::before,
#footer-outer #footer-widgets .tob-footer-row::after,
#footer-outer #copyright > .container:first-child::before,
#footer-outer #copyright > .container:first-child::after {
	display: none;
}
#footer-outer #footer-widgets .widget {
	margin-bottom: 0;
}
#footer-outer #footer-widgets .widget h4 {
	margin-bottom: 16px;
}
#footer-outer #footer-widgets .widget,
#footer-outer #footer-widgets .widget p,
#footer-outer #footer-widgets .widget li a,
#footer-outer #footer-widgets .widget p a {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0; /* Figma Body 14/Regular (body text inherits 0.5px) */
	color: #FFFAF5; /* Off White */
}
/* Salient's material skin forces `.material #footer-outer #footer-widgets .col ul li
   {padding:4px 0!important}` (skin-material.css); beaten with !important + 1 more class. */
body.material #footer-outer #footer-widgets .tob-footer-col.col ul:not(.tob-social) li {
	padding-top: 0 !important;
	padding-bottom: 12px !important;
	margin: 0;
}
body.material #footer-outer #footer-widgets .tob-footer-col.col ul:not(.tob-social) li:last-child {
	padding-bottom: 0 !important;
}
/* Beats Salient's `#footer-outer #footer-widgets .col p {padding-bottom:20px}`
   (salient-dynamic-styles.css, same specificity but loads later). */
#footer-outer #footer-widgets .tob-footer-col .widget p {
	margin: 0 0 12px 0;
	padding: 0;
}

/* Brand column: logo 96x78 (the Donate pill under it left the footer in the 2026-10-12 Figma update). */
#footer-outer #footer-widgets .widget_media_image {
	margin-bottom: 16px;
}
#footer-outer #footer-widgets .widget_media_image img {
	width: 96px;
	height: auto;
	display: block;
}
/* Donate: Figma Button 720:144 (size from the global button rule); fixed 93px label box = 129px. */
#footer-outer #footer-widgets .nectar-button {
	min-width: 129px;
	margin: 0;
	color: #FFFAF5 !important;
}

/* Social circles: 44px, 1px Off White border, 18px icons, 12px apart, 16px under the
   contact lines (set on the last paragraph: vertical margins would collapse). */
#footer-outer #footer-widgets .tob-footer-col .widget p:last-of-type {
	margin-bottom: 16px;
}
#footer-outer #footer-widgets .tob-social {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Salient material skin pads footer li 4px 0 !important; social circles sit flush. */
body.material #footer-outer #footer-widgets .tob-footer-col.col ul.tob-social li {
	margin: 0;
	padding: 0 !important;
	float: none;
}
body.material #footer-outer #footer-widgets .tob-footer-col.col ul.tob-social li a { /* beats Salient's footer link display:block */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid #FFFAF5;
	border-radius: 22px;
	color: #FFFAF5;
}
body.material #footer-outer #footer-widgets .tob-footer-col.col ul.tob-social li a i {
	font-size: 18px;
	line-height: 18px;
	width: auto;
	height: auto;
	color: inherit;
}

/* Legal bar: Work Sans Medium 13/20, 0.065px, 78% opacity, items 24px apart, padding 20. */
#footer-outer #copyright {
	padding: 20px 0 0 0;
	border-top: 0;
}
#footer-outer #copyright > .container:first-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#footer-outer #copyright .tob-legal-left,
#footer-outer #copyright .tob-legal-right {
	width: auto;
	margin: 0;
	float: none;
}
#footer-outer #copyright .tob-legal-left p,
#footer-outer #copyright .tob-back-to-top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	font-family: "Work Sans", sans-serif;
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0.065px;
	color: #FFFAF5;
	opacity: 0.78;
}
#footer-outer #copyright .tob-legal-left p a {
	color: inherit;
}
#footer-outer #copyright .tob-back-to-top {
	gap: 8px;
}
#footer-outer #copyright .tob-back-to-top__icon {
	width: 16px;
	height: 16px;
	display: block;
	margin: 0; /* Salient gives footer images a 15px bottom margin */
}

/* Initiative line (Footer Area 6): Montserrat 14/20, 78% opacity, 24 top / 40 bottom. */
#footer-outer #copyright .tob-footer-initiative {
	padding-top: 24px;
	padding-bottom: 40px;
}
#footer-outer #copyright .tob-footer-initiative p {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 20px;
	color: #FFFAF5;
	opacity: 0.78;
}


/*
Buttons (Figma Button 720:144 / 720:152): every button in the design is
44px tall, 10px 18px padding, UI/Button type (set in Theme Options as the
"Nectar Button" font). Salient's medium buttons are resized to match.
*/
/* Salient's nectar_btn prints inline CSS after all stylesheets:
   `.nectar-button.medium {font-size:12px}` and
   `body[data-button-style^="rounded"] .nectar-button.medium:not(.see-through):not(.see-through-2):not(.see-through-3) {padding:12px 18px}`
   - same chain + doubled .medium to genuinely outrank it (a tie loses to the later inline block);
   14px = UI/Button (Theme Options "Nectar Button" font). */
body[data-button-style] .nectar-button.medium.medium,
body[data-button-style] .nectar-button.medium.medium:not(.see-through):not(.see-through-2):not(.see-through-3) {
	font-size: 14px;
	padding: 10px 18px;
	line-height: 24px;
	min-height: 44px;
	margin-bottom: 0;
}

/*
Hero (Figma Home 1162:11311). Row, background image, 40% black overlay
(= Figma's 40% multiply) and the 596px height are Salient row settings.
H1 colour = Salient theme colour class nectar-color-tob-yellow-400.
Multi button (Figma 719:171 group): white pill, 4px padding, 8px gap,
48px buttons with 24px side padding and 24px radius.
*/
.tob-hero h1 {
	margin-bottom: 38px;
	color: #FCC551; /* Yellow/400 - Salient's light-row heading colour outranks the nectar-color class */
}
/* Photo positioned 25% down (user, 2026-10-09): the hero is a fixed 596px, so on
   wide screens cover crops more of the photo and heads must never be cut; 25%
   keeps every head in frame up to 2560px while lifting faces clear of the
   headline (0% = faces too low, 30% = cut at 2560). Salient writes
   background-position inline. */
.wpb_row:has(.tob-hero) .row-bg {
	background-position: center 25% !important;
}
.tob-multi-button > .vc_column-inner {
	display: inline-flex;
	gap: 8px;
	padding: 4px;
	background-color: #FFFFFF;
	border-radius: 100px;
}
.tob-multi-button > .vc_column-inner > .wpb_wrapper {
	display: flex;
	gap: 8px;
}
body[data-button-style] .tob-multi-button .nectar-button.medium.medium:not(.see-through):not(.see-through-2):not(.see-through-3) {
	min-height: 48px;
	padding: 14px 24px;
	line-height: 20px;
	border-radius: 24px !important;
	margin: 0;
}

/*
Image + text split (Figma Home 1162:11315 / 1162:11321): two equal
columns 96px apart, image corners 32px (Salient image setting), H3 ->
text 24px, paragraphs 8px apart in Body/Medium, button 24px below.
*/
/* Salient zeroes column padding, so the 96px gap goes on the inner wrappers. */
.row_col_wrap_12 > .tob-split-media:first-child > .vc_column-inner,
.row_col_wrap_12 > .tob-split-text:first-child > .vc_column-inner {
	padding-right: 48px;
}
.row_col_wrap_12 > .tob-split-media:last-child > .vc_column-inner,
.row_col_wrap_12 > .tob-split-text:last-child > .vc_column-inner {
	padding-left: 48px;
}
/* Image fills the column (height set by the text column), cropped like Figma. */
.tob-split-media > .vc_column-inner {
	position: relative;
}
.tob-split-media > .vc_column-inner > .wpb_wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
.row_col_wrap_12 > .tob-split-media:first-child > .vc_column-inner > .wpb_wrapper {
	right: 48px;
}
.row_col_wrap_12 > .tob-split-media:last-child > .vc_column-inner > .wpb_wrapper {
	left: 48px;
}
.tob-split-media .img-with-aniamtion-wrap,
.tob-split-media .img-with-aniamtion-wrap .inner,
.tob-split-media .img-with-aniamtion-wrap .hover-wrap,
.tob-split-media .img-with-aniamtion-wrap .hover-wrap-inner {
	height: 100%;
}
.tob-split-media .img-with-aniamtion-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tob-split-text .wpb_text_column :is(h1, h2, h3) {
	margin-bottom: 24px; /* beats Salient's 8px heading margin */
	max-width: 429px; /* Figma text box width - controls the line break */
}
.tob-split-text .wpb_text_column {
	margin-bottom: 0; /* Salient adds 24px; the button carries the 24px gap */
}
.tob-split-text p {
	font-weight: 500;
	padding-bottom: 8px;
}
.tob-split-text p:last-child {
	padding-bottom: 0;
}
.tob-split-text .nectar-button {
	margin-top: 24px;
}

/*
Section intro (Figma "Frame 6" pattern): H3 + Feature Text lead
(Montserrat SemiBold 24/32), 16px apart.
*/
.tob-section-intro .wpb_text_column {
	margin-bottom: 0;
}
.tob-section-intro .wpb_text_column :is(h1, h2, h3) {
	margin-bottom: 0;
	padding-bottom: 0;
}
/* Beats Salient's body .wpb_text_column h2/h3:last-child (10px) when the heading stands alone. */
body .tob-section-intro .wpb_text_column :is(h1, h2, h3):last-child {
	margin-bottom: 0;
}
.tob-section-intro .tob-text__lead--large {
	margin-top: 16px;
	padding-bottom: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: 0;
}

/*
Cards (Figma "Content Block"): 216px image with 16px corners, H4, Body,
16px between each. Columns as flex: 3-up 63px apart (How it works),
4-up 28px apart (Everyone can play a part). Salient zeroes column padding
and floats columns, so the row wrapper becomes a flex row.
*/
/* Salient's clearfix ::before/::after would become flex items and eat a gap. */
.row_col_wrap_12:has(> .tob-card)::before,
.row_col_wrap_12:has(> .tob-card)::after,
.row_col_wrap_12:has(> .tob-stat)::before,
.row_col_wrap_12:has(> .tob-stat)::after,
.row_col_wrap_12:has(> .tob-testimonial)::before,
.row_col_wrap_12:has(> .tob-testimonial)::after {
	display: none;
}
.row_col_wrap_12:has(> .tob-card) {
	display: flex;
	gap: 63px;
}
.row_col_wrap_12:has(> .tob-card:nth-child(4)) {
	gap: 28px;
}
.row_col_wrap_12 > .tob-card {
	flex: 1 1 0;
	width: auto;
	margin: 0;
	float: none;
}
.tob-card .img-with-aniamtion-wrap {
	margin-bottom: 16px;
}
.tob-card .img-with-aniamtion-wrap img {
	width: 100%;
	height: 216px;
	object-fit: cover;
}
.tob-card .wpb_text_column {
	margin-bottom: 0;
}
.tob-card .wpb_text_column :is(h3, h4) {
	margin-bottom: 16px;
	padding-bottom: 0;
}
.tob-card .wpb_text_column p {
	padding-bottom: 0;
}

/*
Impact stats (Figma Group 65): 3 x 2 grid, 63px column / 56px row gap;
number = H1 size in Yellow/500, label Body/Medium, 16px apart.
*/
.row_col_wrap_12:has(> .tob-stat) {
	display: flex;
	flex-wrap: wrap;
	column-gap: 63px;
	row-gap: 56px;
}
.row_col_wrap_12 > .tob-stat {
	flex: 0 0 calc((100% - 126px) / 3);
	width: auto;
	margin: 0;
	float: none;
}
/* Numbers are Salient Milestones (count-up on scroll, colour = Extra Color 1
   Yellow/500, 64px = Theme Options font size param). Salient writes
   line-height:64px inline on the number; Figma H1 is 64/72 with the label
   16px below in Body/Medium. */
.tob-stat .nectar-milestone .number,
.tob-stat .nectar-milestone .number .symbol-wrap {
	line-height: 72px !important; /* overrides Salient's inline line-height */
	font-weight: 700;
	margin-bottom: 0;
	padding-bottom: 0;
}
.tob-stat .nectar-milestone .subject {
	margin-top: 16px;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0.08px;
	color: #000000;
	text-transform: none;
}
.tob-impact-note .wpb_text_column {
	margin-bottom: 16px;
}
.tob-impact-note .wpb_text_column p {
	padding-bottom: 0;
}

/* Outline button (Figma Button "Secondary" 720:152): 2px Teal/800 border, 44px tall overall. */
body[data-button-style] .nectar-button.medium.medium.see-through {
	font-size: 14px;
	padding: 10px 18px;
	line-height: 20px;
	min-height: 44px;
	border-width: 2px;
	transition: background-color 0.2s ease, color 0.2s ease;
}
/* Hover fills like the solid button (user, 2026-10-16). Salient forces
   `body .nectar-button.see-through {background-color: transparent !important}`
   and writes the text colour inline, so both need !important. */
body[data-button-style] .nectar-button.medium.medium.see-through:hover,
body[data-button-style] .nectar-button.medium.medium.see-through:focus-visible {
	background-color: #006767 !important;
	border-color: #006767 !important;
	color: #FFFAF5 !important;
}

/* Partner logos (Figma 2026-10-12, 1396:915-925): 232x87 frames over 300px square sources, cover-cropped like Figma. */
.tob-section-intro .tob-text--gap46 p.tob-text__body { /* 46px option; beats .tob-section-intro .tob-text__body (16px, later in this file) */
	margin-top: 46px;
}

/*
Testimonials (Figma Testimonial 1162:11298): quote Body/Quote (Montserrat
Italic 18/28, Base/Ink), 16px above the author row: 48px avatar, 16px gap,
name Body/Semi Bold in Teal/700.
*/
.row_col_wrap_12:has(> .tob-testimonial) {
	display: flex;
	gap: 70px;
}
.row_col_wrap_12 > .tob-testimonial {
	flex: 1 1 0;
	width: auto;
	margin: 0;
	float: none;
}
.tob-testimonial .wpb_text_column {
	margin-bottom: 0;
}
.tob-testimonial .wpb_text_column p.tob-testimonial__quote {
	margin: 0;
	padding: 0 0 16px 0;
	font-size: 18px;
	line-height: 28px;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	color: #12201F; /* Base/Ink */
}
.tob-testimonial .tob-testimonial__author {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 0;
	font-weight: 600;
	color: #007E7F; /* Teal/700 */
}

/* Donate copy (Figma Donate Section 1191:2072): H3 22px above Body/Medium paragraphs; ACNC badge 209px. */
.tob-donate-copy .wpb_text_column :is(h1, h2, h3) {
	margin-bottom: 22px;
}
.tob-donate-copy .wpb_text_column p {
	font-weight: 500;
	padding-bottom: 32px;
}
.tob-donate-copy .wpb_text_column {
	margin-bottom: 0;
}

/*
Multi button sliding pill (js/custom.js adds .tob-multi-button--js and the
pill). Buttons sit above the Teal/800 pill: inactive buttons keep the Figma
Ground background, the active one turns transparent so the pill shows
through (Salient's buttons form their own stacking layers, so the pill
can't sit between a button's background and its label).
*/
.tob-multi-button--js {
	position: relative;
}
body[data-button-style] .tob-multi-button--js .nectar-button.medium.medium:not(.see-through):not(.see-through-2):not(.see-through-3) {
	position: relative;
	z-index: 2;
	background-color: #F5FAF9 !important; /* Ground; overrides Salient's accent / colour-override backgrounds */
	color: #000000 !important;
	box-shadow: none !important;
	transition: color 0.3s ease, background-color 0.3s ease;
}
body[data-button-style] .tob-multi-button--js .nectar-button.medium.medium.is-active:not(.see-through):not(.see-through-2):not(.see-through-3) {
	background-color: transparent !important;
	color: #FFFAF5 !important; /* Off White on the teal pill */
}
.tob-multi-button__pill {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	z-index: 1;
	border-radius: 24px;
	background-color: #006767; /* Teal/800 */
	pointer-events: none;
}
.tob-multi-button--ready .tob-multi-button__pill {
	transition: left 0.3s ease, width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
	.tob-multi-button--ready .tob-multi-button__pill,
	body[data-button-style] .tob-multi-button--js .nectar-button.medium.medium {
		transition: none;
	}
}

/*
Donation card (Figma "Make a donation card" 1191:2079): white, 32px
corners, Shadow/Light/100, 28px padding, H4 title 22px above the form.
Input colours / 2px border are Salient Theme Options (Form Styling).
*/
.tob-donate-form > .vc_column-inner {
	padding: 28px !important; /* Salient no-extra-padding column */
	background-color: #FFFFFF;
	border-radius: 32px;
	box-shadow: 0 1px 0.5px rgba(48, 49, 51, 0.1), 0 0 0.5px rgba(48, 49, 51, 0.05);
}
.tob-donate-form .wpb_text_column {
	margin-bottom: 0;
}
.row .col .tob-donate-form .tob-donate-card__title { /* beats Salient .row .col h3/h4 (8px) */
	margin: 0 0 22px 0;
	padding: 0;
}

/*
Donation form (GF form 13, Gravity Forms "Orbital" theme) to the Figma
"Make a donation" card 1191:2079. Fields 22px apart; labels Body/Medium;
pills = 2px Teal/800 border on Ground, selected = Teal/800 + Off White;
frequency pills 10/16 padding; amount pills 2-up, 10px gap, 14px padding;
custom amount = pill input with a "$" prefix; select 48px, 12px corners,
Figma chevron. Input colours/border width are Salient Form Styling options.
*/
#gform_wrapper_13 .gform_fields {
	row-gap: 22px;
}
#gform_wrapper_13 .gfield_label,
#gform_wrapper_13 legend.gfield_label {
	margin-top: 0; /* Salient: body .gform_wrapper .top_label .gfield_label 20px */
	margin-bottom: 12px;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0.08px;
	color: #000000;
}
#gform_wrapper_13 .gfield_required {
	display: none; /* Figma shows no asterisks */
}

/* Pills: the radio itself is visually hidden, the label is the pill. */
#gform_wrapper_13 .tob-pills .gfield_radio {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
#gform_wrapper_13 .tob-pills .gchoice {
	position: relative;
	margin: 0;
}
#gform_wrapper_13 .tob-pills .gchoice input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
#gform_wrapper_13 .tob-pills .gchoice label {
	display: block;
	margin: 0;
	padding: 8px 14px; /* + 2px border = Figma 10/16 */
	border: 2px solid #006767;
	border-radius: 9999px;
	background-color: #F5FAF9;
	color: #006767;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.07px;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}
#gform_wrapper_13 .tob-pills .gchoice input[type="radio"]:checked + label {
	background-color: #006767;
	color: #FFFAF5;
}
#gform_wrapper_13 .tob-pills .gchoice input[type="radio"]:focus-visible + label {
	outline: 2px solid #4CBDBD;
	outline-offset: 2px;
}
#gform_wrapper_13 .tob-pills .gchoice label::before,
#gform_wrapper_13 .tob-pills .gchoice label::after {
	display: none; /* Orbital's custom radio dot */
}
/* Amount pills: 2-up grid, 10px gap, taller. The "custom" choice stays hidden -
   the Custom Amount box below drives it (js/custom.js). */
#gform_wrapper_13 .tob-pills--amount .gfield_radio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
#gform_wrapper_13 .tob-pills--amount .gchoice label {
	padding: 12px 14px; /* + 2px border = Figma 14/16 */
}
#gform_wrapper_13 .tob-pills--amount .gchoice:has(input[value="custom"]) {
	display: none;
}

/* Custom amount: pill input, "$" prefix. Field sits 10px under the amount grid. */
#gform_wrapper_13 .tob-custom-amount {
	margin-top: -12px;
}
#gform_wrapper_13 .tob-custom-amount .ginput_container {
	position: relative;
}
#gform_wrapper_13 .tob-custom-amount .ginput_container::before {
	content: "$";
	position: absolute;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #006767;
	pointer-events: none;
}
#gform_wrapper_13 .tob-custom-amount input {
	width: 100%;
	height: 52px;
	padding: 14px 16px 14px 37px;
	border-radius: 9999px;
	font-size: 16px;
	line-height: 24px;
}
#gform_wrapper_13 input::placeholder {
	color: #6B7280; /* Gray 500 */
	opacity: 1;
}

/* Select + text inputs: 48px, 12px corners, Figma chevron. */
#gform_wrapper_13 select,
#gform_wrapper_13 input[type="text"]:not(.ginput_amount),
#gform_wrapper_13 input[type="email"] {
	height: 48px;
	padding: 0 16px;
	border-radius: 12px;
	font-size: 16px;
	line-height: 24px;
}
#gform_wrapper_13 select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	background-image: url("../img/icon-chevron-down.svg");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 20px 20px;
}

/* Message + CTA row ("Secure" beside the button). */
#gform_wrapper_13 .tob-donate-message p {
	padding: 0;
	margin: 0;
}
/* Impact line (user copy 2026-10-12) replaces the message for a set amount (js/custom.js). */
#gform_wrapper_13 .tob-donate-message--impact p:not(.tob-impact__line),
#gform_wrapper_13 .tob-impact__line[hidden] {
	display: none;
}
/* User 2026-10-13: impact line bold green (Teal/800) so it isn't missed. */
#gform_wrapper_13 .tob-impact__line {
	font-weight: 700;
	color: #006767;
}
/* Multi-step (user, 2026-10-12): every step's buttons sit in .gform_page_footer. */
#gform_wrapper_13 .gform_footer,
#gform_wrapper_13 .gform_page_footer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 22px;
	padding: 0;
}
#gform_wrapper_13 .tob-secure {
	font-family: "Work Sans", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.06px;
	color: #6B7280;
}
.tob-donate-form .tob-donate-footnote {
	margin-top: 22px;
	padding: 0;
	font-family: "Work Sans", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.06px;
	color: #6B7280;
}

/* Donation form - Orbital overrides (second pass, measured in Playwright). */
#gform_wrapper_13 .gform_required_legend {
	display: none; /* '"*" indicates required fields' - not in the design */
}
/* Calculated products + total stay in the form for the amount logic, just not shown. */
#gform_wrapper_13 .gfield--type-product.gfield--input-type-calculation,
#gform_wrapper_13 .gfield--type-total {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
/* Orbital lays choices out vertically; frequency pills sit in a row. */
#gform_wrapper_13 .gform_fields .tob-pills--frequency .gfield_radio {
	display: flex !important;
	flex-direction: row;
	gap: 12px;
}
#gform_wrapper_13 .gform_fields .tob-pills--amount .gfield_radio {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
#gform_wrapper_13 .gform_fields .tob-pills--amount .gchoice,
#gform_wrapper_13 .gform_fields .tob-pills--amount .gchoice label {
	width: 100%;
	max-width: none;
}
/* Text inputs fill their column (Orbital's "medium" size is narrower). */
#gform_wrapper_13 .gform_fields .ginput_container input,
#gform_wrapper_13 .gform_fields .ginput_container select {
	width: 100%;
	max-width: none;
}
#gform_wrapper_13 .gform_fields select {
	padding-top: 0;
	padding-bottom: 0;
	line-height: 44px;
}
/* Submit + Next = Figma Button 720:144 (Teal/800 pill, 44px, Off White label). */
#gform_wrapper_13 .gform_footer .gform_button,
#gform_wrapper_13 .gform_page_footer .gform_button,
#gform_wrapper_13 .gform_page_footer .gform_next_button,
#gform_wrapper_13 .gform_page_footer .gform_previous_button {
	min-width: 129px;
	height: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 9999px;
	background-color: #006767;
	color: #FFFAF5;
	font-size: 14px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: 0.07px;
	box-shadow: none;
	cursor: pointer;
}
#gform_wrapper_13 .gform_footer .gform_button:hover,
#gform_wrapper_13 .gform_page_footer .gform_button:hover,
#gform_wrapper_13 .gform_page_footer .gform_next_button:hover {
	background-color: #007E7F; /* Teal/700 */
}
/* Beats Salient's body[data-button-style="rounded"] .container-wrap button[type="submit"] 16px/23px !important. */
body[data-button-style] .container-wrap #gform_wrapper_13 button.gform_button[type="submit"] {
	padding: 10px 18px !important;
}
/* Back = Figma secondary button (2px Teal/800 outline). */
#gform_wrapper_13 .gform_page_footer .gform_previous_button {
	min-width: 0;
	border: 2px solid #006767;
	background-color: transparent;
	color: #006767;
}
#gform_wrapper_13 .gform_page_footer .gform_previous_button:hover {
	background-color: #006767;
	color: #FFFAF5;
}
/* Privacy note (live HTML block 16): small print like the footnote. */
#gform_wrapper_13 .gfield--type-html:not(.tob-donate-message) {
	font-family: "Work Sans", sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0.06px;
	color: #6B7280;
}
#gform_wrapper_13 .gform_fields .tob-pills--amount .gchoice label.gform-field-label {
	display: flex;
	justify-content: center;
	box-sizing: border-box;
}
/* Orbital makes each .gchoice an inline-grid sized to its content; one full-width column. */
#gform_wrapper_13 .gform_fields .tob-pills--amount .gchoice {
	grid-template-columns: minmax(0, 1fr);
}
/*
Card expiry + security code (client 2026-10-21: "Month"/"Year" cut off, code box overflowing).
GF splits the row 50/50 from 640px, leaving each select ~87px for 60px of padding + chevron,
so expiry and security code each take a full row; the code box matches one select's width.
*/
#gform_wrapper_13 .ginput_cardinfo_left,
#gform_wrapper_13 .ginput_cardinfo_right {
	width: 100%;
}
#gform_wrapper_13 .ginput_cardinfo_right .ginput_card_security_code_icon {
	vertical-align: middle;
}
#gform_wrapper_13 .ginput_cardinfo_right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 8px;
}
/* min-width: 0, or the input keeps its intrinsic ~214px and pushes the icon under it. */
#gform_wrapper_13 .ginput_cardinfo_right input.ginput_card_security_code {
	flex: 0 1 calc(50% - 6px);
	min-width: 0;
	width: auto;
}
#gform_wrapper_13 .ginput_cardinfo_right label {
	flex-basis: 100%;
}

/*
Interior page hero (Figma Our story 1162:6207 - repeats on most R2 pages):
full-width background, content contained like the footer (user,
2026-10-09; Figma bleeds the photo to the edge): text and 576x500 photo (588 until the Figma update of 2026-10-12)
as two container columns 96px apart, breadcrumb 56px above the H3,
120px bottom-left corner.
*/
.row_col_wrap_12:has(> .tob-page-hero__media) {
	display: flex;
}
.row_col_wrap_12:has(> .tob-page-hero__media)::before,
.row_col_wrap_12:has(> .tob-page-hero__media)::after {
	display: none;
}
.row_col_wrap_12 > .tob-page-hero__text {
	flex: 1 1 0;
	width: auto;
	float: none;
	margin: 0;
}
.row_col_wrap_12 > .tob-page-hero__text > .vc_column-inner {
	padding: 24px 96px 56px 0; /* contained like the footer (user): 96px gap to the photo; 56px bottom keeps most heroes at Figma's 500px */
}
.row_col_wrap_12 > .tob-page-hero__media {
	flex: 0 0 576px;
	width: 576px;
	float: none;
	margin: 0;
}
/* Photo is 500px, or the text column's height when contained copy runs longer
   (the photo is out of flow, so only the text sets the row height). */
.row_col_wrap_12 > .tob-page-hero__media > .vc_column-inner {
	position: relative;
	height: 100%;
	min-height: 500px;
}
.row_col_wrap_12 > .tob-page-hero__media > .vc_column-inner > .wpb_wrapper {
	position: absolute;
	inset: 0;
}
.tob-page-hero__media .img-with-aniamtion-wrap,
.tob-page-hero__media .img-with-aniamtion-wrap .inner,
.tob-page-hero__media .img-with-aniamtion-wrap .hover-wrap,
.tob-page-hero__media .img-with-aniamtion-wrap .hover-wrap-inner {
	height: 100%;
}
.row .col .tob-page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-bottom-left-radius: 120px;
	margin: 0;
}
.tob-breadcrumb {
	margin-bottom: 56px;
	font-size: 10px;
	line-height: 20px;
	letter-spacing: 0.05px;
	color: #000000;
}
.tob-breadcrumb a {
	color: inherit;
}
.tob-page-hero__text .wpb_text_column {
	margin-bottom: 0;
}
.tob-page-hero__text .wpb_text_column :is(h1, h2, h3) {
	margin-bottom: 24px;
}
.tob-page-hero__text .wpb_text_column p {
	padding-bottom: 8px;
}
.tob-page-hero__text .nectar-button {
	margin-top: 24px;
}
/* First paragraph in Body/Semi Bold (Figma lead in heroes and splits). */
.wpb_text_column p.tob-text__lead {
	font-weight: 600;
}

/* Statement band (Figma 1162:6250): 5px Warm Neutral Deep bar, 40px gap, H3 statement. */
.tob-statement .wpb_text_column {
	margin-bottom: 0;
	border-left: 5px solid #E3D8C3;
	padding-left: 40px;
}
.tob-statement .tob-text__body {
	padding-bottom: 0;
	font-size: 36px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: 0.18px;
}

/* Section intro body variant (Body/Medium, or Regular), 16px under the H3, 8px between paragraphs. */
.tob-section-intro .tob-text__body {
	margin-top: 16px;
	padding-bottom: 0;
	font-weight: 500;
}
.tob-section-intro .tob-text--regular .tob-text__body {
	font-weight: 400;
}
.tob-section-intro .tob-text__body + .tob-text__body {
	margin-top: 8px;
}
.tob-section-intro .wpb_text_column > .wpb_wrapper > .tob-text__body:first-child {
	margin-top: 0;
}

/* Numbered cards (Figma 1162:6228): Warm Neutral Mid, 32px corners/padding, 382px, bottom-aligned. */
.row_col_wrap_12:has(> .tob-number-card),
.row_col_wrap_12:has(> .tob-link-card) {
	display: flex;
	gap: 63px;
}
.row_col_wrap_12:has(> .tob-number-card)::before,
.row_col_wrap_12:has(> .tob-number-card)::after,
.row_col_wrap_12:has(> .tob-link-card)::before,
.row_col_wrap_12:has(> .tob-link-card)::after {
	display: none;
}
.row_col_wrap_12 > .tob-number-card,
.row_col_wrap_12 > .tob-link-card {
	flex: 1 1 0;
	width: auto;
	float: none;
	margin: 0;
}
.tob-number-card > .vc_column-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 382px;
	padding: 32px !important;
	background-color: #EEE7D9;
	border-radius: 32px;
}
.tob-number-card .wpb_text_column {
	margin-bottom: 0;
}
.tob-number-card .tob-number-card__number {
	padding-bottom: 24px;
	font-size: 64px;
	line-height: 72px;
	font-weight: 700;
}
.row .col .tob-number-card :is(h3, h4) {
	margin: 0 0 24px 0;
	padding: 0;
}
.tob-number-card p:last-child {
	padding-bottom: 0;
}

/* Card icons ([tob_icon], Figma 2026-10-12): 150px box, right-aligned, icon centred at its own size, 24px above the H4. */
.tob-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 150px;
	height: 150px;
	margin: 0 0 24px auto;
}
.row .col .tob-card-icon img {
	display: block;
	max-width: none;
	margin: 0;
}
.tob-card-icon--layered {
	position: relative;
	display: block;
}
.row .col .tob-card-icon--layered img {
	position: absolute;
}
.wpb_text_column p:has(> .tob-card-icon) {
	padding-bottom: 0;
}
/* Our story icon cards: icon + H4 + copy overflow Figma's 382px card by 4px - its content starts 28px down, not 32. */
.tob-number-card--icon > .vc_column-inner {
	padding-top: 28px !important;
}

/* Image link cards (Figma 1162:11492): 382px image, 32px corners, outline button 24px below. */
.row .col .tob-link-card img {
	width: 100%;
	height: 382px;
	object-fit: cover;
	margin: 0;
}
.tob-link-card--contain .img-with-aniamtion-wrap .hover-wrap-inner {
	background-color: #CCCCCC; /* white + 20% black, per Figma */
	border-radius: 32px;
}
.row .col .tob-link-card--contain img {
	object-fit: contain;
}
.tob-link-card .nectar-button {
	margin-top: 24px;
}

/* Our reach variants (Figma 1162:6407). */
.tob-page-hero__media--tint .img-with-aniamtion-wrap .hover-wrap-inner {
	position: relative;
}
.tob-page-hero__media--tint .img-with-aniamtion-wrap .hover-wrap-inner::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.1); /* Figma 10% black over the photo */
	border-bottom-left-radius: 120px;
	pointer-events: none;
}
.tob-section-intro .nectar-button {
	margin-top: 24px;
}
.tob-split-text .tob-text--regular p.tob-text__body {
	font-weight: 400;
}

/* Team profiles (Figma Our team 1162:7336): photo fills the row beside a 576px text column, 96px gap. */
.row_col_wrap_12:has(> .tob-profile__media) {
	display: flex;
	gap: 96px;
}
.row_col_wrap_12:has(> .tob-profile__media)::before,
.row_col_wrap_12:has(> .tob-profile__media)::after {
	display: none;
}
.row_col_wrap_12 > .tob-profile__media {
	flex: 1 1 0;
	width: auto;
	float: none;
	margin: 0;
}
.row_col_wrap_12 > .tob-profile__text {
	flex: 0 0 576px;
	width: 576px;
	float: none;
	margin: 0;
}
.row .col .tob-profile__media img {
	width: 100%;
	height: 385px;
	object-fit: cover;
	margin: 0;
}
/*
Photos keep Figma's 576x385 frame shape at every width (client 2026-10-21: photos distorted on
some screens). The tob-fit-fill files are stretched exports that only look right in that exact
shape, so a fixed height squashed them whenever the column was narrower than 576px.
*/
.row .col .tob-profile__media img:not(.tob-img--frame-anna) {
	height: auto;
	aspect-ratio: 576 / 385;
}
/* No photo supplied: Base/Muted block, per Figma. */
.tob-profile__media--empty > .vc_column-inner {
	height: 385px;
	background-color: #5F7371;
	border-radius: 32px;
}
.tob-profile__text .wpb_text_column {
	margin-bottom: 0;
}
.row .col .tob-profile__text :is(h3, h4) {
	margin: 0;
	padding: 0;
}
.tob-profile__text p.tob-profile__role {
	padding-bottom: 32px;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0.011px;
}
.tob-profile__text p {
	padding-bottom: 8px;
}
.tob-profile__text p:last-child {
	padding-bottom: 0;
}

/* Band paragraph (Figma 1162:7389): Body/Medium, 1160px max. */
.tob-band .wpb_text_column {
	margin-bottom: 0;
}
.tob-band p.tob-text__body {
	max-width: 1160px;
	padding-bottom: 0;
	font-weight: 500;
}

/* Schools program variants (Figma 1162:7394). */
/* Step cards: 4-up 32px apart, 32px corners (image setting). */
.row_col_wrap_12:has(> .tob-card--lg) {
	gap: 32px;
}
/* Fixed 385px photo; the text sits at the top beside it. */
.tob-split-media--fixed > .vc_column-inner {
	min-height: 385px;
}
.tob-split-text--top .wpb_text_column :is(h1, h2, h3) {
	max-width: none;
}
.tob-section-intro .tob-text--gap24 .tob-text__body {
	margin-top: 24px;
}

/* Fresh Food Project variants (Figma 1162:7462). */
/* Numbered cards, top-aligned on Sea Glass Light, equal heights, 32px apart. */
.row_col_wrap_12:has(> .tob-number-card--top) {
	gap: 32px;
}
.tob-number-card--top > .vc_column-inner {
	justify-content: flex-start;
	min-height: 0;
	height: 100%;
	background-color: #DFFBF3;
}
.tob-number-card--top .tob-number-card__number {
	color: #131313;
}
/* Three H4 lines reserved so the body copy lines up across the cards. */
.row .col .tob-number-card--top :is(h3, h4) {
	min-height: 84px;
}
/* Option cards: 3-up 24px apart, 267px photos, UI/Small body. */
.row_col_wrap_12:has(> .tob-card--option) {
	gap: 24px;
}
.tob-card--option .img-with-aniamtion-wrap img {
	height: 267px;
}
.tob-card--option .wpb_text_column p {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0;
}
.tob-card--option .wpb_text_column p + p {
	margin-top: 8px;
}
.tob-split-text strong {
	font-weight: 600;
}
/* Social Traders logo under the certified-enterprise text. */
/* Salient puts el_class on the <img> itself. */
.row .col .tob-split-text img.tob-certified-logo {
	display: block;
	width: 165px;
	height: auto;
	margin: 83px 0 0 0;
}

/* Report sections (Figma Impact Reports 1162:5686 / 1162:5704): H3 then the [tob_reports] block. */
.tob-reports-section .wpb_text_column {
	margin-bottom: 56px;
}
.tob-reports-section--featured .wpb_text_column {
	margin-bottom: 24px;
}
body .tob-reports-section .wpb_text_column :is(h1, h2, h3):last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Research and evaluation (Figma 1162:5846): intro inside a report section (824px = the element's Text max width). */
.tob-reports-section .tob-text__body {
	margin-top: 16px;
	padding-bottom: 0;
}
.tob-reports-section .wpb_text_column :is(h1, h2, h3) {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Corporate partnerships (Figma 1162:10544). */
/* Numbered cards on a 3-column grid (a short last row keeps card widths), colour variants. */
.row_col_wrap_12 > .tob-number-card--grid {
	flex: 0 0 calc((100% - 64px) / 3);
}
.row .col .tob-number-card--grid :is(h3, h4) {
	min-height: 0;
	margin-bottom: 0;
}
.tob-number-card--cream > .vc_column-inner {
	background-color: #FAF6EE;
}
.tob-number-card--harbour > .vc_column-inner {
	background-color: #D0EDFF; /* Fruit Box Tints / Harbour / Mid (Deep #AFE1FF until the Figma update of 2026-10-12) */
}
.tob-card--267 .img-with-aniamtion-wrap img {
	height: 267px;
}
/* Feature cards (Figma 1162:10642, updated 2026-10-12): Harbour Mid, 32px padding/corners, 150px icon then content from the top. */
.row_col_wrap_12:has(> .tob-feature-card) {
	display: flex;
	gap: 32px;
}
.row_col_wrap_12:has(> .tob-feature-card)::before,
.row_col_wrap_12:has(> .tob-feature-card)::after {
	display: none;
}
.row_col_wrap_12 > .tob-feature-card {
	flex: 1 1 0;
	width: auto;
	float: none;
	margin: 0;
}
.tob-feature-card > .vc_column-inner {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	height: 100%;
	padding: 32px !important;
	background-color: #D0EDFF;
	border-radius: 32px;
}
.tob-feature-card > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.tob-feature-card .wpb_text_column {
	align-self: stretch; /* full width so the icon can sit right */
	margin-bottom: 0;
}
.row .col .tob-feature-card :is(h3, h4) {
	margin: 0 0 24px 0;
	padding: 0;
}
.tob-feature-card p {
	padding-bottom: 8px;
}
.tob-feature-card p:last-child {
	padding-bottom: 0;
}
.tob-feature-card strong {
	font-weight: 600;
}
/* Buttons sit at the card bottom so they line up across a row (client 2026-10-16),
   at least 16px under the copy. */
.tob-feature-card > .vc_column-inner > .wpb_wrapper {
	flex: 1 1 auto;
}
.tob-feature-card .wpb_text_column:has(+ .nectar-button) {
	margin-bottom: 16px;
}
.tob-feature-card .nectar-button {
	margin: auto 0 0 0;
}

/* Sponsor a school (Figma 1162:5261). */
/* Lead as its own block: 24px to the paragraphs below. */
.tob-page-hero__text .wpb_text_column p.tob-text__lead--block {
	padding-bottom: 24px;
}
/* Bullet lists in split text columns (Figma: Body 16/22, -0.32 tracking, 24px indent, 8px apart). */
.tob-split-text .wpb_text_column ul {
	margin: 0 0 0 24px;
	padding: 0;
	list-style: disc;
}
.tob-split-text .wpb_text_column ul li {
	margin-bottom: 8px;
	padding: 0;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.32px;
	list-style: disc;
}
.tob-split-text .wpb_text_column ul li:last-child {
	margin-bottom: 0;
}

/* Donate page (Figma 1162:12211, updated 2026-10-12): 562px copy, 96px gap, 548px Warm Cream card, ACNC badge 137px at 587px. */
.row_col_wrap_12:has(> .tob-donate-copy--page) {
	display: flex;
	gap: 96px;
}
/* One row on desktop: the columns shrink below ~1300px instead of wrapping.
   Beats Salient grid-system.css html body .vc_row-fluid > .span_12 (flex-wrap: wrap). */
html body .vc_row-fluid > .row_col_wrap_12:has(> .tob-donate-copy--page) {
	flex-wrap: nowrap;
}
.row_col_wrap_12:has(> .tob-donate-copy--page)::before,
.row_col_wrap_12:has(> .tob-donate-copy--page)::after {
	display: none;
}
.row_col_wrap_12 > .tob-donate-copy--page {
	flex: 0 1 562px; /* Figma widths; shrink below ~1300px instead of stacking */
	min-width: 0;
	width: 562px;
	float: none;
	margin: 0;
}
.row_col_wrap_12 > .tob-donate-form--tint {
	flex: 0 1 548px;
	min-width: 0;
	width: 548px;
	float: none;
	margin: 0;
}
/* Figma spaces the paragraphs with empty lines: 40px apart. */
.tob-donate-copy--page .wpb_text_column p {
	padding-bottom: 40px;
}
.tob-donate-copy--page .wpb_text_column p:last-child {
	padding-bottom: 0;
}
.tob-donate-form--tint > .vc_column-inner {
	background-color: #FAF6EE; /* Base/Warm Cream (Teal/25 #EEFEFD until the Figma update of 2026-10-12) */
}
.row_col_wrap_12 > .tob-donate-copy--page > .vc_column-inner {
	position: relative;
	height: 100%;
}
.tob-donate-copy--page .img-with-aniamtion-wrap:has(.tob-charity-badge) {
	position: absolute;
	top: 587px;
	left: 0;
}

/*
FAQ accordion (Figma 1162:5366) on Salient's Toggles (style minimal):
H4 questions in black, Figma plus / close circle icons (20px), 1px black
divider with 16px either side, answers 32px under the question.
*/
.tob-faq .toggles[data-style="minimal"] .toggle {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #000000;
}
.tob-faq .toggles[data-style="minimal"] .toggle:last-child {
	margin-bottom: 0;
}
.tob-faq .toggles[data-style="minimal"] .toggle > .toggle-title {
	margin: 0;
	padding: 0;
}
body .tob-faq .toggles[data-style="minimal"] .toggle > .toggle-title a {
	padding: 0 36px 0 0;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: 0.011px;
	color: #000000;
}
body .tob-faq .toggles[data-style="minimal"] .toggle > .toggle-title a i {
	top: 4px;
	right: 0;
	left: auto;
	width: 20px;
	height: 20px;
	margin: 0;
	font-size: 0;
	border: 0;
	border-radius: 0;
	background: url(../img/icon-plus-circle.svg) center / 20px 20px no-repeat;
	transform: none;
}
body .tob-faq .toggles[data-style="minimal"] .toggle > .toggle-title a i::before,
body .tob-faq .toggles[data-style="minimal"] .toggle > .toggle-title a i::after {
	display: none;
}
body .tob-faq .toggles[data-style="minimal"] .toggle.open > .toggle-title a i {
	background-image: url(../img/icon-close-circle.svg);
}
.tob-faq .toggles[data-style="minimal"] .toggle .inner-toggle-wrap {
	padding: 32px 0 0 0;
}
.tob-faq .toggles[data-style="minimal"] .toggle .inner-toggle-wrap p {
	padding-bottom: 8px;
}
.tob-faq .toggles[data-style="minimal"] .toggle .inner-toggle-wrap p:last-child {
	padding-bottom: 0;
}
/* Team photos Figma fits to the frame rather than cropping (the Figma image
   files are stretched; fill shows them in proportion, as Figma does). */
.row .col .tob-profile__media img.tob-fit-fill {
	object-fit: fill;
}

/* Our story "Built differently" (Figma 1162:6222, 2026-10-12): heading, icon cards and closing line inset to 1208px at x116. */
.row_col_wrap_12:has(> .tob-inset20) {
	padding-left: 20px;
	padding-right: 20px;
}
.row .col .tob-number-card :is(h3, h4).tob-h4--315 {
	max-width: 315px; /* Figma line breaks */
}
.row .col .tob-number-card :is(h3, h4).tob-h4--279 {
	max-width: 279px;
}
.tob-number-card p.tob-card-copy--432 {
	max-width: 432px;
}
@media only screen and (max-width: 999px) {
	.row_col_wrap_12:has(> .tob-inset20) {
		padding-left: 0;
		padding-right: 0;
	}
}

/* Sponsor a school "Business spotlight" (Figma 1401:1233): the photo is still a grey placeholder in Figma. */
.tob-split-media .wpb_text_column,
.tob-split-media .wpb_text_column > .wpb_wrapper {
	height: 100%;
	margin: 0;
}
.tob-media-placeholder {
	height: 100%;
	min-height: 385px;
	background-color: #C4C4C4;
	border-radius: 32px;
}

/* Schools program "Fresh food is delivered" (Figma 1227:4839, 2026-10-12): the produce photo
   zoomed in - 707x472 at -170/-113 in the 288x216 frame, as percentages of the frame. */
.tob-card .img-with-aniamtion-wrap:has(img.tob-img--zoom-produce) .hover-wrap-inner {
	position: relative;
	height: 216px;
	overflow: hidden;
	border-radius: 32px;
}
.row .col .tob-card img.tob-img--zoom-produce {
	position: absolute;
	top: -52.31%;
	left: -59.03%;
	width: 245.49%;
	max-width: none;
	height: auto;
	object-fit: fill;
}

/* Our team - Anna Savva (Figma 1225:2196, 2026-10-12): square photo at 108.7%, -25/-50 in the 576x385 frame. */
/* Same 576x385 shape as the other photos at every width; the % offsets below scale with it. */
.tob-profile__media .img-with-aniamtion-wrap:has(img.tob-img--frame-anna) .hover-wrap-inner {
	position: relative;
	height: auto;
	aspect-ratio: 576 / 385;
	overflow: hidden;
	border-radius: 32px;
}
.row .col .tob-profile__media img.tob-img--frame-anna {
	position: absolute;
	top: -12.99%;
	left: -4.35%;
	width: 108.7%;
	max-width: none;
	height: auto;
	object-fit: fill;
}

/* Home "When a box becomes a connection" (Figma 1396:1194, 2026-10-12): Warm Cream, inset to x116,
   549px photo (still a grey placeholder in Figma) 96px from the 564px copy; Body/Medium, quote in
   Bold Italic, attribution Italic, outline button 24px below. */
.row_col_wrap_12:has(> .tob-story-media) {
	display: flex;
	gap: 96px;
}
.row_col_wrap_12:has(> .tob-story-media)::before,
.row_col_wrap_12:has(> .tob-story-media)::after {
	display: none;
}
.row_col_wrap_12 > .tob-story-media {
	flex: 0 0 549px;
	width: auto;
	float: none;
	margin: 0;
}
.row_col_wrap_12 > .tob-story-text {
	flex: 1 1 0;
	width: auto;
	float: none;
	margin: 0;
}
.tob-story-media .wpb_text_column,
.tob-story-media .wpb_text_column > .wpb_wrapper {
	height: 100%;
	margin: 0;
}
.tob-story-media .tob-media-placeholder {
	min-height: 442px;
}
.tob-story-text .wpb_text_column {
	margin-bottom: 0;
}
.row .col .tob-story-text :is(h1, h2, h3) {
	max-width: 429px; /* Figma line break */
	margin-bottom: 24px;
	padding-bottom: 0;
}
.tob-story-text p {
	padding-bottom: 8px;
	font-weight: 500;
}
.tob-story-text .tob-story__body p + p {
	padding-top: 24px; /* Figma's empty line before the second paragraph */
}
.row .col.tob-story-text .tob-story__body p:last-child { /* the quote follows: beats Salient .row .col p:last-child */
	padding-bottom: 8px;
}
.tob-story-text p.tob-story__quote {
	font-weight: 700;
	font-style: italic;
}
.tob-story-text p.tob-story__cite {
	padding-bottom: 0;
	font-weight: 400;
	font-style: italic;
}
.tob-story-text .nectar-button {
	margin-top: 24px;
}

/* Home News "View All News & Stories" (Figma 1396:884): UI/Button, Teal/800, 16px chevron 6px after. */
.tob-news-section .wpb_text_column {
	margin-bottom: 0;
}
.tob-more-link {
	margin-top: 14px;
	padding: 0;
}
.tob-more-link a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #006767;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: 0.07px;
}
.row .col .tob-more-link img {
	width: 16px;
	height: 16px;
	margin: 0;
}

/* Home FAQ (Figma 1393:552): list 49px under the H3. */
.row_col_wrap_12 > .tob-faq--home {
	margin-top: 49px;
}

/* Legal pages (Privacy Policy, Terms & Conditions): long-form text set like
   the story body (story.css .tob-story-content): 24px block gap, H4-size
   section headings, indented lists. */
.tob-legal .tob-text {
	margin-bottom: 40px;
}
.tob-legal .wpb_text_column:not(.tob-text) > * {
	margin-top: 0;
	margin-bottom: 24px;
}
.tob-legal .wpb_text_column:not(.tob-text) > *:last-child {
	margin-bottom: 0;
}
.tob-legal .wpb_text_column p {
	padding-bottom: 0;
}
/* Beats the 24px block gap above: 40px before a section, 16px after. */
body .tob-legal .wpb_text_column:not(.tob-text) > :is(h2, h3) {
	margin: 40px 0 16px 0;
	padding: 0;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
	letter-spacing: 0.011px;
}
.tob-legal .wpb_text_column ol,
.tob-legal .wpb_text_column ul {
	margin-left: 24px;
	padding: 0;
}
.tob-legal .wpb_text_column li {
	margin-bottom: 8px;
	padding: 0;
}
.tob-legal .wpb_text_column li > ul {
	margin-top: 8px;
	margin-bottom: 0;
}
.tob-legal .wpb_text_column ul > li {
	list-style: disc outside;
}

/* Home "How The One Box works" - Pathways forward (Figma 1162:11177, new photo 1596:563 2026-10-16):
   the square photo at the frame's full 361px width, top -25px in the 361x216 frame, as percentages of the frame. */
.tob-card .img-with-aniamtion-wrap:has(img.tob-img--frame-pathways) .hover-wrap-inner {
	position: relative;
	height: 216px;
	overflow: hidden;
	border-radius: 16px;
}
.row .col .tob-card img.tob-img--frame-pathways {
	position: absolute;
	top: -11.57%;
	left: 0;
	width: 100%;
	max-width: none;
	height: auto;
	object-fit: fill;
}

/* Home "Everyone can play a part" tiles: Learn more link 16px under the copy (Figma 1396:888), underlined (client 2026-10-15). */
.tob-card .tob-more-link {
	margin-top: 16px;
}
.tob-card .tob-more-link a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Home Donate: ACNC badge 137px at the bottom of the copy column, level with the bottom of the donation card (as on the Donate page). */
.row_col_wrap_12:has(> .tob-donate-copy:not(.tob-donate-copy--page)) {
	display: flex;
}
.row_col_wrap_12:has(> .tob-donate-copy:not(.tob-donate-copy--page))::before,
.row_col_wrap_12:has(> .tob-donate-copy:not(.tob-donate-copy--page))::after {
	display: none;
}
.tob-donate-copy:not(.tob-donate-copy--page) > .vc_column-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.tob-donate-copy:not(.tob-donate-copy--page) > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}
.tob-donate-copy:not(.tob-donate-copy--page) .img-with-aniamtion-wrap:has(.tob-charity-badge) {
	margin-top: auto;
	margin-bottom: 0;
}

/* Corporate partnerships "Your support can help" (client feedback 2026-10-15): all cards in one
   3-column grid, equal widths and heights at every page width. */
/* Beats Salient grid-system.css html body .vc_row-fluid > .span_12 (display: flex). */
html body .vc_row-fluid > .row_col_wrap_12:has(> .tob-number-card--grid) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 32px;
}

/* Home hero tagline (Figma 1586:550, 2026-10-16): Body/Semi Bold 16/24 in Yellow/400,
   12px under the H1, 40px above the multi button. */
.tob-hero .tob-text:has(p) h1 {
	margin-bottom: 12px;
}
.tob-hero .wpb_text_column p {
	margin: 0 0 40px 0;
	padding: 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #FCC551;
}

/* Section intro with a bold lead (Figma Donate 1650:2095/2096): H3 then Heading/H4 22/28 Bold.
   Beats .wpb_text_column p.tob-text__lead (600). */
.tob-section-intro--bold .wpb_text_column p.tob-text__lead--large {
	margin-top: 16px;
	font-size: 22px;
	line-height: 28px;
	font-weight: 700;
}

/* Other ways to give (Figma 1649:1143, 2026-10-16), on the site's own type scale (user: one-off
   sizes in that frame are a design mistake). Panels: 80px rows, 385px photo centred beside the copy. */
.tob-split-media.tob-ow-media > .vc_column-inner > .wpb_wrapper {
	top: 50%;
	bottom: auto;
	height: 385px;
	transform: translateY(-50%);
}
.tob-split-media.tob-ow-media > .vc_column-inner {
	min-height: 385px;
}
.tob-split-text.tob-ow-text .wpb_text_column :is(h1, h2, h3) {
	max-width: none;
}
/* The $600 figure in the site's stat-number style (64/72 Bold). */
.tob-split-text.tob-ow-text p.tob-ow-amount {
	padding-bottom: 24px;
	font-size: 64px;
	line-height: 72px;
	font-weight: 700;
}

/* Home "Everyone can play a part" tiles: Learn more links on one line across the row
   (client 2026-10-16), still 16px under the copy at least. */
.tob-card:has(.tob-more-link-el) > .vc_column-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.tob-card:has(.tob-more-link-el) > .vc_column-inner > .wpb_wrapper {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}
.tob-card .tob-more-link-el {
	margin-top: auto;
}

/* Our story icon cards (Figma 1162:6228/6238): equal heights, content from the top. */
.tob-number-card--icon > .vc_column-inner {
	justify-content: flex-start;
	height: 100%;
}

/* Two buttons side by side in an interior hero (Our story, client 2026-10-16). */
.tob-page-hero__text .nectar-button + .nectar-button {
	margin-left: 12px;
}