.hk-directory__hero{background:var(--color-green);color:#fff;padding:clamp(3rem,6vw,5rem) 0}
.hk-directory__hero .eyebrow{color:var(--color-tan)}
.hk-directory__hero h1{font-size:clamp(2rem,4vw,3.5rem);line-height:1.1;max-width:52rem;margin:.65rem 0 1rem}
.hk-directory__hero p{max-width:48rem;color:rgba(255,255,255,.8)}
.hk-directory__hero form{max-width:44rem;margin-top:2rem}
.hk-directory__hero label,.hk-directory__filters label{display:block;font-weight:600;font-size:.85rem;margin-bottom:.4rem}
.hk-directory__search{display:flex;gap:.65rem}
.hk-directory__search input{flex:1;min-width:0;padding:.8rem 1rem;border:1px solid var(--color-border);font:inherit}
.hk-directory__layout,.hk-directory__profile{display:grid;gap:clamp(2rem,4vw,4rem);padding-block:3rem}
.hk-directory__layout{grid-template-columns:minmax(0,1fr);gap:1.25rem}
.hk-directory__profile{grid-template-columns:minmax(0,2fr) minmax(15rem,1fr)}
.hk-directory__filters,.hk-directory__sidebar{align-self:start}
.hk-directory__sidebar section{padding:1.5rem;background:var(--color-bg-card);border:1px solid var(--color-border);margin-bottom:1rem}
.hk-directory__breadcrumb{margin-bottom:1.3rem}
.hk-directory__breadcrumb a{text-decoration:underline}
.hk-directory__intro{margin-top:1rem}
.hk-directory__actions{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.5rem}
.hk-directory__body>figure{margin:0}
.hk-directory__body>figure img{width:100%;max-height:30rem;object-fit:cover}
.hk-directory__body section{border-top:1px solid var(--color-border);padding-top:2rem;margin-top:2rem}
.hk-directory__body h2,.hk-directory__sidebar h2{font-size:1.5rem;margin-bottom:1rem}
.hk-directory__sidebar p+p{margin-top:1rem}
.hk-directory__tags{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1rem}
.hk-directory__tags li{border:1px solid var(--color-border);padding:.6rem .9rem;background:var(--color-bg-card);transition:border-color .15s ease,background-color .15s ease}

/* The species list under a business reads as buttons but every item is a
   link to a species page. They must look and behave like links: a link
   colour, and a visible hover. */
.hk-directory__tags li a{color:var(--color-link);text-decoration:none;font-weight:500}
.hk-directory__tags li:hover,.hk-directory__tags li:focus-within{border-color:var(--color-link);background:color-mix(in srgb,var(--color-link) 6%,var(--color-bg-card))}
.hk-directory__tags li:hover a,.hk-directory__tags li:focus-within a,
.hk-directory__tags li a:hover,.hk-directory__tags li a:focus-visible{color:var(--color-link-hover);text-decoration:underline;text-underline-offset:.18em}
@media(max-width:1000px){.hk-directory__profile{grid-template-columns:1fr}} 
@media(max-width:800px){.hk-directory__search{flex-wrap:wrap}.hk-directory__search .btn{width:100%}.hk-directory__hero{padding-block:2.5rem}.hk-directory__layout,.hk-directory__profile{padding-block:2rem}}

.hk-directory__hero--business{position:relative;isolation:isolate;display:block;overflow:hidden}

/* Hero overlay: a colour wash sitting between the background image and the
   text. Colour and strength come from the per-business ACF fields. */
.hk-hero__shade,.hk-directory__hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Two-column hero: text lower-left, featured card upper-right hanging
 * ~50px below the band edge. Same geometry as the From the Cab hero so the
 * site reads as one design system rather than two. */
/* The card is the tallest item and hangs below the band, so its height sets
 * the band's height and leaves the text floating with large gaps above and
 * below. Capping the card's height is what actually brings the padding down;
 * plain padding values cannot, because the row is as tall as the card. */
.hk-directory__hero-grid{position:relative;z-index:2;width:100%;display:grid;gap:2.5rem;align-items:center;padding-block:2.75rem}
.hk-directory__hero-inner{max-width:44rem}
.hk-directory__hero-featured{overflow:hidden;margin:0;aspect-ratio:3/2;width:100%;max-width:27rem;justify-self:end;align-self:center;background:var(--color-bg-card);border-radius:var(--radius-card);box-shadow:0 18px 30px -8px rgba(31,36,32,.35)}
.hk-directory__hero-featured img{width:100%;height:100%;object-fit:cover;display:block}
.hk-directory__hero-featured--empty{background:var(--color-hero-placeholder)}
@media(min-width:1024px){.hk-directory__hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,34rem);gap:3rem}}
/* The card hangs below the band, so the profile section clears it. */
.hk-directory__hero--business+.hk-directory__profile{padding-top:3rem}
@media(max-width:1023px){.hk-directory__hero-featured{max-width:100%}.hk-directory__hero--business+.hk-directory__profile{padding-top:2rem}}



