div.pp_woocommerce div.ppt {
 display: none !important;
}

.woocommerce .button, .woocommerce .button.checkout {
    background-image: -webkit-linear-gradient(top, rgb(81, 185, 18) 0%, red 0%) !important;
}
.woocommerce-page .woocommerce-message {
    border-top: 5px solid #101666;
}
.woocommerce #content div.product .woocommerce-tabs ul.tabs li:hover a, .woocommerce #content div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce div.product .woocommerce-tabs ul.tabs li:hover a, .woocommerce div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li:hover a, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs li.active a, .woocommerce-page div.product .woocommerce-tabs ul.tabs li:hover a, .woocommerce-page div.product .woocommerce-tabs ul.tabs li.active a {
    /* background-color: #101666; */
    background-color: #333f48;
    color: #fff;
}
.woocommerce ul.products li.product a, .woocommerce ul.products li.product .price {
    color: #FFF;
}

body {
    font-family: Quattrocento !important;
    font-weight: normal;
}
h1,h2,h3,h4,h5,h6 {
    font-family: Quattrocento !important;
    font-weight: bold;
}

.click_more_each_categories {
	display: none!important;
}
.woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button, .woocommerce #content input.button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce-page #content input.button.alt, .woocommerce-page #respond input#submit.alt, .woocommerce-page a.button.alt, .woocommerce-page button.button.alt, .woocommerce-page input.button.alt {
    text-transform: none;
}

woocommerce .related h2, .woocommerce-page .related h2, .woocommerce .upsells h2, .woocommerce-page .upsells h2 {
    font-size: 1.8em;
    font-family: 'Quattrocento', sans-serif;
    font-weight: bold;
    letter-spacing: -0.007em;
}

.product .count {
  background-color:  #fff !important;
}
.woocommerce .widget_layered_nav ul li.chosen a:before, .woocommerce .widget_layered_nav_filters ul li a:before {
     color: #fff;
}
.widgettitle:before {
    content: none;
}
.woocommerce .widget_layered_nav ul.yith-wcan-label li a:hover, .woocommerce-page .widget_layered_nav ul.yith-wcan-label li a:hover, .woocommerce .widget_layered_nav ul.yith-wcan-label li.chosen a, .woocommerce-page .widget_layered_nav ul.yith-wcan-label li.chosen a {
    color: #fff !important;
    background-color: #101666;
   }
.widget li {
    margin: 0;
    padding-top: 0.2em;
    padding-right: 0px;
    padding-bottom: 0.2em;
    padding-left: 0px;
    list-style: none;
    clear: both;
}
.four-grid {
  max-width: 24% !important;
float: left !important;
margin-right: 1% !important;
min-height: 200px !important;
font-size: 0.8em !important;
}
.four-grid h5 {
   margin-bottom: 0.2em !important;
}
.four-grid a {
   color: #101666 !important;
}
@media screen and (max-width: 600px){
.search-filter-results .four-grid{
max-width: 100% !important;
float: none !important;
margin-left: 25% !important;
}
}
@media screen and (max-width: 1024px){
.search-filter-results .four-grid a {
    font-size: 13px !important;
}}
@media (max-width: 800px) {
#themify_builder_content-67843 .themify_builder_row {
    padding-top: 26%;
}}
@media (max-width: 800px) {
.woocommerce-page #body {
    padding-top: 20%;
}}
.single-product #sidebar{
display: none;
}
.single-product #content{
width: 100%;
}
.category-title-overlay {
    background-color: #101666;
    opacity: 0.7;
}
.page-category-title-wrap {
padding-top: 2%;
    padding-right: 5%;
    padding-bottom: 2%;
    padding-left: 5%;
}

#content {
    display: flex !important;
    flex-direction: column !important;
}
.woocommerce ul.products {
    order: 1 !important;
}
.term-description {
    order: 2 !important;
}
#main-nav {
    padding-top: 0px !important;
}
#main-nav {
    margin-top: -25px;
 }
#site-logo {
    margin-top: 0.1em !important;
    margin-bottom: 0.1em !important;
}
#pagewrap {
padding-top: 100px !important;
}

.single-product .related.products{
  clear:both;
}

