.addl_wrapper{
	padding:var(--section-pad) 0;
}
.addl_wrapper + .addl_wrapper{
	padding-top:var(--section-gap);
}
/* Heading-only bands (e.g. "Share Our … Guide") keep the heading but lose the
   full section rhythm. Browsers without :has() keep the normal padding. */
section.addl_wrapper:has(> .addl_container > .sub_hd:only-child){
	padding-top:20px;
	padding-bottom:20px;
}
.inner_banner{
	background-color:var(--secondary-color);
	margin: 150px 0 0;
	padding: 100px 15px;
}
.addl_container{
	max-width:var(--container-max);
	width:100%;
	margin:0 auto;
	padding:0 var(--container-pad);
}
.aic{
	align-items:center;
}
.img_icon{
	max-width:30px;
	height:auto;
	display: inline;
}
.padd_btm{
	padding-bottom:180px !important;
}
.addl_hd {
	font-size:26px;
	margin: 0 0 15px;
	line-height:130%;
	font-family:var(--pop);
	color:var(--main-color);
}
 
.bg_clr{
	background-color:#f5f5f5;
}
.sub_hd {
    font-weight: 600;
    font-size: var(--fs-h2);
    color: #333;
    line-height: var(--lh-heading);
    margin: 0px 0 var(--heading-gap);
}
.sub_hd span{
	color: var(--main-color);
}
.sub_hd1{
	line-height: 130%;
	font-size: 22px;
}
.sub_hd2{
	font-weight: 600;
    font-size: var(--fs-body-sm);
    color: var(--secondary-color);
    line-height: 1.5;
    margin: 0 0 var(--heading-gap);
}
.addl_wrapper p{
	font-size:var(--fs-body);
	line-height: var(--lh-body);
	margin-bottom:var(--paragraph-gap);
	color:#161616;
}
.addl_wrapper ul li{
	position: relative;
}
.addl_wrapper ul li:before {
    position: absolute;
    content: "\e11b";
    font-family: "gnb-font";
    top: 2px;
    left: -30px;
    font-size: 14px;
    color: var(--secondary-color);
}
.addl_wrapper ul.nav li:before{
	content: none;
}
/* Slick's dots are a UL of LIs inside .addl_wrapper, so they inherit the
   content-list tick. The tick is absolutely positioned, so suppressing it
   leaves the dot buttons, their gaps and the slider untouched. */
.hastings_gallery_slider .slick-dots li::before{
    content: none;
    display: none;
}
.img_responsive{
	max-width:100%;
	height:auto;
	width: auto;
}
.list_item{
	margin:0 0 30px;
	list-style: none;
}
.list_item li{
	font-size:16px;
	line-height:160%;
	margin-bottom:10px;
	padding-left:20px;
	position:relative;
}
.list_item li::before{
	content: "\e004";
	font-family: "gnb-font" !important;
	position:absolute;
	font-size:14px;
	left:0 !important;
	color:var(--main-color) !important;
}
.box_cont{
	padding: 30px;
	background-color:var(--secondary-color);
	color:#fff !important;
}
.links{
	font-size:16px;
	color:var(--main-color);
	font-weight:600;
    word-break: break-all;
}
.links:hover{
	color:var(--secondary-color);
}
.two_grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: var(--grid-gap);
}
.head_box{
	text-align:center;
}
.three_grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-gap: var(--grid-gap);
}

::placeholder {
  color: #7b7b7b;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder { /* Edge 12-18 */
  color: #ddd;
}


/*-------accordion--------*/
   .panel-default>.panel-heading p {
   position: absolute;
   left: 0px;
   top: 50%;
   margin: 0;
   color: var(--main-color);
   font-weight: 600;
   font-size: 18px;
   line-height: 0;
   }
   .panel-default>.panel-heading {
   color: #333;
   background-color: #fff;
   border-color: #e4e5e7;
   padding: 0;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   }
   .panel-default>.panel-heading a {
   display: block;
   padding: 35px 15px 35px 40px;
   text-decoration:none;
   position:relative;
   width:98%;
   color: var(--darkgrey-clr);
   font-weight: 600;
   line-height: 150%;
   font-size: 18px
   }
   .panel-body {
   padding: 0px 15px 40px 40px;
   }
   .panel-default>.panel-heading a:after {
   content: "";
   position: absolute;
   top: 37%;
   display: inline-block;
   font-style: normal;
   font-weight: 400;
   font-size: 28px;
   color: var(--main-color);
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   float: right;
   transition: transform .25s linear;
   -webkit-transition: -webkit-transform .25s linear;
   left: 100%;
   }
   .panel-default>.panel-heading a[aria-expanded="true"] {
   }
   .panel-default>.panel-heading a[aria-expanded="true"]:after {
   content: "-";
   -webkit-transform: rotate(180deg);
   transform: rotate(180deg);
   }
   .panel-default>.panel-heading a[aria-expanded="false"]:after {
   content: "+";
   -webkit-transform: rotate(90deg);
   transform: rotate(90deg);
   }
   .panel-body{
   color: var(--darkgrey-clr);
   border: 0 !important;
   }
   .panel-heading{
   position: relative;
   }
   .panel.panel-default {
   border: 0;
   border-top: 1px solid #e3e3e3;
   border-radius: 0px;
   /*padding: 20px 15px 20px 40px;*/
   background: #fff;
   }
   .panel.panel-default:last-child{
   border-bottom: 1px solid #e3e3e3;
   }
   .panel-group .panel+.panel {
   margin-top: 0px; 
   }
   .question_and_answer{
   padding:80px 0;
   background:#edf2f4;
   }
   .panel-title.title{
   padding:50px 0;
   }
   .panel-group {
   margin: 30px 0 0;
   }
   .panel-body p{
	margin: 0;
	color: #777;
   }
   /*-------accordion--------*/




