@charset "UTF-8";
/* L'ETO Group — additions for the Couch templates (home.php, brand.php, page.php).
   Loaded AFTER the site's stylesheet (letogroup-20260403.css), which is left untouched and
   still styles almost everything. This file adds: text styles as classes (so headings can use
   the right tags), the hero, a few section layouts, the header, and a reset for pasted text. */


/* --- 1. Text styles ---------------------------------------------------------------
   The same three looks the stylesheet gives h1, h2 and h3, as classes:
   t_s = small capitals, t_b = body, t_l = large light. */

.t_s						{display: block; font-family: 'Inter', Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; letter-spacing: 2px; color: inherit;
							 font-weight: 400; font-style: normal; text-transform: uppercase; margin: 8.04px 0; padding: 0 0 20px 0;}
.t_b						{font-family: 'Inter', Helvetica, Arial, sans-serif; font-style: normal; font-size: 16px; line-height: 23px; font-weight: 400; letter-spacing: 0; margin: 0; padding: 0; text-transform: none;}
@media (max-width: 800px)	{ .t_b {font-size: 18px;} }
.t_l						{font-family: 'Inter', Helvetica, Arial, sans-serif; font-style: normal; font-size: 36px; line-height: 38px; font-weight: 300; letter-spacing: 2px;
							 text-transform: none; margin: 0; padding: 0;}

/* Editor text: ignore pasted-in fonts, sizes and colours. Bold, italic, underline and links stay. */
.rt *						{font-family: inherit !important; font-size: inherit !important; line-height: inherit !important;
							 letter-spacing: inherit !important; color: inherit !important; background: none !important;}
.rt p, .rt div				{margin: 0; padding: 0;}
.rt p + p					{margin-top: 23px;}


/* --- 2. Hero ------------------------------------------------------------------------ */