.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
	float:none;
	width:100%;
}
/* HPD Cost Widget – boxed background highlight */
.hpd-cost-widget {
  --bg:#fff8ec;        /* background colour – change to taste */
  --border:#ffe2b8;    /* border colour */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}

/* Optional: tighten spacing a touch inside the box on small screens */
@media (max-width: 640px) {
  .hpd-cost-widget { padding: 14px 14px; }
}

/* Optional: add a subtle header bar */
.hpd-cost-widget .hpd-summary h3 {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.08); /* light blue tint */
  margin: .25rem 0 .5rem 0;
}
.woocommerce div.product form.cart {
    margin-bottom: 0.5em;
}
main.checkoutwc input[type=checkbox] {
display: inline-block !important;
}
/* Even, fluid side gutters for full-width band sections */
.wp-block-group.alignfull {
  padding-left: clamp(1.5rem, 5vw, 5rem);
  padding-right: clamp(1.5rem, 5vw, 5rem);
}
/* Guidance & Resource cards */
.hpd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:1.25rem;}
.hpd-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #e7e7e1;border-radius:12px;padding:22px;text-decoration:none;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;}
.hpd-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:#f7931e;transform:scaleX(0);transform-origin:left;transition:transform .25s ease;}
.hpd-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(51,63,72,.10);border-color:#dcdcd4;}
.hpd-card:hover::before{transform:scaleX(1);}
.hpd-card__icon{width:46px;height:46px;border-radius:10px;background:#fdecd6;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.hpd-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#f7931e;margin-bottom:6px;}
.hpd-card__title{font-size:16px;font-weight:600;line-height:1.35;color:#333f48;}
.hpd-card__desc{font-size:13.5px;line-height:1.55;color:#4d4d4d;margin-top:6px;}
.hpd-arrow{margin-top:auto;padding-top:14px;display:inline-flex;color:#333f48;transition:color .18s ease;}
.hpd-arrow svg{transition:transform .18s ease;}
.hpd-card:hover .hpd-arrow{color:#f7931e;}
.hpd-card:hover .hpd-arrow svg{transform:translateX(4px);}
._df_thumb {
    width: 600px;
}
/* ==========================================================================
   HOUSEPLANSDIRECT — SERVICES PAGE CSS
   Paste this ENTIRE file into Appearance > Customize > Additional CSS
   (or a custom-CSS/code-snippet plugin), then click Publish/Save.
   ========================================================================== */

/* Brand colour classes — skip any your theme.json already defines */
.has-hpd-slate-color { color: #333f48; }
.has-hpd-grey-color { color: #4d4d4d; }
.has-hpd-orange-background-color { background-color: #f7931e; }
.has-hpd-offwhite-background-color { background-color: #f7f5f2; }
.has-hpd-slate-background-color { background-color: #333f48; }

/* Eyebrow label above the H1 */
.hpd-eyebrow {
	color: #f7931e;
	font-weight: 700;
	letter-spacing: 0.12em;
	font-size: 0.8rem;
	margin-bottom: 8px;
}

/* Decorative shape behind the hero image */
.hpd-hero-image-wrap {
	position: relative;
}
.hpd-hero-image-wrap::before {
	content: "";
	position: absolute;
	top: -16px;
	right: -16px;
	width: 90%;
	height: 90%;
	background: #f7931e;
	opacity: 0.15;
	border-radius: 10px;
	z-index: 0;
}
.hpd-hero-image {
	position: relative;
	z-index: 1;
	margin: 0;
}
.hpd-hero-image img {
	width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
}

/* Service card grid */
.hpd-card-body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.hpd-card-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f7931e;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	margin-bottom: 10px;
}
.hpd-card-list { margin-bottom: 14px; }
.hpd-card-body .wp-block-buttons { margin-top: auto; padding-top: 8px; }

/* Signpost pills */
.hpd-signpost-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1100px;
	margin: 0 auto;
}
.hpd-signpost-item {
	border-radius: 8px;
	padding: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 130px;
}
.hpd-pill-orange { background: #fdece0 !important; }
.hpd-pill-slate { background: #e7eaec !important; }
.hpd-signpost-q {
	color: #333f48;
	font-weight: 600;
	font-size: 1.05rem;
	margin-bottom: 14px;
}
.hpd-pill-btn .wp-block-button__link {
	background: #333f48 !important;
	color: #fff !important;
	border-radius: 4px;
	font-size: 0.9rem;
}

/* Closing CTA */
.hpd-cta-copy { opacity: 0.9; }
.hpd-btn-outline-white .wp-block-button__link {
	color: #fff !important;
	border-color: #fff !important;
}

/* Mobile */
@media (max-width: 782px) {
	.hpd-signpost-grid {
	grid-template-columns: 1fr;
}
	.hpd-hero-columns {
		flex-direction: column;
	}
	.hpd-hero-columns .wp-block-column {
		flex-basis: 100% !important;
	}
	.hpd-hero-image-wrap::before {
		display: none;
	}
	.wp-block-buttons .wp-block-button__link {
		width: 100%;
		text-align: center;
		padding-top: 14px;
		padding-bottom: 14px;
	}
}
.hpd-signpost-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.hpd-services-grid {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 28px;
	max-width: 1140px;
	margin: 0 auto;
}
.hpd-services-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}
.hpd-service-card {
	flex: 0 1 calc(33.333% - 19px);
	max-width: calc(33.333% - 19px);
	background: #fff;
	border: 1px solid #ece8e2;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.hpd-card-image {
	height: 260px !important;
	overflow: hidden !important;
	margin: 0 !important;
}
.hpd-card-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}
.hpd-build-cost-layout {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(500px, 1.3fr);
    gap: 36px;
    align-items: stretch;
    max-width: 1200px;
    margin: 0 auto;
}

.hpd-build-cost-intro {
    padding: 30px;
    background: #F7F5F1;
    border-left: 4px solid #F7931E;
    color: #4D4D4D;
}

.hpd-build-cost-intro h2 {
    margin-top: 0;
    color: #333F48;
}

.hpd-build-cost-intro ol {
    padding-left: 22px;
}

.hpd-build-cost-note {
    margin-top: 24px;
    font-size: 0.9em;
}

@media (max-width: 900px) {
    .hpd-build-cost-layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .hpd-build-cost-intro {
        padding: 22px;
    }
}
.hpd-build-cost-calculator button,
.hpd-build-cost-calculator input[type="submit"] {
    background: #F7931E;
    border-color: #F7931E;
    color: #FFFFFF;
}

.hpd-build-cost-calculator button:hover,
.hpd-build-cost-calculator input[type="submit"]:hover {
    background: #333F48;
    border-color: #333F48;
}
.hpd-build-cost-signpost {
    margin-top: 14px;
}

.hpd-build-cost-signpost a {
    color: #F7931E;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hpd-build-cost-signpost a:hover {
    color: #333F48;
}
.single-product .hpd-house-design-only {
    display: none !important;
}

.single-product.hpd-house-design-product
.hpd-house-design-only {
    display: block !important;
}
/* ============================================================
   Hero search panel — colour & life
   Add the class  hpd-herosearch  to the search COLUMN,
   and  hpd-herosearch__title  to the heading above the form.
   Paste this into Appearance > Customize > Additional CSS.
   Styles only this panel; nothing else on the site is touched.
   ============================================================ */

.hpd-herosearch{
  --hpd-orange:#f7931e;
  --hpd-slate:#333f48;

  max-width:520px;              /* keeps it compact … */
  margin:0 auto 0 0;            /* … and pinned to the LEFT of its column on desktop */
  background:#ffffff;
  border:1px solid #e7e7e1;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(51,63,72,.08);
  padding:22px 22px 24px;
  box-sizing:border-box;
}

/* heading (native Heading block with class hpd-herosearch__title) */
.hpd-herosearch__title{
  font-size:1.15rem !important;
  line-height:1.25;
  color:var(--hpd-slate) !important;
  margin:0 0 18px !important;
  position:relative;
  padding-bottom:12px;
}
.hpd-herosearch__title::after{
  content:""; position:absolute; left:0; bottom:0;
  width:40px; height:3px; background:var(--hpd-orange); border-radius:2px;
}

/* two groups side by side: Bedrooms | Type */
.hpd-herosearch .formGrid{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
}
@media (max-width:460px){
  .hpd-herosearch .formGrid{ grid-template-columns:1fr; }
}

/* reset the default fieldset chrome (no border here) */
.hpd-herosearch fieldset{
  border:0; margin:0; padding:0; min-width:0;
}

/* group titles (Bedrooms / Type) — sentence case, left-aligned, with the orange rule */
.hpd-herosearch .formGrid legend{
  display:block !important; width:100% !important; box-sizing:border-box;
  text-align:left;
  font-size:1rem; font-weight:600; letter-spacing:0; text-transform:none;
  color:var(--hpd-slate);
  margin:0 0 14px; padding:0 0 10px;
  border-bottom:3px solid #f7931e !important;
}

/* each option becomes a soft, tappable pill */
.hpd-herosearch fieldset > div{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; margin-bottom:8px;
  border:1px solid #e2e2dc; border-radius:8px; background:#fff;
  transition:border-color .15s ease, background-color .15s ease;
}
.hpd-herosearch fieldset > div:hover{ border-color:#cfd3d2; background:#faf9f6; }

/* highlight the whole pill when its box is ticked (modern browsers) */
.hpd-herosearch fieldset > div:has(input:checked){
  border-color:var(--hpd-orange); background:#fff7ef;
}

.hpd-herosearch label{
  flex:1; cursor:pointer; text-align:left;      /* keep option text hard-left in both columns */
  font-size:.9rem; color:var(--hpd-slate); line-height:1.2;
}
.hpd-herosearch input[type="checkbox"]{
  order:-1;                     /* box sits on the left of the label */
  width:17px; height:17px; margin:0;
  accent-color:var(--hpd-orange);   /* orange tick when selected */
  cursor:pointer; flex:0 0 auto;
}

/* submit button — set its COLOUR to slate in the block settings;
   this handles size, shape and hover. */
.hpd-herosearch .hero-search-section-wrapper button,
.hpd-herosearch button[type="submit"]{
  width:100%; margin-top:6px; padding:13px 20px;
  border:0; border-radius:6px;
  font-size:.95rem; font-weight:600; cursor:pointer;
  transition:filter .15s ease;
}
.hpd-herosearch .hero-search-section-wrapper button:hover,
.hpd-herosearch button[type="submit"]:hover{
  filter:brightness(0.92);      /* gentle darken, works whatever colour you set */
}
.hpd-herosearch label{
  flex:1; cursor:pointer; text-align:left;
  font-size:clamp(.82rem, 2.4vw, .9rem);   /* was .9rem */
  color:var(--hpd-slate); line-height:1.2;
  white-space:nowrap;
}
}
.hpd-heroblurb{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-left:clamp(1rem, 3vw, 2.5rem);
}
.hpd-heroblurb p{
  color:#4d4d4d; line-height:1.7; font-size:1.02rem;   /* calmer, more readable */
}
.hpd-heroblurb a{
  color:#333f48; text-decoration:none;
  border-bottom:1px solid rgba(247,147,30,.45);   /* subtle orange underline */
  transition:border-color .15s ease, color .15s ease;
}
.hpd-heroblurb a:hover{
  color:#f7931e; border-bottom-color:#f7931e;
}
.hpd-herosearch__title{ margin-bottom:4px !important; }
.hpd-herosearch .hero-search-section{ margin-top:0; }
.hpd-herosearch .formGrid{ margin-top:0; padding-top:0; }
.hpd-herosearch .hero-search-section-wrapper{ padding-top:0; margin-top:0; }
.hpd-svc__btn{ box-sizing:border-box; max-width:100%; }
[class*="hpd-"] a[class*="__btn"],
[class*="hpd-"] button{ box-sizing:border-box; max-width:100%; }
/* ============================================================
   Developer & Landowner services page — shared stylesheet
   One file styles every section on the page.
   Paste into Appearance > Customize > Additional CSS.
   All classes are prefixed hpd-dev- so nothing else is touched.
   Remember: after saving, purge WP Rocket (Clear + preload / Remove
   Unused CSS) then hard-reload, or you'll see a stale version.
   ============================================================ */

/* ---- Band: full-bleed coloured strip with a guttered inner ---- */
.hpd-dev-band{
  --hpd-orange:#f7931e;
  --hpd-slate:#333f48;
  --hpd-grey:#4d4d4d;
  --hpd-content:1160px;              /* set to your site's content width */

  width:100vw; margin-left:calc(50% - 50vw);
  padding-block:clamp(2.5rem, 6vw, 4.5rem);
  background:#ffffff;
}
.hpd-dev-band--tint{ background:#faf9f6; }
.hpd-dev-band--tint2{ background:#f7f5f1; }

.hpd-dev-inner{
  max-width:var(--hpd-content);
  margin-left:auto; margin-right:auto;
  padding-left:clamp(1.5rem, 5vw, 5rem);
  padding-right:clamp(1.5rem, 5vw, 5rem);
  box-sizing:border-box;
}

/* ---- Section headings ---- */
.hpd-dev-eyebrow{
  display:block; font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--hpd-orange); margin:0 0 8px;
}
.hpd-dev-title{
  font-size:clamp(1.4rem, 2.6vw, 1.9rem); line-height:1.2;
  color:var(--hpd-slate); margin:0 0 .6rem;
}
.hpd-dev-intro{
  max-width:720px; font-size:1rem; line-height:1.65; color:var(--hpd-grey); margin:0;
}
.hpd-dev-intro + .hpd-dev-intro{ margin-top:1rem; }

/* ---- Card grid ---- */
.hpd-dev-grid{
  list-style:none; margin:1.75rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px;
}
.hpd-dev-grid--wide{ grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }

/* explicit four-up grid: 4 → 2 → 1 (no orphan card) */
.hpd-dev-grid--4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:900px){ .hpd-dev-grid--4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .hpd-dev-grid--4{ grid-template-columns:1fr; } }

/* centred flexible grid for odd counts (e.g. 5 scenario cards): last row centres */
.hpd-dev-flexgrid{ list-style:none; margin:1.75rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center; }
.hpd-dev-flexgrid > li{ flex:1 1 300px; max-width:360px; }

/* ---- Card ---- */
.hpd-dev-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid #e7e7e1; border-radius:12px;
  padding:24px 22px; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hpd-dev-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:2;
  background:var(--hpd-orange); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
.hpd-dev-card:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(51,63,72,.10); border-color:#dcdcd4; }
.hpd-dev-card:hover::before{ transform:scaleX(1); }

.hpd-dev-ico{
  width:46px; height:46px; border-radius:10px; background:#fdecd6;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px; flex:0 0 auto;
}
.hpd-dev-ico svg{ width:22px; height:22px; }

.hpd-dev-card h3{ font-size:1.1rem; line-height:1.3; color:var(--hpd-slate); margin:0 0 .5rem; }
.hpd-dev-card p{ font-size:.92rem; line-height:1.6; color:var(--hpd-grey); margin:0 0 1rem; }

/* "Best for" mini-list inside service cards */
.hpd-dev-best{ margin:auto 0 1.1rem; }
.hpd-dev-best__label{
  display:block; font-size:11px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--hpd-slate); margin:0 0 8px;
}
.hpd-dev-best ul{ list-style:none; margin:0; padding:0; }
.hpd-dev-best li{
  position:relative; padding-left:22px; margin:0 0 6px;
  font-size:.86rem; line-height:1.45; color:var(--hpd-grey);
}
.hpd-dev-best li::before{
  content:""; position:absolute; left:2px; top:.36em;
  width:9px; height:5px; border-left:2px solid var(--hpd-orange);
  border-bottom:2px solid var(--hpd-orange); transform:rotate(-45deg);
}

/* quiet text-link CTA */
.hpd-dev-link{
  margin-top:auto; align-self:flex-start;
  display:inline-flex; align-items:center; gap:7px;
  font-size:.9rem; font-weight:600; text-decoration:none; color:var(--hpd-slate);
  transition:color .18s ease;
}
.hpd-dev-link svg{ transition:transform .18s ease; }
.hpd-dev-link:hover{ color:var(--hpd-orange); }
.hpd-dev-link:hover svg{ transform:translateX(3px); }

/* ---- Buttons ---- */
.hpd-dev-btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:1.5rem; }
.hpd-dev-btn{
  box-sizing:border-box; max-width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 24px; border-radius:6px;
  font-size:.95rem; font-weight:600; text-decoration:none;
  transition:background-color .18s ease, border-color .18s ease;
}
.hpd-dev-btn--primary{ background:var(--hpd-orange); color:var(--hpd-slate); }
.hpd-dev-btn--primary:hover{ background:#e9861a; }
.hpd-dev-btn--ghost{ background:transparent; color:var(--hpd-slate); border:1px solid #cfd3d2; }
.hpd-dev-btn--ghost:hover{ border-color:var(--hpd-slate); }

/* ---- Hero ---- */
.hpd-dev-hero{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem, 4vw, 3rem);
  align-items:center;
}
@media (max-width:820px){ .hpd-dev-hero{ grid-template-columns:1fr; } }
.hpd-dev-hero__title{
  font-size:clamp(1.7rem, 3.6vw, 2.5rem); line-height:1.15; color:var(--hpd-slate); margin:0 0 .5rem;
}
.hpd-dev-hero__sub{
  font-size:clamp(1.05rem, 1.6vw, 1.2rem); line-height:1.4; color:var(--hpd-orange);
  font-weight:600; margin:0 0 1rem;
}
.hpd-dev-hero__body p{ font-size:1rem; line-height:1.65; color:var(--hpd-grey); margin:0 0 1rem; }

/* ---- Image panel (hero + any card that later wants one) ---- */
.hpd-dev-media{
  position:relative; border-radius:12px; overflow:hidden; min-height:300px;
  background-color:#f7f5f1;
  background-image:
    linear-gradient(rgba(51,63,72,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51,63,72,.045) 1px, transparent 1px);
  background-size:16px 16px;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
@media (max-width:820px){ .hpd-dev-media{ min-height:220px; } }
.hpd-dev-img,
.hpd-dev-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hpd-dev-ph{
  font-size:.72rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  color:#9a9d98; padding:0 20px;
}

/* ---- Checklist (Why start from existing designs) ---- */
.hpd-dev-check{ list-style:none; margin:1.25rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:10px 26px; }
.hpd-dev-check li{
  position:relative; padding-left:28px; font-size:.95rem; line-height:1.5; color:var(--hpd-grey);
}
.hpd-dev-check li::before{
  content:""; position:absolute; left:4px; top:.3em;
  width:11px; height:6px; border-left:2.5px solid var(--hpd-orange);
  border-bottom:2.5px solid var(--hpd-orange); transform:rotate(-45deg);
}

/* ---- Two-column "what we help / what needs a different approach" ---- */
.hpd-dev-split{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:1.5rem; }
@media (max-width:720px){ .hpd-dev-split{ grid-template-columns:1fr; } }
.hpd-dev-panel{ background:#fff; border:1px solid #e7e7e1; border-radius:12px; padding:24px 24px 8px; }
.hpd-dev-panel h3{ font-size:1.1rem; color:var(--hpd-slate); margin:0 0 1rem; }
.hpd-dev-panel ul{ list-style:none; margin:0; padding:0; }
.hpd-dev-panel li{ position:relative; padding:0 0 14px 28px; font-size:.92rem; line-height:1.5; color:var(--hpd-grey); }
.hpd-dev-panel--yes li::before{
  content:""; position:absolute; left:4px; top:.3em; width:11px; height:6px;
  border-left:2.5px solid var(--hpd-orange); border-bottom:2.5px solid var(--hpd-orange); transform:rotate(-45deg);
}
.hpd-dev-panel--no li::before{
  content:""; position:absolute; left:3px; top:.62em; width:12px; height:2px; background:#c2c6c4;
}

/* ---- Process steps ---- */
.hpd-dev-steps{ list-style:none; margin:1.75rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(5, 1fr); gap:18px; }
@media (max-width:900px){ .hpd-dev-steps{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .hpd-dev-steps{ grid-template-columns:1fr; } }
.hpd-dev-step{
  background:#fff; border:1px solid #e7e7e1; border-radius:12px; padding:22px 20px;
}
.hpd-dev-step__n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; background:#fdecd6;
  color:var(--hpd-slate); font-weight:700; font-size:.95rem; margin-bottom:12px;
}
.hpd-dev-step h3{ font-size:1rem; color:var(--hpd-slate); margin:0 0 .4rem; line-height:1.3; }
.hpd-dev-step p{ font-size:.88rem; line-height:1.55; color:var(--hpd-grey); margin:0; }

/* ---- Compact signpost strip (Services that work together) ---- */
.hpd-dev-sign{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:12px; }
.hpd-dev-sign a{
  display:flex; align-items:center; gap:16px; text-decoration:none;
  background:#fff; border:1px solid #e7e7e1; border-radius:10px; padding:16px 18px;
  transition:border-color .15s ease, transform .15s ease;
}
.hpd-dev-sign a:hover{ border-color:var(--hpd-orange); transform:translateX(2px); }
.hpd-dev-sign__t{ flex:0 0 auto; min-width:210px; font-weight:600; color:var(--hpd-slate); font-size:.98rem; }
.hpd-dev-sign__d{ flex:1 1 auto; color:var(--hpd-grey); font-size:.9rem; line-height:1.45; }
.hpd-dev-sign__a{ flex:0 0 auto; color:var(--hpd-orange); font-weight:600; }
@media (max-width:640px){
  .hpd-dev-sign a{ flex-wrap:wrap; gap:6px; }
  .hpd-dev-sign__t{ min-width:0; width:100%; }
  .hpd-dev-sign__a{ display:none; }
}

/* ---- Final CTA ---- */
.hpd-dev-final{ text-align:center; }
.hpd-dev-final .hpd-dev-intro{ margin-left:auto; margin-right:auto; }
.hpd-dev-final .hpd-dev-btns{ justify-content:center; }