@media(max-width:1300px){
	.boxmodel p {
	    font-size: 20px;
	}
}
@media(max-width:1200px){
	
	.btn_box h3{
		font-size:22px;
	}
	.two_grid {
	    grid-gap: 26px;
	}
}
@media(max-width:1090px){
	.inner_banner {
		margin: 110px 0 0;
	}

}
@media(max-width:992px){
	.inner_banner { 
		margin: 87px 0 0; 
	}
	.btn_box {
	    padding: 60px 30px;
	}
	.btn_box .btn_box_inner a {
	    max-width: 100%;
	}	
	.two_grid {
	    grid-template-columns: 1fr;
	    grid-gap: 16px;
	}

	.about_img{
		min-height:500px;
	}
	.about_item{
		order:1;
	}
	.head_box{
		padding: 0 20px;
	}
}
@media(max-width:768px){
	.btn_grid{
		grid-template-columns: auto;
	}
	.btn_box {
	    padding: 60px 20px;
	}
}
@media (max-width: 680px){	
	
	.sub_hd2{
		font-size: 20px;
	}
	
}
@media (max-width: 576px){
	.addl_wrapper p, .links{
	    font-size: 15px;
	}
	.btn_box {
	    padding: 50px 20px;
	}
	.boxmodel p {
	    font-size: 18px;
	}
	.addl_hd {
	    font-size: 22px;
	}
	.about_img{
		min-height:400px;
	}	
	.sub_hd1 {
	    font-size: 22px;
	}
	.box_cont{
		padding: 20px;
	}
}
@media (max-width: 480px){
	
	.btn_box h3{
		font-size: 20px;
	}
	.addl_hd {
	    font-size: 22px;
	}
	.addl_wrapper table {
	    width: 95%;
	} 
}
@media (max-width: 360px){


	.top_title{
		text-align:center;
	}
}


/*------- Hastings Legal additions -------*/
/* additional_page_style.css starts as a copy of the shared arid stylesheet.
   The rules below are hastings-only: this theme uses a fixed header and a
   1240px content width, so the additional pages are kept in step with it. */

.addl_container{
	max-width:1240px;
}

/*------- Reference typography -------*/
/* Measured off the live site: body copy is 21px Nunito in #303E5A, and the
   section headings are PT Serif at weight 100. The shared arid stylesheet
   below had 16px/#161616, which is why the pages read smaller and darker than
   the reference. */

.addl_wrapper p,
.addl_wrapper li{
	font-size:var(--fs-body);
	line-height:var(--lh-body);
	color:var(--dark-color);
}
.addl_wrapper li{
	margin-bottom:var(--list-gap);
}
.addl_wrapper .sub_hd,
.addl_wrapper .addl_hd{
	font-family:var(--bold);
	font-size:var(--fs-h2);
	line-height:var(--lh-heading);
	font-weight:100;
	color:var(--dark-color);
	margin:0 0 var(--heading-gap);
}
.addl_wrapper .sub_hd2{
	font-family:var(--reg);
	font-size:var(--fs-body-sm);
	font-weight:600;
	color:var(--main-color);
	margin-bottom:var(--heading-gap);
}

/*------- Buttons -------*/
/* The reference's buttons are SQUARE with a 2px white rule, purple ground and
   white text — not the pill the arid stylesheet uses. Scoped to the additional
   pages so the rest of the theme keeps its own button. */
.addl_wrapper .sec_btn,
.hastings_hero .sec_btn,
.hastings_titlebar .sec_btn{
	display:inline-block;
	font-family:var(--reg);
	font-size:var(--fs-button);
	font-weight:300;
	letter-spacing:.2px;
	line-height:1.2;
	padding:15px 22px;
	border-radius:0;
	border:2px solid #fff;
	color:#fff;
	background-color:var(--main-color);
	text-align:center;
	transition:var(--ease);
}
.addl_wrapper .sec_btn:hover,
.hastings_hero .sec_btn:hover{
	background-color:var(--secondary-color);
	color:#fff;
	transform: scale(0.9)
}
/* text links ("Learn More") get the reference's weight, not a button shape */
.addl_wrapper .links{
	font-family:var(--reg);
	font-size:18px;
	font-weight:600;
	color:var(--main-color);
}

/* Own container rather than the theme's div.default_container, which is a
   higher-specificity selector (0,1,1) and would override this margin. */
.hastings_banner{
	width:100%;
	max-width:1240px;
	padding:0 20px;
	margin:128px auto 0;
	box-sizing:border-box;
}
.hastings_banner .banner_like_container{
	padding:52px 36px;
}
.hastings_banner p{
	color:#fff;
	font-size:18px;
	line-height:160%;
	max-width:800px;
	margin:0;
}

.hastings_lede{
	max-width:820px;
	margin:0 auto 45px;
	text-align:center;
}