.hk-directory__logo{display:inline-flex;align-items:center;justify-content:center;max-width:11rem;max-height:6rem;padding:.5rem;margin-bottom:1.25rem;background:#fff}
.hk-directory__logo img{max-width:100%;max-height:5rem;object-fit:contain}
.hk-directory__gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;border:0!important;padding-top:0!important;margin-top:0!important}
.hk-directory__gallery figure{margin:0}
.hk-directory__gallery img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hk-directory__map-frame{aspect-ratio:4/3;margin-bottom:.75rem;background:var(--color-bg)}
.hk-directory__map-frame iframe{width:100%;height:100%;border:0}
.hk-directory__custom{min-width:0;overflow:hidden;padding-bottom:clamp(2rem,5vw,4rem)}
.hk-directory__disclosure{margin:0 0 2rem;padding:1rem 1.25rem;border:1px solid var(--color-border);border-left:4px solid var(--color-tan);background:var(--color-bg-card)}
.hk-directory__disclosure p{margin:0}
.hk-directory__card-disclosure{display:block;margin:.35rem 0 .5rem;padding:.4rem .6rem;border-left:3px solid var(--color-tan);background:var(--color-bg-card);font-size:.8125rem;line-height:1.4}
.hk-directory__checked{margin:0 0 2rem;padding:1rem 1.25rem;border:1px solid var(--color-border);border-left:4px solid var(--color-green);background:var(--color-bg-card)}
.hk-directory__checked p{margin:0}
.hk-directory__checked-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-green);margin-bottom:.35rem!important}
.hk-directory__disclosure-label{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--color-green);margin-bottom:.35rem!important}
.hk-directory__custom:empty{display:none}
@media(max-width:600px){.hk-directory__hero-grid{padding-block:2rem}.hk-directory__hero--business{min-height:0}.hk-directory__gallery{grid-template-columns:1fr}}

.hk-directory__layout--unfiltered{display:block}
.hk-directory__hero .hk-directory__search .btn{background:#fff;border-color:#fff;color:var(--color-green);font-weight:700}
.hk-directory__hero .hk-directory__search .btn:hover,.hk-directory__hero .hk-directory__search .btn:focus-visible{background:var(--color-bg);color:var(--color-green-dark)}

.hk-directory__card-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.6rem}
.hk-directory__card-tags li{padding:.15rem .5rem;border:1px solid var(--color-border);font-size:.75rem}
.hk-directory__card-services{margin-top:.5rem;color:var(--color-text-muted);font-size:.8rem}
.hk-directory__confirmed{margin-top:.5rem;color:var(--color-green);font-size:.8rem;font-weight:600}

.hk-directory__map-frame{aspect-ratio:16/9;max-height:220px;margin-top:.75rem}
.hk-directory__map>a{display:inline-block;color:var(--color-green);font-weight:600}

/* Registered details: sits quietly, it is reference not headline. */
.hk-directory__legal p {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	line-height: 1.5;
}

.hk-directory__legal p strong {
	display: block;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-tan);
	margin-bottom: 0.125rem;
}

.hk-directory__legal-note {
	margin-top: 0.875rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-border-soft);
	font-size: 0.75rem !important;
	color: var(--color-text-muted);
}

/*
 * Social links in the profile sidebar. They are external links and had no
 * hover state at all - the colour never changed, so nothing confirmed they
 * were interactive.
 */
.hk-directory__contact a[target="_blank"],
.hk-directory a[target="_blank"] {
	color: var(--color-link);
	text-decoration: none;
	transition: color .15s ease, text-decoration-color .15s ease;
}

