/* WP added code by Jakob of Txp forums  2025 */
a[aria-current="page"] {
	  font-weight: bold; /* your styling for an active item */ 
	}

/* see screen2march22 css for myveresion which worked ====*/
/*  forum. textpattern. com /viewtopic.php?pid=342987#p342987 */
/*  this supplied by Jakob of Txp forums  march 2026 */
/* use whichever selector combination you prefer */
figure .imgcaption,
figure figcaption {
    font-size: 0.85em; /* Smaller size */
    color: #555;      /* Optional: lighter color for contrast */
    font-style: italic; /* Optional: italic style */
    text-align: left; /* Optional: centered */
    margin-top: 5px;  /* Optional: space above */
}


.small-text {
  font-size: 0.85em;
}

/*  //// WP a=== */


	
/* this only controls the BRANDS FOOTER  ===*/ 
} .brands__title, .style-guide__title {
	/* font-size: 1.125em;  
	line-height: 2.3333333333 */
	font-size: .81em;
	line-height: 1.5
}
.brands__title, .team__title, .team__social {
	margin-bottom: 3rem /* add space below Quote */
}



i, em, .btn__note, .site-cta span, .entry__content em, .entry__content i, .brands__title, .intro__team__title, .portfolio__nav__main-title, .portfolio__nav__role, .team__title, .jobs {
	font-family: "Neuton",Palatino,"Times New Roman",Times,serif;
	font-style: italic;
	font-weight: 400
}

html, .brands, .brand__title, .cta, .intro, .team, .endorsements, .jobs {
	/* background-color: #2d3138 */ /* background of container for brands */ 
	/* background-color: #ababab */
	  background-color: #f3f4f4 
}


/* background of SQAURE for brands */
.brand {
	 /* background-color: #22262c  */
	  background-color: #d8d8d8 /* #e2e2e2 #e0e0e0 */
}



.intro__work__img {
	background-color: #393e47
}

/* this is in both here and screen 3 ===== */
blockquote, .field__feedback, .page-header__subtitle, .notebook__jobs__item span, .notebook__item__more, .brands__title, .intro__title, .portfolio__nav__main-title, .team__title, .endorsement p {
	/* color: #ad823e */
	color: #555  
}

/* 
input[type=text], input[type=password], input[type=email], input[type=url], input[type=number], input[type=datetime], input[type=date], input[type=tel], input[type=month], input[type=week], input[type=search], textarea, select, .field__select, .dragdealer .handle, .site-header, .notebook__item, .entry__content img, .portfolio__section--white, .portfolio__nav, .referral {
	background-color: #fff
}. */

.page-header--portfolio .page-header__title, .page-header--portfolio .referrals-footer__title, .brand__title, .cta__teaser, .intro__work__title, .intro__team__name, .portfolio__meta em, .team__name {
	/* color: #f9f9f9 */ 
	color: #442a0a /* hover colour of brand title   */
}

	
	@media (min-width: 48.0625em) {
	.image__meta {
		position: absolute;
		right: 0;
		top: 0;
		width: 18.75%
	}
}@media (min-width: 48.0625em) {
	.image__meta__container {
		margin-left: 2rem
	}
}.brands {
	padding: 3rem 0 1.5rem;
	text-align: center
}

.brands__list {
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -1.75rem
}
	
	@media (min-width: 56.25em) {
	.brands__list {
		-webkit-flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap
	}
}.brands__item {
	-webkit-flex: 1 0 33.333333%;
	-moz-box-flex: 1;
	-ms-flex: 1 0 33.333333%;
	flex: 1 0 33.333333%;
	padding-left: 1.75rem;
	padding-bottom: 1.75rem
}
	
	@media (min-width: 30.0625em) {
	.brands__item {
		-webkit-flex: 1 0 16.666666667%;
		-moz-box-flex: 1;
		-ms-flex: 1 0 16.666666667%;
		flex: 1 0 16.666666667%
	}
}@media (min-width: 56.25em) {
	.brands__item {
		-webkit-flex: 1;
		-moz-box-flex: 1;
		-ms-flex: 1;
		flex: 1
	}
}.brand {
	border-radius: 4px;
	height: 0px;
	padding-top: 100%;
	position: relative;
	-webkit-transition: background-color .2s ease-in-out;
	transition: background-color .2s ease-in-out;
	width: 100%
}

.brand:hover {
	background: #393e47
	
}

.brand:hover .brand__title {
	opacity: 1;
	-webkit-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	z-index: 5
}