.hastings_card{
	background:#fff;
	border:1px solid #e6e6e6;
	border-top:3px solid var(--secondary-color);
	padding:var(--card-pad);
	height:100%;
	box-sizing:border-box;
}
.hastings_card h3{
	color:var(--main-color);
	font-size:24px;
	line-height:1.3;
	margin:0 0 8px;
}
.hastings_card .sub_hd2 {
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.hastings_card p{
	font-size:var(--fs-body-sm);
	margin-bottom:0;
}
.hastings_card .links{
	display:inline-block;
	margin-top:12px;
}

.hastings_cta_band{
	background-color:var(--dark-color);
	text-align:center;
}
.hastings_cta_band .sub_hd,
.hastings_cta_band p{
	color:#fff;
}
.hastings_cta_band p{
	max-width:760px;
	margin:0 auto;
}
.hastings_cta_band .sec_btn{
	margin-left:auto;
	margin-right:auto;
}

@media(max-width:1090px){
	.addl_wrapper{
		padding:var(--section-pad) 0;
	}
	.hastings_banner{
		margin-top:110px;
	}
}
@media(max-width:992px){
	.hastings_banner{
		margin-top:87px;
	}
	.hastings_banner .banner_like_container{
		padding:42px 26px;
	}
}
@media(max-width:768px){
	.addl_wrapper{
		padding:var(--section-pad) 0;
	}
	.hastings_banner .banner_like_container{
		padding:32px 20px;
	}
	.hastings_banner p{
		font-size:16px;
	}
	.hastings_card{
		padding:24px 20px;
	}
}

/*------- Hastings Legal: shared page sections -------*/
/* Section skeletons reused across the additional pages. Each block below is a
   pattern that appears on several pages (see the content data in
   reference_folder/hastings_prototype/). Nothing here alters the rules above. */

/*------- Hero: full-bleed media band + navy title bar -------*/
/* This is the reference's own pattern: the video or photograph runs edge to
   edge, an optional button sits over its bottom-left, and the page title is
   white on a navy bar UNDERNEATH the media — not laid over it.
   Measurements taken from the live site: media ~60vh full width; title 38px
   PT Serif weight 100 white on #303E5A; button square, purple, 2px white rule. */

.hastings_hero{
	position:relative;
	width:100%;
	height:72vh;              /* matches the reference's band at desktop */
	min-height:440px;
	max-height:900px;
	overflow:hidden;
	margin-top:100px;          /* clear the theme's fixed header */
	background-color:var(--dark-color);
}
.hastings_hero_media{
	position:absolute;
	inset:0;
}
.hastings_hero_media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}
/* A Vimeo background player has to be oversized then centred: the iframe is a
   fixed 16:9 box and must cover the band whatever its aspect ratio. */
.hastings_hero .hero_video{
	position:absolute;
	top:50%;
	left:50%;
	width:100vw;
	height:56.25vw;
	min-height:100%;
	min-width:177.77vh;
	transform:translate(-50%,-50%);
	pointer-events:none;
}
.hastings_hero .hero_video iframe{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	border:0;
}
.hastings_hero_cta{
	position:absolute;
	left:0;
	right:0;
	bottom:26px;
	z-index:2;
}

/* Navy bar carrying the page title, below the media. */
.hastings_titlebar{
	background-color:var(--dark-color);
}
/* Pages that start with the title bar instead of a hero still need to clear
   the fixed header. The header is 100px tall at every breakpoint (80px logo
   + 10px padding top/bottom), so the offset stays 100px throughout. */
.hastings_titlebar.hastings_titlebar_no_hero{
	margin-top:var(--header-height);
}
.hastings_titlebar h1{
	color:#fff;
	font-family:var(--bold);
	font-weight:100;
	font-size:var(--fs-titlebar);
	line-height:var(--lh-heading);
	margin:0;
	padding:16px 0 18px;
}

/* Intro copy sits in the normal white flow under the bar */
.hastings_intro{
	padding:34px 0 10px;
}

@media(max-width:992px){
	.hastings_hero{
		height:52vh;
		min-height:320px;
		/* margin-top:72px; */
	}
	.hastings_titlebar h1{
		font-size:var(--fs-titlebar);
		padding:14px 0 16px;
	}
	.addl_wrapper .sub_hd,
	.addl_wrapper .addl_hd{
		font-size:var(--fs-h2);
	}
}
@media(max-width:576px){
	.hastings_hero{
		height:44vh;
		min-height:260px;
	}
	.hastings_titlebar h1{
		font-size:var(--fs-titlebar);
	}
	.addl_wrapper .sub_hd,
	.addl_wrapper .addl_hd{
		font-size:var(--fs-h2);
	}
	.addl_wrapper p,
	.addl_wrapper li{
		font-size:var(--fs-body);
	}
}

/* Split-hero feature section.
   Styled to match the home page's own .hastings_split block (theme_style.css
   lines 1429-1457): a two-column band on the dark ground with the image filling
   its column and the copy on white. The reference alternates which side the
   image sits on, so .flip is kept and simply swaps the columns. */
.split_hero{
	display:grid;
	grid-template-columns:1fr 1fr;
	background-color:var(--dark-color);
	color:#fff;
	align-items:stretch;
}
.split_hero + .split_hero{
	margin-top:28px;
}
.split_hero.flip .split_hero_img{
	order:2;
}
.split_hero_img img{
	display:block;
	width:100%;
	height:100%;
	min-height:260px;
	object-fit:cover;
	background:var(--main-color);
}
.split_hero_text{
	padding:32px 30px;
	align-self:center;
}
.split_hero_text .sub_hd{
	color:#fff;
	font-size:32px;
	margin:0 0 12px;
}
.split_hero_text .sub_hd2{
	color:var(--secondary-color);
	font-family:var(--reg);
	font-size:20px;
	font-weight:400;
	margin:0 0 16px;
}
.split_hero_text p{
	color:#fff;
	font-size:var(--fs-body-sm);
	line-height:1.6;
	margin:0 0 16px;
}
.split_hero_text .links{
	display:inline-block;
	padding:14px 22px;
	background-color:var(--main-color);
	color:#fff;
	font-family:var(--reg);
	font-size:var(--fs-button);
	font-weight:300;
	line-height:1.2;
	border:2px solid #fff;
	border-radius:0;
	text-decoration:none;
	transition:var(--ease);
}
.split_hero_text .links:hover{
	background-color:var(--main-color);
	border-color:var(--secondary-color);
	color:#fff;
	transform:scale(0.9);
}

/* The reference opens Professional Marketing in a popup; this theme has no
   Elementor popup JS, so the disclosure is shown inline and its summary takes
   the same button shape as the other split-hero CTAs. */