.lg_hero					{position: relative; height: 100vh; overflow: hidden; color: #fff;}
.lg_hero__text				{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; text-align: center;}
.lg_hero__text .centre_inner_lead	{width: max-content; max-width: min(900px, 90vw);}
.lg_hero__glow				{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; opacity: 0.8; overflow: hidden;}
.lg_hero__glow .gradient	{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: none;}
.lg_hero__img				{position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.lg_hero__img img			{display: block; width: 100%; height: 100%; object-fit: cover;}
.lg_hero + section			{margin-top: -10px; position: relative; z-index: 3;}


/* --- 3. Sections ------------------------------------------------------------------- */

.lg_dark					{background: #231D1D; color: #fff;}
.lg_story .button_wrap, .lg_panel .button_wrap	{margin-left: auto; margin-right: auto;}
/* the image fills its half at full height on desktop, cropped to fit; natural height on mobile */
@media (min-width: 801px)	{ .lg_story .slide_img_cont50 .imgfill img {display: block; height: 100vh;} }

/* On mobile the story text flows normally, so long text is never clipped */
@media (max-width: 800px) {
	.lg_story .w_h				{height: auto; margin-bottom: 0;}
	.lg_story .slide_copy_r50, .lg_story .slide_copy_l50	{height: auto; min-height: 60vh; display: flex; align-items: center; justify-content: center;}
	.lg_story .sl_cont_container, .lg_story .centre_block	{position: static; width: auto; height: auto;}
	.lg_story .centre_inner		{position: static; transform: none; box-sizing: border-box; width: 100%; max-width: 390px; padding: 75px 30px;}
}

/* Press quotes: centred, and as tall as the longest quote needs */
.lg_quotes					{min-height: 80vh; text-align: center;}
.lg_quotes__box				{display: flex; align-items: center; justify-content: center; min-height: 65vh; box-sizing: border-box; padding: 40px 20px;}
.lg_quotes__in				{width: 100%; max-width: 800px; min-width: 0;}
@media (max-width: 800px)	{ .lg_quotes__in {max-width: 300px;} }
/* Carousel: every quote is as tall as the tallest and has the section's own background,
   so the outgoing quote never shows through the incoming one while they fade */
.lg_quotes .slick-track		{display: flex;}
.lg_quotes .slick-slide		{float: none; height: auto; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; padding: 10px 0;}
.lg_quotes .slick-slide > *	{flex: 0 0 auto;}
.lg_quotes .slide > br		{display: none;}
.lg_quotes .slide blockquote	{margin-bottom: 20px;}
.lg_quotes .slide > div		{margin-top: 0 !important; margin-bottom: 0 !important;}
.lg_quotes .slide > .t_s	{margin-top: 8.04px !important; margin-bottom: 8.04px !important;}
/* the outgoing quote fades out first, then the incoming one fades in: no two quotes at once */
.lg_quotes .slick-slide		{transition: opacity 0.3s ease !important;}
.lg_quotes .slick-initialized .slick-slide:not(.slick-active)	{opacity: 0 !important;}
.lg_quotes .slick-slide.slick-active	{transition: opacity 0.5s ease 0.3s !important;}
.lg_quotes .slide			{background: #fff;}
.lg_quotes.leto_biscuit .slide	{background: #cecbc6;}
.lg_quotes.mid .slide		{background: #49453f;}
.lg_quotes.lg_dark .slide	{background: #231D1D;}

/* Centred text panel */
.lg_panel					{text-align: center; box-sizing: border-box;}
.lg_panel--80				{min-height: 80vh;}
.lg_panel--65				{min-height: 65vh;}
.lg_panel__box				{display: flex; align-items: center; justify-content: center; min-height: 65vh; box-sizing: border-box; padding: 40px 30px;}
.lg_panel--auto .lg_panel__box	{min-height: 0; padding: 75px 30px;}
.lg_panel__in				{max-width: 650px; min-width: min(330px, 100%);}
.lg_panel__in--narrow		{max-width: 460px;}
.lg_panel__small a			{text-decoration: none;}

/* Image inside a coloured panel */
.lg_imgpanel_m				{margin-bottom: -10px; padding-top: 25px; background: #fff;}

/* Half-width tall image */
.lg_half					{display: flex;}
.lg_half--left				{flex-direction: row-reverse;}
.lg_half__spacer			{width: 50%;}
.lg_half__img				{width: 50%; min-width: 0;}
.lg_half .imgfill img		{display: block; width: 100%; height: 100vh; object-fit: cover;}
@media (max-width: 800px) {
	.lg_half				{display: block;}
	.lg_half__img			{width: 100%;}
	.lg_half .imgfill img	{height: auto;}
}

/* Centred tall image(s) */
.lg_gallery .imgfill img	{height: 100vh; max-width: 100%; object-fit: cover;}
@media (max-width: 800px)	{ .lg_gallery .imgfill img {width: 100%; height: auto;} }

/* Two images side by side */
.lg_pair					{display: flex; align-items: flex-start;}
.lg_pair__col				{width: 50%; min-width: 0;}
.lg_pair__col img			{max-width: 100%; height: auto;}
@media (max-width: 800px) {
	.lg_pair				{display: block;}
	.lg_pair__col			{width: 100%;}
}

/* Brand cards and grid */
.lg_card_text				{display: block;}
/* brand grid: one centred row per group; "brands per row" sets the size of that group's tiles */
.lg_grid__row				{display: flex; flex-wrap: wrap; justify-content: center; width: 100%;}
.lg_grid__item				{box-sizing: border-box; width: 25%;}
.lg_grid__row--2 .lg_grid__item	{width: 50%;}
.lg_grid__row--3 .lg_grid__item	{width: 33.33%;}
@media (max-width: 800px)	{ .lg_grid__row .lg_grid__item {width: 100%;} }
a.brand .t_s, a.group .t_s	{margin-top: 8.04px;}

/* Team */
.section_centred.lg_team	{margin-top: -40px; max-width: 85vw; padding-bottom: 140px;}

/* Locations / address */
.lg_loc						{position: relative; text-align: center;}
.lg_loc__map				{position: absolute; top: 0; left: 0; width: 100%; height: 100vh; max-height: 100%; z-index: -1; text-align: center; overflow: hidden;}
.lg_loc__map.d img			{width: 100%; opacity: 0.8;}
.lg_loc__map.m img			{height: 100%; opacity: 0.7;}
.lg_loc__in					{padding: 50px 0;}
.lg_loc--map .lg_loc__in	{padding: 75px 0 100px 0;}
.lg_loc--map .lg_loc__title	{margin-bottom: 48px;}
.lg_loc__list				{max-width: 1200px; margin: auto;}
.lg_locrow					{padding: 0 25px;}
.lg_locrow--next			{padding-top: 60px;}
.lg_loc__text				{padding: 0 25px; margin: 8.04px 0 0 0;}
.lg_loc__link				{padding: 0 25px 20px 25px; margin: 18px 0 8.04px 0;}
.lg_loc__list + .lg_loc__link	{margin-top: 68px;}
@media (max-width: 800px) {
	.lg_loc--map .lg_loc__title	{margin-bottom: 83px;}
	.lg_locrow--next		{padding-top: 40px;}
}

/* Custom code */
.lg_embed					{padding: 0;}
.lg_embed iframe			{max-width: 100%;}


/* --- 4. Header and footer ------------------------------------------------------------ */

.lg_logo					{position: fixed; top: 22px; left: 40%; right: 40%; text-align: center; z-index: 998;}
.lg_logo img, .lg_logo_m img	{width: 98px; height: auto;}
#navbar						{height: 68px; background: #fff; z-index: 988;}
.lg_logo_m					{position: absolute; top: 22px; left: 40%; right: 40%; text-align: center; z-index: 990;}
/* the menu button is only as wide as itself, so it never covers the logo or anything beside it */
nav_mob.lg_nav				{right: auto; width: 70px;}
.lg_nav #menu				{overflow-y: auto; list-style-type: none;}
.lg_footer_logo				{padding: 50px 25px 10px 25px;}
.lg_footer_logo img			{width: 90px; height: auto;}