.brand__title {
	font-size: small; /*  make hover  title  smaller */	
	border: 1px solid #3f434b; /* hover outline of title */
	border-radius: 2px;
	bottom: 100%;
	left: 50%;
	margin-bottom: 0.75rem;
	opacity: 0;
	padding: 0.25rem 1.5rem;
	position: absolute;
	-webkit-transform: translate(-50%, -100%);
	-ms-transform: translate(-50%, -100%);
	transform: translate(-50%, -100%);
	-webkit-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
	white-space: nowrap;
	z-index: -1
}

.brand__title:before, .brand__title:after {
	height: 0;
	width: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 6px;
	border-top-color: #2d3138;
	content: " ";
	pointer-events: none;
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px
}

.brand__title:before {
	height: 0;
	width: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 7px;
	border-top-color: #3f434b;
	margin-top: 0.5px;
	margin-left: -7px
}

.brand__img {
	left: 50%;
	position: absolute;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 60%
}

/* ---- FOR COPY LEFT -----*/
.copy-left { display: inline-block; text-align: right; margin: 0px; -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: “FlipH”; }
/* ---- FOR COPY LEFT -----*/
	
	
/* ---- FOR CONTACT FORM    -----*/
/*  from jakob on textpattern ----*/
	input,
	button,
	select,
	textarea {
	  font: inherit;
	}
	
	.comConnectForm fieldset {
	  display: grid;
	  gap: 1rem;
	  margin-block: 2rem;
	  padding: 0;
	  border: none;
	}
	
	.comConnectForm legend {
	  font-weight: bold;
	  margin-block-end: 1rem;
	}
	
	.form-group {
	  display: grid;
	  gap: var(--com-label-offset);
	}
	
	label:not(.comCheckbox) {
	  font-size: var(--com-label-font-size);
	  font-weight: var(--com-label-clr-font-weight);
	  color: var(--com-label-clr-text);
	
	  text-box-trim: trim-both;
	  text-box-edge: cap alphabetic;
	}
	
	input:is(.comText, .comEmail),
	textarea.comTextarea {
	  width: 100%;
	  padding: var(--com-formfield-padding);
	  background: var(--com-formfield-clr-bg);
	  color: var(--com-formfield-clr-text);
	  border: var(--com-formfield-border);
	  border-radius: var(--com-formfield-border-radius);
	}
	
	input:is(.comText, .comEmail):focus,
	textarea.comTextarea:focus {
	  border: var(--com-formfield-border-active);
	}
	
	.form-group:has(.comCheckbox) {
	  display: flex;
	  gap: 1ch;
	  align-items: center;
	}
	
	.comCheckbox {
	  font-size: 0.925rem;
	}
	
	.comSubmit {
	  cursor: pointer;
	  background-color: var(--com-button-clr-bg);
	  color: var(--com-button-clr-text);
	  padding: .375rem 1.5rem;
	  height: unset;
	  border: 0;
	  border-radius: var(--com-formfield-border-radius);
	  justify-self: start;
	}
	
	.comSubmit:hover,
	.comSubmit:focus-visible {
		background-color: var(--com-button-clr-active);
	}
	
	
	/* form styling */
	:root {
	  /* Adjust your CSS variables here */
	
	  /* form field */
	  --com-formfield-clr-bg: #f6f6f6;
	  --com-formfield-clr-text: #222;
	  --com-formfield-padding: 1rem .75rem;
	  --com-formfield-border: 1.5px solid #ccc;
	  --com-formfield-border-active: 1.5px solid #468adc;
	  --com-formfield-border-radius: .25em;
	
	  /* label */
	  --com-label-clr-text: #000;
	  --com-label-clr-font-weight: bold;
	  --com-label-clr-required: red;  
	  --com-label-font-size: .875rem;
	  --com-label-offset: .5rem;
	
	  /* button */
	  --com-button-clr-bg: #34bf49; /* #468adc;*/
	  --com-button-clr-text: #fff;
	  --com-button-clr-active: #089b08; /*  #0B6adc;*/
	}
	
	
	/* try to style ERROR ==== WP march 27 ==*/
	
	.my-error-message {
		color: #ff0000; /* Red text for errors */
		font-weight: bold;
		padding: 10px;
		border: 1px solid #ff0000;
		background-color: #ffe5e5;
		margin-bottom: 15px; /* Space between the message and the form */
	}
	
	.req-field {
		color: #darkorange;
		font-style: italic;
	}