.split_hero_text .card_more{
	margin:0;
	border:0;
}
.split_hero_text .card_more summary{
	display:inline-block;
	padding:14px 22px;
	background-color:var(--main-color);
	color:#fff;
	font-family:var(--reg);
	font-size:var(--fs-button);
	font-weight:300;
	line-height:1.2;
	border:2px solid #fff;
	border-radius:0;
	list-style:none;
	cursor:pointer;
	transition:var(--ease);
}
.split_hero_text .card_more summary::-webkit-details-marker{
	display:none;
}
.split_hero_text .card_more summary::after{
	content:none;
}
.split_hero_text .card_more summary:hover{
	border-color:var(--secondary-color);
	transform:scale(0.9);
}
.split_hero_text .card_more_body{
	padding:16px 0 0;
}
.split_hero_text .card_more_body p{
	color:#fff;
	font-size:var(--fs-body-sm);
	line-height:1.6;
	margin:0;
}

/* A card that carries a photograph above its text (colleague and office grids) */
.hastings_card.has_img{
	padding:0;
	overflow:hidden;
}
.hastings_card.has_img > img {
    display: block;
    width: 100%;
    height: 360px;
    object-fit: cover;
    object-position: bottom;
}
.hastings_card.has_img .card_body{
	padding:22px 22px;
}

/* Image gallery (area guides, about us) */
.hastings_gallery{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:14px;
	margin:0 0 32px;
}
.hastings_gallery a{
	display:block;
	line-height:0;
}
.hastings_gallery img{
	display:block;
	width:100%;
	height:240px;
	object-fit:cover;
}

/* Profile hero: portrait beside role + biography (employee pages) */
.hastings_profile{
	display:grid;
	grid-template-columns:320px 1fr;
	gap:30px;
	align-items:start;
}
.hastings_profile img{
	display:block;
	width:100%;
	height:auto;
}
.hastings_profile .role{
	font-family:var(--pop);
	font-size:18px;
	font-weight:600;
	color:var(--secondary-color);
	margin:0 0 12px;
}

/* Pull-quote block, optionally with a portrait (employee, area guide) */
.hastings_quote{
	display:grid;
	grid-template-columns:1fr 200px;
	gap:40px;
	align-items:center;
	background-color:#f5f5f5;
	padding:45px 40px;
}
.hastings_quote .quote_text{
	font-size:22px;
	line-height:160%;
	color:var(--main-color);
	font-weight:600;
	margin:0 0 18px;
}
.hastings_quote .quote_by{
	font-size:16px;
	color:#333;
	margin:0;
}
.hastings_quote img{
	display:block;
	width:100%;
	height:auto;
}
.hastings_quote.no_img{
	grid-template-columns:1fr;
	text-align:center;
}

/* Office grid */
.hastings_offices{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
}

/* Article body (guide pages) — Gutenberg headings and lists */
.hastings_body h4,
.hastings_body h5{
	font-family:var(--pop);
	color:var(--main-color);
	line-height:1.3;
	margin:18px 0 8px;
}
.hastings_body h4{font-size:var(--fs-h4);}
.hastings_body h5{font-size:var(--fs-h5);}
.hastings_body ul,
.hastings_body ol{
	margin:0 0 var(--paragraph-gap) 22px;
}
.hastings_body li{
	font-size:var(--fs-body);
	line-height:var(--lh-body);
	color:#161616;
	margin-bottom:var(--list-gap);
}
.hastings_body a{
	color:var(--main-color);
	font-weight:600;
}

/* FAQ accordion — native <details>/<summary>. The theme loads no bootstrap.js,
   so the .panel-* rules above cannot drive a collapse; this needs no JS. */
.hastings_faq{
	margin:0 0 10px;
	border-top:1px solid #e3e3e3;
}
.hastings_faq details{
	border-bottom:1px solid #e3e3e3;
}
.hastings_faq summary{
	display:block;
	position:relative;
	padding:16px 50px 16px 0;
	cursor:pointer;
	font-size:19px;
	font-weight:600;
	line-height:1.5;
	color:var(--darkgrey-clr);
	list-style:none;
}
.hastings_faq summary::-webkit-details-marker{
	display:none;
}
.hastings_faq summary::after{
	content:"+";
	position:absolute;
	right:6px;
	top:50%;
	margin-top:-18px;
	font-size:28px;
	font-weight:400;
	line-height:1;
	color:var(--main-color);
}
.hastings_faq details[open] summary::after{
	content:"\2013";
}
.hastings_faq .faq_answer{
	padding:0 50px 18px 0;
}
.hastings_faq .faq_answer p{
	margin:0 0 8px;
	color:#555;
	font-size:var(--fs-body-sm);
	line-height:1.6;
}

/* Card disclosure. The reference opens this detail in an Elementor modal; the
   target carries no Elementor popup JS, so it is shown inline instead. */
.hastings_card .card_more{
	margin-top:14px;
	border-top:1px solid #ececec;
}
.hastings_card .card_more summary{
	display:block;
	position:relative;
	padding:16px 30px 0 0;
	cursor:pointer;
	font-size:16px;
	font-weight:600;
	color:var(--main-color);
	list-style:none;
}
.hastings_card .card_more summary::-webkit-details-marker{
	display:none;
}
.hastings_card .card_more summary::after{
	content:"+";
	position:absolute;
	right:2px;
	top:14px;
	font-size:20px;
	font-weight:400;
	line-height:1;
	color:var(--main-color);
}
.hastings_card .card_more[open] summary::after{
	content:"\2013";
}
.hastings_card .card_more_body{
	padding:14px 0 0;
}
.hastings_card .card_more_body h4{
	font-size:17px;
	color:var(--main-color);
	margin:0 0 6px;
	line-height:140%;
}
.hastings_card .card_more_body p{
	font-size:15px;
	line-height:160%;
	color:#555;
	margin:0 0 14px;
}
.hastings_card .card_more_body p:last-child{
	margin-bottom:0;
}