.hk-directory__contact a[target="_blank"]:hover,
.hk-directory__contact a[target="_blank"]:focus-visible,
.hk-directory a[target="_blank"]:hover,
.hk-directory a[target="_blank"]:focus-visible {
	color: var(--color-link-hover);
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* Plan badges and featured cards (Hawksbury_Directory_Tiers). */
.hk-directory__badge{display:inline-block;margin:.35rem 0 0;padding:.15rem .55rem;border-radius:999px;font-size:.75rem;font-weight:700;letter-spacing:.02em;background:var(--color-bg-soft);color:var(--color-green-dark)}
.hk-directory__badge--featured{background:var(--color-accent-light);color:var(--color-dark)}
.hk-directory__hero .hk-directory__badge{margin:0 0 .75rem;color:var(--color-green-dark)}
.hk-directory__hero .hk-directory__badge--featured{color:var(--color-dark)}

/* Enquiry form on a profile, and the "get listed" panel under results. */
.hk-directory__enquiry{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--color-border)}
.hk-directory__claim a{color:var(--color-green);font-weight:600}
.hk-directory__get-listed{margin-top:2.5rem;padding:1.5rem;background:var(--color-bg-soft);border-radius:var(--radius-card)}
.hk-directory__get-listed h2{font-size:1.25rem;margin:0 0 .5rem}
.hk-directory__get-listed p{margin:0 0 1rem}

.hk-directory__card-media{display:block}
.hk-listing-placeholder{display:flex;align-items:center;gap:clamp(.75rem,3vw,1.25rem);width:100%;aspect-ratio:16/9;padding:clamp(1rem,4vw,1.75rem);background:#f3ecdf;background-image:linear-gradient(135deg,#f6f0e5 0%,#ece2cf 100%);border-bottom:3px solid var(--color-tan);color:var(--color-green);overflow:hidden}
.hk-directory__card .hk-listing-placeholder img{width:auto;height:78%;max-height:9rem;aspect-ratio:auto;object-fit:contain;flex:none;filter:drop-shadow(0 4px 6px rgba(43,33,24,.18))}
.hk-listing-placeholder__text{display:flex;flex-direction:column;gap:.35rem;min-width:0}
.hk-listing-placeholder__name{font-family:var(--font-heading);font-weight:600;font-size:clamp(1.15rem,2.4vw,1.5rem);line-height:1.15;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hk-listing-placeholder__meta{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-tan);font-weight:600}
.hk-listing-placeholder--hero{aspect-ratio:3/2;flex-direction:column;justify-content:center;text-align:center;border-bottom:0;border-radius:inherit}
.hk-listing-placeholder--hero img{width:auto;height:52%;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(43,33,24,.2))}
.hk-listing-placeholder--hero .hk-listing-placeholder__name{font-size:clamp(1.35rem,3vw,1.8rem)}
.hk-directory__hero-featured .hk-listing-placeholder img{width:auto;height:52%;object-fit:contain}

/*
 * Directory grid (16 Oct). The filters sit in one bar above the results
 * instead of a sidebar, so the cards get the full width: three across on a
 * desktop, two on a tablet, one on a phone. The picture is a wide 2:1 strip
 * rather than 16:9, and a listing on the acorn card does not repeat the name,
 * town and type the card already shows. Featured listings span two columns
 * and keep the taller picture, so paying for Featured still reads as bigger.
 */