/*------- Testimonial -------*/
/* Matches the reference's own block: square portrait bottom-aligned left, the
   quote to its right with an opening quote-mark top-left and a closing one
   bottom-right, and the name + role bottom-right beneath the quote. A 4px
   accent is drawn along the left/top and right/bottom edges. */
.hastings_testimonial{
	display:grid;
	grid-template-columns:200px 1fr;
	gap:0;
	position:relative;
}
.hastings_testimonial .testi_portrait{
	position:relative;
	overflow:hidden;
	border-top:4px solid var(--main-color);
	border-left:4px solid var(--main-color);
	border-bottom:4px solid var(--main-color);
}
/* The photo fills the column's full height; object-fit keeps the face in
   proportion while cropping the excess. */
.hastings_testimonial .testi_portrait img{
	position:absolute;
	inset:0;
	display:block;
	width:100%;
	max-width:200px;
	height:100%;
	object-fit:cover;
	object-position:center top;
}
.hastings_testimonial .testi_body{
	position:relative;
	padding:26px 30px 22px 26px;
	border-top:4px solid var(--main-color);
	border-right:4px solid var(--main-color);
	border-bottom:4px solid var(--main-color);
	display:flex;
	flex-direction:column;
}
.hastings_testimonial .testi_mark{
	color:var(--main-color);
	line-height:0;
}
.hastings_testimonial .testi_mark svg{
	width:30px;
	height:30px;
	fill:var(--main-color);
}
.hastings_testimonial .testi_mark_close{
	align-self:flex-end;
	transform:rotate(180deg);
	margin-top:14px;
}
.hastings_testimonial .testi_quote{
	margin:0;
	padding:8px 0 0;
	border:0;
	font-family:var(--bold);
	font-size:26px;
	line-height:1.4;
	font-weight:400;
	color:var(--dark-color);
}
.hastings_testimonial .testi_who{
	margin-top:auto;
	padding-top:18px;
	text-align:right;
}
.hastings_testimonial .testi_name{
	font-family:var(--reg);
	font-size:22px;
	font-weight:600;
	color:var(--dark-color);
	line-height:1.3;
}
.hastings_testimonial .testi_role{
	font-family:var(--reg);
	font-size:17px;
	color:var(--dark-color);
	line-height:1.5;
}
@media(max-width:767px){
	.hastings_testimonial{
		grid-template-columns:1fr;
	}
	.hastings_testimonial .testi_portrait{
		border-right:4px solid var(--main-color);
	}
	.hastings_testimonial .testi_portrait img{
		position:static;
		width:100%;
		max-width:100%;
		height:auto;
		aspect-ratio:1/1;
		object-fit:cover;
	}
	.hastings_testimonial .testi_quote{
		font-size:21px;
	}
}

/*------- "Why Choose …" icon boxes -------*/
.hastings_icon_boxes{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:26px;
	margin-top:24px;
}
.hastings_icon_boxes .icon_box{
	text-align:left;
}
.hastings_icon_boxes .icon_box_icon svg{
	width:44px;
	height:44px;
	fill:var(--main-color);
	display:block;
	margin-bottom:16px;
}
.hastings_icon_boxes .icon_box h3{
	font-family:var(--reg);
	font-size:24px;
	font-weight:600;
	color:var(--dark-color);
	margin:0 0 8px;
	line-height:1.3;
}
.hastings_icon_boxes .icon_box_rule{
	display:block;
	width:46px;
	height:2px;
	background-color:var(--secondary-color);
	margin-bottom:14px;
}
.hastings_icon_boxes .icon_box p{
	font-size:var(--fs-body-sm);
	line-height:1.6;
	margin:0;
}
@media(max-width:900px){
	.hastings_icon_boxes{
		grid-template-columns:1fr;
		gap:28px;
	}
}

/*------- Guide-teaser grid -------*/
.hastings_teasers .hastings_teaser{
	background:#fff;
	border:1px solid #e6e6e6;
	border-top:3px solid var(--secondary-color);
	padding:var(--card-pad) 22px;
}
.hastings_teasers .hastings_teaser h3{
	font-family:var(--reg);
	font-size:24px;
	line-height:1.3;
	color:var(--dark-color);
	margin:0 0 8px;
}
.hastings_teasers .teaser_rule{
	display:block;
	width:46px;
	height:2px;
	background-color:var(--secondary-color);
	margin-bottom:12px;
}
.hastings_teasers .hastings_teaser p{
	font-size:var(--fs-body-sm);
	line-height:1.6;
	color:var(--dark-color);
	margin:0 0 12px;
}

/* Era / milestone blocks (about us) */
.hastings_timeline .era + .era{
	margin-top:70px;
}

@media(max-width:1090px){
	.hastings_profile{
		grid-template-columns:260px 1fr;
		gap:28px;
	}
	.hastings_offices{
		grid-template-columns:repeat(2,1fr);
	}
}
@media(max-width:992px){
	/* Every card grid stacks to one column at this width, so they share a
	   single gap instead of the three different values they used to carry
	   (.two_grid 10px, .hastings_offices 26px). */
	.two_grid,
	.hastings_offices{
		grid-gap:16px;
	}
	.split_hero{
		grid-template-columns:1fr;
		gap:22px;
	}
	.split_hero + .split_hero{
		margin-top:38px;
	}
	/* the image always leads on small screens, whatever side it sits on */
	.split_hero.flip .split_hero_img{
		order:0;
	}
	.split_hero_img img{
		height:250px;
	}
	.hastings_banner.has_video .banner_like_container{
		min-height:330px;
	}
	.hastings_gallery{
		grid-template-columns:repeat(2,1fr);
	}
	.hastings_profile{
		grid-template-columns:1fr;
	}
	.hastings_profile img{
		max-width:320px;
	}
	.hastings_quote{
		grid-template-columns:1fr;
	}
	.hastings_quote img{
		max-width:200px;
	}
	.hastings_offices{
		grid-template-columns:1fr;
	}
}
@media(max-width:768px){
	.hastings_gallery img{
		height:180px;
	}
	.hastings_card.has_img > img{
		height:200px;
	}
	.hastings_quote{
		padding:32px 24px;
	}
	.hastings_quote .quote_text{
		font-size:19px;
	}
}

/* Section rhythm on phones. This has to come after the 768px block above:
   .addl_wrapper carries a diagonal of padding overrides (base / 1090 / 768 /
   576) and, since they all tie on specificity, the last matching one wins. */
@media(max-width:576px){
	.addl_wrapper{
		padding:var(--section-pad) 0;
	}
}

/*=================================================================
  Round 2 — client review (p1.txt)
  Appended so these rules win over the earlier ones they correct;
  every selector below is new, nothing above is overridden by accident.
=================================================================*/

/*------- Card links become buttons -------*/
/* The reference draws every in-card "Read More"/"Learn More" as the same
   purple button the split heroes use, not as a bare text link. */
.hastings_card .links,
.hastings_teasers .hastings_teaser .links{
	display:inline-block;
	padding:12px 24px;
	background-color:var(--main-color);
	color:#fff;
	font-family:var(--reg);
	font-size:var(--fs-button);
	font-weight:300;
	line-height:1.2;
	border:2px solid #fff;
	border-radius:0;
	text-decoration:none;
	transition:var(--ease);
	margin-top:14px;
}
.hastings_card .links:hover,
.hastings_teasers .hastings_teaser .links:hover{
	background-color:var(--main-color);
	border-color:var(--secondary-color);
	color:#fff;
	transform:scale(0.9);
}
/* The disclosure toggle inside the same cards stays a quiet text affordance. */
.hastings_card .card_more summary{
	color:var(--main-color);
}

/*------- Guide teasers carry the reference's photo -------*/
/* The tile bleeds to the card's border box: the card keeps its 28/26 padding
   for the text, the photo cancels it with a negative margin. */
.hastings_teasers .hastings_teaser {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: self-start;
}
/* The reference lays the guides out three to a row with a 16:9 tile on top. */
.hastings_teasers{
	grid-template-columns:repeat(3,1fr);
}
.hastings_teasers .hastings_teaser img{
	display:block;
	width:calc(100% + 44px);
	aspect-ratio:16/9;
	object-fit:cover;
	margin:calc(var(--card-pad) * -1) -22px 16px;
}

/* Office detail pages carry the office's type, address and phone in the
   titlebar strip under its name. */
.hastings_titlebar .sub_hd2{
	color:#fff;
	margin:8px 0 0;
}
.hastings_titlebar .office_meta{
	color:#fff;
	font-size:17px;
	line-height:170%;
	margin:0;
}
.hastings_titlebar .office_meta i{
	color:var(--secondary-color);
	margin-right:8px;
}
.hastings_titlebar .office_meta a{
	color:#fff;
	text-decoration:underline;
}

/* Office cards link their photo and name to the office page, so the photo is
   now one level deeper than .hastings_card.has_img > img expects. */
.hastings_card.has_img > a{
	display:block;
	line-height:0;
}
.hastings_card.has_img > a > img{
	display:block;
	width:100%;
	height:230px;
	object-fit:cover;
}
@media(max-width:768px){
	.hastings_card.has_img > a > img{
		height:200px;
	}
}

/* A card whose photo sits above the text (area-guides index) uses the same
   bleed as the teasers, so the photo reaches the card's border box. */
.hastings_card.has_top_img{
	overflow:hidden;
}
.hastings_card.has_top_img > img{
	display:block;
	width:calc(100% + 52px);
	height:250px;
	object-fit:cover;
	margin:-28px -26px 20px;
}

/*------- "Why Choose …" runs on the dark ground -------*/
/* Matches the reference, where the icon boxes sit in a coloured band. */
.hastings_why{
	background-color:var(--dark-color);
}
.hastings_why .sub_hd,
.hastings_why .sub_hd2{
	color:#fff;
}
.hastings_why .hastings_icon_boxes .icon_box h3{
	color:#fff;
}
.hastings_why .hastings_icon_boxes .icon_box p{
	color:rgba(255,255,255,.85);
}
/* Icons keep the accent fill the reference's own stylesheet uses. */
.hastings_why .hastings_icon_boxes .icon_box_icon svg{
	fill:var(--secondary-color);
}

/*------- Photo sliders (area guides) -------*/
/* Same list markup as .hastings_gallery, but handed to Slick: the grid is
   dropped so the carousel owns the layout, and the photos are taller. */
.hastings_gallery_slider{
	display:block;
	margin:0 0 32px;
}
.hastings_gallery_slider .slick-slide{
	padding:0 8px;
	box-sizing:border-box;
}
.hastings_gallery_slider .slick-list{
	margin:0 -8px;
}
/* Slides keep the 3:2 of .hastings_gallery img below — the reference shows
   three per view and they all measure 383x257. */
.hastings_gallery_slider img{
	display:block;
	width:100%;
	object-fit:cover;
}
.hastings_gallery_slider .slick-prev,
.hastings_gallery_slider .slick-next{
	z-index:2;
	background: #ffffff8a;
}
.hastings_gallery_slider .slick-prev:before,
.hastings_gallery_slider .slick-next:before{
	top: 5px;
}
/* Pages with only three photos have nothing to scroll: shown as a plain row. */
.hastings_gallery_slider.is_static{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px;
}
@media(max-width:992px){
	.hastings_gallery_slider.is_static{
		grid-template-columns:repeat(2,1fr);
	}
}
@media(max-width:576px){
	.hastings_gallery_slider.is_static{
		grid-template-columns:1fr;
	}
}