.hk-directory__filters form{padding:1rem 1.25rem;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-card)}
.hk-directory__filter-panel>summary{display:none}
.hk-directory__filter-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem 1rem;align-items:end}
.hk-directory__filters label{font-size:.8rem;margin-bottom:.3rem}
.hk-directory__filters select{display:block;width:100%;padding:.6rem .7rem;border:1px solid var(--color-border);background:#fff;font:inherit;font-size:.95rem}
.hk-directory__filter-actions{display:flex;align-items:center;gap:1rem;white-space:nowrap}
.hk-directory__filter-actions .btn{padding-block:.6rem}
.hk-directory__filter-actions a{color:var(--color-green);font-weight:600;font-size:.9rem}
.hk-directory__count{margin:0;color:var(--color-text-muted);font-size:.9rem}

.hk-directory__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;gap:1rem;margin:.75rem 0 2rem}
.hk-directory__card{display:flex;flex-direction:column;border:1px solid var(--color-border);background:var(--color-bg-card);border-radius:var(--radius-card);overflow:hidden;transition:border-color .15s ease,box-shadow .15s ease}
.hk-directory__card:hover,.hk-directory__card:focus-within{border-color:var(--color-tan);box-shadow:0 6px 16px -8px rgba(43,33,24,.25)}
.hk-directory__card-media img{width:100%;aspect-ratio:2/1;object-fit:cover;display:block}
.hk-directory__card .hk-listing-placeholder{aspect-ratio:2/1;padding:.9rem 1.1rem;gap:.9rem}
.hk-directory__card .hk-listing-placeholder img{height:82%;max-height:8rem}
.hk-directory__card .hk-listing-placeholder__name{font-size:clamp(1.05rem,1.6vw,1.25rem)}
.hk-directory__card .hk-listing-placeholder__meta{font-size:.7rem}
.hk-directory__card-body{display:flex;flex-direction:column;flex:1;padding:.9rem 1.1rem 1rem}
.hk-directory__card-body .eyebrow{font-size:.7rem;letter-spacing:.18em}
.hk-directory__card h2{font-size:1.2rem;line-height:1.25;margin:.3rem 0 0}
.hk-directory__card-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin:.45rem 0 0}
.hk-directory__card-badges .hk-directory__badge{margin:0}
.hk-directory__card-excerpt{margin:.45rem 0 0;font-size:.9rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hk-directory__link{display:inline-block;margin-top:auto;padding-top:.7rem;color:var(--color-green);font-weight:600;font-size:.9rem}
/* The acorn card already carries the name, town and type. */
.hk-directory__card--placeholder .hk-directory__card-body>.eyebrow,
.hk-directory__card--placeholder .hk-directory__card-body>h2{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hk-directory__card--placeholder .hk-directory__card-badges{margin-top:0}
/* Featured: two columns wide, picture on the left, so it stands out without
   stretching the cards beside it. */
.hk-directory__card--featured{grid-column:span 2;flex-direction:row;border-color:var(--color-accent);box-shadow:0 0 0 1px var(--color-accent)}
.hk-directory__card--featured .hk-directory__card-media{flex:0 0 55%;display:flex}
.hk-directory__card--featured .hk-directory__card-media>img,
.hk-directory__card--featured .hk-listing-placeholder{aspect-ratio:auto;height:100%;min-height:12rem;border-bottom:0;border-right:3px solid var(--color-tan)}
.hk-directory__card--featured .hk-listing-placeholder__name{font-size:clamp(1.25rem,2vw,1.55rem)}
.hk-directory__card--featured .hk-directory__card-body{padding:1.1rem 1.25rem}

@media(max-width:1023px){.hk-directory__cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){
	.hk-directory__filters form{padding:0}
	.hk-directory__filter-panel>summary{display:flex;align-items:center;justify-content:space-between;padding:.8rem 1rem;font-weight:600;cursor:pointer;list-style:none}
	.hk-directory__filter-panel>summary::-webkit-details-marker{display:none}
	.hk-directory__filter-panel>summary::after{content:"+";font-size:1.25rem;line-height:1;color:var(--color-green)}
	.hk-directory__filter-panel[open]>summary::after{content:"\2212"}
	.hk-directory__filter-panel[open]>summary{border-bottom:1px solid var(--color-border)}
	.hk-directory__filter-fields{grid-template-columns:repeat(2,minmax(0,1fr));padding:1rem}
	.hk-directory__filter-actions{grid-column:1/-1}
}
@media(max-width:600px){
	.hk-directory__cards{grid-template-columns:minmax(0,1fr);gap:.85rem}
	.hk-directory__card--featured{grid-column:auto;flex-direction:column}
	.hk-directory__card--featured .hk-directory__card-media{flex:none;display:block}
	.hk-directory__card--featured .hk-listing-placeholder,.hk-directory__card--featured .hk-directory__card-media>img{height:auto;min-height:0;border-right:0;border-bottom:3px solid var(--color-tan);aspect-ratio:5/2}
	.hk-directory__card .hk-listing-placeholder,.hk-directory__card-media>img{aspect-ratio:5/2}
	.hk-directory__card .hk-listing-placeholder__name{font-size:1.2rem}
}

/* Directory archive hero look, set in Timber Businesses → Directory settings
   (or on a type/region page). Only applied once an image, colour or height is
   chosen; otherwise the band above is untouched. */
.hk-directory__hero--custom{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.hk-directory__hero--custom>:not(.hk-hero__shade){position:relative;z-index:2;width:100%}
.hk-directory__hero--custom.hk-directory__hero--compact{padding-block:clamp(2rem,4vw,3rem)}
.hk-directory__hero--custom.hk-directory__hero--tall{padding-block:clamp(4rem,8vw,6.5rem)}

/* Regular stock on a yard's listing. */
.hk-directory__stock-scroll{overflow-x:auto;margin:0 0 .75rem}
.hk-directory__stock-table{width:100%;border-collapse:collapse;font-size:.95rem}
.hk-directory__stock-table th,.hk-directory__stock-table td{padding:.55rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border)}
.hk-directory__stock-table th{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--color-green);background:var(--color-bg-card)}
.hk-directory__stock-table td:first-child{font-weight:600}
.hk-directory__stock-note{font-size:.85rem;color:var(--color-text-muted,#5b5b5b)}