/*------- "See what … has to offer" cards (photo + popup) -------*/
.hastings_card.has_bg{
	position:relative;
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	min-height:400px;
	padding:26px;
	background-size:cover;
	background-position:center;
	border-top:3px solid var(--secondary-color);
	overflow:hidden;
	align-items: start;
}
.hastings_card.has_bg::before{
	content:"";
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background:linear-gradient(180deg,rgba(13,20,33,.10) 0%,rgba(13,20,33,.55) 55%,rgba(13,20,33,.85) 100%);
}
.hastings_card.has_bg > *{
	position:relative;
	z-index:1;
}
.hastings_card.has_bg h3{
	color:#fff;
}
.hastings_card.has_bg p{
	color:rgba(255,255,255,.92);
}

/* The popup body itself (Magnific inline). */
.hastings_popup{
	position:relative;
	background:#fff;
	max-width:760px;
	margin:24px auto;
	padding:40px 36px;
	box-sizing:border-box;
}
.hastings_popup h3{
	font-family:var(--bold);
	font-size:26px;
	font-weight:400;
	color:var(--dark-color);
	margin:0 0 18px;
}
.hastings_popup h4{
	font-size:17px;
	color:var(--main-color);
	margin:0 0 6px;
	line-height:140%;
}
.hastings_popup p{
	font-size:16px;
	line-height:165%;
	color:#444;
	margin:0 0 16px;
}
.hastings_popup p:last-child{
	margin-bottom:0;
}
body.mfp-open .mfp-content{
	/* Magnific centres inline content itself; keep it out of the nav's stacking. */
	position:relative;
	z-index:100;
}

/*------- Image gallery grows and opens -------*/
/* The reference uses a 3:2 grid; the fixed 240px row cut the photos off. */
.hastings_gallery img{
	height:auto;
	aspect-ratio:3/2;
}
.hastings_gallery a:hover img{
	opacity:.88;
	transition:var(--ease);
}

/*------- FAQ tabs -------*/
/* The reference groups its answers under Estate Agency / Legal / Lettings tabs;
   Bootstrap's tab plugin (loaded by the header) drives them. */
.hastings_faq_tabs{
	border-bottom:1px solid #e2e2e2;
	margin:0 0 32px;
	padding:0;
}
.hastings_faq_tabs > li{
	margin:0 6px -1px 0;
}
.hastings_faq_tabs > li > a{
	display:block;
	padding:14px 26px;
	border:1px solid #e2e2e2;
	border-bottom:0;
	background:#f6f6f6;
	color:var(--dark-color);
	font-family:var(--reg);
	font-size:18px;
	font-weight:600;
	text-decoration:none;
}
.hastings_faq_tabs > li > a:hover{
	background:#fff;
	color:var(--main-color);
}
.hastings_faq_tabs > li.active > a,
.hastings_faq_tabs > li.active > a:hover,
.hastings_faq_tabs > li.active > a:focus{
	background:var(--main-color);
	border-color:var(--main-color);
	color:#fff;
}
.hastings_faq_panels .faq_group_hd{
	font-family:var(--reg);
	font-size:22px;
	font-weight:600;
	color:var(--dark-color);
	margin:34px 0 6px;
}
.hastings_faq_panels .tab-pane > .faq_group_hd:first-child{
	margin-top:0;
}
.hastings_faq_panels .faq_group_intro{
	font-size:16px;
	line-height:160%;
	color:#555;
	margin:0 0 14px;
}
.hastings_faq_panels .tab-pane[role="tabpanel"]{
	/* bootstrap hides inactive panes; keep the active one visible */
	display:none;
}
.hastings_faq_panels .tab-pane.active{
	display:block;
}

/*------- Colleague carousel (employee pages) -------*/
.hastings_colleagues_carousel{
	display:block;
	margin-top:34px;
}
.hastings_colleagues_carousel .slick-list{
	margin:0 -13px;
}
.hastings_colleagues_carousel .slick-slide{
	padding:0 13px;
	box-sizing:border-box;
	height:auto;
}
.hastings_colleagues_carousel .hastings_card{
	height:100%;
}
.hastings_colleagues_carousel .slick-prev,
.hastings_colleagues_carousel .slick-next{
	z-index:2;
	background: #ffffff8a;
}
.hastings_colleagues_carousel .slick-prev:before,
.hastings_colleagues_carousel .slick-next:before{
	top: 4px;
}

@media(max-width:992px){
	.hastings_card.has_bg{
		min-height:320px;
	}
}
@media(max-width:576px){
	.hastings_popup{
		padding:28px 20px;
	}
}

/*=================================================================
  Round 3 — reference corrections (p1.txt re-check)
=================================================================*/

/*------- Responsive card grids -------*/
/* The reference keeps three-up down to 767px, then stacks. */
@media(max-width:767px){
	.three_grid{
		grid-template-columns:1fr;
		grid-gap:16px;
	}
}
/* Guide teasers: 3-up on desktop, 2-up on small tablets, 1-up on phones. */
@media(max-width:992px){
	.hastings_teasers{
		grid-template-columns:repeat(2,1fr);
	}
}
@media(max-width:767px){
	.hastings_teasers{
		grid-template-columns:1fr;
	}
}
@media(max-width:576px){
	.hastings_card .links,
	.hastings_teasers .hastings_teaser .links,
	.split_hero_text .links,
	.split_hero_text .card_more summary{
		font-size:var(--fs-button);
		padding:12px 20px;
	}
}

/*------- "Other Legal Services" photo cards -------*/
.hastings_legal_grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:22px;
}
.hastings_legal_grid.is_3{
	grid-template-columns:repeat(3,1fr);
}
.hastings_legal_grid .hastings_card.has_bg{
	min-height:310px;
	padding:20px;
}
.hastings_legal_grid .hastings_card.has_bg h3{
	font-size:26px;
	line-height:1.25;
}
.hastings_legal_grid .hastings_card.has_bg p{
	font-size:18px;
	line-height:1.5;
}
.hastings_legal_grid .hastings_card.has_bg .links{
	margin-top:16px;
}
@media(max-width:992px){
	.hastings_legal_grid,
	.hastings_legal_grid.is_3{
		grid-template-columns:repeat(2,1fr);
		grid-gap:16px;
	}
}
@media(max-width:576px){
	.hastings_legal_grid,
	.hastings_legal_grid.is_3{
		grid-template-columns:1fr;
	}
}

/*------- Area guides index intro -------*/
.hastings_intro_media{
	display:grid;
	grid-template-columns:1.45fr 1fr;
	gap:40px;
	align-items:start;
	margin:0 0 40px;
}
.hastings_intro_media .hastings_intro_text .sub_hd{
	margin-top:0;
}
.hastings_intro_media img{
	display:block;
	width:100%;
	height:auto;
	object-fit:cover;
}
@media(max-width:768px){
	.hastings_intro_media{
		grid-template-columns:1fr;
		gap:24px;
	}
}

/*------- Office detail title bar -------*/
/* The reference puts the office name and type on one line with the address
   beneath, and the telephone right-aligned in the same navy band. The base
   .hastings_titlebar rules stay untouched for every non-office page. */
.hastings_titlebar.office_titlebar .addl_container{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:30px;
	padding:15px 0;
}
.hastings_titlebar.office_titlebar .office_name{
	display:flex;
	flex-direction:column;
	gap:8px;
}
.hastings_titlebar.office_titlebar .office_headline{
	display:flex;
	align-items:center;
	gap:9px;
	flex-wrap:wrap;
}
.hastings_titlebar.office_titlebar h1{
	font-family:var(--bold);
	font-weight:400;
	font-size:40px;
	line-height:1.2;
	margin:0;
	padding:0;
}
.hastings_titlebar.office_titlebar .office_name .sub_hd2{
	font-family:var(--reg);
	font-weight:300;
	font-size:20px;
	line-height:1.3;
	color:#fff;
	margin:0;
}
.hastings_titlebar.office_titlebar .office_contact{
	text-align:right;
}
.hastings_titlebar.office_titlebar .office_meta{
	font-family:var(--reg);
	font-weight:300;
	font-size:18px;
	line-height:1.4;
	color:#fff;
	margin:0;
}
.hastings_titlebar.office_titlebar .office_meta + .office_meta{
	margin-top:6px;
}
.hastings_titlebar.office_titlebar .office_meta i{
	display:none;
}
.hastings_titlebar.office_titlebar .office_meta a{
	color:#fff;
	text-decoration:none;
}
@media(max-width:992px){
	.hastings_titlebar.office_titlebar h1{
		font-size:34px;
		line-height:1.2;
	}
}
@media(max-width:767px){
	.hastings_titlebar.office_titlebar .addl_container{
		display:block;
		min-height:160px;
		padding:20px 0 24px;
		box-sizing:border-box;
	}
	.hastings_titlebar.office_titlebar .office_headline{
		gap:6px;
	}
	.hastings_titlebar.office_titlebar h1{
		font-size:30px;
		line-height:1.2;
	}
	.hastings_titlebar.office_titlebar .office_name .sub_hd2{
		font-size:18px;
	}
	.hastings_titlebar.office_titlebar .office_contact{
		text-align:left;
		margin-top:10px;
	}
	.hastings_titlebar.office_titlebar .office_meta{
		font-size:17px;
		line-height:1.5;
	}
	.hastings_titlebar.office_titlebar .office_meta + .office_meta{
		margin-top:2px;
	}
}

/*------- Office cards (Our Offices page) -------*/
/* Same component as the contact page's office grid (contact.php), copied
   verbatim so /page/102-our-offices and /contact render identically. New
   selectors only: nothing here touches .hastings_offices, .two_grid or
   .hastings_card. */
.hastings_contact_cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:22px;
}
.hastings_contact_card{
	background-color:#fff;
	border:1px solid #e6e6e6;
	border-top:3px solid var(--secondary-color);
	overflow:hidden;
	height:100%;
	box-sizing:border-box;
	text-align:center;
	transition:var(--ease);
}
.hastings_contact_card:hover{
	box-shadow:var(--box-shadow);
}
.hastings_contact_card img{
	display:block;
	width:100%;
	height:230px;
	object-fit:cover;
}
.hastings_contact_card .card_body{
	padding:22px 20px;
}
.hastings_contact_card h3{
	margin:0 0 8px;
	color:var(--main-color);
	font-size:24px;
	line-height:1.3;
}
/* Keep last: ties on specificity with the earlier .addl_wrapper p rules
   (lines 67, 318, 376, 651); this one must win. */
.hastings_contact_card p{
	margin:0 0 6px;
	font-size:var(--fs-body-sm);
	line-height:1.6;
	color:#555;
}
.hastings_contact_card .hastings_btn{
	margin-top:12px;
}
@media(max-width:900px){
	.hastings_contact_cards{
		grid-template-columns:1fr 1fr;
		gap:18px;
	}
}
@media(max-width:560px){
	.hastings_contact_cards{
		grid-template-columns:1fr;
	}
	.hastings_contact_card .card_body{
		padding:20px 18px;
	}
}